diff --git a/.gitignore b/.gitignore
index 502ad6ed..6ebd40ff 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,6 +31,18 @@ release-builds/
 scripts/i18n_report*
 *wallet-storage.json
 
+# Local dev/preview console captures
+devserver*.err
+devserver*.out
+preview*.err
+preview*.out
+previewserver*.err
+previewserver*.out
+
+# Local external reference workspaces
+/external/qapp-core-inspect/
+/external/quittersource/
+
 squashfs-root/
 appimagetool-x86_64.AppImage
 *.bak
diff --git a/electron/package.json b/electron/package.json
index b535920a..4ff505a7 100644
--- a/electron/package.json
+++ b/electron/package.json
@@ -45,11 +45,13 @@
     "electron-unhandled": "~4.0.1",
     "electron-updater": "^6.6.2",
     "electron-window-state": "^5.0.3",
-    "extract-zip": "^2.0.1"
+    "extract-zip": "^2.0.1",
+     "write-file-atomic": "^7.0.1"
   },
   "devDependencies": {
     "@electron/notarize": "^2.5.0",
     "@electron/rebuild": "^3.7.2",
+    "@types/write-file-atomic": "^4.0.3",
     "electron": "^32.3.1",
     "electron-builder": "^25.1.8",
     "shelljs": "^0.8.5",
diff --git a/electron/src/core.ts b/electron/src/core.ts
index cafe0b10..f061ff9a 100644
--- a/electron/src/core.ts
+++ b/electron/src/core.ts
@@ -1825,13 +1825,12 @@ export async function downloadCoreWindows() {
 
 export async function installCore(executeProgress) {
   executeProgress();
-  return new Promise(async (res, rej) => {
-    if (process.platform === 'win32') {
-      await downloadCoreWindows();
-    } else {
-      await javaversion();
-    }
-  });
+  if (process.platform === 'win32') {
+    await downloadCoreWindows();
+  } else {
+    await javaversion();
+  }
+  return true;
 }
 
 export async function startCore() {
@@ -2184,6 +2183,28 @@ export async function bootstrap(): Promise<boolean> {
   }
 }
 
+/** When Core can reach `/admin/bootstrap`, runs existing {@link bootstrap}. Otherwise deletes chain `db` (if needed) and {@link startCore}. */
+export async function bootstrapOrClearChainAndStart(): Promise<boolean> {
+  try {
+    const isInstalled = await isCoreInstalled();
+    if (!isInstalled) return false;
+
+    const running = await isCoreRunning();
+    if (running) {
+      const bootOk = await bootstrap();
+      if (bootOk) return true;
+    }
+
+    const delOk = await deleteDB();
+    if (!delOk && (await dbExists())) return false;
+
+    await startCore();
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
 const rmAsync = promisify(fs.rm ?? fs.rmdir); // Node 14+ supports fs.rm
 
 async function readJsonIfExists<T = any>(file: string): Promise<T | null> {
diff --git a/electron/src/index.ts b/electron/src/index.ts
index f5ba3515..441bee6d 100644
--- a/electron/src/index.ts
+++ b/electron/src/index.ts
@@ -17,6 +17,9 @@ import {
 import { log as loggerLog, error as loggerError } from './logger';
 import {
   ElectronCapacitorApp,
+  flushMiscPersistentStore,
+  flushPersistentStore,
+  loadPersistedAllowedDomainsAtStartup,
   setupContentSecurityPolicy,
   setupReloadWatcher,
 } from './setup';
@@ -141,9 +144,7 @@ async function setupMultiInstanceUserData(basePort = 55000, maxInstances = 10) {
     if (!(await isPortTaken(port))) {
       // First instance — use default Electron behavior
       if (i === 0) {
-        loggerLog(
-          `🟢 Using default userData path: ${app.getPath('userData')}`
-        );
+        loggerLog(`🟢 Using default userData path: ${app.getPath('userData')}`);
       } else {
         const instanceName = `qortal-instance-${i + 1}`;
         const userDataPath = path.join(app.getPath('appData'), instanceName);
@@ -163,10 +164,12 @@ async function setupMultiInstanceUserData(basePort = 55000, maxInstances = 10) {
 
 // Run Application
 (async () => {
-  setupMultiInstanceUserData();
+  await setupMultiInstanceUserData();
 
   await app.whenReady();
 
+  loadPersistedAllowedDomainsAtStartup();
+
   // Set Content Security Policy
   setupContentSecurityPolicy(myCapacitorApp.getCustomURLScheme());
 
@@ -193,6 +196,8 @@ async function setupMultiInstanceUserData(basePort = 55000, maxInstances = 10) {
 // Set isQuitting flag before the app quits
 app.on('before-quit', () => {
   setIsQuitting(true);
+  flushPersistentStore();
+  flushMiscPersistentStore();
 });
 
 // Handle when all of our windows are close (platforms have their own expectations).
diff --git a/electron/src/preload.ts b/electron/src/preload.ts
index ed204df6..a15b0b91 100644
--- a/electron/src/preload.ts
+++ b/electron/src/preload.ts
@@ -8,7 +8,23 @@ import { contextBridge, shell, ipcRenderer } from 'electron';
 try {
   // Expose Electron API
   contextBridge.exposeInMainWorld('electronAPI', {
-    openExternal: (url) => shell.openExternal(url),
+    openExternal: (url: string) => {
+      if (typeof url !== 'string') {
+        return;
+      }
+      try {
+        const parsed = new URL(url.trim());
+        if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+          return;
+        }
+        if (!parsed.hostname) {
+          return;
+        }
+        void shell.openExternal(parsed.toString());
+      } catch {
+        // Invalid URL
+      }
+    },
     setAllowedDomains: (domains) => {
       ipcRenderer.send('set-allowed-domains', domains);
     },
@@ -18,8 +34,18 @@ try {
     windowMinimize: () => ipcRenderer.invoke('window:minimize'),
     windowMaximize: () => ipcRenderer.invoke('window:maximize'),
     windowClose: () => ipcRenderer.invoke('window:close'),
+    focusWindow: () => ipcRenderer.invoke('window:focus'),
     getWindowState: () =>
       ipcRenderer.invoke('window:isMaximized').then((isMaximized: boolean) => ({ isMaximized })),
+    onWindowStateChange: (callback: (state: { isMaximized: boolean }) => void) => {
+      const handler = (_event, isMaximized: boolean) => {
+        callback({ isMaximized });
+      };
+      ipcRenderer.on('window:state-changed', handler);
+      return () => {
+        ipcRenderer.removeListener('window:state-changed', handler);
+      };
+    },
     getPlatform: () => ipcRenderer.invoke('window:getPlatform'),
     showAppMenu: (x?: number, y?: number) =>
       ipcRenderer.invoke('window:showAppMenu', { x, y }),
@@ -48,6 +74,31 @@ try {
       ipcRenderer.invoke('file:deleteFile', filePath),
   });
 
+    // Generic persistent store (persistent-store.json, in-memory cache + debounced writes in main)
+  contextBridge.exposeInMainWorld('appStorage', {
+    get: async (key) => {
+      return ipcRenderer.invoke('persistentStore:get', key);
+    },
+    set: async (key, value) => {
+      return ipcRenderer.invoke('persistentStore:set', key, value);
+    },
+    delete: async (key) => {
+      return ipcRenderer.invoke('persistentStore:delete', key);
+    },
+  });
+
+  contextBridge.exposeInMainWorld('miscStorage', {
+    get: async (key) => {
+      return ipcRenderer.invoke('miscPersistentStore:get', key);
+    },
+    set: async (key, value) => {
+      return ipcRenderer.invoke('miscPersistentStore:set', key, value);
+    },
+    delete: async (key) => {
+      return ipcRenderer.invoke('miscPersistentStore:delete', key);
+    },
+  });
+
   // Expose it
   contextBridge.exposeInMainWorld('walletStorage', {
     get: async (key) => {
@@ -148,6 +199,12 @@ try {
       const raw = await ipcRenderer.invoke('coreSetup:bootstrap');
       return raw;
     },
+    bootstrapOrClearChainAndStart: async () => {
+      const raw = await ipcRenderer.invoke(
+        'coreSetup:bootstrapOrClearChainAndStart'
+      );
+      return raw;
+    },
     onProgress: (cb: (p: any) => void) => {
       const h = (_e: unknown, p: any) => cb(p);
       ipcRenderer.on('coreSetup:progress', h);
diff --git a/electron/src/setup.ts b/electron/src/setup.ts
index dc136801..78eddd97 100644
--- a/electron/src/setup.ts
+++ b/electron/src/setup.ts
@@ -25,6 +25,7 @@ import { log as loggerLog, error as loggerError } from './logger';
 import { myCapacitorApp, isQuitting, setIsQuitting } from '.';
 import {
   bootstrap,
+  bootstrapOrClearChainAndStart,
   customQortalInstalledDir,
   dbExists,
   deleteDB,
@@ -55,6 +56,8 @@ import {
 const AdmZip = require('adm-zip');
 const fs = require('fs');
 const path = require('path');
+const writeFileAtomic = require('write-file-atomic');
+
 
 const defaultDomains = [
   'capacitor-electron://-',
@@ -80,6 +83,80 @@ const defaultDomains = [
 const domainHolder = {
   allowedDomains: [...defaultDomains],
 };
+
+/** Same path layout as `getSharedSettingsFilePath('wallet-storage.json')` (preload `walletStorage`). */
+function getWalletStorageJsonPathSync(): string {
+  return path.join(app.getPath('appData'), 'qortal-hub', 'wallet-storage.json');
+}
+
+function readCustomNodeUrlsFromWalletStorageFile(): string[] {
+  try {
+    const filePath = getWalletStorageJsonPathSync();
+    if (!fs.existsSync(filePath)) return [];
+    const raw = fs.readFileSync(filePath, 'utf-8');
+    const data = JSON.parse(raw) as { customNodes?: unknown };
+    const nodes = data?.customNodes;
+    if (!Array.isArray(nodes)) return [];
+    return nodes
+      .map((n: { url?: unknown }) =>
+        typeof n?.url === 'string' ? n.url.trim() : ''
+      )
+      .filter(Boolean);
+  } catch {
+    return [];
+  }
+}
+
+function mergeUserDomainsIntoAllowlist(domains: string[]): string[] {
+  const validatedUserDomains = domains
+    .flatMap((domain) => {
+      try {
+        const url = new URL(domain);
+        const protocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
+        const socketUrl = `${protocol}//${url.hostname}${url.port ? ':' + url.port : ''}`;
+        return [url.origin, socketUrl];
+      } catch {
+        return [];
+      }
+    })
+    .filter(Boolean) as string[];
+
+  return [...new Set([...defaultDomains, ...validatedUserDomains])];
+}
+
+function applyAllowedDomainsFromUserUrls(
+  domains: string[],
+  options: { reloadWindow: boolean }
+): void {
+  if (!Array.isArray(domains)) {
+    return;
+  }
+  const newAllowedDomains = mergeUserDomainsIntoAllowlist(domains);
+  const sortedCurrentDomains = [...domainHolder.allowedDomains].sort();
+  const sortedNewDomains = [...newAllowedDomains].sort();
+  const hasChanged =
+    sortedCurrentDomains.length !== sortedNewDomains.length ||
+    sortedCurrentDomains.some(
+      (domain, index) => domain !== sortedNewDomains[index]
+    );
+
+  if (hasChanged) {
+    domainHolder.allowedDomains = newAllowedDomains;
+
+    if (options.reloadWindow) {
+      const mainWindow = myCapacitorApp.getMainWindow();
+      if (mainWindow && !mainWindow.isDestroyed()) {
+        mainWindow.webContents.reload();
+      }
+    }
+  }
+}
+
+/** Apply custom node URLs from wallet storage before the web app loads (no window reload). */
+export function loadPersistedAllowedDomainsAtStartup(): void {
+  const urls = readCustomNodeUrlsFromWalletStorageFile();
+  applyAllowedDomainsFromUserUrls(urls, { reloadWindow: false });
+}
 // Define components for a watcher to detect when the webapp is changed so we can reload in Dev mode.
 const reloadWatcher = {
   debouncer: null,
@@ -200,6 +277,12 @@ export class ElectronCapacitorApp {
       },
     });
     this.mainWindowState.manage(this.MainWindow);
+    this.MainWindow.on('maximize', () => {
+      this.MainWindow?.webContents.send('window:state-changed', true);
+    });
+    this.MainWindow.on('unmaximize', () => {
+      this.MainWindow?.webContents.send('window:state-changed', false);
+    });
 
     if (this.CapacitorFileConfig.backgroundColor) {
       this.MainWindow.setBackgroundColor(
@@ -395,6 +478,7 @@ export function setupContentSecurityPolicy(customScheme: string): void {
         customScheme,
         ...new Set(expandedDomains),
       ];
+
       const frameSources = [
         "'self'",
         'http://localhost:*',
@@ -480,45 +564,7 @@ ipcMain.on('set-allowed-domains', (event, domains: string[]) => {
   if (!Array.isArray(domains)) {
     return;
   }
-  // Validate and transform user-provided domains
-  const validatedUserDomains = domains
-    .flatMap((domain) => {
-      try {
-        const url = new URL(domain);
-        const protocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
-        const socketUrl = `${protocol}//${url.hostname}${url.port ? ':' + url.port : ''}`;
-        return [url.origin, socketUrl];
-      } catch {
-        return [];
-      }
-    })
-    .filter(Boolean) as string[];
-
-  // Combine default and validated user domains
-  const newAllowedDomains = [
-    ...new Set([...defaultDomains, ...validatedUserDomains]),
-  ];
-
-  // Sort both current allowed domains and new domains for comparison
-  const sortedCurrentDomains = [...domainHolder.allowedDomains].sort();
-  const sortedNewDomains = [...newAllowedDomains].sort();
-
-  // Check if the lists are different
-  const hasChanged =
-    sortedCurrentDomains.length !== sortedNewDomains.length ||
-    sortedCurrentDomains.some(
-      (domain, index) => domain !== sortedNewDomains[index]
-    );
-
-  // If there's a change, update allowedDomains and reload the window
-  if (hasChanged) {
-    domainHolder.allowedDomains = newAllowedDomains;
-
-    const mainWindow = myCapacitorApp.getMainWindow();
-    if (mainWindow && !mainWindow.isDestroyed()) {
-      mainWindow.webContents.reload();
-    }
-  }
+  applyAllowedDomainsFromUserUrls(domains, { reloadWindow: true });
 });
 
 // Custom title bar: window controls (minimize, maximize, close)
@@ -540,6 +586,14 @@ ipcMain.handle('window:close', () => {
   if (win && !win.isDestroyed()) win.close();
 });
 
+ipcMain.handle('window:focus', () => {
+  const win = myCapacitorApp.getMainWindow();
+  if (win && !win.isDestroyed()) {
+    win.show();
+    win.focus();
+  }
+});
+
 ipcMain.handle('window:isMaximized', () => {
   const win = myCapacitorApp.getMainWindow();
   return win != null && !win.isDestroyed() && win.isMaximized();
@@ -631,6 +685,168 @@ export async function getSharedSettingsFilePath(
   return path.join(dir, fileName);
 }
 
+// Persistent store: shared across instances via atomic writes to appData/qortal-hub/
+// Uses write-file-atomic to prevent partial writes corrupting the file.
+// On set/delete: read-from-disk → merge → atomic write, so concurrent instances
+// never overwrite each other's keys (only a simultaneous write of the *same* key
+// by two instances at the exact same moment could still race, which is acceptable).
+const PERSISTENT_STORE_FILENAME = 'qortal-persistent-store.json';
+const MISC_PERSISTENT_STORE_FILENAME = 'misc-persist.json';
+
+function parsePersistentStoreRaw(raw: string): Record<string, unknown> {
+  const trimmed = raw?.trim() ?? '';
+  if (trimmed === '') return {};
+  try {
+    return (JSON.parse(trimmed) as Record<string, unknown>) || {};
+  } catch (_) {
+    return {};
+  }
+}
+
+function createPersistentJsonStore(fileName: string, label: string) {
+  let cache: Record<string, unknown> | null = null;
+  let loadedFromDisk = false;
+
+  const getFilePath = (): string => {
+    const dir = path.join(app.getPath('appData'), 'qortal-hub');
+    if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+    return path.join(dir, fileName);
+  };
+
+  const readFromDisk = async (): Promise<Record<string, unknown>> => {
+    try {
+      const filePath = getFilePath();
+      const stats = await fs.promises.stat(filePath).catch(() => null);
+      if (!stats?.isFile()) return {};
+      const raw = await fs.promises.readFile(filePath, 'utf-8');
+      return parsePersistentStoreRaw(raw);
+    } catch (err) {
+      loggerError(`Error reading ${label} from disk`, err);
+      return {};
+    }
+  };
+
+  const load = async (): Promise<Record<string, unknown>> => {
+    if (cache !== null) return cache;
+    const data = await readFromDisk();
+    const hadData = Object.keys(data).length > 0;
+    cache = data;
+    if (hadData) loadedFromDisk = true;
+    return cache;
+  };
+
+  const flush = (): void => {
+    if (cache === null) return;
+    if (!loadedFromDisk && Object.keys(cache).length === 0) {
+      return;
+    }
+    try {
+      const filePath = getFilePath();
+      let onDisk: Record<string, unknown> = {};
+      if (fs.existsSync(filePath)) {
+        try {
+          onDisk = parsePersistentStoreRaw(fs.readFileSync(filePath, 'utf-8'));
+        } catch (_) {
+          onDisk = {};
+        }
+      }
+      const merged = { ...onDisk, ...cache };
+      writeFileAtomic.sync(filePath, JSON.stringify(merged, null, 2), {
+        encoding: 'utf8',
+      });
+    } catch (err) {
+      loggerError(`Error flushing ${label}`, err);
+    }
+  };
+
+  const get = async (key: string): Promise<unknown> => {
+    const store = await load();
+    return store[key];
+  };
+
+  const set = async (key: string, value: unknown): Promise<void> => {
+    // Read-merge-write: fetch fresh disk state, merge the new key, write atomically.
+    // This ensures concurrent instances don't clobber each other's unrelated keys.
+    const onDisk = await readFromDisk();
+    onDisk[key] = value;
+    try {
+      const filePath = getFilePath();
+      await writeFileAtomic(filePath, JSON.stringify(onDisk, null, 2), {
+        encoding: 'utf8',
+      });
+    } catch (err) {
+      loggerError(`Error writing ${label} (set)`, err);
+    }
+    if (cache === null) cache = {};
+    cache[key] = value;
+    loadedFromDisk = true;
+  };
+
+  const deleteKey = async (key: string): Promise<void> => {
+    // Read-merge-write: fetch fresh disk state, remove the key, write atomically.
+    const onDisk = await readFromDisk();
+    delete onDisk[key];
+    try {
+      const filePath = getFilePath();
+      await writeFileAtomic(filePath, JSON.stringify(onDisk, null, 2), {
+        encoding: 'utf8',
+      });
+    } catch (err) {
+      loggerError(`Error writing ${label} (delete)`, err);
+    }
+    if (cache !== null) delete cache[key];
+  };
+
+  return { deleteKey, flush, get, set };
+}
+
+const persistentStore = createPersistentJsonStore(
+  PERSISTENT_STORE_FILENAME,
+  'persistent store'
+);
+const miscPersistentStore = createPersistentJsonStore(
+  MISC_PERSISTENT_STORE_FILENAME,
+  'misc persistent store'
+);
+
+export function flushPersistentStore(): void {
+  persistentStore.flush();
+}
+
+export function flushMiscPersistentStore(): void {
+  miscPersistentStore.flush();
+}
+
+ipcMain.handle('persistentStore:get', async (_event, key: string) =>
+  persistentStore.get(key)
+);
+
+ipcMain.handle(
+  'persistentStore:set',
+  async (_event, key: string, value: unknown) => {
+    await persistentStore.set(key, value);
+  }
+);
+
+ipcMain.handle('persistentStore:delete', async (_event, key: string) => {
+  await persistentStore.deleteKey(key);
+});
+
+ipcMain.handle('miscPersistentStore:get', async (_event, key: string) =>
+  miscPersistentStore.get(key)
+);
+
+ipcMain.handle(
+  'miscPersistentStore:set',
+  async (_event, key: string, value: unknown) => {
+    await miscPersistentStore.set(key, value);
+  }
+);
+
+ipcMain.handle('miscPersistentStore:delete', async (_event, key: string) => {
+  await miscPersistentStore.deleteKey(key);
+});
+
 // App settings (stored in SharedSettingsFilePath) - e.g. close/minimize to tray preference
 const APP_SETTINGS_FILENAME = 'app-settings.json';
 
@@ -652,7 +868,8 @@ export async function readAppSettings(): Promise<AppSettings> {
       ...DEFAULT_APP_SETTINGS,
       ...parsed,
       closeAction:
-        parsed.closeAction && ['ask', 'minimizeToTray', 'quit'].includes(parsed.closeAction)
+        parsed.closeAction &&
+        ['ask', 'minimizeToTray', 'quit'].includes(parsed.closeAction)
           ? (parsed.closeAction as CloseAction)
           : DEFAULT_APP_SETTINGS.closeAction,
     };
@@ -663,7 +880,11 @@ export async function readAppSettings(): Promise<AppSettings> {
 
 async function writeAppSettings(settings: AppSettings): Promise<void> {
   const filePath = await getSharedSettingsFilePath(APP_SETTINGS_FILENAME);
-  await fs.promises.writeFile(filePath, JSON.stringify(settings, null, 2), 'utf-8');
+  await fs.promises.writeFile(
+    filePath,
+    JSON.stringify(settings, null, 2),
+    'utf-8'
+  );
 }
 
 // READ handler
@@ -999,7 +1220,7 @@ ipcMain.handle('coreSetup:installCore', async (event) => {
       });
     }
 
-    if (isInstalled) return;
+    if (isInstalled) return true;
     const wc = event.sender;
 
     const sendProgress = (p) => {
@@ -1007,7 +1228,16 @@ ipcMain.handle('coreSetup:installCore', async (event) => {
     };
     const running = await installCore(sendProgress);
     return running;
-  } catch (error) {}
+  } catch (error) {
+    console.error('Failed to install Qortal Core:', error);
+    broadcastProgress({
+      step: 'downloadedCore',
+      status: 'error',
+      progress: 0,
+      message: '010',
+    });
+    return false;
+  }
 });
 
 ipcMain.handle('coreSetup:startCore', async () => {
@@ -1084,6 +1314,14 @@ ipcMain.handle('coreSetup:bootstrap', async () => {
   }
 });
 
+ipcMain.handle('coreSetup:bootstrapOrClearChainAndStart', async () => {
+  try {
+    return await bootstrapOrClearChainAndStart();
+  } catch (error) {
+    loggerError('error', error);
+  }
+});
+
 ipcMain.handle('coreSetup:pickQortalDirectory', async () => {
   try {
     const { canceled, filePaths } = await dialog.showOpenDialog({
@@ -1095,11 +1333,9 @@ ipcMain.handle('coreSetup:pickQortalDirectory', async () => {
     if (isInstalled) {
       const filePath = await getSharedSettingsFilePath('wallet-storage.json');
 
-      const stats = await fs.promises.stat(filePath).catch(() => null);
-      if (!stats || !stats.isFile()) return null;
-
-      const raw = await fs.promises.readFile(filePath, 'utf-8');
-
+      const raw = await fs.promises
+        .readFile(filePath, 'utf-8')
+        .catch(() => null);
       const data = raw ? JSON.parse(raw) : {};
       data['qortalDirectory'] = dir;
       await fs.promises.writeFile(
@@ -1110,7 +1346,7 @@ ipcMain.handle('coreSetup:pickQortalDirectory', async () => {
       broadcastProgress({
         type: 'hasCustomPath',
         hasCustomPath: true,
-        customPath: filePath,
+        customPath: dir,
       });
     } else return false;
   } catch (error) {
diff --git a/electron/src/video-server.ts b/electron/src/video-server.ts
index 3bf80f7f..464a2b4b 100644
--- a/electron/src/video-server.ts
+++ b/electron/src/video-server.ts
@@ -4,6 +4,7 @@ import * as crypto from 'crypto';
 import { URL } from 'url';
 
 import { log as loggerLog, error as loggerError } from './logger';
+import { isLocalPrivateHost } from './local-https-cert';
 
 interface EncryptionConfig {
   key: Buffer;
@@ -75,7 +76,7 @@ function decryptChunk(
 function fetchRange(url: string, start: number, end: number): Promise<Buffer> {
   return new Promise((resolve, reject) => {
     const urlObj = new URL(url);
-    const client = http;
+    const client = urlObj.protocol === 'https:' && !isLocalPrivateHost(urlObj.hostname) ? https : http;
 
     const options: http.RequestOptions = {
       hostname: urlObj.hostname,
diff --git a/package-lock.json b/package-lock.json
index cf3296de..d4a7b569 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,10 +46,12 @@
         "axios": "^1.13.5",
         "bcryptjs": "2.4.3",
         "buffer": "6.0.3",
+        "canvas-confetti": "^1.9.4",
         "chokidar": "^3.6.0",
         "compressorjs": "^1.2.1",
         "dompurify": "^3.2.6",
         "emoji-picker-react": "^4.12.0",
+        "entities": "^8.0.0",
         "file-saver": "^2.0.5",
         "framer-motion": "^12.23.24",
         "html-to-text": "^9.0.5",
@@ -1820,14 +1822,6 @@
         "graceful-fs": "^4.1.6"
       }
     },
-    "node_modules/@capacitor-community/electron/node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/@capacitor/android": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/@capacitor/android/-/android-6.1.2.tgz",
@@ -2024,9 +2018,10 @@
       }
     },
     "node_modules/@electron/asar": {
-      "version": "3.2.15",
-      "resolved": "https://registry.npmjs.org/@electron/asar/-/asar-3.2.15.tgz",
-      "integrity": "sha512-AerUbRZpkDVRs58WP32t4U2bx85sfwRkQI8RMIEi6s2NBE++sgjsgAAMtXvnfTISKUkXo386pxFW7sa7WtMCrw==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/@electron/asar/-/asar-3.4.1.tgz",
+      "integrity": "sha512-i4/rNPRS84t0vSRa2HorerGRXWyF4vThfHesw0dmcWHp+cspK743UanA0suA5Q5y8kzY2y6YKrvbIUn69BCAiA==",
+      "license": "MIT",
       "dependencies": {
         "commander": "^5.0.0",
         "glob": "^7.1.6",
@@ -2133,18 +2128,11 @@
         "graceful-fs": "^4.1.6"
       }
     },
-    "node_modules/@electron/notarize/node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/@electron/osx-sign": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@electron/osx-sign/-/osx-sign-1.3.1.tgz",
-      "integrity": "sha512-BAfviURMHpmb1Yb50YbCxnOY0wfwaLXH5KJ4+80zS0gUkzDX3ec23naTlEqKsN+PwYn+a1cCzM7BJ4Wcd3sGzw==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@electron/osx-sign/-/osx-sign-1.3.3.tgz",
+      "integrity": "sha512-KZ8mhXvWv2rIEgMbWZ4y33bDHyUKMXnx4M0sTyPNK/vcB81ImdeY9Ggdqy0SWbMDgmbqyQ+phgejh6V3R2QuSg==",
+      "license": "BSD-2-Clause",
       "dependencies": {
         "compare-version": "^0.1.2",
         "debug": "^4.3.4",
@@ -2185,14 +2173,6 @@
         "graceful-fs": "^4.1.6"
       }
     },
-    "node_modules/@electron/osx-sign/node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/@electron/packager": {
       "version": "18.3.6",
       "resolved": "https://registry.npmjs.org/@electron/packager/-/packager-18.3.6.tgz",
@@ -2253,14 +2233,6 @@
         "graceful-fs": "^4.1.6"
       }
     },
-    "node_modules/@electron/packager/node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/@electron/packager/node_modules/yargs-parser": {
       "version": "21.1.1",
       "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
@@ -2270,11 +2242,12 @@
       }
     },
     "node_modules/@electron/universal": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@electron/universal/-/universal-2.0.1.tgz",
-      "integrity": "sha512-fKpv9kg4SPmt+hY7SVBnIYULE9QJl8L3sCfcBsnqbJwwBwAeTLokJ9TRt9y7bK0JAzIW2y78TVVjvnQEms/yyA==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/@electron/universal/-/universal-2.0.3.tgz",
+      "integrity": "sha512-Wn9sPYIVFRFl5HmwMJkARCCf7rqK/EurkfQ/rJZ14mHP3iYTjZSIOSVonEAnhWeAXwtw7zOekGRlc6yTtZ0t+g==",
+      "license": "MIT",
       "dependencies": {
-        "@electron/asar": "^3.2.7",
+        "@electron/asar": "^3.3.1",
         "@malept/cross-spawn-promise": "^2.0.0",
         "debug": "^4.3.1",
         "dir-compare": "^4.2.0",
@@ -2310,14 +2283,6 @@
         "graceful-fs": "^4.1.6"
       }
     },
-    "node_modules/@electron/universal/node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/@electron/windows-sign": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@electron/windows-sign/-/windows-sign-1.1.3.tgz",
@@ -2360,14 +2325,6 @@
         "graceful-fs": "^4.1.6"
       }
     },
-    "node_modules/@electron/windows-sign/node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/@emnapi/core": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.5.0.tgz",
@@ -3225,14 +3182,6 @@
         "graceful-fs": "^4.1.6"
       }
     },
-    "node_modules/@ionic/utils-fs/node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/@ionic/utils-object": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/@ionic/utils-object/-/utils-object-2.1.6.tgz",
@@ -3377,14 +3326,6 @@
         "graceful-fs": "^4.1.6"
       }
     },
-    "node_modules/@ionic/utils-subprocess/node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/@ionic/utils-subprocess/node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -6119,20 +6060,14 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "24.1.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.1.0.tgz",
-      "integrity": "sha512-ut5FthK5moxFKH2T1CUOC6ctR67rQRvvHdFLCD2Ql6KXmMuCrjsSsRI9UsLCm9M18BMwClv4pn327UvB7eeO1w==",
+      "version": "24.12.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.12.2.tgz",
+      "integrity": "sha512-A1sre26ke7HDIuY/M23nd9gfB+nrmhtYyMINbjI1zHJxYteKR6qSMX56FsmjMcDb3SMcjJg5BiRRgOCC/yBD0g==",
       "license": "MIT",
       "dependencies": {
-        "undici-types": "~7.8.0"
+        "undici-types": "~7.16.0"
       }
     },
-    "node_modules/@types/node/node_modules/undici-types": {
-      "version": "7.8.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.8.0.tgz",
-      "integrity": "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==",
-      "license": "MIT"
-    },
     "node_modules/@types/parse-json": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
@@ -7329,21 +7264,6 @@
       "integrity": "sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ==",
       "license": "MIT"
     },
-    "node_modules/agent-base": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-7.1.1.tgz",
-      "integrity": "sha512-H0TSyFNDMomMNJQBn8wFV5YC/2eJ+VXECwOadZJT554xP6cODZHPX3H9QMQECxvrgiSOP1pHjy1sMWQVYJOUOA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
     "node_modules/agentkeepalive": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/agentkeepalive/-/agentkeepalive-4.6.0.tgz",
@@ -8221,6 +8141,16 @@
         }
       ]
     },
+    "node_modules/canvas-confetti": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/canvas-confetti/-/canvas-confetti-1.9.4.tgz",
+      "integrity": "sha512-yxQbJkAVrFXWNbTUjPqjF7G+g6pDotOUHGbkZq2NELZUMDpiJ85rIEazVb8GTaAptNW2miJAXbs1BtioA251Pw==",
+      "license": "ISC",
+      "funding": {
+        "type": "donate",
+        "url": "https://www.paypal.me/kirilvatev"
+      }
+    },
     "node_modules/chai": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
@@ -8313,9 +8243,9 @@
       "license": "(BSD-3-Clause AND Apache-2.0)"
     },
     "node_modules/ci-info": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.0.tgz",
-      "integrity": "sha512-l+2bNRMiQgcfILUi33labAZYIWlH1kWDp+ecNo5iisRKrbm0xcRyCww71/YU0Fkw0mAFpz9bJayXPjey6vkmaQ==",
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.3.1.tgz",
+      "integrity": "sha512-Wdy2Igu8OcBpI2pZePZ5oWjPC38tmDVx5WKUXKwlLYkA0ozo85sLsLvkBbBn/sZaSCMFOGZJ14fvW9t5/d7kdA==",
       "devOptional": true,
       "funding": [
         {
@@ -8730,30 +8660,6 @@
       "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
       "license": "MIT"
     },
-    "node_modules/cssstyle": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-4.0.1.tgz",
-      "integrity": "sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "rrweb-cssom": "^0.6.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/cssstyle/node_modules/rrweb-cssom": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.6.0.tgz",
-      "integrity": "sha512-APM0Gt1KoXBz0iIkkdB/kfvGOwC4UuJFeG/c+yV7wSc7q96cG/kJ0HiYCnzivD9SB53cLV1MlHFNfOuPaadYSw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -8769,22 +8675,6 @@
         "uniq": "^1.0.0"
       }
     },
-    "node_modules/data-urls": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-5.0.0.tgz",
-      "integrity": "sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "whatwg-mimetype": "^4.0.0",
-        "whatwg-url": "^14.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/data-view-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
@@ -8859,15 +8749,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/decimal.js": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
-      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/decompress-response": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -9144,6 +9025,18 @@
         "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
     },
+    "node_modules/dom-serializer/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/domelementtype": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
@@ -9306,12 +9199,12 @@
       }
     },
     "node_modules/entities": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
-      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-8.0.0.tgz",
+      "integrity": "sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==",
       "license": "BSD-2-Clause",
       "engines": {
-        "node": ">=0.12"
+        "node": ">=20.19.0"
       },
       "funding": {
         "url": "https://github.com/fb55/entities?sponsor=1"
@@ -10197,14 +10090,6 @@
         "graceful-fs": "^4.1.6"
       }
     },
-    "node_modules/flora-colossus/node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/follow-redirects": {
       "version": "1.15.11",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
@@ -10457,14 +10342,6 @@
         "graceful-fs": "^4.1.6"
       }
     },
-    "node_modules/galactus/node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/gauge": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.4.tgz",
@@ -10876,21 +10753,6 @@
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
     },
-    "node_modules/html-encoding-sniffer": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-4.0.0.tgz",
-      "integrity": "sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "whatwg-encoding": "^3.1.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/html-escaper": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz",
@@ -10940,27 +10802,23 @@
         "entities": "^4.4.0"
       }
     },
+    "node_modules/htmlparser2/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/http-cache-semantics": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz",
       "integrity": "sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ=="
     },
-    "node_modules/http-proxy-agent": {
-      "version": "7.0.2",
-      "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
-      "integrity": "sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "agent-base": "^7.1.0",
-        "debug": "^4.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
     "node_modules/http2-wrapper": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/http2-wrapper/-/http2-wrapper-1.0.3.tgz",
@@ -10973,22 +10831,6 @@
         "node": ">=10.19.0"
       }
     },
-    "node_modules/https-proxy-agent": {
-      "version": "7.0.5",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-7.0.5.tgz",
-      "integrity": "sha512-1e4Wqeblerz+tMKPIq2EMGiiWW1dIjZOksyHWSUm1rmuvw/how9hBHZ38lAGj5ID4Ik6EdkOw7NmWPy6LAwalw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "agent-base": "^7.0.2",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    },
     "node_modules/human-signals": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
@@ -11589,15 +11431,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-potential-custom-element-name": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
-      "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -12748,49 +12581,6 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
-    "node_modules/jsdom": {
-      "version": "24.1.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-24.1.0.tgz",
-      "integrity": "sha512-6gpM7pRXCwIOKxX47cgOyvyQDN/Eh0f1MeKySBV2xGdKtqJBLj8P25eY3EVCWo2mglDDzozR2r2MW4T+JiNUZA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "cssstyle": "^4.0.1",
-        "data-urls": "^5.0.0",
-        "decimal.js": "^10.4.3",
-        "form-data": "^4.0.0",
-        "html-encoding-sniffer": "^4.0.0",
-        "http-proxy-agent": "^7.0.2",
-        "https-proxy-agent": "^7.0.4",
-        "is-potential-custom-element-name": "^1.0.1",
-        "nwsapi": "^2.2.10",
-        "parse5": "^7.1.2",
-        "rrweb-cssom": "^0.7.0",
-        "saxes": "^6.0.0",
-        "symbol-tree": "^3.2.4",
-        "tough-cookie": "^4.1.4",
-        "w3c-xmlserializer": "^5.0.0",
-        "webidl-conversions": "^7.0.0",
-        "whatwg-encoding": "^3.1.1",
-        "whatwg-mimetype": "^4.0.0",
-        "whatwg-url": "^14.0.0",
-        "ws": "^8.17.0",
-        "xml-name-validator": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "canvas": "^2.11.2"
-      },
-      "peerDependenciesMeta": {
-        "canvas": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/jsesc": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
@@ -13255,6 +13045,18 @@
         "markdown-it": "bin/markdown-it.mjs"
       }
     },
+    "node_modules/markdown-it/node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/matcher": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/matcher/-/matcher-3.0.0.tgz",
@@ -16519,15 +16321,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/nwsapi": {
-      "version": "2.2.10",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.10.tgz",
-      "integrity": "sha512-QK0sRs7MKv0tKe1+5uZIQk/C8XGza4DAnztJG8iD+TpJIORARrCxczA738awHrZoHeTjSSoHqao2teO0dC/gFQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -16843,21 +16636,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/parse5": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
-      "integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "entities": "^4.4.0"
-      },
-      "funding": {
-        "url": "https://github.com/inikulin/parse5?sponsor=1"
-      }
-    },
     "node_modules/parseley": {
       "version": "0.12.1",
       "resolved": "https://registry.npmjs.org/parseley/-/parseley-0.12.1.tgz",
@@ -17506,15 +17284,6 @@
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
-    "node_modules/psl": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
-      "integrity": "sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/pump": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
@@ -17563,15 +17332,6 @@
       "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz",
       "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ=="
     },
-    "node_modules/querystringify": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
-      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -18210,16 +17970,6 @@
         "graceful-fs": "^4.1.6"
       }
     },
-    "node_modules/rename-cli/node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@@ -18243,15 +17993,6 @@
       "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==",
       "dev": true
     },
-    "node_modules/requires-port": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
-      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/resedit": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/resedit/-/resedit-2.0.3.tgz",
@@ -18444,15 +18185,6 @@
       "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.4.tgz",
       "integrity": "sha512-UT5EDe2cu2E/6O4igUr5PSFs23nvvukicWHx6GnOPlHAiiYbzNuCRQCuiUdHJQcqKalLKlrYJnjY0ySGsXNQXQ=="
     },
-    "node_modules/rrweb-cssom": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.7.1.tgz",
-      "integrity": "sha512-TrEMa7JGdVm0UThDJSx7ddw5nVm3UJS9o9CCIZ72B1vSyEZoziDqBYP3XIoi/12lKrJR8rE3jeFHMok2F/Mnsg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -18593,21 +18325,6 @@
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.1.4.tgz",
       "integrity": "sha512-5f3k2PbGGp+YtKJjOItpg3P99IMD84E4HOvcfleTb5joCHNXYLsR9yWFPOYGgaeMPDubQILTCMdsFb2OMeOjtg=="
     },
-    "node_modules/saxes": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
-      "integrity": "sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==",
-      "dev": true,
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "xmlchars": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=v12.22.7"
-      }
-    },
     "node_modules/scheduler": {
       "version": "0.27.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz",
@@ -19623,15 +19340,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/symbol-tree": {
-      "version": "3.2.4",
-      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
-      "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/synckit": {
       "version": "0.11.11",
       "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.11.tgz",
@@ -19981,39 +19689,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/tough-cookie": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.4.tgz",
-      "integrity": "sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==",
-      "dev": true,
-      "license": "BSD-3-Clause",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "psl": "^1.1.33",
-        "punycode": "^2.1.1",
-        "universalify": "^0.2.0",
-        "url-parse": "^1.5.3"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/tr46": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-5.0.0.tgz",
-      "integrity": "sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "punycode": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/traverse": {
       "version": "0.6.11",
       "resolved": "https://registry.npmjs.org/traverse/-/traverse-0.6.11.tgz",
@@ -20257,6 +19932,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "license": "MIT"
+    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
@@ -20347,15 +20028,12 @@
       }
     },
     "node_modules/universalify": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
-      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
-      "dev": true,
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
       "license": "MIT",
-      "optional": true,
-      "peer": true,
       "engines": {
-        "node": ">= 4.0.0"
+        "node": ">= 10.0.0"
       }
     },
     "node_modules/unrs-resolver": {
@@ -20448,19 +20126,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/url-parse": {
-      "version": "1.5.10",
-      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
-      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "querystringify": "^2.1.1",
-        "requires-port": "^1.0.0"
-      }
-    },
     "node_modules/use-sync-external-store": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
@@ -20963,21 +20628,6 @@
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
       "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
     },
-    "node_modules/w3c-xmlserializer": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
-      "integrity": "sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "xml-name-validator": "^5.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/walker": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
@@ -20996,61 +20646,6 @@
         "defaults": "^1.0.3"
       }
     },
-    "node_modules/webidl-conversions": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
-      "integrity": "sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==",
-      "dev": true,
-      "license": "BSD-2-Clause",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/whatwg-encoding": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-3.1.1.tgz",
-      "integrity": "sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "iconv-lite": "0.6.3"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/whatwg-mimetype": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-mimetype/-/whatwg-mimetype-4.0.0.tgz",
-      "integrity": "sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/whatwg-url": {
-      "version": "14.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-14.0.0.tgz",
-      "integrity": "sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "tr46": "^5.0.0",
-        "webidl-conversions": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -21441,14 +21036,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/workbox-build/node_modules/universalify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
-      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
-      "engines": {
-        "node": ">= 10.0.0"
-      }
-    },
     "node_modules/workbox-build/node_modules/webidl-conversions": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.2.tgz",
@@ -21640,42 +21227,6 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
-    "node_modules/ws": {
-      "version": "8.17.1",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
-      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=10.0.0"
-      },
-      "peerDependencies": {
-        "bufferutil": "^4.0.1",
-        "utf-8-validate": ">=5.0.2"
-      },
-      "peerDependenciesMeta": {
-        "bufferutil": {
-          "optional": true
-        },
-        "utf-8-validate": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/xml-name-validator": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
-      "integrity": "sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/xml2js": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.5.0.tgz",
@@ -21704,15 +21255,6 @@
         "node": ">=8.0"
       }
     },
-    "node_modules/xmlchars": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz",
-      "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/y18n": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",
@@ -21724,20 +21266,6 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
       "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
     },
-    "node_modules/yaml": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
-      "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
-      "license": "ISC",
-      "optional": true,
-      "peer": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14.6"
-      }
-    },
     "node_modules/yargs": {
       "version": "15.4.1",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.4.1.tgz",
diff --git a/package.json b/package.json
index 8239c814..49595920 100644
--- a/package.json
+++ b/package.json
@@ -51,10 +51,12 @@
     "axios": "^1.13.5",
     "bcryptjs": "2.4.3",
     "buffer": "6.0.3",
+    "canvas-confetti": "^1.9.4",
     "chokidar": "^3.6.0",
     "compressorjs": "^1.2.1",
     "dompurify": "^3.2.6",
     "emoji-picker-react": "^4.12.0",
+    "entities": "^8.0.0",
     "file-saver": "^2.0.5",
     "framer-motion": "^12.23.24",
     "html-to-text": "^9.0.5",
diff --git a/public/q-tube-preview.webm b/public/q-tube-preview.webm
new file mode 100644
index 00000000..5c075aa4
Binary files /dev/null and b/public/q-tube-preview.webm differ
diff --git a/public/qort-coin-blue.png b/public/qort-coin-blue.png
new file mode 100644
index 00000000..8eaacd0e
Binary files /dev/null and b/public/qort-coin-blue.png differ
diff --git a/public/subwire-preview.webm b/public/subwire-preview.webm
new file mode 100644
index 00000000..76b138f5
Binary files /dev/null and b/public/subwire-preview.webm differ
diff --git a/src/App.tsx b/src/App.tsx
index a85ec3e5..8b3919f7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -7,11 +7,17 @@ import {
   Suspense,
 } from 'react';
 import { useDropzone } from 'react-dropzone';
-import { Box, ButtonBase, useTheme } from '@mui/material';
+import { Box, ButtonBase, Typography, useTheme } from '@mui/material';
+import { AnimatePresence } from 'framer-motion';
 import { decryptStoredWallet } from './utils/decryptWallet';
+import {
+  getWalletErrorMessage,
+  getWalletFieldLabel,
+} from './utils/walletErrorMessages';
 import './utils/seedPhrase/randomSentenceGenerator.ts';
 import {
   createAccount,
+  generateRandomSentence,
   saveFileToDisk,
   saveSeedPhraseToDisk,
 } from './utils/generateWallet/generateWallet';
@@ -19,19 +25,22 @@ import { crypto, walletVersion } from './constants/decryptWallet';
 import PhraseWallet from './utils/generateWallet/phrase-wallet';
 import { AppContainer } from './styles/App-styles.ts';
 import { Loader } from './components/Loader';
+import ErrorBoundary from './common/ErrorBoundary';
 import { AuthenticationForm } from './components/AuthenticationForm';
-import { ProfileLeft } from './components/Profile';
 import {
   BuyOrderRequestScreen,
   ConnectionRequestScreen,
   CountdownOverlay,
   CreateWalletView,
+  ElectronPersistentStorageHydration,
   InfoDialog,
   NotAuthenticatedFooter,
+  NotificationPermissionSlideDown,
   PaymentPublishDialog,
   PaymentRequestScreen,
   QortalRequestExtensionDialog,
   QortalRequestScreen,
+  ReceiveQortOverlay,
   SendQortOverlay,
   SuccessOverlay,
   SuccessScreen,
@@ -44,15 +53,14 @@ import { LazyAuthenticatedShell } from './components/App/LazyAuthenticatedShell'
 import { useAppModals } from './hooks/useAppModals';
 import { useAppReset } from './hooks/useAppReset';
 import { useAppMessageHandler } from './hooks/useAppMessageHandler';
-import { CustomizedSnackbars } from './components/Snackbar/Snackbar';
-import HelpIcon from '@mui/icons-material/Help';
+import { QortinoNotificationHost } from './components/Snackbar/QortinoNotificationHost';
 import { getWallets, storeWallets } from './background/background.ts';
 import {
   executeEvent,
   subscribeToEvent,
   unsubscribeFromEvent,
 } from './utils/events';
-import { DrawerComponent } from './components/Drawer/Drawer';
+import { stopSharedEarbumpPlayback } from './components/Group/earbumpSharedAudio';
 import { Settings } from './components/Group/Settings';
 import { useRetrieveDataLocalStorage } from './hooks/useRetrieveDataLocalStorage.tsx';
 import { useQortalGetSaveSettings } from './hooks/useQortalGetSaveSettings.tsx';
@@ -65,6 +73,7 @@ import {
   infoSnackGlobalAtom,
   isLoadingAuthenticateAtom,
   isOpenCoreSetup,
+  isPublicNodeUnavailableAtom,
   isRunningPublicNodeAtom,
   openSnackGlobalAtom,
   qortBalanceLoadingAtom,
@@ -87,9 +96,11 @@ import { BuyQortInformation } from './components/BuyQortInformation';
 import { PdfViewer } from './common/PdfViewer';
 import { useTranslation } from 'react-i18next';
 import { DownloadWallet } from './components/Auth/DownloadWallet.tsx';
+import { BackupWalletModal } from './components/Auth/BackupWalletModal.tsx';
 import { useAtom, useSetAtom } from 'jotai';
 import {
-  getDefaultLocalNodeUrl,
+  HTTP_LOCALHOST_12391,
+  HTTPS_EXT_NODE_QORTAL_LINK,
   isLocalNodeUrl,
   TIME_SECONDS_10_IN_MILLISECONDS,
 } from './constants/constants.ts';
@@ -106,6 +117,10 @@ import {
 } from './components/Desktop/CustomTitleBar';
 import { roundUpToDecimals } from './utils/numberFunctions.ts';
 import { GlobalQortalNavBar } from './components/Desktop/GlobalQortalNavBar.tsx';
+import type { AuthUnlockTransitionSnapshot } from './types/authTransition';
+
+const MINTING_LOCAL_DEBUG_STORAGE_KEY = 'hub.mintingLocalDebug';
+const LOCAL_CORE_READY_SYNC_PERCENT = 99.95;
 
 // Re-export for consumers that still import from App
 export type { extStates } from './types/app';
@@ -127,7 +142,107 @@ export {
 } from './utils/globalApi';
 export { isMainWindow } from './constants/app';
 
+const formatRuntimeFaultMessage = (
+  value: unknown,
+  fallbackMessage: string
+): string => {
+  if (value instanceof Error) {
+    return value.stack || value.message || fallbackMessage;
+  }
+
+  if (typeof value === 'string' && value.trim()) {
+    return value;
+  }
+
+  if (
+    value &&
+    typeof value === 'object' &&
+    'message' in value &&
+    typeof (value as { message?: unknown }).message === 'string' &&
+    (value as { message: string }).message.trim()
+  ) {
+    return (value as { message: string }).message;
+  }
+
+  if (
+    value &&
+    typeof value === 'object' &&
+    'reason' in value &&
+    typeof (value as { reason?: unknown }).reason === 'string' &&
+    (value as { reason: string }).reason.trim()
+  ) {
+    return (value as { reason: string }).reason;
+  }
+
+  if (value != null) {
+    try {
+      const serialized = JSON.stringify(value, null, 2);
+      if (serialized && serialized !== '{}') {
+        return `${fallbackMessage}\n${serialized}`;
+      }
+    } catch {
+      // Fall through to String(value) below.
+    }
+
+    const stringified = String(value);
+    if (
+      stringified &&
+      stringified !== '[object Object]' &&
+      stringified !== 'undefined'
+    ) {
+      return `${fallbackMessage}\n${stringified}`;
+    }
+  }
+
+  return fallbackMessage;
+};
+
+/** Chromium reports this when resize work spans the same frame; not an app fault. */
+const RESIZE_OBSERVER_LOOP_MESSAGE =
+  /ResizeObserver loop completed with undelivered notifications/i;
+
+const isIgnorableRuntimeFault = (value: unknown): boolean => {
+  const extractMessage = (): string => {
+    if (typeof value === 'string') return value;
+    if (value instanceof Error) return value.message || '';
+    if (
+      value &&
+      typeof value === 'object' &&
+      'message' in value &&
+      typeof (value as { message?: unknown }).message === 'string'
+    ) {
+      return (value as { message: string }).message;
+    }
+    return '';
+  };
+
+  const message = extractMessage().trim();
+  if (RESIZE_OBSERVER_LOOP_MESSAGE.test(message)) {
+    return true;
+  }
+
+  const errorCode =
+    value &&
+    typeof value === 'object' &&
+    'error' in value &&
+    typeof (value as { error?: unknown }).error === 'string'
+      ? (value as { error: string }).error
+      : '';
+
+  return (
+    errorCode === 'timeout' &&
+    /^Request timed out after \d+ ms\b/i.test(message)
+  );
+};
+
 function App() {
+  type SendQortOriginRect = {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  } | null;
+
   const [extState, setExtstate] = useAtom(extStateAtom);
   const [desktopViewMode, setDesktopViewMode] = useState('home');
   const [rawWallet, setRawWallet] = useAtom(rawWalletAtom);
@@ -141,10 +256,18 @@ function App() {
   const [paymentTo, setPaymentTo] = useState<string>('');
   const [sendPaymentError, setSendPaymentError] = useState<string>('');
   const [countdown, setCountdown] = useState<null | number>(null);
+  const [globalRuntimeFault, setGlobalRuntimeFault] = useState<{
+    message: string;
+    source: 'boundary' | 'error' | 'promise';
+  } | null>(null);
+  const [authUnlockTransition, setAuthUnlockTransition] =
+    useState<AuthUnlockTransitionSnapshot | null>(null);
   const [walletToBeDownloaded, setWalletToBeDownloaded] = useState<any>(null);
+  const [isBackupWalletModalOpen, setIsBackupWalletModalOpen] = useState(false);
   const [walletToBeDownloadedPassword, setWalletToBeDownloadedPassword] =
     useState<string>('');
   const setOpenCoreSetup = useSetAtom(isOpenCoreSetup);
+  const setPublicNodeUnavailable = useSetAtom(isPublicNodeUnavailableAtom);
   const setAuthenticatePassword = useSetAtom(authenticatePasswordAtom);
   const [sendqortState, setSendqortState] = useState<any>(null);
   const [isLoading, setIsLoading] = useAtom(isLoadingAuthenticateAtom);
@@ -174,8 +297,17 @@ function App() {
     hasSettingsChangedAtom
   );
 
+   useEffect(() => {
+    const w = window as Window & { __qortalCurrentAddress?: string | null };
+    w.__qortalCurrentAddress = userInfo?.address ?? null;
+    return () => {
+      delete w.__qortalCurrentAddress;
+    };
+  }, [userInfo?.address]);
+
   const downloadResource = useFetchResources();
   const holdRefExtState = useRef<extStates>('not-authenticated');
+  const suppressWalletInfoRestoreRef = useRef(false);
   const isFocusedRef = useRef<boolean>(true);
   const permissionHandlerRef = useRef<
     ((message: any, event: MessageEvent) => void) | null
@@ -227,15 +359,25 @@ function App() {
 
   const [infoSnack, setInfoSnack] = useAtom(infoSnackGlobalAtom);
   const [openSnack, setOpenSnack] = useAtom(openSnackGlobalAtom);
-  const [isOpenDrawerProfile, setIsOpenDrawerProfile] = useState(false);
   const [isOpenDrawerLookup, setIsOpenDrawerLookup] = useState(false);
   const [isOpenSendQort, setIsOpenSendQort] = useState(false);
+  const [isOpenReceiveQort, setIsOpenReceiveQort] = useState(false);
   const [isOpenSendQortSuccess, setIsOpenSendQortSuccess] = useState(false);
+  const [sendQortOriginRect, setSendQortOriginRect] =
+    useState<SendQortOriginRect>(null);
+  const [sendQortTargetRect, setSendQortTargetRect] =
+    useState<SendQortOriginRect>(null);
+  const [receiveQortOriginRect, setReceiveQortOriginRect] =
+    useState<SendQortOriginRect>(null);
+  const [receiveQortTargetRect, setReceiveQortTargetRect] =
+    useState<SendQortOriginRect>(null);
+  const [receiveQortAddress, setReceiveQortAddress] = useState('');
   const [selectedNode, setSelectedNode] = useAtom(selectedNodeInfoAtom);
   const {
     isNodeValid,
     authenticate,
     getBalanceFunc,
+    handleSaveNodeInfo,
     validateApiKeyFromRegistration,
   } = useAuth();
   useBlockedAddressesLoader(extState === 'authenticated');
@@ -252,8 +394,27 @@ function App() {
   const [isOpenMinting, setIsOpenMinting] = useState(false);
   const generatorRef = useRef(null);
 
+  const ensureGeneratedSeedphrase = useCallback(() => {
+    const currentPhrase = generatorRef.current?.parsedString;
+    if (currentPhrase) return currentPhrase;
+
+    const generatedPhrase = generateRandomSentence();
+    generatorRef.current = {
+      parsedString: generatedPhrase,
+    };
+    return generatedPhrase;
+  }, []);
+
+  const prepareNewSeedphrase = useCallback(() => {
+    const generatedPhrase = generateRandomSentence();
+    generatorRef.current = {
+      parsedString: generatedPhrase,
+    };
+    return generatedPhrase;
+  }, []);
+
   const exportSeedphrase = () => {
-    const seedPhrase = generatorRef.current.parsedString;
+    const seedPhrase = ensureGeneratedSeedphrase();
     saveSeedPhraseToDisk(seedPhrase);
   };
 
@@ -278,6 +439,64 @@ function App() {
 
   const [storeAccount, setStoredAccount] = useState<boolean>(true);
 
+  useEffect(() => {
+    const handleWindowError = (event: ErrorEvent) => {
+      if (isIgnorableRuntimeFault(event.error ?? event.message)) {
+        console.warn(
+          'Ignoring non-fatal runtime fault',
+          event.error || event.message,
+          event
+        );
+        return;
+      }
+      console.error(
+        'Global runtime error',
+        event.error || event.message,
+        event
+      );
+      setGlobalRuntimeFault({
+        message: formatRuntimeFaultMessage(
+          event.error ?? event.message,
+          'Unknown runtime error'
+        ),
+        source: 'error',
+      });
+    };
+
+    const handleUnhandledRejection = (event: PromiseRejectionEvent) => {
+      const reason = event.reason;
+      if (isIgnorableRuntimeFault(reason)) {
+        console.warn('Ignoring non-fatal runtime fault', reason, event);
+        return;
+      }
+      console.error('Unhandled promise rejection', reason, event);
+      setGlobalRuntimeFault({
+        message: formatRuntimeFaultMessage(
+          reason,
+          'Unhandled promise rejection'
+        ),
+        source: 'promise',
+      });
+    };
+
+    window.addEventListener('error', handleWindowError);
+    window.addEventListener('unhandledrejection', handleUnhandledRejection);
+
+    return () => {
+      window.removeEventListener('error', handleWindowError);
+      window.removeEventListener(
+        'unhandledrejection',
+        handleUnhandledRejection
+      );
+    };
+  }, []);
+
+  useEffect(() => {
+    if (extState !== 'authenticated' && globalRuntimeFault) {
+      setGlobalRuntimeFault(null);
+    }
+  }, [extState, globalRuntimeFault]);
+
   const contextValue = useMemo(
     () => ({
       onCancel,
@@ -301,10 +520,10 @@ function App() {
             setSelectedNode(response);
           } else {
             const payload = {
-              url: getDefaultLocalNodeUrl(),
+              url: HTTPS_EXT_NODE_QORTAL_LINK,
               apikey: '',
             };
-            handleSetGlobalApikey(response);
+            handleSetGlobalApikey(payload);
             setSelectedNode(payload);
           }
         })
@@ -319,18 +538,21 @@ function App() {
             .sendMessage('getWalletInfo')
             .then((response) => {
               if (response && response?.walletInfo) {
-                setRawWallet(response?.walletInfo);
+                if (suppressWalletInfoRestoreRef.current) return;
+
                 if (
                   holdRefExtState.current === 'web-app-request-payment' ||
                   holdRefExtState.current === 'web-app-request-connection' ||
                   holdRefExtState.current === 'web-app-request-buy-order'
                 )
                   return;
+
+                if (holdRefExtState.current !== 'not-authenticated') return;
+
                 if (response?.hasKeyPair) {
+                  setRawWallet(response?.walletInfo);
                   setExtstate('authenticated');
                   window.sendMessage('startNotificationCheck').catch(() => {});
-                } else {
-                  setExtstate('wallet-dropped');
                 }
               }
             })
@@ -400,7 +622,7 @@ function App() {
           if (!(field in pf))
             throw new Error(
               t('auth:message.error.field_not_found_json', {
-                field: field,
+                field: getWalletFieldLabel(field),
                 postProcess: 'capitalizeFirstChar',
               })
             );
@@ -575,22 +797,30 @@ function App() {
     getUserInfo();
   }, [address]);
 
-  useEffect(() => {
-    return () => {
-      console.log('exit');
-    };
-  }, []);
-
   const saveFileToDiskFunc = useCallback(async () => {
     try {
-      await saveFileToDisk(
+      if (!walletToBeDownloaded?.wallet || !walletToBeDownloaded?.qortAddress) {
+        setWalletToBeDownloadedError('No wallet backup is ready yet.');
+        return false;
+      }
+
+      const saved = await saveFileToDisk(
         walletToBeDownloaded.wallet,
         walletToBeDownloaded.qortAddress
       );
+      return Boolean(saved);
     } catch (error: any) {
-      setWalletToBeDownloadedError(error?.message);
+      setWalletToBeDownloadedError(
+        getWalletErrorMessage(
+          error,
+          t('auth:wallet_errors.unable_to_save_backup', {
+            postProcess: 'capitalizeFirstChar',
+          })
+        )
+      );
+      return false;
     }
-  }, [walletToBeDownloaded]);
+  }, [walletToBeDownloaded, t]);
 
   const saveWalletToLocalStorage = async (newWallet) => {
     try {
@@ -615,6 +845,7 @@ function App() {
 
   const createAccountFunc = async () => {
     try {
+      setWalletToBeDownloadedError('');
       if (!walletToBeDownloadedPassword) {
         setWalletToBeDownloadedError(
           t('core:message.generic.password_enter', {
@@ -641,6 +872,13 @@ function App() {
         );
         return;
       }
+      const generatedSeedphrase = ensureGeneratedSeedphrase();
+      if (!generatedSeedphrase) {
+        setWalletToBeDownloadedError(
+          'We could not prepare the seedphrase. Please go back and try again.'
+        );
+        return;
+      }
       setIsLoading(true);
 
       await new Promise<void>((res) => {
@@ -649,7 +887,7 @@ function App() {
         }, 250);
       });
 
-      const res = await createAccount(generatorRef.current.parsedString);
+      const res = await createAccount(generatedSeedphrase);
       const wallet = await res.generateSaveWalletData(
         walletToBeDownloadedPassword,
         crypto.kdfThreads,
@@ -688,15 +926,19 @@ function App() {
             getBalanceFunc();
           } else if (response?.error) {
             setIsLoading(false);
-            setWalletToBeDecryptedError(response.error);
+            setWalletToBeDecryptedError(getWalletErrorMessage(response.error));
           }
         })
         .catch((error) => {
           setIsLoading(false);
+          setWalletToBeDecryptedError(getWalletErrorMessage(error));
           console.error('Failed to decrypt wallet:', error);
         });
     } catch (error: any) {
-      setWalletToBeDownloadedError(error?.message);
+      console.error('Failed to create account:', error);
+      setWalletToBeDownloadedError(
+        'We could not create this account. Please try again.'
+      );
       setIsLoading(false);
     }
   };
@@ -714,6 +956,7 @@ function App() {
         .sendMessage('logout', {})
         .then((response) => {
           if (response) {
+            stopSharedEarbumpPlayback();
             executeEvent('logout-event', {});
             resetAllStates();
           }
@@ -730,19 +973,30 @@ function App() {
   }, [hasSettingsChanged, extState]);
 
   const returnToMain = useCallback(() => {
+    suppressWalletInfoRestoreRef.current = true;
+    holdRefExtState.current = 'authenticated';
     setPaymentTo('');
     setSendPaymentError('');
     setCountdown(null);
     setWalletToBeDownloaded(null);
     setWalletToBeDownloadedPassword('');
+    generatorRef.current = null;
     setShowSeed(false);
     setCreationStep(1);
+    setSendQortOriginRect(null);
+    setSendQortTargetRect(null);
+    setReceiveQortOriginRect(null);
+    setReceiveQortTargetRect(null);
+    setReceiveQortAddress('');
     setExtstate('authenticated');
     setIsOpenSendQort(false);
+    setIsOpenReceiveQort(false);
     setIsOpenSendQortSuccess(false);
   }, []);
 
   const resetAllStates = () => {
+    suppressWalletInfoRestoreRef.current = true;
+    holdRefExtState.current = 'not-authenticated';
     setExtstate('not-authenticated');
     setRawWallet(null);
     setRequestConnection(null);
@@ -754,6 +1008,7 @@ function App() {
     setCountdown(null);
     setWalletToBeDownloaded(null);
     setWalletToBeDownloadedPassword('');
+    generatorRef.current = null;
     setShowSeed(false);
     setCreationStep(1);
     setWalletToBeDownloadedPasswordConfirm('');
@@ -813,66 +1068,99 @@ function App() {
     };
   }, []);
 
-  const openGlobalSnackBarFunc = (e) => {
-    const message = e.detail?.message;
-    const type = e.detail?.type;
-    setOpenSnack(true);
-    setInfoSnack({
-      type,
-      message,
-    });
-  };
-
-  useEffect(() => {
-    subscribeToEvent('openGlobalSnackBar', openGlobalSnackBarFunc);
-
-    return () => {
-      unsubscribeFromEvent('openGlobalSnackBar', openGlobalSnackBarFunc);
-    };
-  }, []);
-
   const openPaymentInternal = (e) => {
     const directAddress = e.detail?.address;
     const name = e.detail?.name;
+    const anchorRect = e.detail?.anchorRect;
+    const targetRect = e.detail?.targetRect;
+    setSendQortOriginRect(
+      anchorRect
+        ? {
+            left: anchorRect.left,
+            top: anchorRect.top,
+            width: anchorRect.width,
+            height: anchorRect.height,
+          }
+        : null
+    );
+    setSendQortTargetRect(
+      targetRect
+        ? {
+            left: targetRect.left,
+            top: targetRect.top,
+            width: targetRect.width,
+            height: targetRect.height,
+          }
+        : null
+    );
     setIsOpenSendQort(true);
-    setPaymentTo(name || directAddress);
+    setPaymentTo(name || directAddress || '');
+  };
+
+  const openReceiveQortInternal = (e) => {
+    const anchorRect = e.detail?.anchorRect;
+    const targetRect = e.detail?.targetRect;
+    setReceiveQortOriginRect(
+      anchorRect
+        ? {
+            left: anchorRect.left,
+            top: anchorRect.top,
+            width: anchorRect.width,
+            height: anchorRect.height,
+          }
+        : null
+    );
+    setReceiveQortTargetRect(
+      targetRect
+        ? {
+            left: targetRect.left,
+            top: targetRect.top,
+            width: targetRect.width,
+            height: targetRect.height,
+          }
+        : null
+    );
+    setReceiveQortAddress(e.detail?.address || address || '');
+    setIsOpenReceiveQort(true);
   };
 
   useEffect(() => {
     subscribeToEvent('openPaymentInternal', openPaymentInternal);
+    subscribeToEvent('openReceiveQortInternal', openReceiveQortInternal);
 
     return () => {
       unsubscribeFromEvent('openPaymentInternal', openPaymentInternal);
+      unsubscribeFromEvent('openReceiveQortInternal', openReceiveQortInternal);
     };
-  }, []);
+  }, [address]);
 
-  const onOpenSendQort = useCallback(() => setIsOpenSendQort(true), []);
-  const onCloseDrawerProfile = useCallback(
-    () => setIsOpenDrawerProfile(false),
-    []
-  );
-  const onOpenSendQortAndCloseDrawer = useCallback(() => {
+  const onOpenSendQort = useCallback(() => {
+    setSendQortOriginRect(null);
+    setSendQortTargetRect(null);
+    executeEvent('openSendQortInternal', {});
     setIsOpenSendQort(true);
-    setIsOpenDrawerProfile(false);
   }, []);
   const onOpenRegisterName = useCallback(
     () => executeEvent('openRegisterName', {}),
     []
   );
   const onOpenSettings = useCallback(() => setIsSettingsOpen(true), []);
-  const onOpenDrawerLookup = useCallback(() => setIsOpenDrawerLookup(true), []);
-  const onOpenWalletsApp = useCallback(
-    () => executeEvent('openWalletsApp', {}),
+  const onOpenDrawerLookup = useCallback(
+    () => setIsOpenDrawerLookup((prev) => !prev),
     []
   );
-  const onOpenDrawerProfile = useCallback(
-    () => setIsOpenDrawerProfile(true),
+  const onOpenWalletsApp = useCallback(
+    () => executeEvent('openWalletsApp', {}),
     []
   );
   const onOpenMinting = useCallback(async () => {
     try {
+      const forceLocalMintingPreview =
+        typeof window !== 'undefined' &&
+        (localStorage.getItem(MINTING_LOCAL_DEBUG_STORAGE_KEY) === 'true' ||
+          localStorage.getItem(MINTING_LOCAL_DEBUG_STORAGE_KEY) === '1');
       const res = await isRunningGateway();
-      if (res)
+      if (res && !forceLocalMintingPreview)
         throw new Error(
           t('core:message.generic.no_minting_details', {
             postProcess: 'capitalizeFirstChar',
@@ -888,9 +1176,27 @@ function App() {
     }
   }, [t]);
   const onBackupWallet = useCallback(() => {
+    if (extState === 'authenticated' && rawWallet) {
+      setIsBackupWalletModalOpen(true);
+      return;
+    }
+
     setExtstate('download-wallet');
-    setIsOpenDrawerProfile(false);
-  }, [setExtstate]);
+  }, [extState, rawWallet, setExtstate]);
+
+  const closeBackupWalletModal = useCallback(() => {
+    setIsBackupWalletModalOpen(false);
+  }, []);
+
+  useEffect(() => {
+    subscribeToEvent('openMintingPanel', onOpenMinting);
+    subscribeToEvent('openBackupWallet', onBackupWallet);
+
+    return () => {
+      unsubscribeFromEvent('openMintingPanel', onOpenMinting);
+      unsubscribeFromEvent('openBackupWallet', onBackupWallet);
+    };
+  }, [onBackupWallet, onOpenMinting]);
 
   const onOkQortalRequestAccepted = useCallback(
     () => onOkQortalRequest('accepted'),
@@ -912,18 +1218,33 @@ function App() {
     () => confirmPayment(true),
     [confirmPayment]
   );
-  const onGoToCreateWallet = useCallback(
-    () => setExtstate('create-wallet'),
-    [setExtstate]
-  );
+  const onGoToCreateWallet = useCallback(() => {
+    suppressWalletInfoRestoreRef.current = true;
+    holdRefExtState.current = 'create-wallet';
+    prepareNewSeedphrase();
+    setWalletToBeDownloadedError('');
+    setWalletToBeDownloadedPassword('');
+    setWalletToBeDownloadedPasswordConfirm('');
+    setCreationStep(1);
+    setExtstate('create-wallet');
+  }, [
+    prepareNewSeedphrase,
+    setExtstate,
+    setWalletToBeDownloadedPassword,
+    setWalletToBeDownloadedPasswordConfirm,
+  ]);
   const onWalletsBack = useCallback(() => {
+    suppressWalletInfoRestoreRef.current = true;
+    holdRefExtState.current = 'not-authenticated';
     setRawWallet(null);
     setExtstate('not-authenticated');
     logoutFunc();
   }, [setExtstate, logoutFunc]);
   const onAuthenticationFormBack = useCallback(() => {
+    suppressWalletInfoRestoreRef.current = true;
+    holdRefExtState.current = 'not-authenticated';
     setRawWallet(null);
-    setExtstate('wallets');
+    setExtstate('not-authenticated');
     setAuthenticatePassword('');
     logoutFunc();
   }, [setExtstate, logoutFunc]);
@@ -934,11 +1255,15 @@ function App() {
       setWalletToBeDownloadedPassword('');
       return;
     }
+    suppressWalletInfoRestoreRef.current = true;
+    holdRefExtState.current = 'not-authenticated';
     setExtstate('not-authenticated');
     setShowSeed(false);
     setCreationStep(1);
     setWalletToBeDownloadedPasswordConfirm('');
     setWalletToBeDownloadedPassword('');
+    setWalletToBeDownloadedError('');
+    generatorRef.current = null;
   }, [
     creationStep,
     setExtstate,
@@ -947,16 +1272,109 @@ function App() {
   ]);
   const onShowSeed = useCallback(() => setShowSeed(true), []);
   const onHideSeed = useCallback(() => setShowSeed(false), []);
-  const onCreationStepNext = useCallback(() => setCreationStep(2), []);
+  const onCreationStepNext = useCallback(() => {
+    ensureGeneratedSeedphrase();
+    setWalletToBeDownloadedError('');
+    setCreationStep(2);
+  }, [ensureGeneratedSeedphrase]);
+
+  const isPublicNodeReachable = useCallback(async () => {
+    try {
+      const response = await fetch(
+        `${HTTPS_EXT_NODE_QORTAL_LINK}/admin/status`
+      );
+      return response.ok;
+    } catch (error) {
+      return false;
+    }
+  }, []);
+
+  const isLocalCoreReadyForHub = useCallback(async () => {
+    try {
+      const response = await fetch(`${HTTP_LOCALHOST_12391}/admin/status`);
+      if (!response.ok) return false;
+
+      const status = await response.json();
+      const syncPercent = Number(status?.syncPercent);
+      return (
+        Number.isFinite(syncPercent) &&
+        syncPercent >= LOCAL_CORE_READY_SYNC_PERCENT
+      );
+    } catch (error) {
+      return false;
+    }
+  }, []);
+
+  const prepareNodeForHubEntry = useCallback(async () => {
+    const selectedUrl = selectedNode?.url || HTTPS_EXT_NODE_QORTAL_LINK;
+    const usingDefaultPublic = selectedUrl === HTTPS_EXT_NODE_QORTAL_LINK;
+    const blockedEntry = {
+      canEnter: false,
+      shouldOpenCoreSetupAfterEntry: false,
+    };
+
+    if (usingDefaultPublic) {
+      if (!(await isPublicNodeReachable())) {
+        setPublicNodeUnavailable(true);
+        setOpenCoreSetup(true);
+        return blockedEntry;
+      }
+
+      setPublicNodeUnavailable(false);
+      return {
+        canEnter: true,
+        shouldOpenCoreSetupAfterEntry: true,
+      };
+    }
+
+    if (isLocalNodeUrl(selectedUrl) && !(await isLocalCoreReadyForHub())) {
+      if (await isPublicNodeReachable()) {
+        setPublicNodeUnavailable(false);
+        await handleSaveNodeInfo({
+          url: HTTPS_EXT_NODE_QORTAL_LINK,
+          apikey: '',
+        });
+        return {
+          canEnter: true,
+          shouldOpenCoreSetupAfterEntry: true,
+        };
+      }
+
+      setPublicNodeUnavailable(true);
+      setOpenCoreSetup(true);
+      return blockedEntry;
+    }
+
+    setPublicNodeUnavailable(false);
+    return {
+      canEnter: true,
+      shouldOpenCoreSetupAfterEntry: false,
+    };
+  }, [
+    handleSaveNodeInfo,
+    isLocalCoreReadyForHub,
+    isPublicNodeReachable,
+    selectedNode?.url,
+    setOpenCoreSetup,
+    setPublicNodeUnavailable,
+  ]);
+
   const onBackupAccountConfirm = useCallback(async () => {
-    await saveFileToDiskFunc();
+    return saveFileToDiskFunc();
+  }, [saveFileToDiskFunc]);
+
+  const onEnterHubAfterCreate = useCallback(async () => {
+    const entryPreparation = await prepareNodeForHubEntry();
+    if (!entryPreparation.canEnter) return;
+
     returnToMain();
-    await showInfo({
-      message: t('auth:tips.wallet_secure', {
-        postProcess: 'capitalizeFirstChar',
-      }),
-    });
-  }, [t, showInfo, saveFileToDiskFunc, returnToMain]);
+
+    if (window?.coreSetup && entryPreparation.shouldOpenCoreSetupAfterEntry) {
+      window.setTimeout(() => {
+        setOpenCoreSetup(true);
+      }, 650);
+    }
+  }, [prepareNodeForHubEntry, returnToMain, setOpenCoreSetup]);
   const onCountdownComplete = useCallback(() => {
     window.close();
   }, []);
@@ -979,78 +1397,193 @@ function App() {
     () => setOpenCoreSetup(true),
     [setOpenCoreSetup]
   );
-  const onShowTutorialImportantInfo = useCallback(
-    () => showTutorial('important-information', true),
-    [showTutorial]
-  );
-
   const isElectron =
     typeof window !== 'undefined' &&
     typeof (
       window as Window & { electronAPI?: { windowMinimize?: () => unknown } }
     ).electronAPI?.windowMinimize === 'function';
+  const shouldReduceAuthTransition =
+    typeof window !== 'undefined' &&
+    (window.matchMedia('(prefers-reduced-motion: reduce)').matches ||
+      window.localStorage.getItem('hub_ui_animations_enabled') === 'false');
 
   const mainContent = (
     <>
       <PdfViewer />
 
       <QORTAL_APP_CONTEXT.Provider value={contextValue as AppContextInterface}>
+        <ElectronPersistentStorageHydration />
         <CoreSetup />
         <Tutorials />
         {extState === 'not-authenticated' && (
           <NotAuthenticated
-            handleSetGlobalApikey={handleSetGlobalApikey}
+            onWalletUnlockStart={setAuthUnlockTransition}
             setExtstate={setExtstate}
-            useLocalNode={useLocalNode}
+            setRawWallet={setRawWallet}
+            rawWallet={rawWallet}
           />
         )}
 
         {extState === 'authenticated' && isMainWindow && (
           <Suspense fallback={<Loader />}>
-            <LazyAuthenticatedShell
-              balance={balance}
-              desktopViewMode={desktopViewMode}
-              isMain={true}
-              isOpenDrawerProfile={isOpenDrawerProfile}
-              logoutFunc={logoutFunc}
-              myAddress={address}
-              setDesktopViewMode={setDesktopViewMode}
-              setIsOpenDrawerProfile={setIsOpenDrawerProfile}
-              userInfo={userInfo}
-              rawWallet={rawWallet}
-              qortBalanceLoading={qortBalanceLoading}
-              setOpenSnack={setOpenSnack}
-              setInfoSnack={setInfoSnack}
-              onRefreshBalance={getBalanceAndUserInfoFunc}
-              onOpenSendQort={onOpenSendQort}
-              onOpenRegisterName={onOpenRegisterName}
-              extState={extState}
-              isMainWindow={isMainWindow}
-              onOpenSettings={onOpenSettings}
-              onOpenDrawerLookup={onOpenDrawerLookup}
-              onOpenWalletsApp={onOpenWalletsApp}
-              onOpenDrawerProfile={onOpenDrawerProfile}
-              getUserInfo={getUserInfo}
-              onOpenMinting={onOpenMinting}
-              showTutorial={showTutorial}
-              onBackupWallet={onBackupWallet}
-            />
+            <ErrorBoundary
+              fallback={({ error, componentStack }) => (
+                <Box
+                  sx={{
+                    alignItems: 'flex-start',
+                    backdropFilter: 'blur(18px)',
+                    background:
+                      theme.palette.mode === 'dark'
+                        ? 'linear-gradient(180deg, rgba(18,22,29,0.92) 0%, rgba(11,14,20,0.96) 100%)'
+                        : 'linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(244,247,252,0.96) 100%)',
+                    border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(20,24,32,0.08)'}`,
+                    borderRadius: '24px',
+                    boxShadow:
+                      theme.palette.mode === 'dark'
+                        ? '0 24px 48px rgba(0,0,0,0.3)'
+                        : '0 18px 36px rgba(15,20,30,0.12)',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '12px',
+                    m: '24px',
+                    maxWidth: '560px',
+                    p: '22px',
+                  }}
+                >
+                  <Typography sx={{ fontSize: '1.05rem', fontWeight: 800 }}>
+                    Hub runtime error
+                  </Typography>
+                  <Typography
+                    sx={{
+                      color: theme.palette.text.secondary,
+                      fontSize: '0.85rem',
+                      lineHeight: 1.55,
+                    }}
+                  >
+                    The authenticated shell crashed during render.
+                  </Typography>
+                  {error?.message ? (
+                    <Typography
+                      sx={{
+                        color: 'rgba(246,248,252,0.9)',
+                        fontFamily:
+                          'ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace',
+                        fontSize: '0.78rem',
+                        lineHeight: 1.5,
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-word',
+                      }}
+                    >
+                      {error.message}
+                    </Typography>
+                  ) : null}
+                  {componentStack ? (
+                    <Typography
+                      sx={{
+                        color: 'rgba(214,221,233,0.55)',
+                        fontFamily:
+                          'ui-monospace, SFMono-Regular, SF Mono, Menlo, monospace',
+                        fontSize: '0.7rem',
+                        lineHeight: 1.45,
+                        whiteSpace: 'pre-wrap',
+                        wordBreak: 'break-word',
+                      }}
+                    >
+                      {componentStack.trim()}
+                    </Typography>
+                  ) : null}
+                </Box>
+              )}
+            >
+              <Box
+                sx={{
+                  animation: shouldReduceAuthTransition
+                    ? 'none'
+                    : 'dashboardAfterAuthIn 720ms cubic-bezier(0.4, 0, 0.2, 1) both',
+                  height: '100%',
+                  width: '100%',
+                  '@keyframes dashboardAfterAuthIn': {
+                    from: {
+                      opacity: 0,
+                      transform: 'translateY(8px)',
+                    },
+                    to: {
+                      opacity: 1,
+                      transform: 'translateY(0)',
+                    },
+                  },
+                }}
+              >
+                <LazyAuthenticatedShell
+                  balance={balance}
+                  desktopViewMode={desktopViewMode}
+                  isMain={true}
+                  logoutFunc={logoutFunc}
+                  myAddress={address}
+                  setDesktopViewMode={setDesktopViewMode}
+                  userInfo={userInfo}
+                  rawWallet={rawWallet}
+                  qortBalanceLoading={qortBalanceLoading}
+                  setOpenSnack={setOpenSnack}
+                  setInfoSnack={setInfoSnack}
+                  onRefreshBalance={getBalanceAndUserInfoFunc}
+                  onOpenSendQort={onOpenSendQort}
+                  onOpenRegisterName={onOpenRegisterName}
+                  extState={extState}
+                  isMainWindow={isMainWindow}
+                  onOpenSettings={onOpenSettings}
+                  onOpenDrawerLookup={onOpenDrawerLookup}
+                  onOpenWalletsApp={onOpenWalletsApp}
+                  getUserInfo={getUserInfo}
+                  onOpenMinting={onOpenMinting}
+                  showTutorial={showTutorial}
+                  onBackupWallet={onBackupWallet}
+                />
+              </Box>
+            </ErrorBoundary>
           </Suspense>
         )}
 
-        {isOpenSendQort && isMainWindow && (
-          <SendQortOverlay
-            balance={balance}
-            paymentTo={paymentTo}
-            onReturn={returnToMain}
-            onSuccess={() => {
-              setIsOpenSendQort(false);
-              setIsOpenSendQortSuccess(true);
-            }}
-            show={show}
+        {isMainWindow && (
+          <BackupWalletModal
+            open={isBackupWalletModalOpen}
+            onClose={closeBackupWalletModal}
+            rawWallet={rawWallet}
           />
         )}
 
+        <AnimatePresence>
+          {isOpenSendQort && isMainWindow && (
+            <SendQortOverlay
+              balance={balance}
+              originRect={sendQortOriginRect}
+              targetRect={sendQortTargetRect}
+              paymentTo={paymentTo}
+              onReturn={returnToMain}
+              onSuccess={() => {
+                setIsOpenSendQort(false);
+                setSendQortOriginRect(null);
+                setSendQortTargetRect(null);
+                setIsOpenSendQortSuccess(true);
+              }}
+              show={show}
+            />
+          )}
+          {isOpenReceiveQort && isMainWindow && (
+            <ReceiveQortOverlay
+              address={receiveQortAddress || address || ''}
+              originRect={receiveQortOriginRect}
+              targetRect={receiveQortTargetRect}
+              onReturn={() => {
+                setIsOpenReceiveQort(false);
+                setReceiveQortOriginRect(null);
+                setReceiveQortTargetRect(null);
+                setReceiveQortAddress('');
+              }}
+            />
+          )}
+        </AnimatePresence>
+
         {isShowQortalRequest && !isMainWindow && (
           <QortalRequestScreen
             message={messageQortalRequest}
@@ -1119,16 +1652,17 @@ function App() {
           <AuthenticationForm
             rawWallet={rawWallet}
             selectedNode={selectedNode}
+            unlockTransition={authUnlockTransition}
             walletToBeDecryptedError={walletToBeDecryptedError}
             onBack={onAuthenticationFormBack}
             onAuthenticate={authenticateWallet}
+            onUnlockTransitionComplete={() => setAuthUnlockTransition(null)}
           />
         )}
         {extState === 'download-wallet' && (
           <DownloadWallet
             returnToMain={returnToMain}
             setIsLoading={setIsLoading}
-            showInfo={showInfo}
             rawWallet={rawWallet}
             setWalletToBeDownloaded={setWalletToBeDownloaded}
             walletToBeDownloaded={walletToBeDownloaded}
@@ -1159,6 +1693,7 @@ function App() {
             setStoredAccount={setStoredAccount}
             onCreateAccount={createAccountFunc}
             onBackupAccountConfirm={onBackupAccountConfirm}
+            onEnterHub={onEnterHubAfterCreate}
             exportSeedphrase={exportSeedphrase}
           />
         )}
@@ -1237,35 +1772,13 @@ function App() {
           />
         )}
 
-        <CustomizedSnackbars
+        <QortinoNotificationHost
           open={openSnack}
           setOpen={setOpenSnack}
           info={infoSnack}
           setInfo={setInfoSnack}
         />
 
-        <DrawerComponent
-          open={isOpenDrawerProfile}
-          setOpen={setIsOpenDrawerProfile}
-        >
-          <ProfileLeft
-            userInfo={userInfo}
-            balance={balance}
-            rawWallet={rawWallet}
-            qortBalanceLoading={qortBalanceLoading}
-            setOpenSnack={setOpenSnack}
-            setInfoSnack={
-              setInfoSnack as (
-                info: { type: string; message: string } | null
-              ) => void
-            }
-            onRefreshBalance={getBalanceAndUserInfoFunc}
-            onOpenSendQort={onOpenSendQortAndCloseDrawer}
-            onOpenRegisterName={onOpenRegisterName}
-            onCloseDrawer={onCloseDrawerProfile}
-          />
-        </DrawerComponent>
-
         <UserLookup
           isOpenDrawerLookup={isOpenDrawerLookup}
           setIsOpenDrawerLookup={setIsOpenDrawerLookup}
@@ -1283,25 +1796,9 @@ function App() {
           }
         />
         <BuyQortInformation balance={balance} />
+        {isMainWindow && <NotificationPermissionSlideDown />}
       </QORTAL_APP_CONTEXT.Provider>
 
-      {extState === 'create-wallet' && walletToBeDownloaded && (
-        <ButtonBase
-          onClick={onShowTutorialImportantInfo}
-          sx={{
-            bottom: '25px',
-            position: 'fixed',
-            right: '25px',
-          }}
-        >
-          <HelpIcon
-            sx={{
-              color: theme.palette.other.unread,
-            }}
-          />
-        </ButtonBase>
-      )}
-
       {isOpenMinting && (
         <Minting
           setIsOpenMinting={setIsOpenMinting}
@@ -1312,7 +1809,7 @@ function App() {
 
       {!isAuthenticated && (
         <NotAuthenticatedFooter
-          showCoreSetup={!!window?.coreSetup}
+          showCoreSetup
           onOpenCoreSetup={onOpenCoreSetup}
         />
       )}
@@ -1329,7 +1826,6 @@ function App() {
           onOpenSettings,
           onOpenDrawerLookup,
           onOpenWalletsApp,
-          onOpenDrawerProfile,
           onLogout: logoutFunc,
           getUserInfo,
           onOpenMinting,
@@ -1350,7 +1846,10 @@ function App() {
     >
       <CustomTitleBar rightNav={titleBarRightNav} />
       {extState === 'authenticated' && isMainWindow && (
-        <GlobalQortalNavBar desktopViewMode={desktopViewMode} />
+        <GlobalQortalNavBar
+          desktopViewMode={desktopViewMode}
+          utilityNav={titleBarRightNav}
+        />
       )}
 
       <Box
@@ -1363,7 +1862,86 @@ function App() {
           overflow: 'hidden',
         }}
       >
-        {mainContent}
+        {globalRuntimeFault && extState === 'authenticated' && isMainWindow ? (
+          <Box
+            sx={{
+              alignItems: 'center',
+              display: 'flex',
+              justifyContent: 'center',
+              p: 3,
+              width: '100%',
+            }}
+          >
+            <Box
+              sx={{
+                alignItems: 'flex-start',
+                backdropFilter: 'blur(18px)',
+                background:
+                  theme.palette.mode === 'dark'
+                    ? 'linear-gradient(180deg, rgba(18,22,29,0.92) 0%, rgba(11,14,20,0.96) 100%)'
+                    : 'linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(244,247,252,0.96) 100%)',
+                border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.08)' : 'rgba(20,24,32,0.08)'}`,
+                borderRadius: '24px',
+                boxShadow:
+                  theme.palette.mode === 'dark'
+                    ? '0 24px 48px rgba(0,0,0,0.3)'
+                    : '0 18px 36px rgba(15,20,30,0.12)',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '12px',
+                maxWidth: '620px',
+                p: '22px',
+                width: '100%',
+              }}
+            >
+              <Typography sx={{ fontSize: '1.05rem', fontWeight: 800 }}>
+                Hub runtime error
+              </Typography>
+              <Typography
+                sx={{
+                  color: theme.palette.text.secondary,
+                  fontSize: '0.85rem',
+                  lineHeight: 1.55,
+                }}
+              >
+                The authenticated app hit a runtime fault after login. We are
+                surfacing it here instead of leaving a white screen.
+              </Typography>
+              <Box
+                sx={{
+                  background:
+                    theme.palette.mode === 'dark'
+                      ? 'rgba(255,255,255,0.03)'
+                      : 'rgba(24,32,44,0.04)',
+                  border: `1px solid ${theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.06)' : 'rgba(24,32,44,0.08)'}`,
+                  borderRadius: '16px',
+                  px: 1.5,
+                  py: 1.2,
+                }}
+              >
+                <Typography
+                  sx={{ fontSize: '0.78rem', fontWeight: 700, mb: 0.45 }}
+                >
+                  {globalRuntimeFault.source}
+                </Typography>
+                <Typography
+                  sx={{
+                    color: theme.palette.text.primary,
+                    fontFamily: 'monospace',
+                    fontSize: '0.8rem',
+                    lineHeight: 1.5,
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-word',
+                  }}
+                >
+                  {globalRuntimeFault.message}
+                </Typography>
+              </Box>
+            </Box>
+          </Box>
+        ) : (
+          mainContent
+        )}
       </Box>
     </AppContainer>
   );
diff --git a/src/assets/audio/light-transition-351939.mp3 b/src/assets/audio/light-transition-351939.mp3
new file mode 100644
index 00000000..ddebee3b
Binary files /dev/null and b/src/assets/audio/light-transition-351939.mp3 differ
diff --git a/src/assets/minting/blue-grey-menu-button2-1.png b/src/assets/minting/blue-grey-menu-button2-1.png
new file mode 100644
index 00000000..985d3371
Binary files /dev/null and b/src/assets/minting/blue-grey-menu-button2-1.png differ
diff --git a/src/assets/sidebar/qortal-logo-official.png b/src/assets/sidebar/qortal-logo-official.png
new file mode 100644
index 00000000..11e8b5cb
Binary files /dev/null and b/src/assets/sidebar/qortal-logo-official.png differ
diff --git a/src/assets/svgs/QortinoCurrent.png b/src/assets/svgs/QortinoCurrent.png
new file mode 100644
index 00000000..6c13318e
Binary files /dev/null and b/src/assets/svgs/QortinoCurrent.png differ
diff --git a/src/assets/svgs/QortinoCurrent.svg b/src/assets/svgs/QortinoCurrent.svg
new file mode 100644
index 00000000..2f957939
--- /dev/null
+++ b/src/assets/svgs/QortinoCurrent.svg
@@ -0,0 +1,90 @@
+<svg width="168" height="184" viewBox="0 0 168 184" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient id="qortino-current-shell-fill" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(61 46) rotate(57.5) scale(118 128)">
+      <stop offset="0" stop-color="#A5B9DB" stop-opacity="0.18"/>
+      <stop offset="0.22" stop-color="#4D5A72" stop-opacity="0.98"/>
+      <stop offset="0.64" stop-color="#1A212C"/>
+      <stop offset="1" stop-color="#0F141C"/>
+    </radialGradient>
+    <radialGradient id="qortino-current-shell-gloss" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(60 42) rotate(90) scale(40 56)">
+      <stop stop-color="#D8E7FF" stop-opacity="0.26"/>
+      <stop offset="0.52" stop-color="#9EB5D8" stop-opacity="0.08"/>
+      <stop offset="1" stop-color="#111722" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="qortino-current-shell-stroke" x1="30" y1="18" x2="138" y2="160" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#B7CAE8" stop-opacity="0.24"/>
+      <stop offset="0.52" stop-color="#5C6D89" stop-opacity="0.1"/>
+      <stop offset="1" stop-color="#2A3447" stop-opacity="0.26"/>
+    </linearGradient>
+    <linearGradient id="qortino-current-face-fill" x1="84" y1="60" x2="84" y2="122" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#16202D"/>
+      <stop offset="1" stop-color="#0A1017"/>
+    </linearGradient>
+    <radialGradient id="qortino-current-face-sheen" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(67 68) rotate(56) scale(30 44)">
+      <stop stop-color="#8FB8FF" stop-opacity="0.1"/>
+      <stop offset="1" stop-color="#0A1017" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="qortino-current-stem" x1="84" y1="10" x2="84" y2="36" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#D2E3FF" stop-opacity="0.38"/>
+      <stop offset="1" stop-color="#D2E3FF" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="qortino-current-badge-fill" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 0) rotate(90) scale(11)">
+      <stop stop-color="#567099"/>
+      <stop offset="0.48" stop-color="#3C5275"/>
+      <stop offset="1" stop-color="#2A3A52"/>
+    </radialGradient>
+    <linearGradient id="qortino-current-badge-ring" x1="-9.8" y1="-10" x2="10" y2="10" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#B0CEFA" stop-opacity="0.22"/>
+      <stop offset="1" stop-color="#B0CEFA" stop-opacity="0.08"/>
+    </linearGradient>
+    <filter id="qortino-current-eye-glow" x="-120%" y="-120%" width="340%" height="340%">
+      <feGaussianBlur stdDeviation="2.2"/>
+    </filter>
+    <filter id="qortino-current-logo-soft" x="-120%" y="-120%" width="340%" height="340%">
+      <feGaussianBlur stdDeviation="0.55"/>
+    </filter>
+    <path id="qortino-current-logo-core" d="M0 -9.2L7.8 -4.6V4.7L0 9.3L-7.8 4.7V-4.6L0 -9.2ZM0 -4.7L-4.2 -2.3V2.5L0 5L4.2 2.5V-2.3L0 -4.7Z"/>
+    <path id="qortino-current-logo-tail" d="M4.5 2.5L7.8 4.5V10.8L4.5 8.9V2.5Z"/>
+  </defs>
+
+  <g id="qortino-current">
+    <g id="antenna" transform="translate(84 28) scale(1.7) translate(-84 -28)">
+      <rect x="80" y="19" width="8" height="17" rx="4" fill="url(#qortino-current-stem)"/>
+      <g transform="translate(84 10)">
+        <circle r="10.1" fill="url(#qortino-current-badge-fill)"/>
+        <circle r="9.7" stroke="url(#qortino-current-badge-ring)" stroke-width="0.9"/>
+        <circle r="3.8" fill="#C4DAFB" fill-opacity="0.05"/>
+        <g transform="scale(1.48)">
+          <use href="#qortino-current-logo-core" fill="#C4DAFB" fill-opacity="0.14" filter="url(#qortino-current-logo-soft)" fill-rule="evenodd"/>
+          <use href="#qortino-current-logo-tail" fill="#C4DAFB" fill-opacity="0.14" filter="url(#qortino-current-logo-soft)"/>
+          <use href="#qortino-current-logo-core" fill="#C4DAFB" fill-opacity="0.23" fill-rule="evenodd"/>
+          <use href="#qortino-current-logo-tail" fill="#C4DAFB" fill-opacity="0.23"/>
+        </g>
+      </g>
+    </g>
+
+    <g id="body" transform="translate(84 100) scale(1 0.95) translate(-84 -82)">
+      <rect x="8" y="6" width="152" height="152" rx="69" ry="67" fill="url(#qortino-current-shell-fill)"/>
+      <rect x="8.7" y="6.7" width="150.6" height="150.6" rx="68.3" ry="66.3" stroke="url(#qortino-current-shell-stroke)" stroke-width="1.4"/>
+      <rect x="8" y="6" width="152" height="152" rx="69" ry="67" fill="url(#qortino-current-shell-gloss)"/>
+      <ellipse cx="84" cy="83" rx="50" ry="50" fill="#0A1220" fill-opacity="0.12"/>
+    </g>
+
+    <g id="face" transform="translate(84 105) scale(1.45) translate(-84 -87)">
+      <rect x="44" y="58" width="80" height="58" rx="28" fill="url(#qortino-current-face-fill)"/>
+      <rect x="44.6" y="58.6" width="78.8" height="56.8" rx="27.4" stroke="#B3D0FF" stroke-opacity="0.12" stroke-width="1.2"/>
+      <rect x="44" y="58" width="80" height="58" rx="28" fill="url(#qortino-current-face-sheen)"/>
+
+      <g id="left-eye">
+        <ellipse cx="24.5" cy="26.5" rx="5.4" ry="5.4" transform="translate(44 58)" fill="#DDEBFF" fill-opacity="0.26" filter="url(#qortino-current-eye-glow)"/>
+        <ellipse cx="68.5" cy="84.5" rx="4.5" ry="4.5" fill="#DDEBFF"/>
+      </g>
+      <g id="right-eye">
+        <ellipse cx="54.5" cy="26.5" rx="5.4" ry="5.4" transform="translate(44 58)" fill="#DDEBFF" fill-opacity="0.26" filter="url(#qortino-current-eye-glow)"/>
+        <ellipse cx="98.5" cy="84.5" rx="4.5" ry="4.5" fill="#DDEBFF"/>
+      </g>
+
+      <path d="M70 100.5C76.8 106.4 89.2 106.4 96 100.5" stroke="#DDEBFF" stroke-opacity="0.78" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/svgs/QortinoCurrentNoAntenna.png b/src/assets/svgs/QortinoCurrentNoAntenna.png
new file mode 100644
index 00000000..eda46dea
Binary files /dev/null and b/src/assets/svgs/QortinoCurrentNoAntenna.png differ
diff --git a/src/assets/svgs/QortinoCurrentNoAntenna.svg b/src/assets/svgs/QortinoCurrentNoAntenna.svg
new file mode 100644
index 00000000..d9580811
--- /dev/null
+++ b/src/assets/svgs/QortinoCurrentNoAntenna.svg
@@ -0,0 +1,57 @@
+<svg width="168" height="156" viewBox="0 20 168 156" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient id="qortino-no-antenna-shell-fill" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(61 46) rotate(57.5) scale(118 128)">
+      <stop offset="0" stop-color="#A5B9DB" stop-opacity="0.18"/>
+      <stop offset="0.22" stop-color="#4D5A72" stop-opacity="0.98"/>
+      <stop offset="0.64" stop-color="#1A212C"/>
+      <stop offset="1" stop-color="#0F141C"/>
+    </radialGradient>
+    <radialGradient id="qortino-no-antenna-shell-gloss" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(60 42) rotate(90) scale(40 56)">
+      <stop stop-color="#D8E7FF" stop-opacity="0.26"/>
+      <stop offset="0.52" stop-color="#9EB5D8" stop-opacity="0.08"/>
+      <stop offset="1" stop-color="#111722" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="qortino-no-antenna-shell-stroke" x1="30" y1="18" x2="138" y2="160" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#B7CAE8" stop-opacity="0.24"/>
+      <stop offset="0.52" stop-color="#5C6D89" stop-opacity="0.1"/>
+      <stop offset="1" stop-color="#2A3447" stop-opacity="0.26"/>
+    </linearGradient>
+    <linearGradient id="qortino-no-antenna-face-fill" x1="84" y1="60" x2="84" y2="122" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#16202D"/>
+      <stop offset="1" stop-color="#0A1017"/>
+    </linearGradient>
+    <radialGradient id="qortino-no-antenna-face-sheen" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(67 68) rotate(56) scale(30 44)">
+      <stop stop-color="#8FB8FF" stop-opacity="0.1"/>
+      <stop offset="1" stop-color="#0A1017" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="qortino-no-antenna-eye-glow" x="-120%" y="-120%" width="340%" height="340%">
+      <feGaussianBlur stdDeviation="2.2"/>
+    </filter>
+  </defs>
+
+  <g id="qortino-current-no-antenna">
+    <g id="body" transform="translate(84 100) scale(1 0.95) translate(-84 -82)">
+      <rect x="8" y="6" width="152" height="152" rx="69" ry="67" fill="url(#qortino-no-antenna-shell-fill)"/>
+      <rect x="8.7" y="6.7" width="150.6" height="150.6" rx="68.3" ry="66.3" stroke="url(#qortino-no-antenna-shell-stroke)" stroke-width="1.4"/>
+      <rect x="8" y="6" width="152" height="152" rx="69" ry="67" fill="url(#qortino-no-antenna-shell-gloss)"/>
+      <ellipse cx="84" cy="83" rx="50" ry="50" fill="#0A1220" fill-opacity="0.12"/>
+    </g>
+
+    <g id="face" transform="translate(84 105) scale(1.45) translate(-84 -87)">
+      <rect x="44" y="58" width="80" height="58" rx="28" fill="url(#qortino-no-antenna-face-fill)"/>
+      <rect x="44.6" y="58.6" width="78.8" height="56.8" rx="27.4" stroke="#B3D0FF" stroke-opacity="0.12" stroke-width="1.2"/>
+      <rect x="44" y="58" width="80" height="58" rx="28" fill="url(#qortino-no-antenna-face-sheen)"/>
+
+      <g id="left-eye">
+        <ellipse cx="24.5" cy="26.5" rx="5.4" ry="5.4" transform="translate(44 58)" fill="#DDEBFF" fill-opacity="0.26" filter="url(#qortino-no-antenna-eye-glow)"/>
+        <ellipse cx="68.5" cy="84.5" rx="4.5" ry="4.5" fill="#DDEBFF"/>
+      </g>
+      <g id="right-eye">
+        <ellipse cx="54.5" cy="26.5" rx="5.4" ry="5.4" transform="translate(44 58)" fill="#DDEBFF" fill-opacity="0.26" filter="url(#qortino-no-antenna-eye-glow)"/>
+        <ellipse cx="98.5" cy="84.5" rx="4.5" ry="4.5" fill="#DDEBFF"/>
+      </g>
+
+      <path d="M70 100.5C76.8 106.4 89.2 106.4 96 100.5" stroke="#DDEBFF" stroke-opacity="0.78" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/svgs/QortinoHead.svg b/src/assets/svgs/QortinoHead.svg
new file mode 100644
index 00000000..cfbf8186
--- /dev/null
+++ b/src/assets/svgs/QortinoHead.svg
@@ -0,0 +1,65 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient id="qortino-head-shell-fill" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(398 284) rotate(51.2) scale(626 690)">
+      <stop offset="0" stop-color="#5A6885"/>
+      <stop offset="0.22" stop-color="#3B465D"/>
+      <stop offset="0.62" stop-color="#1A212C"/>
+      <stop offset="1" stop-color="#0F141C"/>
+    </radialGradient>
+    <radialGradient id="qortino-head-highlight" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(410 236) rotate(90) scale(260 320)">
+      <stop offset="0" stop-color="#D0E2FF" stop-opacity="0.34"/>
+      <stop offset="0.42" stop-color="#8FA9D0" stop-opacity="0.14"/>
+      <stop offset="1" stop-color="#0E1521" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="qortino-head-stroke" x1="234" y1="126" x2="776" y2="850" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#B4C9EB" stop-opacity="0.28"/>
+      <stop offset="0.54" stop-color="#7187AA" stop-opacity="0.12"/>
+      <stop offset="1" stop-color="#273244" stop-opacity="0.26"/>
+    </linearGradient>
+    <linearGradient id="qortino-head-face-fill" x1="512" y1="374" x2="512" y2="606" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#16202D"/>
+      <stop offset="1" stop-color="#0A1017"/>
+    </linearGradient>
+    <radialGradient id="qortino-head-face-sheen" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(454 390) rotate(61.1) scale(164 198)">
+      <stop stop-color="#8DB8FF" stop-opacity="0.1"/>
+      <stop offset="1" stop-color="#0B1119" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="qortino-head-eye-soft" x="-40%" y="-40%" width="180%" height="180%">
+      <feGaussianBlur stdDeviation="6"/>
+    </filter>
+    <filter id="qortino-head-inner-soft" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="18"/>
+    </filter>
+    <path id="qortino-head-mouth" d="M0 0C16 13.6 48 13.6 64 0" />
+  </defs>
+
+  <g id="qortino-head-only">
+    <g id="qortino-shell">
+      <circle cx="512" cy="544" r="336" fill="url(#qortino-head-shell-fill)" />
+      <circle cx="512" cy="544" r="332" stroke="url(#qortino-head-stroke)" stroke-width="8" />
+      <circle cx="512" cy="544" r="336" fill="url(#qortino-head-highlight)" />
+      <ellipse cx="512" cy="544" rx="244" ry="244" fill="#0A1220" fill-opacity="0.08" filter="url(#qortino-head-inner-soft)" />
+    </g>
+
+    <g id="qortino-face">
+      <rect x="318" y="372" width="388" height="268" rx="134" fill="url(#qortino-head-face-fill)" />
+      <rect x="322" y="376" width="380" height="260" rx="130" stroke="#B3D0FF" stroke-opacity="0.13" stroke-width="4" />
+      <rect x="318" y="372" width="388" height="268" rx="134" fill="url(#qortino-head-face-sheen)" />
+      <rect x="336" y="390" width="352" height="232" rx="116" fill="url(#qortino-head-face-sheen)" opacity="0.55" />
+    </g>
+
+    <g id="qortino-features">
+      <g id="qortino-left-eye">
+        <ellipse cx="434" cy="472" rx="24" ry="24" fill="#DDEBFF" fill-opacity="0.3" filter="url(#qortino-head-eye-soft)" />
+        <ellipse cx="434" cy="472" rx="18" ry="18" fill="#E5F0FF" />
+      </g>
+      <g id="qortino-right-eye">
+        <ellipse cx="590" cy="472" rx="24" ry="24" fill="#DDEBFF" fill-opacity="0.3" filter="url(#qortino-head-eye-soft)" />
+        <ellipse cx="590" cy="472" rx="18" ry="18" fill="#E5F0FF" />
+      </g>
+      <g id="qortino-mouth-group" transform="translate(448 558)">
+        <use href="#qortino-head-mouth" stroke="#DDEBFF" stroke-opacity="0.82" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/svgs/QortinoMascot.svg b/src/assets/svgs/QortinoMascot.svg
new file mode 100644
index 00000000..146537e5
--- /dev/null
+++ b/src/assets/svgs/QortinoMascot.svg
@@ -0,0 +1,93 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient id="qortino-shell-fill" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(398 316) rotate(51.2) scale(626 690)">
+      <stop offset="0" stop-color="#5A6885"/>
+      <stop offset="0.22" stop-color="#3B465D"/>
+      <stop offset="0.62" stop-color="#1A212C"/>
+      <stop offset="1" stop-color="#0F141C"/>
+    </radialGradient>
+    <radialGradient id="qortino-shell-highlight" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(410 268) rotate(90) scale(260 320)">
+      <stop offset="0" stop-color="#D0E2FF" stop-opacity="0.34"/>
+      <stop offset="0.42" stop-color="#8FA9D0" stop-opacity="0.14"/>
+      <stop offset="1" stop-color="#0E1521" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="qortino-shell-stroke" x1="234" y1="162" x2="776" y2="886" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#B4C9EB" stop-opacity="0.28"/>
+      <stop offset="0.54" stop-color="#7187AA" stop-opacity="0.12"/>
+      <stop offset="1" stop-color="#273244" stop-opacity="0.26"/>
+    </linearGradient>
+    <linearGradient id="qortino-face-fill" x1="512" y1="406" x2="512" y2="638" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#16202D"/>
+      <stop offset="1" stop-color="#0A1017"/>
+    </linearGradient>
+    <radialGradient id="qortino-face-sheen" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(454 420) rotate(61.1) scale(164 198)">
+      <stop stop-color="#8DB8FF" stop-opacity="0.1"/>
+      <stop offset="1" stop-color="#0B1119" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="qortino-stem-fill" x1="0" y1="0" x2="0" y2="1">
+      <stop stop-color="#D6E5FF" stop-opacity="0.42"/>
+      <stop offset="1" stop-color="#D6E5FF" stop-opacity="0"/>
+    </linearGradient>
+    <radialGradient id="qortino-badge-fill" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(0 0) rotate(90) scale(58)">
+      <stop stop-color="#5A7195"/>
+      <stop offset="0.5" stop-color="#405570"/>
+      <stop offset="1" stop-color="#2A384C"/>
+    </radialGradient>
+    <linearGradient id="qortino-badge-stroke" x1="-42" y1="-42" x2="42" y2="42" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#B6D0F6" stop-opacity="0.3"/>
+      <stop offset="1" stop-color="#7A93B6" stop-opacity="0.12"/>
+    </linearGradient>
+    <filter id="qortino-eye-soft" x="-40%" y="-40%" width="180%" height="180%">
+      <feGaussianBlur stdDeviation="6"/>
+    </filter>
+    <filter id="qortino-inner-soft" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="18"/>
+    </filter>
+    <path id="qortino-mouth" d="M0 0C16 13.6 48 13.6 64 0" />
+    <path id="qortino-q-logo" d="M0 -24L20.4 -12V12.2L0 24.4L-20.4 12.2V-12L0 -24ZM0 -12.2L-11 -6V6.5L0 13L11 6.5V-6L0 -12.2Z" />
+    <path id="qortino-q-tail" d="M11.8 6.5L20.4 11.7V28.2L11.8 23.2V6.5Z" />
+  </defs>
+
+  <g id="qortino-mascot">
+    <g id="qortino-antenna">
+      <rect x="487" y="178" width="50" height="132" rx="25" fill="url(#qortino-stem-fill)" />
+      <g id="qortino-badge" transform="translate(512 160)">
+        <circle r="58" fill="url(#qortino-badge-fill)" />
+        <circle r="54" stroke="url(#qortino-badge-stroke)" stroke-width="4" />
+        <circle r="22" fill="#C7DCF8" fill-opacity="0.06" />
+        <g transform="translate(0 -1) scale(1.56)">
+          <use href="#qortino-q-logo" fill="#C6DAFB" fill-opacity="0.24" fill-rule="evenodd" />
+          <use href="#qortino-q-tail" fill="#C6DAFB" fill-opacity="0.24" />
+        </g>
+      </g>
+    </g>
+
+    <g id="qortino-shell">
+      <circle cx="512" cy="592" r="336" fill="url(#qortino-shell-fill)" />
+      <circle cx="512" cy="592" r="332" stroke="url(#qortino-shell-stroke)" stroke-width="8" />
+      <circle cx="512" cy="592" r="336" fill="url(#qortino-shell-highlight)" />
+      <ellipse cx="512" cy="592" rx="244" ry="244" fill="#0A1220" fill-opacity="0.08" filter="url(#qortino-inner-soft)" />
+    </g>
+
+    <g id="qortino-face">
+      <rect x="318" y="420" width="388" height="268" rx="134" fill="url(#qortino-face-fill)" />
+      <rect x="322" y="424" width="380" height="260" rx="130" stroke="#B3D0FF" stroke-opacity="0.13" stroke-width="4" />
+      <rect x="318" y="420" width="388" height="268" rx="134" fill="url(#qortino-face-sheen)" />
+      <rect x="336" y="438" width="352" height="232" rx="116" fill="url(#qortino-face-sheen)" opacity="0.55" />
+    </g>
+
+    <g id="qortino-eyes-and-mouth">
+      <g id="qortino-left-eye">
+        <ellipse cx="434" cy="520" rx="24" ry="24" fill="#DDEBFF" fill-opacity="0.3" filter="url(#qortino-eye-soft)" />
+        <ellipse cx="434" cy="520" rx="18" ry="18" fill="#E5F0FF" />
+      </g>
+      <g id="qortino-right-eye">
+        <ellipse cx="590" cy="520" rx="24" ry="24" fill="#DDEBFF" fill-opacity="0.3" filter="url(#qortino-eye-soft)" />
+        <ellipse cx="590" cy="520" rx="18" ry="18" fill="#E5F0FF" />
+      </g>
+      <g id="qortino-mouth-group" transform="translate(448 606)">
+        <use href="#qortino-mouth" stroke="#DDEBFF" stroke-opacity="0.82" stroke-width="10" stroke-linecap="round" stroke-linejoin="round" />
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/src/assets/user-search/magnifier.svg b/src/assets/user-search/magnifier.svg
new file mode 100644
index 00000000..64441fb0
--- /dev/null
+++ b/src/assets/user-search/magnifier.svg
@@ -0,0 +1,23 @@
+<svg width="140" height="140" viewBox="0 0 140 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient id="lensGlow" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(52 50) rotate(90) scale(34)">
+      <stop offset="0%" stop-color="currentColor" stop-opacity="0.12"></stop>
+      <stop offset="70%" stop-color="currentColor" stop-opacity="0.04"></stop>
+      <stop offset="100%" stop-color="currentColor" stop-opacity="0"></stop>
+    </radialGradient>
+    <radialGradient id="lensGlass" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(47 41) rotate(90) scale(36)">
+      <stop offset="0%" stop-color="white" stop-opacity="0.12"></stop>
+      <stop offset="58%" stop-color="white" stop-opacity="0.05"></stop>
+      <stop offset="100%" stop-color="white" stop-opacity="0.02"></stop>
+    </radialGradient>
+  </defs>
+
+  <circle cx="52" cy="50" r="34" fill="url(#lensGlow)"></circle>
+  <circle cx="52" cy="50" r="30" fill="url(#lensGlass)"></circle>
+  <circle cx="52" cy="50" r="31" stroke="currentColor" stroke-opacity="0.2" stroke-width="2"></circle>
+  <circle cx="52" cy="50" r="27" stroke="currentColor" stroke-width="5"></circle>
+  <path d="M74 74L103 103" stroke="currentColor" stroke-width="8" stroke-linecap="round"></path>
+  <path d="M41 35C44 29 50 25 58 25" stroke="white" stroke-opacity="0.18" stroke-width="4" stroke-linecap="round"></path>
+  <circle cx="44" cy="40" r="10" fill="white" fill-opacity="0.08"></circle>
+  <circle cx="50" cy="52" r="25.5" fill="white" fill-opacity="0.035"></circle>
+</svg>
diff --git a/src/assets/user-search/qortal-logo-512.png b/src/assets/user-search/qortal-logo-512.png
new file mode 100644
index 00000000..9ad9dcb9
Binary files /dev/null and b/src/assets/user-search/qortal-logo-512.png differ
diff --git a/src/atoms/global.ts b/src/atoms/global.ts
index ca4fe382..1a474f15 100644
--- a/src/atoms/global.ts
+++ b/src/atoms/global.ts
@@ -5,13 +5,15 @@ import {
   atomWithStorage,
   useAtomCallback,
 } from 'jotai/utils';
-import { HTTP_LOCALHOST_12391 } from '../constants/constants';
+import { HTTPS_EXT_NODE_QORTAL_LINK } from '../constants/constants';
 import { ApiKey } from '../types/auth';
 import { extStates } from '../App';
 import { Steps } from '../components/CoreSetupDialog';
 import { LOCALHOST } from '../constants/constants';
 import { GlobalDownloadEntry } from '../types/resources';
 import { defaultPinnedApps } from '../components/Apps/config/officialApps';
+import { getElectronPersistentStorage } from '../utils/electronPersistentStorage';
+import type { QuitterDashboardFeedCache } from '../components/Widgets/quitter/quitterFeedTypes';
 
 export const sortablePinnedAppsAtom = atomWithReset(defaultPinnedApps);
 
@@ -43,11 +45,12 @@ export const isDisabledEditorEnterAtom = atomWithReset(false);
 export const isOpenBlockedModalAtom = atomWithReset(false);
 export const isRunningPublicNodeAtom = atomWithReset(false);
 export const isUsingImportExportSettingsAtom = atomWithReset(null);
-export const lastPaymentSeenTimestampAtom = atomWithReset(null);
-export const mailsAtom = atomWithReset([]);
+
 export const memberGroupsAtom = atomWithReset([]);
 export const mutedGroupsAtom = atomWithReset([]);
 export const myGroupsWhereIAmAdminAtom = atomWithReset([]);
+
+
 export const navigationControllerAtom = atomWithReset({});
 export const oldPinnedAppsAtom = atomWithReset([]);
 export const promotionsAtom = atomWithReset([]);
@@ -71,6 +74,11 @@ export type JoinRequestsCache = {
   adminGroupIds: number[];
 } | null;
 export const joinRequestsCacheAtom = atom<JoinRequestsCache>(null) as PrimitiveAtom<JoinRequestsCache>;
+
+/** Quitter home-dashboard widget feed. Reset on logout. Prefer useAtom only in QuitterFeedWidget. */
+export const quitterDashboardFeedCacheAtom =
+  atomWithReset<QuitterDashboardFeedCache | null>(null);
+
 export const qMailLastEnteredTimestampAtom = atomWithReset(null);
 export const resourceDownloadControllerAtom = atomWithReset({});
 export const globalDownloadsAtom = atomWithReset<
@@ -99,12 +107,398 @@ export const globalChatWidgetBoundsAtom = atomWithStorage<{
   { getOnInit: true }
 );
 
+/** Persisted: custom websocket notification subscriptions. Sent as a second subscribe action when the notifications socket connects. */
+export type CustomWebsocketSubscription = {
+  event: string;
+  resourceFilter?: {
+    service: string;
+    identifier: string;
+    name?: string;
+    excludeBlocked?: boolean;
+    mode?: string;
+  };
+  filters?: Record<string, string>;
+  image?: string;
+  link?: string;
+  notificationId?: string;
+  appName?: string;
+  appService?: string;
+  message?: Record<string, string>;
+  [key: string]: unknown;
+};
+// When in Electron, use appStorage-backed persistence; otherwise Jotai uses localStorage (undefined = default).
+const electronStorage = getElectronPersistentStorage();
+
+/** Persisted: custom WS subscriptions per user address (key: qortal_custom_ws_subscriptions). */
+export const CUSTOM_WS_SUBSCRIPTIONS_STORAGE_KEY = 'qortal_custom_ws_subscriptions';
+export const customWebsocketSubscriptionsByAddressAtom = atomWithStorage<
+  Record<string, CustomWebsocketSubscription[]>
+>(
+  CUSTOM_WS_SUBSCRIPTIONS_STORAGE_KEY,
+  {},
+  electronStorage as any
+);
+
+/** Persisted: keys of notifications already "seen in app" (excluded from unread count), by address then notification key. Keys older than this are pruned. */
+export const NOTIFICATION_SEEN_IN_APP_STORAGE_KEY =
+  'qortal_notification_seen_in_app';
+const NOTIFICATION_SEEN_IN_APP_MAX_AGE_MS = 3 * 24 * 60 * 60 * 1000; // 3 days
+
+/** Per-address record of notificationKey -> mark time (ms). Pruned to last 3 days when read/set. */
+export type SeenInAppKeyRecord = Record<string, number>;
+/** Stored shape: address -> notificationKey -> timestamp. */
+export type SeenInAppRecordByAddress = Record<string, SeenInAppKeyRecord>;
+
+export function parseSeenInAppStored(
+  raw: string | null | unknown
+): SeenInAppRecordByAddress {
+  if (raw == null || raw === '') return {};
+  let parsed: unknown = raw;
+  if (typeof raw === 'string') {
+    try {
+      parsed = JSON.parse(raw);
+    } catch {
+      return {};
+    }
+  }
+  if (Array.isArray(parsed)) return {};
+  if (!parsed || typeof parsed !== 'object') return {};
+  const obj = parsed as Record<string, unknown>;
+  const result: SeenInAppRecordByAddress = {};
+  for (const [addr, inner] of Object.entries(obj)) {
+    if (inner && typeof inner === 'object' && !Array.isArray(inner)) {
+      const keyRecord: SeenInAppKeyRecord = {};
+      for (const [k, t] of Object.entries(inner)) {
+        if (typeof t === 'number') keyRecord[k] = t;
+      }
+      result[addr] = keyRecord;
+    }
+  }
+  return result;
+}
+
+function filterSeenInAppKeyRecordByAge(
+  record: SeenInAppKeyRecord
+): SeenInAppKeyRecord {
+  const cutoff = Date.now() - NOTIFICATION_SEEN_IN_APP_MAX_AGE_MS;
+  return Object.fromEntries(
+    Object.entries(record).filter(([, t]) => typeof t === 'number' && t > cutoff)
+  );
+}
+
+export function filterSeenInAppRecordByAge(
+  record: SeenInAppRecordByAddress
+): SeenInAppRecordByAddress {
+  const out: SeenInAppRecordByAddress = {};
+  for (const [addr, inner] of Object.entries(record)) {
+    const pruned = filterSeenInAppKeyRecordByAge(inner);
+    if (Object.keys(pruned).length > 0) out[addr] = pruned;
+  }
+  return out;
+}
+
+/** Keys for one address from the last 3 days. */
+function seenInAppRecordToKeysForAddress(
+  record: SeenInAppRecordByAddress,
+  address: string | null | undefined
+): string[] {
+  if (!address) return [];
+  const cutoff = Date.now() - NOTIFICATION_SEEN_IN_APP_MAX_AGE_MS;
+  const byAddr = record[address] ?? {};
+  return Object.keys(byAddr).filter(
+    (k) => typeof byAddr[k] === 'number' && byAddr[k] > cutoff
+  );
+}
+
+const seenInAppStorage = {
+  getItem: (key: string): SeenInAppRecordByAddress => {
+    const raw: string | null | unknown =
+      electronStorage != null
+        ? (electronStorage as any).getItem(key, null)
+        : typeof localStorage !== 'undefined'
+          ? localStorage.getItem(key)
+          : null;
+    const record = parseSeenInAppStored(raw);
+    return filterSeenInAppRecordByAge(record);
+  },
+  setItem: (
+    key: string,
+    value: string | SeenInAppRecordByAddress
+  ): void => {
+    const record =
+      typeof value === 'string' ? parseSeenInAppStored(value) : value;
+    const pruned = filterSeenInAppRecordByAge(record);
+    if (electronStorage != null) {
+      (electronStorage as any).setItem(key, pruned);
+    } else if (typeof localStorage !== 'undefined') {
+      localStorage.setItem(key, JSON.stringify(pruned));
+    }
+  },
+  removeItem: (key: string): void => {
+    if (electronStorage != null) {
+      (electronStorage as any).removeItem?.(key);
+    } else if (typeof localStorage !== 'undefined') {
+      localStorage.removeItem(key);
+    }
+  },
+};
+
+export const notificationSeenInAppKeysRecordAtom =
+  atomWithStorage<SeenInAppRecordByAddress>(
+    NOTIFICATION_SEEN_IN_APP_STORAGE_KEY,
+    {},
+    seenInAppStorage as any
+  );
+
+/** Keys for current user (from last 3 days). Set with string[] for current address or { address, keys } to merge for an address. */
+export const notificationSeenInAppKeysAtom = atom(
+  (get) =>
+    seenInAppRecordToKeysForAddress(
+      get(notificationSeenInAppKeysRecordAtom) as SeenInAppRecordByAddress,
+      get(userInfoAtom)?.address
+    ),
+  (get, set, update: string[] | { address: string; keys: string[] }) => {
+    const full =
+      get(notificationSeenInAppKeysRecordAtom) as SeenInAppRecordByAddress;
+    const address =
+      typeof update === 'object' && update !== null && 'address' in update
+        ? (update as { address: string; keys: string[] }).address
+        : get(userInfoAtom)?.address;
+    const keys =
+      typeof update === 'object' && update !== null && 'keys' in update
+        ? (update as { address: string; keys: string[] }).keys
+        : (update as string[]);
+    if (!address || !Array.isArray(keys)) return;
+    const record = { ...full };
+    record[address] = { ...(record[address] ?? {}) };
+    const now = Date.now();
+    for (const k of keys) record[address][k] = now;
+    const pruned = filterSeenInAppRecordByAge(record);
+    set(notificationSeenInAppKeysRecordAtom, pruned);
+  }
+);
+
+/** Current user: seen-in-app key → mark time (ms). Same ageing as notificationSeenInAppKeysAtom. */
+export const notificationSeenInAppKeyTimesAtom = atom((get) => {
+  const byAddress =
+    get(notificationSeenInAppKeysRecordAtom) as SeenInAppRecordByAddress;
+  const address = get(userInfoAtom)?.address;
+  if (!address) return {} as SeenInAppKeyRecord;
+  return filterSeenInAppKeyRecordByAge(byAddress[address] ?? {});
+});
+
+/** Same field order as GeneralNotifications getNotificationTimestamp (for prefix cutoff). */
+export function getNotificationSeenComparableTimeMs(notification: {
+  data?: { created?: unknown; timestamp?: unknown };
+  timestamp?: unknown;
+}): number | null {
+  const raw =
+    notification?.data?.created ??
+    notification?.data?.timestamp ??
+    notification?.timestamp;
+  if (raw == null || typeof raw !== 'number') return null;
+  return raw < 1e12 ? raw * 1000 : raw;
+}
+
+/**
+ * Full key: that exact notification is seen. Prefix key: seen only if resource time ≤ persisted mark time
+ * (so new items after mark stay unread).
+ */
+export function isNotificationSeenInAppFromKeyTimes(
+  notification: {
+    event?: string;
+    data?: {
+      signature?: string;
+      identifier?: string;
+      created?: unknown;
+      timestamp?: unknown;
+    };
+    appName?: string;
+    appService?: string;
+    notificationId?: string;
+    timestamp?: unknown;
+  },
+  seenInAppByKey: SeenInAppKeyRecord | null | undefined
+): boolean {
+  if (!seenInAppByKey || Object.keys(seenInAppByKey).length === 0) return false;
+  const fullKey = getNotificationSeenKey(notification);
+  if (typeof seenInAppByKey[fullKey] === 'number') return true;
+  const prefixKey = getNotificationSeenPrefixKey(notification);
+  const markedAt = seenInAppByKey[prefixKey];
+  if (typeof markedAt !== 'number') return false;
+  const notifTs = getNotificationSeenComparableTimeMs(notification);
+  if (notifTs == null) return false;
+  return notifTs <= markedAt;
+}
+
+/** Stable key for a notification (for "seen in app" matching). */
+export function getNotificationSeenKey(notification: {
+  event?: string;
+  data?: { signature?: string; identifier?: string; created?: unknown };
+  appName?: string;
+  appService?: string;
+  notificationId?: string;
+}): string {
+  if (notification?.event === 'PAYMENT_RECEIVED') {
+    return `PAYMENT_RECEIVED-${notification?.data?.signature ?? ''}`;
+  }
+  if (notification?.event === 'RESOURCE_PUBLISHED') {
+    const appName = (notification?.appName ?? '').toLowerCase();
+    const appService = notification?.appService ?? 'APP';
+    const notificationId = notification?.notificationId ?? '';
+    const id =
+      notification?.data?.identifier ??
+      notification?.data?.created ??
+      '';
+    return `RESOURCE_PUBLISHED-${appName}-${appService}-${notificationId}-${id}`;
+  }
+  return `other-${notification?.event ?? ''}-${Date.now()}`;
+}
+
+/** Prefix key (app + notificationId only); when app marks by notificationId, we add this. */
+export function getNotificationSeenPrefixKey(notification: {
+  event?: string;
+  appName?: string;
+  appService?: string;
+  notificationId?: string;
+}): string {
+  if (notification?.event === 'RESOURCE_PUBLISHED') {
+    const appName = (notification?.appName ?? '').toLowerCase();
+    const appService = notification?.appService ?? 'APP';
+    const notificationId = notification?.notificationId ?? '';
+    return `RESOURCE_PUBLISHED-${appName}-${appService}-${notificationId}`;
+  }
+  return getNotificationSeenKey(notification as any);
+}
+
+/** Build prefix for a subscription (same shape as getNotificationSeenPrefixKey). */
+function getSubscriptionSeenPrefix(sub: CustomWebsocketSubscription): string {
+  const appName = ((sub.appName as string) ?? '').toLowerCase();
+  const appService = (sub.appService as string) ?? 'APP';
+  const notificationId = (sub.notificationId as string) ?? '';
+  return `RESOURCE_PUBLISHED-${appName}-${appService}-${notificationId}`;
+}
+
+/** Keep only seen-in-app keys that still match a rule in customWebsocketSubscriptions. */
+export function filterSeenInAppKeysByRules(
+  seenKeys: string[],
+  customSubscriptions: CustomWebsocketSubscription[]
+): string[] {
+  if (!Array.isArray(seenKeys) || seenKeys.length === 0) return [];
+  const validPrefixes = new Set(
+    (customSubscriptions ?? []).map(getSubscriptionSeenPrefix)
+  );
+  if (validPrefixes.size === 0) return [];
+  return seenKeys.filter((key) => {
+    if (validPrefixes.has(key)) return true;
+    for (const prefix of validPrefixes) {
+      if (key.startsWith(prefix + '-')) return true;
+    }
+    return false;
+  });
+}
+
 export const txListAtom = atomWithReset([]);
-export const isOpenDialogCoreRecommendationAtom = atomWithReset(false);
+
+
+/** Notifications per user address (in-memory only; repopulated from WebSocket). */
+export const notificationsByAddressAtom = atomWithReset<Record<string, any[]>>({});
+
+/** Persisted: timestamp when user last "saw all" notifications, per address (Electron: appStorage). */
+export const SEEN_ALL_NOTIFICATIONS_STORAGE_KEY = 'qortal_seen_all_notifications';
+export const seenAllNotificationsByAddressAtom = atomWithStorage<Record<string, number | null>>(
+  SEEN_ALL_NOTIFICATIONS_STORAGE_KEY,
+  {},
+  electronStorage as any
+);
+
+/** Groups the current user is a member of – refreshed every 5 minutes. */
+export const myMemberGroupsAtom = atomWithReset<any[]>([]);
+/** Unix-ms timestamp of the last successful fetch for myMemberGroupsAtom. */
+export const myMemberGroupsLastFetchedAtom = atomWithReset<number>(0);
+
+/** Subscriptions the current user is subscribed to (fetched globally in the title bar). */
+export const mySubscriptionsAtom = atomWithReset<any[]>([]);
+/** Subscriptions belonging to groups the current user manages as admin. */
+export const managedSubscriptionsAtom = atomWithReset<any[]>([]);
+/** Whether the global subscription fetch is currently in progress. */
+export const subscriptionsLoadingAtom = atomWithReset<boolean>(false);
+/** Whether the global managed subscription fetch is currently in progress. */
+export const managedSubscriptionsLoadingAtom = atomWithReset<boolean>(false);
+
+
+export const isPublicNodeUnavailableAtom = atomWithReset(false);
 export const isLoadingAuthenticateAtom = atomWithReset(false);
 export const authenticatePasswordAtom = atomWithReset('');
 export const extStateAtom = atomWithReset<extStates>('not-authenticated');
 export const userInfoAtom = atomWithReset<any>(null);
+
+
+
+
+
+/** Current user's custom WS subscriptions (derived from customWebsocketSubscriptionsByAddressAtom by address). */
+export const customWebsocketSubscriptionsAtom = atom(
+  (get) => {
+    const byAddress = get(customWebsocketSubscriptionsByAddressAtom);
+    const address = get(userInfoAtom)?.address;
+    if (!address) return [];
+    return (byAddress[address] ?? []) as CustomWebsocketSubscription[];
+  },
+  (get, set, update: CustomWebsocketSubscription[] | ((prev: CustomWebsocketSubscription[]) => CustomWebsocketSubscription[])) => {
+    const byAddress = get(customWebsocketSubscriptionsByAddressAtom);
+    const address = get(userInfoAtom)?.address;
+    if (!address) return;
+    const prev = (byAddress[address] ?? []) as CustomWebsocketSubscription[];
+    const next = typeof update === 'function' ? update(prev) : update;
+    set(customWebsocketSubscriptionsByAddressAtom, { ...byAddress, [address]: next });
+  }
+);
+
+/** Current user's notifications (derived from notificationsByAddressAtom by address). */
+export const paymentNotificationsAtom = atom(
+  (get) => {
+    const byAddress = get(notificationsByAddressAtom);
+    const address = get(userInfoAtom)?.address;
+    if (!address) return [];
+    return (byAddress[address] ?? []) as any[];
+  },
+  (get, set, update: any[] | ((prev: any[]) => any[])) => {
+    const byAddress = get(notificationsByAddressAtom);
+    const address = get(userInfoAtom)?.address;
+    if (!address) return;
+    const prev = (byAddress[address] ?? []) as any[];
+    const next = typeof update === 'function' ? update(prev) : update;
+    set(notificationsByAddressAtom, { ...byAddress, [address]: next });
+  }
+);
+
+/** Current user's "seen all notifications" timestamp (derived from seenAllNotificationsByAddressAtom by address). */
+export const lastPaymentSeenTimestampAtom = atom(
+  (get) => {
+    const byAddress = get(seenAllNotificationsByAddressAtom);
+    const address = get(userInfoAtom)?.address;
+    if (!address) return null;
+    return (byAddress[address] ?? null) as number | null;
+  },
+  (get, set, value: number | null) => {
+    const byAddress = get(seenAllNotificationsByAddressAtom);
+    const address = get(userInfoAtom)?.address;
+    if (!address) return;
+    set(seenAllNotificationsByAddressAtom, { ...byAddress, [address]: value });
+  }
+);
+
+export const notificationSeenInAppKeysByAddressAtom = atomWithStorage<
+  Record<string, Record<string, number>>
+>('qortal_notification_seen_in_app_by_address', {});
+
+
+
+
+
+
+
 export const rawWalletAtom = atomWithReset<any>(null);
 export const walletToBeDecryptedErrorAtom = atomWithReset<string>('');
 export const balanceAtom = atomWithReset<any>(null);
@@ -122,7 +516,7 @@ export const devServerDomainAtom = atomWithReset(LOCALHOST);
 export const devServerPortAtom = atomWithReset('');
 export const nodeInfosAtom = atomWithReset({});
 export const selectedNodeInfoAtom = atomWithReset<ApiKey | null>({
-  url: HTTP_LOCALHOST_12391,
+  url: HTTPS_EXT_NODE_QORTAL_LINK,
   apikey: '',
 });
 export const statusesAtom = atomWithReset<Steps>({
@@ -151,6 +545,9 @@ export const infoSnackGlobalAtom = atomWithReset<{
   message?: string;
   type?: string;
   duration?: number | null;
+  compact?: boolean;
+  dismissible?: boolean;
+  sourceId?: string;
 } | null>(null);
 
 // Tutorial state (reduces context re-renders for tutorial UI)
diff --git a/src/background/background-cases.ts b/src/background/background-cases.ts
index 2525373d..49934820 100644
--- a/src/background/background-cases.ts
+++ b/src/background/background-cases.ts
@@ -40,10 +40,12 @@ import {
   kickFromGroup,
   leaveGroup,
   makeAdmin,
+  markAllMemberGroupsRead,
   notifyAdminRegenerateSecretKey,
   pauseAllQueues,
   processTransactionVersion2,
   registerName,
+  updateName,
   removeAdmin,
   resumeAllQueues,
   saveTempPublish,
@@ -68,6 +70,7 @@ import { encryptSingle } from '../qdn/encryption/group-encryption';
 import { _createPoll, _voteOnPoll } from '../qortal/get.ts';
 import { createTransaction } from '../transactions/transactions';
 import { getData, storeData } from '../utils/chromeStorage';
+import { getWalletErrorMessage } from '../utils/walletErrorMessages.ts';
 
 export function versionCase(request, event) {
   event.source.postMessage(
@@ -259,7 +262,7 @@ export async function decryptWalletCase(request, event) {
       {
         requestId: request.requestId,
         action: 'decryptWallet',
-        error: error?.message,
+        error: getWalletErrorMessage(error),
         type: 'backgroundMessageResponse',
       },
       event.origin
@@ -808,6 +811,32 @@ export async function registerNameCase(request, event) {
     );
   }
 }
+export async function updateNameCase(request, event) {
+  try {
+    const { newName, oldName, description } = request.payload;
+    const response = await updateName({ newName, oldName, description });
+
+    event.source.postMessage(
+      {
+        requestId: request.requestId,
+        action: 'updateName',
+        payload: response,
+        type: 'backgroundMessageResponse',
+      },
+      event.origin
+    );
+  } catch (error) {
+    event.source.postMessage(
+      {
+        requestId: request.requestId,
+        action: 'updateName',
+        error: error?.message,
+        type: 'backgroundMessageResponse',
+      },
+      event.origin
+    );
+  }
+}
 export async function createPollCase(request, event) {
   try {
     const { pollName, pollDescription, pollOptions } = request.payload;
@@ -949,6 +978,33 @@ export async function addTimestampEnterChatCase(request, event) {
   }
 }
 
+export async function markAllMemberGroupsReadCase(request, event) {
+  try {
+    const { groupIds } = request.payload;
+    const response = await markAllMemberGroupsRead(groupIds);
+
+    event.source.postMessage(
+      {
+        requestId: request.requestId,
+        action: 'markAllMemberGroupsRead',
+        payload: response,
+        type: 'backgroundMessageResponse',
+      },
+      event.origin
+    );
+  } catch (error) {
+    event.source.postMessage(
+      {
+        requestId: request.requestId,
+        action: 'markAllMemberGroupsRead',
+        error: error?.message,
+        type: 'backgroundMessageResponse',
+      },
+      event.origin
+    );
+  }
+}
+
 export async function setLocalApiKeyNotElectronCase(localApiKey) {
   storeData('localApiKey', localApiKey);
 }
@@ -1426,13 +1482,17 @@ export async function encryptAndPublishSymmetricKeyGroupChatCase(
   event
 ) {
   try {
-    const { groupId, previousData } = request.payload;
+     const { groupId, previousData, isOwner, addKey } = request.payload;
+    let addKeyVar = false;
+    if (isOwner && addKey) {
+      addKeyVar = true;
+    }
     const { data, numberOfMembers } =
       await encryptAndPublishSymmetricKeyGroupChat({
         groupId,
         previousData,
+        addKey: addKeyVar,
       });
-
     event.source.postMessage(
       {
         requestId: request.requestId,
@@ -1570,7 +1630,6 @@ export async function publishOnQDNCase(request, event) {
       tag5,
       uploadType,
     });
-
     event.source.postMessage(
       {
         requestId: request.requestId,
diff --git a/src/background/background.ts b/src/background/background.ts
index d5840086..d3e6511c 100644
--- a/src/background/background.ts
+++ b/src/background/background.ts
@@ -1,5 +1,6 @@
 // @ts-nocheck
 import '../qortal/qortal-requests.ts';
+import { getNotificationOsPushDisabled } from '../qortal/qortal-requests';
 import { isArray } from 'lodash';
 import { uint8ArrayToObject } from '../encryption/encryption.ts';
 import Base58 from '../encryption/Base58';
@@ -16,6 +17,7 @@ import { signChat } from '../transactions/signChat';
 import { createTransaction } from '../transactions/transactions';
 import { decryptChatMessage } from '../utils/decryptChatMessage';
 import { decryptStoredWallet } from '../utils/decryptWallet';
+import { getWalletErrorMessage } from '../utils/walletErrorMessages';
 import PhraseWallet from '../utils/generateWallet/phrase-wallet';
 import { RequestQueueWithPromise } from '../utils/queue/queue';
 import { validateAddress } from '../utils/validateAddress';
@@ -30,7 +32,6 @@ import {
   LOCALHOST_12391,
   MIN_REQUIRED_QORTS,
   RESOURCE_TYPE_NUMBER_GROUP_CHAT_REACTIONS,
-  TIME_MINUTES_3_IN_MILLISECONDS,
   TIME_MINUTES_10_IN_MILLISECONDS,
   TIME_WEEKS_1_IN_MILLISECONDS,
   TIME_MINUTES_6_IN_MILLISECONDS,
@@ -79,6 +80,7 @@ import {
   listActionsCase,
   ltcBalanceCase,
   makeAdminCase,
+  markAllMemberGroupsReadCase,
   nameCase,
   notifyAdminRegenerateSecretKeyCase,
   pauseAllQueuesCase,
@@ -97,6 +99,7 @@ import {
   setGroupDataCase,
   setupGroupWebsocketCase,
   updateThreadActivityCase,
+  updateNameCase,
   userInfoCase,
   validApiCase,
   versionCase,
@@ -136,7 +139,12 @@ export const groupApiSocketLocal = 'ws://' + LOCALHOST_12391;
 const timeDifferenceForNotificationChatsBackground = 86400000;
 const requestQueueAnnouncements = new RequestQueueWithPromise(1);
 
+const generalNotificationPayloadById = new Map();
+
 function handleNotificationClick(notificationId) {
+  if (typeof window?.electronAPI?.focusWindow === 'function') {
+    window.electronAPI.focusWindow();
+  }
   // Decode the notificationId if it was encoded
   const decodedNotificationId = decodeURIComponent(notificationId);
 
@@ -147,6 +155,9 @@ function handleNotificationClick(notificationId) {
     '_type=group-announcement_'
   );
   const isNewThreadPost = decodedNotificationId.includes('_type=thread-post_');
+  const isGeneralNotification = decodedNotificationId.includes(
+    '_type=general-notification'
+  );
 
   // Helper function to extract parameter values safely
   function getParameterValue(id, key) {
@@ -155,7 +166,16 @@ function handleNotificationClick(notificationId) {
   }
   const targetOrigin = window.location.origin;
   // Handle specific notification types and post the message accordingly
-  if (isDirect) {
+  if (isGeneralNotification) {
+    const payload = generalNotificationPayloadById.get(notificationId);
+    generalNotificationPayloadById.delete(notificationId);
+    if (payload) {
+      window.postMessage(
+        { action: 'NOTIFICATION_OPEN_APP', payload },
+        targetOrigin
+      );
+    }
+  } else if (isDirect) {
     const fromValue = getParameterValue(decodedNotificationId, '_from');
     window.postMessage(
       { action: 'NOTIFICATION_OPEN_DIRECT', payload: { from: fromValue } },
@@ -275,9 +295,9 @@ export const getCustomNodesFromStorage = async (): Promise<any | null> => {
 const getArbitraryEndpoint = async () => {
   const apiKey = await getApiKeyFromStorage(); // Retrieve apiKey asynchronously
   if (apiKey) {
-    return `/arbitrary/resources/searchsimple`;
+    return `/arbitrary/resources/search`;
   } else {
-    return `/arbitrary/resources/searchsimple`;
+    return `/arbitrary/resources/search`;
   }
 };
 
@@ -1376,7 +1396,7 @@ export async function decryptWallet({ password, wallet, walletVersion }) {
 
     return true;
   } catch (error) {
-    throw new Error(error.message);
+    throw new Error(getWalletErrorMessage(error));
   }
 }
 
@@ -3083,6 +3103,45 @@ export async function addTimestampEnterChat({ groupId, timestamp }) {
   });
 }
 
+/** Marks every listed member group chat read (single read/write per store — avoids parallel races). */
+export async function markAllMemberGroupsRead(groupIds) {
+  if (!Array.isArray(groupIds) || groupIds.length === 0) {
+    return true;
+  }
+  const now = Date.now();
+  const wallet = await getSaveWallet();
+  const address = wallet.address0;
+  const enterData = (await getTimestampEnterChat()) || {};
+  const announcementData = (await getTimestampGroupAnnouncement()) || {};
+
+  for (const groupId of groupIds) {
+    if (groupId == null || groupId === '') continue;
+    enterData[groupId] = now;
+    announcementData[groupId] = {
+      notification: now,
+      seentimestamp: true,
+    };
+  }
+
+  await new Promise((resolve, reject) => {
+    storeData(`enter-chat-timestamp-${address}`, enterData)
+      .then(() => resolve(true))
+      .catch((error) => {
+        reject(new Error(error.message || 'Error saving data'));
+      });
+  });
+
+  await new Promise((resolve, reject) => {
+    storeData(`group-announcement-${address}`, announcementData)
+      .then(() => resolve(true))
+      .catch((error) => {
+        reject(new Error(error.message || 'Error saving data'));
+      });
+  });
+
+  return true;
+}
+
 export async function addTimestampMention({ groupId, timestamp }) {
   const wallet = await getSaveWallet();
   const address = wallet.address0;
@@ -3228,6 +3287,9 @@ function setupMessageListener() {
       case 'registerName':
         registerNameCase(request, event);
         break;
+      case 'updateName':
+        updateNameCase(request, event);
+        break;
       case 'createPoll':
         createPollCase(request, event);
         break;
@@ -3243,6 +3305,9 @@ function setupMessageListener() {
       case 'addTimestampEnterChat':
         addTimestampEnterChatCase(request, event);
         break;
+      case 'markAllMemberGroupsRead':
+        markAllMemberGroupsReadCase(request, event);
+        break;
       case 'setApiKey':
         setApiKeyCase(request, event);
         break;
@@ -3369,10 +3434,6 @@ function setupMessageListener() {
                 clearInterval(notificationCheckInterval);
                 notificationCheckInterval = null;
               }
-              if (paymentsCheckInterval) {
-                clearInterval(paymentsCheckInterval);
-                paymentsCheckInterval = null;
-              }
               groupSecretkeys = {};
               const wallet = await getSaveWallet();
               const address = wallet.address0;
@@ -3566,82 +3627,52 @@ export const checkNewMessages = async () => {
   }
 };
 
-export const checkPaymentsForNotifications = async (address) => {
+export const fireOsNotificationPayment = async (
+  notificationPayload,
+  title,
+  messageBody,
+  icon,
+  qortalLink
+) => {
   try {
     const isDisableNotifications =
       (await getUserSettings({ key: 'disable-push-notifications' })) || false;
     if (isDisableNotifications) return;
-    let latestPayment = null;
-    const savedtimestamp = await getTimestampLatestPayment();
-
-    const url = await createEndpoint(
-      `/transactions/search?txType=PAYMENT&address=${address}&confirmationStatus=CONFIRMED&limit=5&reverse=true`
-    );
-
-    const response = await fetch(url, {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-    });
-
-    const responseData = await response.json();
 
-    const latestTx = responseData.filter(
-      (tx) => tx?.creatorAddress !== address && tx?.recipient === address
-    )[0];
-    if (!latestTx) {
-      return; // continue to the next group
-    }
     if (
-      checkDifference(latestTx.timestamp) &&
-      (!savedtimestamp || latestTx.timestamp > savedtimestamp)
+      notificationPayload?.event === 'RESOURCE_PUBLISHED' &&
+      notificationPayload?.appName
     ) {
-      if (latestTx.timestamp) {
-        latestPayment = latestTx;
-        await addTimestampLatestPayment(latestTx.timestamp);
-      }
-
-      // save new timestamp
-    }
-
-    if (latestPayment) {
-      // Create a unique notification ID with type and group announcement details
-      const notificationId = encodeURIComponent(
-        'payment_notification_' + Date.now() + '_type=payment-announcement'
+      const osPushDisabled = await getNotificationOsPushDisabled(
+        notificationPayload.appName
       );
+      if (osPushDisabled) return;
+    }
 
-      const title = 'New payment!';
-      const body = `You have received a new payment of ${latestPayment?.amount} QORT`;
-
-      // Create and show the notification
-      const notification = new window.Notification(title, {
-        body,
-        icon: window.location.origin + '/qortal192.png',
-        data: { id: notificationId },
-      });
+    const notificationId = encodeURIComponent(
+      'general_notification_' + Date.now() + '_type=general-notification'
+    );
 
-      // Handle notification click with specific actions based on `notificationId`
-      notification.onclick = () => {
-        handleNotificationClick(notificationId);
-        notification.close(); // Clean up the notification on click
-      };
+    generalNotificationPayloadById.set(
+      notificationId,
+      qortalLink ? { link: qortalLink } : { openWallets: true }
+    );
 
-      // Automatically close the notification after 5 seconds if it’s not clicked
-      setTimeout(() => {
-        notification.close();
-      }, 10000); // Close after 5 seconds
+    const notification = new window.Notification(title, {
+      body: messageBody,
+      icon,
+      data: { id: notificationId },
+    });
 
-      const targetOrigin = window.location.origin;
+    notification.onclick = () => {
+      handleNotificationClick(notificationId);
+      notification.close();
+    };
 
-      window.postMessage(
-        {
-          action: 'SET_PAYMENT_ANNOUNCEMENT',
-          payload: latestPayment,
-        },
-        targetOrigin
-      );
-    }
+    setTimeout(() => {
+      generalNotificationPayloadById.delete(notificationId);
+      notification.close();
+    }, 10000);
   } catch (error) {
     console.error(error);
   }
@@ -3814,7 +3845,6 @@ export const checkThreads = async (bringBack) => {
 };
 
 let notificationCheckInterval;
-let paymentsCheckInterval;
 
 const createNotificationCheck = () => {
   // Check if an interval already exists before creating it
@@ -3834,21 +3864,6 @@ const createNotificationCheck = () => {
       }
     }, TIME_MINUTES_10_IN_MILLISECONDS);
   }
-
-  if (!paymentsCheckInterval) {
-    paymentsCheckInterval = setInterval(async () => {
-      try {
-        // This would replace the Chrome alarm callback
-        const wallet = await getSaveWallet();
-        const address = wallet?.address0;
-        if (!address) return;
-
-        checkPaymentsForNotifications(address);
-      } catch (error) {
-        console.error('Error checking payments:', error);
-      }
-    }, TIME_MINUTES_3_IN_MILLISECONDS);
-  }
 };
 
 // Call this function when initializing your app or after user logs in (intervals are cleared on logout)
diff --git a/src/common/ErrorBoundary.tsx b/src/common/ErrorBoundary.tsx
index 77ca537c..85be6fa5 100644
--- a/src/common/ErrorBoundary.tsx
+++ b/src/common/ErrorBoundary.tsx
@@ -2,29 +2,44 @@ import { Component, ReactNode } from 'react';
 
 interface ErrorBoundaryProps {
   children: ReactNode;
-  fallback: ReactNode;
+  fallback: ReactNode | ((args: { error: Error | null; componentStack?: string }) => ReactNode);
 }
 
 interface ErrorBoundaryState {
   hasError: boolean;
+  error: Error | null;
+  componentStack?: string;
 }
 
 class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
   state: ErrorBoundaryState = {
     hasError: false,
+    error: null,
   };
 
   static getDerivedStateFromError(_: Error): ErrorBoundaryState {
-    return { hasError: true };
+    return { hasError: true, error: _ };
   }
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
-    // You can log the error and errorInfo here, for example, to an error reporting service.
+    this.setState({
+      componentStack: errorInfo.componentStack,
+      error,
+    });
     console.error('Error caught in ErrorBoundary:', error, errorInfo);
   }
 
   render(): React.ReactNode {
-    if (this.state.hasError) return this.props.fallback;
+    if (this.state.hasError) {
+      if (typeof this.props.fallback === 'function') {
+        return this.props.fallback({
+          error: this.state.error,
+          componentStack: this.state.componentStack,
+        });
+      }
+
+      return this.props.fallback;
+    }
 
     return this.props.children;
   }
diff --git a/src/components/App/AuthenticatedShell.tsx b/src/components/App/AuthenticatedShell.tsx
index f6e007e1..f17a6a93 100644
--- a/src/components/App/AuthenticatedShell.tsx
+++ b/src/components/App/AuthenticatedShell.tsx
@@ -10,11 +10,9 @@ export type AuthenticatedShellProps = {
   // Group
   desktopViewMode: string;
   isMain: boolean;
-  isOpenDrawerProfile: boolean;
   logoutFunc: () => Promise<void>;
   myAddress: string;
   setDesktopViewMode: (mode: string) => void;
-  setIsOpenDrawerProfile: (open: boolean) => void;
   // AuthenticatedProfile
   balance: number;
   userInfo: any;
@@ -30,7 +28,6 @@ export type AuthenticatedShellProps = {
   onOpenSettings: () => void;
   onOpenDrawerLookup: () => void;
   onOpenWalletsApp: () => void;
-  onOpenDrawerProfile: () => void;
   getUserInfo: (useTimer?: boolean) => Promise<void>;
   onOpenMinting: () => void;
   showTutorial: (key: string, force?: boolean) => void;
@@ -41,11 +38,9 @@ export function AuthenticatedShell({
   balance,
   desktopViewMode,
   isMain,
-  isOpenDrawerProfile,
   logoutFunc,
   myAddress,
   setDesktopViewMode,
-  setIsOpenDrawerProfile,
   userInfo,
   rawWallet,
   qortBalanceLoading,
@@ -59,7 +54,6 @@ export function AuthenticatedShell({
   onOpenSettings,
   onOpenDrawerLookup,
   onOpenWalletsApp,
-  onOpenDrawerProfile,
   getUserInfo,
   onOpenMinting,
   showTutorial,
@@ -73,11 +67,12 @@ export function AuthenticatedShell({
         height: '100%',
         isolation: 'isolate',
         position: 'relative',
-        width: '100vw',
+        width: '100%',
+        willChange: 'opacity, transform',
         '&::before': {
           background:
             theme.palette.mode === 'dark'
-              ? 'linear-gradient(to bottom, rgba(16, 18, 22, 0.16), rgba(16, 18, 22, 0.09))'
+              ? 'linear-gradient(to bottom, rgba(255, 255, 255, 0.03), rgba(9, 11, 15, 0.02))'
               : 'linear-gradient(to bottom, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08))',
           content: '""',
           inset: 0,
@@ -94,11 +89,10 @@ export function AuthenticatedShell({
       <Group
         desktopViewMode={desktopViewMode}
         isMain={isMain}
-        isOpenDrawerProfile={isOpenDrawerProfile}
         logoutFunc={logoutFunc}
         myAddress={myAddress}
+        onOpenSettings={onOpenSettings}
         setDesktopViewMode={setDesktopViewMode}
-        setIsOpenDrawerProfile={setIsOpenDrawerProfile}
       />
       <AuthenticatedProfile
         userInfo={userInfo}
@@ -117,7 +111,6 @@ export function AuthenticatedShell({
         onOpenSettings={onOpenSettings}
         onOpenDrawerLookup={onOpenDrawerLookup}
         onOpenWalletsApp={onOpenWalletsApp}
-        onOpenDrawerProfile={onOpenDrawerProfile}
         getUserInfo={getUserInfo}
         onOpenMinting={onOpenMinting}
         showTutorial={showTutorial}
diff --git a/src/components/App/CreateWalletView.tsx b/src/components/App/CreateWalletView.tsx
index 38a16d09..1a4c945b 100644
--- a/src/components/App/CreateWalletView.tsx
+++ b/src/components/App/CreateWalletView.tsx
@@ -1,23 +1,18 @@
 import {
   Box,
-  Button,
+  ButtonBase,
   Checkbox,
-  Dialog,
-  DialogActions,
-  DialogContent,
   FormControlLabel,
   Typography,
 } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
-import { Trans, useTranslation } from 'react-i18next';
-import { RefObject } from 'react';
-import { Return } from '../../assets/Icons/Return.tsx';
-import Logo1Dark from '../../assets/svgs/Logo1Dark.svg';
-import { Spacer } from '../../common/Spacer';
-import { CustomButton, CustomLabel, TextP } from '../../styles/App-styles.ts';
-import { ErrorText, PasswordField } from '../index';
-import { SuccessIcon } from '../../assets/Icons/SuccessIcon.tsx';
-import WarningIcon from '@mui/icons-material/Warning';
+import { alpha, useTheme } from '@mui/material/styles';
+import { RefObject, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
+import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
+import { PasswordField, ErrorText } from '../index';
+import { AuthButton, AuthScreen, AuthSectionLabel, authPasswordFieldSx } from '../Auth/AuthShell';
 
 type CreateWalletViewProps = {
   creationStep: number;
@@ -37,7 +32,8 @@ type CreateWalletViewProps = {
   setWalletToBeDownloadedPasswordConfirm: (v: string) => void;
   setStoredAccount: (v: boolean) => void;
   onCreateAccount: () => void;
-  onBackupAccountConfirm: () => void;
+  onBackupAccountConfirm: () => Promise<boolean>;
+  onEnterHub: () => void;
   exportSeedphrase: () => void;
 };
 
@@ -47,306 +43,425 @@ export function CreateWalletView({
   walletToBeDownloadedPassword,
   walletToBeDownloadedPasswordConfirm,
   walletToBeDownloadedError,
-  showSeed,
   storeAccount,
   generatorRef,
   confirmRef,
   onReturnBack,
-  onShowSeed,
-  onHideSeed,
   onCreationStepNext,
   setWalletToBeDownloadedPassword,
   setWalletToBeDownloadedPasswordConfirm,
   setStoredAccount,
   onCreateAccount,
   onBackupAccountConfirm,
+  onEnterHub,
   exportSeedphrase,
 }: CreateWalletViewProps) {
+  const { t } = useTranslation(['auth']);
   const theme = useTheme();
-  const { t } = useTranslation(['auth', 'core']);
+  const isLight = theme.palette.mode === 'light';
+  const [backupDownloaded, setBackupDownloaded] = useState(false);
+  const [seedphraseCopied, setSeedphraseCopied] = useState(false);
+  const [seedphraseRevealed, setSeedphraseRevealed] = useState(false);
+  const [passwordStepError, setPasswordStepError] = useState('');
+  const generatedSeedphrase = generatorRef.current?.parsedString || '';
+  const successAccent = backupDownloaded
+    ? {
+        border: 'rgba(126,171,255,0.36)',
+        icon: 'rgb(126,171,255)',
+        surface: 'rgba(64,111,213,0.1)',
+      }
+    : {
+        border: 'rgba(88,199,113,0.34)',
+        icon: 'rgb(88,199,113)',
+        surface: 'rgba(88,199,113,0)',
+      };
 
-  return (
-    <>
-      {!walletToBeDownloaded && (
-        <>
-          <Spacer height="22px" />
+  const passwordsMatch =
+    walletToBeDownloadedPassword &&
+    walletToBeDownloadedPasswordConfirm &&
+    walletToBeDownloadedPassword === walletToBeDownloadedPasswordConfirm;
+
+  const handleNextFromPassword = () => {
+    if (!walletToBeDownloadedPassword) {
+      setPasswordStepError(t('auth:create_wallet.error_enter_password'));
+      return;
+    }
+
+    if (!walletToBeDownloadedPasswordConfirm) {
+      setPasswordStepError(t('auth:create_wallet.error_confirm_password'));
+      return;
+    }
+
+    if (!passwordsMatch) {
+      setPasswordStepError(t('auth:create_wallet.error_passwords_mismatch'));
+      return;
+    }
+
+    setPasswordStepError('');
+    onCreationStepNext();
+  };
+
+  const handleCopyPhrase = async () => {
+    if (!seedphraseRevealed) {
+      setSeedphraseRevealed(true);
+      return;
+    }
+
+    if (!generatedSeedphrase) return;
+    try {
+      await navigator.clipboard.writeText(generatedSeedphrase);
+      setSeedphraseCopied(true);
+      window.setTimeout(() => setSeedphraseCopied(false), 1600);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    setBackupDownloaded(false);
+  }, [walletToBeDownloaded?.qortAddress]);
+
+  const handleDownloadBackup = async () => {
+    const saved = await onBackupAccountConfirm();
+    if (saved) {
+      setBackupDownloaded(true);
+    }
+  };
+
+  if (walletToBeDownloaded) {
+    return (
+      <AuthScreen maxWidth={400}>
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2.2,
+            textAlign: 'center',
+          }}
+        >
           <Box
             sx={{
-              boxSizing: 'border-box',
-              display: 'flex',
-              justifyContent: 'flex-start',
-              maxWidth: '700px',
-              paddingLeft: '22px',
-              width: '100%',
+              alignItems: 'center',
+              backgroundColor: successAccent.surface,
+              border: `1px solid ${successAccent.border}`,
+              borderRadius: '999px',
+              display: 'inline-flex',
+              height: 84,
+              justifyContent: 'center',
+              transition:
+                'background-color 360ms ease, border-color 360ms ease, box-shadow 360ms ease',
+              width: 84,
             }}
           >
-            <Return
-              style={{ cursor: 'pointer', height: '24px', width: 'auto' }}
-              onClick={onReturnBack}
+            <CheckCircleRoundedIcon
+              sx={{
+                color: successAccent.icon,
+                fontSize: 54,
+                transition: 'color 360ms ease',
+              }}
             />
           </Box>
-          <Spacer height="15px" />
-          <div
-            className="image-container"
-            style={{ width: '136px', height: '154px' }}
-          >
-            <img src={Logo1Dark} className="base-image" alt="Qortal" />
-          </div>
-          <Spacer height="38px" />
-          <TextP
-            sx={{
-              textAlign: 'center',
-              lineHeight: 1.2,
-              fontSize: '18px',
-            }}
-          >
-            {t('auth:action.setup_qortal_account', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </TextP>
-          <Spacer height="14px" />
-          <Box
-            sx={{
-              display: 'flex',
-              maxWidth: '100%',
-              justifyContent: 'center',
-              padding: '10px',
-            }}
-          >
-            <Box
+
+          <Box>
+            <Typography
               sx={{
-                alignItems: 'center',
-                display: creationStep === 1 ? 'flex' : 'none',
-                flexDirection: 'column',
-                maxWidth: '95%',
-                width: '350px',
+                fontSize: '1.56rem',
+                fontWeight: 700,
+                letterSpacing: '-0.03em',
               }}
             >
-              <Typography sx={{ fontSize: '14px' }}>
-                <Trans
-                  ns="auth"
-                  i18nKey="message.generic.seedphrase_notice"
-                  components={{
-                    seed: (
-                      <span
-                        onClick={onShowSeed}
-                        style={{
-                          fontSize: '14px',
-                          color: 'steelblue',
-                          cursor: 'pointer',
-                        }}
-                      />
-                    ),
-                  }}
-                  tOptions={{ postProcess: ['capitalizeFirstChar'] }}
-                />
-              </Typography>
-              <Typography sx={{ fontSize: '14px', marginTop: '5px' }}>
-                {t('auth:tips.view_seedphrase', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </Typography>
-              <Typography
-                sx={{ fontSize: '18px', marginTop: '15px', textAlign: 'center' }}
-              >
-                <Trans
-                  i18nKey="action.create_qortal_account"
-                  ns="auth"
-                  components={{
-                    next: <span style={{ fontWeight: 'bold' }} />,
-                  }}
-                  tOptions={{ postProcess: ['capitalizeFirstChar'] }}
-                />
-              </Typography>
-              <Spacer height="17px" />
-              <CustomButton onClick={onCreationStepNext}>
-                {t('core:pagination.next', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </CustomButton>
-            </Box>
-            <div style={{ display: 'none' }}>
-              {/* @ts-expect-error custom element from randomSentenceGenerator */}
-              <random-sentence-generator
-                ref={generatorRef}
-                template="adverb verb noun adjective noun adverb verb noun adjective noun adjective verbed adjective noun"
-              />
-            </div>
-            <Dialog
-              open={showSeed}
-              aria-labelledby="alert-dialog-title"
-              aria-describedby="alert-dialog-description"
+              {backupDownloaded
+                ? t('auth:create_wallet.success_wallet_saved', {
+                    postProcess: 'capitalizeFirstChar',
+                  })
+                : t('auth:create_wallet.success_account_created', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+            </Typography>
+            <Typography
+              sx={{
+                color: isLight
+                  ? theme.palette.text.secondary
+                  : 'rgba(214,221,233,0.58)',
+                fontSize: '0.92rem',
+                lineHeight: 1.6,
+                mt: 0.9,
+              }}
             >
-              <DialogContent>
-                <Box
-                  sx={{
-                    alignItems: 'center',
-                    display: showSeed ? 'flex' : 'none',
-                    flexDirection: 'column',
-                    gap: '10px',
-                    maxWidth: '400px',
-                  }}
-                >
-                  <Typography sx={{ fontSize: '14px' }}>
-                    {t('auth:seed_your', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Typography>
-                  <Box
-                    sx={{
-                      background: theme.palette.background.paper,
-                      borderRadius: '8px',
-                      padding: '10px',
-                      textAlign: 'center',
-                      width: '100%',
-                    }}
-                  >
-                    {generatorRef.current?.parsedString}
-                  </Box>
-                  <CustomButton
-                    sx={{ padding: '7px', fontSize: '12px' }}
-                    onClick={exportSeedphrase}
-                  >
-                    {t('auth:action.export_seedphrase', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </CustomButton>
-                </Box>
-              </DialogContent>
-              <DialogActions>
-                <Button variant="contained" onClick={onHideSeed}>
-                  {t('core:action.close', {
+              {backupDownloaded
+                ? t('auth:create_wallet.success_ready_hub', {
+                    postProcess: 'capitalizeFirstChar',
+                  })
+                : t('auth:create_wallet.success_backup_before_hub', {
                     postProcess: 'capitalizeFirstChar',
                   })}
-                </Button>
-              </DialogActions>
-            </Dialog>
+            </Typography>
           </Box>
+
           <Box
             sx={{
-              display: creationStep === 2 ? 'flex' : 'none',
+              display: 'flex',
               flexDirection: 'column',
-              alignItems: 'center',
+              gap: 0.9,
+              width: '100%',
             }}
           >
-            <Spacer height="14px" />
-            <CustomLabel htmlFor="standard-adornment-password">
-              {t('auth:wallet.password', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </CustomLabel>
-            <Spacer height="5px" />
-            <PasswordField
-              id="standard-adornment-password"
-              value={walletToBeDownloadedPassword}
-              onChange={(e) => setWalletToBeDownloadedPassword(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') confirmRef.current?.focus();
-              }}
-            />
-            <Spacer height="5px" />
-            <CustomLabel htmlFor="standard-adornment-password-confirm">
-              {t('auth:wallet.password_confirmation', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </CustomLabel>
-            <Spacer height="5px" />
-            <PasswordField
-              inputRef={confirmRef}
-              id="standard-adornment-password-confirm"
-              value={walletToBeDownloadedPasswordConfirm}
-              onChange={(e) =>
-                setWalletToBeDownloadedPasswordConfirm(e.target.value)
-              }
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') onCreateAccount();
-              }}
-            />
-            <Spacer height="5px" />
-            <Typography variant="body2">
-              {t('auth:message.generic.no_minimum_length', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Typography>
-            <Spacer height="5px" />
-            <FormControlLabel
-              sx={{ margin: 0 }}
-              control={
-                <Checkbox
-                  onChange={(e) => setStoredAccount(e.target.checked)}
-                  checked={storeAccount}
-                  edge="start"
-                  tabIndex={-1}
-                  disableRipple
-                  sx={{
-                    '&.Mui-checked': {
-                      color: theme.palette.text.secondary,
-                    },
-                    '& .MuiSvgIcon-root': {
-                      color: theme.palette.text.secondary,
-                    },
-                  }}
-                />
-              }
-              label={
-                <Box sx={{ display: 'flex', alignItems: 'center' }}>
-                  <Typography sx={{ fontSize: '14px' }}>
-                    {t('auth:store_account', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Typography>
-                </Box>
-              }
-            />
-            <Spacer height="17px" />
-            <CustomButton onClick={onCreateAccount}>
-              {t('auth:action.create_account', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </CustomButton>
+            {backupDownloaded ? (
+              <>
+                <AuthButton onClick={onEnterHub}>
+                  {t('auth:create_wallet.enter_hub', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </AuthButton>
+                <AuthButton onClick={handleDownloadBackup} primary={false}>
+                  {t('auth:create_wallet.download_another_copy', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </AuthButton>
+              </>
+            ) : (
+              <>
+                <AuthButton onClick={handleDownloadBackup}>
+                  {t('auth:create_wallet.backup_wallet', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </AuthButton>
+                <AuthButton disabled primary={false}>
+                  {t('auth:create_wallet.enter_hub', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </AuthButton>
+              </>
+            )}
           </Box>
-          <ErrorText>{walletToBeDownloadedError}</ErrorText>
-        </>
-      )}
-      {walletToBeDownloaded && (
-        <>
-          <Spacer height="48px" />
-          <SuccessIcon />
-          <Spacer height="45px" />
-          <TextP
+
+          <Typography
             sx={{
-              textAlign: 'center',
-              lineHeight: '15px',
+              color: isLight
+                ? theme.palette.text.secondary
+                : 'rgba(214,221,233,0.5)',
+              fontSize: '0.78rem',
+              lineHeight: 1.5,
             }}
           >
-            {t('auth:message.generic.congrats_setup', {
+            {t('auth:create_wallet.backup_encrypted_notice', {
               postProcess: 'capitalizeFirstChar',
             })}
-          </TextP>
-          <Spacer height="50px" />
-          <Box
+          </Typography>
+        </Box>
+      </AuthScreen>
+    );
+  }
+
+  if (creationStep === 2) {
+    return (
+      <AuthScreen
+        maxWidth={460}
+        title={t('auth:create_wallet.seed_title', {
+          postProcess: 'capitalizeFirstChar',
+        })}
+        subtitle={t('auth:create_wallet.seed_subtitle', {
+          postProcess: 'capitalizeSentenceStarts',
+        })}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'flex-start',
+            alignItems: 'center',
+          }}
+        >
+          <ButtonBase
+            onClick={onReturnBack}
             sx={{
-              display: 'flex',
-              gap: '15px',
-              alignItems: 'center',
-              padding: '10px',
+              color: isLight
+                ? alpha(theme.palette.text.primary, 0.55)
+                : 'rgba(214,221,233,0.62)',
+              minWidth: 0,
+              p: 0,
+              '&:hover': { color: theme.palette.text.primary },
             }}
           >
-            <WarningIcon color="warning" />
-            <Typography>
-              {t('auth:tips.safe_place', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Typography>
-          </Box>
-          <Spacer height="50px" />
-          <CustomButton onClick={onBackupAccountConfirm}>
-            {t('core:action.backup_account', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </CustomButton>
-        </>
-      )}
-    </>
+            <ArrowBackRoundedIcon sx={{ fontSize: 18 }} />
+          </ButtonBase>
+        </Box>
+
+        <Box
+          sx={{
+            backgroundColor: isLight
+              ? theme.palette.background.surface
+              : 'rgba(255,255,255,0.03)',
+            border: isLight
+              ? `1px solid ${theme.palette.border.main}`
+              : '1px solid rgba(255,255,255,0.08)',
+            borderRadius: '8px',
+            px: 2,
+            py: 1.8,
+            textAlign: 'center',
+          }}
+        >
+          <Typography
+            sx={{
+              fontSize: '0.98rem',
+              fontWeight: 600,
+              minHeight: '3.7em',
+              lineHeight: 1.85,
+              wordBreak: 'break-word',
+            }}
+          >
+            {seedphraseRevealed ? generatedSeedphrase : ''}
+          </Typography>
+        </Box>
+
+        <Box sx={{ display: 'grid', gap: 0.9, gridTemplateColumns: '1fr 1fr' }}>
+          <AuthButton onClick={handleCopyPhrase} primary={false}>
+            {!seedphraseRevealed
+              ? t('auth:create_wallet.reveal')
+              : seedphraseCopied
+                ? t('auth:create_wallet.copied')
+                : t('auth:create_wallet.copy')}
+          </AuthButton>
+          <AuthButton onClick={exportSeedphrase} primary={false}>
+            {t('auth:create_wallet.export')}
+          </AuthButton>
+        </Box>
+
+        <Box
+          sx={{
+            alignItems: 'flex-start',
+            backgroundColor: isLight
+              ? alpha('#d97706', 0.1)
+              : 'rgba(217,165,58,0.08)',
+            border: isLight
+              ? `1px solid ${alpha('#d97706', 0.35)}`
+              : '1px solid rgba(217,165,58,0.16)',
+            borderRadius: '8px',
+            color: isLight
+              ? theme.palette.text.primary
+              : 'rgba(239,228,202,0.92)',
+            display: 'flex',
+            gap: 1,
+            px: 1.2,
+            py: 1,
+          }}
+        >
+          <WarningAmberRoundedIcon
+            sx={{ color: '#E2B454', fontSize: 20, mt: 0.15 }}
+          />
+          <Typography sx={{ fontSize: '0.86rem', lineHeight: 1.55 }}>
+            {t('auth:create_wallet.seed_warning')}
+          </Typography>
+        </Box>
+
+        <AuthButton onClick={onCreateAccount}>
+          {t('auth:create_wallet.create_account')}
+        </AuthButton>
+      </AuthScreen>
+    );
+  }
+
+  return (
+    <AuthScreen
+      maxWidth={400}
+      title={t('auth:create_wallet.password_title', {
+        postProcess: 'capitalizeFirstChar',
+      })}
+      subtitle={t('auth:create_wallet.password_subtitle', {
+        postProcess: 'capitalizeFirstChar',
+      })}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'flex-start',
+          alignItems: 'center',
+        }}
+      >
+        <ButtonBase
+          onClick={onReturnBack}
+          sx={{
+            color: isLight
+              ? alpha(theme.palette.text.primary, 0.55)
+              : 'rgba(214,221,233,0.62)',
+            minWidth: 0,
+            p: 0,
+            '&:hover': { color: theme.palette.text.primary },
+          }}
+        >
+          <ArrowBackRoundedIcon sx={{ fontSize: 18 }} />
+        </ButtonBase>
+      </Box>
+
+      <Box>
+        <AuthSectionLabel>
+          {t('auth:create_wallet.wallet_password')}
+        </AuthSectionLabel>
+        <PasswordField
+          value={walletToBeDownloadedPassword}
+          onChange={(e) => setWalletToBeDownloadedPassword(e.target.value)}
+          name="create-wallet-password"
+          suppressAutofill
+          sx={authPasswordFieldSx(theme)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') confirmRef.current?.focus();
+          }}
+        />
+      </Box>
+
+      <Box>
+        <AuthSectionLabel>
+          {t('auth:create_wallet.confirm_password')}
+        </AuthSectionLabel>
+        <PasswordField
+          inputRef={confirmRef}
+          value={walletToBeDownloadedPasswordConfirm}
+          onChange={(e) =>
+            setWalletToBeDownloadedPasswordConfirm(e.target.value)
+          }
+          name="create-wallet-password-confirmation"
+          suppressAutofill
+          sx={authPasswordFieldSx(theme)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') handleNextFromPassword();
+          }}
+        />
+      </Box>
+
+      <FormControlLabel
+        sx={{ alignItems: 'center', m: 0 }}
+        control={
+          <Checkbox
+            checked={storeAccount}
+            onChange={(event) => setStoredAccount(event.target.checked)}
+            sx={{
+              color: theme.palette.text.secondary,
+              '&.Mui-checked': {
+                color: theme.palette.primary.main,
+              },
+            }}
+          />
+        }
+        label={
+          <Typography
+            sx={{
+              color: isLight
+                ? theme.palette.text.primary
+                : 'rgba(214,221,233,0.62)',
+              fontSize: '0.86rem',
+              lineHeight: 1.55,
+            }}
+          >
+            {t('auth:create_wallet.save_account_in_hub')}
+          </Typography>
+        }
+      />
+
+      <ErrorText>{passwordStepError || walletToBeDownloadedError}</ErrorText>
+
+      <AuthButton onClick={handleNextFromPassword}>
+        {t('auth:create_wallet.continue')}
+      </AuthButton>
+    </AuthScreen>
   );
 }
diff --git a/src/components/App/ElectronPersistentStorageHydration.tsx b/src/components/App/ElectronPersistentStorageHydration.tsx
new file mode 100644
index 00000000..9c24b002
--- /dev/null
+++ b/src/components/App/ElectronPersistentStorageHydration.tsx
@@ -0,0 +1,91 @@
+import { useEffect, useRef } from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
+import {
+  customWebsocketSubscriptionsByAddressAtom,
+  filterSeenInAppRecordByAge,
+  notificationSeenInAppKeysRecordAtom,
+  parseSeenInAppStored,
+  seenAllNotificationsByAddressAtom,
+  userInfoAtom,
+} from '../../atoms/global';
+import {
+  hydrateElectronPersistentCache,
+  ELECTRON_PERSISTENT_ATOM_KEYS,
+  primeElectronPersistentCacheKey,
+} from '../../utils/electronPersistentStorage';
+
+/**
+ * When running in Electron, loads persisted values from appStorage and sets
+ * the atoms so the UI shows the correct state. Renders nothing.
+ */
+export function ElectronPersistentStorageHydration() {
+  const setCustomSubscriptionsByAddress = useSetAtom(customWebsocketSubscriptionsByAddressAtom);
+  const setSeenInAppRecord = useSetAtom(notificationSeenInAppKeysRecordAtom);
+  const setSeenAllNotificationsByAddress = useSetAtom(seenAllNotificationsByAddressAtom);
+  const userAddress = useAtomValue(userInfoAtom)?.address;
+  const hydratedRef = useRef(false);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const appStorage = (window as Window & { appStorage?: { get: (k: string) => Promise<unknown> } }).appStorage;
+    if (!appStorage || hydratedRef.current) return;
+    hydratedRef.current = true;
+
+    (async () => {
+      await hydrateElectronPersistentCache();
+      const [subsPayload, seen, seenAllPayload] = await Promise.all([
+        appStorage.get(ELECTRON_PERSISTENT_ATOM_KEYS.customWsSubscriptionsByAddress),
+        appStorage.get(ELECTRON_PERSISTENT_ATOM_KEYS.notificationSeenInApp),
+        appStorage.get(ELECTRON_PERSISTENT_ATOM_KEYS.seenAllNotificationsByAddress),
+      ]);
+      if (subsPayload != null) {
+        if (Array.isArray(subsPayload)) {
+          setCustomSubscriptionsByAddress({ __legacy: subsPayload });
+        } else if (typeof subsPayload === 'object' && !Array.isArray(subsPayload)) {
+          setCustomSubscriptionsByAddress(subsPayload as Record<string, import('../../atoms/global').CustomWebsocketSubscription[]>);
+        }
+      }
+      if (seen != null && typeof seen === 'object' && !Array.isArray(seen)) {
+        const record = filterSeenInAppRecordByAge(parseSeenInAppStored(seen));
+        if (Object.keys(record).length > 0) setSeenInAppRecord(record);
+      }
+      if (seenAllPayload != null && typeof seenAllPayload === 'object' && !Array.isArray(seenAllPayload)) {
+        setSeenAllNotificationsByAddress(seenAllPayload as Record<string, number | null>);
+      }
+    })();
+  }, [setCustomSubscriptionsByAddress, setSeenInAppRecord, setSeenAllNotificationsByAddress]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const appStorage = (window as Window & { appStorage?: { get: (k: string) => Promise<unknown> } })
+      .appStorage;
+    if (!appStorage) return;
+
+    let cancelled = false;
+    const key = ELECTRON_PERSISTENT_ATOM_KEYS.seenAllNotificationsByAddress;
+    void (async () => {
+      try {
+        const seenAllPayload = await appStorage.get(key);
+        if (cancelled) return;
+        if (
+          seenAllPayload != null &&
+          typeof seenAllPayload === 'object' &&
+          !Array.isArray(seenAllPayload)
+        ) {
+          primeElectronPersistentCacheKey(key, seenAllPayload);
+          setSeenAllNotificationsByAddress(seenAllPayload as Record<string, number | null>);
+        }
+      } catch (err) {
+        console.error(
+          '[ElectronPersistentStorageHydration] reload seen-all on address change:',
+          err
+        );
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [userAddress, setSeenAllNotificationsByAddress]);
+
+  return null;
+}
diff --git a/src/components/App/InfoDialog.tsx b/src/components/App/InfoDialog.tsx
index e246ec5f..7927a523 100644
--- a/src/components/App/InfoDialog.tsx
+++ b/src/components/App/InfoDialog.tsx
@@ -8,6 +8,14 @@ import {
   useTheme,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+import {
+  dialogActionsSx,
+  dialogContentSx,
+  dialogContentTextSx,
+  dialogTitleSx,
+  getDialogPaperSx,
+  getDialogPrimaryButtonSx,
+} from './dialogSurface';
 
 type InfoDialogProps = {
   open: boolean;
@@ -24,25 +32,31 @@ export function InfoDialog({ open, message, onClose }: InfoDialogProps) {
       open={open}
       aria-labelledby="alert-dialog-title"
       aria-describedby="alert-dialog-description"
+      PaperProps={{
+        sx: getDialogPaperSx(theme, { maxWidth: 420 }),
+      }}
     >
       <DialogTitle
         id="alert-dialog-title"
-        sx={{
-          textAlign: 'center',
-          color: theme.palette.text.primary,
-          fontWeight: 'bold',
-          opacity: 1,
-        }}
+        sx={dialogTitleSx}
       >
         {t('tutorial:important_info', { postProcess: 'capitalizeAll' })}
       </DialogTitle>
-      <DialogContent>
-        <DialogContentText id="alert-dialog-description">
+      <DialogContent sx={dialogContentSx}>
+        <DialogContentText
+          id="alert-dialog-description"
+          sx={dialogContentTextSx}
+        >
           {message}
         </DialogContentText>
       </DialogContent>
-      <DialogActions>
-        <Button variant="contained" onClick={onClose} autoFocus>
+      <DialogActions sx={dialogActionsSx}>
+        <Button
+          variant="contained"
+          onClick={onClose}
+          autoFocus
+          sx={getDialogPrimaryButtonSx(theme)}
+        >
           {t('core:action.close', { postProcess: 'capitalizeFirstChar' })}
         </Button>
       </DialogActions>
diff --git a/src/components/App/NotAuthenticatedFooter.tsx b/src/components/App/NotAuthenticatedFooter.tsx
index c9334125..eb761a4d 100644
--- a/src/components/App/NotAuthenticatedFooter.tsx
+++ b/src/components/App/NotAuthenticatedFooter.tsx
@@ -1,5 +1,6 @@
-import { Box, IconButton } from '@mui/material';
-import HubIcon from '@mui/icons-material/Hub';
+import { Box, IconButton, Tooltip } from '@mui/material';
+import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
+import { useTranslation } from 'react-i18next';
 import LanguageSelector from '../Language/LanguageSelector';
 import ThemeSelector from '../Theme/ThemeSelector';
 
@@ -12,31 +13,36 @@ export function NotAuthenticatedFooter({
   showCoreSetup,
   onOpenCoreSetup,
 }: NotAuthenticatedFooterProps) {
+  const { t } = useTranslation(['core']);
   return (
     <Box
       sx={{
-        alignItems: 'flex-start',
-        bottom: '1%',
+        alignItems: 'center',
         display: 'flex',
-        flexDirection: 'column',
-        left: '3px',
+        gap: 0.35,
+        justifyContent: 'flex-end',
+        opacity: 0.62,
+        pointerEvents: 'auto',
         position: 'absolute',
+        right: '12px',
+        bottom: '10px',
         width: 'auto',
+        zIndex: 2000,
       }}
     >
       {showCoreSetup && (
-        <Box sx={{ alignSelf: 'center' }}>
-          <IconButton onClick={onOpenCoreSetup}>
-            <HubIcon />
-          </IconButton>
+        <Box>
+          <Tooltip title={t('core:aria.core_controls')}>
+            <IconButton onClick={onOpenCoreSetup}>
+              <SettingsRoundedIcon sx={{ fontSize: 18 }} />
+            </IconButton>
+          </Tooltip>
         </Box>
       )}
-      <Box sx={{ alignSelf: 'left' }}>
+      <ThemeSelector footer />
+      <Box>
         <LanguageSelector />
       </Box>
-      <Box sx={{ alignSelf: 'center' }}>
-        <ThemeSelector />
-      </Box>
     </Box>
   );
 }
diff --git a/src/components/App/NotificationPermissionSlideDown.tsx b/src/components/App/NotificationPermissionSlideDown.tsx
new file mode 100644
index 00000000..6f521d59
--- /dev/null
+++ b/src/components/App/NotificationPermissionSlideDown.tsx
@@ -0,0 +1,199 @@
+import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive';
+import { Box, Button, Paper, Typography, alpha, useTheme } from '@mui/material';
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
+
+const TIMEOUT_MS = 60_000;
+const TIMEOUT_S = TIMEOUT_MS / 1000;
+
+type PendingRequest = {
+  requestId: string;
+  appInfo: { name?: string };
+  payload?: { text1?: string };
+  expiresAt: number;
+};
+
+function sendResponse(requestId: string, accepted: boolean) {
+  window.postMessage(
+    {
+      action: 'NOTIFICATION_PERMISSION_RESPONSE',
+      requestId,
+      result: { accepted },
+    },
+    window.location.origin
+  );
+}
+
+export function NotificationPermissionSlideDown() {
+  const { t } = useTranslation('question');
+  const theme = useTheme();
+  const [queue, setQueue] = useState<PendingRequest[]>([]);
+  const [secondsLeft, setSecondsLeft] = useState(TIMEOUT_S);
+  const autoTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    const listener = (event: CustomEvent<Omit<PendingRequest, 'expiresAt'>>) => {
+      const { requestId, appInfo, payload } = event.detail || {};
+      if (!requestId || !appInfo) return;
+      setQueue((prev) => [
+        ...prev,
+        {
+          requestId,
+          appInfo,
+          payload,
+          expiresAt: Date.now() + TIMEOUT_MS,
+        },
+      ]);
+    };
+    subscribeToEvent('show-notification-permission', listener as any);
+    return () =>
+      unsubscribeFromEvent('show-notification-permission', listener as any);
+  }, []);
+
+  useEffect(() => {
+    if (autoTimeoutRef.current) clearTimeout(autoTimeoutRef.current);
+    if (intervalRef.current) clearInterval(intervalRef.current);
+
+    const current = queue[0];
+    if (!current) return;
+
+    const remaining = Math.max(0, current.expiresAt - Date.now());
+    setSecondsLeft(Math.ceil(remaining / 1000));
+    autoTimeoutRef.current = setTimeout(() => {
+      sendResponse(current.requestId, false);
+      setQueue((prev) => prev.slice(1));
+    }, remaining);
+    intervalRef.current = setInterval(() => {
+      setSecondsLeft(Math.max(0, Math.ceil((current.expiresAt - Date.now()) / 1000)));
+    }, 500);
+
+    return () => {
+      if (autoTimeoutRef.current) clearTimeout(autoTimeoutRef.current);
+      if (intervalRef.current) clearInterval(intervalRef.current);
+    };
+  }, [queue]);
+
+  const current = queue[0];
+  if (!current) return null;
+
+  const dismissCurrent = (accepted: boolean) => {
+    sendResponse(current.requestId, accepted);
+    setQueue((prev) => prev.slice(1));
+  };
+
+  const progress = secondsLeft / TIMEOUT_S;
+
+  return (
+    <Paper
+      elevation={0}
+      sx={{
+        bgcolor: '#111820',
+        border: `1px solid ${alpha('#A9BCD8', 0.18)}`,
+        borderBottomLeftRadius: 16,
+        borderBottomRightRadius: 16,
+        borderRadius: 0,
+        boxShadow: `0 18px 44px ${alpha('#000', 0.42)}`,
+        left: '50%',
+        maxWidth: 520,
+        overflow: 'hidden',
+        position: 'fixed',
+        top: 0,
+        transform: 'translateX(-50%)',
+        width: 'min(calc(100vw - 32px), 520px)',
+        zIndex: theme.zIndex.modal + 10,
+      }}
+    >
+      <Box
+        sx={{
+          bgcolor: theme.palette.primary.main,
+          bottom: 0,
+          height: 3,
+          left: 0,
+          opacity: 0.72,
+          position: 'absolute',
+          transition: 'width 0.5s linear',
+          width: `${Math.max(0, Math.min(1, progress)) * 100}%`,
+        }}
+      />
+      <Box sx={{ display: 'flex', gap: 2, p: 2.25 }}>
+        <Box
+          sx={{
+            alignItems: 'center',
+            bgcolor: alpha(theme.palette.primary.main, 0.16),
+            borderRadius: '12px',
+            color: theme.palette.primary.light,
+            display: 'flex',
+            flexShrink: 0,
+            height: 42,
+            justifyContent: 'center',
+            width: 42,
+          }}
+        >
+          <NotificationsActiveIcon sx={{ fontSize: 24 }} />
+        </Box>
+        <Box sx={{ flex: 1, minWidth: 0 }}>
+          <Typography sx={{ fontSize: '0.98rem', fontWeight: 650, mb: 0.5 }}>
+            {t('permission.notification_title', {
+              appName: current.appInfo?.name || 'App',
+              defaultValue: '{{appName}} notifications',
+              postProcess: 'capitalizeFirstChar',
+            })}
+          </Typography>
+          <Typography
+            sx={{
+              color: alpha(theme.palette.text.secondary, 0.9),
+              fontSize: '0.84rem',
+              lineHeight: 1.45,
+            }}
+          >
+            {current.payload?.text1 ||
+              t('permission.notification', {
+                defaultValue: 'Allow this app to send you Hub notifications?',
+                postProcess: 'capitalizeFirstChar',
+              })}
+          </Typography>
+          <Box
+            sx={{
+              display: 'flex',
+              gap: 1,
+              justifyContent: 'flex-end',
+              mt: 1.7,
+            }}
+          >
+            <Button
+              onClick={() => dismissCurrent(false)}
+              sx={{ color: 'text.secondary', fontWeight: 600 }}
+            >
+              {t('permission.notification_dont_allow', {
+                defaultValue: "Don't allow",
+                postProcess: 'capitalizeFirstChar',
+              })}
+            </Button>
+            <Button
+              onClick={() => dismissCurrent(true)}
+              sx={{ fontWeight: 600 }}
+              variant="contained"
+            >
+              {t('permission.notification_allow', {
+                defaultValue: 'Allow',
+                postProcess: 'capitalizeFirstChar',
+              })}
+            </Button>
+          </Box>
+        </Box>
+        <Typography
+          sx={{
+            color: alpha(theme.palette.text.secondary, 0.62),
+            fontSize: '0.75rem',
+            fontWeight: 600,
+            pt: 0.25,
+          }}
+        >
+          {secondsLeft}s
+        </Typography>
+      </Box>
+    </Paper>
+  );
+}
diff --git a/src/components/App/PaymentPublishDialog.tsx b/src/components/App/PaymentPublishDialog.tsx
index 5e163a0f..0a3b4523 100644
--- a/src/components/App/PaymentPublishDialog.tsx
+++ b/src/components/App/PaymentPublishDialog.tsx
@@ -1,10 +1,12 @@
 import {
+  Box,
   Button,
   Dialog,
   DialogActions,
   DialogContent,
   DialogContentText,
   DialogTitle,
+  alpha,
   useTheme,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
@@ -36,73 +38,153 @@ export function PaymentPublishDialog({
       open={open}
       aria-labelledby="alert-dialog-title"
       aria-describedby="alert-dialog-description"
+      PaperProps={{
+        sx: {
+          background: '#121821',
+          backgroundImage: 'none',
+          border: '1px solid rgba(169,188,216,0.18)',
+          borderRadius: '18px',
+          boxShadow: '0 26px 56px rgba(0,0,0,0.44)',
+          color: theme.palette.text.primary,
+          minWidth: 360,
+          overflow: 'hidden',
+        },
+      }}
       sx={{ zIndex: 10001 }}
     >
       <DialogTitle
         id="alert-dialog-title"
         sx={{
-          textAlign: 'center',
+          borderBottom: '1px solid rgba(169,188,216,0.1)',
           color: theme.palette.text.primary,
-          fontWeight: 'bold',
-          opacity: 1,
+          fontSize: '1.04rem',
+          fontWeight: 650,
+          px: 3,
+          py: 2,
+          textAlign: 'left',
         }}
       >
         {message.paymentFee
           ? t('core:payment', { postProcess: 'capitalizeFirstChar' })
           : t('core:publish', { postProcess: 'capitalizeFirstChar' })}
       </DialogTitle>
-      <DialogContent>
-        <DialogContentText id="alert-dialog-description">
+      <DialogContent
+        sx={{
+          px: 3,
+          pb: 2.65,
+          '&&': {
+            pt: 2.75,
+          },
+        }}
+      >
+        <DialogContentText
+          id="alert-dialog-description"
+          sx={{
+            color: 'rgba(232,236,244,0.92)',
+            fontSize: '1rem',
+            lineHeight: 1.6,
+            mb: message?.paymentFee || message?.publishFee ? 1.65 : 0,
+            textAlign: 'left',
+          }}
+        >
           {message.message}
         </DialogContentText>
-        {message?.paymentFee && (
-          <DialogContentText id="alert-dialog-description2">
-            {t('core:fee.payment', { postProcess: 'capitalizeFirstChar' })}:{' '}
-            {message.paymentFee}
-          </DialogContentText>
-        )}
-        {message?.publishFee && (
-          <DialogContentText id="alert-dialog-description2">
-            {t('core:fee.publish', { postProcess: 'capitalizeFirstChar' })}:{' '}
-            {message.publishFee}
-          </DialogContentText>
+        {(message?.paymentFee || message?.publishFee) && (
+          <Box
+            sx={{
+              backgroundColor: alpha('#FFFFFF', 0.032),
+              border: '1px solid rgba(169,188,216,0.13)',
+              borderRadius: '12px',
+              display: 'grid',
+              gap: 0.55,
+              px: 1.45,
+              py: 1.2,
+            }}
+          >
+            <DialogContentText
+              sx={{
+                color: 'rgba(214,221,233,0.72)',
+                fontSize: '0.78rem',
+                fontWeight: 650,
+                letterSpacing: '0.02em',
+                lineHeight: 1.35,
+                m: 0,
+                textTransform: 'uppercase',
+              }}
+            >
+              {message?.paymentFee
+                ? t('core:fee.payment', {
+                    postProcess: 'capitalizeFirstChar',
+                  })
+                : t('core:fee.publish', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+            </DialogContentText>
+            <DialogContentText
+              sx={{
+                color: theme.palette.text.primary,
+                fontSize: '0.96rem',
+                fontWeight: 700,
+                lineHeight: 1.45,
+                m: 0,
+              }}
+            >
+              {message?.paymentFee || message.publishFee}
+            </DialogContentText>
+          </Box>
         )}
       </DialogContent>
-      <DialogActions>
+      <DialogActions
+        sx={{
+          borderTop: '1px solid rgba(169,188,216,0.1)',
+          gap: 1.2,
+          justifyContent: 'center',
+          px: 3,
+          py: 1.8,
+        }}
+      >
         <Button
           sx={{
-            backgroundColor: theme.palette.other.positive,
+            backgroundColor: alpha('#FFFFFF', 0.035),
+            border: '1px solid rgba(169,188,216,0.16)',
+            borderRadius: '11px',
             color: theme.palette.text.primary,
-            fontWeight: 'bold',
-            opacity: 0.7,
+            fontSize: '0.9rem',
+            fontWeight: 600,
+            minHeight: 42,
+            minWidth: 112,
+            px: 2.2,
             '&:hover': {
-              backgroundColor: theme.palette.other.positive,
-              color: 'black',
-              opacity: 1,
+              backgroundColor: alpha('#FFFFFF', 0.055),
+              borderColor: 'rgba(169,188,216,0.24)',
             },
           }}
-          variant="contained"
-          onClick={onAccept}
-          autoFocus
+          variant="outlined"
+          onClick={onCancel}
         >
-          {t('core:action.accept', { postProcess: 'capitalizeFirstChar' })}
+          {t('core:action.decline', { postProcess: 'capitalizeFirstChar' })}
         </Button>
         <Button
           sx={{
-            backgroundColor: theme.palette.other.danger,
-            color: 'black',
-            fontWeight: 'bold',
-            opacity: 0.7,
+            backgroundColor: theme.palette.primary.main,
+            borderRadius: '11px',
+            color: '#FFFFFF',
+            fontSize: '0.9rem',
+            fontWeight: 600,
+            minHeight: 42,
+            minWidth: 112,
+            px: 2.2,
+            textTransform: 'none',
             '&:hover': {
-              backgroundColor: theme.palette.other.danger,
-              color: 'black',
-              opacity: 1,
+              backgroundColor: theme.palette.primary.main,
+              filter: 'brightness(1.05)',
             },
           }}
           variant="contained"
-          onClick={onCancel}
+          onClick={onAccept}
+          autoFocus
         >
-          {t('core:action.decline', { postProcess: 'capitalizeFirstChar' })}
+          {t('core:action.accept', { postProcess: 'capitalizeFirstChar' })}
         </Button>
       </DialogActions>
     </Dialog>
diff --git a/src/components/App/ReceiveQortOverlay.tsx b/src/components/App/ReceiveQortOverlay.tsx
new file mode 100644
index 00000000..7cf512a8
--- /dev/null
+++ b/src/components/App/ReceiveQortOverlay.tsx
@@ -0,0 +1,437 @@
+import { useMemo, useRef } from 'react';
+import {
+  alpha,
+  Box,
+  Button,
+  ButtonBase,
+  Portal,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DownloadRoundedIcon from '@mui/icons-material/DownloadRounded';
+import CloseIcon from '@mui/icons-material/Close';
+import { motion, useReducedMotion } from 'framer-motion';
+import QRCode from 'react-qr-code';
+import { useTranslation } from 'react-i18next';
+import { getBlueTier1ButtonSx } from '../../styles/blueMaterial';
+
+type ReceiveQortOverlayProps = {
+  address: string;
+  originRect?: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  } | null;
+  targetRect?: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+  } | null;
+  onReturn: () => void;
+};
+
+export function ReceiveQortOverlay({
+  address,
+  originRect = null,
+  targetRect = null,
+  onReturn,
+}: ReceiveQortOverlayProps) {
+  const theme = useTheme();
+  const { t } = useTranslation(['group']);
+  const td = (key: string, defaultValue: string) =>
+    t(`group:dashboard.${key}`, { defaultValue });
+  const prefersReducedMotion = useReducedMotion();
+  const isDarkMode = theme.palette.mode === 'dark';
+  const qrContainerRef = useRef<HTMLDivElement | null>(null);
+  const isAnchoredLayout = !!targetRect;
+  const surfaceBorder = alpha(theme.palette.divider, 0.38);
+  const softSectionSurface = alpha(
+    isDarkMode ? theme.palette.common.white : theme.palette.text.primary,
+    isDarkMode ? 0.022 : 0.03
+  );
+  const shellDivider = alpha(theme.palette.divider, 0.28);
+  const innerDivider = alpha(theme.palette.divider, isDarkMode ? 0.16 : 0.2);
+
+  const fallbackPanelWidth = useMemo(() => {
+    if (typeof window === 'undefined') return 620;
+    return Math.min(700, Math.max(560, window.innerWidth - 48));
+  }, []);
+
+  const panelLayout = useMemo(() => {
+    if (targetRect) {
+      return {
+        height: targetRect.height,
+        left: targetRect.left,
+        top: targetRect.top,
+        width: targetRect.width,
+      };
+    }
+
+    return {
+      width: fallbackPanelWidth,
+    };
+  }, [fallbackPanelWidth, targetRect]);
+
+  const panelAnimation = useMemo(() => {
+    if (originRect && targetRect && !prefersReducedMotion) {
+      return {
+        initial: {
+          borderRadius: 10,
+          opacity: 0.9,
+          scaleX: Math.max(0.18, originRect.width / targetRect.width),
+          scaleY: Math.max(0.12, originRect.height / targetRect.height),
+          x: originRect.left - targetRect.left,
+          y:
+            originRect.top +
+            originRect.height -
+            (targetRect.top + targetRect.height),
+        },
+        animate: {
+          borderRadius: 18,
+          opacity: 1,
+          scaleX: 1,
+          scaleY: 1,
+          x: 0,
+          y: 0,
+        },
+        exit: {
+          borderRadius: 10,
+          opacity: 0.9,
+          scaleX: Math.max(0.18, originRect.width / targetRect.width),
+          scaleY: Math.max(0.12, originRect.height / targetRect.height),
+          x: originRect.left - targetRect.left,
+          y:
+            originRect.top +
+            originRect.height -
+            (targetRect.top + targetRect.height),
+        },
+      };
+    }
+
+    return {
+      initial: prefersReducedMotion
+        ? { opacity: 0 }
+        : { opacity: 0, y: 18, scale: 0.985 },
+      animate: prefersReducedMotion
+        ? { opacity: 1 }
+        : { opacity: 1, y: 0, scale: 1 },
+      exit: prefersReducedMotion
+        ? { opacity: 0 }
+        : { opacity: 0, y: 10, scale: 0.985 },
+    };
+  }, [originRect, prefersReducedMotion, targetRect]);
+
+  const qrSize = useMemo(() => {
+    const widthBound = Math.max(170, panelLayout.width - 176);
+    const heightBound = Math.max(170, panelLayout.height - 320);
+    return Math.min(240, widthBound, heightBound);
+  }, [panelLayout.height, panelLayout.width]);
+
+  const handleCopyAddress = async () => {
+    if (!address) return;
+    try {
+      await navigator.clipboard.writeText(address);
+    } catch (error) {
+      console.error('Failed to copy address:', error);
+    }
+  };
+
+  const handleDownloadQr = () => {
+    if (!address || !qrContainerRef.current) return;
+    const svg = qrContainerRef.current.querySelector('svg');
+    if (!svg) return;
+
+    const serializer = new XMLSerializer();
+    const source = serializer.serializeToString(svg);
+    const blob = new Blob([source], {
+      type: 'image/svg+xml;charset=utf-8',
+    });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = 'qort-wallet-qr.svg';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <Portal>
+      <>
+        <Box
+          component={motion.button}
+          type="button"
+          aria-label={td('close_receive_qort_modal', 'Close receive QORT modal')}
+          initial={{
+            opacity: 0,
+            backdropFilter: 'blur(0px) brightness(1) saturate(1)',
+            WebkitBackdropFilter: 'blur(0px) brightness(1) saturate(1)',
+            backgroundColor: isDarkMode
+              ? 'rgba(6, 8, 12, 0)'
+              : 'rgba(22, 26, 34, 0)',
+          }}
+          animate={{
+            opacity: 1,
+            backdropFilter: isDarkMode
+              ? 'blur(12px) brightness(0.76) saturate(0.88)'
+              : 'blur(12px) brightness(0.9) saturate(0.94)',
+            WebkitBackdropFilter: isDarkMode
+              ? 'blur(12px) brightness(0.76) saturate(0.88)'
+              : 'blur(12px) brightness(0.9) saturate(0.94)',
+            backgroundColor: isDarkMode
+              ? 'rgba(6, 8, 12, 0.4)'
+              : 'rgba(22, 26, 34, 0.14)',
+          }}
+          exit={{
+            opacity: 0,
+            backdropFilter: 'blur(0px) brightness(1) saturate(1)',
+            WebkitBackdropFilter: 'blur(0px) brightness(1) saturate(1)',
+            backgroundColor: isDarkMode
+              ? 'rgba(6, 8, 12, 0)'
+              : 'rgba(22, 26, 34, 0)',
+          }}
+          transition={{
+            duration: prefersReducedMotion ? 0.06 : 0.1,
+            ease: [0.2, 0, 0, 1],
+            delay: 0,
+          }}
+          onClick={onReturn}
+          sx={{
+            appearance: 'none',
+            border: 0,
+            inset: 0,
+            padding: 0,
+            position: 'fixed',
+            zIndex: 1398,
+          }}
+        />
+
+        <Box
+          component={motion.div}
+          initial={panelAnimation.initial}
+          animate={panelAnimation.animate}
+          exit={panelAnimation.exit}
+          transition={{
+            duration: prefersReducedMotion ? 0.08 : 0.16,
+            ease: [0.22, 1, 0.36, 1],
+          }}
+          onClick={(event) => event.stopPropagation()}
+          sx={{
+            position: 'fixed',
+            inset: isAnchoredLayout ? undefined : 0,
+            left: isAnchoredLayout ? `${panelLayout.left}px` : undefined,
+            top: isAnchoredLayout ? `${panelLayout.top}px` : undefined,
+            alignItems: isAnchoredLayout ? undefined : 'center',
+            display: isAnchoredLayout ? undefined : 'flex',
+            justifyContent: isAnchoredLayout ? undefined : 'center',
+            overflow: 'visible',
+            p: isAnchoredLayout ? 0 : 3,
+            pointerEvents: 'none',
+            transformOrigin: targetRect ? 'bottom left' : 'center center',
+            height: isAnchoredLayout ? `${panelLayout.height}px` : undefined,
+            width: isAnchoredLayout ? `${panelLayout.width}px` : undefined,
+            willChange: 'transform, opacity',
+            zIndex: 1399,
+          }}
+        >
+          <Box
+            sx={{
+              background: isDarkMode
+                ? 'linear-gradient(180deg, rgba(20,23,30,0.985) 0%, rgba(15,17,23,0.99) 100%)'
+                : 'linear-gradient(180deg, rgba(251,253,255,0.985) 0%, rgba(244,247,251,0.99) 100%)',
+              border: `1px solid ${surfaceBorder}`,
+              borderRadius: '14px',
+              boxShadow: isDarkMode
+                ? '0 34px 120px rgba(0,0,0,0.46)'
+                : '0 28px 88px rgba(18,28,45,0.16)',
+              clipPath: 'inset(0 round 14px)',
+              display: 'flex',
+              flexDirection: 'column',
+              height: isAnchoredLayout
+                ? '100%'
+                : 'min(620px, calc(100vh - 48px))',
+              isolation: 'isolate',
+              maxHeight: isAnchoredLayout ? undefined : 'calc(100vh - 48px)',
+              overflow: 'hidden',
+              pointerEvents: 'auto',
+              width: isAnchoredLayout ? '100%' : 'min(700px, 100%)',
+            }}
+          >
+            <Box
+              sx={{
+                alignItems: 'center',
+                display: 'flex',
+                justifyContent: 'space-between',
+                px: 2.3,
+                py: 1.45,
+              }}
+            >
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                <Typography
+                  sx={{
+                    color: theme.palette.text.primary,
+                    fontSize: '1rem',
+                    fontWeight: 700,
+                    letterSpacing: '-0.02em',
+                  }}
+                >
+                  {td('receive_qort', 'Receive QORT')}
+                </Typography>
+                <Typography
+                  sx={{
+                    color: theme.palette.text.secondary,
+                    fontSize: '0.8rem',
+                    fontWeight: 400,
+                    lineHeight: 1.45,
+                  }}
+                >
+                  {td('receive_qort_subtitle', 'Scan to receive QORT')}
+                </Typography>
+              </Box>
+              <ButtonBase
+                onClick={onReturn}
+                sx={{
+                  borderRadius: '8px',
+                  color: theme.palette.text.secondary,
+                  height: 30,
+                  width: 30,
+                  '&:hover': {
+                    backgroundColor: alpha(theme.palette.common.white, isDarkMode ? 0.05 : 0.55),
+                    color: theme.palette.text.primary,
+                  },
+                }}
+              >
+                <CloseIcon sx={{ fontSize: 17 }} />
+              </ButtonBase>
+            </Box>
+
+            <Box
+              sx={{
+                borderTop: `1px solid ${shellDivider}`,
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                minHeight: 0,
+                overflowY: 'auto',
+                px: 2.25,
+                pb: 2.25,
+                pt: 2,
+              }}
+            >
+              <Box
+                ref={qrContainerRef}
+                sx={{
+                  alignItems: 'center',
+                  display: 'flex',
+                  borderBottom: `1px solid ${innerDivider}`,
+                  justifyContent: 'center',
+                  minHeight: Math.max(252, qrSize + 76),
+                  pb: 2,
+                  px: 0.25,
+                }}
+              >
+                <Box
+                  sx={{
+                    alignItems: 'center',
+                    backgroundColor: '#ffffff',
+                    borderRadius: '18px',
+                    boxShadow:
+                      '0 10px 24px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.7)',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    p: 2.2,
+                  }}
+                >
+                  <QRCode
+                    value={address || ''}
+                    size={qrSize}
+                    level="M"
+                    bgColor="#FFFFFF"
+                    fgColor="#000000"
+                  />
+                </Box>
+              </Box>
+
+              <Box
+                sx={{
+                  borderBottom: `1px solid ${innerDivider}`,
+                  px: 0.25,
+                  py: 1.45,
+                }}
+              >
+                <Typography
+                  sx={{
+                    color: alpha(theme.palette.text.secondary, isDarkMode ? 0.9 : 0.82),
+                    fontSize: '0.84rem',
+                    fontWeight: 600,
+                    letterSpacing: '-0.01em',
+                    lineHeight: 1.55,
+                    textAlign: 'center',
+                    wordBreak: 'break-all',
+                  }}
+                >
+                  {address || '—'}
+                </Typography>
+              </Box>
+
+              <Box
+                sx={{
+                  display: 'grid',
+                  gap: '10px',
+                  gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+                  pt: 1.6,
+                }}
+              >
+                <Button
+                  variant="outlined"
+                  fullWidth
+                  onClick={handleCopyAddress}
+                  startIcon={<ContentCopyIcon sx={{ fontSize: '0.95rem' }} />}
+                  sx={{
+                    backgroundColor: alpha(
+                      isDarkMode ? theme.palette.common.white : theme.palette.background.paper,
+                      isDarkMode ? 0.024 : 0.72
+                    ),
+                    borderColor: alpha(theme.palette.divider, 0.18),
+                    borderRadius: '10px',
+                    color: theme.palette.text.primary,
+                    fontSize: '0.84rem',
+                    fontWeight: 600,
+                    minHeight: 42,
+                    textTransform: 'none',
+                    '&:hover': {
+                      backgroundColor: alpha(theme.palette.primary.main, 0.06),
+                      borderColor: alpha(theme.palette.primary.main, 0.34),
+                    },
+                  }}
+                >
+                  {td('copy_address', 'Copy address')}
+                </Button>
+                <Button
+                  variant="contained"
+                  fullWidth
+                  onClick={handleDownloadQr}
+                  startIcon={<DownloadRoundedIcon sx={{ fontSize: '1rem' }} />}
+                  sx={{
+                    borderRadius: '10px',
+                    ...getBlueTier1ButtonSx(),
+                    fontSize: '0.84rem',
+                    fontWeight: 600,
+                    minHeight: 42,
+                    textTransform: 'none',
+                  }}
+                >
+                  {td('download_qr', 'Download QR')}
+                </Button>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </>
+    </Portal>
+  );
+}
diff --git a/src/components/App/SendQortOverlay.tsx b/src/components/App/SendQortOverlay.tsx
index 03f4d928..c61d7be9 100644
--- a/src/components/App/SendQortOverlay.tsx
+++ b/src/components/App/SendQortOverlay.tsx
@@ -1,11 +1,29 @@
-import { Box } from '@mui/material';
-import { Return } from '../../assets/Icons/Return.tsx';
-import { Spacer } from '../../common/Spacer';
+import { useMemo } from 'react';
+import {
+  alpha,
+  Box,
+  ButtonBase,
+  Portal,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { motion, useReducedMotion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
 import { QortPayment } from '../QortPayment';
 
+type SendQortOriginRect = {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+} | null;
+
 type SendQortOverlayProps = {
   balance: number;
   paymentTo: string;
+  originRect?: SendQortOriginRect;
+  targetRect?: SendQortOriginRect;
   onReturn: () => void;
   onSuccess: () => void;
   show: (data: any) => Promise<unknown>;
@@ -14,50 +32,264 @@ type SendQortOverlayProps = {
 export function SendQortOverlay({
   balance,
   paymentTo,
+  originRect = null,
+  targetRect = null,
   onReturn,
   onSuccess,
   show,
 }: SendQortOverlayProps) {
+  const theme = useTheme();
+  const { t } = useTranslation(['group']);
+  const td = (key: string, defaultValue: string) =>
+    t(`group:dashboard.${key}`, { defaultValue });
+  const prefersReducedMotion = useReducedMotion();
+  const isDarkMode = theme.palette.mode === 'dark';
+  const isAnchoredLayout = !!targetRect;
+  const surfaceBorder = alpha(theme.palette.divider, 0.38);
+  const headerDivider = alpha(theme.palette.divider, 0.28);
+
+  const fallbackPanelWidth = useMemo(() => {
+    if (typeof window === 'undefined') return 620;
+    return Math.min(700, Math.max(560, window.innerWidth - 48));
+  }, []);
+
+  const panelLayout = useMemo(() => {
+    if (targetRect) {
+      return {
+        height: targetRect.height,
+        left: targetRect.left,
+        top: targetRect.top,
+        width: targetRect.width,
+      };
+    }
+
+    return {
+      width: fallbackPanelWidth,
+    };
+  }, [fallbackPanelWidth, targetRect]);
+
+  const panelAnimation = useMemo(() => {
+    if (originRect && targetRect && !prefersReducedMotion) {
+      return {
+        initial: {
+          borderRadius: 10,
+          opacity: 0.9,
+          scaleX: Math.max(0.18, originRect.width / targetRect.width),
+          scaleY: Math.max(0.12, originRect.height / targetRect.height),
+          x: originRect.left - targetRect.left,
+          y:
+            originRect.top +
+            originRect.height -
+            (targetRect.top + targetRect.height),
+        },
+        animate: {
+          borderRadius: 18,
+          opacity: 1,
+          scaleX: 1,
+          scaleY: 1,
+          x: 0,
+          y: 0,
+        },
+        exit: {
+          borderRadius: 10,
+          opacity: 0.9,
+          scaleX: Math.max(0.18, originRect.width / targetRect.width),
+          scaleY: Math.max(0.12, originRect.height / targetRect.height),
+          x: originRect.left - targetRect.left,
+          y:
+            originRect.top +
+            originRect.height -
+            (targetRect.top + targetRect.height),
+        },
+      };
+    }
+
+    return {
+      initial: prefersReducedMotion
+        ? { opacity: 0 }
+        : { opacity: 0, y: 18, scale: 0.985 },
+      animate: prefersReducedMotion
+        ? { opacity: 1 }
+        : { opacity: 1, y: 0, scale: 1 },
+      exit: prefersReducedMotion
+        ? { opacity: 0 }
+        : { opacity: 0, y: 10, scale: 0.985 },
+    };
+  }, [prefersReducedMotion]);
+
   return (
-    <Box
-      sx={{
-        alignItems: 'center',
-        background: (theme) => theme.palette.background.default,
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-        position: 'fixed',
-        width: '100%',
-        zIndex: 10000,
-      }}
-    >
-      <Spacer height="22px" />
-      <Box
-        sx={{
-          boxSizing: 'border-box',
-          display: 'flex',
-          justifyContent: 'flex-start',
-          maxWidth: '700px',
-          paddingLeft: '22px',
-          width: '100%',
-        }}
-      >
-        <Return
-          style={{
-            cursor: 'pointer',
-            height: '24px',
-            width: 'auto',
+    <Portal>
+      <>
+        <Box
+          component={motion.button}
+          type="button"
+          aria-label={td('close_send_qort_modal', 'Close send QORT modal')}
+          initial={{
+            opacity: 0,
+            backdropFilter: 'blur(0px) brightness(1) saturate(1)',
+            WebkitBackdropFilter: 'blur(0px) brightness(1) saturate(1)',
+            backgroundColor: isDarkMode
+              ? 'rgba(6, 8, 12, 0)'
+              : 'rgba(22, 26, 34, 0)',
+          }}
+          animate={{
+            opacity: 1,
+            backdropFilter: isDarkMode
+              ? 'blur(12px) brightness(0.76) saturate(0.88)'
+              : 'blur(12px) brightness(0.9) saturate(0.94)',
+            WebkitBackdropFilter: isDarkMode
+              ? 'blur(12px) brightness(0.76) saturate(0.88)'
+              : 'blur(12px) brightness(0.9) saturate(0.94)',
+            backgroundColor: isDarkMode
+              ? 'rgba(6, 8, 12, 0.4)'
+              : 'rgba(22, 26, 34, 0.14)',
+          }}
+          exit={{
+            opacity: 0,
+            backdropFilter: 'blur(0px) brightness(1) saturate(1)',
+            WebkitBackdropFilter: 'blur(0px) brightness(1) saturate(1)',
+            backgroundColor: isDarkMode
+              ? 'rgba(6, 8, 12, 0)'
+              : 'rgba(22, 26, 34, 0)',
+          }}
+          transition={{
+            duration: prefersReducedMotion ? 0.06 : 0.1,
+            ease: [0.2, 0, 0, 1],
+            delay: 0,
           }}
           onClick={onReturn}
+          sx={{
+            appearance: 'none',
+            border: 0,
+            inset: 0,
+            padding: 0,
+            position: 'fixed',
+            zIndex: 1398,
+          }}
         />
-      </Box>
-      <Spacer height="35px" />
-      <QortPayment
-        balance={balance}
-        show={show}
-        onSuccess={onSuccess}
-        defaultPaymentTo={paymentTo}
-      />
-    </Box>
+
+        <Box
+          component={motion.div}
+          initial={panelAnimation.initial}
+          animate={panelAnimation.animate}
+          exit={panelAnimation.exit}
+          transition={{
+            duration: prefersReducedMotion ? 0.08 : 0.16,
+            ease: [0.22, 1, 0.36, 1],
+          }}
+          onClick={(event) => event.stopPropagation()}
+          sx={{
+            position: 'fixed',
+            inset: isAnchoredLayout ? undefined : 0,
+            left: isAnchoredLayout ? `${panelLayout.left}px` : undefined,
+            top: isAnchoredLayout ? `${panelLayout.top}px` : undefined,
+            alignItems: isAnchoredLayout ? undefined : 'center',
+            display: isAnchoredLayout ? undefined : 'flex',
+            justifyContent: isAnchoredLayout ? undefined : 'center',
+            overflow: 'visible',
+            p: isAnchoredLayout ? 0 : 3,
+            pointerEvents: 'none',
+            transformOrigin: targetRect ? 'bottom left' : 'center center',
+            height: isAnchoredLayout ? `${panelLayout.height}px` : undefined,
+            willChange: 'transform, opacity',
+            width: isAnchoredLayout ? `${panelLayout.width}px` : undefined,
+            zIndex: 1399,
+          }}
+        >
+          <Box
+            sx={{
+              background: isDarkMode
+                ? 'linear-gradient(180deg, rgba(20,23,30,0.985) 0%, rgba(15,17,23,0.99) 100%)'
+                : 'linear-gradient(180deg, rgba(251,253,255,0.985) 0%, rgba(244,247,251,0.99) 100%)',
+              border: `1px solid ${surfaceBorder}`,
+              borderRadius: '14px',
+              boxShadow: isDarkMode
+                ? '0 34px 120px rgba(0,0,0,0.46)'
+                : '0 28px 88px rgba(18,28,45,0.16)',
+              clipPath: 'inset(0 round 14px)',
+              display: 'flex',
+              flexDirection: 'column',
+              height: isAnchoredLayout ? '100%' : 'auto',
+              isolation: 'isolate',
+              maxHeight: isAnchoredLayout ? undefined : 'calc(100vh - 48px)',
+              overflow: 'hidden',
+              pointerEvents: 'auto',
+              width: isAnchoredLayout ? '100%' : 'min(700px, 100%)',
+            }}
+          >
+            <Box
+              sx={{
+                alignItems: 'center',
+                display: 'flex',
+                justifyContent: 'space-between',
+                px: 2.3,
+                py: 1.45,
+              }}
+            >
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                <Typography
+                  sx={{
+                    color: theme.palette.text.primary,
+                    fontSize: '1rem',
+                    fontWeight: 700,
+                    letterSpacing: '-0.02em',
+                  }}
+                >
+                  {td('send_qort', 'Send QORT')}
+                </Typography>
+                <Typography
+                  sx={{
+                    color: theme.palette.text.secondary,
+                    fontSize: '0.8rem',
+                    fontWeight: 400,
+                    lineHeight: 1.45,
+                  }}
+                >
+                  {td(
+                    'send_qort_subtitle',
+                    'Transfer QORT to any registered name or address.'
+                  )}
+                </Typography>
+              </Box>
+              <ButtonBase
+                onClick={onReturn}
+                sx={{
+                  borderRadius: '8px',
+                  color: theme.palette.text.secondary,
+                  height: 30,
+                  width: 30,
+                  '&:hover': {
+                    backgroundColor: alpha(theme.palette.common.white, isDarkMode ? 0.05 : 0.55),
+                    color: theme.palette.text.primary,
+                  },
+                }}
+              >
+                <CloseIcon sx={{ fontSize: 17 }} />
+              </ButtonBase>
+            </Box>
+
+            <Box
+              sx={{
+                borderTop: `1px solid ${headerDivider}`,
+                flex: isAnchoredLayout ? 1 : '0 1 auto',
+                minHeight: 0,
+                overflowY: 'auto',
+                overscrollBehavior: 'contain',
+                px: { xs: 0, sm: 0 },
+                py: 0.25,
+              }}
+            >
+              <QortPayment
+                balance={balance}
+                show={show}
+                onSuccess={onSuccess}
+                defaultPaymentTo={paymentTo}
+                compact
+              />
+            </Box>
+          </Box>
+        </Box>
+      </>
+    </Portal>
   );
 }
diff --git a/src/components/App/SuccessOverlay.tsx b/src/components/App/SuccessOverlay.tsx
index d0c265d2..33d4c495 100644
--- a/src/components/App/SuccessOverlay.tsx
+++ b/src/components/App/SuccessOverlay.tsx
@@ -1,6 +1,6 @@
-import { Box, ButtonBase } from '@mui/material';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import { Box, ButtonBase, Typography, alpha, useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { Spacer } from '../../common/Spacer';
 import { CustomButton, TextP } from '../../styles/App-styles.ts';
 import { SuccessIcon } from '../../assets/Icons/SuccessIcon.tsx';
 
@@ -22,31 +22,16 @@ export function SuccessOverlay({
   fullPage = true,
 }: SuccessOverlayProps) {
   const { t } = useTranslation([messageNs, buttonLabelNs]);
-
-  const content = (
-    <>
-      <Spacer height="48px" />
-      <SuccessIcon />
-      <Spacer height="45px" />
-      <TextP
-        sx={{
-          textAlign: 'center',
-          lineHeight: '15px',
-        }}
-      >
-        {t(`${messageNs}:${messageKey}`, {
-          postProcess: 'capitalizeFirstChar',
-        })}
-      </TextP>
-      <Spacer height="100px" />
-      <ButtonBase autoFocus={fullPage} onClick={onAction}>
-        <CustomButton>
-          {t(`${buttonLabelNs}:${buttonLabelKey}`, {
-            postProcess: 'capitalizeFirstChar',
-          })}
-        </CustomButton>
-      </ButtonBase>
-    </>
+  const theme = useTheme();
+  const message = t(`${messageNs}:${messageKey}`, {
+    postProcess: 'capitalizeFirstChar',
+  });
+  const buttonLabel = t(`${buttonLabelNs}:${buttonLabelKey}`, {
+    postProcess: 'capitalizeFirstChar',
+  });
+  const transferSubmittedDetail = t(
+    `${messageNs}:message.success.transfer_submitted`,
+    { postProcess: 'capitalizeFirstChar' }
   );
 
   if (fullPage) {
@@ -54,19 +39,95 @@ export function SuccessOverlay({
       <Box
         sx={{
           alignItems: 'center',
-          background: (theme) => theme.palette.background.default,
+          background: theme.palette.background.default,
           display: 'flex',
-          flexDirection: 'column',
           height: '100%',
+          justifyContent: 'center',
           position: 'fixed',
           width: '100%',
           zIndex: 10000,
         }}
       >
-        {content}
+        <Box
+          sx={{
+            alignItems: 'center',
+            background: '#111820',
+            border: `1px solid ${alpha('#A9BCD8', 0.18)}`,
+            borderRadius: '18px',
+            boxShadow: `0 24px 58px ${alpha('#000', 0.42)}`,
+            display: 'flex',
+            flexDirection: 'column',
+            maxWidth: 380,
+            px: 3,
+            py: 3.2,
+            textAlign: 'center',
+            width: 'calc(100% - 40px)',
+          }}
+        >
+          <Box
+            sx={{
+              alignItems: 'center',
+              bgcolor: alpha(theme.palette.other.positive, 0.14),
+              border: `1px solid ${alpha(theme.palette.other.positive, 0.34)}`,
+              borderRadius: '50%',
+              color: theme.palette.other.positive,
+              display: 'flex',
+              height: 58,
+              justifyContent: 'center',
+              mb: 2,
+              width: 58,
+            }}
+          >
+            <CheckRoundedIcon sx={{ fontSize: 34 }} />
+          </Box>
+          <Typography sx={{ fontSize: '1.28rem', fontWeight: 650, mb: 0.8 }}>
+            {message}
+          </Typography>
+          <Typography
+            sx={{
+              color: alpha(theme.palette.text.secondary, 0.88),
+              fontSize: '0.9rem',
+              lineHeight: 1.45,
+              mb: 2.4,
+            }}
+          >
+            {transferSubmittedDetail}
+          </Typography>
+          <ButtonBase autoFocus onClick={onAction} sx={{ width: '100%' }}>
+            <CustomButton
+              sx={{
+                fontWeight: 600,
+                minHeight: 44,
+                width: '100%',
+              }}
+            >
+              {buttonLabel}
+            </CustomButton>
+          </ButtonBase>
+        </Box>
       </Box>
     );
   }
 
+  const content = (
+    <>
+      <SuccessIcon />
+      <TextP
+        sx={{
+          mt: 2,
+          textAlign: 'center',
+          lineHeight: '15px',
+        }}
+      >
+        {message}
+      </TextP>
+      <ButtonBase autoFocus={fullPage} onClick={onAction}>
+        <CustomButton sx={{ fontWeight: 600, mt: 3 }}>
+          {buttonLabel}
+        </CustomButton>
+      </ButtonBase>
+    </>
+  );
+
   return <>{content}</>;
 }
diff --git a/src/components/App/UnsavedChangesDialog.tsx b/src/components/App/UnsavedChangesDialog.tsx
index 7dd54b28..0e148c41 100644
--- a/src/components/App/UnsavedChangesDialog.tsx
+++ b/src/components/App/UnsavedChangesDialog.tsx
@@ -5,6 +5,7 @@ import {
   DialogContent,
   DialogContentText,
   DialogTitle,
+  alpha,
   useTheme,
 } from '@mui/material';
 import { useTranslation } from 'react-i18next';
@@ -23,48 +24,97 @@ export function UnsavedChangesDialog({
   onConfirm,
 }: UnsavedChangesDialogProps) {
   const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
   const { t } = useTranslation(['core']);
 
   return (
     <Dialog
       open={open}
+      onClose={onCancel}
       aria-labelledby="alert-dialog-title"
       aria-describedby="alert-dialog-description"
+      PaperProps={{
+        sx: isDark
+          ? {
+              bgcolor: '#111820',
+              backgroundImage: 'none',
+              border: `1px solid ${alpha('#A9BCD8', 0.18)}`,
+              borderRadius: '18px',
+              boxShadow: `0 24px 58px ${alpha('#000', 0.42)}`,
+              maxWidth: 360,
+              width: 'calc(100% - 40px)',
+            }
+          : {
+              bgcolor: theme.palette.background.paper,
+              backgroundImage: 'none',
+              border: `1px solid ${theme.palette.border.subtle}`,
+              borderRadius: '18px',
+              boxShadow: `0 22px 48px ${alpha('#000', 0.09)}, 0 0 0 1px ${alpha(theme.palette.divider, 0.45)}`,
+              maxWidth: 360,
+              width: 'calc(100% - 40px)',
+              color: theme.palette.text.primary,
+            },
+      }}
     >
       <DialogTitle
         id="alert-dialog-title"
         sx={{
-          textAlign: 'center',
           color: theme.palette.text.primary,
-          fontWeight: 'bold',
-          opacity: 1,
+          fontSize: '1.08rem',
+          fontWeight: 650,
+          pb: 0.8,
+          pt: 2.3,
+          textAlign: 'center',
         }}
       >
-        {t('core:action.logout', { postProcess: 'capitalizeAll' })}
+        {t('core:action.logout', { postProcess: 'capitalizeFirstChar' })}?
       </DialogTitle>
       <DialogContent>
         <DialogContentText
           id="alert-dialog-description"
-          sx={{ textAlign: 'center' }}
+          sx={{
+            color: isDark
+              ? alpha(theme.palette.text.secondary, 0.9)
+              : theme.palette.text.secondary,
+            fontSize: '0.88rem',
+            lineHeight: 1.48,
+            textAlign: 'center',
+          }}
         >
           {message}
         </DialogContentText>
       </DialogContent>
-      <DialogActions>
+      <DialogActions
+        sx={{ gap: 1, justifyContent: 'center', px: 2.3, pb: 2.3 }}
+      >
         <Button
-          variant="contained"
           onClick={onCancel}
-          sx={{
-            backgroundColor: theme.palette.other.danger,
-            color: theme.palette.text.primary,
-            fontWeight: 'bold',
-            opacity: 0.7,
-            '&:hover': {
-              backgroundColor: theme.palette.other.danger,
-              color: 'black',
-              opacity: 1,
-            },
-          }}
+          sx={
+            isDark
+              ? {
+                  border: `1px solid ${alpha('#A9BCD8', 0.16)}`,
+                  borderRadius: '10px',
+                  color: theme.palette.text.secondary,
+                  fontWeight: 600,
+                  minWidth: 116,
+                  textTransform: 'none',
+                  '&:hover': {
+                    bgcolor: alpha('#FFFFFF', 0.045),
+                  },
+                }
+              : {
+                  border: `1px solid ${theme.palette.border.main}`,
+                  borderRadius: '10px',
+                  color: theme.palette.text.primary,
+                  fontWeight: 600,
+                  minWidth: 116,
+                  textTransform: 'none',
+                  '&:hover': {
+                    bgcolor: theme.palette.action.hover,
+                    borderColor: theme.palette.border.main,
+                  },
+                }
+          }
         >
           {t('core:action.cancel', { postProcess: 'capitalizeFirstChar' })}
         </Button>
@@ -73,14 +123,14 @@ export function UnsavedChangesDialog({
           onClick={onConfirm}
           autoFocus
           sx={{
-            backgroundColor: theme.palette.other.positive,
-            color: theme.palette.text.primary,
-            fontWeight: 'bold',
-            opacity: 0.7,
+            bgcolor: theme.palette.primary.main,
+            borderRadius: '10px',
+            color: theme.palette.primary.contrastText,
+            fontWeight: 600,
+            minWidth: 140,
+            textTransform: 'none',
             '&:hover': {
-              backgroundColor: theme.palette.other.positive,
-              color: 'black',
-              opacity: 1,
+              bgcolor: theme.palette.primary.dark,
             },
           }}
         >
diff --git a/src/components/App/WalletsView.tsx b/src/components/App/WalletsView.tsx
index 456948e3..226a1c32 100644
--- a/src/components/App/WalletsView.tsx
+++ b/src/components/App/WalletsView.tsx
@@ -1,7 +1,11 @@
-import { Box } from '@mui/material';
-import { Return } from '../../assets/Icons/Return.tsx';
-import { Spacer } from '../../common/Spacer';
+import { Box, ButtonBase } from '@mui/material';
+import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
+import { useTranslation } from 'react-i18next';
 import { Wallets } from '../Wallets';
+import { AuthScreen } from '../Auth/AuthShell';
+import { useEffect, useState } from 'react';
+
+type ImportView = 'choice' | 'backup' | 'seedphrase' | 'authenticate';
 
 type WalletsViewProps = {
   onBack: () => void;
@@ -16,36 +20,59 @@ export function WalletsView({
   setExtState,
   rawWallet,
 }: WalletsViewProps) {
+  const { t } = useTranslation(['auth']);
+  const [importView, setImportView] = useState<ImportView>('choice');
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        onBack();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onBack]);
+
   return (
-    <>
-      <Spacer height="22px" />
-      <Box
-        sx={{
-          boxSizing: 'border-box',
-          display: 'flex',
-          justifyContent: 'flex-start',
-          alignItems: 'center',
-          maxWidth: '700px',
-          paddingLeft: '22px',
-          paddingRight: '22px',
-          width: '100%',
-          marginBottom: 4,
-        }}
-      >
-        <Return
-          style={{
-            cursor: 'pointer',
-            height: '24px',
-            width: 'auto',
-          }}
-          onClick={onBack}
-        />
-      </Box>
+    <AuthScreen
+      title={t('auth:import_account.title', {
+        postProcess: 'capitalizeFirstChar',
+      })}
+      subtitle={t('auth:import_account.subtitle', {
+        postProcess: 'capitalizeFirstChar',
+      })}
+      maxWidth={420}
+    >
+      {importView === 'choice' && (
+        <Box sx={{ display: 'flex', justifyContent: 'flex-start' }}>
+          <ButtonBase
+            onClick={onBack}
+            sx={{
+              color: 'rgba(214,221,233,0.62)',
+              minWidth: 0,
+              p: 0,
+              '&:hover': {
+                color: 'rgba(230,236,247,0.92)',
+              },
+            }}
+          >
+            <ArrowBackRoundedIcon sx={{ fontSize: 18 }} />
+          </ButtonBase>
+        </Box>
+      )}
+
       <Wallets
         setRawWallet={setRawWallet}
         setExtState={setExtState}
         rawWallet={rawWallet}
+        mode="import"
+        onImportViewChange={setImportView}
       />
-    </>
+    </AuthScreen>
   );
 }
diff --git a/src/components/App/dialogSurface.ts b/src/components/App/dialogSurface.ts
new file mode 100644
index 00000000..7a204605
--- /dev/null
+++ b/src/components/App/dialogSurface.ts
@@ -0,0 +1,119 @@
+import { alpha, type Theme } from '@mui/material/styles';
+
+/** Backdrop for modals that overlay the auth shell — default MUI backdrop is too light here. */
+export const dialogModalBackdropSx = {
+  backgroundColor: 'rgba(3, 5, 12, 0.94)',
+};
+
+export const getDialogPaperSx = (
+  theme: Theme,
+  options?: {
+    maxWidth?: number;
+    radius?: number;
+  }
+) => ({
+  backgroundColor: '#0C1118',
+  backgroundImage: 'linear-gradient(180deg, #121821 0%, #0C1118 100%)',
+  border: `1px solid ${alpha('#A9BCD8', 0.18)}`,
+  borderRadius: `${options?.radius ?? 18}px`,
+  boxShadow: '0 26px 56px rgba(0,0,0,0.44)',
+  color: theme.palette.text.primary,
+  maxWidth: options?.maxWidth,
+  overflow: 'hidden',
+  width: 'calc(100% - 40px)',
+});
+
+export const dialogTitleSx = {
+  borderBottom: '1px solid rgba(169,188,216,0.1)',
+  color: 'rgba(246,248,252,0.96)',
+  fontSize: '1.04rem',
+  fontWeight: 650,
+  lineHeight: 1.3,
+  px: 3,
+  py: 2,
+  textAlign: 'left',
+};
+
+export const dialogContentSx = {
+  px: 3,
+  pb: 2.65,
+  '&&': {
+    pt: 2.75,
+  },
+};
+
+export const dialogContentTextSx = {
+  color: 'rgba(214,221,233,0.78)',
+  fontSize: '0.92rem',
+  lineHeight: 1.6,
+  m: 0,
+  textAlign: 'left',
+};
+
+export const dialogActionsSx = {
+  borderTop: '1px solid rgba(169,188,216,0.1)',
+  gap: 1.2,
+  justifyContent: 'flex-end',
+  px: 3,
+  py: 1.8,
+};
+
+export const getDialogSecondaryButtonSx = (theme: Theme) => ({
+  backgroundColor: '#1A212C',
+  border: '1px solid rgba(169,188,216,0.16)',
+  borderRadius: '11px',
+  color: theme.palette.text.primary,
+  fontSize: '0.9rem',
+  fontWeight: 600,
+  minHeight: 42,
+  minWidth: 112,
+  px: 2.2,
+  textTransform: 'none',
+  '&:hover': {
+    backgroundColor: '#1D2633',
+    borderColor: 'rgba(169,188,216,0.24)',
+  },
+});
+
+export const getDialogPrimaryButtonSx = (theme: Theme) => ({
+  backgroundColor: theme.palette.primary.main,
+  borderRadius: '11px',
+  color: '#FFFFFF',
+  fontSize: '0.9rem',
+  fontWeight: 600,
+  minHeight: 42,
+  minWidth: 112,
+  px: 2.2,
+  textTransform: 'none',
+  '&:hover': {
+    backgroundColor: theme.palette.primary.main,
+    filter: 'brightness(1.05)',
+  },
+});
+
+export const getDialogDangerButtonSx = () => ({
+  backgroundColor: '#2A1B20',
+  border: '1px solid rgba(214, 112, 112, 0.18)',
+  borderRadius: '11px',
+  color: '#F2C1C1',
+  fontSize: '0.9rem',
+  fontWeight: 600,
+  minHeight: 42,
+  minWidth: 112,
+  px: 2.2,
+  textTransform: 'none',
+  '&:hover': {
+    backgroundColor: '#312026',
+    borderColor: 'rgba(214, 112, 112, 0.26)',
+  },
+});
+
+export const dialogInfoCardSx = {
+  backgroundColor: '#1A212C',
+  border: '1px solid rgba(169,188,216,0.13)',
+  borderRadius: '12px',
+  display: 'grid',
+  gap: 0.55,
+  px: 1.45,
+  py: 1.2,
+};
diff --git a/src/components/App/index.ts b/src/components/App/index.ts
index 9e2f7dc3..90b859bb 100644
--- a/src/components/App/index.ts
+++ b/src/components/App/index.ts
@@ -1,5 +1,6 @@
 export { AuthenticatedShell } from './AuthenticatedShell';
 export { SendQortOverlay } from './SendQortOverlay';
+export { ReceiveQortOverlay } from './ReceiveQortOverlay';
 export { SuccessOverlay } from './SuccessOverlay';
 export { SuccessScreen } from './SuccessScreen';
 export { WalletsView } from './WalletsView';
@@ -15,4 +16,6 @@ export { PaymentPublishDialog } from './PaymentPublishDialog';
 export { InfoDialog } from './InfoDialog';
 export { UnsavedChangesDialog } from './UnsavedChangesDialog';
 export { QortalRequestExtensionDialog } from './QortalRequestExtensionDialog';
+export { NotificationPermissionSlideDown } from './NotificationPermissionSlideDown';
+export { ElectronPersistentStorageHydration } from './ElectronPersistentStorageHydration';
 export type { MessageQortalRequestExtension } from './QortalRequestExtensionDialog';
diff --git a/src/components/Apps/AppBookmarks/AppBookmarksButton.tsx b/src/components/Apps/AppBookmarks/AppBookmarksButton.tsx
new file mode 100644
index 00000000..ea045848
--- /dev/null
+++ b/src/components/Apps/AppBookmarks/AppBookmarksButton.tsx
@@ -0,0 +1,1292 @@
+import { useEffect, useMemo, useState } from 'react';
+import type { MouseEvent } from 'react';
+import {
+  Box,
+  Button,
+  ButtonBase,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Divider,
+  IconButton,
+  Menu,
+  MenuItem,
+  Popover,
+  Select,
+  TextField,
+  Tooltip,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import ArrowBackIosNewRoundedIcon from '@mui/icons-material/ArrowBackIosNewRounded';
+import BookmarkAddOutlinedIcon from '@mui/icons-material/BookmarkAddOutlined';
+import BookmarkAddedIcon from '@mui/icons-material/BookmarkAdded';
+import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
+import CreateNewFolderOutlinedIcon from '@mui/icons-material/CreateNewFolderOutlined';
+import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
+import DriveFileMoveOutlinedIcon from '@mui/icons-material/DriveFileMoveOutlined';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import FolderOutlinedIcon from '@mui/icons-material/FolderOutlined';
+import MoreVertRoundedIcon from '@mui/icons-material/MoreVertRounded';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import ShortUniqueId from 'short-unique-id';
+import { atomWithStorage } from 'jotai/utils';
+import { useAtom } from 'jotai';
+import { useTranslation } from 'react-i18next';
+import { executeEvent } from '../../../utils/events';
+import type {
+  AppBookmark,
+  AppBookmarkFolder,
+  AppBookmarksForAddress,
+  BookmarkableAppTab,
+} from './bookmarkTypes';
+import {
+  buildBookmarkLink,
+  findBookmarkForCandidate,
+  getBookmarkCandidateFromTab,
+  loadBookmarksForAddress,
+  parseBookmarkLink,
+  removeBookmark,
+  removeFolder,
+  saveBookmarksForAddress,
+  upsertBookmark,
+  upsertFolder,
+} from './bookmarkStorage';
+
+const uid = new ShortUniqueId({ length: 10 });
+const BOOKMARK_VIEW_STORAGE_KEY = 'qortal_app_bookmark_view_by_address';
+const bookmarkViewByAddressAtom = atomWithStorage<Record<string, string | null>>(
+  BOOKMARK_VIEW_STORAGE_KEY,
+  {}
+);
+
+type AppBookmarksButtonProps = {
+  address?: string | null;
+  buttonSx?: object;
+  chromeBackground?: string;
+  selectedTab: BookmarkableAppTab | null;
+  tooltipSlotProps?: any;
+  tooltipTitle?: (text: string) => React.ReactNode;
+};
+
+type BookmarkFormState = {
+  id?: string;
+  name: string;
+  link: string;
+  folderId: string | null;
+  createdAt?: number;
+};
+
+const emptyData: AppBookmarksForAddress = {
+  folders: [],
+  bookmarks: [],
+  updatedAt: Date.now(),
+};
+
+function increaseBackgroundOpacity(color: string): string {
+  return color.replace(
+    /rgba\(([^,]+),([^,]+),([^,]+),\s*([^)]+)\)/,
+    (_match, red, green, blue) => `rgba(${red},${green},${blue}, 0.99)`
+  );
+}
+
+export function AppBookmarksButton({
+  address,
+  buttonSx,
+  chromeBackground,
+  selectedTab,
+  tooltipSlotProps,
+  tooltipTitle,
+}: AppBookmarksButtonProps) {
+  const theme = useTheme();
+  const { t } = useTranslation(['core']);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [data, setData] = useState<AppBookmarksForAddress>(emptyData);
+  const [hasLoaded, setHasLoaded] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [form, setForm] = useState<BookmarkFormState | null>(null);
+  const [folderName, setFolderName] = useState('');
+  const [showCreateFolder, setShowCreateFolder] = useState(false);
+  const [renamingFolder, setRenamingFolder] =
+    useState<AppBookmarkFolder | null>(null);
+  const [deleteFolderTarget, setDeleteFolderTarget] =
+    useState<AppBookmarkFolder | null>(null);
+  const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement | null>(null);
+  const [menuAnchorPosition, setMenuAnchorPosition] = useState<{
+    left: number;
+    top: number;
+  } | null>(null);
+  const [moveMenuAnchorEl, setMoveMenuAnchorEl] =
+    useState<HTMLElement | null>(null);
+  const [menuTarget, setMenuTarget] = useState<
+    | { type: 'bookmark'; bookmark: AppBookmark }
+    | { type: 'folder'; folder: AppBookmarkFolder }
+    | null
+  >(null);
+  const [viewByAddress, setViewByAddress] = useAtom(bookmarkViewByAddressAtom);
+
+  const currentFolderId = address ? viewByAddress[address] || null : null;
+
+  const candidate = useMemo(
+    () => getBookmarkCandidateFromTab(selectedTab),
+    [selectedTab]
+  );
+  const existingBookmark = useMemo(
+    () => findBookmarkForCandidate(data.bookmarks, candidate),
+    [candidate, data.bookmarks]
+  );
+  const isBookmarked = !!existingBookmark;
+  const isOpen = Boolean(anchorEl);
+  const isDark = theme.palette.mode === 'dark';
+  const currentFolder =
+    data.folders.find((folder) => folder.id === currentFolderId) || null;
+  const bookmarkChromeBackground =
+    increaseBackgroundOpacity(
+      chromeBackground || (isDark ? 'rgb(33, 36, 42)' : 'rgb(223, 228, 235)')
+    );
+  const bookmarkFieldBackground =
+    isDark
+      ? 'rgba(28, 31, 37, 0.98)'
+      : 'rgba(232, 236, 241, 0.96)';
+  const bookmarkHoverBackground =
+    isDark
+      ? 'rgba(255, 255, 255, 0.07)'
+      : 'rgba(0, 0, 0, 0.06)';
+  const bookmarkInsetBackground =
+    isDark
+      ? 'rgba(28, 31, 37, 0.82)'
+      : 'rgba(232, 236, 241, 0.88)';
+  const panelBorderColor = isDark
+    ? alpha('#A9BCD8', 0.18)
+    : theme.palette.divider;
+  const bookmarkMenuPaperSx = {
+    backgroundColor: bookmarkChromeBackground,
+    backgroundImage: 'none',
+    border: `1px solid ${theme.palette.border.subtle}`,
+    borderRadius: '8px',
+    color: theme.palette.text.primary,
+    boxShadow:
+      theme.palette.mode === 'dark'
+        ? '0 16px 34px rgba(0,0,0,0.44)'
+        : '0 16px 34px rgba(28,38,52,0.16)',
+    minWidth: 174,
+    p: 0.5,
+    '.MuiList-root': {
+      p: 0,
+    },
+  } as const;
+  const bookmarkMenuItemSx = {
+    borderRadius: '7px',
+    color: theme.palette.text.primary,
+    fontSize: 13,
+    fontWeight: 500,
+    gap: 1,
+    minHeight: 36,
+    px: 1.15,
+    py: 0.75,
+    '& .MuiSvgIcon-root': {
+      color: theme.palette.text.secondary,
+      flexShrink: 0,
+      fontSize: 18,
+      mr: 0,
+    },
+    '&:hover, &.Mui-focusVisible, &.Mui-selected, &.Mui-selected:hover': {
+      backgroundColor: bookmarkHoverBackground,
+    },
+  } as const;
+  const bookmarkMenuDangerItemSx = {
+    ...bookmarkMenuItemSx,
+    color: isDark ? '#F2C1C1' : theme.palette.error.main,
+    '& .MuiSvgIcon-root': {
+      color: isDark ? '#F2C1C1' : theme.palette.error.main,
+      flexShrink: 0,
+      fontSize: 18,
+      mr: 0,
+    },
+  } as const;
+  const bookmarkTextFieldSx = {
+    '.MuiInputBase-root': {
+      backgroundColor: bookmarkFieldBackground,
+      borderRadius: '8px',
+      fontSize: 13,
+    },
+    '.MuiOutlinedInput-notchedOutline': {
+      borderColor: theme.palette.border.subtle,
+    },
+    '&:hover .MuiOutlinedInput-notchedOutline': {
+      borderColor: theme.palette.border.main,
+    },
+    '& .Mui-focused .MuiOutlinedInput-notchedOutline': {
+      borderColor:
+        theme.palette.mode === 'dark'
+          ? 'rgba(130, 185, 255, 0.42)'
+          : 'rgba(41, 121, 218, 0.32)',
+    },
+  } as const;
+  const bookmarkFieldLabelSx = {
+    color: theme.palette.text.secondary,
+    fontSize: 11,
+    fontWeight: 700,
+    letterSpacing: '0.04em',
+    lineHeight: 1,
+    textTransform: 'uppercase',
+  } as const;
+
+  useEffect(() => {
+    if (!address || !currentFolderId || !hasLoaded) return;
+    const stillExists = data.folders.some((folder) => folder.id === currentFolderId);
+    if (!stillExists) {
+      setViewByAddress((prev) => ({ ...prev, [address]: null }));
+    }
+  }, [address, currentFolderId, data.folders, hasLoaded, setViewByAddress]);
+
+  const setCurrentFolderId = (folderId: string | null) => {
+    if (!address) return;
+    setViewByAddress((prev) => ({ ...prev, [address]: folderId }));
+    setForm(null);
+    setShowCreateFolder(false);
+    setRenamingFolder(null);
+  };
+
+  const persist = async (nextData: AppBookmarksForAddress) => {
+    if (!address) {
+      setData(nextData);
+      return;
+    }
+    const saved = await saveBookmarksForAddress(address, nextData);
+    setData(saved);
+  };
+
+  const openPopover = async (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+    if (!address) return;
+
+    setIsLoading(true);
+    try {
+      const loaded = await loadBookmarksForAddress(address);
+      setData(loaded);
+      setHasLoaded(true);
+      const nextExisting = findBookmarkForCandidate(
+        loaded.bookmarks,
+        candidate
+      );
+      if (candidate && !nextExisting) {
+        setForm({
+          name: '',
+          link: candidate.link,
+          folderId: null,
+        });
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const closePopover = () => {
+    setAnchorEl(null);
+    setForm(null);
+    setFolderName('');
+    setShowCreateFolder(false);
+    setRenamingFolder(null);
+    setMenuAnchorEl(null);
+    setMenuAnchorPosition(null);
+    setMoveMenuAnchorEl(null);
+    setMenuTarget(null);
+  };
+
+  const openBookmark = (bookmark: AppBookmark) => {
+    executeEvent('addTab', {
+      data: {
+        service: bookmark.service,
+        name: bookmark.appName,
+        identifier: bookmark.identifier,
+        path: bookmark.path
+      },
+    });
+    executeEvent('open-apps-mode', {});
+    closePopover();
+  };
+
+  const startAddCurrent = () => {
+    if (!candidate) return;
+    setForm({
+      name: '',
+      link: candidate.link,
+      folderId: currentFolderId,
+    });
+  };
+
+  const startEdit = (bookmark: AppBookmark) => {
+    setForm({
+      id: bookmark.id,
+      name: bookmark.name,
+      link: bookmark.link || buildBookmarkLink(bookmark),
+      folderId: bookmark.folderId,
+      createdAt: bookmark.createdAt,
+    });
+  };
+
+  const saveBookmark = async () => {
+    if (!form) return;
+
+    const parsed = parseBookmarkLink(form.link);
+    if (!form.name.trim() || !parsed) return;
+
+    const now = Date.now();
+    const bookmark: AppBookmark = {
+      id: form.id || uid.rnd(),
+      name: form.name.trim(),
+      service: parsed.service,
+      appName: parsed.appName,
+      identifier: parsed.identifier,
+      path: parsed.path,
+      link: buildBookmarkLink(parsed),
+      folderId: form.folderId,
+      createdAt: form.createdAt || now,
+      updatedAt: now,
+    };
+
+    await persist(upsertBookmark(data, bookmark));
+    setForm(null);
+  };
+
+  const removeBookmarkById = async (bookmarkId: string) => {
+    await persist(removeBookmark(data, bookmarkId));
+    if (form?.id === bookmarkId) setForm(null);
+  };
+
+  const saveFolder = async () => {
+    const trimmed = folderName.trim();
+    if (!trimmed) return;
+
+    const now = Date.now();
+    await persist(
+      upsertFolder(data, {
+        id: uid.rnd(),
+        name: trimmed,
+        createdAt: now,
+        updatedAt: now,
+      })
+    );
+    setFolderName('');
+    setShowCreateFolder(false);
+  };
+
+  const saveFolderRename = async () => {
+    if (!renamingFolder) return;
+    const trimmed = renamingFolder.name.trim();
+    if (!trimmed) return;
+
+    await persist(
+      upsertFolder(data, {
+        ...renamingFolder,
+        name: trimmed,
+        updatedAt: Date.now(),
+      })
+    );
+    setRenamingFolder(null);
+  };
+
+  const moveBookmark = async (bookmark: AppBookmark, folderId: string) => {
+    await persist(
+      upsertBookmark(data, {
+        ...bookmark,
+        folderId: folderId || null,
+        updatedAt: Date.now(),
+      })
+    );
+  };
+
+  const confirmDeleteFolder = async () => {
+    if (!deleteFolderTarget) return;
+    await persist(removeFolder(data, deleteFolderTarget.id));
+    if (currentFolderId === deleteFolderTarget.id) {
+      setCurrentFolderId(null);
+    }
+    setDeleteFolderTarget(null);
+  };
+
+  const deleteFolder = async (folder: AppBookmarkFolder) => {
+    const hasBookmarks = data.bookmarks.some(
+      (bookmark) => bookmark.folderId === folder.id
+    );
+    if (hasBookmarks) {
+      setDeleteFolderTarget(folder);
+      return;
+    }
+    await persist(removeFolder(data, folder.id));
+    if (currentFolderId === folder.id) {
+      setCurrentFolderId(null);
+    }
+  };
+
+  const openItemMenu = (
+    event: MouseEvent<HTMLElement>,
+    target:
+      | { type: 'bookmark'; bookmark: AppBookmark }
+      | { type: 'folder'; folder: AppBookmarkFolder }
+  ) => {
+    event.stopPropagation();
+    setMenuAnchorPosition(null);
+    setMenuAnchorEl(event.currentTarget);
+    setMenuTarget(target);
+  };
+
+  const openItemContextMenu = (
+    event: MouseEvent<HTMLElement>,
+    target:
+      | { type: 'bookmark'; bookmark: AppBookmark }
+      | { type: 'folder'; folder: AppBookmarkFolder }
+  ) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setMoveMenuAnchorEl(null);
+    setMenuAnchorEl(null);
+    setMenuAnchorPosition({ left: event.clientX + 2, top: event.clientY - 6 });
+    setMenuTarget(target);
+  };
+
+  const closeItemMenu = () => {
+    setMenuAnchorEl(null);
+    setMenuAnchorPosition(null);
+    setMenuTarget(null);
+  };
+
+  const closeMoveMenu = () => {
+    setMoveMenuAnchorEl(null);
+    setMenuTarget(null);
+  };
+
+  const renderBookmarkRow = (bookmark: AppBookmark) => (
+    <ButtonBase
+      key={bookmark.id}
+      onClick={() => openBookmark(bookmark)}
+      onContextMenu={(event) =>
+        openItemContextMenu(event, { type: 'bookmark', bookmark })
+      }
+      sx={{
+        alignItems: 'center',
+        borderRadius: '8px',
+        display: 'flex',
+        gap: 1,
+        justifyContent: 'flex-start',
+        minHeight: 42,
+        px: 1,
+        py: 0.5,
+        textAlign: 'left',
+        width: '100%',
+        '&:hover': {
+          backgroundColor: bookmarkHoverBackground,
+        },
+      }}
+    >
+      <BookmarkBorderIcon
+        sx={{
+          color: theme.palette.text.secondary,
+          flexShrink: 0,
+          fontSize: 18,
+        }}
+      />
+      <Box sx={{ flex: 1, minWidth: 0 }}>
+        <Typography
+          sx={{
+            fontSize: 13,
+            fontWeight: 600,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {bookmark.name}
+        </Typography>
+        <Typography
+          sx={{
+            color: theme.palette.text.secondary,
+            fontSize: 11.5,
+            lineHeight: 1.45,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {bookmark.link}
+        </Typography>
+      </Box>
+      <Tooltip title={t('core:bookmarks.more')}>
+        <IconButton
+          size="small"
+          onClick={(event) =>
+            openItemMenu(event, { type: 'bookmark', bookmark })
+          }
+          sx={{ flexShrink: 0 }}
+        >
+          <MoreVertRoundedIcon sx={{ fontSize: 18 }} />
+        </IconButton>
+      </Tooltip>
+    </ButtonBase>
+  );
+
+  const visibleBookmarks = data.bookmarks.filter(
+    (bookmark) => (bookmark.folderId || null) === currentFolderId
+  );
+  const moveOptions =
+    menuTarget?.type === 'bookmark'
+      ? [
+          ...(menuTarget.bookmark.folderId
+            ? [{ id: '', name: t('core:bookmarks.top_level') }]
+            : []),
+          ...data.folders
+            .filter((folder) => folder.id !== menuTarget.bookmark.folderId)
+            .map((folder) => ({ id: folder.id, name: folder.name })),
+        ]
+      : [];
+  const buttonTitle = isBookmarked
+    ? t('core:bookmarks.bookmarked')
+    : t('core:bookmarks.title');
+
+  return (
+    <>
+      <Tooltip
+        arrow
+        placement="bottom"
+        slotProps={tooltipSlotProps}
+        title={tooltipTitle ? tooltipTitle(buttonTitle) : buttonTitle}
+      >
+        <span>
+          <ButtonBase
+            disableRipple
+            onClick={openPopover}
+            disabled={!address}
+            sx={{
+              ...buttonSx,
+              color: isBookmarked
+                ? theme.palette.primary.main
+                : theme.palette.text.primary,
+              opacity: address ? 1 : 0.32,
+            }}
+          >
+            {isBookmarked ? (
+              <BookmarkAddedIcon sx={{ fontSize: 18 }} />
+            ) : (
+              <BookmarkAddOutlinedIcon sx={{ fontSize: 18 }} />
+            )}
+          </ButtonBase>
+        </span>
+      </Tooltip>
+
+      <Popover
+        open={isOpen}
+        anchorEl={anchorEl}
+        onClose={closePopover}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+        slotProps={{
+          paper: {
+            sx: isDark
+              ? {
+                  background: '#111820',
+                  backgroundImage: 'none',
+                  border: `1px solid ${panelBorderColor}`,
+                  borderRadius: '16px',
+                  boxShadow: `0 22px 46px ${alpha('#000', 0.44)}`,
+                  mt: 1,
+                  overflow: 'hidden',
+                  width: 460,
+                }
+              : {
+                  background: theme.palette.background.paper,
+                  backgroundImage: 'none',
+                  border: `1px solid ${theme.palette.divider}`,
+                  borderRadius: '16px',
+                  boxShadow: `0 16px 40px ${alpha('#1E3248', 0.1)}`,
+                  mt: 1,
+                  overflow: 'hidden',
+                  width: 460,
+                },
+          },
+        }}
+      >
+        <Box sx={{ overflowX: 'hidden', p: 2 }}>
+          <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>
+            {currentFolder && (
+              <IconButton size="small" onClick={() => setCurrentFolderId(null)}>
+                <ArrowBackIosNewRoundedIcon sx={{ fontSize: 15 }} />
+              </IconButton>
+            )}
+            <Box sx={{ flex: 1, minWidth: 0 }}>
+              <Typography sx={{ fontSize: 16, fontWeight: 700 }}>
+                {currentFolder?.name || t('core:bookmarks.title')}
+              </Typography>
+              {currentFolder && (
+                <Typography
+                  sx={{
+                    color: theme.palette.text.secondary,
+                    fontSize: 11.5,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {t('core:bookmarks.folder')}
+                </Typography>
+              )}
+            </Box>
+            {!currentFolder && (
+              <Tooltip title={t('core:bookmarks.create_folder')}>
+                <IconButton
+                  size="small"
+                  onClick={() => {
+                    setShowCreateFolder((prev) => !prev);
+                    setForm(null);
+                  }}
+                >
+                  <CreateNewFolderOutlinedIcon sx={{ fontSize: 19 }} />
+                </IconButton>
+              </Tooltip>
+            )}
+            {candidate && (
+              <Button
+                disabled={!!form}
+                size="small"
+                startIcon={
+                  isBookmarked ? <BookmarkAddedIcon /> : <BookmarkAddOutlinedIcon />
+                }
+                onClick={() =>
+                  existingBookmark ? startEdit(existingBookmark) : startAddCurrent()
+                }
+                sx={{ borderRadius: '8px', textTransform: 'none' }}
+                variant={isBookmarked ? 'outlined' : 'contained'}
+              >
+                {isBookmarked
+                  ? t('core:bookmarks.bookmarked')
+                  : t('core:bookmarks.add_page')}
+              </Button>
+            )}
+          </Box>
+
+          {isLoading && (
+            <Box
+              sx={{
+                alignItems: 'center',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 1,
+                justifyContent: 'center',
+                minHeight: 150,
+              }}
+            >
+              <CircularProgress size={22} />
+              <Typography
+                sx={{
+                  color: alpha(theme.palette.text.secondary, 0.82),
+                  fontSize: '0.78rem',
+                }}
+              >
+                {t('core:bookmarks.loading')}
+              </Typography>
+            </Box>
+          )}
+
+          {!isLoading && showCreateFolder && !currentFolder && (
+            <Box
+              sx={{
+                alignItems: 'flex-end',
+                display: 'flex',
+                gap: 1,
+                mt: 2,
+              }}
+            >
+              <Box
+                sx={{
+                  display: 'flex',
+                  flex: 1,
+                  flexDirection: 'column',
+                  gap: 0.75,
+                  minWidth: 0,
+                }}
+              >
+                <Typography sx={bookmarkFieldLabelSx}>
+                  {t('core:bookmarks.folder_name')}
+                </Typography>
+                <TextField
+                  autoFocus
+                  fullWidth
+                  placeholder={t('core:bookmarks.new_folder')}
+                  size="small"
+                  sx={bookmarkTextFieldSx}
+                  value={folderName}
+                  onKeyDown={(event) => {
+                    if (event.key === 'Enter') {
+                      event.preventDefault();
+                      saveFolder();
+                    }
+                  }}
+                  onChange={(e) => setFolderName(e.target.value)}
+                />
+              </Box>
+              <Tooltip
+                title={t('core:action.cancel', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+              >
+                <IconButton
+                  onClick={() => {
+                    setShowCreateFolder(false);
+                    setFolderName('');
+                  }}
+                  size="small"
+                  sx={{
+                    border: `1px solid ${theme.palette.border.subtle}`,
+                    borderRadius: '8px',
+                    height: 40,
+                    width: 40,
+                  }}
+                >
+                  <CloseRoundedIcon sx={{ fontSize: 18 }} />
+                </IconButton>
+              </Tooltip>
+              <Button
+                onClick={saveFolder}
+                sx={{
+                  borderRadius: '8px',
+                  height: 40,
+                  textTransform: 'none',
+                }}
+                variant="outlined"
+              >
+                {t('core:bookmarks.create')}
+              </Button>
+            </Box>
+          )}
+
+          {!isLoading && form && (
+            <Box
+              sx={{
+                backgroundColor: bookmarkInsetBackground,
+                border: `1px solid ${theme.palette.border.subtle}`,
+                borderRadius: '8px',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 1.5,
+                mt: 2,
+                p: 1.75,
+              }}
+            >
+              <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>
+                <BookmarkBorderIcon
+                  sx={{ color: theme.palette.text.secondary, fontSize: 18 }}
+                />
+                <Box sx={{ minWidth: 0 }}>
+                  <Typography sx={{ fontSize: 13.5, fontWeight: 700 }}>
+                    {form.id
+                      ? t('core:bookmarks.edit_bookmark')
+                      : t('core:bookmarks.add_bookmark')}
+                  </Typography>
+                  <Typography
+                    sx={{
+                      color: theme.palette.text.secondary,
+                      fontSize: 11.5,
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    {t('core:bookmarks.save_location_without_query')}
+                  </Typography>
+                </Box>
+              </Box>
+
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
+                <Typography sx={bookmarkFieldLabelSx}>
+                  {t('core:bookmarks.name')}
+                </Typography>
+                <TextField
+                  fullWidth
+                  placeholder={t('core:bookmarks.bookmark_name_placeholder')}
+                  size="small"
+                  sx={bookmarkTextFieldSx}
+                  value={form.name}
+                  onChange={(e) => setForm({ ...form, name: e.target.value })}
+                />
+              </Box>
+
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
+                <Typography sx={bookmarkFieldLabelSx}>
+                  {t('core:bookmarks.qortal_link')}
+                </Typography>
+                <TextField
+                  fullWidth
+                  placeholder={t('core:bookmarks.qortal_link_placeholder')}
+                  size="small"
+                  sx={bookmarkTextFieldSx}
+                  value={form.link}
+                  onChange={(e) => setForm({ ...form, link: e.target.value })}
+                />
+              </Box>
+
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
+                <Typography sx={bookmarkFieldLabelSx}>
+                  {t('core:bookmarks.folder')}
+                </Typography>
+                <Select
+                  displayEmpty
+                  fullWidth
+                  size="small"
+                  sx={{
+                    backgroundColor: bookmarkFieldBackground,
+                    borderRadius: '8px',
+                    fontSize: 13,
+                    '.MuiSelect-select': {
+                      alignItems: 'center',
+                      color: theme.palette.text.primary,
+                      display: 'flex',
+                      minHeight: '1.4375em',
+                      py: '9px',
+                    },
+                    '.MuiOutlinedInput-notchedOutline': {
+                      borderColor: theme.palette.border.subtle,
+                    },
+                    '&:hover .MuiOutlinedInput-notchedOutline': {
+                      borderColor: theme.palette.border.main,
+                    },
+                    '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                      borderColor:
+                        theme.palette.mode === 'dark'
+                          ? 'rgba(130, 185, 255, 0.42)'
+                          : 'rgba(41, 121, 218, 0.32)',
+                    },
+                  }}
+                  value={form.folderId || ''}
+                  renderValue={() => {
+                    const selectedFolder = form.folderId
+                      ? data.folders.find((folder) => folder.id === form.folderId)
+                      : null;
+                    return (
+                      <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>
+                        <FolderOutlinedIcon
+                          sx={{
+                            color: theme.palette.text.secondary,
+                            fontSize: 17,
+                          }}
+                        />
+                        <Typography sx={{ fontSize: 13, fontWeight: 500 }}>
+                          {selectedFolder?.name || t('core:bookmarks.top_level')}
+                        </Typography>
+                      </Box>
+                    );
+                  }}
+                  onChange={(e) =>
+                    setForm({ ...form, folderId: e.target.value || null })
+                  }
+                >
+                  <MenuItem value="">{t('core:bookmarks.top_level')}</MenuItem>
+                  {data.folders.map((folder) => (
+                    <MenuItem key={folder.id} value={folder.id}>
+                      {folder.name}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </Box>
+
+              <Divider sx={{ borderColor: theme.palette.border.subtle }} />
+
+              <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
+                {form.id && (
+                  <Button
+                    color="error"
+                    startIcon={<DeleteOutlineIcon />}
+                    onClick={() => removeBookmarkById(form.id!)}
+                    size="small"
+                    sx={{
+                      borderRadius: '8px',
+                      mr: 'auto',
+                      textTransform: 'none',
+                    }}
+                    variant="outlined"
+                  >
+                    {t('core:bookmarks.remove')}
+                  </Button>
+                )}
+                <Button
+                  onClick={() => setForm(null)}
+                  size="small"
+                  sx={{
+                    borderRadius: '8px',
+                    color: theme.palette.text.secondary,
+                    textTransform: 'none',
+                  }}
+                >
+                  {t('core:action.cancel', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </Button>
+                <Button
+                  onClick={saveBookmark}
+                  size="small"
+                  sx={{
+                    borderRadius: '8px',
+                    minWidth: 72,
+                    textTransform: 'none',
+                  }}
+                  variant="contained"
+                >
+                  {t('core:action.save', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </Button>
+              </Box>
+            </Box>
+          )}
+
+          {!isLoading && hasLoaded && (
+            <>
+              <Divider sx={{ my: 1.5 }} />
+
+              <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+                {!currentFolder &&
+                  data.folders.map((folder) => {
+                    const count = data.bookmarks.filter(
+                      (bookmark) => bookmark.folderId === folder.id
+                    ).length;
+                    return (
+                      <ButtonBase
+                        key={folder.id}
+                        onClick={() => setCurrentFolderId(folder.id)}
+                        onContextMenu={(event) =>
+                          openItemContextMenu(event, { type: 'folder', folder })
+                        }
+                        sx={{
+                          alignItems: 'center',
+                          borderRadius: '8px',
+                          display: 'flex',
+                          gap: 1,
+                          justifyContent: 'flex-start',
+                          minHeight: 42,
+                          px: 1,
+                          py: 0.5,
+                          textAlign: 'left',
+                          width: '100%',
+                          '&:hover': {
+                            backgroundColor: bookmarkHoverBackground,
+                          },
+                        }}
+                      >
+                        <FolderOutlinedIcon
+                          sx={{
+                            color: theme.palette.text.secondary,
+                            flexShrink: 0,
+                            fontSize: 19,
+                          }}
+                        />
+                        {renamingFolder?.id === folder.id ? (
+                          <TextField
+                            autoFocus
+                            fullWidth
+                            onClick={(event) => event.stopPropagation()}
+                            onKeyDown={(event) => {
+                              if (event.key === 'Enter') saveFolderRename();
+                            }}
+                            size="small"
+                            sx={bookmarkTextFieldSx}
+                            value={renamingFolder.name}
+                            onChange={(e) =>
+                              setRenamingFolder({
+                                ...renamingFolder,
+                                name: e.target.value,
+                              })
+                            }
+                          />
+                        ) : (
+                          <Box sx={{ flex: 1, minWidth: 0 }}>
+                            <Typography
+                              sx={{
+                                fontSize: 13,
+                                fontWeight: 700,
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                              }}
+                            >
+                              {folder.name}
+                            </Typography>
+                            <Typography
+                              sx={{
+                                color: theme.palette.text.secondary,
+                                fontSize: 11.5,
+                              }}
+                            >
+                              {t('core:bookmarks.bookmark_count', { count })}
+                            </Typography>
+                          </Box>
+                        )}
+                        {renamingFolder?.id === folder.id ? (
+                          <Button
+                            onClick={(event) => {
+                              event.stopPropagation();
+                              saveFolderRename();
+                            }}
+                            size="small"
+                            sx={{ textTransform: 'none' }}
+                          >
+                            {t('core:action.save', {
+                              postProcess: 'capitalizeFirstChar',
+                            })}
+                          </Button>
+                        ) : (
+                          <IconButton
+                            size="small"
+                            onClick={(event) =>
+                              openItemMenu(event, { type: 'folder', folder })
+                            }
+                            sx={{ flexShrink: 0 }}
+                          >
+                            <MoreVertRoundedIcon sx={{ fontSize: 18 }} />
+                          </IconButton>
+                        )}
+                      </ButtonBase>
+                    );
+                  })}
+
+                {visibleBookmarks.map(renderBookmarkRow)}
+
+                {visibleBookmarks.length === 0 &&
+                  (currentFolder || data.folders.length === 0) && (
+                  <Typography
+                    sx={{
+                      color: theme.palette.text.secondary,
+                      fontSize: 13,
+                      py: 3,
+                      textAlign: 'center',
+                    }}
+                  >
+                    {currentFolder
+                      ? t('core:bookmarks.no_bookmarks_folder')
+                      : t('core:bookmarks.no_bookmarks')}
+                  </Typography>
+                )}
+              </Box>
+            </>
+          )}
+        </Box>
+      </Popover>
+
+      <Menu
+        anchorEl={menuAnchorEl}
+        anchorPosition={menuAnchorPosition || undefined}
+        anchorReference={menuAnchorPosition ? 'anchorPosition' : 'anchorEl'}
+        open={Boolean(menuAnchorEl) || Boolean(menuAnchorPosition)}
+        onClose={closeItemMenu}
+        slotProps={{
+          paper: {
+            sx: bookmarkMenuPaperSx,
+          },
+        }}
+      >
+        {menuTarget?.type === 'bookmark' && [
+          <MenuItem
+            key="edit"
+            sx={bookmarkMenuItemSx}
+            onClick={() => {
+              startEdit(menuTarget.bookmark);
+              closeItemMenu();
+            }}
+          >
+            <EditOutlinedIcon />
+            {t('core:bookmarks.edit')}
+          </MenuItem>,
+          ...(moveOptions.length > 0
+            ? [
+                <MenuItem
+                  key="move"
+                  sx={bookmarkMenuItemSx}
+                  onClick={(event) => {
+                    setMoveMenuAnchorEl(event.currentTarget);
+                    setMenuAnchorEl(null);
+                  }}
+                >
+                  <DriveFileMoveOutlinedIcon />
+                  {t('core:bookmarks.move')}
+                </MenuItem>,
+              ]
+            : []),
+          <MenuItem
+            key="delete"
+            sx={bookmarkMenuDangerItemSx}
+            onClick={() => {
+              removeBookmarkById(menuTarget.bookmark.id);
+              closeItemMenu();
+            }}
+          >
+            <DeleteOutlineIcon />
+            {t('core:bookmarks.delete')}
+          </MenuItem>,
+        ]}
+        {menuTarget?.type === 'folder' && [
+          <MenuItem
+            key="rename"
+            sx={bookmarkMenuItemSx}
+            onClick={() => {
+              setRenamingFolder(menuTarget.folder);
+              closeItemMenu();
+            }}
+          >
+            <EditOutlinedIcon />
+            {t('core:bookmarks.rename')}
+          </MenuItem>,
+          <MenuItem
+            key="delete"
+            sx={bookmarkMenuDangerItemSx}
+            onClick={() => {
+              deleteFolder(menuTarget.folder);
+              closeItemMenu();
+            }}
+          >
+            <DeleteOutlineIcon />
+            {t('core:bookmarks.delete')}
+          </MenuItem>,
+        ]}
+      </Menu>
+
+      <Menu
+        anchorEl={moveMenuAnchorEl}
+        open={Boolean(moveMenuAnchorEl)}
+        onClose={closeMoveMenu}
+        slotProps={{
+          paper: {
+            sx: bookmarkMenuPaperSx,
+          },
+        }}
+      >
+        {menuTarget?.type === 'bookmark' &&
+          moveOptions.map((option) => (
+            <MenuItem
+              key={option.id || 'root'}
+              sx={bookmarkMenuItemSx}
+              onClick={() => {
+                moveBookmark(menuTarget.bookmark, option.id);
+                closeMoveMenu();
+              }}
+            >
+              {option.name}
+            </MenuItem>
+          ))}
+      </Menu>
+
+      <Dialog
+        open={!!deleteFolderTarget}
+        onClose={() => setDeleteFolderTarget(null)}
+        aria-labelledby="delete-bookmark-folder-title"
+        aria-describedby="delete-bookmark-folder-description"
+        PaperProps={{
+          sx: isDark
+            ? {
+                bgcolor: '#111820',
+                backgroundImage: 'none',
+                border: `1px solid ${alpha('#A9BCD8', 0.18)}`,
+                borderRadius: '18px',
+                boxShadow: `0 24px 58px ${alpha('#000', 0.42)}`,
+                maxWidth: 360,
+                width: 'calc(100% - 40px)',
+              }
+            : {
+                bgcolor: theme.palette.background.paper,
+                backgroundImage: 'none',
+                border: `1px solid ${theme.palette.border.subtle}`,
+                borderRadius: '18px',
+                boxShadow: `0 22px 48px ${alpha('#000', 0.09)}, 0 0 0 1px ${alpha(theme.palette.divider, 0.45)}`,
+                color: theme.palette.text.primary,
+                maxWidth: 360,
+                width: 'calc(100% - 40px)',
+              },
+        }}
+      >
+        <DialogTitle
+          id="delete-bookmark-folder-title"
+          sx={{
+            color: theme.palette.text.primary,
+            fontSize: '1.08rem',
+            fontWeight: 650,
+            pb: 0.8,
+            pt: 2.3,
+            textAlign: 'center',
+          }}
+        >
+          {t('core:bookmarks.delete_folder_title')}
+        </DialogTitle>
+        <DialogContent>
+          <DialogContentText
+            id="delete-bookmark-folder-description"
+            sx={{
+              color: isDark
+                ? alpha(theme.palette.text.secondary, 0.9)
+                : theme.palette.text.secondary,
+              fontSize: '0.88rem',
+              lineHeight: 1.48,
+              textAlign: 'center',
+            }}
+          >
+            {t('core:bookmarks.delete_folder_message')}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions
+          sx={{ gap: 1, justifyContent: 'center', px: 2.3, pb: 2.3 }}
+        >
+          <Button
+            onClick={() => setDeleteFolderTarget(null)}
+            sx={
+              isDark
+                ? {
+                    border: `1px solid ${alpha('#A9BCD8', 0.16)}`,
+                    borderRadius: '10px',
+                    color: theme.palette.text.secondary,
+                    fontWeight: 600,
+                    minWidth: 116,
+                    textTransform: 'none',
+                    '&:hover': {
+                      bgcolor: alpha('#FFFFFF', 0.045),
+                    },
+                  }
+                : {
+                    border: `1px solid ${theme.palette.border.main}`,
+                    borderRadius: '10px',
+                    color: theme.palette.text.primary,
+                    fontWeight: 600,
+                    minWidth: 116,
+                    textTransform: 'none',
+                    '&:hover': {
+                      bgcolor: theme.palette.action.hover,
+                      borderColor: theme.palette.border.main,
+                    },
+                  }
+            }
+          >
+            {t('core:action.cancel', {
+              postProcess: 'capitalizeFirstChar',
+            })}
+          </Button>
+          <Button
+            onClick={confirmDeleteFolder}
+            variant="contained"
+            sx={{
+              bgcolor: theme.palette.error.main,
+              borderRadius: '10px',
+              color: theme.palette.error.contrastText,
+              fontWeight: 600,
+              minWidth: 116,
+              textTransform: 'none',
+              '&:hover': {
+                bgcolor: theme.palette.error.dark,
+              },
+            }}
+          >
+            {t('core:bookmarks.delete')}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
diff --git a/src/components/Apps/AppBookmarks/bookmarkStorage.ts b/src/components/Apps/AppBookmarks/bookmarkStorage.ts
new file mode 100644
index 00000000..ebe64131
--- /dev/null
+++ b/src/components/Apps/AppBookmarks/bookmarkStorage.ts
@@ -0,0 +1,229 @@
+import { QORTAL_PROTOCOL } from '../../../constants/constants';
+import { extractComponents } from '../../Chat/MessageDisplay';
+import type {
+  AppBookmark,
+  AppBookmarkFolder,
+  AppBookmarksByAddress,
+  AppBookmarksForAddress,
+  BookmarkableAppTab,
+} from './bookmarkTypes';
+
+export const APP_BOOKMARKS_STORAGE_KEY = 'qortal_app_bookmarks_by_address';
+
+const INTERNAL_TAB_SERVICE = 'INTERNAL';
+
+const emptyBookmarks = (): AppBookmarksForAddress => ({
+  folders: [],
+  bookmarks: [],
+  updatedAt: Date.now(),
+});
+
+function asBookmarksByAddress(value: unknown): AppBookmarksByAddress {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return {};
+  return value as AppBookmarksByAddress;
+}
+
+function appStorage() {
+  if (typeof window === 'undefined') return undefined;
+  return window.appStorage;
+}
+
+export function normalizeBookmarkPath(path?: string): string {
+  const raw = (path || '').trim();
+  if (!raw) return '';
+
+  const queryIndex = raw.indexOf('?');
+  const hashIndex = raw.indexOf('#');
+  const endIndex = [queryIndex, hashIndex]
+    .filter((index) => index >= 0)
+    .sort((a, b) => a - b)[0];
+  const stripped = endIndex === undefined ? raw : raw.slice(0, endIndex);
+
+  return stripped.replace(/^\/+/, '').replace(/\/+$/, '');
+}
+
+function encodeAppName(name: string): string {
+  return name.trim().replace(/ /g, '%20');
+}
+
+export function buildBookmarkLink(bookmark: {
+  service: string;
+  appName: string;
+  identifier?: string;
+  path?: string;
+}): string {
+  const path = normalizeBookmarkPath(bookmark.path);
+  const identifier = (bookmark.identifier || '').trim();
+  const pathPart = path ? `/${path}` : '';
+  const identifierPart = identifier
+    ? `?identifier=${encodeURIComponent(identifier)}`
+    : '';
+
+  return `${QORTAL_PROTOCOL}${bookmark.service}/${encodeAppName(bookmark.appName)}${pathPart}${identifierPart}`;
+}
+
+export function parseBookmarkLink(link: string) {
+  const parsed = extractComponents(link.trim());
+  if (!parsed?.service || !parsed?.name) return null;
+
+  return {
+    service: parsed.service,
+    appName: parsed.name,
+    identifier: parsed.identifier,
+    path: normalizeBookmarkPath(parsed.path),
+  };
+}
+
+export function getBookmarkKey(bookmark: {
+  service?: string;
+  appName?: string;
+  name?: string;
+  identifier?: string;
+  path?: string;
+}): string {
+  return [
+    (bookmark.service || '').toUpperCase(),
+    (bookmark.appName || bookmark.name || '').toLowerCase(),
+    bookmark.identifier || '',
+    normalizeBookmarkPath(bookmark.path),
+  ].join(':');
+}
+
+export function getBookmarkCandidateFromTab(
+  tab: BookmarkableAppTab | null | undefined
+) {
+  if (!tab?.service || !tab?.name) return null;
+  if (tab.internal || tab.service === INTERNAL_TAB_SERVICE) return null;
+
+  const path = normalizeBookmarkPath(tab.path);
+  const candidate = {
+    service: tab.service.toUpperCase(),
+    appName: tab.name,
+    identifier: tab.identifier,
+    path,
+  };
+
+  return {
+    ...candidate,
+    name: tab.name,
+    link: buildBookmarkLink(candidate),
+  };
+}
+
+export function findBookmarkForCandidate(
+  bookmarks: AppBookmark[],
+  candidate: ReturnType<typeof getBookmarkCandidateFromTab>
+) {
+  if (!candidate) return null;
+  const key = getBookmarkKey(candidate);
+  return bookmarks.find((bookmark) => getBookmarkKey(bookmark) === key) || null;
+}
+
+export async function loadBookmarksForAddress(
+  address: string
+): Promise<AppBookmarksForAddress> {
+  const storage = appStorage();
+  if (!storage || !address) return emptyBookmarks();
+
+  const raw = await storage.get(APP_BOOKMARKS_STORAGE_KEY);
+  const byAddress = asBookmarksByAddress(raw);
+  const data = byAddress[address];
+
+  return {
+    folders: Array.isArray(data?.folders) ? data.folders : [],
+    bookmarks: Array.isArray(data?.bookmarks) ? data.bookmarks : [],
+    updatedAt: typeof data?.updatedAt === 'number' ? data.updatedAt : Date.now(),
+  };
+}
+
+export async function saveBookmarksForAddress(
+  address: string,
+  data: AppBookmarksForAddress
+): Promise<AppBookmarksForAddress> {
+  const storage = appStorage();
+  const nextData = {
+    folders: data.folders,
+    bookmarks: data.bookmarks,
+    updatedAt: Date.now(),
+  };
+
+  if (!storage || !address) return nextData;
+
+  const raw = await storage.get(APP_BOOKMARKS_STORAGE_KEY);
+  const byAddress = asBookmarksByAddress(raw);
+  await storage.set(APP_BOOKMARKS_STORAGE_KEY, {
+    ...byAddress,
+    [address]: nextData,
+  });
+
+  return nextData;
+}
+
+export function upsertBookmark(
+  data: AppBookmarksForAddress,
+  bookmark: AppBookmark
+): AppBookmarksForAddress {
+  const key = getBookmarkKey(bookmark);
+  const index = data.bookmarks.findIndex(
+    (existing) => getBookmarkKey(existing) === key || existing.id === bookmark.id
+  );
+  const bookmarks = [...data.bookmarks];
+
+  if (index >= 0) {
+    bookmarks[index] = bookmark;
+  } else {
+    bookmarks.push(bookmark);
+  }
+
+  return {
+    ...data,
+    bookmarks,
+    updatedAt: Date.now(),
+  };
+}
+
+export function removeBookmark(
+  data: AppBookmarksForAddress,
+  bookmarkId: string
+): AppBookmarksForAddress {
+  return {
+    ...data,
+    bookmarks: data.bookmarks.filter((bookmark) => bookmark.id !== bookmarkId),
+    updatedAt: Date.now(),
+  };
+}
+
+export function upsertFolder(
+  data: AppBookmarksForAddress,
+  folder: AppBookmarkFolder
+): AppBookmarksForAddress {
+  const index = data.folders.findIndex((existing) => existing.id === folder.id);
+  const folders = [...data.folders];
+
+  if (index >= 0) {
+    folders[index] = folder;
+  } else {
+    folders.push(folder);
+  }
+
+  return {
+    ...data,
+    folders,
+    updatedAt: Date.now(),
+  };
+}
+
+export function removeFolder(
+  data: AppBookmarksForAddress,
+  folderId: string
+): AppBookmarksForAddress {
+  return {
+    ...data,
+    folders: data.folders.filter((folder) => folder.id !== folderId),
+    bookmarks: data.bookmarks.map((bookmark) =>
+      bookmark.folderId === folderId ? { ...bookmark, folderId: null } : bookmark
+    ),
+    updatedAt: Date.now(),
+  };
+}
+
diff --git a/src/components/Apps/AppBookmarks/bookmarkTypes.ts b/src/components/Apps/AppBookmarks/bookmarkTypes.ts
new file mode 100644
index 00000000..35a5cb8f
--- /dev/null
+++ b/src/components/Apps/AppBookmarks/bookmarkTypes.ts
@@ -0,0 +1,37 @@
+export type AppBookmarkFolder = {
+  id: string;
+  name: string;
+  createdAt: number;
+  updatedAt: number;
+};
+
+export type AppBookmark = {
+  id: string;
+  name: string;
+  service: string;
+  appName: string;
+  identifier?: string;
+  path: string;
+  link: string;
+  folderId: string | null;
+  createdAt: number;
+  updatedAt: number;
+};
+
+export type AppBookmarksForAddress = {
+  folders: AppBookmarkFolder[];
+  bookmarks: AppBookmark[];
+  updatedAt: number;
+};
+
+export type AppBookmarksByAddress = Record<string, AppBookmarksForAddress>;
+
+export type BookmarkableAppTab = {
+  tabId?: string;
+  name?: string;
+  service?: string;
+  identifier?: string;
+  path?: string;
+  internal?: string;
+};
+
diff --git a/src/components/Apps/AppBookmarks/index.ts b/src/components/Apps/AppBookmarks/index.ts
new file mode 100644
index 00000000..b923b738
--- /dev/null
+++ b/src/components/Apps/AppBookmarks/index.ts
@@ -0,0 +1,2 @@
+export { AppBookmarksButton } from './AppBookmarksButton';
+
diff --git a/src/components/Apps/AppViewer.tsx b/src/components/Apps/AppViewer.tsx
index 135e5ac2..d3d34f7f 100644
--- a/src/components/Apps/AppViewer.tsx
+++ b/src/components/Apps/AppViewer.tsx
@@ -1,22 +1,23 @@
 import { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
+import { Box } from '@mui/material';
 import { getBaseApiReact } from '../../App';
 import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
 import { useFrame } from 'react-frame-component';
 import { useQortalMessageListener } from '../../hooks/useQortalMessageListener';
 import { useThemeContext } from '../Theme/ThemeContext';
 import { useTranslation } from 'react-i18next';
-import { buildQortalResourceLink } from '../../utils/qortalLink';
+import { QORTAL_PROTOCOL } from '../../constants/constants';
+import { appHeighOffsetPx } from '../Desktop/CustomTitleBar';
 
 type AppViewerProps = {
   app: any;
-  customHeight?: string;
   hide: boolean;
   isDevMode: boolean;
   skipAuth?: boolean;
 };
 
 export const AppViewer = forwardRef<HTMLIFrameElement, AppViewerProps>(
-  ({ app, customHeight, hide, isDevMode, skipAuth }, iframeRef) => {
+  ({ app, hide, isDevMode, skipAuth }, iframeRef) => {
     const { window: frameWindow } = useFrame();
     const { path, history, changeCurrentIndex, resetHistory } =
       useQortalMessageListener(
@@ -26,7 +27,6 @@ export const AppViewer = forwardRef<HTMLIFrameElement, AppViewerProps>(
         isDevMode,
         isDevMode ? 'devapp' : app?.name,
         app?.service,
-        app?.identifier,
         skipAuth
       );
 
@@ -133,11 +133,8 @@ export const AppViewer = forwardRef<HTMLIFrameElement, AppViewerProps>(
     const copyLinkFunc = (e) => {
       const { tabId } = e.detail;
       if (tabId === app?.tabId) {
-        let link = buildQortalResourceLink({
-          service: app?.service,
-          name: app?.name,
-          identifier: app?.identifier,
-        });
+        let link =
+          QORTAL_PROTOCOL + app?.service + '/' + app?.name.replace(/ /g, '%20');
         if (path && path.startsWith('/')) {
           link = link + removeTrailingSlash(path);
         }
@@ -146,9 +143,7 @@ export const AppViewer = forwardRef<HTMLIFrameElement, AppViewerProps>(
         }
         navigator.clipboard
           .writeText(link)
-          .then(() => {
-            console.log('Path copied to clipboard:', path);
-          })
+          .then(() => undefined)
           .catch((error) => {
             console.error('Failed to copy path:', error);
           });
@@ -292,8 +287,6 @@ export const AppViewer = forwardRef<HTMLIFrameElement, AppViewerProps>(
           );
           // iframeRef.current.contentWindow.location.href = previousPath; // Fallback URL update
         }
-      } else {
-        console.log('Iframe not accessible or does not have a content window.');
       }
     };
 
@@ -313,61 +306,99 @@ export const AppViewer = forwardRef<HTMLIFrameElement, AppViewerProps>(
       };
     }, [app, history, themeMode, currentLang]);
 
-    // Function to navigate back in iframe
-    const navigateForwardInIframe = async () => {
-      if (iframeRef.current && iframeRef.current.contentWindow) {
+    const navigateToPathFunc = useCallback(
+      async (e) => {
+        const { path: targetPath = '' } = e.detail;
+        if (!iframeRef.current?.contentWindow) return;
+
         const targetOrigin = iframeRef.current
           ? new URL(iframeRef.current.src).origin
           : '*';
-        iframeRef.current.contentWindow.postMessage(
-          { action: 'NAVIGATE_FORWARD' },
-          targetOrigin
-        );
-      } else {
-        console.log('Iframe not accessible or does not have a content window.');
-      }
-    };
 
-    const navigateForwardAppFunc = () => {
-      navigateForwardInIframe();
-    };
+        const navigationPromise = new Promise((resolve, reject) => {
+          function handleNavigationSuccess(event) {
+            if (
+              event.data?.action === 'NAVIGATION_SUCCESS' &&
+              event.data.path === targetPath
+            ) {
+              frameWindow.removeEventListener(
+                'message',
+                handleNavigationSuccess
+              );
+              resolve(undefined);
+            }
+          }
+
+          frameWindow.addEventListener('message', handleNavigationSuccess);
+
+          setTimeout(() => {
+            frameWindow.removeEventListener('message', handleNavigationSuccess);
+            reject(new Error('navigation_timeout'));
+          }, 250);
+          iframeRef.current.contentWindow.postMessage(
+            {
+              action: 'NAVIGATE_TO_PATH',
+              path: targetPath,
+              requestedHandler: 'UI',
+            },
+            targetOrigin
+          );
+        });
+
+        try {
+          await navigationPromise;
+        } catch {
+          if (isDevMode) {
+            setUrl(
+              `${url}${targetPath}?theme=${themeMode}&lang=${currentLang}&time=${new Date().getMilliseconds()}&isManualNavigation=false`
+            );
+            return;
+          }
+          setUrl(
+            `${getBaseApiReact()}/render/${app?.service}/${app?.name}/${targetPath}?theme=${themeMode}&lang=${currentLang}&identifier=${app?.identifier != null && app?.identifier != 'null' ? app?.identifier : ''}&time=${new Date().getMilliseconds()}&isManualNavigation=false`
+          );
+        }
+      },
+      [app, frameWindow, iframeRef, isDevMode, url, themeMode, currentLang]
+    );
 
     useEffect(() => {
       if (!app?.tabId) return;
-      subscribeToEvent(
-        `navigateForwardApp-${app?.tabId}`,
-        navigateForwardAppFunc
-      );
+      subscribeToEvent(`navigateToPath-${app?.tabId}`, navigateToPathFunc);
 
       return () => {
         unsubscribeFromEvent(
-          `navigateForwardApp-${app?.tabId}`,
-          navigateForwardAppFunc
+          `navigateToPath-${app?.tabId}`,
+          navigateToPathFunc
         );
       };
-    }, [app?.tabId]);
+    }, [app?.tabId, navigateToPathFunc]);
+
+    // Function to navigate back in iframe
+    const navigateForwardInIframe = async () => {
+      if (iframeRef.current && iframeRef.current.contentWindow) {
+        const targetOrigin = iframeRef.current
+          ? new URL(iframeRef.current.src).origin
+          : '*';
+        iframeRef.current.contentWindow.postMessage(
+          { action: 'NAVIGATE_FORWARD' },
+          targetOrigin
+        );
+      }
+    };
 
     return (
-      <div
-        data-app-viewer-wrapper={app?.tabId || 'active'}
-        style={{
+      <Box
+        sx={{
           display: 'flex',
           flexDirection: 'column',
-          overflow: 'hidden',
-          flex: '1 1 auto',
-          minHeight: '0',
-          width: '100%',
-          alignSelf: 'stretch',
         }}
       >
         <iframe
-          data-app-viewer-inner-iframe={app?.tabId || 'active'}
           ref={iframeRef}
           style={{
+            height: `100vh`,
             border: 'none',
-            display: 'block',
-            flex: '1 1 auto',
-            minHeight: 0,
             width: '100%',
           }}
           id="browser-iframe"
@@ -375,7 +406,7 @@ export const AppViewer = forwardRef<HTMLIFrameElement, AppViewerProps>(
           sandbox="allow-scripts allow-same-origin allow-forms allow-downloads allow-modals"
           allow="fullscreen; clipboard-read; clipboard-write; screen-wake-lock"
         ></iframe>
-      </div>
+      </Box>
     );
   }
 );
diff --git a/src/components/Apps/Apps-styles.tsx b/src/components/Apps/Apps-styles.tsx
index ce9c6c84..91b4481e 100644
--- a/src/components/Apps/Apps-styles.tsx
+++ b/src/components/Apps/Apps-styles.tsx
@@ -286,8 +286,8 @@ export const AppsHorizontalTabBar = styled(Box)(({ theme }) => ({
   alignItems: 'center',
   backgroundColor:
     theme.palette.mode === 'dark'
-      ? alpha(theme.palette.common.black, 0.12)
-      : alpha(theme.palette.common.white, 0.58),
+      ? alpha(theme.palette.common.white, 0.03)
+      : alpha(theme.palette.common.black, 0.03),
   borderBottom: `1px solid ${theme.palette.border.subtle}`,
   color: theme.palette.text.primary,
   display: 'flex',
@@ -300,13 +300,17 @@ export const AppsHorizontalTabBar = styled(Box)(({ theme }) => ({
   '&::before': {
     backgroundColor:
       theme.palette.mode === 'dark'
-        ? alpha(theme.palette.common.white, 0.035)
-        : alpha(theme.palette.common.black, 0.025),
+        ? alpha(theme.palette.common.white, 0.02)
+        : alpha(theme.palette.common.black, 0.018),
     content: '""',
     inset: 0,
     pointerEvents: 'none',
     position: 'absolute',
   },
+  boxShadow:
+    theme.palette.mode === 'dark'
+      ? `inset 0 1px 0 ${alpha(theme.palette.common.white, 0.025)}`
+      : `inset 0 1px 0 ${alpha(theme.palette.common.white, 0.35)}`,
 }));
 
 export const AppsHorizontalTabScroller = styled(Box)(({ theme }) => ({
@@ -315,10 +319,14 @@ export const AppsHorizontalTabScroller = styled(Box)(({ theme }) => ({
   backgroundColor: 'transparent',
   color: theme.palette.text.primary,
   display: 'flex',
+  flexWrap: 'nowrap',
   gap: '2px',
   height: 'auto',
+  justifyContent: 'flex-start',
   minHeight: 0,
-  overflow: 'hidden',
+  minWidth: 0,
+  overflowX: 'auto',
+  overflowY: 'hidden',
   padding: '0 10px 0 6px',
   position: 'relative',
   width: '100%',
@@ -338,14 +346,15 @@ export const AppsHorizontalTabButton = styled(ButtonBase)(({ theme }) => ({
   borderRadius: '8px',
   color: theme.palette.text.primary,
   display: 'flex',
-  flex: '1 1 0',
+  flex: '0 1 180px',
   gap: '8px',
   height: '36px',
   justifyContent: 'flex-start',
-  maxWidth: '240px',
-  minWidth: '104px',
-  padding: '0 9px',
+  minWidth: 0,
+  padding: '0 10px',
   position: 'relative',
+  transition:
+    'background-color 180ms ease, color 180ms ease, border-color 180ms ease',
 }));
 
 export const AppsHorizontalTabLabel = styled(Typography)(({ theme }) => ({
@@ -354,6 +363,7 @@ export const AppsHorizontalTabLabel = styled(Typography)(({ theme }) => ({
   fontSize: '12.5px',
   fontWeight: 600,
   letterSpacing: '0.01em',
+  minWidth: 0,
   overflow: 'hidden',
   textAlign: 'left',
   textOverflow: 'ellipsis',
diff --git a/src/components/Apps/AppsDesktop.tsx b/src/components/Apps/AppsDesktop.tsx
index 54ad9016..6d092926 100644
--- a/src/components/Apps/AppsDesktop.tsx
+++ b/src/components/Apps/AppsDesktop.tsx
@@ -2,11 +2,30 @@ import {
   createRef,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   useState,
 } from 'react';
+
+import { flushSync } from 'react-dom';
+
+import type { ReactNode } from 'react';
+import {
+  closestCenter,
+  DndContext,
+  DragEndEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  horizontalListSortingStrategy,
+  SortableContext,
+} from '@dnd-kit/sortable';
 import { AppsHomeDesktop } from './AppsHomeDesktop';
+import { AppsDevModeHome } from './AppsDevModeHome';
 import { Spacer } from '../../common/Spacer';
 import { getBaseApiReact } from '../../App';
 import { AppInfo } from './AppInfo';
@@ -27,7 +46,10 @@ import AppViewerContainer from './AppViewerContainer';
 import TabComponent from './TabComponent';
 import ShortUniqueId from 'short-unique-id';
 import { AppPublish } from './AppPublish';
-import { RatingsCacheInitializer, useAppRatings } from '../../hooks/useAppRatings';
+import {
+  RatingsCacheInitializer,
+  useAppRatings,
+} from '../../hooks/useAppRatings';
 import { AppsLibraryDesktop } from './AppsLibraryDesktop';
 import { AppsCategoryDesktop } from './AppsCategoryDesktop';
 import AddRoundedIcon from '@mui/icons-material/AddRounded';
@@ -40,7 +62,9 @@ import {
   DialogContent,
   DialogContentText,
   DialogTitle,
+  useTheme,
 } from '@mui/material';
+import { alpha } from '@mui/material/styles';
 import {
   navigationControllerAtom,
   isNewTabWindowAtom,
@@ -53,9 +77,86 @@ import { TIME_MINUTES_20_IN_MILLISECONDS } from '../../constants/constants';
 import { appChromeOffsetPx } from '../Desktop/CustomTitleBar';
 import { extractComponents } from '../Chat/MessageDisplay';
 import { QORTAL_PROTOCOL } from '../../constants/constants';
+import { QCHAT_INTERNAL_TAB_ID } from '../../utils/openQChatTab';
+import {
+  dialogActionsSx,
+  dialogContentSx,
+  dialogContentTextSx,
+  dialogTitleSx,
+  getDialogDangerButtonSx,
+  getDialogPaperSx,
+  getDialogSecondaryButtonSx,
+} from '../App/dialogSurface';
 
 const uid = new ShortUniqueId({ length: 8 });
 const MAX_OPEN_APP_TABS = 10;
+/** Bounded MRU stack (tab ids only) for "last visited" after closing the active tab */
+const MAX_TAB_MRU_DEPTH = 64;
+
+function pickNextTabFromMru(
+  remainingTabs: { tabId: string }[],
+  mruIds: string[]
+): { tabId: string } | null {
+  if (!remainingTabs.length) return null;
+  const ids = new Set(remainingTabs.map((t) => t.tabId));
+  for (let i = mruIds.length - 1; i >= 0; i--) {
+    const id = mruIds[i];
+    if (ids.has(id)) {
+      return remainingTabs.find((t) => t.tabId === id) ?? null;
+    }
+  }
+  return null;
+}
+
+/** Prefer the tab that was to the right of the closed tab; if closed tab was last, use the new last tab */
+function positionalTabAfterClose(
+  remainingTabs: { tabId: string }[],
+  removedTabId: string,
+  tabsBeforeRemove: { tabId: string }[]
+): { tabId: string } | null {
+  if (!remainingTabs.length) return null;
+  const removedIndex = tabsBeforeRemove.findIndex(
+    (tab) => tab?.tabId === removedTabId
+  );
+  if (removedIndex === -1) {
+    return remainingTabs[remainingTabs.length - 1] ?? remainingTabs[0] ?? null;
+  }
+  if (removedIndex < remainingTabs.length) {
+    return remainingTabs[removedIndex] ?? null;
+  }
+  return remainingTabs[removedIndex - 1] ?? null;
+}
+const SIDEBAR_CHROME_TRANSITION = '200ms cubic-bezier(0.2, 0, 0, 1)';
+/** Match `AppsHorizontalTabButton` ideal width for strip width math */
+const TAB_STRIP_IDEAL_TAB_PX = 180;
+const TAB_STRIP_INNER_GAP_PX = 2;
+
+const restrictTabsToHorizontalAxis = ({ transform }) => ({
+  ...transform,
+  y: 0,
+});
+
+const restrictTabsToStrip = ({
+  activeNodeRect,
+  containerNodeRect,
+  transform,
+}) => {
+  if (!activeNodeRect || !containerNodeRect) {
+    return {
+      ...transform,
+      y: 0,
+    };
+  }
+
+  const minX = containerNodeRect.left - activeNodeRect.left;
+  const maxX = containerNodeRect.right - activeNodeRect.right;
+
+  return {
+    ...transform,
+    x: Math.min(Math.max(transform.x, minX), maxX),
+    y: 0,
+  };
+};
 
 function normalizeQortalInput(value: string) {
   const trimmed = (value || '').trim();
@@ -64,7 +165,48 @@ function normalizeQortalInput(value: string) {
   return `${QORTAL_PROTOCOL}${trimmed}`;
 }
 
-export const AppsDesktop = ({ mode, setMode, show }) => {
+/** Local dev / preview iframe tab (not a published Q-App); has no `service` (Q-Chat uses INTERNAL). */
+function isLocalDevTab(tab: { service?: string } | null | undefined) {
+  return !!tab && !tab.service;
+}
+
+const DEV_MODE_SIDEBAR_SAFE_INSET_PX = 88;
+
+type InternalTabVisibilityArgs = {
+  isVisible: boolean;
+  tab: any;
+};
+
+type RenderInternalTabArgs = {
+  hide: boolean;
+  isSelected: boolean;
+  tab: any;
+};
+
+type AppsDesktopProps = {
+  mode: string;
+  setMode: (mode: string) => void;
+  devMode: string;
+  setDevMode: (mode: string) => void;
+  desktopViewMode: string;
+  setDesktopViewMode: (mode: string) => void;
+  onInternalTabVisibilityChange?: (args: InternalTabVisibilityArgs) => void;
+  renderInternalTab?: (args: RenderInternalTabArgs) => ReactNode;
+  show: boolean;
+};
+
+export const AppsDesktop = ({
+  mode,
+  setMode,
+  devMode,
+  setDevMode,
+  desktopViewMode,
+  setDesktopViewMode,
+  onInternalTabVisibilityChange,
+  renderInternalTab,
+  show,
+}: AppsDesktopProps) => {
+  const theme = useTheme();
   const navigationController = useAtomValue(navigationControllerAtom);
   const userInfo = useAtomValue(userInfoAtom);
   const publishEditTarget = useAtomValue(publishEditTargetAtom);
@@ -75,10 +217,12 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
   const [selectedAppInfo, setSelectedAppInfo] = useState(null);
   const [selectedCategory, setSelectedCategory] = useState(null);
   const [tabs, setTabs] = useState([]);
+  const [viewerTabOrder, setViewerTabOrder] = useState<string[]>([]);
   const [selectedTab, setSelectedTab] = useState(null);
   const [isNewTabWindow, setIsNewTabWindow] = useAtom(isNewTabWindowAtom);
   const [categories, setCategories] = useState([]);
   const iframeRefs = useRef({});
+  const tabsTokenRef = useRef(0);
   const { refreshRatings } = useAppRatings();
   const [showCloseTabDialog, setShowCloseTabDialog] = useState(false);
   const [pendingTabToRemove, setPendingTabToRemove] = useState(null);
@@ -87,10 +231,42 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
     message: string;
     type: 'warning' | 'error' | 'success' | 'info';
   } | null>(null);
+  const [sidebarOffsetPx, setSidebarOffsetPx] = useState(0);
+  const [isAddTabFocused, setIsAddTabFocused] = useState(false);
+  const [isAddTabWaitingForPointerMove, setIsAddTabWaitingForPointerMove] =
+    useState(false);
+  const addTabPointerOriginRef = useRef<{ x: number; y: number } | null>(null);
+  const latestPointerPositionRef = useRef<{ x: number; y: number } | null>(
+    null
+  );
+  const [pendingVisualTabActivationId, setPendingVisualTabActivationId] =
+    useState<string | null>(null);
+  const [delayedVisualActiveTabId, setDelayedVisualActiveTabId] = useState<
+    string | null
+  >(null);
+  const [enteringTabIds, setEnteringTabIds] = useState<string[]>([]);
+  const [tabStripCompresses, setTabStripCompresses] = useState(false);
+  const tabScrollerRef = useRef<HTMLDivElement | null>(null);
+  const tabAddButtonRef = useRef<HTMLButtonElement | null>(null);
   const [librarySearchRequest, setLibrarySearchRequest] = useState<{
     nonce: number;
     query: string;
   }>({ nonce: 0, query: '' });
+  const tabsToNavTimeoutRef = useRef<number | null>(null);
+  const tabActivationTimeoutRef = useRef<number | null>(null);
+  const tabEntryCleanupTimeoutRef = useRef<number | null>(null);
+  const recentTabIdsRef = useRef<string[]>([]);
+  const tabPointerUnlockTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  );
+  const tabInteractionLockedRef = useRef(false);
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    })
+  );
   const { t } = useTranslation([
     'auth',
     'core',
@@ -122,17 +298,243 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
   }, [myName, availableQapps]);
 
   useEffect(() => {
-    setTimeout(() => {
+    setViewerTabOrder((prev) => {
+      const nextIds = tabs
+        .map((tab) => tab?.tabId)
+        .filter((tabId): tabId is string => !!tabId);
+      const nextIdSet = new Set(nextIds);
+      const kept = prev.filter((tabId) => nextIdSet.has(tabId));
+      const keptSet = new Set(kept);
+      const appended = nextIds.filter((tabId) => !keptSet.has(tabId));
+      const next = [...kept, ...appended];
+
+      if (
+        next.length === prev.length &&
+        next.every((tabId, index) => tabId === prev[index])
+      ) {
+        return prev;
+      }
+
+      return next;
+    });
+  }, [tabs]);
+
+  const tabsById = useMemo(() => {
+    const byId = new Map<string, any>();
+    tabs.forEach((tab) => {
+      if (tab?.tabId) {
+        byId.set(tab.tabId, tab);
+      }
+    });
+    return byId;
+  }, [tabs]);
+
+  const viewerTabs = useMemo(() => {
+    return viewerTabOrder.map((tabId) => tabsById.get(tabId)).filter(Boolean);
+  }, [tabsById, viewerTabOrder]);
+
+  useEffect(() => {
+    if (tabsToNavTimeoutRef.current !== null) {
+      window.clearTimeout(tabsToNavTimeoutRef.current);
+    }
+    tabsTokenRef.current += 1;
+    const tabsToken = tabsTokenRef.current;
+    tabsToNavTimeoutRef.current = window.setTimeout(() => {
       executeEvent('setTabsToNav', {
         data: {
           tabs: tabs,
           selectedTab: selectedTab,
           isNewTabWindow: isNewTabWindow,
+          tabsToken,
         },
       });
     }, 100);
+    return () => {
+      if (tabsToNavTimeoutRef.current !== null) {
+        window.clearTimeout(tabsToNavTimeoutRef.current);
+        tabsToNavTimeoutRef.current = null;
+      }
+    };
   }, [show, tabs, selectedTab, isNewTabWindow]);
 
+  useEffect(() => {
+    if (
+      desktopViewMode !== 'dev' ||
+      devMode !== 'home' ||
+      isNewTabWindow
+    ) {
+      return;
+    }
+
+    if (selectedTab) {
+      setSelectedTab(null);
+    }
+
+    tabsTokenRef.current += 1;
+    const tabsToken = tabsTokenRef.current;
+    executeEvent('setTabsToNav', {
+      data: {
+        tabs,
+        selectedTab: null,
+        isNewTabWindow: false,
+        tabsToken,
+      },
+    });
+    executeEvent('forceNavClear', { data: { tabsToken } });
+    executeEvent('clearNavInput', {});
+  }, [desktopViewMode, devMode, isNewTabWindow, selectedTab, tabs]);
+
+  useEffect(() => {
+    const id = selectedTab?.tabId;
+    if (!id) return;
+    const prev = recentTabIdsRef.current;
+    const filtered = prev.filter((x) => x !== id);
+    filtered.push(id);
+    recentTabIdsRef.current =
+      filtered.length > MAX_TAB_MRU_DEPTH
+        ? filtered.slice(-MAX_TAB_MRU_DEPTH)
+        : filtered;
+  }, [selectedTab?.tabId]);
+
+  useEffect(() => {
+    return () => {
+      if (tabActivationTimeoutRef.current !== null) {
+        window.clearTimeout(tabActivationTimeoutRef.current);
+      }
+      if (tabEntryCleanupTimeoutRef.current !== null) {
+        window.clearTimeout(tabEntryCleanupTimeoutRef.current);
+      }
+      if (tabPointerUnlockTimerRef.current !== null) {
+        clearTimeout(tabPointerUnlockTimerRef.current);
+        tabPointerUnlockTimerRef.current = null;
+      }
+      tabInteractionLockedRef.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    onInternalTabVisibilityChange?.({
+      isVisible:
+        !!show &&
+        !isNewTabWindow &&
+        selectedTab?.internal === QCHAT_INTERNAL_TAB_ID,
+      tab: selectedTab,
+    });
+  }, [isNewTabWindow, onInternalTabVisibilityChange, selectedTab, show]);
+
+  const updateTabStripCompression = useCallback(() => {
+    const scroller = tabScrollerRef.current;
+    if (!show || !scroller || tabs.length === 0) {
+      setTabStripCompresses(false);
+      return;
+    }
+    if (scroller.clientWidth < 32) {
+      return;
+    }
+    const addEl = tabAddButtonRef.current;
+    const addW = addEl?.offsetWidth ?? 36;
+    const cs = getComputedStyle(scroller);
+    const padL = parseFloat(cs.paddingLeft) || 0;
+    const padR = parseFloat(cs.paddingRight) || 0;
+    const rowGap = parseFloat(cs.gap) || TAB_STRIP_INNER_GAP_PX;
+    const available = scroller.clientWidth - padL - padR - addW - rowGap;
+
+    const tabsNeed =
+      tabs.length * TAB_STRIP_IDEAL_TAB_PX +
+      Math.max(0, tabs.length - 1) * TAB_STRIP_INNER_GAP_PX;
+
+    setTabStripCompresses(tabsNeed > available + 0.5);
+  }, [show, tabs.length]);
+
+  useLayoutEffect(() => {
+    updateTabStripCompression();
+    const id = window.requestAnimationFrame(() => updateTabStripCompression());
+    return () => window.cancelAnimationFrame(id);
+  }, [updateTabStripCompression, sidebarOffsetPx]);
+
+  useLayoutEffect(() => {
+    const scroller = tabScrollerRef.current;
+    const addBtn = tabAddButtonRef.current;
+    if (!scroller) return;
+    const ro = new ResizeObserver(() => updateTabStripCompression());
+    ro.observe(scroller);
+    if (addBtn) {
+      ro.observe(addBtn);
+    }
+    return () => ro.disconnect();
+  }, [updateTabStripCompression]);
+
+  useEffect(() => {
+    const trackPointer = (event: PointerEvent) => {
+      latestPointerPositionRef.current = {
+        x: event.clientX,
+        y: event.clientY,
+      };
+    };
+
+    window.addEventListener('pointermove', trackPointer, { passive: true });
+
+    return () => {
+      window.removeEventListener('pointermove', trackPointer);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!isAddTabWaitingForPointerMove) return;
+
+    const handlePointerMove = (event: PointerEvent) => {
+      const origin = addTabPointerOriginRef.current;
+      if (origin) {
+        const dx = Math.abs(event.clientX - origin.x);
+        const dy = Math.abs(event.clientY - origin.y);
+        if (dx < 6 && dy < 6) {
+          return;
+        }
+      }
+      setIsAddTabFocused(false);
+      setIsAddTabWaitingForPointerMove(false);
+      addTabPointerOriginRef.current = null;
+    };
+
+    window.addEventListener('pointermove', handlePointerMove, {
+      passive: true,
+    });
+
+    return () => {
+      window.removeEventListener('pointermove', handlePointerMove);
+    };
+  }, [isAddTabWaitingForPointerMove]);
+
+  const scheduleVisualTabActivation = useCallback(
+    (tabId: string) => {
+      if (tabActivationTimeoutRef.current !== null) {
+        window.clearTimeout(tabActivationTimeoutRef.current);
+      }
+      if (tabEntryCleanupTimeoutRef.current !== null) {
+        window.clearTimeout(tabEntryCleanupTimeoutRef.current);
+      }
+
+      setPendingVisualTabActivationId(tabId);
+      setDelayedVisualActiveTabId(null);
+      setEnteringTabIds((prev) =>
+        prev.includes(tabId) ? prev : [...prev, tabId]
+      );
+      addTabPointerOriginRef.current = latestPointerPositionRef.current;
+      setIsAddTabWaitingForPointerMove(true);
+
+      tabActivationTimeoutRef.current = window.setTimeout(() => {
+        setDelayedVisualActiveTabId(tabId);
+        setPendingVisualTabActivationId(null);
+      }, 85);
+
+      tabEntryCleanupTimeoutRef.current = window.setTimeout(() => {
+        setEnteringTabIds((prev) => prev.filter((id) => id !== tabId));
+        setDelayedVisualActiveTabId((prev) => (prev === tabId ? null : prev));
+      }, 220);
+    },
+    [setIsAddTabFocused]
+  );
+
   const getCategories = useCallback(async () => {
     try {
       const url = `${getBaseApiReact()}/arbitrary/categories`;
@@ -246,7 +648,39 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
     };
   }, []);
 
-  const navigateBackFunc = (e) => {
+  const navigateBackFunc = useCallback(() => {
+    if (desktopViewMode === 'dev') {
+      if (
+        [
+          'category',
+          'appInfo-from-category',
+          'appInfo',
+          'library',
+          'publish',
+        ].includes(devMode)
+      ) {
+        if (devMode === 'category') {
+          setDevMode('library');
+          setSelectedCategory(null);
+        } else if (devMode === 'appInfo-from-category') {
+          setDevMode('category');
+        } else if (devMode === 'appInfo') {
+          setDevMode('library');
+        } else if (devMode === 'library') {
+          if (isNewTabWindow) {
+            setDevMode('viewer');
+          } else {
+            setDevMode('home');
+          }
+        } else if (devMode === 'publish') {
+          setDevMode('library');
+        }
+      } else if (selectedTab?.tabId) {
+        executeEvent(`navigateBackApp-${selectedTab.tabId}`, {});
+      }
+      return;
+    }
+
     if (
       [
         'category',
@@ -258,7 +692,6 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
         'publish-website',
       ].includes(mode)
     ) {
-      // Handle the various modes as needed
       if (mode === 'category') {
         setMode('library');
         setSelectedCategory(null);
@@ -281,9 +714,18 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
         setMode('library');
       }
     } else if (selectedTab?.tabId) {
-      executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {});
+      executeEvent(`navigateBackApp-${selectedTab.tabId}`, {});
     }
-  };
+  }, [
+    desktopViewMode,
+    devMode,
+    isNewTabWindow,
+    mode,
+    selectedTab?.tabId,
+    setDevMode,
+    setMode,
+    setPublishEditTarget,
+  ]);
 
   useEffect(() => {
     subscribeToEvent('navigateBack', navigateBackFunc);
@@ -291,10 +733,38 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
     return () => {
       unsubscribeFromEvent('navigateBack', navigateBackFunc);
     };
-  }, [mode, selectedTab]);
+  }, [navigateBackFunc]);
+
+  useEffect(() => {
+    subscribeToEvent('devModeNavigateBack', navigateBackFunc);
+
+    return () => {
+      unsubscribeFromEvent('devModeNavigateBack', navigateBackFunc);
+    };
+  }, [navigateBackFunc]);
 
   const addTabFunc = (e) => {
     const data = e.detail?.data;
+    if (data?.internal) {
+      const existingInternalTab = tabs.find(
+        (tab) => tab?.internal === data.internal
+      );
+      if (existingInternalTab) {
+        setPendingVisualTabActivationId(null);
+        setDelayedVisualActiveTabId(null);
+        setEnteringTabIds((prev) =>
+          prev.filter((id) => id !== existingInternalTab.tabId)
+        );
+        setIsAddTabFocused(false);
+        setIsAddTabWaitingForPointerMove(false);
+        addTabPointerOriginRef.current = null;
+        setSelectedTab(existingInternalTab);
+        setMode('viewer');
+        setDesktopViewMode('apps');
+        setIsNewTabWindow(false);
+        return;
+      }
+    }
     if (tabs.length >= MAX_OPEN_APP_TABS) {
       setInfoSnack({
         message: 'Maximum number of tabs reached. Close one to open another.',
@@ -303,14 +773,71 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
       setOpenSnack(true);
       return;
     }
+
+    if (data?.navigateIfAlreadyOpen) {
+      const { navigateIfAlreadyOpen, path, ...tabIdentity } = data;
+      const existingTab = tabs.find(
+        (tab) =>
+          tab.service === tabIdentity.service &&
+          tab.name?.toLowerCase() === tabIdentity.name?.toLowerCase() &&
+          (tabIdentity.identifier == null ||
+            tab.identifier === tabIdentity.identifier)
+      );
+
+      if (existingTab) {
+        flushSync(() => {
+          setDesktopViewMode('apps');
+          setSelectedTab(existingTab);
+          setMode('viewer');
+          setIsNewTabWindow(false);
+        });
+
+        setTimeout(() => {
+          executeEvent(`navigateToPath-${existingTab.tabId}`, {
+            path: path || '',
+          });
+        }, 200);
+
+        return;
+      }
+    }
     const newTab = {
       ...data,
       tabId: uid.rnd(),
     };
-    setTabs((prev) => [...prev, newTab]);
+    const shouldUseSmoothHandoff = isAddTabFocused;
+    if (!shouldUseSmoothHandoff) {
+      setIsAddTabFocused(false);
+      setIsAddTabWaitingForPointerMove(false);
+      addTabPointerOriginRef.current = null;
+    }
+    setTabs((prev) => {
+      const afterTabId = data?.afterTabId;
+      if (!afterTabId) {
+        return [...prev, newTab];
+      }
+
+      const sourceIndex = prev.findIndex((tab) => tab?.tabId === afterTabId);
+      if (sourceIndex === -1) {
+        return [...prev, newTab];
+      }
+
+      const nextTabs = [...prev];
+      nextTabs.splice(sourceIndex + 1, 0, newTab);
+      return nextTabs;
+    });
     setSelectedTab(newTab);
     setMode('viewer');
+    setDesktopViewMode('apps');
     setIsNewTabWindow(false);
+    if (shouldUseSmoothHandoff) {
+      scheduleVisualTabActivation(newTab.tabId);
+    } else {
+      setPendingVisualTabActivationId(null);
+      setDelayedVisualActiveTabId(null);
+      setEnteringTabIds((prev) => prev.filter((id) => id !== newTab.tabId));
+      setIsAddTabFocused(false);
+    }
   };
 
   useEffect(() => {
@@ -321,17 +848,89 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
     };
   }, [tabs]);
 
-  const setSelectedTabFunc = (e) => {
+  const addDevTabFunc = (e) => {
     const data = e.detail?.data;
-    if (e.detail?.isDevMode) return;
+    if (tabs.length >= MAX_OPEN_APP_TABS) {
+      setInfoSnack({
+        message: 'Maximum number of tabs reached. Close one to open another.',
+        type: 'warning',
+      });
+      setOpenSnack(true);
+      return;
+    }
+    const newTab = {
+      ...data,
+      tabId: uid.rnd(),
+    };
+    setTabs((prev) => [...prev, newTab]);
+    setSelectedTab(newTab);
+    setDevMode('viewer');
+    setDesktopViewMode('dev');
+    setIsNewTabWindow(false);
+  };
+
+  useEffect(() => {
+    subscribeToEvent('appsDevModeAddTab', addDevTabFunc);
+
+    return () => {
+      unsubscribeFromEvent('appsDevModeAddTab', addDevTabFunc);
+    };
+  }, [tabs]);
 
+  const updateDevTabFunc = (e) => {
+    const data = e.detail?.data;
+    if (!data.tabId) return;
+    const findIndexTab = tabs.findIndex((tab) => tab?.tabId === data?.tabId);
+    if (findIndexTab === -1) return;
+    const copyTabs = [...tabs];
+    const newTab = {
+      ...copyTabs[findIndexTab],
+      url: data.url,
+    };
+    copyTabs[findIndexTab] = newTab;
+
+    setTabs(copyTabs);
+    setSelectedTab(newTab);
+    setDevMode('viewer');
+    setDesktopViewMode('dev');
+    setIsNewTabWindow(false);
+  };
+
+  useEffect(() => {
+    subscribeToEvent('appsDevModeUpdateTab', updateDevTabFunc);
+
+    return () => {
+      unsubscribeFromEvent('appsDevModeUpdateTab', updateDevTabFunc);
+    };
+  }, [tabs]);
+
+  const setSelectedTabFunc = (e) => {
+    const data = e.detail?.data;
+    const isDev = e.detail?.isDevMode;
+
+    setPendingVisualTabActivationId(null);
+    setDelayedVisualActiveTabId(null);
+    setEnteringTabIds((prev) => prev.filter((id) => id !== data?.tabId));
+    setIsAddTabFocused(false);
+    setIsAddTabWaitingForPointerMove(false);
+    addTabPointerOriginRef.current = null;
     setSelectedTab(data);
+    if (isDev) {
+      setDesktopViewMode('dev');
+      setDevMode('viewer');
+    } else {
+      setDesktopViewMode('apps');
+      setMode('viewer');
+    }
+    tabsTokenRef.current += 1;
+    const tabsToken = tabsTokenRef.current;
     setTimeout(() => {
       executeEvent('setTabsToNav', {
         data: {
           tabs: tabs,
           selectedTab: data,
           isNewTabWindow: isNewTabWindow,
+          tabsToken,
         },
       });
     }, 100);
@@ -392,19 +991,76 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
     // Clear session permissions for this tab
     clearSessionPermissionsByTabId(tabId);
 
+    recentTabIdsRef.current = recentTabIdsRef.current.filter(
+      (id) => id !== tabId
+    );
+
+    const wasClosingActive = selectedTab?.tabId === tabId;
     const copyTabs = [...tabs].filter((tab) => tab?.tabId !== tabId);
+    const remainingIds = new Set(copyTabs.map((t) => t.tabId));
+
+    setEnteringTabIds((prev) => prev.filter((id) => id !== tabId));
+    setPendingVisualTabActivationId((prev) => (prev === tabId ? null : prev));
+    setDelayedVisualActiveTabId((prev) => (prev === tabId ? null : prev));
+    setIsAddTabWaitingForPointerMove(false);
+    addTabPointerOriginRef.current = null;
     if (copyTabs?.length === 0) {
-      setMode('home');
+      recentTabIdsRef.current = [];
+      setTabs(copyTabs);
+      setSelectedTab(null);
+      tabsTokenRef.current += 1;
+      const tabsToken = tabsTokenRef.current;
+      executeEvent('setTabsToNav', {
+        data: {
+          tabs: copyTabs,
+          selectedTab: null,
+          tabsToken,
+        },
+      });
+      executeEvent('forceNavClear', { data: { tabsToken } });
+      executeEvent('clearNavInput', {});
+      returnFromAppsMode();
+      window.setTimeout(() => {
+        setMode('home');
+        setDevMode('home');
+      }, 0);
+      return;
+    }
+
+    let nextTab = null;
+    if (
+      !wasClosingActive &&
+      selectedTab?.tabId &&
+      remainingIds.has(selectedTab.tabId)
+    ) {
+      nextTab = selectedTab;
+    } else if (wasClosingActive) {
+      nextTab =
+        pickNextTabFromMru(copyTabs, recentTabIdsRef.current) ||
+        positionalTabAfterClose(copyTabs, tabId, tabs);
     } else {
-      setSelectedTab(copyTabs[0]);
+      nextTab = copyTabs[0] ?? null;
     }
+
     setTabs(copyTabs);
-    setSelectedTab(copyTabs[0]);
+    setSelectedTab(nextTab);
+    if (wasClosingActive && nextTab) {
+      if (isLocalDevTab(nextTab)) {
+        setDesktopViewMode('dev');
+        setDevMode('viewer');
+      } else {
+        setDesktopViewMode('apps');
+        setMode('viewer');
+      }
+    }
+    tabsTokenRef.current += 1;
+    const tabsToken = tabsTokenRef.current;
     setTimeout(() => {
       executeEvent('setTabsToNav', {
         data: {
           tabs: copyTabs,
-          selectedTab: copyTabs[0],
+          selectedTab: nextTab,
+          tabsToken,
         },
       });
     }, 400);
@@ -446,9 +1102,19 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
     };
   }, [tabs]);
 
+  useEffect(() => {
+    subscribeToEvent('removeTabDevMode', removeTabFunc);
+
+    return () => {
+      unsubscribeFromEvent('removeTabDevMode', removeTabFunc);
+    };
+  }, [tabs]);
+
   const setNewTabWindowFunc = (e) => {
     setIsNewTabWindow(true);
+    setIsAddTabFocused(true);
     setSelectedTab(null);
+    setDesktopViewMode('apps');
   };
 
   useEffect(() => {
@@ -459,45 +1125,104 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
     };
   }, [tabs]);
 
-  const openAppsLibrarySearchFunc = useCallback((e) => {
-    const query = e.detail?.data?.query || '';
+  const devModeNewTabWindowFunc = () => {
+    setIsNewTabWindow(true);
     setSelectedTab(null);
-    setIsNewTabWindow(false);
-    setLibrarySearchRequest({
-      nonce: Date.now(),
-      query,
-    });
-    setMode('library');
+    setDevMode('viewer');
+    setDesktopViewMode('dev');
+  };
+
+  useEffect(() => {
+    subscribeToEvent('devModeNewTabWindow', devModeNewTabWindowFunc);
+
+    return () => {
+      unsubscribeFromEvent('devModeNewTabWindow', devModeNewTabWindowFunc);
+    };
   }, []);
 
+  const openAppsLibrarySearchFunc = useCallback(
+    (e) => {
+      const query = e.detail?.data?.query || '';
+      setDesktopViewMode('apps');
+      setIsAddTabFocused(true);
+      setSelectedTab(null);
+      setIsNewTabWindow(false);
+      setLibrarySearchRequest({
+        nonce: Date.now(),
+        query,
+      });
+      setMode('library');
+    },
+    [setDesktopViewMode, setMode]
+  );
+
   useEffect(() => {
     subscribeToEvent('openAppsLibrarySearch', openAppsLibrarySearchFunc);
 
+    return () => {
+      unsubscribeFromEvent('openAppsLibrarySearch', openAppsLibrarySearchFunc);
+    };
+  }, [openAppsLibrarySearchFunc]);
+
+  useEffect(() => {
+    const handleSidebarOverlayVisibility = (e: CustomEvent) => {
+      const isVisible = !!e.detail?.data?.isVisible;
+      const width = Number(e.detail?.data?.width || 0);
+      setSidebarOffsetPx(isVisible ? width : 0);
+    };
+
+    subscribeToEvent(
+      'sidebarOverlayVisibility',
+      handleSidebarOverlayVisibility
+    );
+
     return () => {
       unsubscribeFromEvent(
-        'openAppsLibrarySearch',
-        openAppsLibrarySearchFunc
+        'sidebarOverlayVisibility',
+        handleSidebarOverlayVisibility
       );
     };
-  }, [openAppsLibrarySearchFunc]);
+  }, []);
 
   const appsContentHeight = `calc(100vh - ${appChromeOffsetPx} - ${APPS_HORIZONTAL_TAB_HEIGHT_PX}px)`;
 
   const openDashboardFromTabs = useCallback(() => {
+    setIsAddTabFocused(true);
+    setIsAddTabWaitingForPointerMove(false);
+    addTabPointerOriginRef.current = null;
+    setPendingVisualTabActivationId(null);
+    setDelayedVisualActiveTabId(null);
     setSelectedTab(null);
     setLibrarySearchRequest({
       nonce: Date.now(),
       query: '',
     });
-    setMode('viewer');
-    setIsNewTabWindow(true);
     executeEvent('open-apps-mode', {});
+    setMode('home');
+    setIsNewTabWindow(false);
   }, [setIsNewTabWindow, setMode]);
 
+  const returnFromAppsMode = useCallback(() => {
+    executeEvent('return-from-apps-mode', {});
+  }, []);
+
   const duplicateTab = useCallback(
     (tab) => {
       if (!tab) return;
 
+      if (isLocalDevTab(tab)) {
+        executeEvent('appsDevModeAddTab', {
+          data: {
+            afterTabId: tab?.tabId,
+            url: tab.url,
+            customIcon: tab.customIcon,
+            name: tab.name,
+          },
+        });
+        executeEvent('open-dev-mode', {});
+        return;
+      }
+
       const currentLink = tab?.tabId
         ? navigationController?.[tab.tabId]?.currentLink || ''
         : '';
@@ -507,6 +1232,7 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
 
       executeEvent('addTab', {
         data: {
+          afterTabId: tab?.tabId,
           ...tab,
           identifier: parsedLink?.identifier ?? tab?.identifier,
           name: parsedLink?.name ?? tab?.name,
@@ -519,12 +1245,191 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
     [navigationController]
   );
 
+  const closeAllTabs = useCallback(() => {
+    tabs.forEach((tab) => {
+      if (tab?.tabId) {
+        clearSessionPermissionsByTabId(tab.tabId);
+      }
+    });
+    recentTabIdsRef.current = [];
+    setTabs([]);
+    setSelectedTab(null);
+    setIsAddTabFocused(false);
+    setIsAddTabWaitingForPointerMove(false);
+    addTabPointerOriginRef.current = null;
+    setIsNewTabWindow(false);
+    executeEvent('clearNavInput', {});
+    tabsTokenRef.current += 1;
+    executeEvent('setTabsToNav', {
+      data: {
+        tabs: [],
+        selectedTab: null,
+        isNewTabWindow: false,
+        tabsToken: tabsTokenRef.current,
+      },
+    });
+    executeEvent('forceNavClear', {
+      data: { tabsToken: tabsTokenRef.current },
+    });
+    setMode('home');
+    setDevMode('home');
+    returnFromAppsMode();
+    window.setTimeout(() => {
+      setMode('home');
+      setDevMode('home');
+    }, 0);
+  }, [tabs, returnFromAppsMode, setIsNewTabWindow, setMode, setDevMode]);
+
+  useEffect(() => {
+    if (!show) {
+      setIsAddTabFocused(false);
+      setIsAddTabWaitingForPointerMove(false);
+      addTabPointerOriginRef.current = null;
+      setPendingVisualTabActivationId(null);
+      setDelayedVisualActiveTabId(null);
+    }
+  }, [show]);
+
+  useEffect(() => {
+    if (tabs.length === 0 && selectedTab) {
+      setSelectedTab(null);
+    }
+
+    if (
+      tabs.length === 0 &&
+      !isNewTabWindow &&
+      (mode === 'viewer' || devMode === 'viewer')
+    ) {
+      returnFromAppsMode();
+      window.setTimeout(() => {
+        setMode('home');
+        setDevMode('home');
+      }, 0);
+    }
+  }, [
+    tabs.length,
+    selectedTab,
+    isNewTabWindow,
+    mode,
+    devMode,
+    returnFromAppsMode,
+    setMode,
+    setDevMode,
+  ]);
+
+  useEffect(() => {
+    const inViewer =
+      desktopViewMode === 'dev' ? devMode === 'viewer' : mode === 'viewer';
+    if (!inViewer || isNewTabWindow || tabs.length === 0) {
+      return;
+    }
+
+    const selectedTabId = selectedTab?.tabId;
+    const selectedTabStillExists =
+      !!selectedTabId && tabs.some((tab) => tab?.tabId === selectedTabId);
+
+    if (selectedTabStillExists) {
+      return;
+    }
+
+    const fallbackTab =
+      pickNextTabFromMru(tabs, recentTabIdsRef.current) ||
+      tabs[tabs.length - 1] ||
+      tabs[0];
+    if (!fallbackTab) {
+      return;
+    }
+
+    setSelectedTab(fallbackTab);
+    if (isLocalDevTab(fallbackTab)) {
+      setDesktopViewMode('dev');
+      setDevMode('viewer');
+    } else {
+      setDesktopViewMode('apps');
+      setMode('viewer');
+    }
+    tabsTokenRef.current += 1;
+    const tabsToken = tabsTokenRef.current;
+    window.setTimeout(() => {
+      executeEvent('setTabsToNav', {
+        data: {
+          tabs,
+          selectedTab: fallbackTab,
+          isNewTabWindow: false,
+          tabsToken,
+        },
+      });
+    }, 0);
+  }, [
+    isNewTabWindow,
+    mode,
+    devMode,
+    desktopViewMode,
+    selectedTab,
+    tabs,
+    setDesktopViewMode,
+    setDevMode,
+    setMode,
+  ]);
+
+  const scheduleTabPointerUnlock = useCallback(() => {
+    if (tabPointerUnlockTimerRef.current !== null) {
+      clearTimeout(tabPointerUnlockTimerRef.current);
+    }
+    tabPointerUnlockTimerRef.current = setTimeout(() => {
+      tabInteractionLockedRef.current = false;
+      tabPointerUnlockTimerRef.current = null;
+    }, 200);
+  }, []);
+
+  const handleTabDragStart = useCallback(() => {
+    if (tabPointerUnlockTimerRef.current !== null) {
+      clearTimeout(tabPointerUnlockTimerRef.current);
+      tabPointerUnlockTimerRef.current = null;
+    }
+    tabInteractionLockedRef.current = true;
+  }, []);
+
+  const handleTabDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      if (over && active.id !== over.id) {
+        setTabs((prev) => {
+          const oldIndex = prev.findIndex((tab) => tab?.tabId === active.id);
+          const newIndex = prev.findIndex((tab) => tab?.tabId === over.id);
+
+          if (oldIndex === -1 || newIndex === -1) return prev;
+          return arrayMove(prev, oldIndex, newIndex);
+        });
+      }
+      scheduleTabPointerUnlock();
+    },
+    [scheduleTabPointerUnlock]
+  );
+
+  const handleTabDragCancel = useCallback(() => {
+    scheduleTabPointerUnlock();
+  }, [scheduleTabPointerUnlock]);
+
+  const hasOpenTabs = tabs.length > 0;
+  const hideAppsShellOffScreen = !show && hasOpenTabs;
+
   return (
     <AppsParent
       sx={{
+        display: hideAppsShellOffScreen || show ? 'flex' : 'none',
         flexDirection: 'row',
-        left: !show && '-200vw',
-        position: !show && 'fixed',
+        ...(hideAppsShellOffScreen
+          ? {
+              height: `calc(100vh - ${appChromeOffsetPx})`,
+              left: '-200vw',
+              maxWidth: '100vw',
+              pointerEvents: 'none',
+              position: 'fixed',
+              top: 0,
+              width: '100%',
+            }
+          : {}),
       }}
     >
       <RatingsCacheInitializer />
@@ -536,38 +1441,126 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
           width: '100%',
         }}
       >
-        <AppsHorizontalTabBar>
-          <AppsHorizontalTabScroller>
-            {tabs.map((tab) => (
-              <TabComponent
-                key={tab?.tabId}
-                app={tab}
-                isSelected={tab?.tabId === selectedTab?.tabId}
-                onDuplicate={() => duplicateTab(tab)}
-                onClose={() => {
-                  executeEvent('removeTab', {
-                    data: tab,
-                  });
-                }}
-                onSelect={() => {
-                  executeEvent('open-apps-mode', {});
-                  executeEvent('setSelectedTab', {
-                    data: tab,
-                  });
-                }}
-              />
-            ))}
+        <AppsHorizontalTabBar
+          sx={{
+            transition: `opacity ${show ? '200ms ease-out' : '140ms ease-in'}, transform ${show ? '200ms ease-out' : '140ms ease-in'}`,
+            opacity: show ? 1 : 0,
+            transform: show ? 'translateY(0px)' : 'translateY(-10px)',
+            willChange: 'opacity, transform',
+            pointerEvents: show ? 'auto' : 'none',
+          }}
+        >
+          <AppsHorizontalTabScroller
+            ref={tabScrollerRef}
+            sx={{
+              alignItems: 'stretch',
+              gap: '2px',
+              paddingLeft: `calc(6px + ${sidebarOffsetPx}px)`,
+              transition: `padding-left ${SIDEBAR_CHROME_TRANSITION}`,
+            }}
+          >
+            <DndContext
+              collisionDetection={closestCenter}
+              modifiers={[restrictTabsToHorizontalAxis, restrictTabsToStrip]}
+              onDragCancel={handleTabDragCancel}
+              onDragEnd={handleTabDragEnd}
+              onDragStart={handleTabDragStart}
+              sensors={sensors}
+            >
+              <SortableContext
+                items={tabs.map((tab) => tab?.tabId)}
+                strategy={horizontalListSortingStrategy}
+              >
+                <Box
+                  sx={{
+                    display: 'flex',
+                    gap: '2px',
+                    ...(tabStripCompresses
+                      ? {
+                          flex: '1 1 auto',
+                          maxWidth: '100%',
+                          minWidth: 0,
+                          overflow: 'hidden',
+                        }
+                      : {
+                          flex: '0 0 auto',
+                          overflow: 'visible',
+                          width: 'max-content',
+                        }),
+                  }}
+                >
+                  {tabs.map((tab) => (
+                    <TabComponent
+                      key={tab?.tabId}
+                      app={tab}
+                      isDevApp={isLocalDevTab(tab)}
+                      isSelected={tab?.tabId === selectedTab?.tabId}
+                      tabInteractionLockedRef={tabInteractionLockedRef}
+                      tabStripCompresses={tabStripCompresses}
+                      isEntering={enteringTabIds.includes(tab?.tabId)}
+                      isVisuallySelected={
+                        delayedVisualActiveTabId === tab?.tabId ||
+                        (tab?.tabId === selectedTab?.tabId &&
+                          pendingVisualTabActivationId !== tab?.tabId)
+                      }
+                      onCloseAll={closeAllTabs}
+                      onDuplicate={() => duplicateTab(tab)}
+                      onClose={() => {
+                        executeEvent('removeTab', {
+                          data: tab,
+                        });
+                      }}
+                      onSelect={() => {
+                        if (isLocalDevTab(tab)) {
+                          executeEvent('open-dev-mode', {});
+                          executeEvent('setSelectedTab', {
+                            data: tab,
+                            isDevMode: true,
+                          });
+                        } else {
+                          executeEvent('open-apps-mode', {});
+                          executeEvent('setSelectedTab', {
+                            data: tab,
+                          });
+                        }
+                      }}
+                    />
+                  ))}
+                </Box>
+              </SortableContext>
+            </DndContext>
 
             <AppsHorizontalTabAddButton
+              ref={tabAddButtonRef}
               disableRipple
               onClick={openDashboardFromTabs}
               sx={(theme) => ({
+                backgroundColor: isAddTabFocused
+                  ? alpha(
+                      theme.palette.primary.main,
+                      theme.palette.mode === 'dark' ? 0.78 : 0.88
+                    )
+                  : undefined,
+                borderColor: isAddTabFocused ? 'transparent' : undefined,
+                color: isAddTabFocused
+                  ? theme.palette.mode === 'dark'
+                    ? theme.palette.common.white
+                    : theme.palette.primary.contrastText
+                  : undefined,
                 '&:hover': {
-                  backgroundColor:
-                    theme.palette.mode === 'dark'
+                  backgroundColor: isAddTabFocused
+                    ? alpha(
+                        theme.palette.primary.main,
+                        theme.palette.mode === 'dark' ? 0.86 : 0.94
+                      )
+                    : theme.palette.mode === 'dark'
                       ? 'rgba(255, 255, 255, 0.08)'
                       : 'rgba(0, 0, 0, 0.06)',
-                  color: theme.palette.text.primary,
+                  color: isAddTabFocused
+                    ? theme.palette.mode === 'dark'
+                      ? theme.palette.common.white
+                      : theme.palette.primary.contrastText
+                    : theme.palette.text.primary,
                 },
               })}
             >
@@ -584,7 +1577,7 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
             width: '100%',
           }}
         >
-          {mode === 'home' && (
+          {desktopViewMode === 'apps' && mode === 'home' && (
             <Box
               sx={{
                 display: 'flex',
@@ -607,6 +1600,33 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
             </Box>
           )}
 
+          {desktopViewMode === 'dev' &&
+            devMode === 'home' &&
+            !isNewTabWindow && (
+              <Box
+                sx={{
+                  boxSizing: 'border-box',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  height: appsContentHeight,
+                  overflow: 'auto',
+                  pl: `${DEV_MODE_SIDEBAR_SAFE_INSET_PX}px`,
+                  pr: '24px',
+                  width: '100%',
+                }}
+              >
+                <Spacer height="30px" />
+
+                <AppsDevModeHome
+                  availableQapps={availableQapps}
+                  myApp={null}
+                  myName={myName}
+                  myWebsite={null}
+                  setMode={setDevMode}
+                />
+              </Box>
+            )}
+
           <AppsLibraryDesktop
             availableQapps={availableQapps}
             categories={categories}
@@ -617,13 +1637,15 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
               refreshRatings();
             }}
             hasPublishApp={!!(myApp || myWebsite)}
-            isShow={mode === 'library' && !selectedTab}
+            isShow={
+              desktopViewMode === 'apps' && mode === 'library' && !selectedTab
+            }
             myName={myName}
             myAddress={myAddress}
             setMode={setMode}
           />
 
-          {mode === 'appInfo' && !selectedTab && (
+          {desktopViewMode === 'apps' && mode === 'appInfo' && !selectedTab && (
             <Box
               sx={{
                 height: appsContentHeight,
@@ -635,29 +1657,34 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
             </Box>
           )}
 
-          {mode === 'appInfo-from-category' && !selectedTab && (
-            <Box
-              sx={{
-                height: appsContentHeight,
-                overflow: 'auto',
-                width: '100%',
-              }}
-            >
-              <AppInfo app={selectedAppInfo} myName={myName} />
-            </Box>
-          )}
+          {desktopViewMode === 'apps' &&
+            mode === 'appInfo-from-category' &&
+            !selectedTab && (
+              <Box
+                sx={{
+                  height: appsContentHeight,
+                  overflow: 'auto',
+                  width: '100%',
+                }}
+              >
+                <AppInfo app={selectedAppInfo} myName={myName} />
+              </Box>
+            )}
 
           <AppsCategoryDesktop
             availableQapps={availableQapps}
             contentHeight={appsContentHeight}
-            isShow={mode === 'category' && !selectedTab}
+            isShow={
+              desktopViewMode === 'apps' && mode === 'category' && !selectedTab
+            }
             category={selectedCategory}
             myName={myName}
           />
 
-          {(mode === 'publish' ||
-            mode === 'publish-app' ||
-            mode === 'publish-website') &&
+          {desktopViewMode === 'apps' &&
+            (mode === 'publish' ||
+              mode === 'publish-app' ||
+              mode === 'publish-website') &&
             !selectedTab && (
               <Box
                 sx={{
@@ -684,7 +1711,43 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
               </Box>
             )}
 
-          {tabs.map((tab) => {
+          {viewerTabs.map((tab) => {
+            const hideContentForDevHome =
+              desktopViewMode === 'dev' &&
+              devMode === 'home' &&
+              !isNewTabWindow;
+            const internalTabContent = renderInternalTab?.({
+              hide: isNewTabWindow,
+              isSelected: tab?.tabId === selectedTab?.tabId,
+              tab,
+            });
+            if (internalTabContent) {
+              const isInternalTabActive =
+                tab?.tabId === selectedTab?.tabId &&
+                !isNewTabWindow &&
+                !hideContentForDevHome;
+              return (
+                <Box
+                  key={tab?.tabId}
+                  sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                    minHeight: 0,
+                    overflow: 'hidden',
+                    width: '100%',
+                    ...(!isInternalTabActive
+                      ? {
+                          left: '-200vw',
+                          position: 'fixed',
+                        }
+                      : {}),
+                  }}
+                >
+                  {internalTabContent}
+                </Box>
+              );
+            }
             if (!iframeRefs.current[tab.tabId]) {
               iframeRefs.current[tab.tabId] = createRef();
             }
@@ -692,8 +1755,8 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
               <AppViewerContainer
                 app={tab}
                 customHeight="100%"
-                hide={isNewTabWindow}
-                isDevMode={tab?.service ? false : true}
+                hide={isNewTabWindow || hideContentForDevHome}
+                isDevMode={isLocalDevTab(tab)}
                 isSelected={tab?.tabId === selectedTab?.tabId}
                 key={tab?.tabId}
                 ref={iframeRefs.current[tab.tabId]}
@@ -701,28 +1764,54 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
             );
           })}
 
-          {isNewTabWindow && mode === 'viewer' && (
-            <Box
-              sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                height: appsContentHeight,
-                overflow: 'auto',
-                width: '100%',
-              }}
-            >
-              <Spacer height="30px" />
+          {isNewTabWindow &&
+            desktopViewMode === 'apps' &&
+            mode === 'viewer' && (
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  height: appsContentHeight,
+                  overflow: 'auto',
+                  width: '100%',
+                }}
+              >
+                <Spacer height="30px" />
 
-              <AppsHomeDesktop
-                availableQapps={availableQapps}
-                myApp={myApp}
-                myName={myName}
-                myWebsite={myWebsite}
-                myAddress={myAddress}
-                setMode={setMode}
-              />
-            </Box>
-          )}
+                <AppsHomeDesktop
+                  availableQapps={availableQapps}
+                  myApp={myApp}
+                  myName={myName}
+                  myWebsite={myWebsite}
+                  myAddress={myAddress}
+                  setMode={setMode}
+                />
+              </Box>
+            )}
+
+          {isNewTabWindow &&
+            desktopViewMode === 'dev' &&
+            devMode === 'viewer' && (
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  height: appsContentHeight,
+                  overflow: 'auto',
+                  width: '100%',
+                }}
+              >
+                <Spacer height="30px" />
+
+                <AppsDevModeHome
+                  availableQapps={availableQapps}
+                  myApp={null}
+                  myName={myName}
+                  myWebsite={null}
+                  setMode={setDevMode}
+                />
+              </Box>
+            )}
         </Box>
       </Box>
 
@@ -731,14 +1820,20 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
         onClose={handleCloseTabDialogCancel}
         aria-labelledby="close-tab-dialog-title"
         aria-describedby="close-tab-dialog-description"
+        PaperProps={{
+          sx: getDialogPaperSx(theme, { maxWidth: 430 }),
+        }}
       >
-        <DialogTitle id="close-tab-dialog-title">
+        <DialogTitle id="close-tab-dialog-title" sx={dialogTitleSx}>
           {t('question:permission.close_tab_confirmation', {
             postProcess: 'capitalizeFirstChar',
           })}
         </DialogTitle>
-        <DialogContent>
-          <DialogContentText id="close-tab-dialog-description">
+        <DialogContent sx={dialogContentSx}>
+          <DialogContentText
+            id="close-tab-dialog-description"
+            sx={dialogContentTextSx}
+          >
             {t('question:permission.close_tab_permission', {
               postProcess: 'capitalizeFirstChar',
             })}
@@ -746,26 +1841,31 @@ export const AppsDesktop = ({ mode, setMode, show }) => {
           {pendingTabToRemove?.lockMessage && (
             <DialogContentText
               sx={{
-                marginTop: 2,
-                fontWeight: 500,
-                color: theme.palette.text.primary,
+                ...dialogContentTextSx,
+                color: 'rgba(246,248,252,0.9)',
+                fontWeight: 600,
+                marginTop: 1.4,
               }}
             >
               {pendingTabToRemove.lockMessage}
             </DialogContentText>
           )}
         </DialogContent>
-        <DialogActions>
-          <Button onClick={handleCloseTabDialogCancel} color="primary">
+        <DialogActions sx={dialogActionsSx}>
+          <Button
+            onClick={handleCloseTabDialogCancel}
+            variant="outlined"
+            sx={getDialogSecondaryButtonSx(theme)}
+          >
             {t('core:action.cancel', {
               postProcess: 'capitalizeFirstChar',
             })}
           </Button>
           <Button
             onClick={handleCloseTabDialogConfirm}
-            color="error"
             variant="contained"
             autoFocus
+            sx={getDialogDangerButtonSx()}
           >
             {t('question:permission.close_tab', {
               postProcess: 'capitalizeFirstChar',
diff --git a/src/components/Apps/AppsDevMode.tsx b/src/components/Apps/AppsDevMode.tsx
deleted file mode 100644
index 69f3bd1f..00000000
--- a/src/components/Apps/AppsDevMode.tsx
+++ /dev/null
@@ -1,288 +0,0 @@
-import { createRef, useEffect, useRef, useState } from 'react';
-import { useAtomValue } from 'jotai';
-import { userInfoAtom, hasUnreadGroupsAtom } from '../../atoms/global';
-import { AppsDevModeHome } from './AppsDevModeHome';
-import { Spacer } from '../../common/Spacer';
-import {
-  executeEvent,
-  subscribeToEvent,
-  unsubscribeFromEvent,
-} from '../../utils/events';
-import { AppsParent } from './Apps-styles';
-import AppViewerContainer from './AppViewerContainer';
-import ShortUniqueId from 'short-unique-id';
-import { Box } from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { appChromeOffsetPx } from '../Desktop/CustomTitleBar';
-
-const uid = new ShortUniqueId({ length: 8 });
-
-export const AppsDevMode = ({
-  mode,
-  setMode,
-  show,
-  goToHome,
-  setDesktopSideView,
-  hasUnreadDirects,
-  isDirects,
-  isGroups,
-  toggleSideViewGroups,
-  toggleSideViewDirects,
-  setDesktopViewMode,
-  desktopViewMode,
-  isApps,
-}) => {
-  const userInfo = useAtomValue(userInfoAtom);
-  const hasUnreadGroups = useAtomValue(hasUnreadGroupsAtom);
-  const myName = userInfo?.name;
-  const [availableQapps, setAvailableQapps] = useState([]);
-  const [selectedAppInfo, setSelectedAppInfo] = useState(null);
-  const [selectedCategory, setSelectedCategory] = useState(null);
-  const [tabs, setTabs] = useState([]);
-  const [selectedTab, setSelectedTab] = useState(null);
-  const [isNewTabWindow, setIsNewTabWindow] = useState(false);
-  const [categories, setCategories] = useState([]);
-  const iframeRefs = useRef({});
-  const { t } = useTranslation([
-    'auth',
-    'core',
-    'group',
-    'question',
-    'tutorial',
-  ]);
-
-  useEffect(() => {
-    setTimeout(() => {
-      executeEvent('appsDevModeSetTabsToNav', {
-        data: {
-          tabs: tabs,
-          selectedTab: selectedTab,
-          isNewTabWindow: isNewTabWindow,
-        },
-      });
-    }, 100);
-  }, [show, tabs, selectedTab, isNewTabWindow]);
-
-  const navigateBackFunc = (e) => {
-    if (
-      [
-        'category',
-        'appInfo-from-category',
-        'appInfo',
-        'library',
-        'publish',
-      ].includes(mode)
-    ) {
-      // Handle the various modes as needed
-      if (mode === 'category') {
-        setMode('library');
-        setSelectedCategory(null);
-      } else if (mode === 'appInfo-from-category') {
-        setMode('category');
-      } else if (mode === 'appInfo') {
-        setMode('library');
-      } else if (mode === 'library') {
-        if (isNewTabWindow) {
-          setMode('viewer');
-        } else {
-          setMode('home');
-        }
-      } else if (mode === 'publish') {
-        setMode('library');
-      }
-    } else if (selectedTab?.tabId) {
-      executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {});
-    }
-  };
-
-  useEffect(() => {
-    subscribeToEvent('devModeNavigateBack', navigateBackFunc);
-
-    return () => {
-      unsubscribeFromEvent('devModeNavigateBack', navigateBackFunc);
-    };
-  }, [mode, selectedTab]);
-
-  const addTabFunc = (e) => {
-    const data = e.detail?.data;
-    const newTab = {
-      ...data,
-      tabId: uid.rnd(),
-    };
-    setTabs((prev) => [...prev, newTab]);
-    setSelectedTab(newTab);
-    setMode('viewer');
-    setIsNewTabWindow(false);
-  };
-
-  useEffect(() => {
-    subscribeToEvent('appsDevModeAddTab', addTabFunc);
-
-    return () => {
-      unsubscribeFromEvent('appsDevModeAddTab', addTabFunc);
-    };
-  }, [tabs]);
-
-  const updateTabFunc = (e) => {
-    const data = e.detail?.data;
-    if (!data.tabId) return;
-    const findIndexTab = tabs.findIndex((tab) => tab?.tabId === data?.tabId);
-    if (findIndexTab === -1) return;
-    const copyTabs = [...tabs];
-    const newTab = {
-      ...copyTabs[findIndexTab],
-      url: data.url,
-    };
-    copyTabs[findIndexTab] = newTab;
-
-    setTabs(copyTabs);
-    setSelectedTab(newTab);
-    setMode('viewer');
-    setIsNewTabWindow(false);
-  };
-
-  useEffect(() => {
-    subscribeToEvent('appsDevModeUpdateTab', updateTabFunc);
-
-    return () => {
-      unsubscribeFromEvent('appsDevModeUpdateTab', updateTabFunc);
-    };
-  }, [tabs]);
-
-  const setSelectedTabFunc = (e) => {
-    const data = e.detail?.data;
-    if (!e.detail?.isDevMode) return;
-    setSelectedTab(data);
-    setTimeout(() => {
-      executeEvent('appsDevModeSetTabsToNav', {
-        data: {
-          tabs: tabs,
-          selectedTab: data,
-          isNewTabWindow: isNewTabWindow,
-        },
-      });
-    }, 100);
-    setIsNewTabWindow(false);
-  };
-
-  useEffect(() => {
-    subscribeToEvent('setSelectedTabDevMode', setSelectedTabFunc);
-
-    return () => {
-      unsubscribeFromEvent('setSelectedTabDevMode', setSelectedTabFunc);
-    };
-  }, [tabs, isNewTabWindow]);
-
-  const removeTabFunc = (e) => {
-    const data = e.detail?.data;
-    const copyTabs = [...tabs].filter((tab) => tab?.tabId !== data?.tabId);
-    if (copyTabs?.length === 0) {
-      setMode('home');
-    } else {
-      setSelectedTab(copyTabs[0]);
-    }
-    setTabs(copyTabs);
-    setSelectedTab(copyTabs[0]);
-    setTimeout(() => {
-      executeEvent('appsDevModeSetTabsToNav', {
-        data: {
-          tabs: copyTabs,
-          selectedTab: copyTabs[0],
-        },
-      });
-    }, 400);
-  };
-
-  useEffect(() => {
-    subscribeToEvent('removeTabDevMode', removeTabFunc);
-
-    return () => {
-      unsubscribeFromEvent('removeTabDevMode', removeTabFunc);
-    };
-  }, [tabs]);
-
-  const setNewTabWindowFunc = (e) => {
-    setIsNewTabWindow(true);
-    setSelectedTab(null);
-  };
-
-  useEffect(() => {
-    subscribeToEvent('devModeNewTabWindow', setNewTabWindowFunc);
-
-    return () => {
-      unsubscribeFromEvent('devModeNewTabWindow', setNewTabWindowFunc);
-    };
-  }, [tabs]);
-
-  return (
-    <AppsParent
-      sx={{
-        flexDirection: 'row',
-        left: !show && '-200vw',
-        position: !show && 'fixed',
-      }}
-    >
-      {mode === 'home' && (
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: `calc(100vh - ${appChromeOffsetPx} )`,
-            overflow: 'auto',
-            width: 'auto',
-          }}
-        >
-          <Spacer height="30px" />
-
-          <AppsDevModeHome
-            myName={myName}
-            availableQapps={availableQapps}
-            setMode={setMode}
-            myApp={null}
-            myWebsite={null}
-          />
-        </Box>
-      )}
-
-      {tabs.map((tab) => {
-        if (!iframeRefs.current[tab.tabId]) {
-          iframeRefs.current[tab.tabId] = createRef();
-        }
-        return (
-          <AppViewerContainer
-            key={tab?.tabId}
-            hide={isNewTabWindow}
-            isSelected={tab?.tabId === selectedTab?.tabId}
-            app={tab}
-            ref={iframeRefs.current[tab.tabId]}
-            isDevMode={tab?.service ? false : true}
-          />
-        );
-      })}
-
-      {isNewTabWindow && mode === 'viewer' && (
-        <>
-          <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            height: `calc(100vh - ${appChromeOffsetPx} )`,
-            overflow: 'auto',
-            width: 'auto',
-          }}
-          >
-            <Spacer height="30px" />
-
-            <AppsDevModeHome
-              myName={myName}
-              availableQapps={availableQapps}
-              setMode={setMode}
-              myApp={null}
-              myWebsite={null}
-            />
-          </Box>
-        </>
-      )}
-    </AppsParent>
-  );
-};
diff --git a/src/components/Apps/AppsHomeDesktop.tsx b/src/components/Apps/AppsHomeDesktop.tsx
index 868977f8..bd5e9adc 100644
--- a/src/components/Apps/AppsHomeDesktop.tsx
+++ b/src/components/Apps/AppsHomeDesktop.tsx
@@ -17,6 +17,7 @@ import {
   useTheme,
 } from '@mui/material';
 import AppsIcon from '@mui/icons-material/Apps';
+import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
 import SearchIcon from '@mui/icons-material/Search';
 import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
 import LinkIcon from '@mui/icons-material/Link';
@@ -455,6 +456,26 @@ export const AppsHomeDesktop = ({
           justifyContent: 'flex-start',
         }}
       >
+        <ButtonBase
+          onClick={() => {
+            executeEvent('open-home-mode', {});
+          }}
+        >
+          <AppCircleContainer
+            sx={{
+              gap: '10px',
+            }}
+          >
+            <AppCircle>
+              <HomeRoundedIcon />
+            </AppCircle>
+
+            <AppCircleLabel>
+              {t('core:home', { postProcess: 'capitalizeFirstChar' })}
+            </AppCircleLabel>
+          </AppCircleContainer>
+        </ButtonBase>
+
         <ButtonBase
           onClick={() => {
             setMode('library');
diff --git a/src/components/Apps/AppsLibrary/AppsTabs.tsx b/src/components/Apps/AppsLibrary/AppsTabs.tsx
index 1abae4ce..b5dfd8a4 100644
--- a/src/components/Apps/AppsLibrary/AppsTabs.tsx
+++ b/src/components/Apps/AppsLibrary/AppsTabs.tsx
@@ -10,6 +10,7 @@ export type AppsLibraryTabValue =
 
 interface AppsTabsProps {
   currentTab: AppsLibraryTabValue;
+  isSearchActive?: boolean;
   onTabChange: (tab: AppsLibraryTabValue) => void;
 }
 
@@ -29,6 +30,7 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
 const StyledTab = styled(Tab)(({ theme }) => ({
   borderRadius: '6px',
   color: theme.palette.text.secondary,
+  cursor: 'default',
   fontSize: '14px',
   fontWeight: 500,
   minHeight: '34px',
@@ -53,7 +55,11 @@ const TabsContainer = styled(Box)(({ theme }) => ({
   width: '100%',
 }));
 
-export const AppsTabs = ({ currentTab, onTabChange }: AppsTabsProps) => {
+export const AppsTabs = ({
+  currentTab,
+  isSearchActive = false,
+  onTabChange,
+}: AppsTabsProps) => {
   const { t } = useTranslation(['core']);
 
   const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
@@ -63,7 +69,7 @@ export const AppsTabs = ({ currentTab, onTabChange }: AppsTabsProps) => {
   return (
     <TabsContainer>
       <StyledTabs
-        value={currentTab}
+        value={isSearchActive ? false : currentTab}
         onChange={handleChange}
         aria-label={t('core:aria.apps_library_tabs', {
           defaultValue: 'Apps library navigation tabs',
diff --git a/src/components/Apps/AppsLibraryDesktop.tsx b/src/components/Apps/AppsLibraryDesktop.tsx
index 73cdf2d3..f313bc01 100644
--- a/src/components/Apps/AppsLibraryDesktop.tsx
+++ b/src/components/Apps/AppsLibraryDesktop.tsx
@@ -72,6 +72,7 @@ export const AppsLibraryDesktop = ({
   const [categoryFilter, setCategoryFilter] = useState('all');
   const [statusFilter, setStatusFilter] = useState<StatusFilterOption>('all');
   const theme = useTheme();
+  const isSearchActive = searchValue.trim().length > 0;
   const { t } = useTranslation([
     'auth',
     'core',
@@ -277,7 +278,11 @@ export const AppsLibraryDesktop = ({
               width: '100%',
             }}
           >
-            <AppsTabs currentTab={currentTab} onTabChange={handleTabChange} />
+            <AppsTabs
+              currentTab={currentTab}
+              isSearchActive={isSearchActive}
+              onTabChange={handleTabChange}
+            />
 
             <Box
               sx={{
diff --git a/src/components/Apps/AppsPrivate.tsx b/src/components/Apps/AppsPrivate.tsx
index 622b391d..0864f484 100644
--- a/src/components/Apps/AppsPrivate.tsx
+++ b/src/components/Apps/AppsPrivate.tsx
@@ -163,7 +163,38 @@ export const AppsPrivate = ({ myName, myAddress }) => {
 
   const publishPrivateApp = async () => {
     try {
-      if (selectedGroup === 0) return;
+      if (selectedGroup === 0) {
+        setOpenSnackGlobal(true);
+        setInfoSnackCustom({
+          type: 'error',
+          message: t('group:message.generic.no_selection', {
+            postProcess: 'capitalizeFirstChar',
+          }),
+        });
+        return;
+      }
+
+      if (!name || name === 0) {
+        setOpenSnackGlobal(true);
+        setInfoSnackCustom({
+          type: 'error',
+          message: t('core:action.select_name_app', {
+            postProcess: 'capitalizeFirstChar',
+          }),
+        });
+        return;
+      }
+
+      if (!file) {
+        setOpenSnackGlobal(true);
+        setInfoSnackCustom({
+          type: 'error',
+          message: t('core:message.generic.select_zip', {
+            postProcess: 'capitalizeFirstChar',
+          }),
+        });
+        return;
+      }
 
       if (!logo)
         throw new Error(
@@ -759,6 +790,10 @@ export const AppsPrivate = ({ myName, myAddress }) => {
 
                 <Button
                   disabled={
+                    !name ||
+                    name === 0 ||
+                    !file ||
+                    !logo ||
                     !newPrivateAppValues.name ||
                     !newPrivateAppValues.service ||
                     !newPrivateAppValues.identifier ||
diff --git a/src/components/Apps/TabComponent.tsx b/src/components/Apps/TabComponent.tsx
index 2248c58a..c95d070c 100644
--- a/src/components/Apps/TabComponent.tsx
+++ b/src/components/Apps/TabComponent.tsx
@@ -10,9 +10,16 @@ import {
 } from '@mui/material';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import CloseFullscreenRoundedIcon from '@mui/icons-material/CloseFullscreenRounded';
 import LockIcon from '@mui/icons-material/Lock';
-import { useState } from 'react';
+import { useRef, useState, type MutableRefObject } from 'react';
 import { alpha } from '@mui/material/styles';
+import { CSS } from '@dnd-kit/utilities';
+import { useSortable } from '@dnd-kit/sortable';
+import {
+  APP_BLUE_SURFACE_TEXT,
+  getBlueTier1PillSurface,
+} from '../../styles/blueMaterial';
 import {
   AppsHorizontalTabButton,
   AppsHorizontalTabLabel,
@@ -20,34 +27,132 @@ import {
 import { getBaseApiReact } from '../../App';
 import LogoSelected from '../../assets/svgs/LogoSelected.svg';
 
+function devTabLabel(app: any): string {
+  const base =
+    app?.privateAppProperties?.name || app?.metadata?.title || app?.name || '';
+  if (base) return base;
+  const url = app?.url;
+  if (typeof url === 'string' && url) {
+    try {
+      return new URL(url).hostname || url.slice(0, 28);
+    } catch {
+      return url.slice(0, 28);
+    }
+  }
+  return 'Dev';
+}
+
 type TabComponentProps = {
   app: any;
+  onCloseAll: () => void;
   onDuplicate: () => void;
+  isEntering?: boolean;
   isSelected: boolean;
+  isVisuallySelected?: boolean;
   onClose: () => void;
   onSelect: () => void;
+  /** Dev-mode / local preview tabs (label + icon only; same chrome as app tabs) */
+  isDevApp?: boolean;
+  /** When false and the strip is wide enough, tab stays fixed at ~180px (measured in AppsDesktop). */
+  tabStripCompresses?: boolean;
+  /** Mutable drag-lock shared from AppsDesktop to avoid rerenders during drag. */
+  tabInteractionLockedRef?: MutableRefObject<boolean>;
 };
 
 const TabComponent = ({
   app,
+  onCloseAll,
   onDuplicate,
+  isEntering = false,
   isSelected,
+  isVisuallySelected = isSelected,
   onClose,
   onSelect,
+  isDevApp = false,
+  tabStripCompresses = true,
+  tabInteractionLockedRef,
 }: TabComponentProps) => {
   const theme = useTheme();
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({
+    id: app?.tabId,
+  });
   const [menuPosition, setMenuPosition] = useState<{
     left: number;
     top: number;
   } | null>(null);
-  const label =
-    app?.privateAppProperties?.name || app?.metadata?.title || app?.name || '';
+  const localInteractionLockRef = useRef(false);
+  const interactionLockRef = tabInteractionLockedRef ?? localInteractionLockRef;
+
+  const treatAsDevApp = Boolean(isDevApp);
+  const label = treatAsDevApp
+    ? devTabLabel(app)
+    : app?.privateAppProperties?.name ||
+      app?.metadata?.title ||
+      app?.name ||
+      '';
+  const selectedTabSurface = getBlueTier1PillSurface(theme);
+  const selectedTabTextColor = APP_BLUE_SURFACE_TEXT;
+  const dndStyle = {
+    transform: CSS.Transform.toString(
+      transform
+        ? {
+            ...transform,
+            scaleX: 1,
+            scaleY: 1,
+          }
+        : null
+    ),
+    transition,
+    zIndex: isDragging ? 5 : 'auto',
+  };
 
   return (
     <AppsHorizontalTabButton
+      ref={setNodeRef}
       disableRipple
-      onClick={onSelect}
+      {...attributes}
+      {...listeners}
+      onClick={(event) => {
+        if (interactionLockRef.current) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        onSelect();
+      }}
+      onMouseDown={(event) => {
+        if (interactionLockRef.current) {
+          event.preventDefault();
+          return;
+        }
+        if (event.button === 1) {
+          event.preventDefault();
+        }
+      }}
+      onAuxClick={(event) => {
+        if (interactionLockRef.current) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        if (event.button !== 1) return;
+        event.preventDefault();
+        event.stopPropagation();
+        onClose();
+      }}
       onContextMenu={(event) => {
+        if (interactionLockRef.current) {
+          event.preventDefault();
+          setMenuPosition(null);
+          return;
+        }
         event.preventDefault();
         onSelect();
         setMenuPosition({
@@ -56,41 +161,73 @@ const TabComponent = ({
         });
       }}
       sx={{
-        backgroundColor: isSelected
-          ? alpha(theme.palette.primary.main, theme.palette.mode === 'dark' ? 0.78 : 0.88)
+        background: isVisuallySelected
+          ? selectedTabSurface.background
           : theme.palette.mode === 'dark'
             ? alpha(theme.palette.common.white, 0.03)
             : alpha(theme.palette.common.black, 0.03),
-        borderColor: isSelected
-          ? 'transparent'
+        borderColor: isVisuallySelected
+          ? alpha(theme.palette.common.white, theme.palette.mode === 'dark' ? 0.045 : 0.035)
           : theme.palette.mode === 'dark'
             ? alpha(theme.palette.common.white, 0.03)
             : alpha(theme.palette.common.black, 0.04),
-        boxShadow: 'none',
-        color: isSelected
-          ? theme.palette.primary.contrastText
+        boxShadow: isVisuallySelected ? selectedTabSurface.boxShadow : 'none',
+        color: isVisuallySelected
+          ? selectedTabTextColor
           : theme.palette.text.secondary,
-        opacity: 1,
+        cursor: 'default',
+        opacity: isEntering ? 0 : 1,
+        ...dndStyle,
+        transform: `${dndStyle.transform || ''}${isEntering ? ' scale(0.96)' : ''}`.trim(),
         transition:
-          'background-color 180ms ease, color 180ms ease, border-color 180ms ease',
+          `${transition ? `${transition}, ` : ''}background-color 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease, transform 180ms ease`,
+        animation: isEntering ? 'tabEntryFadeScale 190ms ease-out forwards' : 'none',
+        ...(isDragging && {
+          boxShadow:
+            theme.palette.mode === 'dark'
+              ? '0 10px 22px rgba(0,0,0,0.28)'
+              : '0 10px 22px rgba(0,0,0,0.12)',
+          opacity: 0.96,
+        }),
         '&:hover': {
-          backgroundColor: isSelected
-            ? alpha(theme.palette.primary.main, theme.palette.mode === 'dark' ? 0.86 : 0.94)
+          background: isVisuallySelected
+            ? selectedTabSurface.background
             : theme.palette.mode === 'dark'
               ? alpha(theme.palette.common.white, 0.06)
               : alpha(theme.palette.common.black, 0.06),
-          color: theme.palette.text.primary,
+          boxShadow: isVisuallySelected ? selectedTabSurface.boxShadow : undefined,
+          color: isVisuallySelected
+            ? selectedTabTextColor
+            : theme.palette.text.primary,
         },
+        '@keyframes tabEntryFadeScale': {
+          from: {
+            opacity: 0,
+            transform: `${dndStyle.transform || ''} scale(0.96)`.trim(),
+          },
+          to: {
+            opacity: 1,
+            transform: `${dndStyle.transform || ''} scale(1)`.trim(),
+          },
+        },
+        ...(!tabStripCompresses && {
+          flex: '0 0 180px',
+          flexShrink: 0,
+          maxWidth: '180px',
+          minWidth: '180px',
+          width: '180px',
+        }),
       }}
     >
       {app?.isPrivate && !app?.privateAppProperties?.logo ? (
         <Box
           sx={{
             alignItems: 'center',
-            color: isSelected
-              ? theme.palette.primary.contrastText
+            color: isVisuallySelected
+              ? selectedTabTextColor
               : theme.palette.text.secondary,
             display: 'flex',
+            flexShrink: 0,
             height: '22px',
             justifyContent: 'center',
             width: '22px',
@@ -98,9 +235,33 @@ const TabComponent = ({
         >
           <LockIcon sx={{ fontSize: 16 }} />
         </Box>
+      ) : treatAsDevApp ? (
+        <Avatar
+          sx={{
+            flexShrink: 0,
+            height: '22px',
+            width: '22px',
+          }}
+          alt={label}
+          src=""
+        >
+          <img
+            style={{
+              width: '22px',
+              height: 'auto',
+            }}
+            src={
+              app?.customIcon
+                ? app.customIcon
+                : LogoSelected
+            }
+            alt=""
+          />
+        </Avatar>
       ) : (
         <Avatar
           sx={{
+            flexShrink: 0,
             height: '22px',
             width: '22px',
           }}
@@ -126,8 +287,8 @@ const TabComponent = ({
 
       <AppsHorizontalTabLabel
         sx={{
-          color: isSelected
-            ? theme.palette.primary.contrastText
+          color: isVisuallySelected
+            ? selectedTabTextColor
             : theme.palette.text.secondary,
           fontWeight: 500,
         }}
@@ -138,24 +299,42 @@ const TabComponent = ({
       <IconButton
         disableRipple
         onClick={(event) => {
+          event.stopPropagation();
+          if (interactionLockRef.current) {
+            event.preventDefault();
+            return;
+          }
+          onClose();
+        }}
+        onAuxClick={(event) => {
+          if (interactionLockRef.current) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+          }
+          if (event.button !== 1) return;
+          event.preventDefault();
           event.stopPropagation();
           onClose();
         }}
+        onPointerDown={(event) => {
+          event.stopPropagation();
+        }}
         size="small"
         sx={{
-          color: isSelected
-            ? alpha(theme.palette.primary.contrastText, 0.92)
+          color: isVisuallySelected
+            ? alpha(selectedTabTextColor, 0.92)
             : theme.palette.text.secondary,
           flexShrink: 0,
           height: 22,
           width: 22,
-          opacity: isSelected ? 0.92 : 0.76,
+          opacity: isVisuallySelected ? 1 : 0.76,
           '&:hover': {
-            backgroundColor: isSelected
-              ? alpha(theme.palette.primary.contrastText, 0.14)
+            backgroundColor: isVisuallySelected
+              ? alpha(selectedTabTextColor, 0.18)
               : theme.palette.action.selected,
-            color: isSelected
-              ? theme.palette.primary.contrastText
+            color: isVisuallySelected
+              ? selectedTabTextColor
               : theme.palette.text.primary,
             opacity: 1,
           },
@@ -167,6 +346,9 @@ const TabComponent = ({
       <Menu
         open={!!menuPosition}
         onClose={() => setMenuPosition(null)}
+        onPointerDown={(event) => {
+          event.stopPropagation();
+        }}
         anchorReference="anchorPosition"
         anchorPosition={
           menuPosition
@@ -216,6 +398,37 @@ const TabComponent = ({
             primary="Duplicate Tab"
           />
         </MenuItem>
+        <MenuItem
+          onClick={() => {
+            onCloseAll();
+            setMenuPosition(null);
+          }}
+        >
+          <ListItemIcon
+            sx={{
+              minWidth: '24px !important',
+              marginRight: '6px',
+            }}
+          >
+            <CloseFullscreenRoundedIcon
+              sx={{
+                color: theme.palette.text.primary,
+                fontSize: 18,
+              }}
+            />
+          </ListItemIcon>
+
+          <ListItemText
+            sx={{
+              '& .MuiTypography-root': {
+                fontSize: '12px',
+                fontWeight: 600,
+                color: theme.palette.text.primary,
+              },
+            }}
+            primary="Close All Tabs"
+          />
+        </MenuItem>
       </Menu>
     </AppsHorizontalTabButton>
   );
diff --git a/src/components/Auth/AuthShell.tsx b/src/components/Auth/AuthShell.tsx
new file mode 100644
index 00000000..b74b8858
--- /dev/null
+++ b/src/components/Auth/AuthShell.tsx
@@ -0,0 +1,545 @@
+import { ReactNode } from 'react';
+import {
+  Box,
+  ButtonBase,
+  SxProps,
+  TextField,
+  TextFieldProps,
+  Theme,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { alpha } from '@mui/material/styles';
+
+type AuthFrameProps = {
+  children: ReactNode;
+  footer?: ReactNode;
+  maxWidth?: number | string;
+  align?: 'center' | 'start';
+  disableInitialAnimation?: boolean;
+};
+
+type AuthButtonProps = {
+  children: ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  primary?: boolean;
+  fullWidth?: boolean;
+  type?: 'button' | 'submit';
+  prominence?: 'normal' | 'subtle';
+  sx?: SxProps<Theme>;
+};
+
+type AuthScreenProps = {
+  title?: ReactNode;
+  subtitle?: ReactNode;
+  children: ReactNode;
+  maxWidth?: number | string;
+  footer?: ReactNode;
+  align?: 'center' | 'start';
+};
+
+export function AuthFrame({
+  children,
+  footer,
+  maxWidth = 560,
+  align = 'center',
+  disableInitialAnimation = false,
+}: AuthFrameProps) {
+  const theme = useTheme();
+  const isLight = theme.palette.mode === 'light';
+
+  return (
+    <Box
+      sx={{
+        background: isLight
+          ? 'linear-gradient(180deg, #f6f8fd 0%, #eef2fa 46%, #e7ecf6 100%)'
+          : 'linear-gradient(180deg, #07101b 0%, #05070c 55%, #030509 100%)',
+        color: theme.palette.text.primary,
+        display: 'flex',
+        flex: 1,
+        flexDirection: 'column',
+        minHeight: '100vh',
+        overflowX: 'hidden',
+        position: 'relative',
+        width: '100%',
+        '&::before': {
+          backgroundImage: isLight
+            ? 'radial-gradient(circle, rgba(62,130,255,0.11) 0 1px, transparent 1.4px), radial-gradient(circle, rgba(62,130,255,0.07) 0 1px, transparent 1.3px)'
+            : 'radial-gradient(circle, rgba(158,190,245,0.2) 0 1px, transparent 1.4px), radial-gradient(circle, rgba(158,190,245,0.16) 0 1px, transparent 1.3px)',
+          backgroundPosition: '50% 18%, 50% 43%',
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: '760px 420px, 880px 540px',
+          content: '""',
+          inset: 0,
+          opacity: isLight ? 0.65 : 0.42,
+          pointerEvents: 'none',
+          position: 'absolute',
+        },
+      }}
+    >
+      <Box
+        sx={{
+          alignItems: align === 'center' ? 'center' : 'flex-start',
+          display: 'flex',
+          flex: 1,
+          justifyContent: 'center',
+          px: { xs: 2.5, md: 3.5 },
+          py: { xs: 7, md: 8 },
+          position: 'relative',
+          zIndex: 1,
+        }}
+      >
+        <Box
+          sx={{
+            animation: disableInitialAnimation
+              ? 'none'
+              : 'authScreenIn 240ms ease both',
+            display: 'flex',
+            flexDirection: 'column',
+            maxWidth,
+            width: '100%',
+            '@keyframes authScreenIn': {
+              from: {
+                opacity: 0,
+                transform: 'translateY(6px)',
+              },
+              to: {
+                opacity: 1,
+                transform: 'translateY(0)',
+              },
+            },
+          }}
+        >
+          {children}
+        </Box>
+      </Box>
+
+      {footer && (
+        <Box
+          sx={{
+            bottom: 18,
+            left: 24,
+            position: 'absolute',
+            right: 24,
+            zIndex: 1,
+          }}
+        >
+          {footer}
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export function AuthScreen({
+  title,
+  subtitle,
+  children,
+  maxWidth = 420,
+  footer,
+  align = 'center',
+}: AuthScreenProps) {
+  const theme = useTheme();
+
+  return (
+    <AuthFrame maxWidth={maxWidth} footer={footer} align={align}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2.2,
+          width: '100%',
+        }}
+      >
+        {(title || subtitle) && (
+          <Box
+            sx={{
+              textAlign: align === 'center' ? 'center' : 'left',
+            }}
+          >
+            {title && (
+              <Typography
+                sx={{
+                  fontSize: '1.8rem',
+                  fontWeight: 700,
+                  letterSpacing: '-0.03em',
+                  lineHeight: 1.08,
+                }}
+              >
+                {title}
+              </Typography>
+            )}
+            {subtitle && (
+              <Typography
+                sx={{
+                  color:
+                    theme.palette.mode === 'dark'
+                      ? 'rgba(214,221,233,0.64)'
+                      : theme.palette.text.secondary,
+                  fontSize: '0.95rem',
+                  lineHeight: 1.65,
+                  mt: title ? 1 : 0,
+                }}
+              >
+                {subtitle}
+              </Typography>
+            )}
+          </Box>
+        )}
+
+        {children}
+      </Box>
+    </AuthFrame>
+  );
+}
+
+export function AuthButton({
+  children,
+  onClick,
+  disabled = false,
+  primary = true,
+  fullWidth = true,
+  type = 'button',
+  prominence = 'normal',
+  sx,
+}: AuthButtonProps) {
+  const theme = useTheme();
+  const isSubtlePrimary = primary && prominence === 'subtle';
+  const lightSecondaryOutline =
+    theme.palette.mode === 'light' && !primary;
+
+  return (
+    <ButtonBase
+      type={type}
+      disabled={disabled}
+      onClick={onClick}
+      sx={[
+        lightSecondaryOutline
+          ? {
+              alignItems: 'center',
+              background: theme.palette.background.surface,
+              border: `1px solid ${theme.palette.border.main}`,
+              borderRadius: '8px',
+              color: theme.palette.text.primary,
+              display: 'inline-flex',
+              fontFamily: 'Inter, Segoe UI, ui-sans-serif, system-ui, sans-serif',
+              fontSize: '0.92rem',
+              fontSynthesis: 'none',
+              fontWeight: 500,
+              height: 42,
+              justifyContent: 'center',
+              letterSpacing: 0,
+              lineHeight: 1,
+              opacity: disabled ? 0.45 : 1,
+              px: 2,
+              textRendering: 'geometricPrecision',
+              transition:
+                'background-color 160ms ease, border-color 160ms ease, opacity 160ms ease',
+              WebkitFontSmoothing: 'antialiased',
+              width: fullWidth ? '100%' : 'auto',
+              '&:hover': disabled
+                ? undefined
+                : {
+                    background: theme.palette.action.hover,
+                    borderColor: theme.palette.border.main,
+                  },
+            }
+          : {
+              alignItems: 'center',
+              background: primary
+                ? isSubtlePrimary
+                  ? 'linear-gradient(180deg, rgba(55,94,185,0.88) 0%, rgba(36,72,156,0.88) 100%)'
+                  : 'linear-gradient(180deg, rgba(62,107,214,0.96) 0%, rgba(39,83,184,0.96) 100%)'
+                : 'rgba(255,255,255,0.02)',
+              border: `1px solid ${
+                primary
+                  ? isSubtlePrimary
+                    ? 'rgba(88,133,226,0.18)'
+                    : 'rgba(92,145,255,0.22)'
+                  : 'rgba(255,255,255,0.08)'
+              }`,
+              borderRadius: '8px',
+              color: primary
+                ? isSubtlePrimary
+                  ? 'rgba(240,244,252,0.94)'
+                  : '#f6f8fc'
+                : 'rgba(230,236,247,0.88)',
+              display: 'inline-flex',
+              fontFamily: 'Inter, Segoe UI, ui-sans-serif, system-ui, sans-serif',
+              fontSize: isSubtlePrimary ? '0.88rem' : '0.92rem',
+              fontSynthesis: 'none',
+              fontWeight: 500,
+              height: isSubtlePrimary ? 38 : 42,
+              justifyContent: 'center',
+              letterSpacing: 0,
+              lineHeight: 1,
+              opacity: disabled ? 0.45 : 1,
+              px: isSubtlePrimary ? 1.6 : 2,
+              textRendering: 'geometricPrecision',
+              transition:
+                'background-color 160ms ease, border-color 160ms ease, opacity 160ms ease',
+              WebkitFontSmoothing: 'antialiased',
+              width: fullWidth ? '100%' : 'auto',
+              '&:hover': disabled
+                ? undefined
+                : {
+                    background: primary
+                      ? isSubtlePrimary
+                        ? 'linear-gradient(180deg, rgba(61,101,194,0.9) 0%, rgba(40,79,167,0.9) 100%)'
+                        : 'linear-gradient(180deg, rgba(69,115,224,0.98) 0%, rgba(44,90,193,0.98) 100%)'
+                      : 'rgba(255,255,255,0.04)',
+                    borderColor: primary
+                      ? isSubtlePrimary
+                        ? 'rgba(104,151,241,0.22)'
+                        : 'rgba(118,165,255,0.28)'
+                      : 'rgba(255,255,255,0.12)',
+                  },
+            },
+        sx,
+      ]}
+    >
+      {children}
+    </ButtonBase>
+  );
+}
+
+export function AuthInput(props: TextFieldProps) {
+  const theme = useTheme();
+  const isLight = theme.palette.mode === 'light';
+
+  return (
+    <TextField
+      {...props}
+      fullWidth
+      variant="outlined"
+      sx={{
+        '& .MuiOutlinedInput-root': isLight
+          ? {
+              backgroundColor: theme.palette.background.paper,
+              borderRadius: '8px',
+              color: theme.palette.text.primary,
+              minHeight: 44,
+              transition: 'background-color 160ms ease, border-color 160ms ease',
+              '& fieldset': {
+                borderColor: theme.palette.border.main,
+              },
+              '&:hover': {
+                backgroundColor: theme.palette.background.elevated,
+              },
+              '&:hover fieldset': {
+                borderColor: theme.palette.border.main,
+              },
+              '&.Mui-focused': {
+                backgroundColor: theme.palette.background.paper,
+              },
+              '&.Mui-focused fieldset': {
+                borderColor: alpha(theme.palette.primary.main, 0.42),
+              },
+            }
+          : {
+              backgroundColor: 'rgba(255,255,255,0.03)',
+              borderRadius: '8px',
+              color: theme.palette.text.primary,
+              minHeight: 44,
+              transition: 'background-color 160ms ease, border-color 160ms ease',
+              '& fieldset': {
+                borderColor: 'rgba(255,255,255,0.08)',
+              },
+              '&:hover fieldset': {
+                borderColor: 'rgba(255,255,255,0.12)',
+              },
+              '&.Mui-focused': {
+                backgroundColor: 'rgba(255,255,255,0.04)',
+              },
+              '&.Mui-focused fieldset': {
+                borderColor: 'rgba(90,136,243,0.42)',
+              },
+            },
+        '& .MuiInputBase-input': {
+          fontSize: '0.95rem',
+          padding: '11px 13px',
+        },
+        '& .MuiInputBase-input::placeholder': {
+          color: isLight
+            ? alpha(theme.palette.text.secondary, 0.72)
+            : 'rgba(214,221,233,0.42)',
+          opacity: 1,
+        },
+        ...props.sx,
+      }}
+    />
+  );
+}
+
+export function AuthSectionLabel({ children }: { children: ReactNode }) {
+  const theme = useTheme();
+
+  return (
+    <Typography
+      sx={{
+        color:
+          theme.palette.mode === 'dark'
+            ? 'rgba(214,221,233,0.62)'
+            : theme.palette.text.secondary,
+        fontSize: '0.74rem',
+        fontWeight: 700,
+        letterSpacing: '0.08em',
+        mb: 0.75,
+        textTransform: 'uppercase',
+      }}
+    >
+      {children}
+    </Typography>
+  );
+}
+
+/** Shared wallet password `TextField` / `PasswordField` styling (unlock + create-wallet). */
+export function authPasswordFieldSx(theme: Theme) {
+  if (theme.palette.mode === 'dark') {
+    return {
+      width: '100%',
+      '& .MuiOutlinedInput-root': {
+        background:
+          'linear-gradient(180deg, rgba(18,24,35,0.96) 0%, rgba(15,21,31,0.98) 100%)',
+        borderRadius: '10px',
+        minHeight: 50,
+        transition:
+          'background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease',
+        '& fieldset': {
+          border: '1px solid rgba(118,132,163,0.18)',
+        },
+        '&:hover': {
+          backgroundColor: 'rgba(20,27,39,0.98)',
+        },
+        '&:hover fieldset': {
+          border: '1px solid rgba(126,143,177,0.24)',
+        },
+        '&.Mui-focused': {
+          backgroundColor: 'rgba(21,29,41,0.99)',
+          boxShadow: '0 0 0 2px rgba(63,103,191,0.1)',
+        },
+        '&.Mui-focused fieldset': {
+          border: '1px solid rgba(108,144,229,0.28)',
+        },
+      },
+      '& input': {
+        fontSize: '0.88rem',
+        fontWeight: 500,
+        padding: '12px 14px',
+      },
+      '& input::placeholder': {
+        color: 'rgba(214,221,233,0.36)',
+        fontSize: '0.84rem',
+        fontWeight: 400,
+      },
+      '& .MuiInputAdornment-root .MuiButtonBase-root': {
+        color: 'rgba(214,221,233,0.46)',
+      },
+      '& .MuiOutlinedInput-root:hover .MuiInputAdornment-root .MuiButtonBase-root, & .MuiOutlinedInput-root.Mui-focused .MuiInputAdornment-root .MuiButtonBase-root':
+        {
+          color: 'rgba(214,221,233,0.74)',
+        },
+    };
+  }
+
+  return {
+    width: '100%',
+    '& .MuiOutlinedInput-root': {
+      backgroundColor: theme.palette.background.paper,
+      borderRadius: '10px',
+      color: theme.palette.text.primary,
+      minHeight: 50,
+      transition:
+        'background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease',
+      '& fieldset': {
+        border: `1px solid ${theme.palette.border.main}`,
+      },
+      '&:hover': {
+        backgroundColor: theme.palette.background.elevated,
+      },
+      '&:hover fieldset': {
+        border: `1px solid ${theme.palette.border.main}`,
+      },
+      '&.Mui-focused': {
+        backgroundColor: theme.palette.background.paper,
+        boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.14)}`,
+      },
+      '&.Mui-focused fieldset': {
+        border: `1px solid ${alpha(theme.palette.primary.main, 0.42)}`,
+      },
+    },
+    '& input': {
+      fontSize: '0.88rem',
+      fontWeight: 500,
+      padding: '12px 14px',
+    },
+    '& input::placeholder': {
+      color: alpha(theme.palette.text.secondary, 0.72),
+      fontSize: '0.84rem',
+      fontWeight: 400,
+    },
+    '& .MuiInputAdornment-root .MuiButtonBase-root': {
+      color: alpha(theme.palette.text.secondary, 0.75),
+    },
+    '& .MuiOutlinedInput-root:hover .MuiInputAdornment-root .MuiButtonBase-root, & .MuiOutlinedInput-root.Mui-focused .MuiInputAdornment-root .MuiButtonBase-root':
+      {
+        color: alpha(theme.palette.text.primary, 0.62),
+      },
+  };
+}
+
+export function AuthStepDots({
+  count,
+  current,
+}: {
+  count: number;
+  current: number;
+}) {
+  return (
+    <Box
+      sx={{
+        alignItems: 'center',
+        display: 'inline-flex',
+        gap: 0.8,
+        justifyContent: 'center',
+      }}
+    >
+      {Array.from({ length: count }).map((_, index) => {
+        const step = index + 1;
+        const active = step === current;
+        const complete = step < current;
+        return (
+          <Box
+            key={step}
+            sx={{
+              alignItems: 'center',
+              border: `1px solid ${
+                active
+                  ? 'rgba(92,145,255,0.28)'
+                  : complete
+                    ? 'rgba(101,186,124,0.26)'
+                    : 'rgba(255,255,255,0.12)'
+              }`,
+              borderRadius: '999px',
+              color: complete ? 'rgba(174,235,191,0.82)' : 'rgba(230,236,247,0.82)',
+              display: 'inline-flex',
+              fontSize: '0.74rem',
+              fontWeight: 700,
+              height: 22,
+              justifyContent: 'center',
+              width: 22,
+              backgroundColor: active
+                ? 'rgba(57,105,212,0.9)'
+                : complete
+                  ? 'rgba(58,110,73,0.68)'
+                  : 'rgba(255,255,255,0.04)',
+            }}
+          >
+            {step}
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
diff --git a/src/components/Auth/BackupWalletModal.tsx b/src/components/Auth/BackupWalletModal.tsx
new file mode 100644
index 00000000..76219cb3
--- /dev/null
+++ b/src/components/Auth/BackupWalletModal.tsx
@@ -0,0 +1,579 @@
+import { useCallback, useMemo, useState } from 'react';
+import {
+  Box,
+  ButtonBase,
+  Checkbox,
+  Dialog,
+  FormControlLabel,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import { LoadingButton } from '@mui/lab';
+import CloseIcon from '@mui/icons-material/Close';
+import FileDownloadRoundedIcon from '@mui/icons-material/FileDownloadRounded';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import { useTranslation } from 'react-i18next';
+import { crypto, walletVersion } from '../../constants/decryptWallet';
+import { decryptStoredWallet } from '../../utils/decryptWallet';
+import PhraseWallet from '../../utils/generateWallet/phrase-wallet';
+import { saveFileToDisk } from '../../utils/generateWallet/generateWallet';
+import { executeEvent } from '../../utils/events';
+import { PasswordField } from '../index';
+import { getBlueTier1ButtonSx } from '../../styles/blueMaterial';
+import { getWalletErrorMessage } from '../../utils/walletErrorMessages';
+
+type BackupWalletModalProps = {
+  onClose: () => void;
+  open: boolean;
+  rawWallet: any;
+};
+
+export const BackupWalletModal = ({
+  onClose,
+  open,
+  rawWallet,
+}: BackupWalletModalProps) => {
+  const theme = useTheme();
+  const { t } = useTranslation(['auth', 'core', 'group']);
+  const isDarkMode = theme.palette.mode === 'dark';
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [isCurrentPasswordEditable, setIsCurrentPasswordEditable] =
+    useState(false);
+  const [isNewPasswordEditable, setIsNewPasswordEditable] = useState(false);
+  const [keepCurrentPassword, setKeepCurrentPassword] = useState(true);
+  const [error, setError] = useState('');
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const modalSurface = isDarkMode
+    ? 'linear-gradient(145deg, rgba(49,54,64,0.985) 0%, rgba(35,39,47,0.992) 48%, rgba(24,27,33,0.996) 100%)'
+    : 'linear-gradient(180deg, rgba(251,253,255,0.985) 0%, rgba(244,247,251,0.99) 100%)';
+  const sectionDivider = isDarkMode
+    ? 'rgba(255,255,255,0.052)'
+    : alpha(theme.palette.divider, 0.2);
+  const fieldBorder = isDarkMode
+    ? 'rgba(255,255,255,0.085)'
+    : 'rgba(24,29,36,0.12)';
+  const fieldHoverBorder = isDarkMode
+    ? 'rgba(255,255,255,0.12)'
+    : 'rgba(24,29,36,0.16)';
+  const fieldSurface = isDarkMode
+    ? 'linear-gradient(145deg, rgba(88,95,108,0.2) 0%, rgba(56,62,73,0.28) 44%, rgba(37,41,49,0.42) 100%)'
+    : 'linear-gradient(180deg, rgba(17,23,34,0.042) 0%, rgba(17,23,34,0.024) 100%)';
+  const fieldSurfaceHover = isDarkMode
+    ? 'linear-gradient(145deg, rgba(98,106,120,0.24) 0%, rgba(63,70,82,0.34) 46%, rgba(43,48,57,0.48) 100%)'
+    : 'linear-gradient(180deg, rgba(17,23,34,0.06) 0%, rgba(17,23,34,0.034) 100%)';
+  const fieldInsetShadow = isDarkMode
+    ? '0 8px 20px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.035)'
+    : '0 4px 10px rgba(24,32,44,0.06), inset 0 1px 0 rgba(255,255,255,0.5)';
+
+  const walletAddress = rawWallet?.address0 ?? '';
+
+  const resetState = useCallback(() => {
+    setCurrentPassword('');
+    setNewPassword('');
+    setIsCurrentPasswordEditable(false);
+    setIsNewPasswordEditable(false);
+    setKeepCurrentPassword(true);
+    setError('');
+    setIsDownloading(false);
+  }, []);
+
+  const handleClose = useCallback(() => {
+    if (isDownloading) return;
+    resetState();
+    onClose();
+  }, [isDownloading, onClose, resetState]);
+
+  const handleDownload = useCallback(async () => {
+    try {
+      setError('');
+
+      if (!rawWallet) {
+        throw new Error(
+          t('auth:backup_wallet_modal.error_no_active_wallet', {
+            postProcess: 'capitalizeFirstChar',
+          })
+        );
+      }
+
+      if (!currentPassword) {
+        throw new Error(
+          t('auth:wallet.error.missing_password', {
+            postProcess: 'capitalizeFirstChar',
+          })
+        );
+      }
+
+      if (!keepCurrentPassword && !newPassword) {
+        throw new Error(
+          t('auth:wallet.error.missing_new_password', {
+            postProcess: 'capitalizeFirstChar',
+          })
+        );
+      }
+
+      setIsDownloading(true);
+
+      let wallet = structuredClone(rawWallet);
+      const decryptedWallet = await decryptStoredWallet(currentPassword, wallet);
+      const phraseWallet = new PhraseWallet(
+        decryptedWallet,
+        wallet?.version || walletVersion
+      );
+      const passwordToUse = keepCurrentPassword ? currentPassword : newPassword;
+
+      wallet = await phraseWallet.generateSaveWalletData(
+        passwordToUse,
+        crypto.kdfThreads,
+        () => {}
+      );
+
+      await saveFileToDisk(wallet, rawWallet.address0);
+      handleClose();
+      executeEvent('openGlobalSnackBar', {
+        message: t('auth:message.generic.keep_secure', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        type: 'info',
+        duration: 5600,
+      });
+    } catch (downloadError: any) {
+      setError(
+        getWalletErrorMessage(
+          downloadError,
+          t('auth:backup_wallet_modal.error_unable_to_create_backup', {
+            postProcess: 'capitalizeFirstChar',
+          })
+        )
+      );
+      setIsDownloading(false);
+    }
+  }, [
+    currentPassword,
+    handleClose,
+    keepCurrentPassword,
+    newPassword,
+    rawWallet,
+    t,
+  ]);
+
+  const noteTone = useMemo(
+    () =>
+      isDarkMode
+        ? {
+            background: 'rgba(132, 176, 240, 0.09)',
+            border: 'rgba(132, 176, 240, 0.2)',
+            icon: '#8EB8F5',
+          }
+        : {
+            background: 'rgba(90, 126, 196, 0.08)',
+            border: 'rgba(90, 126, 196, 0.18)',
+            icon: '#5C7EC6',
+          },
+    [isDarkMode]
+  );
+
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      aria-labelledby="backup-wallet-dialog-title"
+      aria-describedby="backup-wallet-dialog-description"
+      maxWidth="sm"
+      fullWidth
+      slotProps={{
+        backdrop: {
+          sx: {
+            backdropFilter: isDarkMode
+              ? 'blur(12px) brightness(0.76) saturate(0.88)'
+              : 'blur(12px) brightness(0.9) saturate(0.94)',
+            WebkitBackdropFilter: isDarkMode
+              ? 'blur(12px) brightness(0.76) saturate(0.88)'
+              : 'blur(12px) brightness(0.9) saturate(0.94)',
+            backgroundColor: isDarkMode
+              ? 'rgba(6, 8, 12, 0.4)'
+              : 'rgba(22, 26, 34, 0.14)',
+          },
+        },
+        paper: {
+          sx: {
+            background: modalSurface,
+            border: isDarkMode
+              ? '1px solid rgba(255,255,255,0.08)'
+              : '1px solid rgba(24,29,36,0.09)',
+            borderRadius: '14px',
+            boxShadow: isDarkMode
+              ? '0 34px 120px rgba(0,0,0,0.46)'
+              : '0 28px 88px rgba(18,28,45,0.16)',
+            clipPath: 'inset(0 round 14px)',
+            isolation: 'isolate',
+            overflow: 'hidden',
+            width: 'min(460px, calc(100vw - 32px))',
+          },
+        },
+      }}
+    >
+      <Box sx={{ background: modalSurface, display: 'flex', flexDirection: 'column' }}>
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'space-between',
+            px: 2.25,
+            py: 1.7,
+          }}
+        >
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+            <Typography
+              id="backup-wallet-dialog-title"
+              sx={{
+                color: theme.palette.text.primary,
+                fontSize: '0.98rem',
+                fontWeight: 700,
+                letterSpacing: '-0.02em',
+              }}
+            >
+              {t('auth:create_wallet.backup_wallet', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+            </Typography>
+            <Typography
+              id="backup-wallet-dialog-description"
+              sx={{
+                color: theme.palette.text.secondary,
+                fontSize: '0.76rem',
+                lineHeight: 1.45,
+              }}
+            >
+              {t('auth:backup_wallet_modal.subtitle', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+            </Typography>
+          </Box>
+          <ButtonBase
+            onClick={handleClose}
+            disabled={isDownloading}
+            sx={{
+              borderRadius: '8px',
+              color: theme.palette.text.secondary,
+              height: 30,
+              width: 30,
+              '&:hover': {
+                backgroundColor: alpha(
+                  theme.palette.common.white,
+                  isDarkMode ? 0.05 : 0.55
+                ),
+                color: theme.palette.text.primary,
+              },
+            }}
+          >
+            <CloseIcon sx={{ fontSize: 17 }} />
+          </ButtonBase>
+        </Box>
+
+        <Box
+          sx={{
+            borderTop: `1px solid ${sectionDivider}`,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1.2,
+            px: 2.25,
+            pb: 2.15,
+            pt: 1.85,
+          }}
+        >
+          <Box
+            sx={{
+              alignItems: 'flex-start',
+              backgroundColor: noteTone.background,
+              border: `1px solid ${noteTone.border}`,
+              borderRadius: '12px',
+              display: 'flex',
+              gap: 1,
+              px: 1.25,
+              py: 1.05,
+            }}
+          >
+            <InfoOutlinedIcon
+              sx={{
+                color: noteTone.icon,
+                flexShrink: 0,
+                fontSize: 18,
+                mt: '1px',
+              }}
+            />
+            <Typography
+              sx={{
+                color: theme.palette.text.secondary,
+                fontSize: '0.76rem',
+                lineHeight: 1.48,
+              }}
+            >
+              {t('auth:backup_wallet_modal.info_note', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+            </Typography>
+          </Box>
+
+          <Box
+            sx={{
+              alignItems: 'flex-start',
+              background: fieldSurface,
+              border: `1px solid ${fieldBorder}`,
+              borderRadius: '12px',
+              boxShadow: fieldInsetShadow,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '3px',
+              px: 1.35,
+              py: 1.15,
+            }}
+          >
+            <Typography
+              sx={{
+                color: theme.palette.text.secondary,
+                fontSize: '0.7rem',
+                fontWeight: 600,
+                letterSpacing: '0.03em',
+                textTransform: 'uppercase',
+              }}
+            >
+              {t('group:dashboard.wallet_address')}
+            </Typography>
+            <Typography
+              sx={{
+                color: theme.palette.text.primary,
+                fontSize: '0.9rem',
+                fontWeight: 700,
+                letterSpacing: '-0.01em',
+                lineHeight: 1.45,
+                wordBreak: 'break-all',
+              }}
+            >
+              {walletAddress || t('group:dashboard.no_active_wallet')}
+            </Typography>
+          </Box>
+
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.72 }}>
+            <Typography
+              sx={{
+                color: theme.palette.text.secondary,
+                display: 'block',
+                fontSize: '0.74rem',
+                fontWeight: 600,
+                letterSpacing: '0.01em',
+              }}
+            >
+              {t('auth:backup_wallet_modal.current_password', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+            </Typography>
+            <PasswordField
+              id="backup-wallet-current-password"
+              value={currentPassword}
+              onChange={(event) => setCurrentPassword(event.target.value)}
+              autoComplete="new-password"
+              name="backup-wallet-current-confirmation"
+              onFocus={() => setIsCurrentPasswordEditable(true)}
+              onMouseDown={() => setIsCurrentPasswordEditable(true)}
+              onBlur={() => {
+                if (!currentPassword) {
+                  setIsCurrentPasswordEditable(false);
+                }
+              }}
+              InputProps={{
+                readOnly: !isCurrentPasswordEditable,
+              }}
+              inputProps={{
+                autoComplete: 'new-password',
+                'data-1p-ignore': 'true',
+                'data-lpignore': 'true',
+                spellCheck: 'false',
+              }}
+              sx={{
+                width: '100%',
+                '& .MuiOutlinedInput-root, & .MuiInputBase-root': {
+                  background: fieldSurface,
+                  borderRadius: '10px',
+                  boxShadow: fieldInsetShadow,
+                  '& fieldset': {
+                    borderColor: fieldBorder,
+                  },
+                  '&:hover fieldset': {
+                    borderColor: fieldHoverBorder,
+                  },
+                  '&.Mui-focused fieldset': {
+                    borderColor: fieldHoverBorder,
+                    borderWidth: 1,
+                  },
+                  '&:hover': {
+                    background: fieldSurfaceHover,
+                  },
+                },
+                '& input:-webkit-autofill, & input:-webkit-autofill:hover, & input:-webkit-autofill:focus':
+                  {
+                    WebkitBoxShadow: isDarkMode
+                      ? '0 0 0 100px rgb(47, 52, 62) inset'
+                      : '0 0 0 100px rgb(248, 250, 253) inset',
+                    WebkitTextFillColor: theme.palette.text.primary,
+                    caretColor: theme.palette.text.primary,
+                    transition: 'background-color 9999s ease-out 0s',
+                  },
+              }}
+            />
+          </Box>
+
+          <FormControlLabel
+            sx={{ m: 0 }}
+            control={
+              <Checkbox
+                onChange={(event) => setKeepCurrentPassword(event.target.checked)}
+                checked={keepCurrentPassword}
+                disableRipple
+                sx={{
+                  '&.Mui-checked': {
+                    color: theme.palette.text.secondary,
+                  },
+                  '& .MuiSvgIcon-root': {
+                    color: theme.palette.text.secondary,
+                  },
+                }}
+              />
+            }
+            label={
+              <Typography
+                sx={{
+                  color: theme.palette.text.secondary,
+                  fontSize: '0.76rem',
+                  lineHeight: 1.45,
+                }}
+              >
+                {t('auth:backup_wallet_modal.keep_password_in_export', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+              </Typography>
+            }
+          />
+
+          {!keepCurrentPassword && (
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.72 }}>
+              <Typography
+                sx={{
+                  color: theme.palette.text.secondary,
+                  display: 'block',
+                  fontSize: '0.74rem',
+                  fontWeight: 600,
+                  letterSpacing: '0.01em',
+                }}
+              >
+                {t('auth:backup_wallet_modal.new_password_for_backup', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+              </Typography>
+              <PasswordField
+                id="backup-wallet-new-password"
+                value={newPassword}
+                onChange={(event) => setNewPassword(event.target.value)}
+                autoComplete="new-password"
+                name="backup-wallet-new-passphrase"
+                onFocus={() => setIsNewPasswordEditable(true)}
+                onMouseDown={() => setIsNewPasswordEditable(true)}
+                onBlur={() => {
+                  if (!newPassword) {
+                    setIsNewPasswordEditable(false);
+                  }
+                }}
+                InputProps={{
+                  readOnly: !isNewPasswordEditable,
+                }}
+                inputProps={{
+                  autoComplete: 'new-password',
+                  'data-1p-ignore': 'true',
+                  'data-lpignore': 'true',
+                  spellCheck: 'false',
+                }}
+                sx={{
+                  width: '100%',
+                  '& .MuiOutlinedInput-root, & .MuiInputBase-root': {
+                    background: fieldSurface,
+                    borderRadius: '10px',
+                    boxShadow: fieldInsetShadow,
+                    '& fieldset': {
+                      borderColor: fieldBorder,
+                    },
+                    '&:hover fieldset': {
+                      borderColor: fieldHoverBorder,
+                    },
+                    '&.Mui-focused fieldset': {
+                      borderColor: fieldHoverBorder,
+                      borderWidth: 1,
+                    },
+                    '&:hover': {
+                      background: fieldSurfaceHover,
+                    },
+                  },
+                  '& input:-webkit-autofill, & input:-webkit-autofill:hover, & input:-webkit-autofill:focus':
+                    {
+                      WebkitBoxShadow: isDarkMode
+                        ? '0 0 0 100px rgb(47, 52, 62) inset'
+                        : '0 0 0 100px rgb(248, 250, 253) inset',
+                      WebkitTextFillColor: theme.palette.text.primary,
+                      caretColor: theme.palette.text.primary,
+                      transition: 'background-color 9999s ease-out 0s',
+                    },
+                }}
+              />
+            </Box>
+          )}
+
+          {error ? (
+            <Typography
+              sx={{
+                color: theme.palette.error.light,
+                fontSize: '0.74rem',
+                lineHeight: 1.45,
+              }}
+            >
+              {error}
+            </Typography>
+          ) : null}
+
+          <LoadingButton
+            loading={isDownloading}
+            disabled={!rawWallet || !currentPassword || (!keepCurrentPassword && !newPassword)}
+            onClick={handleDownload}
+            startIcon={!isDownloading ? <FileDownloadRoundedIcon /> : null}
+            variant="contained"
+            fullWidth
+            sx={{
+              borderRadius: '10px',
+              ...getBlueTier1ButtonSx(),
+              fontSize: '0.82rem',
+              fontWeight: 600,
+              minHeight: 42,
+              textTransform: 'none',
+              '&.Mui-disabled': {
+                background: isDarkMode
+                  ? 'rgba(255,255,255,0.035)'
+                  : 'rgba(24,29,36,0.04)',
+                border: isDarkMode
+                  ? '1px solid rgba(255,255,255,0.055)'
+                  : '1px solid rgba(24,29,36,0.06)',
+                boxShadow: 'none',
+                color: isDarkMode
+                  ? 'rgba(255,255,255,0.34)'
+                  : 'rgba(24,29,36,0.34)',
+              },
+            }}
+          >
+            {t('auth:backup_wallet_modal.download_wallet_file', {
+              postProcess: 'capitalizeFirstChar',
+            })}
+          </LoadingButton>
+        </Box>
+      </Box>
+    </Dialog>
+  );
+};
diff --git a/src/components/Auth/ConnectionModeModal.tsx b/src/components/Auth/ConnectionModeModal.tsx
new file mode 100644
index 00000000..d5235d37
--- /dev/null
+++ b/src/components/Auth/ConnectionModeModal.tsx
@@ -0,0 +1,1366 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  Box,
+  Button,
+  ButtonBase,
+  Dialog,
+  IconButton,
+  Link,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { alpha, type Theme } from '@mui/material/styles';
+import ComputerRoundedIcon from '@mui/icons-material/ComputerRounded';
+import CloudRoundedIcon from '@mui/icons-material/CloudRounded';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
+import AddRoundedIcon from '@mui/icons-material/AddRounded';
+import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
+import DeleteOutlineRoundedIcon from '@mui/icons-material/DeleteOutlineRounded';
+import DnsRoundedIcon from '@mui/icons-material/DnsRounded';
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
+import SaveRoundedIcon from '@mui/icons-material/SaveRounded';
+import { NewNodeReloadRequiredDialog } from './NewNodeReloadRequiredDialog';
+import { AuthButton, AuthInput } from './AuthShell';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { useTranslation } from 'react-i18next';
+import { isOpenCoreSetup, selectedNodeInfoAtom } from '../../atoms/global';
+import {
+  getDefaultLocalNodeUrl,
+  HTTPS_EXT_NODE_QORTAL_LINK,
+  isLocalNodeUrl,
+} from '../../constants/constants';
+import { useAuth } from '../../hooks/useAuth';
+import type { ApiKey } from '../../types/auth';
+import { ensureElectronCertIfLocalPrivateHttps } from '../../utils/helpers';
+
+type ConnectionModeModalProps = {
+  open: boolean;
+  onClose: () => void;
+};
+
+type ConnectionMode = 'local' | 'public' | 'custom';
+
+const CUSTOM_NODE_DRAG_DATA = 'application/x-qortal-custom-node-index';
+
+function isManualNode(url?: string | null) {
+  if (!url) return false;
+  return !isLocalNodeUrl(url) && url !== HTTPS_EXT_NODE_QORTAL_LINK;
+}
+
+function normalizeNodeUrl(url: string) {
+  return url.trim().replace(/\/+$/, '');
+}
+
+function normalizeCustomNodes(nodes: unknown): ApiKey[] {
+  if (!Array.isArray(nodes)) return [];
+
+  return nodes
+    .map((node) => ({
+      url: typeof node?.url === 'string' ? normalizeNodeUrl(node.url) : '',
+      apikey: typeof node?.apikey === 'string' ? node.apikey : '',
+      name: typeof node?.name === 'string' ? node.name.trim() : '',
+    }))
+    .filter((node) => Boolean(node.url));
+}
+
+export function ConnectionModeModal({
+  open,
+  onClose,
+}: ConnectionModeModalProps) {
+  const theme = useTheme();
+  const { t } = useTranslation(['auth', 'core']);
+  const selectedNode = useAtomValue(selectedNodeInfoAtom);
+  const setOpenCoreSetup = useSetAtom(isOpenCoreSetup);
+  const { handleSaveNodeInfo } = useAuth();
+  const [selectedMode, setSelectedMode] = useState<ConnectionMode>('local');
+  const [showManual, setShowManual] = useState(false);
+  const [localCoreStatus, setLocalCoreStatus] = useState<
+    'checking' | 'running' | 'missing'
+  >('checking');
+  const [customNodes, setCustomNodes] = useState<ApiKey[]>([]);
+  const [selectedCustomNodeUrl, setSelectedCustomNodeUrl] = useState('');
+  const [manualNodeName, setManualNodeName] = useState('');
+  const [manualNodeUrl, setManualNodeUrl] = useState('');
+  const [manualApiKey, setManualApiKey] = useState('');
+  const [editingNodeUrl, setEditingNodeUrl] = useState<string | null>(null);
+  const [dragOverCustomNodeIndex, setDragOverCustomNodeIndex] = useState<
+    number | null
+  >(null);
+  const isDraggingCustomNodeRef = useRef(false);
+  const pendingReloadNodesRef = useRef<ApiKey[] | null>(null);
+  const [reloadAfterNewNodeOpen, setReloadAfterNewNodeOpen] = useState(false);
+
+  const syncAllowedDomains = useCallback((nodes: ApiKey[]) => {
+    if (window?.electronAPI?.setAllowedDomains) {
+      window.electronAPI.setAllowedDomains(nodes.map((node) => node.url));
+    }
+  }, []);
+
+  const getSelectedCustomNode = useCallback((): ApiKey | null => {
+    if (!isManualNode(selectedNode?.url)) return null;
+
+    return {
+      url: normalizeNodeUrl(selectedNode?.url || ''),
+      apikey: selectedNode?.apikey || '',
+      name: selectedNode?.name || '',
+    };
+  }, [selectedNode?.apikey, selectedNode?.name, selectedNode?.url]);
+
+  const persistCustomNodes = useCallback(async (nodes: ApiKey[]) => {
+    const normalizedNodes = normalizeCustomNodes(nodes);
+    await window.sendMessage('setCustomNodes', normalizedNodes);
+    setCustomNodes(normalizedNodes);
+    return normalizedNodes;
+  }, []);
+
+  const loadCustomNodes = useCallback(async () => {
+    try {
+      let nodes = normalizeCustomNodes(
+        await window.sendMessage('getCustomNodesFromStorage')
+      );
+      const selectedCustomNode = getSelectedCustomNode();
+
+      if (
+        selectedCustomNode &&
+        !nodes.some((node) => node.url === selectedCustomNode.url)
+      ) {
+        nodes = [...nodes, selectedCustomNode];
+      }
+
+      setCustomNodes(nodes);
+      // syncAllowedDomains(nodes);
+    } catch (error) {
+      console.error(error);
+      setCustomNodes([]);
+    }
+  }, [getSelectedCustomNode]);
+
+  useEffect(() => {
+    if (!open) return;
+    if (selectedNode?.url === HTTPS_EXT_NODE_QORTAL_LINK) {
+      setSelectedMode('public');
+      setSelectedCustomNodeUrl('');
+    } else if (isManualNode(selectedNode?.url)) {
+      const selectedUrl = normalizeNodeUrl(selectedNode?.url || '');
+      setSelectedMode('custom');
+      setSelectedCustomNodeUrl(selectedUrl);
+      setManualNodeName(selectedNode?.name || '');
+      setManualNodeUrl(selectedUrl);
+      setManualApiKey(selectedNode?.apikey || '');
+    } else {
+      setSelectedMode('local');
+      setSelectedCustomNodeUrl('');
+    }
+  }, [open, selectedNode]);
+
+  useEffect(() => {
+    if (!open) return;
+    loadCustomNodes();
+  }, [loadCustomNodes, open]);
+
+  useEffect(() => {
+    if (!open) return;
+    let canceled = false;
+
+    const detectLocal = async () => {
+      setLocalCoreStatus('checking');
+      try {
+        if (window?.coreSetup?.isCoreRunning) {
+          const running = await window.coreSetup.isCoreRunning();
+          if (!canceled) {
+            setLocalCoreStatus(running ? 'running' : 'missing');
+          }
+          return;
+        }
+
+        const response = await fetch(
+          `${getDefaultLocalNodeUrl()}/admin/status`
+        );
+        if (!canceled) {
+          setLocalCoreStatus(response.ok ? 'running' : 'missing');
+        }
+      } catch (error) {
+        if (!canceled) {
+          setLocalCoreStatus('missing');
+        }
+      }
+    };
+
+    detectLocal();
+
+    return () => {
+      canceled = true;
+    };
+  }, [open]);
+
+  const localStatusLabel = useMemo(() => {
+    if (localCoreStatus === 'running') {
+      return t('auth:connection_mode.status_running');
+    }
+    if (localCoreStatus === 'missing') {
+      return t('auth:connection_mode.status_missing');
+    }
+    return t('auth:connection_mode.status_checking');
+  }, [localCoreStatus, t]);
+
+  const localStatusColor = useMemo(() => {
+    if (localCoreStatus === 'running') return theme.palette.other.positive;
+    if (localCoreStatus === 'missing') return theme.palette.other.warning;
+    return theme.palette.text.secondary;
+  }, [
+    localCoreStatus,
+    theme.palette.other.positive,
+    theme.palette.other.warning,
+    theme.palette.text.secondary,
+  ]);
+
+  const saveMode = async () => {
+    try {
+      if (selectedMode === 'local') {
+        if (localCoreStatus === 'missing') {
+          onClose();
+          setOpenCoreSetup(true);
+          return;
+        }
+        const localUrl = getDefaultLocalNodeUrl();
+        const apiKey = window?.coreSetup?.getApiKey
+          ? await window.coreSetup.getApiKey()
+          : '';
+
+        await handleSaveNodeInfo({
+          url: localUrl,
+          apikey: apiKey || '',
+        });
+      } else if (selectedMode === 'public') {
+        await handleSaveNodeInfo({
+          url: HTTPS_EXT_NODE_QORTAL_LINK,
+          apikey: '',
+        });
+      } else {
+        const selectedCustomNode =
+          customNodes.find((node) => node.url === selectedCustomNodeUrl) ||
+          getSelectedCustomNode();
+
+        if (!selectedCustomNode?.url) {
+          setShowManual(true);
+          return;
+        }
+
+        await handleSaveNodeInfo(selectedCustomNode);
+      }
+      onClose();
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const saveManualNode = async () => {
+    const normalizedUrl = normalizeNodeUrl(manualNodeUrl);
+    if (!normalizedUrl) return;
+    const payload = {
+      url: normalizedUrl,
+      apikey: manualApiKey.trim(),
+      name: manualNodeName.trim(),
+    };
+
+    const certOk = await ensureElectronCertIfLocalPrivateHttps(
+      payload.url,
+      payload.apikey || ''
+    );
+    if (!certOk.success) {
+      console.error(certOk.error || 'HTTPS certificate preparation failed');
+      return;
+    }
+
+    await handleSaveNodeInfo(payload);
+
+    try {
+      const existingNodes = normalizeCustomNodes(
+        await window.sendMessage('getCustomNodesFromStorage')
+      );
+      const nodeToReplace = editingNodeUrl || normalizedUrl;
+      const replaceIndex = existingNodes.findIndex(
+        (node) => node.url === nodeToReplace
+      );
+      const nextNodes: ApiKey[] = [];
+      let insertedPayload = false;
+
+      existingNodes.forEach((node, index) => {
+        if (index === replaceIndex) {
+          nextNodes.push(payload);
+          insertedPayload = true;
+          return;
+        }
+
+        if (node.url === normalizedUrl || node.url === editingNodeUrl) {
+          return;
+        }
+
+        nextNodes.push(node);
+      });
+
+      if (!insertedPayload) {
+        nextNodes.push(payload);
+      }
+
+      const urlsBefore = new Set(
+        existingNodes.map((n) => normalizeNodeUrl(n.url))
+      );
+      const hasNewUrl = nextNodes.some(
+        (n) => !urlsBefore.has(normalizeNodeUrl(n.url))
+      );
+
+      const persisted = await persistCustomNodes(nextNodes);
+      if (hasNewUrl) {
+        pendingReloadNodesRef.current = persisted;
+        setReloadAfterNewNodeOpen(true);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+
+    setSelectedMode('custom');
+    setSelectedCustomNodeUrl(normalizedUrl);
+    setEditingNodeUrl(null);
+    setShowManual(false);
+    onClose();
+  };
+
+  const handleReloadAfterNewNode = useCallback(() => {
+    const nodes = pendingReloadNodesRef.current;
+    pendingReloadNodesRef.current = null;
+    setReloadAfterNewNodeOpen(false);
+    if (nodes?.length) {
+      syncAllowedDomains(nodes);
+    }
+  }, [syncAllowedDomains]);
+
+  const openAddCustomNode = () => {
+    setEditingNodeUrl(null);
+    setManualNodeName('');
+    setManualNodeUrl('https://');
+    setManualApiKey('');
+    setShowManual(true);
+  };
+
+  const openEditCustomNode = (node: ApiKey) => {
+    setEditingNodeUrl(node.url);
+    setManualNodeName(node.name || '');
+    setManualNodeUrl(node.url);
+    setManualApiKey(node.apikey || '');
+    setShowManual(true);
+  };
+
+  const moveCustomNodeItem = useCallback(
+    async (fromIndex: number, toIndex: number) => {
+      if (fromIndex === toIndex || fromIndex < 0 || toIndex < 0) return;
+      if (fromIndex >= customNodes.length || toIndex >= customNodes.length) {
+        return;
+      }
+
+      const nextNodes = [...customNodes];
+      const [movedNode] = nextNodes.splice(fromIndex, 1);
+      nextNodes.splice(toIndex, 0, movedNode);
+
+      try {
+        await persistCustomNodes(nextNodes);
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    [customNodes, persistCustomNodes]
+  );
+
+  const removeCustomNode = async (nodeToRemove: ApiKey) => {
+    const nextNodes = customNodes.filter(
+      (node) => node.url !== nodeToRemove.url
+    );
+
+    try {
+      await persistCustomNodes(nextNodes);
+      if (selectedCustomNodeUrl === nodeToRemove.url) {
+        setSelectedCustomNodeUrl('');
+        setSelectedMode('local');
+      }
+      if (selectedNode?.url === nodeToRemove.url) {
+        const localUrl = getDefaultLocalNodeUrl();
+        const apiKey = window?.coreSetup?.getApiKey
+          ? await window.coreSetup.getApiKey()
+          : '';
+        const certOk = await ensureElectronCertIfLocalPrivateHttps(
+          localUrl,
+          apiKey || ''
+        );
+        if (!certOk.success) {
+          console.error(certOk.error || 'HTTPS certificate preparation failed');
+          return;
+        }
+        await handleSaveNodeInfo({
+          url: localUrl,
+          apikey: apiKey || '',
+        });
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <>
+      <NewNodeReloadRequiredDialog
+        open={reloadAfterNewNodeOpen}
+        onReload={handleReloadAfterNewNode}
+      />
+      <Dialog
+        open={open}
+        onClose={onClose}
+        maxWidth="sm"
+        fullWidth
+        slotProps={{
+          paper: {
+            sx: connectionModeMainPaperSx(theme),
+          },
+        }}
+      >
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'space-between',
+            px: 3,
+            pb: 0,
+            pt: 2,
+          }}
+        >
+          <Box sx={{ width: 32 }} />
+          <Box sx={{ flex: 1, minWidth: 0, textAlign: 'center' }}>
+            <Typography
+              sx={{
+                fontSize: '1.18rem',
+                fontWeight: 800,
+                letterSpacing: '-0.01em',
+                lineHeight: 1.2,
+              }}
+            >
+              {t('auth:connection_mode.title')}
+            </Typography>
+            <Typography
+              sx={{
+                color:
+                  theme.palette.mode === 'dark'
+                    ? 'rgba(214,221,233,0.68)'
+                    : theme.palette.text.secondary,
+                fontSize: '0.88rem',
+                mt: 1,
+              }}
+            >
+              {t('auth:connection_mode.subtitle')}
+            </Typography>
+          </Box>
+          <IconButton
+            onClick={onClose}
+            sx={{ color: theme.palette.text.secondary }}
+          >
+            <CloseRoundedIcon />
+          </IconButton>
+        </Box>
+
+        <Box sx={{ px: 3, pb: 3, pt: 3 }}>
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            <ButtonBase
+              onClick={() => setSelectedMode('local')}
+              sx={modeRowSx(theme, selectedMode === 'local')}
+            >
+              <Box sx={modeRadioSx(theme, selectedMode === 'local')}>
+                <Box
+                  component="span"
+                  sx={modeRadioDotSx(theme, selectedMode === 'local')}
+                />
+              </Box>
+              <ComputerRoundedIcon
+                sx={{ color: '#62A1FF', fontSize: 29, flexShrink: 0 }}
+              />
+              <Box sx={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
+                <Box
+                  sx={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    gap: 0.8,
+                  }}
+                >
+                  <Typography sx={modeTitleSx(theme)}>
+                    {t('auth:connection_mode.local_title')}
+                  </Typography>
+                  <Box sx={recommendedPillSx(theme)}>
+                    {t('auth:connection_mode.recommended')}
+                  </Box>
+                </Box>
+                <Typography sx={{ ...modeCopySx(theme), mt: 0.75 }}>
+                  {t('auth:connection_mode.local_full_decentralized')}
+                </Typography>
+                <Typography sx={modeCopySx(theme)}>
+                  {t('auth:connection_mode.local_faster')}
+                </Typography>
+                <Typography sx={modeCopySx(theme)}>
+                  {t('auth:connection_mode.local_data_local')}
+                </Typography>
+              </Box>
+              <Box sx={modeTrailingSx}>
+                <Box sx={statusDotSx(localStatusColor)} />
+                <Typography sx={statusTextSx(localStatusColor)}>
+                  {localStatusLabel}
+                </Typography>
+                <ChevronRightRoundedIcon
+                  sx={{
+                    color:
+                      theme.palette.mode === 'dark'
+                        ? 'rgba(214,221,233,0.7)'
+                        : alpha(theme.palette.text.primary, 0.45),
+                    fontSize: 25,
+                  }}
+                />
+              </Box>
+            </ButtonBase>
+
+            <ButtonBase
+              onClick={() => setSelectedMode('public')}
+              sx={modeRowSx(theme, selectedMode === 'public')}
+            >
+              <Box sx={modeRadioSx(theme, selectedMode === 'public')}>
+                <Box
+                  component="span"
+                  sx={modeRadioDotSx(theme, selectedMode === 'public')}
+                />
+              </Box>
+              <CloudRoundedIcon
+                sx={{ color: '#9f75ff', fontSize: 30, flexShrink: 0 }}
+              />
+              <Box sx={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
+                <Typography sx={modeTitleSx(theme)}>
+                  {t('auth:connection_mode.public_title')}
+                </Typography>
+                <Typography sx={{ ...modeCopySx(theme), mt: 0.75 }}>
+                  {t('auth:connection_mode.public_quick')}
+                </Typography>
+                <Typography sx={modeCopySx(theme)}>
+                  {t('auth:connection_mode.public_limited_decentralization')}
+                </Typography>
+                <Typography sx={modeCopySx(theme)}>
+                  {t('auth:connection_mode.public_shared_infrastructure')}
+                </Typography>
+              </Box>
+              <ChevronRightRoundedIcon
+                sx={{
+                  color:
+                    theme.palette.mode === 'dark'
+                      ? 'rgba(214,221,233,0.7)'
+                      : alpha(theme.palette.text.primary, 0.45),
+                  fontSize: 25,
+                  flexShrink: 0,
+                }}
+              />
+            </ButtonBase>
+
+            <Box sx={{ mt: 1.5 }}>
+              <Box sx={sectionDividerSx(theme)} />
+              <Box
+                sx={{
+                  alignItems: 'center',
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  mb: 2,
+                  pt: 2.5,
+                }}
+              >
+                <Typography sx={sectionTitleSx(theme)}>
+                  {t('auth:connection_mode.section_custom_nodes')}
+                </Typography>
+                <ButtonBase
+                  onClick={openAddCustomNode}
+                  sx={addCustomNodeSx(theme)}
+                >
+                  <AddRoundedIcon sx={{ fontSize: 18 }} />
+                  {t('auth:connection_mode.add_custom_node')}
+                </ButtonBase>
+              </Box>
+
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 1.5,
+                  maxHeight: { xs: 180, sm: 260 },
+                  overflowY: 'auto',
+                  pr: 0.35,
+                }}
+              >
+                {customNodes.length === 0 && (
+                  <Box
+                    sx={{
+                      border:
+                        theme.palette.mode === 'dark'
+                          ? '1px dashed rgba(255,255,255,0.1)'
+                          : `1px dashed ${theme.palette.border.main}`,
+                      borderRadius: '8px',
+                      color:
+                        theme.palette.mode === 'dark'
+                          ? 'rgba(214,221,233,0.48)'
+                          : theme.palette.text.secondary,
+                      fontSize: '0.82rem',
+                      px: 1.35,
+                      py: 1.1,
+                    }}
+                  >
+                    {t('auth:connection_mode.empty_custom_nodes')}
+                  </Box>
+                )}
+
+                {customNodes.map((node, index) => {
+                  const isSelected =
+                    selectedMode === 'custom' &&
+                    selectedCustomNodeUrl === node.url;
+                  const displayName = node.name?.trim() || node.url;
+
+                  return (
+                    <Box
+                      key={node.url}
+                      role="button"
+                      tabIndex={0}
+                      draggable
+                      onDragStart={(event) => {
+                        isDraggingCustomNodeRef.current = true;
+                        event.dataTransfer.effectAllowed = 'move';
+                        event.dataTransfer.setData(
+                          CUSTOM_NODE_DRAG_DATA,
+                          String(index)
+                        );
+                        event.dataTransfer.setData('text/plain', String(index));
+                      }}
+                      onDragOver={(event) => {
+                        event.preventDefault();
+                        event.dataTransfer.dropEffect = 'move';
+                        setDragOverCustomNodeIndex(index);
+                      }}
+                      onDragLeave={() => {
+                        setDragOverCustomNodeIndex((currentIndex) =>
+                          currentIndex === index ? null : currentIndex
+                        );
+                      }}
+                      onDrop={(event) => {
+                        event.preventDefault();
+                        const draggedIndex =
+                          event.dataTransfer.getData(CUSTOM_NODE_DRAG_DATA) ||
+                          event.dataTransfer.getData('text/plain');
+                        const fromIndex = Number(draggedIndex);
+                        setDragOverCustomNodeIndex(null);
+
+                        if (Number.isInteger(fromIndex)) {
+                          void moveCustomNodeItem(fromIndex, index);
+                        }
+                      }}
+                      onDragEnd={() => {
+                        window.setTimeout(() => {
+                          isDraggingCustomNodeRef.current = false;
+                        }, 0);
+                        setDragOverCustomNodeIndex(null);
+                      }}
+                      onClick={() => {
+                        if (isDraggingCustomNodeRef.current) return;
+                        setSelectedMode('custom');
+                        setSelectedCustomNodeUrl(node.url);
+                      }}
+                      onKeyDown={(event) => {
+                        if (event.key === 'Enter' || event.key === ' ') {
+                          event.preventDefault();
+                          setSelectedMode('custom');
+                          setSelectedCustomNodeUrl(node.url);
+                        }
+                      }}
+                      sx={customNodeRowSx(
+                        theme,
+                        isSelected,
+                        dragOverCustomNodeIndex === index
+                      )}
+                    >
+                      <Box
+                        sx={{
+                          alignItems: 'center',
+                          display: 'flex',
+                          gap: 1,
+                          minWidth: 0,
+                        }}
+                      >
+                        <DnsRoundedIcon
+                          sx={{
+                            color: isSelected
+                              ? theme.palette.primary.main
+                              : theme.palette.mode === 'dark'
+                                ? 'rgba(214,221,233,0.52)'
+                                : alpha(theme.palette.text.primary, 0.42),
+                            fontSize: 20,
+                            flexShrink: 0,
+                          }}
+                        />
+                        <Box sx={{ minWidth: 0 }}>
+                          <Typography
+                            sx={{
+                              fontSize: '0.88rem',
+                              fontWeight: 700,
+                              overflow: 'hidden',
+                              textOverflow: 'ellipsis',
+                              whiteSpace: 'nowrap',
+                            }}
+                          >
+                            {displayName}
+                          </Typography>
+                          <Typography sx={modeCopySx(theme)}>
+                            {node.url}
+                          </Typography>
+                        </Box>
+                      </Box>
+
+                      <Box
+                        onMouseDown={(event) => event.stopPropagation()}
+                        sx={{ display: 'flex', flexShrink: 0, gap: 0.6 }}
+                      >
+                        <IconButton
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            openEditCustomNode(node);
+                          }}
+                          sx={{
+                            color:
+                              theme.palette.mode === 'dark'
+                                ? 'rgba(214,221,233,0.54)'
+                                : alpha(theme.palette.text.primary, 0.5),
+                          }}
+                        >
+                          <EditRoundedIcon sx={{ fontSize: 18 }} />
+                        </IconButton>
+                        <IconButton
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            removeCustomNode(node);
+                          }}
+                          sx={{
+                            color:
+                              theme.palette.mode === 'dark'
+                                ? 'rgba(214,221,233,0.54)'
+                                : alpha(theme.palette.text.primary, 0.5),
+                          }}
+                        >
+                          <DeleteOutlineRoundedIcon sx={{ fontSize: 18 }} />
+                        </IconButton>
+                      </Box>
+                    </Box>
+                  );
+                })}
+              </Box>
+            </Box>
+          </Box>
+
+          <Box sx={modalFooterSx(theme)}>
+            <Link
+              component="button"
+              onClick={openAddCustomNode}
+              sx={manualNodeLinkSx(theme)}
+            >
+              {t('auth:connection_mode.manual_setup_link')}
+            </Link>
+            <Button
+              onClick={saveMode}
+              startIcon={<SaveRoundedIcon sx={{ fontSize: 18 }} />}
+              sx={saveSettingsButtonSx(theme)}
+              variant="contained"
+            >
+              {t('auth:connection_mode.save_settings')}
+            </Button>
+          </Box>
+        </Box>
+      </Dialog>
+
+      <Dialog
+        open={showManual}
+        onClose={() => {
+          setEditingNodeUrl(null);
+          setShowManual(false);
+        }}
+        maxWidth="sm"
+        fullWidth
+        slotProps={{
+          paper: {
+            sx: connectionModeManualPaperSx(theme),
+          },
+        }}
+      >
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'space-between',
+            px: 2.4,
+            py: 1.8,
+          }}
+        >
+          <IconButton
+            onClick={() => {
+              setEditingNodeUrl(null);
+              setShowManual(false);
+            }}
+            sx={{ color: theme.palette.text.secondary }}
+          >
+            <ArrowBackRoundedIcon />
+          </IconButton>
+          <Typography
+            sx={{
+              flex: 1,
+              fontSize: '1.06rem',
+              fontWeight: 700,
+              textAlign: 'center',
+            }}
+          >
+            {editingNodeUrl
+              ? t('auth:connection_mode.manual_edit_title')
+              : t('auth:connection_mode.manual_add_title')}
+          </Typography>
+          <Box sx={{ width: 40 }} />
+        </Box>
+
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1.3,
+            px: 2.4,
+            pb: 2.4,
+          }}
+        >
+          <Box>
+            <Typography sx={fieldLabelSx(theme)}>
+              {t('auth:connection_mode.field_name')}
+            </Typography>
+            <AuthInput
+              value={manualNodeName}
+              onChange={(event) => setManualNodeName(event.target.value)}
+              placeholder={t('auth:connection_mode.placeholder_node_name')}
+            />
+          </Box>
+          <Box>
+            <Typography sx={fieldLabelSx(theme)}>
+              {t('auth:connection_mode.field_node_url')}
+            </Typography>
+            <AuthInput
+              value={manualNodeUrl}
+              onChange={(event) => setManualNodeUrl(event.target.value)}
+              placeholder={t('auth:connection_mode.placeholder_node_url')}
+            />
+          </Box>
+          <Box>
+            <Typography sx={fieldLabelSx(theme)}>
+              {t('auth:connection_mode.field_api_key_optional')}
+            </Typography>
+            <AuthInput
+              value={manualApiKey}
+              onChange={(event) => setManualApiKey(event.target.value)}
+              placeholder={t('auth:connection_mode.placeholder_api_key')}
+            />
+          </Box>
+
+          <Box
+            sx={{
+              alignItems: 'center',
+              display: 'flex',
+              justifyContent: 'space-between',
+              mt: 0.6,
+            }}
+          >
+            <Link
+              component="button"
+              onClick={() => {
+                setEditingNodeUrl(null);
+                setShowManual(false);
+              }}
+              sx={{
+                color: theme.palette.text.secondary,
+                fontSize: '0.86rem',
+                textDecoration: 'none',
+              }}
+            >
+              {t('core:action.return', { postProcess: 'capitalizeFirstChar' })}
+            </Link>
+            <AuthButton
+              disabled={!manualNodeUrl.trim()}
+              onClick={saveManualNode}
+              fullWidth={false}
+            >
+              {t('core:action.save', { postProcess: 'capitalizeFirstChar' })}
+            </AuthButton>
+          </Box>
+        </Box>
+      </Dialog>
+    </>
+  );
+}
+
+function connectionModeMainPaperSx(theme: Theme) {
+  if (theme.palette.mode === 'dark') {
+    return {
+      background: '#0d1117',
+      border: '1px solid rgba(255,255,255,0.08)',
+      borderRadius: '10px',
+      boxShadow: '0 24px 50px rgba(0,0,0,0.32)',
+      maxHeight: 'calc(100vh - 48px)',
+      maxWidth: '712px',
+    };
+  }
+  return {
+    background: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.border.subtle}`,
+    borderRadius: '10px',
+    boxShadow:
+      '0 22px 50px rgba(15, 23, 42, 0.075), 0 0 0 1px rgba(28, 36, 52, 0.045)',
+    maxHeight: 'calc(100vh - 48px)',
+    maxWidth: '712px',
+    color: theme.palette.text.primary,
+  };
+}
+
+function connectionModeManualPaperSx(theme: Theme) {
+  if (theme.palette.mode === 'dark') {
+    return {
+      background: '#0d1117',
+      border: '1px solid rgba(255,255,255,0.08)',
+      borderRadius: '10px',
+      boxShadow: '0 24px 50px rgba(0,0,0,0.32)',
+      maxWidth: '460px',
+    };
+  }
+  return {
+    background: theme.palette.background.paper,
+    border: `1px solid ${theme.palette.border.subtle}`,
+    borderRadius: '10px',
+    boxShadow:
+      '0 22px 50px rgba(15, 23, 42, 0.075), 0 0 0 1px rgba(28, 36, 52, 0.045)',
+    maxWidth: '460px',
+    color: theme.palette.text.primary,
+  };
+}
+
+function modeRowSx(theme: Theme, active: boolean) {
+  if (theme.palette.mode === 'dark') {
+    return {
+      alignItems: 'center',
+      background: active
+        ? 'linear-gradient(180deg, rgba(13,22,37,0.82), rgba(12,19,29,0.82))'
+        : 'rgba(255,255,255,0.012)',
+      border: active
+        ? '1px solid rgba(69, 132, 255, 0.95)'
+        : '1px solid rgba(255,255,255,0.075)',
+      borderRadius: '8px',
+      boxShadow: active ? '0 0 0 1px rgba(69,132,255,0.08)' : 'none',
+      display: 'flex',
+      gap: { xs: 2, sm: 2.5 },
+      justifyContent: 'space-between',
+      minHeight: { xs: 116, sm: 118 },
+      px: { xs: 1.75, sm: 2.5 },
+      py: { xs: 2, sm: 2.15 },
+      textAlign: 'left',
+      transition:
+        'background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease',
+      width: '100%',
+      '&:hover': {
+        backgroundColor: active ? undefined : 'rgba(255,255,255,0.025)',
+        borderColor: active
+          ? 'rgba(69,132,255,0.95)'
+          : 'rgba(255,255,255,0.12)',
+      },
+    };
+  }
+
+  const pm = theme.palette.primary.main;
+  return {
+    alignItems: 'center',
+    background: active
+      ? `linear-gradient(180deg, ${alpha(pm, 0.14)}, ${alpha(pm, 0.06)})`
+      : theme.palette.background.surface,
+    border: active
+      ? `1px solid ${alpha(pm, 0.72)}`
+      : `1px solid ${theme.palette.border.subtle}`,
+    borderRadius: '8px',
+    boxShadow: active ? `0 0 0 1px ${alpha(pm, 0.12)}` : 'none',
+    display: 'flex',
+    gap: { xs: 2, sm: 2.5 },
+    justifyContent: 'space-between',
+    minHeight: { xs: 116, sm: 118 },
+    px: { xs: 1.75, sm: 2.5 },
+    py: { xs: 2, sm: 2.15 },
+    textAlign: 'left',
+    transition:
+      'background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease',
+    width: '100%',
+    '&:hover': {
+      backgroundColor: active ? undefined : theme.palette.action.hover,
+      borderColor: active ? alpha(pm, 0.85) : theme.palette.border.main,
+    },
+  };
+}
+
+function modeRadioSx(theme: Theme, active: boolean) {
+  if (theme.palette.mode === 'dark') {
+    return {
+      alignItems: 'center',
+      border: `2px solid ${active ? '#3E82FF' : 'rgba(214,221,233,0.22)'}`,
+      borderRadius: '999px',
+      display: 'inline-flex',
+      flexShrink: 0,
+      height: 24,
+      justifyContent: 'center',
+      width: 24,
+    };
+  }
+
+  const pm = theme.palette.primary.main;
+  return {
+    alignItems: 'center',
+    border: `2px solid ${
+      active ? pm : alpha(theme.palette.text.primary, 0.22)
+    }`,
+    borderRadius: '999px',
+    display: 'inline-flex',
+    flexShrink: 0,
+    height: 24,
+    justifyContent: 'center',
+    width: 24,
+  };
+}
+
+function modeRadioDotSx(theme: Theme, active: boolean) {
+  if (theme.palette.mode === 'dark') {
+    return {
+      backgroundColor: active ? '#3E82FF' : 'transparent',
+      borderRadius: '999px',
+      display: 'block',
+      height: 12,
+      width: 12,
+    };
+  }
+
+  return {
+    backgroundColor: active ? theme.palette.primary.main : 'transparent',
+    borderRadius: '999px',
+    display: 'block',
+    height: 12,
+    width: 12,
+  };
+}
+
+function modeTitleSx(theme: Theme) {
+  if (theme.palette.mode === 'dark') {
+    return {
+      color: 'rgba(246,248,252,0.96)',
+      fontSize: '0.98rem',
+      fontWeight: 800,
+      lineHeight: 1.25,
+    };
+  }
+  return {
+    color: theme.palette.text.primary,
+    fontSize: '0.98rem',
+    fontWeight: 800,
+    lineHeight: 1.25,
+  };
+}
+
+function recommendedPillSx(theme: Theme) {
+  if (theme.palette.mode === 'dark') {
+    return {
+      backgroundColor: 'rgba(62,130,255,0.18)',
+      borderRadius: '999px',
+      color: '#5390FF',
+      fontSize: '0.72rem',
+      fontWeight: 700,
+      lineHeight: 1,
+      px: 1,
+      py: 0.52,
+    };
+  }
+
+  const pm = theme.palette.primary.main;
+  return {
+    backgroundColor: alpha(pm, 0.14),
+    borderRadius: '999px',
+    color: theme.palette.primary.dark,
+    fontSize: '0.72rem',
+    fontWeight: 700,
+    lineHeight: 1,
+    px: 1,
+    py: 0.52,
+  };
+}
+
+function modeCopySx(theme: Theme) {
+  if (theme.palette.mode === 'dark') {
+    return {
+      color: 'rgba(214,221,233,0.72)',
+      fontSize: '0.82rem',
+      lineHeight: 1.62,
+    };
+  }
+  return {
+    color: theme.palette.text.secondary,
+    fontSize: '0.82rem',
+    lineHeight: 1.62,
+  };
+}
+
+const modeTrailingSx = {
+  alignItems: 'center',
+  display: { xs: 'none', sm: 'inline-flex' },
+  flexShrink: 0,
+  gap: 1,
+  justifyContent: 'flex-end',
+  ml: 1,
+};
+
+const statusDotSx = (color: string) => ({
+  backgroundColor: color,
+  borderRadius: '999px',
+  height: 8,
+  width: 8,
+});
+
+const statusTextSx = (color: string) => ({
+  color,
+  fontSize: '0.82rem',
+  fontWeight: 800,
+  whiteSpace: 'nowrap',
+});
+
+function sectionDividerSx(theme: Theme) {
+  if (theme.palette.mode === 'dark') {
+    return { borderTop: '1px solid rgba(255,255,255,0.055)' };
+  }
+  return { borderTop: `1px solid ${theme.palette.divider}` };
+}
+
+function sectionTitleSx(theme: Theme) {
+  return modeTitleSx(theme);
+}
+
+function addCustomNodeSx(theme: Theme) {
+  if (theme.palette.mode === 'dark') {
+    return {
+      alignItems: 'center',
+      alignSelf: 'center',
+      color: '#5390FF',
+      display: 'inline-flex',
+      fontSize: '0.86rem',
+      fontWeight: 600,
+      gap: 0.45,
+      lineHeight: 1,
+      minHeight: 26,
+      p: 0,
+      '&:hover': {
+        color: '#7FAAFF',
+      },
+    };
+  }
+
+  return {
+    alignItems: 'center',
+    alignSelf: 'center',
+    color: theme.palette.primary.main,
+    display: 'inline-flex',
+    fontSize: '0.86rem',
+    fontWeight: 600,
+    gap: 0.45,
+    lineHeight: 1,
+    minHeight: 26,
+    p: 0,
+    '&:hover': {
+      color: theme.palette.primary.dark,
+    },
+  };
+}
+
+function customNodeRowSx(theme: Theme, active: boolean, isDragOver = false) {
+  if (theme.palette.mode === 'dark') {
+    return {
+      alignItems: 'center',
+      backgroundColor: isDragOver
+        ? 'rgba(118,165,255,0.08)'
+        : active
+          ? 'rgba(255,255,255,0.032)'
+          : 'rgba(255,255,255,0.012)',
+      border: `1px solid ${
+        isDragOver
+          ? 'rgba(118,165,255,0.4)'
+          : active
+            ? 'rgba(92,145,255,0.3)'
+            : 'rgba(255,255,255,0.075)'
+      }`,
+      borderRadius: '8px',
+      cursor: 'grab',
+      display: 'flex',
+      gap: 1.5,
+      justifyContent: 'space-between',
+      minHeight: 84,
+      outline: 'none',
+      opacity: isDragOver ? 0.78 : 1,
+      px: 2,
+      py: 2,
+      transition:
+        'background-color 160ms ease, border-color 160ms ease, opacity 140ms ease',
+      '&:active': {
+        cursor: 'grabbing',
+      },
+      '&:hover': {
+        backgroundColor: 'rgba(255,255,255,0.032)',
+        borderColor: active
+          ? 'rgba(92,145,255,0.34)'
+          : 'rgba(255,255,255,0.12)',
+      },
+      '&:focus-visible': {
+        borderColor: 'rgba(118,165,255,0.42)',
+      },
+    };
+  }
+
+  const pm = theme.palette.primary.main;
+  return {
+    alignItems: 'center',
+    backgroundColor: isDragOver
+      ? alpha(pm, 0.12)
+      : active
+        ? alpha(pm, 0.06)
+        : theme.palette.background.surface,
+    border: `1px solid ${
+      isDragOver
+        ? alpha(pm, 0.38)
+        : active
+          ? alpha(pm, 0.32)
+          : theme.palette.border.subtle
+    }`,
+    borderRadius: '8px',
+    cursor: 'grab',
+    display: 'flex',
+    gap: 1.5,
+    justifyContent: 'space-between',
+    minHeight: 84,
+    outline: 'none',
+    opacity: isDragOver ? 0.78 : 1,
+    px: 2,
+    py: 2,
+    transition:
+      'background-color 160ms ease, border-color 160ms ease, opacity 140ms ease',
+    '&:active': {
+      cursor: 'grabbing',
+    },
+    '&:hover': {
+      backgroundColor: theme.palette.action.hover,
+      borderColor: active ? alpha(pm, 0.42) : theme.palette.border.main,
+    },
+    '&:focus-visible': {
+      borderColor: alpha(pm, 0.45),
+    },
+  };
+}
+
+function modalFooterSx(theme: Theme) {
+  if (theme.palette.mode === 'dark') {
+    return {
+      alignItems: 'center',
+      borderTop: '1px solid rgba(255,255,255,0.055)',
+      display: 'flex',
+      justifyContent: 'space-between',
+      mt: 2.75,
+      pt: 3,
+    };
+  }
+  return {
+    alignItems: 'center',
+    borderTop: `1px solid ${theme.palette.divider}`,
+    display: 'flex',
+    justifyContent: 'space-between',
+    mt: 2.75,
+    pt: 3,
+  };
+}
+
+function manualNodeLinkSx(theme: Theme) {
+  if (theme.palette.mode === 'dark') {
+    return {
+      color: '#5390FF',
+      fontSize: '0.86rem',
+      fontWeight: 500,
+      textDecoration: 'none',
+      '&:hover': {
+        color: '#7FAAFF',
+      },
+    };
+  }
+
+  return {
+    color: theme.palette.primary.main,
+    fontSize: '0.86rem',
+    fontWeight: 500,
+    textDecoration: 'none',
+    '&:hover': {
+      color: theme.palette.primary.dark,
+    },
+  };
+}
+
+function saveSettingsButtonSx(_theme: Theme) {
+  return {
+    alignItems: 'center',
+    background:
+      'linear-gradient(180deg, rgba(62,107,214,0.98), rgba(39,83,184,0.98))',
+    border: '1px solid rgba(92,145,255,0.24)',
+    borderRadius: '6px',
+    color: '#f6f8fc',
+    display: 'inline-flex',
+    fontSize: '0.86rem',
+    fontWeight: 600,
+    letterSpacing: 0,
+    lineHeight: 1.75,
+    minHeight: 40,
+    minWidth: 174,
+    px: 2.4,
+    textTransform: 'none',
+    transition:
+      'background 160ms ease, border-color 160ms ease, transform 160ms ease',
+    '& .MuiButton-startIcon': {
+      mr: 0.8,
+    },
+    '&:hover': {
+      background:
+        'linear-gradient(180deg, rgba(69,115,224,1), rgba(44,90,193,1))',
+      borderColor: 'rgba(118,165,255,0.3)',
+      transform: 'translateY(-1px)',
+    },
+  };
+}
+
+function fieldLabelSx(theme: Theme) {
+  if (theme.palette.mode === 'dark') {
+    return {
+      color: 'rgba(214,221,233,0.62)',
+      fontSize: '0.74rem',
+      fontWeight: 700,
+      letterSpacing: '0.08em',
+      mb: 0.75,
+      textTransform: 'uppercase',
+    };
+  }
+  return {
+    color: theme.palette.text.secondary,
+    fontSize: '0.74rem',
+    fontWeight: 700,
+    letterSpacing: '0.08em',
+    mb: 0.75,
+    textTransform: 'uppercase',
+  };
+}
diff --git a/src/components/Auth/DownloadWallet.tsx b/src/components/Auth/DownloadWallet.tsx
index 909ad37e..0541ff8c 100644
--- a/src/components/Auth/DownloadWallet.tsx
+++ b/src/components/Auth/DownloadWallet.tsx
@@ -17,11 +17,12 @@ import { useState } from 'react';
 import { decryptStoredWallet } from '../../utils/decryptWallet';
 import PhraseWallet from '../../utils/generateWallet/phrase-wallet';
 import { crypto, walletVersion } from '../../constants/decryptWallet';
+import { executeEvent } from '../../utils/events';
+import { getWalletErrorMessage } from '../../utils/walletErrorMessages';
 
 export const DownloadWallet = ({
   returnToMain,
   setIsLoading,
-  showInfo,
   rawWallet,
   setWalletToBeDownloaded,
   walletToBeDownloaded,
@@ -29,6 +30,9 @@ export const DownloadWallet = ({
   const [walletToBeDownloadedPassword, setWalletToBeDownloadedPassword] =
     useState<string>('');
   const [newPassword, setNewPassword] = useState<string>('');
+  const [isCurrentPasswordEditable, setIsCurrentPasswordEditable] =
+    useState(false);
+  const [isNewPasswordEditable, setIsNewPasswordEditable] = useState(false);
   const [keepCurrentPassword, setKeepCurrentPassword] = useState<boolean>(true);
   const theme = useTheme();
   const [walletToBeDownloadedError, setWalletToBeDownloadedError] =
@@ -43,7 +47,14 @@ export const DownloadWallet = ({
         walletToBeDownloaded.qortAddress
       );
     } catch (error: any) {
-      setWalletToBeDownloadedError(error?.message);
+      setWalletToBeDownloadedError(
+        getWalletErrorMessage(
+          error,
+          t('auth:wallet_errors.unable_to_save_backup', {
+            postProcess: 'capitalizeFirstChar',
+          })
+        )
+      );
     }
   };
 
@@ -101,7 +112,14 @@ export const DownloadWallet = ({
         newPasswordForWallet
       );
     } catch (error: any) {
-      setWalletToBeDownloadedError(error?.message);
+      setWalletToBeDownloadedError(
+        getWalletErrorMessage(
+          error,
+          t('auth:wallet_errors.unable_to_prepare_backup', {
+            postProcess: 'capitalizeFirstChar',
+          })
+        )
+      );
     } finally {
       setIsLoading(false);
     }
@@ -181,6 +199,24 @@ export const DownloadWallet = ({
             id="standard-adornment-password"
             value={walletToBeDownloadedPassword}
             onChange={(e) => setWalletToBeDownloadedPassword(e.target.value)}
+            autoComplete="new-password"
+            name="download-wallet-current-confirmation"
+            onFocus={() => setIsCurrentPasswordEditable(true)}
+            onMouseDown={() => setIsCurrentPasswordEditable(true)}
+            onBlur={() => {
+              if (!walletToBeDownloadedPassword) {
+                setIsCurrentPasswordEditable(false);
+              }
+            }}
+            InputProps={{
+              readOnly: !isCurrentPasswordEditable,
+            }}
+            inputProps={{
+              autoComplete: 'new-password',
+              'data-1p-ignore': 'true',
+              'data-lpignore': 'true',
+              spellCheck: 'false',
+            }}
           />
 
           <Spacer height="20px" />
@@ -233,6 +269,24 @@ export const DownloadWallet = ({
                 id="standard-adornment-password"
                 value={newPassword}
                 onChange={(e) => setNewPassword(e.target.value)}
+                autoComplete="new-password"
+                name="download-wallet-new-passphrase"
+                onFocus={() => setIsNewPasswordEditable(true)}
+                onMouseDown={() => setIsNewPasswordEditable(true)}
+                onBlur={() => {
+                  if (!newPassword) {
+                    setIsNewPasswordEditable(false);
+                  }
+                }}
+                InputProps={{
+                  readOnly: !isNewPasswordEditable,
+                }}
+                inputProps={{
+                  autoComplete: 'new-password',
+                  'data-1p-ignore': 'true',
+                  'data-lpignore': 'true',
+                  spellCheck: 'false',
+                }}
               />
 
               <Spacer height="20px" />
@@ -254,10 +308,12 @@ export const DownloadWallet = ({
           <CustomButton
             onClick={async () => {
               await saveFileToDiskFunc();
-              await showInfo({
+              executeEvent('openGlobalSnackBar', {
                 message: t('auth:message.generic.keep_secure', {
                   postProcess: 'capitalizeFirstChar',
                 }),
+                type: 'info',
+                duration: 5600,
               });
             }}
           >
diff --git a/src/components/Auth/NewNodeReloadRequiredDialog.tsx b/src/components/Auth/NewNodeReloadRequiredDialog.tsx
new file mode 100644
index 00000000..9cca09b7
--- /dev/null
+++ b/src/components/Auth/NewNodeReloadRequiredDialog.tsx
@@ -0,0 +1,96 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  alpha,
+  useTheme,
+} from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+type NewNodeReloadRequiredDialogProps = {
+  open: boolean;
+  onReload: () => void;
+};
+
+export function NewNodeReloadRequiredDialog({
+  open,
+  onReload,
+}: NewNodeReloadRequiredDialogProps) {
+  const theme = useTheme();
+  const { t } = useTranslation(['auth']);
+
+  return (
+    <Dialog
+      open={open}
+      disableEscapeKeyDown
+      onClose={() => {
+        /* Must reload via primary action — same UX contract as blocking confirmations */
+      }}
+      aria-labelledby="new-node-reload-dialog-title"
+      aria-describedby="new-node-reload-dialog-description"
+      PaperProps={{
+        sx: {
+          bgcolor: '#111820',
+          backgroundImage: 'none',
+          border: `1px solid ${alpha('#A9BCD8', 0.18)}`,
+          borderRadius: '18px',
+          boxShadow: `0 24px 58px ${alpha('#000', 0.42)}`,
+          maxWidth: 360,
+          width: 'calc(100% - 40px)',
+        },
+      }}
+    >
+      <DialogTitle
+        id="new-node-reload-dialog-title"
+        sx={{
+          color: theme.palette.text.primary,
+          fontSize: '1.08rem',
+          fontWeight: 650,
+          pb: 0.8,
+          pt: 2.3,
+          textAlign: 'center',
+        }}
+      >
+        {t('auth:connection_mode.reload_after_new_node_title', {
+          postProcess: 'capitalizeFirstChar',
+        })}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText
+          id="new-node-reload-dialog-description"
+          sx={{
+            color: alpha(theme.palette.text.secondary, 0.9),
+            fontSize: '0.88rem',
+            lineHeight: 1.48,
+            textAlign: 'center',
+          }}
+        >
+          {t('auth:connection_mode.reload_after_new_node_message')}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions sx={{ justifyContent: 'center', px: 2.3, pb: 2.3 }}>
+        <Button
+          variant="contained"
+          onClick={onReload}
+          autoFocus
+          sx={{
+            bgcolor: theme.palette.primary.main,
+            borderRadius: '10px',
+            color: theme.palette.primary.contrastText,
+            fontWeight: 600,
+            minWidth: 200,
+            textTransform: 'none',
+            '&:hover': {
+              bgcolor: theme.palette.primary.dark,
+            },
+          }}
+        >
+          {t('auth:connection_mode.reload_after_new_node_button')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
diff --git a/src/components/AuthenticationForm.tsx b/src/components/AuthenticationForm.tsx
index 026cbb4d..d624588f 100644
--- a/src/components/AuthenticationForm.tsx
+++ b/src/components/AuthenticationForm.tsx
@@ -1,20 +1,36 @@
-import { useEffect, useRef, useState } from 'react';
-import { Box, Typography, useTheme } from '@mui/material';
-import Avatar from '@mui/material/Avatar';
-import PersonIcon from '@mui/icons-material/Person';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import {
+  Avatar,
+  Box,
+  ButtonBase,
+  Divider,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { alpha, type Theme } from '@mui/material/styles';
+import PersonIcon from '@mui/icons-material/Person';
+import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
+import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
+import SettingsEthernetRoundedIcon from '@mui/icons-material/SettingsEthernetRounded';
+import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
+import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
 import { useAtom } from 'jotai';
 import { authenticatePasswordAtom } from '../atoms/global';
-import { Return } from '../assets/Icons/Return.tsx';
-import Logo1Dark from '../assets/svgs/Logo1Dark.svg';
-import { isLocalNodeUrl } from '../constants/constants';
-import { nodeDisplay } from '../utils/helpers.ts';
-import { CustomButton, CustomLabel, TextP } from '../styles/App-styles.ts';
-import { Spacer } from '../common/Spacer';
 import { PasswordField, ErrorText } from './index';
 import type { ApiKey } from '../types/auth';
 import { getBaseApiReactForAvatar } from '../App';
 import { getPrimaryNameForAvatar } from './Group/groupApi';
+import { AuthButton, AuthFrame, authPasswordFieldSx } from './Auth/AuthShell';
+import {
+  HTTPS_EXT_NODE_QORTAL_LINK,
+  isLocalNodeUrl,
+} from '../constants/constants';
+import { ConnectionModeModal } from './Auth/ConnectionModeModal';
+import type {
+  AuthUnlockTransitionSnapshot,
+  SharedElementRect,
+} from '../types/authTransition';
 
 type RawWallet = {
   name?: string;
@@ -26,182 +42,624 @@ type AuthenticationFormProps = {
   rawWallet: RawWallet;
   selectedNode: ApiKey | null;
   walletToBeDecryptedError: string;
+  unlockTransition?: AuthUnlockTransitionSnapshot | null;
   onBack: () => void;
   onAuthenticate: () => Promise<void>;
+  onUnlockTransitionComplete?: () => void;
+};
+
+const shortenAddress = (address?: string) => {
+  if (!address) return '';
+  if (address.length <= 20) return address;
+  return `${address.slice(0, 8)}...${address.slice(-8)}`;
+};
+
+const isAddressLikeLabel = (value?: string, walletAddress?: string) => {
+  const trimmedValue = value?.trim();
+  const trimmedWalletAddress = walletAddress?.trim();
+  if (!trimmedValue) return false;
+  if (trimmedWalletAddress && trimmedValue === trimmedWalletAddress) return true;
+  return /^Q[a-zA-Z0-9]{24,}$/.test(trimmedValue) && !trimmedValue.includes(' ');
+};
+
+const parsefilenameQortal = (filename?: string) => {
+  if (!filename) return '';
+  return filename.startsWith('qortal_backup_') ? filename.slice(14) : filename;
 };
 
 export const AuthenticationForm = ({
   rawWallet,
   selectedNode,
   walletToBeDecryptedError,
+  unlockTransition,
   onBack,
   onAuthenticate,
+  onUnlockTransitionComplete,
 }: AuthenticationFormProps) => {
   const theme = useTheme();
-  const { t } = useTranslation(['auth', 'core']);
+  const isLight = theme.palette.mode === 'light';
+  const { t } = useTranslation(['auth']);
   const [authenticatePassword, setAuthenticatePassword] = useAtom(
     authenticatePasswordAtom
   );
   const passwordRef = useRef<HTMLInputElement>(null);
-  const [primaryName, setPrimaryName] = useState<string | null>(null);
+  const avatarRef = useRef<HTMLDivElement | null>(null);
+  const initialPrimaryNameRef = useRef({
+    address: unlockTransition?.walletAddress,
+    name: unlockTransition?.primaryName ?? null,
+  });
+  const [primaryName, setPrimaryName] = useState<string | null>(
+    initialPrimaryNameRef.current.address === rawWallet?.address0
+      ? initialPrimaryNameRef.current.name
+      : null
+  );
+  const [isConnectionModeOpen, setIsConnectionModeOpen] = useState(false);
+  const [sharedTransition, setSharedTransition] = useState<{
+    isRunning: boolean;
+    snapshot: AuthUnlockTransitionSnapshot;
+    targetAvatarRect: SharedElementRect;
+  } | null>(null);
 
-  // Fetch primary name for this address first; only then can we construct the avatar URL.
-  // Use getPrimaryNameForAvatar so the request uses the avatar-friendly base URL (e.g. HTTP when local HTTPS).
   useEffect(() => {
     if (!rawWallet?.address0) {
       setPrimaryName(null);
       return;
     }
+
+    const seededPrimaryName =
+      initialPrimaryNameRef.current.address === rawWallet.address0
+        ? initialPrimaryNameRef.current.name
+        : null;
+
+    if (seededPrimaryName) {
+      setPrimaryName(seededPrimaryName);
+      return;
+    }
+
+    setPrimaryName(null);
+    let isMounted = true;
     getPrimaryNameForAvatar(rawWallet.address0)
-      .then((name) => setPrimaryName(name || null))
-      .catch(() => setPrimaryName(null));
+      .then((name) => {
+        if (isMounted) setPrimaryName(name || null);
+      })
+      .catch(() => {
+        if (isMounted) setPrimaryName(null);
+      });
+
+    return () => {
+      isMounted = false;
+    };
   }, [rawWallet?.address0]);
 
-  // Avatar URL is built only from the fetched primary name (each address has its own primary name).
-  // Use getBaseApiReactForAvatar so local HTTPS uses HTTP for avatars (avoids cert issues).
+  useEffect(() => {
+    passwordRef.current?.focus();
+  }, []);
+
   const avatarSrc = primaryName
     ? `${getBaseApiReactForAvatar()}/arbitrary/THUMBNAIL/${primaryName}/qortal_avatar?async=true`
     : undefined;
+  const walletAddress = rawWallet?.address0?.trim() || '';
+  const addressLabel = shortenAddress(walletAddress);
+  const parsedFilenameLabel = parsefilenameQortal(rawWallet?.filename).trim();
+  const preferredIdentityLabel =
+    primaryName?.trim() || rawWallet?.name?.trim() || parsedFilenameLabel || '';
+  const unnamedAccountLabel = t('auth:authentication_form.unnamed_account', {
+    postProcess: 'capitalizeFirstChar',
+  });
   const displayLabel =
-    primaryName ||
-    rawWallet?.name ||
-    rawWallet?.filename ||
-    rawWallet?.address0 ||
-    '';
+    preferredIdentityLabel || addressLabel || unnamedAccountLabel;
+  const titleLabel = isAddressLikeLabel(displayLabel, walletAddress)
+    ? addressLabel || unnamedAccountLabel
+    : displayLabel;
+  const usingLocalNode = isLocalNodeUrl(selectedNode?.url);
+  const customNodeStatusLabel =
+    selectedNode?.name?.trim() || selectedNode?.url?.trim() || '';
+  const connectionLabel = usingLocalNode
+    ? t('auth:authentication_form.using_local_node', {
+        postProcess: 'capitalizeFirstChar',
+      })
+    : selectedNode?.url === HTTPS_EXT_NODE_QORTAL_LINK
+      ? t('auth:authentication_form.using_public_node', {
+          postProcess: 'capitalizeFirstChar',
+        })
+      : customNodeStatusLabel
+        ? t('auth:authentication_form.using_custom_node_named', {
+            label: customNodeStatusLabel,
+            defaultValue: 'Using {{label}}',
+            postProcess: 'capitalizeFirstChar',
+          })
+        : t('auth:authentication_form.using_custom_node', {
+            postProcess: 'capitalizeFirstChar',
+          });
+  const isSharedTransitionActive = Boolean(sharedTransition);
+  const storedAnimationPreference =
+    typeof window !== 'undefined'
+      ? window.localStorage.getItem('hub_ui_animations_enabled')
+      : null;
+  const shouldReduceMotion =
+    typeof window !== 'undefined' &&
+    (storedAnimationPreference === 'false' ||
+      (storedAnimationPreference === null &&
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches));
 
-  useEffect(() => {
-    passwordRef.current?.focus();
-  }, []);
+  useLayoutEffect(() => {
+    if (
+      !unlockTransition ||
+      shouldReduceMotion ||
+      !avatarRef.current
+    ) {
+      return;
+    }
 
-  return (
-    <>
-      <Spacer height="22px" />
-      <Box
-        sx={{
-          boxSizing: 'border-box',
-          display: 'flex',
-          justifyContent: 'flex-start',
-          maxWidth: '700px',
-          paddingLeft: '22px',
-          width: '100%',
-        }}
-      >
-        <Return
-          style={{
-            cursor: 'pointer',
-            height: '24px',
-            width: 'auto',
-          }}
-          onClick={onBack}
-        />
-      </Box>
+    const rectToObject = (rect: DOMRect) => ({
+      height: rect.height,
+      left: rect.left,
+      top: rect.top,
+      width: rect.width,
+    });
 
-      <Spacer height="10px" />
+    setSharedTransition({
+      isRunning: false,
+      snapshot: unlockTransition,
+      targetAvatarRect: rectToObject(avatarRef.current.getBoundingClientRect()),
+    });
 
-      <div
-        className="image-container"
-        style={{
-          width: '136px',
-          height: '154px',
-        }}
-      >
-        <img src={Logo1Dark} className="base-image" alt="" />
-      </div>
+    let firstFrame = 0;
+    let secondFrame = 0;
+    const finishTimer = window.setTimeout(() => {
+      setSharedTransition(null);
+      onUnlockTransitionComplete?.();
+    }, 430);
 
-      <Spacer height="35px" />
+    firstFrame = window.requestAnimationFrame(() => {
+      secondFrame = window.requestAnimationFrame(() => {
+        setSharedTransition((current) =>
+          current ? { ...current, isRunning: true } : current
+        );
+      });
+    });
 
-      <Box
-        sx={{
-          alignItems: 'center',
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
+    return () => {
+      window.clearTimeout(finishTimer);
+      window.cancelAnimationFrame(firstFrame);
+      window.cancelAnimationFrame(secondFrame);
+    };
+  }, [onUnlockTransitionComplete, shouldReduceMotion, unlockTransition]);
+
+  const avatarSharedOpacitySx = {
+    opacity: isSharedTransitionActive ? 0 : 1,
+    transition: 'none',
+  };
+  const revealFormSx = unlockTransition
+    ? {
+        animation:
+          'authUnlockFormReveal 320ms cubic-bezier(0.4, 0, 0.2, 1) 110ms both',
+      }
+    : {};
+
+  return (
+    <>
+      <AuthFrame maxWidth={402} disableInitialAnimation>
         <Box
           sx={{
-            alignItems: 'center',
             display: 'flex',
-            gap: '10px',
+            flexDirection: 'column',
+            gap: 0,
+            '@keyframes authUnlockFormReveal': {
+              from: {
+                opacity: 0,
+                transform: 'translateY(5px)',
+              },
+              to: {
+                opacity: 1,
+                transform: 'translateY(0)',
+              },
+            },
           }}
         >
-          <Avatar
-            alt={displayLabel}
-            src={avatarSrc}
-            sx={{ width: 40, height: 40 }}
-          >
-            <PersonIcon sx={{ fontSize: 24 }} />
-          </Avatar>
-          <Typography>{displayLabel}</Typography>
-        </Box>
+          <Box sx={{ display: 'flex', justifyContent: 'flex-start', width: '100%' }}>
+            <ButtonBase
+              onClick={onBack}
+              sx={{
+                alignItems: 'center',
+                color: isLight
+                  ? alpha(theme.palette.text.primary, 0.55)
+                  : 'rgba(214,221,233,0.7)',
+                display: 'inline-flex',
+                height: 32,
+                justifyContent: 'center',
+                minWidth: 0,
+                width: 32,
+                '&:hover': {
+                  color: theme.palette.text.primary,
+                },
+              }}
+            >
+              <ArrowBackRoundedIcon sx={{ fontSize: 28 }} />
+            </ButtonBase>
+          </Box>
 
-        <Spacer height="10px" />
+          <Box
+            sx={{
+              alignItems: 'center',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 0.6,
+              mt: 1.1,
+              textAlign: 'center',
+            }}
+          >
+            <Avatar
+              ref={avatarRef}
+              alt={displayLabel}
+              src={avatarSrc}
+              sx={{ height: 84, width: 84, ...avatarSharedOpacitySx }}
+            >
+              <PersonIcon sx={{ fontSize: 42 }} />
+            </Avatar>
+            <Typography
+              sx={{
+                color: theme.palette.text.primary,
+                fontSize: '1.95rem',
+                fontWeight: 700,
+                letterSpacing: '-0.04em',
+                lineHeight: 1.04,
+                maxWidth: '100%',
+                mt: 1.25,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                textShadow: isLight
+                  ? 'none'
+                  : '0 1px 8px rgba(0,0,0,0.16)',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {titleLabel}
+            </Typography>
+            <Box
+              sx={{
+                alignItems: 'center',
+                color: isLight
+                  ? theme.palette.text.secondary
+                  : 'rgba(214,221,233,0.5)',
+                display: 'inline-flex',
+                gap: 0.58,
+                mt: 0.05,
+              }}
+            >
+              <Typography
+                sx={{
+                  color: isLight
+                    ? theme.palette.text.secondary
+                    : 'rgba(214,221,233,0.42)',
+                  fontSize: '0.72rem',
+                  fontWeight: 500,
+                  lineHeight: 1.2,
+                }}
+              >
+                {addressLabel}
+              </Typography>
+              <ButtonBase
+                onClick={() => {
+                  if (rawWallet?.address0) {
+                    void navigator.clipboard?.writeText(rawWallet.address0).catch(() => {});
+                  }
+                }}
+                sx={{
+                  color: isLight
+                    ? alpha(theme.palette.text.secondary, 0.85)
+                    : 'rgba(214,221,233,0.34)',
+                  minWidth: 0,
+                  p: 0,
+                  '&:hover': {
+                    color: isLight
+                      ? theme.palette.primary.main
+                      : 'rgba(214,221,233,0.7)',
+                  },
+                }}
+              >
+                <ContentCopyRoundedIcon sx={{ fontSize: 18 }} />
+              </ButtonBase>
+            </Box>
+          </Box>
 
-        <TextP
-          sx={{
-            textAlign: 'start',
-            lineHeight: '24px',
-            fontSize: '20px',
-            fontWeight: 600,
-          }}
-        >
-          {t('auth:authentication', {
-            postProcess: 'capitalizeFirstChar',
-          })}
-        </TextP>
-      </Box>
+          <Divider
+            sx={{
+              borderColor: isLight
+                ? theme.palette.divider
+                : 'rgba(128,143,173,0.14)',
+              mt: 2.15,
+            }}
+          />
 
-      <Spacer height="35px" />
+          <Box
+            sx={{
+              ...revealFormSx,
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 1.05,
+              mt: 2.15,
+            }}
+          >
+            <Box>
+              <Typography
+                sx={{
+                  color: isLight
+                    ? theme.palette.text.secondary
+                    : 'rgba(214,221,233,0.62)',
+                  fontSize: '0.74rem',
+                  fontWeight: 700,
+                  letterSpacing: '0.08em',
+                  mb: 0.9,
+                  textTransform: 'uppercase',
+                }}
+              >
+                {t('auth:wallet.password', { postProcess: 'capitalizeFirstChar' })}
+              </Typography>
+              <PasswordField
+                id="wallet-unlock-password"
+                value={authenticatePassword}
+                onChange={(e) => setAuthenticatePassword(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === 'Enter') {
+                    onAuthenticate();
+                  }
+                }}
+                ref={passwordRef}
+                placeholder={t('auth:authentication_form.password_placeholder', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+                sx={authPasswordFieldSx(theme)}
+              />
+            </Box>
 
-      <>
-        <CustomLabel htmlFor="standard-adornment-password">
-          {t('auth:wallet.password', {
-            postProcess: 'capitalizeFirstChar',
-          })}
-        </CustomLabel>
-
-        <Spacer height="10px" />
-
-        <PasswordField
-          id="standard-adornment-password"
-          value={authenticatePassword}
-          onChange={(e) => setAuthenticatePassword(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              onAuthenticate();
-            }
-          }}
-          ref={passwordRef}
-        />
+            <Box sx={{ minHeight: 16, mt: -0.1 }}>
+              <ErrorText>{walletToBeDecryptedError}</ErrorText>
+            </Box>
 
-        <>
-          <Spacer height="20px" />
+            <AuthButton
+              onClick={onAuthenticate}
+              disabled={!authenticatePassword}
+              sx={walletUnlockSubmitButtonSx(theme)}
+            >
+              {t('auth:authentication_form.unlock', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+            </AuthButton>
+          </Box>
 
-          <Typography
+          <Box
             sx={{
-              fontSize: '12px',
-              ...(isLocalNodeUrl(selectedNode?.url) && {
-                fontWeight: 'bold',
-                color: theme.palette.other.positive,
-              }),
+              ...revealFormSx,
+              alignItems: 'center',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 2.1,
+              mt: 2.2,
             }}
           >
-            {t('auth:node.using', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            : {nodeDisplay(selectedNode?.url)}
-          </Typography>
-        </>
+            <ButtonBase
+              onClick={onBack}
+              sx={{
+                alignItems: 'center',
+                color: isLight
+                  ? theme.palette.primary.main
+                  : 'rgba(126,170,248,0.88)',
+                display: 'inline-flex',
+                fontSize: '0.79rem',
+                fontWeight: 500,
+                gap: 0.28,
+                justifyContent: 'center',
+                lineHeight: 1,
+                minHeight: 26,
+                width: '100%',
+                '&:hover': {
+                  color: isLight
+                    ? theme.palette.primary.dark
+                    : 'rgba(148,186,255,0.96)',
+                },
+              }}
+              >
+                {t('auth:authentication_form.choose_another_account', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+                <ChevronRightRoundedIcon sx={{ fontSize: 15 }} />
+              </ButtonBase>
 
-        <Spacer height="20px" />
+            <Divider
+              sx={{
+                alignSelf: 'stretch',
+                borderColor: isLight
+                  ? theme.palette.divider
+                  : 'rgba(128,143,173,0.14)',
+              }}
+            />
 
-        <CustomButton onClick={onAuthenticate}>
-          {t('auth:action.authenticate', {
-            postProcess: 'capitalizeFirstChar',
-          })}
-        </CustomButton>
+            <Box
+              sx={{
+                alignItems: 'center',
+                color: isLight
+                  ? theme.palette.text.secondary
+                  : 'rgba(214,221,233,0.42)',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 0.52,
+                mx: 'auto',
+                minWidth: 0,
+                textAlign: 'center',
+                width: '100%',
+              }}
+            >
+              <Box
+                sx={{
+                  alignItems: 'center',
+                  display: 'inline-flex',
+                  gap: 0.38,
+                  justifyContent: 'center',
+                  width: '100%',
+                }}
+              >
+                <CheckCircleRoundedIcon
+                  sx={{
+                    color: usingLocalNode
+                      ? isLight
+                        ? theme.palette.other.positive
+                        : 'rgba(116,208,138,0.62)'
+                      : isLight
+                        ? theme.palette.primary.main
+                        : 'rgba(118,164,255,0.66)',
+                    fontSize: 11,
+                  }}
+                />
+                <Typography
+                  sx={{
+                    color: isLight
+                      ? theme.palette.text.secondary
+                      : 'rgba(214,221,233,0.5)',
+                    fontSize: '0.76rem',
+                    fontWeight: 400,
+                    lineHeight: 1,
+                  }}
+                >
+                  {connectionLabel}
+                </Typography>
+              </Box>
+              <ButtonBase
+                onClick={() => setIsConnectionModeOpen(true)}
+                sx={{
+                  alignItems: 'center',
+                  color: isLight
+                    ? theme.palette.text.secondary
+                    : 'rgba(214,221,233,0.62)',
+                  display: 'inline-flex',
+                  fontSize: '0.76rem',
+                  fontWeight: 500,
+                  gap: 0.38,
+                  justifyContent: 'center',
+                  minWidth: 0,
+                  p: 0,
+                  width: '100%',
+                  '&:hover': {
+                    color: isLight
+                      ? theme.palette.text.primary
+                      : 'rgba(214,221,233,0.78)',
+                  },
+                }}
+              >
+                <SettingsEthernetRoundedIcon sx={{ fontSize: 11 }} />
+                <Typography sx={{ fontSize: '0.76rem', fontWeight: 500 }}>
+                  {t('auth:connection_mode.title')}
+                </Typography>
+              </ButtonBase>
+            </Box>
+          </Box>
+        </Box>
+      </AuthFrame>
+
+      <ConnectionModeModal
+        open={isConnectionModeOpen}
+        onClose={() => setIsConnectionModeOpen(false)}
+      />
+      {sharedTransition && (
+        <SharedUnlockTransitionOverlay transition={sharedTransition} />
+      )}
+    </>
+  );
+};
+
+function walletUnlockSubmitButtonSx(theme: Theme) {
+  if (theme.palette.mode === 'dark') {
+    return {
+      border: '1px solid rgba(105,139,225,0.34)',
+      borderRadius: '10px',
+      boxShadow: '0 12px 30px rgba(10,18,36,0.24)',
+      fontSize: '0.92rem',
+      fontWeight: 600,
+      height: 52,
+      '&:disabled': {
+        background:
+          'linear-gradient(180deg, rgba(51,83,151,0.84) 0%, rgba(35,62,120,0.84) 100%)',
+        borderColor: 'rgba(105,139,225,0.22)',
+        color: 'rgba(230,236,247,0.58)',
+        opacity: 1,
+      },
+    };
+  }
+
+  return {
+    border: `1px solid ${alpha(theme.palette.primary.main, 0.34)}`,
+    borderRadius: '10px',
+    boxShadow: '0 10px 28px rgba(45, 72, 112, 0.11)',
+    fontSize: '0.92rem',
+    fontWeight: 600,
+    height: 52,
+    '&:disabled': {
+      background: `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.28)}, ${alpha(theme.palette.primary.dark, 0.32)})`,
+      borderColor: alpha(theme.palette.primary.main, 0.22),
+      color: alpha(theme.palette.text.secondary, 0.82),
+      opacity: 1,
+    },
+  };
+}
 
-        <ErrorText>{walletToBeDecryptedError}</ErrorText>
-      </>
+const buildSharedTransform = (
+  originRect: SharedElementRect,
+  targetRect: SharedElementRect,
+  isRunning: boolean,
+  shouldScale = false
+) => {
+  const translateX = targetRect.left - originRect.left;
+  const translateY = targetRect.top - originRect.top;
+  const scaleX = shouldScale ? targetRect.width / originRect.width : 1;
+  const scaleY = shouldScale ? targetRect.height / originRect.height : 1;
+
+  return isRunning
+    ? `translate3d(${translateX}px, ${translateY}px, 0) scale(${scaleX}, ${scaleY})`
+    : 'translate3d(0, 0, 0) scale(1, 1)';
+};
+
+const sharedOverlayBaseSx = {
+  opacity: 1,
+  pointerEvents: 'none',
+  position: 'fixed',
+  transformOrigin: 'top left',
+  transition:
+    'transform 400ms cubic-bezier(0.4, 0, 0.2, 1), opacity 140ms cubic-bezier(0.4, 0, 0.2, 1)',
+  zIndex: 5200,
+};
+
+const SharedUnlockTransitionOverlay = ({
+  transition,
+}: {
+  transition: {
+    isRunning: boolean;
+    snapshot: AuthUnlockTransitionSnapshot;
+    targetAvatarRect: SharedElementRect;
+  };
+}) => {
+  const { isRunning, snapshot, targetAvatarRect } = transition;
+
+  return (
+    <>
+      <Avatar
+        alt={snapshot.displayName}
+        src={snapshot.avatarSrc}
+        sx={{
+          ...sharedOverlayBaseSx,
+          height: snapshot.avatarRect.height,
+          left: snapshot.avatarRect.left,
+          top: snapshot.avatarRect.top,
+          transform: buildSharedTransform(
+            snapshot.avatarRect,
+            targetAvatarRect,
+            isRunning,
+            true
+          ),
+          width: snapshot.avatarRect.width,
+        }}
+      >
+        <PersonIcon sx={{ fontSize: 22 }} />
+      </Avatar>
     </>
   );
 };
diff --git a/src/components/BuyQortInformation.tsx b/src/components/BuyQortInformation.tsx
index c7d3b85a..a7878919 100644
--- a/src/components/BuyQortInformation.tsx
+++ b/src/components/BuyQortInformation.tsx
@@ -12,9 +12,9 @@ import {
   ListItemText,
   List,
   Typography,
+  alpha,
   useTheme,
 } from '@mui/material';
-import { Spacer } from '../common/Spacer';
 import qTradeLogo from '../assets/Icons/q-trade-logo.webp';
 import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
 import {
@@ -56,14 +56,31 @@ export const BuyQortInformation = ({ balance }) => {
       open={isOpen}
       aria-labelledby="alert-dialog-title"
       aria-describedby="alert-dialog-description"
+      PaperProps={{
+        sx: {
+          background: '#121821',
+          backgroundImage: 'none',
+          border: '1px solid rgba(169,188,216,0.18)',
+          borderRadius: '18px',
+          boxShadow: '0 26px 56px rgba(0,0,0,0.44)',
+          color: theme.palette.text.primary,
+          overflow: 'hidden',
+          width: '100%',
+          maxWidth: 460,
+        },
+      }}
     >
       <DialogTitle
         id="alert-dialog-title"
         sx={{
-          textAlign: 'center',
+          borderBottom: '1px solid rgba(169,188,216,0.1)',
+          textAlign: 'left',
           color: theme.palette.text.primary,
-          fontWeight: 'bold',
+          fontSize: '1.04rem',
+          fontWeight: 650,
           opacity: 1,
+          px: 3,
+          py: 2,
         }}
       >
         {t('core:action.get_qort', {
@@ -71,21 +88,20 @@ export const BuyQortInformation = ({ balance }) => {
         })}
       </DialogTitle>
 
-      <DialogContent>
+      <DialogContent sx={{ px: 3, py: 2.5 }}>
         <Box
           sx={{
-            alignItems: 'center',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '10px',
-            height: '350px',
-            maxHeight: '80vh',
-            maxWidth: '90vw',
-            padding: '10px',
-            width: '400px',
+            display: 'grid',
+            gap: 2,
           }}
         >
-          <Typography>
+          <Typography
+            sx={{
+              color: alpha(theme.palette.text.secondary, 0.9),
+              fontSize: '0.94rem',
+              lineHeight: 1.58,
+            }}
+          >
             {t('core:message.generic.get_qort_trade_portal', {
               postProcess: 'capitalizeFirstChar',
             })}
@@ -93,11 +109,20 @@ export const BuyQortInformation = ({ balance }) => {
 
           <ButtonBase
             sx={{
-              '&:hover': { backgroundColor: theme.palette.secondary.main },
-              transition: 'all 0.1s ease-in-out',
-              padding: '5px',
-              borderRadius: '8px',
-              gap: '5px',
+              '&:hover': {
+                backgroundColor: alpha('#FFFFFF', 0.05),
+                borderColor: alpha(theme.palette.primary.main, 0.34),
+              },
+              alignItems: 'center',
+              backgroundColor: alpha('#FFFFFF', 0.026),
+              border: '1px solid rgba(169,188,216,0.12)',
+              borderRadius: '14px',
+              display: 'flex',
+              gap: 1.1,
+              justifyContent: 'flex-start',
+              px: 1.35,
+              py: 1.2,
+              transition: 'all 0.14s ease',
             }}
             onClick={async () => {
               executeEvent('addTab', {
@@ -109,27 +134,44 @@ export const BuyQortInformation = ({ balance }) => {
           >
             <img
               style={{
-                borderRadius: '50%',
-                height: '30px',
+                borderRadius: '10px',
+                height: '34px',
               }}
               src={qTradeLogo}
             />
-            <Typography
-              sx={{
-                fontSize: '1rem',
-              }}
-            >
-              {t('core:action.trade_qort', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Typography>
+            <Box sx={{ minWidth: 0, textAlign: 'left' }}>
+              <Typography
+                sx={{
+                  color: theme.palette.text.primary,
+                  fontSize: '0.94rem',
+                  fontWeight: 700,
+                }}
+              >
+                {t('core:action.trade_qort', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+              </Typography>
+              <Typography
+                sx={{
+                  color: alpha(theme.palette.text.secondary, 0.76),
+                  fontSize: '0.76rem',
+                  lineHeight: 1.45,
+                  mt: 0.25,
+                }}
+              >
+                {t('core:message.generic.open_q_trade_subtitle', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+              </Typography>
+            </Box>
           </ButtonBase>
 
-          <Spacer height="15px" />
-
           <Typography
             sx={{
-              textDecoration: 'underline',
+              color: theme.palette.text.primary,
+              fontSize: '0.82rem',
+              fontWeight: 700,
+              letterSpacing: '0.01em',
             }}
           >
             {t('core:message.generic.benefits_qort', {
@@ -139,41 +181,85 @@ export const BuyQortInformation = ({ balance }) => {
 
           <List
             sx={{
+              backgroundColor: alpha('#FFFFFF', 0.026),
+              border: '1px solid rgba(169,188,216,0.12)',
+              borderRadius: '14px',
+              display: 'grid',
+              gap: 0.25,
               maxWidth: 360,
+              p: 1.1,
               width: '100%',
             }}
-            aria-label={t('core:contact_other', {
+            aria-label={t('core:message.generic.benefits_qort', {
               postProcess: 'capitalizeFirstChar',
             })}
           >
             <ListItem disablePadding>
-              <ListItemIcon>
-                <RadioButtonCheckedIcon />
+              <ListItemIcon sx={{ minWidth: 32 }}>
+                <RadioButtonCheckedIcon sx={{ fontSize: 17 }} />
               </ListItemIcon>
               <ListItemText
                 primary={t('core:action.create_transaction', {
                   postProcess: 'capitalizeFirstChar',
                 })}
+                primaryTypographyProps={{
+                  sx: {
+                    color: theme.palette.text.primary,
+                    fontSize: '0.84rem',
+                    fontWeight: 600,
+                    lineHeight: 1.45,
+                  },
+                }}
               />
             </ListItem>
 
             <ListItem disablePadding>
-              <ListItemIcon>
-                <RadioButtonCheckedIcon />
+              <ListItemIcon sx={{ minWidth: 32 }}>
+                <RadioButtonCheckedIcon sx={{ fontSize: 17 }} />
               </ListItemIcon>
               <ListItemText
                 primary={t('core:message.generic.minimal_qort_balance', {
                   quantity: SUGGESTED_QORTS,
                   postProcess: 'capitalizeFirstChar',
                 })}
+                primaryTypographyProps={{
+                  sx: {
+                    color: theme.palette.text.primary,
+                    fontSize: '0.84rem',
+                    fontWeight: 600,
+                    lineHeight: 1.45,
+                  },
+                }}
               />
             </ListItem>
           </List>
         </Box>
       </DialogContent>
 
-      <DialogActions>
+      <DialogActions
+        sx={{
+          borderTop: '1px solid rgba(169,188,216,0.1)',
+          px: 3,
+          py: 1.8,
+        }}
+      >
         <Button
+          sx={{
+            backgroundColor: alpha('#FFFFFF', 0.035),
+            border: '1px solid rgba(169,188,216,0.16)',
+            borderRadius: '11px',
+            color: theme.palette.text.primary,
+            fontSize: '0.9rem',
+            fontWeight: 600,
+            minHeight: 42,
+            minWidth: 112,
+            px: 2.2,
+            textTransform: 'none',
+            '&:hover': {
+              backgroundColor: alpha('#FFFFFF', 0.055),
+              borderColor: 'rgba(169,188,216,0.24)',
+            },
+          }}
           variant="contained"
           onClick={() => {
             setIsOpen(false);
diff --git a/src/components/Chat/AdminSpace.tsx b/src/components/Chat/AdminSpace.tsx
index 9168c608..7b6d14ee 100644
--- a/src/components/Chat/AdminSpace.tsx
+++ b/src/components/Chat/AdminSpace.tsx
@@ -1,26 +1,17 @@
-import { useEffect, useState } from 'react';
 import { useAtomValue } from 'jotai';
-import { userInfoAtom, balanceAtom } from '../../atoms/global';
+import { balanceAtom } from '../../atoms/global';
 import { Box, Typography } from '@mui/material';
 import { AdminSpaceInner } from './AdminSpaceInner';
 import { useTranslation } from 'react-i18next';
-import { appHeighOffset } from '../Desktop/CustomTitleBar';
 
 export const AdminSpace = ({
   selectedGroup,
   adminsWithNames,
-  secretKey,
-  getSecretKey,
   isAdmin,
-  myAddress,
   hide,
-  defaultThread,
-  setDefaultThread,
   isOwner,
 }) => {
-  const userInfo = useAtomValue(userInfoAtom);
   const balance = useAtomValue(balanceAtom);
-  const [isMoved, setIsMoved] = useState(false);
   const { t } = useTranslation([
     'auth',
     'core',
@@ -29,25 +20,18 @@ export const AdminSpace = ({
     'tutorial',
   ]);
 
-  useEffect(() => {
-    if (hide) {
-      setTimeout(() => setIsMoved(true), 300); // Wait for the fade-out to complete before moving
-    } else {
-      setIsMoved(false); // Reset the position immediately when showing
-    }
-  }, [hide]);
-
   return (
-    <div
-      style={{
+    <Box
+      sx={{
         display: 'flex',
+        flex: hide ? 0 : 1,
         flexDirection: 'column',
-        height: `calc(100vh - ${70 + appHeighOffset}px)`,
-        left: hide && '-1000px',
+        left: hide ? '-1000px' : undefined,
+        minHeight: 0,
         opacity: hide ? 0 : 1,
-        overflow: 'auto',
+        overflowY: 'auto',
         position: hide ? 'fixed' : 'relative',
-        visibility: hide && 'hidden',
+        visibility: hide ? 'hidden' : 'visible',
         width: '100%',
       }}
     >
@@ -76,6 +60,6 @@ export const AdminSpace = ({
           isOwner={isOwner}
         />
       )}
-    </div>
+    </Box>
   );
 };
diff --git a/src/components/Chat/AdminSpaceInner.tsx b/src/components/Chat/AdminSpaceInner.tsx
index ca0f1930..5a6d5f6a 100644
--- a/src/components/Chat/AdminSpaceInner.tsx
+++ b/src/components/Chat/AdminSpaceInner.tsx
@@ -296,10 +296,13 @@ export const AdminSpaceInner = ({
                   group_id: selectedGroup,
                   postProcess: 'capitalizeFirstChar',
                 }),
-                labelDone: t('group:message.success.published_secret_key_label', {
-                  group_id: selectedGroup,
-                  postProcess: 'capitalizeFirstChar',
-                }),
+                labelDone: t(
+                  'group:message.success.published_secret_key_label',
+                  {
+                    group_id: selectedGroup,
+                    postProcess: 'capitalizeFirstChar',
+                  }
+                ),
                 done: false,
                 groupId: selectedGroup,
               },
@@ -416,10 +419,7 @@ export const AdminSpaceInner = ({
           </Typography>
         )}
 
-        <Button
-          onClick={openGroupKeyPublishSelect}
-          variant="contained"
-        >
+        <Button onClick={openGroupKeyPublishSelect} variant="contained">
           {t('auth:action.publish_group_secret_key', {
             postProcess: 'capitalizeFirstChar',
           })}
@@ -457,8 +457,7 @@ export const AdminSpaceInner = ({
             ) : (
               <List dense>
                 {groupKeyPublishList.map((publish) => {
-                  const ts =
-                    publish?.updated ?? publish?.created ?? 0;
+                  const ts = publish?.updated ?? publish?.created ?? 0;
                   const dateNum =
                     typeof ts === 'number' ? ts : new Date(ts).getTime();
                   const label = `${formatTimestampForum(dateNum)} by ${publish?.name ?? ''}`;
@@ -506,7 +505,9 @@ export const AdminSpaceInner = ({
 
         <Dialog
           open={groupKeyPublishConfirmOpen}
-          onClose={() => !isPublishingGroupKey && setGroupKeyPublishConfirmOpen(false)}
+          onClose={() =>
+            !isPublishingGroupKey && setGroupKeyPublishConfirmOpen(false)
+          }
         >
           <DialogTitle>
             {t('auth:message.generic.confirm_publish_group_secret_key', {
diff --git a/src/components/Chat/ChatDirect.tsx b/src/components/Chat/ChatDirect.tsx
index e16a44b7..731b741c 100644
--- a/src/components/Chat/ChatDirect.tsx
+++ b/src/components/Chat/ChatDirect.tsx
@@ -52,7 +52,6 @@ import {
   MIN_REQUIRED_QORTS,
   TIME_MINUTES_2_IN_MILLISECONDS,
 } from '../../constants/constants.ts';
-import { appHeighOffsetPx } from '../Desktop/CustomTitleBar';
 
 const uid = new ShortUniqueId({ length: 5 });
 
@@ -847,9 +846,13 @@ export const ChatDirect = ({
     <Box
       style={{
         background: theme.palette.background.default,
+        boxSizing: 'border-box',
         display: 'flex',
+        flex: 1,
         flexDirection: 'column',
-        height: `calc(100vh - ${appHeighOffsetPx})`,
+        height: '100%',
+        minHeight: 0,
+        padding: '10px',
         width: '100%',
       }}
     >
@@ -1101,24 +1104,35 @@ export const ChatDirect = ({
         </>
       )}
 
-      <ChatList
-        chatReferences={chatReferences}
-        handleReaction={handleReaction}
-        onEdit={onEdit}
-        onReply={onReply}
-        chatId={selectedDirect?.address}
-        initialMessages={messages}
-        myAddress={myAddress}
-        tempMessages={tempMessages}
-        tempChatReferences={tempChatReferences}
-      />
+      <Box
+        sx={{
+          display: 'flex',
+          flex: 1,
+          flexDirection: 'column',
+          minHeight: 0,
+          overflow: 'hidden',
+          width: '100%',
+        }}
+      >
+        <ChatList
+          chatReferences={chatReferences}
+          handleReaction={handleReaction}
+          onEdit={onEdit}
+          onReply={onReply}
+          chatId={selectedDirect?.address}
+          initialMessages={messages}
+          myAddress={myAddress}
+          tempMessages={tempMessages}
+          tempChatReferences={tempChatReferences}
+        />
+      </Box>
 
       <Box
         sx={{
           alignItems: 'flex-end',
           backgroundColor: theme.palette.background.default,
-          borderTop: '1px solid',
-          borderColor: 'divider',
+          border: `1px solid ${theme.palette.divider}`,
+          borderRadius: '8px',
           bottom: isFocusedParent ? '0px' : 'unset',
           boxSizing: 'border-box',
           display: 'flex',
diff --git a/src/components/Chat/ChatGroup.tsx b/src/components/Chat/ChatGroup.tsx
index a0d5c2bc..805e61d6 100644
--- a/src/components/Chat/ChatGroup.tsx
+++ b/src/components/Chat/ChatGroup.tsx
@@ -7,8 +7,8 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useAtomValue } from 'jotai';
-import { userInfoAtom, balanceAtom } from '../../atoms/global';
+import { useAtomValue, useStore } from 'jotai';
+import { userInfoAtom, balanceAtom, blockedAddressesAtom } from '../../atoms/global';
 import {
   decodeBase64ForUIChatMessages,
   objectToBase64,
@@ -55,7 +55,6 @@ import { ExitIcon } from '../../assets/Icons/ExitIcon';
 import { RESOURCE_TYPE_NUMBER_GROUP_CHAT_REACTIONS } from '../../constants/constants';
 import { getFee, isExtMsg } from '../../background/background.ts';
 import { appHeighOffsetPx } from '../Desktop/CustomTitleBar';
-import { useBlockedAddresses } from '../../hooks/useBlockUsers';
 import AppViewerContainer from '../Apps/AppViewerContainer';
 import CloseIcon from '@mui/icons-material/Close';
 import { throttle } from 'lodash';
@@ -84,7 +83,15 @@ export const ChatGroup = ({
   const balance = useAtomValue(balanceAtom);
   const myName = userInfo?.name;
   const { show } = useContext(QORTAL_APP_CONTEXT);
-  const { isUserBlocked } = useBlockedAddresses(true);
+  const jotaiStore = useStore();
+  const isChatSenderBlocked = useCallback(
+    (item?: { sender?: string }) => {
+      const addresses = jotaiStore.get(blockedAddressesAtom);
+      const sender = item?.sender;
+      return !!(sender && addresses[sender]);
+    },
+    [jotaiStore]
+  );
   const [messages, setMessages] = useState([]);
   const [chatReferences, setChatReferences] = useState({});
   const [isSending, setIsSending] = useState(false);
@@ -222,15 +229,13 @@ export const ChatGroup = ({
     });
   };
 
-  const updateChatMessagesWithBlocksFunc = (e) => {
+  const updateChatMessagesWithBlocksFunc = useCallback((e) => {
     if (e.detail) {
       setMessages((prev) =>
-        prev?.filter((item) => {
-          return !isUserBlocked(item?.sender, item?.senderName);
-        })
+        prev?.filter((item) => !isChatSenderBlocked(item))
       );
     }
-  };
+  }, [isChatSenderBlocked]);
 
   useEffect(() => {
     subscribeToEvent(
@@ -244,13 +249,13 @@ export const ChatGroup = ({
         updateChatMessagesWithBlocksFunc
       );
     };
-  }, []);
+  }, [updateChatMessagesWithBlocksFunc]);
 
   const middletierFunc = async (data: any, groupId: string) => {
     try {
       if (hasInitialized.current) {
         const dataRemovedBlock = data?.filter(
-          (item) => !isUserBlocked(item?.sender, item?.senderName)
+          (item) => !isChatSenderBlocked(item)
         );
 
         decryptMessages(dataRemovedBlock, true);
@@ -266,7 +271,7 @@ export const ChatGroup = ({
       });
       const responseData = await response.json();
       const dataRemovedBlock = responseData?.filter((item) => {
-        return !isUserBlocked(item?.sender, item?.senderName);
+        return !isChatSenderBlocked(item);
       });
       decryptMessages(dataRemovedBlock, false);
     } catch (error) {
@@ -1190,9 +1195,11 @@ export const ChatGroup = ({
     <div
       style={{
         display: 'flex',
+        flex: hide ? undefined : 1,
         flexDirection: 'column',
-        height: '100%',
+        height: hide ? undefined : '100%',
         left: hide && '-100000px',
+        minHeight: hide ? undefined : 0,
         opacity: hide ? 0 : 1,
         padding: '10px',
         position: hide ? 'absolute' : 'relative',
diff --git a/src/components/Chat/CreateCommonSecret.tsx b/src/components/Chat/CreateCommonSecret.tsx
index 50a67807..f8123851 100644
--- a/src/components/Chat/CreateCommonSecret.tsx
+++ b/src/components/Chat/CreateCommonSecret.tsx
@@ -1,5 +1,12 @@
 import { useContext, useState } from 'react';
-import { Box, Button, Typography, useTheme } from '@mui/material';
+import {
+  Box,
+  Button,
+  Checkbox,
+  FormControlLabel,
+  Typography,
+  useTheme,
+} from '@mui/material';
 import { CustomizedSnackbars } from '../Snackbar/Snackbar';
 import { LoadingButton } from '@mui/lab';
 import {
@@ -38,6 +45,7 @@ export const CreateCommonSecret = ({
   const [openSnack, setOpenSnack] = useState(false);
   const [infoSnack, setInfoSnack] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [addNewKey, setAddNewKey] = useState(false);
 
   const theme = useTheme();
   const { t } = useTranslation([
@@ -162,6 +170,8 @@ export const CreateCommonSecret = ({
         .sendMessage('encryptAndPublishSymmetricKeyGroupChat', {
           groupId: groupId,
           previousData: secretKeyToSend,
+          isOwner: true,
+          addKey: secretKeyToSend ? addNewKey : undefined,
         })
         .then((response) => {
           if (!response?.error) {
@@ -278,6 +288,44 @@ export const CreateCommonSecret = ({
         </Button>
       </Box>
 
+      {secretKey && (
+        <Box sx={{ width: '100%', mt: 0 }}>
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={addNewKey}
+                onChange={(e) => setAddNewKey(e.target.checked)}
+                size="small"
+                color="primary"
+                sx={{ py: 0, '& .MuiSvgIcon-root': { fontSize: 16 } }}
+              />
+            }
+            label={
+              <Typography variant="caption" sx={{ fontSize: '0.75rem' }}>
+                {t('group:message.generic.add_new_key_option', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+              </Typography>
+            }
+            sx={{ alignItems: 'flex-start', mr: 0 }}
+          />
+          <Typography
+            variant="caption"
+            sx={{
+              display: 'block',
+              fontSize: '0.7rem',
+              color: theme.palette.text.secondary,
+              mt: 0.25,
+              ml: 3.25,
+            }}
+          >
+            {t('group:message.generic.add_new_key_sparingly', {
+              postProcess: 'capitalizeFirstChar',
+            })}
+          </Typography>
+        </Box>
+      )}
+
       <CustomizedSnackbars
         open={openSnack}
         setOpen={setOpenSnack}
diff --git a/src/components/Chat/GroupAnnouncements.tsx b/src/components/Chat/GroupAnnouncements.tsx
index d9ed851f..89031a8c 100644
--- a/src/components/Chat/GroupAnnouncements.tsx
+++ b/src/components/Chat/GroupAnnouncements.tsx
@@ -38,7 +38,6 @@ import { CustomizedSnackbars } from '../Snackbar/Snackbar';
 import { addDataPublishesFunc, getDataPublishesFunc } from '../Group/Group';
 import { useTranslation } from 'react-i18next';
 import { TIME_SECONDS_20_IN_MILLISECONDS } from '../../constants/constants.ts';
-import { appHeighOffset } from '../Desktop/CustomTitleBar';
 
 const uid = new ShortUniqueId({ length: 8 });
 
@@ -551,9 +550,11 @@ export const GroupAnnouncements = ({
       <div
         style={{
           display: 'flex',
+          flex: 1,
           flexDirection: 'column',
-          height: `calc(100vh - ${70 + appHeighOffset}px)`,
+          height: '100%',
           left: hide && '-1000px',
+          minHeight: 0,
           position: hide && 'fixed',
           visibility: hide && 'hidden',
           width: '100%',
@@ -577,9 +578,11 @@ export const GroupAnnouncements = ({
     <Box
       sx={{
         display: 'flex',
+        flex: 1,
         flexDirection: 'column',
-        height: `calc(100vh - ${70 + appHeighOffset}px)`,
+        height: '100%',
         left: hide && '-1000px',
+        minHeight: 0,
         position: hide && 'fixed',
         visibility: hide && 'hidden',
         width: '100%',
diff --git a/src/components/Chat/GroupForum.tsx b/src/components/Chat/GroupForum.tsx
index cddbdbd6..1f6842d0 100644
--- a/src/components/Chat/GroupForum.tsx
+++ b/src/components/Chat/GroupForum.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
 import { GroupMail } from '../Group/Forum/GroupMail';
-import { appHeighOffset } from '../Desktop/CustomTitleBar';
 
 export const GroupForum = ({
   selectedGroup,
@@ -27,9 +26,11 @@ export const GroupForum = ({
     <div
       style={{
         display: 'flex',
+        flex: 1,
         flexDirection: 'column',
-        height: `calc(100vh - ${70 + appHeighOffset}px)`,
+        height: '100%',
         left: hide && '-1000px',
+        minHeight: 0,
         opacity: hide ? 0 : 1,
         position: hide ? 'fixed' : 'relative',
         visibility: hide && 'hidden',
diff --git a/src/components/Chat/MessageDisplay.tsx b/src/components/Chat/MessageDisplay.tsx
index 6fba75ce..abf85553 100644
--- a/src/components/Chat/MessageDisplay.tsx
+++ b/src/components/Chat/MessageDisplay.tsx
@@ -2,6 +2,7 @@ import { useCallback, useMemo, useRef, useState } from 'react';
 import DOMPurify from 'dompurify';
 import './chat.css';
 import { executeEvent } from '../../utils/events';
+import { openHttpUrlExternally } from '../../utils/openExternalHttp';
 import { Embed } from '../Embeds/Embed';
 import { Box, IconButton, Tooltip, useTheme } from '@mui/material';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
@@ -70,7 +71,6 @@ function processText(input) {
             link.setAttribute('data-url', part);
             link.setAttribute('class', 'qortal-link');
             link.textContent = part;
-            link.style.cursor = 'pointer';
             fragment.appendChild(link);
           } else {
             fragment.appendChild(document.createTextNode(part));
@@ -151,7 +151,6 @@ export const MessageDisplay = ({ htmlContent, isReply = false }) => {
         'title',
         'width',
         'height',
-        'style',
         'align',
         'valign',
         'colspan',
@@ -203,12 +202,7 @@ export const MessageDisplay = ({ htmlContent, isReply = false }) => {
 
     const target = e.target;
     if (target.tagName === 'A') {
-      const href = target.getAttribute('href');
-      if (window?.electronAPI) {
-        window.electronAPI.openExternal(href);
-      } else {
-        window.open(href, '_system');
-      }
+      openHttpUrlExternally(target.getAttribute('href'));
     } else if (target.getAttribute('data-url')) {
       const url = target.getAttribute('data-url');
 
diff --git a/src/components/Chat/MessageItem.tsx b/src/components/Chat/MessageItem.tsx
index 561137ea..a967df3c 100644
--- a/src/components/Chat/MessageItem.tsx
+++ b/src/components/Chat/MessageItem.tsx
@@ -399,63 +399,153 @@ export const MessageItemComponent = ({
               width: '100%',
             }}
           >
-            {/* Header: sender name + timestamp + edited label inline */}
+            {/* Header: sender name + timestamp + edited label inline, toolbar on the right */}
             <Box
               sx={{
                 alignItems: 'center',
                 display: 'flex',
                 flexWrap: 'wrap',
                 gap: '8px',
+                justifyContent: 'space-between',
+                minHeight: '32px',
               }}
             >
-              <WrapperUserAction
-                disabled={myAddress === message?.sender}
-                address={message?.sender}
-                name={message?.senderName}
+              <Box
+                sx={{
+                  alignItems: 'center',
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  gap: '8px',
+                  minWidth: 0,
+                }}
               >
-                <Typography
-                  sx={{
-                    color: isOwn
-                      ? theme.palette.primary.main
-                      : theme.palette.text.primary,
-                    fontFamily: 'Inter',
-                    fontSize: '14px',
-                    fontWeight: 600,
-                    lineHeight: 1.3,
-                  }}
+                <WrapperUserAction
+                  disabled={myAddress === message?.sender}
+                  address={message?.sender}
+                  name={message?.senderName}
                 >
-                  {message?.senderName || message?.sender}
-                </Typography>
-              </WrapperUserAction>
+                  <Typography
+                    sx={{
+                      color: isOwn
+                        ? theme.palette.primary.main
+                        : theme.palette.text.primary,
+                      fontFamily: 'Inter',
+                      fontSize: '14px',
+                      fontWeight: 600,
+                      lineHeight: 1.3,
+                    }}
+                  >
+                    {message?.senderName || message?.sender}
+                  </Typography>
+                </WrapperUserAction>
+
+                {!isUpdating && !isTemp && (
+                  <Typography
+                    sx={{
+                      color: theme.palette.text.secondary,
+                      flexShrink: 0,
+                      fontFamily: 'Inter',
+                      fontSize: '11px',
+                      lineHeight: 1,
+                    }}
+                  >
+                    {formatTimestamp(message.timestamp)}
+                  </Typography>
+                )}
 
-              {!isUpdating && !isTemp && (
-                <Typography
+                {message?.isEdit && !isUpdating && !isTemp && (
+                  <Typography
+                    sx={{
+                      color: theme.palette.text.secondary,
+                      fontFamily: 'Inter',
+                      fontSize: '11px',
+                      fontStyle: 'italic',
+                      lineHeight: 1,
+                    }}
+                  >
+                    {t('core:message.generic.edited', {
+                      postProcess: 'capitalizeFirstChar',
+                    })}
+                  </Typography>
+                )}
+              </Box>
+
+              {/* Action toolbar in header row so it never overlaps message body */}
+              {!isShowingAsReply && (
+                <Box
+                  className="message-item-toolbar"
                   sx={{
-                    color: theme.palette.text.secondary,
+                    alignItems: 'center',
+                    backgroundColor: theme.palette.background.paper,
+                    border: '1px solid',
+                    borderColor: theme.palette.divider,
+                    borderRadius: '8px',
+                    boxShadow: theme.shadows[2],
+                    display: 'flex',
                     flexShrink: 0,
-                    fontFamily: 'Inter',
-                    fontSize: '11px',
-                    lineHeight: 1,
+                    gap: '2px',
+                    padding: '3px 6px',
+                    transition: 'opacity 0.15s ease',
+                    zIndex: 2,
                   }}
                 >
-                  {formatTimestamp(message.timestamp)}
-                </Typography>
-              )}
+                  {message?.sender === myAddress &&
+                    (!message?.isNotEncrypted || isPrivate === false) && (
+                      <Tooltip title="Edit" disableFocusListener>
+                        <ButtonBase
+                          sx={{
+                            borderRadius: '6px',
+                            color: theme.palette.text.secondary,
+                            padding: '4px',
+                            '&:hover': {
+                              backgroundColor: theme.palette.action.hover,
+                              color: theme.palette.text.primary,
+                            },
+                          }}
+                          onClick={() => {
+                            onEdit(message);
+                          }}
+                        >
+                          <EditIcon sx={{ fontSize: '18px' }} />
+                        </ButtonBase>
+                      </Tooltip>
+                    )}
 
-              {message?.isEdit && !isUpdating && !isTemp && (
-                <Typography
-                  sx={{
-                    color: theme.palette.text.secondary,
-                    fontFamily: 'Inter',
-                    fontSize: '11px',
-                    fontStyle: 'italic',
-                    lineHeight: 1,
-                  }}
-                >
-                  {t('core:message.generic.edited', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </Typography>
+                  <Tooltip title="Reply" disableFocusListener>
+                    <ButtonBase
+                      sx={{
+                        borderRadius: '6px',
+                        color: theme.palette.text.secondary,
+                        padding: '4px',
+                        '&:hover': {
+                          backgroundColor: theme.palette.action.hover,
+                          color: theme.palette.text.primary,
+                        },
+                      }}
+                      onClick={() => {
+                        onReply(message);
+                      }}
+                    >
+                      <ReplyIcon sx={{ fontSize: '18px' }} />
+                    </ButtonBase>
+                  </Tooltip>
+
+                  {handleReaction && (
+                    <ReactionPicker
+                      onReaction={(val) => {
+                        if (
+                          reactions &&
+                          reactions[val] &&
+                          reactions[val]?.find((item) => item?.sender === myAddress)
+                        ) {
+                          handleReaction(val, message, false);
+                        } else {
+                          handleReaction(val, message, true);
+                        }
+                      }}
+                    />
+                  )}
+                </Box>
               )}
             </Box>
 
@@ -948,86 +1038,6 @@ export const MessageItemComponent = ({
               </Popover>
             )}
           </Box>
-
-          {/* Floating action toolbar — visible on hover (via CSS so only one row is hovered) */}
-          {!isShowingAsReply && (
-            <Box
-              className="message-item-toolbar"
-              sx={{
-                alignItems: 'center',
-                backgroundColor: theme.palette.background.paper,
-                border: '1px solid',
-                borderColor: theme.palette.divider,
-                borderRadius: '8px',
-                boxShadow: theme.shadows[2],
-                display: 'flex',
-                gap: '2px',
-                padding: '3px 6px',
-                position: 'absolute',
-                right: '16px',
-                top: '4px',
-                transition: 'opacity 0.15s ease',
-                zIndex: 2,
-              }}
-            >
-              {message?.sender === myAddress &&
-                (!message?.isNotEncrypted || isPrivate === false) && (
-                  <Tooltip title="Edit" disableFocusListener>
-                    <ButtonBase
-                      sx={{
-                        borderRadius: '6px',
-                        color: theme.palette.text.secondary,
-                        padding: '4px',
-                        '&:hover': {
-                          backgroundColor: theme.palette.action.hover,
-                          color: theme.palette.text.primary,
-                        },
-                      }}
-                      onClick={() => {
-                        onEdit(message);
-                      }}
-                    >
-                      <EditIcon sx={{ fontSize: '18px' }} />
-                    </ButtonBase>
-                  </Tooltip>
-                )}
-
-              <Tooltip title="Reply" disableFocusListener>
-                <ButtonBase
-                  sx={{
-                    borderRadius: '6px',
-                    color: theme.palette.text.secondary,
-                    padding: '4px',
-                    '&:hover': {
-                      backgroundColor: theme.palette.action.hover,
-                      color: theme.palette.text.primary,
-                    },
-                  }}
-                  onClick={() => {
-                    onReply(message);
-                  }}
-                >
-                  <ReplyIcon sx={{ fontSize: '18px' }} />
-                </ButtonBase>
-              </Tooltip>
-
-              {handleReaction && (
-                <ReactionPicker
-                  onReaction={(val) => {
-                    if (
-                      reactions &&
-                      reactions[val] &&
-                      reactions[val]?.find((item) => item?.sender === myAddress)
-                    ) {
-                      handleReaction(val, message, false);
-                    } else {
-                      handleReaction(val, message, true);
-                    }
-                  }}
-                />
-              )}
-            </Box>
-          )}
         </Box>
         <AvatarPreviewModal
           open={isAvatarPreviewOpen}
diff --git a/src/components/Chat/TipTap.tsx b/src/components/Chat/TipTap.tsx
index c969d0e8..274ece31 100644
--- a/src/components/Chat/TipTap.tsx
+++ b/src/components/Chat/TipTap.tsx
@@ -743,14 +743,18 @@ const Tiptap = ({
                   return schema.nodes.paragraph.create(null, Fragment.empty);
                 }
                 const parts = block.split('\n');
-                const content = parts.flatMap((t, i) =>
-                  i === 0
+                const content = parts.flatMap((t, i) => {
+                  // ProseMirror does not allow empty text nodes; skip empty parts
+                  if (t === '') {
+                    return i === 0 ? [] : [schema.nodes.hardBreak.create()];
+                  }
+                  return i === 0
                     ? [schema.text(t)]
                     : [
                         schema.nodes.hardBreak.create(),
                         schema.text(t),
-                      ]
-                );
+                      ];
+                });
                 return schema.nodes.paragraph.create(
                   null,
                   Fragment.from(content)
diff --git a/src/components/Chat/chat.css b/src/components/Chat/chat.css
index f62b4909..23e5f381 100644
--- a/src/components/Chat/chat.css
+++ b/src/components/Chat/chat.css
@@ -114,6 +114,62 @@
   margin: 0px;
 }
 
+.tiptap strong,
+.tiptap b {
+  font-weight: 700;
+  color: inherit;
+}
+
+.tiptap em,
+.tiptap i {
+  font-style: italic;
+  color: inherit;
+}
+
+.tiptap s {
+  text-decoration: line-through;
+  color: inherit;
+}
+
+/* Tables — layout from HTML attributes (align, border, etc.); look from CSS */
+.tiptap table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin: 0.75rem 0;
+  width: 100%;
+  table-layout: auto;
+  color: var(--text-primary);
+}
+
+.tiptap th,
+.tiptap td {
+  border: 1px solid var(--code-block-border, rgba(128, 128, 128, 0.35));
+  padding: 0.35em 0.6em;
+  vertical-align: top;
+  text-align: start;
+}
+
+.tiptap th {
+  font-weight: 600;
+  background: color-mix(in srgb, var(--background-secondary, #fff) 88%, transparent);
+}
+
+.tiptap ul {
+  list-style-type: disc;
+}
+
+.tiptap ol {
+  list-style-type: decimal;
+}
+
+.tiptap li {
+  color: var(--text-primary);
+}
+
+.tiptap li::marker {
+  color: var(--text-secondary);
+}
+
 /* Space between paragraphs so pasted multi-paragraph text stays readable */
 .tiptap p + p {
   margin-top: 0.75em;
@@ -152,6 +208,7 @@
   border-radius: 4px;
   padding: 0.15em 0.4em;
   font-weight: 500;
+  cursor: pointer;
   transition:
     background 0.15s ease,
     opacity 0.15s ease;
@@ -197,20 +254,23 @@
   opacity: 1;
   background: none !important;
 }
-.tiptap.isReply [data-type='mention'] {
+.tiptap.isReply [data-type='mention'],
+.tiptap.isReply .mention {
   color: inherit !important;
   background: none !important;
   border-radius: 0;
   padding: 0;
   font-weight: inherit;
 }
-.tiptap.isReply [data-type='mention']:hover {
+.tiptap.isReply [data-type='mention']:hover,
+.tiptap.isReply .mention:hover {
   background: none !important;
   opacity: 1;
 }
 
-/* @mentions */
-.tiptap [data-type='mention'] {
+/* @mentions — class survives DOMPurify; data-type may be stripped */
+.tiptap [data-type='mention'],
+.tiptap .mention {
   box-decoration-break: clone;
   color: var(--primary-main, var(--text-secondary));
   background: color-mix(in srgb, var(--primary-main, #5f9ea0) 12%, transparent);
@@ -221,7 +281,8 @@
     background 0.15s ease,
     opacity 0.15s ease;
 }
-.tiptap [data-type='mention']:hover {
+.tiptap [data-type='mention']:hover,
+.tiptap .mention:hover {
   background: color-mix(in srgb, var(--primary-main, #5f9ea0) 20%, transparent);
   opacity: 0.9;
 }
diff --git a/src/components/ContextMenu.tsx b/src/components/ContextMenu.tsx
index c15c4b31..1b9a881b 100644
--- a/src/components/ContextMenu.tsx
+++ b/src/components/ContextMenu.tsx
@@ -1,5 +1,6 @@
 import { useState, useRef, useMemo } from 'react';
 import {
+  Divider,
   ListItemIcon,
   Menu,
   MenuItem,
@@ -9,23 +10,23 @@ import {
 } from '@mui/material';
 import MailOutlineIcon from '@mui/icons-material/MailOutline';
 import NotificationsOffIcon from '@mui/icons-material/NotificationsOff';
+import DoneAllRoundedIcon from '@mui/icons-material/DoneAllRounded';
+import { useTranslation } from 'react-i18next';
 import { executeEvent } from '../utils/events';
 import { mutedGroupsAtom } from '../atoms/global';
 import { useAtom } from 'jotai';
 
 const CustomStyledMenu = styled(Menu)(({ theme }) => ({
   '& .MuiPaper-root': {
-    // backgroundColor: '#f9f9f9',
     borderRadius: '12px',
     padding: theme.spacing(1),
     boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)',
   },
   '& .MuiMenuItem-root': {
-    fontSize: '14px', // Smaller font size for the menu item text
-    // color: '#444',
+    fontSize: '14px',
     transition: '0.3s background-color',
     '&:hover': {
-      backgroundColor: theme.palette.action.hover, // Explicit hover state
+      backgroundColor: theme.palette.action.hover,
     },
   },
 }));
@@ -33,20 +34,19 @@ const CustomStyledMenu = styled(Menu)(({ theme }) => ({
 export const ContextMenu = ({ children, groupId, getUserSettings }) => {
   const [menuPosition, setMenuPosition] = useState(null);
   const longPressTimeout = useRef(null);
-  const preventClick = useRef(false); // Flag to prevent click after long-press or right-click
+  const preventClick = useRef(false);
   const theme = useTheme();
   const [mutedGroups] = useAtom(mutedGroupsAtom);
+  const { t } = useTranslation(['group']);
 
   const isMuted = useMemo(() => {
     return mutedGroups.includes(groupId);
   }, [mutedGroups, groupId]);
 
-  // Handle right-click (context menu) for desktop
   const handleContextMenu = (event) => {
     event.preventDefault();
-    event.stopPropagation(); // Prevent parent click
+    event.stopPropagation();
 
-    // Set flag to prevent any click event after right-click
     preventClick.current = true;
 
     setMenuPosition({
@@ -55,16 +55,15 @@ export const ContextMenu = ({ children, groupId, getUserSettings }) => {
     });
   };
 
-  // Handle long-press for mobile
   const handleTouchStart = (event) => {
     longPressTimeout.current = setTimeout(() => {
-      preventClick.current = true; // Prevent the next click after long-press
-      event.stopPropagation(); // Prevent parent click
+      preventClick.current = true;
+      event.stopPropagation();
       setMenuPosition({
         mouseX: event.touches[0].clientX,
         mouseY: event.touches[0].clientY,
       });
-    }, 500); // Long press duration
+    }, 500);
   };
 
   const handleTouchEnd = (event) => {
@@ -72,8 +71,8 @@ export const ContextMenu = ({ children, groupId, getUserSettings }) => {
 
     if (preventClick.current) {
       event.preventDefault();
-      event.stopPropagation(); // Prevent synthetic click after long-press
-      preventClick.current = false; // Reset the flag
+      event.stopPropagation();
+      preventClick.current = false;
     }
   };
 
@@ -95,8 +94,6 @@ export const ContextMenu = ({ children, groupId, getUserSettings }) => {
         .then((response) => {
           if (response?.error) {
             console.error('Error adding user settings:', response.error);
-          } else {
-            console.log('User settings added successfully');
           }
         })
         .catch((error) => {
@@ -120,9 +117,9 @@ export const ContextMenu = ({ children, groupId, getUserSettings }) => {
 
   return (
     <div
-      onContextMenu={handleContextMenu} // For desktop right-click
-      onTouchStart={handleTouchStart} // For mobile long-press start
-      onTouchEnd={handleTouchEnd} // For mobile long-press end
+      onContextMenu={handleContextMenu}
+      onTouchStart={handleTouchStart}
+      onTouchEnd={handleTouchEnd}
       style={{ width: '100%', height: '100%' }}
     >
       {children}
@@ -158,7 +155,7 @@ export const ContextMenu = ({ children, groupId, getUserSettings }) => {
             />
           </ListItemIcon>
           <Typography variant="inherit" sx={{ fontSize: '14px' }}>
-            Mark As Read
+            {t('group:context_menu.mark_as_read')}
           </Typography>
         </MenuItem>
         <MenuItem
@@ -179,10 +176,37 @@ export const ContextMenu = ({ children, groupId, getUserSettings }) => {
             variant="inherit"
             sx={{ fontSize: '14px', color: isMuted && 'red' }}
           >
-            {isMuted ? 'Unmute ' : 'Mute '}Push Notifications
+            {isMuted
+              ? t('group:context_menu.unmute_push_notifications')
+              : t('group:context_menu.mute_push_notifications')}
+          </Typography>
+        </MenuItem>
+        <Divider
+          sx={{
+            marginY: 1,
+            marginX: 0.75,
+            borderColor: theme.palette.divider,
+          }}
+        />
+        <MenuItem
+          onClick={(e) => {
+            handleClose(e);
+            executeEvent('markAllMemberGroupsRead', {});
+          }}
+        >
+          <ListItemIcon sx={{ minWidth: '32px' }}>
+            <DoneAllRoundedIcon
+              fontSize="small"
+              sx={{
+                color: theme.palette.text.primary,
+              }}
+            />
+          </ListItemIcon>
+          <Typography variant="inherit" sx={{ fontSize: '14px' }}>
+            {t('group:context_menu.mark_all_read')}
           </Typography>
         </MenuItem>
       </CustomStyledMenu>
     </div>
   );
-}; // TODO translate
+};
diff --git a/src/components/CoreSettingUp.tsx b/src/components/CoreSettingUp.tsx
index ba067ddc..1786eb20 100644
--- a/src/components/CoreSettingUp.tsx
+++ b/src/components/CoreSettingUp.tsx
@@ -1,4 +1,5 @@
 import {
+  Box,
   Button,
   CircularProgress,
   Dialog,
@@ -6,21 +7,47 @@ import {
   DialogContent,
   DialogTitle,
   Typography,
+  useTheme,
 } from '@mui/material';
 import { useAtom } from 'jotai';
 import { isOpenSettingUpLocalCoreAtom } from '../atoms/global';
 
 import { useTranslation } from 'react-i18next';
-import { getDefaultLocalNodeUrl } from '../constants/constants';
+import { HTTP_LOCALHOST_12391 } from '../constants/constants';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  dialogActionsSx,
+  dialogContentSx,
+  dialogContentTextSx,
+  dialogModalBackdropSx,
+  dialogTitleSx,
+  getDialogPaperSx,
+  getDialogSecondaryButtonSx,
+} from './App/dialogSurface';
 
 export function CoreSettingUp() {
+  const theme = useTheme();
   const { t } = useTranslation(['node', 'core']);
   const [canContinue, setCanContinue] = useState(false);
   const [open, setOpen] = useAtom(isOpenSettingUpLocalCoreAtom);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
   const isCallingRef = useRef<boolean>(false);
 
+  const continueButtonSx = {
+    borderRadius: '11px',
+    fontSize: '0.9rem',
+    fontWeight: 600,
+    minHeight: 42,
+    minWidth: 112,
+    px: 2.2,
+    textTransform: 'none' as const,
+    '&.Mui-disabled': {
+      backgroundColor: 'rgba(255,255,255,0.06)',
+      border: '1px solid rgba(169,188,216,0.12)',
+      color: 'rgba(214,221,233,0.38)',
+    },
+  };
+
   const cleanUp = useCallback(() => {
     setCanContinue(false);
     isCallingRef.current = false;
@@ -34,7 +61,8 @@ export function CoreSettingUp() {
     try {
       if (isCallingRef.current) return;
       isCallingRef.current = true;
-      const res = await fetch(getDefaultLocalNodeUrl() + '/admin/status');
+      // HTTP only: Core exposes /admin/status over HTTP; HTTPS can fail before TLS cert is ready.
+      const res = await fetch(`${HTTP_LOCALHOST_12391}/admin/status`);
       if (!res?.ok) return false;
 
       cleanUp();
@@ -47,6 +75,11 @@ export function CoreSettingUp() {
     }
   }, [cleanUp]);
 
+  useEffect(() => {
+    if (!open?.isShow) return;
+    void getStatus();
+  }, [open?.isShow, getStatus]);
+
   useEffect(() => {
     if (intervalRef.current) return;
     if (open?.isShow) {
@@ -66,56 +99,73 @@ export function CoreSettingUp() {
       cleanUp();
     }
   };
+
+  const titleKey = !canContinue
+    ? 'node:NotFullyStarted.titleNotReady'
+    : 'node:NotFullyStarted.titleReady';
+  const descKey = !canContinue
+    ? 'node:NotFullyStarted.descNotReady'
+    : 'node:NotFullyStarted.descReady';
+
   return (
     <Dialog
       open={open?.isShow}
       fullWidth
       maxWidth="sm"
-      aria-labelledby="core-setup-title"
+      aria-labelledby="core-setting-up-title"
+      slotProps={{
+        backdrop: { sx: dialogModalBackdropSx },
+        paper: {
+          sx: getDialogPaperSx(theme, { maxWidth: 460 }),
+        },
+      }}
     >
-      {!canContinue && (
-        <>
-          <DialogTitle id="core-setup-title">
-            {t('node:NotFullyStarted.titleNotReady', {
-              postProcess: 'capitalizeEachFirstChar',
-            })}
-          </DialogTitle>
-          <DialogContent dividers>
-            <Typography variant="body1" gutterBottom>
-              {t('node:NotFullyStarted.descNotReady', {
+      <DialogTitle id="core-setting-up-title" sx={dialogTitleSx}>
+        {t(titleKey, {
+          postProcess: 'capitalizeEachFirstChar',
+        })}
+      </DialogTitle>
+
+      <DialogContent sx={dialogContentSx}>
+        {!canContinue ? (
+          <Box
+            sx={{
+              alignItems: 'center',
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: 2,
+              justifyContent: 'flex-start',
+            }}
+          >
+            <Typography sx={dialogContentTextSx}>
+              {t(descKey, {
                 postProcess: 'capitalizeEachFirstChar',
               })}
-              <CircularProgress size="1.2rem" color="primary" />
             </Typography>
-          </DialogContent>
-        </>
-      )}
-
-      {canContinue && (
-        <>
-          <DialogTitle id="core-setup-title">
-            {t('node:NotFullyStarted.titleReady', {
+            <CircularProgress
+              size={24}
+              thickness={5}
+              sx={{ color: 'rgba(143,179,246,0.95)', flexShrink: 0 }}
+            />
+          </Box>
+        ) : (
+          <Typography sx={dialogContentTextSx}>
+            {t(descKey, {
               postProcess: 'capitalizeEachFirstChar',
             })}
-          </DialogTitle>
-          <DialogContent dividers>
-            <Typography variant="body1" gutterBottom>
-              {t('node:NotFullyStarted.descReady', {
-                postProcess: 'capitalizeEachFirstChar',
-              })}
-            </Typography>
-          </DialogContent>
-        </>
-      )}
+          </Typography>
+        )}
+      </DialogContent>
 
-      <DialogActions sx={{ p: 2 }}>
+      <DialogActions sx={dialogActionsSx}>
         <Button
           onClick={() => {
             open?.onCancel(false);
             setOpen(false);
             cleanUp();
           }}
-          variant="text"
+          variant="contained"
+          sx={getDialogSecondaryButtonSx(theme)}
         >
           {t('core:action.close', {
             postProcess: 'capitalizeFirstChar',
@@ -129,6 +179,7 @@ export function CoreSettingUp() {
           disabled={!canContinue}
           color="success"
           variant="contained"
+          sx={continueButtonSx}
         >
           {t('node:actions.continue', {
             postProcess: 'capitalizeFirstChar',
diff --git a/src/components/CoreSetup.tsx b/src/components/CoreSetup.tsx
index 7928973b..dea8cad6 100644
--- a/src/components/CoreSetup.tsx
+++ b/src/components/CoreSetup.tsx
@@ -1,34 +1,68 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { Box, ButtonBase, Typography, useTheme } from '@mui/material';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { CoreSetupDialog } from './CoreSetupDialog';
-import { LOCALHOST_12391 } from '../constants/constants';
+import {
+  getDefaultLocalNodeUrl,
+  HTTPS_EXT_NODE_QORTAL_LINK,
+  HTTP_LOCALHOST_12391,
+  LOCALHOST_12391,
+} from '../constants/constants';
 import { cleanUrl } from '../background/background';
 import { subscribeToEvent, unsubscribeFromEvent } from '../utils/events';
 import {
+  extStateAtom,
   isOpenCoreSetup,
-  isOpenDialogCoreRecommendationAtom,
+  isPublicNodeUnavailableAtom,
   selectedNodeInfoAtom,
   statusesAtom,
 } from '../atoms/global';
 import { useAtom } from 'jotai';
-import { CoreSetupRecommendationDialog } from './CoreSetupRecommendationDialog';
 import { CoreSetupResetApikeyDialog } from './CoreSetupResetApikeyDialog';
 import { CustomNodeApikeyDialog } from './CustomNodeApikeyDialog';
 import { CoreSyncing } from './CoreSyncing';
 import { CoreUrlInvalid } from './CoreUrlInvalid';
 import { CoreSettingUp } from './CoreSettingUp';
+import { useAuth } from '../hooks/useAuth';
+import { ensureElectronCertIfLocalPrivateHttps } from '../utils/helpers';
 
 export const CoreSetup = () => {
+  const theme = useTheme();
   const [open, setOpen] = useAtom(isOpenCoreSetup);
   const [isReady, setIsReady] = useState(false);
   const [statuses, setStatuses] = useAtom(statusesAtom);
   const [selectedNode] = useAtom(selectedNodeInfoAtom);
-  const [osType, setOsType] = useState(null);
-  const [isOpenRecommendation, setIsOpenRecommendation] = useAtom(
-    isOpenDialogCoreRecommendationAtom
+  const [extState] = useAtom(extStateAtom);
+  const [publicNodeUnavailable, setPublicNodeUnavailable] = useAtom(
+    isPublicNodeUnavailableAtom
   );
   const isLocal = cleanUrl(selectedNode?.url) === LOCALHOST_12391;
+  const { authenticate, getBalanceFunc, handleSaveNodeInfo } = useAuth();
   const [customQortalPath, setCustomQortalPath] = useState('');
+  const [showLocalReadyNotice, setShowLocalReadyNotice] = useState(false);
+  const [localNodeRuntimeStatus, setLocalNodeRuntimeStatus] = useState<{
+    running: boolean;
+    syncPercent?: number;
+  } | null>(null);
+  const [startCoreSetupAtIntro, setStartCoreSetupAtIntro] = useState(false);
+  const [localReadySwitchError, setLocalReadySwitchError] = useState('');
+  const [setupContextActionLoading, setSetupContextActionLoading] =
+    useState(false);
   const inFlight = useRef(false);
+  const autoStartAttemptedRef = useRef(false);
+  const backgroundNoticeDismissedRef = useRef(false);
+  const localReadyDismissedRef = useRef(false);
+  const switchingToLocalRef = useRef(false);
+  const usingDefaultPublicNode =
+    cleanUrl(selectedNode?.url || '') === cleanUrl(HTTPS_EXT_NODE_QORTAL_LINK);
+  const dismissBackgroundNotice = useCallback(() => {
+    backgroundNoticeDismissedRef.current = true;
+  }, []);
+  const dismissLocalReadyNotice = useCallback(() => {
+    localReadyDismissedRef.current = true;
+    setShowLocalReadyNotice(false);
+    setLocalNodeRuntimeStatus(null);
+  }, []);
   useEffect(() => {
     if (!window?.coreSetup) return;
     const off = window.coreSetup.onProgress((p) => {
@@ -42,7 +76,6 @@ export const CoreSetup = () => {
       }
 
       if (p?.type === 'osType') {
-        setOsType(p.osType);
         return;
       }
       setStatuses((prev) => {
@@ -56,14 +89,8 @@ export const CoreSetup = () => {
     return () => off();
   }, [setStatuses]);
 
-  async function handleCoreSetup({
-    isReady,
-    isLocal,
-  }: {
-    isReady: boolean;
-    isLocal: boolean;
-  }) {
-    if (!window?.coreSetup || inFlight.current || !isReady || !isLocal) return;
+  async function handleCoreSetup({ isReady }: { isReady: boolean }) {
+    if (!window?.coreSetup || inFlight.current || !isReady) return;
 
     inFlight.current = true;
 
@@ -84,31 +111,59 @@ export const CoreSetup = () => {
 
   useEffect(() => {
     if (!window?.coreSetup) return;
+    if (!isReady) return;
+    if (extState !== 'authenticated' && !open) return;
+
+    handleCoreSetup({ isReady });
+  }, [extState, isReady, open]);
+
+  useEffect(() => {
+    if (extState !== 'authenticated' || !usingDefaultPublicNode) {
+      autoStartAttemptedRef.current = false;
+    }
+  }, [extState, usingDefaultPublicNode]);
+
+  useEffect(() => {
+    if (!window?.coreSetup || !isReady) return;
+    if (extState !== 'authenticated' || !usingDefaultPublicNode) return;
+    if (autoStartAttemptedRef.current) return;
+
+    let canceled = false;
+
+    const startInstalledCore = async () => {
+      autoStartAttemptedRef.current = true;
+
+      try {
+        const running = await window.coreSetup.isCoreRunning();
+        if (canceled || running) return;
+
+        const installed = await window.coreSetup.isCoreInstalled();
+        if (canceled) return;
+
+        if (installed) {
+          window.coreSetup.startCore();
+        } else {
+          setStartCoreSetupAtIntro(true);
+          setOpen(true);
+        }
+      } catch (error) {
+        console.error('Failed to auto-start local Core:', error);
+      }
+    };
 
-    handleCoreSetup({ isReady, isLocal });
-  }, [isReady, isLocal]);
+    startInstalledCore();
+
+    return () => {
+      canceled = true;
+    };
+  }, [extState, isReady, setOpen, usingDefaultPublicNode]);
 
   const isCoreInstalledState = statuses['downloadedCore']?.status === 'done';
   const isCoreRunningState = statuses['coreRunning']?.status === 'done';
   const actionLoading = Object.keys(statuses).find(
     (key) => statuses[key]?.status === 'active'
   );
-  const initializedRef = useRef(false);
-  const isNotRunning = statuses['coreRunning']?.status === 'off';
-
-  useEffect(() => {
-    if (!window?.coreSetup) return;
-    if (!isReady || !isLocal) return;
-    if (initializedRef.current) return;
-
-    if (isNotRunning) {
-      initializedRef.current = true;
-      setOpen(true);
-    }
-  }, [isNotRunning, isReady, isLocal, setOpen]);
-
   const verifyCoreNotRunningFunc = useCallback(() => {
-    if (!isLocal) return;
     setStatuses({
       coreRunning: {
         status: 'idle',
@@ -126,8 +181,8 @@ export const CoreSetup = () => {
         message: '',
       },
     });
-    handleCoreSetup({ isReady, isLocal });
-  }, [isLocal, isReady, setStatuses]);
+    handleCoreSetup({ isReady });
+  }, [isReady, setStatuses]);
 
   useEffect(() => {
     if (!window?.coreSetup) return;
@@ -138,32 +193,575 @@ export const CoreSetup = () => {
     };
   }, [verifyCoreNotRunningFunc]);
 
+  useEffect(() => {
+    if (!window?.coreSetup || isLocal || extState !== 'authenticated') {
+      setShowLocalReadyNotice(false);
+      setLocalNodeRuntimeStatus(null);
+      backgroundNoticeDismissedRef.current = false;
+      return;
+    }
+
+    backgroundNoticeDismissedRef.current = false;
+    localReadyDismissedRef.current = false;
+    setShowLocalReadyNotice(false);
+    setLocalNodeRuntimeStatus(null);
+
+    let canceled = false;
+
+    const checkLocalNodeReady = async () => {
+      if (localReadyDismissedRef.current) return;
+
+      let running = false;
+      try {
+        running = Boolean(await window.coreSetup.isCoreRunning());
+        if (!running) {
+          backgroundNoticeDismissedRef.current = false;
+          if (!canceled) {
+            setLocalNodeRuntimeStatus({ running: false });
+          }
+          return;
+        }
+
+        const statusResponse = await fetch(
+          `${HTTP_LOCALHOST_12391}/admin/status`
+        );
+        if (!statusResponse.ok) {
+          if (!canceled) {
+            setLocalNodeRuntimeStatus({ running: true });
+          }
+          return;
+        }
+
+        const status = await statusResponse.json();
+        const syncPercent = Number(status?.syncPercent);
+        if (!canceled) {
+          setLocalNodeRuntimeStatus({
+            running: true,
+            syncPercent: Number.isFinite(syncPercent) ? syncPercent : undefined,
+          });
+        }
+        if (
+          !canceled &&
+          isLocalCoreStatusSynced(
+            Number.isFinite(syncPercent) ? syncPercent : undefined
+          )
+        ) {
+          setShowLocalReadyNotice(true);
+        }
+      } catch (error) {
+        // Local Core can be starting, blocked, or still syncing; silence noisy polling.
+        if (!canceled && running) {
+          setLocalNodeRuntimeStatus((prev) =>
+            prev?.running ? prev : { running: true }
+          );
+        }
+      }
+    };
+
+    checkLocalNodeReady();
+    const interval = window.setInterval(checkLocalNodeReady, 5000);
+
+    return () => {
+      canceled = true;
+      window.clearInterval(interval);
+    };
+  }, [extState, isLocal, selectedNode?.url]);
+
+  useEffect(() => {
+    if (!window?.coreSetup || !open) return;
+
+    let canceled = false;
+
+    const checkLocalNodeStatusForSetup = async () => {
+      try {
+        const running = Boolean(await window.coreSetup.isCoreRunning());
+        if (canceled) return;
+
+        if (!running) {
+          setLocalNodeRuntimeStatus({ running: false });
+          return;
+        }
+
+        try {
+          const statusResponse = await fetch(
+            `${HTTP_LOCALHOST_12391}/admin/status`
+          );
+          if (canceled) return;
+
+          if (!statusResponse.ok) {
+            setLocalNodeRuntimeStatus({ running: true });
+            return;
+          }
+
+          const status = await statusResponse.json();
+          const syncPercent = Number(status?.syncPercent);
+          setLocalNodeRuntimeStatus({
+            running: true,
+            syncPercent: Number.isFinite(syncPercent) ? syncPercent : undefined,
+          });
+        } catch (error) {
+          if (!canceled) {
+            setLocalNodeRuntimeStatus({ running: true });
+          }
+        }
+      } catch (error) {
+        if (!canceled) {
+          setLocalNodeRuntimeStatus({ running: false });
+        }
+      }
+    };
+
+    checkLocalNodeStatusForSetup();
+    const interval = window.setInterval(checkLocalNodeStatusForSetup, 5000);
+
+    return () => {
+      canceled = true;
+      window.clearInterval(interval);
+    };
+  }, [open]);
+
+  const switchToLocalNode = useCallback(
+    async (options?: { authenticateAfterSwitch?: boolean }) => {
+      if (switchingToLocalRef.current) return;
+      switchingToLocalRef.current = true;
+
+      try {
+        setLocalReadySwitchError('');
+        const apiKey = window?.coreSetup?.getApiKey
+          ? await window.coreSetup.getApiKey()
+          : '';
+        const localNodeUrl = getDefaultLocalNodeUrl();
+
+        const certResult = await ensureElectronCertIfLocalPrivateHttps(
+          localNodeUrl,
+          apiKey || ''
+        );
+
+        if (!certResult.success) {
+          throw new Error(
+            certResult.error || 'Unable to prepare local HTTPS certificate'
+          );
+        }
+
+        await handleSaveNodeInfo({
+          url: localNodeUrl,
+          apikey: apiKey || '',
+        });
+
+        if (options?.authenticateAfterSwitch) {
+          await authenticate(true);
+        } else if (extState === 'authenticated') {
+          await getBalanceFunc();
+        }
+
+        dismissLocalReadyNotice();
+      } catch (error) {
+        console.error('Failed to switch to local node:', error);
+        setLocalReadySwitchError(
+          'Switch failed. You can log out and unlock again to use the local node.'
+        );
+      } finally {
+        switchingToLocalRef.current = false;
+      }
+    },
+    [
+      authenticate,
+      dismissLocalReadyNotice,
+      extState,
+      getBalanceFunc,
+      handleSaveNodeInfo,
+    ]
+  );
+
+  const isPublicNodeReachable = useCallback(async () => {
+    try {
+      const response = await fetch(
+        `${HTTPS_EXT_NODE_QORTAL_LINK}/admin/status`
+      );
+      return response.ok;
+    } catch (error) {
+      return false;
+    }
+  }, []);
+
+  const usePublicNodeWhileSyncing = useCallback(async () => {
+    setSetupContextActionLoading(true);
+    try {
+      if (!(await isPublicNodeReachable())) {
+        setPublicNodeUnavailable(true);
+        return;
+      }
+
+      setPublicNodeUnavailable(false);
+      await handleSaveNodeInfo({
+        url: HTTPS_EXT_NODE_QORTAL_LINK,
+        apikey: '',
+      });
+      setOpen(false);
+      setStartCoreSetupAtIntro(false);
+
+      if (extState === 'wallet-dropped') {
+        await authenticate(true);
+      } else if (extState === 'authenticated') {
+        await getBalanceFunc();
+      }
+    } catch (error) {
+      console.error('Failed to use public node while Core syncs:', error);
+    } finally {
+      setSetupContextActionLoading(false);
+    }
+  }, [
+    authenticate,
+    extState,
+    getBalanceFunc,
+    handleSaveNodeInfo,
+    isPublicNodeReachable,
+    setOpen,
+    setPublicNodeUnavailable,
+  ]);
+
+  const useLocalNodeFromSetup = useCallback(async () => {
+    setSetupContextActionLoading(true);
+    try {
+      await switchToLocalNode({
+        authenticateAfterSwitch: extState === 'wallet-dropped',
+      });
+      setOpen(false);
+      setStartCoreSetupAtIntro(false);
+    } finally {
+      setSetupContextActionLoading(false);
+    }
+  }, [extState, setOpen, switchToLocalNode]);
+
+  const localCoreSynced = isLocalCoreStatusSynced(
+    localNodeRuntimeStatus?.syncPercent
+  );
+  const localCoreRunning = Boolean(
+    isCoreRunningState || localNodeRuntimeStatus?.running
+  );
+  const isCoreSyncingForDialog = localCoreRunning && !localCoreSynced;
+  const shouldOfferPublicLobby =
+    isLocal &&
+    isCoreSyncingForDialog &&
+    !publicNodeUnavailable &&
+    extState !== 'authenticated';
+  const shouldOfferLocalFallback =
+    !isLocal && publicNodeUnavailable && localCoreRunning;
+  const contextualActionLabel = shouldOfferPublicLobby
+    ? 'Use Public'
+    : shouldOfferLocalFallback
+      ? localCoreSynced
+        ? 'Use Local'
+        : 'Local not ready'
+      : undefined;
+  const contextualActionDisabled = shouldOfferLocalFallback && !localCoreSynced;
+  const contextualAction = shouldOfferPublicLobby
+    ? usePublicNodeWhileSyncing
+    : shouldOfferLocalFallback
+      ? useLocalNodeFromSetup
+      : undefined;
+
+  const coreStatusNotice = useMemo(() => {
+    const downloadedState = statuses.downloadedCore;
+    const runningState = statuses.coreRunning;
+    const hasCoreSetupActivity =
+      downloadedState?.status === 'active' ||
+      runningState?.status === 'active' ||
+      downloadedState?.status === 'error' ||
+      runningState?.status === 'error';
+    if (
+      !window?.coreSetup ||
+      extState !== 'authenticated' ||
+      isLocal ||
+      (!usingDefaultPublicNode && !hasCoreSetupActivity)
+    ) {
+      return null;
+    }
+
+    const translatedMessage =
+      runningState?.message || downloadedState?.message || '';
+
+    if (showLocalReadyNotice) {
+      return {
+        description:
+          'Qortal Core is synced. You can switch from the public node to your local node now.',
+        progress: 100,
+        ready: true,
+        title: 'Local node ready',
+      };
+    }
+
+    const syncPercent = localNodeRuntimeStatus?.syncPercent;
+    if (
+      localNodeRuntimeStatus?.running &&
+      isLocalCoreStatusSynced(syncPercent)
+    ) {
+      return {
+        description:
+          'Qortal Core is synced. You can switch from the public node to your local node now.',
+        progress: 100,
+        ready: true,
+        title: 'Local node ready',
+      };
+    }
+
+    if (backgroundNoticeDismissedRef.current) {
+      return null;
+    }
+
+    if (downloadedState?.status === 'active') {
+      return {
+        description: 'Downloading and installing Qortal Core.',
+        progress: downloadedState.progress,
+        ready: false,
+        title: 'Installing Qortal Core',
+      };
+    }
+
+    if (
+      runningState?.status === 'active' &&
+      localNodeRuntimeStatus?.running !== false
+    ) {
+      return {
+        description:
+          translatedMessage === '001'
+            ? 'Core is starting and preparing blockchain data.'
+            : 'Starting Qortal Core.',
+        progress: runningState.progress,
+        ready: false,
+        title: 'Starting local Core',
+      };
+    }
+
+    if (
+      localNodeRuntimeStatus?.running &&
+      typeof syncPercent === 'number' &&
+      !isLocalCoreStatusSynced(syncPercent)
+    ) {
+      return {
+        description: 'Your local node is catching up in the background.',
+        progress: Math.max(0, Math.min(100, syncPercent)),
+        ready: false,
+        title: 'Syncing blockchain',
+      };
+    }
+
+    if (localNodeRuntimeStatus?.running) {
+      return {
+        description:
+          typeof syncPercent === 'number'
+            ? 'Your local node is catching up in the background.'
+            : 'Core is running. Checking blockchain sync progress.',
+        progress:
+          typeof syncPercent === 'number'
+            ? Math.max(0, Math.min(100, syncPercent))
+            : undefined,
+        ready: false,
+        title: 'Syncing blockchain',
+      };
+    }
+
+    if (
+      runningState?.status === 'error' ||
+      downloadedState?.status === 'error'
+    ) {
+      return {
+        description: 'Core needs attention. Open setup to review the issue.',
+        progress: undefined,
+        ready: false,
+        title: 'Core setup needs attention',
+      };
+    }
+
+    return null;
+  }, [
+    extState,
+    isLocal,
+    localNodeRuntimeStatus?.running,
+    localNodeRuntimeStatus?.syncPercent,
+    showLocalReadyNotice,
+    statuses.coreRunning,
+    statuses.downloadedCore,
+    usingDefaultPublicNode,
+  ]);
+
   return (
     <>
       <CoreSetupDialog
         open={open}
+        startAtIntro={startCoreSetupAtIntro}
         actionLoading={!!actionLoading}
-        onClose={() => setOpen(false)}
-        onAction={() => {
-          if (isCoreRunningState) {
-            setOpen(false);
-          } else if (isCoreInstalledState) {
-            window.coreSetup.startCore();
-          } else {
-            window.coreSetup.installCore();
+        onClose={() => {
+          setOpen(false);
+          setStartCoreSetupAtIntro(false);
+        }}
+        onAction={async () => {
+          if (!window?.coreSetup) return;
+          try {
+            if (isCoreRunningState) {
+              setOpen(false);
+              setStartCoreSetupAtIntro(false);
+            } else if (isCoreInstalledState) {
+              await window.coreSetup.startCore();
+            } else {
+              const started = await window.coreSetup.installCore();
+              if (started === false) {
+                setStatuses((prev) => ({
+                  ...prev,
+                  downloadedCore: {
+                    status: 'error',
+                    progress: 0,
+                    message: '010',
+                  },
+                }));
+              }
+            }
+          } catch (error) {
+            console.error('Core setup action failed:', error);
+            setStatuses((prev) => ({
+              ...prev,
+              downloadedCore: {
+                status: 'error',
+                progress: 0,
+                message: '010',
+              },
+            }));
           }
         }}
         steps={statuses}
+        isCoreSyncing={isCoreSyncingForDialog}
+        coreSyncPercent={localNodeRuntimeStatus?.syncPercent}
         customQortalPath={customQortalPath}
         verifyCoreNotRunningFunc={verifyCoreNotRunningFunc}
-        isWindows={osType === 'win32'}
-      />
-      <CoreSetupRecommendationDialog
-        open={isOpenRecommendation}
-        openLocalSetup={() => setOpen(true)}
-        onClose={() => setIsOpenRecommendation(false)}
-        setOpenCoreHandler={setOpen}
+        publicNodeUnavailable={publicNodeUnavailable}
+        contextualActionLabel={contextualActionLabel}
+        contextualActionDisabled={contextualActionDisabled}
+        contextualActionLoading={setupContextActionLoading}
+        onContextualAction={contextualAction}
       />
+      {coreStatusNotice && (
+        <Box
+          sx={{
+            background:
+              'linear-gradient(180deg, rgba(29,35,47,0.98), rgba(18,23,32,0.98))',
+            border: '1px solid rgba(150, 184, 230, 0.18)',
+            borderRadius: '10px',
+            bottom: 20,
+            boxShadow: '0 18px 44px rgba(0,0,0,0.42)',
+            maxWidth: 340,
+            p: 1.6,
+            position: 'fixed',
+            right: 20,
+            width: 'calc(100vw - 40px)',
+            zIndex: 12000,
+          }}
+        >
+          <Box sx={{ alignItems: 'flex-start', display: 'flex', gap: 1.2 }}>
+            <Box sx={{ flex: 1, minWidth: 0 }}>
+              <Typography sx={{ fontSize: '0.92rem', fontWeight: 700 }}>
+                {coreStatusNotice.title}
+              </Typography>
+              <Typography
+                sx={{
+                  color: 'rgba(214,221,233,0.62)',
+                  fontSize: '0.8rem',
+                  lineHeight: 1.55,
+                  mt: 0.45,
+                }}
+              >
+                {coreStatusNotice.description}
+              </Typography>
+              {typeof coreStatusNotice.progress === 'number' && (
+                <Box
+                  sx={{
+                    backgroundColor: 'rgba(255,255,255,0.08)',
+                    borderRadius: '999px',
+                    height: 6,
+                    mt: 1,
+                    overflow: 'hidden',
+                  }}
+                >
+                  <Box
+                    sx={{
+                      backgroundColor: coreStatusNotice.ready
+                        ? theme.palette.other.positive
+                        : 'rgba(118,165,255,0.82)',
+                      height: '100%',
+                      transition: 'width 220ms ease',
+                      width: `${coreStatusNotice.progress}%`,
+                    }}
+                  />
+                </Box>
+              )}
+              {localReadySwitchError && (
+                <Typography
+                  sx={{
+                    color: '#D8BA8A',
+                    fontSize: '0.76rem',
+                    lineHeight: 1.45,
+                    mt: 0.7,
+                  }}
+                >
+                  {localReadySwitchError}
+                </Typography>
+              )}
+            </Box>
+            <ButtonBase
+              onClick={() => {
+                if (coreStatusNotice.ready) {
+                  dismissLocalReadyNotice();
+                  return;
+                }
+                dismissBackgroundNotice();
+              }}
+              sx={{
+                color: theme.palette.text.secondary,
+                p: 0.25,
+                '&:hover': { color: theme.palette.text.primary },
+              }}
+            >
+              <CloseRoundedIcon sx={{ fontSize: 18 }} />
+            </ButtonBase>
+          </Box>
+          <Box
+            sx={{
+              display: 'flex',
+              gap: 1,
+              justifyContent: 'flex-end',
+              mt: 1.25,
+            }}
+          >
+            {coreStatusNotice.ready ? (
+              <>
+                <ButtonBase
+                  onClick={() => {
+                    dismissLocalReadyNotice();
+                  }}
+                  sx={noticeActionSx(false)}
+                >
+                  Later
+                </ButtonBase>
+                <ButtonBase
+                  onClick={switchToLocalNode}
+                  sx={noticeActionSx(true)}
+                >
+                  Switch to local
+                </ButtonBase>
+              </>
+            ) : (
+              <ButtonBase
+                onClick={() => {
+                  setStartCoreSetupAtIntro(false);
+                  setOpen(true);
+                }}
+                sx={noticeActionSx(true)}
+              >
+                Open setup
+              </ButtonBase>
+            )}
+          </Box>
+        </Box>
+      )}
       <CoreSetupResetApikeyDialog />
       <CustomNodeApikeyDialog />
       <CoreSyncing />
@@ -172,3 +770,37 @@ export const CoreSetup = () => {
     </>
   );
 };
+
+const LOCAL_CORE_READY_SYNC_PERCENT = 99.95;
+
+function isLocalCoreStatusSynced(syncPercent?: number) {
+  return (
+    typeof syncPercent === 'number' &&
+    syncPercent >= LOCAL_CORE_READY_SYNC_PERCENT
+  );
+}
+
+const noticeActionSx = (primary: boolean) => ({
+  backgroundColor: primary
+    ? 'rgba(91, 132, 201, 0.62)'
+    : 'rgba(255,255,255,0.035)',
+  border: `1px solid ${primary ? 'rgba(174, 204, 255, 0.28)' : 'rgba(255,255,255,0.07)'}`,
+  borderRadius: '7px',
+  color: primary ? '#F4F8FF' : 'rgba(214,221,233,0.72)',
+  fontFamily: 'inherit',
+  fontSize: '0.78rem',
+  fontWeight: 600,
+  letterSpacing: 0,
+  minHeight: 32,
+  px: 1.25,
+  textTransform: 'none',
+  transition: 'background-color 160ms ease, border-color 160ms ease',
+  '&:hover': {
+    backgroundColor: primary
+      ? 'rgba(105, 150, 224, 0.72)'
+      : 'rgba(255,255,255,0.055)',
+    borderColor: primary
+      ? 'rgba(190, 216, 255, 0.38)'
+      : 'rgba(255,255,255,0.11)',
+  },
+});
diff --git a/src/components/CoreSetupDialog.tsx b/src/components/CoreSetupDialog.tsx
index e386c796..b8a75907 100644
--- a/src/components/CoreSetupDialog.tsx
+++ b/src/components/CoreSetupDialog.tsx
@@ -1,52 +1,46 @@
 import {
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
   Box,
   Button,
+  ButtonBase,
   Collapse,
   Dialog,
   DialogActions,
   DialogContent,
   DialogContentText,
   DialogTitle,
-  FormControlLabel,
   IconButton,
   LinearProgress,
-  Stack,
-  Step,
-  StepContent,
-  StepLabel,
-  Stepper,
   Typography,
   useTheme,
 } from '@mui/material';
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
+import { alpha, type Theme } from '@mui/material/styles';
 
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
+import FolderOpenRoundedIcon from '@mui/icons-material/FolderOpenRounded';
 import HourglassEmptyIcon from '@mui/icons-material/HourglassEmpty';
+import KeyboardArrowRightRoundedIcon from '@mui/icons-material/KeyboardArrowRightRounded';
+import KeyboardArrowUpRoundedIcon from '@mui/icons-material/KeyboardArrowUpRounded';
+import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
 import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import DownloadIcon from '@mui/icons-material/Download';
-import RocketLaunchIcon from '@mui/icons-material/RocketLaunch';
+import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
+import ViewInArRoundedIcon from '@mui/icons-material/ViewInArRounded';
 import { Trans, useTranslation } from 'react-i18next';
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { Spacer } from '../common/Spacer';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useModal } from '../hooks/useModal';
-import { LocalNodeSwitch } from './Group/Settings';
-import { useAtom, useSetAtom } from 'jotai';
+import { useSetAtom } from 'jotai';
+import { infoSnackGlobalAtom, openSnackGlobalAtom } from '../atoms/global';
 import {
-  enableAuthWhenSyncingAtom,
-  infoSnackGlobalAtom,
-  openSnackGlobalAtom,
-} from '../atoms/global';
+  dialogActionsSx,
+  dialogContentSx,
+  dialogContentTextSx,
+  dialogTitleSx,
+  getDialogDangerButtonSx,
+  getDialogPaperSx,
+  getDialogPrimaryButtonSx,
+} from './App/dialogSurface';
 
 export type StepStatus = 'idle' | 'active' | 'done' | 'error';
 
@@ -63,6 +57,439 @@ export interface Steps {
   downloadedCore: StepState;
   coreRunning: StepState;
 }
+
+/** Theme-aware styles for the Core setup shell; dark branch preserves existing pixel-perfect values. */
+export function getCoreSetupStyles(theme: Theme) {
+  const isLight = theme.palette.mode === 'light';
+  const { palette } = theme;
+
+  const dividerSoft = isLight
+    ? palette.divider
+    : 'rgba(255,255,255,0.07)';
+  const dividerStrong = isLight
+    ? palette.divider
+    : 'rgba(255,255,255,0.08)';
+  const dividerRow = isLight
+    ? palette.divider
+    : 'rgba(255,255,255,0.06)';
+
+  const dialogPaperSx = {
+    background: isLight ? palette.background.paper : '#0d1117',
+    border: isLight
+      ? `1px solid ${palette.divider}`
+      : '1px solid rgba(255,255,255,0.08)',
+    borderRadius: '10px',
+    boxShadow: isLight
+      ? `0 24px 50px ${alpha('#000000', 0.12)}`
+      : '0 24px 50px rgba(0,0,0,0.36)',
+    maxHeight: 'calc(100vh - 48px)',
+    maxWidth: '740px',
+  };
+
+  const coreHeaderSx = {
+    alignItems: 'center',
+    borderBottom: isLight
+      ? `1px solid ${palette.divider}`
+      : '1px solid rgba(255,255,255,0.06)',
+    display: 'flex',
+    justifyContent: 'space-between',
+    minHeight: 64,
+    px: { xs: 2.5, sm: 3 },
+  };
+
+  const coreTitleSx = {
+    borderBottom: 'none',
+    color: isLight ? palette.text.primary : 'rgba(246,248,252,0.96)',
+    fontSize: '1.04rem',
+    fontWeight: 650,
+    lineHeight: 1.3,
+    px: 0,
+    py: 0,
+    textAlign: 'left' as const,
+  };
+
+  const closeButtonSx = {
+    color: isLight
+      ? alpha(palette.text.primary, 0.62)
+      : 'rgba(214,221,233,0.68)',
+    mr: -0.75,
+    '&:hover': {
+      backgroundColor: isLight
+        ? alpha(palette.action.active, 0.06)
+        : 'rgba(255,255,255,0.04)',
+      color: isLight ? palette.text.primary : '#F6F8FC',
+    },
+  };
+
+  const coreContentSx = {
+    px: { xs: 2.5, sm: 3.4 },
+    py: { xs: 2.4, sm: 3 },
+  };
+
+  const advancedCopySx = {
+    color: isLight
+      ? palette.text.secondary
+      : 'rgba(214,221,233,0.64)',
+    fontSize: '0.84rem',
+    lineHeight: 1.55,
+  };
+
+  const introSx = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 1.6,
+    mb: 2.2,
+    px: { xs: 0, sm: 0.8 },
+  };
+
+  const introIconSx = {
+    alignItems: 'center',
+    background: isLight
+      ? `linear-gradient(135deg, ${alpha(palette.primary.main, 0.95)}, ${alpha(palette.primary.main, 0.22)})`
+      : 'linear-gradient(135deg, rgba(51,107,222,0.92), rgba(91,132,201,0.3))',
+    border: isLight
+      ? `1px solid ${alpha(palette.primary.main, 0.35)}`
+      : '1px solid rgba(118,165,255,0.42)',
+    borderRadius: '999px',
+    boxShadow: isLight
+      ? `0 0 20px ${alpha(palette.primary.main, 0.2)}`
+      : '0 0 24px rgba(74,132,255,0.24)',
+    color: isLight ? palette.primary.contrastText : '#D5E4FF',
+    display: 'flex',
+    flexShrink: 0,
+    height: 48,
+    justifyContent: 'center',
+    width: 48,
+  };
+
+  const introTitleSx = {
+    color: isLight ? palette.text.primary : 'rgba(246,248,252,0.96)',
+    fontSize: '0.96rem',
+    fontWeight: 800,
+    lineHeight: 1.25,
+  };
+
+  const publicNodeWarningSx = {
+    alignItems: 'center',
+    backgroundColor: isLight
+      ? alpha(palette.warning.main, 0.08)
+      : 'rgba(216,186,138,0.08)',
+    border: isLight
+      ? `1px solid ${alpha(palette.warning.main, 0.28)}`
+      : '1px solid rgba(216,186,138,0.18)',
+    borderRadius: '8px',
+    display: 'flex',
+    gap: 1.1,
+    mb: 2.2,
+    px: 1.35,
+    py: 1.1,
+  };
+
+  const publicNodeWarningTextSx = {
+    color: isLight
+      ? alpha(palette.text.primary, 0.82)
+      : 'rgba(239,228,202,0.9)',
+    fontSize: '0.82rem',
+    lineHeight: 1.5,
+  };
+
+  const stepsListSx = {
+    borderBottom: `1px solid ${dividerSoft}`,
+    display: 'grid',
+  };
+
+  const coreStepSx = (active: boolean) => ({
+    borderTop: `1px solid ${dividerSoft}`,
+    display: 'grid',
+    gap: active ? 1.5 : 1.25,
+    px: { xs: 0, sm: 2 },
+    py: { xs: 2.2, sm: 2.35 },
+  });
+
+  const stepHeaderSx = {
+    alignItems: 'flex-start',
+    display: 'grid',
+    gap: { xs: 1.35, sm: 1.6 },
+    gridTemplateColumns: 'auto minmax(0, 1fr) auto',
+  };
+
+  const stepIconSlotSx = {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    pt: 0.1,
+    width: 32,
+  };
+
+  const stepTitleSx = {
+    color: isLight ? palette.text.primary : 'rgba(246,248,252,0.96)',
+    fontSize: '0.96rem',
+    fontWeight: 800,
+    lineHeight: 1.25,
+  };
+
+  const progressRowSx = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 1.5,
+    ml: { xs: 0, sm: 6 },
+  };
+
+  const stepMessageSx = {
+    ...advancedCopySx,
+    ml: { xs: 0, sm: 6 },
+  };
+
+  const activeStatusSx = {
+    color: isLight ? palette.primary.main : '#83B3FF',
+    fontSize: '0.84rem',
+    fontWeight: 700,
+    lineHeight: 1.55,
+  };
+
+  const nextPillSx = {
+    alignSelf: 'flex-start',
+    backgroundColor: isLight
+      ? alpha(palette.primary.main, 0.12)
+      : 'rgba(77,139,255,0.16)',
+    borderRadius: '7px',
+    color: isLight ? palette.primary.dark : '#9FC0FF',
+    fontSize: '0.74rem',
+    fontWeight: 700,
+    lineHeight: 1,
+    px: 1,
+    py: 0.68,
+  };
+
+  const locationCardSx = {
+    borderBottom: `1px solid ${dividerSoft}`,
+    display: 'grid',
+    gap: 1.5,
+    px: { xs: 0, sm: 2 },
+    py: { xs: 2.15, sm: 2.35 },
+  };
+
+  const locationHeaderSx = {
+    alignItems: 'center',
+    display: 'grid',
+    gap: { xs: 1.35, sm: 1.6 },
+    gridTemplateColumns: 'auto minmax(0,1fr) auto',
+  };
+
+  const pathStripSx = {
+    alignItems: 'center',
+    backgroundColor: isLight
+      ? alpha(palette.text.primary, 0.04)
+      : 'rgba(255,255,255,0.045)',
+    borderRadius: '7px',
+    display: 'flex',
+    gap: 1,
+    minHeight: 44,
+    ml: { xs: 0, sm: 5.6 },
+    px: 1.35,
+  };
+
+  const toolRowSx = {
+    alignItems: 'center',
+    borderBottom: `1px solid ${dividerRow}`,
+    display: 'grid',
+    gap: 1.5,
+    gridTemplateColumns: 'minmax(0, 1fr) auto',
+    py: 1.35,
+    '&:last-child': {
+      borderBottom: 0,
+    },
+  };
+
+  const toolTitleSx = {
+    color: isLight ? palette.text.primary : 'rgba(246,248,252,0.96)',
+    fontSize: '0.9rem',
+    fontWeight: 800,
+    lineHeight: 1.25,
+  };
+
+  const toolErrorSx = {
+    color: isLight ? palette.warning.dark : '#D8BA8A',
+    fontSize: '0.8rem',
+    lineHeight: 1.45,
+  };
+
+  const pathValueSx = {
+    color: isLight
+      ? palette.text.secondary
+      : 'rgba(214,221,233,0.78)',
+    fontSize: '0.8rem',
+    lineHeight: 1.45,
+    overflowWrap: 'anywhere' as const,
+  };
+
+  const copyButtonSx = {
+    alignItems: 'center',
+    color: isLight
+      ? alpha(palette.text.primary, 0.48)
+      : 'rgba(214,221,233,0.56)',
+    display: 'flex',
+    flex: '0 0 auto',
+    p: 0.35,
+    '&:hover': {
+      color: isLight ? palette.primary.main : '#D6E5FF',
+    },
+  };
+
+  const toolButtonSx = {
+    borderColor: isLight
+      ? alpha(palette.primary.main, 0.4)
+      : 'rgba(141,180,242,0.45)',
+    color: isLight ? palette.text.primary : 'rgba(214,228,252,0.96)',
+    fontSize: '0.8rem',
+    fontWeight: 600,
+    letterSpacing: 0,
+    minHeight: 34,
+    minWidth: 82,
+    textTransform: 'none' as const,
+    '&:hover': {
+      borderColor: isLight
+        ? palette.primary.main
+        : 'rgba(170,202,255,0.7)',
+      backgroundColor: isLight
+        ? alpha(palette.primary.main, 0.06)
+        : 'rgba(141,180,242,0.08)',
+    },
+  };
+
+  const advancedCardSx = {
+    display: 'grid',
+  };
+
+  const advancedToggleSx = {
+    alignItems: 'center',
+    display: 'grid',
+    gap: { xs: 1.35, sm: 1.6 },
+    gridTemplateColumns: 'auto minmax(0,1fr) auto',
+    px: { xs: 0, sm: 2 },
+    py: { xs: 2.15, sm: 2.35 },
+    width: '100%',
+    '&:hover': {
+      backgroundColor: isLight
+        ? alpha(palette.action.active, 0.04)
+        : 'rgba(255,255,255,0.018)',
+    },
+  };
+
+  const advancedToolsSx = {
+    borderTop: `1px solid ${dividerSoft}`,
+    display: 'grid',
+    px: { xs: 0, sm: 2 },
+  };
+
+  const footerSx = {
+    borderTop: `1px solid ${dividerStrong}`,
+    justifyContent: 'flex-end',
+    px: { xs: 2.5, sm: 3.4 },
+    py: 2,
+  };
+
+  const footerInnerSx = {
+    alignItems: 'center',
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: 1.5,
+    justifyContent: 'flex-end',
+    width: '100%',
+  };
+
+  const secondaryActionSx = {
+    color: isLight
+      ? palette.text.secondary
+      : 'rgba(214,221,233,0.72)',
+    fontSize: '0.86rem',
+    fontWeight: 600,
+    letterSpacing: 0,
+    minHeight: 38,
+    px: 1.6,
+    textTransform: 'none' as const,
+    '&:hover': {
+      backgroundColor: isLight
+        ? alpha(palette.action.active, 0.06)
+        : 'rgba(255,255,255,0.035)',
+      color: isLight ? palette.text.primary : '#F6F8FC',
+    },
+  };
+
+  const primaryActionSx = {
+    fontSize: '0.86rem',
+    fontWeight: 600,
+    letterSpacing: 0,
+    minHeight: 40,
+    minWidth: 136,
+    px: 2.4,
+    textTransform: 'none' as const,
+  };
+
+  const progressPercentSx = {
+    color: isLight
+      ? palette.text.secondary
+      : 'rgba(214,221,233,0.58)',
+    fontSize: '0.82rem',
+    minWidth: 38,
+    textAlign: 'right' as const,
+  };
+
+  const mutedDecorIconSx = {
+    color: isLight
+      ? palette.text.secondary
+      : 'rgba(214,221,233,0.72)',
+    fontSize: 24,
+  };
+
+  const chevronIconSx = {
+    color: isLight ? palette.text.secondary : 'rgba(214,221,233,0.65)',
+    fontSize: 28,
+  };
+
+  return {
+    activeStatusSx,
+    advancedCardSx,
+    advancedCopySx,
+    advancedToggleSx,
+    advancedToolsSx,
+    chevronIconSx,
+    closeButtonSx,
+    coreContentSx,
+    coreHeaderSx,
+    coreStepSx,
+    coreTitleSx,
+    copyButtonSx,
+    dialogPaperSx,
+    footerInnerSx,
+    footerSx,
+    introIconSx,
+    introSx,
+    introTitleSx,
+    locationCardSx,
+    locationHeaderSx,
+    mutedDecorIconSx,
+    nextPillSx,
+    pathStripSx,
+    pathValueSx,
+    primaryActionSx,
+    progressPercentSx,
+    progressRowSx,
+    publicNodeWarningSx,
+    publicNodeWarningTextSx,
+    secondaryActionSx,
+    stepHeaderSx,
+    stepIconSlotSx,
+    stepMessageSx,
+    stepTitleSx,
+    stepsListSx,
+    toolButtonSx,
+    toolErrorSx,
+    toolRowSx,
+    toolTitleSx,
+  };
+}
+
 export interface CoreSetupDialogProps {
   open: boolean;
   onClose?: () => void;
@@ -80,23 +507,16 @@ export interface CoreSetupDialogProps {
   hideActionIfRunning?: boolean;
   customQortalPath: string;
   verifyCoreNotRunningFunc: () => void;
-  isWindows: boolean;
+  startAtIntro?: boolean;
+  isCoreSyncing?: boolean;
+  coreSyncPercent?: number;
+  publicNodeUnavailable?: boolean;
+  contextualActionLabel?: string;
+  contextualActionDisabled?: boolean;
+  contextualActionLoading?: boolean;
+  onContextualAction?: () => void;
 }
 
-const statusIcon = (status: StepStatus) => {
-  switch (status) {
-    case 'done':
-      return <CheckCircleIcon fontSize="small" color="success" />;
-    case 'error':
-      return <ErrorOutlineIcon fontSize="small" color="error" />;
-    case 'active':
-      return <HourglassEmptyIcon fontSize="small" color="info" />;
-    case 'idle':
-    default:
-      return <RadioButtonUncheckedIcon fontSize="small" color="disabled" />;
-  }
-};
-
 function resolveProgress({ status, progress }: StepState) {
   if (typeof progress === 'number') return Math.min(100, Math.max(0, progress));
   if (status === 'done') return 100;
@@ -115,33 +535,63 @@ export function CoreSetupDialog(props: CoreSetupDialogProps) {
     actionLabelOverride,
     customQortalPath,
     verifyCoreNotRunningFunc,
-    isWindows,
+    startAtIntro = false,
+    isCoreSyncing = false,
+    coreSyncPercent,
+    publicNodeUnavailable = false,
+    contextualActionLabel,
+    contextualActionDisabled = false,
+    contextualActionLoading = false,
+    onContextualAction,
   } = props;
   const setOpenSnackGlobal = useSetAtom(openSnackGlobalAtom);
   const setInfoSnackCustom = useSetAtom(infoSnackGlobalAtom);
   const [isExtended, setIsExtended] = useState(false);
   const [errorStop, setErrorStop] = useState('');
-  const [errorDeleteDB, setErrorDeleteDB] = useState('');
-  const [errorBootstrap, setErrorBootstrap] = useState('');
+  const [errorBootstrapChain, setErrorBootstrapChain] = useState('');
   const { t } = useTranslation(['node', 'core']);
-  const [mode, setMode] = useState(1);
+  const [mode, setMode] = useState(startAtIntro ? 1 : 2);
   const [stopCoreLoading, setStopCoreLoading] = useState(false);
-  const [bootstrapLoading, setBootstrapLoading] = useState(false);
-  const [dbExists, setDbExists] = useState(false);
-  const [deleteDBLoading, setDeleteDBLoading] = useState(false);
+  const [bootstrapChainLoading, setBootstrapChainLoading] = useState(false);
   const [coreRunningOnSystem, setCoreRunningOnSystem] = useState(false);
   const [coreInstalledOnSystem, setCoreInstalledOnSystem] = useState(false);
-  const [enableAuthWhenSyncing, setEnableAuthWhenSyncing] = useAtom(
-    enableAuthWhenSyncingAtom
-  );
   const isActiveRef = useRef(false);
   const startPause = useRef(false);
-  const bootstrapLoadingRef = useRef(false);
-  const deleteDBLoadingRef = useRef(false);
+  const bootstrapChainLoadingRef = useRef(false);
   const stopCoreLoadingRef = useRef(false);
   const { isShow, onCancel, onOk, message, show } = useModal();
 
   const theme = useTheme();
+  const s = useMemo(() => getCoreSetupStyles(theme), [theme]);
+  const renderStepStatusIcon = useCallback(
+    (status: StepStatus) => {
+      const isLight = theme.palette.mode === 'light';
+      const idleColor = isLight
+        ? alpha(theme.palette.text.primary, 0.32)
+        : 'rgba(214,221,233,0.32)';
+      const activeColor = isLight
+        ? theme.palette.primary.main
+        : '#83B3FF';
+      switch (status) {
+        case 'done':
+          return <CheckCircleIcon sx={{ color: '#62D26F', fontSize: 29 }} />;
+        case 'error':
+          return <ErrorOutlineIcon sx={{ color: '#FF7070', fontSize: 29 }} />;
+        case 'active':
+          return (
+            <HourglassEmptyIcon sx={{ color: activeColor, fontSize: 29 }} />
+          );
+        case 'idle':
+        default:
+          return (
+            <RadioButtonUncheckedIcon
+              sx={{ color: idleColor, fontSize: 29 }}
+            />
+          );
+      }
+    },
+    [theme]
+  );
   const statusText = useCallback(
     (status: StepStatus) => {
       switch (status) {
@@ -168,41 +618,59 @@ export function CoreSetupDialog(props: CoreSetupDialogProps) {
   );
   const stepDefs = useMemo(
     () => [
-      {
-        key: 'hasJava' as const,
-        label: t('node:steps.java', {
-          postProcess: 'capitalizeFirstChar',
-        }),
-        icon: <RocketLaunchIcon fontSize="inherit" />,
-      },
       {
         key: 'downloadedCore' as const,
-        label: t('node:steps.downloaded', {
-          postProcess: 'capitalizeFirstChar',
-        }),
-        icon: <DownloadIcon fontSize="inherit" />,
+        getLabel: (state: StepState) => {
+          if (state.status === 'done')
+            return t('node:coreSetupDialog.steps.downloadDone', {
+              postProcess: 'capitalizeFirstChar',
+            });
+          if (state.status === 'active')
+            return t('node:coreSetupDialog.steps.downloadActive', {
+              postProcess: 'capitalizeFirstChar',
+            });
+          return t('node:coreSetupDialog.steps.downloadIdle', {
+            postProcess: 'capitalizeFirstChar',
+          });
+        },
       },
       {
         key: 'coreRunning' as const,
-        label: t('node:steps.running', {
-          postProcess: 'capitalizeFirstChar',
-        }),
-        icon: <PlayArrowIcon fontSize="inherit" />,
+        getLabel: (state: StepState) => {
+          if (state.status === 'done')
+            return t('node:coreSetupDialog.steps.runningDone', {
+              postProcess: 'capitalizeFirstChar',
+            });
+          if (state.status === 'active')
+            return t('node:coreSetupDialog.steps.runningActive', {
+              postProcess: 'capitalizeFirstChar',
+            });
+          return t('node:coreSetupDialog.steps.runningIdle', {
+            postProcess: 'capitalizeFirstChar',
+          });
+        },
       },
     ],
     [t]
   );
 
-  const stepStates = stepDefs
-    .filter((step) => (isWindows ? step.key !== 'hasJava' : step))
-    .map((def) => ({
-      ...def,
-      state: steps[def.key],
-    }));
+  const stepStates = stepDefs.map((def) => {
+    const state =
+      def.key === 'coreRunning' &&
+      isCoreSyncing &&
+      typeof coreSyncPercent === 'number'
+        ? {
+            ...steps[def.key],
+            progress: Math.max(0, Math.min(100, coreSyncPercent)),
+          }
+        : steps[def.key];
 
-  // Determine active step (first not done). If all done, last index.
-  let activeStep = stepStates.findIndex((s) => s.state.status !== 'done');
-  if (activeStep === -1) activeStep = stepStates.length - 1;
+    return {
+      ...def,
+      state,
+      label: def.getLabel(state),
+    };
+  });
 
   const downloaded = steps.downloadedCore.status === 'done';
   const running = steps.coreRunning.status === 'done';
@@ -210,35 +678,77 @@ export function CoreSetupDialog(props: CoreSetupDialogProps) {
 
   useEffect(() => {
     isActiveRef.current = isActive;
-    bootstrapLoadingRef.current = bootstrapLoading;
-    deleteDBLoadingRef.current = deleteDBLoading;
+    bootstrapChainLoadingRef.current = bootstrapChainLoading;
     stopCoreLoadingRef.current = stopCoreLoading;
-  }, [isActive, deleteDBLoading, stopCoreLoading, bootstrapLoading]);
+  }, [isActive, stopCoreLoading, bootstrapChainLoading]);
 
-  const computedActionLabel = useMemo(
-    () =>
-      running
-        ? t('node:actions.finished', {
-            postProcess: 'capitalizeFirstChar',
-          })
-        : downloaded
-          ? t('node:actions.start', {
-              postProcess: 'capitalizeFirstChar',
-            })
-          : t('node:actions.install', {
-              postProcess: 'capitalizeFirstChar',
-            }),
-    [running, downloaded, t]
-  );
+  const computedActionLabel = useMemo(() => {
+    if (running) {
+      return t('node:coreSetupDialog.actionDone', {
+        postProcess: 'capitalizeFirstChar',
+      });
+    }
+    if (downloaded) {
+      return t('node:coreSetupDialog.actionStart', {
+        postProcess: 'capitalizeFirstChar',
+      });
+    }
+    return t('node:coreSetupDialog.actionDownload', {
+      postProcess: 'capitalizeFirstChar',
+    });
+  }, [running, downloaded, t]);
 
   const actionLabel = actionLabelOverride ?? computedActionLabel;
+  const hasContextualAction =
+    Boolean(contextualActionLabel) && Boolean(onContextualAction);
 
   // Enable action if Java is installed and core is not already running
   const canAction = !actionLoading;
+  const nextStepKey = running
+    ? undefined
+    : downloaded
+      ? 'coreRunning'
+      : 'downloadedCore';
+  const coreLocationDescription = useMemo(
+    () =>
+      customQortalPath
+        ? t('node:coreSetupDialog.locationCustom', {
+            postProcess: 'capitalizeFirstChar',
+          })
+        : t('node:coreSetupDialog.locationDefault', {
+            postProcess: 'capitalizeFirstChar',
+          }),
+    [customQortalPath, t]
+  );
+  const coreLocationLabel = useMemo(
+    () =>
+      customQortalPath ||
+      t('node:coreSetupDialog.locationPathDefault', {
+        postProcess: 'capitalizeFirstChar',
+      }),
+    [customQortalPath, t]
+  );
+  const advancedCoreToolsDisabled = isActive || isCoreSyncing;
+
+  const copyCoreLocation = async () => {
+    if (!customQortalPath) return;
+    try {
+      await navigator.clipboard?.writeText(customQortalPath);
+      setOpenSnackGlobal(true);
+      setInfoSnackCustom({
+        type: 'success',
+        message: t('node:coreSetupDialog.folderCopied', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  };
 
   const pickPath = async () => {
     try {
-      const res = await window.coreSetup.pickQortalDirectory();
+      const res = await window.coreSetup?.pickQortalDirectory?.();
 
       if (res === false) {
         setOpenSnackGlobal(true);
@@ -258,7 +768,7 @@ export function CoreSetupDialog(props: CoreSetupDialogProps) {
 
   const removePath = async () => {
     try {
-      await window.coreSetup.removeCustomPath();
+      await window.coreSetup?.removeCustomPath?.();
       verifyCoreNotRunningFunc();
     } catch (error) {
       console.error(error);
@@ -273,19 +783,18 @@ export function CoreSetupDialog(props: CoreSetupDialogProps) {
 
   useEffect(() => {
     if (open) {
+      setMode(startAtIntro ? 1 : 2);
       verifyCoreNotRunningFunc();
       setErrorStop('');
-      setErrorDeleteDB('');
-      setErrorBootstrap('');
+      setErrorBootstrapChain('');
     }
-  }, [open, verifyCoreNotRunningFunc]);
+  }, [open, startAtIntro, verifyCoreNotRunningFunc]);
 
   const getIsCoreRunningOnSystem = async () => {
     try {
       if (
         isActiveRef.current ||
-        bootstrapLoadingRef.current ||
-        deleteDBLoadingRef.current ||
+        bootstrapChainLoadingRef.current ||
         stopCoreLoadingRef.current ||
         startPause.current
       )
@@ -293,8 +802,7 @@ export function CoreSetupDialog(props: CoreSetupDialogProps) {
       const response = await window?.coreSetup?.isCoreRunningOnSystem();
       if (
         isActiveRef.current ||
-        bootstrapLoadingRef.current ||
-        deleteDBLoadingRef.current ||
+        bootstrapChainLoadingRef.current ||
         stopCoreLoadingRef.current
       )
         return;
@@ -309,8 +817,8 @@ export function CoreSetupDialog(props: CoreSetupDialogProps) {
       const response = await window?.coreSetup?.isCoreInstalledOnSystem();
       if (
         isActiveRef.current ||
-        bootstrapLoadingRef.current ||
-        deleteDBLoadingRef.current
+        bootstrapChainLoadingRef.current ||
+        stopCoreLoadingRef.current
       )
         return;
       setCoreInstalledOnSystem(response);
@@ -319,51 +827,32 @@ export function CoreSetupDialog(props: CoreSetupDialogProps) {
     }
   };
 
-  const getDbExists = async () => {
-    try {
-      if (
-        isActiveRef.current ||
-        bootstrapLoadingRef.current ||
-        deleteDBLoadingRef.current ||
-        stopCoreLoadingRef.current ||
-        startPause.current
-      )
-        return;
-      const response = await window?.coreSetup?.dbExists();
-
-      setDbExists(response);
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
   useEffect(() => {
     if (
       !open ||
       !window?.coreSetup ||
       isActive ||
-      bootstrapLoading ||
-      deleteDBLoading
+      bootstrapChainLoading
     )
       return; // only start when modal is open
     if (window?.coreSetup?.isCoreRunningOnSystem) {
       getIsCoreRunningOnSystem();
       getIsCoreInstalledOnSystem();
-      getDbExists();
     }
     const intervalId = setInterval(() => {
       window?.coreSetup?.verifySteps();
       if (window?.coreSetup?.isCoreRunningOnSystem) {
         getIsCoreRunningOnSystem();
         getIsCoreInstalledOnSystem();
-        getDbExists();
       }
     }, 5000); // every 5s
 
     return () => clearInterval(intervalId); // cleanup on close/unmount
-  }, [open, isActive, bootstrapLoading, deleteDBLoading]);
+  }, [open, isActive, bootstrapChainLoading]);
 
   const stopCore = async () => {
+    if (advancedCoreToolsDisabled) return;
+
     try {
       setErrorStop('');
       setStopCoreLoading(true);
@@ -388,45 +877,27 @@ export function CoreSetupDialog(props: CoreSetupDialogProps) {
       console.error(error);
     } finally {
       setStopCoreLoading(false);
+      stopCoreLoadingRef.current = false;
     }
   };
-  const bootstrap = async () => {
-    try {
-      setErrorBootstrap('');
-      setBootstrapLoading(true);
-      await show({
-        message: t('node:confirmations.bootstrap', {
-          postProcess: 'capitalizeFirstChar',
-        }),
-      });
-      const response = await window?.coreSetup?.bootstrap();
-      if (response !== true) {
-        setErrorBootstrap(
-          t('node:error.failed_bootstrap', {
-            postProcess: 'capitalizeFirstChar',
-          })
-        );
-      }
-    } catch (error) {
-      console.error(error);
-    } finally {
-      setBootstrapLoading(false);
-    }
-  };
+  const bootstrapOrClearChainAndStart = async () => {
+    if (advancedCoreToolsDisabled) return;
 
-  const deleteDB = async () => {
     try {
-      setErrorDeleteDB('');
-      setDeleteDBLoading(true);
+      setErrorBootstrapChain('');
+      setBootstrapChainLoading(true);
+      bootstrapChainLoadingRef.current = true;
       await show({
-        message: t('node:confirmations.delete', {
+        message: t('node:confirmations.bootstrapOrClearChain', {
           postProcess: 'capitalizeFirstChar',
         }),
       });
-      const response = await window?.coreSetup?.deleteDB();
+      const response =
+        (await window?.coreSetup?.bootstrapOrClearChainAndStart?.()) ??
+        false;
       if (response !== true) {
-        setErrorDeleteDB(
-          t('node:error.failed_delete', {
+        setErrorBootstrapChain(
+          t('node:error.failed_bootstrap_or_clear', {
             postProcess: 'capitalizeFirstChar',
           })
         );
@@ -434,16 +905,30 @@ export function CoreSetupDialog(props: CoreSetupDialogProps) {
     } catch (error) {
       console.error(error);
     } finally {
-      setDeleteDBLoading(false);
+      setBootstrapChainLoading(false);
+      bootstrapChainLoadingRef.current = false;
     }
   };
+  const handleDialogClose = (
+    _event: object,
+    _reason: 'backdropClick' | 'escapeKeyDown'
+  ) => {
+    if (disableClose) return;
+    onClose?.();
+  };
 
   return (
     <Dialog
       open={open}
+      onClose={handleDialogClose}
       fullWidth
       maxWidth="sm"
       aria-labelledby="core-setup-title"
+      slotProps={{
+        paper: {
+          sx: s.dialogPaperSx,
+        },
+      }}
     >
       {mode === 1 && (
         <>
@@ -544,261 +1029,406 @@ export function CoreSetupDialog(props: CoreSetupDialogProps) {
       )}
       {mode === 2 && (
         <>
-          <DialogTitle id="core-setup-title">
-            {t('node:setup.title', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </DialogTitle>
-          <DialogContent dividers>
-            <Typography></Typography>
-            {!isWindows && (
-              <Accordion>
-                <AccordionSummary
-                  expandIcon={<ArrowDropDownIcon />}
-                  aria-controls="panel2-content"
-                  id="panel2-header"
-                >
-                  <Typography component="span">
-                    {t('node:setup.advancedOptions', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Typography>
-                </AccordionSummary>
-                <AccordionDetails>
-                  {!customQortalPath ? (
-                    <Button onClick={pickPath}>
-                      {t('node:setup.pickPath', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    </Button>
-                  ) : (
-                    <Button onClick={removePath}>
-                      {t('node:setup.removePath', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    </Button>
-                  )}
-                </AccordionDetails>
-              </Accordion>
+          <Box sx={s.coreHeaderSx}>
+                <Typography id="core-setup-title" sx={s.coreTitleSx}>
+                  {t('node:coreSetupDialog.title', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </Typography>
+            {onClose && (
+              <IconButton
+                onClick={onClose}
+                disabled={disableClose}
+                sx={s.closeButtonSx}
+              >
+                <CloseRoundedIcon />
+              </IconButton>
+            )}
+          </Box>
+          <DialogContent sx={s.coreContentSx}>
+            <Box sx={s.introSx}>
+              <Box sx={s.introIconSx}>
+                <ViewInArRoundedIcon sx={{ fontSize: 20 }} />
+              </Box>
+              <Box sx={{ minWidth: 0 }}>
+                <Typography sx={s.introTitleSx}>
+                  {t('node:coreSetupDialog.introTitle', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </Typography>
+                <Typography sx={s.advancedCopySx}>
+                  {t('node:coreSetupDialog.introSubtitle', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </Typography>
+              </Box>
+            </Box>
+
+            {publicNodeUnavailable && (
+              <Box sx={s.publicNodeWarningSx}>
+                <ErrorOutlineIcon
+                  sx={{
+                    color:
+                      theme.palette.mode === 'light'
+                        ? theme.palette.warning.main
+                        : '#D8BA8A',
+                    fontSize: 20,
+                  }}
+                />
+                <Typography sx={s.publicNodeWarningTextSx}>
+                  {t('node:coreSetupDialog.publicNodeUnavailable', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </Typography>
+              </Box>
             )}
 
-            <Stepper activeStep={activeStep} orientation="vertical">
-              {stepStates.map(({ key, label, state }, idx) => {
+            <Box sx={s.stepsListSx}>
+              {stepStates.map(({ key, label, state }) => {
                 const prog = resolveProgress(state);
                 const isIndeterminate =
                   prog === undefined &&
                   (state.status === 'active' || state.status === 'error');
+                const isNextStep = key === nextStepKey;
+                const statusLabel =
+                  isNextStep && state.status === 'idle'
+                    ? key === 'downloadedCore'
+                      ? t('node:coreSetupDialog.readyToDownload', {
+                          postProcess: 'capitalizeFirstChar',
+                        })
+                      : t('node:coreSetupDialog.readyToStart', {
+                          postProcess: 'capitalizeFirstChar',
+                        })
+                    : key === 'coreRunning' &&
+                        state.status === 'done' &&
+                        isCoreSyncing
+                      ? t('node:coreSetupDialog.syncing', {
+                          postProcess: 'capitalizeFirstChar',
+                        })
+                      : statusText(state.status);
+                const helperText =
+                  key === 'downloadedCore'
+                    ? state.status === 'done'
+                      ? t('node:coreSetupDialog.helpers.downloadDone', {
+                          postProcess: 'capitalizeFirstChar',
+                        })
+                      : state.status === 'active'
+                        ? t('node:coreSetupDialog.helpers.downloadActive', {
+                            postProcess: 'capitalizeFirstChar',
+                          })
+                        : t('node:coreSetupDialog.helpers.downloadIdle', {
+                            postProcess: 'capitalizeFirstChar',
+                          })
+                    : state.status === 'done'
+                      ? isCoreSyncing
+                        ? t('node:coreSetupDialog.helpers.runningDoneSyncing', {
+                            postProcess: 'capitalizeFirstChar',
+                          })
+                        : t('node:coreSetupDialog.helpers.runningDone', {
+                            postProcess: 'capitalizeFirstChar',
+                          })
+                      : downloaded
+                        ? t('node:coreSetupDialog.helpers.runningWaiting', {
+                            postProcess: 'capitalizeFirstChar',
+                          })
+                        : t('node:coreSetupDialog.helpers.runningBlocked', {
+                            postProcess: 'capitalizeFirstChar',
+                          });
 
                 return (
-                  <Step key={key} expanded>
-                    <StepLabel
-                      icon={statusIcon(state.status)}
-                      optional={
-                        <Typography variant="caption" color="text.secondary">
-                          {statusText(state.status)}
-                        </Typography>
-                      }
-                    >
-                      <Stack direction="row" alignItems="center" spacing={1}>
+                  <Box key={key} sx={s.coreStepSx(isNextStep)}>
+                    <Box sx={s.stepHeaderSx}>
+                      <Box sx={s.stepIconSlotSx}>
+                        {renderStepStatusIcon(state.status)}
+                      </Box>
+                      <Box sx={{ flex: 1, minWidth: 0 }}>
+                        <Typography sx={s.stepTitleSx}>{label}</Typography>
                         <Typography
-                          variant="subtitle1"
-                          sx={{ fontWeight: 600 }}
+                          sx={
+                            isNextStep ? s.activeStatusSx : s.advancedCopySx
+                          }
                         >
-                          {label}
+                          {statusLabel}
                         </Typography>
-                      </Stack>
-                    </StepLabel>
-                    <StepContent>
-                      <Stack
-                        spacing={1.25}
-                        sx={{ pb: idx === stepStates.length - 1 ? 0 : 2 }}
-                      >
-                        <Box
-                          sx={{ display: 'flex', alignItems: 'center', gap: 2 }}
-                        >
-                          <Box sx={{ flex: 1 }}>
-                            <LinearProgress
-                              variant={
-                                prog !== undefined
-                                  ? 'determinate'
-                                  : 'indeterminate'
-                              }
-                              value={prog}
-                              color={
-                                state.status === 'error' ? 'error' : 'primary'
-                              }
-                              aria-label={`${label} progress`}
-                              sx={{
-                                height: 8,
-                                borderRadius: 2,
-                              }}
-                            />
-                          </Box>
-                          <Typography
-                            variant="body2"
-                            color="text.secondary"
-                            sx={{ minWidth: 48, textAlign: 'right' }}
-                          >
-                            {prog !== undefined
-                              ? `${prog}%`
-                              : isIndeterminate
-                                ? '...'
-                                : '0%'}
+                        {isNextStep && (
+                          <Typography sx={{ ...s.advancedCopySx, mt: 1.2 }}>
+                            {helperText}
                           </Typography>
-                        </Box>
+                        )}
+                      </Box>
+                      {isNextStep && (
+                        <Typography sx={s.nextPillSx}>
+                          {t('node:coreSetupDialog.nextStepPill', {
+                            postProcess: 'capitalizeFirstChar',
+                          })}
+                        </Typography>
+                      )}
+                    </Box>
+                    <Box sx={s.progressRowSx}>
+                      <Box sx={{ flex: 1 }}>
+                        <LinearProgress
+                          variant={
+                            prog !== undefined ? 'determinate' : 'indeterminate'
+                          }
+                          value={prog}
+                          color={state.status === 'error' ? 'error' : 'primary'}
+                          aria-label={t('node:coreSetupDialog.progressAriaLabel', {
+                            label,
+                          })}
+                          sx={{
+                            height: 7,
+                            borderRadius: 2,
+                          }}
+                        />
+                      </Box>
+                      <Typography sx={s.progressPercentSx}>
+                        {prog !== undefined
+                          ? `${prog}%`
+                          : isIndeterminate
+                            ? '...'
+                            : '0%'}
+                      </Typography>
+                    </Box>
 
-                        {state.message ? (
-                          <Typography variant="body2" color="text.secondary">
-                            {t(`node:messages.${state.message}`, {
-                              postProcess: 'capitalizeFirstChar',
-                            })}
-                          </Typography>
-                        ) : null}
-                      </Stack>
-                    </StepContent>
-                  </Step>
+                    {state.message && !isNextStep ? (
+                      <Typography sx={s.stepMessageSx}>
+                        {t(`node:messages.${state.message}`, {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
+                      </Typography>
+                    ) : null}
+                  </Box>
                 );
               })}
-            </Stepper>
-            <Spacer height="20px" />
-            <Button onClick={() => setIsExtended((prev) => !prev)}>
-              {!isExtended
-                ? t(`node:more`, {
-                    postProcess: 'capitalizeFirstChar',
-                  })
-                : t(`node:less`, {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-            </Button>
-            <Collapse in={isExtended} timeout="auto" unmountOnExit>
-              <Box
-                sx={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: '15px',
-                }}
-              >
-                <Box
-                  sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: '5px',
-                  }}
-                >
-                  <Button
-                    onClick={stopCore}
-                    variant="contained"
-                    disabled={
-                      stopCoreLoading ||
-                      !running ||
-                      !coreRunningOnSystem ||
-                      deleteDBLoading ||
-                      bootstrapLoading
-                    }
-                    loading={stopCoreLoading}
-                  >
-                    {t(`node:stop`, {
+            </Box>
+            <Box sx={s.locationCardSx}>
+              <Box sx={s.locationHeaderSx}>
+                <FolderOpenRoundedIcon sx={s.mutedDecorIconSx} />
+                <Box sx={{ flex: 1, minWidth: 0 }}>
+                  <Typography sx={s.toolTitleSx}>
+                    {t('node:coreSetupDialog.locationTitle', {
                       postProcess: 'capitalizeFirstChar',
                     })}
-                  </Button>
-                  <Typography>{errorStop}</Typography>
+                  </Typography>
+                  <Typography sx={s.advancedCopySx}>
+                    {coreLocationDescription}
+                  </Typography>
                 </Box>
-
-                <Box
-                  sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: '5px',
-                  }}
-                >
+                <Box sx={{ display: 'flex', gap: 0.8 }}>
                   <Button
-                    onClick={bootstrap}
-                    variant="contained"
-                    disabled={
-                      bootstrapLoading ||
-                      !coreInstalledOnSystem ||
-                      isActive ||
-                      !coreRunningOnSystem ||
-                      stopCoreLoading ||
-                      deleteDBLoading
-                    }
-                    loading={bootstrapLoading}
+                    onClick={pickPath}
+                    size="small"
+                    sx={s.toolButtonSx}
+                    variant="outlined"
                   >
-                    {t(`node:bootstrap`, {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
+                    {customQortalPath
+                      ? t('node:coreSetupDialog.change', {
+                          postProcess: 'capitalizeFirstChar',
+                        })
+                      : t('node:coreSetupDialog.choose', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
                   </Button>
-                  <Typography>{errorBootstrap}</Typography>
+                  {customQortalPath && (
+                    <Button
+                      onClick={removePath}
+                      size="small"
+                      sx={s.toolButtonSx}
+                      variant="outlined"
+                    >
+                      {t('node:coreSetupDialog.clear', {
+                        postProcess: 'capitalizeFirstChar',
+                      })}
+                    </Button>
+                  )}
                 </Box>
-                <Box
-                  sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: '5px',
-                  }}
-                >
-                  <Button
-                    onClick={deleteDB}
-                    variant="contained"
-                    disabled={
-                      !dbExists ||
-                      deleteDBLoading ||
-                      !coreInstalledOnSystem ||
-                      isActive ||
-                      stopCoreLoading ||
-                      deleteDBLoading ||
-                      bootstrapLoading
-                    }
-                    loading={deleteDBLoading}
-                  >
-                    {t(`node:delete`, {
+              </Box>
+              <Box sx={s.pathStripSx}>
+                <Typography sx={s.pathValueSx}>{coreLocationLabel}</Typography>
+                {customQortalPath && (
+                  <ButtonBase onClick={copyCoreLocation} sx={s.copyButtonSx}>
+                    <ContentCopyIcon sx={{ fontSize: 17 }} />
+                  </ButtonBase>
+                )}
+              </Box>
+            </Box>
+
+            <Box sx={s.advancedCardSx}>
+              <ButtonBase
+                onClick={() => setIsExtended((prev) => !prev)}
+                sx={s.advancedToggleSx}
+              >
+                <SettingsRoundedIcon sx={s.mutedDecorIconSx} />
+                <Box sx={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
+                  <Typography sx={s.toolTitleSx}>
+                    {t('node:coreSetupDialog.advancedTitle', {
                       postProcess: 'capitalizeFirstChar',
                     })}
-                  </Button>
-                  <Typography>{errorDeleteDB}</Typography>
+                  </Typography>
+                  <Typography sx={s.advancedCopySx}>
+                    {t('node:coreSetupDialog.advancedSubtitle', {
+                      postProcess: 'capitalizeFirstChar',
+                    })}
+                  </Typography>
                 </Box>
-              </Box>
-            </Collapse>
+                {isExtended ? (
+                  <KeyboardArrowUpRoundedIcon sx={s.chevronIconSx} />
+                ) : (
+                  <KeyboardArrowRightRoundedIcon sx={s.chevronIconSx} />
+                )}
+              </ButtonBase>
+              <Collapse in={isExtended} timeout="auto" unmountOnExit>
+                <Box sx={s.advancedToolsSx}>
+                  {advancedCoreToolsDisabled && (
+                    <Typography sx={{ ...s.advancedCopySx, py: 1.1 }}>
+                      {t('node:coreSetupDialog.maintenanceUnavailable', {
+                        postProcess: 'capitalizeFirstChar',
+                      })}
+                    </Typography>
+                  )}
+                  <Box sx={s.toolRowSx}>
+                    <Box sx={{ minWidth: 0 }}>
+                      <Typography sx={s.toolTitleSx}>
+                        {t('node:coreSetupDialog.stopCoreTitle', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
+                      </Typography>
+                      <Typography sx={s.advancedCopySx}>
+                        {t('node:coreSetupDialog.stopCoreBody', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
+                      </Typography>
+                      {errorStop && (
+                        <Typography sx={s.toolErrorSx}>{errorStop}</Typography>
+                      )}
+                    </Box>
+                    <Button
+                      onClick={stopCore}
+                      size="small"
+                      variant="outlined"
+                      disabled={
+                        advancedCoreToolsDisabled ||
+                        stopCoreLoading ||
+                        !running ||
+                        !coreRunningOnSystem ||
+                        bootstrapChainLoading
+                      }
+                      loading={stopCoreLoading}
+                      sx={s.toolButtonSx}
+                    >
+                      {t('node:coreSetupDialog.stopButton', {
+                        postProcess: 'capitalizeFirstChar',
+                      })}
+                    </Button>
+                  </Box>
+
+                  <Box sx={s.toolRowSx}>
+                    <Box sx={{ minWidth: 0 }}>
+                      <Typography sx={s.toolTitleSx}>
+                        {t('node:bootstrapChainHelp.title', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
+                      </Typography>
+                      <Typography sx={s.advancedCopySx}>
+                        {t('node:bootstrapChainHelp.body', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
+                      </Typography>
+                      {errorBootstrapChain && (
+                        <Typography sx={s.toolErrorSx}>
+                          {errorBootstrapChain}
+                        </Typography>
+                      )}
+                    </Box>
+                    <Button
+                      onClick={bootstrapOrClearChainAndStart}
+                      size="small"
+                      variant="outlined"
+                      disabled={
+                        advancedCoreToolsDisabled ||
+                        bootstrapChainLoading ||
+                        !coreInstalledOnSystem ||
+                        stopCoreLoading
+                      }
+                      loading={bootstrapChainLoading}
+                      sx={s.toolButtonSx}
+                    >
+                      {t('node:bootstrapChainHelp.title', {
+                        postProcess: 'capitalizeFirstChar',
+                      })}
+                    </Button>
+                  </Box>
+                </Box>
+              </Collapse>
+            </Box>
           </DialogContent>
 
-          <DialogActions sx={{ p: 2 }}>
-            {onClose && !running && (
-              <Button
-                onClick={onClose}
-                disabled={
-                  disableClose ||
-                  stopCoreLoading ||
-                  actionLoading ||
-                  bootstrapLoading
-                }
-                variant="text"
-              >
-                {t('core:action.close', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </Button>
-            )}
+          <DialogActions sx={s.footerSx}>
+            <Box sx={s.footerInnerSx}>
+              {onClose && (
+                <Button
+                  onClick={onClose}
+                  disabled={
+                    disableClose ||
+                    stopCoreLoading ||
+                    actionLoading ||
+                    bootstrapChainLoading
+                  }
+                  sx={s.secondaryActionSx}
+                  variant="text"
+                >
+                  {t('node:coreSetupDialog.cancel', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </Button>
+              )}
 
-            <Button
-              onClick={() => {
-                setErrorStop('');
-                setErrorBootstrap('');
-                setErrorDeleteDB('');
-                if (onAction) {
-                  startPause.current = true;
-                  onAction();
-                  setTimeout(() => {
-                    startPause.current = false;
-                  }, 7000);
-                }
-              }}
-              color="success"
-              variant="contained"
-              disabled={!canAction || stopCoreLoading || bootstrapLoading}
-              loading={actionLoading as unknown as undefined} // if using @mui/lab LoadingButton, swap below
-            >
-              {actionLabel}
-            </Button>
+              {hasContextualAction ? (
+                <Button
+                  onClick={onContextualAction}
+                  color="success"
+                  variant="contained"
+                  disabled={
+                    contextualActionDisabled ||
+                    contextualActionLoading ||
+                    stopCoreLoading ||
+                    bootstrapChainLoading
+                  }
+                  loading={contextualActionLoading as unknown as undefined}
+                  sx={s.primaryActionSx}
+                >
+                  {contextualActionLabel}
+                </Button>
+              ) : (
+                <Button
+                  onClick={() => {
+                    setErrorStop('');
+                    setErrorBootstrapChain('');
+                    if (onAction) {
+                      startPause.current = true;
+                      onAction();
+                      setTimeout(() => {
+                        startPause.current = false;
+                      }, 7000);
+                    }
+                  }}
+                  color="success"
+                  variant="contained"
+                  disabled={
+                    !canAction || stopCoreLoading || bootstrapChainLoading
+                  }
+                  loading={actionLoading as unknown as undefined} // if using @mui/lab LoadingButton, swap below
+                  sx={s.primaryActionSx}
+                  startIcon={
+                    !running ? (
+                      <PlayArrowRoundedIcon sx={{ fontSize: 18 }} />
+                    ) : null
+                  }
+                >
+                  {actionLabel}
+                </Button>
+              )}
+            </Box>
           </DialogActions>
         </>
       )}
@@ -808,39 +1438,31 @@ export function CoreSetupDialog(props: CoreSetupDialogProps) {
         onClose={onCancel}
         aria-labelledby="alert-dialog-title"
         aria-describedby="alert-dialog-description"
+        PaperProps={{
+          sx: getDialogPaperSx(theme, { maxWidth: 420 }),
+        }}
       >
-        <DialogTitle
-          id="alert-dialog-title"
-          sx={{
-            textAlign: 'center',
-            color: theme.palette.text.primary,
-            fontWeight: 'bold',
-            opacity: 1,
-          }}
-        ></DialogTitle>
-
-        <DialogContent>
-          <DialogContentText id="alert-dialog-description">
+        <DialogTitle id="alert-dialog-title" sx={dialogTitleSx}>
+          {t('node:coreSetupDialog.confirmTitle', {
+            postProcess: 'capitalizeFirstChar',
+          })}
+        </DialogTitle>
+
+        <DialogContent sx={dialogContentSx}>
+          <DialogContentText
+            id="alert-dialog-description"
+            sx={dialogContentTextSx}
+          >
             {message?.message}
           </DialogContentText>
         </DialogContent>
 
-        <DialogActions>
+        <DialogActions sx={dialogActionsSx}>
           <Button
-            sx={{
-              backgroundColor: theme.palette.other.positive,
-              color: theme.palette.text.primary,
-              fontWeight: 'bold',
-              opacity: 0.7,
-              '&:hover': {
-                backgroundColor: theme.palette.other.positive,
-                color: 'black',
-                opacity: 1,
-              },
-            }}
             variant="contained"
             onClick={onOk}
             autoFocus
+            sx={getDialogPrimaryButtonSx(theme)}
           >
             {t('core:action.accept', {
               postProcess: 'capitalizeFirstChar',
@@ -848,19 +1470,9 @@ export function CoreSetupDialog(props: CoreSetupDialogProps) {
           </Button>
 
           <Button
-            sx={{
-              backgroundColor: theme.palette.other.danger,
-              color: 'black',
-              fontWeight: 'bold',
-              opacity: 0.7,
-              '&:hover': {
-                backgroundColor: theme.palette.other.danger,
-                color: 'black',
-                opacity: 1,
-              },
-            }}
             variant="contained"
             onClick={onCancel}
+            sx={getDialogDangerButtonSx()}
           >
             {t('core:action.decline', {
               postProcess: 'capitalizeFirstChar',
diff --git a/src/components/CoreSetupRecommendationDialog.tsx b/src/components/CoreSetupRecommendationDialog.tsx
deleted file mode 100644
index e3945bfb..00000000
--- a/src/components/CoreSetupRecommendationDialog.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  Typography,
-} from '@mui/material';
-import { useAuth } from '../hooks/useAuth';
-import { useTranslation } from 'react-i18next';
-
-export type StepStatus = 'idle' | 'active' | 'done' | 'error';
-const isElectron = !!window?.coreSetup;
-export interface StepState {
-  status: StepStatus;
-  /** 0..100; if omitted, inferred from status (done=>100, idle=>0) */
-  progress?: number;
-  /** Optional small helper text under the progress bar */
-  message?: string;
-}
-
-interface CoreSetupRecommendationDialogProps {
-  open: boolean;
-  onClose: () => void;
-  openLocalSetup: () => void;
-  setOpenCoreHandler: (val: boolean) => void;
-}
-
-export function CoreSetupRecommendationDialog(
-  props: CoreSetupRecommendationDialogProps
-) {
-  const { open, onClose, setOpenCoreHandler } = props;
-  const { handleSaveNodeInfo, authenticate } = useAuth();
-  const { t } = useTranslation(['node']);
-
-  const proceedWithPublic = async () => {
-    try {
-      await handleSaveNodeInfo(null);
-      await authenticate(true);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      onClose();
-    }
-  };
-  return (
-    <Dialog
-      open={open}
-      fullWidth
-      maxWidth="sm"
-      aria-labelledby="core-setup-title"
-    >
-      <DialogTitle id="core-setup-title">
-        {t('node:recommendation.title', {
-          postProcess: 'capitalizeFirstChar',
-        })}
-      </DialogTitle>
-      <DialogContent dividers>
-        <Typography variant="body1" gutterBottom>
-          {t('node:recommendation.description', {
-            postProcess: 'capitalizeFirstChar',
-          })}
-        </Typography>
-
-        <Typography variant="subtitle1" gutterBottom>
-          {t('node:recommendation.subTitle', {
-            postProcess: 'capitalizeFirstChar',
-          })}
-        </Typography>
-        <ul>
-          <li>
-            {' '}
-            {t('node:recommendation.point1', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </li>
-          <li>
-            {' '}
-            {t('node:recommendation.point2', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </li>
-          <li>
-            {t('node:recommendation.point3', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </li>
-        </ul>
-
-        <Typography variant="body2" color="text.secondary">
-          {t('node:recommendation.publicExplanation', {
-            postProcess: 'capitalizeFirstChar',
-          })}
-        </Typography>
-      </DialogContent>
-
-      <DialogActions sx={{ p: 2 }}>
-        <Button onClick={proceedWithPublic} variant="text">
-          {t('node:actions.continuePublic', {
-            postProcess: 'capitalizeFirstChar',
-          })}
-        </Button>
-        {isElectron ? (
-          <Button
-            onClick={() => {
-              setOpenCoreHandler(true);
-              onClose();
-            }}
-            color="success"
-            variant="contained"
-          >
-            {t('node:actions.openSetup', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Button>
-        ) : (
-          <Button
-            onClick={() => {
-              window.open('https://qortal.dev/downloads', '_system');
-              onClose();
-            }}
-            color="success"
-            variant="contained"
-          >
-            {t('node:actions.goToDownloads', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Button>
-        )}
-      </DialogActions>
-    </Dialog>
-  );
-}
diff --git a/src/components/CoreSetupResetApikeyDialog.tsx b/src/components/CoreSetupResetApikeyDialog.tsx
index c963f26e..13b970e7 100644
--- a/src/components/CoreSetupResetApikeyDialog.tsx
+++ b/src/components/CoreSetupResetApikeyDialog.tsx
@@ -1,11 +1,12 @@
 import {
+  Box,
   Button,
   Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
-  TextField,
   Typography,
+  useTheme,
 } from '@mui/material';
 import { useAuth } from '../hooks/useAuth';
 import { useAtom, useSetAtom } from 'jotai';
@@ -17,6 +18,18 @@ import {
 import { useTranslation } from 'react-i18next';
 import { getDefaultLocalNodeUrl } from '../constants/constants';
 import { useState } from 'react';
+import { AuthInput, AuthSectionLabel } from './Auth/AuthShell';
+import {
+  dialogActionsSx,
+  dialogContentSx,
+  dialogContentTextSx,
+  dialogInfoCardSx,
+  dialogModalBackdropSx,
+  dialogTitleSx,
+  getDialogPaperSx,
+  getDialogPrimaryButtonSx,
+  getDialogSecondaryButtonSx,
+} from './App/dialogSurface';
 
 const isElectron = !!window?.coreSetup;
 
@@ -29,6 +42,7 @@ export function CoreSetupResetApikeyDialog() {
     handleSaveNodeInfo,
   } = useAuth();
   const { t } = useTranslation(['node', 'core']);
+  const theme = useTheme();
   const [newApiKey, setNewApiKey] = useState('');
   const setOpenSnackGlobal = useSetAtom(openSnackGlobalAtom);
   const setInfoSnackCustom = useSetAtom(infoSnackGlobalAtom);
@@ -75,27 +89,43 @@ export function CoreSetupResetApikeyDialog() {
         fullWidth
         maxWidth="sm"
         aria-labelledby="core-setup-title"
+        slotProps={{
+          backdrop: { sx: dialogModalBackdropSx },
+        }}
+        PaperProps={{
+          sx: getDialogPaperSx(theme, { maxWidth: 460 }),
+        }}
       >
-        <DialogTitle id="core-setup-title">
+        <DialogTitle id="core-setup-title" sx={dialogTitleSx}>
           {t('node:invalidKey.title', {
             postProcess: 'capitalizeFirstChar',
           })}
         </DialogTitle>
-        <DialogContent dividers>
-          <Typography variant="body1" gutterBottom>
-            {t('node:invalidKey.description', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Typography>
-          <TextField
-            placeholder="Apikey"
-            value={newApiKey}
-            onChange={(e) => setNewApiKey(e.target.value)}
-          />
+        <DialogContent sx={dialogContentSx}>
+          <Box sx={dialogInfoCardSx}>
+            <Typography sx={dialogContentTextSx}>
+              {t('node:invalidKey.description', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+            </Typography>
+          </Box>
+          <Box sx={{ mt: 1.75 }}>
+            <AuthSectionLabel>API key</AuthSectionLabel>
+            <AuthInput
+              autoFocus
+              placeholder="Apikey"
+              value={newApiKey}
+              onChange={(e) => setNewApiKey(e.target.value)}
+            />
+          </Box>
         </DialogContent>
 
-        <DialogActions sx={{ p: 2 }}>
-          <Button onClick={() => setOpen(false)} variant="text">
+        <DialogActions sx={dialogActionsSx}>
+          <Button
+            onClick={() => setOpen(false)}
+            variant="outlined"
+            sx={getDialogSecondaryButtonSx(theme)}
+          >
             {t('core:action.close', {
               postProcess: 'capitalizeFirstChar',
             })}
@@ -106,8 +136,8 @@ export function CoreSetupResetApikeyDialog() {
             onClick={() => {
               insertApikeyFunc();
             }}
-            color="success"
             variant="contained"
+            sx={getDialogPrimaryButtonSx(theme)}
           >
             {t('node:actions.resetKey', {
               postProcess: 'capitalizeFirstChar',
@@ -123,23 +153,34 @@ export function CoreSetupResetApikeyDialog() {
       fullWidth
       maxWidth="sm"
       aria-labelledby="core-setup-title"
+      slotProps={{
+        backdrop: { sx: dialogModalBackdropSx },
+      }}
+      PaperProps={{
+        sx: getDialogPaperSx(theme, { maxWidth: 460 }),
+      }}
     >
-      <DialogTitle id="core-setup-title">
-        {' '}
+      <DialogTitle id="core-setup-title" sx={dialogTitleSx}>
         {t('node:invalidKey.title', {
           postProcess: 'capitalizeFirstChar',
         })}
       </DialogTitle>
-      <DialogContent dividers>
-        <Typography variant="body1" gutterBottom>
-          {t('node:invalidKey.resetDescription', {
-            postProcess: 'capitalizeFirstChar',
-          })}
-        </Typography>
+      <DialogContent sx={dialogContentSx}>
+        <Box sx={dialogInfoCardSx}>
+          <Typography sx={dialogContentTextSx}>
+            {t('node:invalidKey.resetDescription', {
+              postProcess: 'capitalizeFirstChar',
+            })}
+          </Typography>
+        </Box>
       </DialogContent>
 
-      <DialogActions sx={{ p: 2 }}>
-        <Button onClick={() => setOpen(false)} variant="text">
+      <DialogActions sx={dialogActionsSx}>
+        <Button
+          onClick={() => setOpen(false)}
+          variant="outlined"
+          sx={getDialogSecondaryButtonSx(theme)}
+        >
           {t('core:action.close', {
             postProcess: 'capitalizeFirstChar',
           })}
@@ -149,8 +190,8 @@ export function CoreSetupResetApikeyDialog() {
           onClick={() => {
             resetApikeyFunc();
           }}
-          color="success"
           variant="contained"
+          sx={getDialogPrimaryButtonSx(theme)}
         >
           {t('node:actions.resetKey', {
             postProcess: 'capitalizeFirstChar',
diff --git a/src/components/CoreSyncStatus.tsx b/src/components/CoreSyncStatus.tsx
index 479b2f29..8b8a7518 100644
--- a/src/components/CoreSyncStatus.tsx
+++ b/src/components/CoreSyncStatus.tsx
@@ -2,21 +2,30 @@ import { useEffect, useState } from 'react';
 import syncedImg from '../assets/syncStatus/synced.webp';
 import syncedMintingImg from '../assets/syncStatus/synced_minting.webp';
 import syncingImg from '../assets/syncStatus/syncing.webp';
-import { getBaseApiReact } from '../App';
 import '../styles/CoreSyncStatus.css';
 import { Box, useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { manifestData } from './NotAuthenticated';
-import { useAtom } from 'jotai';
-import { nodeInfosAtom } from '../atoms/global';
+import { useAtomValue } from 'jotai';
+import { nodeInfosAtom, selectedNodeInfoAtom } from '../atoms/global';
 import { nodeDisplay } from '../utils/helpers';
-import { isLocalNodeUrl } from '../constants/constants';
-
-export const CoreSyncStatus = () => {
-  const [nodeInfos] = useAtom(nodeInfosAtom);
+import {
+  HTTPS_EXT_NODE_QORTAL_LINK,
+  isLocalNodeUrl,
+} from '../constants/constants';
+
+export const CoreSyncStatus = ({
+  renderIcon,
+  useExternalTooltip = false,
+}: {
+  renderIcon?: React.ReactNode;
+  useExternalTooltip?: boolean;
+}) => {
+  const nodeInfos = useAtomValue(nodeInfosAtom);
+  const selectedNode = useAtomValue(selectedNodeInfoAtom);
   const [coreInfos, setCoreInfos] = useState({});
 
-  const [nodeBase, setNodeBase] = useState(getBaseApiReact());
+  const nodeBase = selectedNode?.url || HTTPS_EXT_NODE_QORTAL_LINK;
   const isUsingGateway = nodeBase?.includes('ext-node.qortal.link') ?? false;
   const { t } = useTranslation([
     'auth',
@@ -28,9 +37,10 @@ export const CoreSyncStatus = () => {
   const theme = useTheme();
 
   useEffect(() => {
+    let canceled = false;
     const getCoreInfos = async () => {
       try {
-        const url = `${getBaseApiReact()}/admin/info`;
+        const url = `${nodeBase}/admin/info`;
         const response = await fetch(url, {
           method: 'GET',
           headers: {
@@ -38,20 +48,29 @@ export const CoreSyncStatus = () => {
           },
         });
         const data = await response.json();
-        setCoreInfos(data);
+        if (!canceled) {
+          setCoreInfos(data);
+        }
       } catch (error) {
         console.error('Request failed', error);
+        if (!canceled) {
+          setCoreInfos({});
+        }
       }
     };
 
+    setCoreInfos({});
     getCoreInfos();
 
     const interval = setInterval(() => {
       getCoreInfos();
     }, 30000);
 
-    return () => clearInterval(interval);
-  }, []);
+    return () => {
+      canceled = true;
+      clearInterval(interval);
+    };
+  }, [nodeBase]);
 
   const renderSyncStatusIcon = () => {
     const {
@@ -95,83 +114,97 @@ export const CoreSyncStatus = () => {
       }
     }
 
+    const iconNode = renderIcon || (
+      <img
+        src={imagePath}
+        style={{ height: 'auto', width: '35px' }}
+        alt="sync status"
+      />
+    );
+
+    const panelNode = (
+      <Box
+        className="core-panel"
+        style={{
+          right: 'unset',
+          left: 'calc(100% + 16px)',
+          top: '0px',
+        }}
+      >
+        <h3>
+          {t('core:core.information', { postProcess: 'capitalizeFirstChar' })}
+        </h3>
+
+        <h4 className="lineHeight">
+          {t('core:core.version', { postProcess: 'capitalizeFirstChar' })}:{' '}
+          <span style={{ color: '#03a9f4' }}>{buildVersion}</span>
+        </h4>
+
+        <h4 className="lineHeight">{message}</h4>
+
+        <h4 className="lineHeight">
+          {t('core:core.block_height', {
+            postProcess: 'capitalizeFirstChar',
+          })}
+          : <span style={{ color: '#03a9f4' }}>{height || ''}</span>
+        </h4>
+
+        <h4 className="lineHeight">
+          {t('core:core.peers', { postProcess: 'capitalizeFirstChar' })}:{' '}
+          <span style={{ color: '#03a9f4' }}>
+            {numberOfConnections || ''}
+          </span>
+        </h4>
+
+        <h4 className="lineHeight">
+          {t('core:core.data_peers', { postProcess: 'capitalizeFirstChar' })}:{' '}
+          <span style={{ color: '#03a9f4' }}>
+            {numberOfDataConnections || ''}
+          </span>
+        </h4>
+
+        <h4 className="lineHeight">
+          {t('auth:node.using', {
+            postProcess: 'capitalizeFirstChar',
+          })}
+          :{' '}
+          <span
+            style={{
+              color: '#03a9f4',
+              ...(isLocalNodeUrl(nodeBase) && {
+                fontWeight: 'bold',
+                color: theme.palette.other.positive,
+              }),
+            }}
+          >
+            {nodeDisplay(nodeBase)}
+          </span>
+        </h4>
+
+        <h4 className="lineHeight">
+          {t('core:ui.version', { postProcess: 'capitalizeFirstChar' })}:{' '}
+          <span style={{ color: '#03a9f4' }}>{manifestData.version}</span>
+        </h4>
+      </Box>
+    );
+
+    if (useExternalTooltip) {
+      return (
+        <>
+          <span>{iconNode}</span>
+          {panelNode}
+        </>
+      );
+    }
+
     return (
       <Box
         className="tooltip"
         data-theme={theme.palette.mode}
         style={{ display: 'inline' }}
       >
-        <span>
-          <img
-            src={imagePath}
-            style={{ height: 'auto', width: '35px' }}
-            alt="sync status"
-          />
-        </span>
-
-        <Box
-          className="core-panel"
-          style={{
-            right: 'unset',
-            left: '55px',
-            top: '10px',
-          }}
-        >
-          <h3>
-            {t('core:core.information', { postProcess: 'capitalizeFirstChar' })}
-          </h3>
-
-          <h4 className="lineHeight">
-            {t('core:core.version', { postProcess: 'capitalizeFirstChar' })}:{' '}
-            <span style={{ color: '#03a9f4' }}>{buildVersion}</span>
-          </h4>
-
-          <h4 className="lineHeight">{message}</h4>
-
-          <h4 className="lineHeight">
-            {t('core:core.block_height', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            : <span style={{ color: '#03a9f4' }}>{height || ''}</span>
-          </h4>
-
-          <h4 className="lineHeight">
-            {t('core:core.peers', { postProcess: 'capitalizeFirstChar' })}:{' '}
-            <span style={{ color: '#03a9f4' }}>
-              {numberOfConnections || ''}
-            </span>
-          </h4>
-
-          <h4 className="lineHeight">
-            {t('core:core.data_peers', { postProcess: 'capitalizeFirstChar' })}:{' '}
-            <span style={{ color: '#03a9f4' }}>
-              {numberOfDataConnections || ''}
-            </span>
-          </h4>
-
-          <h4 className="lineHeight">
-            {t('auth:node.using', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            :{' '}
-            <span
-              style={{
-                color: '#03a9f4',
-                ...(isLocalNodeUrl(nodeBase) && {
-                  fontWeight: 'bold',
-                  color: theme.palette.other.positive,
-                }),
-              }}
-            >
-              {nodeDisplay(nodeBase)}
-            </span>
-          </h4>
-
-          <h4 className="lineHeight">
-            {t('core:ui.version', { postProcess: 'capitalizeFirstChar' })}:{' '}
-            <span style={{ color: '#03a9f4' }}>{manifestData.version}</span>
-          </h4>
-        </Box>
+        <span>{iconNode}</span>
+        {panelNode}
       </Box>
     );
   };
diff --git a/src/components/CoreSyncing.tsx b/src/components/CoreSyncing.tsx
index 5dc70d1c..56451624 100644
--- a/src/components/CoreSyncing.tsx
+++ b/src/components/CoreSyncing.tsx
@@ -7,18 +7,33 @@ import {
   DialogContent,
   DialogTitle,
   Typography,
+  useTheme,
 } from '@mui/material';
 import { useAuth } from '../hooks/useAuth';
 import { useAtom } from 'jotai';
 import { isOpenSyncingDialogAtom } from '../atoms/global';
 
 import { useTranslation } from 'react-i18next';
-import { getDefaultLocalNodeUrl } from '../constants/constants';
+import {
+  getDefaultLocalNodeUrl,
+  HTTP_LOCALHOST_12391,
+} from '../constants/constants';
 import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  dialogActionsSx,
+  dialogContentSx,
+  dialogContentTextSx,
+  dialogInfoCardSx,
+  dialogTitleSx,
+  getDialogPaperSx,
+  getDialogPrimaryButtonSx,
+  getDialogSecondaryButtonSx,
+} from './App/dialogSurface';
 
 export function CoreSyncing() {
   const { authenticate, handleSaveNodeInfo } = useAuth();
   const { t } = useTranslation(['node', 'core']);
+  const theme = useTheme();
   const [canContinue, setCanContinue] = useState(false);
   const [open, setOpen] = useAtom(isOpenSyncingDialogAtom);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
@@ -101,38 +116,48 @@ export function CoreSyncing() {
       fullWidth
       maxWidth="sm"
       aria-labelledby="core-setup-title"
+      PaperProps={{
+        sx: getDialogPaperSx(theme, { maxWidth: 500 }),
+      }}
     >
       {!canContinue && (
         <>
-          <DialogTitle id="core-setup-title">
+          <DialogTitle id="core-setup-title" sx={dialogTitleSx}>
             {t('node:sync.not_synchronized', {
               postProcess: 'capitalizeEachFirstChar',
             })}
           </DialogTitle>
-          <DialogContent dividers>
-            <Typography variant="body1" gutterBottom>
-              {blocksBehind > 0 &&
-                t('node:sync.behind', {
-                  count: Number(blocksBehind.toFixed(0)),
-                })}{' '}
-              {t('node:sync.waiting')}{' '}
-              <CircularProgress size="1.2rem" color="primary" />
+          <DialogContent sx={dialogContentSx}>
+            <Box sx={dialogInfoCardSx}>
+              <Typography sx={dialogContentTextSx}>
+                {blocksBehind > 0 &&
+                  t('node:sync.behind', {
+                    count: Number(blocksBehind.toFixed(0)),
+                  })}{' '}
+                {t('node:sync.waiting')}{' '}
+                <CircularProgress
+                  size="1.05rem"
+                  color="primary"
+                  sx={{ ml: 0.35, verticalAlign: 'middle' }}
+                />
+              </Typography>
+            </Box>
+            <Typography sx={{ ...dialogContentTextSx, mt: 1.45 }}>
+              {t('node:sync.description')}
             </Typography>
-            <Typography>{t('node:sync.description')}</Typography>
             <Box
               sx={{
-                width: '100%',
                 display: 'flex',
-                justifyContent: 'center',
-                marginTop: '15px',
+                justifyContent: 'flex-start',
+                mt: 1.75,
               }}
             >
               <Button
                 onClick={() => {
                   handleContinue(true);
                 }}
-                color="primary"
                 variant="contained"
+                sx={getDialogPrimaryButtonSx(theme)}
               >
                 {t('node:actions.continuePublic', {
                   postProcess: 'capitalizeFirstChar',
@@ -145,28 +170,31 @@ export function CoreSyncing() {
 
       {canContinue && (
         <>
-          <DialogTitle id="core-setup-title">
+          <DialogTitle id="core-setup-title" sx={dialogTitleSx}>
             {t('node:sync.synchronized', {
               postProcess: 'capitalizeEachFirstChar',
             })}
           </DialogTitle>
-          <DialogContent dividers>
-            <Typography variant="body1" gutterBottom>
-              {t('node:sync.synchronized_desc', {
-                postProcess: 'capitalizeFirstWord',
-              })}
-            </Typography>
+          <DialogContent sx={dialogContentSx}>
+            <Box sx={dialogInfoCardSx}>
+              <Typography sx={dialogContentTextSx}>
+                {t('node:sync.synchronized_desc', {
+                  postProcess: 'capitalizeFirstWord',
+                })}
+              </Typography>
+            </Box>
           </DialogContent>
         </>
       )}
 
-      <DialogActions sx={{ p: 2 }}>
+      <DialogActions sx={dialogActionsSx}>
         <Button
           onClick={() => {
             setOpen(false);
             cleanUp();
           }}
-          variant="text"
+          variant="outlined"
+          sx={getDialogSecondaryButtonSx(theme)}
         >
           {t('core:action.close', {
             postProcess: 'capitalizeFirstChar',
@@ -177,8 +205,8 @@ export function CoreSyncing() {
           onClick={() => {
             handleContinue();
           }}
-          color="success"
           variant="contained"
+          sx={getDialogPrimaryButtonSx(theme)}
         >
           {t('node:actions.continueLocal', {
             postProcess: 'capitalizeFirstChar',
diff --git a/src/components/CoreUrlInvalid.tsx b/src/components/CoreUrlInvalid.tsx
index 3a4c699c..755eada4 100644
--- a/src/components/CoreUrlInvalid.tsx
+++ b/src/components/CoreUrlInvalid.tsx
@@ -5,14 +5,24 @@ import {
   DialogContent,
   DialogTitle,
   Typography,
+  useTheme,
 } from '@mui/material';
 import { useAtom } from 'jotai';
 import { isOpenUrlInvalidAtom } from '../atoms/global';
 
 import { useTranslation } from 'react-i18next';
+import {
+  dialogActionsSx,
+  dialogContentSx,
+  dialogContentTextSx,
+  dialogTitleSx,
+  getDialogPaperSx,
+  getDialogSecondaryButtonSx,
+} from './App/dialogSurface';
 
 export function CoreUrlInvalid() {
   const { t } = useTranslation(['node', 'core']);
+  const theme = useTheme();
   const [open, setOpen] = useAtom(isOpenUrlInvalidAtom);
 
   return (
@@ -21,26 +31,30 @@ export function CoreUrlInvalid() {
       fullWidth
       maxWidth="sm"
       aria-labelledby="core-setup-title"
+      PaperProps={{
+        sx: getDialogPaperSx(theme, { maxWidth: 460 }),
+      }}
     >
-      <DialogTitle id="core-setup-title">
+      <DialogTitle id="core-setup-title" sx={dialogTitleSx}>
         {t('node:url.title', {
           postProcess: 'capitalizeEachFirstChar',
         })}
       </DialogTitle>
-      <DialogContent dividers>
-        <Typography variant="body1" gutterBottom>
+      <DialogContent sx={dialogContentSx}>
+        <Typography sx={dialogContentTextSx}>
           {t('node:url.description', {
             postProcess: 'capitalizeFirstWord',
           })}
         </Typography>
       </DialogContent>
 
-      <DialogActions sx={{ p: 2 }}>
+      <DialogActions sx={dialogActionsSx}>
         <Button
           onClick={() => {
             setOpen(false);
           }}
-          variant="text"
+          variant="outlined"
+          sx={getDialogSecondaryButtonSx(theme)}
         >
           {t('core:action.close', {
             postProcess: 'capitalizeFirstChar',
diff --git a/src/components/CustomNodeApikeyDialog.tsx b/src/components/CustomNodeApikeyDialog.tsx
index 8f4a31a1..16b140bd 100644
--- a/src/components/CustomNodeApikeyDialog.tsx
+++ b/src/components/CustomNodeApikeyDialog.tsx
@@ -1,35 +1,39 @@
 import {
-  Button,
+  Box,
+  ButtonBase,
   Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  TextField,
+  IconButton,
   Typography,
+  useTheme,
 } from '@mui/material';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import KeyRoundedIcon from '@mui/icons-material/KeyRounded';
 import { useAuth } from '../hooks/useAuth';
 import { useAtom } from 'jotai';
 import {
   isOpenDialogCustomApikey,
   selectedNodeInfoAtom,
 } from '../atoms/global';
-import { Label } from '../styles/App-styles';
-import { Spacer } from '../common/Spacer';
 import { useTranslation } from 'react-i18next';
 import { ApiKey } from '../types/auth';
 import { useEffect, useState } from 'react';
+import { AuthButton, AuthInput, AuthSectionLabel } from './Auth/AuthShell';
+import { dialogModalBackdropSx } from './App/dialogSurface';
 
 export function CustomNodeApikeyDialog() {
   const { validateApiKey, handleSaveNodeInfo, authenticate, saveCustomNodes } =
     useAuth();
   const { t } = useTranslation(['node', 'core']);
+  const theme = useTheme();
 
   const [apikey, setApikey] = useState('');
   const [open, setOpen] = useAtom(isOpenDialogCustomApikey);
-  const [selectedNode, setSelectedNode] = useAtom(selectedNodeInfoAtom);
+  const [selectedNode] = useAtom(selectedNodeInfoAtom);
   const [message, setMessage] = useState('');
-  const setCustomNodes = (nodes) => {
-    window.sendMessage('setCustomNodes', nodes).catch((error) => {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const setCustomNodes = async (nodes) => {
+    return window.sendMessage('setCustomNodes', nodes).catch((error) => {
       console.error(error);
     });
   };
@@ -49,12 +53,21 @@ export function CustomNodeApikeyDialog() {
     }
   }, [selectedNode]);
 
+  const closeDialog = () => {
+    setMessage('');
+    setOpen(false);
+  };
+
   const handleContinue = async () => {
+    if (isSubmitting) return;
+
     try {
+      setIsSubmitting(true);
       setMessage('');
       const payload: ApiKey = {
         url: selectedNode?.url as string,
         apikey,
+        name: selectedNode?.name || '',
       };
       const { isValid } = await validateApiKey(payload);
       if (isValid) {
@@ -64,9 +77,12 @@ export function CustomNodeApikeyDialog() {
           (n) => n?.url === selectedNode?.url
         );
         if (findNode !== -1) {
+          payload.name = payload.name || copyCustomNodes[findNode]?.name || '';
           copyCustomNodes.splice(findNode, 1, payload);
-          setCustomNodes(copyCustomNodes);
+        } else {
+          copyCustomNodes.push(payload);
         }
+        await setCustomNodes(copyCustomNodes);
 
         await handleSaveNodeInfo(payload);
         await saveCustomNodes(payload);
@@ -82,55 +98,176 @@ export function CustomNodeApikeyDialog() {
       );
     } catch (error) {
       console.error(error);
+    } finally {
+      setIsSubmitting(false);
     }
   };
+
   return (
     <Dialog
       open={open}
+      onClose={closeDialog}
       fullWidth
       maxWidth="sm"
-      aria-labelledby="core-setup-title"
+      aria-labelledby="custom-api-key-title"
+      slotProps={{
+        backdrop: { sx: dialogModalBackdropSx },
+        paper: {
+          sx: {
+            backgroundColor: '#0d1117',
+            backgroundImage:
+              'linear-gradient(180deg, #121821 0%, #0d1117 100%)',
+            border: '1px solid rgba(255,255,255,0.08)',
+            borderRadius: '10px',
+            boxShadow: '0 24px 50px rgba(0,0,0,0.34)',
+            maxWidth: '460px',
+          },
+        },
+      }}
     >
-      <DialogTitle id="core-setup-title">
-        {t('node:invalidKey.title', {
-          postProcess: 'capitalizeFirstChar',
-        })}
-      </DialogTitle>
-      <DialogContent dividers>
-        <Typography variant="body1" gutterBottom>
-          {t('node:invalidKey.description', {
+      <Box
+        sx={{
+          alignItems: 'center',
+          display: 'flex',
+          justifyContent: 'space-between',
+          px: 2.4,
+          py: 1.8,
+        }}
+      >
+        <Box sx={{ width: 40 }} />
+        <Typography
+          id="custom-api-key-title"
+          sx={{
+            flex: 1,
+            fontSize: '1.08rem',
+            fontWeight: 700,
+            textAlign: 'center',
+          }}
+        >
+          {t('node:invalidKey.title', {
             postProcess: 'capitalizeFirstChar',
           })}
         </Typography>
-        <Spacer height="20px" />
-        <Label>Node</Label>
-        <TextField value={selectedNode?.url} disabled={true} />
-        <Spacer height="20px" />
-        <Label>apikey</Label>
-        <TextField value={apikey} onChange={(e) => setApikey(e.target.value)} />
-        <Spacer height="40px" />
-        {message && <Typography>Error: {message}</Typography>}
-      </DialogContent>
+        <IconButton
+          onClick={closeDialog}
+          sx={{ color: theme.palette.text.secondary }}
+        >
+          <CloseRoundedIcon sx={{ fontSize: 20 }} />
+        </IconButton>
+      </Box>
 
-      <DialogActions sx={{ p: 2 }}>
-        <Button onClick={() => setOpen(false)} variant="text">
-          {t('core:action.close', {
-            postProcess: 'capitalizeFirstChar',
-          })}
-        </Button>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 1.35,
+          px: 2.4,
+          pb: 2.4,
+        }}
+      >
+        <Box
+          sx={{
+            alignItems: 'center',
+            backgroundColor: 'rgba(62,107,214,0.08)',
+            border: '1px solid rgba(92,145,255,0.14)',
+            borderRadius: '8px',
+            display: 'flex',
+            gap: 1,
+            px: 1.2,
+            py: 1,
+          }}
+        >
+          <KeyRoundedIcon
+            sx={{ color: theme.palette.primary.main, fontSize: 20 }}
+          />
+          <Typography
+            sx={{
+              color: 'rgba(214,221,233,0.72)',
+              fontSize: '0.86rem',
+              lineHeight: 1.45,
+            }}
+          >
+            {t('node:invalidKey.description', {
+              postProcess: 'capitalizeFirstChar',
+            })}
+          </Typography>
+        </Box>
+
+        <Box>
+          <AuthSectionLabel>Node</AuthSectionLabel>
+          <AuthInput
+            value={selectedNode?.url || ''}
+            disabled
+            sx={{
+              '& .MuiInputBase-input.Mui-disabled': {
+                WebkitTextFillColor: 'rgba(214,221,233,0.46)',
+              },
+            }}
+          />
+        </Box>
 
-        <Button
-          onClick={() => {
-            handleContinue();
+        <Box>
+          <AuthSectionLabel>API key</AuthSectionLabel>
+          <AuthInput
+            autoFocus
+            value={apikey}
+            onChange={(e) => setApikey(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                handleContinue();
+              }
+            }}
+          />
+        </Box>
+
+        {message && (
+          <Typography
+            sx={{
+              color: '#D8BA8A',
+              fontSize: '0.8rem',
+              lineHeight: 1.45,
+            }}
+          >
+            {message}
+          </Typography>
+        )}
+
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'space-between',
+            mt: 0.6,
           }}
-          color="success"
-          variant="contained"
         >
-          {t('node:actions.continue', {
-            postProcess: 'capitalizeFirstChar',
-          })}
-        </Button>
-      </DialogActions>
+          <ButtonBase
+            onClick={closeDialog}
+            sx={{
+              color: theme.palette.text.secondary,
+              fontSize: '0.86rem',
+              fontWeight: 700,
+              minHeight: 34,
+              px: 0.3,
+              '&:hover': {
+                color: theme.palette.text.primary,
+              },
+            }}
+          >
+            {t('core:action.close', {
+              postProcess: 'capitalizeFirstChar',
+            })}
+          </ButtonBase>
+          <AuthButton
+            disabled={isSubmitting}
+            onClick={handleContinue}
+            fullWidth={false}
+          >
+            {t('node:actions.continue', {
+              postProcess: 'capitalizeFirstChar',
+            })}
+          </AuthButton>
+        </Box>
+      </Box>
     </Dialog>
   );
 }
diff --git a/src/components/Desktop/CustomTitleBar.tsx b/src/components/Desktop/CustomTitleBar.tsx
index 081a6e7e..0c3bd3bc 100644
--- a/src/components/Desktop/CustomTitleBar.tsx
+++ b/src/components/Desktop/CustomTitleBar.tsx
@@ -10,21 +10,8 @@ import MenuIcon from '@mui/icons-material/Menu';
 import RemoveIcon from '@mui/icons-material/Remove';
 import CropSquareIcon from '@mui/icons-material/CropSquare';
 import FilterNoneIcon from '@mui/icons-material/FilterNone';
-import LogoutIcon from '@mui/icons-material/Logout';
-import SettingsIcon from '@mui/icons-material/Settings';
-import PersonSearchIcon from '@mui/icons-material/PersonSearch';
-import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
-import EngineeringIcon from '@mui/icons-material/Engineering';
-import HelpIcon from '@mui/icons-material/Help';
-import DownloadIcon from '@mui/icons-material/Download';
 import QortalLogo from '../../assets/svgs/Logo1Dark.svg';
 import { WalletIcon } from '../../assets/Icons/WalletIcon';
-import { QMailStatus } from '../QMailStatus';
-import { GeneralNotifications } from '../GeneralNotifications';
-import { Save } from '../Save/Save';
-import { TaskManager } from '../TaskManager/TaskManager';
-import { GlobalActions } from '../GlobalActions/GlobalActions';
-import { ChatWidgetReopenIcon } from '../Profile/ChatWidgetReopenIcon';
 
 const TITLE_BAR_HEIGHT = 32;
 export const APP_NAV_BAR_HEIGHT = 48;
@@ -43,6 +30,9 @@ declare global {
       windowMaximize?: () => Promise<void>;
       windowClose?: () => Promise<void>;
       getWindowState?: () => Promise<{ isMaximized: boolean }>;
+      onWindowStateChange?: (
+        callback: (state: { isMaximized: boolean }) => void
+      ) => () => void;
       getPlatform?: () => Promise<string>;
       showAppMenu?: (x?: number, y?: number) => Promise<void>;
     };
@@ -62,7 +52,6 @@ export type CustomTitleBarRightNavProps = {
   onOpenSettings: () => void;
   onOpenDrawerLookup: () => void;
   onOpenWalletsApp: () => void;
-  onOpenDrawerProfile: () => void;
   onLogout: () => void;
   getUserInfo: (useTimer?: boolean) => Promise<void>;
   onOpenMinting: () => void;
@@ -127,10 +116,11 @@ export function CustomTitleBar(props?: {
   }, [isElectron, refreshMaximized]);
 
   useEffect(() => {
-    if (!isElectron || typeof window.electronAPI?.getWindowState !== 'function')
+    if (!isElectron || typeof window.electronAPI?.onWindowStateChange !== 'function')
       return;
-    const interval = setInterval(refreshMaximized, 500);
-    return () => clearInterval(interval);
+    return window.electronAPI.onWindowStateChange((state) => {
+      setIsMaximized(Boolean(state?.isMaximized));
+    });
   }, [isElectron, refreshMaximized]);
 
   const handleMinimize = useCallback(() => {
@@ -158,10 +148,22 @@ export function CustomTitleBar(props?: {
   }, [platform, refreshMaximized]);
 
   const bg =
-    theme.palette.mode === 'dark' ? '#27282c' : theme.palette.background.paper;
-  const borderColor = theme.palette.divider;
+    theme.palette.mode === 'dark'
+      ? 'rgba(34, 37, 43, 0.97)'
+      : theme.palette.background.paper;
+  const borderColor =
+    theme.palette.mode === 'dark'
+      ? theme.palette.border.subtle
+      : theme.palette.divider;
   const controlColor = theme.palette.text.secondary;
-  const controlHover = theme.palette.action.hover;
+  const controlHover =
+    theme.palette.mode === 'dark'
+      ? 'rgba(255, 255, 255, 0.09)'
+      : theme.palette.action.hover;
+  const toolbarShadow =
+    theme.palette.mode === 'dark'
+      ? '0 1px 0 rgba(255,255,255,0.05), 0 10px 20px rgba(0,0,0,0.14)'
+      : '0 1px 0 rgba(15,23,42,0.06), 0 6px 14px rgba(15,23,42,0.05)';
 
   const macColors = {
     close: '#ff5f57',
@@ -308,7 +310,13 @@ export function CustomTitleBar(props?: {
         height: TITLE_BAR_HEIGHT,
         padding: 0,
         WebkitAppRegion: 'no-drag',
+        transition:
+          'background-color 140ms ease, color 140ms ease, transform 120ms ease',
         '&:hover': { backgroundColor: controlHover },
+        '&:focus-visible': {
+          outline: `1px solid ${theme.palette.primary.main}`,
+          outlineOffset: '-1px',
+        },
       }}
       aria-label="Application menu"
     >
@@ -367,258 +375,17 @@ export function CustomTitleBar(props?: {
     </span>
   );
 
-  const navIconSx = {
-    color: controlColor,
-    width: 32,
-    height: 32,
-    borderRadius: 1,
-    '&:hover': { backgroundColor: controlHover },
-  };
-
-  /** Uniform 32x32 cell for widgets so all title-bar icons align; scales inner icons to 20px */
-  const navCellSx = {
-    width: 32,
-    height: 32,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-    overflow: 'hidden',
-    '& .MuiSvgIcon-root': { fontSize: 20 },
-    '& .MuiIconButton-root': { width: 32, height: 32, padding: 0, minWidth: 0 },
-    '& svg': { width: 20, height: 20 },
-  };
-
-  const navSectionSx = {
-    alignItems: 'center' as const,
-    display: 'flex',
-    flexShrink: 0,
-    gap: 0.5,
-    height: '100%',
-    pl: 0.5,
-    pr: 0.5,
-    ...(isElectron && { WebkitAppRegion: 'no-drag' as const }),
-  };
-
-  const leftNavSection = rightNav && (
-    <Box sx={navSectionSx}>
-      <Tooltip
-        title={tooltipTitle(t('core:settings'))}
-        placement="bottom"
-        arrow
-        slotProps={tooltipSlotProps(theme)}
-      >
-        <IconButton
-          {...titleBarIconButtonProps}
-          size="small"
-          onClick={rightNav.onOpenSettings}
-          sx={navIconSx}
-          aria-label={t('core:settings')}
-        >
-          <SettingsIcon sx={{ fontSize: 20 }} />
-        </IconButton>
-      </Tooltip>
-      <Tooltip
-        title={tooltipTitle(
-          t('core:user_lookup', { postProcess: 'capitalizeAll' })
-        )}
-        placement="bottom"
-        arrow
-        slotProps={tooltipSlotProps(theme)}
-      >
-        <IconButton
-          {...titleBarIconButtonProps}
-          size="small"
-          onClick={rightNav.onOpenDrawerLookup}
-          sx={navIconSx}
-          aria-label={t('core:user_lookup')}
-        >
-          <PersonSearchIcon sx={{ fontSize: 20 }} />
-        </IconButton>
-      </Tooltip>
-      <Tooltip
-        title={tooltipTitle(t('core:wallet.wallet_other'))}
-        placement="bottom"
-        arrow
-        slotProps={tooltipSlotProps(theme)}
-      >
-        <IconButton
-          {...titleBarIconButtonProps}
-          size="small"
-          onClick={rightNav.onOpenWalletsApp}
-          sx={navIconSx}
-          aria-label={t('core:wallet.wallet_other')}
-        >
-          <AccountBalanceWalletIcon sx={{ fontSize: 20 }} />
-        </IconButton>
-      </Tooltip>
-
-      <Box sx={{ width: 2 }} />
-      <QMailStatus compact />
-      {rightNav.extState === 'authenticated' && (
-        <Box sx={navCellSx}>
-          <GeneralNotifications
-            address={rightNav.userInfo?.address}
-            tooltipPlacement="bottom"
-          />
-        </Box>
-      )}
-      <Box sx={{ width: 2 }} />
-      <Tooltip
-        title={tooltipTitle(
-          t('core:action.save', { postProcess: 'capitalizeFirstChar' })
-        )}
-        placement="bottom"
-        arrow
-        slotProps={tooltipSlotProps(theme)}
-      >
-        <Box component="span">
-          <Save
-            isDesktop
-            disableWidth={false}
-            myName={rightNav.userInfo?.name}
-          />
-        </Box>
-      </Tooltip>
-      <Box sx={{ width: 2 }} />
-      {rightNav.desktopViewMode !== 'home' && (
-        <Tooltip
-          title={tooltipTitle(t('auth:account.your'))}
-          placement="bottom"
-          arrow
-          slotProps={tooltipSlotProps(theme)}
-        >
-          <IconButton
-            {...titleBarIconButtonProps}
-            size="small"
-            onClick={rightNav.onOpenDrawerProfile}
-            sx={navIconSx}
-            aria-label={t('auth:account.your')}
-          >
-            <WalletIcon color={controlColor} width="22" />
-          </IconButton>
-        </Tooltip>
-      )}
-    </Box>
-  );
-
-  const rightNavSection = rightNav && (
-    <Box sx={navSectionSx}>
-      <ChatWidgetReopenIcon inTitleBar />
-      {/* {rightNav.extState === 'authenticated' && rightNav.isMainWindow && ( */}
-      <>
-        <Tooltip
-          title={tooltipTitle(t('core:message.generic.ongoing_transactions'))}
-          placement="bottom"
-          arrow
-          slotProps={tooltipSlotProps(theme)}
-        >
-          <Box sx={navCellSx} component="span">
-            <TaskManager getUserInfo={rightNav.getUserInfo} />
-          </Box>
-        </Tooltip>
-        <Box sx={navCellSx}>
-          <GlobalActions />
-        </Box>
-      </>
-      {/* )} */}
-      <Box sx={{ width: 2 }} />
-      <Tooltip
-        title={tooltipTitle(t('core:minting.status_title'))}
-        placement="bottom"
-        arrow
-        slotProps={tooltipSlotProps(theme)}
-      >
-        <IconButton
-          {...titleBarIconButtonProps}
-          size="small"
-          onClick={rightNav.onOpenMinting}
-          sx={navIconSx}
-          aria-label={t('core:minting.status_title')}
-        >
-          <EngineeringIcon sx={{ fontSize: 20 }} />
-        </IconButton>
-      </Tooltip>
-      {/* {(rightNav.desktopViewMode === 'apps' || rightNav.desktopViewMode === 'home') && (
-        <Tooltip title={tooltipTitle(t('core:tutorial'))} placement="bottom" arrow slotProps={tooltipSlotProps(theme)}>
-          <IconButton
-            {...titleBarIconButtonProps}
-            size="small"
-            onClick={() => (rightNav.desktopViewMode === 'apps' ? rightNav.showTutorial('qapps', true) : rightNav.showTutorial('getting-started', true))}
-            sx={navIconSx}
-            aria-label={t('core:tutorial')}
-          >
-            <HelpIcon sx={{ fontSize: 20 }} />
-          </IconButton>
-        </Tooltip>
-      )} */}
-      <Tooltip
-        title={tooltipTitle(t('core:action.backup_wallet'))}
-        placement="bottom"
-        arrow
-        slotProps={tooltipSlotProps(theme)}
-      >
-        <IconButton
-          {...titleBarIconButtonProps}
-          size="small"
-          onClick={rightNav.onBackupWallet}
-          sx={navIconSx}
-          aria-label={t('core:action.backup_wallet')}
-        >
-          <DownloadIcon sx={{ fontSize: 20 }} />
-        </IconButton>
-      </Tooltip>
-      <Box
-        sx={{
-          width: '1px',
-          minWidth: '1px',
-          alignSelf: 'stretch',
-          backgroundColor: borderColor,
-          mx: 0.5,
-          my: 0.75,
-        }}
-        aria-hidden
-      />
-      <Tooltip
-        title={tooltipTitle(t('core:action.logout'))}
-        placement="bottom"
-        arrow
-        slotProps={tooltipSlotProps(theme)}
-      >
-        <IconButton
-          {...titleBarIconButtonProps}
-          size="small"
-          onClick={rightNav.onLogout}
-          sx={navIconSx}
-          aria-label={t('core:action.logout')}
-        >
-          <LogoutIcon sx={{ fontSize: 20 }} />
-        </IconButton>
-      </Tooltip>
-    </Box>
-  );
-
-  const titleBarVerticalDivider = (
+  const leftPushCluster = (children: React.ReactNode) => (
     <Box
       sx={{
-        width: '1px',
-        minWidth: '1px',
-        alignSelf: 'stretch',
-        backgroundColor: borderColor,
-        my: 0.75,
-      }}
-      aria-hidden
-    />
-  );
-
-  const leftOffsetSpacer = (
-    <Box
-      sx={{
-        width: TITLE_BAR_LEFT_OFFSET_PX - TITLE_BAR_MENU_WIDTH_PX,
-        minWidth: TITLE_BAR_LEFT_OFFSET_PX - TITLE_BAR_MENU_WIDTH_PX,
+        alignItems: 'center',
+        display: 'flex',
         flexShrink: 0,
+        minWidth: 0,
       }}
-    />
+    >
+      {children}
+    </Box>
   );
 
   return (
@@ -630,6 +397,7 @@ export function CustomTitleBar(props?: {
         borderBottom: '1px solid',
         borderColor,
         backgroundColor: bg,
+        boxShadow: toolbarShadow,
         display: 'flex',
         flexDirection: 'row',
         height: TITLE_BAR_HEIGHT,
@@ -642,40 +410,21 @@ export function CustomTitleBar(props?: {
       {isElectron &&
         (isMac ? (
           <>
-            {macWindowControls}
-            {menuButton}
-            {rightNav && (
-              <>
-                {leftOffsetSpacer}
-                {titleBarVerticalDivider}
-                {leftNavSection}
-              </>
-            )}
+            {leftPushCluster(<>{macWindowControls}{menuButton}</>)}
             <Box sx={{ flex: 1 }} />
-            {rightNavSection}
             <Box sx={{ width: 52 }} />
           </>
         ) : (
           <>
-            {menuButton}
-            {rightNav && (
-              <>
-                {leftOffsetSpacer}
-                {titleBarVerticalDivider}
-                {leftNavSection}
-              </>
-            )}
+            {leftPushCluster(<>{menuButton}</>)}
             <Box sx={{ flex: 1 }} />
-            {rightNavSection}
-            {titleBarVerticalDivider}
             {winWindowControls}
           </>
         ))}
       {!isElectron && (
         <>
-          {rightNav && <>{leftNavSection}</>}
+          {leftPushCluster(<Box sx={{ width: TITLE_BAR_LEFT_OFFSET_PX, minWidth: TITLE_BAR_LEFT_OFFSET_PX }} />)}
           <Box sx={{ flex: 1 }} />
-          {rightNavSection}
         </>
       )}
     </Box>
diff --git a/src/components/Desktop/DesktopHeader.tsx b/src/components/Desktop/DesktopHeader.tsx
index 2eef507a..86421dac 100644
--- a/src/components/Desktop/DesktopHeader.tsx
+++ b/src/components/Desktop/DesktopHeader.tsx
@@ -74,7 +74,6 @@ export const DesktopHeader = ({
   chatMode,
   openDrawerGroups,
   goToHome,
-  setIsOpenDrawerProfile,
   mobileViewMode,
   setMobileViewMode,
   setMobileViewModeKeepOpen,
diff --git a/src/components/Desktop/DesktopLeftSideBar.tsx b/src/components/Desktop/DesktopLeftSideBar.tsx
index fe6abcf2..71bd3b54 100644
--- a/src/components/Desktop/DesktopLeftSideBar.tsx
+++ b/src/components/Desktop/DesktopLeftSideBar.tsx
@@ -1,235 +1,634 @@
-import { Box, ButtonBase, useTheme } from '@mui/material';
+import {
+  alpha,
+  Box,
+  ButtonBase,
+  Divider,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { useAtomValue, useSetAtom } from 'jotai';
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type Dispatch,
+  type SetStateAction,
+} from 'react';
+import { useTranslation } from 'react-i18next';
 import { HomeIcon } from '../../assets/Icons/HomeIcon';
-import { Save } from '../Save/Save';
-import { IconWrapper } from './DesktopFooter';
+import { AppsIcon } from '../../assets/Icons/AppsIcon';
+import { MessagingIconFilled } from '../../assets/Icons/MessagingIconFilled';
+import qortalLogoOfficial from '../../assets/sidebar/qortal-logo-official.png';
 import {
   enabledDevModeAtom,
   hasUnreadGroupsAtom,
+  isNewTabWindowAtom,
 } from '../../atoms/global';
-import { useAtom, useAtomValue } from 'jotai';
-import { AppsIcon } from '../../assets/Icons/AppsIcon';
-import ThemeSelector from '../Theme/ThemeSelector';
+import { keyframes } from '@mui/material/styles';
+import {
+  executeEvent,
+  subscribeToEvent,
+  unsubscribeFromEvent,
+} from '../../utils/events';
+import { openQChatTab, QCHAT_INTERNAL_TAB_ID } from '../../utils/openQChatTab';
 import { CoreSyncStatus } from '../CoreSyncStatus';
 import LanguageSelector from '../Language/LanguageSelector';
-import { MessagingIconFilled } from '../../assets/Icons/MessagingIconFilled';
-import { useTranslation } from 'react-i18next';
-import { AppsDevModeNavBar } from '../Apps/AppsDevModeNavBar';
-import { executeEvent } from '../../utils/events';
-import { appChromeOffsetPx } from './CustomTitleBar';
+import ThemeSelector from '../Theme/ThemeSelector';
+
+type DesktopSideBarProps = {
+  desktopViewMode: string;
+  goToHome: any;
+  hasUnreadDirects: any;
+  isApps: boolean;
+  setAppsModeDev: Dispatch<SetStateAction<string>>;
+  setDesktopViewMode: (mode: string) => void;
+  isDirects?: any;
+  isGroups?: any;
+  lastQappViewMode?: any;
+  mode?: any;
+  setDesktopSideView?: any;
+  setMode?: any;
+  toggleSideViewDirects?: any;
+  toggleSideViewGroups?: any;
+};
+
+const SIDEBAR_WIDTH_PX = 72;
+const EDGE_SENSOR_WIDTH_PX = 8;
+const EDGE_SENSOR_HEIGHT_PX = 124;
+const TRIGGER_WIDTH_PX = 10;
+const TRIGGER_HEIGHT_PX = 96;
+const ITEM_WIDTH_PX = 56;
+const ITEM_MIN_HEIGHT_PX = 58;
+const ICON_WRAP_SIZE_PX = 40;
+const ICON_SIZE_PX = 24;
+const ITEM_GAP_PX = 6;
+const ITEM_PADDING_Y = 1;
+const OVERLAY_TRANSITION = '200ms cubic-bezier(0.2, 0, 0, 1)';
+const SIDEBAR_OPEN_DELAY_MS = 0;
+const SIDEBAR_CLOSE_DELAY_MS = 140;
+
+const pulse = keyframes`
+  0%, 100% {
+    transform: translateY(-50%) scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: translateY(-50%) scale(1.3);
+    opacity: 0.6;
+  }
+`;
+
+const DevModeIcon = ({
+  color = 'currentColor',
+  height = 24,
+  width = 24,
+}: {
+  color?: string;
+  height?: number;
+  width?: number;
+}) => {
+  const dotRadius = 2.3;
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="3.5" r={dotRadius} fill={color} />
+      <circle cx="3.5" cy="12" r={dotRadius} fill={color} />
+      <circle cx="12" cy="12" r={dotRadius} fill={color} />
+      <circle cx="20.5" cy="12" r={dotRadius} fill={color} />
+      <circle cx="12" cy="20.5" r={dotRadius} fill={color} />
+    </svg>
+  );
+};
+
+const SidebarItem = ({
+  active = false,
+  children,
+  isInfo = false,
+  dataTheme,
+  itemClassName,
+  label,
+  onClick,
+}: {
+  active?: boolean;
+  children: React.ReactNode;
+  isInfo?: boolean;
+  dataTheme?: string;
+  itemClassName?: string;
+  label: string;
+  onClick?: () => void;
+}) => {
+  const theme = useTheme();
+  const content = (
+    <>
+      <Box
+        className="sidebarItemIconWrap"
+        sx={{
+          alignItems: 'center',
+          display: 'flex',
+          height: ICON_WRAP_SIZE_PX,
+          justifyContent: 'center',
+          width: ICON_WRAP_SIZE_PX,
+        }}
+      >
+        {children}
+      </Box>
+      <Typography
+        className="sidebarItemLabel"
+        sx={{
+          color: 'inherit',
+          fontSize: '11px',
+          fontWeight: 600,
+          letterSpacing: '0.01em',
+          lineHeight: 1,
+          textAlign: 'center',
+        }}
+      >
+        {label}
+      </Typography>
+    </>
+  );
+
+  const sharedSx = {
+    alignItems: 'center',
+    backgroundColor: active
+      ? alpha(
+          theme.palette.action.selected,
+          theme.palette.mode === 'dark' ? 0.78 : 0.88
+        )
+      : 'transparent',
+    borderRadius: '14px',
+    color: active ? theme.palette.text.primary : theme.palette.text.secondary,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: `${ITEM_GAP_PX}px`,
+    justifyContent: 'flex-start',
+    minHeight: `${ITEM_MIN_HEIGHT_PX}px`,
+    py: ITEM_PADDING_Y,
+    transition:
+      'background-color 180ms ease, color 180ms ease, box-shadow 140ms ease, transform 120ms ease',
+    width: `${ITEM_WIDTH_PX}px`,
+    '& .sidebarItemIconWrap': {
+      transition: 'transform 150ms ease, color 180ms ease, opacity 180ms ease',
+    },
+    '& .sidebarItemLabel': {
+      transition: 'color 180ms ease, opacity 180ms ease',
+    },
+    ...((onClick || isInfo) && {
+      '&:hover': {
+        backgroundColor: theme.palette.action.hover,
+        color: theme.palette.text.primary,
+        boxShadow: `inset 0 0 0 1px ${alpha(theme.palette.border.main, 0.18)}, inset 0 1px 0 ${alpha(theme.palette.common.white, theme.palette.mode === 'dark' ? 0.03 : 0.12)}`,
+        '& .sidebarItemIconWrap': {
+          transform: 'translateY(-1px)',
+        },
+      },
+      '&:active': {
+        transform: 'translateY(0)',
+      },
+    }),
+    '&:focus-visible': {
+      backgroundColor: alpha(
+        theme.palette.action.hover,
+        theme.palette.mode === 'dark' ? 0.72 : 0.82
+      ),
+      boxShadow: `inset 0 0 0 1px ${alpha(theme.palette.border.main, 0.22)}, inset 0 1px 0 ${alpha(theme.palette.common.white, theme.palette.mode === 'dark' ? 0.03 : 0.12)}`,
+      color: theme.palette.text.primary,
+      '& .sidebarItemIconWrap': {
+        transform: 'translateY(-1px)',
+      },
+    },
+    ...(active && {
+      boxShadow: `inset 0 0 0 1px ${alpha(theme.palette.primary.light, 0.14)}, inset 0 1px 0 ${alpha(theme.palette.common.white, theme.palette.mode === 'dark' ? 0.02 : 0.1)}`,
+    }),
+  } as const;
+
+  if (!onClick) {
+    return (
+      <Box className={itemClassName} data-theme={dataTheme} sx={sharedSx}>
+        {content}
+      </Box>
+    );
+  }
+
+  return (
+    <ButtonBase
+      className={itemClassName}
+      data-theme={dataTheme}
+      disableRipple
+      onClick={onClick}
+      sx={sharedSx}
+    >
+      {content}
+    </ButtonBase>
+  );
+};
 
 export const DesktopSideBar = ({
   goToHome,
-  setDesktopSideView,
-  toggleSideViewDirects,
   hasUnreadDirects,
-  isDirects,
-  toggleSideViewGroups,
-  isGroups,
   isApps,
   setDesktopViewMode,
   desktopViewMode,
-  lastQappViewMode,
-  mode,
-  setMode,
-}) => {
+  setAppsModeDev,
+}: DesktopSideBarProps) => {
+  const isEnabledDevMode = useAtomValue(enabledDevModeAtom);
+  const setIsNewTabWindow = useSetAtom(isNewTabWindowAtom);
   const hasUnreadGroups = useAtomValue(hasUnreadGroupsAtom);
-  const [isEnabledDevMode, setIsEnabledDevMode] = useAtom(enabledDevModeAtom);
   const theme = useTheme();
-  const { t } = useTranslation([
-    'auth',
-    'core',
-    'group',
-    'question',
-    'tutorial',
-  ]);
+  const { t } = useTranslation(['core']);
+  const [isVisible, setIsVisible] = useState(false);
+  const [selectedAppsTab, setSelectedAppsTab] = useState<any>(null);
+  const [isInfoActive, setIsInfoActive] = useState(false);
+  const openTimerRef = useRef<number | null>(null);
+  const closeTimerRef = useRef<number | null>(null);
+  const hasUnreadChat = hasUnreadDirects || hasUnreadGroups;
+  const effectiveUnreadChat = hasUnreadChat;
+  const isQChatActive =
+    desktopViewMode === 'apps' &&
+    selectedAppsTab?.internal === QCHAT_INTERNAL_TAB_ID;
+
+  const unreadAccent = useMemo(
+    () =>
+      theme.palette.mode === 'dark'
+        ? 'rgba(255, 110, 140, 0.9)'
+        : 'rgba(235, 95, 125, 0.92)',
+    [theme.palette.mode]
+  );
+
+  const sidebarSurfaceColor =
+    theme.palette.mode === 'dark'
+      ? 'rgb(36, 39, 45)'
+      : theme.palette.background.paper;
+  const sidebarSurfaceShadow =
+    theme.palette.mode === 'dark'
+      ? '8px 0 18px rgba(0, 0, 0, 0.12)'
+      : '6px 0 14px rgba(0,0,0,0.04)';
+
+  useEffect(() => {
+    const handleTabsToNav = (e: CustomEvent) => {
+      setSelectedAppsTab(e.detail?.data?.selectedTab || null);
+    };
+
+    subscribeToEvent('setTabsToNav', handleTabsToNav);
+    return () => {
+      unsubscribeFromEvent('setTabsToNav', handleTabsToNav);
+    };
+  }, []);
+
+  const emitOverlayState = (nextVisible: boolean) => {
+    executeEvent('sidebarOverlayVisibility', {
+      data: {
+        isVisible: nextVisible,
+        width: nextVisible ? SIDEBAR_WIDTH_PX : 0,
+      },
+    });
+  };
+
+  const clearHoverTimers = () => {
+    if (openTimerRef.current !== null) {
+      window.clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+    if (closeTimerRef.current !== null) {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  };
+
+  const showSidebar = () => {
+    if (closeTimerRef.current !== null) {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+    if (isVisible || openTimerRef.current !== null) return;
+    openTimerRef.current = window.setTimeout(() => {
+      openTimerRef.current = null;
+      setIsVisible((prev) => {
+        if (!prev) {
+          emitOverlayState(true);
+        }
+        return true;
+      });
+    }, SIDEBAR_OPEN_DELAY_MS);
+  };
+
+  const showSidebarImmediate = () => {
+    clearHoverTimers();
+    setIsVisible((prev) => {
+      if (!prev) {
+        emitOverlayState(true);
+      }
+      return true;
+    });
+  };
+
+  const hideSidebar = () => {
+    if (openTimerRef.current !== null) {
+      window.clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+    if (closeTimerRef.current !== null) {
+      window.clearTimeout(closeTimerRef.current);
+    }
+    closeTimerRef.current = window.setTimeout(() => {
+      closeTimerRef.current = null;
+      setIsVisible((prev) => {
+        if (prev) {
+          emitOverlayState(false);
+        }
+        return false;
+      });
+    }, SIDEBAR_CLOSE_DELAY_MS);
+  };
+
+  const runSidebarAction = (fn: () => void) => {
+    fn();
+    hideSidebar();
+  };
+
+  useEffect(() => {
+    emitOverlayState(false);
+    return () => {
+      clearHoverTimers();
+      emitOverlayState(false);
+    };
+  }, []);
 
   return (
-    <Box
-      sx={{
-        alignItems: 'center',
-        backgroundColor: theme.palette.background.default,
-        borderRight: `1px solid ${theme.palette.border.subtle}`,
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '25px',
-        height: `calc(100vh - ${appChromeOffsetPx})`,
-        width: 'auto', // must adapt to the chosen language
-      }}
-    >
-      <ButtonBase
+    <>
+      <Box
+        onMouseEnter={showSidebar}
         sx={{
-          height: '70px',
-          paddingTop: '23px',
-          width: '70px',
+          position: 'fixed',
+          left: 0,
+          top: '50%',
+          height: `${EDGE_SENSOR_HEIGHT_PX}px`,
+          transform: 'translateY(-50%)',
+          width: `${EDGE_SENSOR_WIDTH_PX}px`,
+          opacity: 0,
+          pointerEvents: isVisible ? 'none' : 'auto',
+          zIndex: 9996,
         }}
-      >
-        <CoreSyncStatus />
-      </ButtonBase>
+      />
 
-      <ButtonBase
-        sx={{
-          borderRadius: '8px',
-          height: '60px',
-          width: '60px',
-          ...(desktopViewMode === 'home' && {
-            backgroundColor: theme.palette.action.selected,
-          }),
-          '&:hover': {
-            backgroundColor: theme.palette.action.hover,
-          },
-        }}
-        onClick={() => {
-          goToHome();
-        }}
-      >
-        <HomeIcon
-          height={34}
-          color={
-            desktopViewMode === 'home'
-              ? theme.palette.text.primary
-              : theme.palette.text.secondary
-          }
-        />
-      </ButtonBase>
-
-      <ButtonBase
+      <Box
+        onMouseEnter={showSidebarImmediate}
         sx={{
-          borderRadius: '8px',
-          height: '60px',
-          width: '60px',
-          ...(isApps && {
-            backgroundColor: theme.palette.action.selected,
-          }),
-          '&:hover': {
-            backgroundColor: theme.palette.action.hover,
-          },
-        }}
-        onClick={() => {
-          executeEvent('newTabWindow', {});
-          if (!isApps) {
-            setDesktopViewMode('apps');
-          }
+          position: 'fixed',
+          left: 0,
+          top: '50%',
+          transform: isVisible
+            ? 'translateY(-50%) translateX(-4px)'
+            : 'translateY(-50%) translateX(0)',
+          width: `${TRIGGER_WIDTH_PX}px`,
+          height: `${TRIGGER_HEIGHT_PX}px`,
+          borderRadius: '0 10px 10px 0',
+          background:
+            theme.palette.mode === 'dark'
+              ? 'rgba(255, 255, 255, 0.14)'
+              : 'rgba(17, 24, 39, 0.12)',
+          boxShadow:
+            theme.palette.mode === 'dark'
+              ? '0 0 0 1px rgba(255,255,255,0.08)'
+              : '0 0 0 1px rgba(17,24,39,0.08)',
+          opacity: isVisible ? 0 : 1,
+          pointerEvents: isVisible ? 'none' : 'auto',
+          transition: isVisible
+            ? 'opacity 100ms ease, transform 100ms ease, background 200ms ease, box-shadow 200ms ease'
+            : 'opacity 120ms ease 110ms, transform 120ms ease 110ms, background 200ms ease, box-shadow 200ms ease',
+          zIndex: 9997,
+          '&::after':
+            effectiveUnreadChat && !isVisible
+              ? {
+                  content: '""',
+                  position: 'absolute',
+                  top: '50%',
+                  right: 2,
+                  transform: 'translateY(-50%)',
+                  width: 6,
+                  height: 6,
+                  borderRadius: '50%',
+                  background: unreadAccent,
+                  boxShadow: `0 0 0 2px ${alpha(unreadAccent, 0.14)}`,
+                  animation: `${pulse} 1.2s ease-out 2`,
+                }
+              : undefined,
         }}
-      >
-        <IconWrapper
-          label={t('core:app_other', { postProcess: 'capitalizeFirstChar' })}
-          disableWidth
-          noBackground
-          selected={isApps}
-        >
-          <AppsIcon
-            color={
-              isApps ? theme.palette.text.primary : theme.palette.text.secondary
-            }
-            height={30}
-          />
-        </IconWrapper>
-      </ButtonBase>
-
-      <ButtonBase
+      />
+
+      <Box
         sx={{
-          borderRadius: '8px',
-          height: '60px',
-          width: '60px',
-          ...(desktopViewMode === 'chat' && {
-            backgroundColor: theme.palette.action.selected,
-          }),
-          '&:hover': {
-            backgroundColor: theme.palette.action.hover,
-          },
-        }}
-        onClick={() => {
-          setDesktopViewMode('chat');
+          position: 'fixed',
+          left: 0,
+          top: 0,
+          bottom: 0,
+          width: `${SIDEBAR_WIDTH_PX}px`,
+          backgroundColor: sidebarSurfaceColor,
+          borderRight: `1px solid ${theme.palette.border.subtle}`,
+          boxShadow: sidebarSurfaceShadow,
+          opacity: isVisible ? 1 : 0,
+          transform: isVisible ? 'translateX(0)' : 'translateX(-100%)',
+          pointerEvents: 'none',
+          transition: `transform ${OVERLAY_TRANSITION}, opacity ${OVERLAY_TRANSITION}, box-shadow 200ms ease`,
+          overflow: isVisible ? 'visible' : 'hidden',
+          zIndex: 9998,
         }}
       >
-        <IconWrapper
-          color={
-            hasUnreadDirects || hasUnreadGroups
-              ? theme.palette.other.unread
-              : desktopViewMode === 'chat'
-                ? theme.palette.text.primary
-                : theme.palette.text.secondary
-          }
-          label={t('core:chat', { postProcess: 'capitalizeFirstChar' })}
-          disableWidth
-          noBackground
-          selected={desktopViewMode === 'chat'}
-        >
-          <MessagingIconFilled
-            height={30}
-            color={
-              hasUnreadDirects || hasUnreadGroups
-                ? theme.palette.other.unread
-                : desktopViewMode === 'chat'
-                  ? theme.palette.text.primary
-                  : theme.palette.text.secondary
-            }
-          />
-        </IconWrapper>
-      </ButtonBase>
-
-      {isEnabledDevMode && (
-        <ButtonBase
+        <Box
+          onMouseEnter={showSidebarImmediate}
+          onMouseLeave={hideSidebar}
           sx={{
-            borderRadius: '8px',
-            height: '60px',
-            width: '60px',
-            ...(desktopViewMode === 'dev' && {
-              backgroundColor: theme.palette.action.selected,
-            }),
-            '&:hover': {
-              backgroundColor: theme.palette.action.hover,
-            },
-          }}
-          onClick={() => {
-            desktopViewMode === 'dev'
-              ? executeEvent('devModeNewTabWindow', {})
-              : setDesktopViewMode('dev');
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            bottom: 0,
+            width: `${SIDEBAR_WIDTH_PX}px`,
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            overflow: 'visible',
+            pointerEvents: isVisible ? 'auto' : 'none',
+            '& .sidebarItem:hover .sidebarInfoLogo, & .sidebarItem:focus-visible .sidebarInfoLogo, & .sidebarItem.isOpen .sidebarInfoLogo':
+              {
+                filter: 'grayscale(0) saturate(1) brightness(1) contrast(1)',
+                opacity: 1,
+              },
           }}
         >
-          <IconWrapper
-            label={t('core:dev', { postProcess: 'capitalizeFirstChar' })}
-            disableWidth
-            noBackground
-            selected={desktopViewMode === 'dev'}
+          <Box
+            sx={{
+              alignItems: 'center',
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+              px: 1,
+              width: '100%',
+            }}
           >
-            <AppsIcon
-              height={30}
-              color={
-                desktopViewMode === 'dev'
-                  ? theme.palette.text.primary
-                  : theme.palette.text.secondary
-              }
-            />
-          </IconWrapper>
-        </ButtonBase>
-      )}
+            <Box
+              sx={{
+                alignItems: 'center',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 0.35,
+                justifyContent: 'center',
+                width: '100%',
+              }}
+            >
+              <SidebarItem
+                active={desktopViewMode === 'home'}
+                label={t('core:home', { postProcess: 'capitalizeFirstChar' })}
+                onClick={() => runSidebarAction(goToHome)}
+              >
+                <Box
+                  sx={{
+                    alignItems: 'center',
+                    color:
+                      desktopViewMode === 'home'
+                        ? theme.palette.text.primary
+                        : theme.palette.text.secondary,
+                    display: 'flex',
+                    height: `${ICON_WRAP_SIZE_PX}px`,
+                    justifyContent: 'center',
+                    width: `${ICON_WRAP_SIZE_PX}px`,
+                  }}
+                >
+                  <HomeIcon height={26} width={26} color="currentColor" />
+                </Box>
+              </SidebarItem>
 
-      {lastQappViewMode === 'dev' ? (
-        <AppsDevModeNavBar
-          disableBack={desktopViewMode !== 'dev'}
-          isDev={desktopViewMode === 'dev'}
-        />
-      ) : null}
+              <SidebarItem
+                active={isApps && !isQChatActive}
+                label={t('core:app_other', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+                onClick={() =>
+                  runSidebarAction(() => {
+                    executeEvent('newTabWindow', {});
+                    setDesktopViewMode('apps');
+                  })
+                }
+              >
+                <AppsIcon height={24} color="currentColor" />
+              </SidebarItem>
 
-      <Box
-        sx={{
-          alignItems: 'flex-start',
-          bottom: '1%',
-          display: 'flex',
-          flexDirection: 'column',
-          position: 'absolute',
-          width: 'auto',
-        }}
-      >
-        <Box sx={{ alignSelf: 'left' }}>
-          <LanguageSelector />
-        </Box>
+              <Box sx={{ position: 'relative' }}>
+                <SidebarItem
+                  active={desktopViewMode === 'chat' || isQChatActive}
+                  label="Q-Chat"
+                  onClick={() => runSidebarAction(() => openQChatTab())}
+                >
+                  <MessagingIconFilled height={24} color="currentColor" />
+                </SidebarItem>
+
+                {effectiveUnreadChat ? (
+                  <Box
+                    className="qChatUnreadDot"
+                    sx={{
+                      position: 'absolute',
+                      top: 11,
+                      right: 7,
+                      width: 7,
+                      height: 7,
+                      borderRadius: '50%',
+                      background: unreadAccent,
+                      boxShadow: `0 0 0 3px ${alpha(unreadAccent, 0.16)}`,
+                    }}
+                  />
+                ) : null}
+              </Box>
+
+              {isEnabledDevMode ? (
+                <SidebarItem
+                  active={desktopViewMode === 'dev'}
+                  label={t('core:dev_mode', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                  onClick={() =>
+                    runSidebarAction(() => {
+                      setDesktopViewMode('dev');
+                      setAppsModeDev('home');
+                      setIsNewTabWindow(false);
+                    })
+                  }
+                >
+                  <DevModeIcon height={24} width={24} color="currentColor" />
+                </SidebarItem>
+              ) : null}
+            </Box>
+
+            <Divider
+              flexItem
+              sx={{
+                borderColor: alpha(theme.palette.text.primary, 0.1),
+                my: 1.2,
+                opacity: 0.8,
+              }}
+            />
 
-        <Box sx={{ alignSelf: 'center' }}>
-          <ThemeSelector />
+            <Box
+              sx={{
+                alignItems: 'center',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 0.35,
+                justifyContent: 'center',
+                width: '100%',
+              }}
+            >
+              <Box
+                className="tooltip"
+                data-theme={theme.palette.mode}
+                onMouseEnter={() => setIsInfoActive(true)}
+                onMouseLeave={() => setIsInfoActive(false)}
+                onFocus={() => setIsInfoActive(true)}
+                onBlur={() => setIsInfoActive(false)}
+              >
+                <SidebarItem
+                  dataTheme={theme.palette.mode}
+                  itemClassName={`sidebarItem tooltip${isInfoActive ? ' isOpen' : ''}`}
+                  isInfo
+                  label="Info"
+                >
+                  <CoreSyncStatus
+                    useExternalTooltip
+                    renderIcon={
+                      <img
+                        src={qortalLogoOfficial}
+                        alt="Qortal Info"
+                        className="sidebarInfoLogo"
+                        style={{
+                          width: `${ICON_SIZE_PX}px`,
+                          height: `${ICON_SIZE_PX}px`,
+                          objectFit: 'contain',
+                          filter: isInfoActive
+                            ? 'grayscale(0) saturate(1) brightness(1) contrast(1)'
+                            : 'grayscale(0.82) saturate(0.32) brightness(0.82) contrast(0.9)',
+                          opacity: isInfoActive ? 1 : 0.78,
+                          transform: isInfoActive ? 'scale(1.02)' : 'scale(1)',
+                          transition:
+                            'filter 0.2s ease, opacity 0.2s ease, transform 0.2s ease',
+                        }}
+                      />
+                    }
+                  />
+                </SidebarItem>
+              </Box>
+              <LanguageSelector sidebar />
+              <ThemeSelector sidebar />
+            </Box>
+          </Box>
         </Box>
       </Box>
-    </Box>
+    </>
   );
 };
diff --git a/src/components/Desktop/GlobalQortalNavBar.tsx b/src/components/Desktop/GlobalQortalNavBar.tsx
index c63b550a..d465fa81 100644
--- a/src/components/Desktop/GlobalQortalNavBar.tsx
+++ b/src/components/Desktop/GlobalQortalNavBar.tsx
@@ -1,34 +1,81 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Box, ButtonBase, InputBase, useTheme } from '@mui/material';
+import { Box, ButtonBase, IconButton, InputBase, Tooltip, useTheme } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
 import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
 import RefreshIcon from '@mui/icons-material/Refresh';
+import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
 import ArrowBackIosNewRoundedIcon from '@mui/icons-material/ArrowBackIosNewRounded';
-import { useAtomValue } from 'jotai';
+import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
+import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
+import { useAtomValue, useSetAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
+import { motion } from 'framer-motion';
 import { extractComponents } from '../Chat/MessageDisplay';
-import { navigationControllerAtom } from '../../atoms/global';
+import {
+  infoSnackGlobalAtom,
+  navigationControllerAtom,
+  openSnackGlobalAtom,
+  txListAtom,
+  userInfoAtom,
+} from '../../atoms/global';
 import {
   executeEvent,
   subscribeToEvent,
   unsubscribeFromEvent,
 } from '../../utils/events';
 import { QORTAL_PROTOCOL } from '../../constants/constants';
-import { APP_NAV_BAR_HEIGHT } from './CustomTitleBar';
+import { APP_NAV_BAR_HEIGHT, type CustomTitleBarRightNavProps } from './CustomTitleBar';
+import { QMailStatus } from '../QMailStatus';
+import { GeneralNotifications } from '../GeneralNotifications';
+import { TaskManager } from '../TaskManager/TaskManager';
+import { GlobalActions } from '../GlobalActions/GlobalActions';
+import { ChatWidgetReopenIcon } from '../Profile/ChatWidgetReopenIcon';
+import { SubscriptionsStatus } from './SubscriptionsStatus';
+import { AppBookmarksButton } from '../Apps/AppBookmarks';
 
 type GlobalQortalNavBarProps = {
   desktopViewMode: string;
+  utilityNav?: CustomTitleBarRightNavProps | null;
 };
 
+/** Hub-owned surfaces in the app tab strip (e.g. Q-Chat), not arbitrary Q-Apps */
+const INTERNAL_TAB_SERVICE = 'INTERNAL';
+
 type SelectedTab = {
   tabId: string;
   name: string;
   service: string;
   identifier?: string;
   path?: string;
+  internal?: string;
   refreshFunc?: (tabId?: string) => void;
 } | null;
 
+const QAppsNavIcon = ({ color = 'currentColor' }: { color?: string }) => (
+  <Box
+    aria-hidden="true"
+    sx={{
+      display: 'grid',
+      gap: '3px',
+      gridTemplateColumns: 'repeat(2, 1fr)',
+      height: 14,
+      width: 14,
+    }}
+  >
+    {Array.from({ length: 4 }).map((_, index) => (
+      <Box
+        key={index}
+        sx={{
+          backgroundColor: color,
+          borderRadius: '50%',
+          height: 4,
+          width: 4,
+        }}
+      />
+    ))}
+  </Box>
+);
+
 function normalizeQortalInput(value: string) {
   const trimmed = (value || '').trim();
   if (!trimmed) return '';
@@ -38,18 +85,38 @@ function normalizeQortalInput(value: string) {
 
 export function GlobalQortalNavBar({
   desktopViewMode,
+  utilityNav = null,
 }: GlobalQortalNavBarProps) {
   const theme = useTheme();
   const navigationController = useAtomValue(navigationControllerAtom);
-  const { t } = useTranslation(['core']);
+  const txList = useAtomValue(txListAtom);
+  const userInfo = useAtomValue(userInfoAtom);
+  const setOpenSnackGlobal = useSetAtom(openSnackGlobalAtom);
+  const setInfoSnackGlobal = useSetAtom(infoSnackGlobalAtom);
+  const { t } = useTranslation(['core', 'question']);
   const [selectedTab, setSelectedTab] = useState<SelectedTab>(null);
   const [inputValue, setInputValue] = useState('');
   const [isInputHovered, setIsInputHovered] = useState(false);
   const [isInputFocused, setIsInputFocused] = useState(false);
   const isInputFocusedRef = useRef(false);
+  const lastTabsTokenRef = useRef(0);
+  const navClearLockUntilRef = useRef(0);
   const inputElementRef = useRef<HTMLInputElement | null>(null);
 
   const setTabsToNav = useCallback((e: CustomEvent) => {
+    const nextToken = Number(e.detail?.data?.tabsToken || 0);
+    if (Date.now() < navClearLockUntilRef.current) {
+      return;
+    }
+    if (lastTabsTokenRef.current > 0 && !nextToken) {
+      return;
+    }
+    if (nextToken && nextToken <= lastTabsTokenRef.current) {
+      return;
+    }
+    if (nextToken) {
+      lastTabsTokenRef.current = nextToken;
+    }
     const nextSelectedTab = e.detail?.data?.selectedTab;
     setSelectedTab(nextSelectedTab ? { ...nextSelectedTab } : null);
   }, []);
@@ -62,6 +129,46 @@ export function GlobalQortalNavBar({
     };
   }, [setTabsToNav]);
 
+  useEffect(() => {
+    const handleClearNavInput = () => {
+      setInputValue('');
+      setIsInputFocused(false);
+      isInputFocusedRef.current = false;
+      if (inputElementRef.current) {
+        inputElementRef.current.blur();
+      }
+    };
+
+    subscribeToEvent('clearNavInput', handleClearNavInput);
+
+    return () => {
+      unsubscribeFromEvent('clearNavInput', handleClearNavInput);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleForceNavClear = (e: CustomEvent) => {
+      const nextToken = Number(e.detail?.data?.tabsToken || 0);
+      if (nextToken) {
+        lastTabsTokenRef.current = nextToken;
+      }
+      navClearLockUntilRef.current = Date.now() + 250;
+      setSelectedTab(null);
+      setInputValue('');
+      setIsInputFocused(false);
+      isInputFocusedRef.current = false;
+      if (inputElementRef.current) {
+        inputElementRef.current.blur();
+      }
+    };
+
+    subscribeToEvent('forceNavClear', handleForceNavClear);
+
+    return () => {
+      unsubscribeFromEvent('forceNavClear', handleForceNavClear);
+    };
+  }, []);
+
   const currentNavigation = selectedTab?.tabId
     ? navigationController?.[selectedTab.tabId]
     : null;
@@ -69,10 +176,26 @@ export function GlobalQortalNavBar({
   const currentLink = useMemo(() => {
     return currentNavigation?.currentLink || '';
   }, [currentNavigation]);
+  const bookmarkSelectedTab = useMemo(() => {
+    const parsedLink = currentLink
+      ? extractComponents(normalizeQortalInput(currentLink))
+      : null;
+    if (!parsedLink) return selectedTab;
+    return {
+      ...(selectedTab || {}),
+      service: parsedLink.service,
+      name: parsedLink.name,
+      identifier: parsedLink.identifier,
+      path: parsedLink.path,
+    };
+  }, [currentLink, selectedTab]);
 
   useEffect(() => {
     if (isInputFocusedRef.current) return;
-    if (desktopViewMode === 'apps' && currentLink) {
+    if (
+      (desktopViewMode === 'apps' || desktopViewMode === 'dev') &&
+      currentLink
+    ) {
       setInputValue(currentLink);
       return;
     }
@@ -103,32 +226,90 @@ export function GlobalQortalNavBar({
     executeEvent('open-apps-mode', {});
   }, [inputValue]);
 
-  const canGoBack = !!selectedTab?.tabId && !!currentNavigation?.hasBack;
-  const canRefresh = !!selectedTab?.tabId && desktopViewMode === 'apps';
+  const canCopyCurrentLink = Boolean(currentLink);
+  const handleCopyCurrentLink = useCallback(() => {
+    if (!currentLink) return;
+    if (!navigator.clipboard?.writeText) {
+      setInfoSnackGlobal({
+        compact: true,
+        duration: 3200,
+        message: t('question:message.error.copy_clipboard', {
+          defaultValue: 'Failed to copy to clipboard',
+          postProcess: 'capitalizeFirstChar',
+        }),
+        type: 'error',
+      });
+      setOpenSnackGlobal(true);
+      return;
+    }
+    navigator.clipboard
+      .writeText(currentLink)
+      .then(() => {
+        setInfoSnackGlobal({
+          compact: true,
+          duration: 3000,
+          message: t('core:message.generic.link_copied', {
+            defaultValue: 'Link copied to clipboard.',
+          }),
+          type: 'success',
+        });
+        setOpenSnackGlobal(true);
+      })
+      .catch((error) => {
+        console.error('Failed to copy link:', error);
+        setInfoSnackGlobal({
+          compact: true,
+          duration: 3200,
+          message: t('question:message.error.copy_clipboard', {
+            defaultValue: 'Failed to copy to clipboard',
+            postProcess: 'capitalizeFirstChar',
+          }),
+          type: 'error',
+        });
+        setOpenSnackGlobal(true);
+      });
+  }, [currentLink, setInfoSnackGlobal, setOpenSnackGlobal, t]);
+
+  const isInternalTabSelected = selectedTab?.service === INTERNAL_TAB_SERVICE;
+  const canGoBack =
+    !!selectedTab?.tabId &&
+    !!currentNavigation?.hasBack &&
+    !isInternalTabSelected;
+  const canRefresh =
+    !!selectedTab?.tabId &&
+    (desktopViewMode === 'apps' || desktopViewMode === 'dev') &&
+    !isInternalTabSelected;
+  const isAppsMode = desktopViewMode === 'apps';
+  const isDevMode = desktopViewMode === 'dev';
+  const isHomeMode = desktopViewMode === 'home';
   const chromeBackground =
     theme.palette.mode === 'dark'
-      ? 'rgba(39, 40, 44, 0.96)'
-      : 'rgba(206, 209, 216, 0.96)';
+      ? 'rgba(33, 36, 42, 0.95)'
+      : 'rgba(223, 228, 235, 0.96)';
+  const navShadow =
+    theme.palette.mode === 'dark'
+      ? `inset 0 -1px 0 ${theme.palette.border.subtle}`
+      : `inset 0 -1px 0 ${theme.palette.border.subtle}`;
   const inputBackground =
     theme.palette.mode === 'dark'
-      ? 'rgba(58, 60, 65, 0.88)'
-      : 'rgba(255, 255, 255, 0.72)';
+      ? 'rgba(28, 31, 37, 0.98)'
+      : 'rgba(232, 236, 241, 0.96)';
   const inputHoverBackground =
     theme.palette.mode === 'dark'
-      ? 'rgba(62, 78, 108, 0.96)'
-      : 'rgba(194, 216, 242, 0.94)';
+      ? 'rgba(41, 45, 52, 0.99)'
+      : 'rgba(214, 220, 228, 0.98)';
   const inputFocusBackground =
     theme.palette.mode === 'dark'
-      ? 'rgba(68, 71, 77, 0.94)'
-      : 'rgba(255, 255, 255, 0.88)';
+      ? 'rgba(46, 51, 59, 1)'
+      : 'rgba(214, 220, 228, 1)';
   const hoverBorderColor =
     theme.palette.mode === 'dark'
-      ? 'rgba(255, 255, 255, 0.16)'
-      : 'rgba(0, 0, 0, 0.14)';
+      ? theme.palette.border.main
+      : theme.palette.border.main;
   const focusBorderColor =
     theme.palette.mode === 'dark'
-      ? 'rgba(255, 255, 255, 0.24)'
-      : 'rgba(0, 0, 0, 0.2)';
+      ? 'rgba(130, 185, 255, 0.28)'
+      : 'rgba(41, 121, 218, 0.2)';
   const inputHoverShadow =
     'none';
   const inputFocusShadow =
@@ -137,8 +318,8 @@ export function GlobalQortalNavBar({
       : 'none';
   const buttonHoverBackground =
     theme.palette.mode === 'dark'
-      ? 'rgba(255, 255, 255, 0.06)'
-      : 'rgba(0, 0, 0, 0.05)';
+      ? theme.palette.action.hover
+      : theme.palette.action.hover;
   const inputTextDefaultColor = theme.palette.text.secondary;
   const inputTextHoverColor =
     theme.palette.mode === 'dark'
@@ -183,38 +364,101 @@ export function GlobalQortalNavBar({
     letterSpacing: 'normal',
     lineHeight: '20px',
   } as const;
+  const tooltipSlotProps = {
+    tooltip: {
+      sx: {
+        color: theme.palette.text.primary,
+        backgroundColor: theme.palette.background.paper,
+      },
+    },
+    arrow: {
+      sx: {
+        color: theme.palette.text.primary,
+      },
+    },
+  } as const;
+  const tooltipTitle = (text: string) => (
+    <span
+      style={{ fontSize: '14px', fontWeight: 700, textTransform: 'uppercase' }}
+    >
+      {text}
+    </span>
+  );
+  const utilityModuleButtonSx = {
+    alignItems: 'center',
+    border: `1px solid ${theme.palette.border.subtle}`,
+    borderRadius: '10px',
+    color: theme.palette.text.secondary,
+    display: 'inline-flex',
+    height: 32,
+    justifyContent: 'center',
+    minWidth: 32,
+    transition:
+      'background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease, box-shadow 140ms ease',
+    width: 32,
+    '&:hover': {
+      backgroundColor: buttonHoverBackground,
+      borderColor: hoverBorderColor,
+      color: theme.palette.text.primary,
+      transform: 'translateY(-1px)',
+      boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+    },
+    '&:active': {
+      transform: 'translateY(0)',
+      boxShadow: 'none',
+    },
+    '&:focus-visible': {
+      outline: `1px solid ${theme.palette.primary.main}`,
+      outlineOffset: '2px',
+    },
+  } as const;
+  const utilityModuleIconSx = {
+    fontSize: 20,
+  } as const;
+  const utilitySectionSx = {
+    alignItems: 'center',
+    display: 'flex',
+    flexShrink: 0,
+    gap: 0.75,
+    ml: 0.125,
+    pl: 0.25,
+  } as const;
+  const hasActiveTasks = !!txList?.some((item: any) => item && !item.done);
+  const utilityLayoutTransition = {
+    duration: 0.22,
+    ease: [0.22, 1, 0.36, 1],
+  } as const;
 
   return (
+    <>
     <Box
-      sx={{
-        alignItems: 'center',
-        backdropFilter: 'blur(10px)',
-        backgroundColor: chromeBackground,
-        borderBottom:
-          desktopViewMode === 'apps'
-            ? '1px solid transparent'
-            : `1px solid ${theme.palette.border.subtle}`,
-        boxShadow:
-          desktopViewMode === 'apps'
-            ? `inset 0 -1px 0 ${theme.palette.border.subtle}`
-            : 'none',
-        display: 'flex',
-        height: `${APP_NAV_BAR_HEIGHT}px`,
-        width: '100%',
-      }}
-    >
-      <Box
         sx={{
           alignItems: 'center',
+          backdropFilter: 'blur(10px)',
+          backgroundColor: chromeBackground,
+          borderBottom: `1px solid ${theme.palette.border.subtle}`,
+          boxShadow: navShadow,
           display: 'flex',
-          gap: 1.25,
-          height: '100%',
-          maxWidth: '100%',
-          pl: { xs: 1.5, sm: 2, md: 2.5 },
-          pr: { xs: 1.5, sm: 2, md: 2.25 },
+          height: `${APP_NAV_BAR_HEIGHT}px`,
+          transition: `background-color 180ms ease, box-shadow 180ms ease`,
           width: '100%',
         }}
       >
+        <Box
+          component={motion.div}
+          layout
+          transition={utilityLayoutTransition}
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            gap: 1.25,
+            height: '100%',
+            maxWidth: '100%',
+            pl: { xs: '12px', sm: '16px', md: '20px' },
+            pr: { xs: 1.5, sm: 2, md: 2.25 },
+            width: '100%',
+          }}
+        >
         <Box
           sx={{
             alignItems: 'center',
@@ -238,6 +482,10 @@ export function GlobalQortalNavBar({
           <ButtonBase
             disableRipple
             onClick={() => {
+              if (isDevMode) {
+                executeEvent('devModeNavigateBack', {});
+                return;
+              }
               if (!selectedTab?.tabId) return;
               executeEvent(`navigateBackApp-${selectedTab.tabId}`, {});
             }}
@@ -251,16 +499,72 @@ export function GlobalQortalNavBar({
               justifyContent: 'center',
               opacity: canGoBack ? 1 : 0.32,
               transition:
-                'background-color 180ms ease, color 180ms ease, opacity 180ms ease',
+                'background-color 140ms ease, color 140ms ease, opacity 140ms ease, transform 120ms ease, box-shadow 140ms ease',
               width: 32,
               '&:hover:not(.Mui-disabled)': {
                 backgroundColor: buttonHoverBackground,
+                transform: 'translateY(-1px)',
+                boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+              },
+              '&:active:not(.Mui-disabled)': {
+                transform: 'translateY(0)',
+                boxShadow: 'none',
+              },
+              '&:focus-visible': {
+                outline: `1px solid ${theme.palette.primary.main}`,
+                outlineOffset: '2px',
               },
             }}
           >
             <ArrowBackIosNewRoundedIcon sx={{ fontSize: 15 }} />
           </ButtonBase>
 
+          <ButtonBase
+            disableRipple
+            onClick={() => {
+              if (isHomeMode) {
+                executeEvent('open-apps-mode', {});
+                return;
+              }
+              executeEvent('open-home-mode', {});
+            }}
+            sx={{
+              alignItems: 'center',
+              borderRadius: '9px',
+              color: theme.palette.text.primary,
+              display: 'flex',
+              height: 32,
+              justifyContent: 'center',
+              opacity: isHomeMode || isAppsMode || isDevMode ? 1 : 0.92,
+              transition:
+                'background-color 140ms ease, color 140ms ease, opacity 140ms ease, transform 120ms ease, box-shadow 140ms ease',
+              width: 32,
+              backgroundColor:
+                isHomeMode || isAppsMode || isDevMode
+                  ? buttonHoverBackground
+                  : 'transparent',
+              '&:hover': {
+                backgroundColor: buttonHoverBackground,
+                transform: 'translateY(-1px)',
+                boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+              },
+              '&:active': {
+                transform: 'translateY(0)',
+                boxShadow: 'none',
+              },
+              '&:focus-visible': {
+                outline: `1px solid ${theme.palette.primary.main}`,
+                outlineOffset: '2px',
+              },
+            }}
+          >
+            {isAppsMode || isDevMode ? (
+              <HomeRoundedIcon sx={{ fontSize: 19 }} />
+            ) : (
+              <QAppsNavIcon color={theme.palette.text.primary} />
+            )}
+          </ButtonBase>
+
           <ButtonBase
             disableRipple
             onClick={() => {
@@ -283,18 +587,71 @@ export function GlobalQortalNavBar({
               justifyContent: 'center',
               opacity: canRefresh ? 1 : 0.32,
               transition:
-                'background-color 180ms ease, color 180ms ease, opacity 180ms ease',
+                'background-color 140ms ease, color 140ms ease, opacity 140ms ease, transform 120ms ease, box-shadow 140ms ease',
               width: 32,
               '&:hover:not(.Mui-disabled)': {
                 backgroundColor: buttonHoverBackground,
+                transform: 'translateY(-1px)',
+                boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+              },
+              '&:active:not(.Mui-disabled)': {
+                transform: 'translateY(0)',
+                boxShadow: 'none',
+              },
+              '&:focus-visible': {
+                outline: `1px solid ${theme.palette.primary.main}`,
+                outlineOffset: '2px',
               },
             }}
           >
             <RefreshIcon sx={{ fontSize: 18 }} />
           </ButtonBase>
+
+          <Box
+            sx={{
+              borderLeft: `1px solid ${theme.palette.border.subtle}`,
+              display: 'flex',
+              ml: 0.75,
+              pl: 1,
+            }}
+          >
+            <AppBookmarksButton
+              address={userInfo?.address}
+              chromeBackground={chromeBackground}
+              selectedTab={bookmarkSelectedTab}
+              tooltipSlotProps={tooltipSlotProps}
+              tooltipTitle={tooltipTitle}
+              buttonSx={{
+                alignItems: 'center',
+                borderRadius: '9px',
+                display: 'flex',
+                height: 32,
+                justifyContent: 'center',
+                transition:
+                  'background-color 140ms ease, color 140ms ease, opacity 140ms ease, transform 120ms ease, box-shadow 140ms ease',
+                width: 32,
+                '&:hover:not(.Mui-disabled)': {
+                  backgroundColor: buttonHoverBackground,
+                  transform: 'translateY(-1px)',
+                  boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+                },
+                '&:active:not(.Mui-disabled)': {
+                  transform: 'translateY(0)',
+                  boxShadow: 'none',
+                },
+                '&:focus-visible': {
+                  outline: `1px solid ${theme.palette.primary.main}`,
+                  outlineOffset: '2px',
+                },
+              }}
+            />
+          </Box>
         </Box>
 
         <Box
+          component={motion.div}
+          layout
+          transition={utilityLayoutTransition}
           onMouseEnter={() => setIsInputHovered(true)}
           onMouseLeave={() => setIsInputHovered(false)}
           sx={{
@@ -308,9 +665,9 @@ export function GlobalQortalNavBar({
             height: 32,
             minWidth: 0,
             px: 1.25,
-            boxShadow: 'none',
-            transition:
-              'background-color 240ms ease, border-color 240ms ease, box-shadow 280ms ease',
+              boxShadow: 'none',
+              transition:
+              'background-color 180ms ease, border-color 180ms ease, box-shadow 200ms ease',
             '&:hover': {
               backgroundColor: inputHoverBackground,
               borderColor: hoverBorderColor,
@@ -319,7 +676,7 @@ export function GlobalQortalNavBar({
             '&:focus-within': {
               backgroundColor: inputFocusBackground,
               borderColor: focusBorderColor,
-              boxShadow: inputFocusShadow,
+              boxShadow: `0 0 0 1px ${focusBorderColor}`,
             },
           }}
         >
@@ -433,30 +790,225 @@ export function GlobalQortalNavBar({
               }}
             />
           </Box>
-          <ButtonBase
-            disableRipple
-            onClick={handleOpenInput}
+          <Box
             sx={{
               alignItems: 'center',
-              borderRadius: '8px',
-              color: theme.palette.text.secondary,
               display: 'flex',
-              flexShrink: 0,
+              flex: '0 0 58px',
+              gap: 0.75,
               height: 26,
-              justifyContent: 'center',
-              transition:
-                'background-color 180ms ease, color 180ms ease',
-              width: 26,
-              '&:hover': {
-                backgroundColor: buttonHoverBackground,
-                color: theme.palette.text.primary,
-              },
+              justifyContent: 'flex-end',
+              maxWidth: 58,
+              minWidth: 58,
+              width: 58,
             }}
           >
-            <ArrowOutwardIcon sx={{ fontSize: 17 }} />
-          </ButtonBase>
+            <Tooltip
+              title={tooltipTitle(t('core:action.copy_link'))}
+              placement="bottom"
+              arrow
+              slotProps={tooltipSlotProps}
+            >
+              <Box
+                component="span"
+                sx={{
+                  display: 'inline-flex',
+                  visibility: canCopyCurrentLink ? 'visible' : 'hidden',
+                }}
+              >
+                <ButtonBase
+                  disableRipple
+                  aria-label={t('core:action.copy_link')}
+                  onClick={handleCopyCurrentLink}
+                  tabIndex={canCopyCurrentLink ? 0 : -1}
+                  sx={{
+                    alignItems: 'center',
+                    borderRadius: '8px',
+                    color: theme.palette.text.secondary,
+                    display: 'flex',
+                    flexShrink: 0,
+                    height: 26,
+                    justifyContent: 'center',
+                    minWidth: 26,
+                    transition:
+                      'background-color 140ms ease, color 140ms ease, transform 120ms ease, box-shadow 140ms ease',
+                    width: 26,
+                    '&:hover': {
+                      backgroundColor: buttonHoverBackground,
+                      color: theme.palette.text.primary,
+                      transform: 'translateY(-1px)',
+                      boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+                    },
+                    '&:active': {
+                      transform: 'translateY(0)',
+                      boxShadow: 'none',
+                    },
+                    '&:focus-visible': {
+                      outline: `1px solid ${theme.palette.primary.main}`,
+                      outlineOffset: '2px',
+                    },
+                  }}
+                >
+                  <ContentCopyRoundedIcon
+                    sx={{
+                      display: 'block',
+                      flexShrink: 0,
+                      fontSize: 15,
+                    }}
+                  />
+                </ButtonBase>
+              </Box>
+            </Tooltip>
+
+            <ButtonBase
+              disableRipple
+              onClick={handleOpenInput}
+              sx={{
+                alignItems: 'center',
+                borderRadius: '8px',
+                color: theme.palette.text.secondary,
+                display: 'flex',
+                flexShrink: 0,
+                height: 26,
+                justifyContent: 'center',
+                minWidth: 26,
+                transition:
+                  'background-color 140ms ease, color 140ms ease, transform 120ms ease, box-shadow 140ms ease',
+                width: 26,
+                '&:hover': {
+                  backgroundColor: buttonHoverBackground,
+                  color: theme.palette.text.primary,
+                  transform: 'translateY(-1px)',
+                  boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
+                },
+                '&:active': {
+                  transform: 'translateY(0)',
+                  boxShadow: 'none',
+                },
+                '&:focus-visible': {
+                  outline: `1px solid ${theme.palette.primary.main}`,
+                  outlineOffset: '2px',
+                },
+              }}
+            >
+              <ArrowOutwardIcon
+                sx={{
+                  display: 'block',
+                  flexShrink: 0,
+                  fontSize: 17,
+                }}
+              />
+            </ButtonBase>
+          </Box>
+        </Box>
+        {utilityNav && (
+          <Box
+            component={motion.div}
+            layout
+            transition={utilityLayoutTransition}
+            sx={utilitySectionSx}
+          >
+            <GlobalActions />
+            <Box
+              component={motion.span}
+              layout
+              transition={utilityLayoutTransition}
+              sx={{ display: 'inline-flex', flexShrink: 0 }}
+            >
+              <ChatWidgetReopenIcon
+                inTitleBar
+                buttonSx={utilityModuleButtonSx}
+                iconSx={utilityModuleIconSx}
+              />
+            </Box>
+            <Box
+              component={motion.span}
+              layout
+              transition={utilityLayoutTransition}
+              sx={{ display: 'inline-flex', flexShrink: 0 }}
+            >
+              <QMailStatus
+                compact
+                buttonSx={utilityModuleButtonSx}
+                iconSx={utilityModuleIconSx}
+                tooltipPlacement="bottom"
+              />
+            </Box>
+            {utilityNav.extState === 'authenticated' && (
+              <Box
+                component={motion.span}
+                layout
+                transition={utilityLayoutTransition}
+                sx={{ display: 'inline-flex', flexShrink: 0 }}
+              >
+                <SubscriptionsStatus
+                  compact
+                  buttonSx={utilityModuleButtonSx}
+                  iconSx={utilityModuleIconSx}
+                  tooltipPlacement="bottom"
+                />
+              </Box>
+            )}
+            {utilityNav.extState === 'authenticated' && (
+              <Box
+                component={motion.span}
+                layout
+                transition={utilityLayoutTransition}
+                sx={{ display: 'inline-flex', flexShrink: 0 }}
+              >
+                <GeneralNotifications
+                  address={utilityNav.userInfo?.address}
+                  tooltipPlacement="bottom"
+                  compact
+                  buttonSx={utilityModuleButtonSx}
+                  iconSx={utilityModuleIconSx}
+                />
+              </Box>
+            )}
+            {hasActiveTasks && (
+              <Box
+                component={motion.span}
+                layout
+                transition={utilityLayoutTransition}
+                sx={{ display: 'inline-flex', flexShrink: 0 }}
+              >
+                <TaskManager
+                  getUserInfo={utilityNav.getUserInfo}
+                  buttonSx={utilityModuleButtonSx}
+                  iconSx={utilityModuleIconSx}
+                  tooltipSlotProps={tooltipSlotProps}
+                  tooltipTitle={tooltipTitle(
+                    t('core:message.generic.ongoing_transactions')
+                  )}
+                />
+              </Box>
+            )}
+            <Tooltip
+              title={tooltipTitle(t('core:action.logout'))}
+              placement="bottom"
+              arrow
+              slotProps={tooltipSlotProps}
+            >
+              <Box
+                component={motion.span}
+                layout
+                transition={utilityLayoutTransition}
+                sx={{ display: 'inline-flex', flexShrink: 0 }}
+              >
+                <IconButton
+                  size="small"
+                  onClick={utilityNav.onLogout}
+                  sx={utilityModuleButtonSx}
+                  aria-label={t('core:action.logout')}
+                >
+                  <LogoutRoundedIcon sx={utilityModuleIconSx} />
+                </IconButton>
+              </Box>
+            </Tooltip>
+          </Box>
+        )}
         </Box>
       </Box>
-    </Box>
+    </>
   );
 }
diff --git a/src/components/Desktop/SubscriptionsStatus.tsx b/src/components/Desktop/SubscriptionsStatus.tsx
new file mode 100644
index 00000000..eefa889d
--- /dev/null
+++ b/src/components/Desktop/SubscriptionsStatus.tsx
@@ -0,0 +1,685 @@
+import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
+import ListAltRoundedIcon from '@mui/icons-material/ListAltRounded';
+import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
+import {
+  Box,
+  ButtonBase,
+  CircularProgress,
+  Divider,
+  Popover,
+  Tooltip,
+  Typography,
+  alpha,
+  useTheme,
+} from '@mui/material';
+import { useAtomValue } from 'jotai';
+import { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  managedSubscriptionsAtom,
+  managedSubscriptionsLoadingAtom,
+  mySubscriptionsAtom,
+  subscriptionsLoadingAtom,
+} from '../../atoms/global';
+import { useInitializeMySubscriptions } from '../../subscriptions/useInitializeMySubscriptions';
+import { executeEvent } from '../../utils/events';
+
+type SubscriptionsStatusProps = {
+  buttonSx?: any;
+  compact?: boolean;
+  iconSx?: any;
+  tooltipPlacement?: 'bottom' | 'left' | 'right' | 'top';
+};
+
+export function SubscriptionsStatus({
+  buttonSx,
+  compact = false,
+  iconSx,
+  tooltipPlacement = 'bottom',
+}: SubscriptionsStatusProps) {
+  useInitializeMySubscriptions();
+
+  const theme = useTheme();
+  const isDarkMode = theme.palette.mode === 'dark';
+  const { t } = useTranslation(['group']);
+
+  const formatTimeUntil = useCallback(
+    (timestamp: number | null | undefined) => {
+      if (!timestamp) return '';
+      const diff = timestamp - Date.now();
+      if (diff <= 0) return t('group:subscription.relative_soon');
+      const minutes = Math.floor(diff / 60_000);
+      if (minutes < 60) {
+        return t('group:subscription.relative_in_minutes', { count: minutes });
+      }
+      const hours = Math.floor(diff / 3_600_000);
+      if (hours < 24) {
+        return t('group:subscription.relative_in_hours', { count: hours });
+      }
+      const days = Math.floor(diff / 86_400_000);
+      if (days < 30) {
+        return t('group:subscription.relative_in_days', { count: days });
+      }
+      const months = Math.floor(days / 30);
+      return t('group:subscription.relative_in_months', { count: months });
+    },
+    [t]
+  );
+
+  const openSubscriptionTab = useCallback(
+    (path?: string) => {
+      executeEvent('addTab', {
+        data: {
+          name: t('group:subscription.tab_subscriptions'),
+          navigateIfAlreadyOpen: true,
+          path,
+          service: 'APP',
+        },
+      });
+      executeEvent('open-apps-mode', {});
+    },
+    [t]
+  );
+
+  const openSubWireTab = useCallback(() => {
+    executeEvent('addTab', {
+      data: {
+        name: t('group:subscription.tab_subwire'),
+        navigateIfAlreadyOpen: true,
+        service: 'APP',
+      },
+    });
+    executeEvent('open-apps-mode', {});
+  }, [t]);
+
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const mySubscriptions = useAtomValue(mySubscriptionsAtom);
+  const managedSubscriptions = useAtomValue(managedSubscriptionsAtom);
+  const subscriptionsLoading = useAtomValue(subscriptionsLoadingAtom);
+  const managedLoading = useAtomValue(managedSubscriptionsLoadingAtom);
+  const isLoading = subscriptionsLoading || managedLoading;
+
+  const paymentNeededSubscriptions = useMemo(
+    () =>
+      (mySubscriptions ?? []).filter(
+        (subscription: any) => subscription?.status === 'payment-needed'
+      ),
+    [mySubscriptions]
+  );
+  const activeSubscriptions = useMemo(
+    () =>
+      (mySubscriptions ?? []).filter(
+        (subscription: any) => subscription?.status === 'active'
+      ),
+    [mySubscriptions]
+  );
+  const managedActionSubscriptions = useMemo(
+    () =>
+      (managedSubscriptions ?? []).filter(
+        (entry: any) => (entry?.actions?.totalActions ?? 0) > 0
+      ),
+    [managedSubscriptions]
+  );
+  const managedQuietSubscriptions = useMemo(
+    () =>
+      (managedSubscriptions ?? []).filter(
+        (entry: any) => (entry?.actions?.totalActions ?? 0) === 0
+      ),
+    [managedSubscriptions]
+  );
+
+  const totalActions =
+    paymentNeededSubscriptions.length +
+    managedActionSubscriptions.reduce(
+      (sum: number, entry: any) => sum + (entry?.actions?.totalActions ?? 0),
+      0
+    );
+  const hasContent =
+    paymentNeededSubscriptions.length > 0 ||
+    activeSubscriptions.length > 0 ||
+    managedActionSubscriptions.length > 0 ||
+    managedQuietSubscriptions.length > 0;
+
+  const subscriptionsTitle = t('group:subscription.subscriptions', {
+    postProcess: 'capitalizeFirstChar',
+  });
+  const tooltipLabel =
+    totalActions > 0
+      ? t('group:subscription.tooltip_actions_needed', {
+          count: totalActions,
+          title: subscriptionsTitle,
+        })
+      : subscriptionsTitle;
+
+  const panelBorderColor = isDarkMode
+    ? alpha('#A9BCD8', 0.18)
+    : theme.palette.divider;
+  const itemBorderColor = isDarkMode
+    ? alpha('#A9BCD8', 0.13)
+    : alpha(theme.palette.divider, 0.92);
+  const itemBackground = isDarkMode
+    ? alpha('#FFFFFF', 0.032)
+    : theme.palette.action.hover;
+  const itemHoverBackground = isDarkMode
+    ? alpha('#FFFFFF', 0.055)
+    : alpha(theme.palette.primary.main, 0.07);
+  const itemHoverBorderColor = isDarkMode
+    ? alpha('#A9BCD8', 0.22)
+    : alpha(theme.palette.divider, 1);
+
+  const panelLinkColor = isDarkMode
+    ? theme.palette.primary.light
+    : theme.palette.primary.main;
+  const panelLinkHoverColor = isDarkMode
+    ? theme.palette.primary.main
+    : theme.palette.primary.dark;
+
+  const headerIconColor = isDarkMode
+    ? theme.palette.primary.light
+    : theme.palette.primary.main;
+
+  const sectionTitleSx = {
+    color: theme.palette.text.primary,
+    fontSize: '0.78rem',
+    fontWeight: 700,
+    letterSpacing: '0.01em',
+  } as const;
+
+  const renderSubscriptionRow = (subscription: any, tone: 'active' | 'due') => {
+    const statusColor =
+      tone === 'due' ? theme.palette.warning.main : theme.palette.success.main;
+    const dueText = formatTimeUntil(subscription?.nextPaymentDue);
+
+    return (
+      <ButtonBase
+        key={subscription?.id}
+        onClick={() => {
+          setAnchorEl(null);
+          openSubscriptionTab(subscription?.link);
+        }}
+        sx={{
+          alignItems: 'center',
+          backgroundColor: itemBackground,
+          border: `1px solid ${itemBorderColor}`,
+          borderLeft: `3px solid ${alpha(statusColor, 0.86)}`,
+          borderRadius: '12px',
+          display: 'flex',
+          gap: 1.25,
+          p: 1.35,
+          textAlign: 'left',
+          width: '100%',
+          '&:hover': {
+            backgroundColor: itemHoverBackground,
+            borderColor: itemHoverBorderColor,
+          },
+        }}
+      >
+        <Box sx={{ flex: '1 1 auto', minWidth: 0 }}>
+          <Typography
+            sx={{
+              color: theme.palette.text.primary,
+              fontSize: '0.86rem',
+              fontWeight: 700,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {subscription?.title ||
+              t('group:subscription.row_fallback_title', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+          </Typography>
+          <Typography
+            sx={{
+              color: alpha(theme.palette.text.secondary, 0.9),
+              fontSize: '0.74rem',
+              lineHeight: 1.45,
+              mt: 0.25,
+            }}
+          >
+            {subscription?.ownerName
+              ? t('group:subscription.by_creator', {
+                  name: subscription.ownerName,
+                })
+              : t('group:subscription.creator_fallback')}
+          </Typography>
+          <Typography
+            sx={{
+              color: alpha(theme.palette.text.secondary, 0.68),
+              fontSize: '0.72rem',
+              lineHeight: 1.45,
+            }}
+          >
+            {t('group:subscription.price_line', {
+              price: subscription?.priceQort,
+              interval: subscription?.billingInterval,
+            })}
+            {tone === 'active' && dueText
+              ? t('group:subscription.expires_suffix', { time: dueText })
+              : ''}
+          </Typography>
+        </Box>
+        <Box
+          sx={{
+            alignItems: 'center',
+            color: statusColor,
+            display: 'flex',
+            flexShrink: 0,
+            fontSize: '0.68rem',
+            fontWeight: 800,
+            gap: 0.55,
+            letterSpacing: '0.04em',
+            textTransform: 'uppercase',
+          }}
+        >
+          <Box
+            sx={{
+              bgcolor: statusColor,
+              borderRadius: '50%',
+              height: 7,
+              width: 7,
+            }}
+          />
+          {tone === 'due'
+            ? t('group:subscription.status_due')
+            : t('group:subscription.status_active')}
+        </Box>
+      </ButtonBase>
+    );
+  };
+
+  const renderManagedRow = (entry: any, hasAction: boolean) => {
+    const accentColor = hasAction
+      ? theme.palette.warning.main
+      : theme.palette.info.main;
+    const actionCount = entry?.actions?.totalActions ?? 0;
+    const pendingJoinRequests = entry?.actions?.pendingJoinRequests ?? 0;
+    const needsReEncryption = !!entry?.actions?.needsReEncryption;
+
+    const badgeBoxSx = {
+      alignItems: 'center',
+      color: accentColor,
+      display: 'flex',
+      flexShrink: 0,
+      fontSize: '0.68rem',
+      fontWeight: 800,
+      gap: 0.55,
+      letterSpacing: '0.04em',
+      textTransform: 'uppercase',
+    } as const;
+
+    return (
+      <ButtonBase
+        key={entry?.groupId}
+        onClick={() => {
+          setAnchorEl(null);
+          openSubscriptionTab(entry?.url);
+        }}
+        sx={{
+          alignItems: 'center',
+          backgroundColor: itemBackground,
+          border: `1px solid ${itemBorderColor}`,
+          borderLeft: `3px solid ${alpha(accentColor, 0.86)}`,
+          borderRadius: '12px',
+          display: 'flex',
+          gap: 1.25,
+          p: 1.35,
+          textAlign: 'left',
+          width: '100%',
+          '&:hover': {
+            backgroundColor: itemHoverBackground,
+            borderColor: itemHoverBorderColor,
+          },
+        }}
+      >
+        <Box sx={{ flex: '1 1 auto', minWidth: 0 }}>
+          <Typography
+            sx={{
+              color: theme.palette.text.primary,
+              fontSize: '0.86rem',
+              fontWeight: 700,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {entry?.group?.groupName ||
+              t('group:subscription.managed_fallback', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+          </Typography>
+          {entry?.group?.description ? (
+            <Typography
+              sx={{
+                color: alpha(theme.palette.text.secondary, 0.9),
+                fontSize: '0.74rem',
+                lineHeight: 1.45,
+                mt: 0.25,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {entry.group.description}
+            </Typography>
+          ) : null}
+          <Typography
+            sx={{
+              color: alpha(theme.palette.text.secondary, 0.68),
+              fontSize: '0.72rem',
+              lineHeight: 1.45,
+            }}
+          >
+            {t('group:subscription.members', {
+              count: entry?.group?.memberCount ?? 0,
+            })}
+            {pendingJoinRequests > 0
+              ? t('group:subscription.join_requests_suffix', {
+                  count: pendingJoinRequests,
+                })
+              : ''}
+            {needsReEncryption
+              ? t('group:subscription.re_encryption_suffix')
+              : ''}
+          </Typography>
+        </Box>
+        <Box sx={badgeBoxSx}>
+          <Box
+            sx={{
+              bgcolor: accentColor,
+              borderRadius: '50%',
+              height: 7,
+              width: 7,
+            }}
+          />
+          {hasAction
+            ? t('group:subscription.actions_badge', { count: actionCount })
+            : t('group:subscription.status_owner')}
+        </Box>
+      </ButtonBase>
+    );
+  };
+
+  return (
+    <>
+      <ButtonBase
+        aria-label={tooltipLabel}
+        onClick={(event) => {
+          event.stopPropagation();
+          setAnchorEl(event.currentTarget);
+        }}
+        sx={{
+          position: 'relative',
+          ...(compact && {
+            alignItems: 'center',
+            borderRadius: 1,
+            display: 'flex',
+            height: 32,
+            justifyContent: 'center',
+            width: 32,
+          }),
+          ...(buttonSx || {}),
+        }}
+      >
+        <Tooltip
+          arrow
+          placement={tooltipPlacement}
+          title={
+            <span
+              style={{
+                color: theme.palette.text.primary,
+                fontSize: '14px',
+                fontWeight: 600,
+                textTransform: 'uppercase',
+              }}
+            >
+              {tooltipLabel}
+            </span>
+          }
+          slotProps={{
+            arrow: { sx: { color: theme.palette.background.paper } },
+            tooltip: {
+              sx: {
+                backgroundColor: theme.palette.background.paper,
+                color: theme.palette.text.primary,
+              },
+            },
+          }}
+        >
+          <ListAltRoundedIcon
+            sx={{
+              color:
+                totalActions > 0
+                  ? theme.palette.warning.main
+                  : theme.palette.text.secondary,
+              fontSize: compact ? 17 : 19,
+              ...(iconSx || {}),
+            }}
+          />
+        </Tooltip>
+        {totalActions > 0 ? (
+          <Box
+            component="span"
+            sx={{
+              bgcolor: theme.palette.warning.main,
+              borderRadius: '7px',
+              color: '#fff',
+              fontSize: '0.6rem',
+              fontWeight: 700,
+              height: 14,
+              lineHeight: '14px',
+              minWidth: 14,
+              pointerEvents: 'none',
+              position: 'absolute',
+              px: '3px',
+              right: compact ? 0 : -5,
+              textAlign: 'center',
+              top: compact ? 0 : -5,
+            }}
+          >
+            {totalActions > 99 ? '99+' : totalActions}
+          </Box>
+        ) : null}
+      </ButtonBase>
+
+      <Popover
+        anchorEl={anchorEl}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+        onClose={() => setAnchorEl(null)}
+        open={!!anchorEl}
+        slotProps={{
+          paper: {
+            sx: isDarkMode
+              ? {
+                  background: '#111820',
+                  backgroundImage: 'none',
+                  border: `1px solid ${panelBorderColor}`,
+                  borderRadius: '16px',
+                  boxShadow: `0 22px 46px ${alpha('#000', 0.44)}`,
+                  mt: 1,
+                  overflow: 'hidden',
+                }
+              : {
+                  background: theme.palette.background.paper,
+                  backgroundImage: 'none',
+                  border: `1px solid ${theme.palette.divider}`,
+                  borderRadius: '16px',
+                  boxShadow: `0 16px 40px ${alpha('#1E3248', 0.1)}`,
+                  mt: 1,
+                  overflow: 'hidden',
+                },
+          },
+        }}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+      >
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1.25,
+            maxHeight: '64vh',
+            overflow: 'auto',
+            p: 1.35,
+            width: 390,
+          }}
+        >
+          <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>
+            <ListAltRoundedIcon
+              sx={{ color: headerIconColor, fontSize: 18 }}
+            />
+            <Typography
+              sx={{
+                color: theme.palette.text.primary,
+                fontSize: '0.95rem',
+                fontWeight: 700,
+              }}
+            >
+              {subscriptionsTitle}
+            </Typography>
+          </Box>
+
+          {isLoading && !hasContent ? (
+            <Box
+              sx={{
+                alignItems: 'center',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 1,
+                justifyContent: 'center',
+                minHeight: 150,
+              }}
+            >
+              <CircularProgress size={22} />
+              <Typography
+                sx={{
+                  color: alpha(theme.palette.text.secondary, 0.82),
+                  fontSize: '0.78rem',
+                }}
+              >
+                {t('group:subscription.loading', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+              </Typography>
+            </Box>
+          ) : hasContent ? (
+            <>
+              {(paymentNeededSubscriptions.length > 0 ||
+                managedActionSubscriptions.length > 0) && (
+                <Box sx={{ display: 'grid', gap: 0.75 }}>
+                  <Typography sx={sectionTitleSx}>
+                    {t('group:subscription.section_needs_action', {
+                      postProcess: 'capitalizeFirstChar',
+                    })}
+                  </Typography>
+                  {paymentNeededSubscriptions.map((subscription: any) =>
+                    renderSubscriptionRow(subscription, 'due')
+                  )}
+                  {managedActionSubscriptions.map((entry: any) =>
+                    renderManagedRow(entry, true)
+                  )}
+                </Box>
+              )}
+
+              {(activeSubscriptions.length > 0 ||
+                managedQuietSubscriptions.length > 0) && (
+                <Box sx={{ display: 'grid', gap: 0.75 }}>
+                  <Typography sx={sectionTitleSx}>
+                    {t('group:subscription.section_active', {
+                      postProcess: 'capitalizeFirstChar',
+                    })}
+                  </Typography>
+                  {activeSubscriptions.map((subscription: any) =>
+                    renderSubscriptionRow(subscription, 'active')
+                  )}
+                  {managedQuietSubscriptions.map((entry: any) =>
+                    renderManagedRow(entry, false)
+                  )}
+                </Box>
+              )}
+
+              <Divider sx={{ borderColor: panelBorderColor }} />
+              <ButtonBase
+                onClick={() => {
+                  setAnchorEl(null);
+                  openSubscriptionTab();
+                }}
+                sx={{
+                  alignItems: 'center',
+                  alignSelf: 'flex-start',
+                  color: panelLinkColor,
+                  display: 'inline-flex',
+                  fontSize: '0.78rem',
+                  fontWeight: 700,
+                  gap: 0.45,
+                  px: 0.2,
+                  py: 0.35,
+                  '&:hover': { color: panelLinkHoverColor },
+                }}
+              >
+                {t('group:subscription.open_subscriptions', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+                <OpenInNewRoundedIcon sx={{ fontSize: '0.9rem' }} />
+              </ButtonBase>
+            </>
+          ) : (
+            <Box
+              sx={{
+                alignItems: 'center',
+                display: 'flex',
+                flexDirection: 'column',
+                minHeight: 165,
+                px: 2,
+                py: 2.5,
+                textAlign: 'center',
+              }}
+            >
+              <Typography
+                sx={{
+                  color: theme.palette.text.primary,
+                  fontSize: '0.92rem',
+                  fontWeight: 700,
+                }}
+              >
+                {t('group:subscription.empty_title')}
+              </Typography>
+              <Typography
+                sx={{
+                  color: alpha(theme.palette.text.secondary, 0.78),
+                  fontSize: '0.78rem',
+                  lineHeight: 1.52,
+                  maxWidth: 280,
+                  mt: 0.65,
+                }}
+              >
+                {t('group:subscription.empty_body')}
+              </Typography>
+              <ButtonBase
+                onClick={() => {
+                  setAnchorEl(null);
+                  openSubWireTab();
+                }}
+                sx={{
+                  alignItems: 'center',
+                  color: panelLinkColor,
+                  display: 'inline-flex',
+                  fontSize: '0.78rem',
+                  fontWeight: 700,
+                  gap: 0.25,
+                  mt: 1.35,
+                  '&:hover': { color: panelLinkHoverColor },
+                }}
+              >
+                {t('group:subscription.open_subwire', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+                <ChevronRightRoundedIcon sx={{ fontSize: '1rem' }} />
+              </ButtonBase>
+            </Box>
+          )}
+        </Box>
+      </Popover>
+    </>
+  );
+}
diff --git a/src/components/Embeds/embed-utils.ts b/src/components/Embeds/embed-utils.ts
index 46811197..b9ca54ee 100644
--- a/src/components/Embeds/embed-utils.ts
+++ b/src/components/Embeds/embed-utils.ts
@@ -1,9 +1,9 @@
+import { decodeHTML } from 'entities';
+
 import { QORTAL_PROTOCOL } from '../../constants/constants';
 
-function decodeHTMLEntities(str: string) {
-  const txt = document.createElement('textarea');
-  txt.innerHTML = str;
-  return txt.value;
+function decodeHTMLEntities(str: string): string {
+  return decodeHTML(str);
 }
 
 export const parseQortalLink = (link: string) => {
diff --git a/src/components/GeneralNotifications.tsx b/src/components/GeneralNotifications.tsx
index a1251187..9aa13c1f 100644
--- a/src/components/GeneralNotifications.tsx
+++ b/src/components/GeneralNotifications.tsx
@@ -1,191 +1,737 @@
-import { useState } from 'react';
+import AppsIcon from '@mui/icons-material/Apps';
+import CloseIcon from '@mui/icons-material/Close';
+import MailOutlineIcon from '@mui/icons-material/MailOutline';
+import NotificationsActiveRoundedIcon from '@mui/icons-material/NotificationsActiveRounded';
+import NotificationsRoundedIcon from '@mui/icons-material/NotificationsRounded';
+import SettingsIcon from '@mui/icons-material/Settings';
 import {
+  Avatar,
   Box,
   ButtonBase,
   Card,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  List,
   MenuItem,
   Popover,
+  Switch,
   Tooltip,
   Typography,
+  alpha,
   useTheme,
 } from '@mui/material';
-import NotificationsIcon from '@mui/icons-material/Notifications';
-import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
-import { formatDate } from '../utils/time';
-import { useHandlePaymentNotification } from '../hooks/useHandlePaymentNotification';
-import { executeEvent } from '../utils/events';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { getBaseApiReact } from '../App';
+import {
+  customWebsocketSubscriptionsAtom,
+  isNotificationSeenInAppFromKeyTimes,
+  lastPaymentSeenTimestampAtom,
+  notificationSeenInAppKeyTimesAtom,
+  notificationSeenInAppKeysAtom,
+  paymentNotificationsAtom,
+} from '../atoms/global';
+import LogoSelected from '../assets/svgs/LogoSelected.svg';
+import {
+  getAppsWithNotificationPermission,
+  getNotificationOsPushDisabledMap,
+  getNotificationPermissionKey,
+  setNotificationOsPushDisabled,
+  setPermission,
+} from '../qortal/qortal-requests';
+import { extractComponents } from './Chat/MessageDisplay';
+import {
+  executeEvent,
+  subscribeToEvent,
+  unsubscribeFromEvent,
+} from '../utils/events';
+import { formatDate } from '../utils/time';
 
-export const GeneralNotifications = ({ address, tooltipPlacement = 'left' }) => {
-  const [anchorEl, setAnchorEl] = useState(null);
+const RESOURCE_EVENT = 'RESOURCE_PUBLISHED';
 
-  const {
-    latestTx,
-    getNameOrAddressOfSenderMiddle,
-    hasNewPayment,
-    setLastEnteredTimestampPayment,
-    nameAddressOfSender,
-  } = useHandlePaymentNotification(address);
+function toTimestampMs(value) {
+  if (value == null || typeof value !== 'number') return null;
+  return value < 1e12 ? value * 1000 : value;
+}
 
-  const handlePopupClick = (event) => {
-    event.stopPropagation(); // Prevent parent onClick from firing
-    setAnchorEl(event.currentTarget);
-  };
+function getNotificationTimestamp(notification) {
+  return toTimestampMs(
+    notification?.data?.created ??
+      notification?.data?.timestamp ??
+      notification?.timestamp
+  );
+}
 
-  const { t } = useTranslation([
-    'auth',
-    'core',
-    'group',
-    'question',
-    'tutorial',
-  ]);
+function getNotificationMessage(messageObj, currentLang, fallback) {
+  if (!messageObj || typeof messageObj !== 'object') return fallback;
+  const lang = (currentLang || 'en').split('-')[0];
+  return (
+    messageObj[lang]?.trim() ||
+    messageObj.en?.trim() ||
+    Object.values(messageObj).find((value: any) => value?.trim()) ||
+    fallback
+  );
+}
 
+export const GeneralNotifications = ({
+  tooltipPlacement = 'left',
+  compact = false,
+  buttonSx = undefined,
+  iconSx = undefined,
+}) => {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [settingsOpen, setSettingsOpen] = useState(false);
+  const [settingsApps, setSettingsApps] = useState<string[]>([]);
+  const [settingsLoading, setSettingsLoading] = useState(false);
+  const [osPushDisabledMap, setOsPushDisabledMap] = useState<
+    Record<string, boolean>
+  >({});
+  const notifications = useAtomValue(paymentNotificationsAtom);
+  const customSubscriptions = useAtomValue(customWebsocketSubscriptionsAtom);
+  const setCustomSubscriptions = useSetAtom(customWebsocketSubscriptionsAtom);
+  const lastSeenTimestamp = useAtomValue(lastPaymentSeenTimestampAtom);
+  const setLastSeenTimestamp = useSetAtom(lastPaymentSeenTimestampAtom);
+  const seenInAppKeyTimes = useAtomValue(notificationSeenInAppKeyTimesAtom);
+  const setSeenKeys = useSetAtom(notificationSeenInAppKeysAtom);
   const theme = useTheme();
+  const isDarkMode = theme.palette.mode === 'dark';
+  const { t, i18n } = useTranslation(['core']);
+
+  useEffect(() => {
+    const handler = (event) => {
+      const detail = event.detail;
+      if (detail?.address && Array.isArray(detail?.keys)) {
+        setSeenKeys({ address: detail.address, keys: detail.keys });
+      }
+    };
+    subscribeToEvent('notification-seen-in-app-updated', handler);
+    return () =>
+      unsubscribeFromEvent('notification-seen-in-app-updated', handler);
+  }, [setSeenKeys]);
+
+  const resourceNotifications = useMemo(
+    () =>
+      (notifications ?? []).filter((item) => item?.event === RESOURCE_EVENT),
+    [notifications]
+  );
+  const unseenCount = useMemo(() => {
+    return resourceNotifications.filter((notification) => {
+      const timestamp = getNotificationTimestamp(notification);
+      if (timestamp == null) return false;
+      if (isNotificationSeenInAppFromKeyTimes(notification, seenInAppKeyTimes))
+        return false;
+      return !lastSeenTimestamp || timestamp > lastSeenTimestamp;
+    }).length;
+  }, [resourceNotifications, seenInAppKeyTimes, lastSeenTimestamp]);
+
+  const hasNewNotifications = unseenCount > 0;
+  const NotificationIcon = hasNewNotifications
+    ? NotificationsActiveRoundedIcon
+    : NotificationsRoundedIcon;
+
+  const openSettings = () => {
+    setSettingsOpen(true);
+    setSettingsLoading(true);
+    Promise.all([
+      getAppsWithNotificationPermission(),
+      getNotificationOsPushDisabledMap(),
+    ])
+      .then(([apps, disabledMap]) => {
+        setSettingsApps(apps);
+        setOsPushDisabledMap(disabledMap || {});
+      })
+      .finally(() => setSettingsLoading(false));
+  };
 
   return (
     <>
       <ButtonBase
-        onClick={(e) => {
-          handlePopupClick(e);
+        aria-label="Notifications"
+        onClick={(event) => {
+          event.stopPropagation();
+          setAnchorEl(event.currentTarget);
+        }}
+        sx={{
+          position: 'relative',
+          ...(buttonSx || {}),
         }}
-        style={{}}
       >
         <Tooltip
+          arrow
+          placement={tooltipPlacement}
           title={
             <span
               style={{
                 color: theme.palette.text.primary,
                 fontSize: '14px',
-                fontWeight: 700,
+                fontWeight: 600,
                 textTransform: 'uppercase',
               }}
             >
-              {t('core:payment_notification')}
+              {t('message.generic.notifications', {
+                defaultValue: 'Notifications',
+              })}
             </span>
           }
-          placement={tooltipPlacement}
-          arrow
-          sx={{ fontSize: '24' }}
           slotProps={{
+            arrow: { sx: { color: theme.palette.background.paper } },
             tooltip: {
               sx: {
-                color: theme.palette.text.primary,
                 backgroundColor: theme.palette.background.paper,
-              },
-            },
-            arrow: {
-              sx: {
                 color: theme.palette.text.primary,
               },
             },
           }}
         >
-          <NotificationsIcon
+          <NotificationIcon
             sx={{
-              color: hasNewPayment
+              color: hasNewNotifications
                 ? theme.palette.other.unread
                 : theme.palette.text.secondary,
+              fontSize: compact ? 20 : undefined,
+              ...(iconSx || {}),
             }}
           />
         </Tooltip>
+        {hasNewNotifications && (
+          <Box
+            component="span"
+            sx={{
+              bgcolor: theme.palette.other.unread,
+              borderRadius: '7px',
+              color: '#fff',
+              fontSize: '0.6rem',
+              fontWeight: 700,
+              height: 14,
+              lineHeight: '14px',
+              minWidth: 14,
+              pointerEvents: 'none',
+              position: 'absolute',
+              px: '3px',
+              right: compact ? 0 : -5,
+              textAlign: 'center',
+              top: compact ? 0 : -5,
+            }}
+          >
+            {unseenCount > 99 ? '99+' : unseenCount}
+          </Box>
+        )}
       </ButtonBase>
 
       <Popover
-        open={!!anchorEl}
         anchorEl={anchorEl}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
         onClose={() => {
-          if (hasNewPayment) {
-            setLastEnteredTimestampPayment(Date.now());
-          }
+          if (hasNewNotifications) setLastSeenTimestamp(Date.now());
           setAnchorEl(null);
-        }} // Close popover on click outside
+        }}
+        open={!!anchorEl}
+        slotProps={{
+          paper: {
+            sx: isDarkMode
+              ? {
+                  background: '#111820',
+                  backgroundImage: 'none',
+                  border: `1px solid ${alpha('#A9BCD8', 0.18)}`,
+                  borderRadius: '16px',
+                  boxShadow: `0 22px 46px ${alpha('#000', 0.44)}`,
+                  mt: 1,
+                  overflow: 'hidden',
+                }
+              : {
+                  background: theme.palette.background.paper,
+                  backgroundImage: 'none',
+                  border: `1px solid ${theme.palette.divider}`,
+                  borderRadius: '16px',
+                  boxShadow: `0 16px 40px ${alpha('#1E3248', 0.1)}`,
+                  mt: 1,
+                  overflow: 'hidden',
+                },
+          },
+        }}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
       >
         <Box
           sx={{
-            alignItems: hasNewPayment ? 'flex-start' : 'center',
+            alignItems: resourceNotifications.length ? 'stretch' : 'center',
             display: 'flex',
             flexDirection: 'column',
+            gap: resourceNotifications.length ? 1 : 1.2,
             maxHeight: '60vh',
-            maxWidth: '100%',
             overflow: 'auto',
-            padding: '5px',
-            width: '300px',
+            ...(resourceNotifications.length
+              ? { pb: 1, pl: 1, pr: 1, pt: 5.5 }
+              : { p: '18px 20px' }),
+            position: 'relative',
+            width: 360,
           }}
         >
-          {!hasNewPayment && (
-            <Typography
-              sx={{
-                userSelect: 'none',
-              }}
-            >
-              {t('core:message.generic.no_notifications')}
-            </Typography>
+          <IconButton
+            aria-label="Notification settings"
+            onClick={(event) => {
+              event.stopPropagation();
+              openSettings();
+            }}
+            onMouseDown={(event) => event.stopPropagation()}
+            size="small"
+            sx={{
+              color: theme.palette.text.secondary,
+              pointerEvents: 'auto',
+              position: 'absolute',
+              right: 4,
+              top: 4,
+              zIndex: 2,
+            }}
+          >
+            <SettingsIcon fontSize="small" />
+          </IconButton>
+
+          {!resourceNotifications.length && (
+            <>
+              <NotificationIcon
+                sx={{
+                  color: alpha(theme.palette.text.secondary, 0.82),
+                  fontSize: 22,
+                  mt: 2,
+                }}
+              />
+              <Typography
+                sx={{
+                  color: theme.palette.text.primary,
+                  fontSize: '0.96rem',
+                  fontWeight: 600,
+                  textAlign: 'center',
+                }}
+              >
+                {t('message.generic.no_app_notifications', {
+                  defaultValue: 'No app notifications yet',
+                })}
+              </Typography>
+              <Typography
+                sx={{
+                  color: alpha(theme.palette.text.secondary, 0.76),
+                  fontSize: '0.78rem',
+                  lineHeight: 1.5,
+                  maxWidth: 250,
+                  textAlign: 'center',
+                }}
+              >
+                {t('message.generic.app_notifications_hint', {
+                  defaultValue: 'Q-App notifications will appear here',
+                })}
+              </Typography>
+            </>
           )}
-          {hasNewPayment && (
-            <MenuItem
-              sx={{
-                alignItems: 'flex-start',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '5px',
-                textWrap: 'auto',
-                width: '100%',
-              }}
-              onClick={() => {
-                setAnchorEl(null);
-                executeEvent('openWalletsApp', {});
-              }}
-            >
-              <Card
+
+          {resourceNotifications.map((notification, index) => {
+            const isQMail =
+              notification?.notificationId === 'q-mail-notification' ||
+              notification?.appName === 'Q-Mail';
+            const timestamp = getNotificationTimestamp(notification);
+            const unseen =
+              timestamp != null &&
+              (!lastSeenTimestamp || timestamp > lastSeenTimestamp) &&
+              !isNotificationSeenInAppFromKeyTimes(
+                notification,
+                seenInAppKeyTimes
+              );
+
+            return (
+              <MenuItem
+                key={
+                  notification?.data?.identifier ||
+                  notification?.data?.created ||
+                  index
+                }
+                onClick={() => {
+                  if (hasNewNotifications) setLastSeenTimestamp(Date.now());
+                  setAnchorEl(null);
+                  const link = notification?.link;
+                  if (!link) return;
+                  const data = extractComponents(link);
+                  if (!data) return;
+                  executeEvent('addTab', {
+                    data: { ...data, navigateIfAlreadyOpen: true },
+                  });
+                  executeEvent('open-apps-mode', {});
+                }}
                 sx={{
-                  backgroundColor: '#1F2023',
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: '5px',
-                  padding: '10px',
-                  width: '100%',
+                  borderRadius: '12px',
+                  display: 'block',
+                  p: 0,
+                  whiteSpace: 'normal',
+                  '&:hover': {
+                    bgcolor: isDarkMode
+                      ? alpha('#FFFFFF', 0.045)
+                      : alpha(theme.palette.primary.main, 0.06),
+                  },
                 }}
               >
-                <Box
+                <Card
+                  elevation={0}
                   sx={{
-                    alignItems: 'center',
+                    bgcolor: unseen
+                      ? isDarkMode
+                        ? alpha(theme.palette.other.unread, 0.11)
+                        : alpha(theme.palette.other.unread, 0.12)
+                      : isDarkMode
+                        ? alpha('#FFFFFF', 0.025)
+                        : theme.palette.action.hover,
+                    border: `1px solid ${
+                      unseen
+                        ? alpha(theme.palette.other.unread, 0.36)
+                        : isDarkMode
+                          ? alpha('#A9BCD8', 0.12)
+                          : alpha(theme.palette.divider, 0.95)
+                    }`,
+                    borderRadius: '12px',
                     display: 'flex',
-                    gap: '5px',
-                    justifyContent: 'space-between',
+                    gap: 1.2,
+                    p: 1.35,
                   }}
                 >
-                  <AccountBalanceWalletIcon
+                  <Avatar
+                    alt={notification?.appName || 'App'}
+                    src={`${getBaseApiReact()}${
+                      notification?.image ||
+                      `/arbitrary/THUMBNAIL/${notification?.appName || 'Q-Mail'}/qortal_avatar?async=true`
+                    }`}
                     sx={{
-                      color: theme.palette.text.primary,
+                      bgcolor: isDarkMode
+                        ? alpha('#FFFFFF', 0.06)
+                        : alpha(theme.palette.primary.main, 0.08),
+                      height: 34,
+                      width: 34,
+                      '& img': { objectFit: 'contain' },
                     }}
-                  />
-                  {formatDate(latestTx?.timestamp)}
-                </Box>
+                  >
+                    {isQMail ? (
+                      <MailOutlineIcon
+                        sx={{
+                          color: theme.palette.primary.main,
+                          fontSize: 18,
+                        }}
+                      />
+                    ) : (
+                      <img
+                        alt="app-icon"
+                        src={LogoSelected}
+                        style={{ height: 'auto', width: 20 }}
+                      />
+                    )}
+                  </Avatar>
+                  <Box sx={{ minWidth: 0 }}>
+                    <Box
+                      sx={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        gap: 1,
+                        justifyContent: 'space-between',
+                      }}
+                    >
+                      <Typography
+                        sx={{
+                          color: theme.palette.text.primary,
+                          fontSize: '0.86rem',
+                          fontWeight: 650,
+                        }}
+                      >
+                        {notification?.appName || 'Q-App'}
+                      </Typography>
+                      {timestamp && (
+                        <Typography
+                          sx={{
+                            color: alpha(theme.palette.text.secondary, 0.72),
+                            fontSize: '0.72rem',
+                            whiteSpace: 'nowrap',
+                          }}
+                        >
+                          {formatDate(timestamp)}
+                        </Typography>
+                      )}
+                    </Box>
+                    <Typography
+                      sx={{
+                        color: alpha(theme.palette.text.secondary, 0.92),
+                        fontSize: '0.8rem',
+                        lineHeight: 1.45,
+                        mt: 0.35,
+                        wordBreak: 'break-word',
+                      }}
+                    >
+                      {getNotificationMessage(
+                        notification?.message,
+                        i18n.language,
+                        t('message.generic.new_notification', {
+                          defaultValue: 'New notification',
+                        })
+                      )}
+                    </Typography>
+                  </Box>
+                </Card>
+              </MenuItem>
+            );
+          })}
+        </Box>
+      </Popover>
 
+      <Dialog
+        fullWidth
+        maxWidth="sm"
+        onClose={() => setSettingsOpen(false)}
+        open={settingsOpen}
+        PaperProps={{
+          sx: isDarkMode
+            ? {
+                background: '#121821',
+                backgroundImage: 'none',
+                border: `1px solid ${alpha('#A9BCD8', 0.18)}`,
+                borderRadius: '18px',
+                boxShadow: `0 26px 56px ${alpha('#000', 0.46)}`,
+                overflow: 'hidden',
+              }
+            : {
+                background: theme.palette.background.paper,
+                backgroundImage: 'none',
+                border: `1px solid ${theme.palette.divider}`,
+                borderRadius: '18px',
+                boxShadow: `0 20px 48px ${alpha('#1E3248', 0.12)}`,
+                overflow: 'hidden',
+              },
+        }}
+      >
+        <DialogTitle
+          sx={{
+            alignItems: 'center',
+            borderBottom: `1px solid ${
+              isDarkMode ? alpha('#A9BCD8', 0.1) : theme.palette.divider
+            }`,
+            color: theme.palette.text.primary,
+            display: 'flex',
+            fontSize: '1.08rem',
+            fontWeight: 650,
+            justifyContent: 'space-between',
+            px: 3,
+            py: 2.35,
+          }}
+        >
+          {t('message.generic.notification_settings', {
+            defaultValue: 'Notification settings',
+          })}
+          <IconButton
+            onClick={() => setSettingsOpen(false)}
+            size="small"
+            sx={{
+              color: alpha(theme.palette.text.secondary, 0.92),
+              '&:hover': {
+                backgroundColor: isDarkMode
+                  ? alpha('#FFFFFF', 0.05)
+                  : alpha(theme.palette.action.active, 0.06),
+                color: theme.palette.text.primary,
+              },
+            }}
+          >
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent
+          sx={{
+            display: 'grid',
+            gap: 1.9,
+            px: 3,
+            pb: 2.9,
+            '&&': {
+              pt: 3.1,
+            },
+          }}
+        >
+          <Box
+            sx={{
+              color: alpha(theme.palette.text.secondary, 0.82),
+              fontSize: '0.84rem',
+              lineHeight: 1.52,
+            }}
+          >
+            {t('message.generic.notification_settings_desc', {
+              defaultValue:
+                'Choose which apps can send desktop alerts while keeping in-Hub activity visible.',
+            })}
+          </Box>
+          {settingsLoading ? (
+            <Typography
+              sx={{ color: alpha(theme.palette.text.secondary, 0.82) }}
+            >
+              {t('message.generic.loading', { defaultValue: 'Loading...' })}
+            </Typography>
+          ) : settingsApps.length === 0 ? (
+            <Box
+              sx={{
+                color: alpha(theme.palette.text.secondary, 0.82),
+                fontSize: '0.92rem',
+                lineHeight: 1.55,
+                pt: 0.1,
+              }}
+            >
+              {t('message.generic.no_notification_apps', {
+                defaultValue: 'No apps have notification permission yet.',
+              })}
+            </Box>
+          ) : (
+            <List disablePadding sx={{ display: 'grid', gap: 1.2 }}>
+              {settingsApps.map((appName) => (
                 <Box
+                  key={appName}
                   sx={{
-                    display: 'flex',
                     alignItems: 'center',
-                    gap: '5px',
+                    backgroundColor: isDarkMode
+                      ? alpha('#FFFFFF', 0.026)
+                      : theme.palette.action.hover,
+                    border: `1px solid ${
+                      isDarkMode
+                        ? alpha('#A9BCD8', 0.12)
+                        : theme.palette.divider
+                    }`,
+                    borderRadius: '14px',
+                    display: 'flex',
+                    gap: 2,
                     justifyContent: 'space-between',
+                    px: 1.7,
+                    py: 1.55,
                   }}
                 >
-                  <Typography>{latestTx?.amount}</Typography>
+                  <Box sx={{ alignItems: 'center', display: 'flex', gap: 1.2 }}>
+                    <Box
+                      sx={{
+                        alignItems: 'center',
+                        backgroundColor: alpha(
+                          theme.palette.primary.main,
+                          0.12
+                        ),
+                        border: `1px solid ${alpha(theme.palette.primary.main, 0.22)}`,
+                        borderRadius: '10px',
+                        color: alpha(theme.palette.primary.light, 0.96),
+                        display: 'inline-flex',
+                        height: 34,
+                        justifyContent: 'center',
+                        width: 34,
+                      }}
+                    >
+                      <AppsIcon sx={{ fontSize: 18 }} />
+                    </Box>
+                    <Box sx={{ minWidth: 0 }}>
+                      <Typography
+                        sx={{
+                          color: theme.palette.text.primary,
+                          fontSize: '0.92rem',
+                          fontWeight: 600,
+                        }}
+                      >
+                        {appName}
+                      </Typography>
+                      <Typography
+                        sx={{
+                          color: alpha(theme.palette.text.secondary, 0.76),
+                          fontSize: '0.76rem',
+                          lineHeight: 1.45,
+                          mt: 0.3,
+                        }}
+                      >
+                        {t('message.generic.disable_os_push_desc', {
+                          defaultValue:
+                            'Mute desktop alerts for this app while keeping in-Hub activity visible.',
+                        })}
+                      </Typography>
+                    </Box>
+                  </Box>
+                  <Box sx={{ alignItems: 'center', display: 'flex', gap: 1.2 }}>
+                    <Typography
+                      sx={{
+                        color: alpha(theme.palette.text.secondary, 0.82),
+                        fontSize: '0.78rem',
+                        fontWeight: 500,
+                      }}
+                    >
+                      {t('message.generic.disable_os_push', {
+                        defaultValue: 'Disable OS push',
+                      })}
+                    </Typography>
+                    <Switch
+                      checked={osPushDisabledMap[appName] === true}
+                      onChange={async (_, checked) => {
+                        await setNotificationOsPushDisabled(appName, checked);
+                        setOsPushDisabledMap((prev) => ({
+                          ...prev,
+                          [appName]: checked,
+                        }));
+                      }}
+                      size="small"
+                    />
+                    <ButtonBase
+                      onClick={async () => {
+                        const notificationIds = (customSubscriptions ?? [])
+                          .filter(
+                            (sub) =>
+                              sub?.event === RESOURCE_EVENT &&
+                              sub?.appName === appName
+                          )
+                          .map((sub) => sub?.notificationId)
+                          .filter(Boolean);
+                        await setPermission(
+                          getNotificationPermissionKey(appName),
+                          false
+                        );
+                        setCustomSubscriptions((prev) =>
+                          (prev ?? []).filter(
+                            (sub) =>
+                              !(
+                                sub?.event === RESOURCE_EVENT &&
+                                sub?.appName === appName
+                              )
+                          )
+                        );
+                        if (notificationIds.length) {
+                          executeEvent(
+                            'custom-ws-unsubscribe',
+                            notificationIds
+                          );
+                        }
+                        executeEvent(
+                          'notifications-websocket-reconnect',
+                          undefined
+                        );
+                        setSettingsApps((prev) =>
+                          prev.filter((name) => name !== appName)
+                        );
+                      }}
+                      sx={{
+                        borderRadius: '10px',
+                        color: theme.palette.error.light,
+                        fontSize: '0.8rem',
+                        fontWeight: 600,
+                        px: 1.1,
+                        py: 0.6,
+                        '&:hover': {
+                          backgroundColor: alpha(
+                            theme.palette.error.main,
+                            0.08
+                          ),
+                        },
+                      }}
+                    >
+                      {t('message.generic.revoke_permission', {
+                        defaultValue: 'Revoke',
+                      })}
+                    </ButtonBase>
+                  </Box>
                 </Box>
-
-                <Typography
-                  sx={{
-                    fontSize: '0.8rem',
-                  }}
-                >
-                  {nameAddressOfSender.current[latestTx?.creatorAddress] ||
-                    getNameOrAddressOfSenderMiddle(latestTx?.creatorAddress)}
-                </Typography>
-              </Card>
-            </MenuItem>
+              ))}
+            </List>
           )}
-        </Box>
-      </Popover>
+        </DialogContent>
+      </Dialog>
     </>
   );
 };
diff --git a/src/components/Group/AddGroup.tsx b/src/components/Group/AddGroup.tsx
index 2aa59747..ccee85a6 100644
--- a/src/components/Group/AddGroup.tsx
+++ b/src/components/Group/AddGroup.tsx
@@ -37,7 +37,7 @@ import { useSetAtom } from 'jotai';
 import { txListAtom } from '../../atoms/global';
 import { TransitionUp } from '../../common/Transitions.tsx';
 
-export const AddGroup = ({ address, open, setOpen }) => {
+export const AddGroup = ({ address, open, setOpen, initialTab = 0 }) => {
   const { show } = useContext(QORTAL_APP_CONTEXT);
   const setTxList = useSetAtom(txListAtom);
 
@@ -48,7 +48,7 @@ export const AddGroup = ({ address, open, setOpen }) => {
   const [approvalThreshold, setApprovalThreshold] = useState('40');
   const [minBlock, setMinBlock] = useState('5');
   const [maxBlock, setMaxBlock] = useState('21600');
-  const [value, setValue] = useState(0);
+  const [value, setValue] = useState(initialTab);
   const [openSnack, setOpenSnack] = useState(false);
   const [infoSnack, setInfoSnack] = useState(null);
 
@@ -187,14 +187,29 @@ export const AddGroup = ({ address, open, setOpen }) => {
     setValue(2);
   };
 
+  const openFindGroupRequestFunc = () => {
+    setValue(1);
+  };
+
+  useEffect(() => {
+    if (open) {
+      setValue(initialTab);
+    }
+  }, [initialTab, open]);
+
   useEffect(() => {
     subscribeToEvent('openGroupInvitesRequest', openGroupInvitesRequestFunc);
+    subscribeToEvent('openFindGroupRequest', openFindGroupRequestFunc);
 
     return () => {
       unsubscribeFromEvent(
         'openGroupInvitesRequest',
         openGroupInvitesRequestFunc
       );
+      unsubscribeFromEvent(
+        'openFindGroupRequest',
+        openFindGroupRequestFunc
+      );
     };
   }, []);
 
diff --git a/src/components/Group/AddGroupList.tsx b/src/components/Group/AddGroupList.tsx
index 85a11026..572ffaec 100644
--- a/src/components/Group/AddGroupList.tsx
+++ b/src/components/Group/AddGroupList.tsx
@@ -622,11 +622,11 @@ export const AddGroupList = ({ setInfoSnack, setOpenSnack }) => {
                           >
                             <Typography
                               variant="body2"
-                              component="code"
                               sx={{
-                                fontFamily: 'monospace',
-                                fontSize: '0.75rem',
                                 color: theme.palette.text.secondary,
+                                fontSize: '0.78rem',
+                                fontWeight: 600,
+                                letterSpacing: '-0.01em',
                                 wordBreak: 'break-all',
                               }}
                             >
diff --git a/src/components/Group/BlockedUsersModal.tsx b/src/components/Group/BlockedUsersModal.tsx
index cf94bd25..32faa309 100644
--- a/src/components/Group/BlockedUsersModal.tsx
+++ b/src/components/Group/BlockedUsersModal.tsx
@@ -1,4 +1,5 @@
 import {
+  alpha,
   Box,
   Button,
   Dialog,
@@ -6,15 +7,19 @@ import {
   DialogContent,
   DialogContentText,
   DialogTitle,
+  Divider,
   IconButton,
   TextField,
   Typography,
   useTheme,
 } from '@mui/material';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { getBaseApiReact } from '../../App';
-import { Spacer } from '../../common/Spacer';
-import CloseIcon from '@mui/icons-material/Close';
+
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import InfoIcon from '@mui/icons-material/Info';
+import LabelOutlinedIcon from '@mui/icons-material/LabelOutlined';
+import ShieldOutlinedIcon from '@mui/icons-material/ShieldOutlined';
 
 import {
   executeEvent,
@@ -26,13 +31,46 @@ import { getNameInfo, requestQueueMemberNames } from './Group';
 import { useModal } from '../../hooks/useModal';
 import { useBlockedAddresses } from '../../hooks/useBlockUsers';
 import {
+  blockedAddressesAtom,
+  blockedNamesAtom,
   infoSnackGlobalAtom,
   isOpenBlockedModalAtom,
   openSnackGlobalAtom,
 } from '../../atoms/global';
-import InfoIcon from '@mui/icons-material/Info';
-import { useAtom, useSetAtom } from 'jotai';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
+import {
+  dialogActionsSx,
+  dialogContentSx,
+  dialogContentTextSx,
+  dialogModalBackdropSx,
+  dialogTitleSx,
+  getDialogPaperSx,
+  getDialogPrimaryButtonSx,
+  getDialogSecondaryButtonSx,
+} from '../App/dialogSurface';
+
+const blockedListRowSx = (theme: ReturnType<typeof useTheme>) => ({
+  alignItems: 'flex-start',
+  backgroundColor: alpha('#FFFFFF', 0.035),
+  border: '1px solid rgba(169,188,216,0.11)',
+  borderRadius: '12px',
+  display: 'flex',
+  gap: 1.5,
+  justifyContent: 'space-between',
+  px: 1.5,
+  py: 1.2,
+});
+
+const unblockButtonSx = (theme: ReturnType<typeof useTheme>) => ({
+  ...getDialogSecondaryButtonSx(theme),
+  flexShrink: 0,
+  fontSize: '0.8rem',
+  minHeight: 36,
+  minWidth: 92,
+  mt: '-2px',
+  px: 1.4,
+});
 
 export const BlockedUsersModal = () => {
   const theme = useTheme();
@@ -48,33 +86,30 @@ export const BlockedUsersModal = () => {
   );
   const [hasChanged, setHasChanged] = useState(false);
   const [value, setValue] = useState('');
-  const [addressesWithNames, setAddressesWithNames] = useState({});
+  const [addressesWithNames, setAddressesWithNames] = useState<
+    Record<string, string>
+  >({});
   const { isShow, onCancel, onOk, show, message } = useModal();
-  const {
-    getAllBlockedUsers,
-    removeBlockFromList,
-    addToBlockList,
-  } = useBlockedAddresses(true);
+  const { removeBlockFromList, addToBlockList, refreshBlockedUsers } =
+    useBlockedAddresses(true);
+  const blockedAddresses = useAtomValue(blockedAddressesAtom);
+  const blockedNames = useAtomValue(blockedNamesAtom);
   const setOpenSnackGlobal = useSetAtom(openSnackGlobalAtom);
   const setInfoSnackCustom = useSetAtom(infoSnackGlobalAtom);
 
-  const [blockedUsers, setBlockedUsers] = useState({
-    addresses: {},
-    names: {},
-  });
+  const addressKeys = Object.keys(blockedAddresses || {});
+  const nameKeys = Object.keys(blockedNames || {});
 
-  const fetchBlockedUsers = () => {
-    setBlockedUsers(getAllBlockedUsers());
+  const handleCloseMain = () => {
+    if (hasChanged) {
+      executeEvent('updateChatMessagesWithBlocks', true);
+    }
+    setIsOpenBlockedModal(false);
   };
 
-  useEffect(() => {
-    if (!isOpenBlockedModal) return;
-    fetchBlockedUsers();
-  }, [isOpenBlockedModal]);
-
   const getNames = async () => {
-    const addresses = Object.keys(blockedUsers?.addresses);
-    const addressNames = {};
+    const addresses = Object.keys(blockedAddresses || {});
+    const addressNames: Record<string, string> = {};
 
     const getMemNames = addresses.map(async (address) => {
       const name = await requestQueueMemberNames.enqueue(() => {
@@ -122,7 +157,6 @@ export const BlockedUsersModal = () => {
       }
       if (!userName) {
         await addToBlockList(userAddress, null);
-        fetchBlockedUsers();
         setHasChanged(true);
         executeEvent('updateChatMessagesWithBlocks', true);
         setValue('');
@@ -139,7 +173,6 @@ export const BlockedUsersModal = () => {
       } else if (responseModal === 'name') {
         await addToBlockList(null, userName);
       }
-      fetchBlockedUsers();
       setHasChanged(true);
       setValue('');
       if (user) {
@@ -165,240 +198,412 @@ export const BlockedUsersModal = () => {
     }
   };
 
-  const blockUserFromOutsideModalFunc = (e) => {
-    const user = e.detail?.user;
-    setIsOpenBlockedModal(true);
-    blockUser(null, user);
-  };
+  const blockUserRef = useRef(blockUser);
+  blockUserRef.current = blockUser;
 
   useEffect(() => {
-    subscribeToEvent('blockUserFromOutside', blockUserFromOutsideModalFunc);
-
+    const handler = (e: Event) => {
+      const user = (e as CustomEvent<{ user?: string }>).detail?.user;
+      setIsOpenBlockedModal(true);
+      void blockUserRef.current(null, user);
+    };
+    subscribeToEvent('blockUserFromOutside', handler);
     return () => {
-      unsubscribeFromEvent(
-        'blockUserFromOutside',
-        blockUserFromOutsideModalFunc
-      );
+      unsubscribeFromEvent('blockUserFromOutside', handler);
     };
-  }, []);
+  }, [setIsOpenBlockedModal]);
 
-  return (
-    <Dialog
-      aria-describedby="alert-dialog-description"
-      aria-labelledby="alert-dialog-title"
-      onClose={onCancel}
-      open={isOpenBlockedModal}
-    >
-      <DialogTitle
-        sx={{
-          color: theme.palette.text.primary,
-          fontWeight: 'bold',
-          opacity: 1,
-          textAlign: 'center',
-        }}
-      >
-        {t('auth:blocked_users', { postProcess: 'capitalizeAll' })}
-      </DialogTitle>
+  useEffect(() => {
+    if (!isOpenBlockedModal) return;
+
+    setAddressesWithNames({});
+    refreshBlockedUsers().catch((error) => {
+      console.error('Unable to refresh blocked users.', error);
+    });
+  }, [isOpenBlockedModal, refreshBlockedUsers]);
+
+  const paperSx = {
+    ...getDialogPaperSx(theme, { maxWidth: 544 }),
+    maxHeight: 'min(620px, calc(100vh - 48px))',
+    width: 'calc(100% - 40px)',
+  };
+
+  const textFieldSx = {
+    '& .MuiOutlinedInput-root': {
+      backgroundColor: alpha('#FFFFFF', 0.04),
+      borderRadius: '11px',
+      '& fieldset': {
+        borderColor: 'rgba(169,188,216,0.16)',
+      },
+      '&:hover fieldset': {
+        borderColor: 'rgba(169,188,216,0.24)',
+      },
+      '&.Mui-focused fieldset': {
+        borderColor: alpha(theme.palette.primary.main, 0.55),
+      },
+    },
+  };
 
-      <DialogContent
-        sx={{
-          padding: '20px',
+  const sectionHeadingSx = {
+    alignItems: 'center',
+    color: 'rgba(214,221,233,0.78)',
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: 0.75,
+    fontSize: '0.72rem',
+    fontWeight: 700,
+    letterSpacing: '0.06em',
+    lineHeight: 1.35,
+    mb: 0.85,
+    textTransform: 'uppercase',
+  };
+
+  const sectionSubtitleSx = {
+    ...dialogContentTextSx,
+    fontSize: '0.82rem',
+    lineHeight: 1.55,
+    mb: 1.15,
+    mt: 0,
+    opacity: 0.92,
+  };
+
+  return (
+    <>
+      <Dialog
+        aria-describedby="blocked-users-description"
+        aria-labelledby="blocked-users-title"
+        open={isOpenBlockedModal}
+        onClose={handleCloseMain}
+        slotProps={{
+          backdrop: {
+            sx: dialogModalBackdropSx,
+          },
+          paper: {
+            sx: paperSx,
+          },
         }}
+        fullWidth
+        maxWidth="sm"
       >
         <Box
           sx={{
             alignItems: 'center',
+            borderBottom: '1px solid rgba(169,188,216,0.1)',
             display: 'flex',
-            gap: '10px',
+            justifyContent: 'space-between',
+            pl: 1,
+            position: 'relative',
+            pr: 1,
+            py: 1.5,
           }}
         >
-          <TextField
-            placeholder={t('auth:message.generic.name_address', {
+          <Box sx={{ width: 40 }} />
+          <Typography
+            component="h2"
+            id="blocked-users-title"
+            sx={{
+              flex: 1,
+              fontSize: '1.05rem',
+              fontWeight: 700,
+              letterSpacing: '-0.01em',
+              lineHeight: 1.25,
+              px: 1,
+              textAlign: 'center',
+            }}
+          >
+            {t('auth:blocked_users', { postProcess: 'capitalizeAll' })}
+          </Typography>
+          <IconButton
+            aria-label={t('core:action.close', {
               postProcess: 'capitalizeFirstChar',
             })}
-            value={value}
-            onChange={(e) => {
-              setValue(e.target.value);
-            }}
-          />
-          <Button
+            edge="end"
+            onClick={handleCloseMain}
+            size="small"
             sx={{
-              flexShrink: 0,
+              color: theme.palette.text.secondary,
+              mr: -0.5,
+              '&:hover': {
+                color: theme.palette.text.primary,
+              },
             }}
-            variant="contained"
-            onClick={blockUser}
           >
-            {t('auth:action.block', { postProcess: 'capitalizeFirstChar' })}
-          </Button>
+            <CloseRoundedIcon sx={{ fontSize: 22 }} />
+          </IconButton>
         </Box>
 
-        {Object.entries(blockedUsers?.addresses).length > 0 && (
-          <>
-            <Spacer height="20px" />
-
-            <DialogContentText id="alert-dialog-description">
-              {t('auth:message.generic.blocked_addresses', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </DialogContentText>
-
-            <Spacer height="10px" />
+        <DialogContent sx={{ ...dialogContentSx, pt: 2.5, pb: 1.75 }}>
+          <Typography
+            id="blocked-users-description"
+            sx={{ ...dialogContentTextSx, mb: 1.35 }}
+          >
+            {t('auth:message.generic.block_list_intro', {
+              postProcess: 'capitalizeFirstChar',
+            })}
+          </Typography>
 
-            <Button variant="contained" size="small" onClick={getNames}>
-              {t('auth:action.fetch_names', {
+          <Box sx={{ alignItems: 'stretch', display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: 1.25 }}>
+            <TextField
+              fullWidth
+              placeholder={t('auth:message.generic.name_address', {
                 postProcess: 'capitalizeFirstChar',
               })}
+              size="small"
+              value={value}
+              onChange={(e) => {
+                setValue(e.target.value);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault();
+                  blockUser(e);
+                }
+              }}
+              sx={textFieldSx}
+            />
+            <Button
+              sx={{
+                ...getDialogPrimaryButtonSx(theme),
+                flexShrink: 0,
+                minHeight: 40,
+                px: 2.4,
+                width: { xs: '100%', sm: 'auto' },
+              }}
+              variant="contained"
+              onClick={blockUser}
+            >
+              {t('auth:action.block', { postProcess: 'capitalizeFirstChar' })}
             </Button>
+          </Box>
 
-            <Spacer height="10px" />
-          </>
-        )}
-
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '10px',
-          }}
-        >
-          {Object.entries(blockedUsers?.addresses || {})?.map(
-            ([key, value]) => {
-              return (
-                <Box
-                  sx={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    gap: '10px',
-                    justifyContent: 'space-between',
-                    width: '100%',
-                  }}
-                >
-                  <Typography>{addressesWithNames[key] || key}</Typography>
-                  <Button
-                    sx={{
-                      flexShrink: 0,
-                    }}
-                    size="small"
-                    variant="contained"
-                    onClick={async () => {
-                      try {
-                        await removeBlockFromList(key, undefined);
-                        setHasChanged(true);
-                        setValue('');
-                        fetchBlockedUsers();
-                      } catch (error) {
-                        console.error(error);
-                      }
-                    }}
-                  >
-                    {t('auth:action.unblock', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Button>
-                </Box>
-              );
-            }
+          {(addressKeys.length > 0 || nameKeys.length > 0) && (
+            <Divider
+              sx={{
+                borderColor: 'rgba(169,188,216,0.1)',
+                my: 2.25,
+              }}
+            />
           )}
-        </Box>
-
-        {Object.entries(blockedUsers?.names).length > 0 && (
-          <>
-            <Spacer height="20px" />
-
-            <DialogContentText id="alert-dialog-description">
-              {t('auth:message.generic.blocked_names', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </DialogContentText>
-
-            <Spacer height="10px" />
-          </>
-        )}
 
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '10px',
-          }}
-        >
-          {Object.entries(blockedUsers?.names || {})?.map(([key, value]) => {
-            return (
-              <Box
-                sx={{
-                  alignItems: 'center',
-                  display: 'flex',
-                  gap: '10px',
-                  justifyContent: 'space-between',
-                  width: '100%',
-                }}
-              >
-                <Typography>{key}</Typography>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 1.25,
+              maxHeight: addressKeys.length + nameKeys.length > 6 ? 280 : 'none',
+              overflowY: addressKeys.length + nameKeys.length > 6 ? 'auto' : 'visible',
+              pr: addressKeys.length + nameKeys.length > 6 ? 0.5 : 0,
+            }}
+          >
+            {addressKeys.length > 0 && (
+              <Box>
+                <Typography component="div" sx={sectionHeadingSx}>
+                  <ShieldOutlinedIcon sx={{ fontSize: 17, opacity: 0.85 }} />
+                  {t('auth:message.generic.blocked_addresses', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </Typography>
+                <Typography sx={sectionSubtitleSx}>
+                  {t('auth:message.generic.blocked_addresses_hint', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </Typography>
 
                 <Button
-                  size="small"
                   sx={{
-                    flexShrink: 0,
+                    ...getDialogSecondaryButtonSx(theme),
+                    fontSize: '0.82rem',
+                    mb: 1,
+                    minHeight: 38,
+                    py: 0.75,
                   }}
                   variant="contained"
-                  onClick={async () => {
-                    try {
-                      await removeBlockFromList(undefined, key);
-                      setHasChanged(true);
-                      fetchBlockedUsers();
-                    } catch (error) {
-                      console.error(error);
-                    }
-                  }}
+                  onClick={getNames}
                 >
-                  {t('auth:action.unblock', {
+                  {t('auth:action.fetch_names', {
                     postProcess: 'capitalizeFirstChar',
                   })}
                 </Button>
+
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.85 }}>
+                  {addressKeys.map((key) => (
+                    <Box key={key} sx={blockedListRowSx(theme)}>
+                      <Box sx={{ flex: '1 1 auto', minWidth: 0, pt: '3px' }}>
+                        <Typography
+                          sx={{
+                            fontFamily:
+                              addressesWithNames[key]
+                                ? 'inherit'
+                                : 'ui-monospace, monospace',
+                            fontSize: addressesWithNames[key]
+                              ? '0.93rem'
+                              : '0.78rem',
+                            fontWeight: 600,
+                            lineHeight: 1.45,
+                            wordBreak: 'break-all',
+                          }}
+                        >
+                          {addressesWithNames[key] || key}
+                        </Typography>
+                        {addressesWithNames[key] && (
+                          <Typography
+                            sx={{
+                              color: 'rgba(214,221,233,0.55)',
+                              fontFamily: 'ui-monospace, monospace',
+                              fontSize: '0.72rem',
+                              lineHeight: 1.4,
+                              mt: 0.35,
+                              wordBreak: 'break-all',
+                            }}
+                          >
+                            {key}
+                          </Typography>
+                        )}
+                      </Box>
+                      <Button
+                        sx={unblockButtonSx(theme)}
+                        variant="contained"
+                        onClick={async () => {
+                          try {
+                            await removeBlockFromList(key, undefined);
+                            setHasChanged(true);
+                            setValue('');
+                          } catch (error) {
+                            console.error(error);
+                          }
+                        }}
+                      >
+                        {t('auth:action.unblock', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
+                      </Button>
+                    </Box>
+                  ))}
+                </Box>
               </Box>
-            );
-          })}
-        </Box>
-      </DialogContent>
+            )}
 
-      <DialogActions>
-        <Button
-          sx={{
-            backgroundColor: theme.palette.background.default,
-            color: theme.palette.text.primary,
-            fontWeight: 'bold',
-            opacity: 0.7,
-            '&:hover': {
-              backgroundColor: theme.palette.background.paper,
-              color: theme.palette.text.primary,
-              opacity: 1,
-            },
-          }}
-          variant="contained"
-          onClick={() => {
-            if (hasChanged) {
-              executeEvent('updateChatMessagesWithBlocks', true);
-            }
-            setIsOpenBlockedModal(false);
-          }}
-        >
-          {t('core:action.close', { postProcess: 'capitalizeFirstChar' })}
-        </Button>
-      </DialogActions>
+            {addressKeys.length > 0 && nameKeys.length > 0 && (
+              <Divider sx={{ borderColor: 'rgba(169,188,216,0.08)' }} />
+            )}
+
+            {nameKeys.length > 0 && (
+              <Box>
+                <Typography component="div" sx={sectionHeadingSx}>
+                  <LabelOutlinedIcon sx={{ fontSize: 17, opacity: 0.85 }} />
+                  {t('auth:message.generic.blocked_names', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </Typography>
+                <Typography sx={sectionSubtitleSx}>
+                  {t('auth:message.generic.blocked_names_hint', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </Typography>
+
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.85 }}>
+                  {nameKeys.map((key) => (
+                    <Box key={key} sx={blockedListRowSx(theme)}>
+                      <Typography
+                        sx={{
+                          flex: '1 1 auto',
+                          fontSize: '0.93rem',
+                          fontWeight: 600,
+                          lineHeight: 1.45,
+                          minWidth: 0,
+                          pt: '3px',
+                          wordBreak: 'break-word',
+                        }}
+                      >
+                        {key}
+                      </Typography>
+                      <Button
+                        sx={unblockButtonSx(theme)}
+                        variant="contained"
+                        onClick={async () => {
+                          try {
+                            await removeBlockFromList(undefined, key);
+                            setHasChanged(true);
+                          } catch (error) {
+                            console.error(error);
+                          }
+                        }}
+                      >
+                        {t('auth:action.unblock', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
+                      </Button>
+                    </Box>
+                  ))}
+                </Box>
+              </Box>
+            )}
+          </Box>
+
+          {addressKeys.length === 0 && nameKeys.length === 0 && (
+            <Box
+              sx={{
+                alignItems: 'center',
+                backgroundColor: alpha('#FFFFFF', 0.035),
+                border: '1px dashed rgba(169,188,216,0.18)',
+                borderRadius: '12px',
+                color: 'rgba(214,221,233,0.72)',
+                display: 'flex',
+                fontSize: '0.86rem',
+                justifyContent: 'center',
+                lineHeight: 1.55,
+                mt: 2,
+                px: 2,
+                py: 2.25,
+                textAlign: 'center',
+              }}
+            >
+              <Typography sx={{ fontSize: 'inherit', lineHeight: 'inherit' }}>
+                {t('auth:message.generic.no_blocked_users', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+              </Typography>
+            </Box>
+          )}
+        </DialogContent>
+
+        <DialogActions sx={dialogActionsSx}>
+          <Button
+            sx={getDialogSecondaryButtonSx(theme)}
+            variant="contained"
+            onClick={handleCloseMain}
+          >
+            {t('core:action.close', { postProcess: 'capitalizeFirstChar' })}
+          </Button>
+        </DialogActions>
+      </Dialog>
 
       <Dialog
+        aria-describedby="decide-block-description"
+        aria-labelledby="decide-block-title"
         open={isShow}
         onClose={onCancel}
-        aria-labelledby="alert-dialog-title"
-        aria-describedby="alert-dialog-description"
+        slotProps={{
+          backdrop: {
+            sx: dialogModalBackdropSx,
+          },
+          paper: {
+            sx: {
+              ...getDialogPaperSx(theme, { maxWidth: 440 }),
+              position: 'relative',
+              width: 'calc(100% - 40px)',
+            },
+          },
+        }}
+        fullWidth
+        maxWidth="xs"
       >
         <DialogTitle
-          id="alert-dialog-title"
+          id="decide-block-title"
           sx={{
+            ...dialogTitleSx,
+            pr: 6,
             textAlign: 'center',
-            color: theme.palette.text.primary,
-            fontWeight: 'bold',
-            opacity: 1,
           }}
         >
           {t('auth:message.generic.decide_block', {
@@ -411,17 +616,22 @@ export const BlockedUsersModal = () => {
           })}
           onClick={onCancel}
           sx={{
-            bgcolor: theme.palette.background.default,
-            color: theme.palette.text.primary,
+            color: theme.palette.text.secondary,
             position: 'absolute',
-            right: 8,
-            top: 8,
+            right: 10,
+            top: 14,
+            '&:hover': {
+              color: theme.palette.text.primary,
+            },
           }}
         >
-          <CloseIcon />
+          <CloseRoundedIcon sx={{ fontSize: 22 }} />
         </IconButton>
-        <DialogContent>
-          <DialogContentText id="alert-dialog-description">
+        <DialogContent sx={dialogContentSx}>
+          <DialogContentText
+            id="decide-block-description"
+            sx={dialogContentTextSx}
+          >
             {t('auth:message.generic.blocking', {
               name: message?.userName || message?.userAddress,
               postProcess: 'capitalizeFirstChar',
@@ -430,18 +640,26 @@ export const BlockedUsersModal = () => {
 
           <Box
             sx={{
-              alignItems: 'center',
+              alignItems: 'flex-start',
+              backgroundColor: '#1A212C',
+              border: '1px solid rgba(169,188,216,0.13)',
+              borderRadius: '12px',
               display: 'flex',
-              gap: '10px',
-              marginTop: '20px',
+              gap: 1.2,
+              mt: 2,
+              px: 1.45,
+              py: 1.25,
             }}
           >
             <InfoIcon
               sx={{
-                color: theme.palette.text.primary,
+                color: theme.palette.primary.main,
+                flexShrink: 0,
+                fontSize: 22,
+                mt: '1px',
               }}
             />
-            <Typography>
+            <Typography sx={{ ...dialogContentTextSx, fontSize: '0.88rem' }}>
               {t('auth:message.generic.choose_block', {
                 postProcess: 'capitalizeFirstChar',
               })}
@@ -449,8 +667,16 @@ export const BlockedUsersModal = () => {
           </Box>
         </DialogContent>
 
-        <DialogActions>
+        <DialogActions
+          sx={{
+            ...dialogActionsSx,
+            flexWrap: 'wrap',
+            justifyContent: 'stretch',
+          }}
+        >
           <Button
+            fullWidth
+            sx={getDialogSecondaryButtonSx(theme)}
             variant="contained"
             onClick={() => {
               onOk('address');
@@ -459,6 +685,8 @@ export const BlockedUsersModal = () => {
             {t('auth:action.block_txs', { postProcess: 'capitalizeFirstChar' })}
           </Button>
           <Button
+            fullWidth
+            sx={getDialogSecondaryButtonSx(theme)}
             variant="contained"
             onClick={() => {
               onOk('name');
@@ -469,6 +697,8 @@ export const BlockedUsersModal = () => {
             })}
           </Button>
           <Button
+            fullWidth
+            sx={getDialogPrimaryButtonSx(theme)}
             variant="contained"
             onClick={() => {
               onOk('both');
@@ -478,6 +708,6 @@ export const BlockedUsersModal = () => {
           </Button>
         </DialogActions>
       </Dialog>
-    </Dialog>
+    </>
   );
 };
diff --git a/src/components/Group/Forum/Mail-styles.ts b/src/components/Group/Forum/Mail-styles.ts
index df6d9941..c8dec888 100644
--- a/src/components/Group/Forum/Mail-styles.ts
+++ b/src/components/Group/Forum/Mail-styles.ts
@@ -623,6 +623,8 @@ export const ThreadSingleLastMessageSpanP = styled('span')(({ theme }) => ({
 }));
 
 export const GroupContainer = styled(Box)`
+  height: 100%;
+  min-height: 0;
   overflow: auto;
   position: relative;
   width: 100%;
diff --git a/src/components/Group/Forum/ShowMessageWithoutModal.tsx b/src/components/Group/Forum/ShowMessageWithoutModal.tsx
index ecf60e9c..4240c3c8 100644
--- a/src/components/Group/Forum/ShowMessageWithoutModal.tsx
+++ b/src/components/Group/Forum/ShowMessageWithoutModal.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
-import { Avatar, Box, IconButton } from '@mui/material';
+import { Avatar, Box, IconButton, useTheme } from '@mui/material';
 import DOMPurify from 'dompurify';
+import '../../Chat/chat.css';
 import FormatQuoteIcon from '@mui/icons-material/FormatQuote';
 import MoreSVG from '../../../assets/svgs/More.svg';
 import {
@@ -19,6 +20,7 @@ import { getBaseApiReact } from '../../../App';
 import { WrapperUserAction } from '../../WrapperUserAction';
 
 export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => {
+  const theme = useTheme();
   const [expandAttachments, setExpandAttachments] = useState<boolean>(false);
 
   let cleanHTML = '';
@@ -212,7 +214,23 @@ export const ShowMessage = ({ message, openNewPostWithQuote, myName }: any) => {
           <MessageDisplay htmlContent={message?.textContentV2} />
         )}
         {message?.htmlContent && (
-          <div dangerouslySetInnerHTML={{ __html: cleanHTML }} />
+          <Box
+            sx={{
+              '--text-primary': theme.palette.text.primary,
+              '--text-secondary': theme.palette.text.secondary,
+              '--background-default': theme.palette.background.default,
+              '--background-secondary': theme.palette.background.paper,
+              '--code-block-bg': theme.palette.background.paper,
+              '--code-block-accent': theme.palette.primary.main,
+              '--code-block-border': theme.palette.divider,
+              '--primary-main': theme.palette.primary.main,
+            }}
+          >
+            <div
+              className="tiptap"
+              dangerouslySetInnerHTML={{ __html: cleanHTML }}
+            />
+          </Box>
         )}
         <Box
           sx={{
diff --git a/src/components/Group/Forum/Thread.tsx b/src/components/Group/Forum/Thread.tsx
index 93d78981..a3beb27a 100644
--- a/src/components/Group/Forum/Thread.tsx
+++ b/src/components/Group/Forum/Thread.tsx
@@ -127,16 +127,26 @@ export const Thread = ({
   const theme = useTheme();
   // Update: Use a new ref for the scrollable container
   const threadContainerRef = useRef(null);
-  const threadBeginningRef = useRef(null);
   // New state variables
   const [showScrollButton, setShowScrollButton] = useState(false);
   const [isAtBottom, setIsAtBottom] = useState(false);
 
   const secretKeyRef = useRef(null);
   const currentThreadRef = useRef(null);
-  const containerRef = useRef(null);
   const dataPublishes = useRef({});
 
+  const scrollThreadContainer = useCallback((position: 'top' | 'bottom') => {
+    setTimeout(() => {
+      const container = threadContainerRef.current;
+      if (!container) return;
+
+      container.scrollTo({
+        top: position === 'bottom' ? container.scrollHeight : 0,
+        behavior: position === 'bottom' ? 'smooth' : 'auto',
+      });
+    }, position === 'bottom' ? 300 : 100);
+  }, []);
+
   const getSavedData = useCallback(async (groupId) => {
     const res = await getDataPublishesFunc(groupId, 'thmsg');
     dataPublishes.current = res || {};
@@ -268,14 +278,10 @@ export const Thread = ({
         }
         setMessages(fullArrayMsg);
         if (before === null && after === null && isReverse) {
-          setTimeout(() => {
-            containerRef.current.scrollIntoView({ behavior: 'smooth' });
-          }, 300);
+          scrollThreadContainer('bottom');
         }
         if (after || (before === null && after === null && !isReverse)) {
-          setTimeout(() => {
-            threadBeginningRef.current.scrollIntoView();
-          }, 100);
+          scrollThreadContainer('top');
         }
 
         if (fullArrayMsg.length === 0) {
@@ -578,6 +584,8 @@ export const Thread = ({
       sx={{
         display: 'flex',
         flexDirection: 'column',
+        height: '100%',
+        minHeight: 0,
         overflow: 'hidden',
         position: 'relative',
         width: '100%',
@@ -655,11 +663,13 @@ export const Thread = ({
       <ThreadContainerFullWidth
         sx={{
           flexGrow: 1,
+          minHeight: 0,
           overflow: 'auto',
+          paddingBottom: '32px',
+          scrollPaddingBottom: '32px',
         }}
         ref={threadContainerRef} // Updated ref attached here
       >
-        <div ref={threadBeginningRef} />
         <ThreadContainer>
           <Spacer height={'30px'} />
 
@@ -1095,8 +1105,6 @@ export const Thread = ({
 
             <Spacer height="30px" />
           </Box>
-
-          <div ref={containerRef} />
         </ThreadContainer>
       </ThreadContainerFullWidth>
 
diff --git a/src/components/Group/Group.styles.ts b/src/components/Group/Group.styles.ts
index 5749dff7..fb45c3db 100644
--- a/src/components/Group/Group.styles.ts
+++ b/src/components/Group/Group.styles.ts
@@ -13,6 +13,7 @@ export const RootBox = styled(Box)({
   display: 'flex',
   flexDirection: 'row',
   height: '100%',
+  position: 'relative',
   width: '100%',
 });
 
@@ -42,20 +43,30 @@ export const InnerChatBox = styled(Box)({
   display: 'flex',
   flexGrow: 1,
   height: '100%',
+  minHeight: 0,
   position: 'relative',
 });
 
-export const AdminRowBox = styled(Box)({
-  display: 'flex',
-  gap: '20px',
-  padding: '15px',
+export const AdminRowBox = styled(Box)(({ theme }) => ({
   alignItems: 'center',
-});
+  borderRadius: theme.shape.borderRadius,
+  display: 'flex',
+  gap: theme.spacing(2),
+  justifyContent: 'space-between',
+  padding: theme.spacing(1.5, 2),
+  transition: 'background-color 0.2s ease',
+  '&:hover': {
+    backgroundColor: theme.palette.action.hover,
+  },
+}));
 
 export const ChatContentBox = styled(Box)({
   display: 'flex',
-  flexGrow: 1,
-  height: `calc(100vh - ${70 + appChromeOffset}px)`,
+  flexDirection: 'column',
+  flex: 1,
+  minHeight: 0,
+  minWidth: 0,
+  overflow: 'hidden',
   position: 'relative',
 });
 
@@ -122,7 +133,10 @@ export const SelectedGroupWrapper = styled('div', {
   shouldForwardProp: (prop) => prop !== 'isVisible',
 })<SelectedGroupWrapperProps>(({ isVisible }) => ({
   width: '100%',
-  display: 'block',
+  display: 'flex',
+  flexDirection: 'column',
+  height: '100%',
+  minHeight: 0,
   opacity: !isVisible ? 0 : 1,
   position: isVisible ? 'absolute' : 'fixed',
   left: !isVisible ? '-100000px' : '0px',
@@ -140,3 +154,19 @@ export const GroupRightSidebar = styled(AuthenticatedContainerInnerRight, {
   padding: '5px',
   display: hide ? 'none' : 'flex',
 }));
+
+
+
+export const NotPartAdminListBox = styled(Box)(({ theme }) => ({
+  border: `1px solid ${theme.palette.divider}`,
+  borderRadius: theme.shape.borderRadius * 2,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(0.5),
+  maxHeight: 'min(420px, calc(100vh - 340px))',
+  maxWidth: 420,
+  minHeight: 0,
+  overflowX: 'hidden',
+  overflowY: 'auto',
+  width: '100%',
+}));
diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx
index 2b7e7bc5..0cc2c937 100644
--- a/src/components/Group/Group.tsx
+++ b/src/components/Group/Group.tsx
@@ -1,4 +1,4 @@
-import { Box, Typography } from '@mui/material';
+import { Box, Paper, Typography, useTheme } from '@mui/material';
 import {
   lazy,
   Profiler,
@@ -13,7 +13,8 @@ import { ChatGroup } from '../Chat/ChatGroup';
 import { CreateCommonSecret } from '../Chat/CreateCommonSecret';
 import { base64ToUint8Array } from '../../qdn/encryption/group-encryption';
 import { uint8ArrayToObject } from '../../encryption/encryption';
-import { Spacer } from '../../common/Spacer';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
+
 import {
   clearAllQueues,
   getBaseApiReact,
@@ -47,7 +48,6 @@ import { useMessageQueue } from '../../messaging/MessageQueueContext';
 import { HomeDesktop } from './HomeDesktop';
 import { DesktopHeader } from '../Desktop/DesktopHeader';
 import { AppsDesktop } from '../Apps/AppsDesktop';
-import { AppsDevMode } from '../Apps/AppsDevMode';
 import { DesktopSideBar } from '../Desktop/DesktopLeftSideBar';
 import { AdminSpace } from '../Chat/AdminSpace';
 import {
@@ -79,20 +79,21 @@ import {
   TIME_DAYS_1_IN_MILLISECONDS,
 } from '../../constants/constants';
 import { useWebsocketStatus } from './useWebsocketStatus';
-import { useQMailFetch } from '../../hooks/useQMailFetch';
+import { WebSocketNotifications } from './WebsocketNotifications';
 import { DirectsSidebar } from './DirectsSidebar';
 import { GlobalChatWidget } from './GlobalChatWidget';
+import { openQChatTab, QCHAT_INTERNAL_TAB_ID } from '../../utils/openQChatTab';
 import {
   AdminRowBox,
   CenterBox,
   ChatContentBox,
   EncryptionKeyMessageDiv,
   FloatingButtonContainerBox,
-  GroupRightSidebar,
   InnerChatBox,
   MainContentBox,
   NewChatOverlay,
   NoSelectionTypography,
+  NotPartAdminListBox,
   NotPartGroupDiv,
   RootBox,
   SelectedDirectOverlay,
@@ -186,9 +187,9 @@ function MemberGroupsEffects({
 
 export const Group = ({
   myAddress,
-  setIsOpenDrawerProfile,
   setDesktopViewMode,
   desktopViewMode,
+  onOpenSettings,
 }: GroupProps) => {
   const [desktopSideView, setDesktopSideView] = useState('groups');
   const [chatWidgetClosed, setChatWidgetClosed] = useAtom(chatWidgetClosedAtom);
@@ -212,6 +213,7 @@ export const Group = ({
   const [groupOwner, setGroupOwner] = useState(null);
   const [triedToFetchSecretKey, setTriedToFetchSecretKey] = useState(false);
   const [openAddGroup, setOpenAddGroup] = useState(false);
+  const [openAddGroupTab, setOpenAddGroupTab] = useState<0 | 1 | 2>(0);
   const [openManageMembers, setOpenManageMembers] = useState(false);
   const setMemberGroups = useSetAtom(memberGroupsAtom);
   const [timestampEnterData, setTimestampEnterData] = useAtom(
@@ -231,6 +233,8 @@ export const Group = ({
   const [groupAnnouncements, setGroupAnnouncements] = useAtom(
     groupAnnouncementsAtom
   );
+  const theme = useTheme();
+
   const [defaultThread, setDefaultThread] = useState(null);
   const [, setIsOpenDrawer] = useState(false);
   const [isOpenBlockedModal, setIsOpenBlockedUserModal] = useAtom(
@@ -241,6 +245,7 @@ export const Group = ({
   const setMutedGroups = useSetAtom(mutedGroupsAtom);
   const [mobileViewMode, setMobileViewMode] = useState('home');
   const [, setMobileViewModeKeepOpen] = useState('');
+  const [isQChatTabActive, setIsQChatTabActive] = useState(false);
   const timestampEnterDataRef = useRef({});
   const selectedGroupRef = useRef(null);
   const selectedDirectRef = useRef(null);
@@ -256,6 +261,12 @@ export const Group = ({
   const setIsEnabledDevMode = useSetAtom(enabledDevModeAtom);
   const setIsDisabledEditorEnter = useSetAtom(isDisabledEditorEnterAtom);
 
+  useEffect(() => {
+    if (!openAddGroup) {
+      setOpenAddGroupTab(0);
+    }
+  }, [openAddGroup]);
+
   useEffect(() => {
     const isDevModeFromStorage = localStorage.getItem('isEnabledDevMode');
     if (isDevModeFromStorage) {
@@ -306,7 +317,6 @@ export const Group = ({
   const [groupsProperties, setGroupsProperties] = useAtom(groupsPropertiesAtom);
   const setGroupsOwnerNames = useSetAtom(groupsOwnerNamesAtom);
   const userInfo = useAtomValue(userInfoAtom);
-  useQMailFetch(userInfo?.name, userInfo?.address);
 
   const setUserInfoForLevels = useSetAtom(addressInfoControllerAtom);
   const setMyGroupsWhereIAmAdmin = useSetAtom(myGroupsWhereIAmAdminAtom);
@@ -357,26 +367,43 @@ export const Group = ({
   // Track view modes to prevent marking messages as read when not viewing chat
   const desktopViewModeRef = useRef(desktopViewMode);
   const mobileViewModeRef = useRef(mobileViewMode);
+  const qChatTabActiveRef = useRef(false);
+  const lastNonQappDesktopViewModeRef = useRef(
+    desktopViewMode !== 'apps' && desktopViewMode !== 'dev'
+      ? desktopViewMode
+      : 'home'
+  );
 
   useEffect(() => {
     desktopViewModeRef.current = desktopViewMode;
+    if (desktopViewMode !== 'apps' && desktopViewMode !== 'dev') {
+      lastNonQappDesktopViewModeRef.current = desktopViewMode;
+    }
   }, [desktopViewMode]);
 
   useEffect(() => {
     mobileViewModeRef.current = mobileViewMode;
   }, [mobileViewMode]);
 
+  useEffect(() => {
+    qChatTabActiveRef.current = isQChatTabActive;
+  }, [isQChatTabActive]);
+
   // Track previous view mode to detect when user returns to chat
   const prevDesktopViewModeRef = useRef(desktopViewMode);
   const prevMobileViewModeRef = useRef(mobileViewMode);
+  const prevQChatTabActiveRef = useRef(isQChatTabActive);
 
   // Mark messages as read when user returns to chat view
   useEffect(() => {
     const wasInChatMode =
       prevDesktopViewModeRef.current === 'chat' ||
+      prevQChatTabActiveRef.current ||
       prevMobileViewModeRef.current === 'chat';
     const isNowInChatMode =
-      desktopViewMode === 'chat' || mobileViewMode === 'chat';
+      desktopViewMode === 'chat' ||
+      isQChatTabActive ||
+      mobileViewMode === 'chat';
 
     // Only update timestamp when user RETURNS to chat (wasn't in chat, now is in chat)
     if (!wasInChatMode && isNowInChatMode) {
@@ -426,7 +453,8 @@ export const Group = ({
     // Update previous view mode refs
     prevDesktopViewModeRef.current = desktopViewMode;
     prevMobileViewModeRef.current = mobileViewMode;
-  }, [desktopViewMode, mobileViewMode]);
+    prevQChatTabActiveRef.current = isQChatTabActive;
+  }, [desktopViewMode, isQChatTabActive, mobileViewMode]);
 
   const getUserSettings = useCallback(async () => {
     try {
@@ -678,7 +706,10 @@ export const Group = ({
           setTriedToFetchSecretKey(true);
         }
       } catch (error) {
-        if (error === 'Unable to decrypt data') {
+        if (
+          error === 'Unable to decrypt data' ||
+          error === 'Unable to decrypt'
+        ) {
           setTriedToFetchSecretKey(true);
           settimeoutForRefetchSecretKey.current = setTimeout(() => {
             getSecretKey();
@@ -927,6 +958,7 @@ export const Group = ({
           selectedGroupRef.current &&
           groupSectionRef.current === 'chat' &&
           (desktopViewModeRef.current === 'chat' ||
+            qChatTabActiveRef.current ||
             mobileViewModeRef.current === 'chat')
         ) {
           window
@@ -946,6 +978,7 @@ export const Group = ({
         if (
           selectedDirectRef.current &&
           (desktopViewModeRef.current === 'chat' ||
+            qChatTabActiveRef.current ||
             mobileViewModeRef.current === 'chat')
         ) {
           window
@@ -975,6 +1008,7 @@ export const Group = ({
           selectedGroupRef.current &&
           groupSectionRef.current === 'announcement' &&
           (desktopViewModeRef.current === 'chat' ||
+            qChatTabActiveRef.current ||
             mobileViewModeRef.current === 'group')
         ) {
           window
@@ -1130,12 +1164,13 @@ export const Group = ({
         (direct) => direct?.address === directAddress
       );
       if (findDirect?.address === selectedDirect?.address) {
+        openQChatTab();
         isLoadingOpenSectionFromNotification.current = false;
         return;
       }
       if (findDirect) {
         setDesktopSideView('directs');
-        setDesktopViewMode('home');
+        openQChatTab();
         setSelectedDirect(null);
 
         setNewChat(false);
@@ -1173,7 +1208,7 @@ export const Group = ({
       );
 
       if (findDirect) {
-        setDesktopViewMode('chat');
+        openQChatTab();
         setDesktopSideView('directs');
         setSelectedDirect(null);
 
@@ -1196,7 +1231,7 @@ export const Group = ({
           getTimestampEnterChat();
         }, 200);
       } else {
-        setDesktopViewMode('chat');
+        openQChatTab();
         setDesktopSideView('directs');
         setNewChat(true);
         setTimeout(() => {
@@ -1268,6 +1303,32 @@ export const Group = ({
     [getGroupAnnouncements, getTimestampEnterChat]
   );
 
+  const handleMarkAllMemberGroupsRead = useCallback(() => {
+    const ids = (memberGroupsRef.current || [])
+      .map((g) => g?.groupId)
+      .filter((id) => id != null && id !== '');
+    if (!ids.length) return;
+
+    window
+      .sendMessage('markAllMemberGroupsRead', { groupIds: ids })
+      .then((response) => {
+        if (response?.error) {
+          console.error('Failed to mark all groups read:', response.error);
+        }
+      })
+      .catch((error) => {
+        console.error(
+          'Failed to mark all groups read:',
+          error.message || 'An error occurred'
+        );
+      });
+
+    setTimeout(() => {
+      getGroupAnnouncements();
+      getTimestampEnterChat();
+    }, 200);
+  }, [getGroupAnnouncements, getTimestampEnterChat]);
+
   useEffect(() => {
     subscribeToEvent('markAsRead', handleMarkAsRead);
 
@@ -1276,6 +1337,17 @@ export const Group = ({
     };
   }, [handleMarkAsRead]);
 
+  useEffect(() => {
+    subscribeToEvent('markAllMemberGroupsRead', handleMarkAllMemberGroupsRead);
+
+    return () => {
+      unsubscribeFromEvent(
+        'markAllMemberGroupsRead',
+        handleMarkAllMemberGroupsRead
+      );
+    };
+  }, [handleMarkAllMemberGroupsRead]);
+
   const resetAllStatesAndRefs = useCallback(() => {
     // Reset all useState values to their initial states
     setSecretKey(null);
@@ -1312,11 +1384,13 @@ export const Group = ({
     setGroupAnnouncements({});
     setDefaultThread(null);
     setMobileViewMode('home');
+    setIsQChatTabActive(false);
     // Reset all useRef values to their initial states
     hasInitializedWebsocket.current = false;
     selectedGroupRef.current = null;
     selectedDirectRef.current = null;
     groupSectionRef.current = null;
+    qChatTabActiveRef.current = false;
     isLoadingOpenSectionFromNotification.current = false;
     settimeoutForRefetchSecretKey.current = null;
     initiatedGetMembers.current = false;
@@ -1348,6 +1422,49 @@ export const Group = ({
     };
   }, [openAppsMode]);
 
+  const openHomeMode = useCallback(() => {
+    setDesktopViewMode('home');
+  }, []);
+
+  useEffect(() => {
+    subscribeToEvent('open-home-mode', openHomeMode);
+
+    return () => {
+      unsubscribeFromEvent('open-home-mode', openHomeMode);
+    };
+  }, [openHomeMode]);
+
+  const returnFromAppsMode = useCallback(() => {
+    setDesktopViewMode(lastNonQappDesktopViewModeRef.current || 'home');
+  }, [setDesktopViewMode]);
+
+  useEffect(() => {
+    subscribeToEvent('return-from-apps-mode', returnFromAppsMode);
+
+    return () => {
+      unsubscribeFromEvent('return-from-apps-mode', returnFromAppsMode);
+    };
+  }, [returnFromAppsMode]);
+
+  const openGroupDiscovery = useCallback(() => {
+    setChatMode('groups');
+    setDesktopSideView('groups');
+    setSelectedGroup(null);
+    setSelectedDirect(null);
+    setNewChat(false);
+    openQChatTab();
+    setOpenAddGroupTab(1);
+    setOpenAddGroup(true);
+  }, []);
+
+  useEffect(() => {
+    subscribeToEvent('open-group-discovery', openGroupDiscovery);
+
+    return () => {
+      unsubscribeFromEvent('open-group-discovery', openGroupDiscovery);
+    };
+  }, [openGroupDiscovery]);
+
   const openDevMode = useCallback(() => {
     setDesktopViewMode('dev');
   }, []);
@@ -1371,7 +1488,8 @@ export const Group = ({
       if (findGroup?.groupId === selectedGroup?.groupId) {
         isLoadingOpenSectionFromNotification.current = false;
         setChatMode('groups');
-        setDesktopViewMode('chat');
+        setGroupSection('chat');
+        openQChatTab();
         return;
       }
       if (findGroup) {
@@ -1395,7 +1513,7 @@ export const Group = ({
         setTriedToFetchSecretKey(false);
         setFirstSecretKeyInCreation(false);
         setGroupSection('chat');
-        setDesktopViewMode('chat');
+        openQChatTab();
 
         window
           .sendMessage('addTimestampEnterChat', {
@@ -1438,7 +1556,11 @@ export const Group = ({
       const findGroup = memberGroupsRef.current?.find(
         (group: any) => +group?.groupId === +groupId
       );
-      if (findGroup?.groupId === selectedGroup?.groupId) return;
+      if (findGroup?.groupId === selectedGroup?.groupId) {
+        setGroupSection('announcement');
+        openQChatTab();
+        return;
+      }
       if (findGroup) {
         setChatMode('groups');
         setSelectedGroup(null);
@@ -1457,7 +1579,7 @@ export const Group = ({
         setTriedToFetchSecretKey(false);
         setFirstSecretKeyInCreation(false);
         setGroupSection('announcement');
-        setDesktopViewMode('chat');
+        openQChatTab();
         window
           .sendMessage('addGroupNotificationTimestamp', {
             timestamp: Date.now(),
@@ -1505,6 +1627,7 @@ export const Group = ({
       if (findGroup?.groupId === selectedGroup?.groupId) {
         setGroupSection('forum');
         setDefaultThread(data);
+        openQChatTab();
 
         return;
       }
@@ -1527,7 +1650,7 @@ export const Group = ({
         setFirstSecretKeyInCreation(false);
         setGroupSection('forum');
         setDefaultThread(data);
-        setDesktopViewMode('chat');
+        openQChatTab();
         setTimeout(() => {
           setSelectedGroup(findGroup);
           setMobileViewMode('group');
@@ -1668,6 +1791,15 @@ export const Group = ({
     [t]
   );
 
+  const notPartOfKeys = useMemo(() => {
+    return (
+      isPrivate &&
+      !admins.includes(myAddress) &&
+      !secretKey &&
+      triedToFetchSecretKey
+    );
+  }, [isPrivate, admins, myAddress, secretKey, triedToFetchSecretKey]);
+
   const closeChatDirect = useCallback(() => {
     setSelectedDirect(null);
     setNewChat(false);
@@ -1712,45 +1844,28 @@ export const Group = ({
     }, 200);
   }, []);
 
-  return (
-    <>
-      <WebSocketActive
-        myAddress={myAddress}
-        setIsLoadingGroups={setIsLoadingGroups}
-      />
-
-      <CustomizedSnackbars
-        open={openSnack}
-        setOpen={setOpenSnack}
-        info={infoSnack}
-        setInfo={setInfoSnack}
-      />
-
-      <RootBox>
-        <MemberGroupsEffects
-          getGroupsWhereIAmAMember={getGroupsWhereIAmAMember}
-          getGroupsProperties={getGroupsProperties}
-          myAddress={myAddress}
-          groupsPropertiesRef={groupsPropertiesRef}
-          hasInitializedWebsocketRef={hasInitializedWebsocket}
-        />
-        <DesktopSideBar
-          desktopViewMode={desktopViewMode}
-          toggleSideViewGroups={toggleSideViewGroups}
-          toggleSideViewDirects={toggleSideViewDirects}
-          goToHome={goToHome}
-          mode={appsMode}
-          setMode={setAppsMode}
-          setDesktopSideView={setDesktopSideView}
-          hasUnreadDirects={directChatHasUnread}
-          isApps={desktopViewMode === 'apps'}
-          isGroups={isOpenSideViewGroups}
-          isDirects={isOpenSideViewDirects}
-          setDesktopViewMode={setDesktopViewMode}
-          lastQappViewMode={lastQappViewMode}
-        />
+  const renderQChatTabContent = ({
+    hide = false,
+    isSelected,
+  }: {
+    hide?: boolean;
+    isSelected: boolean;
+  }) => {
+    const isVisible = isSelected && !hide;
 
-        {desktopViewMode === 'chat' && desktopSideView !== 'directs' && (
+    return (
+      <Box
+        sx={{
+          backgroundColor: 'background.default',
+          display: 'flex',
+          height: '100%',
+          minHeight: 0,
+          overflow: 'hidden',
+          position: 'relative',
+          width: '100%',
+        }}
+      >
+        {desktopSideView !== 'directs' ? (
           <GroupList
             selectGroupFunc={selectGroupFunc}
             setDesktopSideView={setDesktopSideView}
@@ -1763,9 +1878,7 @@ export const Group = ({
             setIsOpenBlockedUserModal={setIsOpenBlockedUserModal}
             myAddress={myAddress}
           />
-        )}
-
-        {desktopViewMode === 'chat' && desktopSideView === 'directs' && (
+        ) : (
           <DirectsSidebar
             setDesktopSideView={setDesktopSideView}
             desktopSideView={desktopSideView}
@@ -1792,34 +1905,32 @@ export const Group = ({
           />
         )}
 
-        <MainContentBox>
-          {openAddGroup && (
-            <Suspense fallback={null}>
-              <LazyAddGroup
-                address={myAddress}
-                open={openAddGroup}
-                setOpen={setOpenAddGroup}
+        <Box
+          sx={{
+            flex: 1,
+            height: '100%',
+            minHeight: 0,
+            minWidth: 0,
+            overflow: 'hidden',
+            position: 'relative',
+          }}
+        >
+          {newChat && (
+            <NewChatOverlay isChatMode={isVisible}>
+              <ChatDirect
+                myAddress={myAddress}
+                isNewChat={newChat}
+                selectedDirect={undefined}
+                setSelectedDirect={setSelectedDirect}
+                setNewChat={setNewChat}
+                getTimestampEnterChat={getTimestampEnterChat}
+                close={closeChatDirect}
+                setMobileViewModeKeepOpen={setMobileViewModeKeepOpen}
               />
-            </Suspense>
+            </NewChatOverlay>
           )}
 
-          {newChat && (
-            <>
-              <NewChatOverlay isChatMode={desktopViewMode === 'chat'}>
-                <ChatDirect
-                  myAddress={myAddress}
-                  isNewChat={newChat}
-                  selectedDirect={undefined}
-                  setSelectedDirect={setSelectedDirect}
-                  setNewChat={setNewChat}
-                  getTimestampEnterChat={getTimestampEnterChat}
-                  close={closeChatDirect}
-                  setMobileViewModeKeepOpen={setMobileViewModeKeepOpen}
-                />
-              </NewChatOverlay>
-            </>
-          )}
-          {desktopViewMode === 'chat' && !selectedGroup && (
+          {isVisible && !selectedGroup && !selectedDirect && !newChat && (
             <CenterBox>
               <NoSelectionTypography>
                 {t('group:message.generic.no_selection', {
@@ -1829,9 +1940,7 @@ export const Group = ({
             </CenterBox>
           )}
 
-          <SelectedGroupWrapper
-            isVisible={desktopViewMode === 'chat' && !!selectedGroup}
-          >
+          <SelectedGroupWrapper isVisible={isVisible && !!selectedGroup}>
             <DesktopHeader
               isPrivate={isPrivate}
               selectedGroup={selectedGroup}
@@ -1845,7 +1954,6 @@ export const Group = ({
               chatMode={chatMode}
               openDrawerGroups={openDrawerGroups}
               goToHome={goToHome}
-              setIsOpenDrawerProfile={setIsOpenDrawerProfile}
               mobileViewMode={mobileViewMode}
               setMobileViewMode={setMobileViewMode}
               setMobileViewModeKeepOpen={setMobileViewModeKeepOpen}
@@ -1872,7 +1980,7 @@ export const Group = ({
                   setSecretKey={setSecretKey}
                   handleNewEncryptionNotification={setNewEncryptionNotification}
                   hide={groupSection !== 'chat' || !!selectedDirect || newChat}
-                  hideView={!(desktopViewMode === 'chat' && selectedGroup)}
+                  hideView={!(isVisible && selectedGroup)}
                   handleSecretKeyCreationInProgress={
                     handleSecretKeyCreationInProgress
                   }
@@ -1893,58 +2001,97 @@ export const Group = ({
                   </EncryptionKeyMessageDiv>
                 )}
 
-              {isPrivate &&
-              !admins.includes(myAddress) &&
-              !secretKey &&
-              triedToFetchSecretKey ? (
+              {notPartOfKeys ? (
                 <>
                   {secretKeyPublishDate ||
                   (!secretKeyPublishDate && !firstSecretKeyInCreation) ? (
                     <NotPartGroupDiv>
-                      <Typography>
-                        {t('group:message.generic.not_part_group', {
-                          postProcess: 'capitalizeFirstChar',
-                        })}
-                      </Typography>
-
-                      <Spacer height="25px" />
-
-                      <Typography>
-                        <strong>
+                      <Paper
+                        elevation={0}
+                        sx={{
+                          maxWidth: 480,
+                          p: 3,
+                          textAlign: 'center',
+                          border: `1px solid ${theme.palette.divider}`,
+                          borderRadius: 2,
+                          mb: 3,
+                        }}
+                      >
+                        <LockOutlinedIcon
+                          sx={{
+                            fontSize: 48,
+                            color: theme.palette.text.secondary,
+                            mb: 2,
+                          }}
+                        />
+                        <Typography
+                          variant="subtitle1"
+                          sx={{
+                            color: theme.palette.text.primary,
+                            fontWeight: 500,
+                            mb: 1.5,
+                          }}
+                        >
+                          {t('group:message.generic.not_part_group', {
+                            postProcess: 'capitalizeFirstChar',
+                          })}
+                        </Typography>
+                        <Typography
+                          variant="body2"
+                          sx={{
+                            color: theme.palette.warning.main,
+                            fontWeight: 600,
+                            px: 1,
+                          }}
+                        >
                           {t('group:message.generic.only_encrypted', {
                             postProcess: 'capitalizeFirstChar',
                           })}
-                        </strong>
-                      </Typography>
-
-                      <Spacer height="25px" />
-
-                      <Typography>
-                        {t('group:message.generic.notify_admins', {
+                        </Typography>
+                      </Paper>
+                      <Typography
+                        variant="body2"
+                        sx={{
+                          color: theme.palette.text.secondary,
+                          mb: 2,
+                          textAlign: 'center',
+                        }}
+                      >
+                        {t('group:message.error.notify_admins', {
                           postProcess: 'capitalizeFirstChar',
                         })}
                       </Typography>
-
-                      <Spacer height="25px" />
-
-                      {adminsWithNames.map((admin) => {
-                        return (
+                      <NotPartAdminListBox>
+                        {adminsWithNames.map((admin) => (
                           <AdminRowBox key={admin?.address}>
-                            <Typography>{admin?.name}</Typography>
+                            <Typography
+                              variant="body1"
+                              sx={{
+                                fontWeight: 500,
+                                color: theme.palette.text.primary,
+                              }}
+                            >
+                              {admin?.name}
+                            </Typography>
                             <LoadingButton
                               data-admin-address={admin?.address}
                               loading={isLoadingNotifyAdmin}
                               loadingPosition="start"
+                              size="small"
                               variant="contained"
                               onClick={handleNotifyAdminClick}
+                              sx={{
+                                textTransform: 'none',
+                                fontWeight: 600,
+                              }}
                             >
                               {t('core:action.notify', {
                                 postProcess: 'capitalizeFirstChar',
                               })}
                             </LoadingButton>
                           </AdminRowBox>
-                        );
-                      })}
+                        ))}
+                      </NotPartAdminListBox>
                     </NotPartGroupDiv>
                   ) : null}
                 </>
@@ -1981,11 +2128,10 @@ export const Group = ({
                   {groupSection === 'adminSpace' && (
                     <AdminSpace
                       adminsWithNames={adminsWithNames}
-                      selectedGroup={selectedGroup?.groupId}
-                      isOwner={groupOwner?.owner === myAddress}
-                      myAddress={myAddress}
                       hide={groupSection !== 'adminSpace'}
                       isAdmin={admins.includes(myAddress)}
+                      isOwner={groupOwner?.owner === myAddress}
+                      selectedGroup={selectedGroup?.groupId}
                     />
                   )}
                 </>
@@ -2033,76 +2179,127 @@ export const Group = ({
               </Suspense>
             )}
           </SelectedGroupWrapper>
-          {isOpenBlockedModal && (
+
+          <Suspense fallback={null}>
+            <LazyBlockedUsersModal />
+          </Suspense>
+
+          {selectedDirect && !newChat && (
+            <SelectedDirectOverlay isChatMode={isVisible}>
+              <InnerChatBox>
+                <ChatDirect
+                  myAddress={myAddress}
+                  isNewChat={newChat}
+                  selectedDirect={selectedDirect}
+                  setSelectedDirect={setSelectedDirect}
+                  setNewChat={setNewChat}
+                  getTimestampEnterChat={getTimestampEnterChat}
+                  close={closeChatDirect}
+                  setMobileViewModeKeepOpen={setMobileViewModeKeepOpen}
+                />
+              </InnerChatBox>
+            </SelectedDirectOverlay>
+          )}
+        </Box>
+      </Box>
+    );
+  };
+
+  return (
+    <>
+      <WebSocketNotifications
+        myAddress={userInfo?.address || myAddress}
+        userName={userInfo?.name}
+      />
+      <WebSocketActive
+        myAddress={myAddress}
+        setIsLoadingGroups={setIsLoadingGroups}
+      />
+
+      <CustomizedSnackbars
+        open={openSnack}
+        setOpen={setOpenSnack}
+        info={infoSnack}
+        setInfo={setInfoSnack}
+      />
+
+      <RootBox>
+        <MemberGroupsEffects
+          getGroupsWhereIAmAMember={getGroupsWhereIAmAMember}
+          getGroupsProperties={getGroupsProperties}
+          myAddress={myAddress}
+          groupsPropertiesRef={groupsPropertiesRef}
+          hasInitializedWebsocketRef={hasInitializedWebsocket}
+        />
+        <DesktopSideBar
+          desktopViewMode={desktopViewMode}
+          toggleSideViewGroups={toggleSideViewGroups}
+          toggleSideViewDirects={toggleSideViewDirects}
+          goToHome={goToHome}
+          mode={appsMode}
+          setMode={setAppsMode}
+          setDesktopSideView={setDesktopSideView}
+          hasUnreadDirects={directChatHasUnread}
+          isApps={desktopViewMode === 'apps'}
+          isGroups={isOpenSideViewGroups}
+          isDirects={isOpenSideViewDirects}
+          setDesktopViewMode={setDesktopViewMode}
+          lastQappViewMode={lastQappViewMode}
+          setAppsModeDev={setAppsModeDev}
+        />
+
+        <MainContentBox>
+          {openAddGroup && (
             <Suspense fallback={null}>
-              <LazyBlockedUsersModal />
+              <LazyAddGroup
+                address={myAddress}
+                open={openAddGroup}
+                initialTab={openAddGroupTab}
+                setOpen={setOpenAddGroup}
+              />
             </Suspense>
           )}
 
-          {selectedDirect && !newChat && (
-            <>
-              <SelectedDirectOverlay isChatMode={desktopViewMode === 'chat'}>
-                <InnerChatBox>
-                  <ChatDirect
-                    myAddress={myAddress}
-                    isNewChat={newChat}
-                    selectedDirect={selectedDirect}
-                    setSelectedDirect={setSelectedDirect}
-                    setNewChat={setNewChat}
-                    getTimestampEnterChat={getTimestampEnterChat}
-                    close={closeChatDirect}
-                    setMobileViewModeKeepOpen={setMobileViewModeKeepOpen}
-                  />
-                </InnerChatBox>
-              </SelectedDirectOverlay>
-            </>
-          )}
+          {desktopViewMode === 'chat' &&
+            renderQChatTabContent({ isSelected: true })}
 
           <AppsDesktop
+            desktopViewMode={desktopViewMode}
+            setDesktopViewMode={setDesktopViewMode}
+            devMode={appsModeDev}
+            setDevMode={setAppsModeDev}
             mode={appsMode}
             setMode={setAppsMode}
-            show={desktopViewMode === 'apps'}
-          />
-
-          <AppsDevMode
-            toggleSideViewGroups={toggleSideViewGroups}
-            toggleSideViewDirects={toggleSideViewDirects}
-            goToHome={goToHome}
-            mode={appsModeDev}
-            setMode={setAppsModeDev}
-            setDesktopSideView={setDesktopSideView}
-            hasUnreadDirects={directChatHasUnread}
-            show={desktopViewMode === 'dev'}
-            isGroups={isOpenSideViewGroups}
-            isDirects={isOpenSideViewDirects}
-            setDesktopViewMode={setDesktopViewMode}
-            desktopViewMode={desktopViewMode}
-            isApps={desktopViewMode === 'apps'}
+            onInternalTabVisibilityChange={({ isVisible, tab }) => {
+              setIsQChatTabActive(
+                isVisible && tab?.internal === QCHAT_INTERNAL_TAB_ID
+              );
+            }}
+            renderInternalTab={({ hide, isSelected, tab }) =>
+              tab?.internal === QCHAT_INTERNAL_TAB_ID
+                ? renderQChatTabContent({ hide, isSelected })
+                : null
+            }
+            show={desktopViewMode === 'apps' || desktopViewMode === 'dev'}
           />
 
           <HomeDesktop
             refreshHomeDataFunc={refreshHomeDataFunc}
             myAddress={myAddress}
             isLoadingGroups={isLoadingGroups}
+            onOpenSettings={onOpenSettings}
             setGroupSection={setGroupSection}
             setSelectedGroup={setSelectedGroup}
             getTimestampEnterChat={getTimestampEnterChat}
             setOpenManageMembers={setOpenManageMembers}
             setOpenAddGroup={setOpenAddGroup}
+            setOpenAddGroupTab={setOpenAddGroupTab}
             setMobileViewMode={setMobileViewMode}
             setDesktopViewMode={setDesktopViewMode}
             desktopViewMode={desktopViewMode}
           />
         </MainContentBox>
 
-        <GroupRightSidebar
-          hide={
-            desktopViewMode === 'apps' ||
-            desktopViewMode === 'dev' ||
-            desktopViewMode === 'chat'
-          }
-        />
-
         <LoadingSnackbar
           open={isLoadingGroup}
           info={loadingGroupSnackbarInfo}
diff --git a/src/components/Group/GroupActivityEmptyState.tsx b/src/components/Group/GroupActivityEmptyState.tsx
new file mode 100644
index 00000000..9f9b61c9
--- /dev/null
+++ b/src/components/Group/GroupActivityEmptyState.tsx
@@ -0,0 +1,252 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Box, Button, Typography, useTheme } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import {
+  GroupActivityEmptyStateGraphic,
+  type GroupActivityEmptyStateGraphicVariant,
+} from './GroupActivityEmptyStateGraphic';
+import { getBlueTier1ButtonSx } from './groupActivityColorSystem';
+
+type GroupActivityEmptyStateProps = {
+  compact?: boolean;
+  isVisible?: boolean;
+  title: string;
+  secondaryLines: [string, string] | string[];
+  tertiaryText?: string;
+  ctaLabel: string;
+  onCtaClick: () => void;
+  graphicVariant?: GroupActivityEmptyStateGraphicVariant;
+};
+
+export const GroupActivityEmptyState = ({
+  compact = false,
+  isVisible = true,
+  title,
+  secondaryLines,
+  tertiaryText,
+  ctaLabel,
+  onCtaClick,
+  graphicVariant = 'requests',
+}: GroupActivityEmptyStateProps) => {
+  const theme = useTheme();
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const graphicFrameRef = useRef<HTMLDivElement | null>(null);
+  const resizeFrameRef = useRef<number | null>(null);
+  const extraLiftPxRef = useRef(0);
+  const [extraLiftPx, setExtraLiftPx] = useState(0);
+
+  const baseLiftPx = compact ? 44 : 40;
+  const totalLiftPx = baseLiftPx + extraLiftPx;
+
+  useEffect(() => {
+    extraLiftPxRef.current = extraLiftPx;
+  }, [extraLiftPx]);
+
+  useLayoutEffect(() => {
+    if (typeof window === 'undefined' || !isVisible) return undefined;
+
+    const scheduleMeasurement = (callback: () => void) => {
+      if (resizeFrameRef.current !== null) {
+        window.cancelAnimationFrame(resizeFrameRef.current);
+      }
+      resizeFrameRef.current = window.requestAnimationFrame(() => {
+        resizeFrameRef.current = null;
+        callback();
+      });
+    };
+
+    const updateLift = () => {
+      const ghostBarNode = document.querySelector(
+        '[data-group-activity-ghost-bar="true"]'
+      ) as HTMLElement | null;
+      const graphicFrameNode = graphicFrameRef.current;
+
+      if (!ghostBarNode || !graphicFrameNode) return;
+      if (
+        ghostBarNode.getClientRects().length === 0 ||
+        graphicFrameNode.getClientRects().length === 0
+      ) {
+        return;
+      }
+
+      const ghostBarBottom = ghostBarNode.getBoundingClientRect().bottom;
+      const graphicTop = graphicFrameNode.getBoundingClientRect().top;
+      const actualGapPx = graphicTop - ghostBarBottom;
+      const baselineGapPx = actualGapPx + extraLiftPxRef.current;
+      const targetGapPx = baselineGapPx * 0.4;
+      const nextExtraLiftPx = Math.max(0, baselineGapPx - targetGapPx);
+
+      if (Math.abs(nextExtraLiftPx - extraLiftPxRef.current) > 0.5) {
+        extraLiftPxRef.current = nextExtraLiftPx;
+        setExtraLiftPx(nextExtraLiftPx);
+      }
+    };
+
+    const handleMeasurement = () => {
+      scheduleMeasurement(updateLift);
+    };
+
+    updateLift();
+    window.addEventListener('resize', handleMeasurement);
+
+    let resizeObserver: ResizeObserver | null = null;
+    if (typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(handleMeasurement);
+
+      const ghostBarNode = document.querySelector(
+        '[data-group-activity-ghost-bar="true"]'
+      );
+      if (ghostBarNode) {
+        resizeObserver.observe(ghostBarNode);
+      }
+      if (rootRef.current) {
+        resizeObserver.observe(rootRef.current);
+      }
+    }
+
+    return () => {
+      window.removeEventListener('resize', handleMeasurement);
+      if (resizeFrameRef.current !== null) {
+        window.cancelAnimationFrame(resizeFrameRef.current);
+      }
+      resizeObserver?.disconnect();
+    };
+  }, [
+    baseLiftPx,
+    compact,
+    graphicVariant,
+    isVisible,
+    secondaryLines,
+    tertiaryText,
+    title,
+  ]);
+
+  return (
+    <Box
+      ref={rootRef}
+      sx={{
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'column',
+        margin: '0 auto',
+        maxWidth: '360px',
+        position: 'relative',
+        textAlign: 'center',
+        transform: `translateY(-${totalLiftPx}px)`,
+        width: '100%',
+      }}
+      className="group-empty-state"
+    >
+      <Box
+        ref={graphicFrameRef}
+        sx={{
+          marginBottom: '18px',
+          maxWidth: '100%',
+          position: 'relative',
+          width: compact ? '292px' : '254px',
+        }}
+      >
+        <GroupActivityEmptyStateGraphic
+          size={compact ? 292 : 254}
+          sx={{ margin: 0 }}
+          variant={graphicVariant}
+        />
+      </Box>
+      <Box
+        sx={{
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'column',
+          maxWidth: '360px',
+          width: '100%',
+        }}
+      >
+        <Typography
+          className="group-empty-title"
+          sx={{
+            color:
+              theme.palette.mode === 'dark'
+                ? 'rgba(255, 255, 255, 0.96)'
+                : alpha(theme.palette.text.primary, 0.94),
+            fontSize: compact ? '1.18rem' : '1.25rem',
+            fontWeight: 700,
+            letterSpacing: '-0.02em',
+            lineHeight: 1.15,
+            margin: '0 0 12px',
+          }}
+        >
+          {title}
+        </Typography>
+        <Typography
+          className="group-empty-copy"
+          component="div"
+          sx={{
+            color:
+              theme.palette.mode === 'dark'
+                ? 'rgba(221, 229, 243, 0.72)'
+                : alpha(theme.palette.text.primary, 0.68),
+            fontSize: compact ? '1rem' : '1.0625rem',
+            fontWeight: 500,
+            letterSpacing: '-0.015em',
+            lineHeight: 1.34,
+            margin: 0,
+            maxWidth: '340px',
+          }}
+        >
+          {secondaryLines.map((line) => (
+            <Box
+              key={line}
+              component="span"
+              className="group-empty-copy--secondary-break"
+              sx={{ display: 'block' }}
+            >
+              {line}
+            </Box>
+          ))}
+        </Typography>
+        {tertiaryText ? (
+          <Typography
+            className="group-empty-copy"
+            component="p"
+            sx={{
+              color:
+                theme.palette.mode === 'dark'
+                  ? 'rgba(221, 229, 243, 0.58)'
+                  : alpha(theme.palette.text.primary, 0.56),
+              fontSize: compact ? '1rem' : '1.0625rem',
+              fontWeight: 500,
+              letterSpacing: '-0.015em',
+              lineHeight: 1.45,
+              margin: '10px 0 0',
+              maxWidth: '296px',
+            }}
+          >
+            {tertiaryText}
+          </Typography>
+        ) : null}
+      </Box>
+      <Box className="group-empty-cta-wrap" sx={{ marginTop: '18px' }}>
+        <Button
+          className="group-empty-cta"
+          variant="contained"
+          disableElevation
+          onClick={onCtaClick}
+          sx={{
+            borderRadius: '999px',
+            fontSize: '15px',
+            fontWeight: 600,
+            letterSpacing: '-0.01em',
+            lineHeight: 1,
+            minHeight: '46px',
+            minWidth: '168px',
+            padding: '12px 22px',
+            textTransform: 'none',
+            ...getBlueTier1ButtonSx(),
+          }}
+        >
+          {ctaLabel}
+        </Button>
+      </Box>
+    </Box>
+  );
+};
diff --git a/src/components/Group/GroupActivityEmptyStateGraphic.tsx b/src/components/Group/GroupActivityEmptyStateGraphic.tsx
new file mode 100644
index 00000000..84fc7cc1
--- /dev/null
+++ b/src/components/Group/GroupActivityEmptyStateGraphic.tsx
@@ -0,0 +1,462 @@
+import { useId, type CSSProperties } from 'react';
+import { keyframes } from '@emotion/react';
+import { Box, type SxProps, type Theme } from '@mui/material';
+
+const GROUP_EMPTY_RATIO = 92 / 320;
+const GROUP_EMPTY_EASING = 'cubic-bezier(0.45, 0.05, 0.55, 0.95)';
+
+const requesterNodeFloat = keyframes`
+  0%, 100% {
+    transform: translate3d(0px, 0px, 0px);
+    opacity: 0.94;
+  }
+  38% {
+    transform: translate3d(-1px, -4px, 0px);
+    opacity: 1;
+  }
+  74% {
+    transform: translate3d(1px, -1px, 0px);
+    opacity: 0.97;
+  }
+`;
+
+const groupNodeFloat = keyframes`
+  0%, 100% {
+    transform: translate3d(0px, 0px, 0px);
+    opacity: 0.92;
+  }
+  44% {
+    transform: translate3d(1px, -3px, 0px);
+    opacity: 0.98;
+  }
+  78% {
+    transform: translate3d(-1px, -5px, 0px);
+    opacity: 0.95;
+  }
+`;
+
+const bridgeStreamDrift = keyframes`
+  0% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: -10.8;
+  }
+`;
+
+const markerFloat = keyframes`
+  0%, 100% {
+    transform: translate3d(0px, 0px, 0px) rotate(0deg);
+    opacity: 0.2;
+  }
+  50% {
+    transform: translate3d(1px, -5px, 0px) rotate(1.8deg);
+    opacity: 0.3;
+  }
+`;
+
+const particleFade = keyframes`
+  0%, 100% {
+    opacity: 0.016;
+    transform: translate3d(0px, 0px, 0px);
+  }
+  50% {
+    opacity: 0.052;
+    transform: translate3d(0px, -1.2px, 0px);
+  }
+`;
+
+const ambientGlowBreathe = keyframes`
+  0%, 100% {
+    opacity: 0.68;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.92;
+    transform: scale(1.015);
+  }
+`;
+
+const EMPTY_STATE_PARTICLES = [
+  { cx: 112, cy: 47, r: 1.15, delay: '0s', duration: '6.9s' },
+  { cx: 148, cy: 40, r: 1.35, delay: '1.2s', duration: '7.4s' },
+  { cx: 192, cy: 95, r: 1.05, delay: '2.1s', duration: '7.1s' },
+  { cx: 226, cy: 47, r: 1.25, delay: '3s', duration: '7.7s' },
+] as const;
+
+const REQUESTER_QORTAL_LOGO_PATH =
+  'M0 -9.2L7.8 -4.6V4.7L0 9.3L-7.8 4.7V-4.6L0 -9.2ZM0 -4.7L-4.2 -2.3V2.5L0 5L4.2 2.5V-2.3L0 -4.7Z';
+const REQUESTER_QORTAL_LOGO_TAIL_PATH = 'M4.5 2.5L7.8 4.5V10.8L4.5 8.9V2.5Z';
+
+type GroupActivityEmptyStateGraphicProps = {
+  size?: number;
+  sx?: SxProps<Theme>;
+  variant?: GroupActivityEmptyStateGraphicVariant;
+};
+
+export type GroupActivityEmptyStateGraphicVariant = 'requests' | 'invites';
+
+type QortalRequestBubbleSvgProps = {
+  centerX: number;
+  centerY: number;
+  className?: string;
+  logoScale?: number;
+};
+
+const QortalRequestBubbleSvg = ({
+  centerX,
+  centerY,
+  className,
+  logoScale = 1,
+}: QortalRequestBubbleSvgProps) => {
+  const idBase = useId().replace(/:/g, '');
+  const requesterFillId = `${idBase}-requester-fill`;
+  const requesterRingId = `${idBase}-requester-ring`;
+  const haloFilterId = `${idBase}-halo-blur`;
+  const requesterCoreSoftFilterId = `${idBase}-requester-core-soft`;
+
+  return (
+    <g className={className}>
+      <defs>
+        <filter
+          id={haloFilterId}
+          x={centerX - 55}
+          y={centerY - 55}
+          width="110"
+          height="110"
+          filterUnits="userSpaceOnUse"
+        >
+          <feGaussianBlur stdDeviation="3.8" />
+        </filter>
+        <filter
+          id={requesterCoreSoftFilterId}
+          x="-60%"
+          y="-60%"
+          width="220%"
+          height="220%"
+        >
+          <feGaussianBlur stdDeviation="0.5" />
+        </filter>
+        <radialGradient
+          id={requesterFillId}
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform={`translate(${centerX} ${centerY}) rotate(90) scale(31)`}
+        >
+          <stop stopColor="#567099" />
+          <stop offset="0.48" stopColor="#3C5275" />
+          <stop offset="1" stopColor="#2A3A52" />
+        </radialGradient>
+        <linearGradient
+          id={requesterRingId}
+          x1={centerX - 27}
+          y1={centerY - 28}
+          x2={centerX + 27}
+          y2={centerY + 26}
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="rgba(176, 206, 250, 0.22)" />
+          <stop offset="1" stopColor="rgba(176, 206, 250, 0.08)" />
+        </linearGradient>
+      </defs>
+      <circle
+        cx={centerX}
+        cy={centerY}
+        r="33.2"
+        fill="rgba(132, 175, 240, 0.05)"
+        filter={`url(#${haloFilterId})`}
+      />
+      <circle cx={centerX} cy={centerY} r="30.4" fill={`url(#${requesterFillId})`} />
+      <circle
+        cx={centerX}
+        cy={centerY}
+        r="29.2"
+        stroke={`url(#${requesterRingId})`}
+        strokeWidth="1.35"
+      />
+      <circle cx={centerX} cy={centerY} r="11.4" fill="rgba(196, 218, 251, 0.05)" />
+      <g
+        transform={`translate(${centerX} ${centerY - 0.8}) scale(${(
+          0.87 * logoScale
+        ).toFixed(3)})`}
+      >
+        <path
+          d={REQUESTER_QORTAL_LOGO_PATH}
+          fill="rgba(196, 218, 251, 0.14)"
+          filter={`url(#${requesterCoreSoftFilterId})`}
+          fillRule="evenodd"
+        />
+        <path
+          d={REQUESTER_QORTAL_LOGO_TAIL_PATH}
+          fill="rgba(196, 218, 251, 0.14)"
+          filter={`url(#${requesterCoreSoftFilterId})`}
+        />
+        <path
+          d={REQUESTER_QORTAL_LOGO_PATH}
+          fill="rgba(196, 218, 251, 0.23)"
+          fillRule="evenodd"
+        />
+        <path
+          d={REQUESTER_QORTAL_LOGO_TAIL_PATH}
+          fill="rgba(196, 218, 251, 0.23)"
+        />
+      </g>
+    </g>
+  );
+};
+
+export const QortalRequestBubbleIcon = ({
+  size = 22,
+  logoScale = 1,
+  sx,
+}: {
+  size?: number;
+  logoScale?: number;
+  sx?: SxProps<Theme>;
+}) => (
+  <Box
+    aria-hidden="true"
+    sx={{
+      display: 'inline-flex',
+      filter: 'drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18))',
+      height: `${size}px`,
+      width: `${size}px`,
+      ...sx,
+    }}
+  >
+    <svg
+      viewBox="0 0 76 76"
+      fill="none"
+      preserveAspectRatio="xMidYMid meet"
+      role="presentation"
+    >
+      <QortalRequestBubbleSvg centerX={38} centerY={38} logoScale={logoScale} />
+    </svg>
+  </Box>
+);
+
+export const GroupActivityEmptyStateGraphic = ({
+  size = 292,
+  sx,
+  variant = 'requests',
+}: GroupActivityEmptyStateGraphicProps) => {
+  const height = Math.round(size * GROUP_EMPTY_RATIO);
+  const isInviteVariant = variant === 'invites';
+  const idBase = useId().replace(/:/g, '');
+  const fieldGradientId = `${idBase}-field-gradient`;
+  const groupFillId = `${idBase}-group-fill`;
+  const groupRingId = `${idBase}-group-ring`;
+  const bridgeFadeGradientId = `${idBase}-bridge-fade-gradient`;
+  const bridgeFadeMaskId = `${idBase}-bridge-fade-mask`;
+  const ambientFilterId = `${idBase}-ambient-blur`;
+  const haloFilterId = `${idBase}-halo-blur`;
+  const bridgeStartX = isInviteVariant ? 210 : 110;
+  const bridgeEndX = isInviteVariant ? 118 : 202;
+  const bridgeMinX = Math.min(bridgeStartX, bridgeEndX);
+  const bridgeMaxX = Math.max(bridgeStartX, bridgeEndX);
+  const bridgePath = `M${bridgeStartX} 80H${bridgeEndX}`;
+
+  return (
+    <Box
+      aria-hidden="true"
+      sx={{
+        position: 'relative',
+        width: `${size}px`,
+        height: `${height}px`,
+        margin: '0 auto 18px',
+        pointerEvents: 'none',
+        overflow: 'visible',
+        filter: 'drop-shadow(0 9px 22px rgba(0, 0, 0, 0.18))',
+        '& .group-empty-graphic__glow': {
+          position: 'absolute',
+          inset: '20px 36px 18px 36px',
+          borderRadius: '999px',
+          background:
+            'radial-gradient(circle, rgba(132, 175, 240, 0.055) 0%, rgba(132, 175, 240, 0.03) 42%, rgba(132, 175, 240, 0.012) 62%, rgba(132, 175, 240, 0) 78%)',
+          filter: 'blur(12px)',
+          animation: `${ambientGlowBreathe} 5.3s ease-in-out infinite`,
+        },
+        '& .group-empty-graphic__svg': {
+          position: 'relative',
+          zIndex: 1,
+          width: '100%',
+          height: '100%',
+          overflow: 'visible',
+        },
+        '& .group-empty-node': {
+          transformBox: 'fill-box',
+          transformOrigin: 'center',
+        },
+        '& .group-empty-node--requester': {
+          animation: `${requesterNodeFloat} 5s ${GROUP_EMPTY_EASING} infinite`,
+        },
+        '& .group-empty-node--group': {
+          animation: `${groupNodeFloat} 5.6s ${GROUP_EMPTY_EASING} infinite`,
+        },
+        '& .group-empty-bridge-stream': {
+          animation: `${bridgeStreamDrift} 2.8s linear infinite`,
+        },
+        '& .group-empty-marker': {
+          transformBox: 'fill-box',
+          transformOrigin: 'center',
+          animation: `${markerFloat} 4.8s ${GROUP_EMPTY_EASING} infinite`,
+        },
+        '& .group-empty-particle': {
+          fill: 'rgba(132, 175, 240, 0.095)',
+          opacity: 0.024,
+          transformBox: 'fill-box',
+          transformOrigin: 'center',
+          animation: `${particleFade} var(--particle-duration) ease-in-out infinite`,
+          animationDelay: 'var(--particle-delay)',
+        },
+        ...sx,
+      }}
+    >
+      <Box className="group-empty-graphic__glow" />
+      <svg
+        className="group-empty-graphic__svg"
+        viewBox="0 34 320 92"
+        fill="none"
+        role="presentation"
+      >
+        <defs>
+          <filter id={ambientFilterId} x="44" y="44" width="232" height="74" filterUnits="userSpaceOnUse">
+            <feGaussianBlur stdDeviation="10" />
+          </filter>
+          <filter id={haloFilterId} x="-20" y="-20" width="220" height="220" filterUnits="userSpaceOnUse">
+            <feGaussianBlur stdDeviation="3.8" />
+          </filter>
+          <radialGradient id={fieldGradientId} cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(160 80) rotate(90) scale(28 96)">
+            <stop stopColor="rgba(132, 175, 240, 0.06)" />
+            <stop offset="0.46" stopColor="rgba(132, 175, 240, 0.022)" />
+            <stop offset="1" stopColor="rgba(132, 175, 240, 0)" />
+          </radialGradient>
+          <radialGradient id={groupFillId} cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(244 80) rotate(90) scale(31)">
+            <stop stopColor="#536E95" />
+            <stop offset="0.48" stopColor="#3A5072" />
+            <stop offset="1" stopColor="#2A3A52" />
+          </radialGradient>
+          <linearGradient id={groupRingId} x1="217" y1="52" x2="271" y2="106" gradientUnits="userSpaceOnUse">
+            <stop stopColor="rgba(176, 206, 250, 0.2)" />
+            <stop offset="1" stopColor="rgba(176, 206, 250, 0.08)" />
+          </linearGradient>
+          <linearGradient id={bridgeFadeGradientId} x1={bridgeMinX} y1="80" x2={bridgeMaxX} y2="80" gradientUnits="userSpaceOnUse">
+            {isInviteVariant ? (
+              <>
+                <stop offset="0" stopColor="rgba(255, 255, 255, 0)" />
+                <stop offset="0.05" stopColor="rgba(255, 255, 255, 0.42)" />
+                <stop offset="0.14" stopColor="white" />
+                <stop offset="1" stopColor="white" />
+              </>
+            ) : (
+              <>
+                <stop offset="0" stopColor="white" />
+                <stop offset="0.86" stopColor="white" />
+                <stop offset="0.95" stopColor="rgba(255, 255, 255, 0.42)" />
+                <stop offset="1" stopColor="rgba(255, 255, 255, 0)" />
+              </>
+            )}
+          </linearGradient>
+          <mask id={bridgeFadeMaskId} x={bridgeMinX} y="72" width={bridgeMaxX - bridgeMinX} height="16" maskUnits="userSpaceOnUse">
+            <rect x={bridgeMinX} y="72" width={bridgeMaxX - bridgeMinX} height="16" fill={`url(#${bridgeFadeGradientId})`} />
+          </mask>
+        </defs>
+
+        <ellipse
+          cx="160"
+          cy="80"
+          rx="96"
+          ry="18"
+          fill={`url(#${fieldGradientId})`}
+          filter={`url(#${ambientFilterId})`}
+        />
+
+        {EMPTY_STATE_PARTICLES.map((particle, index) => (
+          <circle
+            key={`${particle.cx}-${particle.cy}-${index}`}
+            className="group-empty-particle"
+            cx={particle.cx}
+            cy={particle.cy}
+            r={particle.r}
+            style={
+              {
+                ['--particle-delay' as string]: particle.delay,
+                ['--particle-duration' as string]: particle.duration,
+              } as CSSProperties
+            }
+          />
+        ))}
+
+        <QortalRequestBubbleSvg
+          centerX={76}
+          centerY={80}
+          className="group-empty-node group-empty-node--requester"
+        />
+
+        <path
+          className="group-empty-bridge-stream"
+          d={bridgePath}
+          stroke="rgba(166, 202, 255, 0.34)"
+          strokeWidth="3.8"
+          strokeLinecap="round"
+          strokeDasharray="0.01 10.8"
+          mask={`url(#${bridgeFadeMaskId})`}
+        />
+
+        <g className="group-empty-node group-empty-node--group">
+          <circle cx="244" cy="80" r="33.2" fill="rgba(132, 175, 240, 0.05)" filter={`url(#${haloFilterId})`} />
+          <circle cx="244" cy="80" r="30.4" fill={`url(#${groupFillId})`} />
+          <circle cx="244" cy="80" r="29.2" stroke={`url(#${groupRingId})`} strokeWidth="1.35" />
+          <circle cx="234.8" cy="79.5" r="4.7" fill="rgba(196, 218, 251, 0.18)" />
+          <circle cx="244" cy="74.3" r="5.2" fill="rgba(196, 218, 251, 0.22)" />
+          <circle cx="253.2" cy="79.5" r="4.7" fill="rgba(196, 218, 251, 0.18)" />
+          <path
+            d="M232.4 90.8C235 84.4 239.6 81.6 244 81.6C248.4 81.6 253 84.4 255.6 90.8"
+            stroke="rgba(196, 218, 251, 0.14)"
+            strokeWidth="2"
+            strokeLinecap="round"
+          />
+        </g>
+
+        {isInviteVariant ? (
+          <g transform="translate(0.8 -6.2)">
+            <g className="group-empty-marker">
+              <circle
+                cx="211.6"
+                cy="58.6"
+                r="8.2"
+                fill="rgba(132, 175, 240, 0.03)"
+                stroke="rgba(132, 175, 240, 0.18)"
+                strokeWidth="1.4"
+              />
+              <circle cx="208.6" cy="56.2" r="0.92" fill="rgba(132, 175, 240, 0.19)" />
+              <circle cx="214.7" cy="56.2" r="0.92" fill="rgba(132, 175, 240, 0.19)" />
+              <path
+                d="M208.2 60.1C209.5 61.6 210.6 62.2 211.7 62.2C212.8 62.2 214 61.6 215.2 60.1"
+                stroke="rgba(132, 175, 240, 0.2)"
+                strokeWidth="1.55"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </g>
+          </g>
+        ) : (
+          <g transform="translate(-2.8 -3.2)">
+            <g className="group-empty-marker">
+              <path
+                d="M204.6 58C204.6 54.2 207.6 51.7 211.6 51.7C215.3 51.7 218.3 53.8 218.3 57.3C218.3 59.8 217 61.4 214.9 62.8C212.9 64 211.9 65.1 211.9 67.6"
+                stroke="rgba(132, 175, 240, 0.26)"
+                strokeWidth="3"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <circle cx="211.6" cy="72.7" r="1.95" fill="rgba(132, 175, 240, 0.26)" />
+            </g>
+          </g>
+        )}
+      </svg>
+    </Box>
+  );
+};
diff --git a/src/components/Group/GroupInvites.tsx b/src/components/Group/GroupInvites.tsx
index 4418f1f9..af9b7ad6 100644
--- a/src/components/Group/GroupInvites.tsx
+++ b/src/components/Group/GroupInvites.tsx
@@ -1,11 +1,13 @@
-import { useCallback, useContext, useEffect, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import GroupAddIcon from '@mui/icons-material/GroupAdd';
 import { Box, Button, ButtonBase, Collapse, Popover, Typography, useTheme } from '@mui/material';
 import { LoadingButton } from '@mui/lab';
-import { useAtom, useSetAtom } from 'jotai';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import {
   GROUP_ACTIVITY_CACHE_TTL_MS,
   groupInvitesCacheAtom,
+  memberGroupsAtom,
+  myGroupsWhereIAmAdminAtom,
   txListAtom,
 } from '../../atoms/global';
 import { QORTAL_APP_CONTEXT } from '../../App';
@@ -17,17 +19,24 @@ import { CustomizedSnackbars } from '../Snackbar/Snackbar';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import { useTranslation } from 'react-i18next';
+import { GroupActivityEmptyState } from './GroupActivityEmptyState';
 
 export const GroupInvites = ({
   myAddress,
   setOpenAddGroup,
+  setOpenAddGroupTab,
   compact = false,
+  isVisible = true,
+  compactViewportHeight,
   onCountChange,
   onLoadingChange,
 }: {
   myAddress: string;
   setOpenAddGroup?: (v: boolean) => void;
+  setOpenAddGroupTab?: (tab: 0 | 1 | 2) => void;
   compact?: boolean;
+  isVisible?: boolean;
+  compactViewportHeight?: number;
   onCountChange?: (count: number) => void;
   onLoadingChange?: (loading: boolean) => void;
 }) => {
@@ -39,9 +48,14 @@ export const GroupInvites = ({
     'tutorial',
   ]);
   const theme = useTheme();
+  const compactViewportHeightCss =
+    compactViewportHeight != null ? `${compactViewportHeight}px` : undefined;
+  const hasFixedCompactViewport = compact && compactViewportHeightCss != null;
   const { show } = useContext(QORTAL_APP_CONTEXT);
   const setTxList = useSetAtom(txListAtom);
   const [groupInvitesCache, setGroupInvitesCache] = useAtom(groupInvitesCacheAtom);
+  const memberGroups = useAtomValue(memberGroupsAtom);
+  const myGroupsWhereIAmAdmin = useAtomValue(myGroupsWhereIAmAdminAtom);
 
   const [groupsWithJoinRequests, setGroupsWithJoinRequests] = useState([]);
   const [isExpanded, setIsExpanded] = useState(false);
@@ -211,6 +225,35 @@ export const GroupInvites = ({
     onLoadingChange?.(loading);
   }, [loading, onLoadingChange]);
 
+  const hasAnyGroups =
+    (memberGroups?.length ?? 0) > 0 || (myGroupsWhereIAmAdmin?.length ?? 0) > 0;
+  const emptyStateTertiaryText = useMemo(
+    () =>
+      hasAnyGroups
+        ? undefined
+        : t('group:group_invites.empty_tertiary_no_groups', {
+            postProcess: 'capitalizeFirstChar',
+          }),
+    [hasAnyGroups, t]
+  );
+
+  const emptyInviteSecondaryLines = useMemo(
+    () => [
+      t('group:group_invites.empty_secondary_1', {
+        postProcess: 'capitalizeFirstChar',
+      }),
+      t('group:group_invites.empty_secondary_2', {
+        postProcess: 'capitalizeFirstChar',
+      }),
+    ],
+    [t]
+  );
+
+  const handleFindGroups = useCallback(() => {
+    setOpenAddGroupTab?.(1);
+    setOpenAddGroup?.(true);
+  }, [setOpenAddGroup, setOpenAddGroupTab]);
+
   const handleInviteItemClick = (e: React.MouseEvent<HTMLElement>, group: (typeof groupsWithJoinRequests)[number]) => {
     setPopoverAnchor(e.currentTarget as HTMLElement);
     setSelectedGroupForPopover({
@@ -225,19 +268,21 @@ export const GroupInvites = ({
   const listContent = (
     <Box
       sx={{
-        bgcolor: theme.palette.background.paper,
+        bgcolor: compact ? 'transparent' : theme.palette.background.paper,
         borderRadius: compact ? '0' : '12px',
         display: 'flex',
         flexDirection: 'column',
-        height: compact ? 'auto' : '250px',
-        maxHeight: compact ? '300px' : undefined,
-        overflow: compact ? 'auto' : undefined,
+        flex: hasFixedCompactViewport ? 1 : undefined,
+        height: hasFixedCompactViewport ? '100%' : compact ? 'auto' : '250px',
+        maxHeight: compact && !hasFixedCompactViewport ? '300px' : undefined,
+        minHeight: hasFixedCompactViewport ? compactViewportHeightCss : undefined,
+        overflow: hasFixedCompactViewport ? 'hidden' : compact ? 'auto' : undefined,
         padding: compact ? 1.5 : 2,
         width: compact ? '100%' : '322px',
       }}
     >
       {loading && groupsWithJoinRequests.length === 0 && (
-        <Box sx={{ display: 'flex', justifyContent: 'center', py: 4, width: '100%' }}>
+        <Box sx={{ alignItems: 'center', display: 'flex', flex: hasFixedCompactViewport ? 1 : undefined, justifyContent: 'center', py: 4, width: '100%' }}>
           <CustomLoader />
         </Box>
       )}
@@ -247,19 +292,27 @@ export const GroupInvites = ({
           sx={{
             alignItems: 'center',
             display: 'flex',
+            flex: hasFixedCompactViewport ? 1 : undefined,
             justifyContent: 'center',
             py: compact ? 4 : 5,
+            px: 2,
             width: '100%',
           }}
         >
-          <Typography
-            variant="body2"
-            sx={{ color: theme.palette.text.secondary, fontWeight: 500 }}
-          >
-            {t('group:message.generic.no_display', {
+          <GroupActivityEmptyState
+            compact={compact}
+            isVisible={isVisible}
+            title={t('group:group_invites.empty_title', {
               postProcess: 'capitalizeFirstChar',
             })}
-          </Typography>
+            secondaryLines={emptyInviteSecondaryLines}
+            tertiaryText={emptyStateTertiaryText}
+            ctaLabel={t('group:group_invites.cta_find_groups', {
+              postProcess: 'capitalizeFirstChar',
+            })}
+            onCtaClick={handleFindGroups}
+            graphicVariant="invites"
+          />
         </Box>
       )}
 
@@ -268,8 +321,10 @@ export const GroupInvites = ({
           sx={{
             display: 'flex',
             flexDirection: 'column',
+            flex: hasFixedCompactViewport ? 1 : undefined,
             gap: 1,
-            maxHeight: '300px',
+            maxHeight: hasFixedCompactViewport ? '100%' : '300px',
+            minHeight: 0,
             overflow: 'auto',
             width: '100%',
           }}
@@ -352,6 +407,8 @@ export const GroupInvites = ({
         alignItems: compact ? 'stretch' : 'center',
         display: 'flex',
         flexDirection: 'column',
+        height: hasFixedCompactViewport ? compactViewportHeightCss : undefined,
+        minHeight: hasFixedCompactViewport ? compactViewportHeightCss : undefined,
         width: '100%',
       }}
     >
@@ -427,7 +484,9 @@ export const GroupInvites = ({
             </Box>
             <Box sx={{ px: 2.5, py: 2 }}>
               <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.75, fontWeight: 600 }}>
-                {t('group:group.description', { postProcess: 'capitalizeFirstChar', defaultValue: 'Description' })}
+                {t('group:group.description', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
               </Typography>
               <Typography
                 variant="body2"
@@ -442,7 +501,9 @@ export const GroupInvites = ({
                 }}
               >
                 {selectedGroupForPopover.description ||
-                  t('group:message.generic.no_description', { postProcess: 'capitalizeFirstChar', defaultValue: 'No description' })}
+                  t('group:message.generic.no_description', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
               </Typography>
               {selectedGroupForPopover.isOpen === false && (
                 <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1 }}>
diff --git a/src/components/Group/GroupJoinRequests.tsx b/src/components/Group/GroupJoinRequests.tsx
index 842d923d..03ebed6a 100644
--- a/src/components/Group/GroupJoinRequests.tsx
+++ b/src/components/Group/GroupJoinRequests.tsx
@@ -17,11 +17,13 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import { useTranslation } from 'react-i18next';
 import { useAtom, useSetAtom } from 'jotai';
+import { GroupActivityEmptyState } from './GroupActivityEmptyState';
 export const requestQueueGroupJoinRequests = new RequestQueueWithPromise(2);
 
 export const GroupJoinRequests = ({
   myAddress,
   groups,
+  setOpenAddGroup,
   setOpenManageMembers,
   getTimestampEnterChat,
   setSelectedGroup,
@@ -29,11 +31,14 @@ export const GroupJoinRequests = ({
   setMobileViewMode,
   setDesktopViewMode,
   compact = false,
+  isVisible = true,
+  compactViewportHeight,
   onCountChange,
   onLoadingChange,
 }: {
   myAddress: string;
   groups?: any[];
+  setOpenAddGroup?: (v: boolean) => void;
   setOpenManageMembers?: (v: boolean) => void;
   getTimestampEnterChat?: () => void;
   setSelectedGroup?: (g: any) => void;
@@ -41,6 +46,8 @@ export const GroupJoinRequests = ({
   setMobileViewMode?: (m: string) => void;
   setDesktopViewMode?: (m: string) => void;
   compact?: boolean;
+  isVisible?: boolean;
+  compactViewportHeight?: number;
   onCountChange?: (count: number) => void;
   onLoadingChange?: (loading: boolean) => void;
 }) => {
@@ -68,6 +75,9 @@ export const GroupJoinRequests = ({
   const [infoSnack, setInfoSnack] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
 
   const theme = useTheme();
+  const compactViewportHeightCss =
+    compactViewportHeight != null ? `${compactViewportHeight}px` : undefined;
+  const hasFixedCompactViewport = compact && compactViewportHeightCss != null;
   const adminGroupIds = useMemo(
     () =>
       [...(myGroupsWhereIAmAdmin ?? [])]
@@ -156,6 +166,9 @@ export const GroupJoinRequests = ({
     () => filteredJoinRequests?.filter((g) => g?.data?.length > 0)?.length ?? 0,
     [filteredJoinRequests]
   );
+  const hasAdminGroups = adminGroupIds.length > 0;
+  const hasMemberGroups = (groups?.length ?? 0) > 0;
+  const shouldShowEmptyStateHelper = !hasAdminGroups && !hasMemberGroups;
 
   useEffect(() => {
     onCountChange?.(activeRequestCount);
@@ -180,22 +193,50 @@ export const GroupJoinRequests = ({
     getJoinRequests(true, true);
   };
 
+  const handleCreateGroup = () => {
+    setOpenAddGroup?.(true);
+  };
+
+  const emptyStateTertiaryText = useMemo(
+    () =>
+      shouldShowEmptyStateHelper
+        ? t('group:group_join_requests.empty_tertiary_no_admin_groups', {
+            postProcess: 'capitalizeFirstChar',
+          })
+        : undefined,
+    [shouldShowEmptyStateHelper, t]
+  );
+
+  const emptyJoinRequestsSecondaryLines = useMemo(
+    () => [
+      t('group:group_join_requests.empty_secondary_1', {
+        postProcess: 'capitalizeFirstChar',
+      }),
+      t('group:group_join_requests.empty_secondary_2', {
+        postProcess: 'capitalizeFirstChar',
+      }),
+    ],
+    [t]
+  );
+
   const listContent = (
     <Box
       sx={{
-        bgcolor: theme.palette.background.paper,
+        bgcolor: compact ? 'transparent' : theme.palette.background.paper,
         borderRadius: compact ? '0' : '12px',
         display: 'flex',
         flexDirection: 'column',
-        height: compact ? 'auto' : '250px',
-        maxHeight: compact ? '300px' : undefined,
-        overflow: compact ? 'auto' : undefined,
+        flex: hasFixedCompactViewport ? 1 : undefined,
+        height: hasFixedCompactViewport ? '100%' : compact ? 'auto' : '250px',
+        maxHeight: compact && !hasFixedCompactViewport ? '300px' : undefined,
+        minHeight: hasFixedCompactViewport ? compactViewportHeightCss : undefined,
+        overflow: hasFixedCompactViewport ? 'hidden' : compact ? 'auto' : undefined,
         padding: compact ? 1.5 : 2,
         width: compact ? '100%' : '322px',
       }}
     >
       {loading && filteredJoinRequests.length === 0 && (
-        <Box sx={{ display: 'flex', justifyContent: 'center', py: 4, width: '100%' }}>
+        <Box sx={{ alignItems: 'center', display: 'flex', flex: hasFixedCompactViewport ? 1 : undefined, justifyContent: 'center', py: 4, width: '100%' }}>
           <CustomLoader />
         </Box>
       )}
@@ -206,19 +247,27 @@ export const GroupJoinRequests = ({
             sx={{
               alignItems: 'center',
               display: 'flex',
+              flex: hasFixedCompactViewport ? 1 : undefined,
               justifyContent: 'center',
               py: compact ? 4 : 5,
+              px: 2,
               width: '100%',
             }}
           >
-            <Typography
-              variant="body2"
-              sx={{ color: theme.palette.text.secondary, fontWeight: 500 }}
-            >
-              {t('group:message.generic.no_display', {
+            <GroupActivityEmptyState
+              compact={compact}
+              isVisible={isVisible}
+              title={t('group:group_join_requests.empty_title', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+              secondaryLines={emptyJoinRequestsSecondaryLines}
+              tertiaryText={emptyStateTertiaryText}
+              ctaLabel={t('group:action.create_group', {
                 postProcess: 'capitalizeFirstChar',
               })}
-            </Typography>
+              onCtaClick={handleCreateGroup}
+              graphicVariant="requests"
+            />
           </Box>
         )}
 
@@ -227,8 +276,10 @@ export const GroupJoinRequests = ({
           sx={{
             display: 'flex',
             flexDirection: 'column',
+            flex: hasFixedCompactViewport ? 1 : undefined,
             gap: 1,
-            maxHeight: '300px',
+            maxHeight: hasFixedCompactViewport ? '100%' : '300px',
+            minHeight: 0,
             overflow: 'auto',
             width: '100%',
           }}
@@ -277,11 +328,13 @@ export const GroupJoinRequests = ({
                       mt: 0.25,
                     }}
                   >
-                    {t('group:message.generic.pending_join_requests_count', {
-                      count,
-                      postProcess: 'capitalizeFirstChar',
-                      defaultValue: '{{count}} pending join request(s)',
-                    })}
+                    {t(
+                      'group:message.generic.pending_join_requests_count',
+                      {
+                        count,
+                        postProcess: 'capitalizeFirstChar',
+                      }
+                    )}
                   </Typography>
                 </Box>
                 <Button
@@ -318,6 +371,8 @@ export const GroupJoinRequests = ({
         display: 'flex',
         flexDirection: 'column',
         alignItems: compact ? 'stretch' : 'center',
+        height: hasFixedCompactViewport ? compactViewportHeightCss : undefined,
+        minHeight: hasFixedCompactViewport ? compactViewportHeightCss : undefined,
       }}
     >
       {!compact && (
diff --git a/src/components/Group/HomeDesktop.tsx b/src/components/Group/HomeDesktop.tsx
deleted file mode 100644
index 9d774b26..00000000
--- a/src/components/Group/HomeDesktop.tsx
+++ /dev/null
@@ -1,408 +0,0 @@
-import { Box, Button, CircularProgress, IconButton, useTheme } from '@mui/material';
-import RefreshIcon from '@mui/icons-material/Refresh';
-import { useEffect, useMemo, useState } from 'react';
-import { useAtomValue, useSetAtom } from 'jotai';
-import {
-  groupInvitesCacheAtom,
-  joinRequestsCacheAtom,
-  userInfoAtom,
-  balanceAtom,
-  memberGroupsAtom,
-} from '../../atoms/global';
-import { Spacer } from '../../common/Spacer';
-import { GroupJoinRequests } from './GroupJoinRequests';
-import { GroupInvites } from './GroupInvites';
-import { ListOfGroupPromotions } from './ListOfGroupPromotions';
-import { HomeProfileCard } from './HomeProfileCard';
-import { HomeGettingStarted, GETTING_STARTED_LS_KEY } from './HomeGettingStarted';
-import { HomeFeaturedApps } from './HomeFeaturedApps';
-import { HomeFeaturedGroups } from './HomeFeaturedGroups';
-import { HomeDeveloperTab } from './HomeDeveloperTab';
-import { useTranslation } from 'react-i18next';
-
-import {
-  AnimatePresence,
-  LazyMotion,
-  domAnimation,
-  useReducedMotion,
-  motion,
-} from 'framer-motion';
-
-type HomeTab = 'user' | 'developer';
-type ActivityTab = 'requests' | 'invites' | 'promotions';
-
-// Temporarily hide User/Developer toggle — only User mode is shown (no option visible)
-const SHOW_USER_DEVELOPER_TOGGLE = false;
-
-// Temporarily hide Most active groups section — no render, no API calls
-const SHOW_MOST_ACTIVE_GROUPS = false;
-
-export const HomeDesktop = ({
-  refreshHomeDataFunc,
-  myAddress,
-  isLoadingGroups,
-  setGroupSection,
-  setSelectedGroup,
-  getTimestampEnterChat,
-  setOpenManageMembers,
-  setOpenAddGroup,
-  setMobileViewMode,
-  setDesktopViewMode,
-  desktopViewMode,
-}) => {
-  const userInfo = useAtomValue(userInfoAtom);
-  const balance = useAtomValue(balanceAtom);
-  const groups = useAtomValue(memberGroupsAtom);
-  const name = userInfo?.name;
-
-  const [activeTab, setActiveTab] = useState<HomeTab>('user');
-  const [activityTab, setActivityTab] = useState<ActivityTab>('requests');
-  const [requestsCount, setRequestsCount] = useState(0);
-  const [invitesCount, setInvitesCount] = useState(0);
-  const [promotionsCount, setPromotionsCount] = useState(0);
-  const [checked1, setChecked1] = useState(false);
-  const [checked2, setChecked2] = useState(false);
-  const [showMostActiveGroups, setShowMostActiveGroups] = useState(
-    () => localStorage.getItem(GETTING_STARTED_LS_KEY) === 'completed'
-  );
-  const [requestsCountLoading, setRequestsCountLoading] = useState(true);
-  const [invitesCountLoading, setInvitesCountLoading] = useState(true);
-
-  const reduce = useReducedMotion();
-  const { t } = useTranslation(['core', 'group', 'tutorial']);
-  const theme = useTheme();
-  const setGroupInvitesCache = useSetAtom(groupInvitesCacheAtom);
-  const setJoinRequestsCache = useSetAtom(joinRequestsCacheAtom);
-
-  const handleRefreshGroupActivity = () => {
-    setGroupInvitesCache(null);
-    setJoinRequestsCache(null);
-  };
-
-  useEffect(() => {
-    if (balance && +balance >= 4.5) setChecked1(true);
-  }, [balance]);
-
-  useEffect(() => {
-    if (name) setChecked2(true);
-  }, [name]);
-
-  const isLoaded = useMemo(() => userInfo !== null, [userInfo]);
-
-  const hasDoneNameAndBalanceAndIsLoaded = useMemo(
-    () => isLoaded && checked1 && checked2,
-    [checked1, isLoaded, checked2]
-  );
-
-  const sharedGroupNavProps = {
-    getTimestampEnterChat,
-    setDesktopViewMode,
-    setGroupSection,
-    setMobileViewMode,
-    setSelectedGroup,
-  };
-
-  return (
-    <LazyMotion features={domAnimation}>
-      <AnimatePresence mode="wait">
-        {desktopViewMode === 'home' && (
-          <motion.div
-            key="home"
-            initial={{ opacity: 0, scale: 0.98 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.98 }}
-            transition={{ duration: 0.25, ease: [0.22, 1, 0.36, 1] }}
-            custom={reduce}
-            style={{
-              alignItems: 'center',
-              display: 'flex',
-              flexDirection: 'column',
-              height: '100%',
-              overflow: 'auto',
-              width: '100%',
-              willChange: 'transform, opacity',
-              backfaceVisibility: 'hidden',
-            }}
-          >
-            <Spacer height="20px" />
-
-            <Box
-              sx={{
-                alignItems: 'flex-start',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '16px',
-                height: '100%',
-                maxWidth: '1036px',
-                padding: '0 10px',
-                width: '100%',
-              }}
-            >
-              {/* Profile card — always visible */}
-              <HomeProfileCard />
-
-              {/* Tab switcher — temporarily hidden when SHOW_USER_DEVELOPER_TOGGLE is false */}
-              {SHOW_USER_DEVELOPER_TOGGLE && (
-                <Box
-                  sx={{
-                    alignSelf: 'center',
-                    bgcolor: theme.palette.background.paper,
-                    borderRadius: '50px',
-                    display: 'flex',
-                    gap: '4px',
-                    padding: '4px',
-                  }}
-                >
-                  {(['user', 'developer'] as HomeTab[]).map((tab) => (
-                    <Button
-                      key={tab}
-                      onClick={() => setActiveTab(tab)}
-                      size="small"
-                      disableElevation
-                      sx={{
-                        bgcolor:
-                          activeTab === tab
-                            ? theme.palette.primary.main
-                            : 'transparent',
-                        borderRadius: '50px',
-                        color:
-                          activeTab === tab
-                            ? theme.palette.primary.contrastText
-                            : theme.palette.text.secondary,
-                        fontSize: '0.85rem',
-                        fontWeight: activeTab === tab ? 600 : 400,
-                        minWidth: '100px',
-                        px: 2,
-                        textTransform: 'none',
-                        '&:hover': {
-                          bgcolor:
-                            activeTab === tab
-                              ? theme.palette.primary.dark
-                              : theme.palette.action.hover,
-                        },
-                      }}
-                    >
-                      {t(`tutorial:home.tab_${tab}`, {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    </Button>
-                  ))}
-                </Box>
-              )}
-
-              {/* ── USER TAB ── */}
-              {activeTab === 'user' && (
-                <>
-                  <HomeGettingStarted onGettingStartedComplete={() => setShowMostActiveGroups(true)} />
-                  <HomeFeaturedApps />
-                  {SHOW_MOST_ACTIVE_GROUPS && showMostActiveGroups && <HomeFeaturedGroups {...sharedGroupNavProps} />}
-
-                  {/* ── GROUP ACTIVITY SECTION ── */}
-                  {!isLoadingGroups && hasDoneNameAndBalanceAndIsLoaded && (
-                    <Box
-                      sx={{
-                        bgcolor: theme.palette.background.paper,
-                        borderRadius: '12px',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: '12px',
-                        padding: '16px 20px',
-                        width: '100%',
-                      }}
-                    >
-                      {/* Section title and refresh */}
-                      <Box
-                        sx={{
-                          alignItems: 'center',
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          width: '100%',
-                        }}
-                      >
-                        <Box
-                          sx={{
-                            color: theme.palette.text.primary,
-                            fontSize: '1rem',
-                            fontWeight: 600,
-                          }}
-                        >
-                          {t('tutorial:home.group_activity', {
-                            postProcess: 'capitalizeFirstChar',
-                          })}
-                        </Box>
-                        <IconButton
-                          aria-label={t('core:action.refresh', {
-                            postProcess: 'capitalizeFirstChar',
-                            defaultValue: 'Refresh',
-                          })}
-                          onClick={handleRefreshGroupActivity}
-                          size="small"
-                          sx={{ color: theme.palette.text.secondary }}
-                        >
-                          <RefreshIcon fontSize="small" />
-                        </IconButton>
-                      </Box>
-
-                      {/* Tab bar */}
-                      <Box
-                        sx={{
-                          alignSelf: 'center',
-                          bgcolor: theme.palette.background.default,
-                          borderRadius: '50px',
-                          display: 'flex',
-                          gap: '4px',
-                          padding: '4px',
-                        }}
-                      >
-                        {(
-                          [
-                            {
-                              key: 'requests' as ActivityTab,
-                              label: t('group:join_requests', { postProcess: 'capitalizeFirstChar' }),
-                              count: requestsCount,
-                              countLoading: requestsCountLoading,
-                            },
-                            {
-                              key: 'invites' as ActivityTab,
-                              label: t('group:group.invites', { postProcess: 'capitalizeFirstChar' }),
-                              count: invitesCount,
-                              countLoading: invitesCountLoading,
-                            },
-                            {
-                              key: 'promotions' as ActivityTab,
-                              label: t('group:group.promotions', { postProcess: 'capitalizeFirstChar' }),
-                              count: promotionsCount,
-                              countLoading: false,
-                            },
-                          ]
-                        ).map(({ key, label, count, countLoading }) => (
-                          <Button
-                            key={key}
-                            onClick={() => setActivityTab(key)}
-                            size="small"
-                            disableElevation
-                            sx={{
-                              bgcolor:
-                                activityTab === key
-                                  ? theme.palette.primary.main
-                                  : 'transparent',
-                              borderRadius: '50px',
-                              color:
-                                activityTab === key
-                                  ? theme.palette.primary.contrastText
-                                  : theme.palette.text.secondary,
-                              fontSize: '0.82rem',
-                              fontWeight: activityTab === key ? 600 : 400,
-                              px: 2,
-                              textTransform: 'none',
-                              whiteSpace: 'nowrap',
-                              '&:hover': {
-                                bgcolor:
-                                  activityTab === key
-                                    ? theme.palette.primary.dark
-                                    : theme.palette.action.hover,
-                              },
-                            }}
-                          >
-                            {label}
-                            {countLoading ? (
-                              <Box
-                                component="span"
-                                sx={{
-                                  display: 'inline-flex',
-                                  alignItems: 'center',
-                                  ml: '6px',
-                                }}
-                              >
-                                <CircularProgress
-                                  size={14}
-                                  thickness={4}
-                                  sx={{
-                                    color:
-                                      activityTab === key
-                                        ? 'rgba(255,255,255,0.9)'
-                                        : theme.palette.primary.contrastText,
-                                  }}
-                                />
-                              </Box>
-                            ) : (
-                              count > 0 && (
-                                <Box
-                                  component="span"
-                                  sx={{
-                                    bgcolor:
-                                      activityTab === key
-                                        ? 'rgba(255,255,255,0.25)'
-                                        : theme.palette.primary.main,
-                                    borderRadius: '50px',
-                                    color:
-                                      activityTab === key
-                                        ? theme.palette.primary.contrastText
-                                        : theme.palette.primary.contrastText,
-                                    display: 'inline-block',
-                                    fontSize: '0.72rem',
-                                    fontWeight: 700,
-                                    lineHeight: 1,
-                                    ml: '6px',
-                                    px: '6px',
-                                    py: '2px',
-                                  }}
-                                >
-                                  {count}
-                                </Box>
-                              )
-                            )}
-                          </Button>
-                        ))}
-                      </Box>
-
-                      {/* Tab content: mount all so each can report its count; hide inactive */}
-                      <Box sx={{ display: activityTab === 'requests' ? 'block' : 'none' }}>
-                        <GroupJoinRequests
-                          compact
-                          onCountChange={setRequestsCount}
-                          onLoadingChange={setRequestsCountLoading}
-                          setGroupSection={setGroupSection}
-                          setSelectedGroup={setSelectedGroup}
-                          getTimestampEnterChat={getTimestampEnterChat}
-                          setOpenManageMembers={setOpenManageMembers}
-                          myAddress={myAddress}
-                          groups={groups}
-                          setMobileViewMode={setMobileViewMode}
-                          setDesktopViewMode={setDesktopViewMode}
-                        />
-                      </Box>
-                      <Box sx={{ display: activityTab === 'invites' ? 'block' : 'none' }}>
-                        <GroupInvites
-                          compact
-                          onCountChange={setInvitesCount}
-                          onLoadingChange={setInvitesCountLoading}
-                          setOpenAddGroup={setOpenAddGroup}
-                          myAddress={myAddress}
-                        />
-                      </Box>
-                      <Box sx={{ display: activityTab === 'promotions' ? 'block' : 'none' }}>
-                        <ListOfGroupPromotions
-                          compact
-                          onCountChange={setPromotionsCount}
-                        />
-                      </Box>
-                    </Box>
-                  )}
-
-                </>
-              )}
-
-              {/* ── DEVELOPER TAB ── */}
-              {activeTab === 'developer' && (
-                <HomeDeveloperTab {...sharedGroupNavProps} />
-              )}
-            </Box>
-
-            <Spacer height="180px" />
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </LazyMotion>
-  );
-};
diff --git a/src/components/Group/HomeDesktop/BlockHeightValue.tsx b/src/components/Group/HomeDesktop/BlockHeightValue.tsx
new file mode 100644
index 00000000..b48375a7
--- /dev/null
+++ b/src/components/Group/HomeDesktop/BlockHeightValue.tsx
@@ -0,0 +1,104 @@
+import { Box } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import { GROUP_ACTIVITY_BLUE } from '../groupActivityColorSystem';
+
+const BLOCK_HEIGHT_TAIL_DIGITS = 4;
+
+function getBlockHeightParts(value?: string | null) {
+  const rawValue = `${value || ''}`.trim();
+  const digits = rawValue.replace(/\D/g, '');
+
+  if (digits.length <= BLOCK_HEIGHT_TAIL_DIGITS) {
+    return {
+      canHighlightTail: false,
+      fullValue: rawValue,
+      prefix: '',
+      tail: rawValue,
+    };
+  }
+
+  return {
+    canHighlightTail: true,
+    fullValue: digits,
+    prefix: digits.slice(0, -BLOCK_HEIGHT_TAIL_DIGITS),
+    tail: digits.slice(-BLOCK_HEIGHT_TAIL_DIGITS),
+  };
+}
+
+export function BlockHeightValue({ theme, value }) {
+  const parts = getBlockHeightParts(value);
+
+  return (
+    <Box
+      aria-label={`Node height ${parts.fullValue || value}`}
+      component="span"
+      title={parts.fullValue ? `Full height: ${parts.fullValue}` : undefined}
+      sx={{
+        alignItems: 'center',
+        color: alpha(theme.palette.text.primary, 0.88),
+        display: 'inline-flex',
+        fontFamily:
+          '"IBM Plex Mono","SFMono-Regular","Cascadia Mono","Fira Code","Consolas",monospace',
+        fontSize: '0.9rem',
+        fontVariantNumeric: 'tabular-nums',
+        fontWeight: 700,
+        gap: '6px',
+        justifySelf: 'end',
+        letterSpacing: '0.028em',
+        lineHeight: 1,
+        maxWidth: '100%',
+        minWidth: 0,
+        overflow: 'hidden',
+        textAlign: 'right',
+        whiteSpace: 'nowrap',
+      }}
+    >
+      {parts.canHighlightTail ? (
+        <>
+          <Box
+            component="span"
+            sx={{
+              minWidth: 0,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
+          >
+            {parts.prefix}
+          </Box>
+          <Box
+            component="span"
+            sx={{
+              backgroundColor: alpha(
+                GROUP_ACTIVITY_BLUE.primary,
+                theme.palette.mode === 'dark' ? 0.18 : 0.12
+              ),
+              border: `1px solid ${alpha(
+                GROUP_ACTIVITY_BLUE.gradientTop,
+                theme.palette.mode === 'dark' ? 0.42 : 0.34
+              )}`,
+              borderRadius: '6px',
+              boxShadow:
+                theme.palette.mode === 'dark'
+                  ? `0 0 0 1px ${alpha(GROUP_ACTIVITY_BLUE.primary, 0.08)}`
+                  : 'none',
+              color:
+                theme.palette.mode === 'dark'
+                  ? alpha(GROUP_ACTIVITY_BLUE.gradientTop, 0.96)
+                  : alpha(GROUP_ACTIVITY_BLUE.pressed, 0.94),
+              display: 'inline-flex',
+              justifyContent: 'center',
+              letterSpacing: '0.05em',
+              minWidth: '5ch',
+              px: '7px',
+              py: '4px',
+            }}
+          >
+            {parts.tail}
+          </Box>
+        </>
+      ) : (
+        parts.tail
+      )}
+    </Box>
+  );
+}
diff --git a/src/components/Group/HomeDesktop/DashboardUtilityPanel.tsx b/src/components/Group/HomeDesktop/DashboardUtilityPanel.tsx
new file mode 100644
index 00000000..8e64d1ba
--- /dev/null
+++ b/src/components/Group/HomeDesktop/DashboardUtilityPanel.tsx
@@ -0,0 +1,60 @@
+import { Box, Typography } from '@mui/material';
+import {
+  dashboardPanelSx,
+  handleDashboardPanelPointerLeave,
+  handleDashboardPanelPointerMove,
+  useDashboardPanelMouseLight,
+} from '../dashboardPanelEffects';
+
+export const DashboardUtilityPanel = ({
+  title,
+  children,
+  theme,
+  sx = undefined,
+  titleSx = undefined,
+  panelBoxRef = undefined,
+}) => {
+  const panelRef = useDashboardPanelMouseLight<HTMLDivElement>();
+  const assignPanelNode = (node) => {
+    panelRef.current = node;
+
+    if (typeof panelBoxRef === 'function') {
+      panelBoxRef(node);
+      return;
+    }
+
+    if (panelBoxRef) {
+      panelBoxRef.current = node;
+    }
+  };
+
+  return (
+    <Box
+      ref={assignPanelNode}
+      sx={{
+        ...dashboardPanelSx(theme, 'utility'),
+        borderRadius: '14px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        padding: '14px 16px',
+        width: '100%',
+        ...sx,
+      }}
+      onMouseMove={handleDashboardPanelPointerMove}
+      onMouseLeave={handleDashboardPanelPointerLeave}
+    >
+      <Typography
+        sx={{
+          color: theme.palette.text.primary,
+          fontSize: '1rem',
+          fontWeight: 600,
+          ...titleSx,
+        }}
+      >
+        {title}
+      </Typography>
+      {children}
+    </Box>
+  );
+};
diff --git a/src/components/Group/HomeDesktop/HomeDesktop.tsx b/src/components/Group/HomeDesktop/HomeDesktop.tsx
new file mode 100644
index 00000000..214ece2b
--- /dev/null
+++ b/src/components/Group/HomeDesktop/HomeDesktop.tsx
@@ -0,0 +1,925 @@
+import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
+import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
+import ForumRoundedIcon from '@mui/icons-material/ForumRounded';
+import { alpha, darken } from '@mui/material/styles';
+import {
+  Activity,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import ErrorBoundary from '../../../common/ErrorBoundary';
+import { Spacer } from '../../../common/Spacer';
+import { HomeProfileCard } from '../HomeProfileCard';
+import { GETTING_STARTED_LS_KEY } from '../gettingStartedStorage';
+import { HomeQortinoWorkspaceCard } from '../HomeQortinoWorkspaceCard';
+import { HomeQuickToolsPad } from '../HomeQuickToolsPad';
+import { HomeFeaturedApps } from '../HomeFeaturedApps';
+import { useTranslation } from 'react-i18next';
+import {
+  LazyMotion,
+  domAnimation,
+  motion,
+  useReducedMotion,
+} from 'framer-motion';
+import { getBaseApiReact } from '../../../App';
+import { executeEvent } from '../../../utils/events';
+import { openQChatTab } from '../../../utils/openQChatTab';
+import {
+  dashboardPanelSx,
+  useDashboardPanelMouseLight,
+} from '../dashboardPanelEffects';
+import { DashboardWidgetFrame } from '../../Widgets/DashboardWidgetFrame';
+import { GroupsWidget } from '../../Widgets/GroupsWidget';
+import { QuitterFeedWidget } from '../../Widgets/QuitterFeedWidget';
+import { InfoPreviewPanel } from './InfoPreviewPanel';
+import { HomeDesktopWalletActivity } from './HomeDesktopWalletActivity';
+import {
+  HOME_CUSTOMIZABLE_CARD_LAYOUT_STORAGE_KEY,
+  HOME_CUSTOMIZABLE_CARD_MAX_HEIGHTS,
+  HOME_CUSTOMIZABLE_CARD_MIN_HEIGHTS,
+  HOME_CUSTOMIZABLE_CARD_ORDER_DEFAULT,
+  HOME_CUSTOMIZABLE_CARD_RESIZE_STEP_PX,
+  HOME_DASHBOARD_VERTICAL_GAP_PX,
+  HOME_DASHBOARD_WIDGET_DISPLAY_MODE,
+  HOME_DASHBOARD_WIDGET_HEIGHT_PX,
+  HOME_EMBEDDED_QAPP_PANEL_HEIGHT_PX,
+  HOME_GROUP_ACTIVITY_CARD_DEFAULT_HEIGHT_PX,
+  HOME_INFO_COLLAPSED_VISIBLE_HEIGHT_PX,
+  HOME_LEFT_CENTER_GRID_TEMPLATE_COLUMNS,
+  HOME_LEFT_CENTER_LOWER_ROW_GRID_TEMPLATE_COLUMNS,
+  HOME_QUITTER_WIDGET_INITIAL_BATCH_SIZES,
+  HOME_QUITTER_WIDGET_LOAD_MORE_BATCH_SIZES,
+  HOME_QUITTER_WIDGET_SEARCH_LIMITS,
+  HOME_RIGHT_RAIL_TOP_ALIGNMENT_OFFSET_PX,
+  HOME_SHARED_LEFT_LOWER_ROW_PANEL_HEIGHT_PX,
+  HOME_SHARED_SIDE_RAIL_WIDTH_XL,
+  HOME_WIDE_DASHBOARD_MIN_WIDTH_PX,
+} from './homeDesktopConstants';
+import type {
+  HomeCustomizableCardId,
+  HomeCustomizableCardsLayout,
+  HomeLayoutDebugKey,
+  HomeLayoutDebugMetric,
+} from './types';
+import {
+  clampHomeCustomizableCardHeight,
+  measureHomeLayoutDebugMetric,
+  parseHomeCustomizableCardsLayout,
+} from './utils';
+
+export const HomeDesktop = ({
+  myAddress,
+  setGroupSection,
+  setSelectedGroup,
+  setDesktopViewMode,
+  desktopViewMode,
+  onOpenSettings,
+}) => {
+  const groupActivityPanelRef = useDashboardPanelMouseLight<HTMLDivElement>();
+  const groupActivityCardHeightRef = useRef<HTMLDivElement | null>(null);
+  const quitterCardHeightRef = useRef<HTMLDivElement | null>(null);
+  const homeLayoutDebugRootRef = useRef<HTMLDivElement | null>(null);
+  const accountOverviewDebugRef = useRef<HTMLDivElement | null>(null);
+  const infoDebugRef = useRef<HTMLDivElement | null>(null);
+  const profileCardDebugRef = useRef<HTMLDivElement | null>(null);
+  const toolsDebugRef = useRef<HTMLDivElement | null>(null);
+  const featuredAppsDebugRef = useRef<HTMLDivElement | null>(null);
+  const walletActivityDebugRef = useRef<HTMLDivElement | null>(null);
+  const rightRailRef = useRef<HTMLDivElement | null>(null);
+  const layoutStabilizeFrameRef = useRef<number | null>(null);
+  const [isOnboardingComplete, setIsOnboardingComplete] = useState(false);
+  const [walletActivityTargetHeightPx, setWalletActivityTargetHeightPx] =
+    useState<number | null>(null);
+  const [qortinoCardTargetHeightPx, setQortinoCardTargetHeightPx] = useState<
+    number | null
+  >(null);
+  const [customizableCardsLayout, setCustomizableCardsLayout] =
+    useState<HomeCustomizableCardsLayout>(() =>
+      parseHomeCustomizableCardsLayout(
+        localStorage.getItem(HOME_CUSTOMIZABLE_CARD_LAYOUT_STORAGE_KEY)
+      )
+    );
+  const [groupWidgetRefreshToken, setGroupWidgetRefreshToken] = useState(0);
+  const [isGroupWidgetRefreshing, setIsGroupWidgetRefreshing] = useState(false);
+  const [quitterWidgetRefreshToken, setQuitterWidgetRefreshToken] = useState(0);
+  const [isQuitterWidgetRefreshing, setIsQuitterWidgetRefreshing] =
+    useState(false);
+  const reduce = useReducedMotion();
+  const { t } = useTranslation(['core', 'group', 'tutorial', 'auth']);
+  const td = useCallback(
+    (key: string, defaultValue: string) =>
+      t(`group:dashboard.${key}`, { defaultValue }),
+    [t]
+  );
+  const theme = useTheme();
+  const isSplitDashboardLayout = useMediaQuery(theme.breakpoints.up('md'));
+  const isWideDashboardLayout = useMediaQuery(
+    theme.breakpoints.up(HOME_WIDE_DASHBOARD_MIN_WIDTH_PX)
+  );
+  const resolvedWideLeftLowerRowPanelHeightPx = isWideDashboardLayout
+    ? HOME_SHARED_LEFT_LOWER_ROW_PANEL_HEIGHT_PX
+    : null;
+  const resolvedQortinoCardHeightPx = isSplitDashboardLayout
+    ? (qortinoCardTargetHeightPx ?? HOME_SHARED_LEFT_LOWER_ROW_PANEL_HEIGHT_PX)
+    : null;
+  const resolvedWalletActivityHeightPx = isWideDashboardLayout
+    ? (walletActivityTargetHeightPx ??
+      HOME_SHARED_LEFT_LOWER_ROW_PANEL_HEIGHT_PX)
+    : null;
+
+  const infoPanelMaxExpandedHeightPx =
+    isWideDashboardLayout && resolvedWalletActivityHeightPx != null
+      ? HOME_INFO_COLLAPSED_VISIBLE_HEIGHT_PX +
+        HOME_DASHBOARD_VERTICAL_GAP_PX +
+        resolvedWalletActivityHeightPx +
+        2
+      : null;
+  const handleOpenReceiveQort = useCallback(
+    (target: HTMLElement | null) => {
+      if (!target) return;
+      const rect = target.getBoundingClientRect();
+      const rightRailRect = rightRailRef.current?.getBoundingClientRect();
+      executeEvent('openReceiveQortInternal', {
+        address: myAddress ?? '',
+        anchorRect: {
+          height: rect.height,
+          left: rect.left,
+          top: rect.top,
+          width: rect.width,
+        },
+        targetRect: rightRailRect
+          ? {
+              height: rightRailRect.height,
+              left: rightRailRect.left,
+              top: rightRailRect.top,
+              width: rightRailRect.width,
+            }
+          : null,
+      });
+    },
+    [myAddress]
+  );
+  const assignGroupActivityPanelNode = useCallback(
+    (node: HTMLDivElement | null) => {
+      groupActivityPanelRef.current = node;
+      groupActivityCardHeightRef.current = node;
+    },
+    [groupActivityPanelRef]
+  );
+
+  useEffect(() => {
+    localStorage.setItem(
+      HOME_CUSTOMIZABLE_CARD_LAYOUT_STORAGE_KEY,
+      JSON.stringify(customizableCardsLayout)
+    );
+  }, [customizableCardsLayout]);
+
+  useEffect(() => {
+    setCustomizableCardsLayout((currentLayout) => {
+      let changed = false;
+      const nextHeights: Partial<Record<HomeCustomizableCardId, number>> = {
+        ...currentLayout.heights,
+      };
+
+      HOME_CUSTOMIZABLE_CARD_ORDER_DEFAULT.forEach((cardId) => {
+        const currentHeight = currentLayout.heights[cardId];
+        if (
+          typeof currentHeight !== 'number' ||
+          !Number.isFinite(currentHeight)
+        ) {
+          return;
+        }
+        const clampedHeight = clampHomeCustomizableCardHeight(
+          cardId,
+          currentHeight
+        );
+        if (clampedHeight !== currentHeight) {
+          nextHeights[cardId] = clampedHeight;
+          changed = true;
+        }
+      });
+
+      if (!changed) return currentLayout;
+      return {
+        ...currentLayout,
+        heights: nextHeights,
+      };
+    });
+  }, []);
+
+  useLayoutEffect(() => {
+    const rootNode = homeLayoutDebugRootRef.current;
+
+    if (!rootNode || desktopViewMode !== 'home') {
+      setWalletActivityTargetHeightPx(null);
+      return;
+    }
+
+    const measureDebugLayout = () => {
+      const rootRect = rootNode.getBoundingClientRect();
+      const nextMetrics: Partial<
+        Record<HomeLayoutDebugKey, HomeLayoutDebugMetric>
+      > = {};
+
+      if (accountOverviewDebugRef.current) {
+        nextMetrics.accountOverview = measureHomeLayoutDebugMetric(
+          accountOverviewDebugRef.current,
+          rootRect
+        );
+      }
+
+      if (infoDebugRef.current) {
+        nextMetrics.info = measureHomeLayoutDebugMetric(
+          infoDebugRef.current,
+          rootRect
+        );
+      }
+
+      if (profileCardDebugRef.current) {
+        nextMetrics.profileCard = measureHomeLayoutDebugMetric(
+          profileCardDebugRef.current,
+          rootRect
+        );
+      }
+
+      if (toolsDebugRef.current) {
+        nextMetrics.tools = measureHomeLayoutDebugMetric(
+          toolsDebugRef.current,
+          rootRect
+        );
+      }
+
+      if (featuredAppsDebugRef.current) {
+        nextMetrics.featuredApps = measureHomeLayoutDebugMetric(
+          featuredAppsDebugRef.current,
+          rootRect
+        );
+      }
+
+      if (walletActivityDebugRef.current) {
+        nextMetrics.walletActivity = measureHomeLayoutDebugMetric(
+          walletActivityDebugRef.current,
+          rootRect
+        );
+      }
+
+      if (isWideDashboardLayout) {
+        const profileMetric = nextMetrics.profileCard;
+        const leftRowMetric =
+          nextMetrics.featuredApps ?? nextMetrics.tools ?? undefined;
+        const featuredMetric = nextMetrics.featuredApps;
+        const toolsMetric = nextMetrics.tools;
+        const walletMetric = nextMetrics.walletActivity;
+
+        if (profileMetric && featuredMetric && toolsMetric) {
+          const nextQortinoTargetHeight = Math.max(
+            HOME_SHARED_LEFT_LOWER_ROW_PANEL_HEIGHT_PX,
+            Math.round(
+              profileMetric.height + featuredMetric.height - toolsMetric.height
+            )
+          );
+
+          setQortinoCardTargetHeightPx((currentHeight) =>
+            currentHeight !== null &&
+            Math.abs(currentHeight - nextQortinoTargetHeight) < 0.25
+              ? currentHeight
+              : nextQortinoTargetHeight
+          );
+        } else {
+          setQortinoCardTargetHeightPx(null);
+        }
+
+        if (leftRowMetric && walletMetric) {
+          const nextTargetHeight = Math.max(
+            0,
+            leftRowMetric.bottom - walletMetric.top
+          );
+
+          setWalletActivityTargetHeightPx((currentHeight) =>
+            currentHeight !== null &&
+            Math.abs(currentHeight - nextTargetHeight) < 0.25
+              ? currentHeight
+              : nextTargetHeight
+          );
+        } else {
+          setWalletActivityTargetHeightPx(null);
+        }
+      } else {
+        setQortinoCardTargetHeightPx(null);
+        setWalletActivityTargetHeightPx(null);
+      }
+
+      return {
+        accountOverviewTop: nextMetrics.accountOverview?.top ?? 0,
+        featuredBottom: nextMetrics.featuredApps?.bottom ?? 0,
+        featuredTop: nextMetrics.featuredApps?.top ?? 0,
+        infoBottom: nextMetrics.info?.bottom ?? 0,
+        toolsBottom: nextMetrics.tools?.bottom ?? 0,
+        walletBottom: nextMetrics.walletActivity?.bottom ?? 0,
+        walletTop: nextMetrics.walletActivity?.top ?? 0,
+      };
+    };
+
+    const cancelLayoutStabilizePass = () => {
+      if (layoutStabilizeFrameRef.current !== null) {
+        window.cancelAnimationFrame(layoutStabilizeFrameRef.current);
+        layoutStabilizeFrameRef.current = null;
+      }
+    };
+
+    const startLayoutStabilizePass = () => {
+      cancelLayoutStabilizePass();
+
+      const startTime = performance.now();
+      let lastSnapshot = '';
+      let stableFrameCount = 0;
+
+      const step = () => {
+        const snapshot = measureDebugLayout();
+        const snapshotKey = JSON.stringify(snapshot);
+
+        if (snapshotKey === lastSnapshot) {
+          stableFrameCount += 1;
+        } else {
+          lastSnapshot = snapshotKey;
+          stableFrameCount = 0;
+        }
+
+        const elapsed = performance.now() - startTime;
+        if (stableFrameCount >= 3 || elapsed > 900) {
+          layoutStabilizeFrameRef.current = null;
+          return;
+        }
+
+        layoutStabilizeFrameRef.current = window.requestAnimationFrame(step);
+      };
+
+      layoutStabilizeFrameRef.current = window.requestAnimationFrame(step);
+    };
+
+    measureDebugLayout();
+    startLayoutStabilizePass();
+
+    const fonts = (
+      document as Document & {
+        fonts?: { ready?: Promise<unknown> };
+      }
+    ).fonts;
+
+    if (fonts?.ready) {
+      fonts.ready.then(() => {
+        startLayoutStabilizePass();
+      });
+    }
+
+    const observedNodes = [
+      rootNode,
+      accountOverviewDebugRef.current,
+      infoDebugRef.current,
+      profileCardDebugRef.current,
+      toolsDebugRef.current,
+      featuredAppsDebugRef.current,
+      walletActivityDebugRef.current,
+    ].filter(Boolean) as HTMLElement[];
+
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', measureDebugLayout);
+
+      return () => {
+        window.removeEventListener('resize', measureDebugLayout);
+      };
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      startLayoutStabilizePass();
+    });
+
+    observedNodes.forEach((node) => {
+      resizeObserver.observe(node);
+    });
+    window.addEventListener('resize', startLayoutStabilizePass);
+
+    return () => {
+      cancelLayoutStabilizePass();
+      resizeObserver.disconnect();
+      window.removeEventListener('resize', startLayoutStabilizePass);
+    };
+  }, [desktopViewMode, isOnboardingComplete, isWideDashboardLayout]);
+
+  useEffect(() => {
+    if (!myAddress) {
+      setIsOnboardingComplete(false);
+      return;
+    }
+
+    const isComplete =
+      localStorage.getItem(`${GETTING_STARTED_LS_KEY}_${myAddress}`) ===
+      'completed';
+    setIsOnboardingComplete(isComplete);
+  }, [myAddress]);
+
+  const handleGettingStartedComplete = useCallback(() => {
+    setIsOnboardingComplete(true);
+  }, []);
+
+  const handleRefreshGroupActivity = useCallback(() => {
+    setGroupWidgetRefreshToken((value) => value + 1);
+  }, []);
+
+  const handleRefreshQuitterWidget = useCallback(() => {
+    setQuitterWidgetRefreshToken((value) => value + 1);
+  }, []);
+
+  const handleSwapDashboardWidgets = useCallback(() => {
+    setCustomizableCardsLayout((currentLayout) => ({
+      ...currentLayout,
+      order: [...currentLayout.order].reverse(),
+    }));
+  }, []);
+
+  const handleOpenAppsPanel = useCallback(() => {
+    executeEvent('newTabWindow', {});
+    setDesktopViewMode('apps');
+  }, [setDesktopViewMode]);
+  const handleOpenEmbeddedQuitter = useCallback(() => {
+    executeEvent('addTab', { data: { service: 'APP', name: 'Quitter' } });
+    executeEvent('open-apps-mode', {});
+  }, []);
+  const handleOpenQChatPanel = useCallback(() => {
+    setSelectedGroup(null);
+    setGroupSection('chat');
+    openQChatTab();
+  }, [setGroupSection, setSelectedGroup]);
+  const handleOpenGroupsWidget = useCallback(() => {
+    handleOpenQChatPanel();
+  }, [handleOpenQChatPanel]);
+
+  const qortinoWorkspaceShellFallback = (
+    <Box
+      sx={{
+        ...dashboardPanelSx(theme, 'utility'),
+        alignItems: 'flex-start',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '12px',
+        height: '100%',
+        justifyContent: 'center',
+        p: '20px',
+      }}
+    >
+      <Typography
+        sx={{
+          color: theme.palette.text.primary,
+          fontSize: '1rem',
+          fontWeight: 700,
+          letterSpacing: '-0.02em',
+        }}
+      >
+        {td('qortino_runtime_title', 'QORTINO card shell hit a runtime snag.')}
+      </Typography>
+      <Typography
+        sx={{
+          color: alpha(theme.palette.text.secondary, 0.82),
+          fontSize: '0.82rem',
+          lineHeight: 1.5,
+          maxWidth: '34ch',
+        }}
+      >
+        {td(
+          'qortino_runtime_body',
+          'The rest of the dashboard is still safe. Refresh the Hub and if this keeps happening report it to the team.'
+        )}
+      </Typography>
+    </Box>
+  );
+  const groupActivityCardOrder = Math.max(
+    0,
+    customizableCardsLayout.order.indexOf('groupActivity')
+  );
+  const quitterCardOrder = Math.max(
+    0,
+    customizableCardsLayout.order.indexOf('quitter')
+  );
+  const quitterWidgetInitialBatchSize =
+    HOME_QUITTER_WIDGET_INITIAL_BATCH_SIZES[HOME_DASHBOARD_WIDGET_DISPLAY_MODE];
+  const quitterWidgetLoadMoreBatchSize =
+    HOME_QUITTER_WIDGET_LOAD_MORE_BATCH_SIZES[
+      HOME_DASHBOARD_WIDGET_DISPLAY_MODE
+    ];
+  const quitterWidgetSearchLimit =
+    HOME_QUITTER_WIDGET_SEARCH_LIMITS[HOME_DASHBOARD_WIDGET_DISPLAY_MODE];
+
+  return (
+    <LazyMotion features={domAnimation}>
+      <Activity mode={desktopViewMode === 'home' ? 'visible' : 'hidden'}>
+        <motion.div
+          key="home"
+          initial={{ opacity: 0, scale: 1 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.25, ease: [0.22, 1, 0.36, 1] }}
+          custom={reduce}
+          style={{
+            alignItems: 'center',
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            overflow: 'auto',
+            scrollbarGutter: 'stable',
+            width: '100%',
+            willChange: 'opacity',
+            backfaceVisibility: 'hidden',
+          }}
+        >
+            <Spacer height="20px" />
+            <Box
+              ref={homeLayoutDebugRootRef}
+              sx={{
+                alignItems: 'flex-start',
+                display: 'flex',
+                flexDirection: 'column',
+                gap: `${HOME_DASHBOARD_VERTICAL_GAP_PX}px`,
+                maxWidth: '1320px',
+                padding: '0 20px',
+                position: 'relative',
+                width: '100%',
+                [theme.breakpoints.up(HOME_WIDE_DASHBOARD_MIN_WIDTH_PX)]: {
+                  maxWidth: '1520px',
+                },
+              }}
+            >
+              <Box
+                sx={{
+                  alignItems: 'start',
+                  display: 'grid',
+                  gap: `${HOME_DASHBOARD_VERTICAL_GAP_PX}px`,
+                  gridTemplateColumns: '1fr',
+                  width: '100%',
+                  [theme.breakpoints.up(HOME_WIDE_DASHBOARD_MIN_WIDTH_PX)]: {
+                    alignItems: 'stretch',
+                    gridTemplateColumns: `minmax(0, 1fr) ${HOME_SHARED_SIDE_RAIL_WIDTH_XL}`,
+                  },
+                }}
+              >
+                <Box
+                  sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: `${HOME_DASHBOARD_VERTICAL_GAP_PX}px`,
+                    minWidth: 0,
+                    width: '100%',
+                  }}
+                >
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: '10px',
+                      width: '100%',
+                    }}
+                  >
+                    <Box
+                      sx={{
+                        color: theme.palette.text.secondary,
+                        fontSize: '0.74rem',
+                        fontWeight: 700,
+                        letterSpacing: '0.0605em',
+                        textTransform: 'uppercase',
+                      }}
+                    >
+                      Qortal Hub
+                    </Box>
+                    {isWideDashboardLayout ? (
+                      <Box
+                        sx={{
+                          alignItems: 'start',
+                          display: 'grid',
+                          gap: `${HOME_DASHBOARD_VERTICAL_GAP_PX}px`,
+                          gridTemplateColumns:
+                            HOME_LEFT_CENTER_GRID_TEMPLATE_COLUMNS.xl,
+                          width: '100%',
+                        }}
+                      >
+                        <Box
+                          sx={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: `${HOME_DASHBOARD_VERTICAL_GAP_PX}px`,
+                            minWidth: 0,
+                            width: '100%',
+                          }}
+                        >
+                          <Box
+                            ref={accountOverviewDebugRef}
+                            sx={{
+                              display: 'block',
+                              height:
+                                resolvedQortinoCardHeightPx != null
+                                  ? `${resolvedQortinoCardHeightPx}px`
+                                  : undefined,
+                              minWidth: 0,
+                              position: 'relative',
+                              '& > *': { height: '100%' },
+                            }}
+                          >
+                            <ErrorBoundary
+                              fallback={qortinoWorkspaceShellFallback}
+                            >
+                              <HomeQortinoWorkspaceCard
+                                onGettingStartedComplete={
+                                  handleGettingStartedComplete
+                                }
+                                onOpenAppsPanel={handleOpenAppsPanel}
+                              />
+                            </ErrorBoundary>
+                          </Box>
+                          <Box
+                            ref={toolsDebugRef}
+                            sx={{
+                              display: 'block',
+                              minWidth: 0,
+                              position: 'relative',
+                              width: '100%',
+                            }}
+                          >
+                            <HomeQuickToolsPad
+                              fillHeight={false}
+                              onOpenApps={handleOpenAppsPanel}
+                              onOpenChat={handleOpenQChatPanel}
+                              onOpenSettings={onOpenSettings}
+                            />
+                          </Box>
+                        </Box>
+                        <Box
+                          sx={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: `${HOME_DASHBOARD_VERTICAL_GAP_PX}px`,
+                            minWidth: 0,
+                            width: '100%',
+                          }}
+                        >
+                          <Box
+                            ref={profileCardDebugRef}
+                            sx={{
+                              display: 'block',
+                              minWidth: 0,
+                              position: 'relative',
+                              width: '100%',
+                              '& > *': { width: '100%' },
+                            }}
+                          >
+                            <HomeProfileCard
+                              onOpenReceive={handleOpenReceiveQort}
+                            />
+                          </Box>
+                          <Box
+                            ref={featuredAppsDebugRef}
+                            sx={{
+                              display: 'flex',
+                              height:
+                                resolvedWideLeftLowerRowPanelHeightPx != null
+                                  ? `${resolvedWideLeftLowerRowPanelHeightPx}px`
+                                  : undefined,
+                              minWidth: 0,
+                              overflow: 'visible',
+                              position: 'relative',
+                              width: '100%',
+                              '& > *': {
+                                height: '100%',
+                                position: 'relative',
+                                width: '100%',
+                                zIndex: 1,
+                              },
+                            }}
+                          >
+                            <HomeFeaturedApps />
+                          </Box>
+                        </Box>
+                      </Box>
+                    ) : (
+                      <>
+                        <Box
+                          sx={{
+                            display: 'grid',
+                            gap: `${HOME_DASHBOARD_VERTICAL_GAP_PX}px`,
+                            gridTemplateColumns:
+                              HOME_LEFT_CENTER_LOWER_ROW_GRID_TEMPLATE_COLUMNS,
+                            alignItems: 'stretch',
+                            width: '100%',
+                          }}
+                        >
+                          <Box
+                            ref={accountOverviewDebugRef}
+                            sx={{
+                              display: 'block',
+                              height:
+                                resolvedQortinoCardHeightPx != null
+                                  ? `${resolvedQortinoCardHeightPx}px`
+                                  : undefined,
+                              minWidth: 0,
+                              position: 'relative',
+                              '& > *': { height: '100%' },
+                            }}
+                          >
+                            <ErrorBoundary
+                              fallback={qortinoWorkspaceShellFallback}
+                            >
+                              <HomeQortinoWorkspaceCard
+                                onGettingStartedComplete={() => {
+                                  setIsOnboardingComplete(true);
+                                }}
+                                onOpenAppsPanel={handleOpenAppsPanel}
+                              />
+                            </ErrorBoundary>
+                          </Box>
+                          <Box
+                            ref={profileCardDebugRef}
+                            sx={{
+                              display: 'block',
+                              minWidth: 0,
+                              position: 'relative',
+                              width: '100%',
+                              '& > *': { width: '100%' },
+                            }}
+                          >
+                            <HomeProfileCard
+                              onOpenReceive={handleOpenReceiveQort}
+                            />
+                          </Box>
+                        </Box>
+                        <Box
+                          sx={{
+                            display: 'grid',
+                            gap: `${HOME_DASHBOARD_VERTICAL_GAP_PX}px`,
+                            gridTemplateColumns:
+                              HOME_LEFT_CENTER_LOWER_ROW_GRID_TEMPLATE_COLUMNS,
+                            alignItems: 'stretch',
+                            width: '100%',
+                          }}
+                        >
+                          <Box
+                            ref={toolsDebugRef}
+                            sx={{
+                              display: 'block',
+                              minWidth: 0,
+                              position: 'relative',
+                              width: '100%',
+                            }}
+                          >
+                            <HomeQuickToolsPad
+                              fillHeight={false}
+                              onOpenApps={handleOpenAppsPanel}
+                              onOpenChat={handleOpenQChatPanel}
+                              onOpenSettings={onOpenSettings}
+                            />
+                          </Box>
+                          <Box
+                            ref={featuredAppsDebugRef}
+                            sx={{
+                              display: 'flex',
+                              height:
+                                resolvedWideLeftLowerRowPanelHeightPx != null
+                                  ? `${resolvedWideLeftLowerRowPanelHeightPx}px`
+                                  : undefined,
+                              minWidth: 0,
+                              overflow: 'visible',
+                              position: 'relative',
+                              width: '100%',
+                              '& > *': {
+                                height: '100%',
+                                position: 'relative',
+                                width: '100%',
+                                zIndex: 1,
+                              },
+                            }}
+                          >
+                            <HomeFeaturedApps />
+                          </Box>
+                        </Box>
+                      </>
+                    )}
+                  </Box>
+                </Box>
+                <Box
+                  ref={rightRailRef}
+                  data-home-right-rail=""
+                  sx={{
+                    alignContent: 'start',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: `${HOME_DASHBOARD_VERTICAL_GAP_PX}px`,
+                    minWidth: 0,
+                    [theme.breakpoints.up(HOME_WIDE_DASHBOARD_MIN_WIDTH_PX)]: {
+                      display: 'grid',
+                      gap: `${HOME_DASHBOARD_VERTICAL_GAP_PX}px`,
+                      gridTemplateRows: `${HOME_INFO_COLLAPSED_VISIBLE_HEIGHT_PX}px ${
+                        resolvedWalletActivityHeightPx != null
+                          ? `${resolvedWalletActivityHeightPx}px`
+                          : 'auto'
+                      }`,
+                      marginTop: `${HOME_RIGHT_RAIL_TOP_ALIGNMENT_OFFSET_PX}px`,
+                    },
+                  }}
+                >
+                  <Box
+                    ref={infoDebugRef}
+                    sx={{
+                      minWidth: 0,
+                      position: 'relative',
+                      width: '100%',
+                      '& > *': { height: '100%' },
+                    }}
+                  >
+                    <InfoPreviewPanel
+                      maxExpandedHeightPx={infoPanelMaxExpandedHeightPx}
+                    />
+                  </Box>
+                  <Box
+                    ref={walletActivityDebugRef}
+                    sx={{
+                      maxWidth: { xs: '100%', md: '360px' },
+                      position: 'relative',
+                      width: '100%',
+                      minHeight: '182px',
+                      height:
+                        resolvedWalletActivityHeightPx != null
+                          ? `${resolvedWalletActivityHeightPx}px`
+                          : undefined,
+                      '& > *': { height: '100%' },
+                    }}
+                  >
+                    <HomeDesktopWalletActivity />
+                  </Box>
+                </Box>
+              </Box>
+
+              <Box
+                sx={{
+                  alignItems: 'start',
+                  display: 'grid',
+                  gap: `${HOME_DASHBOARD_VERTICAL_GAP_PX}px`,
+                  gridTemplateColumns: '1fr',
+                  width: '100%',
+                  [theme.breakpoints.up(HOME_WIDE_DASHBOARD_MIN_WIDTH_PX)]: {
+                    gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+                  },
+                }}
+              >
+                <DashboardWidgetFrame
+                  actionIcon={<ForumRoundedIcon sx={{ fontSize: '0.86rem' }} />}
+                  actionLabel={td('open_in_q_chat', 'Open in Q-Chat')}
+                  height={HOME_DASHBOARD_WIDGET_HEIGHT_PX}
+                  onAction={handleOpenGroupsWidget}
+                  onRefresh={handleRefreshGroupActivity}
+                  onSwap={handleSwapDashboardWidgets}
+                  order={groupActivityCardOrder}
+                  panelRef={assignGroupActivityPanelNode}
+                  refreshing={isGroupWidgetRefreshing}
+                  title={t('tutorial:home.group_activity', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                  widgetId="groups"
+                >
+                  <GroupsWidget
+                    displayMode={HOME_DASHBOARD_WIDGET_DISPLAY_MODE}
+                    myAddress={myAddress}
+                    onRefreshStateChange={setIsGroupWidgetRefreshing}
+                    refreshToken={groupWidgetRefreshToken}
+                  />
+                </DashboardWidgetFrame>
+
+                <DashboardWidgetFrame
+                  actionIcon={
+                    <OpenInNewRoundedIcon sx={{ fontSize: '0.86rem' }} />
+                  }
+                  actionLabel={td('open_in_q_apps', 'Open in Q-Apps')}
+                  height={HOME_DASHBOARD_WIDGET_HEIGHT_PX}
+                  onAction={handleOpenEmbeddedQuitter}
+                  onRefresh={handleRefreshQuitterWidget}
+                  onSwap={handleSwapDashboardWidgets}
+                  order={quitterCardOrder}
+                  panelRef={quitterCardHeightRef}
+                  refreshing={isQuitterWidgetRefreshing}
+                  title={td('quitter_feed', 'Quitter Feed')}
+                  widgetId="quitter"
+                >
+                  <QuitterFeedWidget
+                    batchSize={quitterWidgetLoadMoreBatchSize}
+                    displayMode={HOME_DASHBOARD_WIDGET_DISPLAY_MODE}
+                    initialBatchSize={quitterWidgetInitialBatchSize}
+                    onRefreshStateChange={setIsQuitterWidgetRefreshing}
+                    refreshToken={quitterWidgetRefreshToken}
+                    searchLimit={quitterWidgetSearchLimit}
+                  />
+                </DashboardWidgetFrame>
+              </Box>
+            </Box>
+            <Spacer height="120px" />
+          </motion.div>
+      </Activity>
+    </LazyMotion>
+  );
+};
diff --git a/src/components/Group/HomeDesktop/HomeDesktopWalletActivity.tsx b/src/components/Group/HomeDesktop/HomeDesktopWalletActivity.tsx
new file mode 100644
index 00000000..6f44f03c
--- /dev/null
+++ b/src/components/Group/HomeDesktop/HomeDesktopWalletActivity.tsx
@@ -0,0 +1,590 @@
+import { Box, ButtonBase, Typography, useTheme } from '@mui/material';
+import SendRoundedIcon from '@mui/icons-material/SendRounded';
+import SouthWestRoundedIcon from '@mui/icons-material/SouthWestRounded';
+import ShoppingBagRoundedIcon from '@mui/icons-material/ShoppingBagRounded';
+import { alpha } from '@mui/material/styles';
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { useAtomValue } from 'jotai';
+import { balanceAtom, userInfoAtom } from '../../../atoms/global';
+import { getBaseApiReact } from '../../../App';
+import { executeEvent } from '../../../utils/events';
+import { useTranslation } from 'react-i18next';
+import { DashboardUtilityPanel } from './DashboardUtilityPanel';
+import { WalletActionButton } from './WalletActionButton';
+import { WALLET_ACTIVITY_RECENT_PAYMENT_FETCH_LIMIT } from './homeDesktopConstants';
+import type {
+  WalletActivityEntry,
+  WalletActivityTransaction,
+} from './types';
+import {
+  formatWalletActivityAmount,
+  formatWalletActivityRelativeTime,
+  getWalletActivityCreatorAddress,
+  getWalletActivityRecipientAddress,
+  isWalletActivityTimestampRecent,
+} from './utils';
+
+const HOME_RIGHT_RAIL_DATA_ATTR = '[data-home-right-rail]';
+
+function getRightRailRectFromElement(element: HTMLElement | null) {
+  if (!element) return null;
+  const rail = element.closest(HOME_RIGHT_RAIL_DATA_ATTR);
+  if (!rail) return null;
+  return rail.getBoundingClientRect();
+}
+
+export const HomeDesktopWalletActivity = () => {
+  const theme = useTheme();
+  const userInfo = useAtomValue(userInfoAtom);
+  const balance = useAtomValue(balanceAtom);
+  const userAddress = userInfo?.address;
+  const { t } = useTranslation(['core', 'group', 'tutorial', 'auth']);
+  const td = useCallback(
+    (key: string, defaultValue: string) =>
+      t(`group:dashboard.${key}`, { defaultValue }),
+    [t]
+  );
+
+  const tDashboard = useCallback(
+    (key: string, options?: { count?: number }) =>
+      t(`group:dashboard.${key}`, options),
+    [t]
+  );
+
+  const walletActivityNameCacheRef = useRef<Record<string, string>>({});
+  const lastWalletActivityBalanceRef = useRef<string | null>(null);
+  const [recentWalletActivity, setRecentWalletActivity] =
+    useState<WalletActivityEntry | null>(null);
+  const [isWalletActivityLoading, setIsWalletActivityLoading] = useState(false);
+  const [walletActivityRelativeTimeNow, setWalletActivityRelativeTimeNow] =
+    useState(() => Date.now());
+
+  const walletActivitySecondaryTextColor = alpha(
+    theme.palette.text.primary,
+    0.6
+  );
+
+  const handleOpenReceiveQort = useCallback((target: HTMLElement | null) => {
+    if (!target) return;
+    const rect = target.getBoundingClientRect();
+    const rightRailRect = getRightRailRectFromElement(target);
+    executeEvent('openReceiveQortInternal', {
+      address: userAddress ?? '',
+      anchorRect: {
+        height: rect.height,
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+      },
+      targetRect: rightRailRect
+        ? {
+            height: rightRailRect.height,
+            left: rightRailRect.left,
+            top: rightRailRect.top,
+            width: rightRailRect.width,
+          }
+        : null,
+    });
+  }, [userAddress]);
+
+  const handleOpenWalletActivityCounterparty = useCallback(
+    (address: string) => {
+      if (!address) return;
+      executeEvent('openUserLookupDrawer', {
+        addressOrName: address,
+      });
+    },
+    []
+  );
+
+  const resolveWalletActivityAddressLabel = useCallback(
+    async (address: string) => {
+      if (!address) {
+        return td('wallet_activity_unknown_address', 'Unknown address');
+      }
+
+      const cachedSenderName = walletActivityNameCacheRef.current[address];
+      if (cachedSenderName !== undefined) {
+        return cachedSenderName || address;
+      }
+
+      try {
+        const response = await fetch(
+          `${getBaseApiReact()}/names/primary/${address}`
+        );
+        const responseData = await response.json();
+        const senderName =
+          response.ok && responseData?.name ? responseData.name : '';
+        walletActivityNameCacheRef.current[address] = senderName || '';
+        return senderName || address;
+      } catch (error) {
+        console.error(
+          'Failed to resolve wallet activity participant name:',
+          error
+        );
+        walletActivityNameCacheRef.current[address] = '';
+        return address;
+      }
+    },
+    [td]
+  );
+
+  const fetchWalletActivityTransactionBySignature = useCallback(
+    async (signature?: string) => {
+      if (!signature) return null;
+
+      try {
+        const response = await fetch(
+          `${getBaseApiReact()}/transactions/signature/${encodeURIComponent(signature)}`
+        );
+
+        if (!response.ok) return null;
+
+        const responseData = await response.json();
+        return responseData && typeof responseData === 'object'
+          ? (responseData as WalletActivityTransaction)
+          : null;
+      } catch (error) {
+        console.error(
+          'Failed to load wallet activity transaction by signature:',
+          error
+        );
+        return null;
+      }
+    },
+    []
+  );
+
+  const buildWalletActivityEntry = useCallback(
+    async (transaction: WalletActivityTransaction | null | undefined) => {
+      if (!transaction || !userAddress) return null;
+
+      let resolvedTransaction = transaction;
+      let creatorAddress = getWalletActivityCreatorAddress(resolvedTransaction);
+      let recipientAddress =
+        getWalletActivityRecipientAddress(resolvedTransaction);
+
+      if (
+        (!creatorAddress || !recipientAddress) &&
+        resolvedTransaction.signature
+      ) {
+        const fullTransaction = await fetchWalletActivityTransactionBySignature(
+          resolvedTransaction.signature
+        );
+
+        if (fullTransaction) {
+          resolvedTransaction = {
+            ...resolvedTransaction,
+            ...fullTransaction,
+            timestamp:
+              resolvedTransaction.timestamp ?? fullTransaction.timestamp,
+          };
+          creatorAddress = getWalletActivityCreatorAddress(resolvedTransaction);
+          recipientAddress =
+            getWalletActivityRecipientAddress(resolvedTransaction);
+        }
+      }
+
+      const timestamp = Number(resolvedTransaction.timestamp);
+      const amount = Number(resolvedTransaction.amount);
+      const isOutgoing = creatorAddress === userAddress;
+      const isIncoming = recipientAddress === userAddress;
+
+      if (
+        !Number.isFinite(timestamp) ||
+        !Number.isFinite(amount) ||
+        (!isIncoming && !isOutgoing) ||
+        !isWalletActivityTimestampRecent(timestamp)
+      ) {
+        return null;
+      }
+
+      const counterpartyAddress = isOutgoing
+        ? recipientAddress
+        : creatorAddress;
+
+      if (!counterpartyAddress) return null;
+
+      const counterpartyLabel =
+        await resolveWalletActivityAddressLabel(counterpartyAddress);
+
+      const direction = isOutgoing ? 'outgoing' : 'incoming';
+      return {
+        amount,
+        counterpartyAddress,
+        counterpartyLabel,
+        direction,
+        timestamp,
+      } satisfies WalletActivityEntry;
+    },
+    [
+      fetchWalletActivityTransactionBySignature,
+      resolveWalletActivityAddressLabel,
+      userAddress,
+    ]
+  );
+
+  const loadRecentWalletActivity = useCallback(async () => {
+    if (!userAddress) {
+      setRecentWalletActivity(null);
+      setIsWalletActivityLoading(false);
+      return;
+    }
+
+    setIsWalletActivityLoading(true);
+
+    try {
+      const response = await fetch(
+        `${getBaseApiReact()}/transactions/search?txType=PAYMENT&address=${userAddress}&confirmationStatus=CONFIRMED&limit=${WALLET_ACTIVITY_RECENT_PAYMENT_FETCH_LIMIT}&reverse=true`
+      );
+
+      if (!response.ok) {
+        throw new Error('Failed to fetch wallet activity payments');
+      }
+
+      const responseData = await response.json();
+      const latestRelevantPayment = Array.isArray(responseData)
+        ? responseData.find(
+            (transaction: WalletActivityTransaction) =>
+              (getWalletActivityCreatorAddress(transaction) === userAddress ||
+                getWalletActivityRecipientAddress(transaction) ===
+                  userAddress) &&
+              Number.isFinite(Number(transaction?.timestamp)) &&
+              isWalletActivityTimestampRecent(Number(transaction.timestamp))
+          )
+        : null;
+
+      const recentEntry = await buildWalletActivityEntry(latestRelevantPayment);
+      setRecentWalletActivity((currentEntry) => {
+        if (!recentEntry) {
+          return currentEntry &&
+            isWalletActivityTimestampRecent(currentEntry.timestamp)
+            ? currentEntry
+            : null;
+        }
+
+        if (
+          currentEntry &&
+          isWalletActivityTimestampRecent(currentEntry.timestamp) &&
+          currentEntry.timestamp > recentEntry.timestamp
+        ) {
+          return currentEntry;
+        }
+
+        return recentEntry;
+      });
+    } catch (error) {
+      console.error('Failed to load recent wallet activity:', error);
+      setRecentWalletActivity((currentEntry) =>
+        currentEntry && isWalletActivityTimestampRecent(currentEntry.timestamp)
+          ? currentEntry
+          : null
+      );
+    } finally {
+      setIsWalletActivityLoading(false);
+    }
+  }, [buildWalletActivityEntry, userAddress]);
+
+  useEffect(() => {
+    const intervalId = window.setInterval(() => {
+      setWalletActivityRelativeTimeNow(Date.now());
+    }, 60000);
+
+    return () => {
+      window.clearInterval(intervalId);
+    };
+  }, []);
+
+  useEffect(() => {
+    setRecentWalletActivity(null);
+    lastWalletActivityBalanceRef.current = null;
+  }, [userAddress]);
+
+  useEffect(() => {
+    if (!userAddress || balance == null) {
+      return;
+    }
+
+    const nextBalanceKey = String(balance);
+    if (lastWalletActivityBalanceRef.current == null) {
+      lastWalletActivityBalanceRef.current = nextBalanceKey;
+      return;
+    }
+
+    if (lastWalletActivityBalanceRef.current === nextBalanceKey) {
+      return;
+    }
+
+    lastWalletActivityBalanceRef.current = nextBalanceKey;
+    const refreshTimer = window.setTimeout(() => {
+      loadRecentWalletActivity();
+    }, 650);
+
+    return () => {
+      window.clearTimeout(refreshTimer);
+    };
+  }, [balance, loadRecentWalletActivity, userAddress]);
+
+  useEffect(() => {
+    loadRecentWalletActivity();
+  }, [loadRecentWalletActivity]);
+
+  return (
+    <DashboardUtilityPanel
+      title={td('wallet_activity', 'Wallet Activity')}
+      theme={theme}
+      sx={{
+        gap: '12px',
+        height: '100%',
+        minHeight: '182px',
+        padding: '14px 16px 16px',
+      }}
+    >
+      <Box
+        sx={{
+          borderBottom: `1px solid ${theme.palette.border.subtle}`,
+          pb: 1.35,
+        }}
+      />
+      <Box
+        sx={{
+          display: 'grid',
+          gap: '8px',
+          gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+          pt: 0.5,
+        }}
+      >
+        <WalletActionButton
+          icon={<SendRoundedIcon sx={{ fontSize: '16px' }} />}
+          label={td('send', 'Send')}
+          onClick={(event) => {
+            const el = event.currentTarget as HTMLElement;
+            const rect = el.getBoundingClientRect();
+            const rightRailRect = getRightRailRectFromElement(el);
+            executeEvent('openPaymentInternal', {
+              anchorRect: {
+                height: rect.height,
+                left: rect.left,
+                top: rect.top,
+                width: rect.width,
+              },
+              targetRect: rightRailRect
+                ? {
+                    height: rightRailRect.height,
+                    left: rightRailRect.left,
+                    top: rightRailRect.top,
+                    width: rightRailRect.width,
+                  }
+                : null,
+            });
+          }}
+          theme={theme}
+        />
+        <WalletActionButton
+          icon={<SouthWestRoundedIcon sx={{ fontSize: '16px' }} />}
+          label={td('receive', 'Receive')}
+          onClick={(event) => {
+            handleOpenReceiveQort(event.currentTarget as HTMLElement);
+          }}
+          theme={theme}
+        />
+        <WalletActionButton
+          icon={<ShoppingBagRoundedIcon sx={{ fontSize: '16px' }} />}
+          label={td('buy', 'Buy')}
+          onClick={() => {
+            executeEvent('addTab', {
+              data: { service: 'APP', name: 'q-trade' },
+            });
+            executeEvent('open-apps-mode', {});
+          }}
+          theme={theme}
+        />
+      </Box>
+      <Box
+        sx={{
+          borderTop: `1px solid ${theme.palette.border.subtle}`,
+          display: 'flex',
+          flexDirection: 'column',
+          flex: 1,
+          gap: '5px',
+          mt: 0.35,
+          minHeight: 0,
+          pt: 2.2,
+        }}
+      >
+        <Typography
+          sx={{
+            color: theme.palette.text.secondary,
+            fontSize: '0.64rem',
+            fontWeight: 600,
+            letterSpacing: '0.08em',
+            textAlign: 'left',
+            textTransform: 'uppercase',
+          }}
+        >
+          {td('recent_transaction', 'Recent Transaction')}
+        </Typography>
+        {isWalletActivityLoading ? (
+          <Typography
+            sx={{
+              color: theme.palette.text.secondary,
+              fontSize: '0.82rem',
+              lineHeight: 1.45,
+            }}
+          >
+            {td(
+              'loading_wallet_activity',
+              'Loading recent wallet activity...'
+            )}
+          </Typography>
+        ) : recentWalletActivity ? (
+          [recentWalletActivity].map((activityEntry, index) => (
+            <Box
+              key={`${activityEntry.timestamp}-${index}`}
+              sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '6px',
+                minWidth: 0,
+                '& + &': {
+                  borderTop: `1px solid ${alpha(
+                    theme.palette.text.primary,
+                    0.08
+                  )}`,
+                  mt: 0.25,
+                  pt: 1.2,
+                },
+              }}
+            >
+              <Box
+                sx={{
+                  alignItems: 'baseline',
+                  color: theme.palette.text.primary,
+                  display: 'flex',
+                  gap: '5px',
+                  minWidth: 0,
+                  textAlign: 'left',
+                  width: '100%',
+                }}
+              >
+                <Typography
+                  sx={{
+                    color: theme.palette.text.primary,
+                    fontSize: '0.95rem',
+                    fontWeight: 600,
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {formatWalletActivityAmount(
+                    activityEntry.amount,
+                    activityEntry.direction
+                  )}
+                </Typography>
+                <Typography
+                  sx={{
+                    color: theme.palette.text.primary,
+                    fontSize: '0.83rem',
+                    lineHeight: 1.45,
+                    minWidth: 0,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  <Box
+                    component="span"
+                    sx={{
+                      color: walletActivitySecondaryTextColor,
+                    }}
+                  >
+                    {activityEntry.direction === 'outgoing'
+                      ? td('sent_to', 'sent to ')
+                      : td('received_from', 'received from ')}
+                  </Box>
+                  <ButtonBase
+                    component="span"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      handleOpenWalletActivityCounterparty(
+                        activityEntry.counterpartyAddress
+                      );
+                    }}
+                    sx={{
+                      borderRadius: '6px',
+                      color: theme.palette.text.primary,
+                      display: 'inline-flex',
+                      font: 'inherit',
+                      fontWeight: 600,
+                      lineHeight: 'inherit',
+                      maxWidth: '100%',
+                      minWidth: 0,
+                      p: 0,
+                      textAlign: 'left',
+                      verticalAlign: 'baseline',
+                      '&:hover': {
+                        color: theme.palette.primary.light,
+                        textDecoration: 'underline',
+                        textUnderlineOffset: '2px',
+                      },
+                    }}
+                  >
+                    {activityEntry.counterpartyLabel}
+                  </ButtonBase>
+                </Typography>
+              </Box>
+              <Typography
+                sx={{
+                  color: walletActivitySecondaryTextColor,
+                  fontSize: '0.74rem',
+                  lineHeight: 1.4,
+                  textAlign: 'left',
+                }}
+              >
+                {formatWalletActivityRelativeTime(
+                  activityEntry.timestamp,
+                  walletActivityRelativeTimeNow,
+                  tDashboard
+                )}
+              </Typography>
+            </Box>
+          ))
+        ) : (
+          <Typography
+            sx={{
+              color: theme.palette.text.secondary,
+              fontSize: '0.82rem',
+              lineHeight: 1.45,
+            }}
+          >
+            {td('no_wallet_activity', 'No new wallet activity.')}
+          </Typography>
+        )}
+        <Box
+          sx={{
+            mt: 'auto',
+            pt: 1.05,
+          }}
+        >
+          <Typography
+            sx={{
+              color: walletActivitySecondaryTextColor,
+              fontSize: '0.68rem',
+              lineHeight: 1.45,
+              textAlign: 'left',
+            }}
+          >
+            {td(
+              'wallet_activity_window',
+              'Latest transaction within the past 7 days'
+            )}
+          </Typography>
+        </Box>
+      </Box>
+    </DashboardUtilityPanel>
+  );
+};
diff --git a/src/components/Group/HomeDesktop/InfoPreviewPanel.tsx b/src/components/Group/HomeDesktop/InfoPreviewPanel.tsx
new file mode 100644
index 00000000..4978873a
--- /dev/null
+++ b/src/components/Group/HomeDesktop/InfoPreviewPanel.tsx
@@ -0,0 +1,914 @@
+import {
+  Box,
+  ButtonBase,
+  CircularProgress,
+  Menu,
+  MenuItem,
+  Tooltip,
+  Typography,
+  useMediaQuery,
+  useTheme,
+} from '@mui/material';
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
+import { alpha } from '@mui/material/styles';
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import type { InfoPreviewPrimaryRow } from './infoPreviewPanelTypes';
+export type {
+  InfoPreviewPanelRows,
+  InfoPreviewStatusTone,
+} from './infoPreviewPanelTypes';
+import { useDashboardInfoPreviewRows } from './useDashboardInfoPreviewRows';
+import { useDashboardNodeMenu } from './useDashboardNodeMenu';
+import {
+  nodeMenuItemSx,
+  normalizeDashboardNodeUrl,
+} from './utils';
+import { GROUP_ACTIVITY_BLUE } from '../groupActivityColorSystem';
+import {
+  dashboardPanelSx,
+  handleDashboardPanelPointerLeave,
+  handleDashboardPanelPointerMove,
+  useDashboardPanelMouseLight,
+} from '../dashboardPanelEffects';
+import { ProgressiveBlur } from '../../ui/progressive-blur';
+import {
+  HOME_WIDE_DASHBOARD_MIN_WIDTH_PX,
+  INFO_PANEL_EXPAND_CLOSE_DELAY_MS,
+  INFO_PANEL_EXPAND_OPEN_DELAY_MS,
+  INFO_PANEL_EXPANDED_EXTRA_BREATHING_PX,
+  SYSTEM_BADGE_SX,
+} from './homeDesktopConstants';
+
+const sepSx = (theme) => ({
+  borderBottom: `1px solid ${theme.palette.border.subtle}`,
+});
+
+const infoSepSx = (theme, _index, _total) => sepSx(theme);
+
+export const InfoPreviewPanel = ({
+  maxExpandedHeightPx = null,
+}: {
+  maxExpandedHeightPx?: number | null;
+}) => {
+  const theme = useTheme();
+  const {
+    dashboardNodeOptions,
+    handleCloseNodeMenu,
+    handleOpenNodeMenu,
+    handleSelectDashboardNode,
+    isSwitchingNodeUrl,
+    nodeMenuAnchorEl,
+    nodeSwitchError,
+    selectedNodeUrl,
+    td,
+  } = useDashboardNodeMenu();
+  const { i18n } = useTranslation(['core', 'group', 'tutorial', 'auth']);
+  const resetKey = (
+    i18n.resolvedLanguage ||
+    i18n.language ||
+    'en'
+  ).split('-')[0];
+  const rows = useDashboardInfoPreviewRows({
+    nodeMenuAnchorEl,
+    onOpenNodeMenu: handleOpenNodeMenu,
+  });
+  const forceExpanded = Boolean(nodeMenuAnchorEl);
+  const enableOverlay = useMediaQuery(
+    theme.breakpoints.up(HOME_WIDE_DASHBOARD_MIN_WIDTH_PX)
+  );
+  const panelRef = useDashboardPanelMouseLight<HTMLDivElement>();
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const contentRef = useRef<HTMLDivElement | null>(null);
+  const openTimerRef = useRef<number | null>(null);
+  const closeTimerRef = useRef<number | null>(null);
+  const [collapsedHeight, setCollapsedHeight] = useState(0);
+  const [contentHeight, setContentHeight] = useState(0);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const footerSectionCount = rows.footerSections.length;
+  const footerItemCount = rows.footerSections.reduce(
+    (total, section) => total + section.items.length,
+    0
+  );
+
+  const clearHoverTimers = () => {
+    if (openTimerRef.current !== null) {
+      window.clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+    if (closeTimerRef.current !== null) {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  };
+
+  useEffect(() => {
+    return () => clearHoverTimers();
+  }, []);
+
+  useEffect(() => {
+    clearHoverTimers();
+    setIsExpanded(false);
+    setCollapsedHeight(0);
+    setContentHeight(0);
+  }, [resetKey]);
+
+  useEffect(() => {
+    if (!enableOverlay) {
+      setIsExpanded(false);
+      return;
+    }
+
+    const wrapperNode = wrapperRef.current;
+    const contentNode = contentRef.current;
+    if (!wrapperNode || !contentNode) return;
+
+    const updateMeasurements = () => {
+      setCollapsedHeight(wrapperNode.getBoundingClientRect().height);
+      setContentHeight(contentNode.scrollHeight);
+    };
+
+    updateMeasurements();
+
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', updateMeasurements);
+      return () => {
+        window.removeEventListener('resize', updateMeasurements);
+      };
+    }
+
+    const resizeObserver = new ResizeObserver(updateMeasurements);
+    resizeObserver.observe(wrapperNode);
+    resizeObserver.observe(contentNode);
+    window.addEventListener('resize', updateMeasurements);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener('resize', updateMeasurements);
+    };
+  }, [
+    enableOverlay,
+    footerItemCount,
+    footerSectionCount,
+    resetKey,
+    rows.metricItems.length,
+    rows.primaryItems.length,
+  ]);
+
+  const hasOverflow =
+    enableOverlay && collapsedHeight > 0 && contentHeight > collapsedHeight + 4;
+  const isEffectivelyExpanded = isExpanded || (forceExpanded && hasOverflow);
+  const resolvedCollapsedHeight =
+    collapsedHeight > 0 ? collapsedHeight : undefined;
+  const rawExpandedHeight = resolvedCollapsedHeight
+    ? Math.max(
+        resolvedCollapsedHeight,
+        contentHeight + INFO_PANEL_EXPANDED_EXTRA_BREATHING_PX
+      )
+    : contentHeight + INFO_PANEL_EXPANDED_EXTRA_BREATHING_PX;
+  const expandedHeight =
+    maxExpandedHeightPx != null
+      ? Math.max(
+          resolvedCollapsedHeight ?? 0,
+          Math.min(rawExpandedHeight, maxExpandedHeightPx)
+        )
+      : rawExpandedHeight;
+
+  const handleMouseEnter = () => {
+    if (!hasOverflow) return;
+    if (closeTimerRef.current !== null) {
+      window.clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+    if (isExpanded || openTimerRef.current !== null) return;
+    openTimerRef.current = window.setTimeout(() => {
+      openTimerRef.current = null;
+      setIsExpanded(true);
+    }, INFO_PANEL_EXPAND_OPEN_DELAY_MS);
+  };
+
+  const handleMouseLeave = (event: MouseEvent<HTMLDivElement>) => {
+    handleDashboardPanelPointerLeave(event);
+    if (forceExpanded) return;
+    if (!hasOverflow) return;
+    if (openTimerRef.current !== null) {
+      window.clearTimeout(openTimerRef.current);
+      openTimerRef.current = null;
+    }
+    if (!isExpanded || closeTimerRef.current !== null) return;
+    closeTimerRef.current = window.setTimeout(() => {
+      closeTimerRef.current = null;
+      setIsExpanded(false);
+    }, INFO_PANEL_EXPAND_CLOSE_DELAY_MS);
+  };
+
+  const showCollapsedFade = hasOverflow && !isEffectivelyExpanded;
+  const statusAccentColor =
+    rows.status.tone === 'issue'
+      ? theme.palette.mode === 'dark'
+        ? alpha(theme.palette.error.light, 0.9)
+        : alpha(theme.palette.error.main, 0.88)
+      : rows.status.tone === 'syncing'
+        ? theme.palette.mode === 'dark'
+          ? alpha(theme.palette.warning.light, 0.9)
+          : alpha(theme.palette.warning.main, 0.88)
+        : theme.palette.mode === 'dark'
+          ? alpha(GROUP_ACTIVITY_BLUE.gradientTop, 0.96)
+          : alpha(GROUP_ACTIVITY_BLUE.gradientBottom, 0.92);
+  const statusGlowColor =
+    rows.status.tone === 'issue'
+      ? alpha(theme.palette.error.light, 0.16)
+      : rows.status.tone === 'syncing'
+        ? alpha(theme.palette.warning.light, 0.18)
+        : alpha(GROUP_ACTIVITY_BLUE.primary, 0.18);
+
+  const renderPrimaryValue = (row: InfoPreviewPrimaryRow) => {
+    if (row.valueNode) return row.valueNode;
+
+    if (row.variant === 'pill') {
+      const pillTone =
+        row.pillTone === 'negative'
+          ? {
+              background:
+                theme.palette.mode === 'dark'
+                  ? 'rgba(104, 70, 74, 0.32)'
+                  : 'rgba(168, 90, 90, 0.12)',
+              border: alpha(
+                theme.palette.error.light,
+                theme.palette.mode === 'dark' ? 0.16 : 0.22
+              ),
+              color:
+                theme.palette.mode === 'dark'
+                  ? alpha(theme.palette.error.light, 0.88)
+                  : alpha(theme.palette.error.dark, 0.88),
+            }
+          : row.pillTone === 'warning'
+            ? {
+                background:
+                  theme.palette.mode === 'dark'
+                    ? 'rgba(123, 102, 62, 0.3)'
+                    : 'rgba(173, 140, 74, 0.14)',
+                border: alpha(
+                  theme.palette.warning.light,
+                  theme.palette.mode === 'dark' ? 0.18 : 0.24
+                ),
+                color:
+                  theme.palette.mode === 'dark'
+                    ? alpha(theme.palette.warning.light, 0.9)
+                    : alpha(theme.palette.warning.dark, 0.88),
+              }
+            : {
+                background:
+                  theme.palette.mode === 'dark'
+                    ? 'rgba(88, 122, 178, 0.3)'
+                    : 'rgba(117, 161, 227, 0.15)',
+                border: alpha(
+                  GROUP_ACTIVITY_BLUE.gradientTop,
+                  theme.palette.mode === 'dark' ? 0.18 : 0.24
+                ),
+                color:
+                  theme.palette.mode === 'dark'
+                    ? alpha(GROUP_ACTIVITY_BLUE.gradientTop, 0.92)
+                    : alpha(GROUP_ACTIVITY_BLUE.pressed, 0.9),
+              };
+      return (
+        <Box
+          sx={{
+            alignItems: 'center',
+            background: pillTone.background,
+            border: `1px solid ${pillTone.border}`,
+            boxShadow: 'boxShadow' in pillTone ? pillTone.boxShadow : 'none',
+            color: pillTone.color,
+            display: 'inline-flex',
+            justifyContent: 'center',
+            justifySelf: 'end',
+            maxWidth: '100%',
+            minWidth: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            ...SYSTEM_BADGE_SX,
+          }}
+        >
+          {row.value}
+        </Box>
+      );
+    }
+
+    return (
+      <Typography
+        sx={{
+          color: row.emphasize
+            ? theme.palette.text.primary
+            : alpha(theme.palette.text.primary, 0.9),
+          fontSize: row.emphasize ? '0.96rem' : '0.88rem',
+          fontWeight: row.emphasize ? 700 : 600,
+          letterSpacing: row.emphasize ? '0.01em' : '0.012em',
+          lineHeight: 1.2,
+          maxWidth: '100%',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {row.value}
+      </Typography>
+    );
+  };
+
+  return (
+    <Box
+      sx={{
+        height: '100%',
+        minWidth: 0,
+        position: 'relative',
+        width: '100%',
+      }}
+    >
+      <Box
+        ref={wrapperRef}
+      sx={{
+        minWidth: 0,
+        position: 'relative',
+        width: '100%',
+        ...(enableOverlay
+          ? {
+              height: '100%',
+              minHeight: 0,
+              zIndex: isEffectivelyExpanded ? 4 : 1,
+            }
+          : {}),
+      }}
+    >
+      <Box
+        ref={panelRef}
+        sx={{
+          ...dashboardPanelSx(theme, 'utility'),
+          borderRadius: '14px',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 0,
+          minWidth: 0,
+          overflow: 'hidden',
+          px: '16px',
+          py: '12px',
+          width: '100%',
+          ...(enableOverlay
+            ? {
+                borderColor: isEffectivelyExpanded
+                  ? theme.palette.border.main
+                  : theme.palette.border.subtle,
+                boxShadow: isEffectivelyExpanded
+                  ? theme.palette.mode === 'dark'
+                    ? '0 26px 34px -12px rgba(0, 0, 0, 0.34)'
+                    : '0 24px 28px -12px rgba(15, 23, 42, 0.16)'
+                  : undefined,
+                height:
+                  resolvedCollapsedHeight == null
+                    ? '100%'
+                    : `${
+                        isEffectivelyExpanded
+                          ? expandedHeight
+                          : resolvedCollapsedHeight
+                      }px`,
+                left: 0,
+                position: 'absolute',
+                right: 0,
+                top: 0,
+                transition:
+                  'height 160ms cubic-bezier(0.2, 0, 0, 1), box-shadow 140ms ease, border-color 140ms ease',
+              }
+            : {
+                height: '100%',
+              }),
+        }}
+        onMouseEnter={handleMouseEnter}
+        onMouseMove={handleDashboardPanelPointerMove}
+        onMouseLeave={handleMouseLeave}
+      >
+        <Box
+          className="dashboard-panel-decoration"
+          sx={{
+            display: 'none',
+          }}
+        />
+        <Box
+          ref={contentRef}
+          sx={{
+            '& > *': {
+              flexShrink: 0,
+            },
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: 0,
+            position: 'relative',
+            width: '100%',
+          }}
+        >
+          <Box
+            sx={{
+              alignItems: 'center',
+              display: 'flex',
+              justifyContent: 'flex-start',
+              mb: '14px',
+              width: '100%',
+            }}
+          >
+            <Typography
+              component="div"
+              sx={{
+                alignItems: 'center',
+                color: theme.palette.text.primary,
+                display: 'inline-flex',
+                fontFamily:
+                  '"IBM Plex Mono","SFMono-Regular","Cascadia Mono","Fira Code","Consolas",monospace',
+                fontSize: '0.95rem',
+                fontWeight: 600,
+                letterSpacing: '0.02em',
+                lineHeight: 1,
+                textTransform: 'none',
+              }}
+            >
+              <Box component="span">
+                {td('info_panel_status', 'status')}
+              </Box>
+              <Box
+                component="span"
+                aria-hidden="true"
+                sx={{
+                  animation:
+                    'homeStatusCursorBlink 1.08s steps(1, end) infinite',
+                  color: statusAccentColor,
+                  display: 'inline-block',
+                  ml: '1px',
+                  textShadow: `0 0 8px ${statusGlowColor}`,
+                  '@keyframes homeStatusCursorBlink': {
+                    '0%, 42%': {
+                      opacity: 1,
+                    },
+                    '43%, 100%': {
+                      opacity: 0.26,
+                    },
+                  },
+                }}
+              >
+                _
+              </Box>
+            </Typography>
+          </Box>
+
+          <Box sx={{ ...sepSx(theme), pb: '12px', mb: '8px' }} />
+
+          {rows.primaryItems.map((row, index) => (
+            <Box
+              key={row.label}
+              sx={{
+                ...(index < rows.primaryItems.length - 1
+                  ? infoSepSx(theme, index, rows.primaryItems.length)
+                  : {}),
+                alignItems: 'center',
+                columnGap: '18px',
+                display: 'grid',
+                gridTemplateColumns: 'minmax(0, 1fr) auto',
+                height: '46px',
+                minWidth: 0,
+                overflow: 'hidden',
+                py: 0,
+              }}
+            >
+              <Typography
+                sx={{
+                  color:
+                    theme.palette.mode === 'dark'
+                      ? alpha(theme.palette.common.white, 0.56)
+                      : alpha(theme.palette.text.primary, 0.62),
+                  fontSize: '0.82rem',
+                  fontWeight: 500,
+                  letterSpacing: '0.012em',
+                  minWidth: 0,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {row.label}
+              </Typography>
+              <Box
+                sx={{
+                  alignItems: 'center',
+                  color: theme.palette.text.primary,
+                  display: 'flex',
+                  height: '100%',
+                  justifyContent: 'flex-end',
+                  maxWidth: '100%',
+                  minWidth: 0,
+                  textAlign: 'right',
+                }}
+              >
+                {renderPrimaryValue(row)}
+              </Box>
+            </Box>
+          ))}
+
+          <Box
+            sx={{
+              display: 'grid',
+              gap: '10px',
+              gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
+              mb: '12px',
+              mt: '16px',
+            }}
+          >
+            {rows.metricItems.map((metric) => (
+              <Box
+                key={metric.label}
+                sx={{
+                  bgcolor:
+                    theme.palette.mode === 'dark'
+                      ? 'rgba(38, 42, 52, 0.9)'
+                      : 'rgba(248, 244, 238, 0.96)',
+                  border: `1px solid ${alpha(
+                    theme.palette.border.subtle,
+                    theme.palette.mode === 'dark' ? 0.92 : 0.68
+                  )}`,
+                  borderRadius: '10px',
+                  boxShadow:
+                    theme.palette.mode === 'dark'
+                      ? 'inset 0 1px 0 rgba(255,255,255,0.04)'
+                      : 'inset 0 1px 0 rgba(255,255,255,0.72)',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'space-between',
+                  minHeight: '70px',
+                  minWidth: 0,
+                  overflow: 'hidden',
+                  position: 'relative',
+                  px: '12px',
+                  py: '10px',
+                }}
+              >
+                <Typography
+                  sx={{
+                    color:
+                      theme.palette.mode === 'dark'
+                        ? alpha(theme.palette.common.white, 0.46)
+                        : alpha(theme.palette.text.primary, 0.52),
+                    fontSize: '0.66rem',
+                    fontWeight: 500,
+                    letterSpacing: '0.03em',
+                    lineHeight: 1.1,
+                    minWidth: 0,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    textTransform: 'uppercase',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {metric.label}
+                </Typography>
+                <Typography
+                  sx={{
+                    color: theme.palette.text.primary,
+                    fontSize: '1.08rem',
+                    fontWeight: 700,
+                    letterSpacing: '0.01em',
+                    lineHeight: 1.1,
+                    minWidth: 0,
+                    mt: '8px',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {metric.value}
+                </Typography>
+              </Box>
+            ))}
+          </Box>
+
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '8px',
+              mt: '12px',
+              width: '100%',
+            }}
+          >
+            {rows.footerSections.map((section, sectionIndex) => {
+              const isNodeSection = section.variant === 'node';
+              const sectionHeaderLabel = isNodeSection
+                ? td('info_panel_node_comment', '// node_info')
+                : section.title;
+
+              return (
+                <Box
+                  key={section.title}
+                  sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '6px',
+                    mt:
+                      section.offsetTopPx != null
+                        ? `${section.offsetTopPx}px`
+                        : sectionIndex === 0
+                          ? 0
+                          : '2px',
+                  }}
+                >
+                  <Typography
+                    component="div"
+                    sx={{
+                      alignItems: 'center',
+                      color: isNodeSection
+                        ? theme.palette.mode === 'dark'
+                          ? alpha(theme.palette.common.white, 0.38)
+                          : alpha(theme.palette.text.secondary, 0.92)
+                        : theme.palette.text.primary,
+                      display: 'inline-flex',
+                      fontFamily:
+                        '"IBM Plex Mono","SFMono-Regular","Cascadia Mono","Fira Code","Consolas",monospace',
+                      fontSize: '0.95rem',
+                      fontWeight: 600,
+                      letterSpacing: '0.02em',
+                      lineHeight: 1,
+                      mb: '8px',
+                      textTransform: 'none',
+                    }}
+                  >
+                    {sectionHeaderLabel}
+                  </Typography>
+
+                  {section.items.map((row, index) => (
+                    <Box
+                      key={row.label}
+                      sx={{
+                        ...(index < section.items.length - 1
+                          ? infoSepSx(theme, index, section.items.length)
+                          : {}),
+                        ...(isNodeSection
+                          ? {
+                              alignItems: 'center',
+                              columnGap: '18px',
+                              display: 'grid',
+                              gridTemplateColumns: 'minmax(0, 1fr) auto',
+                              height: '46px',
+                              minWidth: 0,
+                              mt: index === 0 ? '14px' : 0,
+                              overflow: 'hidden',
+                              py: 0,
+                              width: '100%',
+                            }
+                          : {
+                              display: 'flex',
+                              flexDirection: 'column',
+                              gap: '4px',
+                              minHeight: '50px',
+                              py: '6px',
+                            }),
+                      }}
+                    >
+                      {row.labelAction ? (
+                        <Tooltip title={row.labelAction.tooltip}>
+                          <ButtonBase
+                            aria-label={row.labelAction.ariaLabel}
+                            onClick={row.labelAction.onClick}
+                            sx={{
+                              alignItems: 'center',
+                              borderRadius: '6px',
+                              color:
+                                theme.palette.mode === 'dark'
+                                  ? alpha(theme.palette.common.white, 0.58)
+                                  : alpha(theme.palette.text.primary, 0.64),
+                              display: 'inline-flex',
+                              gap: '3px',
+                              justifySelf: 'start',
+                              minWidth: 0,
+                              px: '4px',
+                              py: '3px',
+                              transform: 'translateX(-4px)',
+                              transition:
+                                'background-color 140ms ease, color 140ms ease',
+                              '&:hover': {
+                                backgroundColor: alpha(
+                                  GROUP_ACTIVITY_BLUE.primary,
+                                  theme.palette.mode === 'dark' ? 0.13 : 0.09
+                                ),
+                                color:
+                                  theme.palette.mode === 'dark'
+                                    ? alpha(
+                                        GROUP_ACTIVITY_BLUE.gradientTop,
+                                        0.95
+                                      )
+                                    : alpha(GROUP_ACTIVITY_BLUE.pressed, 0.94),
+                              },
+                            }}
+                          >
+                            <Typography
+                              component="span"
+                              sx={{
+                                color: 'inherit',
+                                fontSize: '0.79rem',
+                                fontWeight: 600,
+                                letterSpacing: '0.012em',
+                                lineHeight: 1.1,
+                                minWidth: 0,
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                whiteSpace: 'nowrap',
+                              }}
+                            >
+                              {row.label}
+                            </Typography>
+                            <KeyboardArrowDownRoundedIcon
+                              sx={{
+                                fontSize: '0.95rem',
+                                transform: row.labelAction.isOpen
+                                  ? 'rotate(180deg)'
+                                  : 'none',
+                                transition: 'transform 140ms ease',
+                              }}
+                            />
+                          </ButtonBase>
+                        </Tooltip>
+                      ) : (
+                        <Typography
+                          sx={{
+                            color:
+                              theme.palette.mode === 'dark'
+                                ? alpha(theme.palette.common.white, 0.52)
+                                : alpha(theme.palette.text.primary, 0.58),
+                            fontSize: '0.79rem',
+                            fontWeight: 500,
+                            letterSpacing: '0.012em',
+                            lineHeight: 1.1,
+                            minWidth: 0,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                          }}
+                        >
+                          {row.label}
+                        </Typography>
+                      )}
+                      {row.valueNode || (
+                        <Typography
+                          sx={{
+                            color: alpha(theme.palette.text.primary, 0.88),
+                            fontSize: '0.9rem',
+                            fontWeight: 600,
+                            letterSpacing: '0.01em',
+                            lineHeight: 1.2,
+                            maxWidth: '100%',
+                            minWidth: 0,
+                            overflow: 'hidden',
+                            ...(isNodeSection
+                              ? {
+                                  justifySelf: 'end',
+                                  textAlign: 'right',
+                                }
+                              : {}),
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                          }}
+                        >
+                          {row.value}
+                        </Typography>
+                      )}
+                    </Box>
+                  ))}
+                </Box>
+              );
+            })}
+          </Box>
+
+          <Box sx={{ minHeight: '8px', width: '100%' }} />
+          {showCollapsedFade && (
+            <ProgressiveBlur
+              blurStrength={18}
+              height="78px"
+              position="bottom"
+              sx={{
+                bottom: -12,
+                left: '-16px',
+                right: '-16px',
+              }}
+              tintColor={
+                theme.palette.mode === 'dark'
+                  ? theme.palette.background.paper
+                  : theme.palette.common.white
+              }
+            />
+          )}
+        </Box>
+      </Box>
+    </Box>
+    <Menu
+      anchorEl={nodeMenuAnchorEl}
+      open={Boolean(nodeMenuAnchorEl)}
+      onClose={handleCloseNodeMenu}
+      anchorOrigin={{ horizontal: 'left', vertical: 'bottom' }}
+      transformOrigin={{ horizontal: 'left', vertical: 'top' }}
+      PaperProps={{
+        sx: {
+          background:
+            theme.palette.mode === 'dark'
+              ? 'rgba(18, 23, 32, 0.98)'
+              : 'rgba(250, 252, 255, 0.98)',
+          border: `1px solid ${alpha(
+            theme.palette.border.subtle,
+            0.88
+          )}`,
+          borderRadius: '10px',
+          boxShadow:
+            theme.palette.mode === 'dark'
+              ? '0 18px 42px rgba(0,0,0,0.42)'
+              : '0 16px 36px rgba(24,32,44,0.16)',
+          minWidth: 260,
+          mt: 0.7,
+          p: 0.6,
+        },
+      }}
+    >
+      {dashboardNodeOptions.filter((option) => option.type === 'custom')
+        .length === 0 && (
+        <MenuItem disabled sx={nodeMenuItemSx(theme, false)}>
+          {td('no_custom_nodes_saved', 'No custom nodes saved')}
+        </MenuItem>
+      )}
+      {dashboardNodeOptions.map((option) => {
+        const isCurrent =
+          normalizeDashboardNodeUrl(option.node.url) === selectedNodeUrl;
+        const isSwitching =
+          isSwitchingNodeUrl === normalizeDashboardNodeUrl(option.node.url);
+        return (
+          <MenuItem
+            key={option.key}
+            disabled={Boolean(isSwitchingNodeUrl)}
+            onClick={() => handleSelectDashboardNode(option)}
+            sx={{
+              ...nodeMenuItemSx(theme, isCurrent),
+              ...(option.type === 'public'
+                ? {
+                    borderTop: `1px solid ${alpha(
+                      theme.palette.text.primary,
+                      0.08
+                    )}`,
+                    mt: 0.55,
+                  }
+                : {}),
+            }}
+          >
+            <Box sx={{ minWidth: 0, flex: 1 }}>
+              <Typography
+                sx={{
+                  color: 'inherit',
+                  fontSize: '0.84rem',
+                  fontWeight: 700,
+                  lineHeight: 1.25,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {option.label}
+              </Typography>
+              <Typography
+                sx={{
+                  color: alpha(theme.palette.text.secondary, 0.78),
+                  fontSize: '0.72rem',
+                  lineHeight: 1.3,
+                  mt: 0.3,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {option.secondary}
+              </Typography>
+            </Box>
+            {isSwitching ? (
+              <CircularProgress size={16} thickness={5} />
+            ) : isCurrent ? (
+              <CheckRoundedIcon sx={{ fontSize: 18 }} />
+            ) : null}
+          </MenuItem>
+        );
+      })}
+      {nodeSwitchError && (
+        <Typography
+          sx={{
+            color: theme.palette.warning.light,
+            fontSize: '0.74rem',
+            lineHeight: 1.35,
+            px: 1.15,
+            py: 0.8,
+          }}
+        >
+          {nodeSwitchError}
+        </Typography>
+      )}
+    </Menu>
+    </Box>
+  );
+};
diff --git a/src/components/Group/HomeDesktop/WalletActionButton.tsx b/src/components/Group/HomeDesktop/WalletActionButton.tsx
new file mode 100644
index 00000000..3d461137
--- /dev/null
+++ b/src/components/Group/HomeDesktop/WalletActionButton.tsx
@@ -0,0 +1,82 @@
+import { Box, ButtonBase, Typography } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import {
+  APP_BLUE_SURFACE_TEXT,
+  getBlueTier1ButtonSx,
+} from '../groupActivityColorSystem';
+
+export const WalletActionButton = ({ icon, label, onClick, theme }) => {
+  const blueStrongHover = getBlueTier1ButtonSx()['&:hover'];
+  const isDarkMode = theme.palette.mode === 'dark';
+
+  return (
+    <ButtonBase
+      onClick={onClick}
+      sx={{
+        alignItems: 'center',
+        background: isDarkMode
+          ? 'linear-gradient(145deg, rgba(53,58,68,0.99) 0%, rgba(41,45,54,1) 48%, rgba(30,34,41,1) 100%)'
+          : 'linear-gradient(145deg, rgba(251,253,255,0.99) 0%, rgba(232,237,245,0.99) 48%, rgba(216,223,234,1) 100%)',
+        border: `1px solid ${
+          isDarkMode
+            ? alpha(theme.palette.primary.main, 0.06)
+            : alpha(theme.palette.text.primary, 0.072)
+        }`,
+        borderRadius: '12px',
+        boxShadow: isDarkMode
+          ? 'inset 0 1px 0 rgba(255,255,255,0.075), inset 0 0 0 1px rgba(255,255,255,0.012), inset 0 -1px 0 rgba(0,0,0,0.44), inset -1px -1px 0 rgba(0,0,0,0.18), 0 4px 8px rgba(0,0,0,0.17)'
+          : 'inset 0 1px 0 rgba(255,255,255,0.86), inset 0 0 0 1px rgba(255,255,255,0.24), inset 0 -1px 0 rgba(104,116,140,0.22), inset -1px -1px 0 rgba(146,158,182,0.14), 0 4px 8px rgba(94,108,132,0.11)',
+        display: 'flex',
+        gap: '9px',
+        height: '46px',
+        justifyContent: 'center',
+        overflow: 'hidden',
+        px: 1.5,
+        position: 'relative',
+        transition:
+          'background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease, transform 120ms ease, filter 140ms ease',
+        width: '100%',
+        '&::before': {
+          content: '""',
+          position: 'absolute',
+          inset: '1px',
+          borderRadius: 'inherit',
+          pointerEvents: 'none',
+          background: isDarkMode
+            ? 'linear-gradient(145deg, rgba(255,255,255,0.052) 0%, rgba(255,255,255,0.02) 24%, rgba(255,255,255,0) 58%)'
+            : 'linear-gradient(145deg, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.22) 28%, rgba(255,255,255,0) 58%)',
+          opacity: 0.92,
+        },
+        '&:hover': {
+          ...blueStrongHover,
+          borderColor: 'rgba(143, 184, 243, 0.22)',
+          color: APP_BLUE_SURFACE_TEXT,
+          transform: 'translateY(-1px)',
+        },
+        '&:active': {
+          boxShadow:
+            'inset 2px 2px 6px rgba(0, 0, 0, 0.7), inset -1px -1px 3px rgba(255, 255, 255, 0.04)',
+          transform: 'scale(0.97)',
+        },
+      }}
+    >
+      <Box
+        sx={{
+          color: 'inherit',
+          display: 'inline-flex',
+        }}
+      >
+        {icon}
+      </Box>
+      <Typography
+        sx={{
+          color: 'inherit',
+          fontSize: '0.8rem',
+          fontWeight: 600,
+        }}
+      >
+        {label}
+      </Typography>
+    </ButtonBase>
+  );
+};
diff --git a/src/components/Group/HomeDesktop/homeDesktopConstants.ts b/src/components/Group/HomeDesktop/homeDesktopConstants.ts
new file mode 100644
index 00000000..f8a77f48
--- /dev/null
+++ b/src/components/Group/HomeDesktop/homeDesktopConstants.ts
@@ -0,0 +1,102 @@
+import type { WidgetDisplayMode } from '../../Widgets/DashboardWidgetFrame';
+import type { HomeCustomizableCardId } from './types';
+
+/** Wide hub layout activates at this min viewport width (below theme xl / 1536). */
+export const HOME_WIDE_DASHBOARD_MIN_WIDTH_PX = 1250;
+
+export const INFO_PANEL_EXPAND_OPEN_DELAY_MS = 35;
+export const INFO_PANEL_EXPAND_CLOSE_DELAY_MS = 60;
+export const INFO_PANEL_EXPANDED_EXTRA_BREATHING_PX = 52;
+
+export const SYSTEM_BADGE_SX = {
+  borderRadius: '4px',
+  fontSize: '0.7rem',
+  fontWeight: 700,
+  height: '26px',
+  letterSpacing: '0.05em',
+  lineHeight: 1,
+  px: '10px',
+  textTransform: 'uppercase',
+  whiteSpace: 'nowrap',
+} as const;
+
+export const GROUP_ACTIVITY_COMPACT_VIEWPORT_HEIGHT_PX = 680;
+
+// Home dashboard desktop layout invariants:
+// - Info top aligns visually with Account Overview top.
+// - Account Overview -> Featured Q-Apps gap = 20px.
+// - Info -> Wallet Activity gap = 20px.
+// - Info collapsed height stays fixed to preserve spacing and overlay behavior.
+export const HOME_DASHBOARD_VERTICAL_GAP_PX = 20;
+export const HOME_SHARED_SIDE_RAIL_WIDTH_MD = 'minmax(285px, 330px)';
+export const HOME_SHARED_SIDE_RAIL_WIDTH_XL = 'minmax(310px, 360px)';
+export const HOME_LEFT_CENTER_GRID_TEMPLATE_COLUMNS = {
+  xs: '1fr',
+  md: `${HOME_SHARED_SIDE_RAIL_WIDTH_MD} minmax(0, 1fr)`,
+  xl: `${HOME_SHARED_SIDE_RAIL_WIDTH_XL} minmax(0, 1fr)`,
+} as const;
+export const HOME_LEFT_CENTER_LOWER_ROW_GRID_TEMPLATE_COLUMNS = {
+  xs: '1fr',
+  lg: `${HOME_SHARED_SIDE_RAIL_WIDTH_MD} minmax(0, 1fr)`,
+} as const;
+// Right rail is offset to visually align Info with Account Overview.
+// The left column includes the "Qortal Hub" eyebrow label above Account Overview,
+// while the right column starts directly with the rail cards, so this offset
+// compensates for that extra left-side content. The alignment is visual, not structural.
+export const HOME_RIGHT_RAIL_TOP_ALIGNMENT_OFFSET_PX = 29;
+export const HOME_INFO_COLLAPSED_VISIBLE_HEIGHT_PX = 322;
+export const HOME_SHARED_LEFT_LOWER_ROW_PANEL_HEIGHT_PX = 426;
+export const HOME_EMBEDDED_QAPP_PANEL_HEIGHT_PX = 720;
+export const HOME_GROUP_ACTIVITY_CARD_CHROME_HEIGHT_PX = 100;
+export const HOME_GROUP_ACTIVITY_CARD_DEFAULT_HEIGHT_PX =
+  GROUP_ACTIVITY_COMPACT_VIEWPORT_HEIGHT_PX +
+  HOME_GROUP_ACTIVITY_CARD_CHROME_HEIGHT_PX;
+export const HOME_CUSTOMIZABLE_CARD_LAYOUT_STORAGE_KEY =
+  'home-dashboard-customizable-cards-layout-v1';
+export const HOME_CUSTOMIZABLE_CARD_RESIZE_STEP_PX = 60;
+export const HOME_DASHBOARD_WIDGET_HEIGHT_PX = 612;
+export const HOME_DASHBOARD_WIDGET_DISPLAY_MODE: WidgetDisplayMode = 'expanded';
+export const HOME_CUSTOMIZABLE_CARD_MIN_HEIGHTS: Record<
+  HomeCustomizableCardId,
+  number
+> = {
+  groupActivity: HOME_DASHBOARD_WIDGET_HEIGHT_PX,
+  quitter: HOME_DASHBOARD_WIDGET_HEIGHT_PX,
+};
+export const HOME_CUSTOMIZABLE_CARD_MAX_HEIGHTS: Record<
+  HomeCustomizableCardId,
+  number
+> = {
+  groupActivity: HOME_DASHBOARD_WIDGET_HEIGHT_PX,
+  quitter: HOME_DASHBOARD_WIDGET_HEIGHT_PX,
+};
+export const HOME_QUITTER_WIDGET_INITIAL_BATCH_SIZES: Record<
+  WidgetDisplayMode,
+  number
+> = {
+  compact: 6,
+  expanded: 8,
+};
+export const HOME_QUITTER_WIDGET_LOAD_MORE_BATCH_SIZES: Record<
+  WidgetDisplayMode,
+  number
+> = {
+  compact: 4,
+  expanded: 4,
+};
+export const HOME_QUITTER_WIDGET_SEARCH_LIMITS: Record<WidgetDisplayMode, number> =
+  {
+    compact: 6,
+    expanded: 8,
+  };
+export const WALLET_ACTIVITY_RECENT_PAYMENT_LOOKBACK_MS =
+  7 * 24 * 60 * 60 * 1000;
+export const WALLET_ACTIVITY_RECENT_PAYMENT_FETCH_LIMIT = 50;
+export const INFO_VALUE_COLUMN_MIN_WIDTH_PX = 136;
+
+export const DASHBOARD_MINTER_DEFAULT_VIEW_STORAGE_KEY =
+  'dashboardMinterDefaultView';
+export const HOME_CUSTOMIZABLE_CARD_ORDER_DEFAULT: HomeCustomizableCardId[] = [
+  'groupActivity',
+  'quitter',
+];
diff --git a/src/components/Group/HomeDesktop/index.ts b/src/components/Group/HomeDesktop/index.ts
new file mode 100644
index 00000000..8aaba5a5
--- /dev/null
+++ b/src/components/Group/HomeDesktop/index.ts
@@ -0,0 +1 @@
+export { HomeDesktop } from './HomeDesktop';
diff --git a/src/components/Group/HomeDesktop/infoPreviewPanelTypes.ts b/src/components/Group/HomeDesktop/infoPreviewPanelTypes.ts
new file mode 100644
index 00000000..0965ea60
--- /dev/null
+++ b/src/components/Group/HomeDesktop/infoPreviewPanelTypes.ts
@@ -0,0 +1,49 @@
+import type { MouseEvent, ReactNode } from 'react';
+
+export type InfoPreviewStatusTone = 'operational' | 'syncing' | 'issue';
+
+export type InfoPreviewPrimaryRow = {
+  label: string;
+  emphasize?: boolean;
+  value?: string;
+  valueNode?: ReactNode;
+  variant?: 'pill';
+  pillTone?: 'negative' | 'warning' | 'positive';
+};
+
+export type InfoPreviewMetricItem = {
+  label: string;
+  value: string;
+  accent?: string;
+};
+
+export type InfoPreviewFooterRow = {
+  label: string;
+  value?: string;
+  valueNode?: ReactNode;
+  labelAction?: {
+    ariaLabel: string;
+    isOpen: boolean;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    tooltip: string;
+  };
+};
+
+export type InfoPreviewFooterSection = {
+  title: string;
+  /** Stable section semantics (title is localized and must not be used for branching). */
+  variant?: 'node';
+  offsetTopPx?: number;
+  items: InfoPreviewFooterRow[];
+};
+
+export type InfoPreviewPanelRows = {
+  status: {
+    tone: InfoPreviewStatusTone;
+    isOperational?: boolean;
+    label?: string;
+  };
+  primaryItems: InfoPreviewPrimaryRow[];
+  metricItems: InfoPreviewMetricItem[];
+  footerSections: InfoPreviewFooterSection[];
+};
diff --git a/src/components/Group/HomeDesktop/types.ts b/src/components/Group/HomeDesktop/types.ts
new file mode 100644
index 00000000..341665ba
--- /dev/null
+++ b/src/components/Group/HomeDesktop/types.ts
@@ -0,0 +1,54 @@
+import type { ApiKey } from '../../../types/auth';
+
+export type HomeCustomizableCardId = 'groupActivity' | 'quitter';
+export type MinterProgressSnapshot = {
+  currentBlocks: number;
+  currentLevel: number;
+  progressRatio: number;
+  requiredBlocks: number;
+};
+export type MinterInfoView = 'dots' | 'progress';
+export type WalletActivityTransaction = {
+  amount?: number | string;
+  creator?: string;
+  creatorAddress?: string;
+  recipientAddress?: string;
+  recipient?: string;
+  sender?: string;
+  senderAddress?: string;
+  signature?: string;
+  timestamp?: number | string;
+};
+export type WalletActivityDirection = 'incoming' | 'outgoing';
+export type WalletActivityEntry = {
+  amount: number;
+  counterpartyAddress: string;
+  counterpartyLabel: string;
+  direction: WalletActivityDirection;
+  timestamp: number;
+};
+export type DashboardNodeOption = {
+  key: string;
+  label: string;
+  node: ApiKey;
+  secondary: string;
+  type: 'custom' | 'local' | 'public';
+};
+export type HomeCustomizableCardsLayout = {
+  heights: Partial<Record<HomeCustomizableCardId, number>>;
+  order: HomeCustomizableCardId[];
+};
+export type HomeLayoutDebugMetric = {
+  bottom: number;
+  height: number;
+  left: number;
+  top: number;
+  width: number;
+};
+export type HomeLayoutDebugKey =
+  | 'accountOverview'
+  | 'featuredApps'
+  | 'info'
+  | 'profileCard'
+  | 'tools'
+  | 'walletActivity';
diff --git a/src/components/Group/HomeDesktop/useDashboardInfoPreviewRows.tsx b/src/components/Group/HomeDesktop/useDashboardInfoPreviewRows.tsx
new file mode 100644
index 00000000..98197a61
--- /dev/null
+++ b/src/components/Group/HomeDesktop/useDashboardInfoPreviewRows.tsx
@@ -0,0 +1,782 @@
+import { Box, ButtonBase, Tooltip, Typography, useTheme } from '@mui/material';
+import LockOpenRoundedIcon from '@mui/icons-material/LockOpenRounded';
+import { alpha, type SxProps, type Theme } from '@mui/material/styles';
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type MouseEvent,
+} from 'react';
+import { useAtomValue } from 'jotai';
+import {
+  AnimatePresence,
+  motion,
+} from 'framer-motion';
+import { useTranslation } from 'react-i18next';
+import {
+  balanceAtom,
+  nodeInfosAtom,
+  selectedNodeInfoAtom,
+  userInfoAtom,
+} from '../../../atoms/global';
+import { getBaseApiReact } from '../../../App';
+import { manifestData } from '../../NotAuthenticated';
+import { executeEvent } from '../../../utils/events';
+import { accountTargetBlocks } from '../../Minting/MintingStats';
+import {
+  GROUP_ACTIVITY_BLUE,
+  getBlueTier3DotSx,
+} from '../groupActivityColorSystem';
+import { useHandleUserInfo } from '../../../hooks/useHandleUserInfo';
+import {
+  isLocalNodeUrl,
+} from '../../../constants/constants';
+import { nodeDisplay } from '../../../utils/helpers';
+import { BlockHeightValue } from './BlockHeightValue';
+import type {
+  InfoPreviewPanelRows,
+  InfoPreviewStatusTone,
+} from './infoPreviewPanelTypes';
+import {
+  DASHBOARD_MINTER_DEFAULT_VIEW_STORAGE_KEY,
+  INFO_VALUE_COLUMN_MIN_WIDTH_PX,
+} from './homeDesktopConstants';
+import type { MinterInfoView, MinterProgressSnapshot } from './types';
+import { parseMinterInfoView } from './utils';
+
+type UseDashboardInfoPreviewRowsParams = {
+  nodeMenuAnchorEl: HTMLElement | null;
+  onOpenNodeMenu: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+
+export function useDashboardInfoPreviewRows({
+  nodeMenuAnchorEl,
+  onOpenNodeMenu,
+}: UseDashboardInfoPreviewRowsParams): InfoPreviewPanelRows {
+  const theme = useTheme();
+  const balance = useAtomValue(balanceAtom);
+  const nodeInfos = useAtomValue(nodeInfosAtom);
+  const selectedNode = useAtomValue(selectedNodeInfoAtom);
+  const userInfo = useAtomValue(userInfoAtom);
+  const userAddress = userInfo?.address;
+  const { t } = useTranslation(['core', 'group', 'tutorial', 'auth']);
+  const td = useCallback(
+    (
+      key: string,
+      defaultValue: string,
+      options?: Record<string, string | number>
+    ) =>
+      String(
+        t(`group:dashboard.${key}`, {
+          defaultValue,
+          ...options,
+        })
+      ),
+    [t]
+  );
+
+  const [coreVersionLabel, setCoreVersionLabel] = useState('—');
+  const [minterLevel, setMinterLevel] = useState<number | null>(null);
+  const [minterProgress, setMinterProgress] =
+    useState<MinterProgressSnapshot | null>(null);
+  const [minterDefaultView, setMinterDefaultView] = useState<MinterInfoView>(
+    () =>
+      parseMinterInfoView(
+        localStorage.getItem(DASHBOARD_MINTER_DEFAULT_VIEW_STORAGE_KEY)
+      )
+  );
+  const [isMinterFieldHovered, setIsMinterFieldHovered] = useState(false);
+
+  const getIndividualUserInfo = useHandleUserInfo();
+
+  const filledBlueDotSx = getBlueTier3DotSx(theme, true);
+  const emptyBlueDotSx = getBlueTier3DotSx(theme, false);
+
+  useEffect(() => {
+    let active = true;
+    if (!userAddress) {
+      setMinterLevel(null);
+      return;
+    }
+    getIndividualUserInfo(userAddress)
+      .then((level) => {
+        if (active) setMinterLevel(typeof level === 'number' ? level : null);
+      })
+      .catch(() => {
+        if (active) setMinterLevel(null);
+      });
+    return () => {
+      active = false;
+    };
+  }, [getIndividualUserInfo, userAddress]);
+
+  useEffect(() => {
+    let active = true;
+
+    const loadMinterProgress = async () => {
+      if (!userAddress) {
+        if (active) setMinterProgress(null);
+        return;
+      }
+
+      try {
+        const response = await fetch(
+          `${getBaseApiReact()}/addresses/${userAddress}`
+        );
+        if (!response.ok) {
+          throw new Error('network error');
+        }
+
+        const data = await response.json();
+        if (!active) return;
+
+        const currentLevel =
+          typeof data?.level === 'number' && Number.isFinite(data.level)
+            ? data.level
+            : null;
+        const mintedBlocks =
+          typeof data?.blocksMinted === 'number' &&
+          Number.isFinite(data.blocksMinted)
+            ? data.blocksMinted
+            : 0;
+        const mintedAdjustment =
+          typeof data?.blocksMintedAdjustment === 'number' &&
+          Number.isFinite(data.blocksMintedAdjustment)
+            ? data.blocksMintedAdjustment
+            : 0;
+        const currentBlocks = Math.max(0, mintedBlocks + mintedAdjustment);
+        const requiredBlocks =
+          currentLevel != null
+            ? currentLevel >= 10
+              ? currentBlocks
+              : accountTargetBlocks(currentLevel)
+            : undefined;
+
+        if (currentLevel == null || requiredBlocks == null) {
+          setMinterProgress(null);
+          return;
+        }
+
+        setMinterProgress({
+          currentBlocks,
+          currentLevel,
+          progressRatio:
+            requiredBlocks > 0
+              ? Math.max(0, Math.min(1, currentBlocks / requiredBlocks))
+              : 0,
+          requiredBlocks,
+        });
+      } catch {
+        if (active) {
+          setMinterProgress(null);
+        }
+      }
+    };
+
+    loadMinterProgress();
+    const interval = window.setInterval(loadMinterProgress, 30000);
+
+    return () => {
+      active = false;
+      window.clearInterval(interval);
+    };
+  }, [userAddress]);
+
+  useEffect(() => {
+    let active = true;
+
+    const loadCoreInfo = async () => {
+      try {
+        const response = await fetch(`${getBaseApiReact()}/admin/info`, {
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          method: 'GET',
+        });
+        const data = await response.json();
+        if (!active) return;
+        setCoreVersionLabel(
+          data?.buildVersion ? String(data.buildVersion).substring(0, 20) : '—'
+        );
+      } catch {
+        if (active) {
+          setCoreVersionLabel('—');
+        }
+      }
+    };
+
+    loadCoreInfo();
+    const interval = window.setInterval(loadCoreInfo, 30000);
+
+    return () => {
+      active = false;
+      window.clearInterval(interval);
+    };
+  }, []);
+
+  const handleSetMinterDefaultView = useCallback((nextView: MinterInfoView) => {
+    setMinterDefaultView(nextView);
+    localStorage.setItem(DASHBOARD_MINTER_DEFAULT_VIEW_STORAGE_KEY, nextView);
+  }, []);
+
+  const balanceLabel =
+    balance != null ? `${Number(balance).toFixed(2)} QORT` : '—';
+
+  const hasLiveNodeConnection = nodeInfos?.height != null;
+  const liveSyncPercent =
+    hasLiveNodeConnection &&
+    nodeInfos?.isSynchronizing &&
+    nodeInfos?.syncPercent !== 100
+      ? Math.round(nodeInfos?.syncPercent || 0)
+      : 100;
+  const nodeStatusValue = hasLiveNodeConnection
+    ? td('sync_percent', '{{percent}}% Synced', {
+        percent: liveSyncPercent,
+      })
+    : td('node_unavailable', 'Node unavailable');
+  const peersLabel = `${nodeInfos?.numberOfConnections || 0}`;
+  const blockHeightLabel = `${nodeInfos?.height || '—'}`;
+  const hubVersionLabel = manifestData.version || '—';
+  const qdnPeersLabel = `${nodeInfos?.numberOfDataConnections || 0}`;
+
+  const nodeBase = getBaseApiReact();
+  const nodeHostLabel = (() => {
+    try {
+      return new URL(nodeBase).host;
+    } catch {
+      return nodeDisplay(nodeBase);
+    }
+  })();
+  const customNodeDashboardLabel =
+    selectedNode?.name?.trim() || selectedNode?.url?.trim() || '';
+  const nodeTypeLabel = isLocalNodeUrl(nodeBase)
+    ? td('local_node', 'Local node')
+    : nodeBase.includes('ext-node.qortal.link')
+      ? td('public_node', 'Public node')
+      : customNodeDashboardLabel ||
+        td('custom_node', 'Custom node');
+  const isSystemOperational =
+    hasLiveNodeConnection &&
+    !(nodeInfos?.isSynchronizing && nodeInfos?.syncPercent !== 100);
+  const resolvedInfoStatusLabel = isSystemOperational
+    ? td('fully_operational', 'Fully operational')
+    : td('not_operational', 'Not operational');
+  const resolvedIsSystemOperational = isSystemOperational;
+  const resolvedInfoStatusTone: InfoPreviewStatusTone =
+    nodeInfos?.isSynchronizing && nodeInfos?.syncPercent !== 100
+      ? 'syncing'
+      : resolvedIsSystemOperational
+        ? 'operational'
+        : 'issue';
+
+  const resolvedCoreVersionLabel = coreVersionLabel;
+  const isMinterOn = Boolean(minterLevel && minterLevel > 0);
+  const minterDotsFilled = isMinterOn
+    ? Math.max(1, Math.min(9, minterLevel ?? 5))
+    : 0;
+  const formattedMinterCurrentBlocks =
+    minterProgress?.currentBlocks != null
+      ? minterProgress.currentBlocks.toLocaleString()
+      : null;
+  const formattedMinterRequiredBlocks =
+    minterProgress?.requiredBlocks != null
+      ? minterProgress.requiredBlocks.toLocaleString()
+      : null;
+  const hasMinterProgressSummary =
+    minterProgress != null &&
+    formattedMinterCurrentBlocks != null &&
+    formattedMinterRequiredBlocks != null;
+  const resolvedMinterDefaultView: MinterInfoView =
+    hasMinterProgressSummary && minterDefaultView === 'progress'
+      ? 'progress'
+      : 'dots';
+  const minterHoverView: MinterInfoView =
+    resolvedMinterDefaultView === 'dots' ? 'progress' : 'dots';
+  const isShowingMinterHoverView =
+    hasMinterProgressSummary && isMinterFieldHovered;
+  const activeMinterInfoView: MinterInfoView = isShowingMinterHoverView
+    ? minterHoverView
+    : resolvedMinterDefaultView;
+  const minterPinActionLabel =
+    activeMinterInfoView === 'progress'
+      ? td(
+          'minter_pin_save_progress_default',
+          'Save level bar as default view'
+        )
+      : td('minter_pin_save_dots_default', 'Save minting dots as default view');
+
+  const minterValue = useMemo(
+    () => (
+      <MinterInfoValue
+        activeMinterInfoView={activeMinterInfoView}
+        emptyBlueDotSx={emptyBlueDotSx}
+        filledBlueDotSx={filledBlueDotSx}
+        formattedMinterCurrentBlocks={formattedMinterCurrentBlocks}
+        formattedMinterRequiredBlocks={formattedMinterRequiredBlocks}
+        handleSetMinterDefaultView={handleSetMinterDefaultView}
+        hasMinterProgressSummary={hasMinterProgressSummary}
+        isMinterOn={isMinterOn}
+        isShowingMinterHoverView={isShowingMinterHoverView}
+        minterDotsFilled={minterDotsFilled}
+        minterPinActionLabel={minterPinActionLabel}
+        minterProgress={minterProgress}
+        onHoverMinterChange={setIsMinterFieldHovered}
+        td={td}
+        theme={theme}
+      />
+    ),
+    [
+      activeMinterInfoView,
+      emptyBlueDotSx,
+      filledBlueDotSx,
+      formattedMinterCurrentBlocks,
+      formattedMinterRequiredBlocks,
+      handleSetMinterDefaultView,
+      hasMinterProgressSummary,
+      isMinterOn,
+      isShowingMinterHoverView,
+      minterDotsFilled,
+      minterPinActionLabel,
+      minterProgress,
+      td,
+      theme,
+    ]
+  );
+
+  const coreVersionMetricLabel =
+    resolvedCoreVersionLabel && resolvedCoreVersionLabel !== '—'
+      ? resolvedCoreVersionLabel.replace(/^qortal-/i, '').split('-')[0] ||
+        resolvedCoreVersionLabel
+      : '—';
+
+  return {
+    status: {
+      isOperational: resolvedIsSystemOperational,
+      label: resolvedInfoStatusLabel,
+      tone: resolvedInfoStatusTone,
+    },
+    primaryItems: [
+      {
+        emphasize: true,
+        label: td('qort_balance', 'QORT Balance'),
+        value: balanceLabel,
+      },
+      {
+        label: nodeTypeLabel,
+        pillTone:
+          nodeStatusValue === td('node_unavailable', 'Node unavailable')
+            ? 'negative'
+            : nodeStatusValue ===
+                td('sync_percent', '{{percent}}% Synced', { percent: 100 })
+              ? 'positive'
+              : 'warning',
+        value: nodeStatusValue,
+        variant: 'pill',
+      },
+      {
+        label: td('minter_level', 'Minter Level'),
+        valueNode: minterValue,
+      },
+    ],
+    metricItems: [
+      {
+        accent: 'blue',
+        label: td('peers', 'Peers'),
+        value: peersLabel,
+      },
+      {
+        accent: 'blue',
+        label: td('qdn', 'QDN'),
+        value: qdnPeersLabel,
+      },
+      {
+        accent: 'green',
+        label: td('core', 'Core'),
+        value: coreVersionMetricLabel,
+      },
+      {
+        accent: 'violet',
+        label: td('hub', 'Hub'),
+        value: hubVersionLabel,
+      },
+    ],
+    footerSections: [
+      {
+        variant: 'node',
+        title: td('node', 'Node'),
+        offsetTopPx: 10,
+        items: [
+          {
+            label: td('using_node', 'Using Node'),
+            labelAction: {
+              ariaLabel: td('change_node', 'Change node'),
+              isOpen: Boolean(nodeMenuAnchorEl),
+              onClick: onOpenNodeMenu,
+              tooltip: td('change_node', 'Change node'),
+            },
+            value: nodeHostLabel,
+          },
+          {
+            label: td('node_type', 'Node Type'),
+            value: nodeTypeLabel,
+          },
+          {
+            label: td('node_height', 'Node Height'),
+            value: blockHeightLabel,
+            valueNode: (
+              <BlockHeightValue theme={theme} value={blockHeightLabel} />
+            ),
+          },
+        ],
+      },
+    ],
+  };
+}
+
+function MinterInfoValue({
+  activeMinterInfoView,
+  emptyBlueDotSx,
+  filledBlueDotSx,
+  formattedMinterCurrentBlocks,
+  formattedMinterRequiredBlocks,
+  handleSetMinterDefaultView,
+  hasMinterProgressSummary,
+  isMinterOn,
+  isShowingMinterHoverView,
+  minterDotsFilled,
+  minterPinActionLabel,
+  minterProgress,
+  onHoverMinterChange,
+  td,
+  theme,
+}: {
+  activeMinterInfoView: MinterInfoView;
+  emptyBlueDotSx: SxProps<Theme>;
+  filledBlueDotSx: SxProps<Theme>;
+  formattedMinterCurrentBlocks: string | null;
+  formattedMinterRequiredBlocks: string | null;
+  handleSetMinterDefaultView: (view: MinterInfoView) => void;
+  hasMinterProgressSummary: boolean;
+  isMinterOn: boolean;
+  isShowingMinterHoverView: boolean;
+  minterDotsFilled: number;
+  minterPinActionLabel: string;
+  minterProgress: MinterProgressSnapshot | null;
+  onHoverMinterChange: (hovered: boolean) => void;
+  td: (
+    key: string,
+    defaultValue: string,
+    options?: Record<string, string | number>
+  ) => string;
+  theme: Theme;
+}) {
+  return (
+    <Box
+      sx={{
+        alignItems: 'center',
+        display: 'inline-flex',
+        height: '22px',
+        justifyContent: 'flex-end',
+        minWidth: `${INFO_VALUE_COLUMN_MIN_WIDTH_PX}px`,
+        width: '100%',
+      }}
+    >
+      <AnimatePresence initial={false} mode="wait">
+        {isMinterOn ? (
+          <motion.div
+            key="minter-level"
+            initial={{ opacity: 0, y: 3 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -3 }}
+            transition={{ duration: 0.18, ease: [0.2, 0, 0, 1] }}
+            style={{
+              alignItems: 'center',
+              display: 'flex',
+              height: '22px',
+              justifyContent: 'flex-end',
+              width: '100%',
+            }}
+          >
+            <Box
+              onMouseEnter={
+                hasMinterProgressSummary
+                  ? () => onHoverMinterChange(true)
+                  : undefined
+              }
+              onMouseLeave={
+                hasMinterProgressSummary
+                  ? () => onHoverMinterChange(false)
+                  : undefined
+              }
+              onFocusCapture={
+                hasMinterProgressSummary
+                  ? () => onHoverMinterChange(true)
+                  : undefined
+              }
+              onBlurCapture={
+                hasMinterProgressSummary
+                  ? (event) => {
+                      const nextFocusedElement = event.relatedTarget;
+
+                      if (
+                        !(nextFocusedElement instanceof Node) ||
+                        !event.currentTarget.contains(nextFocusedElement)
+                      ) {
+                        onHoverMinterChange(false);
+                      }
+                    }
+                  : undefined
+              }
+              sx={{
+                alignItems: 'center',
+                display: 'inline-flex',
+                height: '22px',
+                justifyContent: 'flex-end',
+                maxWidth: '100%',
+                minWidth: '180px',
+                width: '180px',
+              }}
+            >
+              <AnimatePresence initial={false} mode="wait">
+                <motion.div
+                  key={activeMinterInfoView}
+                  initial={{ opacity: 0, y: 3 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -3 }}
+                  transition={{ duration: 0.18, ease: [0.2, 0, 0, 1] }}
+                  style={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    gap: '8px',
+                    height: '22px',
+                    justifyContent: 'flex-end',
+                    width: '100%',
+                  }}
+                >
+                  {isShowingMinterHoverView ? (
+                    <Tooltip title={minterPinActionLabel}>
+                      <ButtonBase
+                        aria-label={minterPinActionLabel}
+                        disableRipple
+                        onClick={() =>
+                          handleSetMinterDefaultView(activeMinterInfoView)
+                        }
+                        sx={{
+                          alignItems: 'center',
+                          borderRadius: '999px',
+                          color: alpha(
+                            GROUP_ACTIVITY_BLUE.primary,
+                            theme.palette.mode === 'dark' ? 0.92 : 0.82
+                          ),
+                          display: 'inline-flex',
+                          flexShrink: 0,
+                          height: '18px',
+                          justifyContent: 'center',
+                          transition:
+                            'background-color 140ms ease, color 140ms ease, transform 120ms ease',
+                          width: '18px',
+                          '&:hover': {
+                            backgroundColor: alpha(
+                              GROUP_ACTIVITY_BLUE.primary,
+                              theme.palette.mode === 'dark' ? 0.18 : 0.12
+                            ),
+                            color: GROUP_ACTIVITY_BLUE.primary,
+                            transform: 'translateY(-1px)',
+                          },
+                          '&:active': {
+                            transform: 'translateY(0)',
+                          },
+                        }}
+                      >
+                        <LockOpenRoundedIcon sx={{ fontSize: '0.92rem' }} />
+                      </ButtonBase>
+                    </Tooltip>
+                  ) : null}
+
+                  {activeMinterInfoView === 'progress' &&
+                  hasMinterProgressSummary ? (
+                    <Box
+                      sx={{
+                        alignItems: 'center',
+                        display: 'inline-flex',
+                        gap: '8px',
+                        justifyContent: 'flex-end',
+                        minWidth: 0,
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      <Box
+                        sx={{
+                          background:
+                            theme.palette.mode === 'dark'
+                              ? 'rgba(255,255,255,0.08)'
+                              : 'rgba(15,23,42,0.08)',
+                          borderRadius: '999px',
+                          flexShrink: 0,
+                          height: '6px',
+                          overflow: 'hidden',
+                          width: '56px',
+                        }}
+                      >
+                        <Box
+                          sx={{
+                            background: GROUP_ACTIVITY_BLUE.primary,
+                            borderRadius: '999px',
+                            height: '100%',
+                            transition: 'width 180ms ease',
+                            width: `${Math.max(
+                              0,
+                              Math.min(
+                                100,
+                                (minterProgress?.progressRatio ?? 0) * 100
+                              )
+                            )}%`,
+                          }}
+                        />
+                      </Box>
+                      <Typography
+                        sx={{
+                          color: alpha(theme.palette.text.primary, 0.84),
+                          fontSize: '0.72rem',
+                          fontWeight: 600,
+                          letterSpacing: '0.01em',
+                          lineHeight: 1,
+                          whiteSpace: 'nowrap',
+                        }}
+                      >
+                        {formattedMinterCurrentBlocks} /{' '}
+                        {formattedMinterRequiredBlocks}
+                      </Typography>
+                    </Box>
+                  ) : (
+                    <Box
+                      sx={{
+                        alignItems: 'center',
+                        display: 'inline-flex',
+                        gap: '4px',
+                        height: '18px',
+                        justifyContent: 'flex-end',
+                      }}
+                    >
+                      {Array.from({ length: 9 }).map((_, index) => (
+                        <Box
+                          key={index}
+                          sx={{
+                            ...(index < minterDotsFilled
+                              ? filledBlueDotSx
+                              : emptyBlueDotSx),
+                            borderRadius: '50%',
+                            height: '11px',
+                            width: '11px',
+                          }}
+                        />
+                      ))}
+                    </Box>
+                  )}
+                </motion.div>
+              </AnimatePresence>
+            </Box>
+          </motion.div>
+        ) : (
+          <motion.div
+            key="minter-apply"
+            initial={{ opacity: 0, y: 3 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -3 }}
+            transition={{ duration: 0.18, ease: [0.2, 0, 0, 1] }}
+            style={{
+              alignItems: 'center',
+              display: 'flex',
+              height: '22px',
+              justifyContent: 'flex-end',
+              width: '100%',
+            }}
+          >
+            <ButtonBase
+              onClick={() => {
+                executeEvent('addTab', {
+                  data: { service: 'APP', name: 'q-mintership', path: '' },
+                });
+                executeEvent('open-apps-mode', {});
+              }}
+              sx={{
+                alignItems: 'center',
+                backgroundColor: 'transparent',
+                display: 'inline-flex',
+                justifyContent: 'center',
+                minWidth: 0,
+                ml: 'auto',
+                px: 0,
+                py: 0,
+                transition:
+                  'color 140ms ease, text-shadow 140ms ease, transform 120ms ease',
+                whiteSpace: 'nowrap',
+                '&:hover': {
+                  '& .minter-apply-text': {
+                    color:
+                      theme.palette.mode === 'dark'
+                        ? alpha(GROUP_ACTIVITY_BLUE.gradientTop, 1)
+                        : alpha(GROUP_ACTIVITY_BLUE.hover, 0.98),
+                    textShadow: `0 0 10px ${alpha(
+                      GROUP_ACTIVITY_BLUE.primary,
+                      theme.palette.mode === 'dark' ? 0.18 : 0.12
+                    )}`,
+                  },
+                  transform: 'translateY(-1px)',
+                },
+                '&:active': {
+                  transform: 'translateY(0)',
+                },
+              }}
+            >
+              <Box
+                component="span"
+                sx={{
+                  alignItems: 'center',
+                  display: 'inline-flex',
+                  fontSize: '0.68rem',
+                  fontWeight: 700,
+                  letterSpacing: '0.06em',
+                  lineHeight: 1,
+                  textTransform: 'uppercase',
+                }}
+              >
+                <Box
+                  component="span"
+                  sx={{
+                    color: alpha(theme.palette.text.secondary, 0.52),
+                  }}
+                >
+                  [
+                </Box>
+                <Box
+                  component="span"
+                  className="minter-apply-text"
+                  sx={{
+                    color:
+                      theme.palette.mode === 'dark'
+                        ? alpha(GROUP_ACTIVITY_BLUE.gradientTop, 0.94)
+                        : alpha(GROUP_ACTIVITY_BLUE.pressed, 0.9),
+                    px: '4px',
+                    transition: 'color 140ms ease, text-shadow 140ms ease',
+                  }}
+                >
+                  {td('apply', 'Apply')}
+                </Box>
+                <Box
+                  component="span"
+                  sx={{
+                    color: alpha(theme.palette.text.secondary, 0.52),
+                  }}
+                >
+                  ]
+                </Box>
+              </Box>
+            </ButtonBase>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </Box>
+  );
+}
diff --git a/src/components/Group/HomeDesktop/useDashboardNodeMenu.ts b/src/components/Group/HomeDesktop/useDashboardNodeMenu.ts
new file mode 100644
index 00000000..21b3c636
--- /dev/null
+++ b/src/components/Group/HomeDesktop/useDashboardNodeMenu.ts
@@ -0,0 +1,227 @@
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type MouseEvent,
+} from 'react';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { useTranslation } from 'react-i18next';
+import { nodeInfosAtom, selectedNodeInfoAtom } from '../../../atoms/global';
+import { getBaseApiReact } from '../../../App';
+import { useAuth } from '../../../hooks/useAuth';
+import { useBlockedAddresses } from '../../../hooks/useBlockUsers';
+import type { ApiKey } from '../../../types/auth';
+import {
+  getDefaultLocalNodeUrl,
+  HTTPS_EXT_NODE_QORTAL_LINK,
+  isLocalNodeUrl,
+} from '../../../constants/constants';
+import type { DashboardNodeOption } from './types';
+import {
+  getDashboardNodeHost,
+  normalizeDashboardCustomNodes,
+  normalizeDashboardNodeUrl,
+} from './utils';
+import { ensureElectronCertIfLocalPrivateHttps } from '../../../utils/helpers';
+
+export function useDashboardNodeMenu() {
+  const selectedNode = useAtomValue(selectedNodeInfoAtom);
+  const setNodeInfos = useSetAtom(nodeInfosAtom);
+  const { getBalanceFunc, handleSaveNodeInfo } = useAuth();
+  const { refreshBlockedUsers } = useBlockedAddresses(true);
+  const { t } = useTranslation(['core', 'group', 'tutorial', 'auth']);
+  const td = useCallback(
+    (
+      key: string,
+      defaultValue: string,
+      options?: Record<string, string | number>
+    ) =>
+      String(
+        t(`group:dashboard.${key}`, {
+          defaultValue,
+          ...options,
+        })
+      ),
+    [t]
+  );
+
+  const [dashboardCustomNodes, setDashboardCustomNodes] = useState<ApiKey[]>(
+    []
+  );
+  const [nodeMenuAnchorEl, setNodeMenuAnchorEl] = useState<HTMLElement | null>(
+    null
+  );
+  const [isSwitchingNodeUrl, setIsSwitchingNodeUrl] = useState('');
+  const [nodeSwitchError, setNodeSwitchError] = useState('');
+
+  const selectedNodeUrl = normalizeDashboardNodeUrl(
+    selectedNode?.url || getBaseApiReact()
+  );
+  const publicNodeUrl = normalizeDashboardNodeUrl(HTTPS_EXT_NODE_QORTAL_LINK);
+
+  const loadDashboardCustomNodes = useCallback(async () => {
+    try {
+      const nodes = normalizeDashboardCustomNodes(
+        await window.sendMessage('getCustomNodesFromStorage')
+      );
+      setDashboardCustomNodes(nodes);
+    } catch (error) {
+      console.error(error);
+      setDashboardCustomNodes([]);
+    }
+  }, []);
+
+  const handleOpenNodeMenu = useCallback(
+    (event: MouseEvent<HTMLButtonElement>) => {
+      event.stopPropagation();
+      setNodeSwitchError('');
+      setNodeMenuAnchorEl(event.currentTarget);
+      loadDashboardCustomNodes();
+    },
+    [loadDashboardCustomNodes]
+  );
+
+  const handleCloseNodeMenu = useCallback(() => {
+    if (isSwitchingNodeUrl) return;
+    setNodeMenuAnchorEl(null);
+  }, [isSwitchingNodeUrl]);
+
+  const dashboardNodeOptions = useMemo<DashboardNodeOption[]>(() => {
+    const nodes = dashboardCustomNodes.filter((node) => {
+      const nodeUrl = normalizeDashboardNodeUrl(node.url);
+      return nodeUrl && nodeUrl !== publicNodeUrl && !isLocalNodeUrl(nodeUrl);
+    });
+    const localNodeUrl = normalizeDashboardNodeUrl(getDefaultLocalNodeUrl());
+    const localNodeOption: DashboardNodeOption | null = isLocalNodeUrl(
+      selectedNodeUrl
+    )
+      ? null
+      : {
+          key: 'local',
+          label: td('node_menu_local', 'Local Node'),
+          node: { url: localNodeUrl, apikey: '' },
+          secondary: getDashboardNodeHost(localNodeUrl),
+          type: 'local',
+        };
+
+    if (
+      selectedNodeUrl &&
+      selectedNodeUrl !== publicNodeUrl &&
+      !isLocalNodeUrl(selectedNodeUrl) &&
+      !nodes.some(
+        (node) => normalizeDashboardNodeUrl(node.url) === selectedNodeUrl
+      )
+    ) {
+      nodes.unshift({
+        url: selectedNodeUrl,
+        apikey: selectedNode?.apikey || '',
+        name: selectedNode?.name || '',
+      } as ApiKey);
+    }
+
+    return [
+      ...nodes.map((node) => {
+        const nodeUrl = normalizeDashboardNodeUrl(node.url);
+        const host = getDashboardNodeHost(nodeUrl);
+        return {
+          key: `custom:${nodeUrl}`,
+          label: node.name || host,
+          node: { ...node, url: nodeUrl },
+          secondary: host,
+          type: 'custom' as const,
+        };
+      }),
+      ...(localNodeOption ? [localNodeOption] : []),
+      {
+        key: 'public',
+        label: td('node_menu_public', 'Public Node'),
+        node: { url: HTTPS_EXT_NODE_QORTAL_LINK, apikey: '' },
+        secondary: getDashboardNodeHost(HTTPS_EXT_NODE_QORTAL_LINK),
+        type: 'public' as const,
+      },
+    ];
+  }, [
+    dashboardCustomNodes,
+    publicNodeUrl,
+    selectedNode?.apikey,
+    selectedNode?.name,
+    selectedNodeUrl,
+    td,
+  ]);
+
+  const handleSelectDashboardNode = useCallback(
+    async (option: DashboardNodeOption) => {
+      const nextUrl = normalizeDashboardNodeUrl(option.node.url);
+      if (!nextUrl || isSwitchingNodeUrl) return;
+
+      if (nextUrl === selectedNodeUrl) {
+        setNodeMenuAnchorEl(null);
+        return;
+      }
+
+      try {
+        setNodeSwitchError('');
+        setIsSwitchingNodeUrl(nextUrl);
+        let nodeToSave = option.node;
+
+        if (option.type === 'local') {
+          const apiKey = window?.coreSetup?.getApiKey
+            ? await window.coreSetup.getApiKey()
+            : '';
+          nodeToSave = { ...option.node, apikey: apiKey || '' };
+        }
+
+        const certResult = await ensureElectronCertIfLocalPrivateHttps(
+          nextUrl,
+          nodeToSave.apikey ?? ''
+        );
+        if (!certResult.success) {
+          throw new Error(
+            certResult.error || 'Unable to prepare local HTTPS certificate'
+          );
+        }
+
+        await handleSaveNodeInfo(nodeToSave);
+        setNodeInfos({});
+        await getBalanceFunc();
+        refreshBlockedUsers().catch((error) => {
+          console.error('Unable to refresh blocked users after node switch.', error);
+        });
+        setNodeMenuAnchorEl(null);
+      } catch (error) {
+        console.error(error);
+        setNodeSwitchError(
+          td('node_switch_error', 'Could not switch nodes right now.')
+        );
+      } finally {
+        setIsSwitchingNodeUrl('');
+      }
+    },
+    [
+      getBalanceFunc,
+      handleSaveNodeInfo,
+      isSwitchingNodeUrl,
+      refreshBlockedUsers,
+      selectedNodeUrl,
+      setNodeInfos,
+      td,
+    ]
+  );
+
+  useEffect(() => {
+    loadDashboardCustomNodes();
+  }, [loadDashboardCustomNodes]);
+
+  return {
+    dashboardNodeOptions,
+    handleCloseNodeMenu,
+    handleOpenNodeMenu,
+    handleSelectDashboardNode,
+    isSwitchingNodeUrl,
+    nodeMenuAnchorEl,
+    nodeSwitchError,
+    selectedNodeUrl,
+    td,
+  };
+}
diff --git a/src/components/Group/HomeDesktop/utils.ts b/src/components/Group/HomeDesktop/utils.ts
new file mode 100644
index 00000000..4c1f2983
--- /dev/null
+++ b/src/components/Group/HomeDesktop/utils.ts
@@ -0,0 +1,211 @@
+import { alpha, type Theme } from '@mui/material/styles';
+import type { ApiKey } from '../../../types/auth';
+import { nodeDisplay } from '../../../utils/helpers';
+import { GROUP_ACTIVITY_BLUE } from '../groupActivityColorSystem';
+import {
+  HOME_CUSTOMIZABLE_CARD_MAX_HEIGHTS,
+  HOME_CUSTOMIZABLE_CARD_MIN_HEIGHTS,
+  HOME_CUSTOMIZABLE_CARD_ORDER_DEFAULT,
+  WALLET_ACTIVITY_RECENT_PAYMENT_LOOKBACK_MS,
+} from './homeDesktopConstants';
+import type {
+  HomeCustomizableCardId,
+  HomeCustomizableCardsLayout,
+  HomeLayoutDebugMetric,
+  MinterInfoView,
+  WalletActivityDirection,
+  WalletActivityTransaction,
+} from './types';
+
+export function normalizeDashboardNodeUrl(url?: string | null) {
+  return (url || '').trim().replace(/\/+$/, '');
+}
+
+export function getDashboardNodeHost(url: string) {
+  try {
+    return new URL(url).host;
+  } catch {
+    return nodeDisplay(url);
+  }
+}
+
+export function normalizeDashboardCustomNodes(nodes: unknown): ApiKey[] {
+  if (!Array.isArray(nodes)) return [];
+
+  return nodes
+    .map((node) => ({
+      url:
+        typeof node?.url === 'string'
+          ? normalizeDashboardNodeUrl(node.url)
+          : '',
+      apikey: typeof node?.apikey === 'string' ? node.apikey : '',
+      name: typeof node?.name === 'string' ? node.name.trim() : '',
+    }))
+    .filter((node) => Boolean(node.url));
+}
+
+export const isWalletActivityTimestampRecent = (timestamp: number) =>
+  Date.now() - timestamp <= WALLET_ACTIVITY_RECENT_PAYMENT_LOOKBACK_MS;
+
+export function formatWalletActivityRelativeTime(
+  timestamp: number,
+  now: number,
+  tDashboard: (
+    key: string,
+    options?: { count?: number }
+  ) => string
+) {
+  const elapsedMs = Math.max(0, now - timestamp);
+  const elapsedMinutes = Math.floor(elapsedMs / 60000);
+
+  if (elapsedMinutes < 1) {
+    return tDashboard('wallet_activity_relative_just_now');
+  }
+
+  if (elapsedMinutes < 60) {
+    return tDashboard('wallet_activity_relative_minutes_ago', {
+      count: elapsedMinutes,
+    });
+  }
+
+  const elapsedHours = Math.floor(elapsedMinutes / 60);
+  if (elapsedHours < 24) {
+    return tDashboard('wallet_activity_relative_hours_ago', {
+      count: elapsedHours,
+    });
+  }
+
+  const elapsedDays = Math.floor(elapsedHours / 24);
+  return tDashboard('wallet_activity_relative_days_ago', {
+    count: elapsedDays,
+  });
+}
+
+export function formatWalletActivityAmount(
+  amount: number,
+  direction: WalletActivityDirection
+) {
+  return `${direction === 'outgoing' ? '-' : '+'}${Math.abs(amount).toFixed(2)} QORT`;
+}
+
+export function getWalletActivityCreatorAddress(
+  transaction: WalletActivityTransaction
+) {
+  return (
+    transaction.creatorAddress ||
+    transaction.senderAddress ||
+    transaction.sender ||
+    transaction.creator ||
+    ''
+  ).trim();
+}
+
+export function getWalletActivityRecipientAddress(
+  transaction: WalletActivityTransaction
+) {
+  return (transaction.recipient || transaction.recipientAddress || '').trim();
+}
+
+export function parseMinterInfoView(value: string | null): MinterInfoView {
+  return value === 'progress' ? 'progress' : 'dots';
+}
+
+export function clampHomeCustomizableCardHeight(
+  cardId: HomeCustomizableCardId,
+  value: number
+) {
+  return Math.max(
+    HOME_CUSTOMIZABLE_CARD_MIN_HEIGHTS[cardId],
+    Math.min(HOME_CUSTOMIZABLE_CARD_MAX_HEIGHTS[cardId], Math.round(value))
+  );
+}
+
+export function parseHomeCustomizableCardsLayout(
+  rawValue: string | null
+): HomeCustomizableCardsLayout {
+  if (!rawValue) {
+    return {
+      heights: {},
+      order: HOME_CUSTOMIZABLE_CARD_ORDER_DEFAULT,
+    };
+  }
+
+  try {
+    const parsed = JSON.parse(rawValue);
+    const parsedOrder = Array.isArray(parsed?.order)
+      ? parsed.order.filter(
+          (value): value is HomeCustomizableCardId =>
+            value === 'groupActivity' || value === 'quitter'
+        )
+      : [];
+    const order =
+      parsedOrder.length === HOME_CUSTOMIZABLE_CARD_ORDER_DEFAULT.length &&
+      HOME_CUSTOMIZABLE_CARD_ORDER_DEFAULT.every((value) =>
+        parsedOrder.includes(value)
+      )
+        ? parsedOrder
+        : HOME_CUSTOMIZABLE_CARD_ORDER_DEFAULT;
+
+    const nextHeights: Partial<Record<HomeCustomizableCardId, number>> = {};
+    const parsedHeights = parsed?.heights ?? {};
+
+    HOME_CUSTOMIZABLE_CARD_ORDER_DEFAULT.forEach((cardId) => {
+      const height = parsedHeights?.[cardId];
+      if (typeof height === 'number' && Number.isFinite(height) && height > 0) {
+        nextHeights[cardId] = clampHomeCustomizableCardHeight(cardId, height);
+      }
+    });
+
+    return {
+      heights: nextHeights,
+      order,
+    };
+  } catch {
+    return {
+      heights: {},
+      order: HOME_CUSTOMIZABLE_CARD_ORDER_DEFAULT,
+    };
+  }
+}
+
+export function measureHomeLayoutDebugMetric(
+  node: HTMLElement,
+  rootRect: DOMRect
+): HomeLayoutDebugMetric {
+  const rect = node.getBoundingClientRect();
+
+  return {
+    bottom: rect.bottom - rootRect.top,
+    height: rect.height,
+    left: rect.left - rootRect.left,
+    top: rect.top - rootRect.top,
+    width: rect.width,
+  };
+}
+
+export function nodeMenuItemSx(theme: Theme, selected: boolean) {
+  return {
+    alignItems: 'center',
+    borderRadius: '8px',
+    color: selected
+      ? theme.palette.mode === 'dark'
+        ? alpha(GROUP_ACTIVITY_BLUE.gradientTop, 0.96)
+        : alpha(GROUP_ACTIVITY_BLUE.pressed, 0.94)
+      : alpha(theme.palette.text.primary, 0.9),
+    display: 'flex',
+    gap: '12px',
+    minHeight: 52,
+    px: 1.15,
+    py: 0.9,
+    '&.Mui-disabled': {
+      color: alpha(theme.palette.text.secondary, 0.52),
+      opacity: 1,
+    },
+    '&:hover': {
+      backgroundColor: alpha(
+        GROUP_ACTIVITY_BLUE.primary,
+        theme.palette.mode === 'dark' ? 0.12 : 0.08
+      ),
+    },
+  };
+}
diff --git a/src/components/Group/HomeDeveloperTab.tsx b/src/components/Group/HomeDeveloperTab.tsx
deleted file mode 100644
index 97143814..00000000
--- a/src/components/Group/HomeDeveloperTab.tsx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { Box, ButtonBase, Typography, useTheme } from '@mui/material';
-import BuildIcon from '@mui/icons-material/Build';
-import GroupsIcon from '@mui/icons-material/Groups';
-import VideoLibraryIcon from '@mui/icons-material/VideoLibrary';
-import { useTranslation } from 'react-i18next';
-import { executeEvent } from '../../utils/events';
-
-// TODO: replace with real group IDs once confirmed
-const CORE_SUPPORT_GROUP = { id: 120, name: 'Qortal-CORE-Support' };
-const DEVNET_TESTING_GROUP = { id: 269, name: 'Q-App-DevNet-Testing' };
-
-interface HomeDeveloperTabProps {
-  getTimestampEnterChat: () => void;
-  setDesktopViewMode: (mode: string) => void;
-  setGroupSection: (section: string) => void;
-  setMobileViewMode: (mode: string) => void;
-  setSelectedGroup: (group: any) => void;
-}
-
-export const HomeDeveloperTab = ({
-  getTimestampEnterChat,
-  setDesktopViewMode,
-  setGroupSection,
-  setMobileViewMode,
-  setSelectedGroup,
-}: HomeDeveloperTabProps) => {
-  const { t } = useTranslation(['tutorial']);
-  const theme = useTheme();
-
-  const openApp = (appName: string) => {
-    executeEvent('addTab', { data: { service: 'APP', name: appName } });
-    executeEvent('open-apps-mode', {});
-  };
-
-  const openGroup = (group: { id: number; name: string }) => {
-    setSelectedGroup({ groupId: String(group.id), groupName: group.name });
-    setMobileViewMode('group');
-    getTimestampEnterChat();
-    setGroupSection('default');
-    setDesktopViewMode('chat');
-  };
-
-  const cards = [
-    {
-      key: 'qtube_tutorial',
-      icon: <VideoLibraryIcon sx={{ color: theme.palette.primary.main, fontSize: '1.8rem' }} />,
-      title: t('tutorial:home.qtube_tutorial'),
-      description: t('tutorial:home.qtube_tutorial_desc'),
-      onAction: () => openApp('q-tube'),
-    },
-    {
-      key: 'core_support',
-      icon: <GroupsIcon sx={{ color: theme.palette.primary.main, fontSize: '1.8rem' }} />,
-      title: t('tutorial:home.core_support'),
-      description: t('tutorial:home.core_support_desc'),
-      onAction: () => openGroup(CORE_SUPPORT_GROUP),
-    },
-    {
-      key: 'devnet_testing',
-      icon: <BuildIcon sx={{ color: theme.palette.primary.main, fontSize: '1.8rem' }} />,
-      title: t('tutorial:home.devnet_testing'),
-      description: t('tutorial:home.devnet_testing_desc'),
-      onAction: () => openGroup(DEVNET_TESTING_GROUP),
-    },
-  ];
-
-  return (
-    <Box
-      sx={{
-        bgcolor: theme.palette.background.paper,
-        borderRadius: '12px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '8px',
-        padding: '16px 20px',
-        width: '100%',
-      }}
-    >
-      <Typography
-        sx={{
-          color: theme.palette.text.primary,
-          fontSize: '1rem',
-          fontWeight: 600,
-          mb: '4px',
-        }}
-      >
-        {t('tutorial:home.developer_resources')}
-      </Typography>
-
-      {cards.map((card) => (
-        <ButtonBase
-          key={card.key}
-          onClick={card.onAction}
-          sx={{
-            alignItems: 'center',
-            bgcolor: theme.palette.background.default,
-            borderRadius: '10px',
-            display: 'flex',
-            gap: '16px',
-            padding: '14px 16px',
-            textAlign: 'left',
-            width: '100%',
-            '&:hover': { bgcolor: theme.palette.action.hover },
-          }}
-        >
-          {/* Icon */}
-          <Box sx={{ flexShrink: 0 }}>{card.icon}</Box>
-
-          {/* Title + description */}
-          <Box sx={{ flex: 1, minWidth: 0 }}>
-            <Typography
-              sx={{
-                color: theme.palette.text.primary,
-                fontSize: '0.9rem',
-                fontWeight: 600,
-              }}
-            >
-              {card.title}
-            </Typography>
-            <Typography
-              sx={{
-                color: theme.palette.text.secondary,
-                fontSize: '0.78rem',
-              }}
-            >
-              {card.description}
-            </Typography>
-          </Box>
-        </ButtonBase>
-      ))}
-    </Box>
-  );
-};
diff --git a/src/components/Group/HomeFeaturedApps.tsx b/src/components/Group/HomeFeaturedApps.tsx
index fd14e01c..e4281801 100644
--- a/src/components/Group/HomeFeaturedApps.tsx
+++ b/src/components/Group/HomeFeaturedApps.tsx
@@ -1,60 +1,726 @@
-import { useEffect, useRef, useState } from 'react';
-import { Avatar, Box, ButtonBase, Typography, useTheme } from '@mui/material';
+import {
+  CSSProperties,
+  useEffect,
+  useEffectEvent,
+  useRef,
+  useState,
+} from 'react';
+import { alpha } from '@mui/material/styles';
+import {
+  Avatar,
+  Box,
+  Button,
+  ButtonBase,
+  Tooltip,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import VisibilityOffRoundedIcon from '@mui/icons-material/VisibilityOffRounded';
+import VisibilityRoundedIcon from '@mui/icons-material/VisibilityRounded';
 import { useTranslation } from 'react-i18next';
 import { executeEvent } from '../../utils/events';
 import { getBaseApiReactForAvatar } from '../../utils/globalApi';
-import { officialAppsConfig } from '../Apps/config/officialApps';
+import BorderGlow from '../common/BorderGlow';
+import { getBlueTier1ButtonSx } from '../../styles/blueMaterial';
+import {
+  dashboardPanelSx,
+  handleDashboardPanelPointerLeave,
+  handleDashboardPanelPointerMove,
+  useDashboardPanelMouseLight,
+} from './dashboardPanelEffects';
+import {
+  GROUP_ACTIVITY_BLUE,
+  getBlueAmbientLineBackground,
+} from './groupActivityColorSystem';
 
 const RETRY_DELAY_MS = 5000;
+export const FEATURED_PREVIEW_EXPAND_DELAY_MS = 200;
+export const FEATURED_INITIAL_PREVIEW_DURATION_MS = 3500;
+export const FEATURED_INTRO_TOTAL_DURATION_MS =
+  FEATURED_PREVIEW_EXPAND_DELAY_MS + FEATURED_INITIAL_PREVIEW_DURATION_MS;
+const FEATURED_STRIP_HOVER_DURATION_MS = 190;
+const FEATURED_INITIAL_PREVIEW_SESSION_KEY =
+  'dashboard-featured-subwire-preview-seen';
+const FEATURED_CALM_MODE_STORAGE_KEY = 'dashboard-featured-apps-calm-mode';
+const FEATURED_TEASER_FADE_DURATION_MS = 300;
+const SUBWIRE_APP_NAME = 'SubWire';
+const Q_TUBE_APP_NAME = 'Q-Tube';
+const SUBWIRE_PREVIEW_VIDEO_SRC = '/subwire-preview.webm';
+const Q_TUBE_PREVIEW_VIDEO_SRC = '/q-tube-preview.webm';
+const FEATURED_TILE_VIDEO_SRC = {
+  [Q_TUBE_APP_NAME]: Q_TUBE_PREVIEW_VIDEO_SRC,
+  [SUBWIRE_APP_NAME]: SUBWIRE_PREVIEW_VIDEO_SRC,
+} as const;
+const FEATURED_STRIP_HOVER_TRANSITION = `${FEATURED_STRIP_HOVER_DURATION_MS}ms ease`;
+const FEATURED_PREVIEW_CONFIG = {
+  [Q_TUBE_APP_NAME]: {
+    accent: '#78AFFF',
+    align: 'left',
+    eyebrow: 'Always on',
+    subtitle:
+      'Network-hosted video drops, weird clips, and creator rabbit holes.',
+    title: Q_TUBE_APP_NAME,
+    videoSrc: Q_TUBE_PREVIEW_VIDEO_SRC,
+    videoPosition: 'center center',
+  },
+  [SUBWIRE_APP_NAME]: {
+    accent: '#78AFFF',
+    align: 'right',
+    eyebrow: 'Creator-owned',
+    subtitle:
+      'Tell your stories without limits. Own your work and earn directly from your subscribers.',
+    title: SUBWIRE_APP_NAME,
+    videoSrc: SUBWIRE_PREVIEW_VIDEO_SRC,
+    videoPosition: 'center center',
+  },
+} as const;
+type PreviewAppName = keyof typeof FEATURED_PREVIEW_CONFIG;
+const FEATURED_APP_GRID = [
+  Q_TUBE_APP_NAME,
+  'Quitter',
+  'Q-Mail',
+  'Q-Blog',
+  'Q-Trade',
+  SUBWIRE_APP_NAME,
+] as const;
+const FEATURED_GRID_GAP_PX = 12;
+const FEATURED_GRID_COL_MAX_PX = 124;
+/** Cap width when space allows; below this the grid scales down proportionally (avoids 3-col + span-2 orphan gaps). */
+const FEATURED_GRID_MAX_WIDTH_PX =
+  4 * FEATURED_GRID_COL_MAX_PX + 3 * FEATURED_GRID_GAP_PX;
 
 const openApp = (appName: string) => {
   executeEvent('addTab', { data: { service: 'APP', name: appName } });
   executeEvent('open-apps-mode', {});
 };
 
-export const HomeFeaturedApps = () => {
-  const { t } = useTranslation(['tutorial']);
+const openAppsLibrary = () => {
+  executeEvent('openAppsLibrarySearch', {
+    data: {
+      query: '',
+    },
+  });
+  executeEvent('open-apps-mode', {});
+};
+
+export const HomeFeaturedApps = ({ panelBoxRef = undefined }) => {
   const theme = useTheme();
+  const { t } = useTranslation(['group']);
+  const td = (key: string, defaultValue: string) =>
+    t(`group:dashboard.${key}`, { defaultValue });
+  const panelRef = useDashboardPanelMouseLight<HTMLDivElement>();
+  const assignPanelNode = (node) => {
+    panelRef.current = node;
+
+    if (typeof panelBoxRef === 'function') {
+      panelBoxRef(node);
+      return;
+    }
+
+    if (panelBoxRef) {
+      panelBoxRef.current = node;
+    }
+  };
+  const previewExpandTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  );
+  const previewCollapseTimerRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  );
+  const initialPreviewStartTimerRef = useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null);
+  const initialPreviewEndTimerRef = useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null);
+  const [expandedPreviewApp, setExpandedPreviewApp] =
+    useState<PreviewAppName | null>(null);
+  const [autoPreviewActive, setAutoPreviewActive] = useState(false);
+  const [isCalmMode, setIsCalmMode] = useState(() => {
+    try {
+      return (
+        window.localStorage.getItem(FEATURED_CALM_MODE_STORAGE_KEY) === '1'
+      );
+    } catch {
+      return false;
+    }
+  });
+  const featuredFooterStripBackground =
+    theme.palette.mode === 'dark'
+      ? `radial-gradient(140% 252% at 50% 54%, ${alpha(GROUP_ACTIVITY_BLUE.gradientTop, 0.225)} 0%, ${alpha(
+          GROUP_ACTIVITY_BLUE.primary,
+          0.132
+        )} 18%, ${alpha(GROUP_ACTIVITY_BLUE.hover, 0.078)} 38%, ${alpha(
+          GROUP_ACTIVITY_BLUE.primary,
+          0.032
+        )} 62%, transparent 88%), linear-gradient(90deg, transparent 0%, ${alpha(
+          GROUP_ACTIVITY_BLUE.primary,
+          0.014
+        )} 18%, ${alpha(GROUP_ACTIVITY_BLUE.gradientMid, 0.072)} 50%, ${alpha(
+          GROUP_ACTIVITY_BLUE.primary,
+          0.014
+        )} 82%, transparent 100%), linear-gradient(180deg, ${alpha(
+          theme.palette.common.white,
+          0.024
+        )} 0%, ${alpha(theme.palette.common.white, 0.012)} 12%, transparent 34%, transparent 64%, ${alpha(
+          GROUP_ACTIVITY_BLUE.primary,
+          0.03
+        )} 100%), linear-gradient(180deg, transparent 0%, transparent 46%, ${alpha(
+          theme.palette.common.white,
+          0.034
+        )} 49.5%, ${alpha(theme.palette.common.white, 0.05)} 50%, ${alpha(
+          theme.palette.common.white,
+          0.034
+        )} 50.5%, transparent 54%, transparent 100%)`
+      : `radial-gradient(140% 252% at 50% 54%, ${alpha(GROUP_ACTIVITY_BLUE.gradientTop, 0.162)} 0%, ${alpha(
+          GROUP_ACTIVITY_BLUE.primary,
+          0.096
+        )} 18%, ${alpha(GROUP_ACTIVITY_BLUE.hover, 0.056)} 38%, ${alpha(
+          GROUP_ACTIVITY_BLUE.primary,
+          0.022
+        )} 62%, transparent 88%), linear-gradient(90deg, transparent 0%, ${alpha(
+          GROUP_ACTIVITY_BLUE.primary,
+          0.009
+        )} 18%, ${alpha(GROUP_ACTIVITY_BLUE.gradientMid, 0.05)} 50%, ${alpha(
+          GROUP_ACTIVITY_BLUE.primary,
+          0.009
+        )} 82%, transparent 100%), linear-gradient(180deg, ${alpha(
+          theme.palette.common.white,
+          0.018
+        )} 0%, ${alpha(theme.palette.common.white, 0.008)} 12%, transparent 34%, transparent 64%, ${alpha(
+          GROUP_ACTIVITY_BLUE.primary,
+          0.02
+        )} 100%), linear-gradient(180deg, transparent 0%, transparent 46%, ${alpha(
+          theme.palette.common.white,
+          0.022
+        )} 49.5%, ${alpha(theme.palette.common.white, 0.03)} 50%, ${alpha(
+          theme.palette.common.white,
+          0.022
+        )} 50.5%, transparent 54%, transparent 100%)`;
+  const featuredFooterStripCoreGlow =
+    theme.palette.mode === 'dark'
+      ? `radial-gradient(92% 202% at 50% 56%, ${alpha(GROUP_ACTIVITY_BLUE.gradientTop, 0.285)} 0%, ${alpha(
+          GROUP_ACTIVITY_BLUE.primary,
+          0.168
+        )} 30%, ${alpha(GROUP_ACTIVITY_BLUE.primary, 0.055)} 56%, transparent 80%)`
+      : `radial-gradient(92% 202% at 50% 56%, ${alpha(GROUP_ACTIVITY_BLUE.gradientTop, 0.195)} 0%, ${alpha(
+          GROUP_ACTIVITY_BLUE.primary,
+          0.114
+        )} 30%, ${alpha(GROUP_ACTIVITY_BLUE.primary, 0.036)} 56%, transparent 80%)`;
+
+  const clearInitialPreviewTimers = useEffectEvent(() => {
+    if (initialPreviewStartTimerRef.current) {
+      clearTimeout(initialPreviewStartTimerRef.current);
+      initialPreviewStartTimerRef.current = null;
+    }
+    if (initialPreviewEndTimerRef.current) {
+      clearTimeout(initialPreviewEndTimerRef.current);
+      initialPreviewEndTimerRef.current = null;
+    }
+  });
+
+  useEffect(() => {
+    if (isCalmMode) {
+      setAutoPreviewActive(false);
+      setExpandedPreviewApp(null);
+      return () => {
+        if (previewExpandTimerRef.current)
+          clearTimeout(previewExpandTimerRef.current);
+        if (previewCollapseTimerRef.current)
+          clearTimeout(previewCollapseTimerRef.current);
+        clearInitialPreviewTimers();
+      };
+    }
+
+    let shouldRunInitialPreview = true;
+
+    try {
+      shouldRunInitialPreview =
+        window.sessionStorage.getItem(FEATURED_INITIAL_PREVIEW_SESSION_KEY) !==
+        '1';
+    } catch {
+      shouldRunInitialPreview = true;
+    }
+
+    if (!shouldRunInitialPreview) {
+      setAutoPreviewActive(false);
+      return () => {
+        if (previewExpandTimerRef.current)
+          clearTimeout(previewExpandTimerRef.current);
+        if (previewCollapseTimerRef.current)
+          clearTimeout(previewCollapseTimerRef.current);
+        clearInitialPreviewTimers();
+      };
+    }
+
+    try {
+      window.sessionStorage.setItem(FEATURED_INITIAL_PREVIEW_SESSION_KEY, '1');
+    } catch {
+      // Ignore sessionStorage failures and allow the intro to behave as a normal first-mount teaser.
+    }
+
+    setAutoPreviewActive(true);
+
+    initialPreviewStartTimerRef.current = setTimeout(() => {
+      initialPreviewStartTimerRef.current = null;
+      setExpandedPreviewApp(SUBWIRE_APP_NAME);
+    }, FEATURED_PREVIEW_EXPAND_DELAY_MS);
+
+    initialPreviewEndTimerRef.current = setTimeout(() => {
+      initialPreviewEndTimerRef.current = null;
+      setAutoPreviewActive(false);
+      setExpandedPreviewApp((current) =>
+        current === SUBWIRE_APP_NAME ? null : current
+      );
+    }, FEATURED_INTRO_TOTAL_DURATION_MS);
+
+    return () => {
+      if (previewExpandTimerRef.current)
+        clearTimeout(previewExpandTimerRef.current);
+      if (previewCollapseTimerRef.current)
+        clearTimeout(previewCollapseTimerRef.current);
+      clearInitialPreviewTimers();
+    };
+  }, [clearInitialPreviewTimers, isCalmMode]);
+
+  const clearPirateTimers = () => {
+    if (previewExpandTimerRef.current) {
+      clearTimeout(previewExpandTimerRef.current);
+      previewExpandTimerRef.current = null;
+    }
+    if (previewCollapseTimerRef.current) {
+      clearTimeout(previewCollapseTimerRef.current);
+      previewCollapseTimerRef.current = null;
+    }
+  };
+
+  const stopInitialPreview = () => {
+    clearInitialPreviewTimers();
+    setAutoPreviewActive(false);
+  };
+
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(
+        FEATURED_CALM_MODE_STORAGE_KEY,
+        isCalmMode ? '1' : '0'
+      );
+    } catch {
+      // Ignore storage failures and keep the preference local-only.
+    }
+
+    if (isCalmMode) {
+      clearPirateTimers();
+      stopInitialPreview();
+      setExpandedPreviewApp(null);
+    }
+  }, [isCalmMode]);
+
+  const schedulePreviewExpand = (appName: PreviewAppName) => {
+    if (isCalmMode) return;
+    if (autoPreviewActive) {
+      stopInitialPreview();
+    }
+    if (expandedPreviewApp === appName && !previewExpandTimerRef.current)
+      return;
+    if (previewCollapseTimerRef.current) {
+      clearTimeout(previewCollapseTimerRef.current);
+      previewCollapseTimerRef.current = null;
+    }
+    if (previewExpandTimerRef.current) {
+      clearTimeout(previewExpandTimerRef.current);
+      previewExpandTimerRef.current = null;
+    }
+    previewExpandTimerRef.current = setTimeout(() => {
+      previewExpandTimerRef.current = null;
+      setExpandedPreviewApp(appName);
+    }, FEATURED_PREVIEW_EXPAND_DELAY_MS);
+  };
+
+  const schedulePreviewCollapse = () => {
+    if (isCalmMode) return;
+    if (autoPreviewActive) return;
+    if (previewExpandTimerRef.current) {
+      clearTimeout(previewExpandTimerRef.current);
+      previewExpandTimerRef.current = null;
+    }
+    if (!expandedPreviewApp || previewCollapseTimerRef.current) return;
+    previewCollapseTimerRef.current = setTimeout(() => {
+      previewCollapseTimerRef.current = null;
+      setExpandedPreviewApp(null);
+    }, 70);
+  };
 
   return (
     <Box
+      ref={assignPanelNode}
       sx={{
-        bgcolor: theme.palette.background.paper,
+        ...dashboardPanelSx(theme, 'base'),
         borderRadius: '12px',
+        containerType: 'inline-size',
         display: 'flex',
         flexDirection: 'column',
         gap: '12px',
-        padding: '16px 20px',
+        height: '100%',
+        minHeight: 0,
+        padding: '15px 20px 16px',
+        transition: 'border-color 180ms ease, background-color 180ms ease',
         width: '100%',
       }}
+      onMouseMove={handleDashboardPanelPointerMove}
+      onMouseLeave={handleDashboardPanelPointerLeave}
     >
-      {/* Section title */}
-      <Typography
+      <Box
         sx={{
-          color: theme.palette.text.primary,
-          fontSize: '1rem',
-          fontWeight: 600,
+          alignItems: 'center',
+          display: 'flex',
+          justifyContent: 'center',
+          minHeight: '42px',
+          position: 'relative',
+          textAlign: 'center',
+          width: '100%',
         }}
       >
-        {t('tutorial:home.featured_apps')}
-      </Typography>
+        <Tooltip enterDelay={320} title={td('reduce_motion', 'Reduce motion')}>
+          <ButtonBase
+            aria-label={td('reduce_motion', 'Reduce motion')}
+            aria-pressed={isCalmMode}
+            onClick={() => setIsCalmMode((current) => !current)}
+            sx={{
+              alignItems: 'center',
+              borderRadius: '9px',
+              color: alpha(
+                theme.palette.text.secondary,
+                isCalmMode ? 0.9 : 0.68
+              ),
+              display: 'inline-flex',
+              height: 30,
+              justifyContent: 'center',
+              position: 'absolute',
+              right: 0,
+              top: '50%',
+              transform: 'translateY(-50%)',
+              transition:
+                'background-color 160ms ease, color 160ms ease, box-shadow 180ms ease, opacity 160ms ease',
+              width: 30,
+              '&:hover': {
+                backgroundColor:
+                  theme.palette.mode === 'dark'
+                    ? 'rgba(255,255,255,0.042)'
+                    : 'rgba(24,29,36,0.05)',
+                color: theme.palette.text.primary,
+              },
+              ...(isCalmMode
+                ? {
+                    backgroundColor:
+                      theme.palette.mode === 'dark'
+                        ? 'rgba(255,255,255,0.03)'
+                        : 'rgba(24,29,36,0.042)',
+                    boxShadow:
+                      theme.palette.mode === 'dark'
+                        ? 'inset 0 0 0 1px rgba(255,255,255,0.05)'
+                        : 'inset 0 0 0 1px rgba(24,29,36,0.06)',
+                  }
+                : null),
+            }}
+          >
+            {isCalmMode ? (
+              <VisibilityOffRoundedIcon sx={{ fontSize: '1rem' }} />
+            ) : (
+              <VisibilityRoundedIcon sx={{ fontSize: '1rem' }} />
+            )}
+          </ButtonBase>
+        </Tooltip>
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '3px',
+            textAlign: 'center',
+          }}
+        >
+          <Typography
+            sx={{
+              color: theme.palette.text.primary,
+              fontSize: '1rem',
+              fontWeight: 600,
+            }}
+          >
+            {td('featured_q_apps', 'Featured Q-Apps')}
+          </Typography>
+          <Typography
+            sx={{
+              color: theme.palette.text.secondary,
+              fontSize: '0.76rem',
+              letterSpacing: '0.012em',
+              lineHeight: 1.45,
+              maxWidth: '420px',
+            }}
+          >
+            {td(
+              'featured_q_apps_subtitle',
+              'Launch trusted community apps directly from your dashboard.'
+            )}
+          </Typography>
+        </Box>
+      </Box>
 
-      {/* Horizontally scrollable app row */}
       <Box
         sx={{
           display: 'flex',
-          gap: '12px',
-          justifyContent: 'center',
-          overflowX: 'auto',
-          pb: '4px', // prevent clipping box-shadows on scroll
-          // Hide scrollbar visually while keeping it functional
-          scrollbarWidth: 'none',
-          '&::-webkit-scrollbar': { display: 'none' },
+          flex: 1,
+          flexDirection: 'column',
+          gap: '0px',
+          minHeight: 0,
         }}
       >
-        {officialAppsConfig.featured.map((appName) => (
-          <AppTile key={appName} appName={appName} theme={theme} />
-        ))}
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            flex: 1,
+            justifyContent: 'center',
+            minHeight: 0,
+            padding: '18px 0',
+            position: 'relative',
+            width: '100%',
+          }}
+        >
+          <Box
+            sx={{
+              alignItems: 'stretch',
+              display: 'grid',
+              gap: `${FEATURED_GRID_GAP_PX}px`,
+              gridAutoRows: 'minmax(108px, 124px)',
+              gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+              justifyContent: 'stretch',
+              marginInline: 'auto',
+              maxWidth: `${FEATURED_GRID_MAX_WIDTH_PX}px`,
+              position: 'relative',
+              width: '100%',
+              zIndex: 1,
+            }}
+          >
+            {FEATURED_APP_GRID.map((appName, index) =>
+              appName ? (
+                <AppTile
+                  key={appName}
+                  appName={appName}
+                  calmMode={isCalmMode}
+                  theme={theme}
+                  expandedPreviewApp={expandedPreviewApp}
+                  onPreviewExpandStart={schedulePreviewExpand}
+                  onPreviewExpandEnd={schedulePreviewCollapse}
+                />
+              ) : (
+                <Box
+                  key={`featured-empty-slot-${index}`}
+                  aria-hidden="true"
+                  sx={{
+                    height: '100%',
+                    visibility: 'hidden',
+                    width: '100%',
+                  }}
+                />
+              )
+            )}
+          </Box>
+          {!isCalmMode ? (
+            <FeaturedExpandedPreview
+              appName={expandedPreviewApp}
+              theme={theme}
+              visible={!!expandedPreviewApp}
+              teaserMode={
+                autoPreviewActive && expandedPreviewApp === SUBWIRE_APP_NAME
+              }
+              onMouseEnter={() => {
+                clearPirateTimers();
+              }}
+              onMouseLeave={schedulePreviewCollapse}
+            />
+          ) : null}
+        </Box>
+
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            flexShrink: 0,
+            justifyContent: 'center',
+            height: '42px',
+            position: 'relative',
+          }}
+        >
+          <Box
+            className="dashboard-panel-decoration"
+            aria-hidden="true"
+            sx={{
+              position: 'absolute',
+              left: '50%',
+              top: 0,
+              transform: 'translateX(-50%)',
+              height: '1px',
+              maxWidth: '780px',
+              pointerEvents: 'none',
+              width: '126%',
+              background: getBlueAmbientLineBackground(theme, 'medium'),
+              filter: 'blur(0.45px)',
+              opacity: theme.palette.mode === 'dark' ? 0.72 : 0.6,
+              transition: `opacity ${FEATURED_STRIP_HOVER_TRANSITION}, filter ${FEATURED_STRIP_HOVER_TRANSITION}`,
+              '&::after': {
+                content: '""',
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                top: 0,
+                height: '24px',
+                pointerEvents: 'none',
+                background:
+                  theme.palette.mode === 'dark'
+                    ? 'radial-gradient(92% 210% at 50% 0%, rgba(255,255,255,0.038) 0%, rgba(255,255,255,0.025) 18%, rgba(255,255,255,0.013) 34%, rgba(60,76,90,0.006) 52%, transparent 82%)'
+                    : 'radial-gradient(92% 210% at 50% 0%, rgba(255,255,255,0.028) 0%, rgba(255,255,255,0.018) 18%, rgba(255,255,255,0.01) 34%, rgba(60,76,90,0.006) 52%, transparent 82%)',
+                filter: 'blur(3.6px)',
+                transform: 'translateY(1px)',
+              },
+            }}
+          />
+          <ButtonBase
+            disableRipple
+            onClick={openAppsLibrary}
+            sx={{
+              alignItems: 'center',
+              color: theme.palette.text.secondary,
+              cursor: 'pointer',
+              display: 'flex',
+              justifyContent: 'center',
+              inset: '0 -20px -16px',
+              lineHeight: 1,
+              overflow: 'hidden',
+              padding: 0,
+              position: 'absolute',
+              boxShadow:
+                theme.palette.mode === 'dark'
+                  ? 'inset 0 1px 0 rgba(255,255,255,0.018), inset 0 -1px 0 rgba(132,175,240,0.024)'
+                  : 'inset 0 1px 0 rgba(255,255,255,0.022), inset 0 -1px 0 rgba(132,175,240,0.018)',
+              textAlign: 'center',
+              textDecoration: 'none',
+              transition: `color ${FEATURED_STRIP_HOVER_TRANSITION}, box-shadow ${FEATURED_STRIP_HOVER_TRANSITION}`,
+              zIndex: 0,
+              '&::before': {
+                content: '""',
+                position: 'absolute',
+                inset: '0 0 0 0',
+                pointerEvents: 'none',
+                background: featuredFooterStripBackground,
+                filter: 'blur(7px)',
+                opacity: theme.palette.mode === 'dark' ? 0.1 : 0.07,
+                transition: `opacity ${FEATURED_STRIP_HOVER_TRANSITION}, filter ${FEATURED_STRIP_HOVER_TRANSITION}`,
+              },
+              '&::after': {
+                content: '""',
+                position: 'absolute',
+                inset: '0 10% 0 10%',
+                pointerEvents: 'none',
+                background: featuredFooterStripCoreGlow,
+                filter: 'blur(12px)',
+                opacity: theme.palette.mode === 'dark' ? 0.1 : 0.07,
+                transition: `opacity ${FEATURED_STRIP_HOVER_TRANSITION}, filter ${FEATURED_STRIP_HOVER_TRANSITION}, inset ${FEATURED_STRIP_HOVER_TRANSITION}`,
+              },
+              '&:hover, &:focus-visible': {
+                backgroundColor: 'transparent',
+                boxShadow:
+                  theme.palette.mode === 'dark'
+                    ? 'inset 0 1px 0 rgba(255,255,255,0.024), inset 0 -1px 0 rgba(132,175,240,0.04)'
+                    : 'inset 0 1px 0 rgba(255,255,255,0.028), inset 0 -1px 0 rgba(132,175,240,0.026)',
+                '&::before': {
+                  filter: 'blur(8px)',
+                  opacity: theme.palette.mode === 'dark' ? 1 : 0.9,
+                },
+                '&::after': {
+                  inset: '0 6% 0 6%',
+                  filter: 'blur(14px)',
+                  opacity: theme.palette.mode === 'dark' ? 1 : 0.96,
+                },
+                '& .featured-apps-strip-label': {
+                  color:
+                    theme.palette.mode === 'dark'
+                      ? theme.palette.common.white
+                      : theme.palette.text.primary,
+                  opacity: 1,
+                  textShadow:
+                    theme.palette.mode === 'dark'
+                      ? '0 0 12px rgba(132, 175, 240, 0.24), 0 0 22px rgba(132, 175, 240, 0.1)'
+                      : '0 0 12px rgba(132, 175, 240, 0.12)',
+                },
+                '& .featured-apps-strip-subtle': {
+                  color:
+                    theme.palette.mode === 'dark'
+                      ? alpha(theme.palette.common.white, 0.92)
+                      : theme.palette.text.primary,
+                  opacity: 1,
+                },
+                '& .explore-arrow': {
+                  transform: 'translateX(0)',
+                },
+                '&:hover .explore-arrow': {
+                  transform: 'translateX(7px)',
+                },
+              },
+            }}
+          >
+            <Typography
+              sx={{
+                alignItems: 'center',
+                color: 'inherit',
+                columnGap: '4px',
+                display: 'inline-flex',
+                fontSize: '0.851rem',
+                position: 'relative',
+                textAlign: 'center',
+                zIndex: 1,
+              }}
+            >
+              <Box
+                component="span"
+                className="featured-apps-strip-label"
+                sx={{
+                  color:
+                    theme.palette.mode === 'dark'
+                      ? alpha(theme.palette.common.white, 0.9)
+                      : theme.palette.text.primary,
+                  display: 'inline-flex',
+                  fontSize: 'inherit',
+                  fontWeight: 700,
+                  lineHeight: 1,
+                  opacity: theme.palette.mode === 'dark' ? 0.94 : 1,
+                  transition: `color ${FEATURED_STRIP_HOVER_TRANSITION}, text-shadow ${FEATURED_STRIP_HOVER_TRANSITION}, opacity ${FEATURED_STRIP_HOVER_TRANSITION}`,
+                }}
+              >
+                {td('explore_all_q_apps', 'Explore All Q-Apps')}
+              </Box>
+              <Box
+                component="span"
+                className="explore-arrow"
+                sx={{
+                  color:
+                    theme.palette.mode === 'dark'
+                      ? alpha(theme.palette.common.white, 0.9)
+                      : theme.palette.text.primary,
+                  display: 'inline-block',
+                  fontSize: 'inherit',
+                  fontWeight: 500,
+                  lineHeight: 1,
+                  transition:
+                    'transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1)',
+                }}
+              >
+                {' '}
+                →
+              </Box>
+            </Typography>
+          </ButtonBase>
+        </Box>
       </Box>
     </Box>
   );
@@ -64,14 +730,80 @@ export const HomeFeaturedApps = () => {
 
 interface AppTileProps {
   appName: string;
+  calmMode: boolean;
   theme: any;
+  expandedPreviewApp: PreviewAppName | null;
+  onPreviewExpandStart: (appName: PreviewAppName) => void;
+  onPreviewExpandEnd: () => void;
 }
 
-const AppTile = ({ appName, theme }: Omit<AppTileProps, 'label'>) => {
+const AppTile = ({
+  appName,
+  calmMode,
+  theme,
+  expandedPreviewApp,
+  onPreviewExpandStart,
+  onPreviewExpandEnd,
+}: AppTileProps) => {
   const baseAvatarUrl = `${getBaseApiReactForAvatar()}/arbitrary/THUMBNAIL/${appName}/qortal_avatar?async=true`;
   const [imageSrc, setImageSrc] = useState(baseAvatarUrl);
+  const [hasTileVideoError, setHasTileVideoError] = useState(false);
   const hasRetriedRef = useRef(false);
   const retryTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isPreviewableTile = appName in FEATURED_PREVIEW_CONFIG;
+  const isWideLeftTile = appName === Q_TUBE_APP_NAME;
+  const isWideRightTile = appName === SUBWIRE_APP_NAME;
+  const isWideTile = isWideLeftTile || isWideRightTile;
+  const tileVideoSrc =
+    appName in FEATURED_TILE_VIDEO_SRC
+      ? FEATURED_TILE_VIDEO_SRC[appName as keyof typeof FEATURED_TILE_VIDEO_SRC]
+      : null;
+  const fadeOutForPreview =
+    !calmMode && !!expandedPreviewApp && expandedPreviewApp !== appName;
+  const hideBasePreviewTile =
+    !calmMode && !!expandedPreviewApp && expandedPreviewApp === appName;
+  const allowTileHover = !expandedPreviewApp && !calmMode;
+  const hiddenTileStyles = {
+    opacity: fadeOutForPreview ? 0 : hideBasePreviewTile ? 0 : 1,
+    pointerEvents: fadeOutForPreview || hideBasePreviewTile ? 'none' : 'auto',
+    visibility: fadeOutForPreview || hideBasePreviewTile ? 'hidden' : 'visible',
+  } as const;
+  const staticWideTileBackground =
+    theme.palette.mode === 'dark'
+      ? isWideLeftTile
+        ? `radial-gradient(88% 122% at 18% 54%, ${alpha('#BCA2FF', 0.14)} 0%, ${alpha(
+            '#BCA2FF',
+            0.06
+          )} 26%, transparent 58%), radial-gradient(78% 112% at 82% 50%, ${alpha(
+            '#F2E7DA',
+            0.12
+          )} 0%, ${alpha('#F2E7DA', 0.045)} 24%, transparent 50%), linear-gradient(145deg, rgba(54,58,68,0.9) 0%, rgba(40,44,52,0.95) 48%, rgba(28,31,38,0.98) 100%)`
+        : `radial-gradient(92% 128% at 18% 52%, ${alpha('#7DB5FF', 0.2)} 0%, ${alpha(
+            '#7DB5FF',
+            0.08
+          )} 28%, transparent 60%), radial-gradient(78% 108% at 84% 46%, ${alpha(
+            '#F2E7DA',
+            0.11
+          )} 0%, ${alpha('#F2E7DA', 0.04)} 24%, transparent 52%), linear-gradient(145deg, rgba(54,58,68,0.9) 0%, rgba(40,44,52,0.95) 48%, rgba(28,31,38,0.98) 100%)`
+      : isWideLeftTile
+        ? `radial-gradient(88% 122% at 18% 54%, ${alpha('#BCA2FF', 0.12)} 0%, ${alpha(
+            '#BCA2FF',
+            0.05
+          )} 26%, transparent 58%), radial-gradient(78% 112% at 82% 50%, ${alpha(
+            '#F2E7DA',
+            0.09
+          )} 0%, ${alpha('#F2E7DA', 0.036)} 24%, transparent 50%), linear-gradient(145deg, rgba(246,248,252,0.98) 0%, rgba(235,240,247,0.99) 48%, rgba(224,230,239,1) 100%)`
+        : `radial-gradient(92% 128% at 18% 52%, ${alpha('#7DB5FF', 0.16)} 0%, ${alpha(
+            '#7DB5FF',
+            0.06
+          )} 28%, transparent 60%), radial-gradient(78% 108% at 84% 46%, ${alpha(
+            '#F2E7DA',
+            0.085
+          )} 0%, ${alpha('#F2E7DA', 0.034)} 24%, transparent 52%), linear-gradient(145deg, rgba(246,248,252,0.98) 0%, rgba(235,240,247,0.99) 48%, rgba(224,230,239,1) 100%)`;
+
+  useEffect(() => {
+    setHasTileVideoError(false);
+  }, [tileVideoSrc]);
 
   useEffect(() => {
     return () => {
@@ -81,7 +813,6 @@ const AppTile = ({ appName, theme }: Omit<AppTileProps, 'label'>) => {
 
   const handleImageError = () => {
     if (hasRetriedRef.current) return;
-    console.log('handleImageError', appName);
     hasRetriedRef.current = true;
     retryTimeoutRef.current = setTimeout(() => {
       retryTimeoutRef.current = null;
@@ -89,45 +820,599 @@ const AppTile = ({ appName, theme }: Omit<AppTileProps, 'label'>) => {
     }, RETRY_DELAY_MS);
   };
 
-  return (
+  const tileButton = (
     <ButtonBase
+      disableRipple
       onClick={() => openApp(appName)}
+      onMouseEnter={
+        isPreviewableTile && !calmMode
+          ? () => onPreviewExpandStart(appName as PreviewAppName)
+          : undefined
+      }
+      onMouseLeave={
+        isPreviewableTile && !calmMode ? onPreviewExpandEnd : undefined
+      }
       sx={{
-        alignItems: 'center',
-        bgcolor: theme.palette.background.default,
+        alignItems: isWideLeftTile
+          ? 'flex-start'
+          : isWideRightTile
+            ? 'flex-end'
+            : 'center',
+        bgcolor:
+          theme.palette.mode === 'dark'
+            ? '#181a20'
+            : theme.palette.background.surface,
+        border: `1px solid ${theme.palette.border.subtle}`,
         borderRadius: '10px',
         display: 'flex',
         flexDirection: 'column',
-        flexShrink: 0,
         gap: '8px',
-        padding: '14px 10px',
-        width: '120px',
-        '&:hover': { bgcolor: theme.palette.action.hover },
+        justifyContent: 'center',
+        height: '100%',
+        minHeight: 0,
+        padding: '12px 10px',
+        transition:
+          'background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, opacity 160ms ease',
+        overflow: 'hidden',
+        position: 'relative',
+        width: '100%',
+        gridColumn: isWideTile ? 'span 2' : 'span 1',
+        ...(!isWideTile ? hiddenTileStyles : null),
+        transform: 'translateY(0)',
+        boxShadow:
+          theme.palette.mode === 'dark'
+            ? 'inset 0 1px 0 rgba(255,255,255,0.035), inset 0 -10px 18px rgba(0,0,0,0.22)'
+            : 'inset 0 1px 0 rgba(255,255,255,0.72), inset 0 -8px 14px rgba(15,23,42,0.06)',
+        '&:hover': {
+          bgcolor:
+            theme.palette.mode === 'dark'
+              ? '#181a20'
+              : theme.palette.background.paper,
+          borderColor: theme.palette.border.main,
+          boxShadow:
+            theme.palette.mode === 'dark'
+              ? 'inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -10px 18px rgba(0,0,0,0.24), 0 8px 18px rgba(0,0,0,0.1)'
+              : 'inset 0 1px 0 rgba(255,255,255,0.76), inset 0 -8px 14px rgba(15,23,42,0.07), 0 8px 18px rgba(15,23,42,0.08)',
+          ...(allowTileHover ? { transform: 'translateY(-1px)' } : null),
+        },
+        '&:active': {
+          boxShadow:
+            theme.palette.mode === 'dark'
+              ? 'inset 0 1px 0 rgba(255,255,255,0.03), inset 0 -8px 14px rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.1)'
+              : 'inset 0 1px 0 rgba(255,255,255,0.68), inset 0 -8px 14px rgba(15,23,42,0.06), 0 2px 8px rgba(15,23,42,0.07)',
+          ...(allowTileHover ? { transform: 'translateY(0)' } : null),
+        },
+        '&:focus-visible': {
+          backgroundColor: theme.palette.background.surface,
+          borderColor: theme.palette.border.main,
+          boxShadow: `inset 0 0 0 1px ${theme.palette.primary.main}`,
+        },
       }}
     >
-      <Avatar
-        src={imageSrc}
-        variant="rounded"
-        onError={handleImageError}
-        sx={{ height: 52, width: 52 }}
+      {isWideTile ? (
+        <Box
+          aria-hidden="true"
+          sx={{
+            inset: 0,
+            overflow: 'hidden',
+            pointerEvents: 'none',
+            position: 'absolute',
+            zIndex: 0,
+            background: staticWideTileBackground,
+          }}
+        />
+      ) : null}
+      {tileVideoSrc && !hasTileVideoError && !calmMode ? (
+        <Box
+          aria-hidden="true"
+          sx={{
+            inset: 0,
+            overflow: 'hidden',
+            pointerEvents: 'none',
+            position: 'absolute',
+            zIndex: 0,
+          }}
+        >
+          <Box
+            component="video"
+            autoPlay
+            muted
+            loop
+            playsInline
+            preload="metadata"
+            onError={() => setHasTileVideoError(true)}
+            sx={{
+              height: '100%',
+              inset: 0,
+              objectFit: 'cover',
+              objectPosition: 'center center',
+              opacity: theme.palette.mode === 'dark' ? 0.88 : 0.8,
+              pointerEvents: 'none',
+              position: 'absolute',
+              transform: 'scale(1.18)',
+              width: '100%',
+              filter:
+                theme.palette.mode === 'dark'
+                  ? 'blur(10px) saturate(0.9)'
+                  : 'blur(9px) saturate(0.86)',
+            }}
+          >
+            <source src={tileVideoSrc} type="video/mp4" />
+          </Box>
+        </Box>
+      ) : null}
+      <Box
+        sx={{
+          alignItems: 'center',
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '8px',
+          position: 'relative',
+          width: isWideTile ? 'clamp(72px, 32%, 104px)' : '100%',
+          flexShrink: isWideTile ? 0 : undefined,
+          alignSelf: isWideRightTile ? 'flex-end' : 'auto',
+          zIndex: 1,
+        }}
       >
-        {appName.charAt(0)}
-      </Avatar>
+        <Avatar
+          src={imageSrc}
+          variant="rounded"
+          onError={handleImageError}
+          sx={{ height: 52, width: 52 }}
+        >
+          {appName.charAt(0)}
+        </Avatar>
+
+        <Typography
+          sx={{
+            color: theme.palette.text.primary,
+            fontSize: '0.8rem',
+            fontWeight: 600,
+            maxWidth: '100px',
+            overflow: 'hidden',
+            textAlign: 'center',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {appName}
+        </Typography>
+      </Box>
+      {isWideLeftTile ? (
+        <Box
+          aria-hidden="true"
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            inset: '0 16px 0 124px',
+            justifyContent: 'center',
+            pointerEvents: 'none',
+            position: 'absolute',
+            transform: 'translateX(-20px)',
+            zIndex: 1,
+          }}
+        >
+          <Box
+            sx={{
+              alignItems: 'stretch',
+              display: 'inline-flex',
+              gap: '6px',
+            }}
+          >
+            <Box
+              sx={{
+                bgcolor:
+                  theme.palette.mode === 'dark'
+                    ? 'rgba(239,243,250,0.72)'
+                    : 'rgba(20,28,40,0.66)',
+                borderRadius: '999px',
+                flexShrink: 0,
+                width: '3px',
+              }}
+            />
+            <Typography
+              component="div"
+              sx={{
+                color:
+                  theme.palette.mode === 'dark'
+                    ? 'rgba(239,243,250,0.9)'
+                    : 'rgba(20,28,40,0.84)',
+                display: 'inline-flex',
+                flexDirection: 'column',
+                fontSize: '0.8rem',
+                fontWeight: 800,
+                letterSpacing: '0.004em',
+                lineHeight: 0.98,
+                textAlign: 'left',
+                textShadow:
+                  theme.palette.mode === 'dark'
+                    ? '0 1px 10px rgba(0,0,0,0.28)'
+                    : '0 1px 6px rgba(255,255,255,0.16)',
+              }}
+            >
+              <Box component="span" sx={{ display: 'block' }}>
+                decentralized.
+              </Box>
+              <Box component="span" sx={{ display: 'block' }}>
+                cat. videos.
+              </Box>
+              <Box component="span" sx={{ display: 'block' }}>
+                platform.
+              </Box>
+            </Typography>
+          </Box>
+        </Box>
+      ) : null}
+      {isWideRightTile ? (
+        <Box
+          aria-hidden="true"
+          sx={{
+            alignItems: 'center',
+            bottom: 0,
+            display: 'flex',
+            justifyContent: 'center',
+            left: 'clamp(8px, 2.5%, 16px)',
+            pointerEvents: 'none',
+            position: 'absolute',
+            right: 'clamp(76px, 38%, 132px)',
+            top: 0,
+            zIndex: 1,
+          }}
+        >
+          <Box
+            sx={{
+              alignItems: 'stretch',
+              display: 'inline-flex',
+              gap: '6px',
+            }}
+          >
+            <Box
+              sx={{
+                bgcolor:
+                  theme.palette.mode === 'dark'
+                    ? 'rgba(239,243,250,0.72)'
+                    : 'rgba(20,28,40,0.66)',
+                borderRadius: '999px',
+                flexShrink: 0,
+                width: '3px',
+              }}
+            />
+            <Typography
+              component="div"
+              sx={{
+                color:
+                  theme.palette.mode === 'dark'
+                    ? 'rgba(239,243,250,0.9)'
+                    : 'rgba(20,28,40,0.84)',
+                display: 'inline-flex',
+                flexDirection: 'column',
+                fontSize: '0.8rem',
+                fontWeight: 800,
+                letterSpacing: '0.004em',
+                lineHeight: 0.98,
+                textAlign: 'left',
+                textShadow:
+                  theme.palette.mode === 'dark'
+                    ? '0 1px 10px rgba(0,0,0,0.28)'
+                    : '0 1px 6px rgba(255,255,255,0.16)',
+              }}
+            >
+              <Box component="span" sx={{ display: 'block' }}>
+                write.
+              </Box>
+              <Box component="span" sx={{ display: 'block' }}>
+                own.
+              </Box>
+              <Box component="span" sx={{ display: 'block' }}>
+                earn.
+              </Box>
+            </Typography>
+          </Box>
+        </Box>
+      ) : null}
+    </ButtonBase>
+  );
+
+  if (!isWideTile) {
+    return tileButton;
+  }
+
+  if (calmMode) {
+    return tileButton;
+  }
+
+  return (
+    <BorderGlow
+      alwaysOn
+      animated={false}
+      foregroundGlow
+      interactive={false}
+      reverseSweep={isWideRightTile}
+      edgeSensitivity={30}
+      glowColor="40 80 80"
+      backgroundColor="transparent"
+      borderRadius={10}
+      glowRadius={40}
+      glowIntensity={0.5}
+      coneSpread={25}
+      colors={['#c084fc', '#f472b6', '#38bdf8']}
+      style={
+        {
+          '--card-border': 'transparent',
+          '--card-shadow': 'none',
+          borderRadius: '10px',
+          gridColumn: 'span 2',
+          height: '100%',
+          minHeight: 0,
+          transition: 'opacity 160ms ease',
+          width: '100%',
+          ...hiddenTileStyles,
+        } as CSSProperties
+      }
+    >
+      {tileButton}
+    </BorderGlow>
+  );
+};
 
-      <Typography
+const FeaturedExpandedPreview = ({
+  appName,
+  theme,
+  visible,
+  teaserMode,
+  onMouseEnter,
+  onMouseLeave,
+}: {
+  appName: PreviewAppName | null;
+  theme: any;
+  visible: boolean;
+  teaserMode: boolean;
+  onMouseEnter: () => void;
+  onMouseLeave: () => void;
+}) => {
+  const lastResolvedAppRef = useRef<PreviewAppName>(SUBWIRE_APP_NAME);
+  if (appName) {
+    lastResolvedAppRef.current = appName;
+  }
+  const resolvedAppName = appName ?? lastResolvedAppRef.current;
+  const previewConfig = FEATURED_PREVIEW_CONFIG[resolvedAppName];
+  const [hasVideoError, setHasVideoError] = useState(false);
+  const alignRight = previewConfig.align === 'right';
+
+  useEffect(() => {
+    setHasVideoError(false);
+  }, [resolvedAppName]);
+
+  return (
+    <Box
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      sx={{
+        position: 'absolute',
+        inset: 0,
+        zIndex: 3,
+        borderRadius: '12px',
+        background:
+          theme.palette.mode === 'dark'
+            ? 'linear-gradient(180deg, rgba(14,16,22,0.96) 0%, rgba(20,23,30,0.98) 100%)'
+            : 'linear-gradient(180deg, rgba(243,238,230,0.96) 0%, rgba(236,228,217,0.98) 100%)',
+        border: `1px solid ${theme.palette.border.main}`,
+        boxShadow:
+          theme.palette.mode === 'dark'
+            ? '0 18px 34px rgba(0,0,0,0.24)'
+            : '0 14px 28px rgba(28,36,52,0.1)',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        overflow: 'hidden',
+        opacity: visible ? 1 : 0,
+        pointerEvents: visible ? 'auto' : 'none',
+        transform: visible
+          ? 'translateY(0) scale(1)'
+          : teaserMode
+            ? 'translateY(4px) scale(0.992)'
+            : 'translateY(8px) scale(0.985)',
+        transition: `opacity ${teaserMode ? FEATURED_TEASER_FADE_DURATION_MS : 220}ms ease, transform ${teaserMode ? FEATURED_TEASER_FADE_DURATION_MS : 220}ms ease`,
+      }}
+    >
+      {!hasVideoError ? (
+        <Box
+          key={previewConfig.videoSrc}
+          component="video"
+          autoPlay
+          muted
+          loop
+          playsInline
+          preload="metadata"
+          onError={() => setHasVideoError(true)}
+          sx={{
+            height: '100%',
+            inset: 0,
+            objectFit: 'cover',
+            objectPosition: previewConfig.videoPosition,
+            opacity: teaserMode ? 0.78 : 0.94,
+            pointerEvents: 'none',
+            position: 'absolute',
+            transform: 'scale(1.03)',
+            transition: `opacity ${FEATURED_TEASER_FADE_DURATION_MS}ms ease`,
+            width: '100%',
+            filter:
+              theme.palette.mode === 'dark'
+                ? 'saturate(0.9) brightness(0.7)'
+                : 'saturate(0.84) brightness(0.94)',
+          }}
+        >
+          <source src={previewConfig.videoSrc} type="video/mp4" />
+        </Box>
+      ) : null}
+      <Box
+        aria-hidden="true"
         sx={{
-          color: theme.palette.text.primary,
-          fontSize: '0.8rem',
-          fontWeight: 600,
-          maxWidth: '100px',
-          overflow: 'hidden',
-          textAlign: 'center',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
+          position: 'absolute',
+          inset: 0,
+          background:
+            theme.palette.mode === 'dark'
+              ? `linear-gradient(180deg, rgba(7,9,13,0.12) 0%, rgba(7,9,13,0.38) 40%, rgba(7,9,13,0.84) 100%), linear-gradient(${alignRight ? '270deg' : '90deg'}, rgba(7,9,13,0.82) 0%, rgba(7,9,13,0.32) 42%, rgba(7,9,13,0.06) 100%)`
+              : `linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(24,29,36,0.12) 40%, rgba(24,29,36,0.36) 100%), linear-gradient(${alignRight ? '270deg' : '90deg'}, rgba(24,29,36,0.54) 0%, rgba(24,29,36,0.2) 38%, rgba(24,29,36,0.04) 100%)`,
+        }}
+      />
+      <Box
+        aria-hidden="true"
+        sx={{
+          position: 'absolute',
+          top: '-10%',
+          [alignRight ? 'right' : 'left']: '-6%',
+          width: '38%',
+          height: '138%',
+          background: `radial-gradient(circle at center, ${alpha(
+            previewConfig.accent,
+            theme.palette.mode === 'dark' ? 0.28 : 0.18
+          )} 0%, ${alpha(previewConfig.accent, 0.06)} 46%, transparent 76%)`,
+          filter: 'blur(30px)',
+          pointerEvents: 'none',
+        }}
+      />
+      <Box
+        aria-hidden="true"
+        sx={{
+          position: 'absolute',
+          inset: 'auto 0 78px 0',
+          display: 'flex',
+          justifyContent: 'center',
+          pointerEvents: 'none',
         }}
       >
-        {appName}
-      </Typography>
-    </ButtonBase>
+        <Box
+          sx={{
+            width: '64%',
+            height: '1px',
+            background: `linear-gradient(90deg, transparent 0%, ${alpha(
+              previewConfig.accent,
+              0.12
+            )} 20%, ${alpha(previewConfig.accent, 0.44)} 50%, ${alpha(
+              previewConfig.accent,
+              0.12
+            )} 80%, transparent 100%)`,
+          }}
+        />
+      </Box>
+      <Box
+        sx={{
+          position: 'relative',
+          zIndex: 1,
+          display: 'flex',
+          alignItems: 'stretch',
+          justifyContent: alignRight ? 'flex-end' : 'flex-start',
+          height: '100%',
+          p: '24px',
+        }}
+      >
+        <Box
+          sx={{
+            alignItems: alignRight ? 'flex-end' : 'flex-start',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '12px',
+            justifyContent: 'flex-end',
+            maxWidth: 'min(54%, 420px)',
+            textAlign: alignRight ? 'right' : 'left',
+          }}
+        >
+          <Box
+            sx={{
+              alignItems: 'center',
+              backdropFilter: 'blur(8px)',
+              WebkitBackdropFilter: 'blur(8px)',
+              backgroundColor:
+                theme.palette.mode === 'dark'
+                  ? 'rgba(16,18,24,0.34)'
+                  : 'rgba(252,248,241,0.34)',
+              border: `1px solid ${alpha(
+                theme.palette.mode === 'dark'
+                  ? '#ffffff'
+                  : theme.palette.text.primary,
+                0.08
+              )}`,
+              borderRadius: '999px',
+              color: alpha(theme.palette.text.secondary, 0.92),
+              display: 'inline-flex',
+              fontSize: '0.64rem',
+              fontWeight: 700,
+              letterSpacing: '0.09em',
+              lineHeight: 1,
+              px: '9px',
+              py: '5px',
+              textTransform: 'uppercase',
+            }}
+          >
+            {previewConfig.eyebrow}
+          </Box>
+          <Typography
+            sx={{
+              color: alpha(theme.palette.common.white, 0.97),
+              fontSize: '1.52rem',
+              fontWeight: 700,
+              letterSpacing: '-0.03em',
+              lineHeight: 0.98,
+              textShadow: '0 2px 20px rgba(0,0,0,0.28)',
+            }}
+          >
+            {previewConfig.title}
+          </Typography>
+          <Typography
+            sx={{
+              color:
+                theme.palette.mode === 'dark'
+                  ? 'rgba(232,236,244,0.84)'
+                  : 'rgba(245,247,250,0.86)',
+              fontSize: '0.95rem',
+              lineHeight: 1.55,
+              maxWidth: '44ch',
+              textShadow: '0 2px 14px rgba(0,0,0,0.22)',
+            }}
+          >
+            {previewConfig.subtitle}
+          </Typography>
+          <Button
+            onClick={() => openApp(resolvedAppName)}
+            variant="contained"
+            sx={{
+              ...getBlueTier1ButtonSx(),
+              borderRadius: '11px',
+              fontSize: '0.84rem',
+              fontWeight: 600,
+              minHeight: '42px',
+              minWidth: '138px',
+              px: 2.2,
+              py: 0.9,
+              textTransform: 'none',
+              '&:hover': {
+                ...getBlueTier1ButtonSx()['&:hover'],
+                transform: 'none',
+              },
+              '&:active': {
+                ...getBlueTier1ButtonSx()['&:active'],
+                transform: 'none',
+              },
+            }}
+          >
+            Open Q-App
+          </Button>
+        </Box>
+      </Box>
+      <Box
+        aria-hidden="true"
+        sx={{
+          position: 'absolute',
+          inset: 0,
+          borderRadius: 'inherit',
+          boxShadow:
+            theme.palette.mode === 'dark'
+              ? 'inset 0 0 0 1px rgba(255,255,255,0.04), inset 0 -18px 26px rgba(0,0,0,0.2)'
+              : 'inset 0 0 0 1px rgba(24,29,36,0.06), inset 0 -14px 22px rgba(24,29,36,0.08)',
+          pointerEvents: 'none',
+        }}
+      />
+    </Box>
   );
 };
diff --git a/src/components/Group/HomeFeaturedGroups.tsx b/src/components/Group/HomeFeaturedGroups.tsx
deleted file mode 100644
index cb2e27a3..00000000
--- a/src/components/Group/HomeFeaturedGroups.tsx
+++ /dev/null
@@ -1,377 +0,0 @@
-import { useCallback, useContext, useState } from 'react';
-import {
-  Box,
-  Button,
-  IconButton,
-  Popover,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from '@mui/material';
-import { LoadingButton } from '@mui/lab';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import { useTranslation } from 'react-i18next';
-import { QORTAL_APP_CONTEXT } from '../../App';
-import { HomeGroupCard } from './HomeGroupCard';
-import { CustomizedSnackbars } from '../Snackbar/Snackbar';
-import { memberGroupsAtom, txListAtom } from '../../atoms/global';
-import { useAtomValue, useSetAtom } from 'jotai';
-import { executeEvent } from '../../utils/events';
-import { getFee } from '../../background/background.ts';
-import { featuredGroups, type FeaturedGroup } from '../../data/featuredGroups';
-
-interface HomeFeaturedGroupsProps {
-  getTimestampEnterChat: () => void;
-  setDesktopViewMode: (mode: string) => void;
-  setGroupSection: (section: string) => void;
-  setMobileViewMode: (mode: string) => void;
-  setSelectedGroup: (group: any) => void;
-}
-
-// Shape used for popover/join (compatible with FeaturedGroup + extra fields for API)
-interface FeaturedGroupFull extends FeaturedGroup {
-  groupId: number;
-  groupName: string;
-  participantCount?: number;
-  isOpen?: boolean;
-}
-
-function toFullGroup(g: FeaturedGroup): FeaturedGroupFull {
-  return {
-    ...g,
-    groupId: g.id,
-    groupName: g.name,
-    isOpen: true,
-  };
-}
-
-export const HomeFeaturedGroups = ({
-  getTimestampEnterChat,
-  setDesktopViewMode,
-  setGroupSection,
-  setMobileViewMode,
-  setSelectedGroup,
-}: HomeFeaturedGroupsProps) => {
-  const { t } = useTranslation(['tutorial', 'core', 'group']);
-  const theme = useTheme();
-  const { show } = useContext(QORTAL_APP_CONTEXT);
-  const setTxList = useSetAtom(txListAtom);
-  const memberGroups = useAtomValue(memberGroupsAtom) ?? [];
-  const [startIndex, setStartIndex] = useState(0);
-  const [popoverAnchor, setPopoverAnchor] = useState<HTMLElement | null>(null);
-  const [selectedGroupForPopover, setSelectedGroupForPopover] = useState<FeaturedGroupFull | null>(null);
-  const [isLoadingJoinGroup, setIsLoadingJoinGroup] = useState(false);
-  const [openSnack, setOpenSnack] = useState(false);
-  const [infoSnack, setInfoSnack] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
-
-  const groups = featuredGroups;
-  const fullGroups = groups.map(toFullGroup);
-
-  const isXs = useMediaQuery(theme.breakpoints.down('sm'));
-  const isSm = useMediaQuery(theme.breakpoints.between('sm', 'md'));
-  const isMd = useMediaQuery(theme.breakpoints.between('md', 'lg'));
-  const visibleCount = isXs ? 2 : isSm ? 3 : isMd ? 4 : 5;
-
-  const visibleGroups = groups.slice(startIndex, startIndex + visibleCount);
-  const canGoBack = startIndex > 0;
-  const canGoForward = startIndex + visibleCount < groups.length;
-  const showArrows = groups.length > visibleCount;
-
-  const handlePrev = useCallback(() => {
-    setStartIndex((prev) => Math.max(0, prev - 1));
-  }, []);
-
-  const handleNext = useCallback(() => {
-    setStartIndex((prev) =>
-      Math.min(groups.length - visibleCount, prev + 1)
-    );
-  }, [groups.length, visibleCount]);
-
-  const handlePopoverClose = useCallback(() => {
-    setPopoverAnchor(null);
-    setSelectedGroupForPopover(null);
-  }, []);
-
-  const handleGroupClick = useCallback(
-    (group: FeaturedGroup, event: React.MouseEvent<HTMLElement>) => {
-      const full = fullGroups.find((ag) => ag.groupId === group.id);
-      if (!full) return;
-      const isMember = memberGroups.some(
-        (g: { groupId?: number }) => +g?.groupId === +full.groupId
-      );
-      if (isMember) {
-        executeEvent('openGroupMessage', { from: full.groupId });
-        return;
-      }
-      setPopoverAnchor(event.currentTarget as HTMLElement);
-      setSelectedGroupForPopover(full);
-    },
-    [fullGroups, memberGroups]
-  );
-
-  const handleJoinGroup = useCallback(
-    async (group: FeaturedGroupFull) => {
-      try {
-        const fee = await getFee('JOIN_GROUP');
-        await show({
-          message: t('core:message.question.perform_transaction', {
-            action: 'JOIN_GROUP',
-            postProcess: 'capitalizeFirstChar',
-          }),
-          publishFee: fee.fee + ' QORT',
-        });
-        setIsLoadingJoinGroup(true);
-        await new Promise((res, rej) => {
-          window
-            .sendMessage('joinGroup', { groupId: group.groupId })
-            .then((response) => {
-              if (!response?.error) {
-                setInfoSnack({
-                  type: 'success',
-                  message: t('group:message.success.group_join', { postProcess: 'capitalizeFirstChar' }),
-                });
-                if (group.isOpen) {
-                  setTxList((prev) => [
-                    {
-                      ...response,
-                      type: 'joined-group',
-                      label: t('group:message.success.group_join_label', {
-                        group_name: group.groupName,
-                        postProcess: 'capitalizeFirstChar',
-                      }),
-                      labelDone: t('group:message.success.group_join_label', {
-                        group_name: group.groupName,
-                        postProcess: 'capitalizeFirstChar',
-                      }),
-                      done: false,
-                      groupId: group.groupId,
-                    },
-                    ...prev,
-                  ]);
-                } else {
-                  setTxList((prev) => [
-                    {
-                      ...response,
-                      type: 'joined-group-request',
-                      label: t('group:message.success.group_join_request', {
-                        group_name: group.groupName,
-                        postProcess: 'capitalizeFirstChar',
-                      }),
-                      labelDone: t('group:message.success.group_join_outcome', {
-                        group_name: group.groupName,
-                        postProcess: 'capitalizeFirstChar',
-                      }),
-                      done: false,
-                      groupId: group.groupId,
-                    },
-                    ...prev,
-                  ]);
-                }
-                setOpenSnack(true);
-                handlePopoverClose();
-                res(response);
-                return;
-              }
-              setInfoSnack({ type: 'error', message: response?.error });
-              setOpenSnack(true);
-              rej(response.error);
-            })
-            .catch((error) => {
-              setInfoSnack({
-                type: 'error',
-                message: error?.message ?? t('core:message.error.generic', { postProcess: 'capitalizeFirstChar' }),
-              });
-              setOpenSnack(true);
-              rej(error);
-            });
-        });
-      } catch (e) {
-        console.error(e);
-      } finally {
-        setIsLoadingJoinGroup(false);
-      }
-    },
-    [show, t, setTxList, handlePopoverClose]
-  );
-
-  return (
-    <Box
-      sx={{
-        bgcolor: theme.palette.background.paper,
-        borderRadius: '12px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: '12px',
-        padding: '16px 20px',
-        width: '100%',
-      }}
-    >
-      <Typography
-        sx={{
-          color: theme.palette.text.primary,
-          fontSize: '1rem',
-          fontWeight: 600,
-        }}
-      >
-        {t('tutorial:home.featured_groups')}
-      </Typography>
-
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 1,
-          minHeight: 120,
-        }}
-      >
-        <IconButton
-          onClick={handlePrev}
-          size="small"
-          disabled={!canGoBack}
-          aria-label={t('tutorial:home.prev_groups', 'Previous groups')}
-          sx={{
-            visibility: showArrows ? 'visible' : 'hidden',
-            flexShrink: 0,
-            bgcolor: 'background.default',
-            border: `1px solid ${theme.palette.divider}`,
-            '&:hover': { bgcolor: 'action.hover' },
-            '&.Mui-disabled': { opacity: 0.4 },
-          }}
-        >
-          <ChevronLeftIcon />
-        </IconButton>
-
-        <Box
-          sx={{
-            display: 'flex',
-            gap: '12px',
-            justifyContent: 'center',
-            overflow: 'hidden',
-            flex: 1,
-            py: '4px',
-            minWidth: 0,
-          }}
-        >
-          {groups.length === 0 ? (
-            <Typography variant="body2" color="text.secondary">
-              {t('tutorial:home.loading', 'Loading…')}
-            </Typography>
-          ) : (
-            visibleGroups.map((group) => (
-              <HomeGroupCard
-                key={group.id}
-                group={group}
-                onClick={(e) => handleGroupClick(group, e)}
-              />
-            ))
-          )}
-        </Box>
-
-        <IconButton
-          onClick={handleNext}
-          size="small"
-          disabled={!canGoForward}
-          aria-label={t('tutorial:home.next_groups', 'Next groups')}
-          sx={{
-            visibility: showArrows ? 'visible' : 'hidden',
-            flexShrink: 0,
-            bgcolor: 'background.default',
-            border: `1px solid ${theme.palette.divider}`,
-            '&:hover': { bgcolor: 'action.hover' },
-            '&.Mui-disabled': { opacity: 0.4 },
-          }}
-        >
-          <ChevronRightIcon />
-        </IconButton>
-      </Box>
-
-      <Popover
-        open={Boolean(selectedGroupForPopover && popoverAnchor)}
-        anchorEl={popoverAnchor}
-        onClose={(reason) => {
-          if (reason === 'backdropClick') return;
-          handlePopoverClose();
-        }}
-        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-        transformOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-        slotProps={{
-          paper: {
-            sx: {
-              mt: 1,
-              borderRadius: '16px',
-              overflow: 'hidden',
-              boxShadow: '0 12px 40px rgba(0,0,0,0.28)',
-              border: `1px solid ${theme.palette.border?.subtle ?? 'rgba(255,255,255,0.08)'}`,
-            },
-          },
-        }}
-      >
-        {selectedGroupForPopover && (
-          <Box sx={{ width: 360, overflow: 'hidden' }}>
-            <Box
-              sx={{
-                px: 2.5,
-                pt: 2.5,
-                pb: 1.5,
-                bgcolor: theme.palette.background?.default ?? 'rgba(0,0,0,0.2)',
-                borderBottom: `1px solid ${theme.palette.border?.subtle ?? 'rgba(255,255,255,0.08)'}`,
-              }}
-            >
-              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.5 }}>
-                {t('group:group.name', { postProcess: 'capitalizeFirstChar' })}
-              </Typography>
-              <Typography variant="h6" fontWeight={700} sx={{ lineHeight: 1.3 }}>
-                {selectedGroupForPopover.groupName}
-              </Typography>
-              <Typography variant="body2" color="text.secondary" sx={{ mt: 0.75 }}>
-                {t('group:group.member_number', { postProcess: 'capitalizeFirstChar' })}: {selectedGroupForPopover.participantCount ?? 0}
-              </Typography>
-            </Box>
-            <Box sx={{ px: 2.5, py: 2 }}>
-              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mb: 0.75, fontWeight: 600 }}>
-                {t('group:group.description', { postProcess: 'capitalizeFirstChar', defaultValue: 'Description' })}
-              </Typography>
-              <Typography
-                variant="body2"
-                sx={{
-                  color: theme.palette.text.secondary,
-                  lineHeight: 1.5,
-                  minHeight: '2.5em',
-                  display: '-webkit-box',
-                  WebkitLineClamp: 4,
-                  WebkitBoxOrient: 'vertical',
-                  overflow: 'hidden',
-                }}
-              >
-                {selectedGroupForPopover.description ||
-                  t('group:message.generic.no_description', { postProcess: 'capitalizeFirstChar', defaultValue: 'No description' })}
-              </Typography>
-              {selectedGroupForPopover.isOpen === false && (
-                <Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 1 }}>
-                  {t('group:message.generic.closed_group', { postProcess: 'capitalizeFirstChar' })}
-                </Typography>
-              )}
-            </Box>
-            <Box sx={{ px: 2.5, pb: 2.5, pt: 0, display: 'flex', gap: 1.5, justifyContent: 'flex-end' }}>
-              <Button variant="outlined" onClick={handlePopoverClose} sx={{ textTransform: 'none', fontWeight: 600 }}>
-                {t('core:action.close', { postProcess: 'capitalizeFirstChar' })}
-              </Button>
-              <LoadingButton
-                loading={isLoadingJoinGroup}
-                loadingPosition="start"
-                variant="contained"
-                onClick={() => handleJoinGroup(selectedGroupForPopover)}
-                sx={{ textTransform: 'none', fontWeight: 600 }}
-              >
-                {t('core:action.join', { postProcess: 'capitalizeFirstChar' })}
-              </LoadingButton>
-            </Box>
-          </Box>
-        )}
-      </Popover>
-
-      <CustomizedSnackbars open={openSnack} setOpen={setOpenSnack} info={infoSnack} setInfo={setInfoSnack} />
-    </Box>
-  );
-};
diff --git a/src/components/Group/HomeGettingStarted.tsx b/src/components/Group/HomeGettingStarted.tsx
deleted file mode 100644
index f6d83508..00000000
--- a/src/components/Group/HomeGettingStarted.tsx
+++ /dev/null
@@ -1,533 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-  Box,
-  Button,
-  CircularProgress,
-  Dialog,
-  DialogContent,
-  DialogTitle,
-  IconButton,
-  Typography,
-  useTheme,
-} from '@mui/material';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import CloseIcon from '@mui/icons-material/Close';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import ShoppingBagIcon from '@mui/icons-material/ShoppingBag';
-import SupportAgentIcon from '@mui/icons-material/SupportAgent';
-import SchoolIcon from '@mui/icons-material/School';
-import { useAtomValue } from 'jotai';
-import { useTranslation } from 'react-i18next';
-import { userInfoAtom, balanceAtom, txListAtom } from '../../atoms/global';
-import {
-  executeEvent,
-  subscribeToEvent,
-  unsubscribeFromEvent,
-} from '../../utils/events';
-import { getBaseApiReact, getArbitraryEndpointReact } from '../../App';
-
-export const GETTING_STARTED_LS_KEY = 'getting_started_status';
-const LS_KEY = GETTING_STARTED_LS_KEY;
-const ONBOARDING_URL = 'https://qortal.dev/onboarding';
-const SUPPORT_CHAT_URL = 'https://link.qortal.dev/support';
-const AVATAR_SERVICE = 'THUMBNAIL';
-const AVATAR_IDENTIFIER = 'qortal_avatar';
-const MIN_BALANCE_FOR_QORTS = 6;
-
-/** Fallback: payments to this address (to user) count toward "6 QORT" step when balance < 6 and not in localStorage completed */
-
-export type HomeGettingStartedProps = {
-  onGettingStartedComplete?: () => void;
-};
-
-export const HomeGettingStarted = ({
-  onGettingStartedComplete,
-}: HomeGettingStartedProps = {}) => {
-  const { t } = useTranslation(['tutorial']);
-  const theme = useTheme();
-  const userInfo = useAtomValue(userInfoAtom);
-  const balance = useAtomValue(balanceAtom);
-  const txList = useAtomValue(txListAtom);
-
-  const [hasAvatar, setHasAvatar] = useState(false);
-  const [checkingAvatar, setCheckingAvatar] = useState(false);
-  const [openQortsDialog, setOpenQortsDialog] = useState(false);
-  const [dismissed, setDismissed] = useState<boolean | null>(null);
-  /** Fallback: cumulative QORT from payments endpoint when balance < 6 and not completed in localStorage */
-  const [paymentsFallbackTotal, setPaymentsFallbackTotal] = useState<
-    number | null
-  >(null);
-
-  const name = userInfo?.name;
-  const userAddress = userInfo?.address;
-
-  // When we have an address, sync dismissed from per-account localStorage. null = unknown (behaves like dismissed).
-  useEffect(() => {
-    if (userAddress == null) {
-      setDismissed(null);
-      return;
-    }
-    setDismissed(
-      localStorage.getItem(`${LS_KEY}_${userAddress}`) === 'completed'
-    );
-  }, [userAddress]);
-
-  // Step completion flags: balance >= 6 OR (fallback) cumulative payments to user's address >= 6
-  const hasQorts =
-    (balance != null && Number(balance) >= MIN_BALANCE_FOR_QORTS) ||
-    (paymentsFallbackTotal != null &&
-      paymentsFallbackTotal >= MIN_BALANCE_FOR_QORTS);
-  const hasName = Boolean(name);
-
-  // Pending register-name tx (same as TaskManager): show "Confirming transaction" on step 2
-  const hasPendingRegisterName =
-    (txList?.some((tx) => tx?.type === 'register-name' && !tx?.done) ??
-      false) &&
-    !hasName;
-
-  // Fallback for "6 QORT" step: when balance < 6 and not completed in localStorage, check payments to user's address
-  useEffect(() => {
-    if (dismissed !== false || !userAddress) return;
-    const balanceNum = balance != null ? Number(balance) : null;
-    if (balanceNum != null && balanceNum >= MIN_BALANCE_FOR_QORTS) return;
-
-    const url = `${getBaseApiReact()}/transactions/payments/between?recipientAddress=${encodeURIComponent(userAddress)}&confirmationStatus=CONFIRMED&limit=20`;
-    let cancelled = false;
-    fetch(url)
-      .then((res) => res.json())
-      .then((data: Array<{ amount?: string }>) => {
-        if (cancelled || !Array.isArray(data)) return;
-        const total = data.reduce(
-          (sum, tx) => sum + (parseFloat(tx?.amount ?? '0') || 0),
-          0
-        );
-        if (!cancelled) setPaymentsFallbackTotal(total);
-      })
-      .catch(() => {
-        if (!cancelled) setPaymentsFallbackTotal(0);
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [balance, dismissed, userAddress]);
-
-  // Check avatar existence via API (same approach as MainAvatar)
-  const checkAvatar = useCallback(async () => {
-    if (!name) return;
-    try {
-      setCheckingAvatar(true);
-      const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${AVATAR_SERVICE}&identifier=${AVATAR_IDENTIFIER}&limit=1&name=${name}&includemetadata=false&prefix=true`;
-      const res = await fetch(url);
-      const data = await res.json();
-      setHasAvatar(Array.isArray(data) && data.length > 0);
-    } catch {
-      // leave hasAvatar as false
-    } finally {
-      setCheckingAvatar(false);
-    }
-  }, [name]);
-
-  useEffect(() => {
-    checkAvatar();
-  }, [checkAvatar]);
-
-  // When avatar is published, mark step done right away (re-check via API in background)
-  useEffect(() => {
-    const onUploaded = () => {
-      setHasAvatar(true);
-      checkAvatar();
-    };
-    subscribeToEvent('avatarUploaded', onUploaded);
-    return () => unsubscribeFromEvent('avatarUploaded', onUploaded);
-  }, [checkAvatar]);
-
-  // Once all steps are complete, persist and hide the section (per-account)
-  useEffect(() => {
-    if (
-      !checkingAvatar &&
-      hasQorts &&
-      hasName &&
-      hasAvatar &&
-      dismissed === false &&
-      userAddress
-    ) {
-      localStorage.setItem(`${LS_KEY}_${userAddress}`, 'completed');
-      setDismissed(true);
-      onGettingStartedComplete?.();
-    }
-  }, [
-    checkingAvatar,
-    hasQorts,
-    hasName,
-    hasAvatar,
-    dismissed,
-    userAddress,
-    onGettingStartedComplete,
-  ]);
-
-  const steps = useMemo(
-    () => [
-      {
-        key: 'get_six_qorts',
-        label: t('tutorial:home.get_six_qorts'),
-        done: hasQorts,
-        onAction: () => setOpenQortsDialog(true),
-      },
-      {
-        key: 'register_name',
-        label: hasPendingRegisterName
-          ? t('tutorial:home.confirming_transaction')
-          : t('tutorial:home.register_name'),
-        done: hasName,
-        loading: hasPendingRegisterName,
-        onAction: () => executeEvent('openRegisterName', {}),
-      },
-      {
-        key: 'load_avatar',
-        label: t('tutorial:home.load_avatar'),
-        done: hasAvatar,
-        loading: checkingAvatar,
-        onAction: () => executeEvent('openAvatarUpload', {}),
-      },
-    ],
-    [t, hasQorts, hasName, hasAvatar, checkingAvatar, hasPendingRegisterName]
-  );
-
-  const completedCount = useMemo(
-    () => steps.filter((s) => s.done).length,
-    [steps]
-  );
-
-  // Hidden once the user has completed all steps (persisted across sessions)
-  if (dismissed !== false) return null;
-
-  return (
-    <>
-      <Box
-        sx={{
-          bgcolor: theme.palette.background.paper,
-          borderRadius: '12px',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '8px',
-          padding: '16px 20px',
-          width: '100%',
-        }}
-      >
-        {/* Header */}
-        <Box
-          sx={{
-            alignItems: 'center',
-            display: 'flex',
-            justifyContent: 'space-between',
-            mb: '8px',
-          }}
-        >
-          <Typography
-            sx={{
-              color: theme.palette.text.primary,
-              fontSize: '1rem',
-              fontWeight: 600,
-            }}
-          >
-            {t('tutorial:home.getting_started')}
-          </Typography>
-          <Typography
-            sx={{ color: theme.palette.text.secondary, fontSize: '0.82rem' }}
-          >
-            {t('tutorial:home.progress', {
-              completed: completedCount,
-              total: steps.length,
-            })}
-          </Typography>
-        </Box>
-
-        {/* Steps */}
-        {steps.map((step, index) => (
-          <Box
-            key={step.key}
-            sx={{
-              alignItems: 'center',
-              bgcolor: theme.palette.background.default,
-              borderRadius: '8px',
-              display: 'flex',
-              gap: '12px',
-              justifyContent: 'space-between',
-              padding: '10px 14px',
-            }}
-          >
-            {/* Step number or check */}
-            <Box
-              sx={{
-                alignItems: 'center',
-                color: step.done
-                  ? theme.palette.success.main
-                  : theme.palette.text.secondary,
-                display: 'flex',
-                flexShrink: 0,
-              }}
-            >
-              {step.done ? (
-                <CheckCircleIcon sx={{ fontSize: '1.2rem' }} />
-              ) : (
-                <Typography
-                  sx={{
-                    border: `1px solid ${theme.palette.text.secondary}`,
-                    borderRadius: '50%',
-                    fontSize: '0.72rem',
-                    fontWeight: 700,
-                    height: '20px',
-                    lineHeight: '20px',
-                    textAlign: 'center',
-                    width: '20px',
-                  }}
-                >
-                  {index + 1}
-                </Typography>
-              )}
-            </Box>
-
-            {/* Label */}
-            <Typography
-              sx={{
-                color: step.done
-                  ? theme.palette.text.secondary
-                  : theme.palette.text.primary,
-                flex: 1,
-                fontSize: '0.9rem',
-                opacity: step.done ? 0.7 : 1,
-              }}
-            >
-              {step.label}
-            </Typography>
-
-            {/* Action button */}
-            {step.loading ? (
-              <CircularProgress size={20} />
-            ) : (
-              <Button
-                disabled={step.done}
-                onClick={step.onAction}
-                size="small"
-                variant={step.done ? 'text' : 'outlined'}
-                sx={{
-                  flexShrink: 0,
-                  fontSize: '0.78rem',
-                  minWidth: '60px',
-                  opacity: step.done ? 0.5 : 1,
-                }}
-              >
-                {step.done ? t('tutorial:home.done') : t('tutorial:home.open')}
-              </Button>
-            )}
-          </Box>
-        ))}
-      </Box>
-
-      {/* Get QORT dialog */}
-      <Dialog
-        open={openQortsDialog}
-        onClose={() => setOpenQortsDialog(false)}
-        maxWidth="sm"
-        fullWidth
-        slotProps={{
-          paper: {
-            sx: {
-              borderRadius: '16px',
-              overflow: 'hidden',
-              boxShadow: theme.shadows[12],
-              border: `1px solid ${theme.palette.border?.subtle ?? 'rgba(255,255,255,0.08)'}`,
-            },
-          },
-        }}
-      >
-        <DialogTitle
-          sx={{
-            alignItems: 'center',
-            display: 'flex',
-            justifyContent: 'space-between',
-            px: 2.5,
-            py: 2,
-            borderBottom: `1px solid ${theme.palette.divider}`,
-            bgcolor: theme.palette.background?.default ?? undefined,
-          }}
-        >
-          <Typography
-            variant="h6"
-            fontWeight={700}
-            sx={{ textTransform: 'none' }}
-          >
-            {t('tutorial:home.get_six_qorts')}
-          </Typography>
-          <IconButton
-            onClick={() => setOpenQortsDialog(false)}
-            size="small"
-            aria-label="Close"
-          >
-            <CloseIcon />
-          </IconButton>
-        </DialogTitle>
-        <DialogContent sx={{ px: 2.5, py: 2.5 }}>
-          <Typography
-            variant="body1"
-            sx={{ mb: 2.5, lineHeight: 1.5, fontWeight: 500, mt: 2.5 }}
-          >
-            {t('tutorial:home.get_six_qorts_intro')}
-          </Typography>
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>
-            {/* Option 1: Onboarding */}
-            <Box
-              sx={{
-                display: 'flex',
-                alignItems: 'flex-start',
-                gap: 1.5,
-                p: 1.5,
-                borderRadius: '12px',
-                bgcolor:
-                  theme.palette.background?.surface ?? 'rgba(255,255,255,0.04)',
-                border: `1px solid ${theme.palette.border?.subtle ?? 'rgba(255,255,255,0.08)'}`,
-              }}
-            >
-              <Box
-                sx={{
-                  width: 40,
-                  height: 40,
-                  borderRadius: '10px',
-                  bgcolor: theme.palette.primary.main,
-                  color: theme.palette.primary.contrastText,
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  flexShrink: 0,
-                }}
-              >
-                <SchoolIcon sx={{ fontSize: 22 }} />
-              </Box>
-              <Box sx={{ flex: 1, minWidth: 0 }}>
-                <Typography variant="body2" sx={{ fontWeight: 600, mb: 0.5 }}>
-                  1. {t('tutorial:home.get_six_qorts_way1')}
-                </Typography>
-                <Button
-                  size="small"
-                  variant="outlined"
-                  endIcon={<OpenInNewIcon sx={{ fontSize: 16 }} />}
-                  onClick={() => {
-                    if (window?.electronAPI?.openExternal) {
-                      window.electronAPI.openExternal(ONBOARDING_URL);
-                    } else {
-                      window.open(ONBOARDING_URL, '_blank');
-                    }
-                  }}
-                  sx={{ mt: 0.75, textTransform: 'none', fontWeight: 600 }}
-                >
-                  {t('tutorial:home.get_six_qorts_way1_action')}
-                </Button>
-              </Box>
-            </Box>
-            {/* Option 2: Nextcloud support chat */}
-            <Box
-              sx={{
-                display: 'flex',
-                alignItems: 'flex-start',
-                gap: 1.5,
-                p: 1.5,
-                borderRadius: '12px',
-                bgcolor:
-                  theme.palette.background?.surface ?? 'rgba(255,255,255,0.04)',
-                border: `1px solid ${theme.palette.border?.subtle ?? 'rgba(255,255,255,0.08)'}`,
-              }}
-            >
-              <Box
-                sx={{
-                  width: 40,
-                  height: 40,
-                  borderRadius: '10px',
-                  bgcolor:
-                    theme.palette.secondary?.main ?? theme.palette.info.main,
-                  color:
-                    theme.palette.secondary?.contrastText ??
-                    theme.palette.info.contrastText,
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  flexShrink: 0,
-                }}
-              >
-                <SupportAgentIcon sx={{ fontSize: 22 }} />
-              </Box>
-              <Box sx={{ flex: 1, minWidth: 0 }}>
-                <Typography variant="body2" sx={{ fontWeight: 600, mb: 0.5 }}>
-                  2. {t('tutorial:home.get_six_qorts_way2')}
-                </Typography>
-                <Button
-                  size="small"
-                  variant="outlined"
-                  endIcon={<OpenInNewIcon sx={{ fontSize: 16 }} />}
-                  onClick={() => {
-                    if (window?.electronAPI?.openExternal) {
-                      window.electronAPI.openExternal(SUPPORT_CHAT_URL);
-                    } else {
-                      window.open(SUPPORT_CHAT_URL, '_blank');
-                    }
-                  }}
-                  sx={{ mt: 0.75, textTransform: 'none', fontWeight: 600 }}
-                >
-                  {t('tutorial:home.get_six_qorts_way2_action')}
-                </Button>
-              </Box>
-            </Box>
-            {/* Option 3: Q-Trade */}
-            <Box
-              sx={{
-                display: 'flex',
-                alignItems: 'flex-start',
-                gap: 1.5,
-                p: 1.5,
-                borderRadius: '12px',
-                bgcolor:
-                  theme.palette.background?.surface ?? 'rgba(255,255,255,0.04)',
-                border: `1px solid ${theme.palette.border?.subtle ?? 'rgba(255,255,255,0.08)'}`,
-              }}
-            >
-              <Box
-                sx={{
-                  width: 40,
-                  height: 40,
-                  borderRadius: '10px',
-                  bgcolor:
-                    theme.palette.success?.main ?? 'rgba(76, 175, 80, 0.9)',
-                  color: theme.palette.success?.contrastText ?? '#fff',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  flexShrink: 0,
-                }}
-              >
-                <ShoppingBagIcon sx={{ fontSize: 22 }} />
-              </Box>
-              <Box sx={{ flex: 1, minWidth: 0 }}>
-                <Typography variant="body2" sx={{ fontWeight: 600, mb: 0.5 }}>
-                  3. {t('tutorial:home.get_six_qorts_way3')}
-                </Typography>
-                <Button
-                  size="small"
-                  variant="outlined"
-                  onClick={() => {
-                    executeEvent('addTab', {
-                      data: { service: 'APP', name: 'q-trade' },
-                    });
-                    executeEvent('open-apps-mode', {});
-                    setOpenQortsDialog(false);
-                  }}
-                  sx={{ mt: 0.75, textTransform: 'none', fontWeight: 600 }}
-                >
-                  {t('tutorial:home.get_six_qorts_way3_action')}
-                </Button>
-              </Box>
-            </Box>
-          </Box>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-};
diff --git a/src/components/Group/HomeGroupCard.tsx b/src/components/Group/HomeGroupCard.tsx
deleted file mode 100644
index 3fcf0783..00000000
--- a/src/components/Group/HomeGroupCard.tsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import { Avatar, Box, ButtonBase, Typography, useTheme } from '@mui/material';
-import { useAtomValue } from 'jotai';
-import { groupsOwnerNamesSelector } from '../../atoms/global';
-import { getBaseApiReact } from '../../App';
-import { FeaturedGroup } from '../../data/featuredGroups';
-
-interface HomeGroupCardProps {
-  group: FeaturedGroup;
-  onClick: (e: React.MouseEvent<HTMLElement>) => void;
-}
-
-export const HomeGroupCard = ({ group, onClick }: HomeGroupCardProps) => {
-  const theme = useTheme();
-  const ownerName = useAtomValue(groupsOwnerNamesSelector(String(group.id)));
-
-  const avatarUrl = ownerName
-    ? `${getBaseApiReact()}/arbitrary/THUMBNAIL/${ownerName}/qortal_group_avatar_${group.id}?async=true`
-    : null;
-
-  // Two-letter fallback label (e.g. "QG" from "Qortal-General-Chat")
-  const fallbackLabel = group.name
-    .split(/[-\s]/)
-    .filter(Boolean)
-    .slice(0, 2)
-    .map((w) => w[0].toUpperCase())
-    .join('');
-
-  return (
-    <ButtonBase
-      onClick={onClick}
-      sx={{
-        alignItems: 'center',
-        bgcolor: theme.palette.background.default,
-        borderRadius: '10px',
-        display: 'flex',
-        flexDirection: 'column',
-        flexShrink: 0,
-        gap: '8px',
-        padding: '14px 10px',
-        width: '160px',
-        '&:hover': { bgcolor: theme.palette.action.hover },
-      }}
-    >
-      {/* Avatar */}
-      <Avatar
-        src={avatarUrl ?? undefined}
-        variant="rounded"
-        sx={{
-          bgcolor: theme.palette.primary.main,
-          fontSize: '0.85rem',
-          fontWeight: 700,
-          height: 52,
-          width: 52,
-        }}
-      >
-        {fallbackLabel}
-      </Avatar>
-
-      {/* Name */}
-      <Typography
-        sx={{
-          color: theme.palette.text.primary,
-          fontSize: '0.82rem',
-          fontWeight: 600,
-          maxWidth: '140px',
-          overflow: 'hidden',
-          textAlign: 'center',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-        }}
-      >
-        {group.name}
-      </Typography>
-
-      {/* Description */}
-      <Typography
-        sx={{
-          color: theme.palette.text.secondary,
-          display: '-webkit-box',
-          fontSize: '0.72rem',
-          lineHeight: 1.3,
-          overflow: 'hidden',
-          textAlign: 'center',
-          WebkitBoxOrient: 'vertical',
-          WebkitLineClamp: 2,
-          flex: 1,
-        }}
-      >
-        {group.description}
-      </Typography>
-    </ButtonBase>
-  );
-};
diff --git a/src/components/Group/HomeProfileCard.tsx b/src/components/Group/HomeProfileCard.tsx
index 239b8a3b..907e1933 100644
--- a/src/components/Group/HomeProfileCard.tsx
+++ b/src/components/Group/HomeProfileCard.tsx
@@ -1,53 +1,154 @@
-import { useContext, useEffect, useRef, useState } from 'react';
+import {
+  type ChangeEvent,
+  type MouseEvent,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   Avatar,
   Box,
-  Button,
   ButtonBase,
-  IconButton,
-  Popover,
+  Dialog,
+  GlobalStyles,
+  Menu,
+  MenuItem,
+  Portal,
+  Switch,
+  TextField,
   Tooltip,
   Typography,
   useTheme,
 } from '@mui/material';
+import { alpha } from '@mui/material/styles';
 import { LoadingButton } from '@mui/lab';
+import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded';
+import BlockRoundedIcon from '@mui/icons-material/BlockRounded';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
+import CloseIcon from '@mui/icons-material/Close';
 import ErrorIcon from '@mui/icons-material/Error';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import KeyboardArrowDownRoundedIcon from '@mui/icons-material/KeyboardArrowDownRounded';
+import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
 import PersonIcon from '@mui/icons-material/Person';
-import QrCode2Icon from '@mui/icons-material/QrCode2';
-import SendIcon from '@mui/icons-material/Send';
-import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
-import QRCode from 'react-qr-code';
-import { useAtomValue, useSetAtom } from 'jotai';
+import QrCode2RoundedIcon from '@mui/icons-material/QrCode2Rounded';
+import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
+import TuneRoundedIcon from '@mui/icons-material/TuneRounded';
+import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
+import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
+import { AnimatePresence, motion, useReducedMotion } from 'framer-motion';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
 import {
+  blockedAddressesAtom,
+  blockedNamesAtom,
+  enabledDevModeAtom,
+  rawWalletAtom,
   userInfoAtom,
-  balanceAtom,
   openSnackGlobalAtom,
   infoSnackGlobalAtom,
 } from '../../atoms/global';
 import { QORTAL_APP_CONTEXT } from '../../App';
-import { getFee } from '../../background/background.ts';
+import { getFee, walletVersion } from '../../background/background.ts';
+import Base58 from '../../encryption/Base58';
 import ImageUploader from '../../common/ImageUploader';
 import { MAX_SIZE_AVATAR } from '../../constants/constants.ts';
+import { decryptStoredWallet } from '../../utils/decryptWallet';
 import { fileToBase64 } from '../../utils/fileReading';
+import PhraseWallet from '../../utils/generateWallet/phrase-wallet';
 import {
   executeEvent,
   subscribeToEvent,
   unsubscribeFromEvent,
 } from '../../utils/events';
-import { getBaseApiReactForAvatar } from '../../utils/globalApi';
+import {
+  getBaseApiReact,
+  getBaseApiReactForAvatar,
+} from '../../utils/globalApi';
+import {
+  dashboardPanelSx,
+  handleDashboardPanelPointerLeave,
+  handleDashboardPanelPointerMove,
+  useDashboardPanelMouseLight,
+} from './dashboardPanelEffects';
+import { DecryptedText } from '../common/DecryptedText';
+import { getBlueTier1ButtonSx } from '../../styles/blueMaterial';
+import BorderGlow from '../common/BorderGlow';
+import TiltedCard from '../common/TiltedCard';
+import { GROUP_ACTIVITY_BLUE } from './groupActivityColorSystem';
+import { Save } from '../Save/Save';
+import { useBlockedAddresses } from '../../hooks/useBlockUsers';
+
+type HomeProfileCardProps = {
+  onOpenReceive?: (anchorEl: HTMLElement) => void;
+};
+
+type AccountStatus = 'busy' | 'invisible' | 'online';
+type NameAvailability = 'available' | 'loading' | 'not-available' | 'null';
+type AccountSettingsTab =
+  | 'blocked'
+  | 'developer'
+  | 'profile'
+  | 'security'
+  | 'system';
+
+const ACCOUNT_STATUS_STORAGE_KEY = 'home_profile_account_status';
+const ACCOUNT_SETTINGS_PRIVACY_STORAGE_KEY = 'home_account_settings_privacy_mode';
+const ACCOUNT_SETTINGS_UI_ANIMATIONS_STORAGE_KEY = 'hub_ui_animations_enabled';
+const ACCOUNT_STATUS_DEFS: Array<{
+  color: string;
+  key: AccountStatus;
+}> = [
+  {
+    color: 'var(--account-status-online)',
+    key: 'online',
+  },
+  {
+    color: 'var(--account-status-busy)',
+    key: 'busy',
+  },
+  {
+    color: 'var(--account-status-invisible)',
+    key: 'invisible',
+  },
+];
+
+const readStoredBoolean = (key: string, fallback: boolean) => {
+  if (typeof window === 'undefined') return fallback;
 
-export const HomeProfileCard = () => {
+  try {
+    const storedValue = window.localStorage.getItem(key);
+
+    if (storedValue === null) return fallback;
+
+    return JSON.parse(storedValue);
+  } catch (error) {
+    console.warn(`Unable to read stored boolean for ${key}.`, error);
+    return fallback;
+  }
+};
+
+export const HomeProfileCard = ({
+  onOpenReceive,
+}: HomeProfileCardProps) => {
   const { t } = useTranslation(['tutorial', 'core', 'group']);
   const theme = useTheme();
   const { show } = useContext(QORTAL_APP_CONTEXT);
   const userInfo = useAtomValue(userInfoAtom);
-  const balance = useAtomValue(balanceAtom);
+  const rawWallet = useAtomValue(rawWalletAtom);
+  const blockedAddresses = useAtomValue(blockedAddressesAtom);
+  const blockedNames = useAtomValue(blockedNamesAtom);
+  const setUserInfo = useSetAtom(userInfoAtom);
   const setOpenSnack = useSetAtom(openSnackGlobalAtom);
   const setInfoSnack = useSetAtom(infoSnackGlobalAtom);
+  const [isEnabledDevMode, setIsEnabledDevMode] = useAtom(enabledDevModeAtom);
 
   const avatarAnchorRef = useRef<HTMLButtonElement | null>(null);
+  const avatarPanelRef = useRef<HTMLDivElement | null>(null);
   const [avatarError, setAvatarError] = useState(false);
   const [tempAvatar, setTempAvatar] = useState<string | null>(null);
   const [avatarFile, setAvatarFile] = useState<File | null>(null);
@@ -55,10 +156,208 @@ export const HomeProfileCard = () => {
   const [avatarAnchorEl, setAvatarAnchorEl] = useState<HTMLElement | null>(
     null
   );
+  const [avatarPanelOriginRect, setAvatarPanelOriginRect] = useState<DOMRect | null>(
+    null
+  );
+  const [avatarPanelHeight, setAvatarPanelHeight] = useState(430);
   const [isAvatarLoading, setIsAvatarLoading] = useState(false);
-  const [qrAnchorEl, setQrAnchorEl] = useState<HTMLElement | null>(null);
+  const avatarPanelWasOpenRef = useRef(false);
+  const [isAddressFieldHovered, setIsAddressFieldHovered] = useState(false);
+  const [isAvatarGlowHovered, setIsAvatarGlowHovered] = useState(false);
+  const [isAccountSettingsOpen, setIsAccountSettingsOpen] = useState(false);
+  const [activeSettingsTab, setActiveSettingsTab] =
+    useState<AccountSettingsTab>('profile');
+  const [changeNameValue, setChangeNameValue] = useState('');
+  const [isChangeNameLoading, setIsChangeNameLoading] = useState(false);
+  const [changeNameAvailability, setChangeNameAvailability] =
+    useState<NameAvailability>('null');
+  const [changeNameFee, setChangeNameFee] = useState<string | number | null>(
+    null
+  );
+  const [currentNameDescription, setCurrentNameDescription] = useState('');
+  const [isCurrentNameMetaLoading, setIsCurrentNameMetaLoading] =
+    useState(false);
+  const [currentNameMetaError, setCurrentNameMetaError] = useState<
+    string | null
+  >(null);
+  const [changeNamePassword, setChangeNamePassword] = useState('');
+  const [isChangeNamePasswordEditable, setIsChangeNamePasswordEditable] =
+    useState(false);
+  const [isPrivacyModeActive, setIsPrivacyModeActive] = useState(() =>
+    readStoredBoolean(ACCOUNT_SETTINGS_PRIVACY_STORAGE_KEY, false)
+  );
+  const [areAppNotificationsEnabled, setAreAppNotificationsEnabled] =
+    useState(true);
+  const [areUiAnimationsEnabled, setAreUiAnimationsEnabled] = useState(() =>
+    readStoredBoolean(ACCOUNT_SETTINGS_UI_ANIMATIONS_STORAGE_KEY, true)
+  );
+  const [securityPassword, setSecurityPassword] = useState('');
+  const [isSecurityPasswordEditable, setIsSecurityPasswordEditable] =
+    useState(false);
+  const [revealedPrivateKey, setRevealedPrivateKey] = useState('');
+  const [privateKeyError, setPrivateKeyError] = useState<string | null>(null);
+  const [isRevealingPrivateKey, setIsRevealingPrivateKey] = useState(false);
+  const [accountStatusAnchorEl, setAccountStatusAnchorEl] =
+    useState<HTMLElement | null>(null);
+  const [accountStatusOverride, setAccountStatusOverride] =
+    useState<AccountStatus | null>(null);
+  const { refreshBlockedUsers, removeBlockFromList } =
+    useBlockedAddresses(true);
+  const panelRef = useDashboardPanelMouseLight<HTMLDivElement>();
+  const prefersReducedMotion = useReducedMotion();
+  const isDarkMode = theme.palette.mode === 'dark';
+  const avatarModalSurface = isDarkMode
+    ? 'linear-gradient(145deg, rgba(49,54,64,0.985) 0%, rgba(35,39,47,0.992) 48%, rgba(24,27,33,0.996) 100%)'
+    : 'linear-gradient(180deg, rgba(251,253,255,0.985) 0%, rgba(244,247,251,0.99) 100%)';
+  const avatarModalSurfaceSoft = isDarkMode
+    ? 'linear-gradient(145deg, rgba(94,101,114,0.34) 0%, rgba(72,78,89,0.3) 100%)'
+    : alpha(theme.palette.text.primary, 0.035);
+  const avatarFieldSurface = isDarkMode
+    ? 'linear-gradient(145deg, rgba(88,95,108,0.2) 0%, rgba(56,62,73,0.28) 44%, rgba(37,41,49,0.42) 100%)'
+    : 'linear-gradient(180deg, rgba(17,23,34,0.042) 0%, rgba(17,23,34,0.024) 100%)';
+  const avatarFieldSurfaceHover = isDarkMode
+    ? 'linear-gradient(145deg, rgba(98,106,120,0.24) 0%, rgba(63,70,82,0.34) 46%, rgba(43,48,57,0.48) 100%)'
+    : 'linear-gradient(180deg, rgba(17,23,34,0.06) 0%, rgba(17,23,34,0.034) 100%)';
+  const avatarFieldBorder = isDarkMode
+    ? 'rgba(255,255,255,0.085)'
+    : 'rgba(24,29,36,0.12)';
+  const avatarFieldHoverBorder = isDarkMode
+    ? 'rgba(255,255,255,0.12)'
+    : 'rgba(24,29,36,0.16)';
+  const avatarSectionDivider = isDarkMode
+    ? 'rgba(255,255,255,0.052)'
+    : 'rgba(24,29,36,0.1)';
+  const avatarFieldInsetShadow = isDarkMode
+    ? '0 8px 20px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.035)'
+    : '0 4px 10px rgba(24,32,44,0.06), inset 0 1px 0 rgba(255,255,255,0.5)';
+  const avatarWarningTone = isDarkMode
+    ? {
+        background: 'rgba(189, 143, 73, 0.1)',
+        border: 'rgba(189, 143, 73, 0.24)',
+        icon: '#C7A56C',
+      }
+    : {
+        background: 'rgba(191, 144, 73, 0.08)',
+        border: 'rgba(191, 144, 73, 0.2)',
+        icon: '#A97E3F',
+      };
+  const changeNameNoteTone = isDarkMode
+    ? {
+        background: 'rgba(132, 176, 240, 0.09)',
+        border: 'rgba(132, 176, 240, 0.2)',
+        icon: '#8EB8F5',
+      }
+    : {
+        background: 'rgba(90, 126, 196, 0.08)',
+        border: 'rgba(90, 126, 196, 0.18)',
+        icon: '#5C7EC6',
+      };
+  const developerNoticeTone = isDarkMode
+    ? {
+        background: 'rgba(205, 156, 69, 0.1)',
+        border: 'rgba(205, 156, 69, 0.2)',
+        icon: '#D8AC61',
+      }
+    : {
+        background: 'rgba(191, 132, 46, 0.08)',
+        border: 'rgba(191, 132, 46, 0.18)',
+        icon: '#A66D1F',
+      };
+  const settingsSidebarSurface = isDarkMode
+    ? 'linear-gradient(180deg, rgba(31,35,43,0.92) 0%, rgba(24,27,33,0.88) 100%)'
+    : 'linear-gradient(180deg, rgba(238,242,248,0.76) 0%, rgba(231,236,244,0.88) 100%)';
+  const settingsSidebarActiveSurface = isDarkMode
+    ? 'linear-gradient(145deg, rgba(73,79,91,0.54) 0%, rgba(50,55,65,0.46) 100%)'
+    : 'linear-gradient(145deg, rgba(255,255,255,0.9) 0%, rgba(240,244,250,0.74) 100%)';
+  const settingsSidebarAccent = isDarkMode
+    ? alpha(theme.palette.primary.light, 0.88)
+    : alpha(theme.palette.primary.main, 0.84);
+  const privacyBlurClassName = isPrivacyModeActive ? 'privacy-blur' : undefined;
+  const td = useCallback(
+    (key: string, defaultValue: string, options = {}) =>
+      t(`group:dashboard.${key}`, { defaultValue, ...options }),
+    [t]
+  );
+  const accountStatusOptions = useMemo(
+    () =>
+      ACCOUNT_STATUS_DEFS.map((def) => ({
+        ...def,
+        label:
+          def.key === 'online'
+            ? td('account_status_online', 'Online')
+            : def.key === 'busy'
+              ? td('account_status_busy', 'Busy')
+              : td('account_status_invisible', 'Invisible'),
+      })),
+    [td]
+  );
+  const accountSettingsTabs = useMemo(
+    () => [
+      {
+        description: td(
+          'profile_settings_description',
+          'Review your name and account identity.'
+        ),
+        icon: PersonIcon,
+        key: 'profile' as const,
+        label: td('profile', 'Profile'),
+        title: td('profile_settings', 'Profile Settings'),
+      },
+      {
+        description: td(
+          'security_settings_description',
+          'Reveal and copy your private key only when absolutely needed.'
+        ),
+        icon: LockOutlinedIcon,
+        key: 'security' as const,
+        label: td('security', 'Security'),
+        title: td('security_settings', 'Security Settings'),
+      },
+      {
+        description: td(
+          'blocked_settings_description',
+          'Manage blocked names and addresses for this wallet or across this device.'
+        ),
+        icon: BlockRoundedIcon,
+        key: 'blocked' as const,
+        label: td('blocked', 'Blocked'),
+        title: td('blocked_settings', 'Blocked Accounts'),
+      },
+      {
+        description: td(
+          'developer_settings_description',
+          'Enable developer tools and diagnostics for advanced testing.'
+        ),
+        icon: CodeRoundedIcon,
+        key: 'developer' as const,
+        label: td('developer', 'Developer'),
+        title: td('developer_settings', 'Developer Settings'),
+      },
+      {
+        description: td(
+          'system_settings_description',
+          'Control notifications, motion, and pinned Q-App backup preferences.'
+        ),
+        icon: TuneRoundedIcon,
+        key: 'system' as const,
+        label: td('system', 'System'),
+        title: td('system_settings', 'System Settings'),
+      },
+    ],
+    [td]
+  );
+
+  const openAvatarPanel = useCallback((target: HTMLElement | null) => {
+    if (!target) return;
+    setAvatarPanelOriginRect(target.getBoundingClientRect());
+    setAvatarAnchorEl(target);
+  }, []);
+
+  const closeAvatarPanel = useCallback(() => {
+    setAvatarAnchorEl(null);
+    setAvatarFile(null);
+  }, []);
 
-  // Object URL for selected file preview; revoke on change/cleanup
   useEffect(() => {
     if (!avatarFile) {
       setAvatarPreviewUrl(null);
@@ -69,29 +368,456 @@ export const HomeProfileCard = () => {
     return () => URL.revokeObjectURL(url);
   }, [avatarFile]);
 
-  // When "Load your avatar" step (or any openAvatarUpload event) fires, open the same popover as "Change avatar"
   useEffect(() => {
     const openFromEvent = () => {
-      if (avatarAnchorRef.current) setAvatarAnchorEl(avatarAnchorRef.current);
+      if (avatarAnchorRef.current) {
+        openAvatarPanel(avatarAnchorRef.current);
+      }
     };
     subscribeToEvent('openAvatarUpload', openFromEvent);
     return () => unsubscribeFromEvent('openAvatarUpload', openFromEvent);
-  }, []);
+  }, [openAvatarPanel]);
+
+  useEffect(() => {
+    if (!avatarAnchorEl) return;
+
+    const updatePanelMetrics = () => {
+      setAvatarPanelOriginRect(avatarAnchorEl.getBoundingClientRect());
+      if (avatarPanelRef.current) {
+        setAvatarPanelHeight(avatarPanelRef.current.getBoundingClientRect().height);
+      }
+    };
+
+    updatePanelMetrics();
+
+    const resizeObserver =
+      typeof ResizeObserver !== 'undefined' && avatarPanelRef.current
+        ? new ResizeObserver(() => updatePanelMetrics())
+        : null;
+
+    if (resizeObserver && avatarPanelRef.current) {
+      resizeObserver.observe(avatarPanelRef.current);
+    }
+
+    window.addEventListener('resize', updatePanelMetrics);
+    window.addEventListener('scroll', updatePanelMetrics, true);
+
+    return () => {
+      resizeObserver?.disconnect();
+      window.removeEventListener('resize', updatePanelMetrics);
+      window.removeEventListener('scroll', updatePanelMetrics, true);
+    };
+  }, [avatarAnchorEl]);
 
   const name = userInfo?.name;
   const address = userInfo?.address;
+  const normalizedCurrentName = name?.trim().toLowerCase() ?? '';
+  const hasRegisteredName = Boolean(name);
+  const accountStatusStorageKey = useMemo(() => {
+    const identityKey = address?.trim() || name?.trim() || 'default';
+    return `${ACCOUNT_STATUS_STORAGE_KEY}:${identityKey}`;
+  }, [address, name]);
+  const accountIdentityPrimaryText = hasRegisteredName
+    ? name ?? '—'
+    : address ?? '—';
+  const accountIdentitySecondaryText = address ?? '—';
+  const shouldRevealAddressOnHover = hasRegisteredName && Boolean(address);
+  const showAnimatedAddress = shouldRevealAddressOnHover && isAddressFieldHovered;
+  const blockedAddressEntries = useMemo(
+    () => Object.keys(blockedAddresses || {}),
+    [blockedAddresses]
+  );
+  const blockedNameEntries = useMemo(
+    () => Object.keys(blockedNames || {}),
+    [blockedNames]
+  );
+  const blockedCount =
+    blockedAddressEntries.length + blockedNameEntries.length;
+  const addressFieldActionButtonSizePx = 26;
+  const addressFieldActionGapPx = 1;
+  const addressFieldActionBaseColor = isDarkMode
+    ? alpha(theme.palette.common.white, 0.34)
+    : alpha(theme.palette.text.primary, 0.4);
+  const addressFieldActionHoverColor = isDarkMode
+    ? alpha(theme.palette.common.white, 0.68)
+    : alpha(theme.palette.text.primary, 0.7);
+  const addressFieldActionHoverBackground = isDarkMode
+    ? alpha(theme.palette.common.white, 0.055)
+    : alpha(theme.palette.text.primary, 0.06);
+  const fallbackAccountStatus = useMemo<AccountStatus>(() => {
+    const candidateStatuses = [
+      userInfo?.status,
+      userInfo?.presence,
+      userInfo?.userStatus,
+      userInfo?.availability,
+    ];
+    const rawStatus = candidateStatuses.find(
+      (value) => typeof value === 'string' && value.trim().length > 0
+    );
+
+    if (typeof rawStatus !== 'string') {
+      return 'online';
+    }
+
+    const normalized = rawStatus.trim().toLowerCase();
+
+    if (
+      normalized === 'busy' ||
+      normalized === 'dnd' ||
+      normalized === 'do not disturb'
+    ) {
+      return 'busy';
+    }
+
+    if (
+      normalized === 'invisible' ||
+      normalized === 'hidden' ||
+      normalized === 'offline'
+    ) {
+      return 'invisible';
+    }
+
+    return 'online';
+  }, [userInfo]);
+  const accountStatus = accountStatusOverride ?? fallbackAccountStatus;
+  const isAccountStatusMenuOpen = Boolean(accountStatusAnchorEl);
+  const accountStatusMeta = useMemo(() => {
+    if (accountStatus === 'busy') {
+      return {
+        color: isDarkMode ? '#D8A34D' : '#C48A26',
+        label: td('account_status_busy', 'Busy'),
+      };
+    }
+
+    if (accountStatus === 'invisible') {
+      return {
+        color: isDarkMode
+          ? alpha(theme.palette.common.white, 0.36)
+          : alpha(theme.palette.text.primary, 0.32),
+        label: td('account_status_invisible', 'Invisible'),
+      };
+    }
+
+    return {
+      color: isDarkMode ? '#56C47B' : '#2F9E5E',
+      label: td('account_status_online', 'Online'),
+    };
+  }, [
+    accountStatus,
+    isDarkMode,
+    td,
+    theme.palette.common.white,
+    theme.palette.text.primary,
+  ]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    try {
+      const storedStatus = window.localStorage.getItem(accountStatusStorageKey);
+
+      if (
+        storedStatus === 'online' ||
+        storedStatus === 'busy' ||
+        storedStatus === 'invisible'
+      ) {
+        setAccountStatusOverride(storedStatus);
+        return;
+      }
+    } catch (error) {
+      console.warn('Unable to read local account status override.', error);
+    }
+
+    setAccountStatusOverride(null);
+  }, [accountStatusStorageKey]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    try {
+      const storedDevMode = window.localStorage.getItem('isEnabledDevMode');
+
+      if (storedDevMode !== null) {
+        setIsEnabledDevMode(JSON.parse(storedDevMode));
+      }
+    } catch (error) {
+      console.warn('Unable to read developer mode preference.', error);
+    }
+  }, [setIsEnabledDevMode]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    try {
+      window.localStorage.setItem(
+        ACCOUNT_SETTINGS_PRIVACY_STORAGE_KEY,
+        JSON.stringify(isPrivacyModeActive)
+      );
+    } catch (error) {
+      console.warn('Unable to persist privacy mode preference.', error);
+    }
+  }, [isPrivacyModeActive]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    try {
+      window.localStorage.setItem(
+        ACCOUNT_SETTINGS_UI_ANIMATIONS_STORAGE_KEY,
+        JSON.stringify(areUiAnimationsEnabled)
+      );
+    } catch (error) {
+      console.warn('Unable to persist UI animations preference.', error);
+    }
+  }, [areUiAnimationsEnabled]);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+
+    document.documentElement.dataset.hubUiAnimations = areUiAnimationsEnabled
+      ? 'on'
+      : 'off';
+  }, [areUiAnimationsEnabled]);
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+
+    const styleElementId = 'hub-ui-animations-style';
+    let styleElement = document.getElementById(
+      styleElementId
+    ) as HTMLStyleElement | null;
+
+    if (!styleElement) {
+      styleElement = document.createElement('style');
+      styleElement.id = styleElementId;
+      document.head.appendChild(styleElement);
+    }
+
+    styleElement.textContent = areUiAnimationsEnabled
+      ? ''
+      : `
+        html[data-hub-ui-animations="off"] *,
+        html[data-hub-ui-animations="off"] *::before,
+        html[data-hub-ui-animations="off"] *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          scroll-behavior: auto !important;
+          transition-delay: 0ms !important;
+          transition-duration: 0.01ms !important;
+        }
+      `;
+  }, [areUiAnimationsEnabled]);
+
+  const loadAppNotificationsPreference = useCallback(async () => {
+    try {
+      const response = await window.sendMessage('getUserSettings', {
+        key: 'disable-push-notifications',
+      });
+      setAreAppNotificationsEnabled(!(response || false));
+    } catch (error) {
+      console.error('Unable to load app notification preference.', error);
+    }
+  }, []);
+
+  const closeAccountSettingsModal = useCallback(() => {
+    if (isChangeNameLoading) return;
+    setIsAccountSettingsOpen(false);
+    setChangeNameValue('');
+    setChangeNameAvailability('null');
+    setCurrentNameMetaError(null);
+    setChangeNamePassword('');
+    setIsChangeNamePasswordEditable(false);
+    setSecurityPassword('');
+    setIsSecurityPasswordEditable(false);
+    setPrivateKeyError(null);
+    setRevealedPrivateKey('');
+  }, [isChangeNameLoading]);
+
+  const openAccountSettingsModal = useCallback(
+    (event: MouseEvent<HTMLElement>) => {
+      event.stopPropagation();
+      setIsAccountSettingsOpen(true);
+      setActiveSettingsTab('profile');
+      setChangeNameValue('');
+      setChangeNameAvailability('null');
+      setChangeNamePassword('');
+      setIsChangeNamePasswordEditable(false);
+      setSecurityPassword('');
+      setIsSecurityPasswordEditable(false);
+      setPrivateKeyError(null);
+      setRevealedPrivateKey('');
+      loadAppNotificationsPreference();
+    },
+    [loadAppNotificationsPreference]
+  );
+
+  useEffect(() => {
+    if (!isAccountSettingsOpen || activeSettingsTab !== 'blocked') return;
+
+    // Q-Apps such as Quitter can update Core block lists outside Hub's atoms.
+    // Refresh on tab entry so the blocked section reflects the active wallet scope.
+    refreshBlockedUsers().catch((error) => {
+      console.error('Unable to refresh blocked users.', error);
+    });
+  }, [activeSettingsTab, isAccountSettingsOpen, refreshBlockedUsers]);
+
+  const handleOpenAccountStatusMenu = useCallback(
+    (event: MouseEvent<HTMLElement>) => {
+      setAccountStatusAnchorEl(event.currentTarget);
+    },
+    []
+  );
+
+  const handleCloseAccountStatusMenu = useCallback(() => {
+    setAccountStatusAnchorEl(null);
+  }, []);
+
+  const handleSelectAccountStatus = useCallback(
+    (nextStatus: AccountStatus) => {
+      setAccountStatusOverride(nextStatus);
+
+      if (typeof window !== 'undefined') {
+        try {
+          window.localStorage.setItem(accountStatusStorageKey, nextStatus);
+        } catch (error) {
+          console.warn('Unable to persist local account status override.', error);
+        }
+      }
+
+      setAccountStatusAnchorEl(null);
+    },
+    [accountStatusStorageKey]
+  );
+
+  const handleTogglePrivacyMode = useCallback(() => {
+    setIsPrivacyModeActive((previousState) => !previousState);
+  }, []);
+
+  const handleToggleAppNotifications = useCallback(
+    async (_event: ChangeEvent<HTMLInputElement>, checked: boolean) => {
+      const shouldReduceNotifications = checked;
+      setAreAppNotificationsEnabled(!shouldReduceNotifications);
+
+      try {
+        await window.sendMessage('addUserSettings', {
+          keyValue: {
+            key: 'disable-push-notifications',
+            value: shouldReduceNotifications,
+          },
+        });
+      } catch (error) {
+        setAreAppNotificationsEnabled(shouldReduceNotifications);
+        setInfoSnack({
+          type: 'error',
+          message: td(
+            'notifications_update_error',
+            'We could not update app notifications right now.'
+          ),
+        });
+        setOpenSnack(true);
+      }
+    },
+    [setInfoSnack, setOpenSnack, td]
+  );
+
+  const handleToggleDevMode = useCallback(
+    (_event: ChangeEvent<HTMLInputElement>, checked: boolean) => {
+      setIsEnabledDevMode(checked);
+
+      if (typeof window === 'undefined') return;
+
+      try {
+        window.localStorage.setItem('isEnabledDevMode', JSON.stringify(checked));
+      } catch (error) {
+        console.warn('Unable to persist developer mode preference.', error);
+      }
+    },
+    [setIsEnabledDevMode]
+  );
+
+  const handleToggleUiAnimations = useCallback(
+    (_event: ChangeEvent<HTMLInputElement>, checked: boolean) => {
+      setAreUiAnimationsEnabled(!checked);
+    },
+    []
+  );
+
+  const revealPrivateKey = useCallback(async () => {
+    if (!rawWallet) {
+      setPrivateKeyError(
+        td('wallet_unavailable_error', 'Wallet data is unavailable right now.')
+      );
+      return;
+    }
+
+    if (!securityPassword.trim()) {
+      setPrivateKeyError(
+        td(
+          'wallet_password_required',
+          'Enter your wallet password to decrypt the private key.'
+        )
+      );
+      return;
+    }
+
+    try {
+      setIsRevealingPrivateKey(true);
+      setPrivateKeyError(null);
+
+      const walletCopy = structuredClone(rawWallet);
+      const decryptedSeed = await decryptStoredWallet(
+        securityPassword,
+        walletCopy
+      );
+      const phraseWallet = new PhraseWallet(
+        decryptedSeed,
+        walletCopy?.version || walletVersion
+      );
+      const derivedPrivateKey = Base58.encode(
+        phraseWallet._addresses[0].keyPair.privateKey
+      );
+
+      setRevealedPrivateKey(derivedPrivateKey);
+    } catch (error) {
+      setRevealedPrivateKey('');
+      setPrivateKeyError(
+        error instanceof Error && error.message
+          ? td('wallet_decrypt_error_with_message', 'We could not decrypt your wallet: {{message}}', {
+              message: error.message,
+            })
+          : td(
+              'wallet_decrypt_error',
+              'We could not decrypt your wallet with that password.'
+            )
+      );
+    } finally {
+      setIsRevealingPrivateKey(false);
+    }
+  }, [rawWallet, securityPassword, td]);
+
+  const copyPrivateKey = useCallback(() => {
+    if (!revealedPrivateKey) return;
+
+    navigator.clipboard.writeText(revealedPrivateKey);
+    setInfoSnack({
+      type: 'success',
+      message: td('private_key_copied', 'Private key copied to clipboard.'),
+    });
+    setOpenSnack(true);
+  }, [revealedPrivateKey, setInfoSnack, setOpenSnack, td]);
+
   const avatarUrl =
     tempAvatar ??
     (name && !avatarError
       ? `${getBaseApiReactForAvatar()}/arbitrary/THUMBNAIL/${name}/qortal_avatar?async=true`
       : null);
 
-  const formattedBalance = balance != null ? Number(balance).toFixed(2) : '—';
-
   const handleCopyAddress = () => {
     if (!address) return;
     navigator.clipboard.writeText(address);
     setInfoSnack({
+      compact: true,
+      duration: 3000,
       type: 'info',
       message: t('tutorial:home.address_copied', {
         postProcess: 'capitalizeFirstChar',
@@ -100,479 +826,2692 @@ export const HomeProfileCard = () => {
     setOpenSnack(true);
   };
 
-  const handleTransferQort = () => {
-    executeEvent('openPaymentInternal', {});
-  };
+  const checkIfNameExists = useCallback(
+    async (candidateName: string) => {
+      const trimmedName = candidateName.trim();
 
-  const handleOpenQTrade = () => {
-    executeEvent('addTab', { data: { service: 'APP', name: 'q-trade' } });
-    executeEvent('open-apps-mode', {});
-  };
+      if (!trimmedName) {
+        setChangeNameAvailability('null');
+        return;
+      }
 
-  const publishAvatar = async () => {
+      if (trimmedName.toLowerCase() === normalizedCurrentName) {
+        setChangeNameAvailability('not-available');
+        return;
+      }
+
+      setChangeNameAvailability('loading');
+
+      try {
+        const response = await fetch(`${getBaseApiReact()}/names/${trimmedName}`);
+        const data = await response.json();
+
+        if (data?.message === 'name unknown' || data?.error) {
+          setChangeNameAvailability('available');
+        } else {
+          setChangeNameAvailability('not-available');
+        }
+      } catch (error) {
+        setChangeNameAvailability('available');
+      }
+    },
+    [normalizedCurrentName]
+  );
+
+  useEffect(() => {
+    if (!isAccountSettingsOpen || activeSettingsTab !== 'profile') return;
+
+    const handler = window.setTimeout(() => {
+      checkIfNameExists(changeNameValue);
+    }, 400);
+
+    return () => window.clearTimeout(handler);
+  }, [activeSettingsTab, changeNameValue, checkIfNameExists, isAccountSettingsOpen]);
+
+  useEffect(() => {
+    if (!isAccountSettingsOpen || activeSettingsTab !== 'profile' || !name) return;
+
+    let cancelled = false;
+
+    const loadChangeNameMeta = async () => {
+      setIsCurrentNameMetaLoading(true);
+      setCurrentNameMetaError(null);
+
+      try {
+        const [feeResponse, nameResponse] = await Promise.all([
+          getFee('UPDATE_NAME'),
+          fetch(`${getBaseApiReact()}/names/${name}`),
+        ]);
+
+        if (cancelled) return;
+
+        setChangeNameFee(feeResponse?.fee ?? null);
+
+        const data = await nameResponse.json();
+
+        if (cancelled) return;
+
+        if (!nameResponse.ok || data?.error || data?.message === 'name unknown') {
+          throw new Error(
+            td('current_name_details_load_failed', 'We could not load your current name details.')
+          );
+        }
+
+        const preservedDescription =
+          typeof data?.description === 'string'
+            ? data.description
+            : typeof data?.data === 'string'
+              ? data.data
+              : '';
+
+        setCurrentNameDescription(preservedDescription);
+      } catch (error) {
+        if (cancelled) return;
+
+        setCurrentNameMetaError(
+          error instanceof Error
+            ? error.message
+            : td('current_name_details_load_failed', 'We could not load your current name details.')
+        );
+      } finally {
+        if (!cancelled) {
+          setIsCurrentNameMetaLoading(false);
+        }
+      }
+    };
+
+    loadChangeNameMeta();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [activeSettingsTab, isAccountSettingsOpen, name, td]);
+
+  const formattedChangeNameFee = useMemo(() => {
+    const numericFee = Number(changeNameFee);
+
+    if (!Number.isFinite(numericFee)) {
+      return null;
+    }
+
+    return numericFee.toFixed(2);
+  }, [changeNameFee]);
+
+  const submitNameChange = useCallback(async () => {
     try {
-      const fee = await getFee('ARBITRARY');
+      const oldName = name?.trim();
+      const newName = changeNameValue.trim();
 
-      if (+balance < +fee.fee)
+      if (!oldName) {
         throw new Error(
-          t('core:message.generic.avatar_publish_fee', {
-            fee: fee.fee,
-            postProcess: 'capitalizeFirstChar',
-          })
+          td('name_change_register_first', 'Register a name first before changing it.')
         );
+      }
+
+      if (!newName) {
+        throw new Error(
+          td('name_change_enter_new_name', 'Enter the new name you want to use.')
+        );
+      }
+
+      if (newName.toLowerCase() === oldName.toLowerCase()) {
+        throw new Error(
+          td('name_change_different_from_current', 'Choose a different name from your current one.')
+        );
+      }
+
+      if (isCurrentNameMetaLoading) {
+        throw new Error(
+          td(
+            'name_change_details_still_loading',
+            'Still loading your current name details. Try again in a moment.'
+          )
+        );
+      }
+
+      if (currentNameMetaError) {
+        throw new Error(currentNameMetaError);
+      }
+
+      if (changeNameAvailability !== 'available') {
+        throw new Error(
+          td('name_change_choose_available', 'Choose an available name before continuing.')
+        );
+      }
+
+      if (!rawWallet) {
+        throw new Error(
+          td('wallet_unavailable_error', 'Wallet data is unavailable right now.')
+        );
+      }
+
+      if (!changeNamePassword.trim()) {
+        throw new Error(
+          td(
+            'name_change_wallet_password_required',
+            'Enter your wallet password before changing your name.'
+          )
+        );
+      }
+
+      try {
+        const walletCopy = structuredClone(rawWallet);
+        await decryptStoredWallet(changeNamePassword, walletCopy);
+      } catch {
+        throw new Error(
+          td('name_change_wallet_password_failed', 'We could not verify your wallet password.')
+        );
+      }
+
+      const fee = await getFee('UPDATE_NAME');
 
       await show({
-        message: t('core:message.question.publish_avatar', {
-          postProcess: 'capitalizeFirstChar',
-        }),
-        publishFee: fee.fee + ' QORT',
+        message: td(
+          'name_change_confirm',
+          'Change your registered name from {{oldName}} to {{newName}}?',
+          { oldName, newName }
+        ),
+        publishFee: `${fee.fee} QORT`,
       });
 
-      setIsAvatarLoading(true);
-      const avatarBase64 = await fileToBase64(avatarFile);
+      setIsChangeNameLoading(true);
 
-      await new Promise((res, rej) => {
+      const response = await new Promise<any>((resolve, reject) => {
         window
-          .sendMessage('publishOnQDN', {
-            data: avatarBase64,
-            identifier: 'qortal_avatar',
-            service: 'THUMBNAIL',
-            uploadType: 'base64',
+          .sendMessage('updateName', {
+            oldName,
+            newName,
+            description: currentNameDescription,
           })
-          .then((response) => {
-            if (!response?.error) {
-              res(response);
+          .then((messageResponse) => {
+            if (!messageResponse?.error) {
+              resolve(messageResponse);
               return;
             }
-            rej(response.error);
+
+            reject(new Error(messageResponse.error));
           })
           .catch((error) => {
-            rej(
-              error.message ||
-                t('core:message.error.generic', {
-                  postProcess: 'capitalizeFirstChar',
-                })
+            reject(
+              error instanceof Error
+                ? error
+                : new Error(
+                    td('name_change_unknown_error', 'Something went wrong while changing your name.')
+                  )
             );
           });
       });
 
-      setAvatarFile(null);
-      setTempAvatar(`data:image/webp;base64,${avatarBase64}`);
-      setAvatarAnchorEl(null);
-      executeEvent('avatarUploaded', {});
+      setUserInfo(
+        userInfo
+          ? {
+              ...userInfo,
+              name: newName,
+            }
+          : userInfo
+      );
+      setInfoSnack({
+        type: 'success',
+        message: td('name_change_success', 'Name change submitted successfully.'),
+      });
+      setOpenSnack(true);
+      closeAccountSettingsModal();
+      executeEvent('nameUpdated', {
+        currentName: newName,
+        previousName: oldName,
+        signature: response?.signature,
+      });
     } catch (error) {
-      if (error?.message) {
-        setInfoSnack({ type: 'error', message: error.message });
+      if (error instanceof Error && error.message) {
+        setInfoSnack({
+          type: 'error',
+          message: error.message,
+        });
         setOpenSnack(true);
       }
     } finally {
-      setIsAvatarLoading(false);
+      setIsChangeNameLoading(false);
     }
-  };
+  }, [
+    changeNameAvailability,
+    changeNamePassword,
+    changeNameValue,
+    closeAccountSettingsModal,
+    currentNameDescription,
+    currentNameMetaError,
+    isCurrentNameMetaLoading,
+    name,
+    rawWallet,
+    setInfoSnack,
+    setOpenSnack,
+    setUserInfo,
+    show,
+    td,
+    userInfo,
+  ]);
 
-  return (
-    <Box
-      sx={{
-        alignItems: 'center',
-        bgcolor: theme.palette.background.paper,
-        borderRadius: '12px',
-        display: 'flex',
-        gap: '16px',
-        justifyContent: 'space-between',
-        padding: '16px 20px',
-        width: '100%',
-      }}
-    >
-      {/* Left: Avatar + Name */}
-      <Box
-        sx={{
-          alignItems: 'center',
-          display: 'flex',
-          flexShrink: 0,
-          gap: '12px',
-        }}
-      >
-        <Box
-          sx={{
-            alignItems: 'center',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '4px',
-          }}
-        >
-          <ButtonBase
-            ref={avatarAnchorRef}
-            onClick={(e) => setAvatarAnchorEl(e.currentTarget)}
-            sx={{ borderRadius: '50%' }}
-          >
-            <Avatar
-              src={avatarUrl ?? undefined}
-              onError={() => setAvatarError(true)}
-              sx={{ height: 56, width: 56 }}
-            >
-              <PersonIcon sx={{ fontSize: 32 }} />
-            </Avatar>
-          </ButtonBase>
-          <ButtonBase onClick={(e) => setAvatarAnchorEl(e.currentTarget)}>
-            <Typography
-              sx={{
-                color: theme.palette.text.secondary,
-                fontSize: '0.68rem',
-                opacity: 0.7,
-              }}
-            >
-              {t('core:action.change_avatar', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Typography>
-          </ButtonBase>
-        </Box>
+  const publishAvatar = async () => {
+    try {
+      const fee = await getFee('ARBITRARY');
 
-        <Typography
-          sx={{
-            color: theme.palette.text.primary,
-            fontSize: '1rem',
-            fontWeight: 600,
-            maxWidth: '140px',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-          }}
-        >
-          {name ?? `${address?.slice(0, 8) ?? ''}…`}
-        </Typography>
-      </Box>
+      await show({
+        message: t('core:message.question.publish_avatar', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        publishFee: fee.fee + ' QORT',
+      });
+
+      setIsAvatarLoading(true);
+      const avatarBase64 = await fileToBase64(avatarFile);
+
+      const publishResponse = await window.sendMessage('publishOnQDN', {
+        data: avatarBase64,
+        identifier: 'qortal_avatar',
+        service: 'THUMBNAIL',
+        uploadType: 'base64',
+      });
+      if (publishResponse?.error) {
+        throw new Error(
+          typeof publishResponse.error === 'string'
+            ? publishResponse.error
+            : publishResponse.message ||
+                t('core:message.error.generic', {
+                  postProcess: 'capitalizeFirstChar',
+                })
+        );
+      }
+
+      setAvatarFile(null);
+      setTempAvatar(`data:image/webp;base64,${avatarBase64}`);
+      setAvatarAnchorEl(null);
+      executeEvent('avatarUploaded', {});
+    } catch (error) {
+      setInfoSnack({
+        type: 'error',
+        message:
+          error instanceof Error
+            ? error.message
+            : typeof error === 'string'
+              ? error
+              : t('core:message.error.generic', {
+                  postProcess: 'capitalizeFirstChar',
+                }),
+      });
+      setOpenSnack(true);
+    } finally {
+      setIsAvatarLoading(false);
+    }
+  };
+
+  const isAvatarPanelOpen = Boolean(avatarAnchorEl);
+  useEffect(() => {
+    if (isAvatarPanelOpen) {
+      avatarPanelWasOpenRef.current = true;
+      return;
+    }
+
+    if (!avatarPanelWasOpenRef.current) {
+      return;
+    }
+
+    avatarPanelWasOpenRef.current = false;
+    executeEvent('avatarUploadClosed', {});
+  }, [isAvatarPanelOpen]);
+
+  const avatarPanelOriginRadius = 22;
+  const avatarPanelTargetRadius = 20;
+  const avatarPanelWidth =
+    typeof window === 'undefined'
+      ? 332
+      : Math.min(352, Math.max(304, window.innerWidth - 32));
+
+  const avatarPanelLayout = useMemo(() => {
+    const viewportWidth =
+      typeof window !== 'undefined' ? window.innerWidth : avatarPanelWidth + 32;
+    const viewportHeight = typeof window !== 'undefined' ? window.innerHeight : 800;
+    const fallbackLeft = Math.max(16, (viewportWidth - avatarPanelWidth) / 2);
+    const fallbackTop = 140;
+
+    if (!avatarPanelOriginRect) {
+      return {
+        left: fallbackLeft,
+        top: fallbackTop,
+        width: avatarPanelWidth,
+        height: avatarPanelHeight,
+      };
+    }
+
+    const preferredLeft = avatarPanelOriginRect.left;
+    const left = Math.min(
+      Math.max(16, preferredLeft),
+      Math.max(16, viewportWidth - avatarPanelWidth - 16)
+    );
+
+    const preferredTop = avatarPanelOriginRect.top;
+    const top = Math.min(
+      Math.max(16, preferredTop),
+      Math.max(16, viewportHeight - avatarPanelHeight - 16)
+    );
+
+    return {
+      left,
+      top,
+      width: avatarPanelWidth,
+      height: avatarPanelHeight,
+    };
+  }, [avatarPanelHeight, avatarPanelOriginRect, avatarPanelWidth]);
+
+  const avatarPanelAnimation = useMemo(() => {
+    if (!avatarPanelOriginRect) {
+      return {
+        initial: { opacity: 0, scale: 0.96 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.96 },
+      };
+    }
+
+    if (prefersReducedMotion) {
+      return {
+        initial: { opacity: 0, scale: 0.98 },
+        animate: { opacity: 1, scale: 1 },
+        exit: { opacity: 0, scale: 0.98 },
+      };
+    }
+
+    return {
+      initial: {
+        opacity: 0.9,
+        scaleX: Math.max(0.18, avatarPanelOriginRect.width / avatarPanelLayout.width),
+        scaleY: Math.max(0.1, avatarPanelOriginRect.height / avatarPanelLayout.height),
+        borderRadius: avatarPanelOriginRadius,
+      },
+        animate: {
+          opacity: 1,
+          scaleX: 1,
+          scaleY: 1,
+          borderRadius: avatarPanelTargetRadius,
+        },
+      exit: {
+        opacity: 0.9,
+        scaleX: Math.max(0.18, avatarPanelOriginRect.width / avatarPanelLayout.width),
+        scaleY: Math.max(0.1, avatarPanelOriginRect.height / avatarPanelLayout.height),
+        borderRadius: avatarPanelOriginRadius,
+      },
+    };
+  }, [avatarPanelLayout.height, avatarPanelLayout.left, avatarPanelLayout.top, avatarPanelLayout.width, avatarPanelOriginRadius, avatarPanelOriginRect, avatarPanelTargetRadius, prefersReducedMotion]);
+
+  const changeNameStatusTone = useMemo(() => {
+    if (changeNameAvailability === 'available') {
+      return {
+        color: isDarkMode ? '#78D29A' : '#2E8B57',
+        label: td('name_availability_available', 'Name is available.'),
+      };
+    }
 
-      {/* Center: Address (copy on click) */}
+    if (changeNameAvailability === 'loading') {
+      return {
+        color: theme.palette.text.secondary,
+        label: td('name_availability_checking', 'Checking name availability...'),
+      };
+    }
+
+    if (changeNameAvailability === 'not-available') {
+      return {
+        color: avatarWarningTone.icon,
+        label:
+          changeNameValue.trim().toLowerCase() === normalizedCurrentName
+            ? td(
+                'name_availability_same_as_current',
+                'Choose a different name from the one you already use.'
+              )
+            : td('name_availability_taken', 'That name is already taken.'),
+      };
+    }
+
+    return null;
+  }, [
+    avatarWarningTone.icon,
+    changeNameAvailability,
+    changeNameValue,
+    isDarkMode,
+    normalizedCurrentName,
+    td,
+    theme.palette.text.secondary,
+  ]);
+
+  const isChangeNameSubmitDisabled =
+    !changeNameValue.trim() ||
+    !changeNamePassword.trim() ||
+    isChangeNameLoading ||
+    isCurrentNameMetaLoading ||
+    Boolean(currentNameMetaError) ||
+    changeNameAvailability !== 'available';
+  const activeSettingsMeta =
+    accountSettingsTabs.find((tab) => tab.key === activeSettingsTab) ??
+    accountSettingsTabs[0];
+  const ActiveSettingsIcon = activeSettingsMeta.icon;
+  const settingsSwitchSx = {
+    '& .MuiSwitch-switchBase': {
+      '&.Mui-checked': {
+        color: theme.palette.common.white,
+        '& + .MuiSwitch-track': {
+          backgroundColor: alpha(theme.palette.primary.main, isDarkMode ? 0.72 : 0.82),
+          opacity: 1,
+        },
+      },
+    },
+    '& .MuiSwitch-thumb': {
+      boxShadow: 'none',
+      height: 16,
+      width: 16,
+    },
+    '& .MuiSwitch-track': {
+      backgroundColor: isDarkMode
+        ? 'rgba(255,255,255,0.16)'
+        : 'rgba(24,29,36,0.18)',
+      borderRadius: 999,
+      opacity: 1,
+    },
+  } as const;
+  const compactProfileFieldSx = {
+    '& .MuiOutlinedInput-root': {
+      background: avatarFieldSurface,
+      borderRadius: '10px',
+      boxShadow: avatarFieldInsetShadow,
+      color: theme.palette.text.primary,
+      minHeight: 40,
+      '& fieldset': {
+        borderColor: avatarFieldBorder,
+      },
+      '&:hover fieldset': {
+        borderColor: avatarFieldHoverBorder,
+      },
+      '&.Mui-focused fieldset': {
+        borderColor: alpha(theme.palette.primary.main, 0.9),
+        borderWidth: 1.25,
+      },
+      '&:hover': {
+        background: avatarFieldSurfaceHover,
+      },
+    },
+    '& .MuiOutlinedInput-input': {
+      fontSize: '0.88rem',
+      lineHeight: 1.25,
+      padding: '10px 12px',
+    },
+    '& input:-webkit-autofill, & input:-webkit-autofill:hover, & input:-webkit-autofill:focus':
+      {
+        WebkitBoxShadow: isDarkMode
+          ? '0 0 0 100px rgb(47, 52, 62) inset'
+          : '0 0 0 100px rgb(248, 250, 253) inset',
+        WebkitTextFillColor: theme.palette.text.primary,
+        caretColor: theme.palette.text.primary,
+        transition: 'background-color 9999s ease-out 0s',
+      },
+  } as const;
+  const compactNeutralFieldSx = {
+    '& .MuiOutlinedInput-root': {
+      background: avatarFieldSurface,
+      borderRadius: '10px',
+      boxShadow: avatarFieldInsetShadow,
+      color: theme.palette.text.primary,
+      minHeight: 40,
+      '& fieldset': {
+        borderColor: avatarFieldBorder,
+      },
+      '&:hover fieldset': {
+        borderColor: avatarFieldHoverBorder,
+      },
+      '&.Mui-focused fieldset': {
+        borderColor: avatarFieldHoverBorder,
+        borderWidth: 1,
+      },
+      '&:hover': {
+        background: avatarFieldSurfaceHover,
+      },
+    },
+    '& .MuiOutlinedInput-input': {
+      fontSize: '0.88rem',
+      lineHeight: 1.25,
+      padding: '10px 12px',
+    },
+    '& input:-webkit-autofill, & input:-webkit-autofill:hover, & input:-webkit-autofill:focus':
+      {
+        WebkitBoxShadow: isDarkMode
+          ? '0 0 0 100px rgb(47, 52, 62) inset'
+          : '0 0 0 100px rgb(248, 250, 253) inset',
+        WebkitTextFillColor: theme.palette.text.primary,
+        caretColor: theme.palette.text.primary,
+        transition: 'background-color 9999s ease-out 0s',
+      },
+  } as const;
+
+  return (
+    <Box
+      ref={panelRef}
+      sx={{
+        ...dashboardPanelSx(theme, 'accent'),
+        alignItems: 'center',
+        borderRadius: '14px',
+        display: 'grid',
+        gap: {
+          xs: '18px',
+          lg: '16px',
+        },
+        gridTemplateColumns: {
+          xs: '1fr',
+          lg: '104px minmax(0, 1fr)',
+        },
+        minHeight: '164px',
+        padding: '22px 24px',
+        width: '100%',
+      }}
+      onMouseMove={handleDashboardPanelPointerMove}
+      onMouseLeave={handleDashboardPanelPointerLeave}
+    >
+      <GlobalStyles
+        styles={{
+          '.privacy-blur': {
+            filter: 'blur(8px)',
+            pointerEvents: 'none',
+            transition: 'filter 0.3s ease',
+            userSelect: 'none',
+          },
+        }}
+      />
       <Box
         sx={{
           alignItems: 'center',
           display: 'flex',
-          flex: 1,
           flexDirection: 'column',
           gap: '4px',
-          minWidth: 0,
+          justifyContent: 'center',
+          justifySelf: {
+            xs: 'center',
+            lg: 'stretch',
+          },
+          width: '104px',
         }}
       >
-        <Typography
-          sx={{
-            fontSize: '1rem',
-          }}
+        <TiltedCard
+          scaleOnHover={1.1}
+          rotateAmplitude={18}
         >
-          {t('tutorial:home.account_address', {
-            postProcess: 'capitalizeFirstChar',
-          })}
-        </Typography>
-        <Tooltip
-          title={t('tutorial:home.copy_address', {
-            postProcess: 'capitalizeFirstChar',
-          })}
-        >
-          <Box
-            onClick={handleCopyAddress}
-            sx={{
-              alignItems: 'center',
-              bgcolor: theme.palette.background.default,
-              borderRadius: '8px',
-              cursor: 'pointer',
-              display: 'flex',
-              gap: '6px',
-              justifyContent: 'center',
-              maxWidth: '360px',
-              padding: '8px 12px',
-              width: '100%',
-              '&:hover': { bgcolor: theme.palette.action.hover },
+          <BorderGlow
+            animated={isAvatarGlowHovered}
+            loopAnimated={true}
+            interactive={false}
+            edgeSensitivity={20}
+            glowColor={isDarkMode ? '218 79 73' : '218 72 70'}
+            backgroundColor="transparent"
+            borderRadius={26}
+            glowRadius={50}
+            glowIntensity={isDarkMode ? 0.3 : 0.42}
+            coneSpread={25}
+            colors={[
+              GROUP_ACTIVITY_BLUE.gradientTop,
+              GROUP_ACTIVITY_BLUE.primary,
+              GROUP_ACTIVITY_BLUE.hover,
+            ]}
+            fillOpacity={0.32}
+            style={{
+              '--card-border': 'transparent',
+              '--card-shadow': 'none',
+              width: 'fit-content',
             }}
           >
-            <Typography
+            <ButtonBase
+              ref={avatarAnchorRef}
+              onClick={(e) => openAvatarPanel(e.currentTarget)}
+              onMouseEnter={() => setIsAvatarGlowHovered(true)}
+              onMouseLeave={() => setIsAvatarGlowHovered(false)}
               sx={{
-                color: theme.palette.text.secondary,
-                fontFamily: 'monospace',
-                fontSize: '0.78rem',
+                background: isDarkMode
+                  ? 'linear-gradient(180deg, rgba(255,255,255,0.062) 0%, rgba(255,255,255,0.02) 100%)'
+                  : 'linear-gradient(180deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.36) 100%)',
+                border: `1px solid ${
+                  isDarkMode
+                    ? 'rgba(255,255,255,0.08)'
+                    : alpha(theme.palette.common.white, 0.54)
+                }`,
+                borderRadius: '22px',
+                boxShadow: isDarkMode
+                  ? '0 1px 4px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.18)'
+                  : '0 1px 3px rgba(28,36,52,0.08), inset 0 1px 0 rgba(255,255,255,0.42)',
+                display: 'inline-flex',
                 overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
+                padding: '3px',
+                transition: 'border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease',
+                '&:hover': {
+                  borderColor: isDarkMode
+                    ? 'rgba(255,255,255,0.12)'
+                    : alpha(theme.palette.common.white, 0.74),
+                  boxShadow: isDarkMode
+                    ? '0 0 0 3px rgba(132,175,240,0.08), inset 0 1px 0 rgba(255,255,255,0.06), inset 0 -1px 0 rgba(0,0,0,0.18)'
+                    : '0 0 0 3px rgba(132,175,240,0.08), inset 0 1px 0 rgba(255,255,255,0.5)',
+                },
               }}
             >
-              {address ?? '—'}
-            </Typography>
-            <ContentCopyIcon
-              sx={{
-                color: theme.palette.text.secondary,
-                flexShrink: 0,
-                fontSize: '0.9rem',
-              }}
-            />
-          </Box>
-        </Tooltip>
+              <Avatar
+                src={avatarUrl ?? undefined}
+                onError={() => setAvatarError(true)}
+                sx={{
+                  bgcolor: isDarkMode ? '#636772' : '#E7DED0',
+                  borderRadius: '22px',
+                  height: 88,
+                  width: 88,
+                }}
+              >
+                <PersonIcon
+                  sx={{
+                    color: isDarkMode ? '#1D2126' : theme.palette.text.secondary,
+                    fontSize: 44,
+                  }}
+                />
+              </Avatar>
+            </ButtonBase>
+          </BorderGlow>
+        </TiltedCard>
+
+        {/*
+        Account status pill + menu — restore when status UX is ready again.
+        <ButtonBase
+          onClick={handleOpenAccountStatusMenu}
+          aria-haspopup="menu"
+          aria-expanded={isAccountStatusMenuOpen ? 'true' : undefined}
+          aria-controls={isAccountStatusMenuOpen ? 'account-status-menu' : undefined}
+          sx={{
+            alignItems: 'center',
+            backgroundColor: alpha(
+              isDarkMode ? theme.palette.common.white : theme.palette.text.primary,
+              isDarkMode ? 0.06 : 0.05
+            ),
+            borderRadius: '999px',
+            display: 'inline-flex',
+            gap: '6px',
+            justifyContent: 'center',
+            maxWidth: '100%',
+            minHeight: '22px',
+            mt: '2px',
+            px: '8px',
+            py: '3px',
+            transition:
+              'background-color 160ms ease, color 160ms ease, transform 120ms ease',
+            '&:hover': {
+              backgroundColor: alpha(
+                isDarkMode ? theme.palette.common.white : theme.palette.text.primary,
+                isDarkMode ? 0.1 : 0.08
+              ),
+            },
+            '&:focus-visible': {
+              backgroundColor: alpha(theme.palette.primary.main, isDarkMode ? 0.16 : 0.1),
+            },
+          }}
+        >
+          <Box
+            aria-hidden="true"
+            sx={{
+              animation:
+                accountStatus === 'online'
+                  ? 'homeProfileStatusPulse 3.4s ease-in-out infinite'
+                  : undefined,
+              bgcolor: accountStatusMeta.color,
+              borderRadius: '50%',
+              flexShrink: 0,
+              height: 7,
+              width: 7,
+              '@keyframes homeProfileStatusPulse': {
+                '0%, 100%': {
+                  opacity: 0.9,
+                  transform: 'scale(0.92)',
+                },
+                '50%': {
+                  opacity: 1,
+                  transform: 'scale(1.08)',
+                },
+              },
+            }}
+          />
+          <Typography
+            sx={{
+              color: alpha(theme.palette.text.secondary, 0.88),
+              fontSize: '0.72rem',
+              fontWeight: 600,
+              letterSpacing: '0.01em',
+              lineHeight: 1.1,
+              textAlign: 'center',
+            }}
+          >
+            {accountStatusMeta.label}
+          </Typography>
+          <KeyboardArrowDownRoundedIcon
+            sx={{
+              color: alpha(theme.palette.text.secondary, 0.66),
+              fontSize: '0.9rem',
+            }}
+          />
+        </ButtonBase>
+        */}
       </Box>
 
-      {/* Right: Balance + actions (vertical) */}
       <Box
         sx={{
           alignItems: 'center',
           display: 'flex',
-          flexShrink: 0,
-          gap: '4px',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          gap: '8px',
+          minWidth: 0,
+          pl: {
+            xs: 0,
+            lg: '12px',
+          },
+          width: '100%',
         }}
       >
-        {/* Balance */}
         <Box
           sx={{
-            alignItems: 'flex-end',
+            alignItems: 'center',
             display: 'flex',
             flexDirection: 'column',
-            mr: '8px',
+            gap: '8px',
+            maxWidth: '478px',
+            minWidth: 0,
+            width: '100%',
           }}
         >
-          <Typography
-            sx={{ color: theme.palette.text.secondary, fontSize: '0.72rem' }}
-          >
-            {t('tutorial:home.balance', { postProcess: 'capitalizeFirstChar' })}
-          </Typography>
           <Typography
             sx={{
-              color: theme.palette.text.primary,
-              fontSize: '1rem',
-              fontWeight: 700,
+              color: isDarkMode
+                ? alpha(theme.palette.common.white, 0.9)
+                : alpha(theme.palette.text.primary, 0.9),
+              fontSize: '0.95rem',
+              fontWeight: 560,
+              letterSpacing: '-0.01em',
+              textAlign: 'center',
+              width: '100%',
             }}
           >
-            {formattedBalance} QORT
+            {td('account_overview', 'Account Overview')}
           </Typography>
-        </Box>
 
-        {/* Icons column */}
-        <Box sx={{ display: 'flex', flexDirection: 'column' }}>
-          {/* Transfer QORT */}
-          <Tooltip
-            title={t('core:action.transfer_qort', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            placement="left"
-            disableInteractive
-          >
-            <IconButton onClick={handleTransferQort} size="small">
-              <SendIcon fontSize="small" />
-            </IconButton>
-          </Tooltip>
-
-          {/* QR Code */}
-          <Tooltip
-            title={t('core:action.see_qr_code', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            placement="left"
-            disableInteractive
+          <Box
+            sx={{
+              alignItems: 'center',
+              display: 'flex',
+              gap: '8px',
+              width: '100%',
+            }}
           >
-            <IconButton
-              onClick={(e) => setQrAnchorEl(e.currentTarget)}
-              size="small"
+            <Box
+              sx={{
+                alignItems: 'center',
+                bgcolor: isDarkMode ? '#1A1D24' : '#E7DDD0',
+                border: `1px solid ${
+                  isDarkMode
+                    ? 'rgba(255,255,255,0.045)'
+                    : alpha(theme.palette.text.primary, 0.065)
+                }`,
+                borderRadius: '11px',
+                boxShadow: isDarkMode
+                  ? 'inset 0 1px 0 rgba(255,255,255,0.018)'
+                  : 'inset 0 1px 0 rgba(255,255,255,0.12)',
+                cursor: address ? 'pointer' : 'default',
+                display: 'flex',
+                flex: '1 1 auto',
+                gap: '8px',
+                minHeight: '38px',
+                minWidth: 0,
+                px: '11px',
+                py: '5px',
+                transition:
+                  'background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease',
+                '&:hover': address
+                  ? {
+                      backgroundColor: isDarkMode ? '#171A20' : '#E2D7C9',
+                      borderColor: isDarkMode
+                        ? 'rgba(255,255,255,0.06)'
+                        : alpha(theme.palette.text.primary, 0.095),
+                      '& .wallet-address-overlay': {
+                        color: theme.palette.text.primary,
+                      },
+                    }
+                  : undefined,
+              }}
+              onClick={address ? handleCopyAddress : undefined}
+              onMouseEnter={
+                shouldRevealAddressOnHover
+                  ? () => setIsAddressFieldHovered(true)
+                  : undefined
+              }
+              onMouseLeave={
+                shouldRevealAddressOnHover
+                  ? () => setIsAddressFieldHovered(false)
+                  : undefined
+              }
+              onKeyDown={
+                address
+                  ? (event) => {
+                      if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        handleCopyAddress();
+                      }
+                    }
+                  : undefined
+              }
+              role={address ? 'button' : undefined}
+              tabIndex={address ? 0 : undefined}
             >
-              <QrCode2Icon fontSize="small" />
-            </IconButton>
-          </Tooltip>
-
-          {/* Get QORT in Q-Trade */}
-          <Tooltip
-            title={t('core:action.get_qort_trade', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            placement="left"
-            disableInteractive
+              <Box
+                className="wallet-address-overlay"
+                sx={{
+                  alignItems: 'center',
+                  color: theme.palette.mode === 'dark'
+                    ? 'rgba(236, 241, 248, 0.86)'
+                    : alpha(theme.palette.text.primary, 0.72),
+                  display: 'flex',
+                  flex: '1 1 auto',
+                  fontSize: '0.84rem',
+                  fontWeight: 560,
+                  justifyContent: 'flex-start',
+                  minWidth: 0,
+                  pr: '4px',
+                  textAlign: 'left',
+                  transition: 'color 160ms ease',
+                }}
+              >
+                {shouldRevealAddressOnHover ? (
+                  showAnimatedAddress ? (
+                    <Box
+                      sx={{
+                        maxWidth: '100%',
+                        overflow: 'hidden',
+                        pointerEvents: 'auto',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      <DecryptedText
+                        text={accountIdentitySecondaryText}
+                        animateOn="hover"
+                        active={showAnimatedAddress}
+                        speed={35}
+                        maxIterations={12}
+                        sequential={true}
+                        revealDirection="start"
+                        useOriginalCharsOnly={true}
+                      />
+                    </Box>
+                  ) : (
+                    <Box
+                      sx={{
+                        maxWidth: '100%',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {accountIdentityPrimaryText}
+                    </Box>
+                  )
+                ) : (
+                  <Box
+                    sx={{
+                      maxWidth: '100%',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    {accountIdentityPrimaryText}
+                  </Box>
+                )}
+              </Box>
+              <Box
+                sx={{
+                  alignItems: 'center',
+                  display: 'flex',
+                  flexShrink: 0,
+                  justifyContent: 'flex-end',
+                  ml: 'auto',
+                }}
+              >
+                <Box
+                  sx={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    gap: `${addressFieldActionGapPx}px`,
+                    justifyContent: 'flex-end',
+                  }}
+                >
+                  {onOpenReceive ? (
+                    <Tooltip enterDelay={450} title={td('show_receive_qr', 'Show receive QR')}>
+                      <Box component="span">
+                        <ButtonBase
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            onOpenReceive(event.currentTarget);
+                          }}
+                          disabled={!address}
+                          aria-label={td('show_receive_qr', 'Show receive QR')}
+                          sx={{
+                            alignItems: 'center',
+                            borderRadius: '8px',
+                            color: addressFieldActionBaseColor,
+                            display: 'inline-flex',
+                            flexShrink: 0,
+                            height: `${addressFieldActionButtonSizePx}px`,
+                            justifyContent: 'center',
+                            transition:
+                              'background-color 160ms ease, color 160ms ease, opacity 160ms ease',
+                            width: `${addressFieldActionButtonSizePx}px`,
+                            '&:hover': {
+                              backgroundColor: addressFieldActionHoverBackground,
+                              color: addressFieldActionHoverColor,
+                            },
+                          }}
+                        >
+                          <QrCode2RoundedIcon sx={{ fontSize: '0.95rem' }} />
+                        </ButtonBase>
+                      </Box>
+                    </Tooltip>
+                  ) : null}
+                  <ButtonBase
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      handleCopyAddress();
+                    }}
+                    disabled={!address}
+                    aria-label={td('copy_address', 'Copy address')}
+                    sx={{
+                      alignItems: 'center',
+                      borderRadius: '8px',
+                      color: addressFieldActionBaseColor,
+                      display: 'inline-flex',
+                      flexShrink: 0,
+                      height: `${addressFieldActionButtonSizePx}px`,
+                      justifyContent: 'center',
+                      width: `${addressFieldActionButtonSizePx}px`,
+                      '&:hover': {
+                        backgroundColor: addressFieldActionHoverBackground,
+                        color: addressFieldActionHoverColor,
+                      },
+                    }}
+                  >
+                    <ContentCopyIcon sx={{ fontSize: '0.92rem' }} />
+                  </ButtonBase>
+                </Box>
+              </Box>
+            </Box>
+
+            <Tooltip
+              enterDelay={320}
+              title={td('account_settings_tooltip', 'Account settings')}
+            >
+              <ButtonBase
+                onClick={openAccountSettingsModal}
+                aria-label={td('open_account_settings_aria', 'Open account settings')}
+                sx={{
+                  alignItems: 'center',
+                  background: isDarkMode
+                    ? 'rgba(44,49,58,0.98)'
+                    : 'rgba(232,237,245,0.99)',
+                  border: `1px solid ${
+                    isDarkMode
+                      ? alpha('#8FD8FF', 0.06)
+                      : alpha(theme.palette.text.primary, 0.072)
+                  }`,
+                  borderRadius: '12px',
+                  boxShadow: isDarkMode
+                    ? `inset 0 1px 0 rgba(255,255,255,0.075), inset 0 0 0 1px rgba(255,255,255,0.012), inset 0 -1px 0 rgba(0,0,0,0.44), inset -1px -1px 0 rgba(0,0,0,0.18), 0 4px 8px rgba(0,0,0,0.17), 0 0 0 1px ${alpha('#8FD8FF', 0.012)}`
+                    : 'inset 0 1px 0 rgba(255,255,255,0.86), inset 0 0 0 1px rgba(255,255,255,0.24), inset 0 -1px 0 rgba(104,116,140,0.22), inset -1px -1px 0 rgba(146,158,182,0.14), 0 4px 8px rgba(94,108,132,0.11)',
+                  color: isDarkMode
+                    ? alpha('#F6F8FB', 0.88)
+                    : alpha(theme.palette.text.primary, 0.84),
+                  display: 'inline-flex',
+                  flexShrink: 0,
+                  height: 38,
+                  justifyContent: 'center',
+                  minWidth: 38,
+                  p: 0,
+                  position: 'relative',
+                  transition:
+                    'transform 90ms ease, filter 120ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease',
+                  width: 38,
+                  '&::before': {
+                    content: '""',
+                    position: 'absolute',
+                    inset: '1px',
+                    borderRadius: 'inherit',
+                    pointerEvents: 'none',
+                    background: isDarkMode
+                      ? 'linear-gradient(145deg, rgba(255,255,255,0.052) 0%, rgba(255,255,255,0.02) 24%, rgba(255,255,255,0) 58%)'
+                      : 'linear-gradient(145deg, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.22) 28%, rgba(255,255,255,0) 58%)',
+                    opacity: 0.92,
+                  },
+                  '&:hover': {
+                    filter: 'brightness(1.05)',
+                  },
+                  '&:active': {
+                    boxShadow:
+                      'inset 2px 2px 6px rgba(0, 0, 0, 0.7), inset -1px -1px 3px rgba(255, 255, 255, 0.04)',
+                    transform: 'scale(0.97)',
+                  },
+                }}
+              >
+                <SettingsRoundedIcon sx={{ fontSize: '1rem' }} />
+              </ButtonBase>
+            </Tooltip>
+          </Box>
+
+          <Typography
+            sx={{
+              color: theme.palette.text.secondary,
+              fontSize: '0.64rem',
+              letterSpacing: '0.05em',
+              opacity: 0.88,
+              textAlign: 'center',
+              textTransform: 'uppercase',
+              width: '100%',
+            }}
           >
-            <IconButton onClick={handleOpenQTrade} size="small">
-              <ShoppingCartIcon fontSize="small" />
-            </IconButton>
-          </Tooltip>
+            {td('qortal_name_address', 'QORTAL NAME & ADDRESS')}
+          </Typography>
         </Box>
       </Box>
 
-      {/* Avatar upload popover */}
-      <Popover
-        open={Boolean(avatarAnchorEl)}
-        anchorEl={avatarAnchorEl}
-        onClose={() => {
-          setAvatarAnchorEl(null);
-          setAvatarFile(null);
+      {/*
+      Account status dropdown — restore with the ButtonBase pill above.
+      <Menu
+        id="account-status-menu"
+        anchorEl={accountStatusAnchorEl}
+        open={isAccountStatusMenuOpen}
+        onClose={handleCloseAccountStatusMenu}
+        anchorOrigin={{
+          horizontal: 'center',
+          vertical: 'bottom',
+        }}
+        transformOrigin={{
+          horizontal: 'center',
+          vertical: 'top',
         }}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-        transformOrigin={{ vertical: 'top', horizontal: 'center' }}
         slotProps={{
+          list: {
+            sx: {
+              p: '6px',
+            },
+          },
           paper: {
             sx: {
+              backdropFilter: 'blur(14px)',
+              bgcolor: isDarkMode ? 'rgba(34, 37, 46, 0.94)' : 'rgba(251, 247, 240, 0.94)',
+              border: `1px solid ${alpha(
+                isDarkMode ? theme.palette.common.white : theme.palette.text.primary,
+                0.07
+              )}`,
               borderRadius: '16px',
+              boxShadow: isDarkMode
+                ? '0 18px 36px rgba(0, 0, 0, 0.32)'
+                : '0 16px 28px rgba(24, 32, 44, 0.12)',
+              minWidth: 168,
+              mt: 0.5,
               overflow: 'hidden',
-              boxShadow: theme.shadows[8],
-              border: `1px solid ${theme.palette.divider}`,
-              minWidth: 280,
+            },
+          },
+        }}
+      >
+        {accountStatusOptions.map((option) => {
+          const isSelected = option.key === accountStatus;
+
+          return (
+            <MenuItem
+              key={option.key}
+              selected={isSelected}
+              onClick={() => handleSelectAccountStatus(option.key)}
+              sx={{
+                alignItems: 'center',
+                columnGap: '10px',
+                borderRadius: '12px',
+                minHeight: '38px',
+                px: '12px',
+                py: '7px',
+              }}
+            >
+              <Box
+                aria-hidden="true"
+                sx={{
+                  bgcolor: option.color,
+                  borderRadius: '50%',
+                  flexShrink: 0,
+                  height: 8,
+                  width: 8,
+                }}
+              />
+              <Typography
+                sx={{
+                  color: isSelected
+                    ? theme.palette.text.primary
+                    : alpha(theme.palette.text.secondary, 0.96),
+                  fontSize: '0.82rem',
+                  fontWeight: isSelected ? 700 : 600,
+                  letterSpacing: '0.01em',
+                }}
+              >
+                {option.label}
+              </Typography>
+            </MenuItem>
+          );
+        })}
+      </Menu>
+      */}
+
+      <Dialog
+        open={isAccountSettingsOpen}
+        onClose={closeAccountSettingsModal}
+        aria-labelledby="account-settings-dialog-title"
+        aria-describedby="account-settings-dialog-description"
+        maxWidth={false}
+        fullWidth
+        slotProps={{
+          backdrop: {
+            sx: {
+              backdropFilter: isDarkMode
+                ? 'blur(12px) brightness(0.76) saturate(0.88)'
+                : 'blur(12px) brightness(0.9) saturate(0.94)',
+              WebkitBackdropFilter: isDarkMode
+                ? 'blur(12px) brightness(0.76) saturate(0.88)'
+                : 'blur(12px) brightness(0.9) saturate(0.94)',
+              backgroundColor: isDarkMode
+                ? 'rgba(6, 8, 12, 0.4)'
+                : 'rgba(22, 26, 34, 0.14)',
+            },
+          },
+          paper: {
+            sx: {
+              background: avatarModalSurface,
+              border: isDarkMode
+                ? '1px solid rgba(255,255,255,0.08)'
+                : '1px solid rgba(24,29,36,0.09)',
+              borderRadius: '16px',
+              boxShadow: isDarkMode
+                ? '0 34px 120px rgba(0,0,0,0.46)'
+                : '0 28px 88px rgba(18,28,45,0.16)',
+              clipPath: 'inset(0 round 16px)',
+              isolation: 'isolate',
+              overflow: 'hidden',
+              width: 'min(840px, calc(100vw - 32px))',
             },
           },
         }}
       >
         <Box
           sx={{
-            p: 2.5,
+            background: avatarModalSurface,
             display: 'flex',
-            flexDirection: 'column',
-            gap: 2,
-            bgcolor: theme.palette.background.paper,
+            minHeight: 530,
+            width: '100%',
           }}
         >
-          <Typography
-            variant="subtitle2"
-            color="text.secondary"
-            sx={{ fontWeight: 600 }}
+          <Box
+            sx={{
+              background: settingsSidebarSurface,
+              borderRight: `1px solid ${avatarSectionDivider}`,
+              display: 'flex',
+              flexDirection: 'column',
+              flexShrink: 0,
+              gap: 1,
+              minWidth: 200,
+              px: 1.1,
+              py: 1.15,
+              width: 200,
+            }}
           >
-            {t('core:message.generic.avatar_size', {
-              size: MAX_SIZE_AVATAR,
-              postProcess: 'capitalizeFirstChar',
+            {accountSettingsTabs.map((tab) => {
+              const TabIcon = tab.icon;
+              const isActive = activeSettingsTab === tab.key;
+
+              return (
+                <ButtonBase
+                  key={tab.key}
+                  onClick={() => setActiveSettingsTab(tab.key)}
+                  sx={{
+                    alignItems: 'center',
+                    background: isActive ? settingsSidebarActiveSurface : 'transparent',
+                    border: `1px solid ${
+                      isActive
+                        ? alpha(theme.palette.common.white, isDarkMode ? 0.075 : 0.18)
+                        : 'transparent'
+                    }`,
+                    borderLeft: `2px solid ${
+                      isActive ? settingsSidebarAccent : 'transparent'
+                    }`,
+                    borderRadius: '12px',
+                    color: isActive
+                      ? theme.palette.text.primary
+                      : alpha(theme.palette.text.secondary, 0.9),
+                    justifyContent: 'flex-start',
+                    minHeight: 52,
+                    px: 1.35,
+                    py: 1.15,
+                    transition:
+                      'background-color 160ms ease, border-color 160ms ease, color 160ms ease',
+                    width: '100%',
+                    '&:hover': {
+                      background: isActive
+                        ? settingsSidebarActiveSurface
+                        : alpha(theme.palette.common.white, isDarkMode ? 0.032 : 0.48),
+                    },
+                  }}
+                >
+                  <TabIcon sx={{ fontSize: 20, mr: 1.1 }} />
+                  <Typography
+                    sx={{
+                      fontSize: '0.86rem',
+                      fontWeight: isActive ? 700 : 600,
+                      letterSpacing: '0.01em',
+                    }}
+                  >
+                    {tab.label.toUpperCase()}
+                  </Typography>
+                </ButtonBase>
+              );
             })}
-          </Typography>
 
-          {/* Preview area */}
+            <Box sx={{ mt: 'auto', pt: 1.6, display: 'flex', justifyContent: 'center' }}>
+              <Tooltip
+                title={td(
+                  'privacy_mode_tooltip',
+                  'Privacy Mode: Blurs sensitive info for screen sharing'
+                )}
+              >
+                <ButtonBase
+                  onClick={handleTogglePrivacyMode}
+                  aria-label={td('toggle_privacy_mode', 'Toggle privacy mode')}
+                  sx={{
+                    borderRadius: '999px',
+                    color: isPrivacyModeActive
+                      ? theme.palette.text.primary
+                      : alpha(theme.palette.text.secondary, 0.78),
+                    height: 32,
+                    width: 32,
+                    '&:hover': {
+                      backgroundColor: alpha(
+                        theme.palette.common.white,
+                        isDarkMode ? 0.05 : 0.6
+                      ),
+                      color: theme.palette.text.primary,
+                    },
+                  }}
+                >
+                  {isPrivacyModeActive ? (
+                    <VisibilityOffOutlinedIcon sx={{ fontSize: 19 }} />
+                  ) : (
+                    <VisibilityOutlinedIcon sx={{ fontSize: 19 }} />
+                  )}
+                </ButtonBase>
+              </Tooltip>
+            </Box>
+          </Box>
+
           <Box
             sx={{
               display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              alignSelf: 'center',
-              width: 120,
-              height: 120,
-              borderRadius: '50%',
-              overflow: 'hidden',
-              bgcolor: theme.palette.action.hover,
-              border: `2px solid ${theme.palette.divider}`,
+              flex: 1,
+              flexDirection: 'column',
+              minWidth: 0,
             }}
           >
-            {avatarPreviewUrl ? (
-              <Box
-                component="img"
-                src={avatarPreviewUrl}
-                alt=""
-                sx={{
-                  width: '100%',
-                  height: '100%',
-                  objectFit: 'cover',
-                }}
-              />
-            ) : (
-              <PersonIcon
-                sx={{ fontSize: 56, color: theme.palette.text.disabled }}
-              />
-            )}
-          </Box>
-
-          <ImageUploader onPick={(file) => setAvatarFile(file)}>
-            <Button
-              variant="outlined"
-              fullWidth
+            <Box
               sx={{
-                borderColor: theme.palette.other.positive,
-                color: theme.palette.other.positive,
-                fontWeight: 600,
-                textTransform: 'none',
-                '&:hover': {
-                  borderColor: theme.palette.other.positive,
-                  bgcolor: `${theme.palette.other.positive}14`,
-                },
+                alignItems: 'flex-start',
+                display: 'flex',
+                justifyContent: 'space-between',
+                px: 2.3,
+                py: 1.8,
               }}
             >
-              {t('core:action.choose_image', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Button>
-          </ImageUploader>
-
-          {avatarFile?.name && (
-            <Typography
-              variant="caption"
-              color="text.secondary"
-              noWrap
-              sx={{ textAlign: 'center' }}
-            >
-              {avatarFile.name}
-            </Typography>
-          )}
+              <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1.1 }}>
+                <ActiveSettingsIcon
+                  sx={{
+                    color: alpha(theme.palette.text.primary, 0.9),
+                    fontSize: 22,
+                    mt: '2px',
+                  }}
+                />
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+                  <Typography
+                    id="account-settings-dialog-title"
+                    sx={{
+                      color: theme.palette.text.primary,
+                      fontSize: '0.98rem',
+                      fontWeight: 700,
+                      letterSpacing: '-0.02em',
+                    }}
+                  >
+                    {activeSettingsMeta.title}
+                  </Typography>
+                  <Typography
+                    id="account-settings-dialog-description"
+                    sx={{
+                      color: theme.palette.text.secondary,
+                      fontSize: '0.76rem',
+                      lineHeight: 1.45,
+                    }}
+                  >
+                    {activeSettingsMeta.description}
+                  </Typography>
+                </Box>
+              </Box>
+              <ButtonBase
+                onClick={closeAccountSettingsModal}
+                disabled={isChangeNameLoading}
+                sx={{
+                  borderRadius: '8px',
+                  color: theme.palette.text.secondary,
+                  height: 30,
+                  width: 30,
+                  '&:hover': {
+                    backgroundColor: alpha(
+                      theme.palette.common.white,
+                      isDarkMode ? 0.05 : 0.55
+                    ),
+                    color: theme.palette.text.primary,
+                  },
+                }}
+              >
+                <CloseIcon sx={{ fontSize: 17 }} />
+              </ButtonBase>
+            </Box>
 
-          {!name && (
             <Box
               sx={{
+                borderTop: `1px solid ${avatarSectionDivider}`,
                 display: 'flex',
-                gap: 1,
-                alignItems: 'center',
-                p: 1.25,
-                borderRadius: 1,
-                bgcolor:
-                  theme.palette.mode === 'dark'
-                    ? 'rgba(255,152,0,0.12)'
-                    : 'rgba(255,152,0,0.08)',
-                border: `1px solid ${theme.palette.warning.main}40`,
+                flex: 1,
+                flexDirection: 'column',
+                gap: 1.25,
+                overflowY: 'auto',
+                px: 2.3,
+                pb: 2.2,
+                pt: 1.9,
               }}
             >
-              <ErrorIcon
+              {activeSettingsTab === 'profile' ? (
+                <>
+                  <Box sx={{ display: 'grid', gap: 1.35 }}>
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '3px',
+                        py: 0.45,
+                      }}
+                    >
+                      <Typography
+                        sx={{
+                          color: theme.palette.text.secondary,
+                          fontSize: '0.7rem',
+                          fontWeight: 600,
+                          letterSpacing: '0.03em',
+                          textTransform: 'uppercase',
+                        }}
+                      >
+                        {td('current_name', 'Current name')}
+                      </Typography>
+                      <Typography
+                        className={privacyBlurClassName}
+                        sx={{
+                          color: theme.palette.text.primary,
+                          fontSize: '0.9rem',
+                          fontWeight: 700,
+                          letterSpacing: '-0.01em',
+                        }}
+                      >
+                        {name ?? td('no_name_registered', 'No name registered')}
+                      </Typography>
+                      {!hasRegisteredName ? (
+                        <ButtonBase
+                          aria-label={td('register_name', 'Register name')}
+                          onClick={() => {
+                            closeAccountSettingsModal();
+                            window.setTimeout(() => {
+                              executeEvent('openRegisterName', {});
+                            }, 80);
+                          }}
+                          sx={{
+                            alignItems: 'center',
+                            alignSelf: 'flex-start',
+                            borderRadius: '8px',
+                            color: theme.palette.primary.light,
+                            display: 'inline-flex',
+                            fontSize: '0.78rem',
+                            fontWeight: 600,
+                            gap: 0.45,
+                            mt: 0.55,
+                            px: 0.15,
+                            py: 0.35,
+                            transition: 'color 140ms ease, opacity 140ms ease',
+                            '&:hover': {
+                              color: theme.palette.primary.main,
+                            },
+                          }}
+                        >
+                          <Typography
+                            component="span"
+                            sx={{
+                              fontSize: 'inherit',
+                              fontWeight: 'inherit',
+                              lineHeight: 1.25,
+                            }}
+                          >
+                            {td('register_name', 'Register name')}
+                          </Typography>
+                          <ArrowForwardRoundedIcon sx={{ fontSize: 15 }} />
+                        </ButtonBase>
+                      ) : null}
+                    </Box>
+
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: '3px',
+                        py: 0.45,
+                      }}
+                    >
+                      <Typography
+                        sx={{
+                          color: theme.palette.text.secondary,
+                          fontSize: '0.7rem',
+                          fontWeight: 600,
+                          letterSpacing: '0.03em',
+                          textTransform: 'uppercase',
+                        }}
+                      >
+                        {td('wallet_address', 'Wallet address')}
+                      </Typography>
+                      <Typography
+                        className={privacyBlurClassName}
+                        sx={{
+                          color: theme.palette.text.primary,
+                          fontSize: '0.9rem',
+                          fontWeight: 700,
+                          letterSpacing: '-0.01em',
+                          wordBreak: 'break-all',
+                        }}
+                      >
+                        {address ?? td('unavailable', 'Unavailable')}
+                      </Typography>
+                    </Box>
+                  </Box>
+
+                  <Box
+                    sx={{
+                      alignItems: 'flex-start',
+                      backgroundColor: changeNameNoteTone.background,
+                      border: `1px solid ${changeNameNoteTone.border}`,
+                      borderRadius: '12px',
+                      display: 'flex',
+                      gap: 1,
+                      px: 1.25,
+                      py: 1.05,
+                    }}
+                  >
+                    <InfoOutlinedIcon
+                      sx={{
+                        color: changeNameNoteTone.icon,
+                        flexShrink: 0,
+                        fontSize: 18,
+                        mt: '1px',
+                      }}
+                    />
+                    <Typography
+                      sx={{
+                        color: theme.palette.text.secondary,
+                        fontSize: '0.76rem',
+                        lineHeight: 1.48,
+                      }}
+                    >
+                      {td(
+                        'names_qapp_actions_hint',
+                        'Buy, sell, and name-change actions should be handled in the Names Q-App.'
+                      )}
+                    </Typography>
+                  </Box>
+
+                  <Box
+                    sx={{
+                      borderTop: `1px solid ${avatarSectionDivider}`,
+                      mt: 0.35,
+                      pt: 1.15,
+                    }}
+                  >
+                    <Typography
+                      sx={{
+                        color: theme.palette.text.secondary,
+                        fontSize: '0.73rem',
+                        lineHeight: 1.5,
+                      }}
+                    >
+                      {td('open_the', 'Open the')}{' '}
+                      <Box
+                        component="span"
+                        sx={{
+                          color: theme.palette.text.primary,
+                          fontWeight: 700,
+                        }}
+                      >
+                        {td('names', 'Names')}
+                      </Box>
+                      {' '}
+                      {td(
+                        'names_qapp_hint_suffix',
+                        'Q-App for buying names, selling names, or changing your registered name.'
+                      )}
+                    </Typography>
+                  </Box>
+                </>
+              ) : null}
+
+              {activeSettingsTab === 'security' ? (
+                <>
+                  <Box
+                    sx={{
+                      alignItems: 'flex-start',
+                      backgroundColor: avatarWarningTone.background,
+                      border: `1px solid ${avatarWarningTone.border}`,
+                      borderRadius: '12px',
+                      display: 'flex',
+                      gap: 1,
+                      px: 1.25,
+                      py: 1.1,
+                    }}
+                  >
+                    <ErrorIcon
+                      sx={{
+                        color: avatarWarningTone.icon,
+                        flexShrink: 0,
+                        fontSize: 18,
+                        mt: '1px',
+                      }}
+                    />
+                    <Typography
+                      sx={{
+                        color: theme.palette.text.secondary,
+                        fontSize: '0.76rem',
+                        lineHeight: 1.45,
+                      }}
+                    >
+                      {td(
+                        'private_key_warning',
+                        'Never share your private key. Anyone who has it could potentially control this wallet and its funds.'
+                      )}
+                    </Typography>
+                  </Box>
+
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: '3px',
+                      py: 0.45,
+                    }}
+                  >
+                    <Typography
+                      sx={{
+                        color: theme.palette.text.secondary,
+                        fontSize: '0.7rem',
+                        fontWeight: 600,
+                        letterSpacing: '0.03em',
+                        textTransform: 'uppercase',
+                      }}
+                    >
+                      {td('wallet_address', 'Wallet address')}
+                    </Typography>
+                    <Typography
+                      className={privacyBlurClassName}
+                      sx={{
+                        color: theme.palette.text.primary,
+                        fontSize: '0.9rem',
+                        fontWeight: 700,
+                        letterSpacing: '-0.01em',
+                        wordBreak: 'break-all',
+                      }}
+                    >
+                      {address ?? td('unavailable', 'Unavailable')}
+                    </Typography>
+                  </Box>
+
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: 0.72,
+                      pt: 0.45,
+                    }}
+                  >
+                    <Typography
+                      sx={{
+                        color: theme.palette.text.secondary,
+                        display: 'block',
+                        fontSize: '0.74rem',
+                        fontWeight: 600,
+                        letterSpacing: '0.01em',
+                      }}
+                    >
+                      {td('wallet_password', 'Wallet password')}
+                    </Typography>
+                    <TextField
+                      autoComplete="off"
+                      fullWidth
+                      type="password"
+                      variant="outlined"
+                      size="small"
+                      name="hub-private-key-decrypt"
+                      onFocus={() => setIsSecurityPasswordEditable(true)}
+                      onMouseDown={() => setIsSecurityPasswordEditable(true)}
+                      onBlur={() => {
+                        if (!securityPassword) {
+                          setIsSecurityPasswordEditable(false);
+                        }
+                      }}
+                      onChange={(event) => setSecurityPassword(event.target.value)}
+                      value={securityPassword}
+                      placeholder={td(
+                        'wallet_password_placeholder',
+                        'Enter your wallet password'
+                      )}
+                      sx={compactNeutralFieldSx}
+                      InputProps={{
+                        readOnly: !isSecurityPasswordEditable,
+                      }}
+                      inputProps={{
+                        autoComplete: 'new-password',
+                        'data-1p-ignore': 'true',
+                        'data-lpignore': 'true',
+                        spellCheck: 'false',
+                      }}
+                    />
+                  </Box>
+
+                  <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
+                    <LoadingButton
+                      loading={isRevealingPrivateKey}
+                      disabled={!securityPassword.trim() || !rawWallet}
+                      onClick={revealPrivateKey}
+                      variant="contained"
+                      sx={{
+                        borderRadius: '10px',
+                        ...getBlueTier1ButtonSx(),
+                        minHeight: 40,
+                        px: 2,
+                        textTransform: 'none',
+                        '&.Mui-disabled': {
+                          background: isDarkMode
+                            ? 'rgba(255,255,255,0.035)'
+                            : 'rgba(24,29,36,0.04)',
+                          border: isDarkMode
+                            ? '1px solid rgba(255,255,255,0.055)'
+                            : '1px solid rgba(24,29,36,0.06)',
+                          boxShadow: 'none',
+                          color: isDarkMode
+                            ? 'rgba(255,255,255,0.34)'
+                            : 'rgba(24,29,36,0.34)',
+                        },
+                      }}
+                    >
+                      {td('decrypt', 'Decrypt')}
+                    </LoadingButton>
+                    <LoadingButton
+                      disabled={!revealedPrivateKey}
+                      onClick={copyPrivateKey}
+                      variant="outlined"
+                      sx={{
+                        borderColor: avatarFieldBorder,
+                        borderRadius: '10px',
+                        color: theme.palette.text.primary,
+                        minHeight: 40,
+                        px: 2,
+                        textTransform: 'none',
+                      }}
+                    >
+                      {td('copy_key', 'Copy key')}
+                    </LoadingButton>
+                  </Box>
+
+                  {privateKeyError ? (
+                    <Typography
+                      sx={{
+                        color: avatarWarningTone.icon,
+                        fontSize: '0.74rem',
+                        fontWeight: 600,
+                        lineHeight: 1.4,
+                      }}
+                    >
+                      {privateKeyError}
+                    </Typography>
+                  ) : null}
+
+                  <Box
+                    sx={{
+                      alignItems: 'flex-start',
+                      background: avatarModalSurfaceSoft,
+                      border: `1px solid ${avatarFieldBorder}`,
+                      borderRadius: '12px',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: '6px',
+                      minHeight: 98,
+                      px: 1.35,
+                      py: 1.15,
+                    }}
+                  >
+                    <Typography
+                      sx={{
+                        color: theme.palette.text.secondary,
+                        fontSize: '0.7rem',
+                        fontWeight: 600,
+                        letterSpacing: '0.03em',
+                        textTransform: 'uppercase',
+                      }}
+                    >
+                      {td('private_key', 'Private key')}
+                    </Typography>
+                    <Typography
+                      className={revealedPrivateKey ? privacyBlurClassName : undefined}
+                      sx={{
+                        color: revealedPrivateKey
+                          ? theme.palette.text.primary
+                          : theme.palette.text.secondary,
+                        fontFamily: 'monospace',
+                        fontSize: revealedPrivateKey ? '0.78rem' : '0.76rem',
+                        fontWeight: revealedPrivateKey ? 600 : 500,
+                        lineHeight: 1.45,
+                        userSelect: revealedPrivateKey ? 'text' : 'none',
+                        wordBreak: 'break-all',
+                      }}
+                    >
+                      {revealedPrivateKey ||
+                        td(
+                          'private_key_hint',
+                          'Decrypt your private key only when you need to recover or migrate this wallet.'
+                        )}
+                    </Typography>
+                  </Box>
+                </>
+              ) : null}
+
+              {activeSettingsTab === 'developer' ? (
+                <Box
+                  sx={{
+                    background: avatarModalSurfaceSoft,
+                    border: `1px solid ${avatarFieldBorder}`,
+                    borderRadius: '12px',
+                    overflow: 'hidden',
+                  }}
+                >
+                  <Box
+                    sx={{
+                      alignItems: 'center',
+                      display: 'flex',
+                      gap: 1.2,
+                      justifyContent: 'space-between',
+                      px: 1.35,
+                      py: 1.2,
+                    }}
+                  >
+                    <Box sx={{ minWidth: 0 }}>
+                      <Typography
+                        sx={{
+                          color: theme.palette.text.primary,
+                          fontSize: '0.82rem',
+                          fontWeight: 700,
+                          letterSpacing: '0.01em',
+                        }}
+                      >
+                        {td('enable_dev_mode', 'Enable Dev Mode')}
+                      </Typography>
+                      <Typography
+                        sx={{
+                          color: theme.palette.text.secondary,
+                          fontSize: '0.75rem',
+                          lineHeight: 1.45,
+                          mt: 0.4,
+                        }}
+                      >
+                        {td(
+                          'enable_dev_mode_desc',
+                          'Unlock local developer surfaces, diagnostics, and testing tools across the Hub.'
+                        )}
+                      </Typography>
+                    </Box>
+                    <Switch
+                      checked={isEnabledDevMode}
+                      onChange={handleToggleDevMode}
+                      sx={settingsSwitchSx}
+                    />
+                  </Box>
+
+                  <Box
+                    sx={{
+                      alignItems: 'flex-start',
+                      backgroundColor: developerNoticeTone.background,
+                      borderTop: `1px solid ${avatarSectionDivider}`,
+                      display: 'flex',
+                      gap: 1,
+                      px: 1.35,
+                      py: 1.1,
+                    }}
+                  >
+                    <InfoOutlinedIcon
+                      sx={{
+                        color: developerNoticeTone.icon,
+                        flexShrink: 0,
+                        fontSize: 18,
+                        mt: '1px',
+                      }}
+                    />
+                    <Typography
+                      sx={{
+                        color: theme.palette.text.secondary,
+                        fontSize: '0.74rem',
+                        lineHeight: 1.45,
+                      }}
+                    >
+                      {td(
+                        'dev_mode_tip',
+                        'Tip: Once enabled, a new Developer Tools icon will appear in your sidebar. You might need to hover over the left edge to reveal it.'
+                      )}
+                    </Typography>
+                  </Box>
+                </Box>
+              ) : null}
+
+              {activeSettingsTab === 'blocked' ? (
+                <Box
+                  sx={{
+                    background: avatarModalSurfaceSoft,
+                    border: `1px solid ${avatarFieldBorder}`,
+                    borderRadius: '12px',
+                    overflow: 'hidden',
+                  }}
+                >
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: 1,
+                      px: 1.35,
+                      py: 1.2,
+                    }}
+                  >
+                    <Box
+                      sx={{
+                        alignItems: 'flex-start',
+                        display: 'flex',
+                        gap: 1.2,
+                        justifyContent: 'space-between',
+                      }}
+                    >
+                      <Box sx={{ minWidth: 0 }}>
+                        <Typography
+                          sx={{
+                            color: theme.palette.text.primary,
+                            fontSize: '0.82rem',
+                            fontWeight: 700,
+                            letterSpacing: '0.01em',
+                          }}
+                        >
+                          {td('block_list', 'Block list')}
+                        </Typography>
+                        <Typography
+                          sx={{
+                            color: theme.palette.text.secondary,
+                            fontSize: '0.75rem',
+                            lineHeight: 1.45,
+                            mt: 0.4,
+                          }}
+                        >
+                          {td(
+                            'block_list_desc',
+                            'Review blocked names and addresses, then unblock accounts whenever you are ready.'
+                          )}
+                        </Typography>
+                      </Box>
+                      <Typography
+                        sx={{
+                          color: theme.palette.text.secondary,
+                          flexShrink: 0,
+                          fontSize: '0.73rem',
+                          fontWeight: 700,
+                          lineHeight: 1.4,
+                        }}
+                      >
+                        {td('blocked_count', '{{count}} blocked', {
+                          count: blockedCount,
+                        })}
+                      </Typography>
+                    </Box>
+
+                    {blockedCount > 0 ? (
+                      <Box sx={{ display: 'grid', gap: 1 }}>
+                        {blockedNameEntries.length > 0 ? (
+                          <Box sx={{ display: 'grid', gap: 0.7 }}>
+                            <Typography
+                              sx={{
+                                color: theme.palette.text.secondary,
+                                fontSize: '0.68rem',
+                                fontWeight: 700,
+                                letterSpacing: '0.04em',
+                                textTransform: 'uppercase',
+                              }}
+                            >
+                              {td('names', 'Names')}
+                            </Typography>
+                            {blockedNameEntries.map((blockedName) => (
+                              <Box
+                                key={blockedName}
+                                sx={{
+                                  alignItems: 'center',
+                                  borderRadius: '10px',
+                                  display: 'flex',
+                                  gap: 1,
+                                  justifyContent: 'space-between',
+                                  px: 0.85,
+                                  py: 0.55,
+                                  transition: 'background-color 0.14s ease',
+                                  '&:hover': {
+                                    backgroundColor: alpha(
+                                      theme.palette.primary.main,
+                                      0.08
+                                    ),
+                                  },
+                                }}
+                              >
+                                <Typography
+                                  sx={{
+                                    color: theme.palette.text.primary,
+                                    fontSize: '0.8rem',
+                                    fontWeight: 600,
+                                    minWidth: 0,
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                  }}
+                                >
+                                  {blockedName}
+                                </Typography>
+                                <ButtonBase
+                                  onClick={() =>
+                                    removeBlockFromList(undefined, blockedName)
+                                  }
+                                  sx={{
+                                    borderRadius: '8px',
+                                    color: theme.palette.primary.light,
+                                    flexShrink: 0,
+                                    fontSize: '0.74rem',
+                                    fontWeight: 700,
+                                    px: 0.9,
+                                    py: 0.55,
+                                    '&:hover': {
+                                      backgroundColor: alpha(
+                                        theme.palette.primary.main,
+                                        0.1
+                                      ),
+                                    },
+                                  }}
+                                >
+                                  {td('unblock', 'Unblock')}
+                                </ButtonBase>
+                              </Box>
+                            ))}
+                          </Box>
+                        ) : null}
+
+                        {blockedAddressEntries.length > 0 ? (
+                          <Box sx={{ display: 'grid', gap: 0.7 }}>
+                            <Typography
+                              sx={{
+                                color: theme.palette.text.secondary,
+                                fontSize: '0.68rem',
+                                fontWeight: 700,
+                                letterSpacing: '0.04em',
+                                textTransform: 'uppercase',
+                              }}
+                            >
+                              {td('addresses', 'Addresses')}
+                            </Typography>
+                            {blockedAddressEntries.map((blockedAddress) => (
+                              <Box
+                                key={blockedAddress}
+                                sx={{
+                                  alignItems: 'center',
+                                  borderRadius: '10px',
+                                  display: 'flex',
+                                  gap: 1,
+                                  justifyContent: 'space-between',
+                                  px: 0.85,
+                                  py: 0.55,
+                                  transition: 'background-color 0.14s ease',
+                                  '&:hover': {
+                                    backgroundColor: alpha(
+                                      theme.palette.primary.main,
+                                      0.08
+                                    ),
+                                  },
+                                }}
+                              >
+                                <Typography
+                                  sx={{
+                                    color: theme.palette.text.primary,
+                                    fontSize: '0.8rem',
+                                    fontWeight: 600,
+                                    minWidth: 0,
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                  }}
+                                >
+                                  {blockedAddress}
+                                </Typography>
+                                <ButtonBase
+                                  onClick={() =>
+                                    removeBlockFromList(blockedAddress, undefined)
+                                  }
+                                  sx={{
+                                    borderRadius: '8px',
+                                    color: theme.palette.primary.light,
+                                    flexShrink: 0,
+                                    fontSize: '0.74rem',
+                                    fontWeight: 700,
+                                    px: 0.9,
+                                    py: 0.55,
+                                    '&:hover': {
+                                      backgroundColor: alpha(
+                                        theme.palette.primary.main,
+                                        0.1
+                                      ),
+                                    },
+                                  }}
+                                >
+                                  {td('unblock', 'Unblock')}
+                                </ButtonBase>
+                              </Box>
+                            ))}
+                          </Box>
+                        ) : null}
+                      </Box>
+                    ) : (
+                      <Typography
+                        sx={{
+                          color: theme.palette.text.secondary,
+                          fontSize: '0.75rem',
+                          lineHeight: 1.45,
+                        }}
+                      >
+                        {td('no_blocked_accounts', 'No blocked accounts yet.')}
+                      </Typography>
+                    )}
+                  </Box>
+                </Box>
+              ) : null}
+
+              {activeSettingsTab === 'system' ? (
+                <Box
+                  sx={{
+                    background: avatarModalSurfaceSoft,
+                    border: `1px solid ${avatarFieldBorder}`,
+                    borderRadius: '12px',
+                    overflow: 'hidden',
+                  }}
+                >
+                  <Box
+                    sx={{
+                      alignItems: 'center',
+                      display: 'flex',
+                      gap: 1.2,
+                      justifyContent: 'space-between',
+                      px: 1.35,
+                      py: 1.2,
+                    }}
+                  >
+                    <Box sx={{ minWidth: 0 }}>
+                      <Typography
+                        sx={{
+                          color: theme.palette.text.primary,
+                          fontSize: '0.82rem',
+                          fontWeight: 700,
+                          letterSpacing: '0.01em',
+                        }}
+                      >
+                        {td('reduce_app_notifications', 'Reduce App Notifications')}
+                      </Typography>
+                      <Typography
+                        sx={{
+                          color: theme.palette.text.secondary,
+                          fontSize: '0.75rem',
+                          lineHeight: 1.45,
+                          mt: 0.4,
+                        }}
+                      >
+                        {td(
+                          'reduce_app_notifications_desc',
+                          'Turn on to mute desktop push notifications. Leave off for normal Hub alerts.'
+                        )}
+                      </Typography>
+                    </Box>
+                    <Switch
+                      checked={!areAppNotificationsEnabled}
+                      onChange={handleToggleAppNotifications}
+                      sx={settingsSwitchSx}
+                    />
+                  </Box>
+
+                  <Box
+                    sx={{
+                      borderTop: `1px solid ${avatarSectionDivider}`,
+                      mx: 1.35,
+                    }}
+                  />
+
+                  <Box
+                    sx={{
+                      alignItems: 'center',
+                      display: 'flex',
+                      gap: 1.2,
+                      justifyContent: 'space-between',
+                      px: 1.35,
+                      py: 1.2,
+                    }}
+                  >
+                    <Box sx={{ minWidth: 0 }}>
+                      <Typography
+                        sx={{
+                          color: theme.palette.text.primary,
+                          fontSize: '0.82rem',
+                          fontWeight: 700,
+                          letterSpacing: '0.01em',
+                        }}
+                      >
+                        {td('reduce_ui_animations', 'Reduce UI Animations')}
+                      </Typography>
+                      <Typography
+                        sx={{
+                          color: theme.palette.text.secondary,
+                          fontSize: '0.75rem',
+                          lineHeight: 1.45,
+                          mt: 0.4,
+                        }}
+                      >
+                        {td(
+                          'reduce_ui_animations_desc',
+                          'Turn on to minimize motion throughout the Hub. Leave off for the normal animated interface.'
+                        )}
+                      </Typography>
+                    </Box>
+                    <Switch
+                      checked={!areUiAnimationsEnabled}
+                      onChange={handleToggleUiAnimations}
+                      sx={settingsSwitchSx}
+                    />
+                  </Box>
+
+                  <Box
+                    sx={{
+                      borderTop: `1px solid ${avatarSectionDivider}`,
+                      mx: 1.35,
+                    }}
+                  />
+
+                  <Box
+                    sx={{
+                      alignItems: 'center',
+                      display: 'flex',
+                      gap: 1.2,
+                      justifyContent: 'space-between',
+                      px: 1.35,
+                      py: 1.2,
+                    }}
+                  >
+                    <Box sx={{ minWidth: 0 }}>
+                      <Typography
+                        sx={{
+                          color: theme.palette.text.primary,
+                          fontSize: '0.82rem',
+                          fontWeight: 700,
+                          letterSpacing: '0.01em',
+                        }}
+                      >
+                        {td('pinned_qapp_backup', 'Pinned Q-App backup')}
+                      </Typography>
+                      <Typography
+                        sx={{
+                          color: theme.palette.text.secondary,
+                          fontSize: '0.75rem',
+                          lineHeight: 1.45,
+                          mt: 0.4,
+                        }}
+                      >
+                        {td(
+                          'pinned_qapp_backup_desc',
+                          'Save your pinned Q-Apps to encrypted QDN settings so the same layout can follow you across devices.'
+                        )}
+                      </Typography>
+                    </Box>
+                    <Tooltip title={td('manage_backup', 'Manage backup')}>
+                      <Box component="span" sx={{ flexShrink: 0 }}>
+                        <Save
+                          isDesktop
+                          disableWidth={false}
+                          myName={userInfo?.name}
+                          toolbarModule
+                          buttonSx={{
+                            alignItems: 'center',
+                            backgroundColor: avatarModalSurfaceSoft,
+                            border: `1px solid ${avatarFieldBorder}`,
+                            borderRadius: '10px',
+                            display: 'inline-flex',
+                            height: 38,
+                            justifyContent: 'center',
+                            width: 42,
+                            '&:hover': {
+                              backgroundColor: alpha(
+                                theme.palette.primary.main,
+                                isDarkMode ? 0.12 : 0.08
+                              ),
+                              borderColor: alpha(theme.palette.primary.main, 0.32),
+                            },
+                          }}
+                        />
+                      </Box>
+                    </Tooltip>
+                  </Box>
+                </Box>
+              ) : null}
+            </Box>
+          </Box>
+        </Box>
+      </Dialog>
+
+      <Portal>
+        <AnimatePresence>
+          {isAvatarPanelOpen && (
+            <>
+              <Box
+                component={motion.button}
+                type="button"
+                aria-label="Close avatar panel"
+                initial={{
+                  opacity: 0,
+                  backdropFilter: 'blur(0px) brightness(1) saturate(1)',
+                  WebkitBackdropFilter: 'blur(0px) brightness(1) saturate(1)',
+                  backgroundColor: isDarkMode
+                    ? 'rgba(6, 8, 12, 0)'
+                    : 'rgba(22, 26, 34, 0)',
+                }}
+                animate={{
+                  opacity: 1,
+                  backdropFilter: isDarkMode
+                    ? 'blur(12px) brightness(0.76) saturate(0.88)'
+                    : 'blur(12px) brightness(0.9) saturate(0.94)',
+                  WebkitBackdropFilter: isDarkMode
+                    ? 'blur(12px) brightness(0.76) saturate(0.88)'
+                    : 'blur(12px) brightness(0.9) saturate(0.94)',
+                  backgroundColor: isDarkMode
+                    ? 'rgba(6, 8, 12, 0.4)'
+                    : 'rgba(22, 26, 34, 0.14)',
+                }}
+                exit={{
+                  opacity: 0,
+                  backdropFilter: 'blur(0px) brightness(1) saturate(1)',
+                  WebkitBackdropFilter: 'blur(0px) brightness(1) saturate(1)',
+                  backgroundColor: isDarkMode
+                    ? 'rgba(6, 8, 12, 0)'
+                    : 'rgba(22, 26, 34, 0)',
+                }}
+                transition={{
+                  duration: prefersReducedMotion ? 0.08 : 0.14,
+                  ease: [0.2, 0, 0, 1],
+                  delay: prefersReducedMotion ? 0 : 0.08,
+                }}
+                onClick={closeAvatarPanel}
                 sx={{
-                  color: theme.palette.warning.main,
-                  fontSize: 20,
-                  flexShrink: 0,
+                  appearance: 'none',
+                  border: 0,
+                  inset: 0,
+                  padding: 0,
+                  position: 'fixed',
+                  zIndex: 1298,
                 }}
               />
-              <Typography variant="body2" color="text.secondary">
-                {t('group:message.generic.avatar_registered_name', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </Typography>
-            </Box>
-          )}
 
-          <LoadingButton
-            loading={isAvatarLoading}
-            disabled={!avatarFile || !name}
-            onClick={publishAvatar}
-            variant="contained"
-            fullWidth
-            sx={{
-              bgcolor: theme.palette.other.positive,
-              color: theme.palette.getContrastText(
-                theme.palette.other.positive
-              ),
-              fontWeight: 600,
-              textTransform: 'none',
-              py: 1.25,
-              '&:hover': {
-                bgcolor: theme.palette.other.positive,
-                filter: 'brightness(1.08)',
-              },
-              '&.Mui-disabled': {
-                bgcolor: theme.palette.action.disabledBackground,
-                color: theme.palette.action.disabled,
-              },
-            }}
-          >
-            {t('group:action.publish_avatar', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </LoadingButton>
-        </Box>
-      </Popover>
-
-      {/* QR Code popover */}
-      <Popover
-        open={Boolean(qrAnchorEl)}
-        anchorEl={qrAnchorEl}
-        onClose={() => setQrAnchorEl(null)}
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-        transformOrigin={{ vertical: 'top', horizontal: 'center' }}
-      >
-        <Box sx={{ p: 2 }}>
-          <QRCode
-            value={address ?? ''}
-            size={160}
-            level="M"
-            bgColor="#FFFFFF"
-            fgColor="#000000"
-          />
-        </Box>
-      </Popover>
+              <Box
+                component={motion.div}
+                initial={avatarPanelAnimation.initial}
+                animate={avatarPanelAnimation.animate}
+                exit={avatarPanelAnimation.exit}
+                transition={{
+                  duration: prefersReducedMotion ? 0.14 : 0.28,
+                  ease: [0.16, 0.9, 0.2, 1],
+                }}
+                onClick={(event) => event.stopPropagation()}
+                sx={{
+                  left: `${avatarPanelLayout.left}px`,
+                  overflow: 'visible',
+                  position: 'fixed',
+                  top: `${avatarPanelLayout.top}px`,
+                  transformOrigin: 'top left',
+                  width: `${avatarPanelLayout.width}px`,
+                  zIndex: 1299,
+                }}
+              >
+                <Box
+                  ref={avatarPanelRef}
+                  sx={{
+                    background: avatarModalSurface,
+                    border: isDarkMode
+                      ? '1px solid rgba(255,255,255,0.08)'
+                      : '1px solid rgba(24,29,36,0.09)',
+                    borderRadius: '14px',
+                    boxShadow:
+                      isDarkMode
+                        ? '0 34px 120px rgba(0,0,0,0.46)'
+                        : '0 28px 88px rgba(18,28,45,0.16)',
+                    clipPath: 'inset(0 round 14px)',
+                    isolation: 'isolate',
+                    overflow: 'hidden',
+                  }}
+                >
+                  <Box
+                    component={motion.div}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    transition={{
+                      duration: prefersReducedMotion ? 0.08 : 0.14,
+                      delay: prefersReducedMotion ? 0 : 0.1,
+                    }}
+                    sx={{
+                      background: avatarModalSurface,
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: 0,
+                    }}
+                  >
+                    <Box
+                      sx={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        justifyContent: 'space-between',
+                        px: 2.25,
+                        py: 1.7,
+                      }}
+                    >
+                      <Box
+                        sx={{ display: 'flex', flexDirection: 'column', gap: '4px' }}
+                      >
+                        <Typography
+                          sx={{
+                            color: theme.palette.text.primary,
+                            fontSize: '0.98rem',
+                            fontWeight: 700,
+                            letterSpacing: '-0.02em',
+                          }}
+                        >
+                          Update avatar
+                        </Typography>
+                        <Typography
+                          sx={{
+                            color: theme.palette.text.secondary,
+                            fontSize: '0.76rem',
+                            lineHeight: 1.45,
+                          }}
+                        >
+                          {t('core:message.generic.avatar_size', {
+                            size: MAX_SIZE_AVATAR,
+                            postProcess: 'capitalizeFirstChar',
+                          })}
+                        </Typography>
+                      </Box>
+                      <ButtonBase
+                        onClick={closeAvatarPanel}
+                        sx={{
+                          borderRadius: '8px',
+                          color: theme.palette.text.secondary,
+                          height: 30,
+                          width: 30,
+                          '&:hover': {
+                            backgroundColor: alpha(
+                              theme.palette.common.white,
+                              isDarkMode ? 0.05 : 0.55
+                            ),
+                            color: theme.palette.text.primary,
+                          },
+                        }}
+                      >
+                        <CloseIcon sx={{ fontSize: 17 }} />
+                      </ButtonBase>
+                    </Box>
+
+                    <Box
+                      sx={{
+                        borderTop: `1px solid ${avatarSectionDivider}`,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 1.15,
+                        px: 2.25,
+                        pb: 2.25,
+                        pt: 2,
+                      }}
+                    >
+                      <Box
+                        sx={{
+                          alignItems: 'center',
+                          display: 'flex',
+                          borderBottom: `1px solid ${avatarSectionDivider}`,
+                          justifyContent: 'center',
+                          minHeight: 146,
+                          pb: 1.35,
+                        }}
+                      >
+                        <Box
+                          sx={{
+                            alignItems: 'center',
+                            background: avatarFieldSurface,
+                            border: `1px solid ${avatarFieldBorder}`,
+                            borderRadius: '50%',
+                            boxShadow: avatarFieldInsetShadow,
+                            display: 'flex',
+                            height: 112,
+                            justifyContent: 'center',
+                            overflow: 'hidden',
+                            width: 112,
+                          }}
+                        >
+                          {avatarPreviewUrl ? (
+                            <Box
+                              component="img"
+                              src={avatarPreviewUrl}
+                              alt=""
+                              sx={{
+                                width: '100%',
+                                height: '100%',
+                                objectFit: 'cover',
+                              }}
+                            />
+                          ) : (
+                            <PersonIcon
+                              sx={{ fontSize: 52, color: theme.palette.text.disabled }}
+                            />
+                          )}
+                        </Box>
+                      </Box>
+
+                      <ImageUploader onPick={(file) => setAvatarFile(file)}>
+                        <ButtonBase
+                          sx={{
+                            alignItems: 'center',
+                            background: avatarFieldSurface,
+                            border: `1px solid ${avatarFieldBorder}`,
+                            borderRadius: '10px',
+                            boxShadow: avatarFieldInsetShadow,
+                            color: theme.palette.text.primary,
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            px: 1.35,
+                            py: 1.1,
+                            textAlign: 'left',
+                            transition:
+                              'background 160ms ease, border-color 160ms ease, transform 120ms ease, box-shadow 160ms ease',
+                            width: '100%',
+                            '&:hover': {
+                              background: avatarFieldSurfaceHover,
+                              borderColor: avatarFieldHoverBorder,
+                              boxShadow: isDarkMode
+                                ? '0 10px 24px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.042)'
+                                : '0 6px 14px rgba(24,32,44,0.08), inset 0 1px 0 rgba(255,255,255,0.54)',
+                              transform: 'translateY(-1px)',
+                            },
+                          }}
+                        >
+                          <Box
+                            sx={{
+                              display: 'flex',
+                              flexDirection: 'column',
+                              gap: '3px',
+                            }}
+                          >
+                            <Typography
+                              sx={{
+                              color: theme.palette.text.primary,
+                              fontSize: '0.84rem',
+                              fontWeight: 700,
+                            }}
+                          >
+                            {avatarFile
+                                ? 'Replace image'
+                                : t('core:action.choose_image', {
+                                    postProcess: 'capitalizeFirstChar',
+                                  })}
+                            </Typography>
+                            <Typography
+                              sx={{
+                                color: theme.palette.text.secondary,
+                                fontSize: '0.7rem',
+                                lineHeight: 1.35,
+                              }}
+                            >
+                              PNG, JPG, WEBP or GIF
+                            </Typography>
+                          </Box>
+                          <Box
+                            sx={{
+                              alignItems: 'center',
+                              background: avatarModalSurfaceSoft,
+                              border: `1px solid ${avatarFieldBorder}`,
+                              borderRadius: '999px',
+                              color: theme.palette.text.primary,
+                              display: 'inline-flex',
+                              fontSize: '0.72rem',
+                              fontWeight: 600,
+                              letterSpacing: '0.01em',
+                              minHeight: 30,
+                              px: 1.2,
+                            }}
+                          >
+                            Browse
+                          </Box>
+                        </ButtonBase>
+                      </ImageUploader>
+
+                      {avatarFile?.name && (
+                        <Typography
+                          noWrap
+                          sx={{
+                            color: theme.palette.text.secondary,
+                            fontSize: '0.72rem',
+                            lineHeight: 1.35,
+                            px: 0.15,
+                          }}
+                        >
+                          {avatarFile.name}
+                        </Typography>
+                      )}
+
+                      {!name && (
+                        <Box
+                          sx={{
+                            alignItems: 'flex-start',
+                            backgroundColor: avatarWarningTone.background,
+                            border: `1px solid ${avatarWarningTone.border}`,
+                            borderRadius: '12px',
+                            display: 'flex',
+                            gap: 1,
+                            px: 1.25,
+                            py: 1.15,
+                          }}
+                        >
+                          <ErrorIcon
+                            sx={{
+                              color: avatarWarningTone.icon,
+                              fontSize: 18,
+                              flexShrink: 0,
+                              mt: '1px',
+                            }}
+                          />
+                          <Typography
+                            sx={{
+                              color: theme.palette.text.secondary,
+                              fontSize: '0.78rem',
+                              lineHeight: 1.45,
+                            }}
+                          >
+                            {t('group:message.generic.avatar_registered_name', {
+                              postProcess: 'capitalizeFirstChar',
+                            })}
+                          </Typography>
+                        </Box>
+                      )}
+
+                      <LoadingButton
+                        loading={isAvatarLoading}
+                        disabled={!avatarFile || !name}
+                        onClick={publishAvatar}
+                        variant="contained"
+                        fullWidth
+                        sx={{
+                          borderRadius: '10px',
+                          ...getBlueTier1ButtonSx(),
+                          fontSize: '0.82rem',
+                          fontWeight: 600,
+                          minHeight: 42,
+                          textTransform: 'none',
+                          '&.Mui-disabled': {
+                            background: isDarkMode
+                              ? 'rgba(255,255,255,0.035)'
+                              : 'rgba(24,29,36,0.04)',
+                            border: isDarkMode
+                              ? '1px solid rgba(255,255,255,0.055)'
+                              : '1px solid rgba(24,29,36,0.06)',
+                            boxShadow: 'none',
+                            color: isDarkMode
+                              ? 'rgba(255,255,255,0.34)'
+                              : 'rgba(24,29,36,0.34)',
+                          },
+                        }}
+                      >
+                        {t('group:action.publish_avatar', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
+                      </LoadingButton>
+                    </Box>
+                  </Box>
+                </Box>
+              </Box>
+            </>
+          )}
+        </AnimatePresence>
+      </Portal>
     </Box>
   );
 };
diff --git a/src/components/Group/HomeQortinoWorkspaceCard.tsx b/src/components/Group/HomeQortinoWorkspaceCard.tsx
new file mode 100644
index 00000000..fae5e9cf
--- /dev/null
+++ b/src/components/Group/HomeQortinoWorkspaceCard.tsx
@@ -0,0 +1,6498 @@
+import {
+  Avatar,
+  Box,
+  Button,
+  ButtonBase,
+  CircularProgress,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Portal,
+  TextField,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useAtomValue } from 'jotai';
+import {
+  type DragEvent as ReactDragEvent,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+  memo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import AutoAwesomeRoundedIcon from '@mui/icons-material/AutoAwesomeRounded';
+import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import DriveFileRenameOutlineRoundedIcon from '@mui/icons-material/DriveFileRenameOutlineRounded';
+import EditRoundedIcon from '@mui/icons-material/EditRounded';
+import GraphicEqRoundedIcon from '@mui/icons-material/GraphicEqRounded';
+import ForumRoundedIcon from '@mui/icons-material/ForumRounded';
+import MailOutlineRoundedIcon from '@mui/icons-material/MailOutlineRounded';
+import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
+import ShoppingBagRoundedIcon from '@mui/icons-material/ShoppingBagRounded';
+import SpaRoundedIcon from '@mui/icons-material/SpaRounded';
+import SupportAgentRoundedIcon from '@mui/icons-material/SupportAgentRounded';
+import UploadRoundedIcon from '@mui/icons-material/UploadRounded';
+import VideoLibraryRoundedIcon from '@mui/icons-material/VideoLibraryRounded';
+import AddRoundedIcon from '@mui/icons-material/AddRounded';
+import AppsRoundedIcon from '@mui/icons-material/AppsRounded';
+import LibraryMusicRoundedIcon from '@mui/icons-material/LibraryMusicRounded';
+import TuneRoundedIcon from '@mui/icons-material/TuneRounded';
+import SchoolRoundedIcon from '@mui/icons-material/SchoolRounded';
+import {
+  balanceAtom,
+  resourceKeySelector,
+  txListAtom,
+  userInfoAtom,
+} from '../../atoms/global';
+import { getArbitraryEndpointReact, getBaseApiReact } from '../../App';
+import LogoSelected from '../../assets/svgs/LogoSelected.svg';
+import ErrorBoundary from '../../common/ErrorBoundary';
+import { useFetchResources } from '../../hooks/useFetchResources';
+import {
+  executeEvent,
+  subscribeToEvent,
+  unsubscribeFromEvent,
+} from '../../utils/events';
+import { openHttpUrlExternally } from '../../utils/openExternalHttp';
+import {
+  dashboardPanelSx,
+  handleDashboardPanelPointerLeave,
+  handleDashboardPanelPointerMove,
+  useDashboardPanelMouseLight,
+} from './dashboardPanelEffects';
+import { QortalRequestBubbleIcon } from './GroupActivityEmptyStateGraphic';
+import {
+  GROUP_ACTIVITY_BLUE,
+  APP_BLUE_SURFACE_TEXT,
+  getBlueAmbientLineBackground,
+  getBlueTier1ButtonSx,
+  getBlueTier2BadgeSx,
+} from './groupActivityColorSystem';
+import { GETTING_STARTED_LS_KEY } from './gettingStartedStorage';
+import {
+  DEFAULT_QORTINO_COMPANION_DEBUG_SETTINGS,
+  type QortinoCompanionDebugSettings,
+} from './qortinoCompanionDebug';
+import {
+  DEFAULT_QORTINO_LOOK_DEBUG_SETTINGS,
+  type QortinoLookDebugSettings,
+} from './qortinoLookDebug';
+import {
+  DEFAULT_QORTINO_LAYOUT_DEBUG_SETTINGS,
+  type QortinoLayoutDebugSettings,
+} from './qortinoLayoutDebug';
+import {
+  fetchEarbumpRecentTracks,
+  fetchEarbumpTrackById,
+  searchEarbumpTracks,
+  type EarbumpTrack,
+} from './earbumpLibraryApi';
+import {
+  getSharedEarbumpAudio,
+  getSharedEarbumpTrackSnapshot,
+  setSharedEarbumpTrackSnapshot,
+  stopSharedEarbumpPlayback,
+} from './earbumpSharedAudio';
+import {
+  MusicCoverArt,
+  QortinoMusicPlayer,
+  type RepeatMode,
+} from './QortinoMusicPlayer';
+import { Confetti } from '../ui/confetti';
+import { DotPattern } from '../ui/dot-pattern';
+import {
+  QORTINO_DONATION_BUBBLE_MESSAGE,
+  QORTINO_DONATION_COMPLETED_EVENT,
+  QORTINO_DONATION_DRAG_TYPE,
+  QORTINO_DONATION_GRATEFUL_DURATION_MS,
+  QORTINO_DONATION_OVERLAY_DURATION_MS,
+  QORTINO_DONATION_PREFILL_NAME,
+  QORTINO_DONATION_THANK_YOU_MESSAGE,
+} from './qortinoDonationEasterEgg';
+
+const LS_KEY = GETTING_STARTED_LS_KEY;
+const AVATAR_SERVICE = 'THUMBNAIL';
+const AVATAR_IDENTIFIER = 'qortal_avatar';
+/** Advance past step 1 at this balance; labels still say "6 QORT" for onboarding copy. */
+const MIN_BALANCE_FOR_QORTS = 1.25;
+export const QORTINO_WORKSPACE_SETTINGS_KEY = 'home-qortino-workspace-v1';
+const ONBOARDING_URL = 'https://qortal.dev/onboarding';
+const SUPPORT_CHAT_URL = 'https://link.qortal.dev/support';
+const ONBOARDING_RECOGNITION_DURATION_MS = 2600;
+const QORTINO_MASCOT_BASE_SIZE = 168;
+const QORTINO_MASCOT_SCALE = 0.68;
+const QORTINO_MASCOT_SIZE = Math.round(
+  QORTINO_MASCOT_BASE_SIZE * QORTINO_MASCOT_SCALE
+);
+const QORTINO_MASCOT_STAGE_PADDING_X = 26;
+const QORTINO_MASCOT_STAGE_PADDING_Y = 28;
+const QORTINO_MASCOT_VERTICAL_LIFT_PX = 12;
+const QORTINO_WORKSPACE_BAY_HEIGHT_PX = 251;
+const HOTKEY_SLOT_COUNT = 6;
+const HOTKEY_PICKER_SEARCH_DEBOUNCE_MS = 320;
+const CURATED_HOTKEY_APP_NAMES = [
+  'Q-Tube',
+  'Quitter',
+  'Q-Mail',
+  'Q-Blog',
+  'Q-Trade',
+  'Ear-Bump',
+] as const;
+type QortinoDonationOverlayState = {
+  message: string;
+  nonce: number;
+};
+type QortinoGratefulState = {
+  message: string;
+  nonce: number;
+};
+const QORTINO_STATUS_REFERENCE_LABEL = 'standby';
+const HOTKEY_SLOT_VALUE_SEPARATOR = '::';
+const EARBUMP_AUDIO_SERVICE = 'AUDIO';
+type WorkspaceMode = 'empty' | 'hotkeys' | 'music';
+type StepKey = 'get_six_qorts' | 'register_name' | 'load_avatar';
+type HotkeyActionId = string;
+type HotkeySlotValue = string | null;
+type HotkeyAppService = 'APP' | 'WEBSITE';
+
+type MusicTrack = EarbumpTrack;
+
+type WorkspaceState = {
+  hotkeys: HotkeySlotValue[];
+  mode: WorkspaceMode;
+  musicPlaying: boolean;
+  musicQuery: string;
+  onboardingCelebrationSeen: boolean;
+  repeatMode: RepeatMode;
+  selectedTrackId: string;
+  version: 1;
+};
+
+type HomeQortinoWorkspaceCardProps = {
+  onGettingStartedComplete?: () => void;
+  onOpenAppsPanel?: () => void;
+};
+
+type QortinoSectionRuntimeFallbackProps = {
+  body: string;
+  theme: ReturnType<typeof useTheme>;
+  title: string;
+  variant: 'qortino' | 'workspace';
+};
+
+type WorkspaceModuleDefinition = {
+  appName?: string;
+  appPath?: string;
+  description: string;
+  icon: typeof AppsRoundedIcon;
+  key: string;
+  label: string;
+  mode?: Exclude<WorkspaceMode, 'empty'>;
+};
+
+type HotkeyActionDefinition = {
+  description: string;
+  icon: typeof VideoLibraryRoundedIcon;
+  id: HotkeyActionId;
+  label: string;
+  reaction?: string;
+  run: () => void;
+};
+
+type HotkeyAppDefinition = {
+  appName: string;
+  description: string;
+  label: string;
+  service: HotkeyAppService;
+};
+
+type HotkeyPickerRow =
+  | { kind: 'heading' }
+  | { kind: 'divider' }
+  | { kind: 'app'; app: HotkeyAppDefinition; curated: boolean };
+
+type WorkspaceCompanionReactionPayload =
+  | string
+  | { kind: 'locked_track'; title: string }
+  | { kind: 'track_rotation'; title: string };
+
+type QAppResourceRecord = {
+  metadata?: {
+    description?: string;
+    title?: string;
+  };
+  name?: string;
+  service?: string;
+};
+
+type TrackReadyState = 'downloading' | 'error' | 'idle' | 'ready';
+
+const qortinoLookDebug: QortinoLookDebugSettings =
+  DEFAULT_QORTINO_LOOK_DEBUG_SETTINGS;
+const qortinoLayoutDebug: QortinoLayoutDebugSettings =
+  DEFAULT_QORTINO_LAYOUT_DEBUG_SETTINGS;
+const qortinoCompanionDebug: QortinoCompanionDebugSettings =
+  DEFAULT_QORTINO_COMPANION_DEBUG_SETTINGS;
+
+const DEFAULT_HOTKEYS: HotkeySlotValue[] = Array.from(
+  { length: HOTKEY_SLOT_COUNT },
+  () => null
+);
+
+const DEFAULT_WORKSPACE_STATE: WorkspaceState = {
+  hotkeys: DEFAULT_HOTKEYS,
+  mode: 'empty',
+  musicPlaying: false,
+  musicQuery: '',
+  onboardingCelebrationSeen: false,
+  repeatMode: 'all',
+  selectedTrackId: '',
+  version: 1,
+};
+
+const LEGACY_HOTKEY_APP_NAME_MAP: Record<string, string> = {
+  earbump: 'Ear-Bump',
+  earbumpupdated: 'Ear-Bump',
+  'ear-bump updated': 'Ear-Bump',
+  'earbump updated': 'Ear-Bump',
+  Earbump: 'Ear-Bump',
+  'Ear-Bump Updated': 'Ear-Bump',
+  'q-blog': 'Q-Blog',
+  'q-mail': 'Q-Mail',
+  'q-mintership': 'q-mintership',
+  'q-trade': 'Q-Trade',
+  'q-tube': 'Q-Tube',
+  quitter: 'Quitter',
+};
+
+const normalizeHotkeyAppName = (value: string) =>
+  LEGACY_HOTKEY_APP_NAME_MAP[value] ?? value;
+
+const encodeHotkeySlotValue = (service: HotkeyAppService, appName: string) =>
+  `${service}${HOTKEY_SLOT_VALUE_SEPARATOR}${appName}`;
+
+const parseHotkeySlotValue = (
+  value: string
+): { appName: string; service: HotkeyAppService } => {
+  const [serviceCandidate, ...rest] = value.split(HOTKEY_SLOT_VALUE_SEPARATOR);
+
+  if (
+    (serviceCandidate === 'APP' || serviceCandidate === 'WEBSITE') &&
+    rest.length > 0
+  ) {
+    return {
+      appName: rest.join(HOTKEY_SLOT_VALUE_SEPARATOR),
+      service: serviceCandidate,
+    };
+  }
+
+  return {
+    appName: normalizeHotkeyAppName(value),
+    service: 'APP',
+  };
+};
+
+const formatHotkeyAppLabel = (appName: string) =>
+  appName
+    .replace(/[-_]+/g, ' ')
+    .replace(/\b\w/g, (character) => character.toUpperCase());
+
+const getHotkeyAppThumbnailUrl = (appName: string) =>
+  `${getBaseApiReact()}/arbitrary/THUMBNAIL/${appName}/qortal_avatar?async=true`;
+
+const HotkeyAppAvatar = ({
+  appName,
+  radius = 12,
+  size = 36,
+}: {
+  appName: string;
+  radius?: number;
+  size?: number;
+}) => (
+  <Avatar
+    alt={appName}
+    imgProps={{ loading: 'lazy' }}
+    src={getHotkeyAppThumbnailUrl(appName)}
+    sx={{
+      background: alpha('#A9C9FF', 0.06),
+      borderRadius: `${radius}px`,
+      boxShadow: `inset 0 0 0 1px ${alpha('#A9C9FF', 0.08)}`,
+      height: `${size}px`,
+      width: `${size}px`,
+      '& img': {
+        objectFit: 'fill',
+      },
+    }}
+  >
+    <Box
+      alt=""
+      component="img"
+      src={LogoSelected}
+      sx={{
+        height: 'auto',
+        width: `${Math.round(size * 0.68)}px`,
+      }}
+    />
+  </Avatar>
+);
+
+const truncateQortinoBubbleMessage = (
+  message: string | null,
+  maxChars = 96
+) => {
+  const trimmed = message?.trim() ?? '';
+  if (!trimmed) return null;
+  if (trimmed.length <= maxChars) return trimmed;
+  return `${trimmed.slice(0, Math.max(0, maxChars - 5)).trimEnd()}(...)`;
+};
+
+const QortinoSectionRuntimeFallback = ({
+  body,
+  theme,
+  title,
+  variant,
+}: QortinoSectionRuntimeFallbackProps) => {
+  const isDarkMode = theme.palette.mode === 'dark';
+
+  return (
+    <Box
+      sx={{
+        alignItems: 'flex-start',
+        background:
+          variant === 'workspace'
+            ? theme.palette.mode === 'dark'
+              ? `linear-gradient(180deg, ${alpha('#20242D', 0.9)} 0%, ${alpha(
+                  '#171B23',
+                  0.96
+                )} 100%)`
+              : `linear-gradient(180deg, ${alpha('#FFFFFF', 0.72)} 0%, ${alpha(
+                  '#F3F6FB',
+                  0.9
+                )} 100%)`
+            : theme.palette.mode === 'dark'
+              ? `radial-gradient(90% 90% at 50% 14%, ${alpha('#23324A', 0.44)} 0%, ${alpha(
+                  '#18202C',
+                  0.18
+                )} 28%, ${alpha('#11161E', 0)} 72%), linear-gradient(180deg, ${alpha(
+                  '#13171D',
+                  0.98
+                )} 0%, ${alpha('#0E1319', 1)} 100%)`
+              : `radial-gradient(90% 90% at 50% 14%, ${alpha('#D8E8FF', 0.52)} 0%, ${alpha(
+                  '#E6EEF8',
+                  0.22
+                )} 28%, ${alpha('#FFFFFF', 0)} 72%), linear-gradient(180deg, ${alpha(
+                  '#F4F7FB',
+                  0.98
+                )} 0%, ${alpha('#EEF3F8', 1)} 100%)`,
+        borderBottom:
+          variant === 'workspace'
+            ? `1px solid ${alpha(theme.palette.common.white, 0.05)}`
+            : undefined,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1,
+        height: '100%',
+        justifyContent: 'center',
+        minHeight: 0,
+        overflow: 'hidden',
+        position: 'relative',
+        px: 2,
+        py: variant === 'workspace' ? 1.55 : 1.5,
+      }}
+    >
+      {variant === 'qortino' ? (
+        <Box
+          sx={{
+            inset: 0,
+            pointerEvents: 'none',
+            position: 'absolute',
+            '&::before': {
+              background: getBlueAmbientLineBackground(theme, 'soft'),
+              content: '""',
+              height: '1px',
+              left: '18px',
+              position: 'absolute',
+              right: '18px',
+              top: 0,
+            },
+          }}
+        />
+      ) : null}
+      <Typography
+        sx={{
+          color: theme.palette.text.primary,
+          fontSize: '1rem',
+          fontWeight: 700,
+          letterSpacing: '-0.02em',
+          position: 'relative',
+          zIndex: 1,
+        }}
+      >
+        {title}
+      </Typography>
+      <Typography
+        sx={{
+          color: alpha(theme.palette.text.secondary, isDarkMode ? 0.82 : 0.86),
+          fontSize: '0.8rem',
+          lineHeight: 1.5,
+          maxWidth: '34ch',
+          position: 'relative',
+          zIndex: 1,
+        }}
+      >
+        {body}
+      </Typography>
+    </Box>
+  );
+};
+
+const sanitizeWorkspaceState = (value: unknown): WorkspaceState => {
+  if (!value || typeof value !== 'object') {
+    return { ...DEFAULT_WORKSPACE_STATE };
+  }
+
+  const parsed = value as Partial<WorkspaceState>;
+  const nextMode: WorkspaceMode =
+    parsed.mode === 'hotkeys' || parsed.mode === 'music'
+      ? parsed.mode
+      : 'empty';
+
+  const sanitizedHotkeys = Array.isArray(parsed.hotkeys)
+    ? parsed.hotkeys
+        .slice(0, HOTKEY_SLOT_COUNT)
+        .map(
+          (item): HotkeySlotValue =>
+            typeof item === 'string' && item.trim().length > 0
+              ? normalizeHotkeyAppName(item.trim())
+              : null
+        )
+    : [];
+  const paddedHotkeys = Array.from(
+    { length: HOTKEY_SLOT_COUNT },
+    (_, index) => sanitizedHotkeys[index] ?? null
+  );
+
+  return {
+    hotkeys: paddedHotkeys,
+    mode: nextMode,
+    musicPlaying: parsed.musicPlaying === true,
+    musicQuery: typeof parsed.musicQuery === 'string' ? parsed.musicQuery : '',
+    onboardingCelebrationSeen: parsed.onboardingCelebrationSeen === true,
+    repeatMode: parsed.repeatMode === 'one' ? 'one' : 'all',
+    selectedTrackId:
+      typeof parsed.selectedTrackId === 'string'
+        ? parsed.selectedTrackId.trim()
+        : DEFAULT_WORKSPACE_STATE.selectedTrackId,
+    version: 1,
+  };
+};
+
+const openExternalUrl = (url: string) => {
+  openHttpUrlExternally(url);
+};
+
+const dispatchAppTab = (name: string, path = '') => {
+  executeEvent('addTab', { data: { service: 'APP', name, path } });
+};
+
+const getFallbackStorageKey = (userAddress: string | undefined) =>
+  userAddress
+    ? `${QORTINO_WORKSPACE_SETTINGS_KEY}_${userAddress}`
+    : QORTINO_WORKSPACE_SETTINGS_KEY;
+
+const loadWorkspaceStateFromFallbackStorage = (
+  userAddress: string | undefined
+): WorkspaceState => {
+  if (typeof window === 'undefined') {
+    return { ...DEFAULT_WORKSPACE_STATE };
+  }
+
+  const fallbackKey = getFallbackStorageKey(userAddress);
+
+  try {
+    const storedValue = localStorage.getItem(fallbackKey);
+    return sanitizeWorkspaceState(storedValue ? JSON.parse(storedValue) : null);
+  } catch {
+    return { ...DEFAULT_WORKSPACE_STATE };
+  }
+};
+
+const persistWorkspaceState = async (
+  nextState: WorkspaceState,
+  userAddress: string | undefined
+) => {
+  const fallbackKey = getFallbackStorageKey(userAddress);
+
+  try {
+    localStorage.setItem(fallbackKey, JSON.stringify(nextState));
+  } catch {
+    // Fallback-only persistence best effort.
+  }
+
+  try {
+    if (typeof window.sendMessage !== 'function') return;
+    await window.sendMessage('addUserSettings', {
+      keyValue: {
+        key: QORTINO_WORKSPACE_SETTINGS_KEY,
+        value: nextState,
+      },
+    });
+  } catch {
+    // Account-scoped save best effort; local fallback already written.
+  }
+};
+
+const loadWorkspaceState = async (
+  userAddress: string | undefined
+): Promise<WorkspaceState> => {
+  try {
+    if (typeof window.sendMessage === 'function') {
+      const stored = await window.sendMessage('getUserSettings', {
+        key: QORTINO_WORKSPACE_SETTINGS_KEY,
+      });
+
+      if (stored && !stored.error) {
+        return sanitizeWorkspaceState(stored);
+      }
+    }
+  } catch {
+    // Fallback local storage below.
+  }
+
+  return loadWorkspaceStateFromFallbackStorage(userAddress);
+};
+
+const resetQortinoWorkspaceOnboardingCelebration = async (
+  userAddress: string | undefined
+) => {
+  const currentState = await loadWorkspaceState(userAddress);
+  await persistWorkspaceState(
+    {
+      ...currentState,
+      onboardingCelebrationSeen: false,
+    },
+    userAddress
+  );
+};
+
+const formatPlaybackTime = (seconds: number) => {
+  const safeSeconds = Math.max(0, Math.floor(seconds));
+  const minutes = Math.floor(safeSeconds / 60);
+  const remainder = safeSeconds % 60;
+  return `${minutes}:${String(remainder).padStart(2, '0')}`;
+};
+
+const isAbortError = (error: unknown) =>
+  error instanceof DOMException && error.name === 'AbortError';
+
+const buildTrackResourceKey = (track: Pick<MusicTrack, 'id' | 'name'>) =>
+  track.id && track.name
+    ? `${EARBUMP_AUDIO_SERVICE}-${track.name}-${track.id}`
+    : '';
+
+const buildTrackPlaybackUrl = (track: Pick<MusicTrack, 'id' | 'name'>) =>
+  track.id && track.name
+    ? `${getBaseApiReact()}/arbitrary/${EARBUMP_AUDIO_SERVICE}/${encodeURIComponent(
+        track.name
+      )}/${encodeURIComponent(track.id)}`
+    : '';
+
+const getTrackReadyState = (
+  rawStatus: string | null | undefined,
+  hasTrack: boolean
+): TrackReadyState => {
+  if (!hasTrack) return 'idle';
+  if (rawStatus === 'READY') return 'ready';
+  if (
+    rawStatus === 'FAILED_TO_DOWNLOAD' ||
+    rawStatus === 'BUILD_FAILED' ||
+    rawStatus === 'NOT_PUBLISHED' ||
+    rawStatus === 'BLOCKED' ||
+    rawStatus === 'UNSUPPORTED'
+  ) {
+    return 'error';
+  }
+
+  return 'downloading';
+};
+
+const getTrackReadyPercent = (
+  rawStatus: string | null | undefined,
+  percent: number
+) => {
+  if (rawStatus === 'READY') return 100;
+  if (Number.isFinite(percent) && percent > 0) {
+    return Math.min(Math.max(percent, 0), 100);
+  }
+
+  if (rawStatus === 'DOWNLOADED') return 94;
+  if (rawStatus === 'BUILDING') return 97;
+  if (rawStatus === 'REFETCHING') return 42;
+  if (rawStatus === 'MISSING_DATA') return 34;
+  if (rawStatus === 'DOWNLOADING') return 18;
+  if (rawStatus === 'SEARCHING') return 10;
+  if (rawStatus === 'PUBLISHED' || rawStatus === 'INITIAL') return 6;
+  return 0;
+};
+
+const EMPTY_MUSIC_TRACK_BASE: MusicTrack = {
+  artist: 'EarBump',
+  coverColors: ['#6EA7FF', '#243B72', '#9CCBFF'],
+  created: 0,
+  id: '',
+  length: '--:--',
+  name: 'earbump',
+  status: null,
+  streamUrl: '',
+  title: '',
+  updated: null,
+  uploaded: '',
+};
+
+const QortinoMascot = ({
+  isDarkMode,
+  isTickled,
+  isListening,
+  isTalking,
+  lookDebug,
+  mood,
+  showAntenna = true,
+}: {
+  isDarkMode: boolean;
+  isTickled: boolean;
+  isListening: boolean;
+  isTalking: boolean;
+  lookDebug: QortinoLookDebugSettings;
+  mood:
+    | 'celebrate'
+    | 'empty'
+    | 'grateful'
+    | 'guide'
+    | 'hotkeys'
+    | 'music'
+    | 'notes';
+  showAntenna?: boolean;
+}) => {
+  const expression = isTickled
+    ? 'ticklish'
+    : mood === 'music'
+      ? 'music'
+      : mood === 'guide'
+        ? 'guide'
+        : mood === 'hotkeys'
+          ? 'focused'
+          : mood === 'notes'
+            ? 'attentive'
+            : mood === 'celebrate'
+              ? 'delighted'
+              : mood === 'grateful'
+                ? 'delighted'
+                : 'calm';
+  const eyeStyle = {
+    attentive: { height: 8, top: 79, width: 9 },
+    calm: { height: 9, top: 80, width: 9 },
+    delighted: { height: 8, top: 79, width: 10 },
+    focused: { height: 7, top: 81, width: 10 },
+    guide: { height: 10, top: 78, width: 9 },
+    music: { height: 10, top: 79, width: 10 },
+    ticklish: { height: 2, top: 82, width: 14 },
+  }[expression];
+  const mouthStyle = {
+    attentive: { left: 69, top: 98, width: 28 },
+    calm: { left: 70, top: 97, width: 26 },
+    delighted: { left: 66, top: 94, width: 34 },
+    focused: { left: 71, top: 98, width: 24 },
+    guide: { left: 68, top: 96, width: 30 },
+    music: { left: 67, top: 94, width: 32 },
+    ticklish: { left: 66, top: 93, width: 34 },
+  }[expression];
+  const mascotAnimation = isTickled
+    ? 'qortinoTicklishBounce 0.58s ease-in-out infinite'
+    : isListening
+      ? 'qortinoMusicBounce 3s ease-in-out infinite'
+      : 'qortinoBob 5.8s ease-in-out infinite';
+  const tickleRotateDeg = isTickled ? 1.35 : 0;
+  const tickleTransform = isTickled
+    ? 'translateY(-4px) scale(1.055)'
+    : 'translateY(0px) scale(1)';
+  const leftEyeTransform = isTickled
+    ? `rotate(${(-tickleRotateDeg * 0.85).toFixed(2)}deg) scaleX(1.06)`
+    : 'rotate(0deg) scaleX(1)';
+  const rightEyeTransform = isTickled
+    ? `rotate(${(tickleRotateDeg * 0.85).toFixed(2)}deg) scaleX(1.06)`
+    : 'rotate(0deg) scaleX(1)';
+  const faceRootLeft = 44;
+  const faceRootTop = 58;
+  const faceRootWidth = 80;
+  const faceRootHeight = 58;
+  const faceLeftEyeLeft = 20;
+  const faceRightEyeLeft = 50;
+  const faceEyeTop = eyeStyle.top - faceRootTop;
+  const faceMouthLeft = mouthStyle.left - faceRootLeft;
+  const faceMouthTop = mouthStyle.top - faceRootTop;
+  const antennaBubbleSize = 20;
+  const antennaBubbleOverlap = 9;
+  const antennaStemHeight = Math.max(
+    11,
+    Math.round(20 * lookDebug.antennaLength)
+  );
+  const antennaContainerHeight =
+    antennaBubbleSize - antennaBubbleOverlap + antennaStemHeight;
+
+  return (
+    <Box
+      sx={{
+        '@keyframes qortinoBob': {
+          '0%, 100%': { transform: 'translateY(4px)' },
+          '50%': { transform: 'translateY(0px)' },
+        },
+        '@keyframes qortinoMusicBounce': {
+          '0%, 100%': { transform: 'translateY(4px)' },
+          '25%': { transform: 'translateY(2px)' },
+          '50%': { transform: 'translateY(-1px)' },
+          '75%': { transform: 'translateY(3px)' },
+        },
+        '@keyframes qortinoTicklishBounce': {
+          '0%, 100%': { transform: 'translateY(2px) rotate(0deg)' },
+          '18%': { transform: 'translateY(-7px) rotate(-0.85deg)' },
+          '38%': { transform: 'translateY(-2px) rotate(0.55deg)' },
+          '60%': { transform: 'translateY(-10px) rotate(0.95deg)' },
+          '82%': { transform: 'translateY(-3px) rotate(-0.45deg)' },
+        },
+        '@keyframes qortinoBlink': {
+          '0%, 45%, 100%': { transform: 'scaleY(1)' },
+          '48%, 52%': { transform: 'scaleY(0.16)' },
+        },
+        '@keyframes qortinoTalk': {
+          '0%, 100%': { transform: 'scaleY(1) scaleX(1)' },
+          '25%': { transform: 'scaleY(0.72) scaleX(1.06)' },
+          '50%': { transform: 'scaleY(1.18) scaleX(0.96)' },
+          '75%': { transform: 'scaleY(0.82) scaleX(1.04)' },
+        },
+        height: `${QORTINO_MASCOT_SIZE}px`,
+        overflow: 'visible',
+        position: 'relative',
+        width: `${QORTINO_MASCOT_SIZE}px`,
+      }}
+    >
+      <Box
+        sx={{
+          bottom: 0,
+          height: `${QORTINO_MASCOT_BASE_SIZE}px`,
+          left: 0,
+          position: 'absolute',
+          transform: `scale(${QORTINO_MASCOT_SCALE})`,
+          transformOrigin: 'bottom left',
+          width: `${QORTINO_MASCOT_BASE_SIZE}px`,
+        }}
+      >
+        <Box
+          sx={{
+            height: `${QORTINO_MASCOT_BASE_SIZE}px`,
+            position: 'relative',
+            transform: tickleTransform,
+            transformOrigin: 'center bottom',
+            transition:
+              'transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease',
+            width: `${QORTINO_MASCOT_BASE_SIZE}px`,
+          }}
+        >
+          <Box
+            sx={{
+              animation: mascotAnimation,
+              height: `${QORTINO_MASCOT_BASE_SIZE}px`,
+              position: 'relative',
+              transformOrigin: 'center bottom',
+              width: `${QORTINO_MASCOT_BASE_SIZE}px`,
+            }}
+          >
+            <Box
+              sx={{
+                height: '152px',
+                left: '8px',
+                position: 'absolute',
+                top: '6px',
+                transform: `scale(${lookDebug.bodyScale}) scaleX(${lookDebug.bodyWidthScale})`,
+                transformOrigin: 'center',
+                width: '152px',
+              }}
+            >
+              <Box
+                sx={{
+                  background: isDarkMode
+                    ? `radial-gradient(ellipse at center, ${alpha('#02050B', 0.56)} 0%, ${alpha('#02050B', 0.3)} 48%, ${alpha('#02050B', 0)} 78%)`
+                    : `radial-gradient(ellipse at center, ${alpha('#2A3F5C', 0.42)} 0%, ${alpha('#2A3F5C', 0.14)} 52%, ${alpha('#2A3F5C', 0)} 78%)`,
+                  bottom: '4px',
+                  filter: 'blur(9px)',
+                  height: '20px',
+                  left: '16px',
+                  opacity: isListening ? 0.98 : 0.9,
+                  position: 'absolute',
+                  width: '120px',
+                }}
+              />
+              <Box
+                sx={{
+                  background: isDarkMode
+                    ? `radial-gradient(ellipse at center, ${alpha('#010307', 0.5)} 0%, ${alpha('#010307', 0)} 72%)`
+                    : `radial-gradient(ellipse at center, ${alpha('#344B6B', 0.34)} 0%, ${alpha('#344B6B', 0)} 72%)`,
+                  bottom: '7px',
+                  filter: 'blur(4px)',
+                  height: '10px',
+                  left: '27px',
+                  opacity: isListening ? 0.86 : 0.78,
+                  position: 'absolute',
+                  width: '88px',
+                }}
+              />
+              <Box
+                sx={{
+                  background: `radial-gradient(circle, ${alpha(
+                    '#0A1220',
+                    isDarkMode ? 0.22 : 0.09
+                  )} 0%, ${alpha('#0A1220', 0)} 72%)`,
+                  filter: 'blur(10px)',
+                  inset: 0,
+                  opacity: isDarkMode ? 0.44 : 0.28,
+                  position: 'absolute',
+                }}
+              />
+              <Box
+                sx={{
+                  background: isDarkMode
+                    ? `radial-gradient(circle at 34% 22%, ${alpha('#A0B8DD', 0.14)} 0%, ${alpha('#6B88B5', 0.08)} 18%, ${alpha('#0D1524', 0)} 42%), linear-gradient(180deg, ${alpha('#232C3A', 0.98)} 0%, ${alpha('#161B24', 0.98)} 58%, ${alpha('#10141C', 1)} 100%)`
+                    : `radial-gradient(circle at 32% 20%, ${alpha('#E8F0FF', 0.7)} 0%, ${alpha('#B8CDE8', 0.35)} 18%, ${alpha('#7E93B3', 0)} 44%), linear-gradient(180deg, ${alpha('#5E7390', 0.98)} 0%, ${alpha('#4B5F7A', 0.99)} 52%, ${alpha('#3F526B', 1)} 100%)`,
+                  border: isDarkMode
+                    ? `1px solid ${alpha('#B3D0FF', 0.16)}`
+                    : `1px solid ${alpha('#8FA9CC', 0.45)}`,
+                  borderRadius: '46% 46% 42% 42%',
+                  boxShadow: isDarkMode
+                    ? `0 18px 32px ${alpha('#000', 0.3)}, inset 0 1px 0 ${alpha('#fff', 0.03)}, inset 0 -1px 0 ${alpha('#000', 0.22)}`
+                    : `0 16px 28px ${alpha('#1E3248', 0.2)}, inset 0 1px 0 ${alpha('#fff', 0.22)}, inset 0 -1px 0 ${alpha('#1E2A3D', 0.14)}`,
+                  inset: 0,
+                  position: 'absolute',
+                }}
+              />
+            </Box>
+            <Box
+              sx={{
+                height: `${faceRootHeight}px`,
+                left: `${faceRootLeft}px`,
+                position: 'absolute',
+                top: `${faceRootTop}px`,
+                transform: `scale(${lookDebug.faceScale})`,
+                transformOrigin: 'center',
+                width: `${faceRootWidth}px`,
+              }}
+            >
+              <Box
+                sx={{
+                  backdropFilter: 'blur(10px)',
+                  background: isDarkMode
+                    ? `linear-gradient(180deg, ${alpha('#121A26', 0.7)} 0%, ${alpha('#0B1119', 0.84)} 100%)`
+                    : `linear-gradient(180deg, ${alpha('#2F3F56', 0.9)} 0%, ${alpha('#1E2B3F', 0.94)} 100%)`,
+                  border: isDarkMode
+                    ? `1px solid ${alpha('#B3D0FF', 0.12)}`
+                    : `1px solid ${alpha('#C8DCF8', 0.42)}`,
+                  borderRadius: '28px',
+                  boxShadow: isDarkMode
+                    ? `inset 0 1px 0 ${alpha('#fff', 0.06)}`
+                    : `inset 0 1px 0 ${alpha('#fff', 0.14)}`,
+                  inset: 0,
+                  position: 'absolute',
+                }}
+              />
+              <Box
+                sx={{
+                  animation: isTickled
+                    ? 'none'
+                    : 'qortinoBlink 6.2s ease-in-out infinite',
+                  bgcolor: '#DDEBFF',
+                  borderRadius: '999px',
+                  boxShadow: `0 0 12px ${alpha('#7FB5FF', isDarkMode ? 0.2 : 0.34)}`,
+                  height: eyeStyle.height,
+                  left: faceLeftEyeLeft,
+                  position: 'absolute',
+                  top: faceEyeTop,
+                  transform: leftEyeTransform,
+                  transformOrigin: 'center',
+                  transition:
+                    'transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease',
+                  width: eyeStyle.width,
+                }}
+              />
+              <Box
+                sx={{
+                  animation: isTickled
+                    ? 'none'
+                    : 'qortinoBlink 6.2s ease-in-out infinite 120ms',
+                  bgcolor: '#DDEBFF',
+                  borderRadius: '999px',
+                  boxShadow: `0 0 12px ${alpha('#7FB5FF', isDarkMode ? 0.2 : 0.34)}`,
+                  height: eyeStyle.height,
+                  left: faceRightEyeLeft,
+                  position: 'absolute',
+                  top: faceEyeTop,
+                  transform: rightEyeTransform,
+                  transformOrigin: 'center',
+                  transition:
+                    'transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease',
+                  width: eyeStyle.width,
+                }}
+              />
+              <Box
+                sx={{
+                  borderBottom: `2px solid ${alpha('#DDEBFF', isDarkMode ? 0.78 : 0.9)}`,
+                  borderRadius: '0 0 999px 999px',
+                  height: '8px',
+                  left: faceMouthLeft,
+                  position: 'absolute',
+                  top: faceMouthTop,
+                  transformOrigin: 'center',
+                  width: mouthStyle.width,
+                  ...(isTalking || isListening
+                    ? {
+                        animation: 'qortinoTalk 1.25s ease-in-out infinite',
+                      }
+                    : null),
+                }}
+              />
+            </Box>
+            {showAntenna ? (
+              <Box
+                sx={{
+                  bottom: '130px',
+                  height: `${antennaContainerHeight}px`,
+                  left: '72px',
+                  position: 'absolute',
+                  transform: `scale(${lookDebug.antennaScale})`,
+                  transformOrigin: 'bottom center',
+                  width: '24px',
+                }}
+              >
+                <Box
+                  sx={{
+                    background: `linear-gradient(180deg, ${alpha('#D2E3FF', isDarkMode ? 0.38 : 0.52)} 0%, ${alpha(
+                      '#D2E3FF',
+                      0
+                    )} 100%)`,
+                    borderRadius: '999px',
+                    height: `${antennaStemHeight}px`,
+                    left: '8px',
+                    position: 'absolute',
+                    top: `${antennaBubbleSize - antennaBubbleOverlap}px`,
+                    width: '8px',
+                  }}
+                />
+                <QortalRequestBubbleIcon
+                  size={antennaBubbleSize}
+                  logoScale={lookDebug.logoScale}
+                  sx={{
+                    filter: isDarkMode
+                      ? 'drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18))'
+                      : 'drop-shadow(0 3px 10px rgba(46, 74, 108, 0.32))',
+                    left: '2px',
+                    position: 'absolute',
+                    top: 0,
+                  }}
+                />
+              </Box>
+            ) : null}
+            {mood === 'guide' && <GuideBeacon isDarkMode={isDarkMode} />}
+            {mood === 'hotkeys' && (
+              <>
+                <RouteDecoration
+                  delay={0}
+                  isDarkMode={isDarkMode}
+                  left="18px"
+                  top="38px"
+                />
+                <RouteDecoration
+                  delay={0.25}
+                  isDarkMode={isDarkMode}
+                  left="132px"
+                  top="114px"
+                />
+              </>
+            )}
+            {mood === 'notes' && (
+              <>
+                <NoteCardDecoration
+                  delay={0}
+                  isDarkMode={isDarkMode}
+                  left="18px"
+                  top="42px"
+                />
+                <NoteCardDecoration
+                  delay={0.2}
+                  isDarkMode={isDarkMode}
+                  left="132px"
+                  top="112px"
+                />
+              </>
+            )}
+            {isListening && (
+              <>
+                <MusicNoteDecoration
+                  delay={0}
+                  isDarkMode={isDarkMode}
+                  left="76px"
+                  top="8px"
+                />
+                <MusicNoteDecoration
+                  delay={0.18}
+                  isDarkMode={isDarkMode}
+                  left="90px"
+                  top="0px"
+                  size={18}
+                />
+                <MusicNoteDecoration
+                  delay={0.36}
+                  isDarkMode={isDarkMode}
+                  left="104px"
+                  top="10px"
+                  size={14}
+                />
+              </>
+            )}
+            {mood === 'celebrate' && (
+              <>
+                <SparkDecoration left="26px" top="18px" />
+                <SparkDecoration left="136px" top="26px" />
+                <SparkDecoration left="134px" top="126px" />
+              </>
+            )}
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+const MusicNoteDecoration = ({
+  delay,
+  isDarkMode,
+  left,
+  size = 16,
+  top,
+}: {
+  delay: number;
+  isDarkMode: boolean;
+  left: string;
+  size?: number;
+  top: string;
+}) => (
+  <Box
+    sx={{
+      '@keyframes qortinoNoteFloat': {
+        '0%, 100%': { opacity: 0.18, transform: 'translateY(0px) scale(0.94)' },
+        '50%': { opacity: 0.82, transform: 'translateY(-12px) scale(1.02)' },
+      },
+      animation: `qortinoNoteFloat 3.4s ease-in-out ${delay}s infinite`,
+      color: alpha('#95BEFF', isDarkMode ? 0.92 : 0.76),
+      left,
+      position: 'absolute',
+      top,
+    }}
+  >
+    <GraphicEqRoundedIcon sx={{ fontSize: `${size}px` }} />
+  </Box>
+);
+
+const GuideBeacon = ({ isDarkMode }: { isDarkMode: boolean }) => (
+  <Box
+    sx={{
+      '@keyframes qortinoGuidePulse': {
+        '0%, 100%': { opacity: 0.1, transform: 'scale(0.88)' },
+        '50%': { opacity: 0.44, transform: 'scale(1.06)' },
+      },
+      border: `1px solid ${alpha('#97C0FF', isDarkMode ? 0.32 : 0.24)}`,
+      borderRadius: '999px',
+      boxShadow: `0 0 16px ${alpha('#8DB8FF', isDarkMode ? 0.16 : 0.1)}`,
+      height: '28px',
+      left: '70px',
+      pointerEvents: 'none',
+      position: 'absolute',
+      top: '2px',
+      width: '28px',
+      animation: 'qortinoGuidePulse 2.8s ease-in-out infinite',
+    }}
+  />
+);
+
+const RouteDecoration = ({
+  delay,
+  isDarkMode,
+  left,
+  top,
+}: {
+  delay: number;
+  isDarkMode: boolean;
+  left: string;
+  top: string;
+}) => (
+  <Box
+    sx={{
+      '@keyframes qortinoRouteFlow': {
+        '0%, 100%': { opacity: 0.18, transform: 'translateX(0px)' },
+        '50%': { opacity: 0.74, transform: 'translateX(4px)' },
+      },
+      alignItems: 'center',
+      animation: `qortinoRouteFlow 2.9s ease-in-out ${delay}s infinite`,
+      color: alpha('#98C0FF', isDarkMode ? 0.9 : 0.72),
+      display: 'inline-flex',
+      gap: '2px',
+      left,
+      pointerEvents: 'none',
+      position: 'absolute',
+      top,
+    }}
+  >
+    <ChevronRightRoundedIcon sx={{ fontSize: '12px' }} />
+    <ChevronRightRoundedIcon sx={{ fontSize: '10px', opacity: 0.7 }} />
+  </Box>
+);
+
+const NoteCardDecoration = ({
+  delay,
+  isDarkMode,
+  left,
+  top,
+}: {
+  delay: number;
+  isDarkMode: boolean;
+  left: string;
+  top: string;
+}) => (
+  <Box
+    sx={{
+      '@keyframes qortinoNoteCardFloat': {
+        '0%, 100%': { opacity: 0.18, transform: 'translateY(0px)' },
+        '50%': { opacity: 0.68, transform: 'translateY(-3px)' },
+      },
+      animation: `qortinoNoteCardFloat 3.1s ease-in-out ${delay}s infinite`,
+      background: `linear-gradient(180deg, ${alpha('#202A3B', isDarkMode ? 0.72 : 0.28)} 0%, ${alpha(
+        '#131A25',
+        isDarkMode ? 0.82 : 0.18
+      )} 100%)`,
+      border: `1px solid ${alpha('#9CC3FF', isDarkMode ? 0.18 : 0.12)}`,
+      borderRadius: '8px',
+      boxShadow: `0 6px 14px ${alpha('#000', isDarkMode ? 0.16 : 0.08)}`,
+      height: '20px',
+      left,
+      pointerEvents: 'none',
+      position: 'absolute',
+      top,
+      width: '16px',
+      '&::before': {
+        background: alpha('#9CC3FF', isDarkMode ? 0.46 : 0.24),
+        borderRadius: '2px',
+        content: '""',
+        height: '2px',
+        left: '4px',
+        position: 'absolute',
+        top: '6px',
+        width: '8px',
+      },
+      '&::after': {
+        background: alpha('#9CC3FF', isDarkMode ? 0.32 : 0.18),
+        borderRadius: '2px',
+        content: '""',
+        height: '2px',
+        left: '4px',
+        position: 'absolute',
+        top: '10px',
+        width: '6px',
+      },
+    }}
+  />
+);
+
+const SparkDecoration = ({ left, top }: { left: string; top: string }) => (
+  <Box
+    sx={{
+      '@keyframes qortinoSparkPulse': {
+        '0%, 100%': { opacity: 0.18, transform: 'scale(0.9)' },
+        '50%': { opacity: 0.76, transform: 'scale(1)' },
+      },
+      animation: 'qortinoSparkPulse 2.4s ease-in-out infinite',
+      color: alpha('#A7CAFF', 0.9),
+      left,
+      position: 'absolute',
+      top,
+    }}
+  >
+    <AutoAwesomeRoundedIcon sx={{ fontSize: '14px' }} />
+  </Box>
+);
+
+const HOTKEY_PICKER_VIRTUAL_GAP_PX = 7;
+
+const HotkeyPickerVirtualScroll = memo(function HotkeyPickerVirtualScroll({
+  rows,
+  renderRow,
+}: {
+  rows: HotkeyPickerRow[];
+  renderRow: (row: HotkeyPickerRow) => ReactNode;
+}) {
+  const scrollRef = useRef<HTMLDivElement | null>(null);
+
+  const estimateSize = useCallback(
+    (index: number) => {
+      const row = rows[index];
+      if (!row) return 80;
+      if (row.kind === 'heading') return 26;
+      if (row.kind === 'divider') return 12;
+      return 88;
+    },
+    [rows]
+  );
+
+  const getItemKey = useCallback(
+    (index: number) => {
+      const row = rows[index];
+      if (!row) return `hotkey-picker-empty-${index}`;
+      // Index is required for unique keys per row slot (TanStack measures by key).
+      if (row.kind === 'heading') return `hotkey-picker-heading-${index}`;
+      if (row.kind === 'divider') return `hotkey-picker-divider-${index}`;
+      return `hotkey-picker-app-${index}-${row.app.service}::${row.app.appName}`;
+    },
+    [rows]
+  );
+
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    gap: HOTKEY_PICKER_VIRTUAL_GAP_PX,
+    getScrollElement: () => scrollRef.current,
+    estimateSize,
+    getItemKey,
+    overscan: 8,
+    useAnimationFrameWithResizeObserver: true,
+  });
+
+  useLayoutEffect(() => {
+    if (rows.length === 0) return;
+    const el = scrollRef.current;
+    if (el) {
+      el.scrollTop = 0;
+    }
+    virtualizer.measure();
+    virtualizer.scrollToOffset(0, { behavior: 'auto' });
+    let raf2 = 0;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => {
+        virtualizer.measure();
+        virtualizer.scrollToOffset(0, { behavior: 'auto' });
+      });
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      cancelAnimationFrame(raf2);
+    };
+  }, [rows, virtualizer]);
+
+  return (
+    <Box
+      ref={scrollRef}
+      sx={{
+        display: 'flex',
+        flex: 1,
+        flexDirection: 'column',
+        gap: 0,
+        minHeight: 'clamp(220px, 40vh, 520px)',
+        minWidth: 0,
+        overflowY: 'auto',
+        pr: 0.2,
+      }}
+    >
+      {rows.length > 0 ? (
+        <Box
+          sx={{
+            height: `${virtualizer.getTotalSize()}px`,
+            position: 'relative',
+            width: '100%',
+          }}
+        >
+          <Box
+            sx={{
+              left: 0,
+              position: 'absolute',
+              top: 0,
+              width: '100%',
+            }}
+          >
+            {virtualizer.getVirtualItems().map((virtualRow) => {
+              const row = rows[virtualRow.index];
+              if (!row) return null;
+              return (
+                <Box
+                  key={virtualRow.key}
+                  data-index={virtualRow.index}
+                  ref={virtualizer.measureElement}
+                  sx={{
+                    alignItems: 'stretch',
+                    boxSizing: 'border-box',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    left: 0,
+                    maxWidth: '100%',
+                    position: 'absolute',
+                    top: 0,
+                    transform: `translate3d(0, ${virtualRow.start}px, 0)`,
+                    width: '100%',
+                  }}
+                >
+                  {renderRow(row)}
+                </Box>
+              );
+            })}
+          </Box>
+        </Box>
+      ) : null}
+    </Box>
+  );
+});
+
+export const HomeQortinoWorkspaceCard = ({
+  onGettingStartedComplete,
+  onOpenAppsPanel,
+}: HomeQortinoWorkspaceCardProps) => {
+  const { t } = useTranslation(['tutorial', 'core']);
+  const qw = useCallback(
+    (
+      suffix: string,
+      fallback: string,
+      options?: Record<string, string | number>
+    ) => {
+      const key = `core:qortino_workspace.${suffix}` as const;
+      if (options) {
+        return String(t(key, { ...options, defaultValue: fallback }));
+      }
+      return String(t(key, fallback));
+    },
+    [t]
+  );
+  const theme = useTheme();
+
+  const isDarkMode = theme.palette.mode === 'dark';
+  const panelRef = useDashboardPanelMouseLight<HTMLDivElement>();
+  const userInfo = useAtomValue(userInfoAtom);
+  const balance = useAtomValue(balanceAtom);
+  const txList = useAtomValue(txListAtom);
+  const userAddress = userInfo?.address;
+  const name = userInfo?.name;
+  const openApp = useCallback(
+    (appName: string, path = '') => {
+      if (onOpenAppsPanel) {
+        onOpenAppsPanel();
+      } else {
+        executeEvent('newTabWindow', {});
+        executeEvent('open-apps-mode', {});
+      }
+
+      window.setTimeout(() => {
+        dispatchAppTab(appName, path);
+      }, 90);
+    },
+    [onOpenAppsPanel]
+  );
+
+  const workspaceModules = useMemo<WorkspaceModuleDefinition[]>(
+    () => [
+      {
+        description: qw(
+          'modules_hotkeys_description',
+          'Curated shortcuts for your most-used routes.'
+        ),
+        icon: AppsRoundedIcon,
+        key: 'hotkeys',
+        label: qw('modules_hotkeys_label', 'Hotkeys'),
+        mode: 'hotkeys',
+      },
+      {
+        description: qw(
+          'modules_music_description',
+          'A compact Earbump player with search and quick playback.'
+        ),
+        icon: LibraryMusicRoundedIcon,
+        key: 'music',
+        label: qw('modules_music_label', 'Music player'),
+        mode: 'music',
+      },
+      {
+        appName: 'q-mail',
+        appPath: 'to/Qortino',
+        description: qw(
+          'modules_suggest_description',
+          'Compose > Add Subject + Message & Send it our way!'
+        ),
+        icon: MailOutlineRoundedIcon,
+        key: 'suggest-module',
+        label: qw('modules_suggest_label', 'Suggest a module'),
+      },
+    ],
+    [qw]
+  );
+
+  const emptyMusicTrack = useMemo(
+    (): MusicTrack => ({
+      ...EMPTY_MUSIC_TRACK_BASE,
+      title: qw('music_empty_title', 'EarBump library'),
+      uploaded: qw('music_empty_uploaded', 'Waiting for library'),
+    }),
+    [qw]
+  );
+
+  const [dismissed, setDismissed] = useState<boolean | null>(null);
+  const [paymentsFallbackTotal, setPaymentsFallbackTotal] = useState<
+    number | null
+  >(null);
+  const [hasAvatar, setHasAvatar] = useState(false);
+  const [avatarStepCompleted, setAvatarStepCompleted] = useState(false);
+  const [checkingAvatar, setCheckingAvatar] = useState(false);
+  const [qortsAcquiredAcknowledged, setQortsAcquiredAcknowledged] =
+    useState(false);
+  const [showRegisterNameDelayHint, setShowRegisterNameDelayHint] =
+    useState(false);
+  const [openQortsDialog, setOpenQortsDialog] = useState(false);
+  const [openMusicSearchDialog, setOpenMusicSearchDialog] = useState(false);
+  const [openModulePickerDialog, setOpenModulePickerDialog] = useState(false);
+  const [openHotkeyPickerDialog, setOpenHotkeyPickerDialog] = useState(false);
+  const [availableHotkeyApps, setAvailableHotkeyApps] = useState<
+    HotkeyAppDefinition[]
+  >([]);
+  const [hotkeyAppsError, setHotkeyAppsError] = useState<string | null>(null);
+  const [isHotkeyAppsLoading, setIsHotkeyAppsLoading] = useState(false);
+  const [workspaceState, setWorkspaceState] = useState<WorkspaceState>(() =>
+    loadWorkspaceStateFromFallbackStorage(userAddress)
+  );
+
+  const [workspaceHydrated, setWorkspaceHydrated] = useState(false);
+  const [selectedHotkeySlot, setSelectedHotkeySlot] = useState(0);
+  const [hotkeySearchQuery, setHotkeySearchQuery] = useState('');
+  const [debouncedHotkeySearchQuery, setDebouncedHotkeySearchQuery] =
+    useState('');
+  const [earbumpDiscoveryTracks, setEarbumpDiscoveryTracks] = useState<
+    MusicTrack[]
+  >([]);
+  const [earbumpSearchTracks, setEarbumpSearchTracks] = useState<MusicTrack[]>(
+    []
+  );
+  const [selectedTrackSnapshot, setSelectedTrackSnapshot] =
+    useState<MusicTrack | null>(() => getSharedEarbumpTrackSnapshot());
+  const [musicTrackDurations, setMusicTrackDurations] = useState<
+    Record<string, number>
+  >({});
+  const [isEarbumpDiscoveryLoading, setIsEarbumpDiscoveryLoading] =
+    useState(false);
+  const [isEarbumpSearchLoading, setIsEarbumpSearchLoading] = useState(false);
+  const [earbumpDiscoveryError, setEarbumpDiscoveryError] = useState<
+    string | null
+  >(null);
+  const [earbumpSearchError, setEarbumpSearchError] = useState<string | null>(
+    null
+  );
+  const [musicStreamError, setMusicStreamError] = useState<string | null>(null);
+  const [ephemeralReaction, setEphemeralReaction] = useState<string | null>(
+    null
+  );
+  const [onboardingTransitionMessage, setOnboardingTransitionMessage] =
+    useState<string | null>(null);
+  const [postOnboardingMessage, setPostOnboardingMessage] = useState<
+    string | null
+  >(null);
+  const [
+    showOnboardingCompletionConfetti,
+    setShowOnboardingCompletionConfetti,
+  ] = useState(false);
+  const [isQortinoTickled, setIsQortinoTickled] = useState(false);
+  const [qortinoGratefulState, setQortinoGratefulState] =
+    useState<QortinoGratefulState | null>(null);
+  const [qortinoDonationOverlayState, setQortinoDonationOverlayState] =
+    useState<QortinoDonationOverlayState | null>(null);
+  const audioRef = useRef<HTMLAudioElement | null>(getSharedEarbumpAudio());
+  const discoveryRequestRef = useRef<AbortController | null>(null);
+  const searchRequestRef = useRef<AbortController | null>(null);
+  const qortinoGratefulTimeoutRef = useRef<number | null>(null);
+  const qortinoDonationOverlayTimeoutRef = useRef<number | null>(null);
+  const selectedTrackRequestRef = useRef<AbortController | null>(null);
+  const reactionTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const onboardingMessageTimeoutRef = useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null);
+  const onboardingConfettiTimeoutRef = useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null);
+  const lastReactionRef = useRef<string | null>(null);
+  const lastReactionAtRef = useRef(0);
+  const onboardingBubbleLockRef = useRef(false);
+  const onboardingBubbleHoldRef = useRef(false);
+  const previousOnboardingStepRef = useRef<StepKey | null>(null);
+  const onboardingJustCompletedRef = useRef(false);
+  const wasOnboardingVisibleRef = useRef(false);
+  const avatarCompletionAfterPanelCloseRef = useRef(false);
+  const downloadResource = useFetchResources();
+  const clearMusicStreamError = useCallback(
+    () => setMusicStreamError(null),
+    []
+  );
+
+  const runtimeReactionFingerprints = useMemo(
+    () =>
+      new Set([
+        String(t('core:quick_tools_pad.hint_notifications_desktop_only')),
+        String(t('core:quick_tools_pad.hint_minting_panel')),
+        qw('reaction_hotkeys_ready', 'Hotkeys panel ready.'),
+        qw('reaction_music_panel_ready', 'Music panel ready.'),
+        qw('reaction_music_player_ready', 'Music player ready.'),
+        qw('reaction_panel_cleared', 'Panel cleared.'),
+      ]),
+    [t, qw]
+  );
+
+  const resolveCompanionReaction = useCallback(
+    (
+      payload: WorkspaceCompanionReactionPayload
+    ): { allowStructuredBypass: boolean; text: string } => {
+      if (typeof payload === 'string') {
+        return {
+          allowStructuredBypass: false,
+          text: payload.trim(),
+        };
+      }
+
+      if (payload.kind === 'locked_track') {
+        return {
+          allowStructuredBypass: true,
+          text: qw('reaction_locked_track', 'Locked on {{title}}.', {
+            title: payload.title,
+          }).trim(),
+        };
+      }
+
+      return {
+        allowStructuredBypass: true,
+        text: qw('reaction_track_rotation', '{{title}} is in rotation.', {
+          title: payload.title,
+        }).trim(),
+      };
+    },
+    [qw]
+  );
+
+  const pushReaction = useCallback(
+    (
+      payload: WorkspaceCompanionReactionPayload,
+      options?: { allowDuringOnboarding?: boolean }
+    ) => {
+      const { allowStructuredBypass, text: trimmedMessage } =
+        resolveCompanionReaction(payload);
+      if (!trimmedMessage) return;
+
+      if (
+        (onboardingBubbleLockRef.current || onboardingBubbleHoldRef.current) &&
+        options?.allowDuringOnboarding !== true
+      ) {
+        return;
+      }
+
+      const isAllowedRuntimeReaction =
+        allowStructuredBypass ||
+        runtimeReactionFingerprints.has(trimmedMessage);
+
+      if (
+        onboardingBubbleLockRef.current !== true &&
+        options?.allowDuringOnboarding !== true &&
+        !isAllowedRuntimeReaction
+      ) {
+        return;
+      }
+
+      const now = Date.now();
+      if (
+        lastReactionRef.current === trimmedMessage &&
+        now - lastReactionAtRef.current < 1400
+      ) {
+        return;
+      }
+
+      lastReactionRef.current = trimmedMessage;
+      lastReactionAtRef.current = now;
+
+      if (reactionTimeoutRef.current) {
+        window.clearTimeout(reactionTimeoutRef.current);
+      }
+      setEphemeralReaction(trimmedMessage);
+      reactionTimeoutRef.current = window.setTimeout(() => {
+        setEphemeralReaction(null);
+      }, 6800);
+    },
+    [resolveCompanionReaction, runtimeReactionFingerprints]
+  );
+
+  useEffect(() => {
+    audioRef.current = getSharedEarbumpAudio();
+
+    return () => {
+      if (reactionTimeoutRef.current) {
+        window.clearTimeout(reactionTimeoutRef.current);
+      }
+
+      if (onboardingMessageTimeoutRef.current) {
+        window.clearTimeout(onboardingMessageTimeoutRef.current);
+      }
+
+      if (onboardingConfettiTimeoutRef.current) {
+        window.clearTimeout(onboardingConfettiTimeoutRef.current);
+      }
+
+      if (qortinoGratefulTimeoutRef.current) {
+        window.clearTimeout(qortinoGratefulTimeoutRef.current);
+      }
+
+      discoveryRequestRef.current?.abort();
+      searchRequestRef.current?.abort();
+      selectedTrackRequestRef.current?.abort();
+    };
+  }, []);
+
+  const applyWorkspaceState = useCallback(
+    (updater: (current: WorkspaceState) => WorkspaceState) => {
+      setWorkspaceState((current) => sanitizeWorkspaceState(updater(current)));
+    },
+    []
+  );
+
+  useEffect(() => {
+    const handleLogout = () => {
+      stopSharedEarbumpPlayback();
+      setMusicStreamError(null);
+      applyWorkspaceState((current) =>
+        current.musicPlaying
+          ? {
+              ...current,
+              musicPlaying: false,
+            }
+          : current
+      );
+    };
+
+    subscribeToEvent('logout-event', handleLogout);
+
+    return () => {
+      unsubscribeFromEvent('logout-event', handleLogout);
+    };
+  }, [applyWorkspaceState]);
+
+  useEffect(() => {
+    if (userAddress != null) {
+      return;
+    }
+
+    stopSharedEarbumpPlayback();
+    setIsQortinoTickled(false);
+    setQortinoGratefulState(null);
+    setMusicStreamError(null);
+    setSelectedTrackSnapshot(null);
+  }, [userAddress]);
+
+  const handleQortinoPointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      event.currentTarget.setPointerCapture?.(event.pointerId);
+      setIsQortinoTickled(true);
+    },
+    []
+  );
+
+  const handleQortinoPointerRelease = useCallback(() => {
+    setIsQortinoTickled(false);
+  }, []);
+
+  const showQortinoDonationOverlay = useCallback(
+    ({
+      durationMs,
+      message,
+      mood,
+      statusLabel,
+    }: {
+      durationMs: number;
+      message: string;
+    }) => {
+      if (qortinoDonationOverlayTimeoutRef.current != null) {
+        window.clearTimeout(qortinoDonationOverlayTimeoutRef.current);
+      }
+      setQortinoDonationOverlayState({
+        message,
+        nonce: Date.now(),
+      });
+      qortinoDonationOverlayTimeoutRef.current = window.setTimeout(() => {
+        setQortinoDonationOverlayState(null);
+        qortinoDonationOverlayTimeoutRef.current = null;
+      }, durationMs);
+    },
+    []
+  );
+
+  const handleQortinoDonationDragOver = useCallback(
+    (event: ReactDragEvent<HTMLDivElement>) => {
+      if (!event.dataTransfer.types.includes(QORTINO_DONATION_DRAG_TYPE)) {
+        return;
+      }
+      event.preventDefault();
+      event.dataTransfer.dropEffect = 'move';
+    },
+    []
+  );
+
+  const handleQortinoDonationDrop = useCallback(
+    (event: ReactDragEvent<HTMLDivElement>) => {
+      if (!event.dataTransfer.types.includes(QORTINO_DONATION_DRAG_TYPE)) {
+        return;
+      }
+      event.preventDefault();
+      executeEvent('openPaymentInternal', {
+        name: QORTINO_DONATION_PREFILL_NAME,
+      });
+      showQortinoDonationOverlay({
+        durationMs: QORTINO_DONATION_OVERLAY_DURATION_MS,
+        message: QORTINO_DONATION_BUBBLE_MESSAGE,
+      });
+    },
+    [showQortinoDonationOverlay]
+  );
+
+  useEffect(
+    () => () => {
+      if (qortinoGratefulTimeoutRef.current != null) {
+        window.clearTimeout(qortinoGratefulTimeoutRef.current);
+      }
+      if (qortinoDonationOverlayTimeoutRef.current != null) {
+        window.clearTimeout(qortinoDonationOverlayTimeoutRef.current);
+      }
+    },
+    []
+  );
+
+  useEffect(() => {
+    const handleQortinoDonationCompleted = (event: Event) => {
+      const recipient =
+        (
+          event as CustomEvent<{
+            recipient?: string;
+          }>
+        )?.detail?.recipient ?? '';
+
+      if (
+        recipient.trim().toLowerCase() !==
+        QORTINO_DONATION_PREFILL_NAME.toLowerCase()
+      ) {
+        return;
+      }
+
+      if (qortinoGratefulTimeoutRef.current != null) {
+        window.clearTimeout(qortinoGratefulTimeoutRef.current);
+      }
+
+      setQortinoGratefulState({
+        message: QORTINO_DONATION_THANK_YOU_MESSAGE,
+        nonce: Date.now(),
+      });
+
+      qortinoGratefulTimeoutRef.current = window.setTimeout(() => {
+        setQortinoGratefulState(null);
+        qortinoGratefulTimeoutRef.current = null;
+      }, QORTINO_DONATION_GRATEFUL_DURATION_MS);
+    };
+
+    subscribeToEvent(
+      QORTINO_DONATION_COMPLETED_EVENT,
+      handleQortinoDonationCompleted
+    );
+
+    return () => {
+      unsubscribeFromEvent(
+        QORTINO_DONATION_COMPLETED_EVENT,
+        handleQortinoDonationCompleted
+      );
+    };
+  }, []);
+
+  useEffect(() => {
+    if (userAddress == null) {
+      setDismissed(null);
+      setAvatarStepCompleted(false);
+      setQortsAcquiredAcknowledged(false);
+      setShowRegisterNameDelayHint(false);
+      setShowOnboardingCompletionConfetti(false);
+      avatarCompletionAfterPanelCloseRef.current = false;
+      return;
+    }
+
+    setDismissed(
+      localStorage.getItem(`${LS_KEY}_${userAddress}`) === 'completed'
+    );
+    setAvatarStepCompleted(false);
+    setQortsAcquiredAcknowledged(false);
+    setShowRegisterNameDelayHint(false);
+    setShowOnboardingCompletionConfetti(false);
+    avatarCompletionAfterPanelCloseRef.current = false;
+  }, [userAddress]);
+
+  useEffect(() => {
+    let active = true;
+    setWorkspaceState(loadWorkspaceStateFromFallbackStorage(userAddress));
+    setWorkspaceHydrated(false);
+
+    void loadWorkspaceState(userAddress).then((nextState) => {
+      if (!active) return;
+      setWorkspaceState(nextState);
+      setWorkspaceHydrated(true);
+    });
+
+    return () => {
+      active = false;
+    };
+  }, [userAddress]);
+
+  useEffect(() => {
+    if (!workspaceHydrated) return;
+    void persistWorkspaceState(workspaceState, userAddress);
+  }, [userAddress, workspaceHydrated, workspaceState]);
+
+  useEffect(() => {
+    if (!selectedTrackSnapshot?.id) {
+      return;
+    }
+
+    setSharedEarbumpTrackSnapshot(selectedTrackSnapshot);
+  }, [selectedTrackSnapshot]);
+
+  const checkAvatar = useCallback(async () => {
+    if (!name) return;
+
+    try {
+      setCheckingAvatar(true);
+      const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=${AVATAR_SERVICE}&identifier=${AVATAR_IDENTIFIER}&limit=1&name=${name}&includemetadata=false&prefix=true`;
+      const response = await fetch(url);
+      const data = await response.json();
+      setHasAvatar(Array.isArray(data) && data.length > 0);
+    } catch {
+      setHasAvatar(false);
+    } finally {
+      setCheckingAvatar(false);
+    }
+  }, [name]);
+
+  useEffect(() => {
+    void checkAvatar();
+  }, [checkAvatar]);
+
+  useEffect(() => {
+    if (dismissed !== false || !userAddress) return;
+
+    const balanceNum = balance != null ? Number(balance) : null;
+    if (balanceNum != null && balanceNum >= MIN_BALANCE_FOR_QORTS) return;
+
+    const url = `${getBaseApiReact()}/transactions/payments/between?recipientAddress=${encodeURIComponent(userAddress)}&confirmationStatus=CONFIRMED&limit=20`;
+    let cancelled = false;
+
+    fetch(url)
+      .then((res) => res.json())
+      .then((data: Array<{ amount?: string }>) => {
+        if (cancelled || !Array.isArray(data)) return;
+        const total = data.reduce(
+          (sum, tx) => sum + (parseFloat(tx?.amount ?? '0') || 0),
+          0
+        );
+        setPaymentsFallbackTotal(total);
+      })
+      .catch(() => {
+        if (!cancelled) setPaymentsFallbackTotal(0);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [balance, dismissed, userAddress]);
+
+  const realHasQorts =
+    (balance != null && Number(balance) >= MIN_BALANCE_FOR_QORTS) ||
+    (paymentsFallbackTotal != null &&
+      paymentsFallbackTotal >= MIN_BALANCE_FOR_QORTS);
+  const hasQorts = realHasQorts;
+  const hasName = Boolean(name);
+  const hasPendingRegisterName =
+    (txList?.some((tx) => tx?.type === 'register-name' && !tx?.done) ??
+      false) &&
+    !hasName;
+  const resolvedHasAvatar = hasAvatar || avatarStepCompleted;
+  const hasCompletionChecksPending = checkingAvatar;
+
+  useEffect(() => {
+    if (
+      !hasCompletionChecksPending &&
+      hasQorts &&
+      hasName &&
+      resolvedHasAvatar &&
+      dismissed === false &&
+      userAddress
+    ) {
+      localStorage.setItem(`${LS_KEY}_${userAddress}`, 'completed');
+      onboardingJustCompletedRef.current = true;
+      setDismissed(true);
+      applyWorkspaceState((current) => ({
+        ...current,
+        onboardingCelebrationSeen: true,
+      }));
+      onGettingStartedComplete?.();
+    }
+  }, [
+    applyWorkspaceState,
+    dismissed,
+    hasCompletionChecksPending,
+    hasName,
+    hasQorts,
+    onGettingStartedComplete,
+    pushReaction,
+    resolvedHasAvatar,
+    userAddress,
+  ]);
+
+  const isWorkspaceFreshlyUnlocked =
+    showOnboardingCompletionConfetti && Boolean(postOnboardingMessage);
+
+  const hotkeyActions = useMemo<Record<HotkeyActionId, HotkeyActionDefinition>>(
+    () => ({
+      earbump: {
+        description: qw('hotkeys_launch_description', 'Launch {{appName}}', {
+          appName: 'Ear-Bump',
+        }),
+        icon: LibraryMusicRoundedIcon,
+        id: 'earbump',
+        label: 'Ear-Bump',
+        run: () => openApp('Ear-Bump'),
+      },
+      'q-blog': {
+        description: qw('hotkeys_launch_description', 'Launch {{appName}}', {
+          appName: 'Q-Blog',
+        }),
+        icon: EditRoundedIcon,
+        id: 'q-blog',
+        label: 'Q-Blog',
+        run: () => openApp('Q-Blog'),
+      },
+      'q-mail': {
+        description: qw('hotkeys_launch_description', 'Launch {{appName}}', {
+          appName: 'Q-Mail',
+        }),
+        icon: MailOutlineRoundedIcon,
+        id: 'q-mail',
+        label: 'Q-Mail',
+        run: () => openApp('q-mail'),
+      },
+      'q-trade': {
+        description: qw('hotkeys_launch_description', 'Launch {{appName}}', {
+          appName: 'Q-Trade',
+        }),
+        icon: ShoppingBagRoundedIcon,
+        id: 'q-trade',
+        label: 'Q-Trade',
+        run: () => openApp('Q-Trade'),
+      },
+      'q-mintership': {
+        description: qw('hotkeys_launch_description', 'Launch {{appName}}', {
+          appName: 'Q-Mintership',
+        }),
+        icon: SpaRoundedIcon,
+        id: 'q-mintership',
+        label: 'Q-Mintership',
+        run: () => openApp('q-mintership'),
+      },
+      'q-tube': {
+        description: qw('hotkeys_launch_description', 'Launch {{appName}}', {
+          appName: 'Q-Tube',
+        }),
+        icon: VideoLibraryRoundedIcon,
+        id: 'q-tube',
+        label: 'Q-Tube',
+        run: () => openApp('Q-Tube'),
+      },
+      quitter: {
+        description: qw('hotkeys_launch_description', 'Launch {{appName}}', {
+          appName: 'Quitter',
+        }),
+        icon: ForumRoundedIcon,
+        id: 'quitter',
+        label: 'Quitter',
+        run: () => openApp('Quitter'),
+      },
+    }),
+    [openApp, qw]
+  );
+
+  const hotkeyCatalog = useMemo(
+    () =>
+      availableHotkeyApps.length > 0
+        ? availableHotkeyApps
+        : (Object.keys(hotkeyActions) as HotkeyActionId[]).map((id) => ({
+            appName: hotkeyActions[id].label,
+            description: hotkeyActions[id].description,
+            label: hotkeyActions[id].label,
+            service: 'APP' as const,
+          })),
+    [availableHotkeyApps.length, availableHotkeyApps, hotkeyActions]
+  );
+
+  const loadHotkeyApps = useCallback(async () => {
+    if (isHotkeyAppsLoading) {
+      return;
+    }
+
+    setIsHotkeyAppsLoading(true);
+    setHotkeyAppsError(null);
+
+    try {
+      const urls = [
+        `${getBaseApiReact()}/arbitrary/resources/search?service=APP&mode=ALL&limit=0&includestatus=true&includemetadata=true`,
+        `${getBaseApiReact()}/arbitrary/resources/search?service=WEBSITE&mode=ALL&limit=0&includestatus=true&includemetadata=true`,
+      ];
+      const responses = await Promise.all(
+        urls.map((url) =>
+          fetch(url, {
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            method: 'GET',
+          })
+        )
+      );
+
+      if (responses.some((response) => !response.ok)) {
+        throw new Error('Unable to load Q-Apps.');
+      }
+
+      const responseData = (
+        await Promise.all(responses.map((response) => response.json()))
+      ).flat() as QAppResourceRecord[];
+      const nextCatalog = Array.from(
+        new Map(
+          (Array.isArray(responseData) ? responseData : [])
+            .map((resource) => {
+              const appName =
+                typeof resource?.name === 'string' ? resource.name.trim() : '';
+              const service =
+                resource?.service === 'WEBSITE' ? 'WEBSITE' : 'APP';
+              if (!appName) {
+                return null;
+              }
+
+              const label =
+                typeof resource.metadata?.title === 'string' &&
+                resource.metadata.title.trim().length > 0
+                  ? resource.metadata.title.trim()
+                  : appName;
+              const description =
+                typeof resource.metadata?.description === 'string'
+                  ? resource.metadata.description.trim()
+                  : '';
+
+              return [
+                `${service.toLowerCase()}::${appName.toLowerCase()}`,
+                {
+                  appName,
+                  description,
+                  label,
+                  service,
+                } satisfies HotkeyAppDefinition,
+              ] as const;
+            })
+            .filter(
+              (item): item is readonly [string, HotkeyAppDefinition] =>
+                item != null
+            )
+        ).values()
+      ).sort((left, right) =>
+        left.label.localeCompare(right.label, undefined, {
+          sensitivity: 'base',
+        })
+      );
+
+      setAvailableHotkeyApps(nextCatalog);
+    } catch (error) {
+      console.error(error);
+      setHotkeyAppsError(
+        qw('error_hotkey_catalog', 'Unable to load Q-Apps right now.')
+      );
+    } finally {
+      setIsHotkeyAppsLoading(false);
+    }
+  }, [isHotkeyAppsLoading, qw]);
+
+  useEffect(() => {
+    if (
+      workspaceState.mode !== 'hotkeys' &&
+      !openHotkeyPickerDialog &&
+      availableHotkeyApps.length > 0
+    ) {
+      return;
+    }
+
+    if (
+      (workspaceState.mode === 'hotkeys' || openHotkeyPickerDialog) &&
+      availableHotkeyApps.length === 0 &&
+      !isHotkeyAppsLoading
+    ) {
+      void loadHotkeyApps();
+    }
+  }, [
+    availableHotkeyApps.length,
+    isHotkeyAppsLoading,
+    loadHotkeyApps,
+    openHotkeyPickerDialog,
+    workspaceState.mode,
+  ]);
+
+  const hotkeyAppsByName = useMemo(() => {
+    const nextMap = new Map<string, HotkeyAppDefinition>();
+    availableHotkeyApps.forEach((app) => {
+      nextMap.set(
+        `${app.service.toLowerCase()}${HOTKEY_SLOT_VALUE_SEPARATOR}${app.appName.toLowerCase()}`,
+        app
+      );
+      if (!nextMap.has(app.appName.toLowerCase())) {
+        nextMap.set(app.appName.toLowerCase(), app);
+      }
+    });
+    return nextMap;
+  }, [availableHotkeyApps]);
+
+  const resolveHotkeyApp = useCallback(
+    (slotValue: string): HotkeyAppDefinition => {
+      const parsedSlot = parseHotkeySlotValue(slotValue);
+      const knownApp =
+        hotkeyAppsByName.get(
+          `${parsedSlot.service.toLowerCase()}${HOTKEY_SLOT_VALUE_SEPARATOR}${parsedSlot.appName.toLowerCase()}`
+        ) ?? hotkeyAppsByName.get(parsedSlot.appName.toLowerCase());
+
+      if (knownApp) {
+        return knownApp;
+      }
+
+      return {
+        appName: parsedSlot.appName,
+        description: qw('hotkeys_fallback_launch', 'Launch Q-App'),
+        label: formatHotkeyAppLabel(parsedSlot.appName),
+        service: parsedSlot.service,
+      };
+    },
+    [hotkeyAppsByName, qw]
+  );
+
+  const steps = useMemo(
+    () => [
+      {
+        accent: '#92B8FF',
+        actionLabel: t(
+          'tutorial:home.get_six_qorts_way3_action',
+          'Open Q-Trade'
+        ),
+        ctaLabel: t('tutorial:home.get_six_qorts', 'Get 6 QORT'),
+        done: hasQorts,
+        helper: t(
+          'tutorial:home.get_qorts_workspace_hint',
+          'Unlock your first 6 QORT to activate the rest of the setup.'
+        ),
+        icon: ShoppingBagRoundedIcon,
+        key: 'get_six_qorts' as const,
+        label: t('tutorial:home.get_six_qorts', 'Get 6 QORT'),
+        onAction: () => setOpenQortsDialog(true),
+      },
+      {
+        accent: '#8DBEFF',
+        actionLabel: t('tutorial:home.open', 'Open'),
+        ctaLabel: t('tutorial:home.register_name', 'Register your name'),
+        done: hasName,
+        helper: t(
+          'tutorial:home.register_name_workspace_hint',
+          'A registered name turns this account into a recognizable identity.'
+        ),
+        icon: DriveFileRenameOutlineRoundedIcon,
+        key: 'register_name' as const,
+        label: hasPendingRegisterName
+          ? t('tutorial:home.confirming', 'Confirming')
+          : t('tutorial:home.register_name', 'Register your name'),
+        loading: hasPendingRegisterName,
+        onAction: () => executeEvent('openRegisterName', {}),
+      },
+      {
+        accent: '#8DBEFF',
+        actionLabel: t('tutorial:home.open', 'Open'),
+        ctaLabel: t('tutorial:home.load_avatar', 'Load your avatar'),
+        done: resolvedHasAvatar,
+        helper: t(
+          'tutorial:home.load_avatar_workspace_hint',
+          'Give the dashboard a face so the whole space starts to feel like yours.'
+        ),
+        icon: UploadRoundedIcon,
+        key: 'load_avatar' as const,
+        label: t('tutorial:home.load_avatar', 'Load your avatar'),
+        loading: checkingAvatar,
+        onAction: () => executeEvent('openAvatarUpload', {}),
+      },
+    ],
+    [
+      checkingAvatar,
+      hasName,
+      hasPendingRegisterName,
+      hasQorts,
+      resolvedHasAvatar,
+      t,
+    ]
+  );
+
+  const completedCount = useMemo(
+    () => steps.filter((step) => step.done).length,
+    [steps]
+  );
+  const currentProgressStep = useMemo(
+    () => Math.min(completedCount + 1, steps.length),
+    [completedCount, steps.length]
+  );
+  const isOnboardingVisible = dismissed === false;
+  const isQortsAcquiredAwaitingNext =
+    isOnboardingVisible &&
+    hasQorts &&
+    !hasName &&
+    !hasPendingRegisterName &&
+    !qortsAcquiredAcknowledged;
+  const currentProgressStepDisplay = isQortsAcquiredAwaitingNext
+    ? 1
+    : currentProgressStep;
+  const baseCurrentStep =
+    steps.find((step) => !step.done) ?? steps[steps.length - 1];
+  const currentStep = isQortsAcquiredAwaitingNext
+    ? {
+        ...steps[0],
+        ctaLabel: t('tutorial:home.next', 'Next'),
+        done: true,
+        helper: t(
+          'tutorial:home.qorts_acquired_hint',
+          'The hardest part is over. Press Next when you are ready to register your name.'
+        ),
+        label: t('tutorial:home.qorts_acquired', 'QORT acquired'),
+        loading: false,
+      }
+    : baseCurrentStep;
+  const CurrentStepIcon = currentStep.icon;
+
+  useEffect(() => {
+    onboardingBubbleLockRef.current = isOnboardingVisible;
+  }, [isOnboardingVisible]);
+
+  useEffect(() => {
+    onboardingBubbleHoldRef.current =
+      onboardingTransitionMessage != null || postOnboardingMessage != null;
+  }, [onboardingTransitionMessage, postOnboardingMessage]);
+
+  useEffect(() => {
+    if (!isOnboardingVisible) {
+      previousOnboardingStepRef.current = null;
+      return;
+    }
+
+    const previousStepKey = previousOnboardingStepRef.current;
+    previousOnboardingStepRef.current = currentStep.key;
+
+    if (previousStepKey == null || previousStepKey === currentStep.key) {
+      return;
+    }
+
+    const nextRecognitionMessage =
+      previousStepKey === 'get_six_qorts' && currentStep.key === 'register_name'
+        ? t(
+            'tutorial:home.onboarding_transition_hard_part_done',
+            'Nice work. The hardest part is done.'
+          )
+        : previousStepKey === 'register_name' &&
+            currentStep.key === 'load_avatar'
+          ? t(
+              'tutorial:home.onboarding_transition_one_more',
+              'Great. One more to go.'
+            )
+          : null;
+
+    if (!nextRecognitionMessage) {
+      setOnboardingTransitionMessage(null);
+      return;
+    }
+
+    if (onboardingMessageTimeoutRef.current) {
+      window.clearTimeout(onboardingMessageTimeoutRef.current);
+      onboardingMessageTimeoutRef.current = null;
+    }
+
+    setOnboardingTransitionMessage(nextRecognitionMessage);
+    onboardingMessageTimeoutRef.current = window.setTimeout(() => {
+      onboardingMessageTimeoutRef.current = null;
+      setOnboardingTransitionMessage(null);
+    }, ONBOARDING_RECOGNITION_DURATION_MS);
+  }, [currentStep.key, isOnboardingVisible, t]);
+
+  useEffect(() => {
+    if (
+      !isOnboardingVisible ||
+      currentStep.key !== 'register_name' ||
+      !hasPendingRegisterName
+    ) {
+      setShowRegisterNameDelayHint(false);
+      return;
+    }
+
+    setShowRegisterNameDelayHint(false);
+    const hintTimer = window.setTimeout(() => {
+      setShowRegisterNameDelayHint(true);
+    }, 5000);
+
+    return () => {
+      window.clearTimeout(hintTimer);
+    };
+  }, [currentStep.key, hasPendingRegisterName, isOnboardingVisible]);
+
+  useEffect(() => {
+    const handleAvatarUploaded = () => {
+      if (isOnboardingVisible && currentStep.key === 'load_avatar') {
+        avatarCompletionAfterPanelCloseRef.current = true;
+        return;
+      }
+
+      setHasAvatar(true);
+      void checkAvatar();
+    };
+
+    const handleAvatarUploadClosed = () => {
+      if (!avatarCompletionAfterPanelCloseRef.current) {
+        return;
+      }
+
+      avatarCompletionAfterPanelCloseRef.current = false;
+      setAvatarStepCompleted(true);
+      setHasAvatar(true);
+      void checkAvatar();
+    };
+
+    subscribeToEvent('avatarUploaded', handleAvatarUploaded);
+    subscribeToEvent('avatarUploadClosed', handleAvatarUploadClosed);
+
+    return () => {
+      unsubscribeFromEvent('avatarUploaded', handleAvatarUploaded);
+      unsubscribeFromEvent('avatarUploadClosed', handleAvatarUploadClosed);
+    };
+  }, [checkAvatar, currentStep.key, isOnboardingVisible]);
+
+  useEffect(() => {
+    const wasOnboardingVisible = wasOnboardingVisibleRef.current;
+    wasOnboardingVisibleRef.current = isOnboardingVisible;
+
+    if (!wasOnboardingVisible && isOnboardingVisible) {
+      onboardingJustCompletedRef.current = false;
+      setPostOnboardingMessage(null);
+      setOnboardingTransitionMessage(null);
+      return;
+    }
+
+    if (!wasOnboardingVisible || isOnboardingVisible) {
+      return;
+    }
+
+    if (!onboardingJustCompletedRef.current) {
+      return;
+    }
+
+    onboardingJustCompletedRef.current = false;
+
+    if (reactionTimeoutRef.current) {
+      window.clearTimeout(reactionTimeoutRef.current);
+      reactionTimeoutRef.current = null;
+    }
+
+    if (onboardingMessageTimeoutRef.current) {
+      window.clearTimeout(onboardingMessageTimeoutRef.current);
+    }
+
+    setEphemeralReaction(null);
+    setOnboardingTransitionMessage(null);
+    setPostOnboardingMessage(
+      t(
+        'tutorial:home.post_onboarding_workspace_ready',
+        'All set. You can start building your workspace above.'
+      )
+    );
+    setShowOnboardingCompletionConfetti(true);
+
+    if (onboardingConfettiTimeoutRef.current) {
+      window.clearTimeout(onboardingConfettiTimeoutRef.current);
+    }
+
+    onboardingConfettiTimeoutRef.current = window.setTimeout(() => {
+      onboardingConfettiTimeoutRef.current = null;
+      setShowOnboardingCompletionConfetti(false);
+    }, 4200);
+  }, [isOnboardingVisible, t]);
+
+  useEffect(() => {
+    if (workspaceState.mode === 'empty' || postOnboardingMessage == null) {
+      return;
+    }
+
+    setPostOnboardingMessage(null);
+  }, [postOnboardingMessage, workspaceState.mode]);
+
+  const musicSearchQuery = workspaceState.musicQuery.trim();
+  const knownMusicTracksById = useMemo(() => {
+    const nextMap = new Map<string, MusicTrack>();
+
+    for (const track of earbumpDiscoveryTracks) {
+      nextMap.set(track.id, track);
+    }
+
+    for (const track of earbumpSearchTracks) {
+      nextMap.set(track.id, track);
+    }
+
+    if (selectedTrackSnapshot) {
+      nextMap.set(selectedTrackSnapshot.id, selectedTrackSnapshot);
+    }
+
+    return nextMap;
+  }, [earbumpDiscoveryTracks, earbumpSearchTracks, selectedTrackSnapshot]);
+
+  const resolveMusicTrack = useCallback(
+    (track: MusicTrack) => {
+      const knownDuration = musicTrackDurations[track.id];
+
+      if (!Number.isFinite(knownDuration) || knownDuration <= 0) {
+        return track;
+      }
+
+      const durationLabel = formatPlaybackTime(knownDuration);
+      return track.length === durationLabel
+        ? track
+        : {
+            ...track,
+            length: durationLabel,
+          };
+    },
+    [musicTrackDurations]
+  );
+
+  useEffect(() => {
+    if (!workspaceHydrated || workspaceState.mode !== 'music') {
+      return undefined;
+    }
+
+    discoveryRequestRef.current?.abort();
+    const controller = new AbortController();
+    discoveryRequestRef.current = controller;
+    setIsEarbumpDiscoveryLoading(true);
+
+    void fetchEarbumpRecentTracks({
+      limit: 12,
+      signal: controller.signal,
+    })
+      .then((tracks) => {
+        setEarbumpDiscoveryTracks(tracks);
+        setEarbumpDiscoveryError(null);
+
+        if (tracks.length === 0) {
+          return;
+        }
+
+        setSelectedTrackSnapshot((current) => current ?? tracks[0]);
+
+        applyWorkspaceState((current) =>
+          current.selectedTrackId
+            ? current
+            : {
+                ...current,
+                selectedTrackId: tracks[0].id,
+              }
+        );
+      })
+      .catch((error: unknown) => {
+        if (isAbortError(error)) {
+          return;
+        }
+
+        console.error('Failed to load EarBump discovery tracks', error);
+        setEarbumpDiscoveryTracks([]);
+        setEarbumpDiscoveryError(
+          qw('error_earbump_discovery', 'Unable to load EarBump right now.')
+        );
+      })
+      .finally(() => {
+        if (!controller.signal.aborted) {
+          setIsEarbumpDiscoveryLoading(false);
+        }
+      });
+
+    return () => {
+      controller.abort();
+      setIsEarbumpDiscoveryLoading(false);
+    };
+  }, [applyWorkspaceState, qw, workspaceHydrated, workspaceState.mode]);
+
+  useEffect(() => {
+    searchRequestRef.current?.abort();
+
+    if (workspaceState.mode !== 'music' || !musicSearchQuery) {
+      setEarbumpSearchTracks([]);
+      setEarbumpSearchError(null);
+      setIsEarbumpSearchLoading(false);
+      return undefined;
+    }
+
+    const controller = new AbortController();
+    searchRequestRef.current = controller;
+    const timeoutId = window.setTimeout(() => {
+      setIsEarbumpSearchLoading(true);
+
+      void searchEarbumpTracks(musicSearchQuery, {
+        limit: 8,
+        signal: controller.signal,
+      })
+        .then((tracks) => {
+          setEarbumpSearchTracks(tracks);
+          setEarbumpSearchError(null);
+        })
+        .catch((error: unknown) => {
+          if (isAbortError(error)) {
+            return;
+          }
+
+          console.error('Failed to search EarBump tracks', error);
+          setEarbumpSearchTracks([]);
+          setEarbumpSearchError(
+            qw('error_earbump_search', 'Unable to search EarBump right now.')
+          );
+        })
+        .finally(() => {
+          if (!controller.signal.aborted) {
+            setIsEarbumpSearchLoading(false);
+          }
+        });
+    }, 220);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+      controller.abort();
+    };
+  }, [musicSearchQuery, qw, workspaceState.mode]);
+
+  useEffect(() => {
+    if (
+      !workspaceHydrated ||
+      workspaceState.mode !== 'music' ||
+      !workspaceState.selectedTrackId
+    ) {
+      return undefined;
+    }
+
+    const matchedTrack = knownMusicTracksById.get(
+      workspaceState.selectedTrackId
+    );
+    if (matchedTrack) {
+      setSelectedTrackSnapshot(matchedTrack);
+      return undefined;
+    }
+
+    selectedTrackRequestRef.current?.abort();
+    const controller = new AbortController();
+    selectedTrackRequestRef.current = controller;
+
+    void fetchEarbumpTrackById(workspaceState.selectedTrackId, {
+      signal: controller.signal,
+    })
+      .then((track) => {
+        if (track) {
+          setSelectedTrackSnapshot(track);
+        }
+      })
+      .catch((error: unknown) => {
+        if (!isAbortError(error)) {
+          console.error('Failed to restore selected EarBump track', error);
+        }
+      });
+
+    return () => {
+      controller.abort();
+    };
+  }, [
+    knownMusicTracksById,
+    workspaceHydrated,
+    workspaceState.mode,
+    workspaceState.selectedTrackId,
+  ]);
+
+  const selectedTrackCandidate = workspaceState.selectedTrackId
+    ? (knownMusicTracksById.get(workspaceState.selectedTrackId) ??
+      (selectedTrackSnapshot?.id === workspaceState.selectedTrackId
+        ? selectedTrackSnapshot
+        : null))
+    : null;
+  const activeTrackSource =
+    selectedTrackCandidate ??
+    earbumpDiscoveryTracks[0] ??
+    selectedTrackSnapshot ??
+    null;
+  const activeTrack = useMemo(
+    () =>
+      activeTrackSource
+        ? resolveMusicTrack(activeTrackSource)
+        : emptyMusicTrack,
+    [activeTrackSource, emptyMusicTrack, resolveMusicTrack]
+  );
+  const activeTrackResourceKey = useMemo(
+    () => buildTrackResourceKey(activeTrack),
+    [activeTrack]
+  );
+  const activeTrackResource = useAtomValue(
+    resourceKeySelector(activeTrackResourceKey)
+  );
+  const activeTrackResourceStatus =
+    typeof activeTrackResource?.status?.status === 'string'
+      ? activeTrackResource.status.status
+      : null;
+  const activeTrackPeerCount =
+    typeof activeTrackResource?.status?.numberOfPeers === 'number'
+      ? activeTrackResource.status.numberOfPeers
+      : null;
+  const activeTrackReadyPercent = getTrackReadyPercent(
+    activeTrackResourceStatus,
+    Number(activeTrackResource?.status?.percentLoaded ?? 0)
+  );
+  const activeTrackReadyState = getTrackReadyState(
+    activeTrackResourceStatus,
+    Boolean(activeTrack.id)
+  );
+  const activeTrackPlaybackUrl =
+    activeTrackReadyState === 'ready' ? buildTrackPlaybackUrl(activeTrack) : '';
+  const isTrackPreparing = activeTrackReadyState === 'downloading';
+  const isTrackReady = activeTrackReadyState === 'ready';
+  const isTrackLoadError = activeTrackReadyState === 'error';
+  const isResolvingSelectedTrack =
+    workspaceHydrated &&
+    workspaceState.mode === 'music' &&
+    Boolean(workspaceState.selectedTrackId) &&
+    activeTrack.id !== workspaceState.selectedTrackId;
+  const activeTrackDurationSeconds = useMemo(() => {
+    if (!activeTrack.id) return 0;
+
+    const audio = audioRef.current;
+    if (audio && Number.isFinite(audio.duration) && audio.duration > 0) {
+      return audio.duration;
+    }
+
+    const storedDuration = musicTrackDurations[activeTrack.id];
+    return Number.isFinite(storedDuration) && storedDuration > 0
+      ? storedDuration
+      : 0;
+  }, [activeTrack.id, musicTrackDurations]);
+  const hasTrackPlaybackMetadata = activeTrackDurationSeconds > 0;
+  const isTrackPlayable = isTrackReady || hasTrackPlaybackMetadata;
+  const isTrackPeerStarved =
+    isTrackPreparing &&
+    !hasTrackPlaybackMetadata &&
+    activeTrackReadyPercent > 0 &&
+    (activeTrackPeerCount ?? 0) === 0;
+  const discoveryTracks = useMemo(
+    () =>
+      earbumpDiscoveryTracks
+        .filter((track) => track.id !== activeTrack.id)
+        .slice(0, 3)
+        .map(resolveMusicTrack),
+    [activeTrack.id, earbumpDiscoveryTracks, resolveMusicTrack]
+  );
+  const browserTracks = useMemo(() => {
+    if (musicSearchQuery) {
+      return earbumpSearchTracks.map(resolveMusicTrack);
+    }
+
+    return discoveryTracks;
+  }, [
+    discoveryTracks,
+    earbumpSearchTracks,
+    musicSearchQuery,
+    resolveMusicTrack,
+  ]);
+  const playbackQueue = useMemo(() => {
+    const sourceTracks = musicSearchQuery
+      ? earbumpSearchTracks
+      : earbumpDiscoveryTracks;
+    const resolvedTracks = sourceTracks.map(resolveMusicTrack);
+
+    if (!activeTrack.id) {
+      return resolvedTracks;
+    }
+
+    return [
+      activeTrack,
+      ...resolvedTracks.filter((track) => track.id !== activeTrack.id),
+    ];
+  }, [
+    activeTrack,
+    earbumpDiscoveryTracks,
+    earbumpSearchTracks,
+    musicSearchQuery,
+    resolveMusicTrack,
+  ]);
+  const isMusicBrowserLoading = musicSearchQuery
+    ? isEarbumpSearchLoading
+    : isEarbumpDiscoveryLoading;
+  const musicBrowserError = musicSearchQuery
+    ? earbumpSearchError
+    : earbumpDiscoveryError;
+  const musicLoadingHint = useMemo(() => {
+    if (!activeTrack.id) return null;
+    if (musicStreamError) return musicStreamError;
+    if (isTrackLoadError) {
+      return qw(
+        'music_track_load_failed',
+        'This track could not finish loading on your node.'
+      );
+    }
+    if (hasTrackPlaybackMetadata) return null;
+    if (!isTrackPreparing || isTrackPlayable) return null;
+
+    if (isTrackPeerStarved) {
+      return qw('music_no_peers_data', 'No peers for remaining data');
+    }
+
+    const roundedPercent = Math.round(activeTrackReadyPercent);
+    const peerCount = activeTrackPeerCount ?? 0;
+
+    if (activeTrackReadyPercent > 0) {
+      if (peerCount > 0) {
+        return peerCount === 1
+          ? qw(
+              'music_preparing_peers_one',
+              'Preparing on your node... {{percent}}% ({{count}} peer)',
+              {
+                percent: roundedPercent,
+                count: peerCount,
+              }
+            )
+          : qw(
+              'music_preparing_peers_other',
+              'Preparing on your node... {{percent}}% ({{count}} peers)',
+              {
+                percent: roundedPercent,
+                count: peerCount,
+              }
+            );
+      }
+
+      return qw(
+        'music_preparing_percent_only',
+        'Preparing on your node... {{percent}}%',
+        {
+          percent: roundedPercent,
+        }
+      );
+    }
+
+    if (activeTrackResourceStatus === 'SEARCHING') {
+      return qw('music_searching_peers', 'Looking for peers...');
+    }
+
+    if (activeTrackResourceStatus === 'BUILDING') {
+      return qw(
+        'music_finalizing_track',
+        'Finalizing the track on your node...'
+      );
+    }
+
+    return qw('music_preparing_base', 'Preparing on your node...');
+  }, [
+    activeTrack.id,
+    activeTrackPeerCount,
+    activeTrackReadyPercent,
+    activeTrackResource,
+    activeTrackResourceStatus,
+    hasTrackPlaybackMetadata,
+    isTrackLoadError,
+    isTrackPeerStarved,
+    isTrackPreparing,
+    isTrackPlayable,
+    isTrackReady,
+    musicStreamError,
+    qw,
+  ]);
+  const musicStatusSlotMessage = useMemo(
+    () =>
+      musicLoadingHint ??
+      (isEarbumpDiscoveryLoading
+        ? qw('music_syncing_library', 'Syncing with EarBump library...')
+        : earbumpDiscoveryError),
+    [earbumpDiscoveryError, isEarbumpDiscoveryLoading, musicLoadingHint, qw]
+  );
+  useEffect(() => {
+    if (workspaceState.mode !== 'music') {
+      return;
+    }
+
+    if (!activeTrack.id || !activeTrack.name) {
+      setMusicStreamError(null);
+      return;
+    }
+
+    if (activeTrackReadyState === 'ready' || hasTrackPlaybackMetadata) {
+      setMusicStreamError(null);
+      return;
+    }
+
+    if (activeTrackReadyState === 'error') {
+      return;
+    }
+
+    void downloadResource({
+      identifier: activeTrack.id,
+      name: activeTrack.name,
+      service: EARBUMP_AUDIO_SERVICE,
+    });
+  }, [
+    activeTrack.id,
+    activeTrack.name,
+    activeTrackReadyState,
+    downloadResource,
+    hasTrackPlaybackMetadata,
+    workspaceState.mode,
+  ]);
+
+  useEffect(() => {
+    if (!isTrackLoadError || !workspaceState.musicPlaying) {
+      return;
+    }
+
+    applyWorkspaceState((current) =>
+      current.musicPlaying
+        ? {
+            ...current,
+            musicPlaying: false,
+          }
+        : current
+    );
+  }, [applyWorkspaceState, isTrackLoadError, workspaceState.musicPlaying]);
+
+  useEffect(() => {
+    const id = window.setTimeout(() => {
+      setDebouncedHotkeySearchQuery(hotkeySearchQuery);
+    }, HOTKEY_PICKER_SEARCH_DEBOUNCE_MS);
+    return () => window.clearTimeout(id);
+  }, [hotkeySearchQuery]);
+
+  const filteredHotkeyCatalog = useMemo(() => {
+    const normalized = debouncedHotkeySearchQuery.trim().toLowerCase();
+    if (!normalized) return hotkeyCatalog;
+
+    return hotkeyCatalog.filter((app) =>
+      [app.appName, app.label, app.description].some((value) =>
+        value.toLowerCase().includes(normalized)
+      )
+    );
+  }, [hotkeyCatalog, debouncedHotkeySearchQuery]);
+
+  const featuredHotkeyCatalog = useMemo(() => {
+    const featuredOrder = new Map(
+      CURATED_HOTKEY_APP_NAMES.map((appName, index) => [
+        appName.toLowerCase(),
+        index,
+      ])
+    );
+
+    return filteredHotkeyCatalog
+      .filter((app) => featuredOrder.has(app.appName.toLowerCase()))
+      .sort(
+        (left, right) =>
+          (featuredOrder.get(left.appName.toLowerCase()) ?? 999) -
+          (featuredOrder.get(right.appName.toLowerCase()) ?? 999)
+      )
+      .slice(0, HOTKEY_SLOT_COUNT);
+  }, [filteredHotkeyCatalog]);
+
+  const featuredHotkeyCatalogKeys = useMemo(
+    () =>
+      new Set(featuredHotkeyCatalog.map((app) => app.appName.toLowerCase())),
+    [featuredHotkeyCatalog]
+  );
+
+  const libraryHotkeyCatalog = useMemo(
+    () =>
+      filteredHotkeyCatalog.filter(
+        (app) => !featuredHotkeyCatalogKeys.has(app.appName.toLowerCase())
+      ),
+    [featuredHotkeyCatalogKeys, filteredHotkeyCatalog]
+  );
+
+  const hotkeyPickerRows = useMemo((): HotkeyPickerRow[] => {
+    const rows: HotkeyPickerRow[] = [];
+    if (featuredHotkeyCatalog.length > 0) {
+      rows.push({ kind: 'heading' });
+      featuredHotkeyCatalog.forEach((app) =>
+        rows.push({ kind: 'app', app, curated: true })
+      );
+    }
+    if (featuredHotkeyCatalog.length > 0 && libraryHotkeyCatalog.length > 0) {
+      rows.push({ kind: 'divider' });
+    }
+    libraryHotkeyCatalog.forEach((app) =>
+      rows.push({ kind: 'app', app, curated: false })
+    );
+    return rows;
+  }, [featuredHotkeyCatalog, libraryHotkeyCatalog]);
+
+  const isBayPickerOpen = openModulePickerDialog || openHotkeyPickerDialog;
+
+  const qortinoMood = useMemo(() => {
+    if (qortinoGratefulState) return 'grateful' as const;
+    if (isBayPickerOpen) return 'guide' as const;
+    if (isOnboardingVisible) return 'guide' as const;
+    if (isWorkspaceFreshlyUnlocked) return 'celebrate' as const;
+    if (workspaceState.mode === 'music' && workspaceState.musicPlaying) {
+      return 'music' as const;
+    }
+    if (workspaceState.mode === 'hotkeys') return 'hotkeys' as const;
+    return 'empty' as const;
+  }, [
+    qortinoGratefulState,
+    isOnboardingVisible,
+    isWorkspaceFreshlyUnlocked,
+    isBayPickerOpen,
+    workspaceState.mode,
+    workspaceState.musicPlaying,
+  ]);
+
+  const persistentOnboardingMessage = useMemo(() => {
+    if (!isOnboardingVisible) {
+      return null;
+    }
+
+    if (isQortsAcquiredAwaitingNext) {
+      return t(
+        'tutorial:home.onboarding_press_next_when_ready',
+        'Nice work. The hardest part is done. Press Next when you are ready.'
+      );
+    }
+
+    if (
+      currentStep.key === 'register_name' &&
+      hasPendingRegisterName &&
+      showRegisterNameDelayHint
+    ) {
+      return t(
+        'tutorial:home.register_name_pending_hint',
+        'Saving name on-chain. This can take a moment.'
+      );
+    }
+
+    if (currentStep.key === 'get_six_qorts') {
+      return t(
+        'tutorial:home.persistent_guide_get_qorts',
+        "Let's start with 6 QORT. Pick any option above."
+      );
+    }
+
+    if (currentStep.key === 'register_name') {
+      return t(
+        'tutorial:home.persistent_guide_register_name',
+        'Next, register your name.'
+      );
+    }
+
+    return t(
+      'tutorial:home.persistent_guide_load_avatar',
+      'Finally, add your avatar.'
+    );
+  }, [
+    currentStep.key,
+    hasPendingRegisterName,
+    isOnboardingVisible,
+    isQortsAcquiredAwaitingNext,
+    showRegisterNameDelayHint,
+    t,
+  ]);
+  const qortinoDisplayedMessage = truncateQortinoBubbleMessage(
+    qortinoGratefulState?.message?.trim() ||
+      postOnboardingMessage?.trim() ||
+      onboardingTransitionMessage?.trim() ||
+      persistentOnboardingMessage?.trim() ||
+      ephemeralReaction?.trim() ||
+      null
+  );
+  /*
+    if (isOnboardingVisible) {
+      if (currentStep.key === 'get_six_qorts') {
+        return 'We start with 6 QORT. Pick any route above and I’ll queue the next step.';
+      }
+      if (currentStep.key === 'register_name') {
+        return 'Name next. That unlocks your identity across the hub.';
+      }
+      return 'One last move. Give your profile a face and this bay becomes yours.';
+    }
+
+    if (isWorkspaceFreshlyUnlocked) {
+      return 'This bay is unlocked now. Choose the first module and I will start living around it.';
+    }
+
+    if (workspaceState.mode === 'hotkeys') {
+      return 'Quick routes armed. Tap a tile and I’ll keep pace.';
+    }
+
+    if (workspaceState.mode === 'music') {
+      if (workspaceState.musicPlaying) {
+        return `${activeTrack.title} is setting the tone. I’ll keep the bay calm while it plays.`;
+      }
+      return 'Drop into music mode when you want a little company.';
+    }
+
+    return 'The bay is free now. Add a widget or a hotkey deck and I’ll build around it.';
+  }, [
+    activeTrack.title,
+    currentStep.key,
+    ephemeralReaction,
+    isOnboardingVisible,
+    isWorkspaceFreshlyUnlocked,
+    isBayPickerOpen,
+    workspaceState.mode,
+    workspaceState.musicPlaying,
+  ]);
+  */
+
+  const firstEmptyHotkeySlot = useMemo(
+    () => workspaceState.hotkeys.findIndex((slot) => slot == null),
+    [workspaceState.hotkeys]
+  );
+  const qortinoIsTalking = Boolean(qortinoDisplayedMessage);
+  const qortinoBodyStageScale = Math.max(1, qortinoLookDebug.bodyScale);
+  const qortinoBodyStageWidthScale = Math.max(
+    1,
+    qortinoLookDebug.bodyScale * qortinoLookDebug.bodyWidthScale
+  );
+  const qortinoAntennaStageBump = Math.max(
+    0,
+    (qortinoLookDebug.antennaScale * qortinoLookDebug.antennaLength - 1) * 22
+  );
+  const qortinoMascotStageWidth = Math.round(
+    QORTINO_MASCOT_SIZE * qortinoBodyStageWidthScale +
+      QORTINO_MASCOT_STAGE_PADDING_X
+  );
+  const qortinoMascotStageHeight = Math.round(
+    QORTINO_MASCOT_SIZE * qortinoBodyStageScale +
+      QORTINO_MASCOT_STAGE_PADDING_Y +
+      qortinoAntennaStageBump
+  );
+  const handleCycleTrack = useCallback(
+    (direction: 'next' | 'previous') => {
+      if (playbackQueue.length === 0) {
+        return;
+      }
+
+      const activeIndex = playbackQueue.findIndex(
+        (track) => track.id === workspaceState.selectedTrackId
+      );
+      const currentIndex = activeIndex >= 0 ? activeIndex : 0;
+      const nextIndex =
+        direction === 'next'
+          ? (currentIndex + 1) % playbackQueue.length
+          : (currentIndex - 1 + playbackQueue.length) % playbackQueue.length;
+      const nextTrack = playbackQueue[nextIndex];
+
+      if (!nextTrack) {
+        return;
+      }
+
+      setMusicStreamError(null);
+      setSelectedTrackSnapshot(nextTrack);
+      applyWorkspaceState((current) => ({
+        ...current,
+        mode: 'music',
+        musicPlaying: true,
+        selectedTrackId: nextTrack.id,
+      }));
+      pushReaction({ kind: 'track_rotation', title: nextTrack.title });
+    },
+    [
+      applyWorkspaceState,
+      playbackQueue,
+      pushReaction,
+      workspaceState.selectedTrackId,
+    ]
+  );
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) {
+      return undefined;
+    }
+
+    const handleLoadedMetadata = () => {
+      if (
+        !activeTrack.id ||
+        !Number.isFinite(audio.duration) ||
+        audio.duration <= 0
+      ) {
+        return;
+      }
+
+      setMusicStreamError(null);
+
+      setMusicTrackDurations((current) => {
+        if (current[activeTrack.id] === audio.duration) {
+          return current;
+        }
+
+        return {
+          ...current,
+          [activeTrack.id]: audio.duration,
+        };
+      });
+    };
+
+    const handleEnded = () => {
+      if (workspaceState.repeatMode === 'one') {
+        audio.currentTime = 0;
+        void audio.play().catch((error) => {
+          console.error('Failed to replay EarBump track', error);
+          applyWorkspaceState((current) => ({
+            ...current,
+            musicPlaying: false,
+          }));
+        });
+        return;
+      }
+
+      handleCycleTrack('next');
+    };
+
+    const handleCanPlay = () => {
+      setMusicStreamError(null);
+    };
+
+    const handleError = () => {
+      console.error('Failed to stream EarBump audio track', activeTrack);
+      setMusicStreamError(
+        qw('music_playback_stalled', 'Playback stalled. Press play to retry.')
+      );
+      audio.pause();
+      audio.removeAttribute('src');
+      audio.load();
+      applyWorkspaceState((current) => ({
+        ...current,
+        musicPlaying: false,
+      }));
+    };
+
+    const handleStalled = () => {
+      if (!activeTrack.id || workspaceState.mode !== 'music') {
+        return;
+      }
+
+      setMusicStreamError(
+        qw('music_stream_stalled', 'Track stalled. Rebuilding the stream...')
+      );
+      void downloadResource({
+        identifier: activeTrack.id,
+        name: activeTrack.name,
+        service: EARBUMP_AUDIO_SERVICE,
+      });
+    };
+
+    audio.addEventListener('loadedmetadata', handleLoadedMetadata);
+    audio.addEventListener('canplay', handleCanPlay);
+    audio.addEventListener('ended', handleEnded);
+    audio.addEventListener('error', handleError);
+    audio.addEventListener('stalled', handleStalled);
+    handleLoadedMetadata();
+
+    return () => {
+      audio.removeEventListener('loadedmetadata', handleLoadedMetadata);
+      audio.removeEventListener('canplay', handleCanPlay);
+      audio.removeEventListener('ended', handleEnded);
+      audio.removeEventListener('error', handleError);
+      audio.removeEventListener('stalled', handleStalled);
+    };
+  }, [
+    activeTrack,
+    activeTrack.id,
+    activeTrack.name,
+    applyWorkspaceState,
+    downloadResource,
+    handleCycleTrack,
+    qw,
+    workspaceState.mode,
+    workspaceState.repeatMode,
+  ]);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) {
+      return;
+    }
+
+    if (!workspaceHydrated || isResolvingSelectedTrack) {
+      return;
+    }
+
+    if (!activeTrack.id || !activeTrackPlaybackUrl) {
+      audio.pause();
+      audio.removeAttribute('src');
+      audio.load();
+      return;
+    }
+
+    if (audio.src !== activeTrackPlaybackUrl) {
+      audio.pause();
+      audio.src = activeTrackPlaybackUrl;
+      audio.load();
+    }
+
+    if (workspaceState.mode !== 'music' || !workspaceState.musicPlaying) {
+      audio.pause();
+      return;
+    }
+
+    void audio.play().catch((error) => {
+      console.error('Failed to play EarBump stream', error);
+      applyWorkspaceState((current) => ({
+        ...current,
+        musicPlaying: false,
+      }));
+    });
+  }, [
+    activeTrack.id,
+    activeTrackPlaybackUrl,
+    applyWorkspaceState,
+    isResolvingSelectedTrack,
+    workspaceHydrated,
+    workspaceState.mode,
+    workspaceState.musicPlaying,
+  ]);
+
+  const handleSelectWorkspaceMode = useCallback(
+    (mode: WorkspaceMode) => {
+      applyWorkspaceState((current) => ({
+        ...current,
+        mode,
+        musicPlaying: mode === 'music' ? current.musicPlaying : false,
+        onboardingCelebrationSeen:
+          current.onboardingCelebrationSeen || dismissed === true,
+      }));
+
+      if (mode === 'hotkeys') {
+        setOpenModulePickerDialog(false);
+        setOpenHotkeyPickerDialog(true);
+        pushReaction(qw('reaction_hotkeys_ready', 'Hotkeys panel ready.'));
+      } else if (mode === 'music') {
+        setOpenModulePickerDialog(false);
+        setOpenHotkeyPickerDialog(false);
+        pushReaction(qw('reaction_music_panel_ready', 'Music panel ready.'));
+      } else {
+        setOpenModulePickerDialog(false);
+        setOpenHotkeyPickerDialog(false);
+        pushReaction(qw('reaction_panel_cleared', 'Panel cleared.'));
+      }
+    },
+    [applyWorkspaceState, dismissed, pushReaction, qw]
+  );
+
+  const handleSetHotkey = useCallback(
+    (appName: string) => {
+      const parsedSlot = parseHotkeySlotValue(appName);
+      const knownApp =
+        hotkeyAppsByName.get(
+          `${parsedSlot.service.toLowerCase()}${HOTKEY_SLOT_VALUE_SEPARATOR}${parsedSlot.appName.toLowerCase()}`
+        ) ?? hotkeyAppsByName.get(parsedSlot.appName.toLowerCase());
+      const nextSlotValue = encodeHotkeySlotValue(
+        knownApp?.service ?? parsedSlot.service,
+        knownApp?.appName ?? parsedSlot.appName
+      );
+      applyWorkspaceState((current) => {
+        const nextHotkeys = [...current.hotkeys];
+        nextHotkeys[selectedHotkeySlot] = nextSlotValue;
+        return {
+          ...current,
+          hotkeys: nextHotkeys,
+          mode: 'hotkeys',
+          onboardingCelebrationSeen:
+            current.onboardingCelebrationSeen || dismissed === true,
+        };
+      });
+      setOpenModulePickerDialog(false);
+      setOpenHotkeyPickerDialog(true);
+      setSelectedHotkeySlot((current) =>
+        Math.min(current + 1, HOTKEY_SLOT_COUNT - 1)
+      );
+    },
+    [applyWorkspaceState, dismissed, hotkeyAppsByName, selectedHotkeySlot]
+  );
+
+  const handleClearHotkey = useCallback(
+    (slotIndex: number) => {
+      applyWorkspaceState((current) => {
+        const nextHotkeys = [...current.hotkeys];
+        nextHotkeys[slotIndex] = null;
+
+        return {
+          ...current,
+          hotkeys: nextHotkeys,
+          mode: 'hotkeys',
+          onboardingCelebrationSeen:
+            current.onboardingCelebrationSeen || dismissed === true,
+        };
+      });
+      setSelectedHotkeySlot(slotIndex);
+      setOpenModulePickerDialog(false);
+      setOpenHotkeyPickerDialog(true);
+    },
+    [applyWorkspaceState, dismissed]
+  );
+
+  const handleRunHotkey = useCallback(
+    (slotValue: string) => {
+      if (!slotValue) {
+        return;
+      }
+
+      const parsedSlot = parseHotkeySlotValue(slotValue);
+      const knownApp =
+        hotkeyAppsByName.get(
+          `${parsedSlot.service.toLowerCase()}${HOTKEY_SLOT_VALUE_SEPARATOR}${parsedSlot.appName.toLowerCase()}`
+        ) ?? hotkeyAppsByName.get(parsedSlot.appName.toLowerCase());
+
+      executeEvent('addTab', {
+        data: {
+          name: knownApp?.appName ?? parsedSlot.appName,
+          path: '',
+          service: knownApp?.service ?? parsedSlot.service,
+        },
+      });
+      executeEvent('open-apps-mode', {});
+    },
+    [hotkeyAppsByName]
+  );
+
+  const handleToggleTrack = useCallback(
+    (trackId: string) => {
+      if (!trackId) {
+        return;
+      }
+
+      const audio = audioRef.current;
+      const isSameTrack = workspaceState.selectedTrackId === trackId;
+      const wasPlaying = workspaceState.musicPlaying;
+      const track = knownMusicTracksById.get(trackId) ?? null;
+      const hadPlaybackFailure =
+        isTrackLoadError || musicStreamError != null || audio?.error != null;
+
+      if (isSameTrack && !wasPlaying && hadPlaybackFailure) {
+        if (audio) {
+          audio.pause();
+          audio.removeAttribute('src');
+          audio.load();
+        }
+        setMusicStreamError(null);
+        if (track) {
+          void downloadResource({
+            identifier: track.id,
+            name: track.name,
+            service: EARBUMP_AUDIO_SERVICE,
+          });
+        }
+      }
+
+      applyWorkspaceState((current) => {
+        return {
+          ...current,
+          mode: 'music',
+          musicPlaying: isSameTrack ? !current.musicPlaying : true,
+          onboardingCelebrationSeen:
+            current.onboardingCelebrationSeen || dismissed === true,
+          selectedTrackId: trackId,
+        };
+      });
+      if (track) {
+        setSelectedTrackSnapshot(track);
+      }
+
+      if (!isSameTrack) {
+        setMusicStreamError(null);
+      }
+
+      if (track && !isSameTrack) {
+        pushReaction({ kind: 'locked_track', title: track.title });
+        return;
+      }
+      if (!wasPlaying && isTrackPlayable) {
+        pushReaction(qw('reaction_music_player_ready', 'Music player ready.'));
+        return;
+      }
+      return;
+    },
+    [
+      applyWorkspaceState,
+      dismissed,
+      downloadResource,
+      isTrackLoadError,
+      isTrackPlayable,
+      knownMusicTracksById,
+      musicStreamError,
+      pushReaction,
+      qw,
+      workspaceState.musicPlaying,
+      workspaceState.selectedTrackId,
+    ]
+  );
+
+  const handleToggleRepeatMode = useCallback(() => {
+    applyWorkspaceState((current) => ({
+      ...current,
+      repeatMode: current.repeatMode === 'all' ? 'one' : 'all',
+    }));
+  }, [applyWorkspaceState]);
+
+  const handleSelectTrackFromBrowser = useCallback(
+    (trackId: string) => {
+      setOpenMusicSearchDialog(false);
+      handleToggleTrack(trackId);
+    },
+    [handleToggleTrack]
+  );
+
+  const handleOpenModulePicker = useCallback(() => {
+    applyWorkspaceState((current) => ({
+      ...current,
+      onboardingCelebrationSeen: true,
+    }));
+    setOpenHotkeyPickerDialog(false);
+    setOpenModulePickerDialog(true);
+  }, [applyWorkspaceState]);
+
+  const handleOpenHotkeyPicker = useCallback(
+    (slotIndex = 0) => {
+      applyWorkspaceState((current) => ({
+        ...current,
+        mode: 'hotkeys',
+        onboardingCelebrationSeen:
+          current.onboardingCelebrationSeen || dismissed === true,
+      }));
+      setSelectedHotkeySlot(slotIndex);
+      setHotkeySearchQuery('');
+      setDebouncedHotkeySearchQuery('');
+      setOpenModulePickerDialog(false);
+      setOpenHotkeyPickerDialog(true);
+    },
+    [applyWorkspaceState, dismissed]
+  );
+
+  const workspaceLabelColor = alpha(theme.palette.text.secondary, 0.78);
+  const subtleLine = getBlueAmbientLineBackground(theme, 'soft');
+  const curatedAccentBlue = isDarkMode
+    ? alpha(GROUP_ACTIVITY_BLUE.gradientTop, 0.96)
+    : alpha(GROUP_ACTIVITY_BLUE.gradientBottom, 0.92);
+
+  const renderHotkeyPickerRow = useCallback(
+    (row: HotkeyPickerRow): ReactNode => {
+      if (row.kind === 'heading') {
+        return (
+          <Typography
+            sx={{
+              color: alpha(theme.palette.text.secondary, 0.74),
+              display: 'block',
+              fontSize: '0.64rem',
+              fontWeight: 700,
+              letterSpacing: '0.08em',
+              textTransform: 'uppercase',
+              width: '100%',
+            }}
+          >
+            {t('core:qortino_workspace.section_recommended', 'Recommended')}
+          </Typography>
+        );
+      }
+      if (row.kind === 'divider') {
+        return (
+          <Box
+            sx={{
+              background: alpha(
+                theme.palette.common.white,
+                isDarkMode ? 0.06 : 0.12
+              ),
+              height: '1px',
+              my: 0.1,
+              width: '100%',
+            }}
+          />
+        );
+      }
+      const app = row.app;
+      const curated = row.curated;
+      return (
+        <ButtonBase
+          onClick={() =>
+            handleSetHotkey(encodeHotkeySlotValue(app.service, app.appName))
+          }
+          sx={{
+            alignItems: 'center',
+            background: curated
+              ? `linear-gradient(180deg, ${alpha('#8DB8FF', 0.18)} 0%, ${alpha(
+                  '#6EA7FF',
+                  0.08
+                )} 100%)`
+              : theme.palette.mode === 'dark'
+                ? 'rgba(255,255,255,0.03)'
+                : 'rgba(20,24,32,0.03)',
+            border: curated
+              ? `1px solid ${alpha('#8DB8FF', 0.16)}`
+              : `1px solid ${alpha(theme.palette.common.white, isDarkMode ? 0.06 : 0.12)}`,
+            borderRadius: '14px',
+            boxSizing: 'border-box',
+            display: 'grid',
+            gap: '12px',
+            gridTemplateColumns: '40px minmax(0, 1fr) auto',
+            justifyItems: 'stretch',
+            px: 0.95,
+            py: 0.82,
+            position: 'relative',
+            textAlign: 'left',
+            width: '100%',
+            ...(curated
+              ? {
+                  '&:hover': {
+                    background: `linear-gradient(180deg, ${alpha('#8DB8FF', 0.26)} 0%, ${alpha(
+                      '#6EA7FF',
+                      0.12
+                    )} 100%)`,
+                  },
+                }
+              : {}),
+          }}
+        >
+          {curated ? (
+            <Typography
+              sx={{
+                color: curatedAccentBlue,
+                fontSize: '0.44rem',
+                fontWeight: 700,
+                letterSpacing: '0.035em',
+                lineHeight: 1,
+                position: 'absolute',
+                right: '10px',
+                textTransform: 'uppercase',
+                top: '9px',
+              }}
+            >
+              {qw('curated_badge', '[ CURATED ]')}
+            </Typography>
+          ) : null}
+          <Box
+            sx={{
+              alignItems: 'center',
+              background: alpha('#8DB8FF', 0.12),
+              borderRadius: '12px',
+              color: alpha('#A8CAFF', 0.96),
+              display: 'flex',
+              height: '40px',
+              justifyContent: 'center',
+              width: '40px',
+            }}
+          >
+            <HotkeyAppAvatar appName={app.appName} radius={12} size={40} />
+          </Box>
+          <Box sx={{ minWidth: 0, ...(curated ? { pr: 9 } : {}) }}>
+            <Typography
+              sx={{
+                fontSize: '0.78rem',
+                fontWeight: 700,
+              }}
+            >
+              {app.label}
+            </Typography>
+            <Typography
+              sx={{
+                color: alpha(theme.palette.text.secondary, 0.68),
+                fontSize: '0.64rem',
+                mt: 0.18,
+              }}
+            >
+              {app.description || app.appName}
+            </Typography>
+          </Box>
+          <ChevronRightRoundedIcon
+            sx={{
+              color: alpha('#8DB8FF', 0.84),
+              fontSize: '18px',
+            }}
+          />
+        </ButtonBase>
+      );
+    },
+    [curatedAccentBlue, handleSetHotkey, isDarkMode, qw, t, theme]
+  );
+  /*
+  useEffect(() => {
+    const handleAvatar = () => {
+      pushReaction('Avatar tools open. Let’s give this place a face.');
+    };
+
+    const handleRegisterName = () => {
+      pushReaction('Name flow open. This is where the hub starts recognizing you.');
+    };
+
+    const handleReceive = () => {
+      pushReaction('Receive panel open. Hold steady and let the address do the work.');
+    };
+
+    const handleSend = () => {
+      pushReaction('Send panel open. We can move carefully from here.');
+    };
+
+    const handleAppsLibrarySearch = (
+      event: Event
+    ) => {
+      const query =
+        (
+          event as CustomEvent<{
+            data?: {
+              query?: string;
+            };
+          }>
+        )?.detail?.data?.query ?? '';
+
+      if (typeof query === 'string' && query.trim().length > 0) {
+        pushReaction(`App search is tuned to ${query.trim()}.`);
+        return;
+      }
+
+      pushReaction('App library open. We can wire the next lane from here.');
+    };
+
+    const handleContextHint = (event: Event) => {
+      const message =
+        (
+          event as CustomEvent<{
+            data?: { message?: string };
+          }>
+        )?.detail?.data?.message ?? '';
+
+      if (typeof message === 'string' && message.trim().length > 0) {
+        pushReaction(message.trim());
+      }
+    };
+
+    const handleAddTab = (event: Event) => {
+      const data =
+        (
+          event as CustomEvent<{
+            data?: {
+              identifier?: string;
+              name?: string;
+              path?: string;
+              service?: string;
+            };
+          }>
+        )?.detail?.data ?? {};
+      const rawName = data.name?.toLowerCase?.() ?? '';
+
+      if (rawName === 'q-tube') {
+        pushReaction('Q-Tube launched. Feed the signal.');
+        return;
+      }
+
+      if (rawName === 'quitter') {
+        pushReaction('Quitter is live. Let’s read the pulse.');
+        return;
+      }
+
+      if (rawName === 'q-mail') {
+        pushReaction('Q-Mail opened. Quiet channel, clear signal.');
+        return;
+      }
+
+      if (rawName === 'q-blog') {
+        pushReaction('Q-Blog is up. This lane is for making a mark.');
+        return;
+      }
+
+      if (rawName === 'q-trade') {
+        pushReaction('Q-Trade is open. I’ll keep the board steady.');
+        return;
+      }
+
+      if (rawName === 'q-mintership') {
+        pushReaction('Q-Mintership opened. This is the path toward joining the minters.');
+        return;
+      }
+
+      if (rawName === 'earbump') {
+        pushReaction('Earbump tab open. If you play something, I’ll vibe with you.');
+      }
+    };
+
+    subscribeToEvent('openAvatarUpload', handleAvatar);
+    subscribeToEvent('openRegisterName', handleRegisterName);
+    subscribeToEvent('openSendQortInternal', handleSend);
+    subscribeToEvent('openReceiveQortInternal', handleReceive);
+    subscribeToEvent('openAppsLibrarySearch', handleAppsLibrarySearch);
+    subscribeToEvent('qortinoContextHint', handleContextHint);
+    subscribeToEvent('addTab', handleAddTab);
+
+    return () => {
+      unsubscribeFromEvent('openAvatarUpload', handleAvatar);
+      unsubscribeFromEvent('openRegisterName', handleRegisterName);
+      unsubscribeFromEvent('openSendQortInternal', handleSend);
+      unsubscribeFromEvent('openReceiveQortInternal', handleReceive);
+      unsubscribeFromEvent('openAppsLibrarySearch', handleAppsLibrarySearch);
+      unsubscribeFromEvent('qortinoContextHint', handleContextHint);
+      unsubscribeFromEvent('addTab', handleAddTab);
+    };
+  }, [pushReaction]);
+  */
+
+  useEffect(() => {
+    const handleContextHint = (event: Event) => {
+      const message =
+        (
+          event as CustomEvent<{
+            data?: { message?: string };
+          }>
+        )?.detail?.data?.message ?? '';
+
+      if (typeof message === 'string' && message.trim().length > 0) {
+        pushReaction(message.trim());
+      }
+    };
+
+    subscribeToEvent('qortinoContextHint', handleContextHint);
+
+    return () => {
+      unsubscribeFromEvent('qortinoContextHint', handleContextHint);
+    };
+  }, [pushReaction]);
+
+  /*
+  useEffect(() => {
+    if (dismissed !== true) return;
+
+    const interval = window.setInterval(() => {
+      const recentlySpoke = Date.now() - lastReactionAtRef.current < 240000;
+      if (
+        recentlySpoke ||
+        openModulePickerDialog ||
+        openHotkeyPickerDialog ||
+        openMusicSearchDialog ||
+        workspaceState.musicPlaying
+      ) {
+        return;
+      }
+
+      const nextFact = QORTINO_IDLE_FACTS[idleFactIndexRef.current];
+      idleFactIndexRef.current =
+        (idleFactIndexRef.current + 1) % QORTINO_IDLE_FACTS.length;
+      pushReaction(nextFact);
+    }, 300000);
+
+    return () => {
+      window.clearInterval(interval);
+    };
+  }, [
+    dismissed,
+    openHotkeyPickerDialog,
+    openModulePickerDialog,
+    openMusicSearchDialog,
+    pushReaction,
+    workspaceState.musicPlaying,
+  ]);
+  */
+
+  const handleRunCurrentStepAction = useCallback(() => {
+    if (currentStep.key === 'register_name') {
+      pushReaction(
+        qw(
+          'reaction_name_flow',
+          'Name flow open. This is where the hub starts recognizing you.'
+        )
+      );
+    } else if (currentStep.key === 'load_avatar') {
+      pushReaction(
+        qw(
+          'reaction_avatar_flow',
+          "Avatar flow ready. Let's give this place a face."
+        )
+      );
+    }
+
+    currentStep.onAction();
+  }, [currentStep, pushReaction, qw]);
+
+  const currentStepPrimaryAction = useMemo(() => {
+    if (isQortsAcquiredAwaitingNext) {
+      return {
+        label: t('tutorial:home.next', 'Next'),
+        onClick: () => {
+          setQortsAcquiredAcknowledged(true);
+          if (onboardingMessageTimeoutRef.current) {
+            window.clearTimeout(onboardingMessageTimeoutRef.current);
+          }
+          setOnboardingTransitionMessage(
+            t(
+              'tutorial:home.onboarding_transition_hard_part_done',
+              'Nice work. The hardest part is done.'
+            )
+          );
+          onboardingMessageTimeoutRef.current = window.setTimeout(() => {
+            onboardingMessageTimeoutRef.current = null;
+            setOnboardingTransitionMessage(null);
+          }, ONBOARDING_RECOGNITION_DURATION_MS);
+        },
+      };
+    }
+
+    if (currentStep.key === 'get_six_qorts') {
+      return {
+        label: t('tutorial:home.get_six_qorts_way1_action', 'Go to onboarding'),
+        onClick: () => {
+          pushReaction(
+            qw(
+              'reaction_onboarding_route',
+              "Onboarding route open. I'll keep the next step warm."
+            )
+          );
+          openExternalUrl(ONBOARDING_URL);
+        },
+      };
+    }
+
+    return {
+      label: currentStep.ctaLabel,
+      loading: currentStep.loading === true,
+      onClick: handleRunCurrentStepAction,
+    };
+  }, [
+    currentStep.ctaLabel,
+    currentStep.key,
+    currentStep.loading,
+    handleRunCurrentStepAction,
+    isQortsAcquiredAwaitingNext,
+    pushReaction,
+    qw,
+    t,
+  ]);
+
+  const currentStepSecondaryActions = useMemo(() => {
+    if (currentStep.key !== 'get_six_qorts' || isQortsAcquiredAwaitingNext) {
+      return [];
+    }
+
+    return [
+      {
+        label: t(
+          'tutorial:home.get_six_qorts_way2_action',
+          'Open support chat'
+        ),
+        onClick: () => {
+          pushReaction(
+            qw(
+              'reaction_support_chat',
+              "Support chat is open. Ask for the 6 QORT and I'll queue step two."
+            )
+          );
+          openExternalUrl(SUPPORT_CHAT_URL);
+        },
+      },
+      {
+        label: t('tutorial:home.get_six_qorts_way3_action', 'Open Q-Trade'),
+        onClick: () => {
+          pushReaction(
+            qw(
+              'reaction_q_trade_open',
+              "Q-Trade is up. If you grab QORT there, I'll take you forward."
+            )
+          );
+          openApp('Q-Trade');
+        },
+      },
+    ];
+  }, [
+    currentStep.key,
+    isQortsAcquiredAwaitingNext,
+    openApp,
+    pushReaction,
+    qw,
+    t,
+  ]);
+
+  const currentStepGetQortMethods = useMemo(() => {
+    if (currentStep.key !== 'get_six_qorts' || isQortsAcquiredAwaitingNext) {
+      return [];
+    }
+
+    return [
+      {
+        description: t(
+          'tutorial:home.get_six_qorts_way1',
+          'Finish the onboarding instruction on qortal.dev'
+        ),
+        icon: SchoolRoundedIcon,
+        key: 'onboarding',
+        label: currentStepPrimaryAction.label,
+        onClick: currentStepPrimaryAction.onClick,
+        recommended: true,
+      },
+      {
+        description: t(
+          'tutorial:home.get_six_qorts_way2',
+          'Ask in the Nextcloud support chat for 6 QORT.'
+        ),
+        icon: SupportAgentRoundedIcon,
+        key: 'support',
+        label: t(
+          'tutorial:home.get_six_qorts_way2_action',
+          'Open support chat'
+        ),
+        onClick: () => {
+          pushReaction(
+            qw(
+              'reaction_support_chat',
+              "Support chat is open. Ask for the 6 QORT and I'll queue step two."
+            )
+          );
+          openExternalUrl(SUPPORT_CHAT_URL);
+        },
+        recommended: false,
+      },
+      {
+        description: t(
+          'tutorial:home.get_six_qorts_way3',
+          'Buy QORT using Q-Trade'
+        ),
+        icon: ShoppingBagRoundedIcon,
+        key: 'q-trade',
+        label: t('tutorial:home.get_six_qorts_way3_action', 'Open Q-Trade'),
+        onClick: () => {
+          pushReaction(
+            qw(
+              'reaction_q_trade_open',
+              "Q-Trade is up. If you grab QORT there, I'll take you forward."
+            )
+          );
+          openApp('Q-Trade');
+        },
+        recommended: false,
+      },
+    ];
+  }, [
+    currentStep.key,
+    currentStepPrimaryAction.label,
+    currentStepPrimaryAction.onClick,
+    isQortsAcquiredAwaitingNext,
+    openApp,
+    pushReaction,
+    qw,
+    t,
+  ]);
+
+  const workspaceBayBackground =
+    theme.palette.mode === 'dark'
+      ? `linear-gradient(180deg, ${alpha('#20242D', 0.9)} 0%, ${alpha(
+          '#171B23',
+          0.96
+        )} 100%)`
+      : `linear-gradient(180deg, ${alpha('#FFFFFF', 0.72)} 0%, ${alpha(
+          '#F3F6FB',
+          0.9
+        )} 100%)`;
+  const workspaceBaySeparatorExtension = Math.max(
+    qortinoLayoutDebug.separatorOffsetY,
+    0
+  );
+  const workspaceBayHeightPx =
+    QORTINO_WORKSPACE_BAY_HEIGHT_PX + workspaceBaySeparatorExtension;
+  const onboardingCompanionLift = 8;
+
+  const workspaceBaySection = (
+    <Box
+      sx={{
+        background: workspaceBayBackground,
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        minHeight: 0,
+        px: isOnboardingVisible ? 2.15 : 2,
+        py: isOnboardingVisible ? 1.72 : 1.25,
+        position: 'relative',
+        zIndex: 1,
+        '&::after': {
+          background: alpha(theme.palette.common.white, 0.05),
+          content: '""',
+          height: '1px',
+          left: '18px',
+          position: 'absolute',
+          right: '18px',
+          bottom: 0,
+        },
+      }}
+    >
+      {isOnboardingVisible ? (
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1.02,
+            height: '100%',
+            '@container qortino-card (max-width: 390px)': {
+              gap: 0.9,
+            },
+          }}
+        >
+          <Box
+            sx={{
+              alignItems: 'baseline',
+              display: 'flex',
+              justifyContent: 'space-between',
+              '@container qortino-card (max-width: 390px)': {
+                gap: 0.8,
+              },
+            }}
+          >
+            <Typography
+              sx={{
+                color: workspaceLabelColor,
+                fontSize: '0.66rem',
+                fontWeight: 700,
+                letterSpacing: '0.16em',
+                textTransform: 'uppercase',
+              }}
+            >
+              {t('tutorial:home.getting_started', 'Getting started')}
+            </Typography>
+            <Typography
+              sx={{
+                color: alpha(theme.palette.text.secondary, 0.52),
+                fontSize: '0.64rem',
+                fontWeight: 600,
+                letterSpacing: '0.04em',
+              }}
+            >
+              {qw('onboarding_step_progress', 'Step {{current}} / {{total}}', {
+                current: currentProgressStepDisplay,
+                total: steps.length,
+              })}
+            </Typography>
+          </Box>
+          {currentStep.key === 'get_six_qorts' &&
+          !isQortsAcquiredAwaitingNext ? (
+            <Box
+              sx={{
+                display: 'flex',
+                flex: 1,
+                flexDirection: 'column',
+                gap: 1,
+                minHeight: 0,
+                transform: 'translateY(10px)',
+              }}
+            >
+              <Box
+                sx={{
+                  alignItems: 'flex-start',
+                  display: 'grid',
+                  gap: '12px',
+                  gridTemplateColumns: '40px minmax(0, 1fr)',
+                  minWidth: 0,
+                  pb: 1.22,
+                  pt: 0.2,
+                  position: 'relative',
+                  '@container qortino-card (max-width: 390px)': {
+                    gap: '10px',
+                    gridTemplateColumns: '34px minmax(0, 1fr)',
+                  },
+                  '&::after': {
+                    background: alpha(
+                      theme.palette.common.white,
+                      isDarkMode ? 0.06 : 0.12
+                    ),
+                    bottom: 0,
+                    content: '""',
+                    height: '1px',
+                    left: 0,
+                    position: 'absolute',
+                    right: 0,
+                  },
+                }}
+              >
+                <CurrentStepIcon
+                  sx={{
+                    color: alpha(currentStep.accent, 0.92),
+                    fontSize: '32px',
+                    mt: '2px',
+                    '@container qortino-card (max-width: 390px)': {
+                      fontSize: '28px',
+                    },
+                  }}
+                />
+                <Box
+                  sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 0.48,
+                    minWidth: 0,
+                  }}
+                >
+                  <Typography
+                    sx={{
+                      color: alpha(theme.palette.text.primary, 0.96),
+                      fontSize: '0.98rem',
+                      fontWeight: 700,
+                      letterSpacing: '-0.02em',
+                      lineHeight: 1.08,
+                      '@container qortino-card (max-width: 390px)': {
+                        fontSize: '0.9rem',
+                      },
+                    }}
+                  >
+                    {currentStep.label}
+                  </Typography>
+                  <Typography
+                    sx={{
+                      color: alpha(theme.palette.text.secondary, 0.76),
+                      fontSize: '0.71rem',
+                      letterSpacing: '-0.01em',
+                      lineHeight: 1.3,
+                      maxWidth: '30ch',
+                      '@container qortino-card (max-width: 390px)': {
+                        fontSize: '0.67rem',
+                        lineHeight: 1.24,
+                      },
+                    }}
+                  >
+                    {t(
+                      'tutorial:home.get_qorts_workspace_hint',
+                      'Unlock your first 6 QORT to activate the rest of the setup.'
+                    )}
+                  </Typography>
+                </Box>
+              </Box>
+
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  minHeight: 0,
+                  mt: 0.42,
+                }}
+              >
+                {currentStepGetQortMethods.map((method, index) => (
+                  <GettingStartedMethodRow
+                    accent={currentStep.accent}
+                    description={method.description}
+                    emphasized={method.recommended}
+                    icon={method.icon}
+                    key={method.key}
+                    label={method.label}
+                    onClick={method.onClick}
+                    showChevron={method.recommended}
+                    showDivider={index < currentStepGetQortMethods.length - 1}
+                  />
+                ))}
+              </Box>
+            </Box>
+          ) : (
+            <Box
+              sx={{
+                display: 'flex',
+                flex: 1,
+                flexDirection: 'column',
+                gap: 1,
+                minHeight: 0,
+                transform: 'translateY(10px)',
+              }}
+            >
+              <Box
+                sx={{
+                  alignItems: 'flex-start',
+                  display: 'grid',
+                  gap: '12px',
+                  gridTemplateColumns: '40px minmax(0, 1fr)',
+                  minWidth: 0,
+                  pb: 1.16,
+                  pt: 0.2,
+                  position: 'relative',
+                  '@container qortino-card (max-width: 390px)': {
+                    gap: '10px',
+                    gridTemplateColumns: '34px minmax(0, 1fr)',
+                  },
+                  '&::after': {
+                    background: alpha(
+                      theme.palette.common.white,
+                      isDarkMode ? 0.06 : 0.12
+                    ),
+                    bottom: 0,
+                    content: '""',
+                    height: '1px',
+                    left: 0,
+                    position: 'absolute',
+                    right: 0,
+                  },
+                }}
+              >
+                <CurrentStepIcon
+                  sx={{
+                    color: alpha(currentStep.accent, 0.92),
+                    fontSize: '32px',
+                    mt: '2px',
+                    '@container qortino-card (max-width: 390px)': {
+                      fontSize: '28px',
+                    },
+                  }}
+                />
+                <Box
+                  sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 0.48,
+                    minWidth: 0,
+                  }}
+                >
+                  <Typography
+                    sx={{
+                      color: alpha(theme.palette.text.primary, 0.96),
+                      fontSize: '0.98rem',
+                      fontWeight: 700,
+                      letterSpacing: '-0.008em',
+                      lineHeight: 1.08,
+                      maxWidth: '19ch',
+                      '@container qortino-card (max-width: 390px)': {
+                        fontSize: '0.92rem',
+                      },
+                    }}
+                  >
+                    {currentStep.label}
+                  </Typography>
+                  <Typography
+                    sx={{
+                      color: alpha(theme.palette.text.secondary, 0.76),
+                      fontSize: '0.71rem',
+                      letterSpacing: '0.01em',
+                      lineHeight: 1.3,
+                      maxWidth: '31ch',
+                      '@container qortino-card (max-width: 390px)': {
+                        fontSize: '0.67rem',
+                        lineHeight: 1.24,
+                      },
+                    }}
+                  >
+                    {currentStep.helper}
+                  </Typography>
+                </Box>
+              </Box>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 0.48,
+                  mt: 0.42,
+                }}
+              >
+                <GettingStartedPrimaryAction
+                  accent={currentStep.accent}
+                  label={currentStepPrimaryAction.label}
+                  loading={currentStepPrimaryAction.loading}
+                  onClick={currentStepPrimaryAction.onClick}
+                />
+                {currentStepSecondaryActions.length > 0 ? (
+                  <Box
+                    sx={{
+                      alignItems: 'flex-start',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: 0.08,
+                      ml: -0.1,
+                    }}
+                  >
+                    {currentStepSecondaryActions.map((action, index) => (
+                      <GettingStartedSecondaryAction
+                        accent={currentStep.accent}
+                        key={`${currentStep.key}-secondary-${index}`}
+                        label={action.label}
+                        onClick={action.onClick}
+                      />
+                    ))}
+                  </Box>
+                ) : null}
+              </Box>
+            </Box>
+          )}
+        </Box>
+      ) : workspaceState.mode === 'empty' ? (
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            gap: 1,
+            justifyContent: 'center',
+            textAlign: 'center',
+          }}
+        >
+          <ButtonBase
+            onClick={handleOpenModulePicker}
+            sx={{
+              alignItems: 'center',
+              background:
+                theme.palette.mode === 'dark'
+                  ? 'linear-gradient(180deg, rgba(140,184,255,0.9) 0%, rgba(109,166,255,0.88) 100%)'
+                  : 'linear-gradient(180deg, rgba(148,190,255,0.92) 0%, rgba(118,171,255,0.88) 100%)',
+              border: `1px solid ${alpha('#8DB8FF', 0.22)}`,
+              borderRadius: '14px',
+              boxShadow: `0 10px 24px ${alpha('#000', 0.18)}, 0 0 0 1px ${alpha(
+                '#fff',
+                0.05
+              )} inset, 0 0 18px ${alpha('#8DB8FF', 0.16)}`,
+              display: 'inline-flex',
+              height: '42px',
+              justifyContent: 'center',
+              transition:
+                'transform 120ms ease, box-shadow 140ms ease, filter 140ms ease',
+              width: '42px',
+              '&:hover': {
+                boxShadow: `0 12px 26px ${alpha('#000', 0.22)}, 0 0 0 1px ${alpha(
+                  '#fff',
+                  0.06
+                )} inset, 0 0 22px ${alpha('#8DB8FF', 0.2)}`,
+                filter: 'brightness(1.03)',
+                transform: 'translateY(-1px)',
+              },
+            }}
+          >
+            <AddRoundedIcon
+              sx={{ color: APP_BLUE_SURFACE_TEXT, fontSize: '21px' }}
+            />
+          </ButtonBase>
+          <Typography
+            sx={{
+              color: alpha(theme.palette.text.primary, 0.92),
+              fontSize: '0.78rem',
+              lineHeight: 1.45,
+              maxWidth: '24ch',
+            }}
+          >
+            {qw('workspace_empty_prompt', 'Choose what lives above QORTINO.')}
+          </Typography>
+        </Box>
+      ) : workspaceState.mode === 'hotkeys' ? (
+        <Box
+          sx={{
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column',
+            minHeight: 0,
+          }}
+        >
+          <Box
+            sx={{
+              alignItems: 'center',
+              display: 'flex',
+              justifyContent: 'space-between',
+              pb: '12px',
+              pl: '10px',
+              pr: '10px',
+              pt: '10px',
+              transform: `translateY(${qortinoLayoutDebug.musicHeaderOffsetY - 11}px)`,
+              '@container qortino-card (max-width: 390px)': {
+                pb: '10px',
+                pl: '8px',
+                pr: '8px',
+                pt: '8px',
+              },
+            }}
+          >
+            <Typography
+              sx={{
+                color: alpha(theme.palette.text.secondary, 0.82),
+                fontSize: '0.66rem',
+                fontWeight: 700,
+                letterSpacing: '0.11em',
+                textTransform: 'uppercase',
+              }}
+            >
+              {qw('workspace_header_hotkeys', 'Hotkeys')}
+            </Typography>
+            <Box sx={{ display: 'flex', gap: '6px' }}>
+              <IconButton
+                onClick={() =>
+                  handleOpenHotkeyPicker(
+                    firstEmptyHotkeySlot >= 0 ? firstEmptyHotkeySlot : 0
+                  )
+                }
+                size="small"
+                sx={{
+                  borderRadius: '9px',
+                  color: alpha('#9FC4FF', 0.92),
+                  height: '30px',
+                  width: '30px',
+                  '&:hover': {
+                    background: alpha('#8DB8FF', 0.1),
+                  },
+                }}
+              >
+                <TuneRoundedIcon sx={{ fontSize: '18px' }} />
+              </IconButton>
+              <IconButton
+                onClick={() => handleSelectWorkspaceMode('empty')}
+                size="small"
+                sx={{
+                  borderRadius: '9px',
+                  color: alpha(theme.palette.text.secondary, 0.84),
+                  height: '30px',
+                  width: '30px',
+                  '&:hover': {
+                    background: alpha(
+                      theme.palette.common.white,
+                      isDarkMode ? 0.05 : 0.08
+                    ),
+                  },
+                }}
+              >
+                <CloseRoundedIcon sx={{ fontSize: '18px' }} />
+              </IconButton>
+            </Box>
+          </Box>
+
+          <Box
+            sx={{
+              alignContent: 'start',
+              display: 'grid',
+              flex: 1,
+              gap: '10px',
+              gridAutoRows: 'minmax(0, 1fr)',
+              gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+              minHeight: 0,
+              width: '100%',
+              px: '10px',
+              pb: '10px',
+              '@container qortino-card (max-width: 390px)': {
+                gap: '8px',
+                px: '8px',
+                pb: '8px',
+              },
+            }}
+          >
+            {workspaceState.hotkeys.map((appName, index) => {
+              const app = appName ? resolveHotkeyApp(appName) : null;
+
+              return (
+                <ButtonBase
+                  key={`slot-${index}`}
+                  onClick={() =>
+                    app
+                      ? handleRunHotkey(app.appName)
+                      : handleOpenHotkeyPicker(index)
+                  }
+                  sx={{
+                    alignItems: 'center',
+                    background: 'transparent',
+                    border: '1px solid transparent',
+                    borderRadius: '14px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 0.8,
+                    height: '100%',
+                    justifyContent: 'center',
+                    minWidth: 0,
+                    px: 0.7,
+                    py: 0.7,
+                    transition:
+                      'background 150ms ease, box-shadow 150ms ease, transform 120ms ease',
+                    '&:hover': {
+                      background: `linear-gradient(180deg, ${alpha('#9FC4FF', 0.18)} 0%, ${alpha(
+                        '#8DB8FF',
+                        0.1
+                      )} 58%, ${alpha('#8DB8FF', 0.04)} 100%)`,
+                      boxShadow: `inset 0 0 0 1px ${alpha('#9FC4FF', 0.14)}`,
+                      transform: 'translateY(-1px)',
+                    },
+                  }}
+                >
+                  {app ? (
+                    <>
+                      <HotkeyAppAvatar
+                        appName={app.appName}
+                        radius={11}
+                        size={34}
+                      />
+                      <Typography
+                        sx={{
+                          color: alpha(theme.palette.text.primary, 0.92),
+                          display: '-webkit-box',
+                          fontSize: '0.61rem',
+                          fontWeight: 700,
+                          lineHeight: 1.18,
+                          overflow: 'hidden',
+                          textAlign: 'center',
+                          textOverflow: 'ellipsis',
+                          WebkitBoxOrient: 'vertical',
+                          WebkitLineClamp: 2,
+                        }}
+                      >
+                        {app.label}
+                      </Typography>
+                    </>
+                  ) : (
+                    <>
+                      <Box
+                        sx={{
+                          alignItems: 'center',
+                          color: alpha(theme.palette.text.secondary, 0.62),
+                          display: 'flex',
+                          height: '34px',
+                          justifyContent: 'center',
+                          width: '34px',
+                        }}
+                      >
+                        <AddRoundedIcon sx={{ fontSize: '19px' }} />
+                      </Box>
+                      <Typography
+                        sx={{
+                          color: alpha(theme.palette.text.secondary, 0.7),
+                          fontSize: '0.59rem',
+                          fontWeight: 700,
+                          lineHeight: 1.12,
+                          textAlign: 'center',
+                        }}
+                      >
+                        {qw('workspace_add_app', 'Add app')}
+                      </Typography>
+                    </>
+                  )}
+                </ButtonBase>
+              );
+            })}
+          </Box>
+        </Box>
+      ) : (
+        <QortinoMusicPlayer
+          activeTrack={activeTrack}
+          activeTrackDurationSeconds={activeTrackDurationSeconds}
+          activeTrackPlaybackUrl={activeTrackPlaybackUrl}
+          activeTrackReadyPercent={activeTrackReadyPercent}
+          audioRef={audioRef}
+          isTrackLoadError={isTrackLoadError}
+          isTrackPeerStarved={isTrackPeerStarved}
+          isTrackPlayable={isTrackPlayable}
+          isTrackPreparing={isTrackPreparing}
+          isTrackReady={isTrackReady}
+          musicPlaying={workspaceState.musicPlaying}
+          musicStatusSlotMessage={musicStatusSlotMessage}
+          onClearStreamError={clearMusicStreamError}
+          onClose={() => handleSelectWorkspaceMode('empty')}
+          onCycleTrack={handleCycleTrack}
+          onOpenSearch={() => setOpenMusicSearchDialog(true)}
+          onToggleRepeatMode={handleToggleRepeatMode}
+          onToggleTrack={handleToggleTrack}
+          qortinoLayoutDebug={qortinoLayoutDebug}
+          repeatMode={workspaceState.repeatMode}
+          title={qw('workspace_header_music', 'Music player')}
+        />
+      )}
+    </Box>
+  );
+
+  const qortinoStatusLabel = isQortinoTickled
+    ? 'ticklish'
+    : qortinoGratefulState
+      ? 'grateful'
+      : isOnboardingVisible
+        ? 'helpful'
+        : isWorkspaceFreshlyUnlocked
+          ? 'happy'
+          : workspaceState.mode === 'music' && workspaceState.musicPlaying
+            ? 'listening'
+            : 'idle';
+  const qortinoMascotCenteredOffsetY = Math.round(
+    (QORTINO_MASCOT_SIZE - qortinoMascotStageHeight) / 2
+  );
+  const qortinoCelebrationConfettiOptions = useMemo(
+    () => ({
+      colors: ['#8DB8FF', '#A7CAFF', '#D7E6FF', '#FFFFFF'],
+      drift: 0,
+      gravity: 0.72,
+      origin: { x: 0.48, y: 0.9 },
+      particleCount: 68,
+      scalar: 0.82,
+      spread: 84,
+      startVelocity: 24,
+      ticks: 180,
+    }),
+    []
+  );
+  const renderQortinoCompanionPreviewSection = useCallback(
+    ({
+      displayedMessage,
+      isTickled,
+      isListening,
+      isTalking,
+      messageKey,
+      mood,
+      onMascotDragOver,
+      onMascotDrop,
+      onMascotPointerDown,
+      onMascotPointerRelease,
+      showConfetti = false,
+      statusLabel,
+    }: {
+      displayedMessage: string | null;
+      isTickled: boolean;
+      isListening: boolean;
+      isTalking: boolean;
+      messageKey: string;
+      mood: 'celebrate' | 'empty' | 'grateful' | 'guide' | 'hotkeys' | 'music';
+      onMascotDragOver?: (event: ReactDragEvent<HTMLDivElement>) => void;
+      onMascotDrop?: (event: ReactDragEvent<HTMLDivElement>) => void;
+      onMascotPointerDown?: (event: ReactPointerEvent<HTMLDivElement>) => void;
+      onMascotPointerRelease?: () => void;
+      showConfetti?: boolean;
+      statusLabel: string;
+    }) => {
+      const shouldShowQortinoConfetti = showConfetti;
+
+      return (
+        <Box
+          sx={{
+            background:
+              theme.palette.mode === 'dark'
+                ? `linear-gradient(90deg, ${alpha('#23324A', 0.08)} 0%, ${alpha(
+                    '#1D2A3C',
+                    0.06
+                  )} 20%, ${alpha('#141B25', 0.03)} 38%, ${alpha('#11161E', 0)} 62%), radial-gradient(88% 78% at 8% 96%, ${alpha(
+                    '#23324A',
+                    0.16
+                  )} 0%, ${alpha('#1A2534', 0.08)} 24%, ${alpha('#11161E', 0)} 68%), linear-gradient(180deg, ${alpha(
+                    '#13171D',
+                    0.98
+                  )} 0%, ${alpha('#0E1319', 1)} 100%)`
+                : `linear-gradient(90deg, ${alpha('#D8E8FF', 0.08)} 0%, ${alpha(
+                    '#E7F0FB',
+                    0.06
+                  )} 22%, ${alpha('#F4F7FB', 0.03)} 40%, ${alpha('#FFFFFF', 0)} 64%), radial-gradient(88% 78% at 8% 96%, ${alpha(
+                    '#D8E8FF',
+                    0.18
+                  )} 0%, ${alpha('#E7F0FB', 0.08)} 24%, ${alpha('#FFFFFF', 0)} 68%), linear-gradient(180deg, ${alpha(
+                    '#F4F7FB',
+                    0.98
+                  )} 0%, ${alpha('#EEF3F8', 1)} 100%)`,
+            minHeight: 0,
+            mt: 0,
+            overflow: 'hidden',
+            position: 'relative',
+            px: 2,
+            pb: 1.5,
+            pt: 0,
+          }}
+        >
+          <DotPattern
+            color={isDarkMode ? '#8DB8FF' : '#6EA5FF'}
+            cr={1.15}
+            cx={1}
+            cy={1}
+            height={17}
+            width={17}
+            sx={{
+              opacity: isDarkMode ? 0.5 : 0.34,
+              pointerEvents: 'none',
+              transform: 'translate(-4px, 6px)',
+              zIndex: 0,
+              maskImage:
+                'radial-gradient(70% 76% at 18% 76%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.86) 26%, rgba(255,255,255,0.44) 52%, rgba(255,255,255,0.14) 69%, transparent 84%), linear-gradient(to right, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.38) 34%, transparent 62%)',
+              WebkitMaskImage:
+                'radial-gradient(70% 76% at 18% 76%, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.86) 26%, rgba(255,255,255,0.44) 52%, rgba(255,255,255,0.14) 69%, transparent 84%), linear-gradient(to right, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.38) 34%, transparent 62%)',
+            }}
+          />
+          {shouldShowQortinoConfetti ? (
+            <Confetti
+              key={`qortino-confetti-${messageKey}`}
+              aria-hidden="true"
+              manualstart={false}
+              options={qortinoCelebrationConfettiOptions}
+              style={{
+                inset: 0,
+                pointerEvents: 'none',
+                position: 'absolute',
+                width: '100%',
+                height: '100%',
+                zIndex: 0,
+              }}
+            />
+          ) : null}
+          <Box
+            sx={{
+              inset: 0,
+              pointerEvents: 'none',
+              position: 'absolute',
+              '&::before': {
+                background: subtleLine,
+                content: '""',
+                height: '1px',
+                left: '18px',
+                position: 'absolute',
+                right: '18px',
+                top: 0,
+              },
+            }}
+          />
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              height: '100%',
+              transform: `translateY(${-(qortinoLayoutDebug.separatorOffsetY + onboardingCompanionLift)}px)`,
+            }}
+          >
+            <Box
+              sx={{
+                alignItems: 'flex-start',
+                display: 'flex',
+                justifyContent: 'flex-end',
+                mb: 1.05,
+                mt: '10px',
+                position: 'relative',
+                zIndex: 1,
+              }}
+            >
+              <Box
+                sx={{
+                  alignItems: 'flex-start',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: '3px',
+                  minWidth: '78px',
+                }}
+              >
+                <Typography
+                  sx={{
+                    color: workspaceLabelColor,
+                    fontSize: '0.68rem',
+                    fontWeight: 700,
+                    letterSpacing: '0.14em',
+                    transform: `translate(${qortinoCompanionDebug.nameOffsetX}px, ${qortinoCompanionDebug.nameOffsetY + 1}px)`,
+                    textTransform: 'uppercase',
+                  }}
+                >
+                  QORTINO
+                </Typography>
+                <Box
+                  sx={{
+                    alignSelf: 'flex-start',
+                    overflow: 'visible',
+                    position: 'relative',
+                    transform: `translate(${qortinoCompanionDebug.statusOffsetX}px, ${qortinoCompanionDebug.statusOffsetY + 5}px)`,
+                  }}
+                >
+                  <Box
+                    sx={{
+                      border: '1px solid transparent',
+                      borderRadius: '4px',
+                      px: '3px',
+                      py: '1px',
+                      visibility: 'hidden',
+                    }}
+                  >
+                    <Typography
+                      sx={{
+                        color: 'transparent',
+                        fontSize: '0.58rem',
+                        fontWeight: 700,
+                        letterSpacing: '0.02em',
+                      }}
+                    >
+                      {QORTINO_STATUS_REFERENCE_LABEL}
+                    </Typography>
+                  </Box>
+                  <Box
+                    sx={{
+                      background: alpha('#8DB8FF', isDarkMode ? 0.1 : 0.18),
+                      border: `1px solid ${alpha('#8DB8FF', isDarkMode ? 0.32 : 0.4)}`,
+                      borderRadius: '4px',
+                      boxShadow: `inset 0 1px 0 ${alpha(
+                        theme.palette.common.white,
+                        isDarkMode ? 0.08 : 0.22
+                      )}`,
+                      position: 'absolute',
+                      px: '3px',
+                      py: '1px',
+                      right: 0,
+                      top: 0,
+                    }}
+                  >
+                    <Typography
+                      sx={{
+                        color: alpha('#FFFFFF', 0.98),
+                        fontSize: '0.58rem',
+                        fontWeight: 700,
+                        letterSpacing: '0.02em',
+                      }}
+                    >
+                      {statusLabel}
+                    </Typography>
+                  </Box>
+                </Box>
+              </Box>
+            </Box>
+            <Box
+              sx={{
+                alignItems: 'end',
+                columnGap: 1,
+                display: 'grid',
+                gridTemplateColumns: `${qortinoMascotStageWidth}px minmax(0, 1fr)`,
+                mt: '-11px',
+                minHeight: `${Math.max(qortinoMascotStageHeight, 96)}px`,
+                position: 'relative',
+                zIndex: 1,
+              }}
+            >
+              <Box
+                sx={{
+                  alignItems: 'flex-end',
+                  cursor: 'pointer',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  height: `${qortinoMascotStageHeight}px`,
+                  overflow: 'visible',
+                  touchAction: 'none',
+                  transform: `translateY(${qortinoMascotCenteredOffsetY}px)`,
+                  width: `${qortinoMascotStageWidth}px`,
+                }}
+                onDragOver={onMascotDragOver}
+                onDrop={onMascotDrop}
+                onPointerCancel={onMascotPointerRelease}
+                onPointerDown={onMascotPointerDown}
+                onPointerUp={onMascotPointerRelease}
+                onLostPointerCapture={onMascotPointerRelease}
+              >
+                <QortinoMascot
+                  isDarkMode={isDarkMode}
+                  isTickled={isTickled}
+                  isListening={isListening}
+                  isTalking={isTalking}
+                  lookDebug={qortinoLookDebug}
+                  mood={mood}
+                />
+              </Box>
+              <Box
+                sx={{
+                  alignItems: 'start',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 1.02,
+                  justifyContent: 'center',
+                  minHeight: `${qortinoMascotStageHeight}px`,
+                  minWidth: 0,
+                  width: '100%',
+                }}
+              >
+                {displayedMessage ? (
+                  <motion.div
+                    initial={{ opacity: 0, y: 6 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.22, ease: 'easeOut' }}
+                    style={{ minWidth: 0 }}
+                  >
+                    <Box
+                      sx={{
+                        alignSelf: 'flex-start',
+                        background:
+                          theme.palette.mode === 'dark'
+                            ? 'linear-gradient(180deg, rgba(31,36,45,0.88) 0%, rgba(19,23,29,0.96) 100%)'
+                            : 'linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(243,247,252,0.94) 100%)',
+                        border: `1px solid ${alpha(theme.palette.common.white, isDarkMode ? 0.065 : 0.14)}`,
+                        borderRadius: '15px',
+                        boxShadow: `0 14px 24px ${alpha('#000', isDarkMode ? 0.18 : 0.08)}`,
+                        display: 'flex',
+                        maxWidth: { xs: 'calc(100% - 4px)', sm: '204px' },
+                        minHeight: '76px',
+                        minWidth: 0,
+                        overflow: 'hidden',
+                        p: 0.9,
+                        position: 'relative',
+                        transform: `translate(${qortinoCompanionDebug.bubbleOffsetX}px, ${
+                          qortinoCompanionDebug.bubbleOffsetY + 5
+                        }px)`,
+                        '&::before': {
+                          background: alpha(
+                            theme.palette.common.white,
+                            isDarkMode ? 0.07 : 0.15
+                          ),
+                          bottom: '14px',
+                          clipPath: 'polygon(0 50%, 100% 0, 100% 100%)',
+                          content: '""',
+                          height: '18px',
+                          left: '-12px',
+                          position: 'absolute',
+                          width: '12px',
+                        },
+                        '&::after': {
+                          background:
+                            theme.palette.mode === 'dark'
+                              ? 'linear-gradient(180deg, rgba(31,36,45,0.88) 0%, rgba(19,23,29,0.96) 100%)'
+                              : 'linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(243,247,252,0.94) 100%)',
+                          bottom: '15px',
+                          clipPath: 'polygon(0 50%, 100% 0, 100% 100%)',
+                          content: '""',
+                          filter: `drop-shadow(0 6px 10px ${alpha('#000', isDarkMode ? 0.12 : 0.05)})`,
+                          height: '16px',
+                          left: '-10px',
+                          position: 'absolute',
+                          width: '10px',
+                        },
+                      }}
+                    >
+                      <motion.div
+                        key={messageKey}
+                        initial={{ opacity: 0.35, y: 4 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ duration: 0.22, ease: 'easeOut' }}
+                        style={{ width: '100%' }}
+                      >
+                        <Typography
+                          sx={{
+                            color: alpha(theme.palette.text.primary, 0.94),
+                            display: '-webkit-box',
+                            fontSize: '0.73rem',
+                            fontWeight: 600,
+                            letterSpacing: '-0.015em',
+                            lineHeight: 1.4,
+                            overflow: 'hidden',
+                            overflowWrap: 'anywhere',
+                            textOverflow: 'ellipsis',
+                            WebkitBoxOrient: 'vertical',
+                            WebkitLineClamp: 3,
+                            wordBreak: 'break-word',
+                          }}
+                        >
+                          {displayedMessage}
+                        </Typography>
+                      </motion.div>
+                    </Box>
+                  </motion.div>
+                ) : null}
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      );
+    },
+    [
+      isDarkMode,
+      onboardingCompanionLift,
+      qortinoCompanionDebug.bubbleOffsetX,
+      qortinoCompanionDebug.bubbleOffsetY,
+      qortinoCompanionDebug.nameOffsetX,
+      qortinoCompanionDebug.nameOffsetY,
+      qortinoCompanionDebug.statusOffsetX,
+      qortinoCompanionDebug.statusOffsetY,
+      qortinoLayoutDebug.separatorOffsetY,
+      qortinoLookDebug,
+      qortinoMascotCenteredOffsetY,
+      qortinoMascotStageHeight,
+      qortinoMascotStageWidth,
+      qortinoCelebrationConfettiOptions,
+      subtleLine,
+      theme,
+      workspaceLabelColor,
+    ]
+  );
+
+  const qortinoCompanionSection = renderQortinoCompanionPreviewSection({
+    displayedMessage: qortinoDisplayedMessage,
+    isTickled: isQortinoTickled,
+    isListening: workspaceState.mode === 'music' && workspaceState.musicPlaying,
+    isTalking: qortinoIsTalking,
+    messageKey: qortinoGratefulState
+      ? `grateful-${qortinoGratefulState.nonce}`
+      : (qortinoDisplayedMessage ?? 'empty'),
+    mood: qortinoMood,
+    onMascotDragOver: handleQortinoDonationDragOver,
+    onMascotDrop: handleQortinoDonationDrop,
+    onMascotPointerDown: handleQortinoPointerDown,
+    onMascotPointerRelease: handleQortinoPointerRelease,
+    showConfetti:
+      showOnboardingCompletionConfetti && Boolean(postOnboardingMessage),
+    statusLabel: qortinoStatusLabel,
+  });
+  const qortinoDonationOverlayMessage = truncateQortinoBubbleMessage(
+    qortinoDonationOverlayState?.message ?? null,
+    84
+  );
+  const qortinoDonationOverlay = (
+    <AnimatePresence initial={false} mode="wait">
+      {qortinoDonationOverlayState ? (
+        <Portal>
+          <Box
+            sx={{
+              bottom: 26,
+              display: 'flex',
+              left: 26,
+              pointerEvents: 'none',
+              position: 'fixed',
+              zIndex: 1505,
+            }}
+          >
+            <motion.div
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              exit={{ opacity: 0, y: 10, scale: 0.995 }}
+              initial={{ opacity: 0, y: 12, scale: 0.985 }}
+              key={qortinoDonationOverlayState.nonce}
+              transition={{ duration: 0.3, ease: 'easeOut' }}
+            >
+              <Box
+                sx={{
+                  alignItems: 'flex-end',
+                  display: 'flex',
+                  gap: 1.7,
+                }}
+              >
+                <Box
+                  sx={{
+                    alignItems: 'flex-end',
+                    display: 'flex',
+                    height: `${QORTINO_MASCOT_SIZE + 34}px`,
+                    justifyContent: 'center',
+                    position: 'relative',
+                    width: `${QORTINO_MASCOT_SIZE + 18}px`,
+                  }}
+                >
+                  <Box
+                    sx={{
+                      background: `radial-gradient(ellipse at center, ${alpha(
+                        '#05070C',
+                        isDarkMode ? 0.28 : 0.12
+                      )} 0%, ${alpha('#05070C', 0)} 72%)`,
+                      bottom: 8,
+                      filter: 'blur(12px)',
+                      height: '16px',
+                      left: '50%',
+                      position: 'absolute',
+                      transform: 'translateX(-50%)',
+                      width: `${Math.round(QORTINO_MASCOT_SIZE * 0.62)}px`,
+                      zIndex: 0,
+                    }}
+                  />
+                  <Box
+                    sx={{
+                      transform: 'translateY(-3px) scale(1.02)',
+                      transformOrigin: 'center bottom',
+                      zIndex: 1,
+                    }}
+                  >
+                    <QortinoMascot
+                      isDarkMode={isDarkMode}
+                      isListening={false}
+                      isTalking
+                      isTickled={false}
+                      lookDebug={qortinoLookDebug}
+                      mood="celebrate"
+                    />
+                  </Box>
+                </Box>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 0.7,
+                    maxWidth: 'min(340px, calc(100vw - 170px))',
+                    minWidth: 0,
+                    pb: 0.35,
+                  }}
+                >
+                  <Box
+                    sx={{
+                      alignItems: 'center',
+                      display: 'flex',
+                      gap: 0.8,
+                      minWidth: 0,
+                      pl: 0.15,
+                    }}
+                  >
+                    <Typography
+                      sx={{
+                        color: alpha('#EEF5FF', 0.7),
+                        fontSize: '0.72rem',
+                        fontWeight: 700,
+                        letterSpacing: '0.18em',
+                        textTransform: 'uppercase',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      QORTINO
+                    </Typography>
+                    <Box
+                      sx={{
+                        background: alpha('#8DB8FF', isDarkMode ? 0.1 : 0.18),
+                        border: `1px solid ${alpha('#8DB8FF', isDarkMode ? 0.32 : 0.4)}`,
+                        borderRadius: '6px',
+                        boxShadow: `inset 0 1px 0 ${alpha(
+                          theme.palette.common.white,
+                          isDarkMode ? 0.08 : 0.22
+                        )}`,
+                        flexShrink: 0,
+                        px: '4px',
+                        py: '2px',
+                      }}
+                    >
+                      <Typography
+                        sx={{
+                          color: alpha('#FFFFFF', 0.98),
+                          fontSize: '0.58rem',
+                          fontWeight: 700,
+                          letterSpacing: '0.02em',
+                        }}
+                      >
+                        happy
+                      </Typography>
+                    </Box>
+                  </Box>
+                  <Box
+                    sx={{
+                      background:
+                        theme.palette.mode === 'dark'
+                          ? `linear-gradient(180deg, ${alpha('#1D232C', 0.98)} 0%, ${alpha(
+                              '#161B23',
+                              0.995
+                            )} 100%)`
+                          : `linear-gradient(180deg, ${alpha('#FFFFFF', 0.95)} 0%, ${alpha(
+                              '#F2F6FB',
+                              0.98
+                            )} 100%)`,
+                      border: `1px solid ${alpha(
+                        theme.palette.common.white,
+                        isDarkMode ? 0.09 : 0.18
+                      )}`,
+                      borderRadius: '16px',
+                      boxShadow: `0 12px 28px ${alpha(
+                        '#000000',
+                        isDarkMode ? 0.26 : 0.1
+                      )}, inset 0 1px 0 ${alpha('#FFFFFF', isDarkMode ? 0.05 : 0.6)}`,
+                      minHeight: '74px',
+                      px: 2,
+                      py: 1.45,
+                      position: 'relative',
+                      '&::before': {
+                        background:
+                          theme.palette.mode === 'dark'
+                            ? `linear-gradient(135deg, ${alpha('#FFFFFF', 0.028)} 0%, ${alpha(
+                                '#FFFFFF',
+                                0
+                              )} 60%)`
+                            : `linear-gradient(135deg, ${alpha('#FFFFFF', 0.42)} 0%, ${alpha(
+                                '#FFFFFF',
+                                0
+                              )} 58%)`,
+                        borderRadius: 'inherit',
+                        content: '""',
+                        inset: '1px',
+                        pointerEvents: 'none',
+                        position: 'absolute',
+                      },
+                    }}
+                  >
+                    <Typography
+                      sx={{
+                        color: alpha('#F6F8FF', 0.98),
+                        display: '-webkit-box',
+                        fontSize: '0.95rem',
+                        fontWeight: 700,
+                        letterSpacing: '-0.014em',
+                        lineHeight: 1.34,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        WebkitBoxOrient: 'vertical',
+                        WebkitLineClamp: 3,
+                        wordBreak: 'break-word',
+                      }}
+                    >
+                      {qortinoDonationOverlayMessage}
+                    </Typography>
+                  </Box>
+                </Box>
+              </Box>
+            </motion.div>
+          </Box>
+        </Portal>
+      ) : null}
+    </AnimatePresence>
+  );
+
+  return (
+    <>
+      <Box
+        ref={panelRef}
+        sx={{
+          ...dashboardPanelSx(theme, 'base'),
+          borderRadius: '18px',
+          containerName: 'qortino-card',
+          containerType: 'inline-size',
+          display: 'grid',
+          gridTemplateRows: `${workspaceBayHeightPx}px minmax(0, 1fr)`,
+          height: '100%',
+          overflow: 'hidden',
+          position: 'relative',
+          width: '100%',
+        }}
+        onMouseMove={handleDashboardPanelPointerMove}
+        onMouseLeave={handleDashboardPanelPointerLeave}
+      >
+        <ErrorBoundary
+          fallback={
+            <QortinoSectionRuntimeFallback
+              body={qw(
+                'runtime_workspace_bay_body',
+                'QORTINO below is still safe. Refresh the Hub and if this keeps happening we will trace the exact crash from here.'
+              )}
+              theme={theme}
+              title={qw(
+                'runtime_workspace_bay_title',
+                'Workspace bay hit a runtime snag.'
+              )}
+              variant="workspace"
+            />
+          }
+        >
+          {workspaceBaySection}
+        </ErrorBoundary>
+
+        <ErrorBoundary
+          fallback={
+            <QortinoSectionRuntimeFallback
+              body={qw(
+                'runtime_qortino_body',
+                'The workspace bay above is still safe. Refresh the Hub and if this keeps happening we will trace the exact crash from here.'
+              )}
+              theme={theme}
+              title={qw('runtime_qortino_title', 'QORTINO hit a runtime snag.')}
+              variant="qortino"
+            />
+          }
+        >
+          {qortinoCompanionSection}
+        </ErrorBoundary>
+      </Box>
+      {qortinoDonationOverlay}
+      <Dialog
+        open={openModulePickerDialog}
+        onClose={() => setOpenModulePickerDialog(false)}
+        BackdropProps={{
+          sx: {
+            backdropFilter: 'blur(10px)',
+            background: alpha('#04070C', 0.42),
+          },
+        }}
+        PaperProps={{
+          sx: {
+            background:
+              theme.palette.mode === 'dark'
+                ? 'linear-gradient(180deg, rgba(26,30,37,0.96) 0%, rgba(18,21,27,0.98) 100%)'
+                : 'linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(246,248,251,0.98) 100%)',
+            border: `1px solid ${alpha(theme.palette.common.white, isDarkMode ? 0.08 : 0.16)}`,
+            borderRadius: '18px',
+            boxShadow: `0 26px 60px ${alpha('#000', 0.34)}`,
+            maxWidth: '420px',
+            width: 'calc(100% - 32px)',
+          },
+        }}
+      >
+        <DialogTitle
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'space-between',
+            pb: 1,
+          }}
+        >
+          <Box>
+            <Typography sx={{ fontSize: '1rem', fontWeight: 700 }}>
+              {qw('dialog_module_title', 'Choose a module')}
+            </Typography>
+            <Typography
+              sx={{
+                color: alpha(theme.palette.text.secondary, 0.78),
+                fontSize: '0.76rem',
+                mt: 0.3,
+              }}
+            >
+              {qw('dialog_module_subtitle', 'Pick what lives above QORTINO.')}
+            </Typography>
+          </Box>
+          <IconButton
+            onClick={() => setOpenModulePickerDialog(false)}
+            size="small"
+          >
+            <CloseRoundedIcon />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent
+          sx={{ display: 'flex', flexDirection: 'column', gap: 0.8, pb: 2.1 }}
+        >
+          {workspaceModules.map((module) => (
+            <ButtonBase
+              key={module.key}
+              onClick={() => {
+                if (module.appName) {
+                  setOpenModulePickerDialog(false);
+                  window.setTimeout(() => {
+                    openApp(module.appName as string, module.appPath ?? '');
+                  }, 0);
+                  return;
+                }
+                if (module.mode === 'hotkeys') {
+                  handleOpenHotkeyPicker(
+                    firstEmptyHotkeySlot >= 0 ? firstEmptyHotkeySlot : 0
+                  );
+                  return;
+                }
+                if (module.mode) {
+                  handleSelectWorkspaceMode(module.mode);
+                }
+              }}
+              sx={{
+                alignItems: 'center',
+                background:
+                  theme.palette.mode === 'dark'
+                    ? 'rgba(255,255,255,0.03)'
+                    : 'rgba(20,24,32,0.03)',
+                border: `1px solid ${alpha(theme.palette.common.white, isDarkMode ? 0.06 : 0.12)}`,
+                borderRadius: '14px',
+                display: 'grid',
+                gap: '12px',
+                gridTemplateColumns: '40px minmax(0, 1fr)',
+                px: 1,
+                py: 0.95,
+                textAlign: 'left',
+                transition:
+                  'transform 120ms ease, border-color 140ms ease, box-shadow 140ms ease',
+                '&:hover': {
+                  borderColor: alpha('#8DB8FF', 0.24),
+                  boxShadow: `0 8px 20px ${alpha('#000', 0.16)}`,
+                  transform: 'translateY(-1px)',
+                },
+              }}
+            >
+              <Box
+                sx={{
+                  alignItems: 'center',
+                  background: alpha('#8DB8FF', 0.12),
+                  borderRadius: '12px',
+                  color: alpha('#A8CAFF', 0.96),
+                  display: 'flex',
+                  height: '40px',
+                  justifyContent: 'center',
+                  width: '40px',
+                }}
+              >
+                <module.icon sx={{ fontSize: '19px' }} />
+              </Box>
+              <Box sx={{ minWidth: 0 }}>
+                <Typography sx={{ fontSize: '0.82rem', fontWeight: 700 }}>
+                  {module.label}
+                </Typography>
+                <Typography
+                  sx={{
+                    color: alpha(theme.palette.text.secondary, 0.7),
+                    fontSize: '0.68rem',
+                    lineHeight: 1.4,
+                    mt: 0.2,
+                  }}
+                >
+                  {module.description}
+                </Typography>
+              </Box>
+            </ButtonBase>
+          ))}
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={openHotkeyPickerDialog}
+        onClose={() => setOpenHotkeyPickerDialog(false)}
+        BackdropProps={{
+          sx: {
+            backdropFilter: 'blur(10px)',
+            background: alpha('#04070C', 0.42),
+          },
+        }}
+        PaperProps={{
+          sx: {
+            background:
+              theme.palette.mode === 'dark'
+                ? 'linear-gradient(180deg, rgba(26,30,37,0.96) 0%, rgba(18,21,27,0.98) 100%)'
+                : 'linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(246,248,251,0.98) 100%)',
+            border: `1px solid ${alpha(theme.palette.common.white, isDarkMode ? 0.08 : 0.16)}`,
+            borderRadius: '18px',
+            boxShadow: `0 26px 60px ${alpha('#000', 0.34)}`,
+            display: 'flex',
+            flexDirection: 'column',
+            maxHeight: 'min(90vh, 946px)',
+            maxWidth: '568px',
+            width: 'calc(100% - 32px)',
+          },
+        }}
+      >
+        <DialogTitle
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'space-between',
+            pb: 1,
+          }}
+        >
+          <Box>
+            <Typography sx={{ fontSize: '1rem', fontWeight: 700 }}>
+              {qw('dialog_hotkeys_title', 'Select hotkeys')}
+            </Typography>
+            <Typography
+              sx={{
+                color: alpha(theme.palette.text.secondary, 0.78),
+                fontSize: '0.76rem',
+                mt: 0.3,
+              }}
+            >
+              {qw(
+                'dialog_hotkeys_subtitle',
+                'Saved automatically for this account.'
+              )}
+            </Typography>
+          </Box>
+          <IconButton
+            onClick={() => setOpenHotkeyPickerDialog(false)}
+            size="small"
+          >
+            <CloseRoundedIcon />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent
+          sx={{
+            display: 'flex',
+            flex: '1 1 auto',
+            flexDirection: 'column',
+            gap: 1.1,
+            minHeight: 0,
+            overflow: 'hidden',
+            pb: 2.1,
+          }}
+        >
+          <Box
+            sx={{
+              alignSelf: 'center',
+              display: 'grid',
+              gap: '8px',
+              gridTemplateColumns: 'repeat(3, minmax(0, 1fr))',
+              maxWidth: '348px',
+              px: '8px',
+              width: '100%',
+            }}
+          >
+            {workspaceState.hotkeys.map((appName, index) => {
+              const app = appName ? resolveHotkeyApp(appName) : null;
+              const isActive = selectedHotkeySlot === index;
+
+              return (
+                <ButtonBase
+                  key={`picker-slot-${index}`}
+                  onClick={() => setSelectedHotkeySlot(index)}
+                  sx={{
+                    alignItems: 'center',
+                    background:
+                      theme.palette.mode === 'dark'
+                        ? alpha('#1D222A', isActive ? 0.96 : 0.76)
+                        : alpha('#F4F7FB', isActive ? 0.98 : 0.88),
+                    border: `1px solid ${alpha(
+                      isActive ? '#8DB8FF' : theme.palette.common.white,
+                      isDarkMode ? (isActive ? 0.26 : 0.06) : 0.14
+                    )}`,
+                    borderRadius: '14px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 0.5,
+                    minHeight: 0,
+                    px: 0.55,
+                    py: 0.55,
+                    aspectRatio: '1 / 1',
+                    position: 'relative',
+                  }}
+                >
+                  {app ? (
+                    <ButtonBase
+                      aria-label={qw(
+                        'a11y_clear_hotkey_slot',
+                        'Clear slot {{n}}',
+                        {
+                          n: index + 1,
+                        }
+                      )}
+                      onClick={(event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                        handleClearHotkey(index);
+                      }}
+                      sx={{
+                        alignItems: 'center',
+                        color: alpha(theme.palette.text.secondary, 0.68),
+                        display: 'inline-flex',
+                        height: '16px',
+                        justifyContent: 'center',
+                        position: 'absolute',
+                        right: '6px',
+                        top: '6px',
+                        transition: 'color 140ms ease, text-shadow 140ms ease',
+                        width: '16px',
+                        '&:hover': {
+                          color: curatedAccentBlue,
+                          textShadow: `0 0 8px ${alpha(
+                            GROUP_ACTIVITY_BLUE.primary,
+                            isDarkMode ? 0.18 : 0.1
+                          )}`,
+                        },
+                      }}
+                    >
+                      <CloseRoundedIcon sx={{ fontSize: '12px' }} />
+                    </ButtonBase>
+                  ) : null}
+                  {app ? (
+                    <>
+                      <HotkeyAppAvatar
+                        appName={app.appName}
+                        radius={11}
+                        size={28}
+                      />
+                      <Typography
+                        sx={{
+                          display: '-webkit-box',
+                          fontSize: '0.56rem',
+                          fontWeight: 700,
+                          lineHeight: 1.12,
+                          overflow: 'hidden',
+                          textAlign: 'center',
+                          WebkitBoxOrient: 'vertical',
+                          WebkitLineClamp: 2,
+                        }}
+                      >
+                        {app.label}
+                      </Typography>
+                    </>
+                  ) : (
+                    <>
+                      <AddRoundedIcon
+                        sx={{
+                          color: alpha(theme.palette.text.secondary, 0.58),
+                          fontSize: '17px',
+                        }}
+                      />
+                      <Typography
+                        sx={{
+                          color: alpha(theme.palette.text.secondary, 0.72),
+                          fontSize: '0.54rem',
+                          fontWeight: 600,
+                        }}
+                      >
+                        {qw('hotkey_slot_number', 'Slot {{n}}', {
+                          n: index + 1,
+                        })}
+                      </Typography>
+                    </>
+                  )}
+                </ButtonBase>
+              );
+            })}
+          </Box>
+
+          <Box
+            component="input"
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              setHotkeySearchQuery(event.target.value)
+            }
+            placeholder={qw('search_placeholder_qapps', 'Search Q-Apps')}
+            sx={{
+              appearance: 'none',
+              background:
+                theme.palette.mode === 'dark'
+                  ? 'rgba(255,255,255,0.035)'
+                  : 'rgba(12,20,32,0.045)',
+              border: `1px solid ${alpha(theme.palette.common.white, isDarkMode ? 0.06 : 0.12)}`,
+              borderRadius: '12px',
+              color: theme.palette.text.primary,
+              font: 'inherit',
+              fontSize: '0.82rem',
+              outline: 'none',
+              px: 1.25,
+              py: 0.9,
+              '&::placeholder': {
+                color: alpha(theme.palette.text.secondary, 0.64),
+              },
+            }}
+            value={hotkeySearchQuery}
+          />
+
+          <Box
+            sx={{
+              display: 'flex',
+              flex: 1,
+              flexDirection: 'column',
+              gap: 0.9,
+              minHeight: 0,
+            }}
+          >
+            <HotkeyPickerVirtualScroll
+              key={`${debouncedHotkeySearchQuery}:${hotkeyPickerRows.length}`}
+              renderRow={renderHotkeyPickerRow}
+              rows={hotkeyPickerRows}
+            />
+
+            {filteredHotkeyCatalog.length === 0 && (
+              <Box
+                sx={{
+                  alignItems: 'center',
+                  border: `1px solid ${alpha(theme.palette.common.white, isDarkMode ? 0.06 : 0.12)}`,
+                  borderRadius: '14px',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 0.35,
+                  justifyContent: 'center',
+                  minHeight: '84px',
+                  px: 1.2,
+                  py: 1,
+                  textAlign: 'center',
+                }}
+              >
+                {isHotkeyAppsLoading ? (
+                  <>
+                    <CircularProgress size={18} thickness={4} />
+                    <Typography
+                      sx={{
+                        color: alpha(theme.palette.text.secondary, 0.68),
+                        fontSize: '0.64rem',
+                        lineHeight: 1.4,
+                      }}
+                    >
+                      {qw(
+                        'hotkeys_loading_library',
+                        'Loading Q-Apps library...'
+                      )}
+                    </Typography>
+                  </>
+                ) : (
+                  <>
+                    <Typography
+                      sx={{
+                        color: alpha(theme.palette.text.primary, 0.88),
+                        fontSize: '0.76rem',
+                        fontWeight: 700,
+                      }}
+                    >
+                      {hotkeyAppsError
+                        ? qw('hotkeys_unavailable_title', 'Q-Apps unavailable')
+                        : qw('hotkeys_no_match_title', 'No Q-Apps match yet')}
+                    </Typography>
+                    <Typography
+                      sx={{
+                        color: alpha(theme.palette.text.secondary, 0.68),
+                        fontSize: '0.64rem',
+                        lineHeight: 1.4,
+                        maxWidth: '28ch',
+                      }}
+                    >
+                      {hotkeyAppsError ||
+                        qw(
+                          'hotkeys_no_match_hint',
+                          'Try another app name to wire a shortcut into the selected slot.'
+                        )}
+                    </Typography>
+                  </>
+                )}
+              </Box>
+            )}
+          </Box>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={openMusicSearchDialog}
+        onClose={() => setOpenMusicSearchDialog(false)}
+        BackdropProps={{
+          sx: {
+            backdropFilter: 'blur(10px)',
+            background: alpha('#04070C', 0.42),
+          },
+        }}
+        PaperProps={{
+          sx: {
+            background:
+              theme.palette.mode === 'dark'
+                ? 'linear-gradient(180deg, rgba(26,30,37,0.96) 0%, rgba(18,21,27,0.98) 100%)'
+                : 'linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(246,248,251,0.98) 100%)',
+            border: `1px solid ${alpha(theme.palette.common.white, isDarkMode ? 0.08 : 0.16)}`,
+            borderRadius: '18px',
+            boxShadow: `0 26px 60px ${alpha('#000', 0.34)}`,
+            maxWidth: '480px',
+            width: 'calc(100% - 32px)',
+          },
+        }}
+      >
+        <DialogTitle
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'space-between',
+            pb: 1,
+          }}
+        >
+          <Box>
+            <Typography sx={{ fontSize: '1rem', fontWeight: 700 }}>
+              {qw('dialog_music_search_title', 'Search Earbump')}
+            </Typography>
+            <Typography
+              sx={{
+                color: alpha(theme.palette.text.secondary, 0.78),
+                fontSize: '0.76rem',
+                mt: 0.3,
+              }}
+            >
+              {qw(
+                'dialog_music_search_subtitle',
+                'Find a track, press play, and drop it into the player above.'
+              )}
+            </Typography>
+          </Box>
+          <IconButton
+            onClick={() => setOpenMusicSearchDialog(false)}
+            size="small"
+          >
+            <CloseRoundedIcon />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent
+          sx={{ display: 'flex', flexDirection: 'column', gap: 1.1, pb: 2.1 }}
+        >
+          <Box
+            component="input"
+            onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+              applyWorkspaceState((current) => ({
+                ...current,
+                musicQuery: event.target.value,
+              }))
+            }
+            placeholder={qw(
+              'search_placeholder_tracks',
+              'Search tracks or artists'
+            )}
+            sx={{
+              appearance: 'none',
+              background:
+                theme.palette.mode === 'dark'
+                  ? 'rgba(255,255,255,0.035)'
+                  : 'rgba(12,20,32,0.045)',
+              border: `1px solid ${alpha(theme.palette.common.white, isDarkMode ? 0.06 : 0.12)}`,
+              borderRadius: '12px',
+              color: theme.palette.text.primary,
+              font: 'inherit',
+              fontSize: '0.82rem',
+              outline: 'none',
+              px: 1.25,
+              py: 0.9,
+              '&::placeholder': {
+                color: alpha(theme.palette.text.secondary, 0.64),
+              },
+            }}
+            value={workspaceState.musicQuery}
+          />
+
+          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
+            <Typography
+              sx={{
+                color: alpha(theme.palette.text.secondary, 0.68),
+                fontSize: '0.66rem',
+                fontWeight: 700,
+                letterSpacing: '0.08em',
+                textTransform: 'uppercase',
+              }}
+            >
+              {workspaceState.musicQuery.trim()
+                ? qw('music_section_results', 'Results')
+                : qw('music_section_discovery', 'Discovery')}
+            </Typography>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.55 }}>
+              {isMusicBrowserLoading ? (
+                <Box
+                  sx={{
+                    alignItems: 'center',
+                    border: `1px solid ${alpha(theme.palette.common.white, isDarkMode ? 0.06 : 0.12)}`,
+                    borderRadius: '14px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 0.8,
+                    justifyContent: 'center',
+                    minHeight: '96px',
+                    px: 1.2,
+                    py: 1,
+                    textAlign: 'center',
+                  }}
+                >
+                  <CircularProgress size={20} thickness={4.2} />
+                  <Typography
+                    sx={{
+                      color: alpha(theme.palette.text.secondary, 0.74),
+                      fontSize: '0.68rem',
+                      fontWeight: 600,
+                    }}
+                  >
+                    {musicSearchQuery
+                      ? qw(
+                          'music_loading_search',
+                          'Searching the EarBump library...'
+                        )
+                      : qw(
+                          'music_loading_discovery',
+                          'Loading EarBump discovery...'
+                        )}
+                  </Typography>
+                </Box>
+              ) : null}
+              {!isMusicBrowserLoading && musicBrowserError ? (
+                <Box
+                  sx={{
+                    alignItems: 'center',
+                    border: `1px solid ${alpha(theme.palette.common.white, isDarkMode ? 0.06 : 0.12)}`,
+                    borderRadius: '14px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 0.35,
+                    justifyContent: 'center',
+                    minHeight: '88px',
+                    px: 1.2,
+                    py: 1,
+                    textAlign: 'center',
+                  }}
+                >
+                  <Typography
+                    sx={{
+                      color: alpha(theme.palette.text.primary, 0.88),
+                      fontSize: '0.78rem',
+                      fontWeight: 700,
+                    }}
+                  >
+                    {qw('music_quiet_title', 'EarBump is quiet right now')}
+                  </Typography>
+                  <Typography
+                    sx={{
+                      color: alpha(theme.palette.text.secondary, 0.68),
+                      fontSize: '0.64rem',
+                      lineHeight: 1.4,
+                      maxWidth: '30ch',
+                    }}
+                  >
+                    {musicBrowserError}
+                  </Typography>
+                </Box>
+              ) : null}
+              {!isMusicBrowserLoading && !musicBrowserError
+                ? browserTracks.map((track) => (
+                    <ButtonBase
+                      key={track.id}
+                      onClick={() => handleSelectTrackFromBrowser(track.id)}
+                      sx={{
+                        alignItems: 'center',
+                        background:
+                          theme.palette.mode === 'dark'
+                            ? 'rgba(255,255,255,0.03)'
+                            : 'rgba(20,24,32,0.03)',
+                        border: `1px solid ${alpha(theme.palette.common.white, isDarkMode ? 0.06 : 0.12)}`,
+                        borderRadius: '14px',
+                        display: 'grid',
+                        gap: '12px',
+                        gridTemplateColumns: '42px minmax(0, 1fr) auto auto',
+                        px: 0.85,
+                        py: 0.75,
+                        textAlign: 'left',
+                      }}
+                    >
+                      <MusicCoverArt size={42} track={track} />
+                      <Box sx={{ minWidth: 0 }}>
+                        <Typography
+                          sx={{
+                            color: alpha(theme.palette.text.primary, 0.9),
+                            fontSize: '0.78rem',
+                            fontWeight: 700,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                          }}
+                        >
+                          {track.title}
+                        </Typography>
+                        <Typography
+                          sx={{
+                            color: alpha(theme.palette.text.secondary, 0.72),
+                            fontSize: '0.64rem',
+                            mt: 0.2,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                          }}
+                        >
+                          {`${track.artist} ${qw(
+                            'track_meta_separator',
+                            '\u00b7'
+                          )} ${track.uploaded}`}
+                        </Typography>
+                      </Box>
+                      <Typography
+                        sx={{
+                          color: alpha(theme.palette.text.secondary, 0.68),
+                          fontSize: '0.62rem',
+                          fontWeight: 600,
+                          whiteSpace: 'nowrap',
+                        }}
+                      >
+                        {track.length}
+                      </Typography>
+                      <Box
+                        sx={{
+                          alignItems: 'center',
+                          background: alpha('#8DB8FF', 0.12),
+                          borderRadius: '10px',
+                          color: alpha('#A9C9FF', 0.95),
+                          display: 'flex',
+                          height: '30px',
+                          justifyContent: 'center',
+                          width: '30px',
+                        }}
+                      >
+                        <PlayArrowRoundedIcon sx={{ fontSize: '18px' }} />
+                      </Box>
+                    </ButtonBase>
+                  ))
+                : null}
+              {!isMusicBrowserLoading &&
+              !musicBrowserError &&
+              browserTracks.length === 0 ? (
+                <Box
+                  sx={{
+                    alignItems: 'center',
+                    border: `1px solid ${alpha(theme.palette.common.white, isDarkMode ? 0.06 : 0.12)}`,
+                    borderRadius: '14px',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 0.35,
+                    justifyContent: 'center',
+                    minHeight: '88px',
+                    px: 1.2,
+                    py: 1,
+                    textAlign: 'center',
+                  }}
+                >
+                  <Typography
+                    sx={{
+                      color: alpha(theme.palette.text.primary, 0.88),
+                      fontSize: '0.78rem',
+                      fontWeight: 700,
+                    }}
+                  >
+                    {qw('music_no_tracks_title', 'No tracks surfaced')}
+                  </Typography>
+                  <Typography
+                    sx={{
+                      color: alpha(theme.palette.text.secondary, 0.68),
+                      fontSize: '0.64rem',
+                      lineHeight: 1.4,
+                      maxWidth: '28ch',
+                    }}
+                  >
+                    {qw(
+                      'music_no_tracks_hint',
+                      'Try another title or artist to pull something into the player.'
+                    )}
+                  </Typography>
+                </Box>
+              ) : null}
+            </Box>
+          </Box>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog
+        open={openQortsDialog}
+        onClose={() => setOpenQortsDialog(false)}
+        PaperProps={{
+          sx: {
+            background:
+              theme.palette.mode === 'dark'
+                ? 'linear-gradient(180deg, rgba(26,30,37,0.96) 0%, rgba(18,21,27,0.98) 100%)'
+                : 'linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(246,248,251,0.98) 100%)',
+            border: `1px solid ${alpha(theme.palette.common.white, isDarkMode ? 0.08 : 0.16)}`,
+            borderRadius: '18px',
+            boxShadow: `0 26px 60px ${alpha('#000', 0.34)}`,
+            maxWidth: '460px',
+            width: 'calc(100% - 32px)',
+          },
+        }}
+      >
+        <DialogTitle
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'space-between',
+            pb: 1,
+          }}
+        >
+          <Box>
+            <Typography sx={{ fontSize: '1rem', fontWeight: 700 }}>
+              {t('tutorial:home.get_six_qorts', 'Get 6 QORT')}
+            </Typography>
+            <Typography
+              sx={{
+                color: alpha(theme.palette.text.secondary, 0.78),
+                fontSize: '0.76rem',
+                mt: 0.3,
+              }}
+            >
+              {t(
+                'tutorial:home.get_six_qorts_intro',
+                'There are 3 ways to get your first 6 QORT:'
+              )}
+            </Typography>
+          </Box>
+          <IconButton onClick={() => setOpenQortsDialog(false)} size="small">
+            <CloseRoundedIcon />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent
+          sx={{ display: 'flex', flexDirection: 'column', gap: 1.1, pb: 2.1 }}
+        >
+          <QortOptionRow
+            icon={SchoolRoundedIcon}
+            label={t(
+              'tutorial:home.get_six_qorts_way1',
+              'Finish the onboarding instruction on qortal.dev'
+            )}
+            onClick={() => openExternalUrl(ONBOARDING_URL)}
+            actionLabel={t(
+              'tutorial:home.get_six_qorts_way1_action',
+              'Go to onboarding'
+            )}
+            theme={theme}
+          />
+          <QortOptionRow
+            icon={SupportAgentRoundedIcon}
+            label={t(
+              'tutorial:home.get_six_qorts_way2',
+              'Ask in the Nextcloud support chat for 6 QORT.'
+            )}
+            onClick={() => openExternalUrl(SUPPORT_CHAT_URL)}
+            actionLabel={t(
+              'tutorial:home.get_six_qorts_way2_action',
+              'Open support chat'
+            )}
+            theme={theme}
+          />
+          <QortOptionRow
+            icon={ShoppingBagRoundedIcon}
+            label={t(
+              'tutorial:home.get_six_qorts_way3',
+              'Buy QORT using Q-Trade'
+            )}
+            onClick={() => {
+              openApp('Q-Trade');
+              setOpenQortsDialog(false);
+            }}
+            actionLabel={t(
+              'tutorial:home.get_six_qorts_way3_action',
+              'Open Q-Trade'
+            )}
+            theme={theme}
+          />
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+const GettingStartedMethodRow = ({
+  accent = '#8DB8FF',
+  description,
+  emphasized = false,
+  icon: Icon,
+  label,
+  onClick,
+  showChevron = false,
+  showDivider = false,
+}: {
+  accent?: string;
+  description: string;
+  emphasized?: boolean;
+  icon: typeof SchoolRoundedIcon;
+  label: string;
+  onClick: () => void;
+  showChevron?: boolean;
+  showDivider?: boolean;
+}) => {
+  const theme = useTheme();
+  const { t } = useTranslation(['tutorial', 'core']);
+  const isDarkMode = theme.palette.mode === 'dark';
+
+  return (
+    <ButtonBase
+      onClick={onClick}
+      sx={{
+        alignItems: 'center',
+        borderRadius: 0,
+        display: 'grid',
+        gap: '10px',
+        gridTemplateColumns: '22px minmax(0, 1fr) auto',
+        minHeight: '56px',
+        px: 0,
+        py: 0.9,
+        position: 'relative',
+        textAlign: 'left',
+        transition: 'color 140ms ease',
+        width: '100%',
+        '@container qortino-card (max-width: 390px)': {
+          gap: '9px',
+          gridTemplateColumns: '20px minmax(0, 1fr) auto',
+          minHeight: '52px',
+          py: 0.82,
+        },
+        '&::before': {
+          background: `linear-gradient(90deg, ${alpha(
+            accent,
+            0
+          )} 0%, ${alpha(accent, isDarkMode ? 0.032 : 0.028)} 16%, ${alpha(
+            accent,
+            isDarkMode ? 0.082 : 0.07
+          )} 50%, ${alpha(accent, isDarkMode ? 0.032 : 0.028)} 84%, ${alpha(
+            accent,
+            0
+          )} 100%)`,
+          borderRadius: '6px',
+          content: '""',
+          inset: '6px -8px',
+          opacity: 0,
+          pointerEvents: 'none',
+          position: 'absolute',
+          transition: 'opacity 150ms ease',
+        },
+        '&:hover::before, &:focus-visible::before': {
+          opacity: 1,
+        },
+        '&::after': showDivider
+          ? {
+              background: alpha(
+                theme.palette.common.white,
+                isDarkMode ? 0.07 : 0.14
+              ),
+              bottom: 0,
+              content: '""',
+              height: '1px',
+              left: 0,
+              position: 'absolute',
+              right: 0,
+            }
+          : undefined,
+      }}
+    >
+      <Box
+        sx={{
+          alignItems: 'center',
+          color: alpha(accent, emphasized ? 0.94 : 0.82),
+          display: 'flex',
+          justifyContent: 'center',
+          width: '22px',
+          '@container qortino-card (max-width: 390px)': {
+            width: '20px',
+          },
+        }}
+      >
+        <Icon
+          sx={{
+            fontSize: emphasized ? '18px' : '17px',
+            '@container qortino-card (max-width: 390px)': {
+              fontSize: emphasized ? '17px' : '16px',
+            },
+          }}
+        />
+      </Box>
+      <Box sx={{ minWidth: 0 }}>
+        {emphasized ? (
+          <Typography
+            sx={{
+              color: alpha(accent, 0.8),
+              fontSize: '0.54rem',
+              fontWeight: 700,
+              letterSpacing: '0.06em',
+              lineHeight: 1,
+              mb: 0.22,
+              textTransform: 'uppercase',
+            }}
+          >
+            {t('core:qortino_workspace.section_recommended', 'Recommended')}
+          </Typography>
+        ) : null}
+        <Typography
+          sx={{
+            color: alpha(theme.palette.text.primary, 0.94),
+            fontSize: emphasized ? '0.84rem' : '0.8rem',
+            fontWeight: emphasized ? 700 : 600,
+            letterSpacing: '-0.015em',
+            lineHeight: 1.08,
+            '@container qortino-card (max-width: 390px)': {
+              fontSize: emphasized ? '0.79rem' : '0.75rem',
+            },
+          }}
+        >
+          {label}
+        </Typography>
+        <Typography
+          sx={{
+            color: alpha(theme.palette.text.secondary, 0.74),
+            fontSize: '0.67rem',
+            lineHeight: 1.3,
+            mt: 0.14,
+            '@container qortino-card (max-width: 390px)': {
+              fontSize: '0.63rem',
+            },
+          }}
+        >
+          {description}
+        </Typography>
+      </Box>
+      {showChevron ? (
+        <ChevronRightRoundedIcon
+          sx={{
+            color: alpha(accent, 0.82),
+            fontSize: '18px',
+            mr: 0.1,
+          }}
+        />
+      ) : (
+        <Box sx={{ width: '18px' }} />
+      )}
+    </ButtonBase>
+  );
+};
+
+const GettingStartedPrimaryAction = ({
+  accent = '#8DB8FF',
+  disabled = false,
+  label,
+  loading = false,
+  onClick,
+}: {
+  accent?: string;
+  disabled?: boolean;
+  label: string;
+  loading?: boolean;
+  onClick: () => void;
+}) => {
+  const theme = useTheme();
+
+  return (
+    <ButtonBase
+      disabled={disabled || loading}
+      onClick={onClick}
+      sx={{
+        alignItems: 'center',
+        background:
+          theme.palette.mode === 'dark'
+            ? `linear-gradient(180deg, ${alpha(accent, 0.18)} 0%, ${alpha(
+                accent,
+                0.11
+              )} 100%)`
+            : `linear-gradient(180deg, ${alpha(accent, 0.16)} 0%, ${alpha(
+                accent,
+                0.1
+              )} 100%)`,
+        border: `1px solid ${alpha(accent, theme.palette.mode === 'dark' ? 0.22 : 0.18)}`,
+        borderRadius: '8px',
+        boxShadow: `inset 0 1px 0 ${alpha(
+          theme.palette.common.white,
+          theme.palette.mode === 'dark' ? 0.08 : 0.22
+        )}`,
+        color: alpha('#FFFFFF', 0.98),
+        justifyContent: 'flex-start',
+        minHeight: '32px',
+        px: 1.1,
+        py: 0.5,
+        textAlign: 'left',
+        transition:
+          'transform 120ms ease, filter 140ms ease, background 160ms ease, border-color 160ms ease',
+        width: '100%',
+        '@container qortino-card (max-width: 390px)': {
+          minHeight: '30px',
+          px: 0.95,
+          py: 0.48,
+        },
+        '&:hover': {
+          borderColor: alpha(
+            accent,
+            theme.palette.mode === 'dark' ? 0.3 : 0.22
+          ),
+          filter: 'brightness(1.02)',
+          transform: 'translateY(-1px)',
+        },
+        '&.Mui-disabled': {
+          opacity: 0.78,
+        },
+      }}
+    >
+      <Typography
+        sx={{
+          color: alpha('#FFFFFF', 0.98),
+          fontSize: '0.7rem',
+          fontWeight: 600,
+          letterSpacing: '0.01em',
+          lineHeight: 1.16,
+          '@container qortino-card (max-width: 390px)': {
+            fontSize: '0.67rem',
+          },
+        }}
+      >
+        {loading ? 'Confirming...' : label}
+      </Typography>
+    </ButtonBase>
+  );
+};
+
+const GettingStartedSecondaryAction = ({
+  accent = '#8DB8FF',
+  label,
+  onClick,
+}: {
+  accent?: string;
+  label: string;
+  onClick: () => void;
+}) => {
+  return (
+    <ButtonBase
+      onClick={onClick}
+      sx={{
+        alignItems: 'center',
+        color: alpha('#C3D8FF', 0.84),
+        columnGap: 0.42,
+        display: 'inline-flex',
+        fontSize: '0.65rem',
+        fontWeight: 600,
+        justifyContent: 'flex-start',
+        minHeight: '20px',
+        px: 0.1,
+        py: 0.05,
+        textAlign: 'left',
+        transition: 'color 140ms ease, opacity 120ms ease',
+        '@container qortino-card (max-width: 390px)': {
+          fontSize: '0.62rem',
+        },
+        '&:hover': {
+          color: alpha('#E0EBFF', 0.98),
+        },
+      }}
+    >
+      <Box
+        sx={{
+          background: alpha(accent, 0.7),
+          borderRadius: '999px',
+          flexShrink: 0,
+          height: '4px',
+          width: '4px',
+        }}
+      />
+      <Typography
+        sx={{
+          color: 'inherit',
+          fontSize: 'inherit',
+          fontWeight: 'inherit',
+          lineHeight: 1.16,
+        }}
+      >
+        {label}
+      </Typography>
+    </ButtonBase>
+  );
+};
+
+const QortOptionRow = ({
+  actionLabel,
+  icon: Icon,
+  label,
+  onClick,
+  theme,
+}: {
+  actionLabel: string;
+  icon: typeof SchoolRoundedIcon;
+  label: string;
+  onClick: () => void;
+  theme: ReturnType<typeof useTheme>;
+}) => (
+  <Box
+    sx={{
+      alignItems: 'center',
+      display: 'grid',
+      gap: 1,
+      gridTemplateColumns: 'auto minmax(0, 1fr) auto',
+      py: 0.7,
+    }}
+  >
+    <Box
+      sx={{
+        alignItems: 'center',
+        background: alpha('#8DB8FF', 0.14),
+        border: `1px solid ${alpha('#8DB8FF', 0.2)}`,
+        borderRadius: '12px',
+        color: alpha('#B9D3FF', 0.96),
+        display: 'flex',
+        height: '38px',
+        justifyContent: 'center',
+        width: '38px',
+      }}
+    >
+      <Icon sx={{ fontSize: '20px' }} />
+    </Box>
+    <Typography
+      sx={{
+        color: alpha(theme.palette.text.primary, 0.9),
+        fontSize: '0.78rem',
+        lineHeight: 1.4,
+      }}
+    >
+      {label}
+    </Typography>
+    <Button
+      onClick={onClick}
+      sx={{
+        ...getBlueTier1ButtonSx(),
+        borderRadius: '10px',
+        fontSize: '0.7rem',
+        fontWeight: 700,
+        px: 1.15,
+        py: 0.7,
+        textTransform: 'none',
+      }}
+    >
+      {actionLabel}
+    </Button>
+  </Box>
+);
diff --git a/src/components/Group/HomeQuickToolsPad.tsx b/src/components/Group/HomeQuickToolsPad.tsx
new file mode 100644
index 00000000..c515a9eb
--- /dev/null
+++ b/src/components/Group/HomeQuickToolsPad.tsx
@@ -0,0 +1,495 @@
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type DragEvent,
+  type MouseEvent,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { Box, ButtonBase, Tooltip, useTheme } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import AccountBalanceWalletRoundedIcon from '@mui/icons-material/AccountBalanceWalletRounded';
+import AddRoundedIcon from '@mui/icons-material/AddRounded';
+import FileDownloadRoundedIcon from '@mui/icons-material/FileDownloadRounded';
+import NotificationsActiveRoundedIcon from '@mui/icons-material/NotificationsActiveRounded';
+import NotificationsOffRoundedIcon from '@mui/icons-material/NotificationsOffRounded';
+import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
+import SpaRoundedIcon from '@mui/icons-material/SpaRounded';
+import { AppsIcon } from '../../assets/Icons/AppsIcon';
+import { MessagingIconFilled } from '../../assets/Icons/MessagingIconFilled';
+import { executeEvent } from '../../utils/events';
+import {
+  dashboardPanelSx,
+  handleDashboardPanelPointerLeave,
+  handleDashboardPanelPointerMove,
+  useDashboardPanelMouseLight,
+} from './dashboardPanelEffects';
+import { QORTINO_DONATION_DRAG_TYPE } from './qortinoDonationEasterEgg';
+
+type HomeQuickToolsPadProps = {
+  fillHeight?: boolean;
+  onOpenApps?: () => void;
+  onOpenChat?: () => void;
+  onOpenSettings?: () => void;
+};
+
+type QuickToolItem = {
+  accent: string;
+  draggable?: boolean;
+  iconOffsetX?: number;
+  iconOffsetY?: number;
+  iconScale?: number;
+  isActive?: boolean;
+  key: string;
+  label: string;
+  onAction: (event: MouseEvent<HTMLElement>) => void;
+  onDragStart?: (event: DragEvent<HTMLElement>) => void;
+  renderIcon: () => React.ReactNode;
+};
+
+const QUICK_TOOL_ICON_SIZE = '1.14rem';
+const QUICK_TOOL_ICON_BOX_SIZE_PX = 20;
+const QUICK_TOOL_DOT_OFFSET = '7px';
+const QUICK_TOOL_DOT_SIZE = '5px';
+const QUICK_TOOL_LED_COLOR = '#8FD8FF';
+const QUICK_TOOLS_PANEL_GRADIENT_DEFAULT = {
+  angle: 197,
+  spread: 76,
+};
+const QUICK_TOOL_GRID_PLACEMENT: Record<
+  string,
+  { gridColumn: string; gridRow: string }
+> = {
+  'lookup-user': { gridColumn: '1', gridRow: '1' },
+  wallets: { gridColumn: '2', gridRow: '1' },
+  apps: { gridColumn: '3', gridRow: '1' },
+  'q-chat': { gridColumn: '4', gridRow: '1' },
+  'backup-wallet': { gridColumn: '1', gridRow: '2' },
+  minting: { gridColumn: '2', gridRow: '2' },
+  notifications: { gridColumn: '3', gridRow: '2' },
+  'qortino-sandbox': { gridColumn: '4', gridRow: '2' },
+};
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.min(max, Math.max(min, value));
+
+const buildQuickToolsPanelGradient = (
+  isDarkMode: boolean,
+  angle: number,
+  spread: number
+) =>
+  isDarkMode
+    ? `linear-gradient(${angle}deg, rgba(28,31,37,0.995) 0%, rgba(23,26,32,1) ${spread}%, rgba(18,21,27,1) 100%)`
+    : `linear-gradient(${angle}deg, rgba(236,240,246,0.97) 0%, rgba(227,232,240,0.985) ${spread}%, rgba(219,225,234,1) 100%)`;
+
+const buildQuickToolsPanelHighlightGradient = (
+  isDarkMode: boolean,
+  angle: number,
+  spread: number
+) => {
+  const overlayMidStop = clamp(Math.round(spread * 0.6), 18, 48);
+  const overlayEndStop = clamp(overlayMidStop + 28, 38, 78);
+
+  return isDarkMode
+    ? `linear-gradient(${angle}deg, rgba(255,255,255,0.032) 0%, rgba(255,255,255,0.012) ${overlayMidStop}%, rgba(255,255,255,0) ${overlayEndStop}%)`
+    : `linear-gradient(${angle}deg, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0.2) ${overlayMidStop}%, rgba(255,255,255,0) ${overlayEndStop}%)`;
+};
+
+export const HomeQuickToolsPad = ({
+  fillHeight = false,
+  onOpenApps,
+  onOpenChat,
+}: HomeQuickToolsPadProps) => {
+  const theme = useTheme();
+  const { t } = useTranslation('core');
+  const panelRef = useDashboardPanelMouseLight<HTMLDivElement>();
+  const transparentDragImageRef = useRef<HTMLCanvasElement | null>(null);
+  const [notificationsMuted, setNotificationsMuted] = useState(false);
+  const isDarkMode = theme.palette.mode === 'dark';
+
+  useEffect(() => {
+    const dragCanvas = document.createElement('canvas');
+    dragCanvas.width = 1;
+    dragCanvas.height = 1;
+    transparentDragImageRef.current = dragCanvas;
+
+    return () => {
+      transparentDragImageRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    let active = true;
+
+    window
+      .sendMessage('getUserSettings', {
+        key: 'disable-push-notifications',
+      })
+      .then((response) => {
+        if (!active || response?.error) return;
+        setNotificationsMuted(Boolean(response));
+      })
+      .catch(() => {});
+
+    return () => {
+      active = false;
+    };
+  }, []);
+
+  const handleToggleNotifications = async () => {
+    const nextValue = !notificationsMuted;
+    setNotificationsMuted(nextValue);
+
+    try {
+      const response = await window.sendMessage('addUserSettings', {
+        keyValue: {
+          key: 'disable-push-notifications',
+          value: nextValue,
+        },
+      });
+
+      if (response?.error) {
+        setNotificationsMuted(!nextValue);
+        return;
+      }
+
+      executeEvent('qortinoContextHint', {
+        data: {
+          message: t('quick_tools_pad.hint_notifications_desktop_only'),
+        },
+      });
+    } catch {
+      setNotificationsMuted(!nextValue);
+    }
+  };
+
+  const panelGradient = useMemo(
+    () =>
+      buildQuickToolsPanelGradient(
+        isDarkMode,
+        QUICK_TOOLS_PANEL_GRADIENT_DEFAULT.angle,
+        QUICK_TOOLS_PANEL_GRADIENT_DEFAULT.spread
+      ),
+    [isDarkMode]
+  );
+
+  const panelHighlightGradient = useMemo(
+    () =>
+      buildQuickToolsPanelHighlightGradient(
+        isDarkMode,
+        QUICK_TOOLS_PANEL_GRADIENT_DEFAULT.angle,
+        QUICK_TOOLS_PANEL_GRADIENT_DEFAULT.spread
+      ),
+    [isDarkMode]
+  );
+
+  const items = useMemo<QuickToolItem[]>(
+    () => [
+      {
+        accent: QUICK_TOOL_LED_COLOR,
+        iconScale: 1.08,
+        key: 'lookup-user',
+        label: t('quick_tools_pad.user_search'),
+        onAction: () => {
+          executeEvent('openUserLookupDrawer', {});
+        },
+        renderIcon: () => (
+          <SearchRoundedIcon sx={{ fontSize: QUICK_TOOL_ICON_SIZE }} />
+        ),
+      },
+      {
+        accent: QUICK_TOOL_LED_COLOR,
+        draggable: true,
+        iconScale: 1.08,
+        key: 'wallets',
+        label: t('quick_tools_pad.wallets'),
+        onAction: () => {
+          executeEvent('openWalletsApp', {});
+        },
+        onDragStart: (event) => {
+          event.dataTransfer.effectAllowed = 'move';
+          event.dataTransfer.setData(QORTINO_DONATION_DRAG_TYPE, 'wallets');
+          event.dataTransfer.setData('text/plain', 'wallets');
+          const dragImage = transparentDragImageRef.current;
+          if (dragImage) {
+            event.dataTransfer.setDragImage(dragImage, 0, 0);
+          }
+        },
+        renderIcon: () => (
+          <AccountBalanceWalletRoundedIcon
+            sx={{ fontSize: QUICK_TOOL_ICON_SIZE }}
+          />
+        ),
+      },
+      {
+        accent: QUICK_TOOL_LED_COLOR,
+        iconScale: 1.04,
+        key: 'minting',
+        label: t('quick_tools_pad.minting'),
+        onAction: () => {
+          executeEvent('qortinoContextHint', {
+            data: {
+              message: t('quick_tools_pad.hint_minting_panel'),
+            },
+          });
+          executeEvent('openMintingPanel', {});
+        },
+        renderIcon: () => (
+          <SpaRoundedIcon sx={{ fontSize: QUICK_TOOL_ICON_SIZE }} />
+        ),
+      },
+      {
+        accent: QUICK_TOOL_LED_COLOR,
+        iconScale: 1.08,
+        key: 'backup-wallet',
+        label: t('quick_tools_pad.backup_wallet'),
+        onAction: () => {
+          executeEvent('openGlobalSnackBar', {
+            message: t('quick_tools_pad.snackbar_backup_wallet'),
+            type: 'info',
+            duration: 5600,
+          });
+          executeEvent('openBackupWallet', {});
+        },
+        renderIcon: () => (
+          <FileDownloadRoundedIcon sx={{ fontSize: QUICK_TOOL_ICON_SIZE }} />
+        ),
+      },
+      {
+        accent: QUICK_TOOL_LED_COLOR,
+        iconOffsetY: -0.15,
+        iconScale: 0.9,
+        key: 'q-chat',
+        label: t('quick_tools_pad.q_chat'),
+        onAction: () => {
+          onOpenChat?.();
+        },
+        renderIcon: () => (
+          <MessagingIconFilled height={20} width={20} color="currentColor" />
+        ),
+      },
+      {
+        accent: QUICK_TOOL_LED_COLOR,
+        iconScale: 1.07,
+        isActive: !notificationsMuted,
+        key: 'notifications',
+        label: notificationsMuted
+          ? t('quick_tools_pad.notifications_enable')
+          : t('quick_tools_pad.notifications_mute'),
+        onAction: () => {
+          void handleToggleNotifications();
+        },
+        renderIcon: () =>
+          notificationsMuted ? (
+            <NotificationsOffRoundedIcon
+              sx={{ fontSize: QUICK_TOOL_ICON_SIZE }}
+            />
+          ) : (
+            <NotificationsActiveRoundedIcon
+              sx={{ fontSize: QUICK_TOOL_ICON_SIZE }}
+            />
+          ),
+      },
+      {
+        accent: QUICK_TOOL_LED_COLOR,
+        iconScale: 0.9,
+        key: 'apps',
+        label: t('quick_tools_pad.apps'),
+        onAction: () => {
+          onOpenApps?.();
+        },
+        renderIcon: () => (
+          <AppsIcon height={20} width={20} color="currentColor" />
+        ),
+      },
+      {
+        accent: QUICK_TOOL_LED_COLOR,
+        iconScale: 1.1,
+        key: 'qortino-sandbox',
+        label: t('quick_tools_pad.extras'),
+        onAction: () => {},
+        renderIcon: () => (
+          <AddRoundedIcon sx={{ fontSize: QUICK_TOOL_ICON_SIZE }} />
+        ),
+      },
+    ],
+    [notificationsMuted, onOpenApps, onOpenChat, t]
+  );
+
+  return (
+    <Box
+      ref={panelRef}
+      sx={{
+        ...dashboardPanelSx(theme, 'base'),
+        borderRadius: '14px',
+        display: 'flex',
+        height: fillHeight ? '100%' : 'auto',
+        minHeight: '164px',
+        padding: '10px',
+        width: '100%',
+      }}
+      onMouseMove={handleDashboardPanelPointerMove}
+      onMouseLeave={handleDashboardPanelPointerLeave}
+    >
+      <Box
+        sx={{
+          background: panelGradient,
+          border: `1px solid ${
+            isDarkMode
+              ? 'rgba(255,255,255,0.068)'
+              : alpha(theme.palette.text.primary, 0.105)
+          }`,
+          borderRadius: '16px',
+          boxShadow: isDarkMode
+            ? 'inset 0 1px 0 rgba(255,255,255,0.055), inset 0 -1px 0 rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.018), 0 0 0 1px rgba(0,0,0,0.18), 0 8px 18px rgba(0,0,0,0.16)'
+            : 'inset 0 1px 0 rgba(255,255,255,0.72), inset 0 -1px 0 rgba(102,112,132,0.2), inset 0 0 0 1px rgba(255,255,255,0.28), 0 0 0 1px rgba(120,132,156,0.08), 0 8px 18px rgba(84,96,120,0.11)',
+          display: 'grid',
+          gap: '7px',
+          gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+          gridTemplateRows: 'repeat(2, minmax(0, 1fr))',
+          minHeight: 0,
+          padding: '6px',
+          position: 'relative',
+          width: '100%',
+          '&::before': {
+            content: '""',
+            position: 'absolute',
+            inset: '1px',
+            borderRadius: 'inherit',
+            pointerEvents: 'none',
+            background: panelHighlightGradient,
+          },
+          '&::after': {
+            content: '""',
+            position: 'absolute',
+            inset: 0,
+            borderRadius: 'inherit',
+            pointerEvents: 'none',
+            boxShadow: isDarkMode
+              ? 'inset 1px 1px 0 rgba(255,255,255,0.012), inset -1px -1px 0 rgba(0,0,0,0.28)'
+              : 'inset 1px 1px 0 rgba(255,255,255,0.36), inset -1px -1px 0 rgba(130,142,166,0.12)',
+          },
+        }}
+      >
+        {items.map((item) => (
+          <Tooltip
+            key={item.key}
+            disableHoverListener={!item.label}
+            enterDelay={350}
+            title={item.label}
+          >
+            <ButtonBase
+              draggable={item.draggable}
+              onClick={(event) => item.onAction(event)}
+              onDragStart={item.onDragStart}
+              sx={{
+                ...(QUICK_TOOL_GRID_PLACEMENT[item.key] ?? {}),
+                alignItems: 'center',
+                background: isDarkMode
+                  ? 'linear-gradient(145deg, rgba(53,58,68,0.99) 0%, rgba(41,45,54,1) 48%, rgba(30,34,41,1) 100%)'
+                  : 'linear-gradient(145deg, rgba(251,253,255,0.99) 0%, rgba(232,237,245,0.99) 48%, rgba(216,223,234,1) 100%)',
+                border: `1px solid ${
+                  isDarkMode
+                    ? alpha(item.accent, item.isActive ? 0.16 : 0.06)
+                    : alpha(theme.palette.text.primary, 0.072)
+                }`,
+                borderRadius: '12px',
+                boxShadow: isDarkMode
+                  ? `inset 0 1px 0 rgba(255,255,255,0.075), inset 0 0 0 1px rgba(255,255,255,0.012), inset 0 -1px 0 rgba(0,0,0,0.44), inset -1px -1px 0 rgba(0,0,0,0.18), 0 4px 8px rgba(0,0,0,0.17), 0 0 0 1px ${alpha(item.accent, item.isActive ? 0.03 : 0.012)}`
+                  : `inset 0 1px 0 rgba(255,255,255,0.86), inset 0 0 0 1px rgba(255,255,255,0.24), inset 0 -1px 0 rgba(104,116,140,0.22), inset -1px -1px 0 rgba(146,158,182,0.14), 0 4px 8px rgba(94,108,132,0.11)`,
+                color: isDarkMode
+                  ? alpha('#F6F8FB', item.isActive ? 0.96 : 0.88)
+                  : alpha(
+                      theme.palette.text.primary,
+                      item.isActive ? 0.92 : 0.84
+                    ),
+                display: 'flex',
+                height: '100%',
+                justifyContent: 'center',
+                minHeight: 0,
+                position: 'relative',
+                transition:
+                  'transform 90ms ease, filter 120ms ease, border-color 140ms ease, box-shadow 140ms ease, color 140ms ease',
+                width: '100%',
+                '&::before': {
+                  content: '""',
+                  position: 'absolute',
+                  inset: '1px',
+                  borderRadius: 'inherit',
+                  pointerEvents: 'none',
+                  background: isDarkMode
+                    ? 'linear-gradient(145deg, rgba(255,255,255,0.052) 0%, rgba(255,255,255,0.02) 24%, rgba(255,255,255,0) 58%)'
+                    : 'linear-gradient(145deg, rgba(255,255,255,0.58) 0%, rgba(255,255,255,0.22) 28%, rgba(255,255,255,0) 58%)',
+                  opacity: item.isActive ? 1 : 0.92,
+                },
+                '&::after': {
+                  backgroundColor: alpha(
+                    item.accent,
+                    item.isActive ? 0.96 : 0.56
+                  ),
+                  borderRadius: '50%',
+                  boxShadow: isDarkMode
+                    ? `0 0 0 1px rgba(8,10,14,0.24), 0 0 4px ${alpha(item.accent, item.isActive ? 0.18 : 0.1)}`
+                    : `0 0 0 1px rgba(255,255,255,0.54), 0 0 3px ${alpha(item.accent, item.isActive ? 0.14 : 0.08)}`,
+                  content: '""',
+                  height: QUICK_TOOL_DOT_SIZE,
+                  opacity: item.isActive ? 0.95 : 0.68,
+                  position: 'absolute',
+                  right: QUICK_TOOL_DOT_OFFSET,
+                  top: QUICK_TOOL_DOT_OFFSET,
+                  width: QUICK_TOOL_DOT_SIZE,
+                },
+                '&:hover': {
+                  filter: 'brightness(1.05)',
+                  '&::after': {
+                    backgroundColor: '#7cc7ff',
+                    boxShadow:
+                      '0 0 6px rgba(124, 199, 255, 0.8), 0 0 12px rgba(124, 199, 255, 0.4)',
+                    opacity: 1,
+                  },
+                },
+                '&:active': {
+                  boxShadow:
+                    'inset 2px 2px 6px rgba(0, 0, 0, 0.7), inset -1px -1px 3px rgba(255, 255, 255, 0.04)',
+                  transform: 'scale(0.97)',
+                  '&::after': {
+                    boxShadow:
+                      '0 0 4px rgba(124, 199, 255, 1), 0 0 8px rgba(124, 199, 255, 0.6)',
+                  },
+                },
+              }}
+            >
+              <Box
+                sx={{
+                  alignItems: 'center',
+                  color: 'inherit',
+                  display: 'inline-flex',
+                  height: `${QUICK_TOOL_ICON_BOX_SIZE_PX}px`,
+                  justifyContent: 'center',
+                  lineHeight: 1,
+                  overflow: 'visible',
+                  width: `${QUICK_TOOL_ICON_BOX_SIZE_PX}px`,
+                }}
+              >
+                <Box
+                  sx={{
+                    alignItems: 'center',
+                    display: 'inline-flex',
+                    justifyContent: 'center',
+                    transform: `translate(${item.iconOffsetX ?? 0}px, ${
+                      item.iconOffsetY ?? 0
+                    }px) scale(${item.iconScale ?? 1})`,
+                    transformOrigin: 'center',
+                  }}
+                >
+                  {item.renderIcon()}
+                </Box>
+              </Box>
+            </ButtonBase>
+          </Tooltip>
+        ))}
+      </Box>
+    </Box>
+  );
+};
diff --git a/src/components/Group/ListOfGroupPromotions.tsx b/src/components/Group/ListOfGroupPromotions.tsx
index 094774db..4183cdce 100644
--- a/src/components/Group/ListOfGroupPromotions.tsx
+++ b/src/components/Group/ListOfGroupPromotions.tsx
@@ -46,6 +46,10 @@ import { getFee } from '../../background/background.ts';
 import { useAtom, useSetAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
 import { Label } from '../../styles/App-styles.ts';
+import {
+  GROUP_ACTIVITY_BLUE,
+  getBlueTier1ButtonSx,
+} from './groupActivityColorSystem';
 import {
   TIME_WEEKS_1_IN_MILLISECONDS,
   TIME_MINUTES_30_IN_MILLISECONDS,
@@ -74,9 +78,11 @@ export function getGroupId(str) {
 
 export const ListOfGroupPromotions = ({
   compact = false,
+  compactViewportHeight,
   onCountChange,
 }: {
   compact?: boolean;
+  compactViewportHeight?: number;
   onCountChange?: (count: number) => void;
 } = {}) => {
   const [popoverAnchor, setPopoverAnchor] = useState(null);
@@ -102,6 +108,21 @@ export const ListOfGroupPromotions = ({
   const { show } = useContext(QORTAL_APP_CONTEXT);
   const setTxList = useSetAtom(txListAtom);
   const theme = useTheme();
+  const compactViewportHeightCss =
+    compactViewportHeight != null ? `${compactViewportHeight}px` : undefined;
+  const hasFixedCompactViewport = compact && compactViewportHeightCss != null;
+  const groupActivityAccentTextColor = theme.palette.getContrastText(
+    GROUP_ACTIVITY_BLUE.primary
+  );
+  const promotionButtonSx = {
+    borderRadius: '50px',
+    color: groupActivityAccentTextColor,
+    fontWeight: 600,
+    px: 2,
+    py: 1,
+    textTransform: 'none',
+    ...getBlueTier1ButtonSx(),
+  } as const;
   const { t } = useTranslation([
     'auth',
     'core',
@@ -411,12 +432,16 @@ export const ListOfGroupPromotions = ({
   const promotionsList = (
     <Box
       sx={{
-        bgcolor: 'background.paper',
+        bgcolor: compact ? 'transparent' : 'background.paper',
         borderRadius: compact ? 0 : '16px',
         display: 'flex',
         flexDirection: 'column',
+        flex: hasFixedCompactViewport ? 1 : undefined,
+        height: hasFixedCompactViewport ? '100%' : undefined,
         maxHeight: compact ? undefined : '700px',
         maxWidth: compact ? '100%' : '90%',
+        minHeight: hasFixedCompactViewport ? 0 : undefined,
+        overflow: hasFixedCompactViewport ? 'hidden' : undefined,
         padding: compact ? '16px 0' : '24px 0',
         width: compact ? '100%' : '750px',
         border: compact
@@ -463,7 +488,7 @@ export const ListOfGroupPromotions = ({
 
       <div
         style={{
-          height: '600px',
+          height: hasFixedCompactViewport ? '100%' : '600px',
           position: 'relative',
           display: 'flex',
           flexDirection: 'column',
@@ -902,8 +927,10 @@ export const ListOfGroupPromotions = ({
         alignItems: compact ? 'stretch' : 'center',
         display: 'flex',
         flexDirection: 'column',
-        justifyContent: 'center',
+        height: hasFixedCompactViewport ? compactViewportHeightCss : undefined,
+        justifyContent: compact ? 'flex-start' : 'center',
         marginTop: compact ? '0' : '20px',
+        minHeight: hasFixedCompactViewport ? compactViewportHeightCss : undefined,
         width: '100%',
       }}
     >
@@ -963,15 +990,7 @@ export const ListOfGroupPromotions = ({
           <Button
             variant="contained"
             onClick={() => setIsShowModal(true)}
-            sx={{
-              textTransform: 'none',
-              fontWeight: 600,
-              borderRadius: '10px',
-              px: 2,
-              py: 1,
-              boxShadow: 'none',
-              '&:hover': { boxShadow: '0 2px 12px rgba(0,0,0,0.2)' },
-            }}
+            sx={promotionButtonSx}
           >
             {t('group:action.add_promotion', {
               postProcess: 'capitalizeFirstChar',
@@ -1006,15 +1025,7 @@ export const ListOfGroupPromotions = ({
                 <Button
                   variant="contained"
                   onClick={() => setIsShowModal(true)}
-                  sx={{
-                    textTransform: 'none',
-                    fontWeight: 600,
-                    borderRadius: '10px',
-                    px: 2,
-                    py: 1,
-                    boxShadow: 'none',
-                    '&:hover': { boxShadow: '0 2px 12px rgba(0,0,0,0.2)' },
-                  }}
+                  sx={promotionButtonSx}
                 >
                   {t('group:action.add_promotion', {
                     postProcess: 'capitalizeFirstChar',
diff --git a/src/components/Group/ListOfMembers.tsx b/src/components/Group/ListOfMembers.tsx
index 06b3ad37..8822fa0a 100644
--- a/src/components/Group/ListOfMembers.tsx
+++ b/src/components/Group/ListOfMembers.tsx
@@ -34,6 +34,7 @@ const ListOfMembers = ({
   isAdmin,
   isOwner,
   show,
+  ownerAddress
 }) => {
   const [popoverAnchor, setPopoverAnchor] = useState(null); // Track which list item the popover is anchored to
   const [openPopoverIndex, setOpenPopoverIndex] = useState(null); // Track which list item has the popover open
@@ -403,16 +404,20 @@ const ListOfMembers = ({
                   id={member?.primaryName || member?.member}
                   primary={member?.primaryName || member?.member}
                 />
-                {member?.isAdmin && (
+                     {(member?.isAdmin || member?.member === ownerAddress) && (
                   <Typography
                     sx={{
                       color: theme.palette.text.primary,
                       marginLeft: 'auto',
                     }}
                   >
-                    {t('core:admin', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
+                    {member?.member === ownerAddress
+                      ? t('group:group.owner', {
+                          postProcess: 'capitalizeFirstChar',
+                        })
+                      : t('core:admin', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
                   </Typography>
                 )}
               </ListItemButton>
diff --git a/src/components/Group/ListOfThreadPostsWatched.tsx b/src/components/Group/ListOfThreadPostsWatched.tsx
deleted file mode 100644
index ffb2fbdc..00000000
--- a/src/components/Group/ListOfThreadPostsWatched.tsx
+++ /dev/null
@@ -1,208 +0,0 @@
-import { useEffect, useState } from 'react';
-import List from '@mui/material/List';
-import ListItem from '@mui/material/ListItem';
-import ListItemButton from '@mui/material/ListItemButton';
-import ListItemText from '@mui/material/ListItemText';
-import IconButton from '@mui/material/IconButton';
-import { executeEvent } from '../../utils/events';
-import { Box, Typography, useTheme } from '@mui/material';
-import { Spacer } from '../../common/Spacer';
-import { CustomLoader } from '../../common/CustomLoader';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import { useTranslation } from 'react-i18next';
-
-export const ListOfThreadPostsWatched = () => {
-  const [posts, setPosts] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const theme = useTheme();
-  const { t } = useTranslation([
-    'auth',
-    'core',
-    'group',
-    'question',
-    'tutorial',
-  ]);
-
-  const getPosts = async () => {
-    try {
-      await new Promise((res, rej) => {
-        window
-          .sendMessage('getThreadActivity', {})
-          .then((response) => {
-            if (!response?.error) {
-              if (!response) {
-                res(null);
-                return;
-              }
-              const uniquePosts = response.reduce((acc, current) => {
-                const x = acc.find(
-                  (item) => item?.thread?.threadId === current?.thread?.threadId
-                );
-                if (!x) {
-                  return acc.concat([current]);
-                } else {
-                  return acc;
-                }
-              }, []);
-              setPosts(uniquePosts);
-              res(uniquePosts);
-              return;
-            }
-            rej(response.error);
-          })
-          .catch((error) => {
-            rej(
-              error.message ||
-                t('core:message.error.generic', {
-                  postProcess: 'capitalizeFirstChar',
-                })
-            );
-          });
-      });
-    } catch (error) {
-      console.log(error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    getPosts();
-  }, []);
-
-  return (
-    <Box
-      sx={{
-        alignItems: 'center',
-        display: 'flex',
-        flexDirection: 'column',
-        width: '100%',
-      }}
-    >
-      <Box
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          padding: '0px 20px',
-          width: '322px',
-        }}
-      >
-        <Typography
-          sx={{
-            fontSize: '13px',
-            fontWeight: 600,
-          }}
-        >
-          {t('group:thread_posts', {
-            postProcess: 'capitalizeFirstChar',
-          })}
-          :
-        </Typography>
-
-        <Spacer height="10px" />
-      </Box>
-
-      <Box
-        sx={{
-          bgcolor: 'background.paper',
-          borderRadius: '19px',
-          display: 'flex',
-          flexDirection: 'column',
-          height: '250px',
-          padding: '20px',
-          width: '322px',
-        }}
-      >
-        {loading && posts.length === 0 && (
-          <Box
-            sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              width: '100%',
-            }}
-          >
-            <CustomLoader />
-          </Box>
-        )}
-
-        {!loading && posts.length === 0 && (
-          <Box
-            sx={{
-              alignItems: 'center',
-              display: 'flex',
-              height: '100%',
-              justifyContent: 'center',
-              width: '100%',
-            }}
-          >
-            <Typography
-              sx={{
-                fontSize: '11px',
-                fontWeight: 400,
-                color: 'rgba(255, 255, 255, 0.2)',
-              }}
-            >
-              {t('group:message.generic.no_display', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Typography>
-          </Box>
-        )}
-
-        {posts?.length > 0 && (
-          <List
-            className="scrollable-container"
-            sx={{
-              bgcolor: 'background.paper',
-              maxHeight: '300px',
-              maxWidth: 360,
-              overflow: 'auto',
-              width: '100%',
-            }}
-          >
-            {posts?.map((post) => {
-              return (
-                <ListItem
-                  key={post?.thread?.threadId}
-                  onClick={() => {
-                    executeEvent('openThreadNewPost', {
-                      data: post,
-                    });
-                  }}
-                  disablePadding
-                  secondaryAction={
-                    <IconButton
-                      edge="end"
-                      aria-label={t('core:comment_other', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                      sx={{
-                        bgcolor: theme.palette.background.default,
-                        color: theme.palette.text.primary,
-                      }}
-                    >
-                      <VisibilityIcon
-                        sx={{
-                          color: 'red',
-                        }}
-                      />
-                    </IconButton>
-                  }
-                >
-                  <ListItemButton disableRipple role={undefined} dense>
-                    <ListItemText
-                      primary={t('core:new_post_in', {
-                        title: post?.thread?.threadData?.title,
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    />
-                  </ListItemButton>
-                </ListItem>
-              );
-            })}
-          </List>
-        )}
-      </Box>
-    </Box>
-  );
-};
diff --git a/src/components/Group/ManageMembers.tsx b/src/components/Group/ManageMembers.tsx
index ac2144a8..960ea9dc 100644
--- a/src/components/Group/ManageMembers.tsx
+++ b/src/components/Group/ManageMembers.tsx
@@ -394,6 +394,7 @@ export const ManageMembers = ({
                 isAdmin={isAdmin}
                 isOwner={isOwner}
                 show={show}
+                ownerAddress={groupInfo?.owner}
               />
             </Box>
           )}
diff --git a/src/components/Group/QortinoMusicPlayer.tsx b/src/components/Group/QortinoMusicPlayer.tsx
new file mode 100644
index 00000000..084c3260
--- /dev/null
+++ b/src/components/Group/QortinoMusicPlayer.tsx
@@ -0,0 +1,789 @@
+import {
+  Box,
+  ButtonBase,
+  CircularProgress,
+  IconButton,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { alpha, type Theme } from '@mui/material/styles';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import DownloadRoundedIcon from '@mui/icons-material/DownloadRounded';
+import PauseRoundedIcon from '@mui/icons-material/PauseRounded';
+import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
+import RepeatOneRoundedIcon from '@mui/icons-material/RepeatOneRounded';
+import RepeatRoundedIcon from '@mui/icons-material/RepeatRounded';
+import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
+import SkipNextRoundedIcon from '@mui/icons-material/SkipNextRounded';
+import SkipPreviousRoundedIcon from '@mui/icons-material/SkipPreviousRounded';
+import {
+  type PointerEvent as ReactPointerEvent,
+  type RefObject,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import type { QortinoLayoutDebugSettings } from './qortinoLayoutDebug';
+import { GROUP_ACTIVITY_BLUE } from './groupActivityColorSystem';
+
+const MUSIC_STATUS_SLOT_HEIGHT_PX = 20;
+
+export type QortinoMusicTrack = {
+  artist: string;
+  coverColors: [string, string, string];
+  id: string;
+  length: string;
+  name: string;
+  title: string;
+};
+
+export type RepeatMode = 'all' | 'one';
+
+const formatPlaybackTime = (seconds: number) => {
+  const safeSeconds = Math.max(0, Math.floor(seconds));
+  const minutes = Math.floor(safeSeconds / 60);
+  const remainder = safeSeconds % 60;
+  return `${minutes}:${String(remainder).padStart(2, '0')}`;
+};
+
+const truncateTrackLabel = (value: string, maxLength = 30) => {
+  const trimmedValue = value.trim();
+  if (!trimmedValue) return value;
+  if (trimmedValue.length <= maxLength) return trimmedValue;
+  return `${trimmedValue.slice(0, maxLength).trimEnd()} (...)`;
+};
+
+const smallTransportButtonSx = (theme: Theme) => ({
+  alignItems: 'center',
+  background:
+    theme.palette.mode === 'dark'
+      ? 'rgba(255,255,255,0.04)'
+      : 'rgba(20,24,32,0.045)',
+  border: `1px solid ${alpha(
+    theme.palette.common.white,
+    theme.palette.mode === 'dark' ? 0.06 : 0.12
+  )}`,
+  borderRadius: '9px',
+  color: alpha('#9BC2FF', 0.94),
+  display: 'inline-flex',
+  height: '24px',
+  justifyContent: 'center',
+  transition: 'transform 120ms ease, border-color 140ms ease',
+  width: '24px',
+  '&:hover': {
+    borderColor: alpha('#8DB8FF', 0.2),
+    transform: 'translateY(-1px)',
+  },
+});
+
+export const MusicCoverArt = ({
+  isSpinning = false,
+  size,
+  track,
+}: {
+  isSpinning?: boolean;
+  size: number;
+  track: QortinoMusicTrack;
+}) => (
+  <Box
+    sx={{
+      alignItems: 'center',
+      background: `radial-gradient(circle at 30% 28%, ${alpha(
+        track.coverColors[2],
+        0.94
+      )} 0%, ${alpha(track.coverColors[0], 0.88)} 34%, ${alpha(
+        track.coverColors[1],
+        0.94
+      )} 100%)`,
+      border: `1px solid ${alpha('#D7E7FF', 0.14)}`,
+      borderRadius: '50%',
+      boxShadow: `0 14px 26px ${alpha(track.coverColors[1], 0.28)}, inset 0 1px 0 ${alpha(
+        '#fff',
+        0.22
+      )}`,
+      display: 'flex',
+      height: `${size}px`,
+      justifyContent: 'center',
+      overflow: 'hidden',
+      position: 'relative',
+      transformOrigin: '50% 50%',
+      transform: isSpinning ? 'rotate(12deg)' : 'rotate(0deg)',
+      transition: 'filter 180ms ease, transform 280ms ease',
+      width: `${size}px`,
+      '&::before': {
+        background: `linear-gradient(135deg, ${alpha('#ffffff', 0.32)} 0%, ${alpha(
+          '#ffffff',
+          0
+        )} 48%)`,
+        content: '""',
+        inset: '10%',
+        position: 'absolute',
+        transform: 'rotate(-18deg)',
+      },
+      '&::after': {
+        background: alpha('#05070B', 0.22),
+        borderRadius: '50%',
+        content: '""',
+        height: `${Math.round(size * 0.46)}px`,
+        left: '50%',
+        position: 'absolute',
+        top: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: `${Math.round(size * 0.46)}px`,
+      },
+    }}
+  >
+    <Box
+      sx={{
+        background: alpha('#EAF2FF', 0.9),
+        borderRadius: '50%',
+        boxShadow: `0 0 0 2px ${alpha('#0B1119', 0.32)}`,
+        height: `${Math.max(8, Math.round(size * 0.08))}px`,
+        position: 'relative',
+        width: `${Math.max(8, Math.round(size * 0.08))}px`,
+        zIndex: 1,
+      }}
+    />
+  </Box>
+);
+
+type EarbumpMusicProgressMeterProps = {
+  audioRef: RefObject<HTMLAudioElement | null>;
+  durationLabel: string;
+  durationSeconds: number;
+  isTrackPlayable: boolean;
+  onSeekInteraction?: () => void;
+  playbackUrl: string;
+  theme: Theme;
+  trackId: string;
+};
+
+const EarbumpMusicProgressMeter = memo(function EarbumpMusicProgressMeter({
+  audioRef,
+  durationLabel,
+  durationSeconds,
+  isTrackPlayable,
+  onSeekInteraction,
+  playbackUrl,
+  theme,
+  trackId,
+}: EarbumpMusicProgressMeterProps) {
+  const barRef = useRef<HTMLDivElement | null>(null);
+  const elapsedLabelRef = useRef<HTMLSpanElement | null>(null);
+  const progressFillRef = useRef<HTMLDivElement | null>(null);
+  const rafPendingRef = useRef(false);
+  const rafIdRef = useRef(0);
+  const lastElapsedSecondRef = useRef(-1);
+
+  const syncProgressDom = useCallback(
+    (currentTime: number, explicitProgress?: number) => {
+      const safeTime = Number.isFinite(currentTime)
+        ? Math.max(0, currentTime)
+        : 0;
+      const liveDur =
+        audioRef.current && audioRef.current.duration > 0
+          ? audioRef.current.duration
+          : durationSeconds > 0
+            ? durationSeconds
+            : 0;
+      const rawProgress =
+        typeof explicitProgress === 'number'
+          ? explicitProgress
+          : liveDur > 0
+            ? safeTime / liveDur
+            : 0;
+      const clampedProgress = Math.min(Math.max(rawProgress, 0), 1);
+      const elapsedSecond = Math.floor(safeTime);
+
+      if (elapsedLabelRef.current && lastElapsedSecondRef.current !== elapsedSecond) {
+        elapsedLabelRef.current.textContent = formatPlaybackTime(safeTime);
+        lastElapsedSecondRef.current = elapsedSecond;
+      }
+
+      if (progressFillRef.current) {
+        progressFillRef.current.style.transform = `scaleX(${clampedProgress})`;
+      }
+    },
+    [audioRef, durationSeconds]
+  );
+
+  useEffect(() => {
+    lastElapsedSecondRef.current = -1;
+    syncProgressDom(0, 0);
+  }, [playbackUrl, syncProgressDom, trackId]);
+
+  useEffect(() => {
+    const audio = audioRef.current;
+    if (!audio) {
+      return undefined;
+    }
+
+    const flush = () => {
+      rafPendingRef.current = false;
+      const t = Number.isFinite(audio.currentTime) ? audio.currentTime : 0;
+      syncProgressDom(t);
+    };
+
+    const onTimeUpdate = () => {
+      if (rafPendingRef.current) {
+        return;
+      }
+      rafPendingRef.current = true;
+      rafIdRef.current = requestAnimationFrame(flush);
+    };
+
+    audio.addEventListener('timeupdate', onTimeUpdate);
+    flush();
+
+    return () => {
+      audio.removeEventListener('timeupdate', onTimeUpdate);
+      cancelAnimationFrame(rafIdRef.current);
+      rafPendingRef.current = false;
+    };
+  }, [audioRef, playbackUrl, syncProgressDom, trackId]);
+
+  const seekAtClientX = useCallback(
+    (clientX: number) => {
+      const audio = audioRef.current;
+      const progressBar = barRef.current;
+      if (!audio || !progressBar || !isTrackPlayable || durationSeconds <= 0) {
+        return;
+      }
+
+      const rect = progressBar.getBoundingClientRect();
+      if (rect.width <= 0) {
+        return;
+      }
+
+      const ratio = Math.min(
+        Math.max((clientX - rect.left) / rect.width, 0),
+        1
+      );
+      const nextTime = ratio * durationSeconds;
+
+      audio.currentTime = nextTime;
+      syncProgressDom(nextTime, ratio);
+      onSeekInteraction?.();
+    },
+    [
+      audioRef,
+      durationSeconds,
+      isTrackPlayable,
+      onSeekInteraction,
+      syncProgressDom,
+    ]
+  );
+
+  const handleProgressPointerDown = useCallback(
+    (event: ReactPointerEvent<HTMLDivElement>) => {
+      if (!isTrackPlayable || durationSeconds <= 0) {
+        return;
+      }
+
+      event.preventDefault();
+      seekAtClientX(event.clientX);
+
+      const handleWindowPointerMove = (moveEvent: PointerEvent) => {
+        seekAtClientX(moveEvent.clientX);
+      };
+
+      const handleWindowPointerUp = () => {
+        window.removeEventListener('pointermove', handleWindowPointerMove);
+        window.removeEventListener('pointerup', handleWindowPointerUp);
+      };
+
+      window.addEventListener('pointermove', handleWindowPointerMove);
+      window.addEventListener('pointerup', handleWindowPointerUp, {
+        once: true,
+      });
+    },
+    [durationSeconds, isTrackPlayable, seekAtClientX]
+  );
+
+  const isDarkMode = theme.palette.mode === 'dark';
+  const progressTrackSx = useMemo(() => {
+    const trackInset = alpha(
+      isDarkMode ? theme.palette.common.white : theme.palette.common.black,
+      isDarkMode ? 0.1 : 0.07
+    );
+    const trackMid = alpha(
+      isDarkMode ? theme.palette.common.white : theme.palette.text.primary,
+      isDarkMode ? 0.08 : 0.09
+    );
+    const trackOuter = alpha(theme.palette.divider, isDarkMode ? 0.35 : 0.65);
+    return {
+      background: `linear-gradient(180deg, ${trackMid} 0%, ${trackInset} 100%)`,
+      border: `1px solid ${trackOuter}`,
+      borderRadius: '999px',
+      boxSizing: 'border-box',
+      boxShadow:
+        theme.palette.mode === 'dark'
+          ? `inset 0 1px 0 ${alpha(theme.palette.common.white, 0.06)}`
+          : `inset 0 1px 0 ${alpha(theme.palette.common.white, 0.72)}`,
+      height: '5px',
+      overflow: 'hidden',
+      position: 'relative',
+      width: '100%',
+    } as const;
+  }, [
+    isDarkMode,
+    theme.palette.common.black,
+    theme.palette.common.white,
+    theme.palette.divider,
+    theme.palette.mode,
+    theme.palette.text.primary,
+  ]);
+
+  const progressFillSx = useMemo(() => {
+    const glowStrength = isDarkMode ? 0.26 : 0.18;
+    return {
+      background: `linear-gradient(90deg, ${GROUP_ACTIVITY_BLUE.gradientTop} 0%, ${GROUP_ACTIVITY_BLUE.primary} 54%, ${GROUP_ACTIVITY_BLUE.hover} 100%)`,
+      borderRadius: 'inherit',
+      boxShadow: `0 0 10px ${alpha(GROUP_ACTIVITY_BLUE.primary, glowStrength)}`,
+      height: '100%',
+      transform: 'scaleX(0)',
+      transformOrigin: '0 50%',
+      width: '100%',
+      willChange: 'transform',
+    } as const;
+  }, [isDarkMode]);
+
+  return (
+    <>
+      <Typography
+        sx={{
+          color: alpha(theme.palette.text.secondary, 0.68),
+          fontSize: '0.55rem',
+          fontWeight: 600,
+          whiteSpace: 'nowrap',
+        }}
+      >
+        <span ref={elapsedLabelRef}>0:00</span>
+      </Typography>
+      <Box
+        ref={barRef}
+        onPointerDown={handleProgressPointerDown}
+        sx={{
+          alignItems: 'center',
+          cursor:
+            isTrackPlayable && durationSeconds > 0 ? 'pointer' : 'default',
+          display: 'flex',
+          height: '12px',
+          position: 'relative',
+          touchAction: 'none',
+        }}
+      >
+        <Box sx={progressTrackSx}>
+          <Box ref={progressFillRef} sx={progressFillSx} />
+        </Box>
+      </Box>
+      <Typography
+        sx={{
+          color: alpha(theme.palette.text.secondary, 0.68),
+          fontSize: '0.55rem',
+          fontWeight: 600,
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {durationLabel}
+      </Typography>
+    </>
+  );
+});
+
+type QortinoMusicPlayerProps = {
+  activeTrack: QortinoMusicTrack;
+  activeTrackDurationSeconds: number;
+  activeTrackPlaybackUrl: string;
+  activeTrackReadyPercent: number;
+  audioRef: RefObject<HTMLAudioElement | null>;
+  isTrackLoadError: boolean;
+  isTrackPeerStarved: boolean;
+  isTrackPlayable: boolean;
+  isTrackPreparing: boolean;
+  isTrackReady: boolean;
+  musicPlaying: boolean;
+  musicStatusSlotMessage: string | null;
+  onClearStreamError: () => void;
+  onClose: () => void;
+  onCycleTrack: (direction: 'next' | 'previous') => void;
+  onOpenSearch: () => void;
+  onToggleRepeatMode: () => void;
+  onToggleTrack: (trackId: string) => void;
+  qortinoLayoutDebug: QortinoLayoutDebugSettings;
+  repeatMode: RepeatMode;
+  title: string;
+};
+
+export const QortinoMusicPlayer = memo(function QortinoMusicPlayer({
+  activeTrack,
+  activeTrackDurationSeconds,
+  activeTrackPlaybackUrl,
+  activeTrackReadyPercent,
+  audioRef,
+  isTrackLoadError,
+  isTrackPeerStarved,
+  isTrackPlayable,
+  isTrackPreparing,
+  isTrackReady,
+  musicPlaying,
+  musicStatusSlotMessage,
+  onClearStreamError,
+  onClose,
+  onCycleTrack,
+  onOpenSearch,
+  onToggleRepeatMode,
+  onToggleTrack,
+  qortinoLayoutDebug,
+  repeatMode,
+  title,
+}: QortinoMusicPlayerProps) {
+  const theme = useTheme();
+  const musicControlRingColor = isTrackLoadError
+    ? alpha('#FF8F8F', 0.94)
+    : isTrackPeerStarved
+      ? alpha('#F6C76E', 0.96)
+      : isTrackPlayable
+        ? alpha('#A9CAFF', 0.92)
+        : alpha('#84B2FF', 0.94);
+  const musicControlRingTrackColor = isTrackLoadError
+    ? alpha('#FF8F8F', 0.2)
+    : isTrackPeerStarved
+      ? alpha('#F6C76E', 0.2)
+      : alpha('#DCE8FF', 0.14);
+  const musicControlShowsPause =
+    musicPlaying && isTrackPlayable && !isTrackLoadError;
+  const musicControlShowsDownload =
+    Boolean(activeTrack.id) && isTrackPreparing && !isTrackPlayable;
+  const musicControlShowsReadyPulse =
+    Boolean(activeTrack.id) &&
+    !musicPlaying &&
+    isTrackPlayable &&
+    !isTrackLoadError;
+  const progressRowOffsetY = qortinoLayoutDebug.progressOffsetY + 12;
+  const progressRowReservedTop = Math.max(progressRowOffsetY, 0);
+  const progressRowVisualOffsetY = Math.min(progressRowOffsetY, 0);
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.02 }}>
+      <Box
+        sx={{
+          alignItems: 'center',
+          display: 'flex',
+          justifyContent: 'space-between',
+          transform: `translateY(${qortinoLayoutDebug.musicHeaderOffsetY - 1}px)`,
+        }}
+      >
+        <IconButton
+          onClick={onOpenSearch}
+          size="small"
+          sx={{
+            color: alpha('#9FC4FF', 0.92),
+            height: '30px',
+            width: '30px',
+          }}
+        >
+          <SearchRoundedIcon sx={{ fontSize: '18px' }} />
+        </IconButton>
+        <Typography
+          sx={{
+            color: alpha(theme.palette.text.secondary, 0.82),
+            fontSize: '0.65rem',
+            fontWeight: 700,
+            letterSpacing: '0.1em',
+            textTransform: 'uppercase',
+          }}
+        >
+          {title}
+        </Typography>
+        <IconButton
+          onClick={onClose}
+          size="small"
+          sx={{
+            color: alpha(theme.palette.text.secondary, 0.82),
+            height: '30px',
+            width: '30px',
+          }}
+        >
+          <CloseRoundedIcon sx={{ fontSize: '18px' }} />
+        </IconButton>
+      </Box>
+
+      <Box
+        sx={{
+          alignItems: 'center',
+          display: 'grid',
+          gap: '14px',
+          gridTemplateColumns: '28px minmax(0, 1fr) 28px',
+        }}
+      >
+        <ButtonBase
+          onClick={() => onCycleTrack('previous')}
+          sx={{
+            ...smallTransportButtonSx(theme),
+            transform: `translateY(${qortinoLayoutDebug.prevNextOffsetY - 8}px)`,
+          }}
+        >
+          <SkipPreviousRoundedIcon sx={{ fontSize: '15px' }} />
+        </ButtonBase>
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1.08,
+          }}
+        >
+          <ButtonBase
+            onClick={() => onToggleTrack(activeTrack.id)}
+            sx={{
+              alignItems: 'center',
+              borderRadius: '50%',
+              display: 'flex',
+              height: '110px',
+              isolation: 'isolate',
+              justifyContent: 'center',
+              position: 'relative',
+              transform: `translateY(${qortinoLayoutDebug.vinylOffsetY + 12}px)`,
+              width: '110px',
+            }}
+          >
+            <MusicCoverArt
+              isSpinning={musicPlaying && isTrackReady && !isTrackLoadError}
+              size={110}
+              track={activeTrack}
+            />
+            {activeTrack.id && !isTrackReady ? (
+              <Box
+                sx={{
+                  height: '50px',
+                  left: '50%',
+                  pointerEvents: 'none',
+                  position: 'absolute',
+                  top: '50%',
+                  transform: 'translate(-50%, -50%)',
+                  width: '50px',
+                  zIndex: 2,
+                }}
+              >
+                <CircularProgress
+                  size={50}
+                  thickness={4.1}
+                  value={100}
+                  variant="determinate"
+                  sx={{
+                    color: musicControlRingTrackColor,
+                    inset: 0,
+                    position: 'absolute',
+                  }}
+                />
+                {isTrackPreparing && activeTrackReadyPercent <= 0 ? (
+                  <CircularProgress
+                    size={50}
+                    thickness={4.1}
+                    variant="indeterminate"
+                    sx={{
+                      animationDuration: '1.8s',
+                      color: musicControlRingColor,
+                      inset: 0,
+                      position: 'absolute',
+                      '& .MuiCircularProgress-circle': {
+                        strokeLinecap: 'round',
+                      },
+                    }}
+                  />
+                ) : (
+                  <CircularProgress
+                    size={50}
+                    thickness={4.1}
+                    value={Math.max(
+                      musicControlShowsReadyPulse ? 100 : 8,
+                      activeTrackReadyPercent
+                    )}
+                    variant="determinate"
+                    sx={{
+                      color: musicControlRingColor,
+                      inset: 0,
+                      position: 'absolute',
+                      transition: 'color 180ms ease',
+                      '& .MuiCircularProgress-circle': {
+                        strokeLinecap: 'round',
+                        transition: 'stroke-dashoffset 260ms ease',
+                      },
+                    }}
+                  />
+                )}
+              </Box>
+            ) : null}
+            <Box
+              sx={{
+                alignItems: 'center',
+                background: alpha('#FFFFFF', musicPlaying ? 0.78 : 0.68),
+                borderRadius: '50%',
+                boxShadow: `0 8px 18px ${alpha('#000', 0.2)}`,
+                color: alpha('#243A67', 0.88),
+                display: 'flex',
+                height: '36px',
+                justifyContent: 'center',
+                left: '50%',
+                position: 'absolute',
+                top: '50%',
+                transform: 'translate(-50%, -50%)',
+                width: '36px',
+                zIndex: 3,
+              }}
+            >
+              {musicControlShowsPause ? (
+                <PauseRoundedIcon sx={{ fontSize: '22px' }} />
+              ) : musicControlShowsDownload ? (
+                <DownloadRoundedIcon sx={{ fontSize: '18px' }} />
+              ) : (
+                <PlayArrowRoundedIcon sx={{ fontSize: '22px' }} />
+              )}
+            </Box>
+          </ButtonBase>
+          <Box
+            sx={{
+              maxWidth: '100%',
+              minWidth: 0,
+              textAlign: 'center',
+              transform: `translateY(${qortinoLayoutDebug.titleAuthorOffsetY + 21}px)`,
+              width: '100%',
+            }}
+          >
+            <Typography
+              sx={{
+                color: alpha(theme.palette.text.primary, 0.92),
+                fontSize: '0.78rem',
+                fontWeight: 700,
+                lineHeight: 1.15,
+                overflow: 'hidden',
+                textOverflow: 'clip',
+                whiteSpace: 'nowrap',
+                width: '100%',
+              }}
+            >
+              {truncateTrackLabel(activeTrack.title)}
+            </Typography>
+            <Typography
+              sx={{
+                color: alpha(theme.palette.text.secondary, 0.72),
+                fontSize: '0.61rem',
+                mt: 0.12,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {activeTrack.artist}
+            </Typography>
+          </Box>
+        </Box>
+        <ButtonBase
+          onClick={() => onCycleTrack('next')}
+          sx={{
+            ...smallTransportButtonSx(theme),
+            transform: `translateY(${qortinoLayoutDebug.prevNextOffsetY - 8}px)`,
+          }}
+        >
+          <SkipNextRoundedIcon sx={{ fontSize: '15px' }} />
+        </ButtonBase>
+      </Box>
+
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 0.18,
+          mt: 0.36,
+          pt: `${progressRowReservedTop}px`,
+        }}
+      >
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'grid',
+            gap: '8px',
+            gridTemplateColumns: 'auto minmax(0, 1fr) auto auto',
+            position: 'relative',
+            transform: `translateY(${progressRowVisualOffsetY}px)`,
+            zIndex: 1,
+          }}
+        >
+          <EarbumpMusicProgressMeter
+            audioRef={audioRef}
+            durationLabel={activeTrack.length}
+            durationSeconds={activeTrackDurationSeconds}
+            isTrackPlayable={isTrackPlayable}
+            onSeekInteraction={onClearStreamError}
+            playbackUrl={activeTrackPlaybackUrl}
+            theme={theme}
+            trackId={activeTrack.id}
+          />
+          <ButtonBase
+            onClick={onToggleRepeatMode}
+            sx={{
+              alignItems: 'center',
+              color: alpha(
+                repeatMode === 'one'
+                  ? '#9FC4FF'
+                  : theme.palette.text.secondary,
+                repeatMode === 'one' ? 0.96 : 0.8
+              ),
+              display: 'inline-flex',
+              height: '18px',
+              justifyContent: 'center',
+              position: 'relative',
+              width: '18px',
+              zIndex: 1,
+            }}
+          >
+            {repeatMode === 'one' ? (
+              <RepeatOneRoundedIcon sx={{ fontSize: '15px' }} />
+            ) : (
+              <RepeatRoundedIcon sx={{ fontSize: '15px' }} />
+            )}
+          </ButtonBase>
+        </Box>
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            height: `${MUSIC_STATUS_SLOT_HEIGHT_PX}px`,
+            justifyContent: 'center',
+            overflow: 'hidden',
+            pointerEvents: 'none',
+            position: 'relative',
+          }}
+        >
+          <Typography
+            sx={{
+              color: alpha(
+                isTrackLoadError
+                  ? '#FFB4B4'
+                  : isTrackPeerStarved
+                    ? '#F6D089'
+                    : theme.palette.text.secondary,
+                isTrackLoadError || isTrackPeerStarved ? 0.9 : 0.7
+              ),
+              fontSize: '0.58rem',
+              fontWeight: 600,
+              lineHeight: 1.35,
+              maxWidth: '100%',
+              opacity: musicStatusSlotMessage ? 1 : 0,
+              textAlign: 'center',
+              transform: `translateY(${qortinoLayoutDebug.nodeStatusOffsetY}px)`,
+              transition: 'opacity 140ms ease',
+              visibility: musicStatusSlotMessage ? 'visible' : 'hidden',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {musicStatusSlotMessage ?? ' '}
+          </Typography>
+        </Box>
+      </Box>
+    </Box>
+  );
+});
diff --git a/src/components/Group/Settings.tsx b/src/components/Group/Settings.tsx
index 8d8e322e..11173884 100644
--- a/src/components/Group/Settings.tsx
+++ b/src/components/Group/Settings.tsx
@@ -83,6 +83,8 @@ export const Settings = ({ open, setOpen, rawWallet }) => {
   const [isEnabledDevMode, setIsEnabledDevMode] = useAtom(enabledDevModeAtom);
   const [closeAction, setCloseAction] = useState<CloseAction>('ask');
   const [platform, setPlatform] = useState<string>('');
+  const [isPrivateKeyPasswordEditable, setIsPrivateKeyPasswordEditable] =
+    useState(false);
   const theme = useTheme();
   const { t } = useTranslation([
     'auth',
@@ -104,8 +106,6 @@ export const Settings = ({ open, setOpen, rawWallet }) => {
       .then((response) => {
         if (response?.error) {
           console.error('Error adding user settings:', response.error);
-        } else {
-          console.log('User settings added successfully');
         }
       })
       .catch((error) => {
@@ -485,11 +485,38 @@ const ExportPrivateKey = ({ rawWallet }) => {
             autoFocus
             type="password"
             value={password}
-            autoComplete="off"
+            autoComplete="new-password"
+            name="settings-private-key-decrypt"
             size="small"
+            onFocus={() => setIsPrivateKeyPasswordEditable(true)}
+            onMouseDown={() => setIsPrivateKeyPasswordEditable(true)}
+            onBlur={() => {
+              if (!password) {
+                setIsPrivateKeyPasswordEditable(false);
+              }
+            }}
             onChange={(e) => setPassword(e.target.value)}
+            InputProps={{
+              readOnly: !isPrivateKeyPasswordEditable,
+            }}
+            inputProps={{
+              autoComplete: 'new-password',
+              'data-1p-ignore': 'true',
+              'data-lpignore': 'true',
+              spellCheck: 'false',
+            }}
             sx={{
               '& .MuiOutlinedInput-root': { borderRadius: 2 },
+              '& input:-webkit-autofill, & input:-webkit-autofill:hover, & input:-webkit-autofill:focus':
+                {
+                  WebkitBoxShadow:
+                    theme.palette.mode === 'dark'
+                      ? '0 0 0 100px rgb(38, 42, 50) inset'
+                      : '0 0 0 100px rgb(248, 250, 253) inset',
+                  WebkitTextFillColor: theme.palette.text.primary,
+                  caretColor: theme.palette.text.primary,
+                  transition: 'background-color 9999s ease-out 0s',
+                },
             }}
           />
 
diff --git a/src/components/Group/WalletsAppWrapper.tsx b/src/components/Group/WalletsAppWrapper.tsx
index 29804e0b..e1c8bf61 100644
--- a/src/components/Group/WalletsAppWrapper.tsx
+++ b/src/components/Group/WalletsAppWrapper.tsx
@@ -1,20 +1,31 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Box, ButtonBase, Divider, Typography, useTheme } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
+import { alpha, Box, ButtonBase, Typography, useTheme } from '@mui/material';
+import AccountBalanceWalletRoundedIcon from '@mui/icons-material/AccountBalanceWalletRounded';
+import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import RefreshRoundedIcon from '@mui/icons-material/RefreshRounded';
+import { useAtom } from 'jotai';
+import { useTranslation } from 'react-i18next';
 import AppViewerContainer from '../Apps/AppViewerContainer';
+import { navigationControllerAtom } from '../../atoms/global';
 import {
   executeEvent,
   subscribeToEvent,
   unsubscribeFromEvent,
 } from '../../utils/events';
-import { navigationControllerAtom } from '../../atoms/global';
-import { AppsNavBarLeft, AppsNavBarParent } from '../Apps/Apps-styles';
-import { NavBack } from '../../assets/Icons/NavBack.tsx';
-import RefreshIcon from '@mui/icons-material/Refresh';
-import { useAtom } from 'jotai';
-import { useTranslation } from 'react-i18next';
 import { appChromeOffsetPx } from '../Desktop/CustomTitleBar';
 
+/** Official Q-App listing name — kept in English everywhere. */
+const Q_WALLETS_APP_NAME = 'Q-Wallets';
+
+type WalletsEmbeddedTab = {
+  tabId: string;
+  name: string;
+  service: string;
+  path: string;
+  refreshFunc?: (tabId: string) => void;
+};
+
 export const WalletsAppWrapper = () => {
   const { t } = useTranslation([
     'auth',
@@ -23,32 +34,33 @@ export const WalletsAppWrapper = () => {
     'question',
     'tutorial',
   ]);
+  const theme = useTheme();
   const iframeRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
-  const [navigationController, setNavigationController] = useAtom(
-    navigationControllerAtom
+  const [navigationController] = useAtom(navigationControllerAtom);
+  const selectedTab = useMemo<WalletsEmbeddedTab>(
+    () => ({
+      tabId: '5558589',
+      name: Q_WALLETS_APP_NAME,
+      service: 'APP',
+      path: 'qortal?authOnMount=true',
+    }),
+    []
   );
-  const [selectedTab, setSelectedTab] = useState({
-    tabId: '5558589',
-    name: 'Q-Wallets',
-    service: 'APP',
-    path: 'qortal?authOnMount=true',
-  });
-  const theme = useTheme();
+
   const isDisableBackButton = useMemo(() => {
-    if (selectedTab && navigationController[selectedTab?.tabId]?.hasBack)
+    if (selectedTab && navigationController[selectedTab?.tabId]?.hasBack) {
       return false;
-    if (selectedTab && !navigationController[selectedTab?.tabId]?.hasBack)
+    }
+    if (selectedTab && !navigationController[selectedTab?.tabId]?.hasBack) {
       return true;
+    }
     return false;
   }, [navigationController, selectedTab]);
 
-  const openWalletsAppFunc = useCallback(
-    (e) => {
-      setIsOpen(true);
-    },
-    [setIsOpen]
-  );
+  const openWalletsAppFunc = useCallback(() => {
+    setIsOpen(true);
+  }, []);
 
   useEffect(() => {
     subscribeToEvent('openWalletsApp', openWalletsAppFunc);
@@ -58,113 +70,269 @@ export const WalletsAppWrapper = () => {
     };
   }, [openWalletsAppFunc]);
 
-  const handleClose = () => {
+  const handleClose = useCallback(() => {
     setIsOpen(false);
     iframeRef.current = null;
-  };
+  }, []);
+
+  const handleBack = useCallback(() => {
+    executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {});
+  }, [selectedTab]);
+
+  const handleRefresh = useCallback(() => {
+    if (selectedTab?.refreshFunc) {
+      selectedTab.refreshFunc(selectedTab?.tabId);
+      return;
+    }
+
+    executeEvent('refreshApp', {
+      tabId: selectedTab?.tabId,
+    });
+  }, [selectedTab]);
+
+  if (!isOpen) return null;
 
   return (
-    <>
-      {isOpen && (
+    <Box
+      sx={{
+        inset: 0,
+        position: 'fixed',
+        zIndex: 100,
+      }}
+    >
+      <Box
+        sx={{
+          alignItems: { xs: 'stretch', md: 'center' },
+          backdropFilter: 'blur(12px)',
+          backgroundColor: alpha('#07090D', 0.66),
+          display: 'flex',
+          height: '100%',
+          justifyContent: { xs: 'flex-start', md: 'center' },
+          p: { xs: 2, md: 3 },
+          pb: { xs: 2, md: 3 },
+          pt: `calc(${appChromeOffsetPx} + 18px)`,
+          width: '100%',
+        }}
+      >
+        <ButtonBase
+          onClick={handleClose}
+          sx={{
+            inset: 0,
+            position: 'absolute',
+          }}
+        />
+
         <Box
+          onClick={(event) => event.stopPropagation()}
           sx={{
-            backgroundColor: theme.palette.background.paper,
-            borderTopLeftRadius: '10px',
-            borderTopRightRadius: '10px',
-            bottom: 0,
-            boxShadow: 4,
-            height: `calc(100vh - ${appChromeOffsetPx})`,
+            background:
+              theme.palette.mode === 'dark'
+                ? 'linear-gradient(180deg, rgba(21,24,31,0.985) 0%, rgba(16,18,24,0.99) 100%)'
+                : 'linear-gradient(180deg, rgba(251,253,255,0.985) 0%, rgba(244,247,251,0.99) 100%)',
+            border: `1px solid ${alpha(theme.palette.common.white, 0.08)}`,
+            borderRadius: '14px',
+            boxShadow:
+              theme.palette.mode === 'dark'
+                ? '0 34px 120px rgba(0,0,0,0.46)'
+                : '0 28px 88px rgba(18,28,45,0.16)',
+            display: 'flex',
+            flexDirection: 'column',
+            height: {
+              xs: '100%',
+              md: 'min(82vh, 920px)',
+            },
+            maxHeight: '100%',
+            maxWidth: '1360px',
+            minHeight: { md: 620 },
             overflow: 'hidden',
-            position: 'fixed',
-            right: 0,
-            width: '100vw',
-            zIndex: 100,
+            position: 'relative',
+            width: 'min(1360px, calc(100vw - 48px))',
+            zIndex: 1,
           }}
         >
           <Box
             sx={{
-              height: '100%',
-              width: '100%',
+              alignItems: 'center',
+              borderBottom: `1px solid ${alpha(theme.palette.divider, 0.5)}`,
+              display: 'flex',
+              flexShrink: 0,
+              justifyContent: 'space-between',
+              minHeight: 54,
+              px: { xs: 2, md: 2.75 },
+              py: 1,
             }}
           >
+            <Box sx={{ width: 32 }} />
+
             <Box
               sx={{
-                height: '40px',
-                display: 'flex',
                 alignItems: 'center',
-                padding: '5px',
-                justifyContent: 'space-between',
+                display: 'flex',
+                gap: 1,
+                justifyContent: 'center',
+                minWidth: 0,
               }}
             >
-              <Typography>
-                {t('core:q_apps.q_wallets', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
+              <AccountBalanceWalletRoundedIcon
+                sx={{
+                  color: alpha(theme.palette.primary.main, 0.92),
+                  fontSize: '1.05rem',
+                }}
+              />
+              <Typography
+                sx={{
+                  fontSize: '1rem',
+                  fontWeight: 700,
+                  letterSpacing: '-0.02em',
+                  lineHeight: 1.1,
+                }}
+              >
+                {Q_WALLETS_APP_NAME}
               </Typography>
-
-              <ButtonBase onClick={handleClose}>
-                <CloseIcon
-                  sx={{
-                    color: theme.palette.text.primary,
-                  }}
-                />
-              </ButtonBase>
             </Box>
 
-            <Divider />
+            <ButtonBase
+              onClick={handleClose}
+              sx={{
+                alignItems: 'center',
+                borderRadius: '10px',
+                color: theme.palette.text.secondary,
+                display: 'inline-flex',
+                height: 32,
+                justifyContent: 'center',
+                width: 32,
+                '&:hover': {
+                  backgroundColor: theme.palette.action.hover,
+                  color: theme.palette.text.primary,
+                },
+              }}
+            >
+              <CloseRoundedIcon sx={{ fontSize: '1rem' }} />
+            </ButtonBase>
+          </Box>
 
+          <Box
+            sx={{
+              flex: '1 1 auto',
+              minHeight: 0,
+              overflow: 'hidden',
+            }}
+          >
             <AppViewerContainer
-              customHeight="calc(100% - 40px - 60px)"
+              customHeight="100%"
               app={selectedTab}
+              hide={false}
+              isDevMode={false}
               isSelected
               ref={iframeRef}
               skipAuth={true}
             />
+          </Box>
+
+          <Box
+            sx={{
+              alignItems: 'center',
+              backdropFilter: 'blur(16px)',
+              backgroundColor:
+                theme.palette.mode === 'dark'
+                  ? 'rgba(16,18,24,0.94)'
+                  : 'rgba(248,250,252,0.94)',
+              borderTop: `1px solid ${alpha(theme.palette.divider, 0.42)}`,
+              display: 'flex',
+              flexShrink: 0,
+              justifyContent: 'space-between',
+              minHeight: 52,
+              px: { xs: 1.4, md: 1.8 },
+              py: 0.65,
+            }}
+          >
+            <Box
+              sx={{
+                alignItems: 'center',
+                display: 'flex',
+                gap: 1,
+              }}
+            >
+              <ButtonBase
+                onClick={handleBack}
+                disabled={isDisableBackButton}
+                sx={{
+                  alignItems: 'center',
+                  border: `1px solid ${alpha(theme.palette.divider, 0.28)}`,
+                  borderRadius: '12px',
+                  color: !isDisableBackButton
+                    ? theme.palette.text.primary
+                    : theme.palette.text.disabled,
+                  display: 'inline-flex',
+                  gap: 0.65,
+                  height: 40,
+                  justifyContent: 'center',
+                  minWidth: 96,
+                  opacity: !isDisableBackButton ? 1 : 0.52,
+                  px: 1.2,
+                  transition: 'background-color 0.2s ease, opacity 0.2s ease',
+                  '&:hover': !isDisableBackButton
+                    ? {
+                        backgroundColor: alpha(
+                          theme.palette.common.white,
+                          theme.palette.mode === 'dark' ? 0.04 : 0.55
+                        ),
+                      }
+                    : undefined,
+                }}
+              >
+                <ArrowBackRoundedIcon sx={{ fontSize: '1rem' }} />
+                <Typography sx={{ fontSize: '0.8rem', fontWeight: 600 }}>
+                  {t('core:action.back', { postProcess: 'capitalizeFirstChar' })}
+                </Typography>
+              </ButtonBase>
 
-            <AppsNavBarParent>
-              <AppsNavBarLeft
+              <ButtonBase
+                onClick={handleRefresh}
                 sx={{
-                  gap: '25px',
+                  alignItems: 'center',
+                  border: `1px solid ${alpha(theme.palette.divider, 0.28)}`,
+                  borderRadius: '12px',
+                  color: theme.palette.text.primary,
+                  display: 'inline-flex',
+                  gap: 0.65,
+                  height: 40,
+                  justifyContent: 'center',
+                  minWidth: 104,
+                  px: 1.2,
+                  transition: 'background-color 0.2s ease',
+                  '&:hover': {
+                    backgroundColor: alpha(
+                      theme.palette.common.white,
+                      theme.palette.mode === 'dark' ? 0.04 : 0.55
+                    ),
+                  },
                 }}
               >
-                <ButtonBase
-                  onClick={() => {
-                    executeEvent(`navigateBackApp-${selectedTab?.tabId}`, {});
-                  }}
-                  disabled={isDisableBackButton}
-                  sx={{
-                    opacity: !isDisableBackButton ? 1 : 0.1,
-                    cursor: !isDisableBackButton ? 'pointer' : 'default',
-                  }}
-                >
-                  <NavBack />
-                </ButtonBase>
-
-                <ButtonBase
-                  onClick={() => {
-                    if (selectedTab?.refreshFunc) {
-                      selectedTab.refreshFunc(selectedTab?.tabId);
-                    } else {
-                      executeEvent('refreshApp', {
-                        tabId: selectedTab?.tabId,
-                      });
-                    }
-                  }}
-                >
-                  <RefreshIcon
-                    height={20}
-                    sx={{
-                      color: 'rgba(250, 250, 250, 0.5)',
-                      height: '30px',
-                      width: 'auto',
-                    }}
-                  />
-                </ButtonBase>
-              </AppsNavBarLeft>
-            </AppsNavBarParent>
+                <RefreshRoundedIcon sx={{ fontSize: '1rem' }} />
+                <Typography sx={{ fontSize: '0.8rem', fontWeight: 600 }}>
+                  {t('core:action.refresh', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </Typography>
+              </ButtonBase>
+            </Box>
+
+            <Typography
+              sx={{
+                color: theme.palette.text.secondary,
+                fontSize: '0.76rem',
+                fontWeight: 500,
+                px: 1,
+              }}
+            >
+              {t('core:q_apps.wallets_workspace', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+            </Typography>
           </Box>
         </Box>
-      )}
-    </>
+      </Box>
+    </Box>
   );
 };
diff --git a/src/components/Group/WebsocketNotifications.tsx b/src/components/Group/WebsocketNotifications.tsx
new file mode 100644
index 00000000..aef12478
--- /dev/null
+++ b/src/components/Group/WebsocketNotifications.tsx
@@ -0,0 +1,393 @@
+import { useEffect, useRef, useState } from 'react';
+import { getBaseApiReact, getBaseApiReactSocket } from '../../App';
+import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
+import i18n, { supportedLanguages } from '../../i18n/i18n';
+import { useAtomValue, useSetAtom } from 'jotai';
+import {
+  extStateAtom,
+  paymentNotificationsAtom,
+  customWebsocketSubscriptionsAtom,
+  notificationSeenInAppKeysAtom,
+  filterSeenInAppKeysByRules,
+} from '../../atoms/global';
+import { fireOsNotificationPayment } from '../../background/background';
+import {
+  getNotificationPermissionKey,
+  getPermission,
+} from '../../qortal/qortal-requests';
+
+/** Message object with "You got a new qmail" in all supported languages (for Q-Mail subscription). */
+function getNewQmailMessage(): Record<string, string> {
+  const message: Record<string, string> = {};
+  for (const lng of Object.keys(supportedLanguages)) {
+    message[lng] = i18n.t('core:message.generic.new_qmail', { lng });
+  }
+  return message;
+}
+
+/** Picks message in current language, else en, else first available; not reactive. */
+function getNotificationMessage(
+  messageObj: Record<string, string> | undefined
+): string {
+  const fallback = 'New notification';
+  if (!messageObj || typeof messageObj !== 'object') return fallback;
+  const lang = (i18n.language || 'en').split('-')[0];
+  const current = messageObj[lang];
+  if (typeof current === 'string' && current.trim()) return current.trim();
+  const en = messageObj.en;
+  if (typeof en === 'string' && en.trim()) return en.trim();
+  const first = Object.values(messageObj).find(
+    (v) => typeof v === 'string' && (v as string).trim()
+  );
+  return typeof first === 'string' ? (first as string).trim() : fallback;
+}
+
+export const WebSocketNotifications = ({ myAddress, userName }) => {
+  const extState = useAtomValue(extStateAtom);
+  const extStateRef = useRef(extState);
+  extStateRef.current = extState;
+  const myAddressRef = useRef(myAddress);
+  myAddressRef.current = myAddress;
+  const setPaymentNotifications = useSetAtom(paymentNotificationsAtom);
+  const customSubscriptions = useAtomValue(customWebsocketSubscriptionsAtom);
+  const setCustomSubscriptions = useSetAtom(customWebsocketSubscriptionsAtom);
+  const seenInAppKeys = useAtomValue(notificationSeenInAppKeysAtom);
+  const setSeenInAppKeys = useSetAtom(notificationSeenInAppKeysAtom);
+
+  const [socketOpen, setSocketOpen] = useState(false);
+  const socketRef = useRef(null);
+  const timeoutIdRef = useRef(null);
+  const pingTimeoutRef = useRef(null);
+  const historyRequestTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
+    null
+  );
+  const listOfMyNamesRef = useRef<string[]>([]);
+  const initWebsocketRef = useRef<(() => Promise<void>) | null>(null);
+
+  const forceCloseWebSocket = () => {
+    clearTimeout(historyRequestTimeoutRef.current);
+    historyRequestTimeoutRef.current = null;
+    if (socketRef.current) {
+      clearTimeout(timeoutIdRef.current);
+      clearTimeout(pingTimeoutRef.current);
+      socketRef.current.close(1000, 'forced');
+      socketRef.current = null;
+    }
+  };
+
+  const logoutEventFunc = () => {
+    forceCloseWebSocket();
+  };
+
+  useEffect(() => {
+    subscribeToEvent('logout-event', logoutEventFunc);
+
+    return () => {
+      unsubscribeFromEvent('logout-event', logoutEventFunc);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handler = () => {
+      forceCloseWebSocket();
+      setSocketOpen(false);
+      if (initWebsocketRef.current) {
+        setTimeout(() => initWebsocketRef.current?.(), 0);
+      }
+    };
+    subscribeToEvent('notifications-websocket-reconnect', handler);
+    return () =>
+      unsubscribeFromEvent('notifications-websocket-reconnect', handler);
+  }, []);
+
+  useEffect(() => {
+    const handler = (e) => setCustomSubscriptions(e.detail ?? []);
+    subscribeToEvent('custom-ws-subscriptions-updated', handler);
+    return () =>
+      unsubscribeFromEvent('custom-ws-subscriptions-updated', handler);
+  }, [setCustomSubscriptions]);
+
+  useEffect(() => {
+    const current = Array.isArray(seenInAppKeys) ? seenInAppKeys : [];
+    const filtered = filterSeenInAppKeysByRules(
+      current,
+      customSubscriptions ?? []
+    );
+    if (filtered.length !== current.length) {
+      setSeenInAppKeys(filtered);
+    }
+  }, [customSubscriptions, seenInAppKeys, setSeenInAppKeys]);
+
+  useEffect(() => {
+    const handler = (e) => {
+      const notificationIds = e.detail;
+      if (
+        !notificationIds?.length ||
+        !socketRef.current ||
+        socketRef.current.readyState !== WebSocket.OPEN
+      )
+        return;
+      socketRef.current.send(
+        JSON.stringify({ action: 'unsubscribe', notificationIds })
+      );
+    };
+    subscribeToEvent('custom-ws-unsubscribe', handler);
+    return () => unsubscribeFromEvent('custom-ws-unsubscribe', handler);
+  }, []);
+
+  useEffect(() => {
+    if (
+      !socketOpen ||
+      !socketRef.current ||
+      socketRef.current.readyState !== WebSocket.OPEN
+    )
+      return;
+    if (!customSubscriptions?.length) return;
+    socketRef.current.send(
+      JSON.stringify({
+        action: 'subscribe',
+        subscriptions: customSubscriptions,
+      })
+    );
+  }, [socketOpen, customSubscriptions]);
+
+  useEffect(() => {
+    if (!myAddress || extState === 'not-authenticated' || !userName) return;
+
+    /** Remove RESOURCE_PUBLISHED rules whose appName does not have qAPPNotification permission. */
+    const filterSubscriptionsByNotificationPermission = async (
+      subscriptions
+    ) => {
+      if (!Array.isArray(subscriptions)) return [];
+      const result = [];
+      for (const sub of subscriptions) {
+        if (sub?.event !== 'RESOURCE_PUBLISHED') {
+          result.push(sub);
+          continue;
+        }
+        const appName = sub?.appName;
+        if (!appName) continue;
+        const allowed = await getPermission(
+          getNotificationPermissionKey(appName)
+        );
+        if (allowed === true) result.push(sub);
+      }
+      return result;
+    };
+
+    const pingHeads = () => {
+      try {
+        if (socketRef.current?.readyState === WebSocket.OPEN) {
+          socketRef.current.send('ping');
+          timeoutIdRef.current = setTimeout(() => {
+            if (socketRef.current) {
+              socketRef.current.close();
+              clearTimeout(pingTimeoutRef.current);
+            }
+          }, 5000);
+        }
+      } catch (error) {
+        console.error('Error during ping (notifications):', error);
+      }
+    };
+
+    const initWebsocketNotifications = async () => {
+      forceCloseWebSocket();
+      const currentAddress = myAddress;
+      if (extStateRef.current === 'not-authenticated') return;
+      if (currentAddress !== myAddressRef.current) return;
+
+      try {
+        const getNamesUrl = `${getBaseApiReact()}/names/address/${currentAddress}?limit=0`;
+        const namesResponse = await fetch(getNamesUrl);
+        const namesData = await namesResponse.json();
+        listOfMyNamesRef.current = namesData.map(
+          (n: { name: string }) => n.name
+        );
+        const query = `qortal_qmail_${userName.slice(0, 20)}_${currentAddress.slice(-6)}_mail_`;
+        const socketLink = `${getBaseApiReactSocket()}/websockets/notifications`;
+        const NOTIFICATION_AGE_MS = 3 * 24 * 60 * 60 * 1000;
+        const getNotificationCreatorTimestamp = (n: {
+          data?: { created?: number; timestamp?: number };
+          timestamp?: number;
+        }) => n?.data?.created ?? n?.data?.timestamp ?? n?.timestamp;
+        const trimNotificationsToLast3Days = <
+          T extends {
+            data?: { created?: number; timestamp?: number };
+            timestamp?: number;
+          },
+        >(
+          list: T[]
+        ): T[] => {
+          const cutoff = Date.now() - NOTIFICATION_AGE_MS;
+          return list.filter((n) => {
+            const ts = getNotificationCreatorTimestamp(n);
+            return ts == null || ts >= cutoff;
+          }) as T[];
+        };
+        socketRef.current = new WebSocket(socketLink);
+
+        socketRef.current.onopen = () => {
+          setSocketOpen(true);
+          socketRef.current.send(
+            JSON.stringify({
+              action: 'subscribe',
+              subscriptions: [
+                {
+                  event: 'PAYMENT_RECEIVED',
+                  notificationId: 'payment-notification',
+
+                  filters: {
+                    recipient: currentAddress,
+                  },
+                },
+                {
+                  event: 'RESOURCE_PUBLISHED',
+                  resourceFilter: {
+                    service: 'MAIL_PRIVATE',
+                    identifier: query, // same variable you're using in the fetch
+                    excludeBlocked: true,
+                    mode: 'ALL',
+                  },
+                  image: `/arbitrary/THUMBNAIL/Q-Mail/qortal_avatar?async=true`,
+                  link: 'qortal://app/Q-Mail',
+                  notificationId: 'q-mail-notification',
+                  appName: 'Q-Mail',
+                  appService: 'APP',
+                  message: getNewQmailMessage(),
+                },
+              ],
+            })
+          );
+          historyRequestTimeoutRef.current = setTimeout(() => {
+            historyRequestTimeoutRef.current = null;
+            const ws = socketRef.current;
+            if (ws?.readyState !== WebSocket.OPEN) return;
+            const after = Date.now() - 3 * 24 * 60 * 60 * 1000; // 3 days ago (ms)
+            ws.send(
+              JSON.stringify({
+                action: 'notification-history',
+                paymentReceivedLimit: 5,
+                after,
+              })
+            );
+          }, 1000);
+          setTimeout(pingHeads, 50);
+        };
+
+        socketRef.current.onmessage = (e) => {
+          try {
+            if (e.data === 'pong') {
+              clearTimeout(timeoutIdRef.current);
+              pingTimeoutRef.current = setTimeout(pingHeads, 20000);
+            } else {
+              const data = JSON.parse(e.data);
+
+              if (data?.type === 'history' && data?.results) {
+                const filtered = data.results.filter(
+                  (n) =>
+                    !(
+                      n?.event === 'RESOURCE_PUBLISHED' &&
+                      listOfMyNamesRef.current.includes(n?.data?.name)
+                    )
+                );
+                setPaymentNotifications(trimNotificationsToLast3Days(filtered));
+              }
+              if (data?.event === 'PAYMENT_RECEIVED' && data?.data) {
+                const tx = data;
+                setPaymentNotifications((prev) => {
+                  const trimmed = trimNotificationsToLast3Days(prev);
+                  const alreadyExists = trimmed.some(
+                    (n) => n.signature === tx.data?.signature
+                  );
+                  if (alreadyExists) return trimmed;
+                  return [tx, ...trimmed];
+                });
+                fireOsNotificationPayment(
+                  tx,
+                  i18n.t('core:message.generic.new_payment_received'),
+                  i18n.t('core:message.generic.new_payment_body', {
+                    amount: tx?.data?.amount ?? 0,
+                  }),
+                  `${getBaseApiReact()}/arbitrary/THUMBNAIL/Q-Wallets/qortal_avatar?async=true`,
+                  tx?.link
+                );
+              }
+              if (data?.event === 'RESOURCE_PUBLISHED' && data?.data) {
+                const tx = { ...data };
+                if (listOfMyNamesRef.current.includes(tx?.data?.name)) return;
+                if (tx.data && tx.data.created == null) {
+                  tx.data = { ...tx.data, created: Date.now() };
+                }
+                setPaymentNotifications((prev) => {
+                  const trimmed = trimNotificationsToLast3Days(prev);
+                  const alreadyExists = trimmed.some(
+                    (n) =>
+                      n?.event === 'RESOURCE_PUBLISHED' &&
+                      n?.data?.identifier === tx.data?.identifier
+                  );
+                  if (alreadyExists) return trimmed;
+                  return [tx, ...trimmed];
+                });
+                fireOsNotificationPayment(
+                  tx,
+                  i18n.t('core:message.generic.new_notification_from', {
+                    appName: tx.appName ?? 'App',
+                  }),
+                  getNotificationMessage(tx.message),
+                  `${getBaseApiReact()}${tx.image}`,
+                  tx?.link
+                );
+              }
+            }
+          } catch (error) {
+            console.error('Error parsing notifications message:', error);
+          }
+        };
+
+        socketRef.current.onclose = (event) => {
+          setSocketOpen(false);
+          clearTimeout(historyRequestTimeoutRef.current);
+          historyRequestTimeoutRef.current = null;
+          clearTimeout(pingTimeoutRef.current);
+          clearTimeout(timeoutIdRef.current);
+          console.warn(
+            `Notifications WebSocket closed: ${event.reason || 'unknown reason'}`
+          );
+          if (extStateRef.current === 'not-authenticated') return;
+          if (event.reason !== 'forced' && event.code !== 1000) {
+            setTimeout(() => initWebsocketNotifications(), 10000);
+          }
+        };
+
+        socketRef.current.onerror = (error) => {
+          console.error('Notifications WebSocket error:', error);
+          clearTimeout(pingTimeoutRef.current);
+          clearTimeout(timeoutIdRef.current);
+          if (socketRef.current) {
+            socketRef.current.close();
+          }
+        };
+      } catch (error) {
+        console.error('Error initializing notifications WebSocket:', error);
+      }
+    };
+
+    initWebsocketRef.current = initWebsocketNotifications;
+
+    (async () => {
+      const filtered = await filterSubscriptionsByNotificationPermission(
+        customSubscriptions ?? []
+      );
+      setCustomSubscriptions(filtered);
+      initWebsocketNotifications();
+    })();
+
+    return () => {
+      initWebsocketRef.current = null;
+      forceCloseWebSocket();
+    };
+  }, [myAddress, extState, userName]);
+
+  return null;
+};
diff --git a/src/components/Group/__tests__/HomeDeveloperTab.test.tsx b/src/components/Group/__tests__/HomeDeveloperTab.test.tsx
deleted file mode 100644
index f1d40d1d..00000000
--- a/src/components/Group/__tests__/HomeDeveloperTab.test.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import React, { createContext } from 'react';
-import { describe, expect, it, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import { I18nextProvider } from 'react-i18next';
-import i18n from 'i18next';
-
-// --- Mocks ---
-
-vi.mock('../../../App', () => ({
-  getBaseApiReact: () => 'http://localhost:12391',
-  QORTAL_APP_CONTEXT: createContext({ show: vi.fn() }),
-  extStates: {},
-}));
-
-vi.mock('../../../background/background', () => ({
-  groupApi: 'http://localhost:12391',
-  groupApiSocket: 'ws://localhost:12391',
-  cleanUrl: vi.fn((url: string) => url),
-  getProtocol: vi.fn(() => 'http'),
-  performPowTask: vi.fn(async () => ({ success: true, nonce: 0, hash: '00' })),
-}));
-
-const mockExecuteEvent = vi.fn();
-vi.mock('../../../utils/events', () => ({
-  executeEvent: (...args: any[]) => mockExecuteEvent(...args),
-  subscribeToEvent: vi.fn(),
-  unsubscribeFromEvent: vi.fn(),
-}));
-
-// --- i18n ---
-
-i18n.init({
-  lng: 'en',
-  fallbackLng: 'en',
-  resources: {
-    en: {
-      tutorial: {
-        'home.developer_resources': 'Developer Resources',
-        'home.qtube_tutorial': 'Q-Tube Tutorial',
-        'home.qtube_tutorial_desc': 'Learn how to publish and browse videos on Q-Tube',
-        'home.core_support': 'Qortal official CORE support',
-        'home.core_support_desc': 'Get help from the official Qortal CORE support group',
-        'home.devnet_testing': 'Q-App DevNet-Testing',
-        'home.devnet_testing_desc': 'Test your Q-Apps in the DevNet-Testing environment',
-        'home.open': 'Open',
-      },
-    },
-  },
-  interpolation: { escapeValue: false },
-});
-
-// --- Component ---
-
-import { HomeDeveloperTab } from '../HomeDeveloperTab';
-
-const theme = createTheme();
-
-const makeProps = (overrides = {}) => ({
-  setSelectedGroup: vi.fn(),
-  setGroupSection: vi.fn(),
-  setDesktopViewMode: vi.fn(),
-  setMobileViewMode: vi.fn(),
-  getTimestampEnterChat: vi.fn(),
-  ...overrides,
-});
-
-const renderComponent = (props = makeProps()) =>
-  render(
-    <ThemeProvider theme={theme}>
-      <I18nextProvider i18n={i18n}>
-        <HomeDeveloperTab {...props} />
-      </I18nextProvider>
-    </ThemeProvider>
-  );
-
-describe('HomeDeveloperTab', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders the section title', () => {
-    renderComponent();
-    expect(screen.getByText('Developer Resources')).toBeInTheDocument();
-  });
-
-  it('renders all three card titles', () => {
-    renderComponent();
-    expect(screen.getByText('Q-Tube Tutorial')).toBeInTheDocument();
-    expect(screen.getByText('Qortal official CORE support')).toBeInTheDocument();
-    expect(screen.getByText('Q-App DevNet-Testing')).toBeInTheDocument();
-  });
-
-  it('renders all three card descriptions', () => {
-    renderComponent();
-    expect(screen.getByText('Learn how to publish and browse videos on Q-Tube')).toBeInTheDocument();
-    expect(screen.getByText('Get help from the official Qortal CORE support group')).toBeInTheDocument();
-    expect(screen.getByText('Test your Q-Apps in the DevNet-Testing environment')).toBeInTheDocument();
-  });
-
-  it('renders three clickable cards', () => {
-    renderComponent();
-    expect(screen.getAllByRole('button')).toHaveLength(3);
-  });
-
-  it('opens Q-Tube app when first card is clicked', () => {
-    renderComponent();
-    fireEvent.click(screen.getAllByRole('button')[0]);
-    expect(mockExecuteEvent).toHaveBeenCalledWith('addTab', {
-      data: { service: 'APP', name: 'q-tube' },
-    });
-    expect(mockExecuteEvent).toHaveBeenCalledWith('open-apps-mode', {});
-  });
-
-  it('navigates to CORE support group when second card is clicked', () => {
-    const props = makeProps();
-    renderComponent(props);
-    fireEvent.click(screen.getAllByRole('button')[1]);
-    expect(props.setSelectedGroup).toHaveBeenCalledWith(
-      expect.objectContaining({ groupName: 'Qortal-CORE-Support' })
-    );
-    expect(props.setDesktopViewMode).toHaveBeenCalledWith('chat');
-    expect(props.setGroupSection).toHaveBeenCalledWith('default');
-    expect(props.setMobileViewMode).toHaveBeenCalledWith('group');
-    expect(props.getTimestampEnterChat).toHaveBeenCalled();
-  });
-
-  it('navigates to DevNet-Testing group when third card is clicked', () => {
-    const props = makeProps();
-    renderComponent(props);
-    fireEvent.click(screen.getAllByRole('button')[2]);
-    expect(props.setSelectedGroup).toHaveBeenCalledWith(
-      expect.objectContaining({ groupName: 'Q-App-DevNet-Testing' })
-    );
-    expect(props.setDesktopViewMode).toHaveBeenCalledWith('chat');
-  });
-
-  it('does not call group navigation when Q-Tube card is clicked', () => {
-    const props = makeProps();
-    renderComponent(props);
-    fireEvent.click(screen.getAllByRole('button')[0]);
-    expect(props.setSelectedGroup).not.toHaveBeenCalled();
-    expect(props.setDesktopViewMode).not.toHaveBeenCalled();
-  });
-});
diff --git a/src/components/Group/__tests__/HomeFeaturedApps.test.tsx b/src/components/Group/__tests__/HomeFeaturedApps.test.tsx
index c88e8ebc..2da23e7d 100644
--- a/src/components/Group/__tests__/HomeFeaturedApps.test.tsx
+++ b/src/components/Group/__tests__/HomeFeaturedApps.test.tsx
@@ -1,6 +1,6 @@
 import React, { createContext } from 'react';
-import { describe, expect, it, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { I18nextProvider } from 'react-i18next';
 import i18n from 'i18next';
@@ -50,16 +50,19 @@ i18n.init({
 
 // --- Component ---
 
-import { HomeFeaturedApps } from '../HomeFeaturedApps';
-import { officialAppsConfig } from '../../Apps/config/officialApps';
+import {
+  FEATURED_APP_NAMES,
+  FEATURED_INTRO_TOTAL_DURATION_MS,
+  HomeFeaturedApps,
+} from '../HomeFeaturedApps';
 
 const theme = createTheme();
 
-const renderComponent = () =>
+const renderComponent = (props = {}) =>
   render(
     <ThemeProvider theme={theme}>
       <I18nextProvider i18n={i18n}>
-        <HomeFeaturedApps />
+        <HomeFeaturedApps {...props} />
       </I18nextProvider>
     </ThemeProvider>
   );
@@ -69,28 +72,35 @@ describe('HomeFeaturedApps', () => {
     vi.clearAllMocks();
   });
 
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
   it('renders the section title', () => {
     renderComponent();
-    expect(screen.getByText('Featured Apps')).toBeInTheDocument();
+    expect(screen.getByText('Featured Q-Apps')).toBeInTheDocument();
   });
 
   it('renders a tile for every featured app', () => {
     renderComponent();
-    for (const appName of officialAppsConfig.featured) {
+    for (const appName of FEATURED_APP_NAMES) {
       expect(screen.getByText(appName)).toBeInTheDocument();
     }
   });
 
   it('renders a clickable tile for each featured app', () => {
     renderComponent();
-    const buttons = screen.getAllByRole('button');
-    expect(buttons).toHaveLength(officialAppsConfig.featured.length);
+    for (const appName of FEATURED_APP_NAMES) {
+      expect(
+        screen.getByRole('button', { name: appName })
+      ).toBeInTheDocument();
+    }
   });
 
   it('fires addTab and open-apps-mode events when an app is opened', () => {
     renderComponent();
-    const firstAppName = officialAppsConfig.featured[0];
-    fireEvent.click(screen.getAllByRole('button')[0]);
+    const firstAppName = FEATURED_APP_NAMES[0];
+    fireEvent.click(screen.getByRole('button', { name: firstAppName }));
 
     expect(mockExecuteEvent).toHaveBeenCalledWith('addTab', {
       data: { service: 'APP', name: firstAppName },
@@ -98,16 +108,33 @@ describe('HomeFeaturedApps', () => {
     expect(mockExecuteEvent).toHaveBeenCalledWith('open-apps-mode', {});
   });
 
-  it('opens the correct app for each tile', () => {
+  it('opens the app library from the footer CTA', () => {
     renderComponent();
-    const buttons = screen.getAllByRole('button');
-
-    officialAppsConfig.featured.forEach((appName, index) => {
-      vi.clearAllMocks();
-      fireEvent.click(buttons[index]);
-      expect(mockExecuteEvent).toHaveBeenCalledWith('addTab', {
-        data: { service: 'APP', name: appName },
-      });
+    fireEvent.click(screen.getByRole('button', { name: /Explore All Q-Apps/i }));
+
+    expect(mockExecuteEvent).toHaveBeenCalledWith('openAppsLibrarySearch', {
+      data: { query: '' },
+    });
+    expect(mockExecuteEvent).toHaveBeenCalledWith('open-apps-mode', {});
+  });
+
+  it('notifies when the intro preview fully finishes', () => {
+    vi.useFakeTimers();
+    const onIntroComplete = vi.fn();
+
+    renderComponent({
+      decorationsVisible: false,
+      onIntroComplete,
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(FEATURED_INTRO_TOTAL_DURATION_MS - 1);
+    });
+    expect(onIntroComplete).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(1);
     });
+    expect(onIntroComplete).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/components/Group/__tests__/HomeFeaturedGroups.test.tsx b/src/components/Group/__tests__/HomeFeaturedGroups.test.tsx
deleted file mode 100644
index c0540636..00000000
--- a/src/components/Group/__tests__/HomeFeaturedGroups.test.tsx
+++ /dev/null
@@ -1,168 +0,0 @@
-import React, { createContext } from 'react';
-import { describe, expect, it, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import { I18nextProvider } from 'react-i18next';
-import i18n from 'i18next';
-import { createStore, Provider as JotaiProvider } from 'jotai';
-
-// --- Mocks ---
-
-vi.mock('../../../App', () => ({
-  getBaseApiReact: () => 'http://localhost:12391',
-  QORTAL_APP_CONTEXT: createContext({ show: vi.fn() }),
-  extStates: {},
-}));
-
-vi.mock('../../../background/background', () => ({
-  groupApi: 'http://localhost:12391',
-  groupApiSocket: 'ws://localhost:12391',
-  cleanUrl: vi.fn((url: string) => url),
-  getProtocol: vi.fn(() => 'http'),
-  performPowTask: vi.fn(async () => ({ success: true, nonce: 0, hash: '00' })),
-}));
-
-vi.mock('../../../utils/events', () => ({
-  executeEvent: vi.fn(),
-  subscribeToEvent: vi.fn(),
-  unsubscribeFromEvent: vi.fn(),
-}));
-
-// --- Static featured groups (from data/featuredGroups) ---
-
-const featuredGroupNames = ['Qortal', 'Qortal-General-Chat', 'Q-Apps'];
-const featuredDescriptions = [
-  'Official Qortal community group',
-  'General chat for the Qortal community',
-  'Discussion and support for Qortal Q-Apps',
-];
-
-// --- i18n ---
-
-i18n.init({
-  lng: 'en',
-  fallbackLng: 'en',
-  resources: {
-    en: {
-      tutorial: {
-        'home.featured_groups': 'Featured Groups',
-        'home.most_active_groups': 'Most active groups',
-        'home.view_group': 'View',
-      },
-    },
-  },
-  interpolation: { escapeValue: false },
-});
-
-// --- Atoms + Components ---
-
-import { groupsOwnerNamesAtom } from '../../../atoms/global';
-import { HomeFeaturedGroups } from '../HomeFeaturedGroups';
-
-const theme = createTheme();
-
-const makeProps = (overrides = {}) => ({
-  setSelectedGroup: vi.fn(),
-  setGroupSection: vi.fn(),
-  setDesktopViewMode: vi.fn(),
-  setMobileViewMode: vi.fn(),
-  getTimestampEnterChat: vi.fn(),
-  ...overrides,
-});
-
-const renderComponent = (props = makeProps(), ownerNames: Record<string, string> = {}) => {
-  const store = createStore();
-  store.set(groupsOwnerNamesAtom, ownerNames);
-
-  return {
-    ...render(
-      <JotaiProvider store={store}>
-        <ThemeProvider theme={theme}>
-          <I18nextProvider i18n={i18n}>
-            <HomeFeaturedGroups {...props} />
-          </I18nextProvider>
-        </ThemeProvider>
-      </JotaiProvider>
-    ),
-    props,
-  };
-};
-
-describe('HomeFeaturedGroups', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders the section title', () => {
-    renderComponent();
-    expect(screen.getByText('Featured Groups')).toBeInTheDocument();
-  });
-
-  it('renders a card for each featured group', () => {
-    renderComponent();
-    for (const name of featuredGroupNames) {
-      expect(screen.getByText(name)).toBeInTheDocument();
-    }
-  });
-
-  it('renders a clickable card for each group', () => {
-    renderComponent();
-    for (const name of featuredGroupNames) {
-      expect(screen.getByText(name)).toBeInTheDocument();
-    }
-    // Cards + prev/next arrows
-    const buttons = screen.getAllByRole('button');
-    expect(buttons.length).toBeGreaterThanOrEqual(featuredGroupNames.length);
-  });
-
-  it('renders group descriptions', () => {
-    renderComponent();
-    for (const desc of featuredDescriptions) {
-      expect(screen.getByText(desc)).toBeInTheDocument();
-    }
-  });
-
-  it('renders fallback letter avatar when owner name is unknown', () => {
-    renderComponent();
-    expect(screen.getByText('Qortal')).toBeInTheDocument();
-    // Qortal → fallback first letter 'Q'
-    expect(screen.getByText('Q')).toBeInTheDocument();
-  });
-
-  it('opens the join popover when a card is clicked', async () => {
-    renderComponent();
-
-    const cards = featuredGroupNames.map((name) => screen.getByText(name));
-    fireEvent.click(cards[0].closest('button') ?? cards[0]);
-
-    await waitFor(() => {
-      const popover = document.querySelector('.MuiPopover-paper');
-      expect(popover).toBeInTheDocument();
-      expect(popover?.querySelector('h6')?.textContent).toBe('Qortal');
-      expect(popover?.textContent).toMatch(/Official Qortal community group/);
-      expect(popover?.textContent).toMatch(/action\.close|Close/);
-      expect(popover?.textContent).toMatch(/action\.join|Join/);
-    });
-  });
-
-  it('shows the correct group in the popover when different cards are clicked', async () => {
-    renderComponent();
-
-    const cards = featuredGroupNames.map((name) => screen.getByText(name));
-
-    fireEvent.click(cards[0].closest('button') ?? cards[0]);
-    await waitFor(() => {
-      expect(screen.getByText('Qortal', { selector: 'h6' })).toBeInTheDocument();
-    });
-
-    fireEvent.click(cards[1].closest('button') ?? cards[1]);
-    await waitFor(() => {
-      expect(screen.getByText('Qortal-General-Chat', { selector: 'h6' })).toBeInTheDocument();
-    });
-
-    fireEvent.click(cards[2].closest('button') ?? cards[2]);
-    await waitFor(() => {
-      expect(screen.getByText('Q-Apps', { selector: 'h6' })).toBeInTheDocument();
-    });
-  });
-});
diff --git a/src/components/Group/__tests__/HomeGettingStarted.test.tsx b/src/components/Group/__tests__/HomeGettingStarted.test.tsx
deleted file mode 100644
index fa799aad..00000000
--- a/src/components/Group/__tests__/HomeGettingStarted.test.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-import React, { createContext } from 'react';
-import { describe, expect, it, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent, waitFor, act, within } from '@testing-library/react';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import { I18nextProvider } from 'react-i18next';
-import i18n from 'i18next';
-import { createStore, Provider as JotaiProvider } from 'jotai';
-
-// --- Mocks ---
-
-vi.mock('../../../App', () => ({
-  getBaseApiReact: () => 'http://localhost:12391',
-  getArbitraryEndpointReact: () => '/arbitrary/resources/searchsimple',
-  QORTAL_APP_CONTEXT: createContext({ show: vi.fn() }),
-  extStates: {},
-}));
-
-vi.mock('../../../background/background', () => ({
-  groupApi: 'http://localhost:12391',
-  groupApiSocket: 'ws://localhost:12391',
-  cleanUrl: vi.fn((url: string) => url),
-  getProtocol: vi.fn(() => 'http'),
-  performPowTask: vi.fn(async () => ({ success: true, nonce: 0, hash: '00' })),
-}));
-
-const mockExecuteEvent = vi.fn();
-vi.mock('../../../utils/events', () => ({
-  executeEvent: (...args: any[]) => mockExecuteEvent(...args),
-  subscribeToEvent: vi.fn(),
-  unsubscribeFromEvent: vi.fn(),
-}));
-
-// --- i18n ---
-
-i18n.init({
-  lng: 'en',
-  fallbackLng: 'en',
-  resources: {
-    en: {
-      tutorial: {
-        'home.getting_started': 'Getting Started',
-        'home.progress': '{{completed}} / {{total}} completed',
-        'home.get_six_qorts': 'Get your 6 QORT',
-        'home.register_name': 'Register your name',
-        'home.load_avatar': 'Load your avatar',
-        'home.done': 'Done',
-        'home.open': 'Open',
-      },
-    },
-  },
-  interpolation: { escapeValue: false },
-});
-
-// --- Atoms ---
-
-import { userInfoAtom, balanceAtom } from '../../../atoms/global';
-import { HomeGettingStarted } from '../HomeGettingStarted';
-
-const LS_KEY = 'getting_started_status';
-const theme = createTheme();
-
-const renderComponent = (
-  userInfo: { name: string | null; address: string } | null,
-  balance: number | null,
-  fetchResponse: any[] = []
-) => {
-  global.fetch = vi.fn().mockResolvedValue({
-    json: () => Promise.resolve(fetchResponse),
-  }) as any;
-
-  const store = createStore();
-  store.set(userInfoAtom, userInfo);
-  store.set(balanceAtom, balance);
-
-  return render(
-    <JotaiProvider store={store}>
-      <ThemeProvider theme={theme}>
-        <I18nextProvider i18n={i18n}>
-          <HomeGettingStarted />
-        </I18nextProvider>
-      </ThemeProvider>
-    </JotaiProvider>
-  );
-};
-
-describe('HomeGettingStarted', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-    localStorage.clear();
-  });
-
-  it('renders all 3 step labels', () => {
-    renderComponent({ name: null, address: 'QADDR' }, 0);
-    expect(screen.getByText('Get your 6 QORT')).toBeInTheDocument();
-    expect(screen.getByText('Register your name')).toBeInTheDocument();
-    expect(screen.getByText('Load your avatar')).toBeInTheDocument();
-  });
-
-  it('shows progress as 0 / 3 when nothing is done', () => {
-    renderComponent({ name: null, address: 'QADDR' }, 0);
-    expect(screen.getByText('0 / 3 completed')).toBeInTheDocument();
-  });
-
-  it('marks step 1 done when balance >= 6', () => {
-    renderComponent({ name: null, address: 'QADDR' }, 6);
-    const buttons = screen.getAllByRole('button', { name: 'Done' });
-    expect(buttons.length).toBeGreaterThanOrEqual(1);
-  });
-
-  it('marks step 2 done when user has a name', () => {
-    renderComponent({ name: 'alice', address: 'QADDR' }, 0);
-    const buttons = screen.getAllByRole('button', { name: 'Done' });
-    expect(buttons.length).toBeGreaterThanOrEqual(1);
-  });
-
-  it('marks step 3 done when avatar API returns a result', async () => {
-    renderComponent(
-      { name: 'alice', address: 'QADDR' },
-      0,
-      [{ name: 'alice', identifier: 'qortal_avatar' }]
-    );
-    await waitFor(() => {
-      const buttons = screen.getAllByRole('button', { name: 'Done' });
-      // name (step 2) + avatar (step 3) = 2 Done buttons
-      expect(buttons.length).toBeGreaterThanOrEqual(2);
-    });
-  });
-
-  it('shows correct progress count when steps are done', () => {
-    renderComponent({ name: 'alice', address: 'QADDR' }, 6);
-    // balance (1) + name (1) = 2 done; avatar check pending (fetch returns [])
-    expect(screen.getByText('2 / 3 completed')).toBeInTheDocument();
-  });
-
-  it('fires openRegisterName event when step 2 button clicked', () => {
-    renderComponent({ name: null, address: 'QADDR' }, 0);
-    fireEvent.click(screen.getAllByRole('button', { name: 'Open' })[1]);
-    expect(mockExecuteEvent).toHaveBeenCalledWith('openRegisterName', {});
-  });
-
-  it('fires openAvatarUpload event when step 3 button clicked', async () => {
-    renderComponent({ name: 'alice', address: 'QADDR' }, 0, []);
-    await waitFor(() => {
-      expect(screen.getAllByRole('button', { name: 'Open' }).length).toBeGreaterThan(0);
-    });
-    fireEvent.click(screen.getAllByRole('button', { name: 'Open' })[1]);
-    expect(mockExecuteEvent).toHaveBeenCalledWith('openAvatarUpload', {});
-  });
-
-  it('opens the Get QORT dialog when step 1 button clicked', () => {
-    renderComponent({ name: null, address: 'QADDR' }, 0);
-    fireEvent.click(screen.getAllByRole('button', { name: 'Open' })[0]);
-    const dialog = screen.getByRole('dialog');
-    expect(dialog).toBeInTheDocument();
-    expect(within(dialog).getByText('Get your 6 QORT')).toBeInTheDocument();
-  });
-
-  it('hides the section when all 3 steps are completed', async () => {
-    await act(async () => {
-      renderComponent(
-        { name: 'alice', address: 'QADDR' },
-        6,
-        [{ name: 'alice', identifier: 'qortal_avatar' }]
-      );
-    });
-
-    await waitFor(() => {
-      expect(screen.queryByText('Getting Started')).not.toBeInTheDocument();
-    });
-  });
-
-  it('persists completed status to localStorage when all steps are done (per-account)', async () => {
-    await act(async () => {
-      renderComponent(
-        { name: 'alice', address: 'QADDR' },
-        6,
-        [{ name: 'alice', identifier: 'qortal_avatar' }]
-      );
-    });
-
-    await waitFor(() => {
-      expect(localStorage.getItem(`${LS_KEY}_QADDR`)).toBe('completed');
-    });
-  });
-
-  it('hides the section immediately when localStorage already has completed status for this account', () => {
-    localStorage.setItem(`${LS_KEY}_QADDR`, 'completed');
-    renderComponent({ name: null, address: 'QADDR' }, 0);
-    expect(screen.queryByText('Getting Started')).not.toBeInTheDocument();
-  });
-});
diff --git a/src/components/Group/__tests__/HomeGroupCard.test.tsx b/src/components/Group/__tests__/HomeGroupCard.test.tsx
deleted file mode 100644
index 7455a6ac..00000000
--- a/src/components/Group/__tests__/HomeGroupCard.test.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-import React, { createContext } from 'react';
-import { describe, expect, it, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import { I18nextProvider } from 'react-i18next';
-import i18n from 'i18next';
-import { createStore, Provider as JotaiProvider } from 'jotai';
-
-// --- Mocks ---
-
-vi.mock('../../../App', () => ({
-  getBaseApiReact: () => 'http://localhost:12391',
-  QORTAL_APP_CONTEXT: createContext({ show: vi.fn() }),
-  extStates: {},
-}));
-
-vi.mock('../../../background/background', () => ({
-  groupApi: 'http://localhost:12391',
-  groupApiSocket: 'ws://localhost:12391',
-  cleanUrl: vi.fn((url: string) => url),
-  getProtocol: vi.fn(() => 'http'),
-  performPowTask: vi.fn(async () => ({ success: true, nonce: 0, hash: '00' })),
-}));
-
-vi.mock('../../../utils/events', () => ({
-  executeEvent: vi.fn(),
-  subscribeToEvent: vi.fn(),
-  unsubscribeFromEvent: vi.fn(),
-}));
-
-// --- i18n ---
-
-i18n.init({
-  lng: 'en',
-  fallbackLng: 'en',
-  resources: {
-    en: {
-      tutorial: {
-        'home.view_group': 'View',
-      },
-    },
-  },
-  interpolation: { escapeValue: false },
-});
-
-// --- Atoms + Component ---
-
-import { groupsOwnerNamesAtom } from '../../../atoms/global';
-import { HomeGroupCard } from '../HomeGroupCard';
-import type { FeaturedGroup } from '../../../data/featuredGroups';
-
-const theme = createTheme();
-
-const testGroup: FeaturedGroup = {
-  id: 42,
-  name: 'Qortal-General-Chat',
-  description: 'General chat for the Qortal community',
-};
-
-const renderCard = (
-  onClick = vi.fn(),
-  ownerNames: Record<string, string> = {}
-) => {
-  const store = createStore();
-  store.set(groupsOwnerNamesAtom, ownerNames);
-
-  return {
-    onClick,
-    ...render(
-      <JotaiProvider store={store}>
-        <ThemeProvider theme={theme}>
-          <I18nextProvider i18n={i18n}>
-            <HomeGroupCard group={testGroup} onClick={onClick} />
-          </I18nextProvider>
-        </ThemeProvider>
-      </JotaiProvider>
-    ),
-  };
-};
-
-describe('HomeGroupCard', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders the group name', () => {
-    renderCard();
-    expect(screen.getByText('Qortal-General-Chat')).toBeInTheDocument();
-  });
-
-  it('renders the group description', () => {
-    renderCard();
-    expect(
-      screen.getByText('General chat for the Qortal community')
-    ).toBeInTheDocument();
-  });
-
-  it('renders a clickable card', () => {
-    renderCard();
-    expect(screen.getByRole('button')).toBeInTheDocument();
-  });
-
-  it('calls onClick when the card is clicked', () => {
-    const onClick = vi.fn();
-    renderCard(onClick);
-    fireEvent.click(screen.getByRole('button'));
-    expect(onClick).toHaveBeenCalledOnce();
-  });
-
-  it('renders two-letter fallback avatar when owner name is unknown', () => {
-    renderCard();
-    // 'Qortal-General-Chat' → first letters of first two words: 'QG'
-    expect(screen.getByText('QG')).toBeInTheDocument();
-  });
-
-  it('renders single-letter fallback for single-word group names', () => {
-    const store = createStore();
-    store.set(groupsOwnerNamesAtom, {});
-    render(
-      <JotaiProvider store={store}>
-        <ThemeProvider theme={theme}>
-          <I18nextProvider i18n={i18n}>
-            <HomeGroupCard
-              group={{ id: 1, name: 'Qortal', description: 'Official' }}
-              onClick={vi.fn()}
-            />
-          </I18nextProvider>
-        </ThemeProvider>
-      </JotaiProvider>
-    );
-    expect(screen.getByText('Q')).toBeInTheDocument();
-  });
-
-  it('uses the owner name from the atom to build the avatar src', () => {
-    renderCard(vi.fn(), { '42': 'groupOwner' });
-    const avatar = document.querySelector('img');
-    expect(avatar?.src).toContain('groupOwner');
-    expect(avatar?.src).toContain('qortal_group_avatar_42');
-  });
-
-  it('does not call onClick when not clicked', () => {
-    const onClick = vi.fn();
-    renderCard(onClick);
-    expect(onClick).not.toHaveBeenCalled();
-  });
-});
diff --git a/src/components/Group/__tests__/HomeQortinoWorkspaceCard.test.tsx b/src/components/Group/__tests__/HomeQortinoWorkspaceCard.test.tsx
new file mode 100644
index 00000000..02d00eec
--- /dev/null
+++ b/src/components/Group/__tests__/HomeQortinoWorkspaceCard.test.tsx
@@ -0,0 +1,124 @@
+import React, { createContext } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { I18nextProvider } from 'react-i18next';
+import i18n from 'i18next';
+import { createStore, Provider as JotaiProvider } from 'jotai';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { balanceAtom, txListAtom, userInfoAtom } from '../../../atoms/global';
+import ErrorBoundary from '../../../common/ErrorBoundary';
+import { HomeQortinoWorkspaceCard } from '../HomeQortinoWorkspaceCard';
+
+vi.mock('../../../App', () => ({
+  getBaseApiReact: () => 'http://localhost:12391',
+  getArbitraryEndpointReact: () => '/arbitrary/resources/search',
+  QORTAL_APP_CONTEXT: createContext({ show: vi.fn() }),
+  extStates: {},
+}));
+
+vi.mock('../../../utils/events', () => ({
+  executeEvent: vi.fn(),
+  subscribeToEvent: vi.fn(),
+  unsubscribeFromEvent: vi.fn(),
+}));
+
+i18n.init({
+  lng: 'en',
+  fallbackLng: 'en',
+  resources: {
+    en: {
+      tutorial: {},
+    },
+  },
+  interpolation: { escapeValue: false },
+});
+
+const theme = createTheme();
+const LS_KEY = 'getting_started_status';
+
+const renderCard = ({
+  address = 'QADDR',
+  balance = 0,
+  name = null,
+  qortinoSettings = null,
+}: {
+  address?: string;
+  balance?: number | null;
+  name?: string | null;
+  qortinoSettings?: unknown;
+} = {}) => {
+  const store = createStore();
+  store.set(userInfoAtom, address ? { address, name } : null);
+  store.set(balanceAtom, balance);
+  store.set(txListAtom, []);
+
+  global.fetch = vi.fn().mockResolvedValue({
+    json: () => Promise.resolve([]),
+  }) as typeof fetch;
+
+  window.sendMessage = vi.fn(async (type: string) => {
+    if (type === 'getUserSettings') {
+      return qortinoSettings;
+    }
+
+    return null;
+  }) as typeof window.sendMessage;
+
+  return render(
+    <JotaiProvider store={store}>
+      <ThemeProvider theme={theme}>
+        <I18nextProvider i18n={i18n}>
+          <ErrorBoundary fallback={<div>boundary fallback</div>}>
+            <HomeQortinoWorkspaceCard />
+          </ErrorBoundary>
+        </I18nextProvider>
+      </ThemeProvider>
+    </JotaiProvider>
+  );
+};
+
+describe('HomeQortinoWorkspaceCard', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    localStorage.clear();
+  });
+
+  it('renders the onboarding workspace without tripping the boundary', async () => {
+    renderCard();
+
+    await waitFor(() => {
+      expect(screen.getByText('Getting started')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('QORTINO')).toBeInTheDocument();
+    expect(screen.queryByText('boundary fallback')).not.toBeInTheDocument();
+  });
+
+  it('renders the unlocked companion view without tripping the boundary', async () => {
+    localStorage.setItem(`${LS_KEY}_QADDR`, 'completed');
+
+    renderCard({
+      balance: 10,
+      name: 'b-test',
+      qortinoSettings: {
+        hotkeys: Array.from({ length: 8 }, () => null),
+        mode: 'empty',
+        musicPlaying: false,
+        musicQuery: '',
+        onboardingCelebrationSeen: true,
+        repeatMode: 'all',
+        selectedTrackId: 'midnight-relay',
+        version: 1,
+      },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText('QORTINO')).toBeInTheDocument();
+    });
+
+    expect(
+      screen.getByText('Choose what lives above QORTINO.')
+    ).toBeInTheDocument();
+    expect(screen.queryByText('boundary fallback')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/Group/dashboardPanelEffects.ts b/src/components/Group/dashboardPanelEffects.ts
new file mode 100644
index 00000000..2d777c3a
--- /dev/null
+++ b/src/components/Group/dashboardPanelEffects.ts
@@ -0,0 +1,140 @@
+import { useRef } from 'react';
+import { Theme } from '@mui/material/styles';
+
+type DashboardPanelVariant = 'base' | 'accent' | 'utility';
+
+const resolvePanelVariant = (theme: Theme, variant: DashboardPanelVariant) => {
+  const isDarkMode = theme.palette.mode === 'dark';
+
+  if (variant === 'accent') {
+    return isDarkMode
+      ? {
+          backgroundColor: '#232730',
+          backgroundImage:
+            'linear-gradient(180deg, rgba(255,255,255,0.028) 0%, rgba(255,255,255,0.012) 34%, rgba(255,255,255,0) 100%)',
+          borderColor: 'rgba(255,255,255,0.082)',
+          boxShadow: '0 12px 24px rgba(0, 0, 0, 0.14)',
+          topEdge: 'rgba(255,255,255,0.105)',
+          topGlow:
+            'radial-gradient(62% 36px at 50% 0%, rgba(132,175,240,0.19) 0%, rgba(132,175,240,0.09) 38%, rgba(132,175,240,0.03) 62%, transparent 82%)',
+          topGlowOpacity: 1,
+        }
+      : {
+          backgroundColor: '#F6F1E9',
+          backgroundImage:
+            'linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.26) 34%, rgba(255,255,255,0) 100%)',
+          borderColor: 'rgba(28,36,52,0.08)',
+          boxShadow: '0 12px 24px rgba(72, 58, 40, 0.08)',
+          topEdge: 'rgba(255,255,255,0.76)',
+          topGlow:
+            'radial-gradient(62% 34px at 50% 0%, rgba(132,175,240,0.16) 0%, rgba(132,175,240,0.06) 44%, transparent 82%)',
+          topGlowOpacity: 0.9,
+        };
+  }
+
+  if (variant === 'utility') {
+    return isDarkMode
+      ? {
+          backgroundColor: '#191c23',
+          backgroundImage:
+            'linear-gradient(180deg, rgba(255,255,255,0.016) 0%, rgba(255,255,255,0.006) 22%, rgba(255,255,255,0) 100%)',
+          borderColor: 'rgba(255,255,255,0.06)',
+          boxShadow: '0 10px 20px rgba(0, 0, 0, 0.1)',
+          topEdge: 'rgba(255,255,255,0.075)',
+          topGlow: 'none',
+          topGlowOpacity: 0,
+        }
+      : {
+          backgroundColor: '#F2ECE2',
+          backgroundImage:
+            'linear-gradient(180deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.2) 22%, rgba(255,255,255,0) 100%)',
+          borderColor: 'rgba(28,36,52,0.07)',
+          boxShadow: '0 10px 20px rgba(72, 58, 40, 0.06)',
+          topEdge: 'rgba(255,255,255,0.68)',
+          topGlow: 'none',
+          topGlowOpacity: 0,
+        };
+  }
+
+  return isDarkMode
+    ? {
+        backgroundColor: '#1D2027',
+        backgroundImage:
+          'linear-gradient(180deg, rgba(255,255,255,0.018) 0%, rgba(255,255,255,0.008) 22%, rgba(255,255,255,0) 100%)',
+        borderColor: 'rgba(255,255,255,0.064)',
+        boxShadow: '0 10px 22px rgba(0, 0, 0, 0.12)',
+        topEdge: 'rgba(255,255,255,0.082)',
+        topGlow: 'none',
+        topGlowOpacity: 0,
+      }
+    : {
+        backgroundColor: '#F7F1E8',
+        backgroundImage:
+          'linear-gradient(180deg, rgba(255,255,255,0.62) 0%, rgba(255,255,255,0.22) 22%, rgba(255,255,255,0) 100%)',
+        borderColor: 'rgba(28,36,52,0.07)',
+        boxShadow: '0 10px 20px rgba(72, 58, 40, 0.06)',
+        topEdge: 'rgba(255,255,255,0.7)',
+        topGlow: 'none',
+        topGlowOpacity: 0,
+      };
+};
+
+export const dashboardPanelSx = (
+  theme: Theme,
+  variant: DashboardPanelVariant = 'base'
+) => {
+  const surface = resolvePanelVariant(theme, variant);
+
+  return {
+    position: 'relative',
+    overflow: 'visible',
+    isolation: 'isolate',
+    backgroundColor: surface.backgroundColor,
+    border: `1px solid ${surface.borderColor}`,
+    boxShadow: surface.boxShadow,
+    backgroundImage: surface.backgroundImage,
+    transition:
+      'border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, background-image 180ms ease',
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      left: '12px',
+      right: '12px',
+      top: 0,
+      height: '1px',
+      pointerEvents: 'none',
+      zIndex: 0,
+      background: `linear-gradient(90deg, transparent 0%, ${surface.topEdge} 16%, ${surface.topEdge} 84%, transparent 100%)`,
+      opacity: 0.95,
+    },
+    '&::after': {
+      content: '""',
+      position: 'absolute',
+      left: '18%',
+      right: '18%',
+      top: '-10px',
+      height: '26px',
+      pointerEvents: 'none',
+      zIndex: -1,
+      background: surface.topGlow,
+      filter: 'blur(12px)',
+      opacity: surface.topGlowOpacity,
+    },
+    '& > :not(.dashboard-panel-decoration)': {
+      position: 'relative',
+      zIndex: 1,
+    },
+  };
+};
+
+export const handleDashboardPanelPointerMove = (
+  _event: React.MouseEvent<HTMLElement>
+) => undefined;
+
+export const handleDashboardPanelPointerLeave = (
+  _event: React.MouseEvent<HTMLElement>
+) => undefined;
+
+export const useDashboardPanelMouseLight = <T extends HTMLElement>() => {
+  return useRef<T | null>(null);
+};
diff --git a/src/components/Group/earbumpLibraryApi.ts b/src/components/Group/earbumpLibraryApi.ts
new file mode 100644
index 00000000..044b3cd4
--- /dev/null
+++ b/src/components/Group/earbumpLibraryApi.ts
@@ -0,0 +1,433 @@
+import { getBaseApiReact } from '../../utils/globalApi';
+
+export type EarbumpTrack = {
+  artist: string;
+  coverColors: [string, string, string];
+  created: number;
+  id: string;
+  length: string;
+  name: string;
+  status: string | null;
+  streamUrl: string;
+  title: string;
+  updated: number | null;
+  uploaded: string;
+};
+
+const EARBUMP_SEARCH_ENDPOINT = '/arbitrary/resources/search';
+const EARBUMP_SONG_IDENTIFIER_PREFIX = 'earbump_song_';
+/** Parallel music catalog (searched and merged with EarBump results). */
+const ENJOYMUSIC_SONG_IDENTIFIER_PREFIX = 'enjoymusic_song';
+
+type SearchResponseItem = {
+  created?: number;
+  identifier?: string;
+  metadata?: {
+    author?: string;
+    description?: string;
+    title?: string;
+  };
+  name?: string;
+  service?: string;
+  status?: {
+    status?: string;
+  };
+  updated?: number | null;
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  value != null && typeof value === 'object' && !Array.isArray(value);
+
+const toSafeString = (value: unknown) =>
+  typeof value === 'string' ? value : '';
+
+const toSafeNumber = (value: unknown) =>
+  typeof value === 'number' && Number.isFinite(value) ? value : null;
+
+/** Matches percent-encoded bytes (e.g. %20) in metadata or description fields. */
+const PERCENT_ENCODED_BYTE_PATTERN = /%[0-9A-Fa-f]{2}/;
+
+const decodeDisplayStringIfEncoded = (value: string): string => {
+  const trimmed = value.trim();
+  if (!trimmed || !PERCENT_ENCODED_BYTE_PATTERN.test(trimmed)) {
+    return trimmed;
+  }
+
+  try {
+    const decoded = decodeURIComponent(trimmed.replace(/\+/g, ' '));
+    const normalized = decoded.trim();
+    return normalized.length > 0 ? normalized : trimmed;
+  } catch {
+    return trimmed;
+  }
+};
+
+const slugifySearchQuery = (value: string) =>
+  value
+    .trim()
+    .toLowerCase()
+    .replace(/[^a-z0-9\s_-]+/g, ' ')
+    .replace(/\s+/g, '_')
+    .replace(/_+/g, '_')
+    .replace(/^_+|_+$/g, '');
+
+const formatRelativeTimestamp = (timestamp: number) => {
+  const diffMs = Math.max(0, Date.now() - timestamp);
+  const diffMinutes = Math.floor(diffMs / 60_000);
+
+  if (diffMinutes < 1) return 'Just now';
+  if (diffMinutes < 60) {
+    return `${diffMinutes} min${diffMinutes === 1 ? '' : 's'} ago`;
+  }
+
+  const diffHours = Math.floor(diffMinutes / 60);
+  if (diffHours < 24) {
+    return `${diffHours} hour${diffHours === 1 ? '' : 's'} ago`;
+  }
+
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffDays < 7) {
+    return `${diffDays} day${diffDays === 1 ? '' : 's'} ago`;
+  }
+
+  const diffWeeks = Math.floor(diffDays / 7);
+  if (diffWeeks < 5) {
+    return `${diffWeeks} week${diffWeeks === 1 ? '' : 's'} ago`;
+  }
+
+  const diffMonths = Math.floor(diffDays / 30);
+  if (diffMonths < 12) {
+    return `${diffMonths} month${diffMonths === 1 ? '' : 's'} ago`;
+  }
+
+  const diffYears = Math.floor(diffDays / 365);
+  return `${diffYears} year${diffYears === 1 ? '' : 's'} ago`;
+};
+
+const hashSeed = (value: string) => {
+  let hash = 0;
+
+  for (let index = 0; index < value.length; index += 1) {
+    hash = (hash << 5) - hash + value.charCodeAt(index);
+    hash |= 0;
+  }
+
+  return Math.abs(hash);
+};
+
+const hslToHex = (hue: number, saturation: number, lightness: number) => {
+  const s = saturation / 100;
+  const l = lightness / 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = l - c / 2;
+  let red = 0;
+  let green = 0;
+  let blue = 0;
+
+  if (hue < 60) {
+    red = c;
+    green = x;
+  } else if (hue < 120) {
+    red = x;
+    green = c;
+  } else if (hue < 180) {
+    green = c;
+    blue = x;
+  } else if (hue < 240) {
+    green = x;
+    blue = c;
+  } else if (hue < 300) {
+    red = x;
+    blue = c;
+  } else {
+    red = c;
+    blue = x;
+  }
+
+  const toHex = (channel: number) =>
+    Math.round((channel + m) * 255)
+      .toString(16)
+      .padStart(2, '0');
+
+  return `#${toHex(red)}${toHex(green)}${toHex(blue)}`;
+};
+
+const buildCoverColors = (seedValue: string): [string, string, string] => {
+  const seed = hashSeed(seedValue);
+  const hue = seed % 360;
+
+  return [
+    hslToHex(hue, 78, 62),
+    hslToHex((hue + 42) % 360, 58, 28),
+    hslToHex((hue + 14) % 360, 84, 78),
+  ];
+};
+
+const parseDescriptionFields = (description: string) => {
+  const fields = description.split(';');
+  const parsed: Record<string, string> = {};
+
+  for (const field of fields) {
+    const [rawKey, rawValue] = field.split('=');
+    if (!rawKey || !rawValue) continue;
+
+    const key = rawKey.trim().toLowerCase();
+    if (key !== 'title' && key !== 'author') continue;
+    parsed[key] = decodeDisplayStringIfEncoded(rawValue.trim());
+  }
+
+  return parsed;
+};
+
+const mapSearchResponseItem = (value: unknown): EarbumpTrack | null => {
+  if (!isRecord(value)) {
+    return null;
+  }
+
+  const resource = value as SearchResponseItem;
+  const identifier = toSafeString(resource.identifier).trim();
+  const name = toSafeString(resource.name).trim();
+  const service = toSafeString(resource.service).trim();
+  const created = toSafeNumber(resource.created);
+
+  if (!identifier || !name || service !== 'AUDIO' || created == null) {
+    return null;
+  }
+
+  const metadataTitle = decodeDisplayStringIfEncoded(
+    toSafeString(resource.metadata?.title).trim()
+  );
+  const metadataAuthor = decodeDisplayStringIfEncoded(
+    toSafeString(resource.metadata?.author).trim()
+  );
+  const description = toSafeString(resource.metadata?.description).trim();
+  const parsedDescription = parseDescriptionFields(description);
+  const title = decodeDisplayStringIfEncoded(
+    parsedDescription.title || metadataTitle || identifier
+  );
+  const artist = decodeDisplayStringIfEncoded(
+    parsedDescription.author || metadataAuthor || name
+  );
+
+  return {
+    artist,
+    coverColors: buildCoverColors(`${name}:${identifier}:${title}:${artist}`),
+    created,
+    id: identifier,
+    length: '--:--',
+    name,
+    status: toSafeString(resource.status?.status).trim() || null,
+    streamUrl: `${getBaseApiReact()}/arbitrary/AUDIO/${encodeURIComponent(name)}/${encodeURIComponent(identifier)}`,
+    title,
+    updated: toSafeNumber(resource.updated),
+    uploaded: formatRelativeTimestamp(created),
+  };
+};
+
+const dedupeTracks = (tracks: EarbumpTrack[]) => {
+  const seenIds = new Set<string>();
+
+  return tracks.filter((track) => {
+    if (seenIds.has(track.id)) {
+      return false;
+    }
+
+    seenIds.add(track.id);
+    return true;
+  });
+};
+
+const shuffleTracksDeterministic = (
+  tracks: EarbumpTrack[],
+  seed: number
+): EarbumpTrack[] => {
+  const copy = tracks.slice();
+  let state = seed >>> 0;
+  const random = () => {
+    state = (1664525 * state + 1013904223) >>> 0;
+    return state / 0xffffffff;
+  };
+
+  for (let i = copy.length - 1; i > 0; i -= 1) {
+    const j = Math.floor(random() * (i + 1));
+    const tmp = copy[i];
+    copy[i] = copy[j]!;
+    copy[j] = tmp!;
+  }
+
+  return copy;
+};
+
+const mergeAndShuffleTrackResults = (
+  earbumpTracks: EarbumpTrack[],
+  enjoyTracks: EarbumpTrack[],
+  shuffleSeed: number
+): EarbumpTrack[] => {
+  const merged = dedupeTracks([...earbumpTracks, ...enjoyTracks]);
+  return shuffleTracksDeterministic(merged, shuffleSeed);
+};
+
+const fetchDualIdentifierSearch = async (
+  query: string,
+  perSourceLimit: number,
+  options?: { offset?: number; signal?: AbortSignal }
+) => {
+  const paramsEarbump = buildSearchParams(query, {
+    limit: perSourceLimit,
+    offset: options?.offset,
+    identifierPrefix: EARBUMP_SONG_IDENTIFIER_PREFIX,
+  });
+  const paramsEnjoy = buildSearchParams(query, {
+    limit: perSourceLimit,
+    offset: options?.offset,
+    identifierPrefix: ENJOYMUSIC_SONG_IDENTIFIER_PREFIX,
+  });
+
+  const [earbumpResult, enjoyResult] = await Promise.allSettled([
+    fetchTrackSearch(paramsEarbump, options?.signal),
+    fetchTrackSearch(paramsEnjoy, options?.signal),
+  ]);
+
+  const earbumpTracks =
+    earbumpResult.status === 'fulfilled' ? earbumpResult.value : [];
+  const enjoyTracks =
+    enjoyResult.status === 'fulfilled' ? enjoyResult.value : [];
+
+  if (earbumpResult.status === 'rejected' && enjoyResult.status === 'rejected') {
+    throw earbumpResult.reason;
+  }
+
+  return mergeAndShuffleTrackResults(
+    earbumpTracks,
+    enjoyTracks,
+    hashSeed(query)
+  );
+};
+
+const fetchTrackSearch = async (
+  params: URLSearchParams,
+  signal?: AbortSignal
+) => {
+  const response = await fetch(
+    `${getBaseApiReact()}${EARBUMP_SEARCH_ENDPOINT}?${params.toString()}`,
+    {
+      cache: 'no-store',
+      signal,
+    }
+  );
+
+  if (!response.ok) {
+    throw new Error(`EarBump search failed with status ${response.status}`);
+  }
+
+  const parsed = (await response.json()) as unknown;
+  if (!Array.isArray(parsed)) {
+    throw new Error('Unexpected EarBump search response shape');
+  }
+
+  return dedupeTracks(
+    parsed
+      .map(mapSearchResponseItem)
+      .filter((track): track is EarbumpTrack => track != null)
+  );
+};
+
+const buildSearchParams = (
+  query: string,
+  options?: {
+    limit?: number;
+    offset?: number;
+    useIdentifierQuery?: boolean;
+    identifierPrefix?: string;
+  }
+) => {
+  const identifierPrefix =
+    options?.identifierPrefix ?? EARBUMP_SONG_IDENTIFIER_PREFIX;
+
+  const params = new URLSearchParams({
+    excludeblocked: 'true',
+    includemetadata: 'true',
+    includestatus: 'true',
+    limit: String(options?.limit ?? 12),
+    mode: 'ALL',
+    offset: String(options?.offset ?? 0),
+    reverse: 'true',
+    service: 'AUDIO',
+  });
+
+  if (options?.useIdentifierQuery === true) {
+    params.set('query', identifierPrefix);
+  } else {
+    params.set('identifier', identifierPrefix);
+    params.set('query', query);
+  }
+
+  return params;
+};
+
+export const fetchEarbumpRecentTracks = async (options?: {
+  limit?: number;
+  offset?: number;
+  signal?: AbortSignal;
+}) =>
+  fetchTrackSearch(
+    buildSearchParams('', {
+      limit: options?.limit,
+      offset: options?.offset,
+      useIdentifierQuery: true,
+    }),
+    options?.signal
+  );
+
+export const searchEarbumpTracks = async (
+  query: string,
+  options?: { limit?: number; offset?: number; signal?: AbortSignal }
+) => {
+  const perSourceLimit = options?.limit ?? 8;
+
+  const normalizedQuery = slugifySearchQuery(query);
+  if (!normalizedQuery) {
+    return fetchEarbumpRecentTracks(options);
+  }
+
+  const primaryResults = await fetchDualIdentifierSearch(
+    normalizedQuery,
+    perSourceLimit,
+    options
+  );
+
+  if (primaryResults.length > 0) {
+    return primaryResults;
+  }
+
+  const rawQuery = query.trim().toLowerCase();
+  if (!rawQuery || rawQuery === normalizedQuery) {
+    return primaryResults;
+  }
+
+  return fetchDualIdentifierSearch(rawQuery, perSourceLimit, options);
+};
+
+export const fetchEarbumpTrackById = async (
+  trackId: string,
+  options?: { signal?: AbortSignal }
+) => {
+  const trimmedTrackId = trackId.trim();
+  if (!trimmedTrackId) return null;
+
+  const params = new URLSearchParams({
+    excludeblocked: 'true',
+    includemetadata: 'true',
+    includestatus: 'true',
+    identifier: trimmedTrackId,
+    limit: '1',
+    mode: 'ALL',
+    offset: '0',
+    reverse: 'true',
+    service: 'AUDIO',
+  });
+
+  const tracks = await fetchTrackSearch(params, options?.signal);
+  return tracks[0] ?? null;
+};
diff --git a/src/components/Group/earbumpSharedAudio.ts b/src/components/Group/earbumpSharedAudio.ts
new file mode 100644
index 00000000..29e820bb
--- /dev/null
+++ b/src/components/Group/earbumpSharedAudio.ts
@@ -0,0 +1,41 @@
+import type { EarbumpTrack } from './earbumpLibraryApi';
+
+let sharedEarbumpAudioInstance: HTMLAudioElement | null = null;
+let sharedEarbumpTrackSnapshot: EarbumpTrack | null = null;
+
+export const getSharedEarbumpAudio = (): HTMLAudioElement | null => {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  if (sharedEarbumpAudioInstance == null) {
+    sharedEarbumpAudioInstance = new Audio();
+    sharedEarbumpAudioInstance.preload = 'metadata';
+  }
+
+  return sharedEarbumpAudioInstance;
+};
+
+export const getSharedEarbumpTrackSnapshot = () => sharedEarbumpTrackSnapshot;
+
+export const setSharedEarbumpTrackSnapshot = (
+  track: EarbumpTrack | null
+) => {
+  sharedEarbumpTrackSnapshot = track ? { ...track } : null;
+};
+
+export const stopSharedEarbumpAudio = (audio: HTMLAudioElement | null) => {
+  if (!audio) {
+    return;
+  }
+
+  audio.pause();
+  audio.removeAttribute('src');
+  audio.load();
+};
+
+/** Pause playback and clear track snapshot (logout / workspace teardown). */
+export const stopSharedEarbumpPlayback = (): void => {
+  stopSharedEarbumpAudio(getSharedEarbumpAudio());
+  setSharedEarbumpTrackSnapshot(null);
+};
diff --git a/src/components/Group/gettingStartedStorage.ts b/src/components/Group/gettingStartedStorage.ts
new file mode 100644
index 00000000..f9ad7869
--- /dev/null
+++ b/src/components/Group/gettingStartedStorage.ts
@@ -0,0 +1 @@
+export const GETTING_STARTED_LS_KEY = 'getting_started_status';
diff --git a/src/components/Group/groupActivityColorSystem.ts b/src/components/Group/groupActivityColorSystem.ts
new file mode 100644
index 00000000..85d5a3ca
--- /dev/null
+++ b/src/components/Group/groupActivityColorSystem.ts
@@ -0,0 +1,14 @@
+export {
+  APP_BLUE as GROUP_ACTIVITY_BLUE,
+  APP_BLUE_SURFACE_TEXT,
+  getBlueAmbientFieldBackground,
+  getBlueAmbientLineBackground,
+  getBlueAmbientPillGlowBackground,
+  getBlueAmbientSeamBackground,
+  getBlueTier1ButtonSx,
+  getBlueTier1PillSurface,
+  getBlueTier2BadgeSx,
+  getBlueTier3DotSx,
+  getBlueTier3ProgressBackground,
+  getBlueTier3StepperState,
+} from '../../styles/blueMaterial';
diff --git a/src/components/Group/groupApi.ts b/src/components/Group/groupApi.ts
index 7f96b4d2..bb7a0c34 100644
--- a/src/components/Group/groupApi.ts
+++ b/src/components/Group/groupApi.ts
@@ -33,6 +33,46 @@ export async function getPrimaryNameForAvatar(address: string): Promise<string>
   return '';
 }
 
+export async function getPrimaryNamesForAddresses(
+  addresses: string[]
+): Promise<Record<string, string>> {
+  const uniqueAddresses = Array.from(
+    new Set(addresses.filter((address) => Boolean(address)))
+  );
+  if (uniqueAddresses.length === 0) return {};
+
+  const response = await fetch(`${getBaseApiReactForPrimaryName()}/names/list`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(uniqueAddresses),
+  });
+
+  if (!response.ok) {
+    throw new Error(`Request failed: ${response.status}`);
+  }
+
+  const names = await response.json();
+  const primaryNamesByAddress: Record<string, string> = {};
+
+  if (Array.isArray(names)) {
+    names.forEach((item) => {
+      if (typeof item?.owner !== 'string') return;
+      primaryNamesByAddress[item.owner] =
+        typeof item?.name === 'string' ? item.name : '';
+    });
+  }
+
+  uniqueAddresses.forEach((address) => {
+    if (primaryNamesByAddress[address] === undefined) {
+      primaryNamesByAddress[address] = '';
+    }
+  });
+
+  return primaryNamesByAddress;
+}
+
 export const getPublishesFromAdmins = async (
   admins: string[],
   groupId: string
diff --git a/src/components/Group/groupTypes.ts b/src/components/Group/groupTypes.ts
index be4d64ca..3abbb802 100644
--- a/src/components/Group/groupTypes.ts
+++ b/src/components/Group/groupTypes.ts
@@ -2,8 +2,7 @@ export interface GroupProps {
   myAddress: string;
   desktopViewMode: string;
   isMain?: boolean;
-  isOpenDrawerProfile?: boolean;
   logoutFunc?: () => Promise<void>;
+  onOpenSettings?: () => void;
   setDesktopViewMode: (mode: string) => void;
-  setIsOpenDrawerProfile: (open: boolean) => void;
 }
diff --git a/src/components/Group/qmailUtils.ts b/src/components/Group/qmailUtils.ts
index cc0f669f..d8479fc2 100644
--- a/src/components/Group/qmailUtils.ts
+++ b/src/components/Group/qmailUtils.ts
@@ -1,10 +1,6 @@
 import moment from 'moment';
 import { TIME_WEEKS_1_IN_MILLISECONDS } from '../../constants/constants';
 
-export function isLessThanOneWeekOld(timestamp: number): boolean {
-  return timestamp > Date.now() - TIME_WEEKS_1_IN_MILLISECONDS;
-}
-
 export function formatEmailDate(timestamp: number): string {
   const date = moment(timestamp);
   const now = moment();
diff --git a/src/components/Group/qortinoCompanionDebug.ts b/src/components/Group/qortinoCompanionDebug.ts
new file mode 100644
index 00000000..363bd3ce
--- /dev/null
+++ b/src/components/Group/qortinoCompanionDebug.ts
@@ -0,0 +1,17 @@
+export type QortinoCompanionDebugSettings = {
+  bubbleOffsetX: number;
+  bubbleOffsetY: number;
+  nameOffsetX: number;
+  nameOffsetY: number;
+  statusOffsetX: number;
+  statusOffsetY: number;
+};
+
+export const DEFAULT_QORTINO_COMPANION_DEBUG_SETTINGS: QortinoCompanionDebugSettings = {
+  bubbleOffsetX: -7,
+  bubbleOffsetY: -6,
+  nameOffsetX: -6,
+  nameOffsetY: 36,
+  statusOffsetX: -56,
+  statusOffsetY: 12,
+};
diff --git a/src/components/Group/qortinoDonationEasterEgg.ts b/src/components/Group/qortinoDonationEasterEgg.ts
new file mode 100644
index 00000000..8fd87ee5
--- /dev/null
+++ b/src/components/Group/qortinoDonationEasterEgg.ts
@@ -0,0 +1,17 @@
+export const QORTINO_DONATION_DRAG_TYPE =
+  'application/x-qortino-wallet-donation';
+
+export const QORTINO_DONATION_PREFILL_NAME = 'Qortino';
+
+export const QORTINO_DONATION_COMPLETED_EVENT =
+  'qortinoDonationCompleted';
+
+export const QORTINO_DONATION_BUBBLE_MESSAGE =
+  'Such an astute observer, you discovered my super-secret Donation page!';
+
+export const QORTINO_DONATION_THANK_YOU_MESSAGE =
+  'Thank you for your kind donation!';
+
+export const QORTINO_DONATION_OVERLAY_DURATION_MS = 4800;
+
+export const QORTINO_DONATION_GRATEFUL_DURATION_MS = 10000;
diff --git a/src/components/Group/qortinoLayoutDebug.ts b/src/components/Group/qortinoLayoutDebug.ts
new file mode 100644
index 00000000..25629d94
--- /dev/null
+++ b/src/components/Group/qortinoLayoutDebug.ts
@@ -0,0 +1,20 @@
+export type QortinoLayoutDebugSettings = {
+  musicHeaderOffsetY: number;
+  nodeStatusOffsetY: number;
+  prevNextOffsetY: number;
+  progressOffsetY: number;
+  separatorOffsetY: number;
+  titleAuthorOffsetY: number;
+  vinylOffsetY: number;
+};
+
+export const DEFAULT_QORTINO_LAYOUT_DEBUG_SETTINGS: QortinoLayoutDebugSettings =
+  {
+    musicHeaderOffsetY: 15,
+    nodeStatusOffsetY: -5,
+    prevNextOffsetY: 15,
+    progressOffsetY: 28,
+    separatorOffsetY: 24,
+    titleAuthorOffsetY: 19,
+    vinylOffsetY: 13,
+  };
diff --git a/src/components/Group/qortinoLookDebug.ts b/src/components/Group/qortinoLookDebug.ts
new file mode 100644
index 00000000..4da201e0
--- /dev/null
+++ b/src/components/Group/qortinoLookDebug.ts
@@ -0,0 +1,17 @@
+export type QortinoLookDebugSettings = {
+  antennaLength: number;
+  antennaScale: number;
+  bodyScale: number;
+  bodyWidthScale: number;
+  faceScale: number;
+  logoScale: number;
+};
+
+export const DEFAULT_QORTINO_LOOK_DEBUG_SETTINGS: QortinoLookDebugSettings = {
+  antennaLength: 0.85,
+  antennaScale: 1.7,
+  bodyScale: 0.95,
+  bodyWidthScale: 1,
+  faceScale: 1.45,
+  logoScale: 1.7,
+};
diff --git a/src/components/Group/useWebsocketStatus.tsx b/src/components/Group/useWebsocketStatus.tsx
index 63cba291..cccfd80f 100644
--- a/src/components/Group/useWebsocketStatus.tsx
+++ b/src/components/Group/useWebsocketStatus.tsx
@@ -1,24 +1,45 @@
 import { useEffect, useRef } from 'react';
-import { getBaseApiReactSocket } from '../../App';
+import {
+  cleanUrl,
+  getProtocol,
+  groupApiSocket,
+} from '../../background/background';
 import {
   executeEvent,
   subscribeToEvent,
   unsubscribeFromEvent,
 } from '../../utils/events';
-import { useSetAtom } from 'jotai';
-import { nodeInfosAtom } from '../../atoms/global';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { nodeInfosAtom, selectedNodeInfoAtom } from '../../atoms/global';
 
 export const useWebsocketStatus = () => {
   const lastPopup = useRef<null | number>(null);
 
   const setNodeInfos = useSetAtom(nodeInfosAtom);
+  const selectedNode = useAtomValue(selectedNodeInfoAtom);
   const socketRef = useRef(null);
+  const connectionIdRef = useRef(0);
   const timeoutIdRef = useRef(null); // No-pong timeout (close if no pong in 5s)
   const groupSocketTimeoutRef = useRef(null); // Next ping in 45s
+  const reconnectTimeoutRef = useRef(null);
+  const verifyCoreTimeoutRef = useRef(null);
+
+  const getStatusSocketBase = (nodeUrl?: string | null) => {
+    if (!nodeUrl) return groupApiSocket;
+    const protocol = getProtocol(nodeUrl) === 'http' ? 'ws://' : 'wss://';
+    return `${protocol}${cleanUrl(nodeUrl)}`;
+  };
+
   const forceCloseWebSocket = () => {
+    clearTimeout(timeoutIdRef.current);
+    clearTimeout(groupSocketTimeoutRef.current);
+    clearTimeout(reconnectTimeoutRef.current);
+    clearTimeout(verifyCoreTimeoutRef.current);
+    timeoutIdRef.current = null;
+    groupSocketTimeoutRef.current = null;
+    reconnectTimeoutRef.current = null;
+    verifyCoreTimeoutRef.current = null;
     if (socketRef.current) {
-      clearTimeout(timeoutIdRef.current);
-      clearTimeout(groupSocketTimeoutRef.current);
       socketRef.current.close(1000, 'forced');
       socketRef.current = null;
     }
@@ -41,13 +62,26 @@ export const useWebsocketStatus = () => {
   };
 
   useEffect(() => {
-    const pingHeads = () => {
+    const connectionId = connectionIdRef.current + 1;
+    connectionIdRef.current = connectionId;
+    const selectedNodeUrl = selectedNode?.url;
+    const socketBase = getStatusSocketBase(selectedNodeUrl);
+    const isCurrentConnection = (socket?: WebSocket | null) => {
+      if (connectionIdRef.current !== connectionId) return false;
+      if (socket && socketRef.current !== socket) return false;
+      return true;
+    };
+
+    const pingHeads = (socket: WebSocket) => {
       try {
-        if (socketRef.current?.readyState === WebSocket.OPEN) {
-          socketRef.current.send('ping');
+        if (
+          isCurrentConnection(socket) &&
+          socket.readyState === WebSocket.OPEN
+        ) {
+          socket.send('ping');
           timeoutIdRef.current = setTimeout(() => {
-            if (socketRef.current) {
-              socketRef.current.close();
+            if (isCurrentConnection(socket)) {
+              socket.close();
               clearTimeout(groupSocketTimeoutRef.current);
             }
           }, 5000); // Close if no pong in 5 seconds
@@ -58,55 +92,72 @@ export const useWebsocketStatus = () => {
     };
 
     const initWebsocketMessageGroup = async () => {
+      if (!isCurrentConnection()) return;
       forceCloseWebSocket(); // Ensure we close any existing connection
+      if (!isCurrentConnection()) return;
 
       try {
-        const socketLink = `${getBaseApiReactSocket()}/websockets/admin/status`;
-        socketRef.current = new WebSocket(socketLink);
+        const socketLink = `${socketBase}/websockets/admin/status`;
+        const socket = new WebSocket(socketLink);
+        socketRef.current = socket;
 
-        socketRef.current.onopen = () => {
-          setTimeout(pingHeads, 50); // Initial ping
+        socket.onopen = () => {
+          setTimeout(() => pingHeads(socket), 50); // Initial ping
         };
 
-        socketRef.current.onmessage = (e) => {
+        socket.onmessage = (e) => {
+          if (!isCurrentConnection(socket)) return;
           try {
             if (e.data === 'pong') {
               clearTimeout(timeoutIdRef.current);
-              groupSocketTimeoutRef.current = setTimeout(pingHeads, 20000); // Ping every 20 seconds
+              groupSocketTimeoutRef.current = setTimeout(
+                () => pingHeads(socket),
+                20000
+              ); // Ping every 20 seconds
               return;
             }
             const data = JSON.parse(e.data);
             if (data?.height) {
-              setNodeInfos(data);
+              setNodeInfos({
+                ...data,
+                sourceNodeUrl: selectedNodeUrl,
+                receivedAt: Date.now(),
+              });
             }
           } catch (error) {
             console.error('Error parsing onmessage data:', error);
           }
         };
 
-        socketRef.current.onclose = (event) => {
+        socket.onclose = (event) => {
+          if (!isCurrentConnection(socket)) return;
           clearTimeout(timeoutIdRef.current);
           clearTimeout(groupSocketTimeoutRef.current);
           setNodeInfos({});
           console.warn(`WebSocket closed: ${event.reason || 'unknown reason'}`);
           if (event.reason !== 'forced' && event.code !== 1000) {
             if (!lastPopup.current || Date.now() - lastPopup.current > 600000) {
-              setTimeout(() => {
-                sendMessageVerifyCoreNotRunning();
+              verifyCoreTimeoutRef.current = setTimeout(() => {
+                if (isCurrentConnection(socket)) {
+                  sendMessageVerifyCoreNotRunning();
+                }
               }, 18_000);
               lastPopup.current = Date.now();
             }
-            setTimeout(() => initWebsocketMessageGroup(), 10000); // Retry after 10 seconds
+            reconnectTimeoutRef.current = setTimeout(() => {
+              if (isCurrentConnection()) {
+                initWebsocketMessageGroup();
+              }
+            }, 10000); // Retry after 10 seconds
           }
         };
 
-        socketRef.current.onerror = (error) => {
+        socket.onerror = (error) => {
+          if (!isCurrentConnection(socket)) return;
           console.error('WebSocket error:', error);
           clearTimeout(timeoutIdRef.current);
           clearTimeout(groupSocketTimeoutRef.current);
-          if (socketRef.current) {
-            socketRef.current.close();
-          }
+          socket.close();
         };
       } catch (error) {
         console.error('Error initializing WebSocket:', error);
@@ -116,9 +167,10 @@ export const useWebsocketStatus = () => {
     initWebsocketMessageGroup(); // Initialize WebSocket on component mount
 
     return () => {
+      connectionIdRef.current += 1;
       forceCloseWebSocket(); // Clean up WebSocket on component unmount
     };
-  }, []);
+  }, [selectedNode?.apikey, selectedNode?.url]);
 
   return null;
 };
diff --git a/src/components/Language/LanguageSelector.tsx b/src/components/Language/LanguageSelector.tsx
index e15727ba..7ff09392 100644
--- a/src/components/Language/LanguageSelector.tsx
+++ b/src/components/Language/LanguageSelector.tsx
@@ -1,75 +1,199 @@
-import { useRef, useState } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { supportedLanguages } from '../../i18n/i18n';
 import {
-  Box,
-  Button,
-  FormControl,
+  ButtonBase,
+  Menu,
   MenuItem,
-  Select,
-  Tooltip,
+  Typography,
   useTheme,
 } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import LanguageIcon from '@mui/icons-material/Language';
 
-const LanguageSelector = () => {
+type LanguageSelectorProps = {
+  sidebar?: boolean;
+};
+
+function languageBase(code: string) {
+  return code.split('-')[0];
+}
+
+const LanguageSelector = ({ sidebar = false }: LanguageSelectorProps) => {
   const { i18n, t } = useTranslation(['core']);
-  const [showSelect, setShowSelect] = useState(false);
   const theme = useTheme();
-  const selectorRef = useRef(null);
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const sidebarButtonSx = {
+    alignItems: 'center',
+    borderRadius: '14px',
+    color: theme.palette.text.secondary,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 1,
+    justifyContent: 'flex-start',
+    minHeight: 58,
+    py: 1,
+    transition: 'background-color 180ms ease, color 180ms ease, box-shadow 140ms ease',
+    width: 56,
+    '& .sidebarSelectorIconWrap': {
+      transition: 'transform 150ms ease, color 180ms ease',
+    },
+    '&:hover': {
+      backgroundColor: theme.palette.action.hover,
+      color: theme.palette.text.primary,
+      boxShadow: `inset 0 0 0 1px ${alpha(theme.palette.border.main, 0.18)}, inset 0 1px 0 ${alpha(
+        theme.palette.common.white,
+        theme.palette.mode === 'dark' ? 0.03 : 0.12
+      )}`,
+      '& .sidebarSelectorIconWrap': {
+        transform: 'translateY(-1px)',
+      },
+    },
+    '&:focus-visible': {
+      backgroundColor: alpha(
+        theme.palette.action.hover,
+        theme.palette.mode === 'dark' ? 0.72 : 0.82
+      ),
+      boxShadow: `inset 0 0 0 1px ${alpha(theme.palette.border.main, 0.22)}, inset 0 1px 0 ${alpha(
+        theme.palette.common.white,
+        theme.palette.mode === 'dark' ? 0.03 : 0.12
+      )}`,
+      color: theme.palette.text.primary,
+      '& .sidebarSelectorIconWrap': {
+        transform: 'translateY(-1px)',
+      },
+    },
+  } as const;
 
-  const handleChange = (e) => {
-    const newLang = e.target.value;
-    i18n.changeLanguage(newLang);
-    setShowSelect(false);
+  const handleChange = (newLang: string) => {
+    void i18n.changeLanguage(newLang);
+    try {
+      localStorage.setItem('i18nextLng', newLang);
+    } catch {
+      /* ignore quota / privacy mode */
+    }
+    setAnchorEl(null);
   };
 
-  const currentLang = i18n.language;
-  const { name, flag } =
-    supportedLanguages[currentLang] || supportedLanguages['en'];
+  const currentBase = languageBase(i18n.language);
+  const { name } =
+    supportedLanguages[currentBase as keyof typeof supportedLanguages] ||
+    supportedLanguages.en;
+  const currentLangCode = currentBase.startsWith('en')
+    ? 'EN'
+    : currentBase.slice(0, 2).toUpperCase();
 
   return (
-    <Box ref={selectorRef}>
-      {!showSelect && (
-        <Button
-          onClick={() => setShowSelect(true)}
-          style={{
-            fontSize: '1.3rem',
-          }}
-          aria-label={t('core:current_language', {
-            language: name,
-            postProcess: 'capitalizeFirstChar',
-          })}
-        >
-          {flag}
-        </Button>
-      )}
-
-      {showSelect && (
-        <FormControl
-          size="small"
-          sx={{
-            minWidth: 120,
-            backgroundColor: theme.palette.background.paper,
-          }}
-        >
-          <Select
-            autoFocus
-            id="language-select"
-            labelId="language-select-label"
-            onChange={handleChange}
-            onClose={() => setShowSelect(false)}
-            open
-            value={currentLang}
+    <>
+      <ButtonBase
+        disableRipple
+        onClick={(event) => setAnchorEl(event.currentTarget)}
+        aria-label={t('core:current_language', {
+          language: name,
+          postProcess: 'capitalizeFirstChar',
+        })}
+        aria-haspopup="listbox"
+        aria-expanded={!!anchorEl}
+        sx={
+          sidebar
+            ? sidebarButtonSx
+            : {
+                alignItems: 'center',
+                borderRadius: '12px',
+                color: theme.palette.text.secondary,
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 0.2,
+                justifyContent: 'center',
+                minHeight: 60,
+                px: 1,
+                py: 1,
+                transition: 'background-color 180ms ease, color 180ms ease',
+                width: 62,
+                '&:hover': {
+                  backgroundColor: theme.palette.action.hover,
+                  color: theme.palette.text.primary,
+                },
+              }
+        }
+      >
+        {sidebar ? (
+          <>
+            <Typography
+              className="sidebarSelectorIconWrap"
+              sx={{
+                alignItems: 'center',
+                display: 'flex',
+                height: '40px',
+                justifyContent: 'center',
+                width: '40px',
+              }}
+            >
+              <LanguageIcon sx={{ fontSize: '1.45rem' }} />
+            </Typography>
+            <Typography
+              sx={{
+                color: 'inherit',
+                fontSize: '11px',
+                fontWeight: 600,
+                letterSpacing: '0.01em',
+                lineHeight: 1,
+              }}
+            >
+              {currentLangCode}
+            </Typography>
+          </>
+        ) : (
+          <Typography
+            sx={{
+              color: 'inherit',
+              fontSize: '13px',
+              fontWeight: 700,
+              letterSpacing: '0.03em',
+              lineHeight: 1,
+            }}
           >
-            {Object.entries(supportedLanguages).map(([code, { name }]) => (
-              <MenuItem key={code} value={code}>
-                {code.toUpperCase()} – {name}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-      )}
-    </Box>
+            {currentLangCode}
+          </Typography>
+        )}
+      </ButtonBase>
+
+      <Menu
+        anchorEl={anchorEl}
+        open={!!anchorEl}
+        onClose={() => setAnchorEl(null)}
+        anchorOrigin={{ vertical: 'center', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'center', horizontal: 'left' }}
+        /* Footer chrome (e.g. NotAuthenticatedFooter) uses z-index 2000; default modal menu is ~1300, so without this the anchor button paints over the panel. */
+        sx={{ zIndex: (muiTheme) => muiTheme.zIndex.modal + 1100 }}
+        slotProps={{
+          paper: {
+            sx: {
+              backgroundColor: theme.palette.background.paper,
+              border: `1px solid ${theme.palette.border.subtle}`,
+              boxShadow:
+                theme.palette.mode === 'dark'
+                  ? '0 12px 28px rgba(0,0,0,0.35)'
+                  : '0 10px 24px rgba(0,0,0,0.14)',
+              minWidth: 170,
+              ml: 1,
+            },
+          },
+        }}
+      >
+        {(Object.entries(supportedLanguages) as [string, { name: string; flag: string }][]).map(
+          ([code, langData]) => (
+            <MenuItem
+              key={code}
+              selected={currentBase === code}
+              onClick={() => handleChange(code)}
+            >
+              {langData.flag} {code.toUpperCase()} - {langData.name}
+            </MenuItem>
+          )
+        )}
+      </Menu>
+    </>
   );
 };
 
diff --git a/src/components/Minting/Minting.tsx b/src/components/Minting/Minting.tsx
index d5d2f82b..dfa3c486 100644
--- a/src/components/Minting/Minting.tsx
+++ b/src/components/Minting/Minting.tsx
@@ -1,7 +1,5 @@
 import {
-  Alert,
   alpha,
-  AppBar,
   Box,
   Button,
   Dialog,
@@ -9,22 +7,12 @@ import {
   DialogContent,
   DialogTitle,
   IconButton,
-  Snackbar,
-  Tab,
-  Tabs,
-  Toolbar,
   Typography,
   useTheme,
 } from '@mui/material';
-import {
-  SyntheticEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import CloseIcon from '@mui/icons-material/Close';
+import mintingWatermark from '../../assets/minting/blue-grey-menu-button2-1.png';
 import { getBaseApiReact } from '../../App';
 import {
   executeEvent,
@@ -37,7 +25,6 @@ import { useModal } from '../../hooks/useModal.tsx';
 import { useAtom, useSetAtom } from 'jotai';
 import { memberGroupsAtom, txListAtom } from '../../atoms/global';
 import { Trans, useTranslation } from 'react-i18next';
-import { TransitionUp } from '../../common/Transitions.tsx';
 import {
   nextLevel,
   averageBlockDay,
@@ -45,13 +32,13 @@ import {
   dayReward,
   levelUpBlocks,
   levelUpDays,
-  mintingStatus,
   countMintersInLevel,
   currentTier,
   tierPercent,
   countReward,
   countRewardDay,
 } from './MintingStats.tsx';
+import { CustomizedSnackbars } from '../Snackbar/Snackbar';
 
 export type AddressLevelEntry = {
   level: number;
@@ -61,10 +48,17 @@ export type AddressLevelEntry = {
 export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
   const setTxList = useSetAtom(txListAtom);
   const [groups] = useAtom(memberGroupsAtom);
+  const theme = useTheme();
+  const { t } = useTranslation([
+    'auth',
+    'core',
+    'group',
+    'question',
+    'tutorial',
+  ]);
 
   const [mintingAccounts, setMintingAccounts] = useState([]);
   const [accountInfo, setAccountInfo] = useState(null);
-  const [mintingKey, setMintingKey] = useState('');
   const [rewardShares, setRewardShares] = useState([]);
   const [adminInfo, setAdminInfo] = useState({});
   const [nodeStatus, setNodeStatus] = useState({});
@@ -73,19 +67,14 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
   const [openSnack, setOpenSnack] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const [nodeHeightBlock, setNodeHeightBlock] = useState({});
-  const [valueMintingTab, setValueMintingTab] = useState(0);
   const { isShow: isShowNext, onOk, show: showNext } = useModal();
-  const theme = useTheme();
-  const { t } = useTranslation([
-    'auth',
-    'core',
-    'group',
-    'question',
-    'tutorial',
-  ]);
   const [info, setInfo] = useState(null);
   const [names, setNames] = useState({});
-  const [accountInfos, setAccountInfos] = useState({});
+  const [statsAccountInfo, setStatsAccountInfo] = useState(null);
+  const [isStatsLoading, setIsStatsLoading] = useState(false);
+  const [selectedMintingAccountKey, setSelectedMintingAccountKey] = useState(
+    null
+  );
   const [showWaitDialog, setShowWaitDialog] = useState(false);
   const timeoutNodeStatusRef = useRef<ReturnType<typeof setTimeout> | null>(
     null
@@ -93,6 +82,7 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
   const timeoutAdminInfoRef = useRef<ReturnType<typeof setTimeout> | null>(
     null
   );
+
   const isPartOfMintingGroup = useMemo(() => {
     if (groups?.length === 0) return false;
     return !!groups?.find((item) => item?.groupId?.toString() === '694');
@@ -124,68 +114,55 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
       const response = await fetch(url);
       const nameData = await response.json();
       if (nameData?.name) {
-        setNames((prev) => {
-          return {
-            ...prev,
-            [address]: nameData?.name,
-          };
-        });
+        setNames((prev) => ({
+          ...prev,
+          [address]: nameData?.name,
+        }));
       } else {
-        setNames((prev) => {
-          return {
-            ...prev,
-            [address]: null,
-          };
-        });
+        setNames((prev) => ({
+          ...prev,
+          [address]: null,
+        }));
       }
     } catch (error) {
       console.log(error);
     }
   };
 
-  function a11yProps(index: number) {
-    return {
-      id: `simple-tab-${index}`,
-      'aria-controls': `simple-tabpanel-${index}`,
-    };
-  }
-
-  const getAccountInfo = async (address: string, others?: boolean) => {
+  const getAccountInfo = async (address: string) => {
     try {
-      if (!others) {
-        setIsLoading(true);
-      }
+      setIsLoading(true);
       const url = `${getBaseApiReact()}/addresses/${address}`;
       const response = await fetch(url);
       if (!response.ok) {
         throw new Error('network error');
       }
       const data = await response.json();
-      if (others) {
-        setAccountInfos((prev) => {
-          return {
-            ...prev,
-            [address]: data,
-          };
-        });
-      } else {
-        setAccountInfo(data);
-      }
+      setAccountInfo(data);
     } catch (error) {
       console.log(error);
     } finally {
-      if (!others) {
-        setIsLoading(false);
-      }
+      setIsLoading(false);
     }
   };
 
-  const daysToNextLevel = levelUpDays(
-    accountInfo,
-    adminInfo,
-    nodeHeightBlock,
-    nodeStatus
-  );
+  const getStatsAccountInfo = useCallback(async (address: string) => {
+    if (!address) return;
+    try {
+      setIsStatsLoading(true);
+      const url = `${getBaseApiReact()}/addresses/${address}`;
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error('network error');
+      }
+      const data = await response.json();
+      setStatsAccountInfo(data);
+    } catch (error) {
+      console.log(error);
+    } finally {
+      setIsStatsLoading(false);
+    }
+  }, []);
 
   const refreshRewardShare = () => {
     if (!myAddress) return;
@@ -217,7 +194,7 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
     } catch (error) {
       console.log(error);
     } finally {
-      timeoutAdminInfoRef.current = setTimeout(getAccountInfo, 30000);
+      timeoutAdminInfoRef.current = setTimeout(getAdminInfo, 30000);
     }
   }, []);
 
@@ -261,9 +238,7 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
         setAddressLevel(data);
         const level7 = data.find((entry) => entry.level === 7)?.count || 0;
         const level8 = data.find((entry) => entry.level === 8)?.count || 0;
-        const tier4Count =
-          parseFloat(level7.toString()) + parseFloat(level8.toString());
-        setTier4Online(tier4Count);
+        setTier4Online(level7 + level8);
       }
     } catch (error) {
       console.error('Request failed', error);
@@ -272,7 +247,7 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
 
   const getRewardShares = useCallback(async (address) => {
     try {
-      const url = `${getBaseApiReact()}/addresses/rewardshares?involving=${address}`; // TODO check API (still useful?)
+      const url = `${getBaseApiReact()}/addresses/rewardshares?involving=${address}`;
       const response = await fetch(url);
       if (!response.ok) {
         throw new Error('network error');
@@ -285,27 +260,145 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
     }
   }, []);
 
-  const addMintingAccount = useCallback(async (val) => {
-    try {
-      setIsLoading(true);
+  const addMintingAccount = useCallback(
+    async (val) => {
+      try {
+        setIsLoading(true);
+        return await new Promise((res, rej) => {
+          window
+            .sendMessage(
+              'ADMIN_ACTION',
+              {
+                type: 'addmintingaccount',
+                value: val,
+              },
+              180000,
+              true
+            )
+            .then((response) => {
+              if (!response?.error) {
+                res(response);
+                setTimeout(() => {
+                  getMintingAccounts();
+                }, 300);
+                return;
+              }
+              rej({ message: response.error });
+            })
+            .catch((error) => {
+              rej({
+                message:
+                  error.message ||
+                  t('core:message.error.generic', {
+                    postProcess: 'capitalizeFirstChar',
+                  }),
+              });
+            });
+        });
+      } catch (error) {
+        setInfo({
+          type: 'error',
+          message:
+            error?.message ||
+            t('core:message.error.minting_account_add', {
+              postProcess: 'capitalizeFirstChar',
+            }),
+        });
+        setOpenSnack(true);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [getMintingAccounts, t]
+  );
+
+  const removeMintingAccount = useCallback(
+    async (val, acct) => {
+      try {
+        setIsLoading(true);
+        return await new Promise((res, rej) => {
+          window
+            .sendMessage(
+              'ADMIN_ACTION',
+              {
+                type: 'removemintingaccount',
+                value: val,
+              },
+              180000,
+              true
+            )
+            .then((response) => {
+              if (!response?.error) {
+                res(response);
+                setTimeout(() => {
+                  getMintingAccounts();
+                }, 300);
+                return;
+              }
+              rej({ message: response.error });
+            })
+            .catch((error) => {
+              rej({
+                message:
+                  error.message ||
+                  t('core:message.error.generic', {
+                    postProcess: 'capitalizeFirstChar',
+                  }),
+              });
+            });
+        });
+      } catch (error) {
+        setInfo({
+          type: 'error',
+          message:
+            error?.message ||
+            t('core:message.error.minting_account_remove', {
+              postProcess: 'capitalizeFirstChar',
+            }),
+        });
+        setOpenSnack(true);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [getMintingAccounts, t]
+  );
+
+  const createRewardShare = useCallback(
+    async (publicKey, recipient) => {
+      const fee = await getFee('REWARD_SHARE');
+
+      await show({
+        message: t('core:message.question.perform_transaction', {
+          action: 'REWARD_SHARE',
+          postProcess: 'capitalizeFirstChar',
+        }),
+        publishFee: fee.fee + ' QORT',
+      });
+
       return await new Promise((res, rej) => {
         window
-          .sendMessage(
-            'ADMIN_ACTION',
-            {
-              type: 'addmintingaccount',
-              value: val,
-            },
-            180000,
-            true
-          )
+          .sendMessage('createRewardShare', {
+            recipientPublicKey: publicKey,
+          })
           .then((response) => {
             if (!response?.error) {
+              setTxList((prev) => [
+                {
+                  recipient,
+                  ...response,
+                  type: 'add-rewardShare',
+                  label: t('group:message.success.rewardshare_add', {
+                    postProcess: 'capitalizeFirstChar',
+                  }),
+                  labelDone: t('group:message.success.rewardshare_add_label', {
+                    postProcess: 'capitalizeFirstChar',
+                  }),
+                  done: false,
+                },
+                ...prev,
+              ]);
               res(response);
-              setMintingKey('');
-              setTimeout(() => {
-                getMintingAccounts();
-              }, 300);
               return;
             }
             rej({ message: response.error });
@@ -320,42 +413,20 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
             });
           });
       });
-    } catch (error) {
-      setInfo({
-        type: 'error',
-        message:
-          error?.message ||
-          t('core:message.error.minting_account_add', {
-            postProcess: 'capitalizeFirstChar',
-          }),
-      });
-      setOpenSnack(true);
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
+    },
+    [setTxList, show, t]
+  );
 
-  const removeMintingAccount = useCallback(async (val, acct) => {
-    try {
-      setIsLoading(true);
+  const getRewardSharePrivateKey = useCallback(
+    async (publicKey) => {
       return await new Promise((res, rej) => {
         window
-          .sendMessage(
-            'ADMIN_ACTION',
-            {
-              type: 'removemintingaccount',
-              value: val,
-            },
-            180000,
-            true
-          )
+          .sendMessage('getRewardSharePrivateKey', {
+            recipientPublicKey: publicKey,
+          })
           .then((response) => {
             if (!response?.error) {
               res(response);
-
-              setTimeout(() => {
-                getMintingAccounts();
-              }, 300);
               return;
             }
             rej({ message: response.error });
@@ -370,95 +441,9 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
             });
           });
       });
-    } catch (error) {
-      setInfo({
-        type: 'error',
-        message:
-          error?.message ||
-          t('core:message.error.minting_account_remove', {
-            postProcess: 'capitalizeFirstChar',
-          }),
-      });
-      setOpenSnack(true);
-    } finally {
-      setIsLoading(false);
-    }
-  }, []);
-
-  const createRewardShare = useCallback(async (publicKey, recipient) => {
-    const fee = await getFee('REWARD_SHARE');
-
-    await show({
-      message: t('core:message.question.perform_transaction', {
-        action: 'REWARD_SHARE',
-        postProcess: 'capitalizeFirstChar',
-      }),
-      publishFee: fee.fee + ' QORT',
-    });
-
-    return await new Promise((res, rej) => {
-      window
-        .sendMessage('createRewardShare', {
-          recipientPublicKey: publicKey,
-        })
-        .then((response) => {
-          if (!response?.error) {
-            setTxList((prev) => [
-              {
-                recipient,
-                ...response,
-                type: 'add-rewardShare',
-                label: t('group:message.success.rewardshare_add', {
-                  postProcess: 'capitalizeFirstChar',
-                }),
-                labelDone: t('group:message.success.rewardshare_add_label', {
-                  postProcess: 'capitalizeFirstChar',
-                }),
-                done: false,
-              },
-              ...prev,
-            ]);
-            res(response);
-            return;
-          }
-          rej({ message: response.error });
-        })
-        .catch((error) => {
-          rej({
-            message:
-              error.message ||
-              t('core:message.error.generic', {
-                postProcess: 'capitalizeFirstChar',
-              }),
-          });
-        });
-    });
-  }, []);
-
-  const getRewardSharePrivateKey = useCallback(async (publicKey) => {
-    return await new Promise((res, rej) => {
-      window
-        .sendMessage('getRewardSharePrivateKey', {
-          recipientPublicKey: publicKey,
-        })
-        .then((response) => {
-          if (!response?.error) {
-            res(response);
-            return;
-          }
-          rej({ message: response.error });
-        })
-        .catch((error) => {
-          rej({
-            message:
-              error.message ||
-              t('core:message.error.generic', {
-                postProcess: 'capitalizeFirstChar',
-              }),
-          });
-        });
-    });
-  }, []);
+    },
+    [t]
+  );
 
   const waitUntilRewardShareIsConfirmed = async (timeoutMs = 600000) => {
     const pollingInterval = 30000;
@@ -466,16 +451,16 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
     const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
 
     while (Date.now() - startTime < timeoutMs) {
-      const rewardShares = await getRewardShares(myAddress);
-      const findRewardShare = rewardShares?.find(
+      const rewardSharesResult = await getRewardShares(myAddress);
+      const findRewardShare = rewardSharesResult?.find(
         (item) =>
           item?.recipient === myAddress && item?.mintingAccount === myAddress
       );
 
       if (findRewardShare) {
-        return true; // Exit early if found
+        return true;
       }
-      await sleep(pollingInterval); // Wait before the next poll
+      await sleep(pollingInterval);
     }
 
     throw new Error(
@@ -501,9 +486,7 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
         await createRewardShare(accountInfo?.publicKey, myAddress);
         setShowWaitDialog(true);
         await waitUntilRewardShareIsConfirmed();
-        await showNext({
-          message: '',
-        });
+        await showNext({ message: '' });
 
         const privateRewardShare = await getRewardSharePrivateKey(
           accountInfo?.publicKey
@@ -544,840 +527,1187 @@ export const Minting = ({ setIsOpenMinting, myAddress, show }) => {
         timeoutAdminInfoRef.current = null;
       }
     };
-  }, []);
+  }, [getAdminInfo, getMintingAccounts, getNodeStatus]);
 
   useEffect(() => {
     if (!myAddress) return;
     getRewardShares(myAddress);
     getAccountInfo(myAddress);
-  }, [myAddress]);
+  }, [myAddress, getRewardShares]);
+
+  const effectiveSelectedMintingKey = useMemo(() => {
+    if (!mintingAccounts?.length) return null;
+    if (
+      selectedMintingAccountKey &&
+      mintingAccounts.some((a) => a?.mintingAccount === selectedMintingAccountKey)
+    ) {
+      return selectedMintingAccountKey;
+    }
+    const mine = mintingAccounts.find(
+      (a) =>
+        a?.recipientAccount === myAddress || a?.mintingAccount === myAddress
+    );
+    return mine?.mintingAccount ?? mintingAccounts[0]?.mintingAccount ?? null;
+  }, [mintingAccounts, selectedMintingAccountKey, myAddress]);
+
+  const statsAddress = useMemo(() => {
+    if (mintingAccounts?.length > 0 && effectiveSelectedMintingKey) {
+      return effectiveSelectedMintingKey;
+    }
+    return myAddress || '';
+  }, [mintingAccounts, effectiveSelectedMintingKey, myAddress]);
+
+  useEffect(() => {
+    if (!statsAddress) {
+      setStatsAccountInfo(null);
+      return;
+    }
+    if (statsAddress === myAddress) {
+      if (accountInfo?.address === statsAddress) {
+        setStatsAccountInfo(accountInfo);
+        return;
+      }
+      getStatsAccountInfo(statsAddress);
+      return;
+    }
+    getStatsAccountInfo(statsAddress);
+  }, [statsAddress, myAddress, accountInfo, getStatsAccountInfo]);
 
-  const handleClose = () => {
+  const handleCloseSnack = () => {
     setOpenSnack(false);
     setTimeout(() => {
       setInfo(null);
     }, 250);
   };
 
-  const handleChange = (event: SyntheticEvent, newValue: number) => {
-    setValueMintingTab(newValue);
+  const closeMinting = () => {
+    setIsOpenMinting(false);
+  };
+
+  const openQMintership = useCallback(() => {
+    setIsOpenMinting(false);
+    window.setTimeout(() => {
+      executeEvent('addTab', {
+        data: { service: 'APP', name: 'q-mintership', path: '' },
+      });
+      executeEvent('open-apps-mode', {});
+    }, 0);
+  }, [setIsOpenMinting]);
+
+  const formatMetric = (
+    value: number | string | null | undefined,
+    digits = 2,
+    suffix = ''
+  ) => {
+    const numericValue =
+      typeof value === 'number' ? value : Number.parseFloat(String(value));
+    return Number.isFinite(numericValue)
+      ? `${numericValue.toFixed(digits)}${suffix}`
+      : '-';
   };
 
+  const isNodeSynchronizing = nodeStatus?.isSynchronizing === true;
+  const daysToNextLevel = levelUpDays(
+    statsAccountInfo,
+    adminInfo,
+    nodeHeightBlock,
+    nodeStatus
+  );
+  const progressLevel = nextLevel(statsAccountInfo?.level);
+  const progressBlocks = formatMetric(
+    levelUpBlocks(statsAccountInfo, nodeStatus),
+    0
+  );
+  const progressDays =
+    typeof daysToNextLevel === 'number' && Number.isFinite(daysToNextLevel)
+      ? Math.max(0, Math.round(daysToNextLevel))
+      : null;
+  const walletDisplayName =
+    handleNames(accountInfo?.address) || myAddress || '-';
+  const statsDisplayName =
+    handleNames(statsAccountInfo?.address) || statsAddress || '-';
+  const showAddressLine =
+    !!statsAccountInfo?.address && statsDisplayName !== statsAccountInfo?.address;
+  const showWalletAddressLine =
+    !!accountInfo?.address && walletDisplayName !== accountInfo?.address;
+  const viewingNodeMintingSelection =
+    !!effectiveSelectedMintingKey &&
+    !!mintingAccounts?.some(
+      (a) => a?.mintingAccount === effectiveSelectedMintingKey
+    );
+
+  const userMintingState = useMemo(() => {
+    if (isNodeSynchronizing) {
+      return {
+        tone: 'syncing',
+        title: t('core:minting.panel.state_syncing_title'),
+        description: t('core:minting.panel.state_syncing_body'),
+      };
+    }
+    if (viewingNodeMintingSelection) {
+      return {
+        tone: 'active',
+        title: t('core:minting.panel.state_active_title'),
+        description: t(
+          'core:minting.panel.state_active_body_node_selection'
+        ),
+      };
+    }
+    if (accountIsMinting) {
+      return {
+        tone: 'active',
+        title: t('core:minting.panel.state_active_title'),
+        description: t('core:minting.panel.state_active_body_account'),
+      };
+    }
+    if (!isPartOfMintingGroup) {
+      return {
+        tone: 'inactive',
+        title: t('core:minting.panel.state_inactive_title'),
+        description: t('core:minting.panel.state_inactive_body_not_in_group'),
+      };
+    }
+    if (mintingAccounts?.length > 1) {
+      return {
+        tone: 'inactive',
+        title: t('core:minting.panel.state_inactive_title'),
+        description: t('core:minting.panel.state_inactive_body_multi_key'),
+      };
+    }
+    return {
+      tone: 'inactive',
+      title: t('core:minting.panel.state_inactive_title'),
+      description: t('core:minting.panel.state_inactive_body_ready'),
+    };
+  }, [
+    accountIsMinting,
+    isNodeSynchronizing,
+    isPartOfMintingGroup,
+    mintingAccounts?.length,
+    t,
+    viewingNodeMintingSelection,
+  ]);
+
+  const statusToneStyles = {
+    active: {
+      background: alpha('#74d28f', theme.palette.mode === 'dark' ? 0.085 : 0.11),
+      borderColor: alpha('#74d28f', 0.11),
+      accent: '#86d89d',
+    },
+    syncing: {
+      background: alpha('#9eb8df', theme.palette.mode === 'dark' ? 0.08 : 0.1),
+      borderColor: alpha('#9eb8df', 0.1),
+      accent: '#a8c2ea',
+    },
+    inactive: {
+      background: alpha('#e59aa7', theme.palette.mode === 'dark' ? 0.07 : 0.095),
+      borderColor: alpha('#e59aa7', 0.09),
+      accent: '#f0a6b2',
+    },
+  } as const;
+
+  const currentStatusTone = statusToneStyles[userMintingState.tone];
+
+  const nextStepDescription = useMemo(() => {
+    if (!isPartOfMintingGroup) {
+      return t('core:minting.panel.next_step_visit_q_mintership');
+    }
+    if (accountIsMinting) {
+      return t('core:minting.panel.next_step_already_active');
+    }
+    if (isNodeSynchronizing) {
+      return t('core:minting.panel.next_step_wait_sync');
+    }
+    if (mintingAccounts?.length > 1) {
+      return t('group:message.generic.minting_keys_per_node', {
+        postProcess: 'capitalizeFirstChar',
+      });
+    }
+    return t('core:minting.panel.next_step_start_when_ready');
+  }, [
+    accountIsMinting,
+    isNodeSynchronizing,
+    isPartOfMintingGroup,
+    mintingAccounts?.length,
+    t,
+  ]);
+
+  const sectionLabelSx = {
+    color: alpha(theme.palette.text.secondary, 0.64),
+    display: 'block',
+    fontSize: '0.68rem',
+    fontWeight: 700,
+    letterSpacing: '0.11em',
+    mb: 0.9,
+    textTransform: 'uppercase',
+  } as const;
+
+  const surfaceCardSx = {
+    background:
+      theme.palette.mode === 'dark'
+        ? 'linear-gradient(180deg, rgba(22,25,32,0.68) 0%, rgba(18,21,28,0.76) 100%)'
+        : 'linear-gradient(180deg, rgba(249,251,254,0.84) 0%, rgba(243,247,251,0.92) 100%)',
+    border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+    borderRadius: '12px',
+    boxShadow: 'none',
+  } as const;
+
+  const sectionDividerSx = {
+    mt: 2.15,
+    pt: 2.05,
+    borderTop: `1px solid ${alpha(theme.palette.divider, 0.16)}`,
+  } as const;
+
+  const metricListRowSx = {
+    alignItems: 'center',
+    display: 'grid',
+    gap: 1.5,
+    gridTemplateColumns: { xs: '1fr', sm: 'minmax(0, 1fr) auto' },
+    py: 1.05,
+    '&:not(:last-of-type)': {
+      borderBottom: `1px solid ${alpha(theme.palette.divider, 0.14)}`,
+    },
+  } as const;
+
+  const metricLabelSx = {
+    color: alpha(theme.palette.text.secondary, 0.6),
+    fontSize: '0.88rem',
+  } as const;
+
+  const metricValueSx = {
+    fontSize: '0.93rem',
+    fontWeight: 700,
+    textAlign: 'right',
+  } as const;
+
+  const silkyPrimaryButtonSx = {
+    background:
+      'linear-gradient(180deg, rgba(151,189,246,0.98) 0%, rgba(120,163,228,0.98) 100%)',
+    border: '1px solid rgba(201,223,255,0.42)',
+    borderRadius: '10px',
+    boxShadow:
+      'inset 0 1px 0 rgba(255,255,255,0.34), 0 10px 24px rgba(44,88,152,0.24)',
+    color: '#0E1827',
+    fontWeight: 800,
+    letterSpacing: '0.01em',
+    px: 2.1,
+    py: 1.1,
+    textTransform: 'none',
+    '&:hover': {
+      background:
+        'linear-gradient(180deg, rgba(160,196,250,1) 0%, rgba(128,171,233,1) 100%)',
+      boxShadow:
+        'inset 0 1px 0 rgba(255,255,255,0.36), 0 12px 26px rgba(44,88,152,0.28)',
+    },
+    '&.Mui-disabled': {
+      background: alpha(theme.palette.action.disabledBackground, 0.9),
+      borderColor: alpha(theme.palette.divider, 0.36),
+      boxShadow: 'none',
+      color: theme.palette.text.disabled,
+    },
+  } as const;
+
+  const silkyDangerButtonSx = {
+    background:
+      'linear-gradient(180deg, rgba(248,150,160,0.96) 0%, rgba(226,101,118,0.98) 100%)',
+    border: '1px solid rgba(255,214,219,0.4)',
+    borderRadius: '10px',
+    boxShadow:
+      'inset 0 1px 0 rgba(255,255,255,0.3), 0 10px 24px rgba(126,29,44,0.22)',
+    color: '#2A0C12',
+    fontWeight: 800,
+    letterSpacing: '0.01em',
+    px: 1.8,
+    py: 0.95,
+    textTransform: 'none',
+    '&:hover': {
+      background:
+        'linear-gradient(180deg, rgba(250,158,168,1) 0%, rgba(230,110,127,1) 100%)',
+      boxShadow:
+        'inset 0 1px 0 rgba(255,255,255,0.34), 0 12px 26px rgba(126,29,44,0.26)',
+    },
+  } as const;
+
+  const summaryMetricRows = [
+    {
+      label: t('core:minting.reward_per_day', {
+        postProcess: 'capitalizeEachFirstChar',
+      }),
+      value:
+        formatMetric(
+          countRewardDay(
+            statsAccountInfo,
+            addressLevel,
+            adminInfo,
+            nodeHeightBlock,
+            nodeStatus,
+            tier4Online
+          ),
+          4
+        ) + ' QORT',
+    },
+  ];
+
+  const blockchainRows = [
+    {
+      label: t('core:minting.average_blocktime', {
+        postProcess: 'capitalizeEachFirstChar',
+      }),
+      value: t('core:time.second', {
+        count: parseFloat(formatMetric(averageBlockTime(adminInfo, nodeHeightBlock))),
+        postProcess: 'capitalizeEachFirstChar',
+      }),
+    },
+    {
+      label: t('core:minting.average_blocks_per_day', {
+        postProcess: 'capitalizeEachFirstChar',
+      }),
+      value: formatMetric(averageBlockDay(adminInfo, nodeHeightBlock)),
+    },
+    {
+      label: t('core:minting.average_created_qorts_per_day', {
+        postProcess: 'capitalizeEachFirstChar',
+      }),
+      value: formatMetric(dayReward(adminInfo, nodeHeightBlock, nodeStatus)) + ' QORT',
+    },
+  ];
+
+  const directRewardRows = [
+    {
+      label: t('core:minting.current_tier', {
+        postProcess: 'capitalizeEachFirstChar',
+      }),
+      value: t('core:minting.current_tier_content', {
+        tier: currentTier(statsAccountInfo?.level)
+          ? currentTier(statsAccountInfo?.level)[0]
+          : '',
+        levels: currentTier(statsAccountInfo?.level)
+          ? currentTier(statsAccountInfo?.level)[1]
+          : '',
+        postProcess: 'capitalizeEachFirstChar',
+      }),
+    },
+    {
+      label: t('core:minting.tier_share_per_block', {
+        postProcess: 'capitalizeEachFirstChar',
+      }),
+      value:
+        formatMetric(tierPercent(statsAccountInfo, tier4Online), 0) + ' %',
+    },
+    {
+      label: t('core:minting.reward_per_block', {
+        postProcess: 'capitalizeEachFirstChar',
+      }),
+      value:
+        formatMetric(
+          countReward(
+            statsAccountInfo,
+            addressLevel,
+            nodeStatus,
+            tier4Online
+          ),
+          8
+        ) + ' QORT',
+    },
+  ];
+
+  const networkContextRows = [
+    {
+      label: t('core:minting.total_minter_in_tier', {
+        postProcess: 'capitalizeEachFirstChar',
+      }),
+      value: formatMetric(
+        countMintersInLevel(
+          statsAccountInfo?.level,
+          addressLevel,
+          tier4Online
+        ),
+        0
+      ),
+    },
+  ];
+
   return (
-    <Dialog
-      open={true}
-      maxWidth="lg"
-      fullWidth
-      fullScreen
-      slots={{
-        transition: TransitionUp,
-      }}
-    >
-      <AppBar sx={{ position: 'relative' }}>
-        <Toolbar>
-          <Typography sx={{ ml: 2, flex: 1 }} variant="h4" component="div">
-            {t('group:message.generic.manage_minting', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Typography>
+    <>
+      <Dialog
+        open={true}
+        onClose={closeMinting}
+        maxWidth={false}
+        fullWidth
+        BackdropProps={{
+          sx: {
+            backdropFilter: 'blur(12px)',
+            backgroundColor: alpha('#07090D', 0.66),
+          },
+        }}
+        PaperProps={{
+          sx: {
+            background:
+              theme.palette.mode === 'dark'
+                ? 'linear-gradient(180deg, rgba(20,23,30,0.985) 0%, rgba(15,17,23,0.99) 100%)'
+                : 'linear-gradient(180deg, rgba(251,253,255,0.985) 0%, rgba(244,247,251,0.99) 100%)',
+            border: `1px solid ${alpha(theme.palette.divider, 0.42)}`,
+            borderRadius: '14px',
+            boxShadow:
+              theme.palette.mode === 'dark'
+                ? '0 34px 120px rgba(0,0,0,0.46)'
+                : '0 28px 88px rgba(18,28,45,0.16)',
+            height: { xs: 'calc(100vh - 32px)', md: 'min(86vh, 920px)' },
+            margin: { xs: 2, md: 3 },
+            maxHeight: 'calc(100vh - 24px)',
+            maxWidth: 'none',
+            overflow: 'hidden',
+            width: 'min(1180px, calc(100vw - 48px))',
+          },
+        }}
+      >
+        <Box
+          sx={{
+            alignItems: 'center',
+            borderBottom: `1px solid ${alpha(theme.palette.divider, 0.42)}`,
+            display: 'flex',
+            justifyContent: 'space-between',
+            minHeight: 60,
+            px: { xs: 2, md: 2.75 },
+            py: 1.1,
+          }}
+        >
+          <Box sx={{ minWidth: 0 }}>
+            <Typography
+              sx={{
+                fontSize: '1.12rem',
+                fontWeight: 800,
+                letterSpacing: '-0.02em',
+                lineHeight: 1.1,
+              }}
+            >
+              {t('group:message.generic.manage_minting', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+            </Typography>
+            <Typography
+              sx={{
+                color: theme.palette.text.secondary,
+                fontSize: '0.84rem',
+                mt: 0.45,
+              }}
+            >
+              {t('core:minting.panel.dialog_subtitle')}
+            </Typography>
+          </Box>
 
           <IconButton
-            color="inherit"
-            edge="start"
-            onClick={() => setIsOpenMinting(false)}
+            onClick={closeMinting}
             aria-label={t('core:action.close', {
               postProcess: 'capitalizeFirstChar',
             })}
             sx={{
-              bgcolor: theme.palette.background.default,
-              color: theme.palette.text.primary,
+              borderRadius: '8px',
+              color: theme.palette.text.secondary,
+              height: 34,
+              width: 34,
+              '&:hover': {
+                backgroundColor: theme.palette.action.hover,
+                color: theme.palette.text.primary,
+              },
             }}
           >
             <CloseIcon />
           </IconButton>
-        </Toolbar>
-      </AppBar>
-
-      <Box
-        sx={{
-          bgcolor: theme.palette.background.default,
-          color: theme.palette.text.primary,
-          display: 'flex',
-          flexDirection: 'column',
-          flexGrow: 1,
-          overflowY: 'auto',
-        }}
-      >
+        </Box>
+
         <Box
-          sx={{ borderBottom: 1, borderColor: theme.palette.text.secondary }}
+          sx={{
+            color: theme.palette.text.primary,
+            display: 'flex',
+            flex: '1 1 auto',
+            minHeight: 0,
+            overflow: 'hidden',
+            position: 'relative',
+          }}
         >
-          <Tabs
-            value={valueMintingTab}
-            onChange={handleChange}
-            variant={'fullWidth'}
-            scrollButtons="auto"
-            allowScrollButtonsMobile
-            sx={{
-              '&.MuiTabs-indicator': {
-                backgroundColor: theme.palette.background.default,
-              },
-            }}
-          >
-            <Tab
-              label={t('core:minting.details', {
-                postProcess: 'capitalizeAll',
-              })}
-              sx={{
-                '&.Mui-selected': {
-                  color: theme.palette.text.primary,
-                },
-                fontSize: '1rem',
-              }}
-              {...a11yProps(0)}
-            />
-            <Tab
-              label={t('core:minting.actions', {
-                postProcess: 'capitalizeAll',
-              })}
+          {isLoading && (
+            <Box
               sx={{
-                '&.Mui-selected': {
-                  color: theme.palette.text.primary,
-                },
-                fontSize: '1rem',
+                alignItems: 'center',
+                backgroundColor: alpha(theme.palette.background.default, 0.42),
+                bottom: 0,
+                display: 'flex',
+                justifyContent: 'center',
+                left: 0,
+                position: 'absolute',
+                right: 0,
+                top: 0,
+                zIndex: 2,
               }}
-              {...a11yProps(1)}
-            />
-          </Tabs>
-        </Box>
-
-        {valueMintingTab === 0 && (
-          <DialogContent sx={{ position: 'relative' }}>
-            <Box sx={{ maxWidth: 560, mx: 'auto', py: 3, px: 1 }}>
+            >
+              <FidgetSpinner
+                ariaLabel={t('core:minting.panel.loading_spinner_aria')}
+                height="80"
+                visible={true}
+                width="80"
+                wrapperClass="fidget-spinner-wrapper"
+                wrapperStyle={{}}
+              />
+            </Box>
+          )}
 
-              {/* Blockchain Statistics */}
-              <Typography
-                variant="caption"
-                sx={{
-                  display: 'block',
-                  color: theme.palette.text.secondary,
-                  textTransform: 'uppercase',
-                  letterSpacing: '0.06em',
-                  fontWeight: 600,
-                  mb: 1,
-                }}
-              >
-                {t('core:minting.blockchain_statistics', {
-                  postProcess: 'capitalizeEachFirstChar',
-                })}
-              </Typography>
+          <Box
+            sx={{
+              display: 'grid',
+              flex: '1 1 auto',
+              gap: 2.75,
+              gridTemplateColumns: { xs: '1fr', lg: '360px minmax(0, 1fr)' },
+              minHeight: 0,
+              overflowY: 'auto',
+              px: { xs: 2, md: 2.75 },
+              py: { xs: 2.25, md: 2.75 },
+            }}
+          >
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2.75, minHeight: 0 }}>
               <Box
                 sx={{
-                  borderRadius: 2,
+                  ...surfaceCardSx,
+                  background:
+                    theme.palette.mode === 'dark'
+                      ? 'linear-gradient(180deg, rgba(18,21,28,0.42) 0%, rgba(15,18,24,0.52) 100%)'
+                      : 'linear-gradient(180deg, rgba(249,251,254,0.72) 0%, rgba(243,247,251,0.82) 100%)',
+                  borderColor: alpha(theme.palette.divider, 0.14),
+                  flex: '1 1 auto',
+                  minHeight: 0,
                   overflow: 'hidden',
-                  border: 1,
-                  borderColor: alpha(theme.palette.divider, 0.4),
-                  bgcolor: alpha(theme.palette.background.default, 0.5),
-                  mb: 3,
-                }}
-              >
-                {[
-                  {
-                    label: t('core:minting.average_blocktime', {
-                      postProcess: 'capitalizeEachFirstChar',
-                    }),
-                    value: t('core:time.second', {
-                      count: parseFloat(
-                        averageBlockTime(adminInfo, nodeHeightBlock).toFixed(2)
-                      ),
-                      postProcess: 'capitalizeEachFirstChar',
-                    }),
-                  },
-                  {
-                    label: t('core:minting.average_blocks_per_day', {
-                      postProcess: 'capitalizeEachFirstChar',
-                    }),
-                    value: averageBlockDay(adminInfo, nodeHeightBlock).toFixed(2),
-                  },
-                  {
-                    label: t('core:minting.average_created_qorts_per_day', {
-                      postProcess: 'capitalizeEachFirstChar',
-                    }),
-                    value: dayReward(adminInfo, nodeHeightBlock, nodeStatus).toFixed(2),
-                  },
-                ].map((row, i, arr) => (
-                  <Box
-                    key={row.label}
-                    sx={{
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      alignItems: 'center',
-                      px: 2,
-                      py: 1.25,
-                      ...(i < arr.length - 1 && {
-                        borderBottom: 1,
-                        borderColor: 'divider',
-                      }),
-                    }}
-                  >
-                    <Typography variant="body2" color="text.secondary">
-                      {row.label}
-                    </Typography>
-                    <Typography variant="body2" sx={{ fontWeight: 600 }}>
-                      {row.value}
-                    </Typography>
-                  </Box>
-                ))}
-              </Box>
-
-              {/* Account Details */}
-              <Typography
-                variant="caption"
-                sx={{
-                  display: 'block',
-                  color: theme.palette.text.secondary,
-                  textTransform: 'uppercase',
-                  letterSpacing: '0.06em',
-                  fontWeight: 600,
-                  mb: 1,
-                }}
-              >
-                {t('core:minting.account_details', {
-                  postProcess: 'capitalizeEachFirstChar',
-                })}
-              </Typography>
-              <Box
-                sx={{
-                  borderRadius: 2,
-                  overflow: 'hidden',
-                  border: 1,
-                  borderColor: alpha(theme.palette.divider, 0.4),
-                  bgcolor: alpha(theme.palette.background.default, 0.5),
-                  mb: 3,
+                  p: { xs: 2, md: 2.25 },
+                  position: 'relative',
                 }}
               >
                 <Box
+                  component="img"
+                  src={mintingWatermark}
+                  alt=""
+                  aria-hidden
                   sx={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    px: 2,
-                    py: 1.25,
-                    borderBottom: 1,
-                    borderColor: 'divider',
+                    bottom: { xs: -88, md: -78 },
+                    filter: 'saturate(0.92) brightness(0.88)',
+                    left: { xs: -48, md: -58 },
+                    maxWidth: { xs: 320, md: 390 },
+                    opacity: 0.04,
+                    pointerEvents: 'none',
+                    position: 'absolute',
+                    userSelect: 'none',
+                    width: { xs: '82%', md: '94%' },
+                    zIndex: 0,
                   }}
-                >
-                  <Typography variant="body2" color="text.secondary">
-                    {t('core:minting.current_status', {
-                      postProcess: 'capitalizeEachFirstChar',
-                    })}
+                />
+
+                <Box sx={{ position: 'relative', zIndex: 1 }}>
+                {mintingAccounts?.length > 0 ? (
+                  <Box sx={{ mb: 2.25 }}>
+                    <Typography sx={sectionLabelSx}>
+                      {t('core:minting.panel.section_your_wallet')}
+                    </Typography>
+                    <Typography
+                      sx={{
+                        fontSize: '1.05rem',
+                        fontWeight: 700,
+                        letterSpacing: '-0.02em',
+                        lineHeight: 1.15,
+                        wordBreak: 'break-word',
+                      }}
+                    >
+                      {walletDisplayName}
+                    </Typography>
+                    {showWalletAddressLine ? (
+                      <Typography
+                        sx={{
+                          color: alpha(theme.palette.text.secondary, 0.84),
+                          fontSize: '0.82rem',
+                          mt: 0.35,
+                          wordBreak: 'break-all',
+                        }}
+                      >
+                        {accountInfo?.address}
+                      </Typography>
+                    ) : null}
+                  </Box>
+                ) : null}
+
+                <Box>
+                  <Typography sx={sectionLabelSx}>
+                    {mintingAccounts?.length > 0
+                      ? t('core:minting.panel.section_minter_profile_stats')
+                      : t('core:minting.panel.section_account_identity')}
                   </Typography>
-                  <Typography variant="body2" sx={{ fontWeight: 600 }}>
-                    {mintingStatus(nodeStatus)}
+                  <Typography
+                    sx={{
+                      fontSize: '1.35rem',
+                      fontWeight: 800,
+                      letterSpacing: '-0.03em',
+                      lineHeight: 1.12,
+                      wordBreak: 'break-word',
+                    }}
+                  >
+                    {statsDisplayName}
                   </Typography>
+                  {showAddressLine ? (
+                    <Typography
+                      sx={{
+                        color: alpha(theme.palette.text.secondary, 0.84),
+                        fontSize: '0.86rem',
+                        mt: 0.38,
+                        wordBreak: 'break-all',
+                      }}
+                    >
+                      {statsAccountInfo?.address}
+                    </Typography>
+                  ) : null}
                 </Box>
+
                 <Box
                   sx={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    px: 2,
-                    py: 1.25,
-                    borderBottom: 1,
-                    borderColor: 'divider',
+                    ...sectionDividerSx,
                   }}
                 >
-                  <Typography variant="body2" color="text.secondary">
-                    {t('core:minting.current_level', {
-                      postProcess: 'capitalizeEachFirstChar',
-                    })}
+                  <Typography sx={sectionLabelSx}>
+                    {t('core:minting.panel.section_progress_next_level')}
                   </Typography>
                   <Box
                     sx={{
-                      px: 1.5,
-                      py: 0.5,
-                      borderRadius: 2,
-                      bgcolor: alpha(theme.palette.primary.main, 0.12),
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      backgroundColor: alpha(theme.palette.primary.main, 0.08),
+                      border: `1px solid ${alpha(theme.palette.primary.main, 0.14)}`,
+                      borderRadius: '999px',
+                      mb: 0.85,
+                      px: 1,
+                      py: 0.42,
                     }}
                   >
                     <Typography
-                      variant="subtitle2"
                       sx={{
-                        fontWeight: 600,
                         color: theme.palette.primary.main,
+                        fontSize: '0.79rem',
+                        fontWeight: 700,
                       }}
                     >
-                      {accountInfo?.level ?? '—'}
+                      {t('core:level', { postProcess: 'capitalizeFirstChar' })}{' '}
+                      {statsAccountInfo?.level ?? '-'}
                     </Typography>
                   </Box>
-                </Box>
-                <Box
-                  sx={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    px: 2,
-                    py: 1.25,
-                    borderBottom: 1,
-                    borderColor: 'divider',
-                  }}
-                >
-                  <Typography variant="body2" color="text.secondary">
-                    {t('core:minting.blocks_next_level', {
-                      postProcess: 'capitalizeEachFirstChar',
+                  <Typography
+                    sx={{
+                      fontSize: '1.9rem',
+                      fontWeight: 800,
+                      letterSpacing: '-0.04em',
+                      lineHeight: 1.05,
+                    }}
+                  >
+                    {progressBlocks}
+                  </Typography>
+                  <Typography
+                    sx={{
+                      color: theme.palette.text.secondary,
+                      fontSize: '0.9rem',
+                      mt: 0.55,
+                    }}
+                  >
+                    {t('core:minting.panel.blocks_to_level', {
+                      level: progressLevel ?? '-',
                     })}
                   </Typography>
-                  <Typography variant="body2" sx={{ fontWeight: 600 }}>
-                    {levelUpBlocks(accountInfo, nodeStatus).toFixed(0) || '—'}
+                  <Typography
+                    sx={{
+                      color: theme.palette.text.secondary,
+                      fontSize: '0.9rem',
+                      mt: 1.2,
+                    }}
+                  >
+                    {t('core:minting.panel.minting_for_approx_days', {
+                      days: progressDays ?? '-',
+                    })}
                   </Typography>
                 </Box>
+
                 <Box
                   sx={{
-                    px: 2,
-                    py: 1.5,
-                    bgcolor: alpha(theme.palette.action.hover, 0.04),
+                    ...sectionDividerSx,
                   }}
                 >
-                  <Typography variant="body2" color="text.secondary">
-                    <Trans
-                      i18nKey="minting.next_level"
-                      ns="core"
-                      components={{ strong: <strong /> }}
-                      values={{
-                        level: nextLevel(accountInfo?.level),
-                        count: daysToNextLevel?.toFixed(2),
-                      }}
-                      tOptions={{ postProcess: ['capitalizeFirstChar'] }}
-                    />
+                  <Typography sx={sectionLabelSx}>
+                    {t('core:minting.panel.section_next_step')}
                   </Typography>
+                  <Typography
+                    sx={{
+                      color: alpha(theme.palette.text.secondary, 0.86),
+                      fontSize: '0.92rem',
+                      lineHeight: 1.5,
+                    }}
+                  >
+                    {nextStepDescription}
+                  </Typography>
+
+                  {isPartOfMintingGroup && !accountIsMinting ? (
+                    <Box sx={{ mt: 1.6, display: 'flex', flexDirection: 'column', gap: 1 }}>
+                      <Button
+                        size="small"
+                        onClick={startMinting}
+                        disabled={mintingAccounts?.length > 1 || isNodeSynchronizing}
+                        variant="contained"
+                        sx={silkyPrimaryButtonSx}
+                      >
+                        {t('core:action.start_minting', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
+                      </Button>
+                      {mintingAccounts?.length > 1 ? (
+                        <Typography variant="body2" color="text.secondary">
+                          {t('group:message.generic.minting_keys_per_node', {
+                            postProcess: 'capitalizeFirstChar',
+                          })}
+                        </Typography>
+                      ) : null}
+                    </Box>
+                  ) : null}
+
+                  {!isPartOfMintingGroup ? (
+                    <Box sx={{ mt: 1.6, display: 'flex', flexDirection: 'column', gap: 1.1 }}>
+                      <Button
+                        size="small"
+                        onClick={openQMintership}
+                        variant="contained"
+                        sx={silkyPrimaryButtonSx}
+                      >
+                        {t('group:action.visit_q_mintership', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
+                      </Button>
+                    </Box>
+                  ) : null}
                 </Box>
-              </Box>
 
-              {/* Rewards Info */}
-              <Typography
-                variant="caption"
-                sx={{
-                  display: 'block',
-                  color: theme.palette.text.secondary,
-                  textTransform: 'uppercase',
-                  letterSpacing: '0.06em',
-                  fontWeight: 600,
-                  mb: 1,
-                }}
-              >
-                {t('core:minting.rewards_info', {
-                  postProcess: 'capitalizeEachFirstChar',
-                })}
-              </Typography>
-              <Box
-                sx={{
-                  borderRadius: 2,
-                  overflow: 'hidden',
-                  border: 1,
-                  borderColor: alpha(theme.palette.divider, 0.4),
-                  bgcolor: alpha(theme.palette.background.default, 0.5),
-                  mb: 3,
-                }}
-              >
-                {[
-                  {
-                    label: t('core:minting.current_tier', {
-                      postProcess: 'capitalizeEachFirstChar',
-                    }),
-                    value: t('core:minting.current_tier_content', {
-                      tier: currentTier(accountInfo?.level)
-                        ? currentTier(accountInfo?.level)[0]
-                        : '',
-                      levels: currentTier(accountInfo?.level)
-                        ? currentTier(accountInfo?.level)[1]
-                        : '',
-                      postProcess: 'capitalizeEachFirstChar',
-                    }),
-                  },
-                  {
-                    label: t('core:minting.total_minter_in_tier', {
-                      postProcess: 'capitalizeEachFirstChar',
-                    }),
-                    value:
-                      countMintersInLevel(
-                        accountInfo?.level,
-                        addressLevel,
-                        tier4Online
-                      )?.toFixed(0) || '—',
-                  },
-                  {
-                    label: t('core:minting.tier_share_per_block', {
-                      postProcess: 'capitalizeEachFirstChar',
-                    }),
-                    value:
-                      tierPercent(accountInfo, tier4Online)?.toFixed(0) + ' %',
-                  },
-                  {
-                    label: t('core:minting.reward_per_block', {
-                      postProcess: 'capitalizeEachFirstChar',
-                    }),
-                    value:
-                      countReward(
-                        accountInfo,
-                        addressLevel,
-                        nodeStatus,
-                        tier4Online
-                      ).toFixed(8) + ' QORT',
-                  },
-                  {
-                    label: t('core:minting.reward_per_day', {
-                      postProcess: 'capitalizeEachFirstChar',
-                    }),
-                    value:
-                      countRewardDay(
-                        accountInfo,
-                        addressLevel,
-                        adminInfo,
-                        nodeHeightBlock,
-                        nodeStatus,
-                        tier4Online
-                      ).toFixed(8) + ' QORT',
-                  },
-                ].map((row, i, arr) => (
+                {mintingAccounts?.length > 0 ? (
                   <Box
-                    key={row.label}
                     sx={{
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      alignItems: 'center',
-                      px: 2,
-                      py: 1.25,
-                      ...(i < arr.length - 1 && {
-                        borderBottom: 1,
-                        borderColor: 'divider',
-                      }),
+                      ...sectionDividerSx,
                     }}
                   >
-                    <Typography variant="body2" color="text.secondary">
-                      {row.label}
+                    <Typography sx={sectionLabelSx}>
+                      {t('core:minting.panel.section_node_minting_accounts')}
                     </Typography>
                     <Typography
                       variant="body2"
-                      sx={{ fontWeight: 600, textAlign: 'right' }}
+                      color="text.secondary"
+                      sx={{ mb: 1.1, lineHeight: 1.45 }}
                     >
-                      {row.value}
+                      {t('core:minting.panel.select_account_for_stats_hint')}
                     </Typography>
+                    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+                      {mintingAccounts?.map((acct) => {
+                        const isSelected =
+                          acct?.mintingAccount === effectiveSelectedMintingKey;
+                        return (
+                          <Box
+                            key={acct?.mintingAccount}
+                            role="button"
+                            tabIndex={0}
+                            onClick={() =>
+                              setSelectedMintingAccountKey(acct?.mintingAccount)
+                            }
+                            onKeyDown={(e) => {
+                              if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                setSelectedMintingAccountKey(acct?.mintingAccount);
+                              }
+                            }}
+                            sx={{
+                              backgroundColor: alpha(
+                                theme.palette.background.default,
+                                theme.palette.mode === 'dark' ? 0.14 : 0.34
+                              ),
+                              border: `1px solid ${
+                                isSelected
+                                  ? alpha(theme.palette.primary.main, 0.55)
+                                  : alpha(theme.palette.divider, 0.14)
+                              }`,
+                              borderRadius: '10px',
+                              boxShadow: isSelected
+                                ? `0 0 0 1px ${alpha(theme.palette.primary.main, 0.35)}`
+                                : 'none',
+                              cursor: 'pointer',
+                              display: 'flex',
+                              flexDirection: 'column',
+                              gap: 1,
+                              outline: 'none',
+                              p: 1.15,
+                              transition: 'border-color 0.15s ease, box-shadow 0.15s ease',
+                            }}
+                          >
+                            <Box
+                              sx={{
+                                alignItems: 'center',
+                                display: 'flex',
+                                flexWrap: 'wrap',
+                                gap: 0.75,
+                                justifyContent: 'space-between',
+                              }}
+                            >
+                              <Typography
+                                variant="body2"
+                                sx={{
+                                  color: theme.palette.text.primary,
+                                  fontWeight: 700,
+                                  wordBreak: 'break-word',
+                                }}
+                              >
+                                {handleNames(acct?.mintingAccount)}
+                              </Typography>
+                              {isSelected ? (
+                                <Typography
+                                  variant="caption"
+                                  sx={{
+                                    color: theme.palette.primary.main,
+                                    fontWeight: 700,
+                                    letterSpacing: '0.06em',
+                                    textTransform: 'uppercase',
+                                  }}
+                                >
+                                  {t('core:minting.panel.badge_viewing_stats')}
+                                </Typography>
+                              ) : null}
+                            </Box>
+                            <Button
+                              size="small"
+                              sx={silkyDangerButtonSx}
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                removeMintingAccount(acct.publicKey, acct);
+                              }}
+                              variant="contained"
+                            >
+                              {t('group:action.remove_minting_account', {
+                                postProcess: 'capitalizeFirstChar',
+                              })}
+                            </Button>
+                          </Box>
+                        );
+                      })}
+                    </Box>
+                    {mintingAccounts?.length > 1 ? (
+                      <Typography
+                        variant="body2"
+                        color="text.secondary"
+                        sx={{ mt: 1.2 }}
+                      >
+                        {t('group:message.generic.minting_keys_per_node_different', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
+                      </Typography>
+                    ) : null}
                   </Box>
-                ))}
+                ) : null}
+                </Box>
               </Box>
-
             </Box>
-          </DialogContent>
-        )}
-
-        {valueMintingTab === 1 && (
-          <DialogContent sx={{ position: 'relative' }}>
-            {isLoading && (
-              <Box
-                sx={{
-                  alignItems: 'center',
-                  bottom: 0,
-                  display: 'flex',
-                  justifyContent: 'center',
-                  left: 0,
-                  position: 'absolute',
-                  right: 0,
-                  top: 0,
-                  zIndex: 1,
-                }}
-              >
-                <FidgetSpinner
-                  ariaLabel="fidget-spinner-loading"
-                  height="80"
-                  visible={true}
-                  width="80"
-                  wrapperClass="fidget-spinner-wrapper"
-                  wrapperStyle={{}}
-                />
-              </Box>
-            )}
 
-            <Box sx={{ maxWidth: 560, mx: 'auto', py: 3, px: 1 }}>
-
-              {/* Account info */}
-              <Typography
-                variant="caption"
-                sx={{
-                  display: 'block',
-                  color: theme.palette.text.secondary,
-                  textTransform: 'uppercase',
-                  letterSpacing: '0.06em',
-                  fontWeight: 600,
-                  mb: 1,
-                }}
-              >
-                {t('auth:account.account_one', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </Typography>
+            <Box
+              aria-busy={isStatsLoading}
+              sx={{
+                borderLeft: {
+                  xs: 'none',
+                  lg: `1px solid ${alpha(theme.palette.common.white, theme.palette.mode === 'dark' ? 0.04 : 0.06)}`,
+                },
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 2.4,
+                minWidth: 0,
+                opacity: isStatsLoading ? 0.62 : 1,
+                pl: { xs: 0, lg: 3 },
+                transition: 'opacity 0.2s ease',
+              }}
+            >
               <Box
                 sx={{
-                  borderRadius: 2,
-                  overflow: 'hidden',
-                  border: 1,
-                  borderColor: alpha(theme.palette.divider, 0.4),
-                  bgcolor: alpha(theme.palette.background.default, 0.5),
-                  mb: 3,
+                  ...surfaceCardSx,
+                  background: currentStatusTone.background,
+                  borderColor: currentStatusTone.borderColor,
+                  position: 'relative',
+                  p: { xs: 2, md: 2.2 },
+                  '&::before': {
+                    backgroundColor: alpha(currentStatusTone.accent, 0.62),
+                    borderRadius: '999px',
+                    bottom: 16,
+                    content: '""',
+                    left: 0,
+                    position: 'absolute',
+                    top: 16,
+                    width: '1px',
+                  },
                 }}
               >
-                <Box
+                <Typography sx={sectionLabelSx}>
+                  {t('core:minting.current_status')}
+                </Typography>
+                <Typography
                   sx={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    px: 2,
-                    py: 1.25,
-                    borderBottom: 1,
-                    borderColor: 'divider',
+                    color: currentStatusTone.accent,
+                    fontSize: '1.9rem',
+                    fontWeight: 800,
+                    letterSpacing: '-0.04em',
+                    lineHeight: 1.05,
                   }}
                 >
-                  <Typography variant="body2" color="text.secondary">
-                    {t('auth:address', { postProcess: 'capitalizeFirstChar' })}
-                  </Typography>
-                  <Typography
-                    variant="body2"
-                    sx={{ fontWeight: 600, fontFamily: 'monospace' }}
-                  >
-                    {handleNames(accountInfo?.address)}
-                  </Typography>
-                </Box>
-                <Box
+                  {userMintingState.title}
+                </Typography>
+                <Typography
                   sx={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    px: 2,
-                    py: 1.25,
+                    color: theme.palette.text.secondary,
+                    fontSize: '0.92rem',
+                    mt: 0.85,
+                    maxWidth: 520,
                   }}
                 >
-                  <Typography variant="body2" color="text.secondary">
-                    {t('core:level', { postProcess: 'capitalizeFirstChar' })}
-                  </Typography>
+                  {userMintingState.description}
+                </Typography>
+              </Box>
+
+              <Box
+                sx={{
+                  display: 'grid',
+                  gap: 1.1,
+                  gridTemplateColumns: {
+                    xs: '1fr',
+                    sm: 'minmax(260px, 320px)',
+                  },
+                }}
+              >
+                {summaryMetricRows.map((row) => (
                   <Box
+                    key={row.label}
                     sx={{
-                      px: 1.5,
-                      py: 0.5,
-                      borderRadius: 2,
-                      bgcolor: alpha(theme.palette.primary.main, 0.12),
+                      ...surfaceCardSx,
+                      background:
+                        theme.palette.mode === 'dark'
+                          ? 'linear-gradient(180deg, rgba(18,21,28,0.4) 0%, rgba(15,18,24,0.48) 100%)'
+                          : 'linear-gradient(180deg, rgba(249,251,254,0.7) 0%, rgba(243,247,251,0.8) 100%)',
+                      borderColor: alpha(theme.palette.divider, 0.12),
+                      minHeight: 88,
+                      p: 1.55,
                     }}
                   >
+                    <Typography sx={sectionLabelSx}>{row.label}</Typography>
                     <Typography
-                      variant="subtitle2"
                       sx={{
-                        fontWeight: 600,
-                        color: theme.palette.primary.main,
+                        color: row.accent
+                          ? theme.palette.primary.main
+                          : theme.palette.text.primary,
+                        fontSize: row.label ===
+                        t('core:minting.reward_per_day', {
+                          postProcess: 'capitalizeEachFirstChar',
+                        })
+                          ? '1.05rem'
+                          : '1.18rem',
+                        fontWeight:
+                          row.label ===
+                          t('core:minting.reward_per_day', {
+                            postProcess: 'capitalizeEachFirstChar',
+                          })
+                            ? 650
+                            : 800,
+                        letterSpacing: '-0.03em',
+                        lineHeight: 1.12,
+                        opacity:
+                          row.label ===
+                          t('core:minting.reward_per_day', {
+                            postProcess: 'capitalizeEachFirstChar',
+                          })
+                            ? 0.88
+                            : 1,
                       }}
                     >
-                      {accountInfo?.level ?? '—'}
+                      {row.value}
                     </Typography>
                   </Box>
-                </Box>
+                ))}
               </Box>
 
-              {/* Start minting */}
-              {isPartOfMintingGroup && !accountIsMinting && (
-                <Box
+              <Box
+                sx={{
+                  ...surfaceCardSx,
+                  background:
+                    theme.palette.mode === 'dark'
+                      ? 'linear-gradient(180deg, rgba(18,21,27,0.46) 0%, rgba(15,18,24,0.52) 100%)'
+                      : 'linear-gradient(180deg, rgba(248,250,253,0.74) 0%, rgba(242,246,251,0.8) 100%)',
+                  borderColor: alpha(theme.palette.divider, 0.16),
+                  p: { xs: 2, md: 2.15 },
+                }}
+              >
+                <Typography sx={{ ...sectionLabelSx, color: theme.palette.text.primary }}>
+                  {t('core:minting.blockchain_statistics')}
+                </Typography>
+                <Typography
                   sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'flex-start',
-                    gap: 1,
-                    mb: 3,
+                    color: alpha(theme.palette.text.secondary, 0.48),
+                    fontSize: '0.84rem',
+                    mb: 1.45,
                   }}
                 >
-                  <Button
-                    size="small"
-                    onClick={() => {
-                      startMinting();
-                    }}
-                    disabled={mintingAccounts?.length > 1}
-                    sx={{
-                      backgroundColor: theme.palette.other.positive,
-                      color: 'black',
-                      fontWeight: 'bold',
-                      opacity: 0.7,
-                      width: '200px',
-                      '&:hover': {
-                        backgroundColor: theme.palette.other.positive,
-                        color: 'black',
-                        opacity: 1,
-                      },
-                    }}
-                    variant="contained"
-                  >
-                    {t('core:action.start_minting', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Button>
-                  {mintingAccounts?.length > 1 && (
-                    <Typography variant="body2" color="text.secondary">
-                      {t('group:message.generic.minting_keys_per_node', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    </Typography>
-                  )}
+                  {t('core:minting.panel.reference_only')}
+                </Typography>
+                <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                  {blockchainRows.map((row) => (
+                    <Box key={row.label} sx={metricListRowSx}>
+                      <Typography
+                        variant="body2"
+                        sx={{ ...metricLabelSx, color: alpha(theme.palette.text.secondary, 0.62) }}
+                      >
+                        {row.label}
+                      </Typography>
+                      <Typography variant="body2" sx={metricValueSx}>
+                        {row.value}
+                      </Typography>
+                    </Box>
+                  ))}
                 </Box>
-              )}
+              </Box>
 
-              {/* Minting accounts list */}
-              {mintingAccounts?.length > 0 && (
-                <>
+              <Box
+                sx={{
+                  ...surfaceCardSx,
+                  p: { xs: 2, md: 2.15 },
+                }}
+              >
+                <Typography sx={{ ...sectionLabelSx, color: theme.palette.text.primary }}>
+                  {t('core:minting.rewards_info')}
+                </Typography>
+
+                <Box>
                   <Typography
-                    variant="caption"
                     sx={{
-                      display: 'block',
-                      color: theme.palette.text.secondary,
-                      textTransform: 'uppercase',
-                      letterSpacing: '0.06em',
-                      fontWeight: 600,
+                      color: alpha(theme.palette.text.secondary, 0.48),
+                      fontSize: '0.9rem',
+                      fontWeight: 400,
                       mb: 1,
                     }}
                   >
-                    {t('group:message.generic.node_minting_account', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
+                    {statsAddress === myAddress
+                      ? t('core:minting.panel.rewards_info_subtitle_own')
+                      : t('core:minting.panel.rewards_info_subtitle_selected')}
                   </Typography>
-                  <Box
-                    sx={{
-                      borderRadius: 2,
-                      overflow: 'hidden',
-                      border: 1,
-                      borderColor: alpha(theme.palette.divider, 0.4),
-                      bgcolor: alpha(theme.palette.background.default, 0.5),
-                      mb: 3,
-                    }}
-                  >
-                    {accountIsMinting && (
-                      <Box
-                        sx={{
-                          px: 2,
-                          py: 1.25,
-                          borderBottom: 1,
-                          borderColor: 'divider',
-                        }}
-                      >
-                        <Typography variant="body2" color="text.secondary">
-                          {t('group:message.generic.node_minting_key', {
-                            postProcess: 'capitalizeFirstChar',
-                          })}
+                  <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                    {directRewardRows.map((row) => (
+                      <Box key={row.label} sx={metricListRowSx}>
+                        <Typography variant="body2" sx={metricLabelSx}>
+                          {row.label}
                         </Typography>
-                      </Box>
-                    )}
-                    {mintingAccounts?.map((acct, i) => (
-                      <Box
-                        key={acct?.mintingAccount}
-                        sx={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          alignItems: 'center',
-                          gap: 2,
-                          px: 2,
-                          py: 1.25,
-                          ...(i < mintingAccounts.length - 1 && {
-                            borderBottom: 1,
-                            borderColor: 'divider',
-                          }),
-                        }}
-                      >
-                        <Typography
-                          variant="body2"
-                          color="text.secondary"
-                          sx={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}
-                        >
-                          {t('group:message.generic.minting_account', {
-                            postProcess: 'capitalizeFirstChar',
-                          })}{' '}
-                          {handleNames(acct?.mintingAccount)}
+                        <Typography variant="body2" sx={metricValueSx}>
+                          {row.value}
                         </Typography>
-                        <Button
-                          size="small"
-                          sx={{
-                            backgroundColor: theme.palette.other.danger,
-                            color: theme.palette.text.primary,
-                            fontWeight: 'bold',
-                            flexShrink: 0,
-                            opacity: 0.7,
-                            '&:hover': {
-                              backgroundColor: theme.palette.other.danger,
-                              color: theme.palette.text.primary,
-                              opacity: 1,
-                            },
-                          }}
-                          onClick={() => {
-                            removeMintingAccount(acct.publicKey, acct);
-                          }}
-                          variant="contained"
-                        >
-                          {t('group:action.remove_minting_account', {
-                            postProcess: 'capitalizeFirstChar',
-                          })}
-                        </Button>
                       </Box>
                     ))}
-                    {mintingAccounts?.length > 1 && (
-                      <Box
-                        sx={{
-                          px: 2,
-                          py: 1.25,
-                          borderTop: 1,
-                          borderColor: 'divider',
-                          bgcolor: alpha(theme.palette.action.hover, 0.04),
-                        }}
-                      >
-                        <Typography variant="body2" color="text.secondary">
-                          {t(
-                            'group:message.generic.minting_keys_per_node_different',
-                            { postProcess: 'capitalizeFirstChar' }
-                          )}
-                        </Typography>
-                      </Box>
-                    )}
                   </Box>
-                </>
-              )}
+                </Box>
 
-              {/* Not part of minting group */}
-              {!isPartOfMintingGroup && (
                 <Box
                   sx={{
-                    borderRadius: 2,
-                    border: 1,
-                    borderColor: alpha(theme.palette.divider, 0.4),
-                    bgcolor: alpha(theme.palette.background.default, 0.5),
-                    p: 3,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    gap: 2,
+                    mt: 3.35,
+                    pt: 2.9,
+                    borderTop: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
                   }}
                 >
                   <Typography
-                    variant="body2"
-                    color="text.secondary"
-                    textAlign="center"
-                  >
-                    {t('group:message.generic.minter_group', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Typography>
-                  <Typography
-                    variant="body2"
-                    color="text.secondary"
-                    textAlign="center"
-                  >
-                    {t('group:message.generic.mintership_app', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Typography>
-                  <Button
-                    size="small"
                     sx={{
-                      backgroundColor: theme.palette.other.positive,
+                      ...sectionLabelSx,
                       color: theme.palette.text.primary,
-                      fontWeight: 'bold',
-                      opacity: 0.7,
-                      '&:hover': {
-                        backgroundColor: theme.palette.other.positive,
-                        color: 'black',
-                        opacity: 1,
-                      },
-                    }}
-                    onClick={() => {
-                      executeEvent('addTab', {
-                        data: { service: 'APP', name: 'q-mintership' },
-                      });
-                      executeEvent('open-apps-mode', {});
-                      setIsOpenMinting(false);
+                      mb: 1,
                     }}
-                    variant="contained"
                   >
-                    {t('group:action.visit_q_mintership', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Button>
+                    {t('core:minting.panel.network_details')}
+                  </Typography>
+                  <Box sx={{ display: 'flex', flexDirection: 'column' }}>
+                    {networkContextRows.map((row) => (
+                      <Box key={row.label} sx={metricListRowSx}>
+                        <Typography
+                          variant="body2"
+                          sx={{ ...metricLabelSx, color: alpha(theme.palette.text.secondary, 0.64) }}
+                        >
+                          {row.label}
+                        </Typography>
+                        <Typography variant="body2" sx={{ ...metricValueSx, opacity: 0.92 }}>
+                          {row.value}
+                        </Typography>
+                      </Box>
+                    ))}
+                  </Box>
                 </Box>
-              )}
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+      </Dialog>
 
-              {showWaitDialog && (
-                <Dialog
-                  open={showWaitDialog}
-                  aria-labelledby="alert-dialog-title"
-                  aria-describedby="alert-dialog-description"
-                >
-                  <DialogTitle
-                    id="alert-dialog-title"
-                    sx={{
-                      textAlign: 'center',
-                      color: theme.palette.text.primary,
-                      fontWeight: 'bold',
-                      opacity: 1,
-                    }}
-                  >
-                    {isShowNext
-                      ? t('core:message.generic.confirmed', {
-                          postProcess: 'capitalizeFirstChar',
-                        })
-                      : t('core:message.generic.wait', {
-                          postProcess: 'capitalizeFirstChar',
-                        })}
-                  </DialogTitle>
+      {showWaitDialog && (
+        <Dialog
+          open={showWaitDialog}
+          aria-labelledby="alert-dialog-title"
+          aria-describedby="alert-dialog-description"
+        >
+          <DialogTitle
+            id="alert-dialog-title"
+            sx={{
+              textAlign: 'center',
+              color: theme.palette.text.primary,
+              fontWeight: 'bold',
+              opacity: 1,
+            }}
+          >
+            {isShowNext
+              ? t('core:message.generic.confirmed', {
+                  postProcess: 'capitalizeFirstChar',
+                })
+              : t('core:message.generic.wait', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+          </DialogTitle>
 
-                  <DialogContent>
-                    {!isShowNext && (
-                      <Typography>
-                        {t('group:message.success.rewardshare_creation', {
-                          postProcess: 'capitalizeFirstChar',
-                        })}
-                      </Typography>
-                    )}
+          <DialogContent>
+            {!isShowNext && (
+              <Typography>
+                {t('group:message.success.rewardshare_creation', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+              </Typography>
+            )}
 
-                    {isShowNext && (
-                      <Typography>
-                        {t('group:message.success.rewardshare_confirmed', {
-                          postProcess: 'capitalizeFirstChar',
-                        })}
-                      </Typography>
-                    )}
-                  </DialogContent>
-
-                  <DialogActions>
-                    <Button
-                      disabled={!isShowNext}
-                      variant="contained"
-                      onClick={onOk}
-                      autoFocus
-                    >
-                      {t('core:pagination.next', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    </Button>
-                  </DialogActions>
-                </Dialog>
-              )}
-            </Box>
+            {isShowNext && (
+              <Typography>
+                {t('group:message.success.rewardshare_confirmed', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+              </Typography>
+            )}
           </DialogContent>
-        )}
-      </Box>
 
-      <Snackbar
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+          <DialogActions>
+            <Button
+              disabled={!isShowNext}
+              variant="contained"
+              onClick={onOk}
+              autoFocus
+              sx={silkyPrimaryButtonSx}
+            >
+              {t('core:pagination.next', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+            </Button>
+          </DialogActions>
+        </Dialog>
+      )}
+
+      <CustomizedSnackbars
         open={openSnack}
-        autoHideDuration={6000}
-        onClose={handleClose}
-      >
-        <Alert
-          onClose={handleClose}
-          severity={info?.type}
-          variant="filled"
-          sx={{ width: '100%' }}
-        >
-          {info?.message}
-        </Alert>
-      </Snackbar>
-    </Dialog>
+        setOpen={setOpenSnack}
+        info={info}
+        setInfo={setInfo}
+      />
+    </>
   );
 };
diff --git a/src/components/NewUsersCTA.tsx b/src/components/NewUsersCTA.tsx
index a2a176e2..b745b0ad 100644
--- a/src/components/NewUsersCTA.tsx
+++ b/src/components/NewUsersCTA.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Typography } from '@mui/material';
+import { openHttpUrlExternally } from '../utils/openExternalHttp';
 import { useAtomValue } from 'jotai';
 import { balanceAtom } from '../atoms/global';
 import { Spacer } from '../common/Spacer';
@@ -72,13 +72,7 @@ export const NewUsersCTA = () => {
               backgroundColor: '#4297E2',
             }}
             onClick={() => {
-              if (window?.electronAPI?.openExternal) {
-                window.electronAPI.openExternal(
-                  'https://link.qortal.dev/support'
-                );
-              } else {
-                window.open('https://link.qortal.dev/support', '_blank');
-              }
+              openHttpUrlExternally('https://link.qortal.dev/support');
             }}
           >
             Nextcloud
diff --git a/src/components/NotAuthenticated.tsx b/src/components/NotAuthenticated.tsx
index 2cb9a7e4..a601d288 100644
--- a/src/components/NotAuthenticated.tsx
+++ b/src/components/NotAuthenticated.tsx
@@ -1,972 +1,1083 @@
-import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
-import { Spacer } from '../common/Spacer';
-import { CustomButton, TextP, TextSpan } from '../styles/App-styles';
-import {
-  Box,
-  Button,
-  ButtonBase,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-  FormControlLabel,
-  Input,
-  styled,
-  Switch,
-  TextField,
-  Typography,
-  useTheme,
-} from '@mui/material';
+import { Box, ButtonBase, Typography, useTheme } from '@mui/material';
+import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
+import AddRoundedIcon from '@mui/icons-material/AddRounded';
+import DownloadRoundedIcon from '@mui/icons-material/DownloadRounded';
+import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded';
+import BoltRoundedIcon from '@mui/icons-material/BoltRounded';
+import HubRoundedIcon from '@mui/icons-material/HubRounded';
+import SecurityRoundedIcon from '@mui/icons-material/SecurityRounded';
+import authIntroAudioSrc from '../assets/audio/light-transition-351939.mp3';
 import Logo1Dark from '../assets/svgs/Logo1Dark.svg';
-import HelpIcon from '@mui/icons-material/Help';
-import { CustomizedSnackbars } from './Snackbar/Snackbar';
-import { cleanUrl, gateways } from '../background/background.ts';
-import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
-import { useTranslation } from 'react-i18next';
+import { useAtomValue } from 'jotai';
+import { selectedNodeInfoAtom } from '../atoms/global';
 import {
-  getDefaultLocalNodeUrl,
   HTTPS_EXT_NODE_QORTAL_LINK,
   isLocalNodeUrl,
-  LOCALHOST_12391,
-} from '../constants/constants.ts';
-import { useAtom, useAtomValue } from 'jotai';
+} from '../constants/constants';
+import { Wallets } from './Wallets';
+import { AuthButton, AuthFrame } from './Auth/AuthShell';
+import { ConnectionModeModal } from './Auth/ConnectionModeModal';
 import {
-  hasSeenGettingStartedAtom,
-  selectedNodeInfoAtom,
-  statusesAtom,
-} from '../atoms/global.ts';
-import { useHandleTutorials } from '../hooks/useHandleTutorials';
-import { useAuth } from '../hooks/useAuth.tsx';
-import { nodeDisplay } from '../utils/helpers.ts';
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import type { AuthUnlockTransitionSnapshot } from '../types/authTransition';
+
+type IntroLogoMetrics = {
+  finalHeight: number;
+  finalLeft: number;
+  finalTop: number;
+  finalWidth: number;
+  initialHeight: number;
+  initialLeft: number;
+  initialTop: number;
+  initialWidth: number;
+  overshootTop: number;
+};
+
+type IntroStage = 'pending' | 'ready' | 'running' | 'settling' | 'complete';
+
+const AUTH_UI_ANIMATIONS_STORAGE_KEY = 'hub_ui_animations_enabled';
+const AUTH_INTRO_OVERSHOOT_PX = 7;
+const AUTH_INTRO_START_DELAY_MS = 560;
+const AUTH_INTRO_FRAME_SETTLE_MS = 32;
+const AUTH_INTRO_MOVE_MS = 860;
+const AUTH_INTRO_SETTLE_MS = 300;
+const AUTH_INTRO_COMPLETE_DELAY_MS = 620;
+const AUTH_INTRO_SETTLE_EASING = 'cubic-bezier(0.34, 1.56, 0.64, 1)';
+const AUTH_INTRO_AUDIO_DURATION_SECONDS = 8.1;
+const AUTH_INTRO_AUDIO_PEAK_SECONDS = 2.44;
+const AUTH_INTRO_AUDIO_VOLUME = 0.42;
+const AUTH_INTRO_AUDIO_START_OFFSET_SECONDS = Math.max(
+  0,
+  AUTH_INTRO_AUDIO_PEAK_SECONDS -
+    (AUTH_INTRO_START_DELAY_MS +
+      AUTH_INTRO_FRAME_SETTLE_MS +
+      AUTH_INTRO_MOVE_MS +
+      AUTH_INTRO_SETTLE_MS) /
+      1000
+);
+const AUTH_INTRO_LOGO_RING_DOWN_MS = Math.round(
+  (AUTH_INTRO_AUDIO_DURATION_SECONDS - AUTH_INTRO_AUDIO_PEAK_SECONDS) *
+    1000
+);
+const AUTH_INTRO_LOGO_RING_MS =
+  AUTH_INTRO_SETTLE_MS + AUTH_INTRO_LOGO_RING_DOWN_MS;
+const AUTH_INTRO_LOGO_RING_PEAK_PERCENT = `${Math.round(
+  (AUTH_INTRO_SETTLE_MS / AUTH_INTRO_LOGO_RING_MS) * 100
+)}%`;
+const AUTH_INTRO_LOGO_FINAL_FILTER =
+  'brightness(1.23) contrast(1.06) saturate(1.1) drop-shadow(0 0 10px rgba(26,130,255,0.24))';
+const AUTH_INTRO_LOGO_PEAK_FILTER =
+  'brightness(1.32) contrast(1.08) saturate(1.14) drop-shadow(0 0 17px rgba(31,136,255,0.38))';
+const AUTH_INTRO_LOGO_MID_RING_FILTER =
+  'brightness(1.29) contrast(1.075) saturate(1.13) drop-shadow(0 0 15px rgba(31,136,255,0.32))';
+const AUTH_INTRO_LOGO_LATE_RING_FILTER =
+  'brightness(1.26) contrast(1.065) saturate(1.115) drop-shadow(0 0 12px rgba(29,132,255,0.27))';
+const AUTH_INTRO_LOGO_SETTLING_FILTER =
+  'brightness(1.2) contrast(1.05) saturate(1.08)';
+const AUTH_INTRO_LOGO_SETTLING_PEAK_FILTER =
+  'brightness(1.3) contrast(1.08) saturate(1.13) drop-shadow(0 0 14px rgba(31,136,255,0.32))';
+const AUTH_INTRO_LOGO_SETTLING_MID_FILTER =
+  'brightness(1.265) contrast(1.07) saturate(1.12) drop-shadow(0 0 12px rgba(31,136,255,0.27))';
+const AUTH_INTRO_LOGO_SETTLING_LATE_FILTER =
+  'brightness(1.225) contrast(1.055) saturate(1.095) drop-shadow(0 0 8px rgba(29,132,255,0.18))';
+let hasAuthIntroPlayedThisSession = false;
+
+const areAuthAnimationsEnabled = () => {
+  if (typeof window === 'undefined') return true;
+
+  try {
+    const storedValue = window.localStorage.getItem(
+      AUTH_UI_ANIMATIONS_STORAGE_KEY
+    );
+
+    if (storedValue === null) return true;
+
+    return JSON.parse(storedValue) !== false;
+  } catch {
+    return true;
+  }
+};
 
 export const manifestData = {
   version: '1.0.0',
 };
 
-export const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => (
-  <Tooltip {...props} classes={{ popper: className }} />
-))(({ theme }) => ({
-  [`& .${tooltipClasses.tooltip}`]: {
-    backgroundColor: theme.palette.background.paper,
-    color: theme.palette.text.primary,
-    maxWidth: 320,
-    padding: '20px',
-    fontSize: theme.typography.pxToRem(12),
-  },
-}));
-
-function removeTrailingSlash(url: string) {
-  return url.trim().replace(/\/+$/, '');
-}
-
 export const NotAuthenticated = ({
   setExtstate,
-  handleSetGlobalApikey,
-  setUseLocalNode,
+  setRawWallet,
+  rawWallet,
+  onWalletUnlockStart,
 }) => {
-  const { handleSaveNodeInfo } = useAuth();
-  const [openSnack, setOpenSnack] = useState(false);
-  const [infoSnack, setInfoSnack] = useState(null);
-  const [show, setShow] = useState(false);
-  const [mode, setMode] = useState('list');
-  const [customNodes, setCustomNodes] = useState(null);
-  const [url, setUrl] = useState('https://');
-  const [customApikey, setCustomApiKey] = useState('');
-  const [showSelectApiKey, setShowSelectApiKey] = useState(false);
-  const [enteredApiKey, setEnteredApiKey] = useState('');
-  const [selectedNode, setSelectedNode] = useAtom(selectedNodeInfoAtom);
-  const [customNodeToSaveIndex, setCustomNodeToSaveIndex] = useState(null);
-  const { showTutorial } = useHandleTutorials();
-  const hasSeenGettingStarted = useAtomValue(hasSeenGettingStartedAtom);
   const theme = useTheme();
-  const { t } = useTranslation([
-    'auth',
-    'core',
-    'group',
-    'question',
-    'tutorial',
-  ]);
-
-  const handleFileChangeApiKey = (event) => {
-    setShowSelectApiKey(false);
-    const file = event.target.files[0]; // Get the selected file
-    if (file) {
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        const text = e.target.result; // Get the file content
-
-        if (customNodes) {
-          setCustomNodes((prev) => {
-            const copyPrev = [...prev];
-            const findLocalIndex = copyPrev?.findIndex((item) =>
-              isLocalNodeUrl(item?.url)
-            );
-            if (findLocalIndex === -1) {
-              copyPrev.unshift({
-                url: getDefaultLocalNodeUrl(),
-                apikey: text,
-              });
-            } else {
-              copyPrev[findLocalIndex] = {
-                url: getDefaultLocalNodeUrl(),
-                apikey: text,
-              };
-            }
-            window.sendMessage('setCustomNodes', copyPrev).catch((error) => {
-              console.error(
-                'Failed to set custom nodes:',
-                error.message ||
-                  t('core:message.error.generic', {
-                    postProcess: 'capitalizeFirstChar',
-                  })
-              );
-            });
-            return copyPrev;
+  const isLight = theme.palette.mode === 'light';
+  const { t } = useTranslation(['auth']);
+  const selectedNode = useAtomValue(selectedNodeInfoAtom);
+  const [isConnectionModeOpen, setIsConnectionModeOpen] = useState(false);
+  const [isEntryAccountsReady, setIsEntryAccountsReady] = useState(false);
+  const [isUnlockLeaving, setIsUnlockLeaving] = useState(false);
+  const [isLogoRingDownActive, setIsLogoRingDownActive] = useState(false);
+  const logoRef = useRef<HTMLImageElement | null>(null);
+  const introAudioRef = useRef<HTMLAudioElement | null>(null);
+  const globalMotionOverrideRef = useRef<{
+    element: HTMLStyleElement;
+    wasDisabled?: boolean;
+  } | null>(null);
+  const [isIntroLogoReady, setIsIntroLogoReady] = useState(false);
+  const [introMetrics, setIntroMetrics] = useState<IntroLogoMetrics | null>(null);
+  const [introStage, setIntroStage] = useState<IntroStage>('pending');
+  const usingLocalNode = isLocalNodeUrl(selectedNode?.url);
+  const customNodeStatusLabel =
+    selectedNode?.name?.trim() || selectedNode?.url?.trim() || '';
+  const connectionLabel = usingLocalNode
+    ? t('auth:authentication_form.using_local_node', {
+        postProcess: 'capitalizeFirstChar',
+      })
+    : selectedNode?.url === HTTPS_EXT_NODE_QORTAL_LINK
+      ? t('auth:authentication_form.using_public_node', {
+          postProcess: 'capitalizeFirstChar',
+        })
+      : customNodeStatusLabel
+        ? t('auth:authentication_form.using_custom_node_named', {
+            label: customNodeStatusLabel,
+            defaultValue: 'Using {{label}}',
+            postProcess: 'capitalizeFirstChar',
+          })
+        : t('auth:authentication_form.using_custom_node', {
+            postProcess: 'capitalizeFirstChar',
           });
+  const featureItems = useMemo(
+    () => [
+      {
+        id: 'secure',
+        icon: <SecurityRoundedIcon sx={{ fontSize: 34 }} />,
+
+        title: t('auth:intro_features.secure_title'),
+        text: t('auth:intro_features.secure_text'),
+      },
+      {
+        id: 'fast',
+        icon: <BoltRoundedIcon sx={{ fontSize: 34 }} />,
+
+        title: t('auth:intro_features.fast_title'),
+        text: t('auth:intro_features.fast_text'),
+      },
+      {
+        id: 'decentralized',
+        icon: <HubRoundedIcon sx={{ fontSize: 34 }} />,
+
+        title: t('auth:intro_features.decentralized_title'),
+        text: t('auth:intro_features.decentralized_text'),
+      },
+      {
+        id: 'built',
+        icon: <AccountCircleRoundedIcon sx={{ fontSize: 34 }} />,
+
+        title: t('auth:intro_features.built_title'),
+        text: t('auth:intro_features.built_text'),
+      },
+    ],
+    [t]
+  );
+  const handleEntryAccountsReady = useCallback(() => {
+    setIsEntryAccountsReady(true);
+  }, []);
+  const handleWalletUnlockStart = useCallback(
+    (snapshot: AuthUnlockTransitionSnapshot) => {
+      const audio = introAudioRef.current;
+      if (audio) {
+        audio.pause();
+        try {
+          audio.currentTime = 0;
+        } catch {
+          // Some media backends reject seeking before metadata is ready.
         }
-      };
-      reader.readAsText(file); // Read the file as text
-    }
+      }
+      setIsLogoRingDownActive(false);
+      setIsUnlockLeaving(true);
+      onWalletUnlockStart?.(snapshot);
+    },
+    [onWalletUnlockStart]
+  );
+  const hasAccountsText = (
+    <Wallets
+      mode="entry"
+      setExtState={setExtstate}
+      setRawWallet={setRawWallet}
+      rawWallet={rawWallet}
+      onReady={handleEntryAccountsReady}
+      onWalletUnlockStart={handleWalletUnlockStart}
+    />
+  );
+  const introComplete = introStage === 'complete';
+  const introCardGlowOpacity =
+    introComplete ? 1 : introStage === 'settling' ? 0.76 : 0;
+  const shouldAnimateIntro = !introComplete;
+  const isLogoAnimating =
+    introStage === 'running' || introStage === 'settling';
+  const isMainAuthContentVisible = introComplete || isLogoAnimating;
+  const shouldRenderIntroOverlay = shouldAnimateIntro || isLogoRingDownActive;
+  const isIntroOverlayAtRest = isLogoAnimating || isLogoRingDownActive;
+  const restoreGlobalMotionOverride = () => {
+    const override = globalMotionOverrideRef.current;
+
+    if (!override) return;
+
+    override.element.disabled = override.wasDisabled ?? false;
+    globalMotionOverrideRef.current = null;
+  };
+  const prepareIntroMetrics = () => {
+    const logoElement =
+      logoRef.current ||
+      (typeof document !== 'undefined'
+        ? (document.querySelector(
+            '[data-auth-logo-target="entry-logo"]'
+          ) as HTMLImageElement | null)
+        : null);
+
+    if (!logoElement) return false;
+
+    const rect = logoElement.getBoundingClientRect();
+    const initialWidth = rect.width * 1.45;
+    const initialHeight = rect.height * 1.45;
+    const initialTop = window.innerHeight / 2 - initialHeight / 2;
+    const yDirection = rect.top >= initialTop ? 1 : -1;
+
+    setIntroMetrics({
+      finalHeight: rect.height,
+      finalLeft: rect.left,
+      finalTop: rect.top,
+      finalWidth: rect.width,
+      initialHeight,
+      initialLeft: window.innerWidth / 2 - initialWidth / 2,
+      initialTop,
+      initialWidth,
+      overshootTop: rect.top + yDirection * AUTH_INTRO_OVERSHOOT_PX,
+    });
+
+    return true;
   };
+  const revealSx = (delayMs: number) =>
+    introComplete
+      ? {}
+      : {
+          animation: isLogoAnimating
+            ? `authIntroReveal 400ms cubic-bezier(0.4, 0, 0.2, 1) ${delayMs}ms both`
+            : 'none',
+          opacity: 0,
+          pointerEvents: 'none',
+          transform: 'translateY(6px)',
+    };
+  const cardRevealSx = (delayMs: number) =>
+    introComplete
+      ? {}
+      : {
+          animation: isLogoAnimating
+            ? `authIntroCardReveal 320ms cubic-bezier(0.4, 0, 0.2, 1) ${delayMs}ms both`
+            : 'none',
+          opacity: 0,
+          pointerEvents: 'none',
+    };
+  const stopIntroAudio = useCallback(() => {
+    const audio = introAudioRef.current;
+
+    if (!audio) return;
+
+    audio.pause();
+    audio.volume = AUTH_INTRO_AUDIO_VOLUME;
+    try {
+      audio.currentTime = 0;
+    } catch {
+      // Some media backends reject seeking before metadata is ready.
+    }
+  }, []);
+  const playIntroAudio = useCallback(() => {
+    if (!areAuthAnimationsEnabled()) return;
+
+    const audio = introAudioRef.current ?? new Audio(authIntroAudioSrc);
+    introAudioRef.current = audio;
+
+    audio.pause();
+    audio.preload = 'auto';
+    audio.volume = AUTH_INTRO_AUDIO_VOLUME;
+    try {
+      audio.currentTime = AUTH_INTRO_AUDIO_START_OFFSET_SECONDS;
+    } catch {
+      // If metadata is still loading, playback can start from the beginning.
+    }
+
+    void audio.play().catch(() => {
+      // Autoplay can be blocked outside Electron before user interaction.
+    });
+  }, []);
 
   useEffect(() => {
-    window
-      .sendMessage('getCustomNodesFromStorage')
-      .then((response) => {
-        setCustomNodes(response || []);
-        if (window?.electronAPI?.setAllowedDomains) {
-          window.electronAPI.setAllowedDomains(
-            response?.map((node) => node.url)
-          );
-        }
-      })
-      .catch((error) => {
-        console.error(
-          'Failed to get custom nodes from storage:',
-          error.message ||
-            t('core:message.error.generic', {
-              postProcess: 'capitalizeFirstChar',
-            })
-        );
-      });
+    if (!areAuthAnimationsEnabled()) {
+      setIsIntroLogoReady(true);
+      return;
+    }
+
+    let isMounted = true;
+    const logoImage = new Image();
+    const markLogoReady = () => {
+      if (isMounted) {
+        setIsIntroLogoReady(true);
+      }
+    };
+    const fallbackTimer = window.setTimeout(markLogoReady, 1200);
+
+    logoImage.onload = () => {
+      window.clearTimeout(fallbackTimer);
+      markLogoReady();
+    };
+    logoImage.onerror = () => {
+      window.clearTimeout(fallbackTimer);
+      markLogoReady();
+    };
+    logoImage.src = Logo1Dark;
+
+    if (typeof logoImage.decode === 'function') {
+      logoImage
+        .decode()
+        .then(() => {
+          window.clearTimeout(fallbackTimer);
+          markLogoReady();
+        })
+        .catch(() => {
+          window.clearTimeout(fallbackTimer);
+          markLogoReady();
+        });
+    }
+
+    return () => {
+      isMounted = false;
+      window.clearTimeout(fallbackTimer);
+    };
   }, []);
 
-  const addCustomNode = () => {
-    setMode('add-node');
-  };
+  useEffect(() => {
+    if (!areAuthAnimationsEnabled()) return undefined;
 
-  const saveCustomNodes = async (myNodes, isFullListOfNodes) => {
-    let nodes = [...(myNodes || [])];
-    if (!isFullListOfNodes && customNodeToSaveIndex !== null) {
-      nodes.splice(customNodeToSaveIndex, 1, {
-        url: removeTrailingSlash(url),
-        apikey: customApikey?.trim() || '',
-      });
-    } else if (!isFullListOfNodes && url) {
-      nodes.push({
-        url: removeTrailingSlash(url),
-        apikey: customApikey?.trim() || '',
-      });
+    const audio = new Audio(authIntroAudioSrc);
+    audio.preload = 'auto';
+    audio.volume = AUTH_INTRO_AUDIO_VOLUME;
+    introAudioRef.current = audio;
+    audio.load();
+
+    return () => {
+      stopIntroAudio();
+      introAudioRef.current = null;
+    };
+  }, [stopIntroAudio]);
+
+  useLayoutEffect(() => {
+    if (!isEntryAccountsReady) return;
+
+    const globalMotionOverride =
+      typeof document !== 'undefined'
+        ? (document.getElementById(
+            'hub-ui-animations-style'
+          ) as HTMLStyleElement | null)
+        : null;
+    const wasGlobalMotionOverrideDisabled = globalMotionOverride?.disabled;
+    if (hasAuthIntroPlayedThisSession || !areAuthAnimationsEnabled()) {
+      setIntroStage('complete');
+      return;
     }
-    if (!isFullListOfNodes && url) {
-      await handleSaveNodeInfo({
-        url: removeTrailingSlash(url),
-        apikey: customApikey?.trim() || '',
-      });
+
+    hasAuthIntroPlayedThisSession = true;
+
+    // The dashboard UI Animations toggle injects a global transition killer.
+    // If the user logs out, that style can still be mounted during auth.
+    if (globalMotionOverride) {
+      globalMotionOverrideRef.current = {
+        element: globalMotionOverride,
+        wasDisabled: wasGlobalMotionOverrideDisabled,
+      };
+      globalMotionOverride.disabled = true;
     }
 
-    setCustomNodes(nodes);
-
-    setCustomNodeToSaveIndex(null);
-    if (!nodes) return;
-    window
-      .sendMessage('setCustomNodes', nodes)
-      .then((response) => {
-        if (response) {
-          setMode('list');
-          setUrl('https://');
-          setCustomApiKey('');
-          if (window?.electronAPI?.setAllowedDomains) {
-            window.electronAPI.setAllowedDomains(
-              nodes?.map((node) => node.url)
-            );
-          }
-          // add alert if needed
-        }
-      })
-      .catch((error) => {
-        console.error(
-          'Failed to set custom nodes:',
-          error.message ||
-            t('core:message.error.generic', {
-              postProcess: 'capitalizeFirstChar',
-            })
-        );
-      });
-  };
+    if (!prepareIntroMetrics()) {
+      setIntroStage('complete');
+      return;
+    }
+
+    setIntroStage('ready');
+
+    return () => {
+      restoreGlobalMotionOverride();
+    };
+  }, [isEntryAccountsReady]);
+
+  useEffect(() => {
+    if (introStage !== 'ready' || !isIntroLogoReady) return;
+
+    let loadTimer = 0;
+    let secondFrame = 0;
+    let firstFrame = 0;
+    const startIntro = () => {
+      playIntroAudio();
+      loadTimer = window.setTimeout(() => {
+        firstFrame = window.requestAnimationFrame(() => {
+          secondFrame = window.requestAnimationFrame(() => {
+            setIntroStage('running');
+          });
+        });
+      }, AUTH_INTRO_START_DELAY_MS);
+    };
+
+    if (document.readyState === 'complete') {
+      startIntro();
+    } else {
+      window.addEventListener('load', startIntro, { once: true });
+    }
+
+    return () => {
+      window.removeEventListener('load', startIntro);
+      window.clearTimeout(loadTimer);
+      window.cancelAnimationFrame(firstFrame);
+      window.cancelAnimationFrame(secondFrame);
+    };
+  }, [introStage, isIntroLogoReady, playIntroAudio]);
+
+  useEffect(() => {
+    if (introStage !== 'running') return;
+
+    const settleTimer = window.setTimeout(() => {
+      setIsLogoRingDownActive(true);
+      setIntroStage('settling');
+    }, AUTH_INTRO_MOVE_MS);
+
+    return () => {
+      window.clearTimeout(settleTimer);
+    };
+  }, [introStage]);
+
+  useEffect(() => {
+    if (!isLogoRingDownActive) return;
+
+    const ringTimer = window.setTimeout(() => {
+      setIsLogoRingDownActive(false);
+    }, AUTH_INTRO_LOGO_RING_MS);
+
+    return () => {
+      window.clearTimeout(ringTimer);
+    };
+  }, [isLogoRingDownActive]);
+
+  useEffect(() => {
+    if (introStage !== 'settling') return;
+
+    const completeTimer = window.setTimeout(() => {
+      setIntroStage('complete');
+      restoreGlobalMotionOverride();
+    }, AUTH_INTRO_COMPLETE_DELAY_MS);
+
+    return () => {
+      window.clearTimeout(completeTimer);
+    };
+  }, [introStage, stopIntroAudio]);
+
+  useEffect(() => {
+    if (introStage !== 'running' && introStage !== 'settling') return;
+
+    const completeIntroOnResize = () => {
+      setIntroStage('complete');
+      setIsLogoRingDownActive(false);
+      restoreGlobalMotionOverride();
+    };
+
+    window.addEventListener('resize', completeIntroOnResize);
+
+    return () => {
+      window.removeEventListener('resize', completeIntroOnResize);
+    };
+  }, [introStage, stopIntroAudio]);
 
   return (
     <>
-      <Spacer height="35px" />
-      <Box
-        className="image-container"
-        style={{
-          width: '136px',
-          height: '154px',
-        }}
-      >
-        <img src={Logo1Dark} className="base-image" />
-      </Box>
-      <Spacer height="30px" />
-      <TextP
-        sx={{
-          textAlign: 'center',
-          lineHeight: 1.2,
-          fontSize: '18px',
-        }}
+      <AuthFrame
+        maxWidth={1160}
+        disableInitialAnimation
       >
-        {t('auth:welcome', { postProcess: 'capitalizeFirstChar' })}
-        <TextSpan
+        <Box
           sx={{
-            fontSize: '18px',
+            alignItems: 'center',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            opacity: isMainAuthContentVisible ? 1 : 0,
+            textAlign: 'center',
+            width: '100%',
+            '@keyframes authIntroReveal': {
+              from: {
+                opacity: 0,
+                transform: 'translateY(6px)',
+              },
+              to: {
+                opacity: 1,
+                transform: 'translateY(0)',
+              },
+            },
+            '@keyframes authIntroCardReveal': {
+              from: {
+                opacity: 0,
+              },
+              to: {
+                opacity: 1,
+              },
+            },
+            '@keyframes authIntroLogoRing': {
+              '0%': {
+                filter: AUTH_INTRO_LOGO_FINAL_FILTER,
+              },
+              [AUTH_INTRO_LOGO_RING_PEAK_PERCENT]: {
+                filter: AUTH_INTRO_LOGO_PEAK_FILTER,
+              },
+              '42%': {
+                filter: AUTH_INTRO_LOGO_MID_RING_FILTER,
+              },
+              '76%': {
+                filter: AUTH_INTRO_LOGO_LATE_RING_FILTER,
+              },
+              '100%': {
+                filter: AUTH_INTRO_LOGO_FINAL_FILTER,
+              },
+            },
+            '@keyframes authIntroLogoHaloRing': {
+              '0%': {
+                filter: 'blur(15px) brightness(1)',
+                opacity: 0.76,
+                transform: 'scale(1)',
+              },
+              [AUTH_INTRO_LOGO_RING_PEAK_PERCENT]: {
+                filter: 'blur(15px) brightness(1.22)',
+                opacity: 1,
+                transform: 'scale(1.07)',
+              },
+              '42%': {
+                filter: 'blur(15px) brightness(1.16)',
+                opacity: 0.98,
+                transform: 'scale(1.045)',
+              },
+              '76%': {
+                filter: 'blur(15px) brightness(1.07)',
+                opacity: 0.96,
+                transform: 'scale(1.018)',
+              },
+              '100%': {
+                filter: 'blur(15px) brightness(1)',
+                opacity: 1,
+                transform: 'scale(1)',
+              },
+            },
+            '@keyframes authIntroOverlayLogoRing': {
+              '0%': {
+                filter: AUTH_INTRO_LOGO_SETTLING_FILTER,
+                opacity: 1,
+              },
+              [AUTH_INTRO_LOGO_RING_PEAK_PERCENT]: {
+                filter: AUTH_INTRO_LOGO_SETTLING_PEAK_FILTER,
+                opacity: 0.94,
+              },
+              '42%': {
+                filter: AUTH_INTRO_LOGO_SETTLING_MID_FILTER,
+                opacity: 0.8,
+              },
+              '76%': {
+                filter: AUTH_INTRO_LOGO_SETTLING_LATE_FILTER,
+                opacity: 0.45,
+              },
+              '100%': {
+                filter: AUTH_INTRO_LOGO_SETTLING_FILTER,
+                opacity: 0,
+              },
+            },
           }}
         >
-          {' '}
-          QORTAL
-        </TextSpan>
-      </TextP>
-      <Spacer height="30px" />
-      <Box
-        sx={{
-          alignItems: 'center',
-          display: 'flex',
-          gap: '10px',
-        }}
-      >
-        <HtmlTooltip
-          disableHoverListener={hasSeenGettingStarted === true}
-          placement="left"
-          title={
-            <Fragment>
-              <Typography
-                color="inherit"
+          <Box
+            aria-hidden
+            sx={{
+              background: isLight
+                ? 'radial-gradient(ellipse 430px 280px at 50% 22%, rgba(62,130,255,0.2), rgba(120,165,235,0.11) 34%, rgba(195,212,245,0.07) 62%, transparent 86%), radial-gradient(ellipse 610px 820px at 27% 52%, rgba(90,140,225,0.12), rgba(170,195,235,0.07) 38%, rgba(225,232,248,0.05) 64%, transparent 91%), radial-gradient(ellipse 610px 820px at 73% 52%, rgba(90,140,225,0.12), rgba(170,195,235,0.07) 38%, rgba(225,232,248,0.05) 64%, transparent 91%)'
+                : 'radial-gradient(ellipse 430px 280px at 50% 22%, rgba(39,125,255,0.24), rgba(22,78,170,0.13) 34%, rgba(8,34,88,0.045) 62%, transparent 86%), radial-gradient(ellipse 610px 820px at 27% 52%, rgba(25,82,175,0.16), rgba(12,42,96,0.085) 38%, rgba(5,20,52,0.035) 64%, transparent 91%), radial-gradient(ellipse 610px 820px at 73% 52%, rgba(25,82,175,0.16), rgba(12,42,96,0.085) 38%, rgba(5,20,52,0.035) 64%, transparent 91%)',
+              filter: 'blur(24px)',
+              height: { xs: 880, md: 980 },
+              left: '50%',
+              opacity: 0.96,
+              pointerEvents: 'none',
+              position: 'absolute',
+              top: { xs: '47%', md: '48%' },
+              transform: 'translate(-50%, -50%)',
+              width: { xs: 1180, md: 1500 },
+              zIndex: 0,
+            }}
+          />
+          <Box
+            sx={{
+              ...cardRevealSx(820),
+              alignItems: 'center',
+              background: isLight
+                ? 'linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(249,251,255,0.97) 48%, rgba(242,246,252,0.99) 100%)'
+                : 'linear-gradient(180deg, rgba(8,15,27,0.985) 0%, rgba(5,8,14,0.992) 54%, rgba(3,5,9,0.995) 100%)',
+              border: isLight
+                ? `1px solid ${theme.palette.border.subtle}`
+                : '1px solid rgba(142,164,196,0.2)',
+              borderRadius: '16px',
+              boxShadow: isLight
+                ? '0 22px 56px rgba(45, 72, 112, 0.09), 0 0 0 1px rgba(62,130,255,0.05), inset 0 1px 0 rgba(255,255,255,0.9)'
+                : '0 28px 70px rgba(0,0,0,0.5), 0 0 46px rgba(28,86,178,0.1), inset 0 1px 0 rgba(255,255,255,0.04)',
+              display: 'flex',
+              flexDirection: 'column',
+              maxWidth: 640,
+              minHeight: { xs: 'auto', md: 560 },
+              overflow: 'visible',
+              px: { xs: 2.25, sm: 3.4 },
+              py: { xs: 3.2, sm: 4.1 },
+              position: 'relative',
+              width: '100%',
+              zIndex: 1,
+              '&::before': {
+                background: isLight
+                  ? 'radial-gradient(ellipse 560px 310px at 50% -9%, rgba(62,130,255,0.2), rgba(130,170,235,0.12) 35%, rgba(200,218,248,0.08) 62%, transparent 90%)'
+                  : 'radial-gradient(ellipse 560px 310px at 50% -9%, rgba(37,126,255,0.32), rgba(27,82,170,0.16) 35%, rgba(12,35,84,0.055) 62%, transparent 90%)',
+                borderRadius: '16px',
+                content: '""',
+                inset: 0,
+                opacity: introCardGlowOpacity,
+                pointerEvents: 'none',
+                position: 'absolute',
+                transition: 'opacity 620ms cubic-bezier(0.4, 0, 0.2, 1)',
+              },
+              '&::after': {
+                background: isLight
+                  ? 'linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(228,238,252,0.48) 38%, rgba(210,228,252,0.32) 100%)'
+                  : 'linear-gradient(180deg, rgba(224,238,255,0.54) 0%, rgba(158,188,231,0.3) 38%, rgba(123,145,174,0.2) 100%)',
+                borderRadius: '16px',
+                boxShadow: isLight
+                  ? '0 0 28px rgba(62,130,255,0.1)'
+                  : '0 0 20px rgba(81,137,239,0.12)',
+                content: '""',
+                inset: 0,
+                maskComposite: 'exclude',
+                padding: '1px',
+                pointerEvents: 'none',
+                position: 'absolute',
+                WebkitMask:
+                  'linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)',
+                WebkitMaskComposite: 'xor',
+              },
+            }}
+          >
+            <Box
+              sx={{
+                alignItems: 'center',
+                display: 'flex',
+                height: { xs: 78, md: 88 },
+                justifyContent: 'center',
+                mb: { xs: 3.2, md: 3.6 },
+                mt: { xs: -10.2, md: -11.9 },
+                position: 'relative',
+                width: { xs: 94, md: 108 },
+                zIndex: 1,
+                '&::before': {
+                  background: isLight
+                    ? 'radial-gradient(circle at 50% 40%, rgba(62,140,255,0.35), rgba(100,160,245,0.18) 34%, rgba(180,205,245,0.1) 62%, transparent 88%)'
+                    : 'radial-gradient(circle at 50% 40%, rgba(42,142,255,0.5), rgba(42,142,255,0.2) 34%, rgba(19,82,184,0.075) 62%, transparent 88%)',
+                  content: '""',
+                  filter: 'blur(15px)',
+                  inset: '-46px',
+                  opacity: introCardGlowOpacity,
+                  pointerEvents: 'none',
+                  position: 'absolute',
+                  transform: 'scale(1)',
+                  transformOrigin: 'center',
+                  transition: 'opacity 620ms cubic-bezier(0.4, 0, 0.2, 1)',
+                  animation:
+                    isLogoRingDownActive
+                      ? `authIntroLogoHaloRing ${AUTH_INTRO_LOGO_RING_MS}ms linear both`
+                      : 'none',
+                },
+                '&::after': {
+                  background: isLight
+                    ? 'radial-gradient(ellipse 430px 260px at 50% 30%, rgba(62,130,255,0.16), rgba(120,165,230,0.1) 38%, rgba(200,218,248,0.06) 66%, transparent 92%)'
+                    : 'radial-gradient(ellipse 430px 260px at 50% 30%, rgba(39,124,255,0.22), rgba(28,88,190,0.12) 38%, rgba(10,40,105,0.045) 66%, transparent 92%)',
+                  content: '""',
+                  filter: 'blur(14px)',
+                  height: 320,
+                  left: '50%',
+                  opacity: introCardGlowOpacity,
+                  pointerEvents: 'none',
+                  position: 'absolute',
+                  top: -30,
+                  transform: 'translateX(-50%)',
+                  transition: 'opacity 620ms cubic-bezier(0.4, 0, 0.2, 1)',
+                  width: 560,
+                  zIndex: -1,
+                },
+              }}
+            >
+              <Box
+                component="img"
+                ref={logoRef}
+                alt="Qortal"
+                data-auth-logo-target="entry-logo"
+                src={Logo1Dark}
                 sx={{
-                  fontSize: '16px',
+                  animation:
+                    isLogoRingDownActive
+                      ? `authIntroLogoRing ${AUTH_INTRO_LOGO_RING_MS}ms linear both`
+                      : 'none',
+                  display: 'block',
+                  filter: AUTH_INTRO_LOGO_FINAL_FILTER,
+                  height: { xs: 94, md: 108 },
+                  opacity:
+                    introStage === 'settling' || introComplete ? 1 : 0,
+                  position: 'relative',
+                  transition:
+                    'opacity 220ms cubic-bezier(0.4, 0, 0.2, 1), filter 620ms cubic-bezier(0.4, 0, 0.2, 1)',
+                  width: { xs: 94, md: 108 },
+                  zIndex: 1,
                 }}
-              >
-                {t('auth:tips.qortal_account', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </Typography>
-            </Fragment>
-          }
-        >
-          <CustomButton onClick={() => setExtstate('wallets')}>
-            {t('auth:account.account_many', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </CustomButton>
-        </HtmlTooltip>
-      </Box>
-      <Spacer height="6px" />
-      <Box
-        sx={{
-          alignItems: 'center',
-          display: 'flex',
-          gap: '10px',
-        }}
-      >
-        <HtmlTooltip
-          disableHoverListener={hasSeenGettingStarted === true}
-          placement="right"
-          title={
-            <Fragment>
+              />
+            </Box>
+
+            <Box
+              sx={{
+                ...revealSx(930),
+                position: 'relative',
+                zIndex: 1,
+              }}
+            >
               <Typography
-                color="inherit"
                 sx={{
-                  fontWeight: 'bold',
-                  fontSize: '18px',
+                  color: theme.palette.text.primary,
+                  fontSize: { xs: '1.88rem', md: '2.2rem' },
+                  fontWeight: 800,
+                  letterSpacing: '-0.03em',
+                  lineHeight: 1.05,
+                  textShadow: isLight
+                    ? '0 1px 0 rgba(255,255,255,0.85)'
+                    : '0 2px 18px rgba(0,0,0,0.28)',
                 }}
               >
-                {t('auth:tips.new_users', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
+                {t('auth:entry.title')}
               </Typography>
 
-              <Spacer height="10px" />
-
               <Typography
-                color="inherit"
                 sx={{
-                  fontSize: '16px',
+                  color: theme.palette.text.secondary,
+                  fontSize: '0.95rem',
+                  lineHeight: 1.55,
+                  mt: 0.8,
                 }}
               >
-                {t('auth:tips.new_account', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
+                {t('auth:entry.subtitle')}
               </Typography>
-            </Fragment>
-          }
-        >
-          <CustomButton
-            onClick={() => {
-              setExtstate('create-wallet');
-            }}
-            sx={{
-              backgroundColor:
-                hasSeenGettingStarted === false && theme.palette.other.positive,
-              color:
-                hasSeenGettingStarted === false && theme.palette.text.primary,
-              '&:hover': {
-                backgroundColor:
-                  hasSeenGettingStarted === false && theme.palette.other.unread,
-                color:
-                  hasSeenGettingStarted === false && theme.palette.text.primary,
-              },
-            }}
-          >
-            {t('auth:action.create_account', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </CustomButton>
-        </HtmlTooltip>
-      </Box>
-      <Spacer height="24px" />
-      <Typography
-        sx={{
-          fontSize: '12px',
-          ...(isLocalNodeUrl(selectedNode?.url) && {
-            fontWeight: 'bold',
-            color: theme.palette.other.positive,
-          }),
-        }}
-      >
-        {t('auth:node.using', { postProcess: 'capitalizeFirstChar' })}:{' '}
-        {nodeDisplay(selectedNode?.url)}
-      </Typography>
-      <>
-        <Spacer height="24px" />
+            </Box>
 
-        <Box
-          sx={{
-            alignItems: 'center',
-            borderRadius: '12px',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '14px',
-            border: `1px solid ${theme.palette.divider}`,
-            padding: '20px 30px',
-            backgroundColor: theme.palette.background.paper,
-          }}
-        >
-          <>
-            <Typography
+            <Box
               sx={{
-                textDecoration: 'underline',
-                fontWeight: 600,
+                ...revealSx(1030),
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 1.2,
+                mt: 2.9,
+                opacity: isUnlockLeaving ? 0 : 1,
+                pointerEvents: isUnlockLeaving ? 'none' : 'auto',
+                position: 'relative',
+                textAlign: 'left',
+                transition: 'opacity 180ms cubic-bezier(0.4, 0, 0.2, 1)',
+                width: '100%',
+                zIndex: 1,
               }}
             >
-              {t('auth:advanced_users', { postProcess: 'capitalizeFirstChar' })}
-            </Typography>
+              {hasAccountsText}
+            </Box>
 
-            {/* <Box
+            <Box
               sx={{
-                alignItems: 'center',
+                ...revealSx(1130),
                 display: 'flex',
-                gap: '10px',
-                justifyContent: 'center',
+                flexDirection: 'column',
+                gap: 1.25,
+                mt: 2.3,
+                opacity: isUnlockLeaving ? 0 : 1,
+                position: 'relative',
+                transition: 'opacity 180ms cubic-bezier(0.4, 0, 0.2, 1)',
                 width: '100%',
+                zIndex: 1,
               }}
             >
-              <FormControlLabel
-                sx={{
-                  '& .MuiFormControlLabel-label': {
-                    fontSize: '14px',
-                  },
+              <AuthButton
+                onClick={() => {
+                  setIsLogoRingDownActive(false);
+                  stopIntroAudio();
+                  setExtstate('create-wallet');
                 }}
-                control={
-                  <Switch
-                    checked={!useLocalNode}
-                    onChange={(event) => {
-                      if (!event.target.checked) {
-                        validateApiKey(currentNode);
-                      } else {
-                        setCurrentNode({
-                          url: getDefaultLocalNodeUrl(),
-                        });
-                        setUseLocalNode(false);
-                        window
-                          .sendMessage('setApiKey', null)
-                          .then((response) => {
-                            if (response) {
-                              setApiKey(null);
-                              handleSetGlobalApikey(null);
-                            }
-                          })
-                          .catch((error) => {
-                            console.error(
-                              t('auth:message.error.set_apikey', {
-                                postProcess: 'capitalizeFirstChar',
-                              }),
-                              error.message ||
-                                t('core:message.error.generic', {
-                                  postProcess: 'capitalizeFirstChar',
-                                })
-                            );
-                          });
-                      }
-                    }}
-                    disabled={false}
-                  />
-                }
-                label={
-                  isLocal
-                    ? t('auth:node.use_public', {
-                        postProcess: 'capitalizeFirstChar',
-                      })
-                    : t('auth:node.use_custom', {
-                        postProcess: 'capitalizeFirstChar',
-                      })
-                }
-              />
-            </Box> */}
-            {/* {currentNode?.url === getDefaultLocalNodeUrl() && (
-              <>
-                <Button
-                  onClick={() => setShowSelectApiKey(true)}
-                  size="small"
-                  variant="contained"
-                  component="label"
+              >
+                <Box
+                  sx={{
+                    alignItems: 'center',
+                    display: 'inline-flex',
+                    gap: 0.8,
+                  }}
                 >
-                  {apiKey
-                    ? t('auth:apikey.change', {
-                        postProcess: 'capitalizeFirstChar',
-                      })
-                    : t('auth:apikey.import', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                </Button>
+                  <AddRoundedIcon sx={{ fontSize: 18 }} />
+                  <span>{t('auth:entry.create_account')}</span>
+                </Box>
+              </AuthButton>
 
+              <ButtonBase
+                onClick={() => {
+                  setIsLogoRingDownActive(false);
+                  stopIntroAudio();
+                  setExtstate('wallets');
+                }}
+                sx={{
+                  alignItems: 'center',
+                  border: isLight
+                    ? `1px solid ${theme.palette.border.main}`
+                    : '1px solid rgba(255,255,255,0.1)',
+                  borderRadius: '8px',
+                  color: theme.palette.text.primary,
+                  display: 'inline-flex',
+                  gap: 0.8,
+                  height: 42,
+                  justifyContent: 'center',
+                  transition:
+                    'background-color 160ms ease, border-color 160ms ease',
+                  width: '100%',
+                  '&:hover': {
+                    backgroundColor: isLight
+                      ? theme.palette.action.hover
+                      : 'rgba(255,255,255,0.035)',
+                    borderColor: isLight
+                      ? theme.palette.border.main
+                      : 'rgba(255,255,255,0.15)',
+                  },
+                }}
+              >
+                <DownloadRoundedIcon sx={{ fontSize: 18 }} />
                 <Typography
                   sx={{
-                    fontSize: '12px',
-                    visibility: importedApiKey ? 'visible' : 'hidden',
+                    fontSize: '0.92rem',
+                    fontSynthesis: 'none',
+                    fontWeight: 500,
+                    letterSpacing: 0,
+                    lineHeight: 1,
+                    textRendering: 'geometricPrecision',
+                    WebkitFontSmoothing: 'antialiased',
                   }}
                 >
-                  {t('auth:apikey.key', { postProcess: 'capitalizeFirstChar' })}
-                  : {importedApiKey}
+                  {t('auth:entry.import_account')}
                 </Typography>
-              </>
-            )} */}
-
-            <Button
-              size="small"
-              onClick={() => {
-                setShow(true);
-              }}
-              variant="contained"
-              component="label"
-            >
-              {t('auth:node.choose', { postProcess: 'capitalizeFirstChar' })}
-            </Button>
-          </>
-
-          <Typography
-            sx={{
-              color: theme.palette.text.primary,
-              fontSize: '12px',
-            }}
-          >
-            {t('auth:build_version', { postProcess: 'capitalizeFirstChar' })}:
-            {` `}
-            {manifestData?.version}
-          </Typography>
-        </Box>
-      </>
-      <CustomizedSnackbars
-        open={openSnack}
-        setOpen={setOpenSnack}
-        info={infoSnack}
-        setInfo={setInfoSnack}
-      />
-      {show && (
-        <Dialog
-          open={show}
-          aria-labelledby="alert-dialog-title"
-          aria-describedby="alert-dialog-description"
-          fullWidth
-        >
-          <DialogTitle
-            id="alert-dialog-title"
-            sx={{
-              fontWeight: 'bold',
-              opacity: 1,
-              textAlign: 'center',
-            }}
-          >
-            {t('auth:node.custom_many', { postProcess: 'capitalizeAll' })}
-          </DialogTitle>
+              </ButtonBase>
+            </Box>
 
-          <DialogContent>
             <Box
               sx={{
+                ...revealSx(1230),
+                alignItems: 'center',
+                color: theme.palette.text.secondary,
                 display: 'flex',
-                flexDirection: 'column',
-                height: '60vh',
-                overflow: 'auto',
-                width: '100% !important',
+                flexDirection: { xs: 'column', sm: 'row' },
+                gap: { xs: 0.7, sm: 3.1 },
+                justifyContent: 'center',
+                mt: 1.75,
+                opacity: isUnlockLeaving ? 0 : 1,
+                position: 'relative',
+                transition: 'opacity 180ms cubic-bezier(0.4, 0, 0.2, 1)',
+                zIndex: 1,
               }}
             >
-              {mode === 'list' && (
+              <Box
+                sx={{ alignItems: 'center', display: 'inline-flex', gap: 0.9 }}
+              >
                 <Box
                   sx={{
-                    gap: '20px',
-                    display: 'flex',
-                    flexDirection: 'column',
+                    backgroundColor: usingLocalNode
+                      ? theme.palette.other.positive
+                      : selectedNode?.url === HTTPS_EXT_NODE_QORTAL_LINK
+                        ? theme.palette.primary.main
+                        : '#D8BA8A',
+                    borderRadius: '999px',
+                    height: 7,
+                    width: 7,
+                  }}
+                />
+                <Typography
+                  sx={{
+                    fontSize: '0.8rem',
+                    fontWeight: 500,
+                    lineHeight: 1,
                   }}
                 >
-                  <Box
+                  {connectionLabel}
+                </Typography>
+              </Box>
+              <Box
+                sx={{
+                  backgroundColor: isLight
+                    ? theme.palette.divider
+                    : 'rgba(255,255,255,0.14)',
+                  display: { xs: 'none', sm: 'block' },
+                  height: 22,
+                  width: '1px',
+                }}
+              />
+              <ButtonBase
+                onClick={() => setIsConnectionModeOpen(true)}
+                sx={{
+                  alignItems: 'center',
+                  color: theme.palette.text.secondary,
+                  display: 'inline-flex',
+                  gap: 0.8,
+                  minWidth: 0,
+                  p: 0,
+                  '&:hover': {
+                    color: theme.palette.text.primary,
+                  },
+                }}
+              >
+                <CodeRoundedIcon sx={{ fontSize: 14 }} />
+                <Typography
+                  sx={{
+                    fontSize: '0.8rem',
+                    fontWeight: 500,
+                    lineHeight: 1,
+                  }}
+                >
+                  {t('auth:connection_mode.title')}
+                </Typography>
+              </ButtonBase>
+            </Box>
+          </Box>
+
+          <Box
+            sx={{
+              ...revealSx(1330),
+              display: { xs: 'none', md: 'grid' },
+              gap: 6.5,
+              gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+              maxWidth: 1120,
+              mt: 5.8,
+              width: '100%',
+            }}
+          >
+            {featureItems.map((item) => (
+              <Box
+                key={item.id}
+                sx={{
+                  alignItems: 'flex-start',
+                  display: 'grid',
+                  gap: 1.8,
+                  gridTemplateColumns: '50px minmax(0,1fr)',
+                  textAlign: 'left',
+                }}
+              >
+                <Box sx={{ color: theme.palette.primary.main, pt: 0.1 }}>
+                  {item.icon}
+                </Box>
+                <Box sx={{ minWidth: 0 }}>
+                  <Typography
                     sx={{
-                      display: 'flex',
-                      gap: '10px',
-                      flexDirection: 'column',
+                      color: theme.palette.text.primary,
+                      fontSize: '1rem',
+                      fontWeight: 800,
+                      lineHeight: 1.25,
                     }}
                   >
-                    <Typography
-                      sx={{
-                        fontSize: '14px',
-                      }}
-                    >
-                      {getDefaultLocalNodeUrl()} (Local node)
-                    </Typography>
-
-                    <Box
-                      sx={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        gap: '10px',
-                        justifyContent: 'space-between',
-                      }}
-                    >
-                      <Button
-                        disabled={isLocalNodeUrl(selectedNode?.url)}
-                        size="small"
-                        onClick={() => {
-                          setMode('list');
-                          setShow(false);
-                          const payload = {
-                            url: getDefaultLocalNodeUrl(),
-                            apikey: '',
-                          };
-                          window
-                            .sendMessage('setApiKey', payload)
-                            .then((response) => {
-                              if (response) {
-                                setSelectedNode(payload);
-                                handleSetGlobalApikey(payload);
-                              }
-                            })
-                            .catch((error) => {
-                              console.error(
-                                t('auth:message.error.set_apikey', {
-                                  postProcess: 'capitalizeFirstChar',
-                                }),
-                                error.message ||
-                                  t('core:message.error.generic', {
-                                    postProcess: 'capitalizeFirstChar',
-                                  })
-                              );
-                            });
-                        }}
-                        variant="contained"
-                      >
-                        {t('core:action.choose', {
-                          postProcess: 'capitalizeFirstChar',
-                        })}
-                      </Button>
-                    </Box>
-                  </Box>
-                  <Box
+                    {item.title}
+                  </Typography>
+                  <Typography
                     sx={{
-                      display: 'flex',
-                      gap: '10px',
-                      flexDirection: 'column',
+                      color: theme.palette.text.secondary,
+                      fontSize: '0.9rem',
+                      lineHeight: 1.45,
+                      mt: 0.45,
                     }}
                   >
-                    <Typography
-                      sx={{
-                        fontSize: '14px',
-                      }}
-                    >
-                      {HTTPS_EXT_NODE_QORTAL_LINK} (Public node)
-                    </Typography>
-
-                    <Box
-                      sx={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        gap: '10px',
-                        justifyContent: 'space-between',
-                      }}
-                    >
-                      <Button
-                        disabled={
-                          selectedNode?.url === HTTPS_EXT_NODE_QORTAL_LINK
-                        }
-                        size="small"
-                        onClick={() => {
-                          setMode('list');
-                          setShow(false);
-                          const payload = {
-                            url: HTTPS_EXT_NODE_QORTAL_LINK,
-                            apikey: '',
-                          };
-                          window
-                            .sendMessage('setApiKey', payload)
-                            .then((response) => {
-                              if (response) {
-                                setSelectedNode(payload);
-                                handleSetGlobalApikey(payload);
-                              }
-                            })
-                            .catch((error) => {
-                              console.error(
-                                t('auth:message.error.set_apikey', {
-                                  postProcess: 'capitalizeFirstChar',
-                                }),
-                                error.message ||
-                                  t('core:message.error.generic', {
-                                    postProcess: 'capitalizeFirstChar',
-                                  })
-                              );
-                            });
-                        }}
-                        variant="contained"
-                      >
-                        {t('core:action.choose', {
-                          postProcess: 'capitalizeFirstChar',
-                        })}
-                      </Button>
-                    </Box>
-                  </Box>
-
-                  {customNodes?.map((node, index) => {
-                    return (
-                      <Box
-                        key={index}
-                        sx={{
-                          display: 'flex',
-                          gap: '10px',
-                          flexDirection: 'column',
-                        }}
-                      >
-                        <Typography
-                          sx={{
-                            fontSize: '14px',
-                          }}
-                        >
-                          {node?.url}
-                        </Typography>
-
-                        <Box
-                          sx={{
-                            alignItems: 'center',
-                            display: 'flex',
-                            gap: '10px',
-                            justifyContent: 'space-between',
-                          }}
-                        >
-                          <Button
-                            disabled={selectedNode?.url === node?.url}
-                            size="small"
-                            onClick={() => {
-                              const payload = {
-                                url: node?.url,
-                                apikey: node?.apikey,
-                              };
-
-                              setMode('list');
-                              setShow(false);
-
-                              window
-                                .sendMessage('setApiKey', payload)
-                                .then((response) => {
-                                  if (response) {
-                                    setSelectedNode(payload);
-                                    handleSetGlobalApikey(payload);
-                                  }
-                                })
-                                .catch((error) => {
-                                  console.error(
-                                    t('auth:message.error.set_apikey', {
-                                      postProcess: 'capitalizeFirstChar',
-                                    }),
-                                    error.message ||
-                                      t('core:message.error.generic', {
-                                        postProcess: 'capitalizeFirstChar',
-                                      })
-                                  );
-                                });
-                            }}
-                            variant="contained"
-                          >
-                            {t('core:action.choose', {
-                              postProcess: 'capitalizeFirstChar',
-                            })}
-                          </Button>
-
-                          <Button
-                            size="small"
-                            onClick={() => {
-                              setCustomApiKey(node?.apikey);
-                              setUrl(node?.url);
-                              setMode('add-node');
-                              setCustomNodeToSaveIndex(index);
-                            }}
-                            variant="contained"
-                          >
-                            {t('core:action.edit', {
-                              postProcess: 'capitalizeFirstChar',
-                            })}
-                          </Button>
-
-                          <Button
-                            size="small"
-                            onClick={async () => {
-                              if (node?.url === selectedNode?.url) {
-                                await handleSaveNodeInfo({
-                                  url: getDefaultLocalNodeUrl(),
-                                  apikey: '',
-                                });
-                              }
-                              const nodesToSave = [
-                                ...(customNodes || []),
-                              ].filter((item) => item?.url !== node?.url);
-                              saveCustomNodes(nodesToSave, true);
-                            }}
-                            variant="contained"
-                          >
-                            {t('core:action.remove', {
-                              postProcess: 'capitalizeFirstChar',
-                            })}
-                          </Button>
-                        </Box>
-                      </Box>
-                    );
-                  })}
+                    {item.text}
+                  </Typography>
                 </Box>
-              )}
+              </Box>
+            ))}
+          </Box>
+        </Box>
+      </AuthFrame>
 
-              {mode === 'add-node' && (
-                <Box
-                  sx={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    gap: '10px',
-                    justifyContent: 'space-between',
-                  }}
-                >
-                  <Input
-                    placeholder={t('core:url', {
-                      postProcess: 'capitalizeAll',
-                    })}
-                    value={url}
-                    onChange={(e) => {
-                      setUrl(e.target.value);
-                    }}
-                  />
-
-                  <Input
-                    placeholder={t('auth:apikey.key', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                    value={customApikey}
-                    onChange={(e) => {
-                      setCustomApiKey(e.target.value);
-                    }}
-                  />
-                </Box>
-              )}
-            </Box>
-          </DialogContent>
-
-          <DialogActions>
-            {mode === 'list' && (
-              <Button variant="contained" onClick={addCustomNode}>
-                {t('core:action.add', { postProcess: 'capitalizeFirstChar' })}
-              </Button>
-            )}
-
-            {mode === 'list' && (
-              <>
-                <Button
-                  variant="contained"
-                  onClick={() => {
-                    setShow(false);
-                  }}
-                  autoFocus
-                >
-                  {t('core:action.close', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </Button>
-              </>
-            )}
-
-            {mode === 'add-node' && (
-              <>
-                <Button
-                  variant="contained"
-                  onClick={() => {
-                    setMode('list');
-                    setCustomNodeToSaveIndex(null);
-                  }}
-                >
-                  {t('auth:action.return_to_list', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </Button>
-
-                <Button
-                  variant="contained"
-                  disabled={!url}
-                  onClick={() => saveCustomNodes(customNodes)}
-                  autoFocus
-                >
-                  {t('core:action.save', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </Button>
-              </>
-            )}
-          </DialogActions>
-        </Dialog>
-      )}
-      {showSelectApiKey && (
-        <Dialog
-          open={showSelectApiKey}
-          aria-labelledby="alert-dialog-title"
-          aria-describedby="alert-dialog-description"
+      {shouldRenderIntroOverlay && introMetrics && (
+        <Box
+          aria-hidden
+          sx={{
+            backgroundColor: isIntroOverlayAtRest
+              ? 'transparent'
+              : isLight
+                ? 'rgba(247,249,252,1)'
+                : 'rgba(6,8,13,1)',
+            inset: 0,
+            pointerEvents: 'none',
+            position: 'fixed',
+            transition: isLogoAnimating
+              ? 'background-color 420ms cubic-bezier(0.4, 0, 0.2, 1) 840ms'
+              : 'none',
+            zIndex: 5000,
+          }}
         >
-          <DialogTitle
-            id="alert-dialog-title"
+          <Box
+            component="img"
+            alt=""
+            src={Logo1Dark}
             sx={{
-              textAlign: 'center',
-              fontWeight: 'bold',
-              opacity: 1,
+              animation:
+                isLogoRingDownActive
+                  ? `authIntroOverlayLogoRing ${AUTH_INTRO_LOGO_RING_MS}ms linear both`
+                  : 'none',
+              display: 'block',
+              filter:
+                introStage === 'settling'
+                  ? AUTH_INTRO_LOGO_SETTLING_FILTER
+                  : introStage === 'running'
+                    ? 'brightness(0.88) contrast(0.99) saturate(0.96)'
+                    : 'brightness(0.78) contrast(0.96) saturate(0.92)',
+              height: isIntroOverlayAtRest
+                ? introMetrics.finalHeight
+                : introMetrics.initialHeight,
+              left: isIntroOverlayAtRest
+                ? introMetrics.finalLeft
+                : introMetrics.initialLeft,
+              position: 'fixed',
+              top:
+                introStage === 'running'
+                  ? introMetrics.overshootTop
+                  : isIntroOverlayAtRest
+                    ? introMetrics.finalTop
+                    : introMetrics.initialTop,
+              transition:
+                introStage === 'running'
+                  ? `top ${AUTH_INTRO_MOVE_MS}ms cubic-bezier(0.4, 0, 0.2, 1), left ${AUTH_INTRO_MOVE_MS}ms cubic-bezier(0.4, 0, 0.2, 1), width ${AUTH_INTRO_MOVE_MS}ms cubic-bezier(0.4, 0, 0.2, 1), height ${AUTH_INTRO_MOVE_MS}ms cubic-bezier(0.4, 0, 0.2, 1), filter 260ms cubic-bezier(0.4, 0, 0.2, 1)`
+                  : introStage === 'settling'
+                    ? `top ${AUTH_INTRO_SETTLE_MS}ms ${AUTH_INTRO_SETTLE_EASING}, filter ${AUTH_INTRO_COMPLETE_DELAY_MS}ms cubic-bezier(0.4, 0, 0.2, 1)`
+                    : 'none',
+              width: isIntroOverlayAtRest
+                ? introMetrics.finalWidth
+                : introMetrics.initialWidth,
             }}
-          >
-            {t('auth:apikey.enter', { postProcess: 'capitalizeFirstChar' })}
-          </DialogTitle>
-
-          <DialogContent>
-            <Box
-              sx={{
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '20px',
-              }}
-            >
-              <TextField
-                value={enteredApiKey}
-                onChange={(e) => setEnteredApiKey(e.target.value)}
-              />
-              <Button
-                disabled={!!enteredApiKey}
-                variant="contained"
-                component="label"
-              >
-                {t('auth:apikey.alternative', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-                <input
-                  type="file"
-                  accept=".txt"
-                  hidden
-                  onChange={handleFileChangeApiKey} // File input handler
-                />
-              </Button>
-            </Box>
-          </DialogContent>
-
-          <DialogActions>
-            <Button
-              variant="contained"
-              disabled={!enteredApiKey}
-              onClick={() => {
-                try {
-                  if (customNodes) {
-                    setCustomNodes((prev) => {
-                      const copyPrev = [...prev];
-                      const findLocalIndex = copyPrev?.findIndex((item) =>
-                        isLocalNodeUrl(item?.url)
-                      );
-                      if (findLocalIndex === -1) {
-                        copyPrev.unshift({
-                          url: getDefaultLocalNodeUrl(),
-                          apikey: enteredApiKey,
-                        });
-                      } else {
-                        copyPrev[findLocalIndex] = {
-                          url: getDefaultLocalNodeUrl(),
-                          apikey: enteredApiKey,
-                        };
-                      }
-                      window
-                        .sendMessage('setCustomNodes', copyPrev)
-                        .catch((error) => {
-                          console.error(
-                            'Failed to set custom nodes:',
-                            error.message ||
-                              t('core:message.error.generic', {
-                                postProcess: 'capitalizeFirstChar',
-                              })
-                          );
-                        });
-                      return copyPrev;
-                    });
-                  }
-                  setUseLocalNode(false);
-                  setShowSelectApiKey(false);
-                  setEnteredApiKey('');
-                } catch (error) {
-                  console.error(error);
-                }
-              }}
-              autoFocus
-            >
-              {t('core:action.save', { postProcess: 'capitalizeFirstChar' })}
-            </Button>
-
-            <Button
-              variant="contained"
-              onClick={() => {
-                setEnteredApiKey('');
-                setShowSelectApiKey(false);
-              }}
-            >
-              {t('core:action.close', { postProcess: 'capitalizeFirstChar' })}
-            </Button>
-          </DialogActions>
-        </Dialog>
+          />
+        </Box>
       )}
-      {/* TODO update tutorial */}
-      {/* <ButtonBase
-        onClick={() => {
-          showTutorial('create-account', true);
-        }}
-        sx={{
-          position: 'fixed',
-          bottom: '25px',
-          right: '25px',
-        }}
-      >
-        <HelpIcon
-          sx={{
-            color: theme.palette.other.unread,
-          }}
-        />
-      </ButtonBase> */}
+
+      <ConnectionModeModal
+        open={isConnectionModeOpen}
+        onClose={() => setIsConnectionModeOpen(false)}
+      />
     </>
   );
 };
diff --git a/src/components/PasswordField/PasswordField.tsx b/src/components/PasswordField/PasswordField.tsx
index 5bf18398..abc90783 100644
--- a/src/components/PasswordField/PasswordField.tsx
+++ b/src/components/PasswordField/PasswordField.tsx
@@ -5,10 +5,15 @@ import {
   TextFieldProps,
   styled,
 } from '@mui/material';
+import { alpha } from '@mui/material/styles';
 import { forwardRef, useState } from 'react';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 
+type PasswordFieldProps = TextFieldProps & {
+  suppressAutofill?: boolean;
+};
+
 export const CustomInput = styled(TextField)(({ theme }) => ({
   width: '183px',
   borderRadius: '8px',
@@ -37,6 +42,25 @@ export const CustomInput = styled(TextField)(({ theme }) => ({
       border: `0.5px solid ${theme.palette.divider}`,
     },
   },
+  '& .MuiInputAdornment-root .MuiButtonBase-root': {
+    borderRadius: 6,
+    color:
+      theme.palette.mode === 'dark'
+        ? 'rgba(214,221,233,0.42)'
+        : alpha(theme.palette.text.secondary, 0.82),
+    minWidth: 0,
+    opacity: 0.88,
+    padding: 4,
+    transition: 'color 160ms ease, opacity 160ms ease, background-color 160ms ease',
+  },
+  '& .MuiInputAdornment-root .MuiButtonBase-root:hover': {
+    backgroundColor:
+      theme.palette.mode === 'dark'
+        ? 'rgba(255,255,255,0.035)'
+        : alpha(theme.palette.common.black, 0.06),
+    color: theme.palette.text.primary,
+    opacity: 1,
+  },
   '& .MuiInput-underline:before': {
     borderBottom: 'none',
   },
@@ -52,42 +76,103 @@ export const CustomInput = styled(TextField)(({ theme }) => ({
       fill: theme.palette.secondary,
     },
   },
+  '& input:-webkit-autofill, & input:-webkit-autofill:hover, & input:-webkit-autofill:focus':
+    {
+      WebkitBoxShadow:
+        theme.palette.mode === 'dark'
+          ? '0 0 0 100px rgb(38, 42, 50) inset'
+          : '0 0 0 100px rgb(248, 250, 253) inset',
+      WebkitTextFillColor: theme.palette.text.primary,
+      caretColor: theme.palette.text.primary,
+      transition: 'background-color 9999s ease-out 0s',
+    },
 }));
 
-export const PasswordField = forwardRef<HTMLInputElement, TextFieldProps>(
-  ({ ...props }, ref) => {
+export const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
+  (
+    {
+      InputProps,
+      inputProps,
+      onBlur,
+      onFocus,
+      onMouseDown,
+      suppressAutofill = false,
+      value,
+      ...props
+    },
+    ref
+  ) => {
     const [canViewPassword, setCanViewPassword] = useState(false);
+    const [isEditable, setIsEditable] = useState(!suppressAutofill);
+    const hasValue = typeof value === 'string' ? value.length > 0 : Boolean(value);
 
     return (
       <CustomInput
         type={canViewPassword ? 'text' : 'password'}
+        value={value}
+        onFocus={(event) => {
+          if (suppressAutofill) {
+            setIsEditable(true);
+          }
+          onFocus?.(event);
+        }}
+        onMouseDown={(event) => {
+          if (suppressAutofill) {
+            setIsEditable(true);
+          }
+          onMouseDown?.(event);
+        }}
+        onBlur={(event) => {
+          if (suppressAutofill && !hasValue) {
+            setIsEditable(false);
+          }
+          onBlur?.(event);
+        }}
         InputProps={{
+          ...InputProps,
+          readOnly:
+            Boolean(InputProps?.readOnly) ||
+            (suppressAutofill ? !isEditable && !hasValue : false),
           endAdornment: (
-            <InputAdornment
-              position="end"
-              data-testid="toggle-view-password-btn"
-              onClick={() => {
-                setCanViewPassword((prevState) => !prevState);
-              }}
-            >
-              {canViewPassword ? (
-                <ButtonBase
-                  data-testid="plain-text-indicator"
-                  sx={{ minWidth: 0, p: 0 }}
-                >
-                  <VisibilityOffIcon />
-                </ButtonBase>
-              ) : (
-                <ButtonBase
-                  data-testid="password-text-indicator"
-                  sx={{ minWidth: 0, p: 0 }}
-                >
-                  <VisibilityIcon />
-                </ButtonBase>
-              )}
-            </InputAdornment>
+            <>
+              {InputProps?.endAdornment}
+              <InputAdornment
+                position="end"
+                data-testid="toggle-view-password-btn"
+                onClick={() => {
+                  setCanViewPassword((prevState) => !prevState);
+                }}
+              >
+                {canViewPassword ? (
+                  <ButtonBase
+                    data-testid="plain-text-indicator"
+                    sx={{ minWidth: 0, p: 0 }}
+                  >
+                    <VisibilityOffIcon />
+                  </ButtonBase>
+                ) : (
+                  <ButtonBase
+                    data-testid="password-text-indicator"
+                    sx={{ minWidth: 0, p: 0 }}
+                  >
+                    <VisibilityIcon />
+                  </ButtonBase>
+                )}
+              </InputAdornment>
+            </>
           ),
         }}
+        inputProps={{
+          ...inputProps,
+          ...(suppressAutofill
+            ? {
+                autoComplete: 'new-password',
+                'data-1p-ignore': 'true',
+                'data-lpignore': 'true',
+                spellCheck: 'false',
+              }
+            : {}),
+        }}
         inputRef={ref}
         {...props}
       />
diff --git a/src/components/Profile/AuthenticatedProfile.tsx b/src/components/Profile/AuthenticatedProfile.tsx
index 83d294fa..a3a4985f 100644
--- a/src/components/Profile/AuthenticatedProfile.tsx
+++ b/src/components/Profile/AuthenticatedProfile.tsx
@@ -13,7 +13,6 @@ export type AuthenticatedProfileProps = ProfileLeftProps & {
   onOpenSettings: () => void;
   onOpenDrawerLookup: () => void;
   onOpenWalletsApp: () => void;
-  onOpenDrawerProfile: () => void;
   getUserInfo: (useTimer?: boolean) => Promise<void>;
   onOpenMinting: () => void;
   showTutorial: (key: string, force?: boolean) => void;
@@ -38,7 +37,6 @@ export const AuthenticatedProfile = ({
   onOpenSettings,
   onOpenDrawerLookup,
   onOpenWalletsApp,
-  onOpenDrawerProfile,
   getUserInfo,
   onOpenMinting,
   showTutorial,
diff --git a/src/components/Profile/ChatWidgetReopenIcon.tsx b/src/components/Profile/ChatWidgetReopenIcon.tsx
index c3560528..991a900b 100644
--- a/src/components/Profile/ChatWidgetReopenIcon.tsx
+++ b/src/components/Profile/ChatWidgetReopenIcon.tsx
@@ -2,7 +2,7 @@ import { ButtonBase, Tooltip, useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useAtom, useAtomValue } from 'jotai';
 import { chatWidgetClosedAtom, memberGroupsAtom } from '../../atoms/global';
-import ChatBubbleOutlineRoundedIcon from '@mui/icons-material/ChatBubbleOutlineRounded';
+import MoreRoundedIcon from '@mui/icons-material/MoreRounded';
 import { Spacer } from '../../common/Spacer';
 
 const tooltipSlotProps = (theme: any) => ({
@@ -19,8 +19,15 @@ const tooltipSlotProps = (theme: any) => ({
   },
 });
 
-/** Right-sidebar icon to reopen the chat widget. Subscribes to atoms; only visible when widget is closed and user has groups. */
-export function ChatWidgetReopenIcon({ inTitleBar = false }: { inTitleBar?: boolean } = {}) {
+export function ChatWidgetReopenIcon({
+  inTitleBar = false,
+  buttonSx = undefined,
+  iconSx = undefined,
+}: {
+  inTitleBar?: boolean;
+  buttonSx?: any;
+  iconSx?: any;
+} = {}) {
   const theme = useTheme();
   const { t } = useTranslation(['group']);
   const [chatWidgetClosed, setChatWidgetClosed] = useAtom(chatWidgetClosedAtom);
@@ -36,7 +43,19 @@ export function ChatWidgetReopenIcon({ inTitleBar = false }: { inTitleBar?: bool
       aria-label={t('group:group.messaging', {
         postProcess: 'capitalizeFirstChar',
       })}
-      sx={inTitleBar ? { width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: 1 } : undefined}
+      sx={{
+        ...(inTitleBar
+          ? {
+              width: 32,
+              height: 32,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              borderRadius: 1,
+            }
+          : {}),
+        ...(buttonSx || {}),
+      }}
     >
       <Tooltip
         title={
@@ -56,20 +75,20 @@ export function ChatWidgetReopenIcon({ inTitleBar = false }: { inTitleBar?: bool
         arrow
         sx={{ fontSize: inTitleBar ? '20' : '24' }}
         slotProps={tooltipSlotProps(theme)}
-      >
-        <ChatBubbleOutlineRoundedIcon
-          sx={{ color: theme.palette.text.secondary, fontSize: inTitleBar ? 20 : undefined }}
+        >
+          <MoreRoundedIcon
+          sx={{
+            color: theme.palette.text.secondary,
+            fontSize: inTitleBar ? 20 : undefined,
+            ...(iconSx || {}),
+          }}
         />
       </Tooltip>
     </ButtonBase>
   );
 
   if (inTitleBar) {
-    return (
-      <div style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-        {icon}
-      </div>
-    );
+    return icon;
   }
   return (
     <>
diff --git a/src/components/QMailStatus.tsx b/src/components/QMailStatus.tsx
index 61dca28c..40981380 100644
--- a/src/components/QMailStatus.tsx
+++ b/src/components/QMailStatus.tsx
@@ -1,73 +1,108 @@
-import { useMemo } from 'react';
-import { mailsAtom, qMailLastEnteredTimestampAtom } from '../atoms/global';
-import { isLessThanOneWeekOld } from './Group/qmailUtils';
-import { ButtonBase, Tooltip, useTheme } from '@mui/material';
-import { executeEvent } from '../utils/events';
 import { Mail } from '@mui/icons-material';
+import { ButtonBase, Tooltip, useTheme } from '@mui/material';
+import { useAtom, useAtomValue } from 'jotai';
+import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useAtom } from 'jotai';
+import {
+  isNotificationSeenInAppFromKeyTimes,
+  notificationSeenInAppKeyTimesAtom,
+  paymentNotificationsAtom,
+  qMailLastEnteredTimestampAtom,
+} from '../atoms/global';
+import { executeEvent } from '../utils/events';
 
-export const QMailStatus = ({ compact = false }: { compact?: boolean }) => {
-  const { t } = useTranslation([
-    'auth',
-    'core',
-    'group',
-    'question',
-    'tutorial',
-  ]);
-  const theme = useTheme();
+function toTimestampMs(value) {
+  if (value == null || typeof value !== 'number') return null;
+  return value < 1e12 ? value * 1000 : value;
+}
 
-  const [lastEnteredTimestamp, setLastEnteredTimestamp] = useAtom(
-    qMailLastEnteredTimestampAtom
-  );
-  const [mails, setMails] = useAtom(mailsAtom);
+export const QMailStatus = ({
+  compact = false,
+  buttonSx = undefined,
+  iconSx = undefined,
+  tooltipPlacement = undefined,
+}: {
+  compact?: boolean;
+  buttonSx?: any;
+  iconSx?: any;
+  tooltipPlacement?: 'bottom' | 'left' | 'right' | 'top';
+}) => {
+  const { t } = useTranslation(['core']);
+  const theme = useTheme();
+  const [, setLastEnteredTimestamp] = useAtom(qMailLastEnteredTimestampAtom);
+  const notifications = useAtomValue(paymentNotificationsAtom);
+  const seenInAppKeyTimes = useAtomValue(notificationSeenInAppKeyTimesAtom);
 
   const hasNewMail = useMemo(() => {
-    if (mails?.length === 0) return false;
-    const latestMail = mails[0];
-    if (!lastEnteredTimestamp && isLessThanOneWeekOld(latestMail?.created))
-      return true;
-    if (
-      lastEnteredTimestamp < latestMail?.created &&
-      isLessThanOneWeekOld(latestMail?.created)
-    )
-      return true;
-    return false;
-  }, [lastEnteredTimestamp, mails]);
+    return (notifications ?? []).some((notification) => {
+      const isQMail =
+        notification?.event === 'RESOURCE_PUBLISHED' &&
+        (notification?.notificationId === 'q-mail-notification' ||
+          notification?.appName === 'Q-Mail');
+      if (!isQMail) return false;
+      const timestamp = toTimestampMs(
+        notification?.data?.created ??
+          notification?.data?.timestamp ??
+          notification?.timestamp
+      );
+      if (timestamp == null) return false;
+      return !isNotificationSeenInAppFromKeyTimes(
+        notification,
+        seenInAppKeyTimes
+      );
+    });
+  }, [notifications, seenInAppKeyTimes]);
 
-  const button = (
+  return (
     <ButtonBase
       onClick={() => {
-        executeEvent('addTab', { data: { service: 'APP', name: 'q-mail' } });
+        executeEvent('addTab', {
+          data: {
+            name: 'Q-Mail',
+            navigateIfAlreadyOpen: true,
+            service: 'APP',
+          },
+        });
         executeEvent('open-apps-mode', {});
         setLastEnteredTimestamp(Date.now());
       }}
-      style={{
+      sx={{
         position: 'relative',
-        ...(compact && { width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center' }),
+        ...(compact && {
+          alignItems: 'center',
+          borderRadius: 1,
+          display: 'flex',
+          height: 32,
+          justifyContent: 'center',
+          width: 32,
+        }),
+        ...(buttonSx || {}),
       }}
     >
       {hasNewMail && (
-        <div
+        <span
           style={{
             backgroundColor: theme.palette.other.unread,
             borderRadius: '50%',
             height: compact ? '10px' : '15px',
             outline: '1px solid white',
             position: 'absolute',
-            ...(compact ? { right: 4, top: 4 } : { right: -7, top: -7 }),
+            right: compact ? 4 : -7,
+            top: compact ? 4 : -7,
             width: compact ? '10px' : '15px',
             zIndex: 1,
           }}
         />
       )}
       <Tooltip
+        arrow
+        placement={tooltipPlacement || (compact ? 'bottom' : 'left')}
         title={
           <span
             style={{
               color: theme.palette.text.primary,
               fontSize: '14px',
-              fontWeight: 700,
+              fontWeight: 600,
               textTransform: 'uppercase',
             }}
           >
@@ -76,18 +111,11 @@ export const QMailStatus = ({ compact = false }: { compact?: boolean }) => {
             })}
           </span>
         }
-        placement={compact ? 'bottom' : 'left'}
-        arrow
-        sx={{ fontSize: compact ? '20' : '24' }}
         slotProps={{
+          arrow: { sx: { color: theme.palette.background.paper } },
           tooltip: {
             sx: {
-              color: theme.palette.text.primary,
               backgroundColor: theme.palette.background.paper,
-            },
-          },
-          arrow: {
-            sx: {
               color: theme.palette.text.primary,
             },
           },
@@ -97,18 +125,10 @@ export const QMailStatus = ({ compact = false }: { compact?: boolean }) => {
           sx={{
             color: theme.palette.text.secondary,
             fontSize: compact ? 20 : undefined,
+            ...(iconSx || {}),
           }}
         />
       </Tooltip>
     </ButtonBase>
   );
-
-  if (compact) {
-    return (
-      <div style={{ width: 32, height: 32, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-        {button}
-      </div>
-    );
-  }
-  return button;
 };
diff --git a/src/components/QortPayment.tsx b/src/components/QortPayment.tsx
index ae7cd6bf..82eee89b 100644
--- a/src/components/QortPayment.tsx
+++ b/src/components/QortPayment.tsx
@@ -3,19 +3,30 @@ import {
   Box,
   Button,
   CircularProgress,
+  IconButton,
+  InputAdornment,
   TextField,
   Typography,
   useTheme,
 } from '@mui/material';
-import { useState } from 'react';
-import { Spacer } from '../common/Spacer';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import { useEffect, useState } from 'react';
 import { getFee } from '../background/background.ts';
 import { useTranslation } from 'react-i18next';
 import BoundedNumericTextField from '../common/BoundedNumericTextField.tsx';
-import { PasswordField } from './PasswordField/PasswordField.tsx';
 import { ErrorText } from './ErrorText/ErrorText.tsx';
+import { getBlueTier1ButtonSx } from '../styles/blueMaterial';
+import { executeEvent } from '../utils/events';
+import { QORTINO_DONATION_COMPLETED_EVENT } from './Group/qortinoDonationEasterEgg';
 
-export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
+export const QortPayment = ({
+  balance,
+  show,
+  onSuccess,
+  defaultPaymentTo,
+  compact = false,
+}) => {
   const theme = useTheme();
   const { t } = useTranslation([
     'auth',
@@ -27,14 +38,98 @@ export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
   const [paymentTo, setPaymentTo] = useState<string>(defaultPaymentTo);
   const [paymentAmount, setPaymentAmount] = useState<number>(0);
   const [paymentPassword, setPaymentPassword] = useState<string>('');
+  const [isPaymentPasswordEditable, setIsPaymentPasswordEditable] =
+    useState(false);
   const [sendPaymentError, setSendPaymentError] = useState<string>('');
-  const [sendPaymentSuccess, setSendPaymentSuccess] = useState<string>('');
   const [isLoadingSendCoin, setIsLoadingSendCoin] = useState<boolean>(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const isDarkMode = theme.palette.mode === 'dark';
+  const secondaryTextColor = alpha(
+    theme.palette.text.secondary,
+    isDarkMode ? 0.9 : 0.82
+  );
+  const inputSurface = alpha(
+    isDarkMode ? theme.palette.common.white : theme.palette.text.primary,
+    isDarkMode ? 0.032 : 0.042
+  );
+  const sectionDivider = alpha(theme.palette.divider, isDarkMode ? 0.18 : 0.22);
+  const inputBorder = alpha(theme.palette.divider, isDarkMode ? 0.16 : 0.2);
+
+  useEffect(() => {
+    setPaymentTo(defaultPaymentTo || '');
+  }, [defaultPaymentTo]);
+
+  const fieldLabelSx = {
+    color: secondaryTextColor,
+    fontSize: compact ? '0.75rem' : '0.77rem',
+    fontWeight: 400,
+    letterSpacing: '0.014em',
+    lineHeight: 1.2,
+  } as const;
+
+  const fieldGroupSx = {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: compact ? '6px' : '7px',
+  } as const;
+  const formatSendPaymentError = (message: unknown) => {
+    const rawMessage =
+      typeof message === 'string'
+        ? message.trim()
+        : message instanceof Error
+          ? message.message.trim()
+          : '';
+
+    if (/\bNO_BALANCE\b/i.test(rawMessage)) {
+      return t('question:message.error.insufficient_balance_qort', {
+        defaultValue: 'Your QORT balance is insufficient.',
+        postProcess: 'capitalizeFirstChar',
+      });
+    }
+
+    return rawMessage;
+  };
+
+  const textFieldSurfaceSx = {
+    '& .MuiOutlinedInput-root': {
+      backgroundColor: inputSurface,
+      borderRadius: '10px',
+      color: theme.palette.text.primary,
+      minHeight: compact ? '42px' : '44px',
+      '& fieldset': {
+        borderColor: inputBorder,
+      },
+      '&:hover fieldset': {
+        borderColor: alpha(theme.palette.primary.main, 0.28),
+      },
+      '&.Mui-focused fieldset': {
+        borderColor: alpha(theme.palette.primary.main, 0.42),
+      },
+    },
+    '& .MuiOutlinedInput-input': {
+      fontSize: compact ? '0.92rem' : '0.94rem',
+      fontWeight: 500,
+      padding: compact ? '9px 12px' : '10px 13px',
+    },
+    '& .MuiOutlinedInput-input::placeholder': {
+      color: alpha(theme.palette.text.secondary, isDarkMode ? 0.78 : 0.72),
+      fontWeight: 400,
+      opacity: 1,
+    },
+    '& input:-webkit-autofill, & input:-webkit-autofill:hover, & input:-webkit-autofill:focus':
+      {
+        WebkitBoxShadow: isDarkMode
+          ? '0 0 0 100px rgb(28, 31, 38) inset'
+          : '0 0 0 100px rgb(248, 250, 253) inset',
+        WebkitTextFillColor: theme.palette.text.primary,
+        caretColor: theme.palette.text.primary,
+        transition: 'background-color 9999s ease-out 0s',
+      },
+  } as const;
 
   const sendCoinFunc = async () => {
     try {
       setSendPaymentError('');
-      setSendPaymentSuccess('');
       if (!paymentTo) {
         setSendPaymentError(
           t('auth:action.enter_recipient', {
@@ -80,14 +175,18 @@ export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
         })
         .then((response) => {
           if (response?.error) {
-            setSendPaymentError(response.error);
+            setSendPaymentError(formatSendPaymentError(response.error));
           } else {
+            executeEvent(QORTINO_DONATION_COMPLETED_EVENT, {
+              recipient: paymentTo.trim(),
+            });
             onSuccess();
           }
           setIsLoadingSendCoin(false);
         })
         .catch((error) => {
           console.error('Failed to send coin:', error);
+          setSendPaymentError(formatSendPaymentError(error));
           setIsLoadingSendCoin(false);
         });
     } catch (error) {
@@ -100,181 +199,205 @@ export const QortPayment = ({ balance, show, onSuccess, defaultPaymentTo }) => {
       sx={{
         display: 'flex',
         flexDirection: 'column',
-        flexGrow: 1,
-        overflowY: 'auto',
-        p: 2,
+        gap: compact ? '14px' : '16px',
+        px: compact ? 2 : 2.5,
+        py: compact ? 1.6 : 2.1,
       }}
     >
-      <Box sx={{ maxWidth: 480, mx: 'auto', py: 3, px: 1, width: '100%' }}>
-
-        {/* Page title + balance */}
-        <Box sx={{ mb: 3 }}>
-          <Typography
-            variant="h6"
-            sx={{ fontWeight: 600, letterSpacing: '-0.02em' }}
-          >
-            {t('core:action.transfer_qort', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Typography>
-
-          <Spacer height="12px" />
-
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: 1,
-              px: 2,
-              py: 1.25,
-              borderRadius: 2,
-              border: 1,
-              borderColor: alpha(theme.palette.divider, 0.4),
-              bgcolor: alpha(theme.palette.background.default, 0.5),
-            }}
-          >
-            <Typography variant="body2" color="text.secondary">
-              {t('core:balance', { postProcess: 'capitalizeFirstChar' })}
-            </Typography>
-            <Typography
-              variant="body2"
-              sx={{ fontWeight: 700, ml: 'auto' }}
-            >
-              {balance?.toFixed(2)} QORT
-            </Typography>
-          </Box>
-        </Box>
-
-        {/* Recipient */}
-        <Box
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: '5px',
+          pb: compact ? 1.35 : 1.5,
+          borderBottom: `1px solid ${sectionDivider}`,
+        }}
+      >
+        <Typography
           sx={{
-            borderRadius: 2,
-            border: 1,
-            borderColor: alpha(theme.palette.divider, 0.4),
-            bgcolor: alpha(theme.palette.background.default, 0.5),
-            mb: 2,
-            px: 2,
-            py: 1.5,
+            ...fieldLabelSx,
+            alignSelf: 'flex-start',
           }}
         >
-          <Typography
-            component="label"
-            htmlFor="payment-to"
-            variant="body2"
-            color="text.secondary"
-            sx={{ display: 'block', mb: 1 }}
-          >
-            {t('core:to', { postProcess: 'capitalizeFirstChar' })}
-          </Typography>
-          <TextField
-            id="payment-to"
-            value={paymentTo}
-            onChange={(e) => setPaymentTo(e.target.value)}
-            autoComplete="off"
-            variant="outlined"
-            size="small"
-            fullWidth
-            sx={{
-              '& .MuiOutlinedInput-root': {
-                borderRadius: 2,
-                bgcolor: theme.palette.background.default,
-              },
-            }}
-          />
-        </Box>
-
-        {/* Amount */}
-        <Box
+          {t('core:balance', { postProcess: 'capitalizeFirstChar' })}
+        </Typography>
+        <Typography
           sx={{
-            borderRadius: 2,
-            border: 1,
-            borderColor: alpha(theme.palette.divider, 0.4),
-            bgcolor: alpha(theme.palette.background.default, 0.5),
-            mb: 2,
-            px: 2,
-            py: 1.5,
+            alignSelf: 'flex-start',
+            color: theme.palette.text.primary,
+            fontSize: compact ? '1.06rem' : '1.12rem',
+            fontWeight: 700,
+            letterSpacing: '-0.025em',
+            lineHeight: 1.1,
           }}
         >
-          <Typography
-            component="label"
-            htmlFor="payment-amount"
-            variant="body2"
-            color="text.secondary"
-            sx={{ display: 'block', mb: 1 }}
-          >
-            {t('core:amount', { postProcess: 'capitalizeFirstChar' })}
-          </Typography>
-          <BoundedNumericTextField
-            value={paymentAmount}
-            minValue={0}
-            maxValue={+balance}
-            allowDecimals={true}
-            initialValue={'0'}
-            allowNegatives={false}
-            afterChange={(e: string) => setPaymentAmount(+e)}
-          />
-        </Box>
+          {balance?.toFixed(2)} QORT
+        </Typography>
+      </Box>
 
-        {/* Password */}
-        <Box
+      <Box sx={fieldGroupSx}>
+        <Typography component="label" htmlFor="payment-to" sx={fieldLabelSx}>
+          {t('core:to', { postProcess: 'capitalizeFirstChar' })}
+        </Typography>
+        <TextField
+          id="payment-to"
+          value={paymentTo}
+          onChange={(e) => setPaymentTo(e.target.value)}
+          autoComplete="off"
+          placeholder={t('group:dashboard.qortal_address_or_name')}
+          fullWidth
+          sx={textFieldSurfaceSx}
+        />
+      </Box>
+
+      <Box sx={fieldGroupSx}>
+        <Typography
+          component="label"
+          htmlFor="payment-amount"
+          sx={fieldLabelSx}
+        >
+          {t('core:amount', { postProcess: 'capitalizeFirstChar' })}
+        </Typography>
+        <BoundedNumericTextField
+          value={paymentAmount}
+          minValue={0}
+          maxValue={+balance}
+          allowDecimals={true}
+          initialValue={'0'}
+          allowNegatives={false}
+          addIconButtons={false}
+          afterChange={(e: string) => setPaymentAmount(+e)}
           sx={{
-            borderRadius: 2,
-            border: 1,
-            borderColor: alpha(theme.palette.divider, 0.4),
-            bgcolor: alpha(theme.palette.background.default, 0.5),
-            mb: 2,
-            px: 2,
-            py: 1.5,
+            width: '100%',
+            '& .MuiOutlinedInput-root': {
+              backgroundColor: inputSurface,
+              borderRadius: '10px',
+              minHeight: compact ? '42px' : '44px',
+              '& fieldset': {
+                borderColor: inputBorder,
+              },
+              '&:hover fieldset': {
+                borderColor: alpha(theme.palette.primary.main, 0.28),
+              },
+              '&.Mui-focused fieldset': {
+                borderColor: alpha(theme.palette.primary.main, 0.42),
+              },
+            },
+            '& input': {
+              fontSize: compact ? '0.92rem' : '0.94rem',
+              padding: compact ? '9px 12px' : '10px 13px',
+            },
           }}
-        >
-          <Typography
-            component="label"
-            htmlFor="payment-password"
-            variant="body2"
-            color="text.secondary"
-            sx={{ display: 'block', mb: 1 }}
-          >
-            {t('auth:wallet.password_confirmation', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Typography>
-          <PasswordField
-            id="payment-password"
-            value={paymentPassword}
-            onChange={(e) => setPaymentPassword(e.target.value)}
-            autoComplete="off"
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                if (isLoadingSendCoin) return;
-                sendCoinFunc();
-              }
-            }}
-          />
-        </Box>
-
-        <ErrorText>{sendPaymentError}</ErrorText>
-
-        <Spacer height="16px" />
+        />
+      </Box>
 
-        <Button
-          variant="contained"
+      <Box sx={fieldGroupSx}>
+        <Typography
+          component="label"
+          htmlFor="payment-password"
+          sx={fieldLabelSx}
+        >
+          {t('auth:wallet.password_confirmation', {
+            postProcess: 'capitalizeFirstChar',
+          })}
+        </Typography>
+        <TextField
+          id="payment-password"
+          type={showPassword ? 'text' : 'password'}
+          value={paymentPassword}
+          onChange={(e) => setPaymentPassword(e.target.value)}
+          autoComplete="new-password"
+          name="payment-password-confirmation"
           fullWidth
-          disabled={isLoadingSendCoin}
-          onClick={() => {
-            if (isLoadingSendCoin) return;
-            sendCoinFunc();
+          onFocus={() => setIsPaymentPasswordEditable(true)}
+          onMouseDown={() => setIsPaymentPasswordEditable(true)}
+          onBlur={() => {
+            if (!paymentPassword) {
+              setIsPaymentPasswordEditable(false);
+            }
           }}
-          sx={{ borderRadius: 2, py: 1.25 }}
-          startIcon={
-            isLoadingSendCoin ? (
-              <CircularProgress size={16} color="inherit" />
-            ) : null
-          }
-        >
-          {t('core:action.send', { postProcess: 'capitalizeFirstChar' })}
-        </Button>
-
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              if (isLoadingSendCoin) return;
+              sendCoinFunc();
+            }
+          }}
+          InputProps={{
+            readOnly: !isPaymentPasswordEditable,
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton
+                  onClick={() => setShowPassword((prev) => !prev)}
+                  edge="end"
+                  sx={{ color: theme.palette.text.secondary }}
+                >
+                  {showPassword ? (
+                    <VisibilityOffIcon fontSize="small" />
+                  ) : (
+                    <VisibilityIcon fontSize="small" />
+                  )}
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+          inputProps={{
+            autoComplete: 'new-password',
+            'data-1p-ignore': 'true',
+            'data-lpignore': 'true',
+            spellCheck: 'false',
+          }}
+          sx={textFieldSurfaceSx}
+        />
       </Box>
+
+      <ErrorText
+        sx={{
+          fontSize: '0.74rem',
+          minHeight: sendPaymentError ? '20px' : compact ? '8px' : '12px',
+          px: 0.5,
+        }}
+      >
+        {sendPaymentError}
+      </ErrorText>
+
+      <Button
+        variant="contained"
+        fullWidth
+        disabled={isLoadingSendCoin}
+        onClick={() => {
+          if (isLoadingSendCoin) return;
+          sendCoinFunc();
+        }}
+        sx={{
+          borderRadius: '12px',
+          ...getBlueTier1ButtonSx(),
+          background: isDarkMode
+            ? 'linear-gradient(180deg, rgba(143,181,247,0.96) 0%, rgba(124,166,236,0.96) 100%)'
+            : 'linear-gradient(180deg, rgba(133,176,245,0.96) 0%, rgba(113,157,230,0.96) 100%)',
+          boxShadow: isDarkMode
+            ? '0 10px 24px rgba(76, 123, 209, 0.18), inset 0 1px 0 rgba(255,255,255,0.26)'
+            : '0 10px 20px rgba(76, 123, 209, 0.16), inset 0 1px 0 rgba(255,255,255,0.32)',
+          fontSize: '0.84rem',
+          fontWeight: 600,
+          minHeight: compact ? 42 : 44,
+          textTransform: 'none',
+          '&:hover': {
+            background: isDarkMode
+              ? 'linear-gradient(180deg, rgba(149,186,249,0.97) 0%, rgba(130,171,239,0.97) 100%)'
+              : 'linear-gradient(180deg, rgba(138,181,248,0.97) 0%, rgba(118,163,234,0.97) 100%)',
+            boxShadow: isDarkMode
+              ? '0 12px 28px rgba(76, 123, 209, 0.2), inset 0 1px 0 rgba(255,255,255,0.28)'
+              : '0 12px 24px rgba(76, 123, 209, 0.18), inset 0 1px 0 rgba(255,255,255,0.34)',
+          },
+        }}
+        startIcon={
+          isLoadingSendCoin ? (
+            <CircularProgress size={16} color="inherit" />
+          ) : null
+        }
+      >
+        {t('core:action.send', { postProcess: 'capitalizeFirstChar' })}
+      </Button>
     </Box>
   );
 };
diff --git a/src/components/RegisterName.tsx b/src/components/RegisterName.tsx
index 23ebf9e3..13b28607 100644
--- a/src/components/RegisterName.tsx
+++ b/src/components/RegisterName.tsx
@@ -1,18 +1,16 @@
 import { useCallback, useEffect, useState } from 'react';
 import {
-  Alert,
   Box,
-  Button,
+  ButtonBase,
   Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
   TextField,
   Typography,
   useTheme,
 } from '@mui/material';
+import { alpha } from '@mui/material/styles';
 import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import CloseIcon from '@mui/icons-material/Close';
 import { getBaseApiReact } from '../App';
 import { getFee } from '../background/background.ts';
 import { subscribeToEvent, unsubscribeFromEvent } from '../utils/events';
@@ -22,6 +20,7 @@ import ErrorIcon from '@mui/icons-material/Error';
 import { useSetAtom } from 'jotai';
 import { txListAtom } from '../atoms/global';
 import { useTranslation } from 'react-i18next';
+import { getBlueTier1ButtonSx } from '../styles/blueMaterial';
 
 enum NameAvailability {
   NULL = 'null',
@@ -47,6 +46,7 @@ export const RegisterName = ({
   );
   const [nameFee, setNameFee] = useState(null);
   const theme = useTheme();
+  const isDarkMode = theme.palette.mode === 'dark';
   const { t } = useTranslation([
     'auth',
     'core',
@@ -54,6 +54,35 @@ export const RegisterName = ({
     'question',
     'tutorial',
   ]);
+  const modalSurface = isDarkMode
+    ? 'linear-gradient(145deg, rgba(49,54,64,0.985) 0%, rgba(35,39,47,0.992) 48%, rgba(24,27,33,0.996) 100%)'
+    : 'linear-gradient(180deg, rgba(251,253,255,0.985) 0%, rgba(244,247,251,0.99) 100%)';
+  const surfaceBorder = isDarkMode
+    ? 'rgba(255,255,255,0.08)'
+    : alpha(theme.palette.divider, 0.32);
+  const shellDivider = isDarkMode
+    ? 'rgba(255,255,255,0.052)'
+    : alpha(theme.palette.divider, 0.24);
+  const sectionDivider = isDarkMode
+    ? 'rgba(255,255,255,0.052)'
+    : alpha(theme.palette.divider, 0.18);
+  const softSectionSurface = isDarkMode
+    ? 'linear-gradient(145deg, rgba(94,101,114,0.34) 0%, rgba(72,78,89,0.3) 100%)'
+    : alpha(theme.palette.text.primary, 0.035);
+  const fieldBorder =
+    theme.palette.border?.subtle ??
+    (isDarkMode ? 'rgba(255,255,255,0.085)' : 'rgba(24,29,36,0.12)');
+  const fieldSurface = isDarkMode
+    ? 'linear-gradient(145deg, rgba(88,95,108,0.2) 0%, rgba(56,62,73,0.28) 44%, rgba(37,41,49,0.42) 100%)'
+    : 'linear-gradient(180deg, rgba(17,23,34,0.042) 0%, rgba(17,23,34,0.024) 100%)';
+  const fieldSurfaceHover = isDarkMode
+    ? 'linear-gradient(145deg, rgba(98,106,120,0.24) 0%, rgba(63,70,82,0.34) 46%, rgba(43,48,57,0.48) 100%)'
+    : 'linear-gradient(180deg, rgba(17,23,34,0.06) 0%, rgba(17,23,34,0.034) 100%)';
+  const fieldInsetShadow = isDarkMode
+    ? '0 8px 20px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.035)'
+    : '0 4px 10px rgba(24,32,44,0.06), inset 0 1px 0 rgba(255,255,255,0.5)';
+  const contentColumnMaxWidth = 428;
+
   const checkIfNameExisits = async (name) => {
     if (!name?.trim()) {
       setIsNameAvailable(NameAvailability.NULL);
@@ -112,6 +141,13 @@ export const RegisterName = ({
     nameRegistrationFee();
   }, []);
 
+  const closeRegisterName = useCallback(() => {
+    if (isLoadingRegisterName) return;
+    setIsOpen(false);
+    setRegisterNameValue('');
+    setIsNameAvailable(NameAvailability.NULL);
+  }, [isLoadingRegisterName]);
+
   const registerName = async () => {
     try {
       if (!userInfo?.address)
@@ -134,64 +170,46 @@ export const RegisterName = ({
         }),
         publishFee: fee.fee + ' QORT',
       });
+      const nameToRegister = registerNameValue.trim();
       setIsLoadingRegisterName(true);
-      new Promise((res, rej) => {
-        window
-          .sendMessage('registerName', {
-            name: registerNameValue,
-          })
-          .then((response) => {
-            if (!response?.error) {
-              res(response);
-              setIsLoadingRegisterName(false);
-              setInfoSnack({
-                type: 'success',
-                message: t('group:message.success.registered_name', {
-                  postProcess: 'capitalizeFirstChar',
-                }),
-              });
-              setIsOpen(false);
-              setRegisterNameValue('');
-              setOpenSnack(true);
-              setTxList((prev) => [
-                {
-                  ...response,
-                  type: 'register-name',
-                  label: t('group:message.success.registered_name_label', {
-                    postProcess: 'capitalizeFirstChar',
-                  }),
-                  labelDone: t(
-                    'group:message.success.registered_name_success',
-                    {
-                      postProcess: 'capitalizeFirstChar',
-                    }
-                  ),
-                  done: false,
-                },
-                ...prev.filter((item) => !item.done),
-              ]);
-              return;
-            }
-            setInfoSnack({
-              type: 'error',
-              message: response?.error,
-            });
-            setOpenSnack(true);
-            rej(response.error);
-          })
-          .catch((error) => {
-            setInfoSnack({
-              type: 'error',
-              message:
-                error.message ||
-                t('core:message.error.generic', {
-                  postProcess: 'capitalizeFirstChar',
-                }),
-            });
-            setOpenSnack(true);
-            rej(error);
-          });
+      setIsOpen(false);
+      setRegisterNameValue('');
+      setIsNameAvailable(NameAvailability.NULL);
+
+      const response = await window.sendMessage('registerName', {
+        name: nameToRegister,
+      });
+
+      if (response?.error) {
+        setInfoSnack({
+          type: 'error',
+          message: response.error,
+        });
+        setOpenSnack(true);
+        return;
+      }
+
+      setInfoSnack({
+        type: 'success',
+        message: t('group:message.success.registered_name', {
+          postProcess: 'capitalizeFirstChar',
+        }),
       });
+      setOpenSnack(true);
+      setTxList((prev) => [
+        {
+          ...response,
+          type: 'register-name',
+          label: t('group:message.success.registered_name_label', {
+            postProcess: 'capitalizeFirstChar',
+          }),
+          labelDone: t('group:message.success.registered_name_success', {
+            postProcess: 'capitalizeFirstChar',
+          }),
+          done: false,
+        },
+        ...prev.filter((item) => !item.done),
+      ]);
     } catch (error) {
       if (error?.message) {
         setOpenSnack(true);
@@ -217,272 +235,512 @@ export const RegisterName = ({
   return (
     <Dialog
       open={isOpen}
+      onClose={closeRegisterName}
       aria-labelledby="register-name-dialog-title"
       aria-describedby="register-name-dialog-description"
       maxWidth="sm"
       fullWidth
       slotProps={{
+        backdrop: {
+          sx: {
+            backdropFilter: isDarkMode
+              ? 'blur(12px) brightness(0.76) saturate(0.88)'
+              : 'blur(12px) brightness(0.9) saturate(0.94)',
+            WebkitBackdropFilter: isDarkMode
+              ? 'blur(12px) brightness(0.76) saturate(0.88)'
+              : 'blur(12px) brightness(0.9) saturate(0.94)',
+            backgroundColor: isDarkMode
+              ? 'rgba(6, 8, 12, 0.4)'
+              : 'rgba(22, 26, 34, 0.14)',
+          },
+        },
         paper: {
           sx: {
-            borderRadius: '16px',
+            background: modalSurface,
+            border: `1px solid ${surfaceBorder}`,
+            borderRadius: '14px',
+            boxShadow: isDarkMode
+              ? '0 34px 120px rgba(0,0,0,0.46)'
+              : '0 28px 88px rgba(18,28,45,0.16)',
+            clipPath: 'inset(0 round 14px)',
+            isolation: 'isolate',
             overflow: 'hidden',
-            bgcolor: theme.palette.background.paper,
-            border: `1px solid ${theme.palette.border?.subtle ?? 'rgba(255,255,255,0.08)'}`,
-            boxShadow: theme.shadows[24],
+            width: 'min(700px, calc(100vw - 32px))',
           },
         },
       }}
     >
-      <DialogTitle
-        id="register-name-dialog-title"
-        sx={{
-          pb: 2.5,
-          pt: 2.5,
-          px: 2.5,
-          borderBottom: `1px solid ${theme.palette.divider}`,
-          fontWeight: 600,
-          fontSize: '1.125rem',
-          textAlign: 'center',
-          color: theme.palette.text.primary,
-          textTransform: 'none',
-        }}
-      >
-        {t('core:action.register_name', {
-          postProcess: 'capitalizeFirstChar',
-        })}
-      </DialogTitle>
-
-      <DialogContent id="register-name-dialog-description" sx={{ px: 2.5 }}>
+      <Box sx={{ background: modalSurface, display: 'flex', flexDirection: 'column' }}>
         <Box
           sx={{
+            alignItems: 'center',
             display: 'flex',
-            flexDirection: 'column',
-            gap: 2.5,
-            maxWidth: 400,
-            mx: 'auto',
-            pt: 1,
-            pb: 1,
+            justifyContent: 'space-between',
+            px: 2.25,
+            py: 1.45,
           }}
         >
-          <Box>
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: '2px',
+              maxWidth: `${contentColumnMaxWidth}px`,
+              width: '100%',
+            }}
+          >
             <Typography
-              variant="subtitle2"
-              color="text.secondary"
-              sx={{ mb: 1, display: 'block', fontWeight: 600 }}
-            >
-              {t('core:action.choose_name', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Typography>
-            <TextField
-              autoComplete="off"
-              autoFocus
-              fullWidth
-              variant="outlined"
-              size="medium"
-              onChange={(e) => setRegisterNameValue(e.target.value)}
-              value={registerNameValue}
-              placeholder={t('core:action.choose_name', {
-                postProcess: 'capitalizeFirstChar',
-              })}
+              id="register-name-dialog-title"
               sx={{
-                '& .MuiOutlinedInput-root': {
-                  borderRadius: '12px',
-                  bgcolor:
-                    theme.palette.background?.default ??
-                    'rgba(255,255,255,0.04)',
-                },
-              }}
-            />
-          </Box>
-
-          {hasInsufficientBalance && (
-            <Alert
-              severity="warning"
-              icon={<InfoOutlinedIcon fontSize="small" />}
-              sx={{
-                borderRadius: '10px',
-                '& .MuiAlert-message': { fontSize: '0.8125rem' },
+                color: theme.palette.text.primary,
+                fontSize: '0.98rem',
+                fontWeight: 700,
+                letterSpacing: '-0.02em',
               }}
             >
-              {t('core:message.generic.name_registration', {
-                balance: balance ?? 0,
-                fee: nameFee != null ? Number(nameFee).toFixed(2) : nameFee,
+              {t('core:action.register_name', {
                 postProcess: 'capitalizeFirstChar',
               })}
-            </Alert>
-          )}
-
-          {isNameAvailable === NameAvailability.AVAILABLE && (
-            <Box
+            </Typography>
+            <Typography
+              id="register-name-dialog-description"
               sx={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 1,
-                py: 1,
-                px: 1.5,
-                borderRadius: '10px',
-                bgcolor:
-                  theme.palette.mode === 'dark'
-                    ? `${theme.palette.success?.main ?? theme.palette.other?.positive ?? '#2e7d32'}30`
-                    : `${theme.palette.success?.main ?? theme.palette.other?.positive ?? '#2e7d32'}18`,
-                border: `1px solid ${theme.palette.success?.main ?? theme.palette.other?.positive ?? '#2e7d32'}50`,
+                color: theme.palette.text.secondary,
+                fontSize: '0.76rem',
+                lineHeight: 1.45,
               }}
             >
-              <CheckIcon
-                sx={{ color: 'success.main', fontSize: 22, flexShrink: 0 }}
-              />
+              {t('tutorial:home.register_name_workspace_hint')}
+            </Typography>
+          </Box>
+          <ButtonBase
+            aria-label={t('core:action.close', {
+              postProcess: 'capitalizeFirstChar',
+            })}
+            onClick={closeRegisterName}
+            disabled={isLoadingRegisterName}
+            sx={{
+              borderRadius: '8px',
+              color: theme.palette.text.secondary,
+              height: 30,
+              width: 30,
+              '&:hover': {
+                backgroundColor: alpha(
+                  theme.palette.common.white,
+                  isDarkMode ? 0.05 : 0.55
+                ),
+                color: theme.palette.text.primary,
+              },
+            }}
+          >
+            <CloseIcon sx={{ fontSize: 17 }} />
+          </ButtonBase>
+        </Box>
+
+        <Box
+          sx={{
+            borderTop: `1px solid ${shellDivider}`,
+            display: 'flex',
+            flexDirection: 'column',
+            px: 2.25,
+            pb: 1.85,
+            pt: 1.75,
+          }}
+        >
+          <Box
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 1.25,
+              maxWidth: `${contentColumnMaxWidth}px`,
+              mx: 'auto',
+              width: '100%',
+            }}
+          >
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.72 }}>
               <Typography
-                variant="body2"
-                sx={{ color: theme.palette.text.primary, fontWeight: 500 }}
+                sx={{
+                  color: theme.palette.text.secondary,
+                  display: 'block',
+                  fontSize: '0.74rem',
+                  fontWeight: 600,
+                  letterSpacing: '0.01em',
+                }}
               >
-                {t('core:message.generic.name_available', {
-                  name: registerNameValue,
+                {t('core:name', {
                   postProcess: 'capitalizeFirstChar',
                 })}
               </Typography>
-            </Box>
-          )}
-
-          {isNameAvailable === NameAvailability.NOT_AVAILABLE && (
-            <Box
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 1,
-                py: 1,
-                px: 1.5,
-                borderRadius: '10px',
-                bgcolor:
-                  theme.palette.mode === 'dark'
-                    ? `${theme.palette.error?.main ?? theme.palette.other?.danger ?? '#d32f2f'}28`
-                    : `${theme.palette.error?.main ?? theme.palette.other?.danger ?? '#d32f2f'}14`,
-                border: `1px solid ${theme.palette.error?.main ?? theme.palette.other?.danger ?? '#d32f2f'}50`,
-              }}
-            >
-              <ErrorIcon
-                sx={{ color: 'error.main', fontSize: 22, flexShrink: 0 }}
-              />
-              <Typography
-                variant="body2"
-                sx={{ color: theme.palette.text.primary, fontWeight: 500 }}
-              >
-                {t('core:message.generic.name_unavailable', {
-                  name: registerNameValue,
+              <TextField
+                autoComplete="off"
+                autoFocus
+                fullWidth
+                variant="outlined"
+                size="medium"
+                onChange={(e) => setRegisterNameValue(e.target.value)}
+                value={registerNameValue}
+                placeholder={t('core:name', {
                   postProcess: 'capitalizeFirstChar',
                 })}
-              </Typography>
+                sx={{
+                  '& .MuiOutlinedInput-root': {
+                    background: fieldSurface,
+                    borderRadius: '10px',
+                    boxShadow: fieldInsetShadow,
+                    color: theme.palette.text.primary,
+                    '& fieldset': {
+                      borderColor: fieldBorder,
+                    },
+                    '&:hover fieldset': {
+                      borderColor: isDarkMode
+                        ? 'rgba(255,255,255,0.12)'
+                        : alpha(theme.palette.primary.main, 0.42),
+                    },
+                    '&.Mui-focused fieldset': {
+                      borderColor: alpha(theme.palette.primary.main, 0.9),
+                      borderWidth: 1.5,
+                    },
+                    '&:hover': {
+                      background: fieldSurfaceHover,
+                    },
+                  },
+                  '& .MuiOutlinedInput-input': {
+                    fontSize: '0.92rem',
+                    px: 1.25,
+                    py: 1.18,
+                  },
+                }}
+              />
             </Box>
-          )}
 
-          {isNameAvailable === NameAvailability.LOADING && (
-            <Box
-              sx={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: 1,
-                py: 1,
-                px: 1.5,
-                borderRadius: '10px',
-                bgcolor: theme.palette.action.hover,
-                border: `1px solid ${theme.palette.divider}`,
-              }}
-            >
-              <BarSpinner width="16px" color={theme.palette.text.primary} />
-              <Typography
-                variant="body2"
-                sx={{ color: theme.palette.text.primary, fontWeight: 500 }}
+            {hasInsufficientBalance && (
+              <Box
+                sx={{
+                  alignItems: 'flex-start',
+                  background: alpha(
+                    theme.palette.warning?.main ?? '#d19932',
+                    isDarkMode ? 0.13 : 0.08
+                  ),
+                  border: `1px solid ${alpha(
+                    theme.palette.warning?.main ?? '#d19932',
+                    isDarkMode ? 0.28 : 0.2
+                  )}`,
+                  borderRadius: '12px',
+                  display: 'flex',
+                  gap: 1,
+                  px: 1.25,
+                  py: 1.1,
+                }}
               >
-                {t('core:message.generic.name_checking', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </Typography>
-            </Box>
-          )}
+                <InfoOutlinedIcon
+                  sx={{
+                    color: theme.palette.warning?.main ?? '#d19932',
+                    fontSize: 18,
+                    flexShrink: 0,
+                    mt: '1px',
+                  }}
+                />
+                <Typography
+                  sx={{
+                    color: theme.palette.text.secondary,
+                    fontSize: '0.77rem',
+                    lineHeight: 1.45,
+                  }}
+                >
+                  {t('core:message.generic.name_registration', {
+                    balance: balance ?? 0,
+                    fee: nameFee != null ? Number(nameFee).toFixed(2) : nameFee,
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </Typography>
+              </Box>
+            )}
 
-          <Box sx={{ pt: 0.5 }}>
-            <Typography variant="subtitle2" sx={{ mb: 1.25, fontWeight: 600 }}>
-              {t('core:message.generic.name_benefits', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Typography>
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.25 }}>
+            {isNameAvailable === NameAvailability.AVAILABLE && (
               <Box
-                sx={{ display: 'flex', gap: 1.25, alignItems: 'flex-start' }}
+                sx={{
+                  alignItems: 'center',
+                  background: alpha(
+                    theme.palette.success?.main ?? '#2e7d32',
+                    isDarkMode ? 0.13 : 0.08
+                  ),
+                  border: `1px solid ${alpha(
+                    theme.palette.success?.main ?? '#2e7d32',
+                    isDarkMode ? 0.28 : 0.2
+                  )}`,
+                  borderRadius: '12px',
+                  display: 'flex',
+                  gap: 1,
+                  px: 1.25,
+                  py: 1.05,
+                }}
               >
-                <CheckCircleOutlineIcon
+                <CheckIcon
                   sx={{
-                    color: theme.palette.primary.main,
-                    fontSize: 20,
-                    mt: 0.15,
+                    color: theme.palette.success?.main ?? '#2e7d32',
+                    fontSize: 18,
                     flexShrink: 0,
                   }}
                 />
-                <Typography variant="body2" sx={{ lineHeight: 1.5 }}>
-                  {t('core:message.generic.publish_data', {
+                <Typography
+                  sx={{
+                    color: theme.palette.text.primary,
+                    fontSize: '0.77rem',
+                    fontWeight: 500,
+                    lineHeight: 1.4,
+                  }}
+                >
+                  {t('core:message.generic.name_available', {
+                    name: registerNameValue,
                     postProcess: 'capitalizeFirstChar',
                   })}
                 </Typography>
               </Box>
+            )}
+
+            {isNameAvailable === NameAvailability.NOT_AVAILABLE && (
               <Box
-                sx={{ display: 'flex', gap: 1.25, alignItems: 'flex-start' }}
+                sx={{
+                  alignItems: 'center',
+                  background: alpha(
+                    theme.palette.error?.main ?? '#d32f2f',
+                    isDarkMode ? 0.13 : 0.08
+                  ),
+                  border: `1px solid ${alpha(
+                    theme.palette.error?.main ?? '#d32f2f',
+                    isDarkMode ? 0.28 : 0.2
+                  )}`,
+                  borderRadius: '12px',
+                  display: 'flex',
+                  gap: 1,
+                  px: 1.25,
+                  py: 1.05,
+                }}
               >
-                <CheckCircleOutlineIcon
+                <ErrorIcon
                   sx={{
-                    color: theme.palette.primary.main,
-                    fontSize: 20,
-                    mt: 0.15,
+                    color: theme.palette.error?.main ?? '#d32f2f',
+                    fontSize: 18,
                     flexShrink: 0,
                   }}
                 />
-                <Typography variant="body2" sx={{ lineHeight: 1.5 }}>
-                  {t('core:message.generic.secure_ownership', {
+                <Typography
+                  sx={{
+                    color: theme.palette.text.primary,
+                    fontSize: '0.77rem',
+                    fontWeight: 500,
+                    lineHeight: 1.4,
+                  }}
+                >
+                  {t('core:message.generic.name_unavailable', {
+                    name: registerNameValue,
                     postProcess: 'capitalizeFirstChar',
                   })}
                 </Typography>
               </Box>
+            )}
+
+            {isNameAvailable === NameAvailability.LOADING && (
+              <Box
+                sx={{
+                  alignItems: 'center',
+                  background: softSectionSurface,
+                  border: `1px solid ${fieldBorder}`,
+                  borderRadius: '12px',
+                  display: 'flex',
+                  gap: 1,
+                  px: 1.25,
+                  py: 1.05,
+                }}
+              >
+                <BarSpinner width="16px" color={theme.palette.text.primary} />
+                <Typography
+                  sx={{
+                    color: theme.palette.text.primary,
+                    fontSize: '0.77rem',
+                    fontWeight: 500,
+                    lineHeight: 1.4,
+                  }}
+                >
+                  {t('core:message.generic.name_checking', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </Typography>
+              </Box>
+            )}
+
+            <Box
+              sx={{
+                borderTop: `1px solid ${sectionDivider}`,
+                display: 'flex',
+                flexDirection: 'column',
+                gap: 0.82,
+                pt: 1.2,
+              }}
+            >
+              <Typography
+                sx={{
+                  color: alpha(theme.palette.text.secondary, 0.72),
+                  fontSize: '0.72rem',
+                  fontWeight: 600,
+                  letterSpacing: '0.01em',
+                }}
+              >
+                {t('core:message.generic.name_benefits', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+              </Typography>
+              <Box
+                sx={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  gap: 0.88,
+                  opacity: 0.86,
+                }}
+              >
+                <Box sx={{ display: 'flex', gap: 0.9, alignItems: 'flex-start' }}>
+                  <CheckCircleOutlineIcon
+                    sx={{
+                      color: alpha(theme.palette.primary.main, 0.88),
+                      fontSize: 17,
+                      mt: '1px',
+                      flexShrink: 0,
+                    }}
+                  />
+                  <Typography
+                    sx={{
+                      color: theme.palette.text.secondary,
+                      fontSize: '0.75rem',
+                      lineHeight: 1.5,
+                    }}
+                  >
+                    {t('core:message.generic.publish_data', {
+                      postProcess: 'capitalizeFirstChar',
+                    })}
+                  </Typography>
+                </Box>
+                <Box sx={{ display: 'flex', gap: 0.9, alignItems: 'flex-start' }}>
+                  <CheckCircleOutlineIcon
+                    sx={{
+                      color: alpha(theme.palette.primary.main, 0.88),
+                      fontSize: 17,
+                      mt: '1px',
+                      flexShrink: 0,
+                    }}
+                  />
+                  <Typography
+                    sx={{
+                      color: theme.palette.text.secondary,
+                      fontSize: '0.75rem',
+                      lineHeight: 1.5,
+                    }}
+                  >
+                    {t('core:message.generic.secure_ownership', {
+                      postProcess: 'capitalizeFirstChar',
+                    })}
+                  </Typography>
+                </Box>
+              </Box>
             </Box>
           </Box>
         </Box>
-      </DialogContent>
 
-      <DialogActions
-        sx={{
-          px: 2.5,
-          py: 2.5,
-          pt: 3,
-          gap: 1.5,
-          borderTop: `1px solid ${theme.palette.divider}`,
-        }}
-      >
-        <Button
-          disabled={isLoadingRegisterName}
-          variant="outlined"
-          onClick={() => {
-            setIsOpen(false);
-            setRegisterNameValue('');
-          }}
-          sx={{ textTransform: 'none', fontWeight: 600, borderRadius: '10px' }}
-        >
-          {t('core:action.close', { postProcess: 'capitalizeFirstChar' })}
-        </Button>
-        <Button
-          disabled={isRegisterDisabled}
-          variant="contained"
-          onClick={registerName}
-          autoFocus
+        <Box
           sx={{
-            textTransform: 'none',
-            fontWeight: 600,
-            borderRadius: '10px',
-            minWidth: 140,
+            borderTop: `1px solid ${shellDivider}`,
+            px: 2.25,
+            py: 1.5,
+            mt: 0.5,
           }}
         >
-          {t('core:action.register_name', {
-            postProcess: 'capitalizeFirstChar',
-          })}
-        </Button>
-      </DialogActions>
+          <Box
+            sx={{
+              alignItems: 'center',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 0.7,
+              maxWidth: `${contentColumnMaxWidth}px`,
+              mx: 'auto',
+              width: '100%',
+            }}
+          >
+            <ButtonBase
+              disabled={isRegisterDisabled}
+              onClick={registerName}
+              autoFocus
+              sx={{
+                ...getBlueTier1ButtonSx(),
+                alignItems: 'center',
+                borderRadius: '10px',
+                justifyContent: 'center',
+                minHeight: 40,
+                px: 1.65,
+                width: '100%',
+                '& .register-name-primary-label': {
+                  color: alpha('#FFFFFF', 0.98),
+                },
+                '&.Mui-disabled': {
+                  background: isDarkMode
+                    ? 'rgba(255,255,255,0.035)'
+                    : 'rgba(24,29,36,0.04)',
+                  border: isDarkMode
+                    ? '1px solid rgba(255,255,255,0.055)'
+                    : '1px solid rgba(24,29,36,0.06)',
+                  boxShadow: 'none',
+                },
+              }}
+            >
+              <Typography
+                className="register-name-primary-label"
+                sx={{
+                  fontSize: '0.78rem',
+                  fontWeight: 600,
+                  letterSpacing: '0.01em',
+                  lineHeight: 1.2,
+                }}
+              >
+                {t('core:action.register_name', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+              </Typography>
+            </ButtonBase>
+            <ButtonBase
+              disabled={isLoadingRegisterName}
+              onClick={closeRegisterName}
+              sx={{
+                alignItems: 'center',
+                borderRadius: '10px',
+                color: theme.palette.text.secondary,
+                display: 'inline-flex',
+                justifyContent: 'center',
+                minHeight: 32,
+                px: 1.2,
+                textAlign: 'center',
+                transition:
+                  'background-color 160ms ease, color 160ms ease, opacity 160ms ease',
+                '&:hover': {
+                  backgroundColor: softSectionSurface,
+                  color: theme.palette.text.primary,
+                },
+                '&.Mui-disabled': {
+                  opacity: 0.5,
+                },
+              }}
+            >
+              <Typography
+                sx={{
+                  color: 'inherit',
+                  fontSize: '0.76rem',
+                  fontWeight: 500,
+                  lineHeight: 1.2,
+                }}
+              >
+                {t('core:action.close', { postProcess: 'capitalizeFirstChar' })}
+              </Typography>
+            </ButtonBase>
+          </Box>
+        </Box>
+      </Box>
     </Dialog>
   );
 };
diff --git a/src/components/Save/Save.tsx b/src/components/Save/Save.tsx
index f8ad33b1..22372c26 100644
--- a/src/components/Save/Save.tsx
+++ b/src/components/Save/Save.tsx
@@ -21,6 +21,7 @@ import { QORTAL_APP_CONTEXT } from '../../App';
 import { getFee } from '../../background/background.ts';
 import { CustomizedSnackbars } from '../Snackbar/Snackbar';
 import { SaveIcon } from '../../assets/Icons/SaveIcon';
+import SaveRoundedIcon from '@mui/icons-material/SaveRounded';
 import { IconWrapper } from '../Desktop/DesktopFooter';
 import { Spacer } from '../../common/Spacer';
 import { LoadingButton } from '@mui/lab';
@@ -34,6 +35,12 @@ import {
 import { useTranslation } from 'react-i18next';
 import { useAtom, useSetAtom } from 'jotai';
 import { TIME_MINUTES_1_IN_MILLISECONDS } from '../../constants/constants.ts';
+import {
+  dialogInfoCardSx,
+  getDialogPaperSx,
+  getDialogPrimaryButtonSx,
+  getDialogSecondaryButtonSx,
+} from '../App/dialogSurface';
 
 export const handleImportClick = async () => {
   const fileInput = document.createElement('input');
@@ -65,7 +72,14 @@ export const handleImportClick = async () => {
   });
 };
 
-export const Save = ({ isDesktop, disableWidth, myName }) => {
+export const Save = ({
+  isDesktop,
+  disableWidth,
+  myName,
+  toolbarModule = false,
+  buttonSx = undefined,
+  iconSx = undefined,
+}) => {
   const [pinnedApps, setPinnedApps] = useAtom(sortablePinnedAppsAtom);
   const [settingsQdnLastUpdated, setSettingsQdnLastUpdated] = useAtom(
     settingsQDNLastUpdatedAtom
@@ -233,9 +247,23 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
       <ButtonBase
         onClick={handleDialogOpen}
         disabled={isLoading}
-        sx={{ marginBottom: '2px' }}
+        sx={{
+          marginBottom: '2px',
+          ...(buttonSx || {}),
+        }}
       >
-        {isDesktop ? (
+        {toolbarModule ? (
+          <SaveRoundedIcon
+            sx={{
+              color:
+                hasChanged && !isLoading
+                  ? '#5EB049'
+                  : theme.palette.text.secondary,
+              fontSize: 20,
+              ...(iconSx || {}),
+            }}
+          />
+        ) : isDesktop ? (
           disableWidth ? (
             <IconWrapper
               disableWidth={disableWidth}
@@ -288,37 +316,35 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
         onClose={() => setOpenDialog(false)}
         maxWidth="sm"
         fullWidth
+        PaperProps={{
+          sx: getDialogPaperSx(theme, { maxWidth: 540 }),
+        }}
       >
         {isUsingImportExportSettings && (
           <Box
             sx={{
               display: 'flex',
               flexDirection: 'column',
-              gap: 1,
-              padding: '15px',
+              gap: 1.4,
+              padding: '24px',
               width: '100%',
             }}
           >
-            <Box
-              sx={{
-                alignItems: 'center',
-                display: 'flex',
-                flexDirection: 'column',
-                width: '100%',
-              }}
-            >
+            <Box sx={dialogInfoCardSx}>
               <Typography
                 sx={{
-                  fontSize: '14px',
+                  color: 'rgba(246,248,252,0.96)',
+                  fontSize: '0.92rem',
+                  lineHeight: 1.55,
+                  textAlign: 'center',
                 }}
               >
                 {t('core:message.generic.settings', {
                   postProcess: 'capitalizeFirstChar',
                 })}
               </Typography>
-
-              <Spacer height="40px" />
-
+            </Box>
+            <Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
               <Button
                 size="small"
                 onClick={() => {
@@ -331,17 +357,7 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
                   setIsUsingImportExportSettings(false);
                 }}
                 variant="contained"
-                sx={{
-                  backgroundColor: theme.palette.other.danger,
-                  color: 'black',
-                  fontWeight: 'bold',
-                  opacity: 0.7,
-                  '&:hover': {
-                    backgroundColor: theme.palette.other.danger,
-                    color: 'black',
-                    opacity: 1,
-                  },
-                }}
+                sx={getDialogPrimaryButtonSx(theme)}
               >
                 {t('core:message.generic.qdn', {
                   postProcess: 'capitalizeFirstChar',
@@ -355,23 +371,19 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
             sx={{
               display: 'flex',
               flexDirection: 'column',
-              gap: 1,
-              padding: '15px',
+              gap: 1.4,
+              padding: '24px',
               width: '100%',
             }}
           >
             {!myName ? (
-              <Box
-                sx={{
-                  alignItems: 'center',
-                  display: 'flex',
-                  flexDirection: 'column',
-                  width: '100%',
-                }}
-              >
+              <Box sx={dialogInfoCardSx}>
                 <Typography
                   sx={{
-                    fontSize: '14px',
+                    color: 'rgba(246,248,252,0.96)',
+                    fontSize: '0.92rem',
+                    lineHeight: 1.55,
+                    textAlign: 'center',
                   }}
                 >
                   {t('core:message.generic.register_name', {
@@ -384,104 +396,105 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
                 {hasChanged && (
                   <Box
                     sx={{
-                      width: '100%',
                       display: 'flex',
                       flexDirection: 'column',
-                      alignItems: 'center',
+                      gap: 1.25,
+                      width: '100%',
                     }}
                   >
-                    <Typography
-                      sx={{
-                        fontSize: '14px',
-                      }}
-                    >
-                      {t('core:message.generic.unsaved_changes', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    </Typography>
-
-                    <Spacer height="10px" />
-
-                    <LoadingButton
+                    <Box sx={dialogInfoCardSx}>
+                      <Typography
+                        sx={{
+                          color: 'rgba(246,248,252,0.96)',
+                          fontSize: '0.92rem',
+                          lineHeight: 1.55,
+                          textAlign: 'center',
+                        }}
+                      >
+                        {t('core:message.generic.unsaved_changes', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
+                      </Typography>
+                    </Box>
+                    <Box
                       sx={{
-                        backgroundColor: theme.palette.other.positive,
-                        color: 'black',
-                        opacity: 0.7,
-                        fontWeight: 'bold',
-                        '&:hover': {
-                          backgroundColor: theme.palette.other.positive,
-                          color: 'black',
-                          opacity: 1,
-                        },
+                        display: 'flex',
+                        justifyContent: 'center',
                       }}
-                      size="small"
-                      loading={isLoading}
-                      onClick={saveToQdn}
-                      variant="contained"
                     >
-                      {t('core:message.generic.save_qdn', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    </LoadingButton>
-                    <Spacer height="20px" />
+                      <LoadingButton
+                        size="small"
+                        loading={isLoading}
+                        onClick={saveToQdn}
+                        variant="contained"
+                        sx={getDialogPrimaryButtonSx(theme)}
+                      >
+                        {t('core:message.generic.save_qdn', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
+                      </LoadingButton>
+                    </Box>
                     {!isNaN(settingsQdnLastUpdated) &&
                       settingsQdnLastUpdated > 0 && (
                         <>
-                          <Typography
-                            sx={{
-                              fontSize: '14px',
-                            }}
-                          >
-                            {t('core:message.question.reset_qdn', {
-                              postProcess: 'capitalizeFirstChar',
-                            })}
-                          </Typography>
-                          <Spacer height="10px" />
-                          <LoadingButton
-                            size="small"
-                            loading={isLoading}
-                            onClick={revertChanges}
-                            variant="contained"
-                            sx={{
-                              backgroundColor: theme.palette.other.danger,
-                              color: 'black',
-                              fontWeight: 'bold',
-                              opacity: 0.7,
-                              '&:hover': {
-                                backgroundColor: theme.palette.other.danger,
-                                color: 'black',
-                                opacity: 1,
-                              },
-                            }}
-                          >
-                            {t('core:message.generic.revert_qdn', {
-                              postProcess: 'capitalizeFirstChar',
-                            })}
-                          </LoadingButton>
+                          <Box sx={dialogInfoCardSx}>
+                            <Typography
+                              sx={{
+                                color: 'rgba(214,221,233,0.78)',
+                                fontSize: '0.88rem',
+                                lineHeight: 1.55,
+                                textAlign: 'center',
+                              }}
+                            >
+                              {t('core:message.question.reset_qdn', {
+                                postProcess: 'capitalizeFirstChar',
+                              })}
+                            </Typography>
+                          </Box>
+                          <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                            <LoadingButton
+                              size="small"
+                              loading={isLoading}
+                              onClick={revertChanges}
+                              variant="outlined"
+                              sx={getDialogSecondaryButtonSx(theme)}
+                            >
+                              {t('core:message.generic.revert_qdn', {
+                                postProcess: 'capitalizeFirstChar',
+                              })}
+                            </LoadingButton>
+                          </Box>
                         </>
                       )}
                     {!isNaN(settingsQdnLastUpdated) &&
                       settingsQdnLastUpdated === 0 && (
                         <>
-                          <Typography
-                            sx={{
-                              fontSize: '14px',
-                            }}
-                          >
-                            {t('core:message.question.reset_pinned', {
-                              postProcess: 'capitalizeFirstChar',
-                            })}
-                          </Typography>
-                          <Spacer height="10px" />
-                          <LoadingButton
-                            loading={isLoading}
-                            onClick={revertChanges}
-                            variant="contained"
-                          >
-                            {t('core:message.generic.revert_default', {
-                              postProcess: 'capitalizeFirstChar',
-                            })}
-                          </LoadingButton>
+                          <Box sx={dialogInfoCardSx}>
+                            <Typography
+                              sx={{
+                                color: 'rgba(214,221,233,0.78)',
+                                fontSize: '0.88rem',
+                                lineHeight: 1.55,
+                                textAlign: 'center',
+                              }}
+                            >
+                              {t('core:message.question.reset_pinned', {
+                                postProcess: 'capitalizeFirstChar',
+                              })}
+                            </Typography>
+                          </Box>
+                          <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                            <LoadingButton
+                              loading={isLoading}
+                              onClick={revertChanges}
+                              variant="outlined"
+                              sx={getDialogSecondaryButtonSx(theme)}
+                            >
+                              {t('core:message.generic.revert_default', {
+                                postProcess: 'capitalizeFirstChar',
+                              })}
+                            </LoadingButton>
+                          </Box>
                         </>
                       )}
                   </Box>
@@ -491,57 +504,49 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
                   isUsingImportExportSettings !== true && (
                     <Box
                       sx={{
-                        width: '100%',
                         display: 'flex',
                         flexDirection: 'column',
-                        alignItems: 'center',
+                        gap: 1.25,
+                        width: '100%',
                       }}
                     >
-                      <Typography
-                        sx={{
-                          fontSize: '14px',
-                        }}
-                      >
-                        {t('core:message.question.overwrite_changes', {
-                          postProcess: 'capitalizeFirstChar',
-                        })}
-                      </Typography>
-                      <Spacer height="10px" />
-                      <LoadingButton
-                        size="small"
-                        loading={isLoading}
-                        onClick={saveToQdn}
-                        variant="contained"
-                        sx={{
-                          backgroundColor: theme.palette.other.danger,
-                          color: 'black',
-                          fontWeight: 'bold',
-                          opacity: 0.7,
-                          '&:hover': {
-                            backgroundColor: theme.palette.other.danger,
-                            color: 'black',
-                            opacity: 1,
-                          },
-                        }}
-                      >
-                        {t('core:message.generic.overwrite_qdn', {
-                          postProcess: 'capitalizeFirstChar',
-                        })}
-                      </LoadingButton>
+                      <Box sx={dialogInfoCardSx}>
+                        <Typography
+                          sx={{
+                            color: 'rgba(246,248,252,0.96)',
+                            fontSize: '0.92rem',
+                            lineHeight: 1.55,
+                            textAlign: 'center',
+                          }}
+                        >
+                          {t('core:message.question.overwrite_changes', {
+                            postProcess: 'capitalizeFirstChar',
+                          })}
+                        </Typography>
+                      </Box>
+                      <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                        <LoadingButton
+                          size="small"
+                          loading={isLoading}
+                          onClick={saveToQdn}
+                          variant="contained"
+                          sx={getDialogPrimaryButtonSx(theme)}
+                        >
+                          {t('core:message.generic.overwrite_qdn', {
+                            postProcess: 'capitalizeFirstChar',
+                          })}
+                        </LoadingButton>
+                      </Box>
                     </Box>
                   )}
                 {!hasChanged && (
-                  <Box
-                    sx={{
-                      width: '100%',
-                      display: 'flex',
-                      flexDirection: 'column',
-                      alignItems: 'center',
-                    }}
-                  >
+                  <Box sx={dialogInfoCardSx}>
                     <Typography
                       sx={{
-                        fontSize: '14px',
+                        color: 'rgba(246,248,252,0.96)',
+                        fontSize: '0.92rem',
+                        lineHeight: 1.55,
+                        textAlign: 'center',
                       }}
                     >
                       {t('core:message.generic.no_pinned_changes', {
@@ -556,81 +561,77 @@ export const Save = ({ isDesktop, disableWidth, myName }) => {
         )}
         <Box
           sx={{
-            padding: '15px',
+            borderTop: '1px solid rgba(169,188,216,0.1)',
             display: 'flex',
-            flexDirection: 'column',
-            gap: 1,
+            justifyContent: 'flex-end',
+            gap: 1.1,
+            padding: '16px 24px 20px',
             width: '100%',
           }}
         >
-          <Box
-            sx={{
-              display: 'flex',
-              gap: '10px',
-              justifyContent: 'flex-end',
-              width: '100%',
-            }}
-          >
-            <ButtonBase
-              onClick={async () => {
-                try {
-                  const fileContent = await handleImportClick();
-                  const decryptedData = await decryptData({
-                    encryptedData: fileContent,
-                  });
-                  const decryptToUnit8ArraySubject =
-                    base64ToUint8Array(decryptedData);
-                  const responseData = uint8ArrayToObject(
-                    decryptToUnit8ArraySubject
+          <Button
+            onClick={async () => {
+              try {
+                const fileContent = await handleImportClick();
+                const decryptedData = await decryptData({
+                  encryptedData: fileContent,
+                });
+                const decryptToUnit8ArraySubject =
+                  base64ToUint8Array(decryptedData);
+                const responseData = uint8ArrayToObject(
+                  decryptToUnit8ArraySubject
+                );
+                if (Array.isArray(responseData)) {
+                  saveToLocalStorage(
+                    'ext_saved_settings_import_export',
+                    'sortablePinnedApps',
+                    responseData,
+                    {
+                      isUsingImportExport: true,
+                    }
                   );
-                  if (Array.isArray(responseData)) {
-                    saveToLocalStorage(
-                      'ext_saved_settings_import_export',
-                      'sortablePinnedApps',
-                      responseData,
-                      {
-                        isUsingImportExport: true,
-                      }
-                    );
-                    setPinnedApps(responseData);
-                    setOldPinnedApps(responseData);
-                    setIsUsingImportExportSettings(true);
-                  }
-                } catch (error) {
-                  console.log('error', error);
+                  setPinnedApps(responseData);
+                  setOldPinnedApps(responseData);
+                  setIsUsingImportExportSettings(true);
                 }
-              }}
-            >
-              {t('core:action.import', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </ButtonBase>
+              } catch (error) {
+                console.log('error', error);
+              }
+            }}
+            variant="outlined"
+            sx={getDialogSecondaryButtonSx(theme)}
+          >
+            {t('core:action.import', {
+              postProcess: 'capitalizeFirstChar',
+            })}
+          </Button>
 
-            <ButtonBase
-              onClick={async () => {
-                try {
-                  const data64 = await objectToBase64(pinnedApps);
+          <Button
+            onClick={async () => {
+              try {
+                const data64 = await objectToBase64(pinnedApps);
 
-                  const encryptedData = await encryptData({
-                    data64,
-                  });
-                  const blob = new Blob([encryptedData], {
-                    type: 'text/plain',
-                  });
+                const encryptedData = await encryptData({
+                  data64,
+                });
+                const blob = new Blob([encryptedData], {
+                  type: 'text/plain',
+                });
 
-                  const timestamp = new Date().toISOString().replace(/:/g, '-'); // Safe timestamp for filenames
-                  const filename = `qortal-new-ui-backup-settings-${timestamp}.txt`;
-                  await saveFileToDiskGeneric(blob, filename);
-                } catch (error) {
-                  console.log('error', error);
-                }
-              }}
-            >
-              {t('core:action.export', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </ButtonBase>
-          </Box>
+                const timestamp = new Date().toISOString().replace(/:/g, '-');
+                const filename = `qortal-new-ui-backup-settings-${timestamp}.txt`;
+                await saveFileToDiskGeneric(blob, filename);
+              } catch (error) {
+                console.log('error', error);
+              }
+            }}
+            variant="outlined"
+            sx={getDialogSecondaryButtonSx(theme)}
+          >
+            {t('core:action.export', {
+              postProcess: 'capitalizeFirstChar',
+            })}
+          </Button>
         </Box>
       </Dialog>
       <CustomizedSnackbars
diff --git a/src/components/Snackbar/LoadingSnackbar.tsx b/src/components/Snackbar/LoadingSnackbar.tsx
index 4f434424..e54b17bf 100644
--- a/src/components/Snackbar/LoadingSnackbar.tsx
+++ b/src/components/Snackbar/LoadingSnackbar.tsx
@@ -1,51 +1,41 @@
-import Snackbar from '@mui/material/Snackbar';
-import Alert from '@mui/material/Alert';
-import { useTheme } from '@mui/material/styles';
-
-const loadingSnackbarAlertSx = (theme) => ({
-  width: '100%',
-  maxWidth: '420px',
-  fontFamily: 'Inter',
-  fontSize: '15px',
-  fontWeight: 500,
-  borderRadius: '14px',
-  boxShadow: theme.shadows[8],
-  padding: '14px 18px',
-  alignItems: 'center',
-  '& .MuiAlert-icon': {
-    alignItems: 'center',
-    fontSize: '22px',
-  },
-  '& .MuiAlert-message': {
-    padding: '0 4px',
-    lineHeight: 1.4,
-  },
-});
+import { useEffect, useRef } from 'react';
+import { executeEvent } from '../../utils/events';
 
 export const LoadingSnackbar = ({ open, info }) => {
-  const theme = useTheme();
-  return (
-    <Snackbar
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-      open={open}
-      sx={{
-        bottom: { xs: 16, sm: 24 },
-        '&.MuiSnackbar-root': {
-          display: 'flex',
-          justifyContent: 'center',
-          left: '50%',
-          right: 'auto',
-          transform: 'translateX(-50%)',
-        },
-      }}
-    >
-      <Alert
-        severity="info"
-        variant="filled"
-        sx={loadingSnackbarAlertSx(theme)}
-      >
-        {info?.message}
-      </Alert>
-    </Snackbar>
-  );
+  const sourceIdRef = useRef(`loading-snackbar-${Math.random().toString(36).slice(2)}`);
+  const lastMessageRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (open && info?.message) {
+      if (lastMessageRef.current !== info.message) {
+        lastMessageRef.current = info.message;
+        executeEvent('openGlobalSnackBar', {
+          duration: null,
+          message: info.message,
+          sourceId: sourceIdRef.current,
+          type: 'info',
+        });
+      }
+      return;
+    }
+
+    if (lastMessageRef.current != null) {
+      executeEvent('closeGlobalSnackBar', {
+        sourceId: sourceIdRef.current,
+      });
+      lastMessageRef.current = null;
+    }
+  }, [info?.message, open]);
+
+  useEffect(() => {
+    return () => {
+      if (lastMessageRef.current != null) {
+        executeEvent('closeGlobalSnackBar', {
+          sourceId: sourceIdRef.current,
+        });
+      }
+    };
+  }, []);
+
+  return null;
 };
diff --git a/src/components/Snackbar/QortinoNotificationHost.tsx b/src/components/Snackbar/QortinoNotificationHost.tsx
new file mode 100644
index 00000000..88e0b249
--- /dev/null
+++ b/src/components/Snackbar/QortinoNotificationHost.tsx
@@ -0,0 +1,735 @@
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import { Box, IconButton, Typography, useTheme } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { DEFAULT_QORTINO_LOOK_DEBUG_SETTINGS } from '../Group/qortinoLookDebug';
+import {
+  DEFAULT_QORTINO_INLET_DEBUG_SETTINGS,
+  type QortinoInletDebugSettings,
+} from './qortinoInletDebug';
+import { subscribeToEvent, unsubscribeFromEvent } from '../../utils/events';
+
+type NotificationType = 'error' | 'info' | 'success' | 'warning';
+
+type NotificationInfo = {
+  compact?: boolean;
+  dismissible?: boolean;
+  duration?: number | null;
+  message?: string;
+  sourceId?: string;
+  type?: string;
+} | null;
+
+type QortinoNotificationHostProps = {
+  info: NotificationInfo;
+  open: boolean;
+  setInfo: (nextInfo: NotificationInfo) => void;
+  setOpen: (nextOpen: boolean) => void;
+};
+
+type NotificationPayload = {
+  compact?: boolean;
+  dismissible?: boolean;
+  duration?: number | null;
+  message?: string;
+  sourceId?: string;
+  type?: string;
+};
+
+const DEFAULT_NOTIFICATION_DURATION_MS = 5200;
+const ERROR_NOTIFICATION_DURATION_MS = 7200;
+
+const QORTINO_INLET_LOOK = DEFAULT_QORTINO_LOOK_DEBUG_SETTINGS;
+const QORTINO_INLET_BAR_START_PX = 12;
+
+type QortinoInletHeadGeometry = {
+  faceHeight: number;
+  faceLeft: number;
+  faceTop: number;
+  faceWidth: number;
+  headHeight: number;
+  headOffsetX: number;
+  headOffsetY: number;
+  headWidth: number;
+  shellBorderRadius: string;
+  stageHeight: number;
+  stageWidth: number;
+};
+
+const getQortinoInletShellBorderRadius = (roundness: number) => {
+  const clampPercent = (value: number, min: number, max: number) =>
+    Math.min(max, Math.max(min, Math.round(value)));
+
+  const topX = clampPercent(46 * roundness, 34, 56);
+  const topY = clampPercent(48 * roundness, 36, 58);
+  const bottomX = clampPercent(42 * roundness, 30, 52);
+  const bottomY = clampPercent(40 * roundness, 28, 50);
+
+  return `${topX}% ${topX}% ${bottomX}% ${bottomX}% / ${topY}% ${topY}% ${bottomY}% ${bottomY}%`;
+};
+
+const getQortinoInletHeadGeometry = (
+  debugSettings: QortinoInletDebugSettings
+): QortinoInletHeadGeometry => {
+  const headScale = 0.92 + (QORTINO_INLET_LOOK.bodyScale - 0.95) * 0.08;
+  const headWidth = Math.round(64 * headScale * debugSettings.headWidthScale);
+  const headHeight = Math.round(61 * headScale * debugSettings.headHeightScale);
+  const faceWidth = Math.round(45 * headScale * debugSettings.faceWidthScale);
+  const faceHeight = Math.round(31 * headScale * debugSettings.faceHeightScale);
+  const faceLeft = Math.round((headWidth - faceWidth) / 2);
+  const faceTop = Math.round((headHeight - faceHeight) / 2 + 2);
+
+  return {
+    faceHeight,
+    faceLeft,
+    faceTop,
+    faceWidth,
+    headHeight,
+    headOffsetX: debugSettings.offsetX,
+    headOffsetY: debugSettings.offsetY,
+    headWidth,
+    shellBorderRadius: getQortinoInletShellBorderRadius(
+      debugSettings.shellRoundness
+    ),
+    stageHeight: headHeight + 5,
+    stageWidth: headWidth + 8,
+  };
+};
+
+const normalizeNotificationType = (value?: string): NotificationType => {
+  if (value === 'success' || value === 'warning' || value === 'error') {
+    return value;
+  }
+
+  return 'info';
+};
+
+const normalizeNotificationMessage = (value?: string) => {
+  const trimmed = value?.trim();
+
+  if (!trimmed) return '';
+
+  if (/^saving file success!?$/i.test(trimmed)) return 'File saved';
+  if (/^successfully sent notification\.?$/i.test(trimmed)) {
+    return 'Notification sent';
+  }
+  if (/^successfully requested to join group\./i.test(trimmed)) {
+    return 'Join request sent';
+  }
+  if (/^failed to join the group$/i.test(trimmed))
+    return 'Unable to join group';
+  if (/^opened$/i.test(trimmed)) return 'App opened';
+  if (/^loading announcements$/i.test(trimmed))
+    return 'Loading announcements...';
+  if (/^loading chat\.\.\. please wait\.?$/i.test(trimmed)) {
+    return 'Loading chat...';
+  }
+  if (/^setting up group\.\.\. please wait\.?$/i.test(trimmed)) {
+    return 'Setting up group...';
+  }
+
+  return trimmed;
+};
+
+const getNotificationPalette = (type: NotificationType) => {
+  switch (type) {
+    case 'success':
+      return {
+        accent: '#8EBFA3',
+        tint: 'rgba(98, 145, 118, 0.22)',
+      };
+    case 'warning':
+      return {
+        accent: '#D4A574',
+        tint: 'rgba(140, 106, 62, 0.22)',
+      };
+    case 'error':
+      return {
+        accent: '#E8A8AD',
+        tint: 'rgba(132, 74, 78, 0.26)',
+      };
+    default:
+      return {
+        accent: '#8EB0E8',
+        tint: 'rgba(81, 111, 156, 0.22)',
+      };
+  }
+};
+
+/** Visible frame + outer ring — especially for success/error in dark and light UI */
+const getNotificationFrameChrome = (
+  type: NotificationType,
+  isDarkMode: boolean
+) => {
+  switch (type) {
+    case 'success':
+      return {
+        borderAlpha: isDarkMode ? 0.52 : 0.5,
+        glowAlpha: isDarkMode ? 0.2 : 0.22,
+        leftBarPx: 5,
+        outerRingAlpha: isDarkMode ? 0.38 : 0.42,
+        outerRingWidth: 1,
+      };
+    case 'error':
+      return {
+        borderAlpha: isDarkMode ? 0.55 : 0.52,
+        glowAlpha: isDarkMode ? 0.22 : 0.24,
+        leftBarPx: 5,
+        outerRingAlpha: isDarkMode ? 0.42 : 0.46,
+        outerRingWidth: 1,
+      };
+    case 'warning':
+      return {
+        borderAlpha: isDarkMode ? 0.46 : 0.48,
+        glowAlpha: isDarkMode ? 0.16 : 0.18,
+        leftBarPx: 4,
+        outerRingAlpha: isDarkMode ? 0.3 : 0.34,
+        outerRingWidth: 1,
+      };
+    default:
+      return {
+        borderAlpha: isDarkMode ? 0.22 : 0.42,
+        glowAlpha: isDarkMode ? 0.14 : 0.2,
+        leftBarPx: 4,
+        outerRingAlpha: isDarkMode ? 0.18 : 0.22,
+        outerRingWidth: 1,
+      };
+  }
+};
+
+const QortinoNotificationHead = ({
+  accent,
+  geometry,
+  isDarkMode,
+}: {
+  accent: string;
+  geometry: QortinoInletHeadGeometry;
+  isDarkMode: boolean;
+}) => {
+  const eyeSize = 5;
+  const eyeOffset = 9;
+  const eyeGlow = alpha(accent, isDarkMode ? 0.42 : 0.38);
+  const mouthColor = alpha(accent, isDarkMode ? 0.82 : 0.9);
+
+  return (
+    <Box
+      sx={{
+        height: `${geometry.stageHeight}px`,
+        left: `${geometry.headOffsetX}px`,
+        pointerEvents: 'none',
+        position: 'absolute',
+        top: `${-4 + geometry.headOffsetY}px`,
+        width: `${geometry.stageWidth}px`,
+        zIndex: 3,
+      }}
+    >
+      <motion.div
+        animate={{ y: [0, -1.5, 0] }}
+        transition={{
+          duration: 4.9,
+          ease: 'easeInOut',
+          repeat: Infinity,
+          repeatType: 'mirror',
+        }}
+        style={{ height: '100%', position: 'relative', width: '100%' }}
+      >
+        <Box
+          sx={{
+            background: isDarkMode
+              ? `radial-gradient(ellipse at center, ${alpha('#02050A', 0.52)} 0%, ${alpha('#02050A', 0)} 72%)`
+              : `radial-gradient(ellipse at center, ${alpha('#3A5370', 0.35)} 0%, ${alpha('#3A5370', 0)} 72%)`,
+            bottom: 2,
+            filter: 'blur(7px)',
+            height: '9px',
+            left: '11px',
+            position: 'absolute',
+            width: `${Math.round(geometry.headWidth * 0.6)}px`,
+            zIndex: 0,
+          }}
+        />
+        <Box
+          sx={{
+            background: isDarkMode
+              ? `radial-gradient(circle at 28% 18%, ${alpha('#D6E5FF', 0.11)} 0%, ${alpha('#D6E5FF', 0)} 34%), linear-gradient(180deg, ${alpha('#262E3D', 0.98)} 0%, ${alpha('#151A24', 0.99)} 60%, ${alpha('#0E131B', 1)} 100%)`
+              : `radial-gradient(circle at 28% 18%, ${alpha('#E8F0FF', 0.65)} 0%, ${alpha('#B9CDE8', 0.2)} 28%, ${alpha('#6B7F9E', 0)} 42%), linear-gradient(180deg, ${alpha('#5F7390', 0.98)} 0%, ${alpha('#4D617A', 0.99)} 55%, ${alpha('#415368', 1)} 100%)`,
+            border: isDarkMode
+              ? `1px solid ${alpha('#CDDCFF', 0.08)}`
+              : `1px solid ${alpha('#8FA9CC', 0.42)}`,
+            borderRadius: geometry.shellBorderRadius,
+            boxShadow: isDarkMode
+              ? `0 16px 24px ${alpha('#000000', 0.34)}, inset 0 1px 0 ${alpha('#FFFFFF', 0.03)}, inset 0 -1px 0 ${alpha('#000000', 0.26)}`
+              : `0 12px 22px ${alpha('#1E3248', 0.2)}, inset 0 1px 0 ${alpha('#FFFFFF', 0.22)}, inset 0 -1px 0 ${alpha('#1A2433', 0.12)}`,
+            height: `${geometry.headHeight}px`,
+            left: '2px',
+            position: 'absolute',
+            top: '1px',
+            width: `${geometry.headWidth}px`,
+            zIndex: 2,
+            '&::before': {
+              background: `linear-gradient(180deg, ${alpha('#F3F7FF', 0.11)} 0%, transparent 100%)`,
+              borderRadius: 'inherit',
+              content: '""',
+              inset: '1px 1px auto 1px',
+              height: '43%',
+              pointerEvents: 'none',
+              position: 'absolute',
+            },
+            '&::after': {
+              background: `linear-gradient(180deg, transparent 0%, ${alpha(
+                '#E9F1FF',
+                isDarkMode ? 0.025 : 0.06
+              )} 100%)`,
+              borderRadius: '0 0 16px 16px',
+              bottom: '4px',
+              content: '""',
+              height: '10px',
+              left: '13px',
+              pointerEvents: 'none',
+              position: 'absolute',
+              right: '13px',
+            },
+          }}
+        />
+        <Box
+          sx={{
+            backdropFilter: 'blur(10px)',
+            background: isDarkMode
+              ? `linear-gradient(180deg, ${alpha('#101824', 0.76)} 0%, ${alpha('#090D13', 0.9)} 100%)`
+              : `linear-gradient(180deg, ${alpha('#2F3F56', 0.9)} 0%, ${alpha('#1E2B3F', 0.94)} 100%)`,
+            border: isDarkMode
+              ? `1px solid ${alpha(accent, 0.34)}`
+              : `1px solid ${alpha(accent, 0.48)}`,
+            borderRadius: '17px',
+            boxShadow: isDarkMode
+              ? `inset 0 1px 0 ${alpha('#FFFFFF', 0.04)}, inset 0 -8px 14px ${alpha('#000000', 0.18)}`
+              : `inset 0 1px 0 ${alpha('#FFFFFF', 0.12)}`,
+            height: `${geometry.faceHeight}px`,
+            left: `${geometry.faceLeft + 2}px`,
+            position: 'absolute',
+            top: `${geometry.faceTop + 1}px`,
+            width: `${geometry.faceWidth}px`,
+            zIndex: 3,
+          }}
+        />
+        <Box
+          sx={{
+            backgroundColor: '#EAF4FF',
+            borderRadius: '999px',
+            boxShadow: `0 0 8px ${eyeGlow}`,
+            height: `${eyeSize}px`,
+            left: `${geometry.faceLeft + 2 + Math.round(geometry.faceWidth / 2) - eyeOffset - Math.round(eyeSize / 2)}px`,
+            position: 'absolute',
+            top: `${geometry.faceTop + 10}px`,
+            width: `${eyeSize}px`,
+            zIndex: 4,
+          }}
+        />
+        <Box
+          sx={{
+            backgroundColor: '#EAF4FF',
+            borderRadius: '999px',
+            boxShadow: `0 0 8px ${eyeGlow}`,
+            height: `${eyeSize}px`,
+            left: `${geometry.faceLeft + 2 + Math.round(geometry.faceWidth / 2) + eyeOffset - Math.round(eyeSize / 2)}px`,
+            position: 'absolute',
+            top: `${geometry.faceTop + 10}px`,
+            width: `${eyeSize}px`,
+            zIndex: 4,
+          }}
+        />
+        <Box
+          sx={{
+            borderBottom: `2px solid ${mouthColor}`,
+            borderRadius: '0 0 999px 999px',
+            height: '6px',
+            left: `${geometry.faceLeft + 2 + Math.round(geometry.faceWidth / 2) - 11}px`,
+            position: 'absolute',
+            top: `${geometry.faceTop + 21}px`,
+            width: '22px',
+            zIndex: 4,
+          }}
+        />
+      </motion.div>
+    </Box>
+  );
+};
+
+export const QortinoNotificationHost = ({
+  info,
+  open,
+  setInfo,
+  setOpen,
+}: QortinoNotificationHostProps) => {
+  const theme = useTheme();
+  const infoRef = useRef<NotificationInfo>(info);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const inletDebugSettings: QortinoInletDebugSettings =
+    DEFAULT_QORTINO_INLET_DEBUG_SETTINGS;
+
+  useEffect(() => {
+    infoRef.current = info;
+  }, [info]);
+
+  const closeNotification = useCallback(() => {
+    setOpen(false);
+    setInfo(null);
+  }, [setInfo, setOpen]);
+
+  useEffect(() => {
+    if (!open) {
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+      return;
+    }
+
+    const duration = info?.duration;
+    if (duration === null) return;
+
+    const resolvedDuration =
+      typeof duration === 'number'
+        ? duration
+        : normalizeNotificationType(info?.type) === 'error'
+          ? ERROR_NOTIFICATION_DURATION_MS
+          : DEFAULT_NOTIFICATION_DURATION_MS;
+
+    timeoutRef.current = window.setTimeout(() => {
+      closeNotification();
+    }, resolvedDuration);
+
+    return () => {
+      if (timeoutRef.current) {
+        window.clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, [closeNotification, info?.duration, info?.type, open]);
+
+  useEffect(() => {
+    const handleOpen = (
+      event: CustomEvent<{
+        compact?: boolean;
+        data?: NotificationPayload;
+        dismissible?: boolean;
+        duration?: number | null;
+        message?: string;
+        sourceId?: string;
+        type?: string;
+      }>
+    ) => {
+      const payload = event.detail?.data ?? event.detail ?? {};
+      const message = normalizeNotificationMessage(payload.message);
+
+      if (!message) return;
+
+      setInfo({
+        compact: payload.compact === true,
+        dismissible: payload.dismissible !== false,
+        duration: payload.duration === undefined ? undefined : payload.duration,
+        message,
+        sourceId: payload.sourceId,
+        type: normalizeNotificationType(payload.type),
+      });
+      setOpen(true);
+    };
+
+    const handleClose = (
+      event: CustomEvent<{
+        data?: { sourceId?: string };
+        sourceId?: string;
+      }>
+    ) => {
+      const payload = event.detail?.data ?? event.detail ?? {};
+      const sourceId = payload.sourceId;
+
+      if (
+        sourceId &&
+        (infoRef.current?.sourceId == null ||
+          infoRef.current?.sourceId !== sourceId)
+      ) {
+        return;
+      }
+
+      closeNotification();
+    };
+
+    subscribeToEvent('openGlobalSnackBar', handleOpen);
+    subscribeToEvent('closeGlobalSnackBar', handleClose);
+
+    return () => {
+      unsubscribeFromEvent('openGlobalSnackBar', handleOpen);
+      unsubscribeFromEvent('closeGlobalSnackBar', handleClose);
+    };
+  }, [closeNotification, setInfo, setOpen]);
+
+  const message = useMemo(
+    () => normalizeNotificationMessage(info?.message),
+    [info?.message]
+  );
+  const notificationType = normalizeNotificationType(info?.type);
+  const palette = getNotificationPalette(notificationType);
+  const isDismissible = info?.dismissible !== false;
+  const isDarkMode = theme.palette.mode === 'dark';
+  const frameChrome = useMemo(
+    () => getNotificationFrameChrome(notificationType, isDarkMode),
+    [notificationType, isDarkMode]
+  );
+  const inletGeometry = useMemo(
+    () => getQortinoInletHeadGeometry(inletDebugSettings),
+    [inletDebugSettings]
+  );
+  const maxTextWidthCh = useMemo(() => {
+    const ceiling = info?.compact === true ? 26 : 40;
+    const floor = info?.compact === true ? 13 : 16;
+    const dynamic = Math.ceil(message.length * 0.74);
+    return `${Math.min(ceiling, Math.max(floor, dynamic))}ch`;
+  }, [info?.compact, message.length]);
+
+  if (!open || !message) return null;
+
+  return (
+    <Box
+      sx={{
+        bottom: { xs: 14, sm: 22 },
+        left: '50%',
+        maxWidth: 'calc(100vw - 20px)',
+        pointerEvents: 'none',
+        position: 'fixed',
+        transform: 'translateX(-50%)',
+        width: 'fit-content',
+        zIndex: 2400,
+      }}
+    >
+      <AnimatePresence initial={false} mode="wait">
+        <motion.div
+          key={`${notificationType}:${message}`}
+          initial={{ opacity: 0, y: 14, scale: 0.986 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: 12, scale: 0.99 }}
+          transition={{ duration: 0.2, ease: 'easeOut' }}
+          style={{
+            pointerEvents: 'auto',
+            position: 'relative',
+            width: 'fit-content',
+          }}
+        >
+          <Box
+            role={notificationType === 'error' ? 'alert' : 'status'}
+            aria-live={notificationType === 'error' ? 'assertive' : 'polite'}
+            sx={{
+              minHeight: 56,
+              position: 'relative',
+              width: 'fit-content',
+            }}
+          >
+            <Box
+              sx={{
+                background: isDarkMode
+                  ? `radial-gradient(ellipse at center, ${alpha('#05070C', 0.28)} 0%, ${alpha('#05070C', 0)} 72%)`
+                  : `radial-gradient(ellipse at center, ${alpha('#3A5370', 0.14)} 0%, ${alpha('#3A5370', 0)} 72%)`,
+                bottom: -7,
+                filter: 'blur(14px)',
+                height: '13px',
+                left: '50%',
+                position: 'absolute',
+                transform: 'translateX(-50%)',
+                width: 'calc(100% - 20px)',
+                zIndex: 0,
+              }}
+            />
+            <Box
+              sx={{
+                background: isDarkMode
+                  ? `linear-gradient(90deg, ${alpha('#F3F8FF', 0.7)} 0%, ${alpha('#D9E7FF', 0.28)} 36%, ${alpha('#FFFFFF', 0.12)} 74%, ${alpha('#FFFFFF', 0)} 100%)`
+                  : `linear-gradient(90deg, ${alpha('#FFFFFF', 0.92)} 0%, ${alpha('#C5D5EB', 0.42)} 38%, ${alpha('#FFFFFF', 0.2)} 72%, ${alpha('#FFFFFF', 0)} 100%)`,
+                borderRadius: '999px',
+                height: '1px',
+                left: `${QORTINO_INLET_BAR_START_PX + 10}px`,
+                pointerEvents: 'none',
+                position: 'absolute',
+                right: '12px',
+                top: '1px',
+                zIndex: 2,
+              }}
+            />
+            <Box
+              sx={{
+                background: isDarkMode
+                  ? `radial-gradient(ellipse at center, ${alpha('#05070C', 0.34)} 0%, ${alpha('#05070C', 0)} 74%)`
+                  : `radial-gradient(ellipse at center, ${alpha('#5A7394', 0.2)} 0%, ${alpha('#5A7394', 0)} 74%)`,
+                filter: 'blur(6px)',
+                height: '12px',
+                left: `${QORTINO_INLET_BAR_START_PX + 7 + inletGeometry.headOffsetX}px`,
+                position: 'absolute',
+                top: `${28 + inletGeometry.headOffsetY}px`,
+                width: '36px',
+                zIndex: 1,
+              }}
+            />
+            <Box
+              sx={{
+                background: isDarkMode
+                  ? `linear-gradient(90deg, ${alpha('#05070C', 0.34)} 0%, ${alpha('#05070C', 0.08)} 72%, transparent 100%)`
+                  : `linear-gradient(90deg, ${alpha('#8FA9CC', 0.28)} 0%, ${alpha('#8FA9CC', 0.06)} 72%, transparent 100%)`,
+                borderRadius: '9px',
+                boxShadow: isDarkMode
+                  ? `inset 12px 0 18px ${alpha('#000000', 0.22)}`
+                  : `inset 10px 0 14px ${alpha('#2A405C', 0.07)}`,
+                height: '25px',
+                left: `${QORTINO_INLET_BAR_START_PX + 6 + inletGeometry.headOffsetX}px`,
+                pointerEvents: 'none',
+                position: 'absolute',
+                top: `${13 + inletGeometry.headOffsetY}px`,
+                width: `${Math.round(inletGeometry.headWidth * 0.56)}px`,
+                zIndex: 2,
+              }}
+            />
+            <Box
+              sx={{
+                background: isDarkMode
+                  ? `linear-gradient(180deg, ${alpha('#252D3C', 0.66)} 0%, ${alpha('#171C26', 0.86)} 100%)`
+                  : `linear-gradient(180deg, ${alpha('#D8E3F2', 0.88)} 0%, ${alpha('#C4D3E8', 0.94)} 100%)`,
+                border: isDarkMode
+                  ? `1px solid ${alpha('#D6E5FF', 0.05)}`
+                  : `1px solid ${alpha('#9DB2D4', 0.45)}`,
+                borderRadius: '10px',
+                boxShadow: isDarkMode
+                  ? `0 8px 16px ${alpha('#000000', 0.18)}`
+                  : `0 6px 14px ${alpha('#2A405C', 0.12)}`,
+                height: '29px',
+                left: `${QORTINO_INLET_BAR_START_PX + 6 + inletGeometry.headOffsetX}px`,
+                pointerEvents: 'none',
+                position: 'absolute',
+                top: `${9 + inletGeometry.headOffsetY}px`,
+                width: `${Math.round(inletGeometry.headWidth * 0.46)}px`,
+                zIndex: 1,
+              }}
+            />
+            <Box
+              sx={{
+                background: isDarkMode
+                  ? `linear-gradient(180deg, ${alpha('#262E3D', 0.82)} 0%, ${alpha('#171C26', 0.94)} 58%, ${alpha('#121823', 0.96)} 100%)`
+                  : `linear-gradient(180deg, ${alpha('#FBFCFE', 0.98)} 0%, ${alpha('#EEF3FA', 0.99)} 48%, ${alpha('#E3EBF5', 1)} 100%)`,
+                backdropFilter: 'blur(16px)',
+                border: `${
+                  notificationType === 'success' || notificationType === 'error'
+                    ? '1.5px'
+                    : '1px'
+                } solid ${alpha(palette.accent, frameChrome.borderAlpha)}`,
+                borderLeft: `${frameChrome.leftBarPx}px solid ${palette.accent}`,
+                borderRadius: '13px',
+                boxShadow: isDarkMode
+                  ? `0 14px 26px ${alpha('#000000', 0.24)}, inset 0 1px 0 ${alpha('#FFFFFF', 0.03)}, 0 0 32px ${alpha(palette.accent, frameChrome.glowAlpha)}, 0 0 0 ${frameChrome.outerRingWidth}px ${alpha(palette.accent, frameChrome.outerRingAlpha)}`
+                  : `0 14px 28px ${alpha('#2A405C', 0.11)}, inset 0 1px 0 ${alpha('#FFFFFF', 0.92)}, 0 0 28px ${alpha(palette.accent, frameChrome.glowAlpha + 0.04)}, 0 0 0 ${frameChrome.outerRingWidth}px ${alpha(palette.accent, frameChrome.outerRingAlpha)}`,
+                display: 'flex',
+                marginLeft: `${QORTINO_INLET_BAR_START_PX}px`,
+                maxWidth: 'min(500px, calc(100vw - 20px))',
+                minHeight: '43px',
+                minWidth: 'min(184px, calc(100vw - 20px))',
+                overflow: 'hidden',
+                paddingBottom: '7px',
+                paddingLeft: `${inletGeometry.stageWidth - QORTINO_INLET_BAR_START_PX + 10 + Math.max(0, inletGeometry.headOffsetX)}px`,
+                paddingRight: isDismissible ? '40px' : '11px',
+                paddingTop: '7px',
+                position: 'relative',
+                width: 'fit-content',
+                '&::before': {
+                  background: isDarkMode
+                    ? `linear-gradient(180deg, ${alpha('#FFFFFF', 0.02)} 0%, transparent 100%)`
+                    : `linear-gradient(180deg, ${alpha('#FFFFFF', 0.72)} 0%, transparent 55%)`,
+                  content: '""',
+                  inset: 0,
+                  pointerEvents: 'none',
+                  position: 'absolute',
+                },
+                '&::after': {
+                  background: isDarkMode
+                    ? `radial-gradient(circle at 0% 50%, ${alpha(palette.accent, 0.34)} 0%, ${palette.tint} 38%, transparent 72%)`
+                    : `radial-gradient(circle at 0% 50%, ${alpha(palette.accent, 0.28)} 0%, ${alpha(palette.accent, 0.12)} 36%, transparent 68%)`,
+                  content: '""',
+                  inset: 0,
+                  pointerEvents: 'none',
+                  position: 'absolute',
+                },
+              }}
+            >
+              <Typography
+                sx={{
+                  alignItems: 'center',
+                  color:
+                    notificationType === 'error'
+                      ? isDarkMode
+                        ? alpha('#FFE8EA', 0.98)
+                        : alpha('#5C2128', 0.94)
+                      : notificationType === 'success'
+                        ? isDarkMode
+                          ? alpha('#EAF6EE', 0.98)
+                          : alpha('#1E3D2C', 0.92)
+                        : notificationType === 'warning'
+                          ? isDarkMode
+                            ? alpha('#FFF2E0', 0.98)
+                            : alpha('#4D3514', 0.92)
+                          : isDarkMode
+                            ? alpha('#E8F0FF', 0.98)
+                            : alpha(theme.palette.text.primary, 0.94),
+                  display: 'flex',
+                  fontFamily: 'Inter',
+                  fontSize: '0.9375rem',
+                  fontWeight: 600,
+                  letterSpacing: '-0.012em',
+                  lineHeight: 1.36,
+                  maxWidth: maxTextWidthCh,
+                  minHeight: '21px',
+                  position: 'relative',
+                  textWrap: 'pretty',
+                  zIndex: 0,
+                }}
+              >
+                {message}
+              </Typography>
+              {isDismissible ? (
+                <IconButton
+                  aria-label="Dismiss notification"
+                  onClick={closeNotification}
+                  size="small"
+                  sx={{
+                    backgroundColor: isDarkMode
+                      ? alpha('#FFFFFF', 0.06)
+                      : alpha('#000000', 0.04),
+                    color: isDarkMode
+                      ? alpha('#F1F5FF', 0.92)
+                      : alpha(theme.palette.text.secondary, 0.95),
+                    height: 34,
+                    minWidth: 34,
+                    position: 'absolute',
+                    right: 4,
+                    top: '50%',
+                    transform: 'translateY(-50%)',
+                    zIndex: 6,
+                    '&:hover': {
+                      backgroundColor: isDarkMode
+                        ? alpha('#FFFFFF', 0.12)
+                        : alpha(theme.palette.primary.main, 0.1),
+                      color: isDarkMode
+                        ? alpha('#FFFFFF', 0.98)
+                        : theme.palette.text.primary,
+                    },
+                  }}
+                >
+                  <CloseRoundedIcon sx={{ fontSize: 18 }} />
+                </IconButton>
+              ) : null}
+            </Box>
+            <QortinoNotificationHead
+              accent={palette.accent}
+              geometry={inletGeometry}
+              isDarkMode={isDarkMode}
+            />
+          </Box>
+        </motion.div>
+      </AnimatePresence>
+    </Box>
+  );
+};
diff --git a/src/components/Snackbar/Snackbar.tsx b/src/components/Snackbar/Snackbar.tsx
index 91794c3b..066b27dd 100644
--- a/src/components/Snackbar/Snackbar.tsx
+++ b/src/components/Snackbar/Snackbar.tsx
@@ -1,77 +1,48 @@
-import Snackbar, { SnackbarCloseReason } from '@mui/material/Snackbar';
-import Alert from '@mui/material/Alert';
-import { useTheme } from '@mui/material/styles';
-
-const snackbarAlertSx = (theme) => ({
-  width: '100%',
-  maxWidth: '420px',
-  fontFamily: 'Inter',
-  fontSize: '15px',
-  fontWeight: 500,
-  borderRadius: '14px',
-  boxShadow: theme.shadows[8],
-  padding: '14px 18px',
-  alignItems: 'center',
-  '& .MuiAlert-icon': {
-    alignItems: 'center',
-    fontSize: '22px',
-  },
-  '& .MuiAlert-message': {
-    padding: '0 4px',
-    lineHeight: 1.4,
-  },
-  '& .MuiAlert-action': {
-    alignItems: 'center',
-    paddingLeft: 1,
-  },
-});
+import { useEffect, useRef } from 'react';
+import { executeEvent } from '../../utils/events';
 
 export const CustomizedSnackbars = ({
   open,
   setOpen,
   info,
   setInfo,
-  duration = 6000,
 }) => {
-  const theme = useTheme();
-  const handleClose = (
-    event?: React.SyntheticEvent | Event,
-    reason?: SnackbarCloseReason
-  ) => {
-    if (reason === 'clickaway') {
+  const lastSignatureRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (!open || !info?.message) {
+      lastSignatureRef.current = null;
       return;
     }
+
+    const signature = JSON.stringify({
+      compact: info?.compact ?? false,
+      duration: info?.duration ?? undefined,
+      message: info?.message,
+      type: info?.type ?? 'info',
+    });
+
+    if (lastSignatureRef.current === signature) return;
+    lastSignatureRef.current = signature;
+
+    executeEvent('openGlobalSnackBar', {
+      compact: info?.compact,
+      duration: info?.duration,
+      message: info?.message,
+      type: info?.type,
+    });
+
     setOpen(false);
     setInfo(null);
-  };
-
-  if (!open) return null;
+  }, [
+    info?.compact,
+    info?.duration,
+    info?.message,
+    info?.type,
+    open,
+    setInfo,
+    setOpen,
+  ]);
 
-  return (
-    <Snackbar
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-      open={open}
-      autoHideDuration={info?.duration === null ? null : duration || 6000}
-      onClose={handleClose}
-      sx={{
-        bottom: { xs: 16, sm: 24 },
-        '&.MuiSnackbar-root': {
-          display: 'flex',
-          justifyContent: 'center',
-          left: '50%',
-          right: 'auto',
-          transform: 'translateX(-50%)',
-        },
-      }}
-    >
-      <Alert
-        onClose={handleClose}
-        severity={info?.type}
-        variant="filled"
-        sx={snackbarAlertSx(theme)}
-      >
-        {info?.message}
-      </Alert>
-    </Snackbar>
-  );
+  return null;
 };
diff --git a/src/components/Snackbar/qortinoInletDebug.ts b/src/components/Snackbar/qortinoInletDebug.ts
new file mode 100644
index 00000000..959c8523
--- /dev/null
+++ b/src/components/Snackbar/qortinoInletDebug.ts
@@ -0,0 +1,19 @@
+export type QortinoInletDebugSettings = {
+  faceHeightScale: number;
+  faceWidthScale: number;
+  headHeightScale: number;
+  headWidthScale: number;
+  offsetX: number;
+  offsetY: number;
+  shellRoundness: number;
+};
+
+export const DEFAULT_QORTINO_INLET_DEBUG_SETTINGS: QortinoInletDebugSettings = {
+  faceHeightScale: 1.3,
+  faceWidthScale: 1.15,
+  headHeightScale: 1.1,
+  headWidthScale: 1.05,
+  offsetX: -4,
+  offsetY: -5,
+  shellRoundness: 1.2,
+};
diff --git a/src/components/TaskManager/TaskManager.tsx b/src/components/TaskManager/TaskManager.tsx
index 75c779c9..5108338a 100644
--- a/src/components/TaskManager/TaskManager.tsx
+++ b/src/components/TaskManager/TaskManager.tsx
@@ -1,30 +1,50 @@
 import {
+  Box,
   List,
   ListItemButton,
-  ListItemIcon,
   ListItemText,
-  Collapse,
   IconButton,
+  Popover,
+  Tooltip,
+  Typography,
   useTheme,
+  type TooltipProps,
 } from '@mui/material';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+  type MouseEvent,
+  type ReactNode,
+} from 'react';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import PendingIcon from '@mui/icons-material/Pending';
 import TaskAltIcon from '@mui/icons-material/TaskAlt';
-import ExpandLess from '@mui/icons-material/ExpandLess';
-import ExpandMore from '@mui/icons-material/ExpandMore';
 import { getBaseApiReact } from '../../App';
 import { executeEvent } from '../../utils/events';
 import { useAtom } from 'jotai';
 import { memberGroupsAtom, txListAtom } from '../../atoms/global';
 import { useTranslation } from 'react-i18next';
 import { TIME_MINUTES_1_IN_MILLISECONDS } from '../../constants/constants';
-import { titleBarIconButtonProps } from '../Desktop/CustomTitleBar';
 
-export const TaskManager = ({ getUserInfo }) => {
+export const TaskManager = ({
+  getUserInfo,
+  buttonSx = undefined,
+  iconSx = undefined,
+  tooltipSlotProps,
+  tooltipTitle,
+}: {
+  getUserInfo: (useTimer?: boolean) => Promise<void>;
+  buttonSx?: any;
+  iconSx?: any;
+  tooltipSlotProps?: TooltipProps['slotProps'];
+  tooltipTitle?: ReactNode;
+}) => {
   const [memberGroups] = useAtom(memberGroupsAtom);
   const [txList, setTxList] = useAtom(txListAtom);
-  const [open, setOpen] = useState(false);
-  const intervals = useRef({});
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const intervals = useRef<Record<string, ReturnType<typeof setInterval>>>({});
   const theme = useTheme();
   const { t } = useTranslation([
     'auth',
@@ -34,11 +54,22 @@ export const TaskManager = ({ getUserInfo }) => {
     'tutorial',
   ]);
 
-  const handleClick = () => {
-    setOpen((prev) => !prev);
+  const popoverOpen = Boolean(anchorEl);
+
+  const handleIconClick = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl((prev) =>
+      prev === event.currentTarget ? null : event.currentTarget
+    );
+  };
+
+  const handleClosePopover = () => {
+    setAnchorEl(null);
   };
 
-  const getStatus = ({ signature }, callback) => {
+  const getStatus = (
+    { signature }: { signature: string },
+    callback?: (ok: boolean) => void
+  ) => {
     let stop = false;
     const getAnswer = async () => {
       const getTx = async () => {
@@ -58,7 +89,7 @@ export const TaskManager = ({ getUserInfo }) => {
               }, TIME_MINUTES_1_IN_MILLISECONDS)
             );
             setTxList((prev) => {
-              let previousData = [...prev];
+              const previousData = [...prev];
               const findTxWithSignature = previousData.findIndex(
                 (tx) => tx.signature === signature
               );
@@ -88,7 +119,7 @@ export const TaskManager = ({ getUserInfo }) => {
 
   useEffect(() => {
     setTxList((prev) => {
-      let previousData = [...prev];
+      const previousData = [...prev];
       memberGroups.forEach((group) => {
         const findGroup = txList.findIndex(
           (tx) => tx?.type === 'joined-group' && tx?.groupId === group.groupId
@@ -196,86 +227,160 @@ export const TaskManager = ({ getUserInfo }) => {
 
   if (txList?.length === 0 || txList.every((item) => item?.done)) return null;
 
+  const triggerButton = (
+    <IconButton
+      disableFocusRipple
+      disableRipple
+      aria-expanded={popoverOpen ? 'true' : 'false'}
+      aria-haspopup="true"
+      tabIndex={-1}
+      onClick={handleIconClick}
+      size="small"
+      sx={{
+        color: txList.some((item) => !item.done)
+          ? theme.palette.primary.light
+          : theme.palette.text.secondary,
+        '&.MuiIconButton-root': {
+          width: 26,
+          height: 26,
+        },
+        ...(buttonSx || {}),
+      }}
+    >
+      {txList.some((item) => !item.done) ? (
+        <PendingIcon sx={iconSx || undefined} />
+      ) : (
+        <TaskAltIcon sx={iconSx || undefined} />
+      )}
+    </IconButton>
+  );
+
   return (
     <>
-      {!open && (
-        <IconButton
-          disableFocusRipple
-          disableRipple
-          tabIndex={-1}
-          onClick={handleClick}
-          size="small"
-          sx={{
-            bgcolor: theme.palette.primary.main,
-            color: theme.palette.text.primary,
-            ':hover': { bgcolor: theme.palette.primary },
-            '&.MuiIconButton-root': {
-              width: 26,
-              height: 26,
-            },
-          }}
+      {tooltipTitle != null ? (
+        <Tooltip
+          arrow
+          disableInteractive
+          placement="bottom"
+          slotProps={tooltipSlotProps}
+          title={tooltipTitle}
         >
-          {txList.some((item) => !item.done) ? (
-            <PendingIcon />
-          ) : (
-            <TaskAltIcon />
-          )}
-        </IconButton>
+          {triggerButton}
+        </Tooltip>
+      ) : (
+        triggerButton
       )}
-      {open && (
-        <List
+
+      <Popover
+        anchorEl={anchorEl}
+        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+        disableRestoreFocus
+        open={popoverOpen}
+        slotProps={{
+          paper: {
+            elevation: 8,
+            sx: {
+              border: `1px solid ${theme.palette.divider}`,
+              borderRadius: 2,
+              display: 'flex',
+              flexDirection: 'column',
+              maxHeight: 'min(400px, 70vh)',
+              maxWidth: 'min(300px, calc(100vw - 16px))',
+              mt: 0.75,
+              overflow: 'hidden',
+              width: '300px',
+            },
+          },
+        }}
+        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+        onClose={handleClosePopover}
+      >
+        <Box
           sx={{
-            bgcolor: theme.palette.background.paper,
-            bottom: 16,
-            boxShadow: 4,
-            maxHeight: '400px',
-            overflow: 'auto',
-            padding: '0px',
-            position: 'fixed',
-            right: 16,
-            width: '300px',
-            zIndex: 10,
+            display: 'flex',
+            flexDirection: 'column',
+            maxHeight: 'min(400px, 70vh)',
+            overflow: 'hidden',
           }}
-          component="nav"
         >
-          <ListItemButton onClick={handleClick}>
-            <ListItemIcon>
+          <Box
+            sx={{
+              alignItems: 'center',
+              borderBottom: `1px solid ${theme.palette.divider}`,
+              display: 'flex',
+              flexShrink: 0,
+              gap: 1,
+              pl: 1.5,
+              pr: 0.5,
+              py: 1,
+            }}
+          >
+            <Box
+              sx={{
+                alignItems: 'center',
+                color: theme.palette.primary.main,
+                display: 'flex',
+                flexShrink: 0,
+              }}
+            >
               {txList.some((item) => !item.done) ? (
-                <PendingIcon
-                  sx={{
-                    color: theme.palette.primary,
-                  }}
-                />
+                <PendingIcon fontSize="small" />
               ) : (
-                <TaskAltIcon
-                  sx={{
-                    color: theme.palette.primary,
-                  }}
-                />
+                <TaskAltIcon fontSize="small" />
               )}
-            </ListItemIcon>
-
-            <ListItemText
-              primary={t('core:message.generic.ongoing_transactions', {
+            </Box>
+            <Typography
+              fontWeight={600}
+              sx={{ flex: 1, minWidth: 0, pr: 0.5 }}
+              variant="subtitle2"
+            >
+              {t('core:message.generic.ongoing_transactions', {
                 postProcess: 'capitalizeFirstChar',
               })}
-            />
-            {open ? <ExpandLess /> : <ExpandMore />}
-          </ListItemButton>
+            </Typography>
+            <IconButton
+              aria-label={t('core:action.close', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+              edge="end"
+              size="small"
+              onClick={(event) => {
+                event.stopPropagation();
+                handleClosePopover();
+              }}
+            >
+              <CloseRoundedIcon fontSize="small" />
+            </IconButton>
+          </Box>
 
-          <Collapse in={open} timeout="auto" unmountOnExit>
-            <List component="div" disablePadding>
-              {txList.map((item) => (
-                <ListItemButton key={item?.signature} sx={{ pl: 4 }}>
-                  <ListItemText
-                    primary={item?.done ? item.labelDone : item.label}
-                  />
-                </ListItemButton>
-              ))}
-            </List>
-          </Collapse>
-        </List>
-      )}
+          <List
+            component="nav"
+            dense
+            sx={{
+              bgcolor: theme.palette.background.paper,
+              flex: 1,
+              minHeight: 0,
+              overflow: 'auto',
+              py: 0,
+            }}
+          >
+            {txList.map((item) => (
+              <ListItemButton
+                key={item?.signature ?? `${item?.type}-${item?.groupId}`}
+                sx={{ alignItems: 'flex-start', py: 1, pl: 2, pr: 2 }}
+              >
+                <ListItemText
+                  primary={item?.done ? item.labelDone : item.label}
+                  primaryTypographyProps={{
+                    variant: 'body2',
+                    sx: { whiteSpace: 'normal', wordBreak: 'break-word' },
+                  }}
+                />
+              </ListItemButton>
+            ))}
+          </List>
+        </Box>
+      </Popover>
     </>
   );
 };
diff --git a/src/components/Theme/ThemeContext.tsx b/src/components/Theme/ThemeContext.tsx
index 30440455..f3c5bc63 100644
--- a/src/components/Theme/ThemeContext.tsx
+++ b/src/components/Theme/ThemeContext.tsx
@@ -14,6 +14,10 @@ import { lightThemeOptions } from '../../styles/theme-light';
 import { darkThemeOptions } from '../../styles/theme-dark';
 import i18n from '../../i18n/i18n';
 
+export const ENABLE_CUSTOM_THEMES = false;
+const SAVED_UI_THEME_KEY = 'saved_ui_theme';
+const DEFAULT_THEME_ID = 'default';
+
 const defaultTheme = {
   id: 'default',
   name: i18n.t('core:theme.default', {
@@ -29,13 +33,13 @@ const ThemeContext = createContext({
   userThemes: [defaultTheme],
   addUserTheme: (themes) => {},
   setUserTheme: (theme, themes) => {},
-  currentThemeId: 'default',
+  currentThemeId: DEFAULT_THEME_ID,
 });
 
 export const ThemeProvider = ({ children }) => {
   const [themeMode, setThemeMode] = useState('dark');
   const [userThemes, setUserThemes] = useState([defaultTheme]);
-  const [currentThemeId, setCurrentThemeId] = useState('default');
+  const [currentThemeId, setCurrentThemeId] = useState(DEFAULT_THEME_ID);
 
   const currentTheme =
     userThemes.find((theme) => theme.id === currentThemeId) || defaultTheme;
@@ -44,8 +48,9 @@ export const ThemeProvider = ({ children }) => {
     const baseThemeOptions =
       themeMode === 'light' ? lightThemeOptions : darkThemeOptions;
 
+    const activeTheme = ENABLE_CUSTOM_THEMES ? currentTheme : defaultTheme;
     const palette =
-      themeMode === 'light' ? currentTheme.light : currentTheme.dark;
+      themeMode === 'light' ? activeTheme.light : activeTheme.dark;
 
     return createTheme({
       ...baseThemeOptions,
@@ -58,8 +63,20 @@ export const ThemeProvider = ({ children }) => {
     mode = themeMode,
     themeId = currentThemeId
   ) => {
+    if (!ENABLE_CUSTOM_THEMES) {
+      localStorage.setItem(
+        SAVED_UI_THEME_KEY,
+        JSON.stringify({
+          mode,
+          currentThemeId: DEFAULT_THEME_ID,
+        })
+      );
+
+      return;
+    }
+
     localStorage.setItem(
-      'saved_ui_theme',
+      SAVED_UI_THEME_KEY,
       JSON.stringify({
         mode,
         userThemes: themes,
@@ -77,11 +94,13 @@ export const ThemeProvider = ({ children }) => {
   };
 
   const addUserTheme = (themes) => {
+    if (!ENABLE_CUSTOM_THEMES) return;
     setUserThemes(themes);
     saveSettings(themes);
   };
 
   const setUserTheme = (theme, themes) => {
+    if (!ENABLE_CUSTOM_THEMES) return;
     if (theme.id === 'default') {
       setCurrentThemeId('default');
       saveSettings(themes || userThemes, themeMode, 'default');
@@ -92,12 +111,27 @@ export const ThemeProvider = ({ children }) => {
   };
 
   const loadSettings = useCallback(() => {
-    const saved = localStorage.getItem('saved_ui_theme');
+    const saved = localStorage.getItem(SAVED_UI_THEME_KEY);
     if (saved) {
       try {
         const parsed = JSON.parse(saved);
         if (parsed.mode === 'light' || parsed.mode === 'dark')
           setThemeMode(parsed.mode);
+        if (!ENABLE_CUSTOM_THEMES) {
+          setUserThemes([defaultTheme]);
+          setCurrentThemeId(DEFAULT_THEME_ID);
+          localStorage.setItem(
+            SAVED_UI_THEME_KEY,
+            JSON.stringify({
+              mode:
+                parsed.mode === 'light' || parsed.mode === 'dark'
+                  ? parsed.mode
+                  : themeMode,
+              currentThemeId: DEFAULT_THEME_ID,
+            })
+          );
+          return;
+        }
         if (Array.isArray(parsed.userThemes)) {
           const filteredThemes = parsed.userThemes.filter(
             (theme) => theme.id !== 'default'
@@ -107,9 +141,23 @@ export const ThemeProvider = ({ children }) => {
         if (parsed.currentThemeId) setCurrentThemeId(parsed.currentThemeId);
       } catch (error) {
         console.error('Failed to parse saved_ui_theme:', error);
+        if (!ENABLE_CUSTOM_THEMES) {
+          setUserThemes([defaultTheme]);
+          setCurrentThemeId(DEFAULT_THEME_ID);
+          localStorage.setItem(
+            SAVED_UI_THEME_KEY,
+            JSON.stringify({
+              mode: themeMode,
+              currentThemeId: DEFAULT_THEME_ID,
+            })
+          );
+        }
       }
+    } else if (!ENABLE_CUSTOM_THEMES) {
+      setUserThemes([defaultTheme]);
+      setCurrentThemeId(DEFAULT_THEME_ID);
     }
-  }, []);
+  }, [themeMode]);
 
   useEffect(() => {
     loadSettings();
diff --git a/src/components/Theme/ThemeManager.tsx b/src/components/Theme/ThemeManager.tsx
index 47e13d3a..edcae291 100644
--- a/src/components/Theme/ThemeManager.tsx
+++ b/src/components/Theme/ThemeManager.tsx
@@ -22,7 +22,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import AddIcon from '@mui/icons-material/Add';
 import CheckIcon from '@mui/icons-material/Check';
-import { useThemeContext } from './ThemeContext';
+import { ENABLE_CUSTOM_THEMES, useThemeContext } from './ThemeContext';
 import { darkThemeOptions } from '../../styles/theme-dark';
 import { lightThemeOptions } from '../../styles/theme-light';
 import ShortUniqueId from 'short-unique-id';
@@ -98,6 +98,19 @@ export default function ThemeManager() {
     }
   }, [openEditor]);
 
+  if (!ENABLE_CUSTOM_THEMES) {
+    return (
+      <Box p={2}>
+        <Typography variant="h5" gutterBottom>
+          {t('core:theme.manager', { postProcess: 'capitalizeFirstChar' })}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          Custom themes are currently disabled.
+        </Typography>
+      </Box>
+    );
+  }
+
   const handleAddTheme = () => {
     setThemeDraft({
       id: '',
diff --git a/src/components/Theme/ThemeSelector.tsx b/src/components/Theme/ThemeSelector.tsx
index d7b7c396..06757f82 100644
--- a/src/components/Theme/ThemeSelector.tsx
+++ b/src/components/Theme/ThemeSelector.tsx
@@ -1,11 +1,25 @@
 import { useThemeContext } from './ThemeContext';
-import { Box, IconButton, Tooltip, useTheme } from '@mui/material';
+import {
+  Box,
+  ButtonBase,
+  IconButton,
+  Tooltip,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { alpha } from '@mui/material/styles';
 import LightModeIcon from '@mui/icons-material/LightMode';
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import { useTranslation } from 'react-i18next';
 import { useRef } from 'react';
 
-const ThemeSelector = () => {
+type ThemeSelectorProps = {
+  sidebar?: boolean;
+  /** Compact icon for footers (e.g. login screen chrome next to language). */
+  footer?: boolean;
+};
+
+const ThemeSelector = ({ sidebar = false, footer = false }: ThemeSelectorProps) => {
   const { t } = useTranslation([
     'auth',
     'core',
@@ -16,6 +30,108 @@ const ThemeSelector = () => {
   const { themeMode, toggleTheme } = useThemeContext();
   const selectorRef = useRef(null);
   const theme = useTheme();
+  const switchThemeLabel = themeMode === 'dark' ? 'Light' : 'Dark';
+  const sidebarButtonSx = {
+    alignItems: 'center',
+    borderRadius: '14px',
+    color: theme.palette.text.secondary,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 1,
+    justifyContent: 'flex-start',
+    minHeight: 58,
+    py: 1,
+    transition: 'background-color 180ms ease, color 180ms ease, box-shadow 140ms ease',
+    width: 56,
+    '& .sidebarSelectorIconWrap': {
+      transition: 'transform 150ms ease, color 180ms ease',
+    },
+    '&:hover': {
+      backgroundColor: theme.palette.action.hover,
+      color: theme.palette.text.primary,
+      boxShadow: `inset 0 0 0 1px ${alpha(theme.palette.border.main, 0.18)}, inset 0 1px 0 ${alpha(
+        theme.palette.common.white,
+        theme.palette.mode === 'dark' ? 0.03 : 0.12
+      )}`,
+      '& .sidebarSelectorIconWrap': {
+        transform: 'translateY(-1px)',
+      },
+    },
+    '&:focus-visible': {
+      backgroundColor: alpha(
+        theme.palette.action.hover,
+        theme.palette.mode === 'dark' ? 0.72 : 0.82
+      ),
+      boxShadow: `inset 0 0 0 1px ${alpha(theme.palette.border.main, 0.22)}, inset 0 1px 0 ${alpha(
+        theme.palette.common.white,
+        theme.palette.mode === 'dark' ? 0.03 : 0.12
+      )}`,
+      color: theme.palette.text.primary,
+      '& .sidebarSelectorIconWrap': {
+        transform: 'translateY(-1px)',
+      },
+    },
+  } as const;
+
+  if (footer) {
+    const ariaLabel =
+      themeMode === 'dark'
+        ? t('core:aria.switch_theme_light')
+        : t('core:aria.switch_theme_dark');
+    return (
+      <Box ref={selectorRef}>
+        <Tooltip title={ariaLabel}>
+          <IconButton onClick={toggleTheme} aria-label={ariaLabel}>
+            {themeMode === 'dark' ? (
+              <LightModeIcon sx={{ fontSize: 18 }} />
+            ) : (
+              <DarkModeIcon sx={{ fontSize: 18 }} />
+            )}
+          </IconButton>
+        </Tooltip>
+      </Box>
+    );
+  }
+
+  if (sidebar) {
+    return (
+      <Box ref={selectorRef}>
+        <ButtonBase
+          disableRipple
+          onClick={toggleTheme}
+          sx={sidebarButtonSx}
+        >
+          <Box
+            className="sidebarSelectorIconWrap"
+            sx={{
+              alignItems: 'center',
+              display: 'flex',
+              height: '40px',
+              justifyContent: 'center',
+              width: '40px',
+            }}
+          >
+            {themeMode === 'dark' ? (
+              <LightModeIcon sx={{ fontSize: '1.45rem' }} />
+            ) : (
+              <DarkModeIcon sx={{ fontSize: '1.45rem' }} />
+            )}
+          </Box>
+          <Typography
+            sx={{
+              color: 'inherit',
+              fontSize: '11px',
+              fontWeight: 600,
+              letterSpacing: '0.01em',
+              lineHeight: 1,
+            }}
+          >
+            {switchThemeLabel}
+          </Typography>
+        </ButtonBase>
+      </Box>
+    );
+  }
 
   return (
     <Box ref={selectorRef}>
diff --git a/src/components/UserLookup.tsx/UserLookup.tsx b/src/components/UserLookup.tsx/UserLookup.tsx
index bbf9bcf3..b79d9a51 100644
--- a/src/components/UserLookup.tsx/UserLookup.tsx
+++ b/src/components/UserLookup.tsx/UserLookup.tsx
@@ -1,73 +1,338 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  Autocomplete,
   Avatar,
   Box,
   Button,
   ButtonBase,
-  Card,
-  Divider,
+  Chip,
+  CircularProgress,
+  Dialog,
   IconButton,
   LinearProgress,
+  Table,
   TableBody,
   TableCell,
+  TableContainer,
   TableHead,
+  TablePagination,
   TableRow,
   TextField,
   Tooltip,
   Typography,
-  Table,
-  TablePagination,
-  CircularProgress,
   useTheme,
-  alpha,
-  Autocomplete,
 } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import AccountCircleRoundedIcon from '@mui/icons-material/AccountCircleRounded';
+import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
+import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded';
+import NorthEastRoundedIcon from '@mui/icons-material/NorthEastRounded';
+import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
+import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
+import PersonOffRoundedIcon from '@mui/icons-material/PersonOffRounded';
+import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
+import ShieldRoundedIcon from '@mui/icons-material/ShieldRounded';
+import { useAtomValue, useSetAtom } from 'jotai';
+import { useTranslation } from 'react-i18next';
+import {
+  infoSnackGlobalAtom,
+  isRunningPublicNodeAtom,
+  openSnackGlobalAtom,
+  userInfoAtom,
+} from '../../atoms/global';
 import {
   getAddressInfo,
   getNameOrAddress,
 } from '../../background/background.ts';
 import { getBaseApiReact } from '../../App';
 import { getNameInfo } from '../Group/groupApi';
-import AccountCircleIcon from '@mui/icons-material/AccountCircle';
-import { Spacer } from '../../common/Spacer';
-import { formatTimestamp } from '../../utils/time';
-import CloseIcon from '@mui/icons-material/Close';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import {
-  executeEvent,
-  subscribeToEvent,
-  unsubscribeFromEvent,
-} from '../../utils/events';
-import { useNameSearch } from '../../hooks/useNameSearch';
-import { useTranslation } from 'react-i18next';
-import { validateAddress } from '../../utils/validateAddress.ts';
-import { appHeighOffsetPx } from '../Desktop/CustomTitleBar';
 import {
   accountTargetBlocks,
   levelUpBlocks,
   levelUpDays,
   nextLevel,
 } from '../Minting/MintingStats.tsx';
+import { useBlockedAddresses } from '../../hooks/useBlockUsers';
+import { useNameSearch } from '../../hooks/useNameSearch';
+import { validateAddress } from '../../utils/validateAddress.ts';
+import {
+  executeEvent,
+  subscribeToEvent,
+  unsubscribeFromEvent,
+} from '../../utils/events';
+import { formatTimestamp } from '../../utils/time';
+import magnifierSvg from '../../assets/user-search/magnifier.svg?raw';
+import qortalLogo512 from '../../assets/user-search/qortal-logo-512.png';
+
+type UserLookupProps = {
+  isOpenDrawerLookup: boolean;
+  setIsOpenDrawerLookup: (open: boolean) => void;
+};
+
+type LookupHistoryState = {
+  history: string[];
+  index: number;
+};
 
-function formatAddress(str: string) {
-  if (!str || str.length <= 12) return str || '';
-  const first6 = str.slice(0, 6);
-  const last6 = str.slice(-6);
-  return `${first6}....${last6}`;
+type AddressNameEntry = {
+  loading: boolean;
+  name: string | null;
+};
+
+type AddressInfoResult = {
+  address: string;
+  balance?: number | string;
+  blocksMinted?: number;
+  blocksMintedAdjustment?: number;
+  level?: number;
+  name?: string;
+  publicKey?: string;
+};
+
+type UserSearchIllustrationConfig = {
+  magnifierX: number;
+  magnifierY: number;
+  lensOffsetX: number;
+  lensOffsetY: number;
+  lensAngleOffset: number;
+};
+
+const defaultUserSearchIllustrationConfig: UserSearchIllustrationConfig =
+  {
+    magnifierX: -9,
+    magnifierY: -28,
+    lensOffsetX: 5,
+    lensOffsetY: -23,
+    lensAngleOffset: 18,
+  };
+
+function formatAddress(value: string) {
+  if (!value || value.length <= 12) return value || '';
+  return `${value.slice(0, 6)}....${value.slice(-6)}`;
 }
 
 function formatBalance(value: number | string | undefined): string {
   if (value == null || value === '') return '0';
-  const n = typeof value === 'string' ? parseFloat(value) : value;
-  if (Number.isNaN(n)) return '0';
-  return n.toLocaleString('en-US', {
-    minimumFractionDigits: 2,
+  const numericValue =
+    typeof value === 'string' ? parseFloat(value) : Number(value);
+  if (Number.isNaN(numericValue)) return '0';
+  return numericValue.toLocaleString('en-US', {
     maximumFractionDigits: 4,
+    minimumFractionDigits: 2,
+  });
+}
+
+function formatStatBalance(value: number | string | undefined): string {
+  if (value == null || value === '') return '0';
+  const numericValue =
+    typeof value === 'string' ? parseFloat(value) : Number(value);
+  if (Number.isNaN(numericValue)) return '0';
+  return numericValue.toLocaleString(undefined, {
+    maximumFractionDigits: 0,
   });
 }
 
-export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
+function UserSearchIllustration({
+  glowColor,
+  logoSrc,
+  magnifierMarkup,
+}: {
+  glowColor: string;
+  logoSrc: string;
+  magnifierMarkup: string;
+}) {
+  const illustrationConfig = defaultUserSearchIllustrationConfig;
+
+  return (
+    <Box
+      className="user-search-gnel"
+      sx={{
+        '@keyframes qortalFloat': {
+          '0%, 100%': { transform: 'translateY(0px)' },
+          '50%': { transform: 'translateY(-6px)' },
+        },
+        '@keyframes qortalFloatLens': {
+          '0%, 100%': {
+            transform: `translateY(0px) rotate(${illustrationConfig.lensAngleOffset}deg) scale(1.03)`,
+          },
+          '50%': {
+            transform: `translateY(-6px) rotate(${illustrationConfig.lensAngleOffset}deg) scale(1.03)`,
+          },
+        },
+        '@keyframes magnifierDrift': {
+          '0%, 100%': {
+            transform: 'rotate(-20deg) translateY(0px) translateX(0px)',
+          },
+          '50%': {
+            transform: 'rotate(-17deg) translateY(-2px) translateX(2px)',
+          },
+        },
+        '@keyframes dotPulse': {
+          '0%, 100%': { opacity: 0.16, transform: 'scale(1)' },
+          '50%': { opacity: 0.42, transform: 'scale(1.18)' },
+        },
+        '--user-search-mag-left': {
+          xs: `${104 + illustrationConfig.magnifierX}px`,
+          md: `${112 + illustrationConfig.magnifierX}px`,
+        },
+        '--user-search-mag-top': {
+          xs: `${12 + illustrationConfig.magnifierY}px`,
+          md: `${10 + illustrationConfig.magnifierY}px`,
+        },
+        '--user-search-mag-size': '154px',
+        '--user-search-logo-left': { xs: '58px', md: '66px' },
+        '--user-search-logo-top': { xs: '14px', md: '12px' },
+        '--user-search-logo-size': { xs: '96px', md: '106px' },
+        color: glowColor,
+        height: { xs: 182, md: 196 },
+        position: 'relative',
+        width: { xs: 232, md: 248 },
+        '&::before': {
+          background: `radial-gradient(circle, ${alpha(glowColor, 0.16)} 0%, ${alpha(
+            glowColor,
+            0.08
+          )} 30%, transparent 74%)`,
+          borderRadius: '50%',
+          content: '""',
+          height: { xs: 136, md: 146 },
+          left: { xs: 52, md: 60 },
+          position: 'absolute',
+          top: { xs: 12, md: 10 },
+          width: { xs: 136, md: 146 },
+          zIndex: 0,
+        },
+        '& .user-search-gnel__magnifier': {
+          animation: 'magnifierDrift 4.8s ease-in-out infinite',
+          filter: `drop-shadow(0 0 18px ${alpha(glowColor, 0.18)})`,
+          height: 'var(--user-search-mag-size)',
+          left: 'var(--user-search-mag-left)',
+          opacity: 0.95,
+          position: 'absolute',
+          top: 'var(--user-search-mag-top)',
+          transform: 'rotate(-20deg)',
+          transformOrigin: '50% 50%',
+          zIndex: 3,
+          width: 'var(--user-search-mag-size)',
+          '& svg': {
+            display: 'block',
+            height: '100%',
+            width: '100%',
+          },
+        },
+        '& .user-search-gnel__logo': {
+          animation: 'qortalFloat 3.6s ease-in-out infinite',
+          filter: `drop-shadow(0 0 14px ${alpha(glowColor, 0.24)})`,
+          height: 'var(--user-search-logo-size)',
+          left: 'var(--user-search-logo-left)',
+          pointerEvents: 'none',
+          position: 'absolute',
+          top: 'var(--user-search-logo-top)',
+          zIndex: 1,
+          width: 'var(--user-search-logo-size)',
+        },
+        '& .user-search-gnel__lens-logo': {
+          animation: 'magnifierDrift 4.8s ease-in-out infinite',
+          clipPath: 'circle(28px at 56px 55px)',
+          height: 'var(--user-search-mag-size)',
+          left: 'var(--user-search-mag-left)',
+          overflow: 'hidden',
+          pointerEvents: 'none',
+          position: 'absolute',
+          top: 'var(--user-search-mag-top)',
+          transform: 'rotate(-20deg)',
+          transformOrigin: '50% 50%',
+          width: 'var(--user-search-mag-size)',
+          zIndex: 2,
+        },
+        '& .user-search-gnel__lens-logo img': {
+          animation: 'qortalFloatLens 3.6s ease-in-out infinite',
+          filter: `brightness(1.08) drop-shadow(0 0 10px ${alpha(glowColor, 0.18)})`,
+          height: 'calc(var(--user-search-logo-size) * 1.03)',
+          left: `calc(var(--user-search-logo-left) - var(--user-search-mag-left) + ${illustrationConfig.lensOffsetX}px)`,
+          position: 'absolute',
+          top: `calc(var(--user-search-logo-top) - var(--user-search-mag-top) + ${illustrationConfig.lensOffsetY}px)`,
+          transformOrigin: 'center center',
+          width: 'calc(var(--user-search-logo-size) * 1.03)',
+        },
+        '& .user-search-gnel__lens-glass': {
+          backdropFilter: 'brightness(1.06)',
+          background: 'radial-gradient(circle at 42% 36%, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 58%, rgba(255,255,255,0.01) 100%)',
+          borderRadius: '50%',
+          height: 56,
+          left: 28,
+          position: 'absolute',
+          top: 27,
+          width: 56,
+        },
+        '& .user-search-gnel__dots': {
+          display: 'flex',
+          gap: '6px',
+          left: { xs: 118, md: 128 },
+          pointerEvents: 'none',
+          position: 'absolute',
+          top: { xs: 70, md: 68 },
+          zIndex: 4,
+        },
+        '& .user-search-gnel__dots span': {
+          animation: 'dotPulse 1.8s ease-in-out infinite',
+          background: 'currentColor',
+          borderRadius: '50%',
+          height: 3,
+          opacity: 0.22,
+          width: 3,
+        },
+        '& .user-search-gnel__dots span:nth-of-type(2)': {
+          animationDelay: '0.15s',
+        },
+        '& .user-search-gnel__dots span:nth-of-type(3)': {
+          animationDelay: '0.3s',
+        },
+        '& .user-search-gnel__dots span:nth-of-type(4)': {
+          animationDelay: '0.45s',
+        },
+        '& .user-search-gnel__dots span:nth-of-type(5)': {
+          animationDelay: '0.6s',
+        },
+      }}
+    >
+      <Box
+        className="user-search-gnel__magnifier"
+        dangerouslySetInnerHTML={{ __html: magnifierMarkup }}
+      />
+
+      <Box
+        className="user-search-gnel__logo"
+        component="img"
+        alt=""
+        src={logoSrc}
+      />
+
+      <Box className="user-search-gnel__lens-logo" aria-hidden>
+        <Box className="user-search-gnel__lens-glass" />
+        <Box component="img" alt="" src={logoSrc} />
+      </Box>
+
+      <Box className="user-search-gnel__dots">
+        <span />
+        <span />
+        <span />
+        <span />
+        <span />
+      </Box>
+      </Box>
+    );
+}
+
+export const UserLookup = ({
+  isOpenDrawerLookup,
+  setIsOpenDrawerLookup,
+}: UserLookupProps) => {
   const theme = useTheme();
   const { t } = useTranslation([
     'auth',
@@ -76,58 +341,115 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
     'question',
     'tutorial',
   ]);
+  const currentUser = useAtomValue(userInfoAtom);
+  const isRunningPublicNode = useAtomValue(isRunningPublicNodeAtom);
+  const setInfoSnack = useSetAtom(infoSnackGlobalAtom);
+  const setOpenSnack = useSetAtom(openSnackGlobalAtom);
+  const { addToBlockList, isUserBlocked, removeBlockFromList } =
+    useBlockedAddresses(true);
+
   const [nameOrAddress, setNameOrAddress] = useState('');
   const [inputValue, setInputValue] = useState('');
   const { results, isLoading } = useNameSearch(inputValue);
-  const options = useMemo(() => {
-    const isAddress = validateAddress(inputValue);
-    if (isAddress) return [inputValue];
-    return results?.map((item) => item.name);
-  }, [results, inputValue]);
   const [errorMessage, setErrorMessage] = useState('');
-  const [addressInfo, setAddressInfo] = useState<any>(null);
+  const [addressInfo, setAddressInfo] = useState<AddressInfoResult | null>(null);
   const [nodeStatus, setNodeStatus] = useState<any>(null);
   const [adminInfo, setAdminInfo] = useState<any>(null);
   const [nodeHeightBlock, setNodeHeightBlock] = useState<any>(null);
   const [isLoadingUser, setIsLoadingUser] = useState(false);
   const [isLoadingPayments, setIsLoadingPayments] = useState(false);
   const [payments, setPayments] = useState<any[]>([]);
-  const [totalPaymentsCount, setTotalPaymentsCount] = useState<number>(0);
+  const [totalPaymentsCount, setTotalPaymentsCount] = useState(0);
   const [paymentsPage, setPaymentsPage] = useState(0);
   const [paymentsRowsPerPage, setPaymentsRowsPerPage] = useState(5);
   const [addressNamesMap, setAddressNamesMap] = useState<
-    Record<string, { name: string | null; loading: boolean }>
+    Record<string, AddressNameEntry>
   >({});
-  const [lookupHistory, setLookupHistory] = useState<{
-    history: string[];
-    index: number;
-  }>({ history: [], index: -1 });
-
-  const tRef = useRef(t);
-  tRef.current = t;
-  const lookupInProgressRef = useRef(false);
-  const lastFetchedOwnerRef = useRef<string | null>(null);
-  const hoverNameTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(
-    null
+    const [lookupHistory, setLookupHistory] = useState<LookupHistoryState>({
+      history: [],
+      index: -1,
+    });
+    const [isBlockActionPending, setIsBlockActionPending] = useState(false);
+
+    const tRef = useRef(t);
+    tRef.current = t;
+    const lookupInProgressRef = useRef(false);
+    const lastFetchedOwnerRef = useRef<string | null>(null);
+
+  const currentUserName =
+    typeof currentUser?.name === 'string' && currentUser.name.trim().length > 0
+      ? currentUser.name.trim()
+      : '';
+  const currentUserAddress =
+    typeof currentUser?.address === 'string' ? currentUser.address : '';
+  const targetUserName =
+    typeof addressInfo?.name === 'string' ? addressInfo.name.trim() : '';
+  const isCurrentUserProfile =
+    !!addressInfo?.address &&
+    (addressInfo.address === currentUserAddress ||
+      (targetUserName && targetUserName === currentUserName));
+  const isBlocked =
+    !!addressInfo?.address && isUserBlocked(addressInfo.address);
+
+  const lookupOptions = useMemo(() => {
+    if (!inputValue.trim()) {
+      return results?.map((item) => item.name) ?? [];
+    }
+
+    if (validateAddress(inputValue)) {
+      return [inputValue];
+    }
+
+    return results?.map((item) => item.name) ?? [];
+  }, [inputValue, results]);
+
+  const pushSnack = useCallback(
+    (type: 'error' | 'info' | 'success', message: string) => {
+      setInfoSnack({ compact: true, duration: 3200, message, type });
+      setOpenSnack(true);
+    },
+    [setInfoSnack, setOpenSnack]
   );
 
-  const HOVER_DELAY_MS = 750;
+  const resetLookupState = useCallback(() => {
+    setNameOrAddress('');
+    setInputValue('');
+    setErrorMessage('');
+    setPayments([]);
+    setTotalPaymentsCount(0);
+    setNodeStatus(null);
+    setAdminInfo(null);
+    setNodeHeightBlock(null);
+    setPaymentsPage(0);
+    setIsLoadingUser(false);
+    setIsLoadingPayments(false);
+    setAddressInfo(null);
+    setAddressNamesMap({});
+    setLookupHistory({ history: [], index: -1 });
+    setIsBlockActionPending(false);
+    lastFetchedOwnerRef.current = null;
+  }, []);
+
+  const closeLookup = useCallback(() => {
+    setIsOpenDrawerLookup(false);
+    resetLookupState();
+  }, [resetLookupState, setIsOpenDrawerLookup]);
 
   const lookupFunc = useCallback(
     async (
-      messageAddressOrName: string,
+      requestedAddressOrName: string,
       options?: { skipHistoryPush?: boolean }
     ) => {
-      const inputAddressOrName = (
-        messageAddressOrName ?? nameOrAddress
-      )?.trim();
-      if (!inputAddressOrName) {
+      const lookupInput = requestedAddressOrName.trim();
+      if (!lookupInput || lookupInProgressRef.current) {
         return;
       }
-      if (lookupInProgressRef.current) return;
+
       lookupInProgressRef.current = true;
+
       try {
-        const owner = await getNameOrAddress(inputAddressOrName);
+        const owner = await getNameOrAddress(lookupInput);
+
         if (!owner) {
           throw new Error(
             tRef.current('auth:message.error.name_not_existing', {
@@ -135,17 +457,17 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
             })
           );
         }
-        if (
-          !options?.skipHistoryPush &&
-          lastFetchedOwnerRef.current === owner
-        ) {
+
+        if (!options?.skipHistoryPush && lastFetchedOwnerRef.current === owner) {
           lookupInProgressRef.current = false;
           return;
         }
+
         lastFetchedOwnerRef.current = owner;
 
         setErrorMessage('');
         setIsLoadingUser(true);
+        setIsLoadingPayments(true);
         setPayments([]);
         setTotalPaymentsCount(0);
         setAddressInfo(null);
@@ -154,139 +476,165 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
         setNodeHeightBlock(null);
         setPaymentsPage(0);
 
-        const addressInfoRes = await getAddressInfo(owner);
-        if (!addressInfoRes?.publicKey) {
+        const addressInfoResponse = await getAddressInfo(owner);
+
+        if (!addressInfoResponse?.publicKey) {
           throw new Error(
             tRef.current('auth:message.error.address_not_existing', {
               postProcess: 'capitalizeFirstChar',
             })
           );
         }
-        const isAddress = validateAddress(messageAddressOrName);
-        const name = !isAddress
-          ? messageAddressOrName
+
+        const isAddressSearch = validateAddress(lookupInput);
+        const registeredName = !isAddressSearch
+          ? lookupInput
           : await getNameInfo(owner);
         const baseUrl = getBaseApiReact();
-        const balanceRes = await fetch(`${baseUrl}/addresses/balance/${owner}`);
-        const balanceData = await balanceRes.json();
+
+        const balanceResponse = await fetch(`${baseUrl}/addresses/balance/${owner}`);
+        const balance = await balanceResponse.json();
+
         setAddressInfo({
-          ...addressInfoRes,
-          balance: balanceData,
-          name,
+          ...addressInfoResponse,
+          address: owner,
+          balance,
+          name: registeredName,
         });
-        setIsLoadingUser(false);
 
         if (!options?.skipHistoryPush) {
-          setLookupHistory((prev) => {
-            const truncated = prev.history.slice(0, prev.index + 1);
-            truncated.push(owner);
-            const maxLen = 50;
-            const history =
-              truncated.length > maxLen ? truncated.slice(-maxLen) : truncated;
-            return { history, index: history.length - 1 };
+          setLookupHistory((previous) => {
+            const nextHistory = previous.history.slice(0, previous.index + 1);
+            nextHistory.push(owner);
+            const boundedHistory =
+              nextHistory.length > 50 ? nextHistory.slice(-50) : nextHistory;
+            return {
+              history: boundedHistory,
+              index: boundedHistory.length - 1,
+            };
           });
         }
 
-        // Node status for level progress (remaining blocks / days)
         try {
-          const statusRes = await fetch(`${baseUrl}/admin/status`);
-          if (statusRes.ok) {
-            const statusData = await statusRes.json();
-            setNodeStatus(statusData);
-            if (statusData?.height != null) {
-              const blockHeight = statusData.height - 1440;
-              const blockRes = await fetch(
+          const statusResponse = await fetch(`${baseUrl}/admin/status`);
+          if (statusResponse.ok) {
+            const nextNodeStatus = await statusResponse.json();
+            setNodeStatus(nextNodeStatus);
+
+            if (nextNodeStatus?.height != null) {
+              const blockHeight = nextNodeStatus.height - 1440;
+              const blockResponse = await fetch(
                 `${baseUrl}/blocks/byheight/${blockHeight}`
               );
-              if (blockRes.ok) {
-                setNodeHeightBlock(await blockRes.json());
+              if (blockResponse.ok) {
+                setNodeHeightBlock(await blockResponse.json());
               }
-              const adminRes = await fetch(`${baseUrl}/admin/info`);
-              if (adminRes.ok) {
-                setAdminInfo(await adminRes.json());
+
+              const adminResponse = await fetch(`${baseUrl}/admin/info`);
+              if (adminResponse.ok) {
+                setAdminInfo(await adminResponse.json());
               }
             }
           }
-        } catch (_) {
+        } catch {
           // non-fatal
         }
 
-        setIsLoadingPayments(true);
-        try {
-          const paymentsRes = await fetch(
-            `${baseUrl}/transactions/search?txType=PAYMENT&address=${owner}&confirmationStatus=CONFIRMED&limit=500&reverse=true`
-          );
-          const paymentsData = await paymentsRes.json();
-          const list = Array.isArray(paymentsData) ? paymentsData : [];
-          setPayments(list);
-          setTotalPaymentsCount(list.length);
-        } finally {
-          setIsLoadingPayments(false);
-        }
-      } catch (error) {
-        setErrorMessage(error?.message);
-        console.error(error);
+        const paymentsResponse = await fetch(
+          `${baseUrl}/transactions/search?txType=PAYMENT&address=${owner}&confirmationStatus=CONFIRMED&limit=500&reverse=true`
+        );
+        const paymentsData = await paymentsResponse.json();
+        const nextPayments = Array.isArray(paymentsData) ? paymentsData : [];
+        setPayments(nextPayments);
+        setTotalPaymentsCount(nextPayments.length);
+      } catch (error: any) {
+        setErrorMessage(
+          error?.message ||
+            tRef.current('core:account_lookup.error_lookup_failed', {
+              postProcess: 'capitalizeFirstChar',
+            }),
+        );
       } finally {
+        lookupInProgressRef.current = false;
         setIsLoadingUser(false);
         setIsLoadingPayments(false);
-        lookupInProgressRef.current = false;
       }
     },
-    [nameOrAddress]
+    []
   );
 
   const fetchNameForAddress = useCallback((address: string) => {
     if (!address) return;
-    setAddressNamesMap((prev) => {
-      const existing = prev[address];
-      if (existing) return prev;
-      return { ...prev, [address]: { name: null, loading: true } };
+
+    setAddressNamesMap((previous) => {
+      const existing = previous[address];
+      if (existing) {
+        return previous;
+      }
+      return {
+        ...previous,
+        [address]: { loading: true, name: null },
+      };
     });
+
     getNameInfo(address)
       .then((name) => {
-        setAddressNamesMap((prev) => ({
-          ...prev,
-          [address]: { name: name || null, loading: false },
+        setAddressNamesMap((previous) => ({
+          ...previous,
+          [address]: { loading: false, name: name || null },
         }));
       })
       .catch(() => {
-        setAddressNamesMap((prev) => ({
-          ...prev,
-          [address]: { name: null, loading: false },
+        setAddressNamesMap((previous) => ({
+          ...previous,
+          [address]: { loading: false, name: null },
         }));
       });
   }, []);
 
-  const scheduleFetchNameForAddress = useCallback(
-    (address: string) => {
-      if (hoverNameTimeoutRef.current) {
-        clearTimeout(hoverNameTimeoutRef.current);
-        hoverNameTimeoutRef.current = null;
+  useEffect(() => {
+    const addressesToResolve = new Set<string>();
+    const currentProfileAddress = addressInfo?.address;
+
+    for (const payment of payments.slice(
+      paymentsPage * paymentsRowsPerPage,
+      paymentsPage * paymentsRowsPerPage + paymentsRowsPerPage
+    )) {
+      if (
+        payment?.creatorAddress &&
+        payment.creatorAddress !== currentProfileAddress &&
+        !addressNamesMap[payment.creatorAddress]
+      ) {
+        addressesToResolve.add(payment.creatorAddress);
       }
-      if (!address) return;
-      hoverNameTimeoutRef.current = setTimeout(() => {
-        fetchNameForAddress(address);
-        hoverNameTimeoutRef.current = null;
-      }, HOVER_DELAY_MS);
-    },
-    [fetchNameForAddress]
-  );
 
-  const cancelFetchNameForAddress = useCallback(() => {
-    if (hoverNameTimeoutRef.current) {
-      clearTimeout(hoverNameTimeoutRef.current);
-      hoverNameTimeoutRef.current = null;
+      if (
+        payment?.recipient &&
+        payment.recipient !== currentProfileAddress &&
+        !addressNamesMap[payment.recipient]
+      ) {
+        addressesToResolve.add(payment.recipient);
+      }
     }
-  }, []);
+
+    addressesToResolve.forEach(fetchNameForAddress);
+  }, [
+    addressInfo?.address,
+    addressNamesMap,
+    fetchNameForAddress,
+    payments,
+    paymentsPage,
+    paymentsRowsPerPage,
+  ]);
 
   const openUserLookupDrawerFunc = useCallback(
-    (e) => {
+    (event: CustomEvent) => {
       setIsOpenDrawerLookup(true);
-      const message = e.detail?.addressOrName;
-      if (message) {
-        setNameOrAddress(message);
-        setInputValue(message);
-        lookupFunc(message);
+      const requestedAddressOrName = event.detail?.addressOrName;
+      if (requestedAddressOrName) {
+        setNameOrAddress(requestedAddressOrName);
+        setInputValue(requestedAddressOrName);
+        void lookupFunc(requestedAddressOrName);
       }
     },
     [lookupFunc, setIsOpenDrawerLookup]
@@ -301,54 +649,118 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
   }, [openUserLookupDrawerFunc]);
 
   const goBack = useCallback(() => {
-    const { history, index } = lookupHistory;
-    if (index <= 0) return;
-    const prevAddress = history[index - 1];
+    const previousIndex = lookupHistory.index - 1;
+    if (previousIndex < 0) {
+      return;
+    }
+
+    const previousAddress = lookupHistory.history[previousIndex];
     lastFetchedOwnerRef.current = null;
-    setNameOrAddress(prevAddress);
-    setInputValue(prevAddress);
-    setLookupHistory((prev) => ({ ...prev, index: prev.index - 1 }));
-    lookupFunc(prevAddress, { skipHistoryPush: true });
-  }, [lookupHistory, lookupFunc]);
+    setNameOrAddress(previousAddress);
+    setInputValue(previousAddress);
+    setLookupHistory((previous) => ({ ...previous, index: previousIndex }));
+    void lookupFunc(previousAddress, { skipHistoryPush: true });
+  }, [lookupFunc, lookupHistory.history, lookupHistory.index]);
 
   const goForward = useCallback(() => {
-    const { history, index } = lookupHistory;
-    if (index >= history.length - 1 || index < 0) return;
-    const nextAddress = history[index + 1];
+    const nextIndex = lookupHistory.index + 1;
+    if (nextIndex >= lookupHistory.history.length) {
+      return;
+    }
+
+    const nextAddress = lookupHistory.history[nextIndex];
     lastFetchedOwnerRef.current = null;
     setNameOrAddress(nextAddress);
     setInputValue(nextAddress);
-    setLookupHistory((prev) => ({ ...prev, index: prev.index + 1 }));
-    lookupFunc(nextAddress, { skipHistoryPush: true });
-  }, [lookupHistory, lookupFunc]);
+    setLookupHistory((previous) => ({ ...previous, index: nextIndex }));
+    void lookupFunc(nextAddress, { skipHistoryPush: true });
+  }, [lookupFunc, lookupHistory.history, lookupHistory.index]);
 
-  const canGoBack = lookupHistory.history.length > 0 && lookupHistory.index > 0;
-  const canGoForward =
-    lookupHistory.history.length > 0 &&
-    lookupHistory.index >= 0 &&
-    lookupHistory.index < lookupHistory.history.length - 1;
+  const handleSearchSubmit = useCallback(() => {
+    if (!inputValue.trim()) {
+      return;
+    }
 
-  const onClose = () => {
-    setIsOpenDrawerLookup(false);
-    setNameOrAddress('');
-    setInputValue('');
-    setErrorMessage('');
-    setPayments([]);
-    setTotalPaymentsCount(0);
-    setNodeStatus(null);
-    setAdminInfo(null);
-    setNodeHeightBlock(null);
-    setPaymentsPage(0);
-    setIsLoadingUser(false);
-    setIsLoadingPayments(false);
-    setAddressInfo(null);
-    lastFetchedOwnerRef.current = null;
-    setLookupHistory({ history: [], index: -1 });
-  };
+    setNameOrAddress(inputValue.trim());
+    void lookupFunc(inputValue.trim());
+  }, [inputValue, lookupFunc]);
+
+  const handleCopyAddress = useCallback(() => {
+    if (!addressInfo?.address) {
+      return;
+    }
+
+    navigator.clipboard.writeText(addressInfo.address);
+    pushSnack(
+      'success',
+      t('tutorial:home.address_copied', {
+        postProcess: 'capitalizeFirstChar',
+      }),
+    );
+  }, [addressInfo?.address, pushSnack, t]);
+
+  const handleToggleBlock = useCallback(async () => {
+    if (!addressInfo?.address || isCurrentUserProfile || isRunningPublicNode) {
+      return;
+    }
+
+    setIsBlockActionPending(true);
+
+    try {
+      if (isBlocked) {
+        await removeBlockFromList(addressInfo.address, targetUserName);
+        pushSnack(
+          'success',
+          t('auth:action.unblock_name', {
+            postProcess: 'capitalizeFirstChar',
+          })
+        );
+      } else {
+        await addToBlockList(addressInfo.address, targetUserName);
+        pushSnack(
+          'success',
+          t('auth:action.block_name', {
+            postProcess: 'capitalizeFirstChar',
+          })
+        );
+      }
+    } catch (error: any) {
+      pushSnack(
+        'error',
+        error?.message ||
+          t('auth:message.error.block_user', {
+            postProcess: 'capitalizeFirstChar',
+          })
+      );
+    } finally {
+      setIsBlockActionPending(false);
+    }
+  }, [
+    addToBlockList,
+    addressInfo?.address,
+    isBlocked,
+    isCurrentUserProfile,
+    isRunningPublicNode,
+    pushSnack,
+    removeBlockFromList,
+    t,
+    targetUserName,
+  ]);
+
+  const handleSendQort = useCallback(() => {
+    if (!addressInfo?.address) {
+      return;
+    }
+
+    executeEvent('openPaymentInternal', {
+      address: addressInfo.address,
+      name: addressInfo.name,
+    });
+    closeLookup();
+  }, [addressInfo?.address, addressInfo?.name, closeLookup]);
 
   const currentBlocks =
-    (addressInfo?.blocksMinted ?? 0) +
-    (addressInfo?.blocksMintedAdjustment ?? 0);
+    (addressInfo?.blocksMinted ?? 0) + (addressInfo?.blocksMintedAdjustment ?? 0);
   const targetBlocks =
     addressInfo?.level != null
       ? accountTargetBlocks(addressInfo.level)
@@ -367,971 +779,1299 @@ export const UserLookup = ({ isOpenDrawerLookup, setIsOpenDrawerLookup }) => {
     addressInfo && nodeStatus && adminInfo && nodeHeightBlock
       ? levelUpDays(addressInfo, adminInfo, nodeHeightBlock, nodeStatus)
       : undefined;
-  const nextLevelNum =
+  const nextLevelNumber =
     addressInfo?.level != null ? nextLevel(addressInfo.level) : undefined;
 
-  const paginatedPayments = useMemo(() => {
-    const start = paymentsPage * paymentsRowsPerPage;
-    return payments.slice(start, start + paymentsRowsPerPage);
-  }, [payments, paymentsPage, paymentsRowsPerPage]);
-
   const { totalReceived, totalSent } = useMemo(() => {
-    const owner = addressInfo?.address;
-    if (!owner || !payments.length) {
-      return { totalReceived: undefined, totalSent: undefined };
+    const ownerAddress = addressInfo?.address;
+
+    if (!ownerAddress || payments.length === 0) {
+      return {
+        totalReceived: undefined,
+        totalSent: undefined,
+      };
     }
+
     let received = 0;
     let sent = 0;
-    for (const tx of payments) {
-      const amount = parseFloat(tx?.amount ?? '0') || 0;
-      if (tx?.recipient === owner) received += amount;
-      if (tx?.creatorAddress === owner) sent += amount;
+
+    for (const payment of payments) {
+      const amount = parseFloat(payment?.amount ?? '0') || 0;
+      if (payment?.recipient === ownerAddress) {
+        received += amount;
+      }
+      if (payment?.creatorAddress === ownerAddress) {
+        sent += amount;
+      }
     }
-    return { totalReceived: received, totalSent: sent };
+
+    return {
+      totalReceived: received,
+      totalSent: sent,
+    };
   }, [addressInfo?.address, payments]);
 
-  if (!isOpenDrawerLookup) return null;
+  const paginatedPayments = useMemo(() => {
+    const startIndex = paymentsPage * paymentsRowsPerPage;
+    return payments.slice(startIndex, startIndex + paymentsRowsPerPage);
+  }, [payments, paymentsPage, paymentsRowsPerPage]);
+
+  const canGoBack = lookupHistory.index > 0;
+  const canGoForward =
+    lookupHistory.index >= 0 && lookupHistory.index < lookupHistory.history.length - 1;
+  const isEmptyLookupState = !errorMessage && !isLoadingUser && !addressInfo;
+
+  const surfaceBorder = alpha(theme.palette.divider, 0.42);
+  const dividerColor = alpha(
+    theme.palette.common.white,
+    theme.palette.mode === 'dark' ? 0.04 : 0.07
+  );
+  const summarySurface = theme.palette.mode === 'dark'
+    ? 'linear-gradient(180deg, rgba(23,27,35,0.98) 0%, rgba(17,20,27,0.985) 100%)'
+    : 'linear-gradient(180deg, rgba(248,250,253,0.985) 0%, rgba(241,245,250,0.99) 100%)';
+  const sectionSurface = alpha(
+    theme.palette.mode === 'dark'
+      ? theme.palette.common.white
+      : theme.palette.text.primary,
+    theme.palette.mode === 'dark' ? 0.026 : 0.036
+  );
+  const softSectionSurface = alpha(
+    theme.palette.mode === 'dark'
+      ? theme.palette.common.white
+      : theme.palette.text.primary,
+    theme.palette.mode === 'dark' ? 0.018 : 0.028
+  );
+  const sectionLabelSx = {
+    color: alpha(theme.palette.text.secondary, 0.64),
+    display: 'block',
+    fontSize: '0.68rem',
+    fontWeight: 700,
+    letterSpacing: '0.11em',
+    lineHeight: 1.1,
+    textTransform: 'uppercase',
+  } as const;
+  const helperNoteSx = {
+    color: alpha(theme.palette.text.secondary, 0.8),
+    fontSize: '0.84rem',
+    lineHeight: 1.55,
+  } as const;
+  const silkyActionBackground =
+    theme.palette.mode === 'dark'
+      ? 'linear-gradient(180deg, rgba(144,184,244,0.985) 0%, rgba(118,160,227,0.985) 100%)'
+      : 'linear-gradient(180deg, rgba(125,168,235,0.985) 0%, rgba(98,145,220,0.985) 100%)';
+  const silkyDangerBackground =
+    theme.palette.mode === 'dark'
+      ? 'linear-gradient(180deg, rgba(244,143,143,0.985) 0%, rgba(221,92,92,0.985) 100%)'
+      : 'linear-gradient(180deg, rgba(230,120,120,0.985) 0%, rgba(208,82,82,0.985) 100%)';
+  const neutralActionBackground =
+    theme.palette.mode === 'dark'
+      ? 'linear-gradient(180deg, rgba(76,84,100,0.96) 0%, rgba(58,64,77,0.96) 100%)'
+      : 'linear-gradient(180deg, rgba(197,204,216,0.98) 0%, rgba(176,184,198,0.98) 100%)';
+
+  const createSilkyActionButtonSx = (
+    background: string,
+    textColor: string,
+    shadow: string,
+    disabledBackground = neutralActionBackground,
+    disabledTextColor = alpha(
+      theme.palette.mode === 'dark' ? '#E7ECF7' : '#243247',
+      0.7
+    )
+  ) => ({
+    background,
+    border: `1px solid ${alpha(theme.palette.common.white, 0.18)}`,
+    borderRadius: '10px',
+    boxShadow: shadow,
+    color: textColor,
+    fontSize: '0.78rem',
+    fontWeight: 700,
+    gap: 0.7,
+    justifyContent: 'center',
+    letterSpacing: '0.01em',
+    minHeight: 40,
+    px: 1.35,
+    textAlign: 'center',
+    textTransform: 'none',
+    whiteSpace: 'nowrap',
+    '& .MuiButton-startIcon': {
+      marginLeft: 0,
+      marginRight: 0,
+    },
+    '& .MuiSvgIcon-root': {
+      fontSize: '1rem',
+    },
+    '&.Mui-disabled': {
+      background: disabledBackground,
+      borderColor: alpha(theme.palette.common.white, 0.12),
+      color: disabledTextColor,
+      boxShadow:
+        theme.palette.mode === 'dark'
+          ? 'inset 0 1px 0 rgba(255,255,255,0.08), 0 6px 18px rgba(18,22,31,0.16)'
+          : 'inset 0 1px 0 rgba(255,255,255,0.2), 0 6px 18px rgba(117,127,144,0.12)',
+      opacity: 1,
+    },
+  });
+
+  const sendActionButtonSx = createSilkyActionButtonSx(
+    silkyActionBackground,
+    theme.palette.mode === 'dark' ? '#0F1725' : '#F8FBFF',
+    theme.palette.mode === 'dark'
+      ? 'inset 0 1px 0 rgba(255,255,255,0.16), 0 10px 24px rgba(59,98,168,0.18)'
+      : 'inset 0 1px 0 rgba(255,255,255,0.3), 0 10px 22px rgba(82,126,201,0.16)',
+    neutralActionBackground
+  );
+
+  const blockActionButtonSx = createSilkyActionButtonSx(
+    silkyDangerBackground,
+    '#FFF6F6',
+    theme.palette.mode === 'dark'
+      ? 'inset 0 1px 0 rgba(255,255,255,0.14), 0 10px 24px rgba(135,40,40,0.22)'
+      : 'inset 0 1px 0 rgba(255,255,255,0.28), 0 10px 22px rgba(170,56,56,0.18)',
+    neutralActionBackground,
+    alpha(theme.palette.mode === 'dark' ? '#D9DFEA' : '#314055', 0.78)
+  );
+
+  const displayStatRows = [
+    {
+      label: t('core:balance', { postProcess: 'capitalizeFirstChar' }),
+      value: `${formatStatBalance(addressInfo?.balance)} QORT`,
+    },
+    {
+      label: t('core:total_received', { postProcess: 'capitalizeFirstChar' }),
+      value:
+        totalReceived != null
+          ? `${formatStatBalance(totalReceived)} QORT`
+          : '\u2014',
+    },
+    {
+      label: t('core:total_sent', { postProcess: 'capitalizeFirstChar' }),
+      value:
+        totalSent != null
+          ? `${formatStatBalance(totalSent)} QORT`
+          : '\u2014',
+    },
+    {
+      label: t('core:total_blocks_minted', {
+        postProcess: 'capitalizeFirstChar',
+      }),
+      value: currentBlocks.toLocaleString(),
+    },
+  ];
+
+  const renderActionButton = (
+    button: React.ReactNode,
+    tooltip?: string,
+    disabled?: boolean
+  ) => {
+    if (!tooltip) {
+      return button;
+    }
+
+    return (
+      <Tooltip title={tooltip}>
+        <Box component="span" sx={{ width: '100%' }}>
+          {button}
+        </Box>
+      </Tooltip>
+    );
+  };
+
+  const profileActionButtons = (
+    <>
+      {renderActionButton(
+        <Button
+          fullWidth
+          variant="contained"
+          onClick={handleSendQort}
+          disabled={isCurrentUserProfile}
+          startIcon={<NorthEastRoundedIcon />}
+          sx={sendActionButtonSx}
+        >
+          {t('core:action.send_qort', { postProcess: 'capitalizeFirstChar' })}
+        </Button>,
+        isCurrentUserProfile
+          ? t('core:account_lookup.tooltip_send_disabled')
+          : undefined
+      )}
+
+      {renderActionButton(
+        <Button
+          fullWidth
+          variant="contained"
+          onClick={handleToggleBlock}
+          startIcon={
+            isBlockActionPending ? (
+              <CircularProgress color="inherit" size={16} />
+            ) : (
+              <PersonOffRoundedIcon />
+            )
+          }
+          disabled={
+            isCurrentUserProfile ||
+            isRunningPublicNode ||
+            isBlockActionPending ||
+            !addressInfo?.address
+          }
+          sx={blockActionButtonSx}
+        >
+          {isBlocked
+            ? t('core:account_lookup.action_unblock', {
+                postProcess: 'capitalizeFirstChar',
+              })
+            : t('core:account_lookup.action_block', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+        </Button>,
+        isRunningPublicNode
+          ? t('core:account_lookup.tooltip_block_public_node')
+          : isCurrentUserProfile
+            ? t('core:account_lookup.tooltip_block_self')
+            : undefined,
+        isRunningPublicNode || isCurrentUserProfile
+      )}
+    </>
+  );
 
   return (
-    <Box
-      sx={{
-        backgroundColor: theme.palette.background.paper,
-        borderTopLeftRadius: 20,
-        borderTopRightRadius: 20,
-        bottom: 0,
-        boxShadow: theme.shadows[12],
-        height: `calc(100vh - ${appHeighOffsetPx})`,
-        overflow: 'hidden',
-        position: 'fixed',
-        right: 0,
-        width: '100vw',
-        zIndex: 100,
+    <Dialog
+      open={isOpenDrawerLookup}
+      onClose={closeLookup}
+      fullWidth
+      maxWidth={false}
+      slotProps={{
+        backdrop: {
+          sx: {
+            backdropFilter: 'blur(12px)',
+            backgroundColor: alpha('#07090D', 0.72),
+          },
+        },
+        paper: {
+          sx: {
+            background:
+              theme.palette.mode === 'dark'
+                ? 'linear-gradient(180deg, rgba(20,23,30,0.985) 0%, rgba(15,17,23,0.99) 100%)'
+                : 'linear-gradient(180deg, rgba(251,253,255,0.985) 0%, rgba(244,247,251,0.99) 100%)',
+            border: `1px solid ${surfaceBorder}`,
+            borderRadius: '14px',
+            boxShadow:
+              theme.palette.mode === 'dark'
+                ? '0 34px 120px rgba(0,0,0,0.46)'
+                : '0 28px 88px rgba(18,28,45,0.16)',
+            height: {
+              xs: 'calc(100vh - 32px)',
+              md: 'min(78vh, 860px)',
+              lg: 'min(74vh, 820px)',
+            },
+            margin: { xs: 2, md: 3 },
+            maxHeight: 'calc(100vh - 24px)',
+            overflow: 'hidden',
+            width: 'min(1140px, calc(100vw - 48px))',
+          },
+        },
       }}
     >
       <Box
         sx={{
-          height: '100%',
-          width: '100%',
           display: 'flex',
           flexDirection: 'column',
+          height: '100%',
+          minHeight: 0,
+          position: 'relative',
         }}
       >
         <Box
           sx={{
-            display: 'flex',
             alignItems: 'center',
-            justifyContent: 'space-between',
+            borderBottom: `1px solid ${alpha(theme.palette.divider, 0.42)}`,
+            display: 'flex',
             gap: 1,
-            px: 2,
-            py: 1.5,
-            borderBottom: 1,
-            borderColor: 'divider',
+            justifyContent: 'space-between',
+            px: { xs: 2, md: 2.75 },
+            py: 1.1,
           }}
         >
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+          <Box sx={{ alignItems: 'center', display: 'flex', gap: 0.5 }}>
             <IconButton
               onClick={goBack}
               disabled={!canGoBack}
               size="small"
-              aria-label={t('core:pagination.previous', {
-                postProcess: 'capitalizeFirstChar',
-              })}
               sx={{
                 color: canGoBack
                   ? theme.palette.text.primary
                   : theme.palette.text.disabled,
-                '&:hover': canGoBack
-                  ? {
-                      backgroundColor: alpha(theme.palette.action.hover, 0.5),
-                    }
-                  : {},
               }}
             >
-              <ChevronLeftIcon fontSize="small" />
+              <ArrowBackRoundedIcon fontSize="small" />
             </IconButton>
             <IconButton
               onClick={goForward}
               disabled={!canGoForward}
               size="small"
-              aria-label={t('core:pagination.next', {
-                postProcess: 'capitalizeFirstChar',
-              })}
               sx={{
                 color: canGoForward
                   ? theme.palette.text.primary
                   : theme.palette.text.disabled,
-                '&:hover': canGoForward
-                  ? {
-                      backgroundColor: alpha(theme.palette.action.hover, 0.5),
-                    }
-                  : {},
               }}
             >
-              <ChevronRightIcon fontSize="small" />
+              <ArrowForwardRoundedIcon fontSize="small" />
             </IconButton>
           </Box>
-          <Typography
-            variant="h6"
-            sx={{ fontWeight: 600, letterSpacing: '-0.02em' }}
-          >
-            {t('core:user_lookup', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Typography>
-          <IconButton
-            onClick={onClose}
-            size="small"
+
+          <Box
             sx={{
-              color: theme.palette.text.secondary,
-              '&:hover': {
-                backgroundColor: alpha(theme.palette.action.hover, 0.5),
-                color: theme.palette.text.primary,
-              },
+              alignItems: 'center',
+              display: 'flex',
+              gap: 1,
+              justifyContent: 'center',
+              minWidth: 0,
             }}
           >
-            <CloseIcon fontSize="small" />
-          </IconButton>
-        </Box>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            flexGrow: 1,
-            minHeight: 0,
-            overflow: 'auto',
-            p: 2,
-          }}
-        >
-          <Box sx={{ mb: 2 }}>
+            <SearchRoundedIcon
+              sx={{
+                color: alpha(theme.palette.primary.main, 0.9),
+                fontSize: '1.05rem',
+              }}
+            />
             <Typography
-              component="label"
-              htmlFor="user-lookup-address-name"
-              variant="body2"
-              color="text.secondary"
-              sx={{ display: 'block', mb: 1 }}
+              sx={{
+                fontSize: '1rem',
+                fontWeight: 700,
+                letterSpacing: '-0.02em',
+                lineHeight: 1.1,
+              }}
             >
-              {t('auth:address_name', {
+              {t('core:account_lookup.dialog_title', {
                 postProcess: 'capitalizeFirstChar',
               })}
             </Typography>
-            <Autocomplete
-              value={nameOrAddress}
-              onChange={(event: any, newValue: string | null) => {
-                if (!newValue) {
-                  setNameOrAddress('');
-                  return;
-                }
-                if (
-                  addressInfo &&
-                  (addressInfo.address === newValue ||
-                    addressInfo.name === newValue)
-                ) {
-                  setNameOrAddress(newValue);
-                  return;
-                }
-                setNameOrAddress(newValue);
-                lookupFunc(newValue);
-              }}
-              inputValue={inputValue}
-              onInputChange={(event, newInputValue) => {
-                setInputValue(newInputValue);
+            </Box>
+
+            <Box sx={{ alignItems: 'center', display: 'flex', gap: 0.5 }}>
+              <IconButton
+                onClick={closeLookup}
+                size="small"
+                sx={{
+                  color: theme.palette.text.secondary,
               }}
-              id="controllable-states-demo"
-              loading={isLoading}
-              noOptionsText={t('core:option_no', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-              options={options}
-              sx={{ flexGrow: 1 }}
-              renderInput={(params) => (
-                <TextField
-                  {...params}
-                  id="user-lookup-address-name"
-                  autoFocus
-                  autoComplete="off"
-                  onKeyDown={(e) => {
-                    if (e.key === 'Enter' && inputValue) {
-                      lookupFunc(inputValue);
-                    }
-                  }}
-                  variant="outlined"
-                  size="small"
-                  sx={{
-                    '& .MuiOutlinedInput-root': {
-                      borderRadius: 2,
-                      backgroundColor: theme.palette.background.default,
-                    },
-                  }}
-                />
-              )}
-            />
+            >
+              <CloseRoundedIcon fontSize="small" />
+            </IconButton>
           </Box>
+        </Box>
 
-          <Box
-            sx={{
-              display: 'flex',
-              flexDirection: 'column',
-              flexGrow: 1,
-              minHeight: 0,
-              overflow: 'auto',
-              flexShrink: 0,
-            }}
-          >
-            {!isLoadingUser && errorMessage && (
-              <Box
+        <Box
+          sx={{
+            borderBottom: `1px solid ${alpha(theme.palette.divider, 0.35)}`,
+            px: { xs: 2, md: 2.75 },
+            py: { xs: 1.05, md: 1.15 },
+          }}
+        >
+          <Autocomplete
+            freeSolo
+            value={nameOrAddress}
+            onChange={(_event, newValue) => {
+              const nextValue = typeof newValue === 'string' ? newValue.trim() : '';
+              if (!nextValue) {
+                setNameOrAddress('');
+                return;
+              }
+
+              setNameOrAddress(nextValue);
+              setInputValue(nextValue);
+              void lookupFunc(nextValue);
+            }}
+            inputValue={inputValue}
+            onInputChange={(_event, newInputValue) => {
+              setInputValue(newInputValue);
+            }}
+            loading={isLoading}
+            noOptionsText={t('core:option_no', {
+              postProcess: 'capitalizeFirstChar',
+            })}
+            options={lookupOptions}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                autoFocus
+                id="user-lookup-address-name"
+                placeholder={t('auth:message.generic.name_address', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') {
+                    event.preventDefault();
+                    handleSearchSubmit();
+                  }
+                }}
+                InputProps={{
+                  ...params.InputProps,
+                  endAdornment: (
+                    <>
+                      {isLoading ? (
+                        <CircularProgress
+                          color="inherit"
+                          size={18}
+                          sx={{ mr: 0.5 }}
+                        />
+                      ) : null}
+                      {params.InputProps.endAdornment}
+                    </>
+                  ),
+                }}
+                size="small"
                 sx={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  minHeight: 120,
-                  width: '100%',
-                  p: 2,
-                  borderRadius: 2,
-                  bgcolor: alpha(theme.palette.error.main, 0.08),
-                  border: 1,
-                  borderColor: alpha(theme.palette.error.main, 0.2),
+                  '& .MuiOutlinedInput-root': {
+                    backgroundColor: alpha(
+                      theme.palette.mode === 'dark'
+                        ? theme.palette.common.white
+                        : theme.palette.text.primary,
+                      theme.palette.mode === 'dark' ? 0.03 : 0.028
+                    ),
+                    borderRadius: '12px',
+                    boxShadow: 'none',
+                    height: 44,
+                    pr: 0.75,
+                    transition:
+                      'background-color 180ms ease, border-color 180ms ease, box-shadow 200ms ease',
+                    '& fieldset': {
+                      borderColor: alpha(
+                        theme.palette.common.white,
+                        theme.palette.mode === 'dark' ? 0.14 : 0.18
+                      ),
+                      borderWidth: '0.75px',
+                    },
+                    '&:hover fieldset': {
+                      borderColor: alpha(
+                        theme.palette.common.white,
+                        theme.palette.mode === 'dark' ? 0.18 : 0.22
+                      ),
+                    },
+                    '&.Mui-focused': {
+                      boxShadow: `inset 0 0 0 1px ${alpha(
+                        theme.palette.primary.main,
+                        theme.palette.mode === 'dark' ? 0.18 : 0.14
+                      )}`,
+                    },
+                    '&.Mui-focused fieldset': {
+                      borderColor: alpha(
+                        theme.palette.primary.main,
+                        theme.palette.mode === 'dark' ? 0.2 : 0.16
+                      ),
+                      borderWidth: '0.75px',
+                    },
+                  },
                 }}
-              >
-                <Typography color="error" variant="body2">
-                  {errorMessage}
-                </Typography>
-              </Box>
+              />
             )}
+          />
+        </Box>
 
-            {isLoadingUser && (
-              <Box
-                sx={{
+        <Box
+          sx={{
+            display: 'flex',
+            flex: '1 1 auto',
+            minHeight: 0,
+            overflowX: 'hidden',
+            overflowY: { xs: 'auto', md: 'hidden' },
+            px: { xs: 2, md: 2.75 },
+            py: { xs: 1.6, md: 2.4 },
+          }}
+        >
+          {errorMessage && !isLoadingUser ? (
+            <Box
+              sx={{
+                alignItems: 'center',
+                backgroundColor: alpha(theme.palette.error.main, 0.08),
+                border: `1px solid ${alpha(theme.palette.error.main, 0.2)}`,
+                borderRadius: '20px',
+                display: 'flex',
+                flex: 1,
+                justifyContent: 'center',
+                px: 3,
+                py: 4,
+                textAlign: 'center',
+              }}
+            >
+              <Typography color="error">{errorMessage}</Typography>
+            </Box>
+          ) : null}
+
+          {!errorMessage && isLoadingUser ? (
+            <Box
+              sx={{
+                alignItems: 'center',
+                color: theme.palette.text.secondary,
+                display: 'flex',
+                flex: 1,
+                flexDirection: 'column',
+                gap: 1.5,
+                justifyContent: 'center',
+              }}
+            >
+              <CircularProgress
+                size={42}
+                thickness={4}
+                sx={{ color: theme.palette.primary.main }}
+              />
+              <Typography variant="body2">
+                {t('core:loading.generic', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+              </Typography>
+            </Box>
+          ) : null}
+
+            {isEmptyLookupState ? (
+                <Box
+                  sx={{
+                    alignItems: 'center',
+                    backgroundColor: softSectionSurface,
+                  border: `1px solid ${alpha(theme.palette.divider, 0.26)}`,
+                  borderRadius: '12px',
                   display: 'flex',
+                  flex: 1,
                   flexDirection: 'column',
-                  alignItems: 'center',
+                  gap: { xs: 1.85, md: 2.2 },
                   justifyContent: 'center',
-                  minHeight: 200,
-                  width: '100%',
-                  gap: 2,
+                    overflow: 'hidden',
+                    px: 3,
+                    py: { xs: 5, md: 5.5 },
+                    position: 'relative',
+                    textAlign: 'center',
+                  '&::before': {
+                    background: `radial-gradient(circle at 50% 55%, ${alpha(
+                      theme.palette.primary.main,
+                      0.12
+                    )} 0%, ${alpha(theme.palette.primary.main, 0.05)} 26%, transparent 74%)`,
+                    content: '""',
+                    inset: 0,
+                    pointerEvents: 'none',
+                    position: 'absolute',
+                    zIndex: 0,
+                  },
+                  '& > *': {
+                    position: 'relative',
+                    zIndex: 1,
+                  },
                 }}
-              >
-                <CircularProgress
-                  size={40}
-                  thickness={4}
-                  sx={{ color: theme.palette.primary.main }}
+                >
+                  <UserSearchIllustration
+                    glowColor={alpha(theme.palette.primary.main, 0.92)}
+                  logoSrc={qortalLogo512}
+                  magnifierMarkup={magnifierSvg}
                 />
-                <Typography variant="body2" color="text.secondary">
-                  {t('core:loading.generic', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </Typography>
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: { xs: 0.15, md: 0.25 },
+                      mt: '-10px',
+                    }}
+                  >
+                    <Typography
+                      sx={{
+                        fontSize: { xs: '1.28rem', md: '1.38rem' },
+                        fontWeight: 800,
+                        letterSpacing: '-0.014em',
+                        lineHeight: 1.14,
+                      }}
+                    >
+                      {t('core:account_lookup.empty_title', {
+                        postProcess: 'capitalizeFirstChar',
+                      })}
+                    </Typography>
+                    <Typography
+                      sx={{
+                        color: alpha(theme.palette.text.primary, 0.76),
+                        fontSize: { xs: '0.96rem', md: '1rem' },
+                        maxWidth: '34ch',
+                        lineHeight: 1.55,
+                      }}
+                    >
+                      {t('core:account_lookup.empty_subtitle', {
+                        postProcess: 'capitalizeFirstChar',
+                      })}
+                    </Typography>
+                  </Box>
               </Box>
-            )}
+            ) : null}
 
-            {!isLoadingUser && addressInfo && (
+          {!errorMessage && !isLoadingUser && addressInfo ? (
+            <Box
+              sx={{
+                display: { xs: 'flex', md: 'grid' },
+                flex: 1,
+                flexDirection: { xs: 'column', md: 'row' },
+                gap: { xs: 1.5, md: 0 },
+                gridTemplateColumns: { md: '296px minmax(0, 1fr)' },
+                minHeight: 0,
+                overflowX: 'hidden',
+                overflowY: { xs: 'visible', md: 'hidden' },
+                width: '100%',
+              }}
+            >
               <Box
                 sx={{
+                  alignSelf: { xs: 'stretch', md: 'start' },
+                  background: summarySurface,
+                  border: `1px solid ${alpha(theme.palette.divider, 0.28)}`,
+                  borderRadius: '12px',
                   display: 'flex',
-                  flexDirection: 'row',
-                  flex: 1,
-                  gap: 0,
-                  minHeight: 0,
+                  flexShrink: 0,
+                  flexDirection: 'column',
+                  gap: 1.35,
+                  justifySelf: { md: 'start' },
+                  minWidth: 0,
                   overflow: 'hidden',
+                  p: 1.7,
+                  width: { xs: '100%', md: 'min(100%, 284px)' },
                 }}
               >
-                {/* Left panel: name, avatar, level progress */}
-                <Card
+                <Box
                   sx={{
-                    alignItems: 'center',
-                    background: alpha(theme.palette.background.default, 0.6),
-                    borderRadius: 3,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    flexShrink: 0,
-                    minWidth: 280,
-                    p: 3,
-                    width: 280,
-                    boxShadow: theme.shadows[2],
-                    border: 1,
-                    borderColor: alpha(theme.palette.divider, 0.5),
+                    display: 'grid',
+                    gap: 1.15,
+                    minWidth: 0,
                   }}
                 >
-                  <Typography
-                    variant="h6"
+                  <Box
                     sx={{
-                      fontWeight: 700,
+                      alignItems: 'center',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      gap: 1.05,
+                      justifyContent: 'center',
                       textAlign: 'center',
-                      letterSpacing: '-0.02em',
                     }}
                   >
-                    {addressInfo?.name ??
-                      t('auth:message.error.name_not_registered', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                  </Typography>
-                  <Spacer height="20px" />
-                  {addressInfo?.name ? (
-                    <Avatar
-                      sx={{
-                        height: 80,
-                        width: 80,
-                        boxShadow: theme.shadows[4],
-                        border: 3,
-                        borderColor: theme.palette.background.paper,
-                        '& img': { objectFit: 'cover' },
-                      }}
-                      alt={addressInfo?.name}
-                      src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${addressInfo?.name}/qortal_avatar?async=true`}
-                    >
-                      <AccountCircleIcon sx={{ fontSize: 56 }} />
-                    </Avatar>
-                  ) : (
+                    {addressInfo.name ? (
+                      <Avatar
+                        alt={addressInfo.name}
+                        src={`${getBaseApiReact()}/arbitrary/THUMBNAIL/${addressInfo.name}/qortal_avatar?async=true`}
+                        sx={{
+                          border: `3px solid ${alpha(
+                            theme.palette.common.white,
+                            theme.palette.mode === 'dark' ? 0.08 : 0.54
+                          )}`,
+                          boxShadow:
+                            theme.palette.mode === 'dark'
+                              ? '0 16px 40px rgba(0,0,0,0.24)'
+                              : '0 16px 36px rgba(18,28,45,0.12)',
+                          height: 108,
+                          width: 108,
+                        }}
+                      >
+                        <AccountCircleRoundedIcon sx={{ fontSize: 78 }} />
+                      </Avatar>
+                    ) : (
+                      <Box
+                        sx={{
+                          alignItems: 'center',
+                          backgroundColor: alpha(theme.palette.primary.main, 0.12),
+                          borderRadius: '50%',
+                          color: theme.palette.primary.main,
+                          display: 'flex',
+                          height: 108,
+                          justifyContent: 'center',
+                          width: 108,
+                        }}
+                      >
+                        <AccountCircleRoundedIcon sx={{ fontSize: 78 }} />
+                      </Box>
+                    )}
+
+                    <Box sx={{ minWidth: 0 }}>
+                      <Typography
+                        sx={{
+                          fontSize: '1.02rem',
+                          fontWeight: 700,
+                          letterSpacing: '-0.025em',
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                        }}
+                      >
+                        {addressInfo.name ||
+                          t('auth:message.error.name_not_registered', {
+                            postProcess: 'capitalizeFirstChar',
+                          })}
+                      </Typography>
+                    </Box>
+
                     <Box
                       sx={{
-                        width: 80,
-                        height: 80,
-                        borderRadius: '50%',
-                        bgcolor: alpha(theme.palette.action.hover, 0.3),
-                        display: 'flex',
                         alignItems: 'center',
+                        display: 'flex',
+                        flexWrap: 'wrap',
+                        gap: 0.75,
                         justifyContent: 'center',
                       }}
                     >
-                      <AccountCircleIcon
-                        sx={{ fontSize: 56, color: 'text.secondary' }}
+                      <Chip
+                        label={t('core:account_lookup.chip_level', {
+                          level: addressInfo.level ?? 0,
+                          postProcess: 'capitalizeFirstChar',
+                        })}
+                        size="small"
+                        sx={{
+                          backgroundColor: alpha(theme.palette.primary.main, 0.14),
+                          color: theme.palette.primary.light,
+                          fontWeight: 700,
+                        }}
                       />
-                    </Box>
-                  )}
-                  <Spacer height="24px" />
-                  <Box
-                    sx={{
-                      px: 1.5,
-                      py: 0.5,
-                      borderRadius: 2,
-                      bgcolor: alpha(theme.palette.primary.main, 0.12),
-                    }}
-                  >
-                    <Typography
-                      variant="subtitle2"
-                      sx={{
-                        fontWeight: 600,
-                        color: theme.palette.primary.main,
-                      }}
-                    >
-                      {t('core:level', { postProcess: 'capitalizeFirstChar' })}{' '}
-                      {addressInfo?.level ?? 0}
-                    </Typography>
-                  </Box>
-                  {targetBlocks != null && (
-                    <>
-                      <Box sx={{ width: '100%', mt: 2 }}>
-                        <LinearProgress
-                          variant="determinate"
-                          value={progress * 100}
+                      {isBlocked ? (
+                        <Chip
+                          icon={<ShieldRoundedIcon />}
+                          label={t('core:account_lookup.chip_blocked', {
+                            postProcess: 'capitalizeFirstChar',
+                          })}
+                          size="small"
+                          sx={{
+                            backgroundColor: alpha(theme.palette.error.main, 0.12),
+                            color: theme.palette.error.light,
+                            fontWeight: 700,
+                          }}
+                        />
+                      ) : null}
+                      {!addressInfo.name ? (
+                        <Chip
+                          label={t('core:account_lookup.chip_no_registered_name', {
+                            postProcess: 'capitalizeFirstChar',
+                          })}
+                          size="small"
                           sx={{
-                            height: 10,
-                            borderRadius: 5,
                             backgroundColor: alpha(
-                              theme.palette.primary.main,
-                              0.2
+                              theme.palette.text.secondary,
+                              0.12
                             ),
-                            '& .MuiLinearProgress-bar': {
-                              borderRadius: 5,
-                            },
+                            color: theme.palette.text.secondary,
                           }}
                         />
-                      </Box>
+                      ) : null}
+                    </Box>
+                  </Box>
+
+                  {targetBlocks != null ? (
+                    <Box
+                      sx={{
+                        backgroundColor: softSectionSurface,
+                        border: `1px solid ${alpha(theme.palette.divider, 0.22)}`,
+                        borderRadius: '10px',
+                        p: 1.25,
+                      }}
+                    >
+                      <Typography sx={sectionLabelSx}>
+                        {t('core:account_lookup.section_minting_progress', {
+                          postProcess: 'capitalizeFirstChar',
+                        })}
+                      </Typography>
+                      <LinearProgress
+                        value={progress * 100}
+                        variant="determinate"
+                        sx={{
+                          backgroundColor: alpha(theme.palette.primary.main, 0.12),
+                          borderRadius: '999px',
+                          height: 10,
+                          mt: 1,
+                          '& .MuiLinearProgress-bar': {
+                            borderRadius: '999px',
+                          },
+                        }}
+                      />
                       <Typography
-                        variant="body2"
-                        color="text.primary"
-                        sx={{ mt: 1, fontWeight: 600 }}
+                        sx={{ fontSize: '0.84rem', fontWeight: 700, mt: 0.85 }}
                       >
-                        {currentBlocks.toLocaleString()} / {targetBlocks.toLocaleString()}
+                        {currentBlocks.toLocaleString()} /{' '}
+                        {targetBlocks.toLocaleString()}
                       </Typography>
-                      {nextLevelNum != null && (
-                        <Typography
-                          variant="body2"
-                          color="text.secondary"
-                          sx={{ mt: 0.25 }}
-                        >
-                          {t('core:remaining_to_level', {
-                            level: nextLevelNum,
-                          })}
-                        </Typography>
-                      )}
                       <Typography
-                        variant="body2"
-                        color="text.secondary"
-                        sx={{ mt: 0.25 }}
+                        sx={{
+                          color: theme.palette.text.secondary,
+                          fontSize: '0.8rem',
+                          mt: 0.4,
+                        }}
                       >
-                        {remainingBlocks.toLocaleString()}{' '}
-                        {t('core:blocks', {
-                          postProcess: 'capitalizeFirstChar',
-                        })}
+                        {nextLevelNumber != null
+                          ? t('core:account_lookup.minting_blocks_to_level', {
+                              remaining:
+                                remainingBlocks.toLocaleString(),
+                              level: nextLevelNumber,
+                              postProcess: 'capitalizeFirstChar',
+                            })
+                          : t('core:account_lookup.minting_remaining', {
+                              remaining:
+                                remainingBlocks.toLocaleString(),
+                              postProcess: 'capitalizeFirstChar',
+                            })}
                       </Typography>
-                      {daysToLevel != null && daysToLevel >= 0 && (
+                      {daysToLevel != null && daysToLevel >= 0 ? (
                         <Typography
-                          variant="body2"
-                          color="text.secondary"
-                          sx={{ mt: 0.25 }}
+                          sx={{
+                            color: theme.palette.text.secondary,
+                            fontSize: '0.8rem',
+                            mt: 0.25,
+                          }}
                         >
-                          ~{Math.round(daysToLevel)}{' '}
-                          {t('core:days_of_minting', {
+                          {t('core:account_lookup.minting_days_label')}{' '}
+                          {t('core:account_lookup.minting_approx', {
+                            count: Math.round(daysToLevel),
                             postProcess: 'capitalizeFirstChar',
                           })}
                         </Typography>
-                      )}
-                    </>
-                  )}
-                </Card>
+                      ) : null}
+                    </Box>
+                  ) : null}
+                </Box>
 
-                {/* Right panel: details for address */}
                 <Box
                   sx={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    flex: 1,
+                    display: 'grid',
+                    gap: 0.8,
+                    gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
                     minWidth: 0,
-                    minHeight: 0,
-                    overflow: 'auto',
-                    pl: 3,
-                    pr: 2,
-                    py: 2,
+                    position: 'relative',
+                    pt: 0.35,
+                    zIndex: 1,
+                  }}
+                >
+                  {profileActionButtons}
+                </Box>
+              </Box>
+
+              <Box
+                sx={{
+                  borderLeft: {
+                    xs: 'none',
+                    md: `1px solid ${dividerColor}`,
+                  },
+                  display: 'flex',
+                  flexDirection: 'column',
+                  flexShrink: 0,
+                  gap: 1.55,
+                  minHeight: 0,
+                  overflow: { xs: 'visible', md: 'hidden' },
+                  pl: { xs: 0, md: 2.3 },
+                }}
+              >
+                <Box
+                  sx={{
+                    backgroundColor: softSectionSurface,
+                    border: `1px solid ${alpha(theme.palette.divider, 0.22)}`,
+                    borderRadius: '12px',
+                    display: 'grid',
+                    gap: 0,
+                    gridTemplateColumns: {
+                      xs: 'repeat(2, minmax(0, 1fr))',
+                      md: 'repeat(4, minmax(0, 1fr))',
+                    },
+                    overflow: 'hidden',
+                  }}
+                >
+                  {displayStatRows.map((row, index) => (
+                    <Box
+                      key={row.label}
+                      sx={{
+                        borderLeft: {
+                          xs:
+                            index % 2 === 1
+                              ? `1px solid ${dividerColor}`
+                              : 'none',
+                          md: index > 0 ? `1px solid ${dividerColor}` : 'none',
+                        },
+                        borderTop: {
+                          xs: index >= 2 ? `1px solid ${dividerColor}` : 'none',
+                          md: 'none',
+                        },
+                        minWidth: 0,
+                        p: 1.25,
+                      }}
+                    >
+                      <Typography sx={sectionLabelSx}>
+                        {row.label}
+                      </Typography>
+                      <Typography
+                        sx={{
+                          fontSize: '0.88rem',
+                          fontWeight: 700,
+                          letterSpacing: '-0.02em',
+                          mt: 0.35,
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                        }}
+                      >
+                        {row.value}
+                      </Typography>
+                    </Box>
+                  ))}
+                </Box>
+
+                <Box
+                  sx={{
+                    backgroundColor: softSectionSurface,
+                    border: `1px solid ${alpha(theme.palette.divider, 0.22)}`,
+                    borderRadius: '12px',
+                    display: 'grid',
+                    gap: 0,
+                    gridTemplateColumns: { xs: '1fr', md: '1fr 1fr' },
+                    overflow: 'hidden',
                   }}
                 >
-                  <Typography
-                    variant="subtitle1"
+                  <Box
                     sx={{
-                      fontWeight: 600,
-                      letterSpacing: '-0.01em',
-                      mb: 2,
-                      color: theme.palette.text.primary,
+                      minWidth: 0,
+                      p: 1.35,
                     }}
                   >
-                    {t('core:details_for_address', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Typography>
+                    <Typography sx={sectionLabelSx}>
+                      {t('core:account_lookup.label_address', {
+                        postProcess: 'capitalizeFirstChar',
+                      })}
+                    </Typography>
+                    <ButtonBase
+                      onClick={handleCopyAddress}
+                      sx={{
+                        alignItems: 'center',
+                        display: 'flex',
+                        gap: 0.9,
+                        justifyContent: 'flex-start',
+                        mt: 0.45,
+                        textAlign: 'left',
+                      }}
+                    >
+                      <Typography
+                        sx={{
+                          fontSize: '0.86rem',
+                          fontWeight: 600,
+                          letterSpacing: '-0.01em',
+                          lineHeight: 1.52,
+                          wordBreak: 'break-all',
+                        }}
+                      >
+                        {addressInfo.address}
+                      </Typography>
+                      <ContentCopyRoundedIcon sx={{ fontSize: '1rem' }} />
+                    </ButtonBase>
+                  </Box>
+
                   <Box
                     sx={{
-                      p: 2,
-                      borderRadius: 2,
-                      bgcolor: alpha(theme.palette.background.default, 0.5),
-                      border: 1,
-                      borderColor: alpha(theme.palette.divider, 0.4),
-                      mb: 2,
+                      borderLeft: {
+                        xs: 'none',
+                        md: `1px solid ${dividerColor}`,
+                      },
+                      borderTop: {
+                        xs: `1px solid ${dividerColor}`,
+                        md: 'none',
+                      },
+                      minWidth: 0,
+                      p: 1.35,
                     }}
                   >
+                    <Typography sx={sectionLabelSx}>
+                      {t('core:account_lookup.label_public_key', {
+                        postProcess: 'capitalizeFirstChar',
+                      })}
+                    </Typography>
                     <Typography
-                      variant="caption"
                       sx={{
-                        color: theme.palette.text.secondary,
-                        textTransform: 'uppercase',
-                        letterSpacing: '0.06em',
+                        fontSize: '0.86rem',
                         fontWeight: 600,
+                        letterSpacing: '-0.01em',
+                        lineHeight: 1.52,
+                        mt: 0.45,
+                        overflowWrap: 'anywhere',
+                        wordBreak: 'break-word',
                       }}
                     >
-                      {t('auth:address', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
+                      {addressInfo.publicKey || '\u2014'}
                     </Typography>
-                    <Tooltip
-                      title={t('auth:action.copy_address', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                      placement="bottom"
-                      arrow
-                      slotProps={{
-                        tooltip: {
-                          sx: {
-                            color: theme.palette.text.primary,
-                            backgroundColor: theme.palette.background.default,
-                          },
-                        },
-                      }}
-                    >
-                      <ButtonBase
-                        onClick={() => {
-                          navigator.clipboard.writeText(addressInfo?.address);
-                        }}
-                        sx={{ display: 'block', textAlign: 'left', mt: 0.25 }}
-                      >
-                        <Typography
-                          variant="body2"
-                          sx={{
-                            fontFamily: 'monospace',
-                            wordBreak: 'break-all',
-                            '&:hover': { opacity: 0.8 },
-                          }}
-                        >
-                          {addressInfo?.address}
-                        </Typography>
-                      </ButtonBase>
-                    </Tooltip>
                   </Box>
+                </Box>
+
+                <Box
+                  sx={{
+                    backgroundColor: softSectionSurface,
+                    border: `1px solid ${alpha(theme.palette.divider, 0.22)}`,
+                    borderRadius: '12px',
+                    display: 'flex',
+                    flex: '1 1 auto',
+                    flexDirection: 'column',
+                    minHeight: { xs: 280, md: 0 },
+                    overflow: 'hidden',
+                    p: 1.15,
+                  }}
+                >
                   <Box
                     sx={{
+                      alignItems: 'center',
                       display: 'flex',
-                      flexDirection: 'column',
-                      gap: 0,
-                      mb: 2,
-                      borderRadius: 2,
-                      overflow: 'hidden',
-                      border: 1,
-                      borderColor: alpha(theme.palette.divider, 0.4),
-                      bgcolor: alpha(theme.palette.background.default, 0.5),
-                      paddingBottom: 1,
+                      justifyContent: 'flex-start',
+                      pb: 0.9,
+                      px: 0.4,
                     }}
                   >
-                    {[
-                      {
-                        label: t('core:balance', {
-                          postProcess: 'capitalizeFirstChar',
-                        }),
-                        value: `${formatBalance(addressInfo?.balance)} QORT`,
-                      },
-                      {
-                        label: t('core:total_received', {
-                          postProcess: 'capitalizeFirstChar',
-                        }),
-                        value:
-                          totalReceived != null
-                            ? `${formatBalance(totalReceived)} QORT`
-                            : '—',
-                      },
-                      {
-                        label: t('core:total_sent', {
-                          postProcess: 'capitalizeFirstChar',
-                        }),
-                        value:
-                          totalSent != null
-                            ? `${formatBalance(totalSent)} QORT`
-                            : '—',
-                      },
-                      {
-                        label: t('core:total_blocks_minted', {
+                    <Box>
+                      <Typography
+                        sx={{
+                          fontSize: '0.92rem',
+                          fontWeight: 800,
+                          letterSpacing: '-0.03em',
+                        }}
+                      >
+                        {t('core:account_lookup.payments_title', {
                           postProcess: 'capitalizeFirstChar',
-                        }),
-                        value: (
-                          (addressInfo?.blocksMinted ?? 0) +
-                          (addressInfo?.blocksMintedAdjustment ?? 0)
-                        ).toLocaleString(),
-                      },
-                    ].map((row, i) => (
-                      <Box
-                        key={row.label}
+                        })}
+                      </Typography>
+                      <Typography
                         sx={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          alignItems: 'center',
-                          px: 2,
-                          py: 1.25,
-                          ...(i === 3 && { pb: 1.75 }),
-                          borderBottom: i < 3 ? 1 : 0,
-                          borderColor: 'divider',
+                          ...helperNoteSx,
+                          mt: 0.2,
                         }}
                       >
-                        <Typography
-                          variant="body2"
-                          color={i === 3 ? 'text.primary' : 'text.secondary'}
-                          sx={i === 3 ? { fontWeight: 600 } : undefined}
-                        >
-                          {row.label}
-                        </Typography>
-                        <Typography variant="body2" sx={{ fontWeight: 600 }}>
-                          {row.value}
-                        </Typography>
-                      </Box>
-                    ))}
+                        {t('core:payments_count', {
+                          count: totalPaymentsCount,
+                          postProcess: 'capitalizeFirstChar',
+                        })}
+                      </Typography>
+                    </Box>
                   </Box>
-                  <Button
-                    variant="contained"
-                    onClick={() => {
-                      executeEvent('openPaymentInternal', {
-                        address: addressInfo?.address,
-                        name: addressInfo?.name,
-                      });
-                    }}
-                    sx={{
-                      alignSelf: 'flex-start',
-                      mb: 2,
-                      px: 3,
-                      py: 1.25,
-                      borderRadius: 2,
-                      fontWeight: 600,
-                      textTransform: 'none',
-                      boxShadow: theme.shadows[2],
-                      '&:hover': { boxShadow: theme.shadows[4] },
-                    }}
-                  >
-                    {t('core:action.send_qort', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Button>
-                  <Divider
+
+                  <TableContainer
                     sx={{
-                      my: 2,
-                      borderColor: alpha(theme.palette.divider, 0.5),
+                      border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,
+                      borderRadius: '10px',
+                      flex: '1 1 auto',
+                      minHeight: 0,
                     }}
-                  />
-                  <Typography
-                    variant="subtitle2"
-                    color="text.secondary"
-                    sx={{ mb: 1, fontWeight: 600 }}
                   >
-                    {t('core:payments_count', {
-                      count: totalPaymentsCount,
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Typography>
-                  <Table
-                    size="small"
-                    sx={{
-                      borderRadius: 2,
-                      overflow: 'hidden',
-                      border: 1,
-                      borderColor: alpha(theme.palette.divider, 0.4),
-                      '& .MuiTableHead-root .MuiTableCell-head': {
-                        fontWeight: 600,
-                        backgroundColor: alpha(
-                          theme.palette.background.default,
-                          0.8
-                        ),
-                        color: theme.palette.text.secondary,
-                        textTransform: 'uppercase',
-                        letterSpacing: '0.05em',
-                        fontSize: '0.75rem',
-                      },
-                      '& .MuiTableBody-root .MuiTableRow-root:hover': {
-                        backgroundColor: alpha(theme.palette.action.hover, 0.4),
-                      },
-                      '& .MuiTableBody-root .MuiTableRow-root:hover .MuiButtonBase-root .MuiTypography-root':
-                        {
-                          color: theme.palette.primary.light,
+                    <Table
+                      size="small"
+                      stickyHeader
+                      sx={{
+                        '& .MuiTableCell-root': {
+                          borderColor: alpha(theme.palette.divider, 0.16),
+                          py: 1.15,
                         },
-                      '& .MuiTableCell-root': {
-                        borderColor: alpha(theme.palette.divider, 0.3),
-                      },
-                    }}
-                  >
-                    <TableHead>
-                      <TableRow>
-                        <TableCell>
-                          {t('core:sender', {
-                            postProcess: 'capitalizeFirstChar',
-                          })}
-                        </TableCell>
-                        <TableCell>
-                          {t('core:receiver', {
-                            postProcess: 'capitalizeFirstChar',
-                          })}
-                        </TableCell>
-                        <TableCell>
-                          {t('core:amount', {
-                            postProcess: 'capitalizeFirstChar',
-                          })}
-                        </TableCell>
-                        <TableCell>
-                          {t('core:time.time', {
-                            postProcess: 'capitalizeFirstChar',
-                          })}
-                        </TableCell>
-                      </TableRow>
-                    </TableHead>
-                    <TableBody>
-                      {isLoadingPayments && (
+                        '& .MuiTableHead-root .MuiTableCell-head': {
+                          backgroundColor:
+                            theme.palette.mode === 'dark'
+                              ? alpha(theme.palette.common.white, 0.025)
+                              : '#EEF2F7',
+                          color: alpha(theme.palette.text.secondary, 0.72),
+                          fontSize: '0.66rem',
+                          fontWeight: 700,
+                          letterSpacing: '0.09em',
+                          textTransform: 'uppercase',
+                        },
+                        '& .MuiTableBody-root .MuiTableCell-root': {
+                          fontSize: '0.78rem',
+                        },
+                        '& .MuiTableRow-hover:hover': {
+                          backgroundColor: alpha(theme.palette.primary.main, 0.04),
+                        },
+                      }}
+                    >
+                      <TableHead>
                         <TableRow>
-                          <TableCell colSpan={4} align="center" sx={{ py: 3 }}>
-                            <CircularProgress
-                              size={24}
-                              sx={{ color: theme.palette.text.primary }}
-                            />
+                          <TableCell>
+                            {t('core:sender', {
+                              postProcess: 'capitalizeFirstChar',
+                            })}
                           </TableCell>
-                        </TableRow>
-                      )}
-                      {!isLoadingPayments && paginatedPayments.length === 0 && (
-                        <TableRow>
-                          <TableCell colSpan={4}>
-                            {t('core:message.generic.no_payments', {
+                          <TableCell>
+                            {t('core:receiver', {
+                              postProcess: 'capitalizeFirstChar',
+                            })}
+                          </TableCell>
+                          <TableCell align="right">
+                            {t('core:amount', {
+                              postProcess: 'capitalizeFirstChar',
+                            })}
+                          </TableCell>
+                          <TableCell align="right">
+                            {t('core:time.time', {
                               postProcess: 'capitalizeFirstChar',
                             })}
                           </TableCell>
                         </TableRow>
-                      )}
-                      {paginatedPayments.map((payment) => {
-                        const currentAddress = addressInfo?.address;
-                        const isSenderCurrent =
-                          currentAddress &&
-                          payment?.creatorAddress === currentAddress;
-                        const isReceiverCurrent =
-                          currentAddress &&
-                          payment?.recipient === currentAddress;
-                        const handleAddressClick = (address: string) => {
-                          if (!address || address === currentAddress) return;
-                          setNameOrAddress(address);
-                          setInputValue(address);
-                          lookupFunc(address);
-                        };
-                        return (
-                          <TableRow
-                            key={payment?.signature ?? payment?.timestamp}
-                          >
-                            <TableCell>
-                              {isSenderCurrent ? (
-                                <Typography variant="body2">
-                                  {addressInfo?.name?.trim() ||
-                                    formatAddress(payment?.creatorAddress)}
-                                </Typography>
-                              ) : (
-                                <Tooltip
-                                  onOpen={() =>
-                                    scheduleFetchNameForAddress(
-                                      payment?.creatorAddress
-                                    )
-                                  }
-                                  onClose={cancelFetchNameForAddress}
-                                  title={(() => {
-                                    const entry =
-                                      addressNamesMap[payment?.creatorAddress];
-                                    if (!entry || entry.loading)
-                                      return (
-                                        <Box
-                                          sx={{
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            py: 1,
-                                            minWidth: 48,
-                                          }}
-                                        >
-                                          <CircularProgress
-                                            size={24}
-                                            sx={{
-                                              color: theme.palette.primary.main,
-                                            }}
-                                          />
-                                        </Box>
-                                      );
-                                    if (entry.name)
-                                      return (
+                      </TableHead>
+                      <TableBody>
+                        {isLoadingPayments ? (
+                          <TableRow>
+                            <TableCell align="center" colSpan={4} sx={{ py: 4 }}>
+                              <CircularProgress size={22} />
+                            </TableCell>
+                          </TableRow>
+                        ) : null}
+
+                        {!isLoadingPayments && paginatedPayments.length === 0 ? (
+                          <TableRow>
+                            <TableCell colSpan={4} sx={{ py: 3 }}>
+                              {t('core:message.generic.no_payments', {
+                                postProcess: 'capitalizeFirstChar',
+                              })}
+                            </TableCell>
+                          </TableRow>
+                        ) : null}
+
+                        {!isLoadingPayments
+                          ? paginatedPayments.map((payment) => {
+                              const ownerAddress = addressInfo.address;
+                              const senderAddress = payment?.creatorAddress || '';
+                              const receiverAddress = payment?.recipient || '';
+                              const senderEntry = addressNamesMap[senderAddress];
+                              const receiverEntry = addressNamesMap[receiverAddress];
+                              const senderLabel =
+                                senderAddress === ownerAddress
+                                  ? addressInfo.name?.trim() || formatAddress(senderAddress)
+                                  : senderEntry?.name || formatAddress(senderAddress);
+                              const receiverLabel =
+                                receiverAddress === ownerAddress
+                                  ? addressInfo.name?.trim() || formatAddress(receiverAddress)
+                                  : receiverEntry?.name || formatAddress(receiverAddress);
+
+                              const handleLookupAddress = (address: string) => {
+                                if (!address || address === ownerAddress) {
+                                  return;
+                                }
+
+                                setNameOrAddress(address);
+                                setInputValue(address);
+                                void lookupFunc(address);
+                              };
+
+                              return (
+                                <TableRow
+                                  hover
+                                  key={payment?.signature ?? payment?.timestamp}
+                                >
+                                  <TableCell>
+                                    {senderAddress === ownerAddress ? (
+                                      <Typography
+                                        sx={{ fontSize: '0.76rem', fontWeight: 500 }}
+                                      >
+                                        {senderLabel}
+                                      </Typography>
+                                    ) : (
+                                      <ButtonBase
+                                        onClick={() => handleLookupAddress(senderAddress)}
+                                        sx={{ textAlign: 'left' }}
+                                      >
                                         <Typography
-                                          variant="body1"
                                           sx={{
-                                            fontSize: '1.0625rem',
+                                            color: theme.palette.primary.main,
+                                            fontSize: '0.76rem',
                                             fontWeight: 600,
                                           }}
                                         >
-                                          {entry.name}
+                                          {senderLabel}
                                         </Typography>
-                                      );
-                                    return (
+                                      </ButtonBase>
+                                    )}
+                                  </TableCell>
+                                  <TableCell>
+                                    {receiverAddress === ownerAddress ? (
                                       <Typography
-                                        variant="body2"
-                                        sx={{
-                                          fontFamily: 'monospace',
-                                          fontSize: '0.9375rem',
-                                          wordBreak: 'break-all',
-                                        }}
+                                        sx={{ fontSize: '0.76rem', fontWeight: 500 }}
                                       >
-                                        {payment?.creatorAddress ?? ''}
+                                        {receiverLabel}
                                       </Typography>
-                                    );
-                                  })()}
-                                  placement="top"
-                                  arrow
-                                  slotProps={{
-                                    tooltip: {
-                                      sx: {
-                                        color: theme.palette.text.primary,
-                                        backgroundColor:
-                                          theme.palette.background.paper,
-                                        border: 1,
-                                        borderColor: 'divider',
-                                        borderRadius: 2,
-                                        boxShadow: theme.shadows[4],
-                                        padding: '12px 16px',
-                                        maxWidth: 360,
-                                      },
-                                    },
-                                    arrow: {
-                                      sx: {
-                                        color: theme.palette.background.paper,
-                                      },
-                                    },
-                                  }}
-                                >
-                                  <ButtonBase
-                                    onClick={() =>
-                                      handleAddressClick(
-                                        payment?.creatorAddress
-                                      )
-                                    }
-                                    sx={{ textAlign: 'left' }}
-                                  >
-                                    <Typography
-                                      variant="body2"
-                                      sx={{
-                                        fontFamily: 'monospace',
-                                        color: theme.palette.primary.light,
-                                        fontWeight: 500,
-                                        '&:hover': {
-                                          textDecoration: 'underline',
-                                          opacity: 0.95,
-                                        },
-                                      }}
-                                    >
-                                      {formatAddress(payment?.creatorAddress)}
-                                    </Typography>
-                                  </ButtonBase>
-                                </Tooltip>
-                              )}
-                            </TableCell>
-                            <TableCell>
-                              {isReceiverCurrent ? (
-                                <Typography variant="body2">
-                                  {addressInfo?.name?.trim() ||
-                                    formatAddress(payment?.recipient)}
-                                </Typography>
-                              ) : (
-                                <Tooltip
-                                  onOpen={() =>
-                                    scheduleFetchNameForAddress(
-                                      payment?.recipient
-                                    )
-                                  }
-                                  onClose={cancelFetchNameForAddress}
-                                  title={(() => {
-                                    const entry =
-                                      addressNamesMap[payment?.recipient];
-                                    if (!entry || entry.loading)
-                                      return (
-                                        <Box
-                                          sx={{
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            py: 1,
-                                            minWidth: 48,
-                                          }}
-                                        >
-                                          <CircularProgress
-                                            size={24}
-                                            sx={{
-                                              color: theme.palette.primary.main,
-                                            }}
-                                          />
-                                        </Box>
-                                      );
-                                    if (entry.name)
-                                      return (
+                                    ) : (
+                                      <ButtonBase
+                                        onClick={() =>
+                                          handleLookupAddress(receiverAddress)
+                                        }
+                                        sx={{ textAlign: 'left' }}
+                                      >
                                         <Typography
-                                          variant="body1"
                                           sx={{
-                                            fontSize: '1.0625rem',
+                                            color: theme.palette.primary.main,
+                                            fontSize: '0.76rem',
                                             fontWeight: 600,
                                           }}
                                         >
-                                          {entry.name}
+                                          {receiverLabel}
                                         </Typography>
-                                      );
-                                    return (
-                                      <Typography
-                                        variant="body2"
-                                        sx={{
-                                          fontFamily: 'monospace',
-                                          fontSize: '0.9375rem',
-                                          wordBreak: 'break-all',
-                                        }}
-                                      >
-                                        {payment?.recipient ?? ''}
-                                      </Typography>
-                                    );
-                                  })()}
-                                  placement="top"
-                                  arrow
-                                  slotProps={{
-                                    tooltip: {
-                                      sx: {
-                                        color: theme.palette.text.primary,
-                                        backgroundColor:
-                                          theme.palette.background.paper,
-                                        border: 1,
-                                        borderColor: 'divider',
-                                        borderRadius: 2,
-                                        boxShadow: theme.shadows[4],
-                                        padding: '12px 16px',
-                                        maxWidth: 360,
-                                      },
-                                    },
-                                    arrow: {
-                                      sx: {
-                                        color: theme.palette.background.paper,
-                                      },
-                                    },
-                                  }}
-                                >
-                                  <ButtonBase
-                                    onClick={() =>
-                                      handleAddressClick(payment?.recipient)
-                                    }
-                                    sx={{ textAlign: 'left' }}
+                                      </ButtonBase>
+                                    )}
+                                  </TableCell>
+                                  <TableCell
+                                    align="right"
+                                    sx={{
+                                      fontSize: '0.76rem',
+                                      fontWeight: 700,
+                                      whiteSpace: 'nowrap',
+                                    }}
                                   >
-                                    <Typography
-                                      variant="body2"
-                                      sx={{
-                                        fontFamily: 'monospace',
-                                        color: theme.palette.primary.light,
-                                        fontWeight: 500,
-                                        '&:hover': {
-                                          textDecoration: 'underline',
-                                          opacity: 0.95,
-                                        },
-                                      }}
-                                    >
-                                      {formatAddress(payment?.recipient)}
-                                    </Typography>
-                                  </ButtonBase>
-                                </Tooltip>
-                              )}
-                            </TableCell>
-                            <TableCell>{payment?.amount} QORT</TableCell>
-                            <TableCell>
-                              {formatTimestamp(payment?.timestamp)}
-                            </TableCell>
-                          </TableRow>
-                        );
-                      })}
-                    </TableBody>
-                  </Table>
+                                    {formatBalance(payment?.amount)} QORT
+                                  </TableCell>
+                                  <TableCell
+                                    align="right"
+                                    sx={{
+                                      color: theme.palette.text.secondary,
+                                      fontSize: '0.74rem',
+                                      whiteSpace: 'nowrap',
+                                    }}
+                                  >
+                                    {formatTimestamp(payment?.timestamp)}
+                                  </TableCell>
+                                </TableRow>
+                              );
+                            })
+                          : null}
+                      </TableBody>
+                    </Table>
+                  </TableContainer>
+
                   <TablePagination
                     component="div"
                     count={totalPaymentsCount}
-                    page={paymentsPage}
-                    onPageChange={(_, p) => setPaymentsPage(p)}
-                    rowsPerPage={paymentsRowsPerPage}
-                    onRowsPerPageChange={(e) => {
-                      setPaymentsRowsPerPage(parseInt(e.target.value, 10));
+                    onPageChange={(_event, page) => setPaymentsPage(page)}
+                    onRowsPerPageChange={(event) => {
+                      setPaymentsRowsPerPage(parseInt(event.target.value, 10));
                       setPaymentsPage(0);
                     }}
-                    rowsPerPageOptions={[5, 10, 25, 50]}
+                    page={paymentsPage}
+                    rowsPerPage={paymentsRowsPerPage}
+                    rowsPerPageOptions={[5, 10, 20]}
+                    labelRowsPerPage={t('core:account_lookup.pagination_rows_per_page')}
                     labelDisplayedRows={({ from, to, count }) =>
-                      t('core:pagination_of', {
-                        from: count === 0 ? 0 : from,
-                        to: to,
-                        total: count,
+                      t('core:account_lookup.pagination_displayed_rows', {
+                        from,
+                        to,
+                        count,
                       })
                     }
-                    labelRowsPerPage={t('core:items_per_page', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
                     sx={{
-                      borderTop: 1,
-                      borderColor: alpha(theme.palette.divider, 0.4),
-                      '& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows':
-                        { fontSize: '0.875rem' },
+                      borderTop: `1px solid ${alpha(theme.palette.divider, 0.16)}`,
+                      mt: 1,
+                      '& .MuiTablePagination-toolbar': {
+                        minHeight: 42,
+                        px: 0.5,
+                      },
+                      '& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows': {
+                        color: theme.palette.text.secondary,
+                        fontSize: '0.74rem',
+                        fontWeight: 500,
+                        m: 0,
+                      },
+                      '& .MuiTablePagination-select': {
+                        fontSize: '0.76rem',
+                        fontWeight: 600,
+                        py: 0.25,
+                      },
+                      '& .MuiTablePagination-actions .MuiIconButton-root': {
+                        p: 0.5,
+                      },
                     }}
                   />
                 </Box>
               </Box>
-            )}
-          </Box>
+            </Box>
+          ) : null}
         </Box>
       </Box>
-    </Box>
+    </Dialog>
   );
 };
diff --git a/src/components/Wallets.tsx b/src/components/Wallets.tsx
index 443f174d..cddf8fb5 100644
--- a/src/components/Wallets.tsx
+++ b/src/components/Wallets.tsx
@@ -1,881 +1,1585 @@
-import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
-import Avatar from '@mui/material/Avatar';
-import Typography from '@mui/material/Typography';
 import {
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type DragEvent as ReactDragEvent,
+} from 'react';
+import {
+  Avatar,
+  Badge,
   Box,
-  Button,
   ButtonBase,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
   IconButton,
   Input,
+  InputAdornment,
+  TextField,
+  Tooltip,
+  Typography,
   useTheme,
 } from '@mui/material';
-import { CustomButton, Label } from '../styles/App-styles.ts';
+import { alpha } from '@mui/material/styles';
 import { useDropzone } from 'react-dropzone';
+import { useTranslation } from 'react-i18next';
 import EditIcon from '@mui/icons-material/Edit';
 import PersonIcon from '@mui/icons-material/Person';
-import { Spacer } from '../common/Spacer.tsx';
-import {
-  deleteAvatar,
-  loadAvatar,
-  resizeImageToAvatar,
-  saveAvatar,
-} from '../utils/avatarStorage.ts';
-import {
-  getWallets,
-  storeWallets,
-  walletVersion,
-} from '../background/background.ts';
-import { getPrimaryNameForAvatar } from './Group/groupApi';
+import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import DescriptionRoundedIcon from '@mui/icons-material/DescriptionRounded';
+import VpnKeyRoundedIcon from '@mui/icons-material/VpnKeyRounded';
+import LoginRoundedIcon from '@mui/icons-material/LoginRounded';
+import ArrowForwardRoundedIcon from '@mui/icons-material/ArrowForwardRounded';
+import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
+import ClearRoundedIcon from '@mui/icons-material/ClearRounded';
+import ManageSearchRoundedIcon from '@mui/icons-material/ManageSearchRounded';
+import { getWallets, storeWallets, walletVersion } from '../background/background.ts';
+import { getPrimaryNamesForAddresses } from './Group/groupApi';
 import { getBaseApiReactForAvatar } from '../App';
-import { useModal } from '../hooks/useModal.tsx';
 import PhraseWallet from '../utils/generateWallet/phrase-wallet.ts';
 import { decryptStoredWalletFromSeedPhrase } from '../utils/decryptWallet.ts';
 import { crypto } from '../constants/decryptWallet.ts';
-import { LoadingButton } from '@mui/lab';
 import { PasswordField } from './index.ts';
-import { HtmlTooltip } from './NotAuthenticated.tsx';
-import { useAtomValue } from 'jotai';
-import { hasSeenGettingStartedAtom } from '../atoms/global';
-import { useTranslation } from 'react-i18next';
+import { AuthButton, AuthSectionLabel } from './Auth/AuthShell';
+import type { AuthUnlockTransitionSnapshot } from '../types/authTransition';
 
 const parsefilenameQortal = (filename) => {
   return filename.startsWith('qortal_backup_') ? filename.slice(14) : filename;
 };
 
-export const Wallets = ({ setExtState, setRawWallet, rawWallet }) => {
-  const [wallets, setWallets] = useState([]);
+const shortenAddress = (address?: string) => {
+  if (!address) return '';
+  if (address.length <= 18) return address;
+  return `${address.slice(0, 8)}...${address.slice(-8)}`;
+};
+
+/** Keeps Enter Qortal list height stable while filtering/scrolling */
+const ENTRY_WALLET_SCROLL_HEIGHT_PX = 292;
+
+type WalletsProps = {
+  setExtState: (state: any) => void;
+  setRawWallet: (wallet: any) => void;
+  rawWallet?: any;
+  mode?: 'entry' | 'import';
+  onImportViewChange?: (view: ImportView) => void;
+  onReady?: () => void;
+  onWalletUnlockStart?: (snapshot: AuthUnlockTransitionSnapshot) => void;
+};
+
+type ImportView = 'choice' | 'backup' | 'seedphrase' | 'authenticate';
+
+export const Wallets = ({
+  setExtState,
+  setRawWallet,
+  mode = 'import',
+  onImportViewChange,
+  onReady,
+  onWalletUnlockStart,
+}: WalletsProps) => {
+  const { t } = useTranslation(['auth']);
+  const [wallets, setWallets] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [seedValue, setSeedValue] = useState('');
-  const [seedName, setSeedName] = useState('');
   const [seedError, setSeedError] = useState('');
-  const hasSeenGettingStarted = useAtomValue(hasSeenGettingStartedAtom);
   const [password, setPassword] = useState('');
-  const [isOpenSeedModal, setIsOpenSeedModal] = useState(false);
   const [isLoadingEncryptSeed, setIsLoadingEncryptSeed] = useState(false);
+  const [isSeedVisible, setIsSeedVisible] = useState(false);
+  const [importView, setImportView] = useState<ImportView>('choice');
+  const [backupImportHint, setBackupImportHint] = useState('');
+  /** Insertion slot index in the wallet list — line appears before wallets[idx] when idx < length */
+  const [walletDropGapBeforeIndex, setWalletDropGapBeforeIndex] = useState<
+    number | null
+  >(null);
+  /** Row being dragged — dim original while reordering */
+  const [walletReorderDragSourceIndex, setWalletReorderDragSourceIndex] =
+    useState<number | null>(null);
+  const [editingWalletIndex, setEditingWalletIndex] = useState<number | null>(
+    null
+  );
   const [primaryNamesByAddress, setPrimaryNamesByAddress] = useState<
     Record<string, string>
   >({});
-  const fetchingAddressesRef = useRef<Set<string>>(new Set());
-  const observerRef = useRef<IntersectionObserver | null>(null);
+  const [walletEntrySearchOpen, setWalletEntrySearchOpen] = useState(false);
+  const [walletEntryFilterQuery, setWalletEntryFilterQuery] = useState('');
+  const accountsScrollRef = useRef<HTMLDivElement | null>(null);
+  /** True while reordering wallets; dragover hits header/footer/etc. unless we listen on document */
+  const walletReorderDragActiveRef = useRef(false);
+  const entryModeRef = useRef(mode);
+  const editingWalletIndexRef = useRef(editingWalletIndex);
+  entryModeRef.current = mode;
+  editingWalletIndexRef.current = editingWalletIndex;
   const theme = useTheme();
-  const { t } = useTranslation([
-    'auth',
-    'core',
-    'group',
-    'question',
-    'tutorial',
-  ]);
-  const { isShow, onCancel, onOk, show } = useModal();
 
+  /** HTML5 drag: scroll only when cursor is above/below the list clip (header/footer overlap), never from inside */
   useEffect(() => {
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (!entry.isIntersecting) return;
-          const el = entry.target as HTMLElement;
-          const address = el.getAttribute('data-address');
-          if (!address || fetchingAddressesRef.current.has(address)) return;
-          fetchingAddressesRef.current.add(address);
-          getPrimaryNameForAvatar(address)
-            .then((name) => {
-              if (name) {
-                setPrimaryNamesByAddress((prev) =>
-                  prev[address] === undefined
-                    ? { ...prev, [address]: name }
-                    : prev
-                );
-              }
-            })
-            .catch(() => {})
-            .finally(() => {
-              fetchingAddressesRef.current.delete(address);
-              observerRef.current?.unobserve(el);
-            });
-        });
-      },
-      { rootMargin: '100px', threshold: 0.01 }
-    );
-    return () => {
-      observerRef.current?.disconnect();
-      observerRef.current = null;
+    const onDocumentDragOver = (event: globalThis.DragEvent) => {
+      if (!walletReorderDragActiveRef.current) return;
+      if (entryModeRef.current !== 'entry' || editingWalletIndexRef.current !== null)
+        return;
+      const el = accountsScrollRef.current;
+      if (!el || el.scrollHeight <= el.clientHeight) return;
+
+      const rect = el.getBoundingClientRect();
+      const x = event.clientX;
+      const y = event.clientY;
+      const horizontalPad = 80;
+      if (x < rect.left - horizontalPad || x > rect.right + horizontalPad) return;
+
+      /** Only past the clipped top/bottom — no scrolling from the interior of the list */
+      const maxScroll = Math.max(0, el.scrollHeight - el.clientHeight);
+      let delta = 0;
+
+      if (el.scrollTop > 0 && y < rect.top) {
+        const depthPx = rect.top - y;
+        const t = Math.min(1, depthPx / 100);
+        delta -= Math.round((8 + 28) * (0.25 + 0.75 * t));
+      }
+      if (el.scrollTop < maxScroll && y > rect.bottom) {
+        const depthPx = y - rect.bottom;
+        const t = Math.min(1, depthPx / 100);
+        delta += Math.round((8 + 28) * (0.25 + 0.75 * t));
+      }
+
+      if (delta !== 0) {
+        event.preventDefault();
+        el.scrollTop = Math.min(maxScroll, Math.max(0, el.scrollTop + delta));
+      }
     };
+
+    document.addEventListener('dragover', onDocumentDragOver);
+    return () => document.removeEventListener('dragover', onDocumentDragOver);
+  }, []);
+
+  const registerReorderDragActive = useCallback(
+    (active: boolean) => {
+      walletReorderDragActiveRef.current = active;
+    },
+    []
+  );
+
+  const handleWalletReorderDragStart = useCallback((sourceIdx: number) => {
+    setWalletReorderDragSourceIndex(sourceIdx);
+  }, []);
+
+  const handleWalletReorderDragEnd = useCallback(() => {
+    setWalletReorderDragSourceIndex(null);
+    setWalletDropGapBeforeIndex(null);
   }, []);
 
+  const handleWalletReorderHover = useCallback(
+    (rowIdx: number, event: ReactDragEvent<HTMLElement>) => {
+      const bounds = event.currentTarget.getBoundingClientRect();
+      const gapBeforeIdx =
+        event.clientY < bounds.top + bounds.height / 2 ? rowIdx : rowIdx + 1;
+      setWalletDropGapBeforeIndex(gapBeforeIdx);
+    },
+    []
+  );
+
+  const handleWalletReorderHoverLeave = useCallback(
+    (event: ReactDragEvent<HTMLElement>) => {
+      const nextTarget = event.relatedTarget as Node | null;
+      if (
+        nextTarget instanceof Node &&
+        event.currentTarget.contains(nextTarget)
+      ) {
+        return;
+      }
+      setWalletDropGapBeforeIndex(null);
+    },
+    []
+  );
+
+  const changeImportView = useCallback(
+    (view: ImportView) => {
+      setImportView(view);
+      onImportViewChange?.(view);
+    },
+    [onImportViewChange]
+  );
+
+  const walletAddressKey = useMemo(() => {
+    return wallets
+      .map((wallet) => wallet?.address0)
+      .filter(Boolean)
+      .join('|');
+  }, [wallets]);
+  const walletAddresses = useMemo(
+    () => (walletAddressKey ? walletAddressKey.split('|') : []),
+    [walletAddressKey]
+  );
+
   const registerCardRef = useCallback((address: string) => {
     return (el: HTMLElement | null) => {
       if (!el) return;
       el.setAttribute('data-address', address);
-      observerRef.current?.observe(el);
     };
   }, []);
 
-  const { getRootProps, getInputProps } = useDropzone({
-    accept: {
-      'application/json': ['.json'], // Only accept JSON files
-    },
-    onDrop: async (acceptedFiles) => {
-      const files: any = acceptedFiles;
-      let importedWallets: any = [];
-
-      for (const file of files) {
-        try {
-          const fileContents = await new Promise((resolve, reject) => {
-            const reader = new FileReader();
+  useEffect(() => {
+    if (walletAddresses.length === 0) {
+      setPrimaryNamesByAddress({});
+      return;
+    }
 
-            reader.onabort = () => reject('File reading was aborted'); // TODO translate
-            reader.onerror = () => reject('File reading has failed');
-            reader.onload = () => {
-              // Resolve the promise with the reader result when reading completes
-              resolve(reader.result);
-            };
+    let canceled = false;
 
-            // Read the file as text
-            reader.readAsText(file);
-          });
-          if (typeof fileContents !== 'string') continue;
-          const parsedData = JSON.parse(fileContents);
-          importedWallets.push({ ...parsedData, filename: file?.name });
-        } catch (error) {
-          console.error(error);
+    getPrimaryNamesForAddresses(walletAddresses)
+      .then((namesByAddress) => {
+        if (!canceled) {
+          setPrimaryNamesByAddress(namesByAddress);
         }
-      }
+      })
+      .catch((error) => {
+        console.error('Unable to fetch wallet primary names:', error);
+      });
 
-      const uniqueInitialMap = new Map();
+    return () => {
+      canceled = true;
+    };
+  }, [walletAddresses]);
 
-      // Only add a message if it doesn't already exist in the Map
-      importedWallets.forEach((wallet) => {
-        if (!wallet?.address0) return;
-        if (!uniqueInitialMap.has(wallet?.address0)) {
-          uniqueInitialMap.set(wallet?.address0, wallet);
+  const persistWallets = useCallback(async (nextWallets: any[]) => {
+    setWallets(nextWallets);
+    await storeWallets(nextWallets);
+  }, []);
+
+  const getLatestWallets = useCallback(async () => {
+    // Import flows can outlive the initial wallet load/migration. Re-read
+    // storage before merging so a stale local list cannot overwrite accounts.
+    const latestWallets = await getWallets();
+    return Array.isArray(latestWallets) ? latestWallets : wallets;
+  }, [wallets]);
+
+  useEffect(() => {
+    setIsLoading(true);
+    getWallets()
+      .then((res) => {
+        if (res && Array.isArray(res)) {
+          setWallets(res);
         }
+        setIsLoading(false);
+      })
+      .catch((error) => {
+        console.error(error);
+        setIsLoading(false);
       });
+  }, []);
 
-      const data = Array.from(uniqueInitialMap.values());
+  useEffect(() => {
+    if (!isLoading) {
+      onReady?.();
+    }
+  }, [isLoading, onReady]);
 
-      if (data && data?.length > 0) {
-        const uniqueNewWallets = data.filter(
-          (newWallet) =>
-            !wallets.some(
-              (existingWallet) =>
-                existingWallet?.address0 === newWallet?.address0
-            )
-        );
-        setWallets([...wallets, ...uniqueNewWallets]);
-      }
-    },
-  });
+  useEffect(() => {
+    if (wallets.length <= 8) {
+      setWalletEntrySearchOpen(false);
+      setWalletEntryFilterQuery('');
+    }
+  }, [wallets.length]);
 
-  const { getRootProps: getRootPropsTemp, getInputProps: getInputPropsTemp } =
-    useDropzone({
-      accept: {
-        'application/json': ['.json'], // Only accept JSON files
-      },
-      multiple: false,
-      onDrop: async (acceptedFiles) => {
-        const files: any = acceptedFiles;
-        let importedWallet: any = null;
-
-        for (const file of files) {
-          try {
-            const fileContents = await new Promise((resolve, reject) => {
-              const reader = new FileReader();
-
-              reader.onabort = () => reject('File reading was aborted'); // TODO translate
-              reader.onerror = () => reject('File reading has failed');
-              reader.onload = () => {
-                // Resolve the promise with the reader result when reading completes
-                resolve(reader.result);
-              };
-
-              // Read the file as text
-              reader.readAsText(file);
-            });
-            if (typeof fileContents !== 'string') continue;
-            const parsedData = JSON.parse(fileContents);
-            importedWallet = parsedData;
-          } catch (error) {
-            console.error(error);
-          }
-        }
+  const selectedWalletFunc = (
+    wallet,
+    transitionSnapshot?: AuthUnlockTransitionSnapshot
+  ) => {
+    if (transitionSnapshot && mode === 'entry') {
+      onWalletUnlockStart?.(transitionSnapshot);
+      window.setTimeout(() => {
+        setRawWallet(wallet);
+        setExtState('wallet-dropped');
+      }, 130);
+      return;
+    }
 
-        if (importedWallet) {
-          selectedWalletFunc(importedWallet);
-        }
-      },
-    });
+    setRawWallet(wallet);
+    setExtState('wallet-dropped');
+  };
 
   const updateWalletItem = (idx, wallet) => {
-    setWallets((prev) => {
-      let copyPrev = [...prev];
-      if (wallet === null) {
-        copyPrev.splice(idx, 1); // Use splice to remove the item
-        return copyPrev;
-      } else {
-        copyPrev[idx] = wallet; // Update the wallet at the specified index
-        return copyPrev;
-      }
-    });
+    if (wallet === null) {
+      setEditingWalletIndex(null);
+    }
+
+    const nextWallets = [...wallets];
+    if (wallet === null) {
+      nextWallets.splice(idx, 1);
+    } else {
+      nextWallets[idx] = wallet;
+    }
+
+    void persistWallets(nextWallets).catch(console.error);
   };
 
-  const handleSetSeedValue = async () => {
+  /** `gapBeforeIndex` is visual slot index in the pre-move ordering (0..wallets.length) */
+  const finalizeWalletReorder = useCallback(
+    (fromIndex: number, gapBeforeIndex: number) => {
+      const n = wallets.length;
+      if (
+        !Number.isInteger(fromIndex) ||
+        !Number.isInteger(gapBeforeIndex) ||
+        fromIndex < 0 ||
+        fromIndex >= n ||
+        gapBeforeIndex < 0 ||
+        gapBeforeIndex > n
+      )
+        return;
+
+      const nextWallets = [...wallets];
+      const [movedWallet] = nextWallets.splice(fromIndex, 1);
+      const rawInsert =
+        gapBeforeIndex > fromIndex ? gapBeforeIndex - 1 : gapBeforeIndex;
+      const insertAt = Math.max(0, Math.min(rawInsert, nextWallets.length));
+      nextWallets.splice(insertAt, 0, movedWallet);
+
+      const unchanged =
+        wallets.length === nextWallets.length &&
+        wallets.every(
+          (walletItem, walletIdx) =>
+            walletItem?.address0 === nextWallets[walletIdx]?.address0
+        );
+      if (unchanged) return;
+
+      void persistWallets(nextWallets).catch(console.error);
+    },
+    [persistWallets, wallets]
+  );
+
+  const importSeedphrase = async () => {
     try {
-      setIsOpenSeedModal(true);
-      const { seedValue, seedName, password } = await show({
-        message: '',
-        publishFee: '',
-      });
       setIsLoadingEncryptSeed(true);
-      const res = await decryptStoredWalletFromSeedPhrase(seedValue);
+      setSeedError('');
+      const res = await decryptStoredWalletFromSeedPhrase(seedValue.trim());
       const wallet2 = new PhraseWallet(res, walletVersion);
       const wallet = await wallet2.generateSaveWalletData(
         password,
         crypto.kdfThreads,
         () => {}
       );
+
       if (wallet?.address0) {
-        setWallets([
-          ...wallets,
-          {
-            ...wallet,
-            name: seedName,
-          },
-        ]);
-        setIsOpenSeedModal(false);
+        const latestWallets = await getLatestWallets();
+        const existsAlready = latestWallets.some(
+          (existingWallet) => existingWallet?.address0 === wallet.address0
+        );
+        const nextWallets = existsAlready
+          ? latestWallets
+          : [
+              ...latestWallets,
+              {
+                ...wallet,
+                name: '',
+              },
+            ];
+
+        if (!existsAlready) {
+          await persistWallets(nextWallets);
+        }
         setSeedValue('');
-        setSeedName('');
         setPassword('');
-        setSeedError('');
-      } else {
-        setSeedError(
-          t('auth:message.error.account_creation', {
-            postProcess: 'capitalizeFirstChar',
-          })
+        changeImportView('choice');
+        setBackupImportHint(
+          existsAlready
+            ? t('auth:entry.seed_import_duplicate')
+            : t('auth:entry.seed_import_success')
         );
+        if (!existsAlready) {
+          setExtState('not-authenticated');
+        }
+      } else {
+        setSeedError(t('auth:entry.seed_import_error'));
       }
-    } catch (error) {
-      setSeedError(
-        error?.message ||
-          t('auth:message.error.account_creation', {
-            postProcess: 'capitalizeFirstChar',
-          })
-      );
+    } catch (error: any) {
+      setSeedError(error?.message || t('auth:entry.seed_import_error'));
     } finally {
       setIsLoadingEncryptSeed(false);
     }
   };
 
-  const selectedWalletFunc = (wallet) => {
-    setRawWallet(wallet);
-    setExtState('wallet-dropped');
-  };
+  const readWalletFiles = useCallback(
+    async (acceptedFiles: File[]) => {
+      const importedWallets: any[] = [];
 
-  useEffect(() => {
-    setIsLoading(true);
-    getWallets()
-      .then((res) => {
-        if (res && Array.isArray(res)) {
-          setWallets(res);
+      for (const file of acceptedFiles) {
+        try {
+          const fileContents = await new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onabort = () =>
+              reject(new Error(t('auth:entry.import_file_read_aborted')));
+            reader.onerror = () =>
+              reject(new Error(t('auth:entry.import_file_read_failed')));
+            reader.onload = () => resolve(reader.result);
+            reader.readAsText(file);
+          });
+          if (typeof fileContents !== 'string') continue;
+          const parsedData = JSON.parse(fileContents);
+          importedWallets.push({ ...parsedData, filename: file.name });
+        } catch (error) {
+          console.error(error);
+        }
+      }
+
+      const uniqueInitialMap = new Map();
+      importedWallets.forEach((wallet) => {
+        if (!wallet?.address0) return;
+        if (!uniqueInitialMap.has(wallet.address0)) {
+          uniqueInitialMap.set(wallet.address0, wallet);
         }
-        setIsLoading(false);
-      })
-      .catch((error) => {
-        console.error(error);
-        setIsLoading(false);
       });
-  }, []);
 
-  useEffect(() => {
-    if (!isLoading && wallets && Array.isArray(wallets)) {
-      storeWallets(wallets);
+      return Array.from(uniqueInitialMap.values());
+    },
+    [t]
+  );
+
+  const { getRootProps, getInputProps } = useDropzone({
+    accept: {
+      'application/json': ['.json'],
+    },
+    onDrop: async (acceptedFiles) => {
+      const uniqueWallets = await readWalletFiles(acceptedFiles as File[]);
+      if (!uniqueWallets.length) return;
+
+      const latestWallets = await getLatestWallets();
+      const uniqueNewWallets = uniqueWallets.filter(
+        (newWallet) =>
+          !latestWallets.some(
+            (existingWallet) => existingWallet?.address0 === newWallet?.address0
+          )
+      );
+
+      if (uniqueNewWallets.length > 0) {
+        const nextWallets = [...latestWallets, ...uniqueNewWallets];
+        await persistWallets(nextWallets);
+      }
+
+      setBackupImportHint(
+        uniqueNewWallets.length > 0
+          ? t('auth:entry.import_backup_success', {
+              count: uniqueNewWallets.length,
+            })
+          : t('auth:entry.import_backup_duplicate')
+      );
+      changeImportView('choice');
+      if (uniqueNewWallets.length > 0) {
+        setExtState('not-authenticated');
+      }
+    },
+  });
+
+  const {
+    getRootProps: getAuthenticateRootProps,
+    getInputProps: getAuthenticateInputProps,
+  } = useDropzone({
+    accept: {
+      'application/json': ['.json'],
+    },
+    multiple: false,
+    onDrop: async (acceptedFiles) => {
+      const uniqueWallets = await readWalletFiles(acceptedFiles as File[]);
+      const wallet = uniqueWallets[0];
+
+      if (!wallet?.address0) {
+        setBackupImportHint(t('auth:entry.import_backup_invalid'));
+        return;
+      }
+
+      setBackupImportHint('');
+      setRawWallet(wallet);
+      setExtState('wallet-dropped');
+    },
+  });
+
+  const displayedWallets = useMemo(() => {
+    const base =
+      editingWalletIndex === null
+        ? wallets.map((wallet, idx) => ({ wallet, idx }))
+        : wallets
+            .map((wallet, idx) => ({ wallet, idx }))
+            .filter(({ idx: rowIdx }) => rowIdx === editingWalletIndex);
+
+    if (
+      mode !== 'entry' ||
+      editingWalletIndex !== null ||
+      wallets.length <= 8
+    ) {
+      return base;
     }
-  }, [wallets, isLoading]);
 
-  if (isLoading) return null;
+    const q = walletEntryFilterQuery.trim().toLowerCase();
+    if (!q) return base;
 
-  return (
-    <Box>
-      {wallets?.length === 0 || !wallets ? (
-        <>
-          <Typography>
-            {t('auth:message.generic.no_account', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Typography>
+    return base.filter(({ wallet }) => {
+      const address = String(wallet?.address0 || '').toLowerCase();
+      const primary = String(
+        wallet?.address0 ? primaryNamesByAddress[wallet.address0] || '' : ''
+      ).toLowerCase();
+      const name = String(wallet?.name || '').toLowerCase();
+      const note = String(wallet?.note || '').toLowerCase();
+      const fileLabel =
+        wallet?.filename != null
+          ? String(parsefilenameQortal(wallet.filename)).toLowerCase()
+          : '';
+      return (
+        address.includes(q) ||
+        primary.includes(q) ||
+        name.includes(q) ||
+        note.includes(q) ||
+        fileLabel.includes(q)
+      );
+    });
+  }, [
+    editingWalletIndex,
+    mode,
+    primaryNamesByAddress,
+    walletEntryFilterQuery,
+    wallets,
+  ]);
 
-          <Spacer height="75px" />
-        </>
-      ) : (
-        <>
-          <Typography>
-            {t('auth:message.generic.your_accounts', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Typography>
+  if (isLoading) return null;
 
-          <Spacer height="30px" />
-        </>
-      )}
+  const showsEntryWalletFilter =
+    mode === 'entry' && editingWalletIndex === null && wallets.length > 8;
 
-      {rawWallet && (
-        <Box>
-          <Typography>
-            {t('auth:account.selected', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            :
-          </Typography>
-          {rawWallet?.name && <Typography>{rawWallet.name}</Typography>}
-          {rawWallet?.address0 && (
-            <Typography>{rawWallet?.address0}</Typography>
-          )}
-        </Box>
-      )}
+  const entryFilteredNoMatches =
+    showsEntryWalletFilter &&
+    walletEntryFilterQuery.trim().length > 0 &&
+    displayedWallets.length === 0;
 
-      {wallets?.length > 0 && (
+  const entryListFixedViewport =
+    mode === 'entry' && editingWalletIndex === null;
+
+  const accountsList = (
+    <Box
+      ref={accountsScrollRef}
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: mode === 'entry' ? 1.4 : 0,
+        ...(entryListFixedViewport
+          ? {
+              maxHeight: ENTRY_WALLET_SCROLL_HEIGHT_PX,
+              minHeight: ENTRY_WALLET_SCROLL_HEIGHT_PX,
+              overflowY: 'auto',
+              pr: 0.35,
+            }
+          : {
+              maxHeight: 'none',
+              overflowY: 'visible',
+              pr: 0,
+            }),
+        width: '100%',
+      }}
+    >
+      {entryFilteredNoMatches ? (
         <Box
           sx={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
-            gap: '16px',
-            maxHeight: '60vh',
-            overflowY: 'auto',
-            width: '100%',
-            maxWidth: '700px',
-            padding: '8px',
+            alignItems: 'center',
+            alignSelf: 'stretch',
+            display: 'flex',
+            flexGrow: 1,
+            justifyContent: 'center',
+            minHeight: 0,
+            px: 1,
           }}
         >
-          {wallets?.map((wallet, idx) => {
-            return (
-              <WalletItem
-                setSelectedWallet={selectedWalletFunc}
-                key={wallet?.address0}
-                wallet={wallet}
-                idx={idx}
-                updateWalletItem={updateWalletItem}
-                primaryName={
-                  wallet?.address0
-                    ? primaryNamesByAddress[wallet.address0]
-                    : undefined
-                }
-                registerCardRef={registerCardRef}
-              />
-            );
-          })}
-        </Box>
-      )}
-
-      <Box
-        sx={{
-          alignItems: 'center',
-          bottom: wallets?.length === 0 ? 'unset' : '20px',
-          display: 'flex',
-          gap: '10px',
-          position: wallets?.length === 0 ? 'relative' : 'fixed',
-          right: wallets?.length === 0 ? 'unset' : '20px',
-        }}
-      >
-        <HtmlTooltip
-          title={
-            <Fragment>
-              <Typography
-                color="inherit"
-                sx={{
-                  fontSize: '16px',
-                }}
-              >
-                {t('auth:temp_auth.tooltip', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </Typography>
-            </Fragment>
-          }
-        >
-          <CustomButton
-            {...getRootPropsTemp()}
-            sx={{
-              padding: '10px',
-              display: 'inline',
-            }}
-          >
-            <input {...getInputPropsTemp()} />
-            {t('auth:temp_auth.button', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </CustomButton>
-        </HtmlTooltip>
-        <HtmlTooltip
-          title={
-            <Fragment>
-              <Typography
-                color="inherit"
-                sx={{
-                  fontSize: '16px',
-                }}
-              >
-                {t('auth:tips.existing_account', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </Typography>
-            </Fragment>
-          }
-        >
-          <CustomButton
-            onClick={handleSetSeedValue}
+          <Typography
             sx={{
-              padding: '10px',
-              display: 'inline',
+              color: 'rgba(214,221,233,0.56)',
+              fontSize: '0.9rem',
+              lineHeight: 1.55,
+              textAlign: 'center',
             }}
           >
-            {t('auth:action.add.seed_phrase', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </CustomButton>
-        </HtmlTooltip>
-
-        <HtmlTooltip
-          title={
-            <Fragment>
-              <Typography
-                color="inherit"
+            {t('auth:entry.filter_no_results')}
+          </Typography>
+        </Box>
+      ) : (
+        <>
+          {displayedWallets.map(({ wallet, idx }) => (
+        <Fragment key={wallet?.address0}>
+          {walletDropGapBeforeIndex !== null &&
+            walletReorderDragSourceIndex !== null &&
+            walletDropGapBeforeIndex === idx && (
+              <Box
+                aria-hidden
                 sx={{
-                  fontSize: '16px',
+                  alignSelf: 'stretch',
+                  backgroundColor: theme.palette.primary.main,
+                  borderRadius: '999px',
+                  boxShadow:
+                    theme.palette.mode === 'light'
+                      ? `0 0 0 1px ${alpha(theme.palette.primary.dark, 0.12)}, 0 3px 16px ${alpha(theme.palette.primary.main, 0.38)}`
+                      : `0 0 0 1px ${alpha(theme.palette.primary.light, 0.28)}, 0 0 20px ${alpha(theme.palette.primary.main, 0.45)}`,
+                  flexShrink: 0,
+                  height: mode === 'entry' ? 5 : 4,
+                  mx: mode === 'entry' ? 0.85 : 0,
                 }}
-              >
-                {t('auth:tips.additional_wallet', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </Typography>
-            </Fragment>
-          }
-        >
-          <CustomButton
+              />
+            )}
+          <WalletRow
+            idx={idx}
+            editingWalletIndex={editingWalletIndex}
+            finalizeWalletReorder={finalizeWalletReorder}
+            mode={mode}
+            onReorderDragEnd={handleWalletReorderDragEnd}
+            onReorderDragStart={handleWalletReorderDragStart}
+            primaryName={
+              wallet?.address0 ? primaryNamesByAddress[wallet.address0] : undefined
+            }
+            registerCardRef={registerCardRef}
+            registerReorderDragActive={
+              mode === 'entry' && editingWalletIndex === null
+                ? registerReorderDragActive
+                : undefined
+            }
+            reorderDragHover={handleWalletReorderHover}
+            reorderDragHoverLeave={handleWalletReorderHoverLeave}
+            reorderDragSourceIndex={walletReorderDragSourceIndex}
+            setEditingWalletIndex={setEditingWalletIndex}
+            setSelectedWallet={selectedWalletFunc}
+            updateWalletItem={updateWalletItem}
+            wallet={wallet}
+          />
+        </Fragment>
+      ))}
+      {walletDropGapBeforeIndex !== null &&
+        walletReorderDragSourceIndex !== null &&
+        walletDropGapBeforeIndex === wallets.length && (
+          <Box
+            aria-hidden
             sx={{
-              padding: '10px',
+              alignSelf: 'stretch',
+              backgroundColor: theme.palette.primary.main,
+              borderRadius: '999px',
+              boxShadow:
+                theme.palette.mode === 'light'
+                  ? `0 0 0 1px ${alpha(theme.palette.primary.dark, 0.12)}, 0 3px 16px ${alpha(theme.palette.primary.main, 0.38)}`
+                  : `0 0 0 1px ${alpha(theme.palette.primary.light, 0.28)}, 0 0 20px ${alpha(theme.palette.primary.main, 0.45)}`,
+              flexShrink: 0,
+              height: mode === 'entry' ? 5 : 4,
+              mx: mode === 'entry' ? 0.85 : 0,
             }}
-            {...getRootProps()}
-          >
-            <input {...getInputProps()} />
-            {t('auth:action.add.account', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </CustomButton>
-        </HtmlTooltip>
-      </Box>
-
-      <Dialog
-        open={isOpenSeedModal}
-        aria-labelledby="alert-dialog-title"
-        aria-describedby="alert-dialog-description"
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' && seedValue && seedName && password) {
-            onOk({ seedValue, seedName, password });
-          }
-        }}
+          />
+        )}
+        </>
+      )}
+    </Box>
+  );
+
+  const entryAccountListColumn = (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, width: '100%' }}>
+      {showsEntryWalletFilter && (
+        <Box sx={{ alignItems: 'center', display: 'flex', gap: 0.75, width: '100%' }}>
+          <Tooltip placement="top" title={t('auth:entry.filter_accounts_aria')}>
+            <IconButton
+              aria-expanded={walletEntrySearchOpen}
+              aria-label={t('auth:entry.filter_accounts_aria')}
+              size="small"
+              tabIndex={walletEntrySearchOpen ? 0 : -1}
+              onClick={() => setWalletEntrySearchOpen((open) => !open)}
+              sx={{
+                '&:hover': {
+                  backgroundColor: alpha(theme.palette.primary.main, 0.1),
+                },
+                border: `1px solid ${
+                  walletEntrySearchOpen || walletEntryFilterQuery.trim()
+                    ? alpha(theme.palette.primary.main, 0.45)
+                    : alpha(theme.palette.text.primary, 0.12)
+                }`,
+                borderRadius: '9px',
+                color: theme.palette.text.secondary,
+                flexShrink: 0,
+                height: 34,
+                width: 34,
+              }}
+            >
+              <Badge
+                color="primary"
+                invisible={!walletEntryFilterQuery.trim()}
+                variant="dot"
+              >
+                <ManageSearchRoundedIcon sx={{ fontSize: 21 }} />
+              </Badge>
+            </IconButton>
+          </Tooltip>
+          {walletEntrySearchOpen && (
+            <TextField
+              autoFocus
+              fullWidth
+              placeholder={t('auth:entry.filter_placeholder')}
+              size="small"
+              value={walletEntryFilterQuery}
+              variant="outlined"
+              InputProps={{
+                endAdornment: walletEntryFilterQuery ? (
+                  <InputAdornment position="end">
+                    <IconButton
+                      aria-label={t('auth:entry.filter_clear')}
+                      edge="end"
+                      size="small"
+                      sx={{ color: theme.palette.text.secondary }}
+                      onClick={() => setWalletEntryFilterQuery('')}
+                    >
+                      <ClearRoundedIcon sx={{ fontSize: 18 }} />
+                    </IconButton>
+                  </InputAdornment>
+                ) : undefined,
+              }}
+              onChange={(e) => setWalletEntryFilterQuery(e.target.value)}
+              sx={{
+                '& .MuiOutlinedInput-root': {
+                  backgroundColor: alpha(theme.palette.background.paper, 0.45),
+                  borderRadius: '9px',
+                  fontSize: '0.875rem',
+                  minHeight: 36,
+                },
+                minWidth: 0,
+              }}
+            />
+          )}
+        </Box>
+      )}
+      {accountsList}
+    </Box>
+  );
+
+  if (mode === 'entry') {
+    return wallets.length === 0 ? (
+      <Typography
+        sx={{
+          color: 'rgba(214,221,233,0.56)',
+          fontSize: '0.92rem',
+          lineHeight: 1.6,
+          textAlign: 'center',
+        }}
       >
-        <DialogTitle
-          id="alert-dialog-title"
-          sx={{
-            textAlign: 'center',
-            color: theme.palette.text.primary,
-            fontWeight: 'bold',
-            opacity: 1,
-          }}
-        >
-          {t('auth:message.generic.type_seed', {
-            postProcess: 'capitalizeFirstChar',
-          })}
-        </DialogTitle>
+        {t('auth:entry.no_accounts')}
+      </Typography>
+    ) : (
+      entryAccountListColumn
+    );
+  }
 
-        <DialogContent>
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 1.5,
+        width: '100%',
+      }}
+    >
+      {importView === 'choice' && (
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+          <ChoiceRow
+            description={t('auth:entry.import_choice_backup_description')}
+            icon={<DescriptionRoundedIcon sx={{ fontSize: 22 }} />}
+            onClick={() => changeImportView('backup')}
+            title={t('auth:entry.import_choice_backup_title')}
+          />
+          <ChoiceRow
+            description={t('auth:entry.import_choice_authenticate_description')}
+            icon={<LoginRoundedIcon sx={{ fontSize: 22 }} />}
+            onClick={() => changeImportView('authenticate')}
+            title={t('auth:entry.import_choice_authenticate_title')}
+          />
+          <ChoiceRow
+            description={t('auth:entry.import_choice_seed_description')}
+            icon={<VpnKeyRoundedIcon sx={{ fontSize: 22 }} />}
+            onClick={() => changeImportView('seedphrase')}
+            title={t('auth:entry.import_choice_seed_title')}
+          />
+          {backupImportHint && (
+            <Typography
+              sx={{
+                color: 'rgba(214,221,233,0.56)',
+                fontSize: '0.84rem',
+              }}
+            >
+              {backupImportHint}
+            </Typography>
+          )}
+        </Box>
+      )}
+
+      {importView === 'backup' && (
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.2 }}>
+          <InlineReturn onClick={() => changeImportView('choice')} />
           <Box
+            {...getRootProps()}
             sx={{
+              alignItems: 'center',
+              backgroundColor: 'rgba(255,255,255,0.02)',
+              border: '1px dashed rgba(255,255,255,0.12)',
+              borderRadius: '8px',
+              cursor: 'pointer',
               display: 'flex',
               flexDirection: 'column',
+              gap: 0.8,
+              justifyContent: 'center',
+              minHeight: 170,
+              px: 3,
+              py: 3,
+              textAlign: 'center',
+              transition: 'background-color 160ms ease, border-color 160ms ease',
+              '&:hover': {
+                backgroundColor: 'rgba(255,255,255,0.03)',
+                borderColor: 'rgba(255,255,255,0.18)',
+              },
             }}
           >
-            <Label>
-              {t('core:name', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Label>
-            <Input
-              placeholder={t('core:name', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-              value={seedName}
-              onChange={(e) => setSeedName(e.target.value)}
-            />
+            <input {...getInputProps()} />
+            <Typography sx={{ fontSize: '1rem', fontWeight: 700 }}>
+              {t('auth:entry.import_backup_heading')}
+            </Typography>
+            <Typography
+              sx={{
+                color: 'rgba(214,221,233,0.56)',
+                fontSize: '0.88rem',
+                lineHeight: 1.6,
+                maxWidth: 300,
+              }}
+            >
+              {t('auth:entry.import_backup_drop_hint')}
+            </Typography>
+          </Box>
+          {backupImportHint && (
+            <Typography
+              sx={{
+                color: 'rgba(214,221,233,0.56)',
+                fontSize: '0.84rem',
+              }}
+            >
+              {backupImportHint}
+            </Typography>
+          )}
+        </Box>
+      )}
+
+      {importView === 'authenticate' && (
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.2 }}>
+          <InlineReturn onClick={() => changeImportView('choice')} />
+          <Box
+            {...getAuthenticateRootProps()}
+            sx={{
+              alignItems: 'center',
+              backgroundColor: 'rgba(255,255,255,0.02)',
+              border: '1px dashed rgba(255,255,255,0.12)',
+              borderRadius: '8px',
+              cursor: 'pointer',
+              display: 'flex',
+              flexDirection: 'column',
+              gap: 0.8,
+              justifyContent: 'center',
+              minHeight: 170,
+              px: 3,
+              py: 3,
+              textAlign: 'center',
+              transition: 'background-color 160ms ease, border-color 160ms ease',
+              '&:hover': {
+                backgroundColor: 'rgba(255,255,255,0.03)',
+                borderColor: 'rgba(255,255,255,0.18)',
+              },
+            }}
+          >
+            <input {...getAuthenticateInputProps()} />
+            <Typography sx={{ fontSize: '1rem', fontWeight: 700 }}>
+              {t('auth:entry.import_authenticate_heading')}
+            </Typography>
+            <Typography
+              sx={{
+                color: 'rgba(214,221,233,0.56)',
+                fontSize: '0.88rem',
+                lineHeight: 1.6,
+                maxWidth: 300,
+              }}
+            >
+              {t('auth:entry.import_authenticate_drop_hint')}
+            </Typography>
+          </Box>
+          {backupImportHint && (
+            <Typography
+              sx={{
+                color: 'rgba(214,221,233,0.56)',
+                fontSize: '0.84rem',
+              }}
+            >
+              {backupImportHint}
+            </Typography>
+          )}
+        </Box>
+      )}
 
-            <Spacer height="7px" />
+      {importView === 'seedphrase' && (
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.2 }}>
+          <InlineReturn onClick={() => changeImportView('choice')} />
 
-            <Label>
-              {t('auth:seed_phrase', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Label>
-            <PasswordField
-              placeholder={t('auth:seed_phrase', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-              id="standard-adornment-password"
+          <Box>
+            <AuthSectionLabel>
+              {t('auth:entry.import_seed_label')}
+            </AuthSectionLabel>
+            <TextField
+              fullWidth
+              multiline
+              minRows={4}
               value={seedValue}
-              onChange={(e) => setSeedValue(e.target.value)}
-              autoComplete="off"
-              sx={{
-                width: '100%',
+              onChange={(event) => setSeedValue(event.target.value)}
+              placeholder={t('auth:entry.import_seed_placeholder')}
+              sx={seedTextFieldSx(theme, isSeedVisible)}
+              InputProps={{
+                endAdornment: (
+                  <ButtonBase
+                    onClick={() => setIsSeedVisible((prev) => !prev)}
+                    sx={{
+                      alignSelf: 'flex-start',
+                      color: 'rgba(214,221,233,0.62)',
+                      mt: 1,
+                    }}
+                  >
+                    {isSeedVisible ? <VisibilityOffIcon /> : <VisibilityIcon />}
+                  </ButtonBase>
+                ),
               }}
             />
+          </Box>
 
-            <Spacer height="7px" />
-
-            <Label>
-              {t('auth:action.choose_password', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Label>
+          <Box>
+            <AuthSectionLabel>
+              {t('auth:entry.import_wallet_password')}
+            </AuthSectionLabel>
             <PasswordField
-              id="standard-adornment-password"
+              id="wallet-import-password"
+              name="wallet-import-password"
+              onChange={(event) => setPassword(event.target.value)}
+              suppressAutofill
+              sx={{ width: '100%' }}
               value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              autoComplete="off"
-              sx={{
-                width: '100%',
-              }}
             />
           </Box>
-        </DialogContent>
-
-        <DialogActions>
-          <Button
-            disabled={isLoadingEncryptSeed}
-            variant="contained"
-            onClick={() => {
-              setIsOpenSeedModal(false);
-              setSeedValue('');
-              setSeedName('');
-              setPassword('');
-              setSeedError('');
-            }}
-          >
-            {t('core:action.close', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Button>
-
-          <LoadingButton
-            autoFocus
-            disabled={!seedValue || !seedName || !password}
-            loading={isLoadingEncryptSeed}
-            onClick={() => {
-              if (!seedValue || !seedName || !password) return;
-              onOk({ seedValue, seedName, password });
-            }}
-            variant="contained"
+
+          {seedError && (
+            <Typography
+              sx={{
+                color: theme.palette.other.danger,
+                fontSize: '0.84rem',
+              }}
+            >
+              {seedError}
+            </Typography>
+          )}
+
+          <AuthButton
+            disabled={!seedValue.trim() || !password.trim() || isLoadingEncryptSeed}
+            onClick={importSeedphrase}
           >
-            {t('core:action.add', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </LoadingButton>
+            {isLoadingEncryptSeed
+              ? t('auth:entry.importing_account')
+              : t('auth:entry.import_account')}
+          </AuthButton>
+        </Box>
+      )}
+    </Box>
+  );
+};
 
+const ChoiceRow = ({ icon, title, description, onClick }) => {
+  const theme = useTheme();
+  return (
+    <ButtonBase
+      onClick={onClick}
+      sx={{
+        alignItems: 'center',
+        backgroundColor: 'rgba(255,255,255,0.02)',
+        border: '1px solid rgba(255,255,255,0.08)',
+        borderRadius: '8px',
+        display: 'flex',
+        gap: 1.2,
+        justifyContent: 'space-between',
+        minHeight: 88,
+        px: 1.4,
+        py: 1.2,
+        textAlign: 'left',
+        transition: 'background-color 160ms ease, border-color 160ms ease',
+        '&:hover': {
+          backgroundColor: 'rgba(255,255,255,0.035)',
+          borderColor: 'rgba(255,255,255,0.12)',
+        },
+      }}
+    >
+      <Box sx={{ alignItems: 'center', display: 'flex', gap: 1.2 }}>
+        <Box
+          sx={{
+            alignItems: 'center',
+            border: '1px solid rgba(255,255,255,0.1)',
+            borderRadius: '8px',
+            color: 'rgba(214,221,233,0.74)',
+            display: 'inline-flex',
+            height: 42,
+            justifyContent: 'center',
+            width: 42,
+          }}
+        >
+          {icon}
+        </Box>
+        <Box>
+          <Typography sx={{ fontSize: '0.98rem', fontWeight: 700 }}>
+            {title}
+          </Typography>
           <Typography
             sx={{
-              fontSize: '14px',
-              visibility: seedError ? 'visible' : 'hidden',
+              color: 'rgba(214,221,233,0.56)',
+              fontSize: '0.84rem',
+              lineHeight: 1.55,
+              mt: 0.25,
             }}
           >
-            {seedError}
+            {description}
           </Typography>
-        </DialogActions>
-      </Dialog>
-    </Box>
+        </Box>
+      </Box>
+      <ArrowForwardRoundedIcon sx={{ color: theme.palette.text.secondary, fontSize: 18 }} />
+    </ButtonBase>
   );
 };
 
-const WalletItem = ({
+const InlineReturn = ({ onClick }: { onClick: () => void }) => {
+  const theme = useTheme();
+  const { t } = useTranslation(['core']);
+
+  return (
+    <ButtonBase
+      aria-label={t('core:action.back', {
+        postProcess: 'capitalizeFirstChar',
+      })}
+      onClick={onClick}
+      sx={{
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+        color: 'rgba(214,221,233,0.62)',
+        display: 'inline-flex',
+        minWidth: 0,
+        p: 0,
+        '&:hover': {
+          color: theme.palette.text.primary,
+        },
+      }}
+    >
+      <ArrowBackRoundedIcon sx={{ fontSize: 18 }} />
+    </ButtonBase>
+  );
+};
+
+const WalletRow = ({
   wallet,
   updateWalletItem,
   idx,
   setSelectedWallet,
   primaryName,
   registerCardRef,
+  finalizeWalletReorder,
+  registerReorderDragActive,
+  reorderDragSourceIndex,
+  reorderDragHover,
+  reorderDragHoverLeave,
+  onReorderDragStart,
+  onReorderDragEnd,
+  editingWalletIndex,
+  mode,
+  setEditingWalletIndex,
 }) => {
-  const [name, setName] = useState('');
+  const { t } = useTranslation(['auth', 'core']);
+  const [accountName, setAccountName] = useState('');
   const [note, setNote] = useState('');
-  const [isEdit, setIsEdit] = useState(false);
+  const isEdit = editingWalletIndex === idx;
+  const addressRef = useRef<HTMLParagraphElement | null>(null);
+  const avatarRef = useRef<HTMLDivElement | null>(null);
+  const editButtonRef = useRef<HTMLButtonElement | null>(null);
+  const editPanelRef = useRef<HTMLDivElement | null>(null);
+  const nameRef = useRef<HTMLParagraphElement | null>(null);
+  const rowRef = useRef<HTMLDivElement | null>(null);
+  const isDraggingRef = useRef(false);
   const theme = useTheme();
-  const { t } = useTranslation([
-    'auth',
-    'core',
-    'group',
-    'question',
-    'tutorial',
-  ]);
 
   useEffect(() => {
-    if (wallet?.name) {
-      setName(wallet.name);
-    }
-    if (wallet?.note) {
-      setNote(wallet.note);
-    }
+    setAccountName(wallet?.name || '');
+    setNote(wallet?.note || '');
   }, [wallet]);
 
+  useEffect(() => {
+    if (!isEdit) return;
+
+    const closeEditPanel = () => {
+      setNote(wallet?.note || '');
+      setAccountName(wallet?.name || '');
+      setEditingWalletIndex(null);
+    };
+
+    const closeOnOutsidePointer = (event: MouseEvent | TouchEvent) => {
+      const target = event.target as Node | null;
+
+      if (
+        target &&
+        (editButtonRef.current?.contains(target) ||
+          editPanelRef.current?.contains(target))
+      ) {
+        return;
+      }
+
+      closeEditPanel();
+    };
+
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape') return;
+      event.preventDefault();
+      closeEditPanel();
+    };
+
+    document.addEventListener('mousedown', closeOnOutsidePointer);
+    document.addEventListener('touchstart', closeOnOutsidePointer);
+    document.addEventListener('keydown', closeOnEscape);
+
+    return () => {
+      document.removeEventListener('mousedown', closeOnOutsidePointer);
+      document.removeEventListener('touchstart', closeOnOutsidePointer);
+      document.removeEventListener('keydown', closeOnEscape);
+    };
+  }, [isEdit, setEditingWalletIndex, wallet]);
+
   const qortalAvatarSrc =
     primaryName &&
     `${getBaseApiReactForAvatar()}/arbitrary/THUMBNAIL/${primaryName}/qortal_avatar?async=true`;
-  const displayAvatarSrc = qortalAvatarSrc || undefined;
   const displayName =
     primaryName ||
     wallet?.name ||
     (wallet?.filename ? parsefilenameQortal(wallet.filename) : null) ||
-    'No name';
+    t('auth:authentication_form.unnamed_account');
+  const addressLabel = shortenAddress(wallet?.address0);
+  const canEditAccountName =
+    !primaryName && !wallet?.filename;
+
+  const handleSaveEdit = () => {
+    updateWalletItem(idx, {
+      ...wallet,
+      ...(canEditAccountName ? { name: accountName.trim() } : {}),
+      note,
+    });
+    setEditingWalletIndex(null);
+  };
+
+  const getTransitionSnapshot = (): AuthUnlockTransitionSnapshot | undefined => {
+    if (
+      mode !== 'entry' ||
+      !avatarRef.current ||
+      !nameRef.current ||
+      !addressRef.current
+    ) {
+      return undefined;
+    }
+
+    const rectToObject = (rect: DOMRect) => ({
+      height: rect.height,
+      left: rect.left,
+      top: rect.top,
+      width: rect.width,
+    });
+
+    return {
+      addressLabel,
+      addressRect: rectToObject(addressRef.current.getBoundingClientRect()),
+      avatarRect: rectToObject(avatarRef.current.getBoundingClientRect()),
+      avatarSrc: qortalAvatarSrc || undefined,
+      displayName,
+      nameRect: rectToObject(nameRef.current.getBoundingClientRect()),
+      primaryName: primaryName || undefined,
+      walletAddress: wallet?.address0,
+    };
+  };
+
+  const handleSelectWallet = () => {
+    if (isEdit || isDraggingRef.current) return;
+    setSelectedWallet(wallet, getTransitionSnapshot());
+  };
+  const isLight = theme.palette.mode === 'light';
+  const entryRowBackground = isLight
+    ? 'linear-gradient(180deg, rgba(255,255,255,0.94), rgba(246,249,253,0.98))'
+    : 'linear-gradient(180deg, rgba(7,12,21,0.9), rgba(4,7,12,0.94))';
+  const entryRowHoverBackground = isLight
+    ? 'linear-gradient(180deg, rgba(255,255,255,0.99), rgba(239,245,252,0.99))'
+    : 'linear-gradient(180deg, rgba(8,14,24,0.93), rgba(5,8,14,0.96))';
+  const entryEditBackground = isLight
+    ? 'linear-gradient(180deg, rgba(252,253,255,0.98), rgba(244,248,252,0.99))'
+    : 'linear-gradient(180deg, rgba(13,19,31,0.92), rgba(7,11,18,0.94))';
 
   return (
     <Box
-      ref={wallet?.address0 ? registerCardRef(wallet.address0) : undefined}
-      sx={{
-        display: 'flex',
-        flexDirection: 'column',
-        padding: '16px',
-        borderRadius: '12px',
-        backgroundColor: theme.palette.background.paper,
-        border: `1px solid ${theme.palette.divider}`,
-        transition: 'transform 0.2s ease, box-shadow 0.2s ease',
-        cursor: isEdit ? 'default' : 'pointer',
-        minHeight: '180px',
-        ...(isEdit
-          ? { gridColumn: '1 / -1' }
-          : {
-              '&:hover': {
-                transform: 'translateY(-2px)',
-                boxShadow: theme.shadows[4],
-              },
-            }),
+      ref={(element: HTMLDivElement | null) => {
+        rowRef.current = element;
+        if (wallet?.address0) {
+          registerCardRef(wallet.address0)(element);
+        }
+      }}
+      draggable={!isEdit}
+      onDragStart={(event) => {
+        if (isEdit) {
+          event.preventDefault();
+          return;
+        }
+
+        isDraggingRef.current = true;
+        registerReorderDragActive?.(true);
+        onReorderDragStart?.(idx);
+        event.dataTransfer.effectAllowed = 'move';
+        event.dataTransfer.setData('text/plain', String(idx));
+      }}
+      onDragOver={(event) => {
+        if (isEdit) return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'move';
+        reorderDragHover?.(idx, event);
+      }}
+      onDragLeave={(event) => {
+        reorderDragHoverLeave?.(event);
+      }}
+      onDrop={(event) => {
+        event.preventDefault();
+        const fromIndex = Number(event.dataTransfer.getData('text/plain'));
+
+        const bounds = (
+          event.currentTarget as HTMLElement
+        ).getBoundingClientRect();
+        const gapBeforeIndex =
+          event.clientY < bounds.top + bounds.height / 2 ? idx : idx + 1;
+
+        if (Number.isInteger(fromIndex)) {
+          finalizeWalletReorder(fromIndex, gapBeforeIndex);
+        }
+        onReorderDragEnd?.();
       }}
-      onClick={() => {
-        if (!isEdit) setSelectedWallet(wallet);
+      onDragEnd={() => {
+        registerReorderDragActive?.(false);
+        onReorderDragEnd?.();
+        window.setTimeout(() => {
+          isDraggingRef.current = false;
+        }, 0);
+      }}
+      sx={{
+        borderBottom:
+          mode === 'entry' ? 'none' : '1px solid rgba(255,255,255,0.06)',
+        opacity:
+          reorderDragSourceIndex !== null && reorderDragSourceIndex === idx ? 0.46 : 1,
+        pb: mode === 'entry' ? 0 : isEdit ? 1.2 : 0,
+        pt: mode === 'entry' ? 0 : 0.2,
+        transition: 'opacity 160ms ease',
       }}
     >
-      {/* Card header: avatar + edit button */}
       <Box
         sx={{
-          display: 'flex',
           alignItems: 'center',
-          justifyContent: 'space-between',
-          mb: 1.5,
+          background:
+            mode === 'entry'
+              ? isEdit
+                ? entryEditBackground
+                : entryRowBackground
+              : isEdit
+                ? 'rgba(255,255,255,0.03)'
+                : 'transparent',
+          border:
+            mode === 'entry'
+              ? isLight
+                ? `1px solid ${theme.palette.border.subtle}`
+                : '1px solid rgba(123,145,174,0.2)'
+              : 'none',
+          borderRadius: mode === 'entry' ? '8px' : '7px',
+          cursor: isEdit ? 'default' : 'grab',
+          display: 'grid',
+          gap: mode === 'entry' ? 1.3 : 1,
+          gridTemplateColumns:
+            mode === 'entry'
+              ? '54px minmax(0,1fr) auto auto'
+              : '36px minmax(0,1fr) auto',
+          minHeight: mode === 'entry' ? 86 : 60,
+          px: mode === 'entry' ? 1.6 : 0.55,
+          py: mode === 'entry' ? 1.15 : 0.5,
+          transition:
+            'background 160ms ease, border-color 160ms ease, box-shadow 160ms ease',
+          '&:hover': {
+            background: isEdit
+              ? mode === 'entry'
+                ? entryEditBackground
+                : 'rgba(255,255,255,0.03)'
+              : mode === 'entry'
+                ? entryRowHoverBackground
+                : 'rgba(255,255,255,0.03)',
+            borderColor:
+              mode === 'entry'
+                ? isLight
+                  ? theme.palette.border.main
+                  : 'rgba(188,213,246,0.34)'
+                : undefined,
+            boxShadow:
+              mode === 'entry' && !isEdit
+                ? isLight
+                  ? '0 2px 12px rgba(45, 72, 112, 0.06)'
+                  : '0 0 0 1px rgba(70,120,210,0.04)'
+                : 'none',
+          },
+          '&:active': {
+            cursor: isEdit ? 'default' : 'grabbing',
+          },
         }}
-      >
-        <Avatar
-          alt={displayName}
-          src={displayAvatarSrc}
-          sx={{ width: 56, height: 56 }}
-        >
-          <PersonIcon sx={{ fontSize: 32 }} />
-        </Avatar>
-        <IconButton
-          sx={{
-            color: theme.palette.text.primary,
-          }}
-          onClick={(e) => {
-            e.stopPropagation();
-            setIsEdit(true);
-          }}
-          aria-label={t('core:action.edit', {
-            postProcess: 'capitalizeFirstChar',
-          })}
-        >
-          <EditIcon />
-        </IconButton>
-      </Box>
-
-      {/* Card body: name, address, note */}
-      <Typography
-        sx={{
-          fontSize: '16px',
-          fontWeight: 600,
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-          color: theme.palette.text.primary,
+        onClick={() => {
+          handleSelectWallet();
         }}
       >
-        {displayName}
-      </Typography>
-
-      <Typography
-        sx={{
-          fontSize: '13px',
-          color: theme.palette.text.secondary,
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-          mt: 0.5,
-        }}
-      >
-        {wallet?.address0}
-      </Typography>
-
-      {wallet?.note && (
-        <Typography
-          sx={{
-            fontSize: '13px',
-            color: theme.palette.text.secondary,
-            fontStyle: 'italic',
-            mt: 0.5,
-          }}
-        >
-          {wallet.note}
-        </Typography>
-      )}
-
-      {/* Card footer: choose button */}
-      {!isEdit && (
-        <Box
-          sx={{
-            mt: 'auto',
-            pt: 1.5,
-            display: 'flex',
-            justifyContent: 'center',
-          }}
-        >
-          <ButtonBase
+        <Box sx={{ width: mode === 'entry' ? 46 : 34 }}>
+          <Avatar
+            ref={avatarRef}
+            alt={displayName}
+            src={qortalAvatarSrc || undefined}
             sx={{
-              backgroundColor: theme.palette.primary.main,
-              color: theme.palette.primary.contrastText,
-              borderRadius: '20px',
-              padding: '6px 24px',
-              fontSize: '13px',
-              fontWeight: 500,
-              transition: 'filter 0.2s ease, transform 0.1s ease',
-              '&:hover': {
-                filter: 'brightness(1.2)',
-                transform: 'scale(1.05)',
-              },
+              height: mode === 'entry' ? 46 : 34,
+              width: mode === 'entry' ? 46 : 34,
             }}
-            onClick={(e) => {
-              e.stopPropagation();
-              setSelectedWallet(wallet);
+          >
+            <PersonIcon sx={{ fontSize: mode === 'entry' ? 27 : 22 }} />
+          </Avatar>
+        </Box>
+
+        <Box sx={{ minWidth: 0 }}>
+          <Box sx={{ alignItems: 'baseline', display: 'inline-flex', gap: 0.35, maxWidth: '100%' }}>
+            <Typography
+              ref={nameRef}
+              sx={{
+                color: theme.palette.text.primary,
+                fontSize: mode === 'entry' ? '1rem' : '0.95rem',
+                fontWeight: 700,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {displayName}
+            </Typography>
+            <IconButton
+              ref={editButtonRef}
+              aria-label={
+                isEdit
+                  ? t('core:action.close', {
+                      postProcess: 'capitalizeFirstChar',
+                    })
+                  : t('auth:entry.wallet_edit_aria_label')
+              }
+              sx={{
+                color:
+                  mode === 'entry'
+                    ? alpha(theme.palette.text.secondary, 0.62)
+                    : 'rgba(214,221,233,0.48)',
+                ml: 0.1,
+                p: 0.35,
+              }}
+              onClick={(event) => {
+                event.stopPropagation();
+                setEditingWalletIndex(isEdit ? null : idx);
+              }}
+            >
+              <EditIcon sx={{ fontSize: 15 }} />
+            </IconButton>
+            {wallet?.note && (
+              <Typography
+                sx={{
+                  color:
+                    mode === 'entry'
+                      ? alpha(theme.palette.text.secondary, 0.72)
+                      : 'rgba(214,221,233,0.42)',
+                  fontSize: '0.72rem',
+                  fontStyle: 'italic',
+                  fontWeight: 400,
+                  lineHeight: 1,
+                  maxWidth: { xs: 120, sm: 180 },
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {wallet.note}
+              </Typography>
+            )}
+          </Box>
+          <Typography
+            ref={addressRef}
+            sx={{
+              color:
+                mode === 'entry'
+                  ? theme.palette.text.secondary
+                  : 'rgba(214,221,233,0.56)',
+              fontSize: mode === 'entry' ? '0.84rem' : '0.79rem',
+              lineHeight: 1.35,
+              mt: 0.05,
             }}
           >
-            {t('core:action.choose', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </ButtonBase>
+            {addressLabel}
+          </Typography>
         </Box>
-      )}
 
-      {/* Edit mode panel */}
+        <Box onClick={(event) => event.stopPropagation()}>
+          <AuthButton
+            fullWidth={false}
+            prominence="subtle"
+            onClick={handleSelectWallet}
+          >
+            {t('auth:authentication_form.unlock')}
+          </AuthButton>
+        </Box>
+        {mode === 'entry' && (
+          <ChevronRightRoundedIcon
+            sx={{
+              color:
+                mode === 'entry'
+                  ? alpha(theme.palette.text.secondary, 0.65)
+                  : 'rgba(214,221,233,0.42)',
+              fontSize: 24,
+              opacity: 0.82,
+            }}
+          />
+        )}
+      </Box>
+
       {isEdit && (
         <Box
+          ref={editPanelRef}
           sx={{
-            mt: 2,
-            pt: 2,
-            borderTop: `1px solid ${theme.palette.divider}`,
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 0.9,
+            pl: { xs: 0.7, sm: 6.2 },
+            pr: 0.7,
+            pt: 1,
           }}
-          onClick={(e) => e.stopPropagation()}
+          onClick={(event) => event.stopPropagation()}
         >
-          <Label>
-            {t('core:name', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Label>
-          <Input
-            placeholder={t('core:name', { postProcess: 'capitalizeFirstChar' })}
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            sx={{
-              width: '100%',
-            }}
-          />
-
-          <Spacer height="10px" />
-
-          <Label>
-            {t('auth:note', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Label>
+          {canEditAccountName && (
+            <>
+              <Typography sx={inlineFieldLabelSx}>
+                {t('auth:entry.wallet_edit_name_label')}
+              </Typography>
+              <Input
+                autoFocus
+                placeholder={t(
+                  'auth:entry.wallet_edit_account_name_placeholder'
+                )}
+                value={accountName}
+                onChange={(event) => setAccountName(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') {
+                    event.preventDefault();
+                    handleSaveEdit();
+                  }
+                }}
+                inputProps={{ maxLength: 48 }}
+                sx={inlineInputSx}
+              />
+            </>
+          )}
+          <Typography sx={inlineFieldLabelSx}>
+            {t('auth:entry.wallet_edit_note_label')}
+          </Typography>
           <Input
-            placeholder={t('core:note', { postProcess: 'capitalizeFirstChar' })}
+            placeholder={t('auth:entry.wallet_edit_note_placeholder')}
             value={note}
-            onChange={(e) => setNote(e.target.value)}
-            inputProps={{
-              maxLength: 100,
-            }}
-            sx={{
-              width: '100%',
+            onChange={(event) => setNote(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter') {
+                event.preventDefault();
+                handleSaveEdit();
+              }
             }}
+            inputProps={{ maxLength: 100 }}
+            sx={inlineInputSx}
           />
 
-          <Spacer height="10px" />
-
           <Box
             sx={{
               display: 'flex',
-              gap: '20px',
+              gap: 0.8,
               justifyContent: 'flex-end',
-              width: '100%',
+              mt: 0.4,
             }}
           >
-            <Button
-              size="small"
-              variant="contained"
-              onClick={() => setIsEdit(false)}
-            >
-              {t('core:action.close', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Button>
-            <Button
-              sx={{
-                backgroundColor: theme.palette.other.danger,
-                '&:hover': {
-                  backgroundColor: theme.palette.other.danger,
-                },
-                '&:focus': {
-                  backgroundColor: theme.palette.other.danger,
-                },
-              }}
-              size="small"
-              variant="contained"
+            <ButtonBase
               onClick={() => updateWalletItem(idx, null)}
+              sx={inlineActionSx(true)}
             >
-              {t('core:action.remove', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Button>
-            <Button
-              sx={{
-                backgroundColor: '#5EB049',
-                '&:hover': {
-                  backgroundColor: '#5EB049',
-                },
-                '&:focus': {
-                  backgroundColor: '#5EB049',
-                },
-              }}
-              size="small"
-              variant="contained"
-              onClick={() => {
-                updateWalletItem(idx, {
-                  ...wallet,
-                  name,
-                  note,
-                });
-                setIsEdit(false);
-              }}
+              {t('auth:entry.wallet_edit_remove')}
+            </ButtonBase>
+            <ButtonBase
+              onClick={handleSaveEdit}
+              sx={inlineActionSx(false)}
             >
-              {t('core:action.save', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Button>
+              {t('auth:entry.wallet_edit_save')}
+            </ButtonBase>
           </Box>
         </Box>
       )}
     </Box>
   );
 };
+
+const seedTextFieldSx = (theme, isVisible: boolean) => ({
+  '& .MuiOutlinedInput-root': {
+    alignItems: 'flex-start',
+    backgroundColor: 'rgba(255,255,255,0.03)',
+    borderRadius: '8px',
+    '& fieldset': {
+      borderColor: 'rgba(255,255,255,0.08)',
+    },
+    '&:hover fieldset': {
+      borderColor: 'rgba(255,255,255,0.12)',
+    },
+    '&.Mui-focused fieldset': {
+      borderColor: 'rgba(90,136,243,0.42)',
+    },
+  },
+  '& textarea': {
+    WebkitTextSecurity: isVisible ? 'none' : 'disc',
+    color: theme.palette.text.primary,
+    fontSize: '0.95rem',
+    lineHeight: 1.6,
+  },
+});
+
+const inlineFieldLabelSx = {
+  color: 'rgba(214,221,233,0.56)',
+  fontSize: '0.74rem',
+  fontWeight: 700,
+  letterSpacing: '0.08em',
+  textTransform: 'uppercase',
+};
+
+const inlineInputSx = {
+  color: 'rgba(230,236,247,0.92)',
+  fontSize: '0.92rem',
+  '&:before': {
+    borderBottom: '1px solid rgba(255,255,255,0.08)',
+  },
+  '&:after': {
+    borderBottom: '1px solid rgba(90,136,243,0.42)',
+  },
+};
+
+const inlineActionSx = (danger: boolean) => ({
+  alignItems: 'center',
+  backgroundColor: danger ? 'rgba(160,56,56,0.12)' : 'rgba(255,255,255,0.03)',
+  border: `1px solid ${danger ? 'rgba(213,92,92,0.18)' : 'rgba(255,255,255,0.08)'}`,
+  borderRadius: '8px',
+  color: danger ? 'rgba(240,165,165,0.92)' : 'rgba(230,236,247,0.88)',
+  display: 'inline-flex',
+  fontSize: '0.84rem',
+  fontWeight: 700,
+  height: 34,
+  justifyContent: 'center',
+  minWidth: 82,
+  px: 1.4,
+});
diff --git a/src/components/Widgets/DashboardWidgetFrame.tsx b/src/components/Widgets/DashboardWidgetFrame.tsx
new file mode 100644
index 00000000..85e3aebb
--- /dev/null
+++ b/src/components/Widgets/DashboardWidgetFrame.tsx
@@ -0,0 +1,267 @@
+import RefreshRoundedIcon from '@mui/icons-material/RefreshRounded';
+import SwapHorizRoundedIcon from '@mui/icons-material/SwapHorizRounded';
+import {
+  Box,
+  ButtonBase,
+  IconButton,
+  Tooltip,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import type { ReactNode, Ref } from 'react';
+import {
+  dashboardPanelSx,
+  handleDashboardPanelPointerLeave,
+  handleDashboardPanelPointerMove,
+} from '../Group/dashboardPanelEffects';
+
+export type WidgetDisplayMode = 'compact' | 'expanded';
+
+type DashboardWidgetFrameProps = {
+  actionIcon?: ReactNode;
+  actionLabel?: string;
+  children: ReactNode;
+  contentBackground?: ReactNode;
+  contentBorderRadius?: number | string;
+  height: number;
+  onAction?: () => void;
+  onRefresh?: () => void;
+  onSwap?: () => void;
+  order?: number;
+  panelRef?: Ref<HTMLDivElement>;
+  refreshing?: boolean;
+  subtitle?: string;
+  title: string;
+  widgetId?: string;
+};
+
+export const DashboardWidgetFrame = ({
+  actionIcon,
+  actionLabel,
+  children,
+  contentBackground = null,
+  contentBorderRadius = 5,
+  height,
+  onAction,
+  onRefresh,
+  onSwap,
+  order,
+  panelRef,
+  refreshing = false,
+  subtitle,
+  title,
+  widgetId,
+}: DashboardWidgetFrameProps) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      ref={panelRef}
+      data-widget-id={widgetId}
+      sx={{
+        ...dashboardPanelSx(theme, 'base'),
+        borderRadius: '12px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+        height: `${height}px`,
+        minHeight: `${height}px`,
+        minWidth: 0,
+        order,
+        overflow: 'hidden',
+        p: '8px 10px 10px',
+        width: '100%',
+      }}
+      onMouseMove={handleDashboardPanelPointerMove}
+      onMouseLeave={handleDashboardPanelPointerLeave}
+    >
+      <Box
+        sx={{
+          alignItems: { xs: 'flex-start', sm: 'center' },
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: '6px',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Box sx={{ minWidth: 0 }}>
+          <Typography
+            sx={{
+              color: theme.palette.text.primary,
+              fontSize: '0.88rem',
+              fontWeight: 600,
+              letterSpacing: '-0.01em',
+            }}
+          >
+            {title}
+          </Typography>
+          {subtitle ? (
+            <Typography
+              sx={{
+                color:
+                  theme.palette.mode === 'dark'
+                    ? 'rgba(223, 228, 238, 0.56)'
+                    : 'rgba(72, 78, 92, 0.58)',
+                fontSize: '0.68rem',
+                mt: '1px',
+              }}
+            >
+              {subtitle}
+            </Typography>
+          ) : null}
+        </Box>
+
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'inline-flex',
+            flexShrink: 0,
+            flexWrap: 'wrap',
+            gap: '5px',
+            justifyContent: 'flex-end',
+            ml: { sm: 'auto' },
+          }}
+        >
+          {onRefresh ? (
+            <Tooltip title="Refresh">
+              <IconButton
+                aria-label="Refresh widget"
+                data-refreshing={refreshing ? 'true' : 'false'}
+                disabled={refreshing}
+                onClick={onRefresh}
+                size="small"
+                sx={{
+                  borderRadius: '999px',
+                  color: theme.palette.text.secondary,
+                  height: 28,
+                  width: 28,
+                  '&:hover': {
+                    backgroundColor: theme.palette.action.hover,
+                    color: theme.palette.text.primary,
+                  },
+                }}
+              >
+                <Box
+                  sx={{
+                    display: 'inline-flex',
+                    position: 'relative',
+                  }}
+                >
+                  <RefreshRoundedIcon
+                    sx={{
+                      color: refreshing
+                        ? alpha(theme.palette.text.secondary, 0.88)
+                        : undefined,
+                      fontSize: '1rem',
+                    }}
+                  />
+                  {refreshing ? (
+                    <Box
+                      sx={{
+                        bgcolor: theme.palette.primary.main,
+                        border: `2px solid ${theme.palette.background.paper}`,
+                        borderRadius: '50%',
+                        bottom: -2,
+                        boxShadow: `0 0 0 1px ${alpha(
+                          theme.palette.primary.main,
+                          0.18
+                        )}, 0 0 10px ${alpha(theme.palette.primary.main, 0.22)}`,
+                        height: 8,
+                        position: 'absolute',
+                        right: -2,
+                        width: 8,
+                      }}
+                    />
+                  ) : null}
+                </Box>
+              </IconButton>
+            </Tooltip>
+          ) : null}
+
+          {onSwap ? (
+            <Tooltip title="Swap position">
+              <IconButton
+                aria-label="Swap widget position"
+                onClick={onSwap}
+                size="small"
+                sx={{
+                  borderRadius: '999px',
+                  color: theme.palette.text.secondary,
+                  height: 28,
+                  width: 28,
+                  '&:hover': {
+                    backgroundColor: theme.palette.action.hover,
+                    color: theme.palette.text.primary,
+                  },
+                }}
+              >
+                <SwapHorizRoundedIcon sx={{ fontSize: '1rem' }} />
+              </IconButton>
+            </Tooltip>
+          ) : null}
+
+          {actionLabel && onAction ? (
+            <ButtonBase
+              disableRipple
+              onClick={onAction}
+              sx={{
+                alignItems: 'center',
+                border: `1px solid ${alpha(
+                  theme.palette.border.main,
+                  theme.palette.mode === 'dark' ? 0.24 : 0.14
+                )}`,
+                borderRadius: '999px',
+                color: theme.palette.text.secondary,
+                display: 'inline-flex',
+                flexShrink: 0,
+                fontSize: '0.68rem',
+                fontWeight: 600,
+                gap: '5px',
+                minHeight: '28px',
+                px: 0.95,
+                transition:
+                  'background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease',
+                whiteSpace: 'nowrap',
+                '&:hover': {
+                  backgroundColor: theme.palette.action.hover,
+                  borderColor: alpha(
+                    theme.palette.border.main,
+                    theme.palette.mode === 'dark' ? 0.36 : 0.22
+                  ),
+                  color: theme.palette.text.primary,
+                  transform: 'translateY(-1px)',
+                },
+                '&:active': {
+                  transform: 'translateY(0)',
+                },
+              }}
+            >
+              {actionIcon}
+              {actionLabel}
+            </ButtonBase>
+          ) : null}
+        </Box>
+      </Box>
+
+      <Box
+        sx={{
+          borderTop: `1px solid ${alpha(
+            theme.palette.border.main,
+            theme.palette.mode === 'dark' ? 0.12 : 0.08
+          )}`,
+          display: 'flex',
+          flex: '1 1 auto',
+          minHeight: 0,
+          overflow: 'hidden',
+          position: 'relative',
+          pt: '8px',
+          width: '100%',
+        }}
+      >
+        {contentBackground}
+        {children}
+      </Box>
+    </Box>
+  );
+};
diff --git a/src/components/Widgets/GroupsWidget.tsx b/src/components/Widgets/GroupsWidget.tsx
new file mode 100644
index 00000000..46427f5e
--- /dev/null
+++ b/src/components/Widgets/GroupsWidget.tsx
@@ -0,0 +1,2990 @@
+import CampaignRoundedIcon from '@mui/icons-material/CampaignRounded';
+import ForumRoundedIcon from '@mui/icons-material/ForumRounded';
+import GroupAddRoundedIcon from '@mui/icons-material/GroupAddRounded';
+import LockRoundedIcon from '@mui/icons-material/LockRounded';
+import MarkChatUnreadRoundedIcon from '@mui/icons-material/MarkChatUnreadRounded';
+import OpenInNewRoundedIcon from '@mui/icons-material/OpenInNewRounded';
+import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
+import { LoadingButton } from '@mui/lab';
+import {
+  Avatar,
+  Box,
+  Button,
+  ButtonBase,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  MenuItem,
+  Select,
+  TextField,
+  Tooltip,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useAtom, useAtomValue } from 'jotai';
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ReactElement,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  QORTAL_APP_CONTEXT,
+  getArbitraryEndpointReact,
+  getBaseApiReact,
+} from '../../App';
+import {
+  GROUP_ACTIVITY_CACHE_TTL_MS,
+  groupChatTimestampsAtom,
+  groupInvitesCacheAtom,
+  groupsOwnerNamesAtom,
+  joinRequestsCacheAtom,
+  memberGroupsAtom,
+  myGroupsWhereIAmAdminAtom,
+  timestampEnterDataAtom,
+  userInfoAtom,
+} from '../../atoms/global';
+import { getFee } from '../../background/background';
+import { executeEvent } from '../../utils/events';
+import { formatTimestamp } from '../../utils/time';
+import {
+  APP_BLUE_SURFACE_TEXT,
+  getBlueTier1ButtonSx,
+  getBlueTier1PillSurface,
+} from '../Group/groupActivityColorSystem';
+import { GroupActivityEmptyStateGraphic } from '../Group/GroupActivityEmptyStateGraphic';
+import { QAppWidgetContainer } from './QAppWidgetContainer';
+import type { WidgetDisplayMode } from './DashboardWidgetFrame';
+
+type GroupsWidgetTab = 'notifications' | 'invites' | 'requests' | 'promoted';
+
+type GroupsWidgetProps = {
+  displayMode: WidgetDisplayMode;
+  myAddress: string;
+  onRefreshStateChange?: (refreshing: boolean) => void;
+  refreshToken?: number;
+};
+
+type GroupNotificationItem = {
+  avatarUrl: string | null;
+  groupId: string;
+  groupName: string;
+  id: string;
+  isEncryptedLike: boolean;
+  isUnread: boolean;
+  openedAt: number;
+  senderLabel: string;
+  snippet: string;
+  timestamp: number;
+};
+
+const sortGroupNotificationItems = (
+  left: GroupNotificationItem,
+  right: GroupNotificationItem
+) => {
+  if (left.isUnread !== right.isUnread) {
+    return left.isUnread ? -1 : 1;
+  }
+
+  if (left.isUnread && right.isUnread) {
+    return right.timestamp - left.timestamp;
+  }
+
+  if (left.openedAt !== right.openedAt) {
+    return left.openedAt - right.openedAt;
+  }
+
+  return right.timestamp - left.timestamp;
+};
+
+type GroupInviteItem = {
+  description?: string;
+  groupId: number;
+  groupName: string;
+  id: string;
+  isOpen?: boolean;
+  participantCount?: number;
+};
+
+type GroupJoinRequestItem = {
+  groupId: number;
+  groupName: string;
+  id: string;
+  joiner: string;
+  requesterLabel: string;
+};
+
+type GroupPromotionItem = {
+  created: number;
+  description?: string;
+  groupId: number;
+  groupName: string;
+  id: string;
+  isOpen?: boolean;
+  memberCount?: number;
+  promoterName: string;
+  snippet: string;
+};
+
+type GroupPromotionVisualState =
+  | 'connecting'
+  | 'join'
+  | 'member'
+  | 'processing'
+  | 'request'
+  | 'request_sent';
+
+type PromotionActionState = 'connecting' | 'processing' | 'request_sent';
+
+const GROUP_PROMOTION_IDENTIFIER_PREFIX = 'group-promotions-ui24-';
+const GROUP_PROMOTION_MAX_ITEMS = 8;
+const GROUP_NOTIFICATION_PREVIEW_LIMIT = 20;
+const GROUP_ACTIVITY_MISC_STORAGE_PREFIX = 'group_activity_dismissed';
+/** Latest chat payload to omit from Group Activity list + unread count (system/meta). */
+const GROUP_ACTIVITY_EXCLUDED_MESSAGE_DATA = 'NDAwMQ==';
+const GROUP_WIDGET_CARD_RADIUS = '10px';
+
+const getDismissedStorageKey = (
+  address: string,
+  type: 'invites' | 'requests'
+) => `${GROUP_ACTIVITY_MISC_STORAGE_PREFIX}:${address}:${type}`;
+
+const normalizeStoredIds = (value: unknown): string[] => {
+  if (!Array.isArray(value)) return [];
+  return Array.from(
+    new Set(value.filter((id): id is string => typeof id === 'string' && !!id))
+  );
+};
+
+const loadMiscStoredIds = async (key: string): Promise<string[]> => {
+  if (typeof window === 'undefined') return [];
+  try {
+    if (window.miscStorage) {
+      return normalizeStoredIds(await window.miscStorage.get(key));
+    }
+    const raw = window.localStorage?.getItem(key);
+    return normalizeStoredIds(raw ? JSON.parse(raw) : []);
+  } catch (error) {
+    console.error('[GroupsWidget] Failed to load dismissed ids:', error);
+    return [];
+  }
+};
+
+const saveMiscStoredIds = async (key: string, ids: string[]): Promise<void> => {
+  if (typeof window === 'undefined') return;
+  const nextIds = normalizeStoredIds(ids);
+  try {
+    if (window.miscStorage) {
+      await window.miscStorage.set(key, nextIds);
+      return;
+    }
+    window.localStorage?.setItem(key, JSON.stringify(nextIds));
+  } catch (error) {
+    console.error('[GroupsWidget] Failed to save dismissed ids:', error);
+  }
+};
+
+const stripHtml = (value: string) =>
+  value
+    .replace(/<[^>]+>/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+const truncateAddress = (value: string) =>
+  value.length > 14 ? `${value.slice(0, 7)}...${value.slice(-5)}` : value;
+
+const getGroupAvatarUrl = (
+  ownerName: string | null,
+  groupId: string | number
+) =>
+  ownerName
+    ? `${getBaseApiReact()}/arbitrary/THUMBNAIL/${encodeURIComponent(ownerName)}/qortal_group_avatar_${groupId}?async=true`
+    : null;
+
+const normalizeSnippet = (value: unknown, fallback: string) => {
+  if (typeof value !== 'string') {
+    return fallback;
+  }
+
+  const cleaned = stripHtml(value);
+  return cleaned || fallback;
+};
+
+const isLikelyEncryptedSnippet = (value: unknown) => {
+  if (typeof value !== 'string') {
+    return false;
+  }
+
+  const cleaned = stripHtml(value).trim();
+
+  if (cleaned.length < 48) {
+    return false;
+  }
+
+  const tokens = cleaned.split(/\s+/).filter(Boolean);
+  const compressed = cleaned.replace(/\s+/g, '');
+  const base64LikeChars = compressed.match(/[A-Za-z0-9+/=._-]/g)?.length ?? 0;
+  const base64LikeRatio =
+    compressed.length > 0 ? base64LikeChars / compressed.length : 0;
+  const longestTokenLength = tokens.reduce(
+    (maxLength, token) => Math.max(maxLength, token.length),
+    0
+  );
+  const averageTokenLength =
+    tokens.length > 0
+      ? tokens.reduce((sum, token) => sum + token.length, 0) / tokens.length
+      : 0;
+
+  return (
+    base64LikeRatio >= 0.9 &&
+    longestTokenLength >= 32 &&
+    (tokens.length <= 3 || averageTokenLength >= 18)
+  );
+};
+
+const getGroupInfo = async (groupId: number) => {
+  const response = await fetch(`${getBaseApiReact()}/groups/${groupId}`);
+
+  if (!response.ok) {
+    throw new Error(`Unable to load group ${groupId} (${response.status})`);
+  }
+
+  return response.json();
+};
+
+const hydrateGroupsWithNames = async <T extends { groupId: number }>(
+  groups: T[]
+) => {
+  const uniqueGroupIds = [...new Set(groups.map((group) => group.groupId))];
+  const groupInfoEntries = await Promise.all(
+    uniqueGroupIds.map(async (groupId) => {
+      try {
+        const groupInfo = await getGroupInfo(groupId);
+        return [groupId, groupInfo] as const;
+      } catch (error) {
+        console.error('Failed to hydrate group metadata for widget', error);
+        return [groupId, null] as const;
+      }
+    })
+  );
+  const groupInfoById = new Map(groupInfoEntries);
+
+  return groups.map((group) => ({
+    ...group,
+    ...(groupInfoById.get(group.groupId) ?? {}),
+  }));
+};
+
+const utf8ToBase64 = (input: string) =>
+  btoa(
+    encodeURIComponent(input).replace(/%([0-9A-F]{2})/g, (_, code) =>
+      String.fromCharCode(Number(`0x${code}`))
+    )
+  );
+
+const TabButton = ({
+  active,
+  count,
+  label,
+  onClick,
+  tabId,
+  subtle = false,
+}: {
+  active: boolean;
+  count?: number;
+  label: string;
+  onClick: () => void;
+  tabId: GroupsWidgetTab;
+  subtle?: boolean;
+}) => {
+  const theme = useTheme();
+  const shouldPulseAttention =
+    !active &&
+    tabId === 'notifications' &&
+    typeof count === 'number' &&
+    count > 0;
+
+  return (
+    <ButtonBase
+      aria-pressed={active}
+      aria-selected={active}
+      data-active={active ? 'true' : 'false'}
+      data-groups-tab={tabId}
+      onClick={onClick}
+      role="tab"
+      sx={{
+        alignItems: 'center',
+        ...(active ? getBlueTier1PillSurface(theme) : {}),
+        backgroundColor: active
+          ? undefined
+          : alpha(
+              theme.palette.text.primary,
+              subtle
+                ? theme.palette.mode === 'dark'
+                  ? 0.026
+                  : 0.018
+                : theme.palette.mode === 'dark'
+                  ? 0.038
+                  : 0.024
+            ),
+        border: `1px solid ${alpha(
+          theme.palette.border.main,
+          active ? 0.18 : theme.palette.mode === 'dark' ? 0.11 : 0.08
+        )}`,
+        borderRadius: '999px',
+        color: active ? APP_BLUE_SURFACE_TEXT : theme.palette.text.secondary,
+        display: 'inline-flex',
+        flexShrink: 0,
+        fontSize: subtle ? '0.69rem' : '0.72rem',
+        fontWeight: active ? 700 : subtle ? 500 : 600,
+        gap: '6px',
+        minHeight: subtle ? '28px' : '30px',
+        opacity: active ? 1 : subtle ? 0.7 : 0.78,
+        outline: 'none',
+        pointerEvents: 'auto',
+        px: subtle ? 1 : 1.2,
+        cursor: 'pointer',
+        overflow: 'hidden',
+        position: 'relative',
+        ...(shouldPulseAttention
+          ? {
+              '@keyframes groupsNotificationsPillInnerGlow': {
+                '0%, 100%': {
+                  boxShadow: `inset 0 0 0 1px ${alpha(theme.palette.primary.main, theme.palette.mode === 'dark' ? 0.12 : 0.09)}`,
+                },
+                '50%': {
+                  boxShadow: `inset 0 0 0 1px ${alpha(theme.palette.primary.main, theme.palette.mode === 'dark' ? 0.18 : 0.13)}, inset 0 0 18px ${alpha(theme.palette.primary.main, theme.palette.mode === 'dark' ? 0.16 : 0.12)}`,
+                },
+              },
+              '@keyframes groupsNotificationsPillInnerVeil': {
+                '0%, 100%': {
+                  opacity: theme.palette.mode === 'dark' ? 0.24 : 0.18,
+                },
+                '50%': {
+                  opacity: theme.palette.mode === 'dark' ? 0.46 : 0.34,
+                },
+              },
+              animation:
+                'groupsNotificationsPillInnerGlow 3.6s ease-in-out infinite',
+              '&::before': {
+                animation:
+                  'groupsNotificationsPillInnerVeil 3.6s ease-in-out infinite',
+                background: `radial-gradient(circle at 50% 50%, ${alpha(theme.palette.primary.main, theme.palette.mode === 'dark' ? 0.18 : 0.12)} 0%, ${alpha(theme.palette.primary.main, theme.palette.mode === 'dark' ? 0.08 : 0.06)} 58%, transparent 100%)`,
+                borderRadius: 'inherit',
+                content: '""',
+                inset: '1px',
+                pointerEvents: 'none',
+                position: 'absolute',
+                zIndex: 0,
+              },
+            }
+          : null),
+        transition:
+          'background-color 140ms ease, color 140ms ease, transform 120ms ease, box-shadow 140ms ease, border-color 140ms ease',
+        zIndex: 1,
+        whiteSpace: 'nowrap',
+        '& > *': {
+          position: 'relative',
+          zIndex: 1,
+        },
+        '&:hover': {
+          ...(active ? getBlueTier1PillSurface(theme) : {}),
+          backgroundColor: active
+            ? undefined
+            : alpha(
+                theme.palette.text.primary,
+                theme.palette.mode === 'dark' ? 0.052 : 0.038
+              ),
+          borderColor: alpha(
+            theme.palette.border.main,
+            theme.palette.mode === 'dark' ? 0.2 : 0.14
+          ),
+          color: active ? APP_BLUE_SURFACE_TEXT : theme.palette.text.primary,
+          opacity: 1,
+          transform: 'translateY(-1px)',
+        },
+        '&:active': {
+          transform: 'translateY(0)',
+        },
+        '&:focus-visible': {
+          borderColor: alpha(theme.palette.primary.main, 0.48),
+          boxShadow: `0 0 0 2px ${alpha(theme.palette.primary.main, 0.18)}`,
+          color: active ? APP_BLUE_SURFACE_TEXT : theme.palette.text.primary,
+        },
+      }}
+    >
+      <Box component="span">{label}</Box>
+      {typeof count === 'number' && count > 0 ? (
+        <Box
+          component="span"
+          sx={{
+            alignItems: 'center',
+            backgroundColor: active
+              ? alpha(theme.palette.common.white, 0.18)
+              : alpha(theme.palette.primary.main, 0.12),
+            borderRadius: '999px',
+            color: active
+              ? theme.palette.primary.contrastText
+              : theme.palette.primary.main,
+            display: 'inline-flex',
+            fontSize: '0.64rem',
+            fontWeight: 800,
+            height: 16,
+            justifyContent: 'center',
+            minWidth: 16,
+            px: '4px',
+          }}
+        >
+          {count}
+        </Box>
+      ) : null}
+    </ButtonBase>
+  );
+};
+
+const IllustratedEmptyState = ({
+  actionLabel,
+  compact = false,
+  description,
+  onAction,
+  title,
+  variant,
+}: {
+  actionLabel: string;
+  compact?: boolean;
+  description: string;
+  onAction: () => void;
+  title: string;
+  variant: 'invites' | 'requests';
+}) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        alignItems: 'center',
+        display: 'flex',
+        flex: '1 1 auto',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        minHeight: 0,
+        px: 2,
+        py: compact ? 2.25 : 2.75,
+        textAlign: 'center',
+      }}
+    >
+      <GroupActivityEmptyStateGraphic
+        size={compact ? 176 : 198}
+        sx={{
+          filter: 'none',
+          margin: '0 auto 8px',
+          opacity: theme.palette.mode === 'dark' ? 0.94 : 0.88,
+        }}
+        variant={variant}
+      />
+      <Typography
+        sx={{
+          color: theme.palette.text.primary,
+          fontSize: compact ? '0.92rem' : '0.96rem',
+          fontWeight: 700,
+          letterSpacing: '-0.01em',
+          maxWidth: '18ch',
+        }}
+      >
+        {title}
+      </Typography>
+      <Typography
+        sx={{
+          color: theme.palette.text.secondary,
+          fontSize: compact ? '0.73rem' : '0.76rem',
+          lineHeight: 1.55,
+          maxWidth: '30ch',
+          mt: '5px',
+        }}
+      >
+        {description}
+      </Typography>
+      <ButtonBase
+        onClick={onAction}
+        sx={{
+          alignItems: 'center',
+          border: `1px solid ${alpha(
+            theme.palette.border.main,
+            theme.palette.mode === 'dark' ? 0.26 : 0.16
+          )}`,
+          borderRadius: '999px',
+          color: theme.palette.text.secondary,
+          display: 'inline-flex',
+          fontSize: '0.7rem',
+          fontWeight: 700,
+          minHeight: '30px',
+          mt: '12px',
+          px: 1.4,
+          '&:hover': {
+            backgroundColor: theme.palette.action.hover,
+            color: theme.palette.text.primary,
+          },
+        }}
+      >
+        {actionLabel}
+      </ButtonBase>
+    </Box>
+  );
+};
+
+const InlineFeedback = ({
+  message,
+  tone,
+}: {
+  message: string;
+  tone: 'error' | 'success';
+}) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        backgroundColor:
+          tone === 'success'
+            ? alpha(theme.palette.success.main, 0.1)
+            : alpha(theme.palette.error.main, 0.1),
+        border: `1px solid ${alpha(
+          tone === 'success'
+            ? theme.palette.success.main
+            : theme.palette.error.main,
+          0.18
+        )}`,
+        borderRadius: GROUP_WIDGET_CARD_RADIUS,
+        color:
+          tone === 'success'
+            ? theme.palette.success.main
+            : theme.palette.error.main,
+        fontSize: '0.72rem',
+        fontWeight: 600,
+        lineHeight: 1.45,
+        px: 1.1,
+        py: 0.8,
+      }}
+    >
+      {message}
+    </Box>
+  );
+};
+
+export const GroupsWidget = ({
+  displayMode,
+  myAddress,
+  onRefreshStateChange,
+  refreshToken = 0,
+}: GroupsWidgetProps) => {
+  const theme = useTheme();
+  const { t } = useTranslation('group');
+  const { show } = useContext(QORTAL_APP_CONTEXT);
+  const memberGroups = useAtomValue(memberGroupsAtom);
+  const myGroupsWhereIAmAdmin = useAtomValue(myGroupsWhereIAmAdminAtom);
+  const ownerNamesByGroupId = useAtomValue(groupsOwnerNamesAtom) as Record<
+    string,
+    string | null
+  >;
+  const groupChatTimestamps = useAtomValue(groupChatTimestampsAtom) as Record<
+    string,
+    number | undefined
+  >;
+  const timestampEnterData = useAtomValue(timestampEnterDataAtom) as Record<
+    string,
+    number | undefined
+  >;
+  const userInfo = useAtomValue(userInfoAtom);
+  const [groupInvitesCache, setGroupInvitesCache] = useAtom(
+    groupInvitesCacheAtom
+  );
+  const [joinRequestsCache, setJoinRequestsCache] = useAtom(
+    joinRequestsCacheAtom
+  );
+  const groupInvitesCacheRef = useRef(groupInvitesCache);
+  const joinRequestsCacheRef = useRef(joinRequestsCache);
+  const [activeTab, setActiveTab] = useState<GroupsWidgetTab>('notifications');
+  const [actionFeedback, setActionFeedback] = useState<{
+    message: string;
+    tone: 'error' | 'success';
+  } | null>(null);
+  const [dismissedInviteIds, setDismissedInviteIds] = useState<string[]>([]);
+  const [dismissedRequestIds, setDismissedRequestIds] = useState<string[]>([]);
+  const [showIgnoredInvites, setShowIgnoredInvites] = useState(false);
+  const [showIgnoredRequests, setShowIgnoredRequests] = useState(false);
+  const [invites, setInvites] = useState<GroupInviteItem[]>([]);
+  const [invitesError, setInvitesError] = useState<string | null>(null);
+  const [hasLoadedInvitesOnce, setHasLoadedInvitesOnce] = useState(false);
+  const [invitesLoading, setInvitesLoading] = useState(false);
+  const [joiningGroupId, setJoiningGroupId] = useState<number | null>(null);
+  const [joiningPromotionGroupId, setJoiningPromotionGroupId] = useState<
+    number | null
+  >(null);
+  const [promotionActionStates, setPromotionActionStates] = useState<
+    Record<string, PromotionActionState>
+  >({});
+  const [promotions, setPromotions] = useState<GroupPromotionItem[]>([]);
+  const [promotionsError, setPromotionsError] = useState<string | null>(null);
+  const [hasLoadedPromotionsOnce, setHasLoadedPromotionsOnce] = useState(false);
+  const [promotionsLoading, setPromotionsLoading] = useState(false);
+  const [promotionDialogOpen, setPromotionDialogOpen] = useState(false);
+  const [promotionFee, setPromotionFee] = useState<string | null>(null);
+  const [promotionGroupId, setPromotionGroupId] = useState<string>('');
+  const [promotionText, setPromotionText] = useState('');
+  const [publishingPromotion, setPublishingPromotion] = useState(false);
+  const [requests, setRequests] = useState<GroupJoinRequestItem[]>([]);
+  const [requestsError, setRequestsError] = useState<string | null>(null);
+  const [hasLoadedRequestsOnce, setHasLoadedRequestsOnce] = useState(false);
+  const [requestsLoading, setRequestsLoading] = useState(false);
+  const [resolvingRequestId, setResolvingRequestId] = useState<string | null>(
+    null
+  );
+  const dismissedInviteStorageKey = useMemo(
+    () => getDismissedStorageKey(myAddress, 'invites'),
+    [myAddress]
+  );
+  const dismissedRequestStorageKey = useMemo(
+    () => getDismissedStorageKey(myAddress, 'requests'),
+    [myAddress]
+  );
+  const isCompact = displayMode === 'compact';
+  const rowPadding = isCompact ? '11px 12px' : '13px 13px';
+  const rowGap = isCompact ? '9px' : '11px';
+  const bodyGap = isCompact ? '10px' : '13px';
+  const messageLineClamp = isCompact ? 1 : 2;
+  const currentAddress = userInfo?.address;
+  const isAnyLoading = invitesLoading || requestsLoading || promotionsLoading;
+  const memberGroupIds = useMemo(
+    () =>
+      new Set(
+        [...(memberGroups ?? [])]
+          .map((group: any) => Number(group?.groupId))
+          .filter((groupId) => Number.isFinite(groupId))
+      ),
+    [memberGroups]
+  );
+
+  useEffect(() => {
+    groupInvitesCacheRef.current = groupInvitesCache;
+  }, [groupInvitesCache]);
+
+  useEffect(() => {
+    joinRequestsCacheRef.current = joinRequestsCache;
+  }, [joinRequestsCache]);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    void (async () => {
+      try {
+        const fee = await getFee('ARBITRARY');
+
+        if (isMounted) {
+          setPromotionFee(fee?.fee ?? null);
+        }
+      } catch (error) {
+        console.error('Failed to load promotion fee for groups widget', error);
+      }
+    })();
+
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    onRefreshStateChange?.(isAnyLoading);
+
+    return () => {
+      onRefreshStateChange?.(false);
+    };
+  }, [isAnyLoading, onRefreshStateChange]);
+
+  const notificationItems = useMemo<GroupNotificationItem[]>(() => {
+    return [...(memberGroups ?? [])]
+      .filter(
+        (group: any) =>
+          group?.groupId != null &&
+          group?.data !== GROUP_ACTIVITY_EXCLUDED_MESSAGE_DATA
+      )
+      .map((group: any) => {
+        const groupId = String(group.groupId);
+        const timestamp =
+          typeof group.timestamp === 'number' ? group.timestamp : 0;
+        const snippet = normalizeSnippet(
+          group.data,
+          t('groups_widget.recent_activity_placeholder')
+        );
+        const groupName =
+          group.groupId === '0'
+            ? t('groups_widget.group_general')
+            : group.groupName ||
+              t('groups_widget.group_named', { id: groupId });
+        const senderLabel =
+          group.sender === currentAddress
+            ? t('groups_widget.you')
+            : group.senderName ||
+              truncateAddress(
+                String(group.sender || t('groups_widget.unknown'))
+              );
+        const isUnread =
+          !!group.data &&
+          !!groupChatTimestamps[groupId] &&
+          group.sender !== currentAddress &&
+          !!timestamp &&
+          ((!timestampEnterData[groupId] && Date.now() - timestamp < 900000) ||
+            (timestampEnterData[groupId] ?? 0) < timestamp);
+        const ownerName = ownerNamesByGroupId?.[groupId] ?? null;
+
+        return {
+          avatarUrl: getGroupAvatarUrl(ownerName, groupId),
+          groupId,
+          groupName,
+          id: `${groupId}:${timestamp}:${group.sender ?? 'unknown'}`,
+          isEncryptedLike: isLikelyEncryptedSnippet(group.data),
+          isUnread,
+          openedAt: timestampEnterData[groupId] ?? 0,
+          senderLabel,
+          snippet,
+          timestamp,
+        };
+      })
+      .filter((item) => item.timestamp > 0)
+      .sort(sortGroupNotificationItems)
+      .slice(0, GROUP_NOTIFICATION_PREVIEW_LIMIT);
+  }, [
+    currentAddress,
+    groupChatTimestamps,
+    memberGroups,
+    ownerNamesByGroupId,
+    t,
+    timestampEnterData,
+  ]);
+
+  const unreadNotificationCount = useMemo(
+    () => notificationItems.filter((item) => item.isUnread).length,
+    [notificationItems]
+  );
+
+  const adminGroupIds = useMemo(
+    () =>
+      [...(myGroupsWhereIAmAdmin ?? [])]
+        .map((group: any) => group?.groupId)
+        .filter((groupId): groupId is number => typeof groupId === 'number')
+        .sort((left, right) => left - right),
+    [myGroupsWhereIAmAdmin]
+  );
+
+  const promotionAdminGroups = useMemo(
+    () => [...(myGroupsWhereIAmAdmin ?? [])],
+    [myGroupsWhereIAmAdmin]
+  );
+
+  const hasPromotionAdminAccess = promotionAdminGroups.length > 0;
+
+  useEffect(() => {
+    setPromotionActionStates((currentStates) => {
+      let didChange = false;
+      const nextStates = { ...currentStates };
+
+      for (const promotion of promotions) {
+        if (
+          memberGroupIds.has(Number(promotion.groupId)) &&
+          nextStates[promotion.id] != null
+        ) {
+          delete nextStates[promotion.id];
+          didChange = true;
+        }
+      }
+
+      return didChange ? nextStates : currentStates;
+    });
+  }, [memberGroupIds, promotions]);
+
+  const fetchInvites = useCallback(
+    async (force = false) => {
+      if (!myAddress) {
+        setInvites([]);
+        setHasLoadedInvitesOnce(true);
+        setInvitesLoading(false);
+        return;
+      }
+
+      const currentCache = groupInvitesCacheRef.current;
+      const cacheIsFresh =
+        !force &&
+        currentCache?.address === myAddress &&
+        Date.now() - currentCache.fetchedAt < GROUP_ACTIVITY_CACHE_TTL_MS;
+
+      if (cacheIsFresh && currentCache?.data) {
+        setInvites(
+          currentCache.data.map((group: any) => ({
+            description: group.description,
+            groupId: group.groupId,
+            groupName:
+              group.groupName ??
+              t('groups_widget.group_named', { id: group.groupId }),
+            id: `invite:${group.groupId}`,
+            isOpen: group.isOpen,
+            participantCount:
+              group.participantCount ?? group.memberCount ?? undefined,
+          }))
+        );
+        setInvitesError(null);
+        setHasLoadedInvitesOnce(true);
+        setInvitesLoading(false);
+        return;
+      }
+
+      setInvitesLoading(true);
+      setInvitesError(null);
+
+      try {
+        const response = await fetch(
+          `${getBaseApiReact()}/groups/invites/${myAddress}/?limit=0`
+        );
+
+        if (!response.ok) {
+          throw new Error(`Unable to load invites (${response.status})`);
+        }
+
+        const data = await response.json();
+        const withNames = await hydrateGroupsWithNames(
+          Array.isArray(data) ? data : []
+        );
+        const nextInvites = withNames.map((group: any) => ({
+          description: group.description,
+          groupId: group.groupId,
+          groupName:
+            group.groupName ??
+            t('groups_widget.group_named', { id: group.groupId }),
+          id: `invite:${group.groupId}`,
+          isOpen: group.isOpen,
+          participantCount:
+            group.participantCount ?? group.memberCount ?? undefined,
+        }));
+
+        setInvites(nextInvites);
+        setGroupInvitesCache({
+          address: myAddress,
+          data: withNames,
+          fetchedAt: Date.now(),
+        });
+      } catch (error) {
+        console.error('Failed to load group invites widget data', error);
+        setInvitesError(t('groups_widget.error_load_invites'));
+      } finally {
+        setHasLoadedInvitesOnce(true);
+        setInvitesLoading(false);
+      }
+    },
+    [myAddress, setGroupInvitesCache, t]
+  );
+
+  const fetchJoinRequests = useCallback(
+    async (force = false) => {
+      if (!myAddress || adminGroupIds.length === 0) {
+        setRequests([]);
+        setHasLoadedRequestsOnce(true);
+        setRequestsLoading(false);
+        return;
+      }
+
+      const currentCache = joinRequestsCacheRef.current;
+      const cacheIsFresh =
+        !force &&
+        currentCache != null &&
+        Date.now() - currentCache.fetchedAt < GROUP_ACTIVITY_CACHE_TTL_MS &&
+        currentCache.adminGroupIds.length === adminGroupIds.length &&
+        currentCache.adminGroupIds.every(
+          (value, index) => value === adminGroupIds[index]
+        );
+
+      if (cacheIsFresh && currentCache?.data) {
+        const nextRequests = currentCache.data.flatMap((entry: any) =>
+          (entry?.data ?? []).map((request: any) => ({
+            groupId: entry.group?.groupId,
+            groupName:
+              entry.group?.groupName ??
+              t('groups_widget.group_named', { id: entry.group?.groupId }),
+            id: `request:${entry.group?.groupId}:${request?.joiner}`,
+            joiner: request?.joiner ?? '',
+            requesterLabel:
+              request?.name ||
+              truncateAddress(
+                String(request?.joiner ?? t('groups_widget.unknown'))
+              ),
+          }))
+        );
+        setRequests(nextRequests);
+        setRequestsError(null);
+        setHasLoadedRequestsOnce(true);
+        setRequestsLoading(false);
+        return;
+      }
+
+      setRequestsLoading(true);
+      setRequestsError(null);
+
+      try {
+        const response = await fetch(
+          `${getBaseApiReact()}/groups/joinrequests/admin/${myAddress}`
+        );
+
+        if (!response.ok) {
+          throw new Error(`Unable to load join requests (${response.status})`);
+        }
+
+        const data = await response.json();
+        const normalized = Array.isArray(data)
+          ? data.map((entry: any) => ({
+              data: entry.joinRequests ?? [],
+              group: entry.group,
+            }))
+          : [];
+        const nextRequests = normalized.flatMap((entry: any) =>
+          (entry?.data ?? []).map((request: any) => ({
+            groupId: entry.group?.groupId,
+            groupName:
+              entry.group?.groupName ??
+              t('groups_widget.group_named', { id: entry.group?.groupId }),
+            id: `request:${entry.group?.groupId}:${request?.joiner}`,
+            joiner: request?.joiner ?? '',
+            requesterLabel:
+              request?.name ||
+              truncateAddress(
+                String(request?.joiner ?? t('groups_widget.unknown'))
+              ),
+          }))
+        );
+
+        setRequests(nextRequests);
+        setJoinRequestsCache({
+          adminGroupIds: [...adminGroupIds],
+          data: normalized,
+          fetchedAt: Date.now(),
+        });
+      } catch (error) {
+        console.error('Failed to load group join requests widget data', error);
+        setRequestsError(t('groups_widget.error_load_requests'));
+      } finally {
+        setHasLoadedRequestsOnce(true);
+        setRequestsLoading(false);
+      }
+    },
+    [adminGroupIds, myAddress, setJoinRequestsCache, t]
+  );
+
+  const fetchPromotions = useCallback(async () => {
+    setPromotionsLoading(true);
+    setPromotionsError(null);
+
+    try {
+      const url = `${getBaseApiReact()}${getArbitraryEndpointReact()}?mode=ALL&service=DOCUMENT&identifier=${GROUP_PROMOTION_IDENTIFIER_PREFIX}&limit=18&includemetadata=false&reverse=true&prefix=true`;
+      const response = await fetch(url, {
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        method: 'GET',
+      });
+
+      if (!response.ok) {
+        throw new Error(`Unable to load promotions (${response.status})`);
+      }
+
+      const resources = await response.json();
+
+      if (!Array.isArray(resources)) {
+        setPromotions([]);
+        setHasLoadedPromotionsOnce(true);
+        return;
+      }
+
+      const promotionCandidates = resources
+        .filter(
+          (resource: any) =>
+            resource?.identifier &&
+            resource?.service === 'DOCUMENT' &&
+            typeof resource?.created === 'number' &&
+            (!resource?.size || resource.size < 260)
+        )
+        .slice(0, 18);
+
+      const hydrated = await Promise.all(
+        promotionCandidates.map(async (resource: any) => {
+          const textResponse = await fetch(
+            `${getBaseApiReact()}/arbitrary/${resource.service}/${resource.name}/${resource.identifier}`,
+            {
+              method: 'GET',
+            }
+          );
+
+          if (!textResponse.ok) {
+            return null;
+          }
+
+          const groupIdMatch = /group-(\d+)-/.exec(resource.identifier);
+          const groupId = groupIdMatch ? Number(groupIdMatch[1]) : NaN;
+
+          if (!Number.isFinite(groupId)) {
+            return null;
+          }
+
+          return {
+            created: resource.created,
+            data: await textResponse.text(),
+            groupId,
+            identifier: resource.identifier,
+            name: resource.name,
+          };
+        })
+      );
+
+      const uniqueGroupIds = new Set<number>();
+      const normalized = hydrated
+        .filter((item): item is NonNullable<typeof item> => item != null)
+        .sort((left, right) => right.created - left.created)
+        .filter((item) => {
+          if (uniqueGroupIds.has(item.groupId)) {
+            return false;
+          }
+
+          uniqueGroupIds.add(item.groupId);
+          return true;
+        })
+        .slice(0, GROUP_PROMOTION_MAX_ITEMS);
+
+      const withGroupNames = await hydrateGroupsWithNames(normalized);
+      setPromotions(
+        withGroupNames.map((promotion: any) => ({
+          created: promotion.created,
+          description: promotion.description,
+          groupId: promotion.groupId,
+          groupName:
+            promotion.groupName ??
+            t('groups_widget.group_named', { id: promotion.groupId }),
+          id: `promotion:${promotion.identifier}`,
+          isOpen:
+            typeof promotion.isOpen === 'boolean'
+              ? promotion.isOpen
+              : undefined,
+          memberCount:
+            promotion.memberCount ?? promotion.participantCount ?? undefined,
+          promoterName: promotion.name ?? t('groups_widget.unknown'),
+          snippet: normalizeSnippet(
+            promotion.data,
+            t('groups_widget.fresh_promotion_snippet')
+          ),
+        }))
+      );
+      setHasLoadedPromotionsOnce(true);
+    } catch (error) {
+      console.error('Failed to load group promotions widget data', error);
+      setPromotionsError(t('groups_widget.error_load_promotions'));
+    } finally {
+      setHasLoadedPromotionsOnce(true);
+      setPromotionsLoading(false);
+    }
+  }, [t]);
+
+  useEffect(() => {
+    let cancelled = false;
+    setActionFeedback(null);
+    setShowIgnoredInvites(false);
+    setShowIgnoredRequests(false);
+    void (async () => {
+      const [storedInvites, storedRequests] = await Promise.all([
+        loadMiscStoredIds(dismissedInviteStorageKey),
+        loadMiscStoredIds(dismissedRequestStorageKey),
+      ]);
+      if (cancelled) return;
+      setDismissedInviteIds(storedInvites);
+      setDismissedRequestIds(storedRequests);
+    })();
+    void fetchInvites(false);
+    void fetchJoinRequests(false);
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    dismissedInviteStorageKey,
+    dismissedRequestStorageKey,
+    fetchInvites,
+    fetchJoinRequests,
+  ]);
+
+  useEffect(() => {
+    if (!hasLoadedInvitesOnce || invitesError || invites.length === 0) return;
+    const liveIds = new Set(invites.map((invite) => invite.id));
+    setDismissedInviteIds((current) => {
+      const next = current.filter((id) => liveIds.has(id));
+      if (next.length === current.length) return current;
+      void saveMiscStoredIds(dismissedInviteStorageKey, next);
+      return next;
+    });
+  }, [dismissedInviteStorageKey, hasLoadedInvitesOnce, invites, invitesError]);
+
+  useEffect(() => {
+    if (!hasLoadedRequestsOnce || requestsError || requests.length === 0) return;
+    const liveIds = new Set(requests.map((request) => request.id));
+    setDismissedRequestIds((current) => {
+      const next = current.filter((id) => liveIds.has(id));
+      if (next.length === current.length) return current;
+      void saveMiscStoredIds(dismissedRequestStorageKey, next);
+      return next;
+    });
+  }, [
+    dismissedRequestStorageKey,
+    hasLoadedRequestsOnce,
+    requests,
+    requestsError,
+  ]);
+
+  useEffect(() => {
+    if (refreshToken === 0) {
+      return;
+    }
+
+    setActionFeedback(null);
+    void fetchInvites(true);
+    void fetchJoinRequests(true);
+  }, [fetchInvites, fetchJoinRequests, refreshToken]);
+
+  useEffect(() => {
+    if (activeTab !== 'promoted') {
+      return;
+    }
+    void fetchPromotions();
+  }, [activeTab, fetchPromotions, refreshToken]);
+
+  const visibleInvites = useMemo(
+    () => invites.filter((invite) => !dismissedInviteIds.includes(invite.id)),
+    [dismissedInviteIds, invites]
+  );
+  const ignoredInvites = useMemo(
+    () => invites.filter((invite) => dismissedInviteIds.includes(invite.id)),
+    [dismissedInviteIds, invites]
+  );
+
+  const visibleRequests = useMemo(
+    () =>
+      requests.filter((request) => !dismissedRequestIds.includes(request.id)),
+    [dismissedRequestIds, requests]
+  );
+  const ignoredRequests = useMemo(
+    () =>
+      requests.filter((request) => dismissedRequestIds.includes(request.id)),
+    [dismissedRequestIds, requests]
+  );
+
+  const showInitialInvitesLoading =
+    invitesLoading && !hasLoadedInvitesOnce && visibleInvites.length === 0;
+  const showInitialRequestsLoading =
+    requestsLoading && !hasLoadedRequestsOnce && visibleRequests.length === 0;
+  const showInitialPromotionsLoading =
+    promotionsLoading && !hasLoadedPromotionsOnce && promotions.length === 0;
+
+  const handleOpenGroupChat = useCallback((groupId: string) => {
+    executeEvent('openGroupMessage', {
+      from: groupId,
+    });
+  }, []);
+
+  const handleOpenGroupDiscovery = useCallback(() => {
+    executeEvent('open-group-discovery', {});
+  }, []);
+
+  const handleAcceptInvite = useCallback(
+    async (invite: GroupInviteItem) => {
+      try {
+        const fee = await getFee('JOIN_GROUP');
+        await show({
+          message: t('groups_widget.confirm_join_group'),
+          publishFee: `${fee.fee} QORT`,
+        });
+        setJoiningGroupId(invite.groupId);
+        setActionFeedback(null);
+
+        const response = await window.sendMessage('joinGroup', {
+          groupId: invite.groupId,
+        });
+
+        if (response?.error) {
+          throw new Error(response.error);
+        }
+
+        setInvites((current) =>
+          current.filter((currentInvite) => currentInvite.id !== invite.id)
+        );
+        setDismissedInviteIds((current) => {
+          const next = current.filter((id) => id !== invite.id);
+          void saveMiscStoredIds(dismissedInviteStorageKey, next);
+          return next;
+        });
+        setGroupInvitesCache(null);
+        setActionFeedback({
+          message: t('groups_widget.joined_group', { name: invite.groupName }),
+          tone: 'success',
+        });
+      } catch (error: any) {
+        console.error('Failed to join group invite from widget', error);
+        setActionFeedback({
+          message: error?.message || t('groups_widget.error_accept_invite'),
+          tone: 'error',
+        });
+      } finally {
+        setJoiningGroupId(null);
+      }
+    },
+    [dismissedInviteStorageKey, setGroupInvitesCache, show, t]
+  );
+
+  const handleIgnoreInvite = useCallback(
+    async (inviteId: string) => {
+      const next = dismissedInviteIds.includes(inviteId)
+        ? dismissedInviteIds
+        : [...dismissedInviteIds, inviteId];
+      await saveMiscStoredIds(dismissedInviteStorageKey, next);
+      setDismissedInviteIds(next);
+      setActionFeedback({
+        message: t('groups_widget.invite_hidden'),
+        tone: 'success',
+      });
+    },
+    [dismissedInviteIds, dismissedInviteStorageKey, t]
+  );
+
+  const handleRestoreInvite = useCallback(
+    async (inviteId: string) => {
+      const next = dismissedInviteIds.filter((id) => id !== inviteId);
+      await saveMiscStoredIds(dismissedInviteStorageKey, next);
+      setDismissedInviteIds(next);
+    },
+    [dismissedInviteIds, dismissedInviteStorageKey]
+  );
+
+  const handleApproveRequest = useCallback(
+    async (request: GroupJoinRequestItem) => {
+      try {
+        const fee = await getFee('GROUP_INVITE');
+        await show({
+          message: t('groups_widget.confirm_approve_request'),
+          publishFee: `${fee.fee} QORT`,
+        });
+        setResolvingRequestId(request.id);
+        setActionFeedback(null);
+
+        const response = await window.sendMessage('inviteToGroup', {
+          groupId: request.groupId,
+          inviteTime: 10800,
+          qortalAddress: request.joiner,
+        });
+
+        if (response?.error) {
+          throw new Error(response.error);
+        }
+
+        setRequests((current) =>
+          current.filter(
+            (currentRequest) => currentRequest.id !== request.id
+          )
+        );
+        setDismissedRequestIds((current) => {
+          const next = current.filter((id) => id !== request.id);
+          void saveMiscStoredIds(dismissedRequestStorageKey, next);
+          return next;
+        });
+        setJoinRequestsCache(null);
+        setActionFeedback({
+          message: t('groups_widget.request_approved', {
+            requester: request.requesterLabel,
+            group: request.groupName,
+          }),
+          tone: 'success',
+        });
+      } catch (error: any) {
+        console.error('Failed to approve join request from widget', error);
+        setActionFeedback({
+          message: error?.message || t('groups_widget.error_approve_request'),
+          tone: 'error',
+        });
+      } finally {
+        setResolvingRequestId(null);
+      }
+    },
+    [dismissedRequestStorageKey, setJoinRequestsCache, show, t]
+  );
+
+  const handleRejectRequest = useCallback(
+    async (requestId: string) => {
+      const next = dismissedRequestIds.includes(requestId)
+        ? dismissedRequestIds
+        : [...dismissedRequestIds, requestId];
+      await saveMiscStoredIds(dismissedRequestStorageKey, next);
+      setDismissedRequestIds(next);
+      setActionFeedback({
+        message: t('groups_widget.request_removed'),
+        tone: 'success',
+      });
+    },
+    [dismissedRequestIds, dismissedRequestStorageKey, t]
+  );
+
+  const handleRestoreRequest = useCallback(
+    async (requestId: string) => {
+      const next = dismissedRequestIds.filter((id) => id !== requestId);
+      await saveMiscStoredIds(dismissedRequestStorageKey, next);
+      setDismissedRequestIds(next);
+    },
+    [dismissedRequestIds, dismissedRequestStorageKey]
+  );
+
+  const handleJoinPromotedGroup = useCallback(
+    async (promotion: GroupPromotionItem) => {
+      try {
+        const fee = await getFee('JOIN_GROUP');
+        await show({
+          message: promotion.isOpen
+            ? t('groups_widget.confirm_join_promoted_open')
+            : t('groups_widget.confirm_join_promoted_closed'),
+          publishFee: `${fee.fee} QORT`,
+        });
+        setPromotionActionStates((currentStates) => ({
+          ...currentStates,
+          [promotion.id]: 'connecting',
+        }));
+        setJoiningPromotionGroupId(promotion.groupId);
+        setActionFeedback(null);
+
+        const response = await window.sendMessage('joinGroup', {
+          groupId: promotion.groupId,
+        });
+
+        if (response?.error) {
+          throw new Error(response.error);
+        }
+
+        setPromotionActionStates((currentStates) => ({
+          ...currentStates,
+          [promotion.id]:
+            promotion.isOpen === false ? 'request_sent' : 'processing',
+        }));
+        setActionFeedback({
+          message: promotion.isOpen
+            ? t('groups_widget.joined_promoted', { name: promotion.groupName })
+            : t('groups_widget.join_request_sent', {
+                name: promotion.groupName,
+              }),
+          tone: 'success',
+        });
+      } catch (error: any) {
+        console.error('Failed to join promoted group from widget', error);
+        setPromotionActionStates((currentStates) => {
+          const nextStates = { ...currentStates };
+          delete nextStates[promotion.id];
+          return nextStates;
+        });
+        setActionFeedback({
+          message: error?.message || t('groups_widget.error_promoted'),
+          tone: 'error',
+        });
+      } finally {
+        setJoiningPromotionGroupId(null);
+      }
+    },
+    [show, t]
+  );
+
+  const handlePublishPromotion = useCallback(async () => {
+    try {
+      if (!promotionGroupId || !promotionText.trim()) {
+        return;
+      }
+
+      setPublishingPromotion(true);
+      setActionFeedback(null);
+
+      const identifier = `group-promotions-ui24-group-${promotionGroupId}-${Date.now().toString(36)}`;
+
+      const response = await window.sendMessage('publishOnQDN', {
+        data: utf8ToBase64(promotionText.trim()),
+        identifier,
+        service: 'DOCUMENT',
+        uploadType: 'base64',
+      });
+
+      if (response?.error) {
+        throw new Error(response.error);
+      }
+
+      setPromotionDialogOpen(false);
+      setPromotionGroupId('');
+      setPromotionText('');
+      setActionFeedback({
+        message: t('groups_widget.promotion_published'),
+        tone: 'success',
+      });
+      await fetchPromotions();
+      setActiveTab('promoted');
+    } catch (error: any) {
+      console.error('Failed to publish group promotion from widget', error);
+      setActionFeedback({
+        message: error?.message || t('groups_widget.error_publish_promotion'),
+        tone: 'error',
+      });
+    } finally {
+      setPublishingPromotion(false);
+    }
+  }, [fetchPromotions, promotionGroupId, promotionText, t]);
+
+  const handleOpenPromotionDialog = useCallback(() => {
+    if (!hasPromotionAdminAccess) {
+      return;
+    }
+
+    setPromotionGroupId((currentValue) => {
+      if (currentValue) {
+        return currentValue;
+      }
+
+      const firstGroupId = promotionAdminGroups[0]?.groupId;
+      return firstGroupId != null ? String(firstGroupId) : currentValue;
+    });
+    setPromotionDialogOpen(true);
+  }, [hasPromotionAdminAccess, promotionAdminGroups]);
+
+  const sharedScrollerSx = {
+    display: 'flex',
+    flex: '1 1 auto',
+    flexDirection: 'column',
+    gap: bodyGap,
+    minHeight: 0,
+    // Virtualized lists adjust total height as rows measure — disable scroll anchoring.
+    overflowAnchor: 'none',
+    overflowY: 'auto',
+
+    pr: '4px',
+    scrollbarColor: `${alpha(theme.palette.text.secondary, 0.3)} transparent`,
+    scrollbarWidth: 'thin',
+    '&::-webkit-scrollbar': {
+      width: '10px',
+    },
+    '&::-webkit-scrollbar-thumb': {
+      backgroundColor: alpha(theme.palette.text.secondary, 0.24),
+      border: '3px solid transparent',
+      borderRadius: '999px',
+      backgroundClip: 'padding-box',
+    },
+  } as const;
+
+  const promotionPrimaryActionSx = {
+    ...getBlueTier1ButtonSx(),
+    borderRadius: '999px',
+    fontSize: '0.67rem',
+    fontWeight: 800,
+    minHeight: '27px',
+    minWidth: '102px',
+    px: 1.15,
+    py: 0.35,
+    textTransform: 'none',
+    whiteSpace: 'nowrap',
+  } as const;
+
+  const promotionSecondaryActionSx = {
+    alignItems: 'center',
+    backgroundColor:
+      theme.palette.mode === 'dark'
+        ? alpha(theme.palette.common.white, 0.045)
+        : alpha(theme.palette.text.primary, 0.045),
+    border: `1px solid ${alpha(
+      theme.palette.border.main,
+      theme.palette.mode === 'dark' ? 0.22 : 0.14
+    )}`,
+    borderRadius: '999px',
+    color: theme.palette.text.secondary,
+    display: 'inline-flex',
+    fontSize: '0.67rem',
+    fontWeight: 700,
+    justifyContent: 'center',
+    minHeight: '27px',
+    minWidth: '102px',
+    px: 1.05,
+    py: 0.35,
+    textTransform: 'none',
+    whiteSpace: 'nowrap',
+    '&.Mui-disabled': {
+      color: alpha(theme.palette.text.secondary, 0.84),
+      opacity: 1,
+    },
+  } as const;
+
+  const ignoredItemsActionSx = {
+    alignItems: 'center',
+    border: `1px solid ${alpha(
+      theme.palette.border.main,
+      theme.palette.mode === 'dark' ? 0.22 : 0.14
+    )}`,
+    borderRadius: '999px',
+    color: theme.palette.text.secondary,
+    display: 'inline-flex',
+    flexShrink: 0,
+    fontSize: '0.7rem',
+    fontWeight: 700,
+    minHeight: '30px',
+    px: 1.25,
+    textTransform: 'none',
+    '&:hover': {
+      backgroundColor: theme.palette.action.hover,
+      color: theme.palette.text.primary,
+    },
+  } as const;
+
+  const headerUtilityActionSx = {
+    alignItems: 'center',
+    backgroundColor:
+      theme.palette.mode === 'dark'
+        ? alpha(theme.palette.common.white, 0.03)
+        : alpha(theme.palette.text.primary, 0.035),
+    border: `1px solid ${alpha(
+      theme.palette.border.main,
+      theme.palette.mode === 'dark' ? 0.16 : 0.1
+    )}`,
+    borderRadius: '999px',
+    color: theme.palette.text.secondary,
+    display: 'inline-flex',
+    fontSize: '0.69rem',
+    fontWeight: 700,
+    gap: '6px',
+    minHeight: '28px',
+    px: 1.15,
+    textTransform: 'none',
+    transition:
+      'background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease',
+    whiteSpace: 'nowrap',
+    '&:hover': {
+      backgroundColor:
+        theme.palette.mode === 'dark'
+          ? alpha(theme.palette.common.white, 0.05)
+          : alpha(theme.palette.text.primary, 0.05),
+      borderColor: alpha(
+        theme.palette.border.main,
+        theme.palette.mode === 'dark' ? 0.24 : 0.16
+      ),
+      color: theme.palette.text.primary,
+      transform: 'translateY(-1px)',
+    },
+    '&:active': {
+      transform: 'translateY(0)',
+    },
+    '&.Mui-disabled': {
+      color: alpha(theme.palette.text.secondary, 0.7),
+      opacity: 0.72,
+    },
+  } as const;
+
+  const discoverGroupsActionSx = {
+    ...headerUtilityActionSx,
+    background:
+      theme.palette.mode === 'dark'
+        ? 'rgba(88, 122, 178, 0.34)'
+        : 'rgba(117, 161, 227, 0.18)',
+    border: `1px solid ${alpha(
+      '#8FB8F3',
+      theme.palette.mode === 'dark' ? 0.18 : 0.24
+    )}`,
+    boxShadow:
+      theme.palette.mode === 'dark'
+        ? '0 0 0 1px rgba(255,255,255,0.028) inset, 0 0 12px rgba(132,175,240,0.1)'
+        : '0 0 0 1px rgba(255,255,255,0.05) inset, 0 0 10px rgba(132,175,240,0.08)',
+    color:
+      theme.palette.mode === 'dark'
+        ? alpha('#8FB8F3', 0.92)
+        : alpha('#5A8FE0', 0.9),
+    '&:hover': {
+      ...getBlueTier1ButtonSx()['&:hover'],
+      borderColor: 'rgba(143, 184, 243, 0.22)',
+      color: APP_BLUE_SURFACE_TEXT,
+      transform: 'translateY(-1px)',
+    },
+    '&:active': {
+      ...getBlueTier1ButtonSx()['&:active'],
+      transform: 'scale(0.97)',
+    },
+  } as const;
+
+  const widgetItemSurfaceColor =
+    theme.palette.mode === 'dark'
+      ? 'linear-gradient(180deg, rgba(45, 49, 60, 0.9) 0%, rgba(36, 40, 50, 0.96) 100%)'
+      : alpha(theme.palette.text.primary, 0.036);
+
+  const widgetItemHoverSurfaceColor =
+    theme.palette.mode === 'dark'
+      ? 'linear-gradient(180deg, rgba(49, 54, 66, 0.94) 0%, rgba(39, 43, 53, 0.98) 100%)'
+      : alpha(theme.palette.text.primary, 0.048);
+
+  const widgetItemBorderColor =
+    theme.palette.mode === 'dark'
+      ? 'rgba(255,255,255,0.06)'
+      : alpha(theme.palette.border.main, 0.12);
+
+  const widgetItemHoverBorderColor =
+    theme.palette.mode === 'dark'
+      ? 'rgba(255,255,255,0.085)'
+      : alpha(theme.palette.border.main, 0.18);
+
+  const widgetItemInsetShadow =
+    theme.palette.mode === 'dark'
+      ? `0 10px 24px rgba(0,0,0,0.18), inset 0 1px 0 ${alpha(theme.palette.common.white, 0.045)}`
+      : `inset 0 1px 0 ${alpha(theme.palette.common.white, 0.72)}`;
+  const readNotificationSurfaceColor =
+    theme.palette.mode === 'dark'
+      ? 'linear-gradient(180deg, rgba(43, 47, 58, 0.88) 0%, rgba(34, 38, 48, 0.95) 100%)'
+      : alpha(theme.palette.text.primary, 0.03);
+  const readNotificationHoverSurfaceColor =
+    theme.palette.mode === 'dark'
+      ? 'linear-gradient(180deg, rgba(47, 52, 63, 0.92) 0%, rgba(37, 41, 51, 0.98) 100%)'
+      : alpha(theme.palette.text.primary, 0.04);
+  const unreadNotificationSurfaceColor =
+    theme.palette.mode === 'dark'
+      ? `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.14)} 0%, rgba(40, 49, 63, 0.94) 20%, rgba(34, 40, 50, 0.98) 100%)`
+      : alpha(theme.palette.primary.main, 0.03);
+  const unreadNotificationHoverSurfaceColor =
+    theme.palette.mode === 'dark'
+      ? `linear-gradient(180deg, ${alpha(theme.palette.primary.main, 0.18)} 0%, rgba(44, 53, 68, 0.97) 22%, rgba(37, 43, 54, 1) 100%)`
+      : alpha(theme.palette.primary.main, 0.04);
+  const unreadNotificationBorderColor =
+    theme.palette.mode === 'dark'
+      ? alpha(theme.palette.primary.main, 0.16)
+      : alpha(theme.palette.primary.main, 0.085);
+
+  const effectiveNotificationItems = useMemo(
+    () => [...notificationItems].sort(sortGroupNotificationItems),
+    [notificationItems]
+  );
+  const effectiveInvites = showIgnoredInvites ? ignoredInvites : visibleInvites;
+  const effectiveRequests = showIgnoredRequests
+    ? ignoredRequests
+    : visibleRequests;
+  const effectivePromotions = promotions;
+  const effectiveUnreadNotificationCount = unreadNotificationCount;
+
+  const getPromotionVisualState = useCallback(
+    (
+      promotion: GroupPromotionItem,
+      isMember: boolean
+    ): GroupPromotionVisualState => {
+      if (isMember) {
+        return 'member';
+      }
+
+      if (joiningPromotionGroupId === promotion.groupId) {
+        return 'connecting';
+      }
+
+      return (
+        promotionActionStates[promotion.id] ??
+        (promotion.isOpen === false ? 'request' : 'join')
+      );
+    },
+    [joiningPromotionGroupId, promotionActionStates]
+  );
+
+  const groupsListScrollRef = useRef<HTMLDivElement | null>(null);
+  const bodyGapPx = isCompact ? 10 : 13;
+
+  const virtualListLength =
+    activeTab === 'notifications'
+      ? effectiveNotificationItems.length
+      : activeTab === 'invites'
+        ? effectiveInvites.length
+        : activeTab === 'requests'
+          ? effectiveRequests.length
+          : effectivePromotions.length;
+
+  const rowVirtualizer = useVirtualizer({
+    count: virtualListLength,
+    getScrollElement: () => groupsListScrollRef.current,
+    estimateSize: useCallback(() => {
+      switch (activeTab) {
+        case 'notifications':
+          return isCompact ? 132 : 152;
+        case 'invites':
+          return isCompact ? 168 : 182;
+        case 'requests':
+          return isCompact ? 185 : 200;
+        case 'promoted':
+          return isCompact ? 210 : 230;
+        default:
+          return 160;
+      }
+    }, [activeTab, isCompact]),
+    getItemKey: useCallback(
+      (index: number) => {
+        switch (activeTab) {
+          case 'notifications':
+            return `n:${effectiveNotificationItems[index]?.id ?? index}`;
+          case 'invites':
+            return `i:${effectiveInvites[index]?.id ?? index}`;
+          case 'requests':
+            return `r:${effectiveRequests[index]?.id ?? index}`;
+          case 'promoted':
+            return `p:${effectivePromotions[index]?.id ?? index}`;
+          default:
+            return `x:${index}`;
+        }
+      },
+      [
+        activeTab,
+        effectiveNotificationItems,
+        effectiveInvites,
+        effectiveRequests,
+        effectivePromotions,
+      ]
+    ),
+    overscan: 6,
+  });
+
+  const renderVirtualizedList = (
+    itemCount: number,
+    renderRow: (index: number) => ReactElement | null
+  ) => (
+    <Box
+      ref={groupsListScrollRef}
+      sx={{
+        ...sharedScrollerSx,
+        gap: 0,
+      }}
+    >
+      <Box
+        sx={{
+          height: rowVirtualizer.getTotalSize() + 6,
+          position: 'relative',
+          width: '100%',
+        }}
+      >
+        <Box
+          sx={{
+            left: 0,
+            position: 'absolute',
+            top: 0,
+            width: '100%',
+          }}
+        >
+          {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+            const node = renderRow(virtualRow.index);
+            if (!node) {
+              return null;
+            }
+            return (
+              <Box
+                key={virtualRow.key}
+                data-index={virtualRow.index}
+                ref={rowVirtualizer.measureElement}
+                sx={{
+                  boxSizing: 'border-box',
+                  left: 0,
+                  paddingBottom:
+                    virtualRow.index < itemCount - 1 ? `${bodyGapPx}px` : 0,
+                  position: 'absolute',
+                  top: 0,
+                  transform: `translate3d(0, ${virtualRow.start}px, 0)`,
+                  width: '100%',
+                }}
+              >
+                {node}
+              </Box>
+            );
+          })}
+        </Box>
+      </Box>
+    </Box>
+  );
+
+  const renderNotificationList = () => (
+    <QAppWidgetContainer
+      emptyMessage={t('groups_widget.notifications_empty_message')}
+      emptyTitle={t('groups_widget.notifications_empty_title')}
+      hasContent={effectiveNotificationItems.length > 0}
+      isEmpty={effectiveNotificationItems.length === 0}
+      isLoading={false}
+      loadingLabel={t('groups_widget.loading_notifications')}
+      onSecondaryAction={handleOpenGroupDiscovery}
+      secondaryActionLabel={t('groups_widget.discover_groups')}
+      secondaryActionVariant="link"
+      stateVerticalOffset="-24px"
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flex: '1 1 auto',
+          flexDirection: 'column',
+          gap: bodyGap,
+          minHeight: 0,
+        }}
+      >
+        {actionFeedback ? (
+          <InlineFeedback
+            message={actionFeedback.message}
+            tone={actionFeedback.tone}
+          />
+        ) : null}
+        {renderVirtualizedList(effectiveNotificationItems.length, (index) => {
+          const item = effectiveNotificationItems[index];
+          if (!item) return null;
+
+          return (
+            <ButtonBase
+              onClick={() => handleOpenGroupChat(item.groupId)}
+              sx={{
+                alignItems: 'flex-start',
+                background: item.isUnread
+                  ? unreadNotificationSurfaceColor
+                  : readNotificationSurfaceColor,
+                border: `1px solid ${
+                  item.isUnread
+                    ? unreadNotificationBorderColor
+                    : widgetItemBorderColor
+                }`,
+                borderRadius: GROUP_WIDGET_CARD_RADIUS,
+                boxShadow: widgetItemInsetShadow,
+                display: 'flex',
+                flexShrink: 0,
+                gap: rowGap,
+                overflow: 'hidden',
+                p: rowPadding,
+                position: 'relative',
+                textAlign: 'left',
+                transition:
+                  'background 140ms ease, border-color 140ms ease, transform 120ms ease, box-shadow 140ms ease',
+                width: '100%',
+                '&::before': item.isUnread
+                  ? {
+                      backgroundColor: alpha(
+                        theme.palette.primary.main,
+                        theme.palette.mode === 'dark' ? 0.34 : 0.28
+                      ),
+                      borderBottomLeftRadius: GROUP_WIDGET_CARD_RADIUS,
+                      borderTopLeftRadius: GROUP_WIDGET_CARD_RADIUS,
+                      content: '""',
+                      left: 0,
+                      position: 'absolute',
+                      top: 0,
+                      bottom: 0,
+                      width: '3px',
+                    }
+                  : undefined,
+                '&:hover': {
+                  background: item.isUnread
+                    ? unreadNotificationHoverSurfaceColor
+                    : readNotificationHoverSurfaceColor,
+                  borderColor: item.isUnread
+                    ? alpha(
+                        theme.palette.primary.main,
+                        theme.palette.mode === 'dark' ? 0.18 : 0.13
+                      )
+                    : widgetItemHoverBorderColor,
+                  boxShadow:
+                    theme.palette.mode === 'dark'
+                      ? `0 14px 28px rgba(0,0,0,0.22), inset 0 1px 0 ${alpha(theme.palette.common.white, 0.05)}`
+                      : widgetItemInsetShadow,
+                  transform: 'translateY(-1px)',
+                },
+              }}
+            >
+              <Avatar
+                alt={item.groupName}
+                src={item.avatarUrl ?? undefined}
+                sx={{
+                  bgcolor: alpha(theme.palette.primary.main, 0.12),
+                  color: theme.palette.text.primary,
+                  flexShrink: 0,
+                  height: isCompact ? 34 : 38,
+                  width: isCompact ? 34 : 38,
+                }}
+              >
+                {item.groupName.charAt(0).toUpperCase()}
+              </Avatar>
+
+              <Box
+                sx={{
+                  display: 'flex',
+                  flex: '1 1 auto',
+                  flexDirection: 'column',
+                  gap: isCompact ? '4px' : '5px',
+                  minWidth: 0,
+                }}
+              >
+                <Box
+                  sx={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    gap: '8px',
+                    justifyContent: 'space-between',
+                    minWidth: 0,
+                  }}
+                >
+                  <Box
+                    sx={{
+                      alignItems: 'center',
+                      display: 'inline-flex',
+                      gap: '8px',
+                      minWidth: 0,
+                    }}
+                  >
+                    <Typography
+                      sx={{
+                        color: theme.palette.text.primary,
+                        fontSize: isCompact ? '0.8rem' : '0.84rem',
+                        fontWeight: item.isUnread ? 760 : 680,
+                        minWidth: 0,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {item.groupName}
+                    </Typography>
+                    {item.isUnread ? (
+                      <MarkChatUnreadRoundedIcon
+                        sx={{
+                          color: theme.palette.primary.main,
+                          flexShrink: 0,
+                          fontSize: '0.95rem',
+                        }}
+                      />
+                    ) : null}
+                  </Box>
+                  <Typography
+                    sx={{
+                      color: theme.palette.text.secondary,
+                      flexShrink: 0,
+                      fontSize: '0.67rem',
+                      fontWeight: 600,
+                    }}
+                  >
+                    {formatTimestamp(item.timestamp)}
+                  </Typography>
+                </Box>
+                <Box
+                  sx={{
+                    alignItems: 'baseline',
+                    display: 'inline-flex',
+                    fontSize: '0.7rem',
+                    gap: '4px',
+                  }}
+                >
+                  <Typography
+                    component="span"
+                    sx={{
+                      color: alpha(theme.palette.text.secondary, 0.72),
+                      fontSize: 'inherit',
+                      fontWeight: 600,
+                      lineHeight: 1.3,
+                    }}
+                  >
+                    {t('groups_widget.from_label')}
+                  </Typography>
+                  <Typography
+                    component="span"
+                    sx={{
+                      color: theme.palette.primary.main,
+                      fontSize: 'inherit',
+                      fontWeight: 700,
+                      lineHeight: 1.3,
+                    }}
+                  >
+                    {item.senderLabel}
+                  </Typography>
+                </Box>
+                <Box
+                  sx={{
+                    color: theme.palette.text.secondary,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: item.isEncryptedLike ? '4px' : 0,
+                    minWidth: 0,
+                    pb: item.isEncryptedLike ? '4px' : 0,
+                  }}
+                >
+                  {item.isEncryptedLike ? (
+                    <Box
+                      sx={{
+                        alignItems: 'baseline',
+                        color: alpha(theme.palette.text.secondary, 0.82),
+                        display: 'inline-flex',
+                        gap: '5px',
+                        minWidth: 0,
+                      }}
+                    >
+                      <LockRoundedIcon
+                        sx={{
+                          fontSize: '0.8rem',
+                          transform: 'translateY(1px)',
+                        }}
+                      />
+                      <Typography
+                        component="span"
+                        sx={{
+                          color: 'inherit',
+                          fontSize: '0.68rem',
+                          fontWeight: 600,
+                          lineHeight: 1.25,
+                        }}
+                      >
+                        {t('groups_widget.new_encrypted_message')}
+                      </Typography>
+                    </Box>
+                  ) : (
+                    <Typography
+                      sx={{
+                        color: theme.palette.text.secondary,
+                        display: '-webkit-box',
+                        flex: '1 1 auto',
+                        fontSize: isCompact ? '0.73rem' : '0.76rem',
+                        lineHeight: 1.5,
+                        minWidth: 0,
+                        overflow: 'hidden',
+                        WebkitBoxOrient: 'vertical',
+                        WebkitLineClamp: messageLineClamp,
+                        wordBreak: 'break-word',
+                      }}
+                    >
+                      {item.snippet}
+                    </Typography>
+                  )}
+                </Box>
+                <Box
+                  sx={{
+                    alignItems: 'center',
+                    color: theme.palette.text.secondary,
+                    display: 'inline-flex',
+                    fontSize: '0.67rem',
+                    fontWeight: 700,
+                    gap: '5px',
+                    mt: '2px',
+                  }}
+                >
+                  <OpenInNewRoundedIcon sx={{ fontSize: '0.82rem' }} />
+                  {item.isEncryptedLike
+                    ? t('groups_widget.view_conversation')
+                    : t('groups_widget.open_conversation')}
+                </Box>
+              </Box>
+            </ButtonBase>
+          );
+        })}
+      </Box>
+    </QAppWidgetContainer>
+  );
+
+  const renderInvitesList = () => (
+    <QAppWidgetContainer
+      error={invitesError}
+      hasContent={effectiveInvites.length > 0}
+      isEmpty={false}
+      isLoading={showInitialInvitesLoading}
+      loadingLabel={t('groups_widget.loading_invites')}
+      onRetry={() => void fetchInvites(true)}
+      stateVerticalOffset="-24px"
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flex: '1 1 auto',
+          flexDirection: 'column',
+          gap: bodyGap,
+          minHeight: 0,
+        }}
+      >
+        {actionFeedback ? (
+          <InlineFeedback
+            message={actionFeedback.message}
+            tone={actionFeedback.tone}
+          />
+        ) : null}
+        {(ignoredInvites.length > 0 || showIgnoredInvites) && (
+          <Box
+            sx={{
+              alignItems: 'center',
+              display: 'flex',
+              justifyContent: 'space-between',
+              gap: 1,
+            }}
+          >
+            <Typography
+              sx={{
+                color: theme.palette.text.secondary,
+                fontSize: '0.72rem',
+                fontWeight: 700,
+              }}
+            >
+              {showIgnoredInvites
+                ? t('groups_widget.ignored_invites', {
+                    count: ignoredInvites.length,
+                    defaultValue: 'Ignored invites ({{count}})',
+                  })
+                : t('groups_widget.hidden_invites_count', {
+                    count: ignoredInvites.length,
+                    defaultValue: '{{count}} ignored',
+                  })}
+            </Typography>
+            <ButtonBase
+              onClick={() => setShowIgnoredInvites((prev) => !prev)}
+              sx={ignoredItemsActionSx}
+            >
+              {showIgnoredInvites
+                ? t('groups_widget.back_to_invites', {
+                    defaultValue: 'Back to invites',
+                  })
+                : t('groups_widget.show_ignored', {
+                    defaultValue: 'Show ignored',
+                  })}
+            </ButtonBase>
+          </Box>
+        )}
+        {effectiveInvites.length === 0 &&
+        !showInitialInvitesLoading &&
+        !invitesError ? (
+          <IllustratedEmptyState
+            actionLabel={t('groups_widget.refresh')}
+            compact={isCompact}
+            description={
+              showIgnoredInvites
+                ? t('groups_widget.ignored_invites_empty_description', {
+                    defaultValue:
+                      'Ignored invites are checked against your current pending invites.',
+                  })
+                : t('groups_widget.invites_empty_description')
+            }
+            onAction={() => void fetchInvites(true)}
+            title={
+              showIgnoredInvites
+                ? t('groups_widget.ignored_invites_empty_title', {
+                    defaultValue: 'No ignored invites',
+                  })
+                : t('groups_widget.invites_empty_title')
+            }
+            variant="invites"
+          />
+        ) : (
+          renderVirtualizedList(effectiveInvites.length, (index) => {
+            const invite = effectiveInvites[index];
+            if (!invite) return null;
+
+            return (
+              <Box
+                sx={{
+                  background: widgetItemSurfaceColor,
+                  border: `1px solid ${widgetItemBorderColor}`,
+                  borderRadius: GROUP_WIDGET_CARD_RADIUS,
+                  boxShadow: widgetItemInsetShadow,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  flexShrink: 0,
+                  gap: isCompact ? '7px' : '8px',
+                  p: rowPadding,
+                  transition:
+                    'background 140ms ease, border-color 140ms ease, transform 120ms ease, box-shadow 140ms ease',
+                  width: '100%',
+                  '&:hover': {
+                    background: widgetItemHoverSurfaceColor,
+                    borderColor: widgetItemHoverBorderColor,
+                    boxShadow:
+                      theme.palette.mode === 'dark'
+                        ? `0 14px 28px rgba(0,0,0,0.22), inset 0 1px 0 ${alpha(theme.palette.common.white, 0.05)}`
+                        : widgetItemInsetShadow,
+                    transform: 'translateY(-1px)',
+                  },
+                }}
+              >
+                <Box
+                  sx={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    gap: '9px',
+                    minWidth: 0,
+                  }}
+                >
+                  <Avatar
+                    sx={{
+                      bgcolor: alpha(theme.palette.primary.main, 0.12),
+                      color: theme.palette.text.primary,
+                      height: isCompact ? 34 : 38,
+                      width: isCompact ? 34 : 38,
+                    }}
+                  >
+                    <GroupAddRoundedIcon sx={{ fontSize: '1rem' }} />
+                  </Avatar>
+                  <Box sx={{ flex: '1 1 auto', minWidth: 0 }}>
+                    <Typography
+                      sx={{
+                        color: theme.palette.text.primary,
+                        fontSize: isCompact ? '0.8rem' : '0.84rem',
+                        fontWeight: 700,
+                        minWidth: 0,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {invite.groupName}
+                    </Typography>
+                    <Typography
+                      sx={{
+                        color: theme.palette.text.secondary,
+                        fontSize: '0.72rem',
+                        lineHeight: 1.5,
+                        mt: '2px',
+                      }}
+                    >
+                      {invite.description
+                        ? normalizeSnippet(
+                            invite.description,
+                            t('groups_widget.private_group_invite')
+                          )
+                        : invite.participantCount != null
+                          ? t('groups_widget.members_count', {
+                              count: invite.participantCount,
+                            })
+                          : t('groups_widget.invitation_ready')}
+                    </Typography>
+                  </Box>
+                </Box>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    gap: '8px',
+                    justifyContent: 'flex-end',
+                  }}
+                >
+                  <ButtonBase
+                    onClick={() =>
+                      void (showIgnoredInvites
+                        ? handleRestoreInvite(invite.id)
+                        : handleIgnoreInvite(invite.id))
+                    }
+                    sx={ignoredItemsActionSx}
+                  >
+                    {showIgnoredInvites
+                      ? t('groups_widget.restore', {
+                          defaultValue: 'Restore',
+                        })
+                      : t('groups_widget.ignore')}
+                  </ButtonBase>
+                  <LoadingButton
+                    loading={joiningGroupId === invite.groupId}
+                    onClick={() => void handleAcceptInvite(invite)}
+                    sx={{
+                      borderRadius: '999px',
+                      fontSize: '0.7rem',
+                      fontWeight: 800,
+                      minHeight: '30px',
+                      px: 1.35,
+                      textTransform: 'none',
+                    }}
+                    variant="contained"
+                  >
+                    {t('groups_widget.accept')}
+                  </LoadingButton>
+                </Box>
+              </Box>
+            );
+          })
+        )}
+      </Box>
+    </QAppWidgetContainer>
+  );
+
+  const renderRequestsList = () => (
+    <QAppWidgetContainer
+      error={requestsError}
+      hasContent={effectiveRequests.length > 0}
+      isEmpty={false}
+      isLoading={showInitialRequestsLoading}
+      loadingLabel={t('groups_widget.loading_requests')}
+      onRetry={() => void fetchJoinRequests(true)}
+      stateVerticalOffset="-24px"
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flex: '1 1 auto',
+          flexDirection: 'column',
+          gap: bodyGap,
+          minHeight: 0,
+        }}
+      >
+        {actionFeedback ? (
+          <InlineFeedback
+            message={actionFeedback.message}
+            tone={actionFeedback.tone}
+          />
+        ) : null}
+        {(ignoredRequests.length > 0 || showIgnoredRequests) && (
+          <Box
+            sx={{
+              alignItems: 'center',
+              display: 'flex',
+              justifyContent: 'space-between',
+              gap: 1,
+            }}
+          >
+            <Typography
+              sx={{
+                color: theme.palette.text.secondary,
+                fontSize: '0.72rem',
+                fontWeight: 700,
+              }}
+            >
+              {showIgnoredRequests
+                ? t('groups_widget.ignored_requests', {
+                    count: ignoredRequests.length,
+                    defaultValue: 'Ignored requests ({{count}})',
+                  })
+                : t('groups_widget.hidden_requests_count', {
+                    count: ignoredRequests.length,
+                    defaultValue: '{{count}} ignored',
+                  })}
+            </Typography>
+            <ButtonBase
+              onClick={() => setShowIgnoredRequests((prev) => !prev)}
+              sx={ignoredItemsActionSx}
+            >
+              {showIgnoredRequests
+                ? t('groups_widget.back_to_requests', {
+                    defaultValue: 'Back to requests',
+                  })
+                : t('groups_widget.show_ignored', {
+                    defaultValue: 'Show ignored',
+                  })}
+            </ButtonBase>
+          </Box>
+        )}
+        {effectiveRequests.length === 0 &&
+        !showInitialRequestsLoading &&
+        !requestsError ? (
+          <IllustratedEmptyState
+            actionLabel={t('groups_widget.refresh')}
+            compact={isCompact}
+            description={
+              showIgnoredRequests
+                ? t('groups_widget.ignored_requests_empty_description', {
+                    defaultValue:
+                      'Ignored requests are checked against your current pending requests.',
+                  })
+                : t('groups_widget.requests_empty_description')
+            }
+            onAction={() => void fetchJoinRequests(true)}
+            title={
+              showIgnoredRequests
+                ? t('groups_widget.ignored_requests_empty_title', {
+                    defaultValue: 'No ignored requests',
+                  })
+                : t('groups_widget.requests_empty_title')
+            }
+            variant="requests"
+          />
+        ) : (
+          renderVirtualizedList(effectiveRequests.length, (index) => {
+            const request = effectiveRequests[index];
+            if (!request) return null;
+
+            return (
+              <Box
+                sx={{
+                  background: widgetItemSurfaceColor,
+                  border: `1px solid ${widgetItemBorderColor}`,
+                  borderRadius: GROUP_WIDGET_CARD_RADIUS,
+                  boxShadow: widgetItemInsetShadow,
+                  display: 'flex',
+                  flexDirection: 'column',
+                  flexShrink: 0,
+                  gap: isCompact ? '7px' : '8px',
+                  p: rowPadding,
+                  transition:
+                    'background 140ms ease, border-color 140ms ease, transform 120ms ease, box-shadow 140ms ease',
+                  width: '100%',
+                  '&:hover': {
+                    background: widgetItemHoverSurfaceColor,
+                    borderColor: widgetItemHoverBorderColor,
+                    boxShadow:
+                      theme.palette.mode === 'dark'
+                        ? `0 14px 28px rgba(0,0,0,0.22), inset 0 1px 0 ${alpha(theme.palette.common.white, 0.05)}`
+                        : widgetItemInsetShadow,
+                    transform: 'translateY(-1px)',
+                  },
+                }}
+              >
+                <Box sx={{ display: 'flex', gap: '9px', minWidth: 0 }}>
+                  <Avatar
+                    sx={{
+                      bgcolor: alpha(theme.palette.primary.main, 0.12),
+                      color: theme.palette.text.primary,
+                      height: isCompact ? 34 : 38,
+                      width: isCompact ? 34 : 38,
+                    }}
+                  >
+                    <ForumRoundedIcon sx={{ fontSize: '1rem' }} />
+                  </Avatar>
+                  <Box sx={{ flex: '1 1 auto', minWidth: 0 }}>
+                    <Typography
+                      sx={{
+                        color: theme.palette.text.primary,
+                        fontSize: isCompact ? '0.8rem' : '0.84rem',
+                        fontWeight: 700,
+                        minWidth: 0,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {request.groupName}
+                    </Typography>
+                    <Typography
+                      sx={{
+                        color: theme.palette.primary.main,
+                        fontSize: '0.7rem',
+                        fontWeight: 700,
+                        mt: '2px',
+                      }}
+                    >
+                      {request.requesterLabel}
+                    </Typography>
+                    <Typography
+                      sx={{
+                        color: theme.palette.text.secondary,
+                        fontSize: '0.72rem',
+                        lineHeight: 1.5,
+                        mt: '2px',
+                      }}
+                    >
+                      {t('groups_widget.wants_to_join')}
+                    </Typography>
+                  </Box>
+                </Box>
+                <Box
+                  sx={{
+                    display: 'flex',
+                    gap: '8px',
+                    justifyContent: 'flex-end',
+                  }}
+                >
+                  <ButtonBase
+                    onClick={() =>
+                      void (showIgnoredRequests
+                        ? handleRestoreRequest(request.id)
+                        : handleRejectRequest(request.id))
+                    }
+                    sx={ignoredItemsActionSx}
+                  >
+                    {showIgnoredRequests
+                      ? t('groups_widget.restore', {
+                          defaultValue: 'Restore',
+                        })
+                      : t('groups_widget.ignore')}
+                  </ButtonBase>
+                  <LoadingButton
+                    loading={resolvingRequestId === request.id}
+                    onClick={() => void handleApproveRequest(request)}
+                    sx={{
+                      borderRadius: '999px',
+                      fontSize: '0.7rem',
+                      fontWeight: 800,
+                      minHeight: '30px',
+                      px: 1.35,
+                      textTransform: 'none',
+                    }}
+                    variant="contained"
+                  >
+                    {t('groups_widget.approve')}
+                  </LoadingButton>
+                </Box>
+              </Box>
+            );
+          })
+        )}
+      </Box>
+    </QAppWidgetContainer>
+  );
+
+  const renderPromotionsList = () => (
+    <QAppWidgetContainer
+      emptyMessage={t('groups_widget.promoted_empty_message')}
+      emptyTitle={t('groups_widget.promoted_empty_title')}
+      error={promotionsError}
+      hasContent={effectivePromotions.length > 0}
+      isEmpty={
+        !showInitialPromotionsLoading && effectivePromotions.length === 0
+      }
+      isLoading={showInitialPromotionsLoading}
+      loadingLabel={t('groups_widget.loading_promoted')}
+      onRetry={() => void fetchPromotions()}
+      stateVerticalOffset="-24px"
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          flex: '1 1 auto',
+          flexDirection: 'column',
+          gap: bodyGap,
+          minHeight: 0,
+        }}
+      >
+        {actionFeedback ? (
+          <InlineFeedback
+            message={actionFeedback.message}
+            tone={actionFeedback.tone}
+          />
+        ) : null}
+        {renderVirtualizedList(effectivePromotions.length, (index) => {
+          const promotion = effectivePromotions[index];
+          if (!promotion) return null;
+
+          const isMember = memberGroupIds.has(Number(promotion.groupId));
+          const promotionVisualState = getPromotionVisualState(
+            promotion,
+            isMember
+          );
+
+          return (
+            <Box
+              sx={{
+                background: widgetItemSurfaceColor,
+                border: `1px solid ${widgetItemBorderColor}`,
+                borderRadius: GROUP_WIDGET_CARD_RADIUS,
+                boxShadow: widgetItemInsetShadow,
+                display: 'flex',
+                flexDirection: 'column',
+                flexShrink: 0,
+                gap: isCompact ? '6px' : '7px',
+                px: isCompact ? '11px' : '12px',
+                py: isCompact ? '9px' : '10px',
+                transition:
+                  'background 140ms ease, border-color 140ms ease, transform 120ms ease, box-shadow 140ms ease',
+                width: '100%',
+                '&:hover': {
+                  background: widgetItemHoverSurfaceColor,
+                  borderColor: widgetItemHoverBorderColor,
+                  boxShadow:
+                    theme.palette.mode === 'dark'
+                      ? `0 14px 28px rgba(0,0,0,0.22), inset 0 1px 0 ${alpha(theme.palette.common.white, 0.05)}`
+                      : widgetItemInsetShadow,
+                  transform: 'translateY(-1px)',
+                },
+              }}
+            >
+              <Box
+                sx={{
+                  alignItems: 'center',
+                  display: 'flex',
+                  gap: '9px',
+                  minWidth: 0,
+                }}
+              >
+                <Avatar
+                  sx={{
+                    bgcolor:
+                      theme.palette.mode === 'dark'
+                        ? alpha(theme.palette.primary.main, 0.18)
+                        : alpha(theme.palette.primary.main, 0.1),
+                    color:
+                      theme.palette.mode === 'dark'
+                        ? alpha(theme.palette.common.white, 0.92)
+                        : theme.palette.primary.dark,
+                    height: isCompact ? 34 : 38,
+                    width: isCompact ? 34 : 38,
+                  }}
+                >
+                  <CampaignRoundedIcon sx={{ fontSize: '1rem' }} />
+                </Avatar>
+                <Box sx={{ flex: '1 1 auto', minWidth: 0 }}>
+                  <Typography
+                    sx={{
+                      color: theme.palette.text.primary,
+                      fontSize: isCompact ? '0.8rem' : '0.84rem',
+                      fontWeight: 700,
+                      minWidth: 0,
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    {promotion.groupName}
+                  </Typography>
+                  <Typography
+                    sx={{
+                      color: theme.palette.text.secondary,
+                      fontSize: '0.7rem',
+                      fontWeight: 600,
+                      lineHeight: 1.35,
+                      mt: '1px',
+                    }}
+                  >
+                    {t('groups_widget.promoted_by', {
+                      name: promotion.promoterName,
+                    })}
+                  </Typography>
+                </Box>
+                <Typography
+                  sx={{
+                    color: theme.palette.text.secondary,
+                    flexShrink: 0,
+                    fontSize: '0.67rem',
+                    fontWeight: 600,
+                  }}
+                >
+                  {formatTimestamp(promotion.created)}
+                </Typography>
+              </Box>
+              <Typography
+                sx={{
+                  color: theme.palette.text.secondary,
+                  display: '-webkit-box',
+                  fontSize: isCompact ? '0.72rem' : '0.75rem',
+                  lineHeight: 1.38,
+                  maxWidth: { xs: '100%', sm: '62%' },
+                  overflow: 'hidden',
+                  pr: { sm: '8px' },
+                  WebkitBoxOrient: 'vertical',
+                  WebkitLineClamp: 2,
+                  wordBreak: 'break-word',
+                }}
+              >
+                {promotion.snippet}
+              </Typography>
+              <Box
+                sx={{
+                  alignItems: 'center',
+                  color: theme.palette.text.secondary,
+                  columnGap: '12px',
+                  display: 'grid',
+                  gridTemplateColumns: { xs: '1fr', sm: 'minmax(0, 1fr) auto' },
+                  pt: '2px',
+                  rowGap: '8px',
+                }}
+              >
+                <Box sx={{ minWidth: 0 }}>
+                  <Typography
+                    sx={{
+                      color: theme.palette.text.secondary,
+                      fontSize: '0.67rem',
+                      fontWeight: 600,
+                      lineHeight: 1.3,
+                    }}
+                  >
+                    {promotion.memberCount != null
+                      ? t('groups_widget.members_count', {
+                          count: promotion.memberCount,
+                        })
+                      : promotion.isOpen === false
+                        ? t('groups_widget.private_group')
+                        : t('groups_widget.public_group')}
+                  </Typography>
+                </Box>
+                <Box
+                  sx={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    justifySelf: { xs: 'stretch', sm: 'end' },
+                    justifyContent: { xs: 'stretch', sm: 'flex-end' },
+                    minHeight: '27px',
+                  }}
+                >
+                  {promotionVisualState === 'member' ? (
+                    <Button
+                      disableElevation
+                      onClick={() =>
+                        handleOpenGroupChat(String(promotion.groupId))
+                      }
+                      startIcon={
+                        <OpenInNewRoundedIcon sx={{ fontSize: '0.85rem' }} />
+                      }
+                      sx={promotionPrimaryActionSx}
+                    >
+                      {t('groups_widget.open')}
+                    </Button>
+                  ) : promotionVisualState === 'connecting' ? (
+                    <LoadingButton
+                      disabled
+                      loading
+                      sx={promotionPrimaryActionSx}
+                    >
+                      {t('groups_widget.connecting')}
+                    </LoadingButton>
+                  ) : promotionVisualState === 'processing' ? (
+                    <Button disabled sx={promotionSecondaryActionSx}>
+                      {t('groups_widget.processing')}
+                    </Button>
+                  ) : promotionVisualState === 'request_sent' ? (
+                    <Button disabled sx={promotionSecondaryActionSx}>
+                      {t('groups_widget.request_sent')}
+                    </Button>
+                  ) : (
+                    <Button
+                      disableElevation
+                      onClick={() => void handleJoinPromotedGroup(promotion)}
+                      sx={promotionPrimaryActionSx}
+                    >
+                      {promotionVisualState === 'request'
+                        ? t('groups_widget.request_access')
+                        : t('groups_widget.join_group')}
+                    </Button>
+                  )}
+                </Box>
+              </Box>
+            </Box>
+          );
+        })}
+      </Box>
+    </QAppWidgetContainer>
+  );
+
+  const invitesCount = visibleInvites.length;
+  const requestsCount = visibleRequests.length;
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flex: '1 1 auto',
+        flexDirection: 'column',
+        minHeight: 0,
+        overflow: 'hidden',
+        width: '100%',
+      }}
+    >
+      <Box
+        role="tablist"
+        sx={{
+          alignItems: 'center',
+          borderBottom: `1px solid ${alpha(
+            theme.palette.border.main,
+            theme.palette.mode === 'dark' ? 0.18 : 0.1
+          )}`,
+          display: 'flex',
+          justifyContent: 'space-between',
+          flexWrap: 'wrap',
+          gap: '8px 12px',
+          position: 'relative',
+          pb: '6px',
+          px: '8px',
+          pt: '5px',
+        }}
+      >
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            flex: '1 1 auto',
+            flexWrap: 'wrap',
+            gap: '8px',
+            minWidth: 0,
+          }}
+        >
+          <TabButton
+            active={activeTab === 'notifications'}
+            count={effectiveUnreadNotificationCount}
+            label={t('groups_widget.tab_notifications')}
+            onClick={() => {
+              setActiveTab('notifications');
+            }}
+            tabId="notifications"
+          />
+          <TabButton
+            active={activeTab === 'invites'}
+            count={invitesCount}
+            label={t('groups_widget.tab_invites')}
+            onClick={() => {
+              setActiveTab('invites');
+            }}
+            tabId="invites"
+          />
+          <TabButton
+            active={activeTab === 'requests'}
+            count={requestsCount}
+            label={t('groups_widget.tab_requests')}
+            onClick={() => {
+              setActiveTab('requests');
+            }}
+            tabId="requests"
+          />
+          <TabButton
+            active={activeTab === 'promoted'}
+            label={t('groups_widget.tab_promoted')}
+            onClick={() => {
+              setActiveTab('promoted');
+            }}
+            tabId="promoted"
+            subtle
+          />
+        </Box>
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            flexShrink: 0,
+            flexWrap: 'wrap',
+            gap: '8px',
+            justifyContent: 'flex-end',
+          }}
+        >
+          <ButtonBase
+            onClick={handleOpenGroupDiscovery}
+            sx={discoverGroupsActionSx}
+          >
+            <SearchRoundedIcon sx={{ fontSize: '0.9rem' }} />
+            {t('groups_widget.discover_groups')}
+          </ButtonBase>
+          {activeTab === 'promoted' ? (
+            <Tooltip
+              disableHoverListener={hasPromotionAdminAccess}
+              placement="top"
+              title={t('groups_widget.group_admin_only')}
+            >
+              <Box sx={{ display: 'inline-flex' }}>
+                <ButtonBase
+                  disabled={!hasPromotionAdminAccess}
+                  onClick={handleOpenPromotionDialog}
+                  sx={headerUtilityActionSx}
+                  title={
+                    hasPromotionAdminAccess
+                      ? t('groups_widget.promote_page_title')
+                      : undefined
+                  }
+                >
+                  <CampaignRoundedIcon sx={{ fontSize: '0.9rem' }} />
+                  {t('groups_widget.promote_group')}
+                </ButtonBase>
+              </Box>
+            </Tooltip>
+          ) : null}
+        </Box>
+      </Box>
+
+      <Box
+        key={activeTab}
+        sx={{
+          display: 'flex',
+          flex: '1 1 auto',
+          minHeight: 0,
+          overflow: 'hidden',
+        }}
+      >
+        {activeTab === 'notifications'
+          ? renderNotificationList()
+          : activeTab === 'invites'
+            ? renderInvitesList()
+            : activeTab === 'requests'
+              ? renderRequestsList()
+              : renderPromotionsList()}
+      </Box>
+
+      <Dialog
+        fullWidth
+        maxWidth="xs"
+        open={promotionDialogOpen}
+        onClose={() => {
+          if (!publishingPromotion) {
+            setPromotionDialogOpen(false);
+          }
+        }}
+      >
+        <DialogTitle sx={{ fontSize: '1rem', fontWeight: 700 }}>
+          {t('groups_widget.promote_group')}
+        </DialogTitle>
+        <DialogContent
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 1.5,
+            pt: '10px !important',
+          }}
+        >
+          <Typography
+            sx={{
+              color: theme.palette.text.secondary,
+              fontSize: '0.78rem',
+              lineHeight: 1.5,
+            }}
+          >
+            {t('groups_widget.promote_dialog_intro')}
+            {promotionFee
+              ? t('groups_widget.promote_dialog_fee', { fee: promotionFee })
+              : ''}
+          </Typography>
+          <Select
+            displayEmpty
+            value={promotionGroupId}
+            onChange={(event) => {
+              setPromotionGroupId(String(event.target.value));
+            }}
+            size="small"
+          >
+            <MenuItem disabled value="">
+              {t('groups_widget.select_admin_group')}
+            </MenuItem>
+            {promotionAdminGroups.map((group: any) => (
+              <MenuItem key={group?.groupId} value={String(group?.groupId)}>
+                {group?.groupName}
+              </MenuItem>
+            ))}
+          </Select>
+          <TextField
+            minRows={4}
+            multiline
+            placeholder={t('groups_widget.promotion_placeholder')}
+            value={promotionText}
+            onChange={(event) => {
+              setPromotionText(event.target.value.slice(0, 200));
+            }}
+          />
+          <Typography
+            sx={{
+              color: theme.palette.text.secondary,
+              fontSize: '0.7rem',
+              textAlign: 'right',
+            }}
+          >
+            {t('groups_widget.characters_count', {
+              current: promotionText.length,
+              max: 200,
+            })}
+          </Typography>
+        </DialogContent>
+        <DialogActions sx={{ px: 3, pb: 2.5, pt: 0 }}>
+          <Button
+            disabled={publishingPromotion}
+            onClick={() => {
+              setPromotionDialogOpen(false);
+            }}
+            sx={{ textTransform: 'none' }}
+          >
+            {t('groups_widget.cancel')}
+          </Button>
+          <LoadingButton
+            disabled={!promotionGroupId || !promotionText.trim()}
+            loading={publishingPromotion}
+            onClick={() => {
+              void handlePublishPromotion();
+            }}
+            sx={{
+              borderRadius: '999px',
+              px: 1.8,
+              textTransform: 'none',
+              ...getBlueTier1ButtonSx(),
+            }}
+          >
+            {t('groups_widget.publish')}
+          </LoadingButton>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+};
diff --git a/src/components/Widgets/QAppWidgetContainer.tsx b/src/components/Widgets/QAppWidgetContainer.tsx
new file mode 100644
index 00000000..dbc843f9
--- /dev/null
+++ b/src/components/Widgets/QAppWidgetContainer.tsx
@@ -0,0 +1,312 @@
+import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
+import RefreshRoundedIcon from '@mui/icons-material/RefreshRounded';
+import { Box, ButtonBase, CircularProgress, Typography, useTheme } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import type { ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type QAppWidgetContainerProps = {
+  children?: ReactNode;
+  emptyMessage?: string | null;
+  emptyTitle?: string;
+  error?: string | null;
+  errorMessage?: string | null;
+  errorTitle?: string;
+  hasContent?: boolean;
+  isEmpty?: boolean;
+  isLoading?: boolean;
+  loadingLabel?: string;
+  loadingMessage?: string | null;
+  onRetry?: () => void;
+  onSecondaryAction?: () => void;
+  retryLabel?: string;
+  secondaryActionLabel?: string;
+  secondaryActionVariant?: 'button' | 'link';
+  stateVerticalOffset?: number | string;
+};
+
+export const QAppWidgetStatePanel = ({
+  description,
+  loadingLabel,
+  onRetry,
+  onSecondaryAction,
+  retryLabel,
+  secondaryActionLabel,
+  secondaryActionVariant = 'button',
+  title,
+  verticalOffset = 0,
+}: {
+  description?: string | null;
+  loadingLabel?: string;
+  onRetry?: () => void;
+  onSecondaryAction?: () => void;
+  retryLabel?: string;
+  secondaryActionLabel?: string;
+  secondaryActionVariant?: 'button' | 'link';
+  title: string;
+  verticalOffset?: number | string;
+}) => {
+  const theme = useTheme();
+  const { t } = useTranslation('core');
+  const resolvedRetryLabel = retryLabel ?? t('widget_container.retry');
+  const translateValue =
+    typeof verticalOffset === 'number' ? `${verticalOffset}px` : verticalOffset;
+
+  return (
+    <Box
+      sx={{
+        alignItems: 'center',
+        color: theme.palette.text.secondary,
+        display: 'flex',
+        flex: '1 1 auto',
+        flexDirection: 'column',
+        gap: '9px',
+        justifyContent: 'center',
+        minHeight: 0,
+        px: 2.5,
+        py: 3.5,
+        textAlign: 'center',
+        transform:
+          translateValue && translateValue !== '0' && translateValue !== '0px'
+            ? `translateY(${translateValue})`
+            : undefined,
+      }}
+    >
+      {loadingLabel ? (
+        <CircularProgress
+          size={24}
+          sx={{
+            color:
+              theme.palette.mode === 'dark'
+                ? alpha(theme.palette.common.white, 0.78)
+                : alpha(theme.palette.text.primary, 0.72),
+          }}
+        />
+      ) : null}
+      <Typography
+        sx={{
+          color: theme.palette.text.primary,
+          fontSize: '0.95rem',
+          fontWeight: 600,
+          letterSpacing: '-0.01em',
+        }}
+      >
+        {title}
+      </Typography>
+      {description ? (
+        <Typography
+          sx={{
+            fontSize: '0.8rem',
+            lineHeight: 1.55,
+            maxWidth: '28ch',
+          }}
+        >
+          {description}
+        </Typography>
+      ) : null}
+      {onRetry || onSecondaryAction ? (
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: '8px',
+            justifyContent: 'center',
+            mt: '2px',
+          }}
+        >
+          {onRetry ? (
+            <ButtonBase
+              onClick={onRetry}
+              sx={{
+                alignItems: 'center',
+                border: `1px solid ${alpha(theme.palette.border.main, theme.palette.mode === 'dark' ? 0.34 : 0.2)}`,
+                borderRadius: '999px',
+                color: theme.palette.text.primary,
+                display: 'inline-flex',
+                gap: '7px',
+                px: 1.6,
+                py: 0.8,
+                transition:
+                  'background-color 140ms ease, border-color 140ms ease, transform 120ms ease',
+                '&:hover': {
+                  backgroundColor:
+                    theme.palette.mode === 'dark'
+                      ? alpha(theme.palette.common.white, 0.06)
+                      : alpha(theme.palette.text.primary, 0.05),
+                  borderColor: alpha(theme.palette.border.main, theme.palette.mode === 'dark' ? 0.5 : 0.3),
+                  transform: 'translateY(-1px)',
+                },
+                '&:active': {
+                  transform: 'translateY(0)',
+                },
+              }}
+            >
+              <RefreshRoundedIcon sx={{ fontSize: '1rem' }} />
+              <Typography sx={{ fontSize: '0.76rem', fontWeight: 700 }}>
+                {resolvedRetryLabel}
+              </Typography>
+            </ButtonBase>
+          ) : null}
+          {onSecondaryAction && secondaryActionLabel ? (
+            <ButtonBase
+              onClick={onSecondaryAction}
+              sx={{
+                alignItems: 'center',
+                border:
+                  secondaryActionVariant === 'button'
+                    ? `1px solid ${alpha(theme.palette.border.main, theme.palette.mode === 'dark' ? 0.22 : 0.14)}`
+                    : 'none',
+                borderRadius:
+                  secondaryActionVariant === 'button' ? '999px' : '8px',
+                color:
+                  secondaryActionVariant === 'button'
+                    ? theme.palette.text.secondary
+                    : theme.palette.primary.light,
+                display: 'inline-flex',
+                gap: secondaryActionVariant === 'button' ? 0 : '2px',
+                px: secondaryActionVariant === 'button' ? 1.45 : 0.35,
+                py: secondaryActionVariant === 'button' ? 0.8 : 0.25,
+                transition:
+                  'background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease',
+                '&:hover': {
+                  backgroundColor:
+                    secondaryActionVariant === 'button'
+                      ? theme.palette.mode === 'dark'
+                        ? alpha(theme.palette.common.white, 0.035)
+                        : alpha(theme.palette.text.primary, 0.035)
+                      : 'transparent',
+                  borderColor:
+                    secondaryActionVariant === 'button'
+                      ? alpha(theme.palette.border.main, theme.palette.mode === 'dark' ? 0.34 : 0.2)
+                      : 'transparent',
+                  color:
+                    secondaryActionVariant === 'button'
+                      ? theme.palette.text.primary
+                      : theme.palette.primary.main,
+                  transform: 'translateY(-1px)',
+                },
+                '&:active': {
+                  transform: 'translateY(0)',
+                },
+              }}
+            >
+              <Typography sx={{ fontSize: '0.74rem', fontWeight: 700 }}>
+                {secondaryActionLabel}
+              </Typography>
+              {secondaryActionVariant === 'link' ? (
+                <ChevronRightRoundedIcon sx={{ fontSize: '1rem' }} />
+              ) : null}
+            </ButtonBase>
+          ) : null}
+        </Box>
+      ) : null}
+    </Box>
+  );
+};
+
+export const QAppWidgetContainer = ({
+  children,
+  emptyMessage,
+  emptyTitle,
+  error = null,
+  errorMessage,
+  errorTitle,
+  hasContent,
+  isEmpty = false,
+  isLoading = false,
+  loadingLabel,
+  loadingMessage,
+  onRetry,
+  onSecondaryAction,
+  retryLabel,
+  secondaryActionLabel,
+  secondaryActionVariant = 'button',
+  stateVerticalOffset = 0,
+}: QAppWidgetContainerProps) => {
+  const { t } = useTranslation('core');
+  const resolvedRetryLabel = retryLabel ?? t('widget_container.retry');
+  const resolvedEmptyTitle = emptyTitle ?? t('widget_container.empty_title');
+  const resolvedEmptyMessage =
+    emptyMessage === undefined ? t('widget_container.empty_message') : emptyMessage;
+  const resolvedErrorTitle = errorTitle ?? t('widget_container.error_title');
+  const resolvedLoadingLabel = loadingLabel ?? t('widget_container.loading');
+  const resolvedLoadingMessage =
+    loadingMessage === undefined ? t('widget_container.loading_message') : loadingMessage;
+  const resolvedHasContent = hasContent ?? (!!children && !isEmpty);
+
+  let state: ReactNode = null;
+
+  if (isLoading && !resolvedHasContent) {
+    state = (
+      <QAppWidgetStatePanel
+        description={resolvedLoadingMessage}
+        loadingLabel={resolvedLoadingLabel}
+        retryLabel={resolvedRetryLabel}
+        title={resolvedLoadingLabel}
+        verticalOffset={stateVerticalOffset}
+      />
+    );
+  } else if (error && !resolvedHasContent) {
+    state = (
+      <QAppWidgetStatePanel
+        description={errorMessage !== undefined ? errorMessage : error}
+        onRetry={onRetry}
+        onSecondaryAction={onSecondaryAction}
+        retryLabel={resolvedRetryLabel}
+        secondaryActionLabel={secondaryActionLabel}
+        secondaryActionVariant={secondaryActionVariant}
+        title={resolvedErrorTitle}
+        verticalOffset={stateVerticalOffset}
+      />
+    );
+  } else if (isEmpty) {
+    state = (
+      <QAppWidgetStatePanel
+        description={resolvedEmptyMessage}
+        onRetry={onRetry}
+        onSecondaryAction={onSecondaryAction}
+        retryLabel={resolvedRetryLabel}
+        secondaryActionLabel={secondaryActionLabel}
+        secondaryActionVariant={secondaryActionVariant}
+        title={resolvedEmptyTitle}
+        verticalOffset={stateVerticalOffset}
+      />
+    );
+  }
+
+  return (
+    <Box
+      sx={{
+        backgroundColor: 'transparent',
+        display: 'flex',
+        flex: '1 1 auto',
+        flexDirection: 'column',
+        height: '100%',
+        minHeight: 0,
+        overflow: 'hidden',
+        position: 'relative',
+        width: '100%',
+      }}
+    >
+      {state ? (
+        state
+      ) : (
+        <Box
+          sx={{
+            display: 'flex',
+            flex: '1 1 auto',
+            flexDirection: 'column',
+            gap: '10px',
+            height: '100%',
+            minHeight: 0,
+            overflow: 'hidden',
+            p: '8px',
+          }}
+        >
+          {children}
+        </Box>
+      )}
+    </Box>
+  );
+};
diff --git a/src/components/Widgets/QuitterFeedWidget.tsx b/src/components/Widgets/QuitterFeedWidget.tsx
new file mode 100644
index 00000000..a901e57c
--- /dev/null
+++ b/src/components/Widgets/QuitterFeedWidget.tsx
@@ -0,0 +1,1280 @@
+import {
+  Box,
+  ButtonBase,
+  Collapse,
+  CircularProgress,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useAtom, useAtomValue } from 'jotai';
+import {
+  useCallback,
+  useEffect,
+  useEffectEvent,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
+import { quitterDashboardFeedCacheAtom, userInfoAtom } from '../../atoms/global';
+import { executeEvent } from '../../utils/events';
+import type { WidgetDisplayMode } from './DashboardWidgetFrame';
+import {
+  QAppWidgetContainer,
+  QAppWidgetStatePanel,
+} from './QAppWidgetContainer';
+import { QuitterFeedCard } from './quitter/QuitterFeedCard';
+import {
+  fetchQuitterFeedPage,
+  fetchQuitterFollowedNames,
+} from './quitter/quitterFeedApi';
+import type {
+  QuitterDashboardFeedCache,
+  QuitterDashboardInitialFeedState,
+  QuitterFeedItem,
+  QuitterFeedPage,
+  QuitterFollowingEmptyReason,
+} from './quitter/quitterFeedTypes';
+
+type QuitterFeedWidgetProps = {
+  batchSize?: number;
+  displayMode?: WidgetDisplayMode;
+  initialBatchSize?: number;
+  onRefreshStateChange?: (refreshing: boolean) => void;
+  refreshToken?: number;
+  searchLimit?: number;
+};
+
+type QuitterFeedMode = 'following' | 'general';
+
+const QUITTER_FEED_MODE_STORAGE_PREFIX = 'quitter_dashboard_feed_mode:';
+
+const emptyCacheForKey = (feedKey: string): QuitterDashboardFeedCache => ({
+  error: null,
+  feedKey,
+  followingEmptyReason: null,
+  initialFeedState: 'loading',
+  items: [],
+  lastFullFetchAt: 0,
+  lastPollAt: null,
+  pendingItems: [],
+});
+
+const parseStoredQuitterFeedMode = (
+  raw: string | null
+): QuitterFeedMode | null =>
+  raw === 'general' || raw === 'following' ? raw : null;
+
+const readQuitterFeedMode = (storageKey: string): QuitterFeedMode => {
+  if (typeof localStorage === 'undefined') return 'following';
+  try {
+    return (
+      parseStoredQuitterFeedMode(localStorage.getItem(storageKey)) ??
+      'following'
+    );
+  } catch {
+    return 'following';
+  }
+};
+
+const writeQuitterFeedMode = (storageKey: string, mode: QuitterFeedMode) => {
+  if (typeof localStorage === 'undefined') return;
+  try {
+    localStorage.setItem(storageKey, mode);
+  } catch {
+    // ignore quota / private mode
+  }
+};
+
+const FOLLOWING_LOAD_TIMEOUT_MS = 40_000;
+const FEED_POLL_INTERVAL_MS = 90_000;
+const NEW_POST_REVEAL_DURATION_MS = 420;
+
+class FeedLoadTimeoutError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'FeedLoadTimeoutError';
+  }
+}
+
+const runAbortableTaskWithTimeout = async <T,>(
+  signal: AbortSignal,
+  timeoutMs: number,
+  task: (signal: AbortSignal) => Promise<T>,
+  timeoutMessage: string
+) => {
+  const controller = new AbortController();
+  let didTimeout = false;
+
+  const handleAbort = () => {
+    controller.abort();
+  };
+
+  if (signal.aborted) {
+    controller.abort();
+  } else {
+    signal.addEventListener('abort', handleAbort, { once: true });
+  }
+
+  const timeoutId = window.setTimeout(() => {
+    didTimeout = true;
+    controller.abort();
+  }, timeoutMs);
+
+  try {
+    return await task(controller.signal);
+  } catch (error) {
+    if (didTimeout) {
+      throw new FeedLoadTimeoutError(timeoutMessage);
+    }
+
+    throw error;
+  } finally {
+    window.clearTimeout(timeoutId);
+    signal.removeEventListener('abort', handleAbort);
+  }
+};
+
+const prependUniqueFeedItems = (
+  incomingItems: QuitterFeedItem[],
+  existingItems: QuitterFeedItem[]
+) => {
+  const mergedItems: QuitterFeedItem[] = [];
+  const seenIds = new Set<string>();
+
+  for (const item of incomingItems) {
+    if (seenIds.has(item.id)) {
+      continue;
+    }
+
+    seenIds.add(item.id);
+    mergedItems.push(item);
+  }
+
+  for (const item of existingItems) {
+    if (seenIds.has(item.id)) {
+      continue;
+    }
+
+    seenIds.add(item.id);
+    mergedItems.push(item);
+  }
+
+  return mergedItems;
+};
+
+export const QuitterFeedWidget = ({
+  batchSize = 4,
+  displayMode = 'compact',
+  initialBatchSize = 6,
+  onRefreshStateChange,
+  refreshToken = 0,
+  searchLimit = 8,
+}: QuitterFeedWidgetProps) => {
+  const theme = useTheme();
+  const { t } = useTranslation('core');
+  const userInfo = useAtomValue(userInfoAtom);
+  const [feedCache, setFeedCache] = useAtom(quitterDashboardFeedCacheAtom);
+  const isCompact = displayMode === 'compact';
+  const currentUserName =
+    typeof userInfo?.name === 'string' && userInfo.name.trim().length > 0
+      ? userInfo.name.trim()
+      : null;
+  const feedModeStorageKey = useMemo(() => {
+    const addr =
+      typeof userInfo?.address === 'string' &&
+      userInfo.address.trim().length > 0
+        ? userInfo.address.trim()
+        : 'anonymous';
+    return `${QUITTER_FEED_MODE_STORAGE_PREFIX}${addr}`;
+  }, [userInfo?.address]);
+  const [feedMode, setFeedMode] = useState<QuitterFeedMode>('following');
+  const [isInitialLoading, setIsInitialLoading] = useState(true);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [revealedItemIds, setRevealedItemIds] = useState<string[]>([]);
+  const [reloadToken, setReloadToken] = useState(0);
+  const itemsRef = useRef<QuitterFeedItem[]>([]);
+  const pendingItemsRef = useRef<QuitterFeedItem[]>([]);
+  const feedKeyRef = useRef('');
+  const feedCacheRef = useRef<QuitterDashboardFeedCache | null>(null);
+  const scrollerRef = useRef<HTMLDivElement | null>(null);
+  const previousRefreshTokenRef = useRef(refreshToken);
+  const activeFeedRequestIdRef = useRef(0);
+  const activeUpdateRequestIdRef = useRef(0);
+  const isUpdateCheckInFlightRef = useRef(false);
+  const feedKey = `${feedMode}:${currentUserName ?? ''}`;
+
+  const cacheMatches = feedCache?.feedKey === feedKey;
+  const items = cacheMatches ? feedCache.items : [];
+  const pendingItems = cacheMatches ? feedCache.pendingItems : [];
+  const followingEmptyReason = cacheMatches ? feedCache.followingEmptyReason : null;
+  const initialFeedState: QuitterDashboardInitialFeedState = cacheMatches
+    ? feedCache.initialFeedState
+    : 'loading';
+  const error = cacheMatches ? feedCache.error : null;
+
+  const isFollowingFeed = feedMode === 'following';
+  const loadedPostLabel = useMemo(
+    () => t('quitter_feed.posts_showing', { count: items.length }),
+    [items.length, t]
+  );
+  const pendingPostLabel = useMemo(
+    () => t('quitter_feed.new_posts', { count: pendingItems.length }),
+    [pendingItems.length, t]
+  );
+  const revealedItemIdSet = useMemo(
+    () => new Set(revealedItemIds),
+    [revealedItemIds]
+  );
+
+  const rowGapPx = isCompact ? 9 : 12;
+  const scrollListBottomPadPx = 10;
+
+  const rowVirtualizer = useVirtualizer({
+    count: items.length,
+    getItemKey: useCallback(
+      (index: number) => items[index]?.id ?? String(index),
+      [items]
+    ),
+    getScrollElement: () => scrollerRef.current,
+    estimateSize: useCallback(() => (isCompact ? 220 : 285), [isCompact]),
+    overscan: 6,
+  });
+
+  useEffect(() => {
+    feedKeyRef.current = feedKey;
+  }, [feedKey]);
+
+  useEffect(() => {
+    feedCacheRef.current = feedCache;
+  }, [feedCache]);
+
+  useEffect(() => {
+    if (feedCache?.feedKey === feedKey) {
+      itemsRef.current = feedCache.items;
+      pendingItemsRef.current = feedCache.pendingItems;
+    }
+  }, [feedCache, feedKey]);
+
+  useEffect(() => {
+    setFeedMode(readQuitterFeedMode(feedModeStorageKey));
+  }, [feedModeStorageKey]);
+
+  const commitVisibleItems = useCallback((nextItems: QuitterFeedItem[]) => {
+    itemsRef.current = nextItems;
+    setFeedCache((prev) => {
+      const key = feedKeyRef.current;
+      const next: QuitterDashboardFeedCache =
+        prev?.feedKey === key
+          ? { ...prev, items: nextItems }
+          : { ...emptyCacheForKey(key), items: nextItems };
+      feedCacheRef.current = next;
+      return next;
+    });
+  }, [setFeedCache]);
+
+  const commitPendingItems = useCallback((nextItems: QuitterFeedItem[]) => {
+    pendingItemsRef.current = nextItems;
+    setFeedCache((prev) => {
+      const key = feedKeyRef.current;
+      const next: QuitterDashboardFeedCache =
+        prev?.feedKey === key
+          ? { ...prev, pendingItems: nextItems }
+          : { ...emptyCacheForKey(key), pendingItems: nextItems };
+      feedCacheRef.current = next;
+      return next;
+    });
+  }, [setFeedCache]);
+
+  useEffect(() => {
+    onRefreshStateChange?.(isRefreshing);
+  }, [isRefreshing, onRefreshStateChange]);
+
+  useEffect(
+    () => () => {
+      onRefreshStateChange?.(false);
+    },
+    [onRefreshStateChange]
+  );
+
+  useEffect(() => {
+    if (revealedItemIds.length === 0) {
+      return undefined;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      setRevealedItemIds([]);
+    }, NEW_POST_REVEAL_DURATION_MS);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [revealedItemIds]);
+
+  const fetchFeedPageForMode = useEffectEvent(
+    async (
+      signal: AbortSignal,
+      options: {
+        feedMode?: QuitterFeedMode;
+        itemLimit?: number;
+      } = {}
+    ) => {
+      const resolvedFeedMode = options.feedMode ?? feedMode;
+      const requestedItemLimit = options.itemLimit ?? initialBatchSize;
+
+      if (resolvedFeedMode === 'following' && currentUserName) {
+        return runAbortableTaskWithTimeout(
+          signal,
+          FOLLOWING_LOAD_TIMEOUT_MS,
+          async (timedSignal) => {
+            const followedNames = await fetchQuitterFollowedNames(
+              currentUserName,
+              timedSignal
+            );
+
+            if (timedSignal.aborted) {
+              return {
+                hasMore: false,
+                items: [],
+                nextOffset: 0,
+              };
+            }
+
+            return fetchQuitterFeedPage({
+              allowedAuthors: followedNames,
+              itemLimit: requestedItemLimit,
+              offset: 0,
+              searchLimit,
+              signal: timedSignal,
+            });
+          },
+          t('quitter_feed.error_timeout')
+        );
+      }
+
+      if (resolvedFeedMode === 'following') {
+        return {
+          hasMore: false,
+          items: [],
+          nextOffset: 0,
+        };
+      }
+
+      return fetchQuitterFeedPage({
+        itemLimit: requestedItemLimit,
+        offset: 0,
+        searchLimit,
+        signal,
+      });
+    }
+  );
+
+  const loadFeed = useEffectEvent(
+    async (
+      signal: AbortSignal,
+      options: {
+        feedMode?: QuitterFeedMode;
+      } = {}
+    ) => {
+      const requestId = activeFeedRequestIdRef.current + 1;
+      const resolvedFeedMode = options.feedMode ?? feedMode;
+      const requestFeedKey = feedKeyRef.current;
+
+      activeFeedRequestIdRef.current = requestId;
+      activeUpdateRequestIdRef.current = 0;
+      isUpdateCheckInFlightRef.current = false;
+
+      setFeedCache(() => {
+        const next = emptyCacheForKey(requestFeedKey);
+        feedCacheRef.current = next;
+        return next;
+      });
+      setIsInitialLoading(true);
+      setIsRefreshing(false);
+
+      try {
+        let nextPage: QuitterFeedPage;
+        let nextFollowingEmptyReason: QuitterFollowingEmptyReason = null;
+
+        if (resolvedFeedMode === 'following') {
+          if (!currentUserName) {
+            nextPage = {
+              hasMore: false,
+              items: [],
+              nextOffset: 0,
+            };
+            nextFollowingEmptyReason = 'no-name';
+          } else {
+            const followingResult = await runAbortableTaskWithTimeout(
+              signal,
+              FOLLOWING_LOAD_TIMEOUT_MS,
+              async (timedSignal) => {
+                const followedNames = await fetchQuitterFollowedNames(
+                  currentUserName,
+                  timedSignal
+                );
+
+                if (timedSignal.aborted) {
+                  return {
+                    followedCount: followedNames.length,
+                    page: {
+                      hasMore: false,
+                      items: [],
+                      nextOffset: 0,
+                    },
+                  };
+                }
+
+                const page = await fetchQuitterFeedPage({
+                  allowedAuthors: followedNames,
+                  itemLimit: initialBatchSize,
+                  offset: 0,
+                  searchLimit,
+                  signal: timedSignal,
+                });
+
+                return {
+                  followedCount: followedNames.length,
+                  page,
+                };
+              },
+              t('quitter_feed.error_timeout')
+            );
+
+            nextPage = followingResult.page;
+            nextFollowingEmptyReason =
+              followingResult.followedCount === 0
+                ? 'no-following'
+                : followingResult.page.items.length === 0
+                  ? 'no-posts'
+                  : null;
+          }
+        } else {
+          nextPage = await fetchFeedPageForMode(signal, {
+            feedMode: resolvedFeedMode,
+            itemLimit: initialBatchSize,
+          });
+        }
+
+        if (
+          signal.aborted ||
+          activeFeedRequestIdRef.current !== requestId ||
+          feedKeyRef.current !== requestFeedKey
+        ) {
+          return;
+        }
+
+        const nextCache: QuitterDashboardFeedCache = {
+          error: null,
+          feedKey: requestFeedKey,
+          followingEmptyReason: nextFollowingEmptyReason,
+          initialFeedState: 'success',
+          items: nextPage.items,
+          lastFullFetchAt: Date.now(),
+          lastPollAt: null,
+          pendingItems: [],
+        };
+        setFeedCache(nextCache);
+        feedCacheRef.current = nextCache;
+        itemsRef.current = nextPage.items;
+        pendingItemsRef.current = [];
+      } catch (error) {
+        if (
+          signal.aborted ||
+          activeFeedRequestIdRef.current !== requestId ||
+          feedKeyRef.current !== requestFeedKey
+        ) {
+          return;
+        }
+
+        console.error('Failed to load Quitter feed widget', error);
+        const message =
+          error instanceof FeedLoadTimeoutError
+            ? error.message
+            : resolvedFeedMode === 'following'
+              ? t('quitter_feed.error_following')
+              : t('quitter_feed.error_generic');
+        const nextCache: QuitterDashboardFeedCache = {
+          ...emptyCacheForKey(requestFeedKey),
+          error: message,
+          initialFeedState: 'error',
+        };
+        setFeedCache(nextCache);
+        feedCacheRef.current = nextCache;
+        itemsRef.current = [];
+        pendingItemsRef.current = [];
+      } finally {
+        if (activeFeedRequestIdRef.current === requestId) {
+          setIsInitialLoading(false);
+        }
+      }
+    }
+  );
+
+  const checkForNewPosts = useEffectEvent(
+    async (
+      signal: AbortSignal,
+      options: {
+        feedMode?: QuitterFeedMode;
+        showRefreshIndicator?: boolean;
+      } = {}
+    ) => {
+      if (isInitialLoading || itemsRef.current.length === 0) {
+        return;
+      }
+
+      if (isUpdateCheckInFlightRef.current) {
+        return;
+      }
+
+      const requestId = activeUpdateRequestIdRef.current + 1;
+      const resolvedFeedMode = options.feedMode ?? feedMode;
+      const pollFeedKey = feedKeyRef.current;
+      const showRefreshIndicator = !!options.showRefreshIndicator;
+      const pollItemLimit = Math.min(
+        Math.max(initialBatchSize, batchSize) +
+          Math.min(pendingItemsRef.current.length, 6) +
+          2,
+        18
+      );
+
+      activeUpdateRequestIdRef.current = requestId;
+      isUpdateCheckInFlightRef.current = true;
+
+      if (showRefreshIndicator) {
+        setIsRefreshing(true);
+      }
+
+      try {
+        const nextPage = await fetchFeedPageForMode(signal, {
+          feedMode: resolvedFeedMode,
+          itemLimit: pollItemLimit,
+        });
+
+        if (signal.aborted || activeUpdateRequestIdRef.current !== requestId) {
+          return;
+        }
+
+        const knownIds = new Set([
+          ...itemsRef.current.map((item) => item.id),
+          ...pendingItemsRef.current.map((item) => item.id),
+        ]);
+        const currentTopItemId = itemsRef.current[0]?.id ?? null;
+        const firstKnownIndex = nextPage.items.findIndex((item) =>
+          knownIds.has(item.id)
+        );
+        const currentTopIndex = currentTopItemId
+          ? nextPage.items.findIndex((item) => item.id === currentTopItemId)
+          : -1;
+        const cutoffIndex =
+          currentTopIndex >= 0
+            ? currentTopIndex
+            : firstKnownIndex >= 0
+              ? firstKnownIndex
+              : nextPage.items.length;
+        const nextPendingItems = nextPage.items
+          .slice(0, cutoffIndex)
+          .filter((item) => !knownIds.has(item.id));
+
+        if (nextPendingItems.length === 0) {
+          return;
+        }
+
+        commitPendingItems(
+          prependUniqueFeedItems(nextPendingItems, pendingItemsRef.current)
+        );
+      } catch (error) {
+        if (signal.aborted || activeUpdateRequestIdRef.current !== requestId) {
+          return;
+        }
+
+        console.error('Failed to refresh Quitter feed widget', error);
+      } finally {
+        if (activeUpdateRequestIdRef.current === requestId) {
+          isUpdateCheckInFlightRef.current = false;
+
+          if (showRefreshIndicator) {
+            setIsRefreshing(false);
+          }
+
+          setFeedCache((prev) => {
+            if (!prev || prev.feedKey !== pollFeedKey) {
+              return prev;
+            }
+            const next = { ...prev, lastPollAt: Date.now() };
+            feedCacheRef.current = next;
+            return next;
+          });
+        }
+      }
+    }
+  );
+
+  useEffect(() => {
+    const controller = new AbortController();
+
+    previousRefreshTokenRef.current = refreshToken;
+    const key = feedKey;
+    feedKeyRef.current = key;
+
+    const snapshot = feedCacheRef.current;
+    const canReuse =
+      snapshot != null &&
+      snapshot.feedKey === key &&
+      snapshot.initialFeedState === 'success';
+
+    if (canReuse) {
+      itemsRef.current = snapshot.items;
+      pendingItemsRef.current = snapshot.pendingItems;
+      setIsInitialLoading(false);
+      setRevealedItemIds([]);
+      return () => {
+        controller.abort();
+      };
+    }
+
+    setRevealedItemIds([]);
+    void loadFeed(controller.signal, {
+      feedMode,
+    });
+
+    return () => {
+      controller.abort();
+    };
+  }, [feedKey, feedMode, reloadToken]);
+
+  useEffect(() => {
+    if (refreshToken <= previousRefreshTokenRef.current) {
+      return undefined;
+    }
+
+    previousRefreshTokenRef.current = refreshToken;
+
+    if (isInitialLoading || initialFeedState === 'loading') {
+      return undefined;
+    }
+
+    if (itemsRef.current.length === 0) {
+      setReloadToken((value) => value + 1);
+      return undefined;
+    }
+
+    const controller = new AbortController();
+
+    void checkForNewPosts(controller.signal, {
+      feedMode,
+      showRefreshIndicator: true,
+    });
+
+    return () => {
+      controller.abort();
+    };
+  }, [feedMode, initialFeedState, isInitialLoading, refreshToken]);
+
+  useEffect(() => {
+    if (initialFeedState !== 'success' || items.length === 0) {
+      return undefined;
+    }
+
+    let isCancelled = false;
+    let timeoutId: number | null = null;
+    let activeController: AbortController | null = null;
+    const pollKey = feedKey;
+
+    const scheduleNextPoll = () => {
+      if (isCancelled) {
+        return;
+      }
+
+      const lastPollAt =
+        feedCacheRef.current?.feedKey === pollKey
+          ? feedCacheRef.current.lastPollAt
+          : null;
+      const now = Date.now();
+      const delay =
+        lastPollAt == null
+          ? FEED_POLL_INTERVAL_MS
+          : Math.max(0, FEED_POLL_INTERVAL_MS - (now - lastPollAt));
+
+      timeoutId = window.setTimeout(() => {
+        if (isCancelled) {
+          return;
+        }
+
+        activeController = new AbortController();
+
+        void checkForNewPosts(activeController.signal, {
+          feedMode,
+        }).finally(() => {
+          activeController = null;
+          scheduleNextPoll();
+        });
+      }, delay);
+    };
+
+    scheduleNextPoll();
+
+    return () => {
+      isCancelled = true;
+
+      if (timeoutId != null) {
+        window.clearTimeout(timeoutId);
+      }
+
+      activeController?.abort();
+    };
+  }, [feedMode, feedKey, initialFeedState, items.length]);
+
+  const handleOpenPost = useCallback((item: QuitterFeedItem) => {
+    executeEvent('addTab', {
+      data: {
+        identifier: '',
+        name: 'Quitter',
+        path: `post/${encodeURIComponent(item.author)}/${encodeURIComponent(item.identifier)}`,
+        service: 'APP',
+      },
+    });
+    executeEvent('open-apps-mode', {});
+  }, []);
+
+  const handleApplyPendingPosts = useCallback(() => {
+    const nextPendingItems = pendingItemsRef.current;
+
+    if (nextPendingItems.length === 0) {
+      return;
+    }
+
+    const scrollNode = scrollerRef.current;
+    const previousScrollTop = scrollNode?.scrollTop ?? 0;
+    const previousScrollHeight = scrollNode?.scrollHeight ?? 0;
+    const shouldPreserveViewport = previousScrollTop > 24;
+    const nextVisibleItems = prependUniqueFeedItems(
+      nextPendingItems,
+      itemsRef.current
+    );
+    const nextRevealedIds = nextPendingItems.map((item) => item.id);
+
+    commitPendingItems([]);
+    commitVisibleItems(nextVisibleItems);
+    setRevealedItemIds(nextRevealedIds);
+
+    if (
+      shouldPreserveViewport &&
+      typeof window !== 'undefined' &&
+      typeof window.requestAnimationFrame === 'function'
+    ) {
+      window.requestAnimationFrame(() => {
+        const nextScrollNode = scrollerRef.current;
+
+        if (!nextScrollNode) {
+          return;
+        }
+
+        const scrollDelta = nextScrollNode.scrollHeight - previousScrollHeight;
+        nextScrollNode.scrollTop = previousScrollTop + Math.max(scrollDelta, 0);
+      });
+    }
+  }, [commitPendingItems, commitVisibleItems]);
+
+  const showInitialLoadingState = isInitialLoading && items.length === 0;
+  const showInitialErrorState =
+    !isInitialLoading && initialFeedState === 'error' && items.length === 0;
+  const showEmptyState =
+    !isInitialLoading && initialFeedState === 'success' && items.length === 0;
+
+  const handleRetryInitialFeed = useCallback(() => {
+    setFeedCache(() => {
+      const key = feedKeyRef.current;
+      const next = emptyCacheForKey(key);
+      feedCacheRef.current = next;
+      return next;
+    });
+    setIsInitialLoading(true);
+    setReloadToken((value) => value + 1);
+  }, [setFeedCache]);
+
+  const handleSelectFollowingFeed = useCallback(() => {
+    if (feedMode === 'following') {
+      return;
+    }
+
+    setFeedMode('following');
+    writeQuitterFeedMode(feedModeStorageKey, 'following');
+  }, [feedMode, feedModeStorageKey]);
+
+  const handleSelectGeneralFeed = useCallback(() => {
+    setFeedMode('general');
+    writeQuitterFeedMode(feedModeStorageKey, 'general');
+  }, [feedModeStorageKey]);
+
+  const loadingLabel = useMemo(
+    () =>
+      isFollowingFeed
+        ? t('quitter_feed.loading_following')
+        : t('quitter_feed.loading_general'),
+    [isFollowingFeed, t]
+  );
+
+  const errorTitle = useMemo(
+    () =>
+      isFollowingFeed
+        ? t('quitter_feed.error_title_following')
+        : t('quitter_feed.error_title_general'),
+    [isFollowingFeed, t]
+  );
+
+  const emptyTitle = useMemo(() => {
+    if (!isFollowingFeed) {
+      return t('quitter_feed.empty_title_general');
+    }
+    if (followingEmptyReason === 'no-name') {
+      return t('quitter_feed.empty_title_no_name');
+    }
+    if (followingEmptyReason === 'no-following') {
+      return t('quitter_feed.empty_title_no_following');
+    }
+    return t('quitter_feed.empty_title_no_posts');
+  }, [followingEmptyReason, isFollowingFeed, t]);
+
+  const emptyMessage = useMemo(() => {
+    if (!isFollowingFeed) {
+      return null;
+    }
+    if (followingEmptyReason === 'no-name') {
+      return t('quitter_feed.empty_message_no_name');
+    }
+    if (followingEmptyReason === 'no-following') {
+      return t('quitter_feed.empty_message_no_following');
+    }
+    return t('quitter_feed.empty_message_no_posts');
+  }, [followingEmptyReason, isFollowingFeed, t]);
+  const showStatePanel =
+    showInitialLoadingState || showInitialErrorState || showEmptyState;
+  const segmentedToggleSx = {
+    alignItems: 'center',
+    borderRadius: '999px',
+    display: 'inline-flex',
+    fontSize: '0.69rem',
+    fontWeight: 700,
+    minHeight: '28px',
+    px: 1.25,
+    transition:
+      'background-color 140ms ease, border-color 140ms ease, color 140ms ease',
+    whiteSpace: 'nowrap',
+  } as const;
+
+  return (
+    <>
+      <QAppWidgetContainer hasContent>
+        <Box
+          sx={{
+            display: 'flex',
+            flex: '1 1 auto',
+            flexDirection: 'column',
+            height: '100%',
+            minHeight: 0,
+          }}
+        >
+          <Box
+            sx={{
+              alignItems: 'center',
+              display: 'flex',
+              flexShrink: 0,
+              gap: '8px',
+              justifyContent: 'space-between',
+              mt: '-3px',
+              pb: '8px',
+            }}
+          >
+            <Box
+              sx={{
+                alignItems: 'center',
+                backgroundColor:
+                  theme.palette.mode === 'dark'
+                    ? alpha(theme.palette.common.white, 0.04)
+                    : alpha(theme.palette.text.primary, 0.04),
+                border: `1px solid ${alpha(
+                  theme.palette.border.main,
+                  theme.palette.mode === 'dark' ? 0.16 : 0.1
+                )}`,
+                borderRadius: '999px',
+                display: 'inline-flex',
+                gap: '4px',
+                p: '2px',
+              }}
+            >
+              <ButtonBase
+                disableRipple
+                onClick={handleSelectGeneralFeed}
+                sx={{
+                  ...segmentedToggleSx,
+                  backgroundColor:
+                    feedMode === 'general'
+                      ? alpha(theme.palette.primary.main, 0.18)
+                      : 'transparent',
+                  border: `1px solid ${alpha(
+                    theme.palette.border.main,
+                    feedMode === 'general'
+                      ? theme.palette.mode === 'dark'
+                        ? 0.28
+                        : 0.18
+                      : 0
+                  )}`,
+                  color:
+                    feedMode === 'general'
+                      ? theme.palette.text.primary
+                      : theme.palette.text.secondary,
+                }}
+              >
+                {t('quitter_feed.tab_general')}
+              </ButtonBase>
+              <ButtonBase
+                disableRipple
+                onClick={handleSelectFollowingFeed}
+                sx={{
+                  ...segmentedToggleSx,
+                  backgroundColor:
+                    feedMode === 'following'
+                      ? alpha(theme.palette.primary.main, 0.18)
+                      : 'transparent',
+                  border: `1px solid ${alpha(
+                    theme.palette.border.main,
+                    feedMode === 'following'
+                      ? theme.palette.mode === 'dark'
+                        ? 0.28
+                        : 0.18
+                      : 0
+                  )}`,
+                  color:
+                    feedMode === 'following'
+                      ? theme.palette.text.primary
+                      : theme.palette.text.secondary,
+                }}
+              >
+                {t('quitter_feed.tab_following')}
+              </ButtonBase>
+            </Box>
+            <Typography
+              sx={{
+                color: theme.palette.text.secondary,
+                fontSize: '0.67rem',
+                fontWeight: 600,
+                letterSpacing: '0.01em',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {feedMode === 'following'
+                ? t('quitter_feed.subtitle_personalized')
+                : t('quitter_feed.subtitle_public')}
+            </Typography>
+          </Box>
+
+          {!showStatePanel && items.length > 0 ? (
+            <Collapse in={pendingItems.length > 0} mountOnEnter unmountOnExit>
+              <Box
+                sx={{
+                  display: 'flex',
+                  justifyContent: 'center',
+                  mb: '26px',
+                  mt: '-15px',
+                  width: '100%',
+                }}
+              >
+                <ButtonBase
+                  disableRipple
+                  onClick={(event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    handleApplyPendingPosts();
+                  }}
+                  sx={{
+                    alignItems: 'center',
+                    animation:
+                      'quitterNewPostsThresholdFade 5.8s ease-in-out infinite',
+                    display: 'inline-flex',
+                    gap: '9px',
+                    maxWidth: '100%',
+                    position: 'relative',
+                    px: '4px',
+                    py: '2px',
+                    zIndex: 1,
+                    '@keyframes quitterNewPostsThresholdFade': {
+                      '0%, 100%': {
+                        opacity: 0.84,
+                      },
+                      '50%': {
+                        opacity: 1,
+                      },
+                    },
+                    '&:hover': {
+                      opacity: 1,
+                    },
+                  }}
+                >
+                  <Box
+                    sx={{
+                      background: `linear-gradient(90deg, ${alpha(theme.palette.primary.main, 0)} 0%, ${alpha(theme.palette.primary.main, 0.07)} 100%)`,
+                      flexShrink: 0,
+                      height: '1px',
+                      width: '26px',
+                    }}
+                  />
+                  <Typography
+                    sx={{
+                      alignItems: 'center',
+                      color: alpha(theme.palette.text.primary, 0.9),
+                      display: 'inline-flex',
+                      flexShrink: 0,
+                      fontSize: '0.73rem',
+                      fontWeight: 760,
+                      gap: '7px',
+                      justifyContent: 'center',
+                      letterSpacing: '0.01em',
+                      lineHeight: 1.2,
+                    }}
+                  >
+                    <Box
+                      component="span"
+                      sx={{
+                        animation:
+                          'quitterNewPostsDotBreathe 4.4s ease-in-out infinite',
+                        bgcolor: alpha(theme.palette.primary.main, 0.96),
+                        borderRadius: '50%',
+                        display: 'inline-block',
+                        flexShrink: 0,
+                        height: 6,
+                        width: 6,
+                        '@keyframes quitterNewPostsDotBreathe': {
+                          '0%, 100%': {
+                            opacity: 0.86,
+                            transform: 'scale(0.86)',
+                          },
+                          '50%': {
+                            opacity: 1,
+                            transform: 'scale(1.12)',
+                          },
+                        },
+                      }}
+                    />
+                    {pendingPostLabel}
+                  </Typography>
+                  <Box
+                    sx={{
+                      background: `linear-gradient(90deg, ${alpha(theme.palette.primary.main, 0.07)} 0%, ${alpha(theme.palette.primary.main, 0)} 100%)`,
+                      flexShrink: 0,
+                      height: '1px',
+                      width: '26px',
+                    }}
+                  />
+                </ButtonBase>
+              </Box>
+            </Collapse>
+          ) : null}
+
+          {showStatePanel ? (
+            <QAppWidgetStatePanel
+              description={
+                showInitialErrorState
+                  ? error
+                  : showEmptyState
+                    ? emptyMessage
+                    : null
+              }
+              loadingLabel={showInitialLoadingState ? loadingLabel : undefined}
+              onRetry={
+                showInitialErrorState ? handleRetryInitialFeed : undefined
+              }
+              onSecondaryAction={
+                (showInitialErrorState || showEmptyState) && isFollowingFeed
+                  ? handleSelectGeneralFeed
+                  : undefined
+              }
+              retryLabel={
+                isFollowingFeed
+                  ? t('quitter_feed.retry_following')
+                  : t('quitter_feed.retry_general')
+              }
+              secondaryActionLabel={
+                (showInitialErrorState || showEmptyState) && isFollowingFeed
+                  ? t('quitter_feed.return_to_general')
+                  : undefined
+              }
+              title={
+                showInitialLoadingState
+                  ? loadingLabel
+                  : showInitialErrorState
+                    ? errorTitle
+                    : emptyTitle
+              }
+            />
+          ) : (
+            <>
+              <Box
+                ref={scrollerRef}
+                sx={{
+                  flex: '1 1 auto',
+                  minHeight: 0,
+                  // Avoid browser scroll anchoring fighting virtual row layout / height totals.
+                  overflowAnchor: 'none',
+                  overflowY: 'auto',
+                  pr: '2px',
+                  scrollbarColor: `${alpha(theme.palette.text.secondary, 0.3)} transparent`,
+                  scrollbarWidth: 'thin',
+                  '&::-webkit-scrollbar': {
+                    width: '10px',
+                  },
+                  '&::-webkit-scrollbar-thumb': {
+                    backgroundClip: 'padding-box',
+                    backgroundColor: alpha(theme.palette.text.secondary, 0.24),
+                    border: '3px solid transparent',
+                    borderRadius: '999px',
+                  },
+                }}
+              >
+                <Box
+                  sx={{
+                    height:
+                      rowVirtualizer.getTotalSize() + scrollListBottomPadPx,
+                    position: 'relative',
+                    width: '100%',
+                  }}
+                >
+                  <Box
+                    sx={{
+                      left: 0,
+                      position: 'absolute',
+                      top: 0,
+                      width: '100%',
+                    }}
+                  >
+                    {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+                      const item = items[virtualRow.index];
+                      if (!item) {
+                        return null;
+                      }
+
+                      const revealSx = revealedItemIdSet.has(item.id)
+                        ? {
+                            '@keyframes quitterFeedInsert': {
+                              '0%': {
+                                opacity: 0,
+                                transform: 'translateY(-6px)',
+                              },
+                              '100%': {
+                                opacity: 1,
+                                transform: 'translateY(0)',
+                              },
+                            },
+                            animation: 'quitterFeedInsert 280ms ease both',
+                          }
+                        : undefined;
+
+                      return (
+                        <Box
+                          key={virtualRow.key}
+                          data-index={virtualRow.index}
+                          ref={rowVirtualizer.measureElement}
+                          sx={{
+                            boxSizing: 'border-box',
+                            left: 0,
+                            paddingBottom:
+                              virtualRow.index < items.length - 1
+                                ? `${rowGapPx}px`
+                                : 0,
+                            position: 'absolute',
+                            top: 0,
+                            transform: `translate3d(0, ${virtualRow.start}px, 0)`,
+                            width: '100%',
+                          }}
+                        >
+                          <Box sx={revealSx}>
+                            <QuitterFeedCard
+                              displayMode={displayMode}
+                              item={item}
+                              onOpen={() => {
+                                handleOpenPost(item);
+                              }}
+                            />
+                          </Box>
+                        </Box>
+                      );
+                    })}
+                  </Box>
+                </Box>
+              </Box>
+              {items.length > 0 && (
+                <Box
+                  data-quitters-footer="true"
+                  sx={{
+                    alignItems: 'center',
+                    borderTop: `1px solid ${alpha(
+                      theme.palette.border.main,
+                      theme.palette.mode === 'dark' ? 0.18 : 0.1
+                    )}`,
+                    display: 'flex',
+                    flexShrink: 0,
+                    gap: '8px',
+                    justifyContent: 'flex-start',
+                    mx: '-8px',
+                    mb: '-8px',
+                    mt: 0,
+                    pb: '10px',
+                    pt: '10px',
+                    px: '8px',
+                  }}
+                >
+                  <Box
+                    sx={{
+                      alignItems: 'center',
+                      display: 'inline-flex',
+                      gap: '7px',
+                      minWidth: 0,
+                    }}
+                  >
+                    {isRefreshing ? (
+                      <CircularProgress
+                        size={13}
+                        sx={{
+                          color: theme.palette.text.secondary,
+                          flexShrink: 0,
+                        }}
+                      />
+                    ) : (
+                      <Box
+                        sx={{
+                          bgcolor: alpha(theme.palette.primary.main, 0.68),
+                          borderRadius: '50%',
+                          flexShrink: 0,
+                          height: 6,
+                          width: 6,
+                        }}
+                      />
+                    )}
+                    <Typography
+                      sx={{
+                        color: isRefreshing
+                          ? theme.palette.text.primary
+                          : theme.palette.text.secondary,
+                        fontSize: '0.7rem',
+                        fontWeight: 600,
+                        letterSpacing: '0.01em',
+                        minWidth: 0,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {loadedPostLabel}
+                    </Typography>
+                  </Box>
+                </Box>
+              )}
+            </>
+          )}
+        </Box>
+      </QAppWidgetContainer>
+    </>
+  );
+};
diff --git a/src/components/Widgets/quitter/QuitterFeedCard.tsx b/src/components/Widgets/quitter/QuitterFeedCard.tsx
new file mode 100644
index 00000000..dc67d586
--- /dev/null
+++ b/src/components/Widgets/quitter/QuitterFeedCard.tsx
@@ -0,0 +1,468 @@
+import PlayCircleOutlineRoundedIcon from '@mui/icons-material/PlayCircleOutlineRounded';
+import { Avatar, Box, ButtonBase, Typography, useTheme } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { formatTimestamp } from '../../../utils/time';
+import type { WidgetDisplayMode } from '../DashboardWidgetFrame';
+import type { QuitterFeedItem } from './quitterFeedTypes';
+
+type QuitterFeedCardProps = {
+  displayMode?: WidgetDisplayMode;
+  item: QuitterFeedItem;
+  onOpen?: () => void;
+};
+
+export const QuitterFeedCard = ({
+  displayMode = 'compact',
+  item,
+  onOpen,
+}: QuitterFeedCardProps) => {
+  const theme = useTheme();
+  const { t } = useTranslation('group');
+  const hasText = item.text.trim().length > 0;
+  const imageCount = item.images.length;
+  const hasMedia = imageCount > 0 || item.hasVideo;
+  const isCompact = displayMode === 'compact';
+  const collapsedLineCount = hasMedia
+    ? isCompact
+      ? 2
+      : 3
+    : isCompact
+      ? 3
+      : 4;
+  const cardGap = isCompact ? '10px' : '12px';
+  const imageHeight =
+    imageCount > 1 ? (isCompact ? 118 : 142) : isCompact ? 172 : 204;
+  const textFontSize = isCompact ? '0.78rem' : '0.83rem';
+  const cardSurfaceColor =
+    theme.palette.mode === 'dark'
+      ? 'linear-gradient(180deg, rgba(46, 50, 61, 0.92) 0%, rgba(36, 39, 49, 0.96) 100%)'
+      : alpha(theme.palette.text.primary, 0.038);
+  const cardSurfaceHoverColor =
+    theme.palette.mode === 'dark'
+      ? 'linear-gradient(180deg, rgba(50, 55, 67, 0.96) 0%, rgba(39, 43, 53, 0.98) 100%)'
+      : alpha(theme.palette.text.primary, 0.05);
+  const cardBorderColor =
+    theme.palette.mode === 'dark'
+      ? 'rgba(255,255,255,0.06)'
+      : alpha(theme.palette.border.main, 0.12);
+  const cardHoverBorderColor =
+    theme.palette.mode === 'dark'
+      ? 'rgba(255,255,255,0.085)'
+      : alpha(theme.palette.border.main, 0.18);
+  const cardInsetShadow =
+    theme.palette.mode === 'dark'
+      ? `0 10px 24px rgba(0,0,0,0.2), inset 0 1px 0 ${alpha(theme.palette.common.white, 0.045)}`
+      : `inset 0 1px 0 ${alpha(theme.palette.common.white, 0.76)}`;
+  const textRef = useRef<HTMLDivElement | null>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isTextExpandable, setIsTextExpandable] = useState(false);
+
+  useEffect(() => {
+    setIsExpanded(false);
+  }, [item.id]);
+
+  useEffect(() => {
+    if (!hasText) {
+      setIsTextExpandable(false);
+      return;
+    }
+
+    const node = textRef.current;
+    if (!node) {
+      return;
+    }
+
+    const measureOverflow = () => {
+      if (isExpanded) {
+        return;
+      }
+
+      setIsTextExpandable(node.scrollHeight - node.clientHeight > 1);
+    };
+
+    measureOverflow();
+
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', measureOverflow);
+
+      return () => {
+        window.removeEventListener('resize', measureOverflow);
+      };
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      measureOverflow();
+    });
+
+    resizeObserver.observe(node);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [collapsedLineCount, hasText, isExpanded, item.text]);
+
+  return (
+    <Box
+      onClick={onOpen}
+      onKeyDown={(event) => {
+        if (!onOpen) {
+          return;
+        }
+
+        if (event.key === 'Enter' || event.key === ' ') {
+          event.preventDefault();
+          onOpen();
+        }
+      }}
+      role={onOpen ? 'link' : undefined}
+      sx={{
+        background: cardSurfaceColor,
+        border: `1px solid ${cardBorderColor}`,
+        borderRadius: '12px',
+        boxShadow: cardInsetShadow,
+        display: 'flex',
+        flex: '0 0 auto',
+        flexDirection: 'column',
+        flexShrink: 0,
+        gap: cardGap,
+        minHeight: 'max-content',
+        overflow: 'hidden',
+        p: isCompact ? '14px 14px 15px' : '16px 16px 17px',
+        position: 'relative',
+        tabIndex: onOpen ? 0 : undefined,
+        transition:
+          'transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease',
+        width: '100%',
+        ...(onOpen
+          ? {
+              cursor: 'pointer',
+              '&:hover': {
+                background: cardSurfaceHoverColor,
+                borderColor: cardHoverBorderColor,
+                boxShadow:
+                  theme.palette.mode === 'dark'
+                    ? `0 14px 28px rgba(0,0,0,0.24), inset 0 1px 0 ${alpha(theme.palette.common.white, 0.055)}`
+                    : `inset 0 1px 0 ${alpha(theme.palette.common.white, 0.84)}`,
+                transform: 'translateY(-1px)',
+              },
+              '&:focus-visible': {
+                outline: `2px solid ${alpha(theme.palette.primary.main, 0.48)}`,
+                outlineOffset: '-2px',
+              },
+            }
+          : null),
+      }}
+    >
+      <Box sx={{ display: 'flex', gap: isCompact ? '9px' : '10px' }}>
+        <Avatar
+          alt={item.author}
+          src={item.avatarUrl}
+          sx={{
+            bgcolor:
+              theme.palette.mode === 'dark'
+                ? alpha(theme.palette.common.white, 0.08)
+                : alpha(theme.palette.text.primary, 0.08),
+            border: `1px solid ${alpha(theme.palette.border.main, theme.palette.mode === 'dark' ? 0.34 : 0.16)}`,
+            color: theme.palette.text.primary,
+            flexShrink: 0,
+            height: isCompact ? 34 : 38,
+            width: isCompact ? 34 : 38,
+          }}
+        >
+          {item.author.charAt(0).toUpperCase()}
+        </Avatar>
+
+        <Box sx={{ flex: '1 1 auto', minWidth: 0 }}>
+          <Box
+            sx={{
+              alignItems: 'center',
+              columnGap: '8px',
+              display: 'flex',
+              flexWrap: 'wrap',
+              rowGap: '6px',
+            }}
+          >
+            <Typography
+              sx={{
+                color:
+                  theme.palette.mode === 'dark'
+                    ? theme.palette.common.white
+                    : theme.palette.text.primary,
+                fontSize: isCompact ? '0.82rem' : '0.87rem',
+                fontWeight: 700,
+                letterSpacing: '-0.01em',
+                minWidth: 0,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {item.author}
+            </Typography>
+            <Box
+              sx={{
+                alignItems: 'center',
+                display: 'inline-flex',
+                flexShrink: 0,
+                gap: '6px',
+              }}
+            >
+              <Box
+                component="span"
+                sx={{
+                  bgcolor:
+                    theme.palette.mode === 'dark'
+                      ? 'rgba(112, 122, 138, 0.82)'
+                      : alpha(theme.palette.text.primary, 0.22),
+                  borderRadius: '50%',
+                  height: 4,
+                  width: 4,
+                }}
+              />
+              <Typography
+                sx={{
+                  color:
+                    theme.palette.mode === 'dark'
+                      ? '#707a8a'
+                      : 'rgba(72, 78, 92, 0.72)',
+                  fontSize: isCompact ? '0.67rem' : '0.69rem',
+                  fontWeight: 600,
+                  letterSpacing: '0.01em',
+                  lineHeight: 1,
+                }}
+              >
+                {formatTimestamp(item.publishedAt)}
+              </Typography>
+            </Box>
+          </Box>
+
+          {hasText ? (
+            <Box sx={{ mt: '8px' }}>
+              <Typography
+                component="div"
+                ref={textRef}
+                sx={{
+                  color: theme.palette.text.primary,
+                  display: isExpanded ? 'block' : '-webkit-box',
+                  fontSize: textFontSize,
+                  lineHeight: 1.58,
+                  overflow: 'hidden',
+                  WebkitBoxOrient: 'vertical',
+                  WebkitLineClamp: isExpanded ? 'unset' : collapsedLineCount,
+                  whiteSpace: 'pre-wrap',
+                  wordBreak: 'break-word',
+                }}
+              >
+                {item.text}
+              </Typography>
+              {isTextExpandable || isExpanded ? (
+                <ButtonBase
+                  disableRipple
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    setIsExpanded((value) => !value);
+                  }}
+                  sx={{
+                    alignItems: 'center',
+                    color: alpha(theme.palette.primary.main, 0.84),
+                    display: 'inline-flex',
+                    fontSize: isCompact ? '0.71rem' : '0.73rem',
+                    fontWeight: 700,
+                    justifyContent: 'flex-start',
+                    minHeight: 'unset',
+                    mt: '5px',
+                    textAlign: 'left',
+                    '&:hover': {
+                      color: theme.palette.primary.main,
+                      textDecoration: 'underline',
+                    },
+                  }}
+                >
+                  {isExpanded
+                    ? t('dashboard.quitter_show_less', {
+                        defaultValue: 'Show less',
+                      })
+                    : t('dashboard.quitter_show_more', {
+                        defaultValue: 'Show more',
+                      })}
+                </ButtonBase>
+              ) : null}
+            </Box>
+          ) : null}
+        </Box>
+      </Box>
+
+      {item.hasVideo ? (
+        <Box
+          sx={{
+            background:
+              theme.palette.mode === 'dark'
+                ? `radial-gradient(82% 110% at 78% 0%, rgba(136, 188, 255, 0.34) 0%, rgba(81, 136, 196, 0.18) 28%, rgba(28, 45, 70, 0.22) 58%, rgba(18, 23, 34, 0.96) 100%), linear-gradient(180deg, rgba(33, 39, 51, 0.92) 0%, rgba(21, 25, 35, 0.98) 100%)`
+                : `linear-gradient(180deg, ${alpha(theme.palette.text.primary, 0.04)} 0%, ${alpha(theme.palette.text.primary, 0.03)} 100%)`,
+            border: `1px solid ${alpha(
+              theme.palette.common.white,
+              theme.palette.mode === 'dark' ? 0.08 : 0.12
+            )}`,
+            borderRadius: '10px',
+            boxShadow:
+              theme.palette.mode === 'dark'
+                ? `inset 0 1px 0 ${alpha(theme.palette.common.white, 0.045)}`
+                : `inset 0 1px 0 ${alpha(theme.palette.common.white, 0.64)}`,
+            minHeight: imageCount > 0 ? (isCompact ? 88 : 100) : isCompact ? 104 : 120,
+            overflow: 'hidden',
+            position: 'relative',
+            px: isCompact ? 1.2 : 1.35,
+            py: isCompact ? 1.05 : 1.25,
+            '&::before': {
+              background:
+                theme.palette.mode === 'dark'
+                  ? `radial-gradient(54% 92% at 30% 52%, rgba(90, 182, 255, 0.24) 0%, rgba(45, 97, 161, 0.14) 42%, transparent 76%)`
+                  : `linear-gradient(90deg, ${alpha(theme.palette.primary.main, 0.18)} 0%, ${alpha(theme.palette.primary.main, 0.08)} 42%, transparent 82%)`,
+              content: '""',
+              inset: 0,
+              opacity: 0.9,
+              pointerEvents: 'none',
+              position: 'absolute',
+            },
+            '&::after': {
+              background:
+                theme.palette.mode === 'dark'
+                  ? `linear-gradient(180deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 34%)`
+                  : `repeating-linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.12)} 0px, ${alpha(theme.palette.primary.main, 0.12)} 2px, transparent 2px, transparent 10px)`,
+              content: '""',
+              inset: 0,
+              opacity: 0.8,
+              pointerEvents: 'none',
+              position: 'absolute',
+            },
+          }}
+        >
+          <Box
+            sx={{
+              background:
+                theme.palette.mode === 'dark'
+                  ? `radial-gradient(74% 88% at 100% 0%, ${alpha(theme.palette.primary.main, 0.14)} 0%, ${alpha(theme.palette.primary.main, 0.04)} 42%, transparent 76%)`
+                  : `radial-gradient(74% 88% at 100% 0%, ${alpha(theme.palette.primary.main, 0.12)} 0%, ${alpha(theme.palette.primary.main, 0.04)} 42%, transparent 76%)`,
+              inset: 0,
+              pointerEvents: 'none',
+              position: 'absolute',
+            }}
+          />
+          <Box
+            sx={{
+              alignItems: 'center',
+              color:
+                theme.palette.mode === 'dark'
+                  ? alpha(theme.palette.common.white, 0.96)
+                  : alpha(theme.palette.text.primary, 0.9),
+              display: 'flex',
+              gap: '10px',
+              justifyContent: 'space-between',
+              position: 'relative',
+              zIndex: 1,
+            }}
+          >
+            <Box sx={{ minWidth: 0 }}>
+              <Typography
+                sx={{
+                  color: theme.palette.text.primary,
+                  fontSize: isCompact ? '0.74rem' : '0.78rem',
+                  fontWeight: 700,
+                  letterSpacing: '-0.01em',
+                }}
+              >
+                {t('dashboard.quitter_video_attachment', {
+                  defaultValue: 'Video attachment',
+                })}
+              </Typography>
+              <Typography
+                sx={{
+                  color:
+                    theme.palette.mode === 'dark'
+                      ? 'rgba(223, 228, 238, 0.62)'
+                      : 'rgba(72, 78, 92, 0.68)',
+                  fontSize: isCompact ? '0.66rem' : '0.69rem',
+                  lineHeight: 1.45,
+                  mt: '2px',
+                }}
+              >
+                {t('dashboard.quitter_video_preview_hub', {
+                  defaultValue: 'Preview stays read-only in Hub',
+                })}
+              </Typography>
+            </Box>
+            <Box
+              sx={{
+                alignItems: 'center',
+                backgroundColor:
+                  theme.palette.mode === 'dark'
+                    ? alpha(theme.palette.common.white, 0.09)
+                    : alpha(theme.palette.common.white, 0.76),
+                border: `1px solid ${alpha(
+                  theme.palette.common.white,
+                  theme.palette.mode === 'dark' ? 0.12 : 0.12
+                )}`,
+                borderRadius: '50%',
+                display: 'inline-flex',
+                flexShrink: 0,
+                height: isCompact ? 40 : 46,
+                justifyContent: 'center',
+                width: isCompact ? 40 : 46,
+              }}
+            >
+              <PlayCircleOutlineRoundedIcon
+                sx={{
+                  color: alpha(theme.palette.common.white, 0.96),
+                  fontSize: isCompact ? '1.42rem' : '1.62rem',
+                }}
+              />
+            </Box>
+          </Box>
+        </Box>
+      ) : null}
+
+      {imageCount > 0 ? (
+        <Box
+          sx={{
+            display: 'grid',
+            gap: '6px',
+            gridTemplateColumns:
+              imageCount > 1 ? 'repeat(2, minmax(0, 1fr))' : 'minmax(0, 1fr)',
+          }}
+        >
+          {item.images.map((image) => (
+            <Box
+              key={image.src}
+              sx={{
+                border: `1px solid ${alpha(
+                  theme.palette.border.main,
+                  theme.palette.mode === 'dark' ? 0.24 : 0.12
+                )}`,
+                borderRadius: '8px',
+                maxHeight: imageHeight,
+                overflow: 'hidden',
+              }}
+            >
+              <Box
+                component="img"
+                alt={image.alt}
+                loading="lazy"
+                src={image.src}
+                sx={{
+                  aspectRatio: imageCount > 1 ? '1 / 1' : '16 / 10',
+                  display: 'block',
+                  height: imageHeight,
+                  maxHeight: imageHeight,
+                  objectFit: 'cover',
+                  width: '100%',
+                }}
+              />
+            </Box>
+          ))}
+        </Box>
+      ) : null}
+    </Box>
+  );
+};
diff --git a/src/components/Widgets/quitter/quitterFeedApi.ts b/src/components/Widgets/quitter/quitterFeedApi.ts
new file mode 100644
index 00000000..1a9b73fd
--- /dev/null
+++ b/src/components/Widgets/quitter/quitterFeedApi.ts
@@ -0,0 +1,616 @@
+import type {
+  FetchQuitterFeedOptions,
+  QuitterFeedDocument,
+  QuitterFeedPage,
+  QuitterFeedImageRef,
+  QuitterFeedItem,
+  QuitterFeedItemImage,
+  QuitterFeedSearchResource,
+  QuitterFeedVideoRef,
+} from './quitterFeedTypes';
+import { getBaseApiReact } from '../../../utils/globalApi';
+
+export const QUITTER_PUBLIC_FEED_SEARCH_ENDPOINT =
+  '/arbitrary/resources/search';
+
+const QUITTER_PUBLIC_FEED_SEARCH_LIMIT = 10;
+const QUITTER_WIDGET_ITEM_LIMIT = 6;
+const QUITTER_MAX_PAGINATION_PASSES = 4;
+const QUITTER_FOLLOWING_SCAN_TOTAL_LIMIT = 60;
+const QUITTER_FOLLOW_CANDIDATE_MAX_SIZE = 160;
+const QUITTER_FOLLOW_CANDIDATE_LIMIT = 24;
+const QUITTER_FOLLOWING_CACHE_TTL_MS = 5 * 60 * 1000;
+/** Max entries; LRU eviction. Payloads can be large (e.g. embedded images). */
+const QUITTER_DOCUMENT_PAYLOAD_CACHE_MAX_ENTRIES = 250;
+
+// Verified against the public node on April 19, 2026.
+// This is Quitter's qapp-core-derived POST + ROOT search prefix.
+const QUITTER_PUBLIC_POST_PREFIX = 'MhNiRYdzkaP9dz-kX47dT-XrFXaYetyErMdF-';
+const QUITTER_FOLLOWING_PREFIX = 'gY.TWOeB25Co.7';
+const followedNamesCache = new Map<
+  string,
+  { fetchedAt: number; names: string[] }
+>();
+
+const documentPayloadLru = new Map<string, unknown>();
+
+const documentPayloadCacheKey = (resource: QuitterFeedSearchResource) =>
+  `${resource.name}:${resource.identifier}:${resource.latestSignature}`;
+
+const readDocumentPayloadCache = (key: string): unknown | undefined => {
+  const value = documentPayloadLru.get(key);
+  if (value === undefined) {
+    return undefined;
+  }
+  documentPayloadLru.delete(key);
+  documentPayloadLru.set(key, value);
+  return value;
+};
+
+const writeDocumentPayloadCache = (key: string, value: unknown) => {
+  if (documentPayloadLru.has(key)) {
+    documentPayloadLru.delete(key);
+  }
+  documentPayloadLru.set(key, value);
+
+  while (documentPayloadLru.size > QUITTER_DOCUMENT_PAYLOAD_CACHE_MAX_ENTRIES) {
+    const oldest = documentPayloadLru.keys().next().value as string | undefined;
+    if (oldest === undefined) {
+      break;
+    }
+    documentPayloadLru.delete(oldest);
+  }
+};
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  value != null && typeof value === 'object' && !Array.isArray(value);
+
+const isAbortError = (error: unknown) =>
+  error instanceof DOMException && error.name === 'AbortError';
+
+const toSafeString = (value: unknown) =>
+  typeof value === 'string' ? value : '';
+
+const toSafeNumber = (value: unknown) =>
+  typeof value === 'number' && Number.isFinite(value) ? value : null;
+
+const detectImageMimeType = (base64: string): string => {
+  try {
+    const binary = atob(base64.slice(0, 20));
+    const bytes = new Uint8Array(binary.length);
+
+    for (let index = 0; index < binary.length; index += 1) {
+      bytes[index] = binary.charCodeAt(index);
+    }
+
+    if (
+      bytes[0] === 0x89 &&
+      bytes[1] === 0x50 &&
+      bytes[2] === 0x4e &&
+      bytes[3] === 0x47
+    ) {
+      return 'image/png';
+    }
+
+    if (bytes[0] === 0xff && bytes[1] === 0xd8 && bytes[2] === 0xff) {
+      return 'image/jpeg';
+    }
+
+    if (
+      bytes[0] === 0x52 &&
+      bytes[1] === 0x49 &&
+      bytes[2] === 0x46 &&
+      bytes[3] === 0x46 &&
+      bytes[8] === 0x57 &&
+      bytes[9] === 0x45 &&
+      bytes[10] === 0x42 &&
+      bytes[11] === 0x50
+    ) {
+      return 'image/webp';
+    }
+
+    if (bytes[0] === 0x47 && bytes[1] === 0x49 && bytes[2] === 0x46) {
+      return 'image/gif';
+    }
+  } catch {
+    return 'image/webp';
+  }
+
+  return 'image/webp';
+};
+
+const toRenderableImage = (
+  image: QuitterFeedImageRef,
+  author: string,
+  index: number
+): QuitterFeedItemImage | null => {
+  const src = toSafeString(image?.src).trim();
+
+  if (!src) {
+    return null;
+  }
+
+  return {
+    alt: `${author} image ${index + 1}`,
+    src: `data:${detectImageMimeType(src)};base64,${src}`,
+  };
+};
+
+const isQuitterVideoRef = (value: unknown): value is QuitterFeedVideoRef =>
+  isRecord(value) &&
+  toSafeString(value.identifier).length > 0 &&
+  toSafeString(value.name).length > 0 &&
+  toSafeString(value.service) === 'DOCUMENT';
+
+const isQuitterDocument = (value: unknown): value is QuitterFeedDocument => {
+  if (!isRecord(value)) {
+    return false;
+  }
+
+  return (
+    typeof value.text === 'string' &&
+    typeof value.name === 'string' &&
+    typeof value.timestamp === 'number' &&
+    Number.isFinite(value.timestamp)
+  );
+};
+
+const mapSearchResource = (
+  value: unknown
+): QuitterFeedSearchResource | null => {
+  if (!isRecord(value)) {
+    return null;
+  }
+
+  const created = toSafeNumber(value.created);
+  const size = toSafeNumber(value.size);
+  const updated = toSafeNumber(value.updated) ?? undefined;
+  const name = toSafeString(value.name);
+  const service = toSafeString(value.service);
+  const identifier = toSafeString(value.identifier);
+  const latestSignature = toSafeString(value.latestSignature);
+
+  if (
+    created == null ||
+    size == null ||
+    !name ||
+    service !== 'DOCUMENT' ||
+    !identifier ||
+    !latestSignature
+  ) {
+    return null;
+  }
+
+  return {
+    created,
+    identifier,
+    latestSignature,
+    name,
+    service: 'DOCUMENT',
+    size,
+    updated,
+  };
+};
+
+const mapDocumentToFeedItem = (
+  resource: QuitterFeedSearchResource,
+  document: unknown
+): QuitterFeedItem | null => {
+  if (!isQuitterDocument(document)) {
+    return null;
+  }
+
+  const author = document.name.trim() || resource.name;
+  const images = (Array.isArray(document.images) ? document.images : [])
+    .map((image, index) =>
+      toRenderableImage(image, author || resource.name, index)
+    )
+    .filter((image): image is QuitterFeedItemImage => image != null);
+  const hasVideo = (Array.isArray(document.videos) ? document.videos : []).some(
+    isQuitterVideoRef
+  );
+
+  return {
+    author,
+    avatarUrl: getQuitterAvatarUrl(author),
+    hasVideo,
+    id: `${resource.name}:${resource.identifier}`,
+    identifier: resource.identifier,
+    images,
+    latestSignature: resource.latestSignature,
+    publishedAt: document.timestamp,
+    searchCreatedAt: resource.created,
+    service: resource.service,
+    text: document.text,
+    updatedAt: resource.updated,
+  };
+};
+
+const getFollowedNameFromDocument = (document: unknown) => {
+  if (!isRecord(document)) {
+    return null;
+  }
+
+  const followedName = toSafeString(document.followedName).trim();
+  return followedName || null;
+};
+
+const fetchText = async (url: string, signal?: AbortSignal) => {
+  const response = await fetch(url, {
+    cache: 'no-store',
+    signal,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Request failed with status ${response.status}`);
+  }
+
+  return response.text();
+};
+
+const fetchJSON = async (url: string, signal?: AbortSignal) => {
+  const response = await fetch(url, {
+    cache: 'no-store',
+    signal,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Request failed with status ${response.status}`);
+  }
+
+  return response.json();
+};
+const buildQuitterFeedSearchUrl = (
+  searchLimit: number,
+  offset: number,
+  names: string[] = []
+) => {
+  const params = new URLSearchParams({
+    identifier: QUITTER_PUBLIC_POST_PREFIX,
+    limit: String(searchLimit),
+    mode: 'ALL',
+    offset: String(offset),
+    prefix: 'true',
+    reverse: 'true',
+    service: 'DOCUMENT',
+    excludeblocked: 'true',
+  });
+
+  names.forEach((name) => {
+    params.append('name', name);
+  });
+
+  return `${getBaseApiReact()}${QUITTER_PUBLIC_FEED_SEARCH_ENDPOINT}?${params.toString()}`;
+};
+
+const buildQuitterUserResourceSearchUrl = (
+  userName: string,
+  searchLimit: number,
+  offset: number
+) => {
+  const params = new URLSearchParams({
+    exactmatchnames: 'true',
+    limit: String(searchLimit),
+    mode: 'ALL',
+    name: userName,
+    offset: String(offset),
+    reverse: 'true',
+    service: 'DOCUMENT',
+    excludeblocked: 'true',
+    identifier: QUITTER_FOLLOWING_PREFIX,
+    prefix: 'true',
+  });
+
+  return `${getBaseApiReact()}${QUITTER_PUBLIC_FEED_SEARCH_ENDPOINT}?${params.toString()}`;
+};
+
+const buildQuitterDocumentUrl = (name: string, identifier: string) =>
+  `${getBaseApiReact()}/arbitrary/DOCUMENT/${encodeURIComponent(name)}/${encodeURIComponent(identifier)}`;
+
+export const getQuitterAvatarUrl = (author: string) =>
+  `${getBaseApiReact()}/arbitrary/THUMBNAIL/${encodeURIComponent(author)}/qortal_avatar?async=true`;
+
+const fetchQuitterSearchResources = async (
+  searchLimit: number,
+  offset = 0,
+  names: string[] = [],
+  signal?: AbortSignal
+) => {
+  const parsed = await fetchJSON(
+    buildQuitterFeedSearchUrl(searchLimit, offset, names),
+    signal
+  );
+
+  if (!Array.isArray(parsed)) {
+    throw new Error('Unexpected Quitter feed response shape');
+  }
+
+  return parsed
+    .map(mapSearchResource)
+    .filter(
+      (resource): resource is QuitterFeedSearchResource => resource != null
+    );
+};
+
+const fetchQuitterUserResources = async (
+  userName: string,
+  searchLimit: number,
+  offset = 0,
+  signal?: AbortSignal
+) => {
+  const text = await fetchJSON(
+    buildQuitterUserResourceSearchUrl(userName, searchLimit, offset),
+    signal
+  );
+
+  const parsed = text;
+
+  if (!Array.isArray(parsed)) {
+    throw new Error('Unexpected Quitter user resource response shape');
+  }
+
+  return parsed
+    .map(mapSearchResource)
+    .filter(
+      (resource): resource is QuitterFeedSearchResource => resource != null
+    );
+};
+
+const fetchQuitterDocumentPayload = async (
+  resource: QuitterFeedSearchResource,
+  signal?: AbortSignal
+) => {
+  const cacheKey = documentPayloadCacheKey(resource);
+  const cached = readDocumentPayloadCache(cacheKey);
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  const text = await fetchText(
+    buildQuitterDocumentUrl(resource.name, resource.identifier),
+    signal
+  );
+
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(text);
+  } catch {
+    parsed = text;
+  }
+
+  writeDocumentPayloadCache(cacheKey, parsed);
+  return parsed;
+};
+
+const fetchFollowedNames = async (
+  resources: QuitterFeedSearchResource[],
+  signal?: AbortSignal
+) => {
+  const response = await fetch(
+    `${getBaseApiReact()}/arbitrary/resources/onchain/data`,
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(
+        resources.map((resource) => ({
+          service: resource.service,
+          name: resource.name,
+          identifier: resource.identifier,
+        }))
+      ),
+    }
+  );
+  const followedNames = new Set<string>();
+  const results = await response.json();
+
+  if (response.ok) {
+    for (const result of results) {
+      if (!result.data || result.error) continue;
+
+      try {
+        const json = JSON.parse(atob(result.data));
+        if (!json.followedName) continue;
+        followedNames.add(json.followedName);
+      } catch {
+        console.warn(
+          'Failed to decode follow data for identifier:',
+          result.identifier
+        );
+      }
+    }
+  }
+
+  return Array.from(followedNames);
+};
+
+export const fetchQuitterFeed = async ({
+  excludeIds = [],
+  itemLimit = QUITTER_WIDGET_ITEM_LIMIT,
+  offset = 0,
+  searchLimit = QUITTER_PUBLIC_FEED_SEARCH_LIMIT,
+  signal,
+}: FetchQuitterFeedOptions = {}): Promise<QuitterFeedItem[]> => {
+  const page = await fetchQuitterFeedPage({
+    excludeIds,
+    itemLimit,
+    offset,
+    searchLimit,
+    signal,
+  });
+
+  return page.items;
+};
+
+export const fetchQuitterFeedPage = async ({
+  allowedAuthors,
+  excludeIds = [],
+  itemLimit = QUITTER_WIDGET_ITEM_LIMIT,
+  offset = 0,
+  searchLimit = QUITTER_PUBLIC_FEED_SEARCH_LIMIT,
+  signal,
+}: FetchQuitterFeedOptions = {}): Promise<QuitterFeedPage> => {
+  const seenIds = new Set(excludeIds);
+  const normalizedAllowedAuthors =
+    allowedAuthors
+      ?.map((author) => author.trim().toLowerCase())
+      .filter(Boolean) ?? null;
+  const allowedAuthorsSet =
+    normalizedAllowedAuthors != null ? new Set(normalizedAllowedAuthors) : null;
+
+  if (allowedAuthorsSet && allowedAuthorsSet.size === 0) {
+    return {
+      hasMore: false,
+      items: [],
+      nextOffset: offset,
+    };
+  }
+
+  const items: QuitterFeedItem[] = [];
+  let hasMore = true;
+  let nextOffset = offset;
+
+  for (
+    let pass = 0;
+    pass < QUITTER_MAX_PAGINATION_PASSES && items.length < itemLimit && hasMore;
+    pass += 1
+  ) {
+    const requestedOffset = nextOffset;
+    const remaining = itemLimit - items.length;
+    const requestLimit = Math.max(
+      1,
+      Math.min(
+        QUITTER_PUBLIC_FEED_SEARCH_LIMIT,
+        Math.max(searchLimit, remaining + 4)
+      )
+    );
+    const resources = await fetchQuitterSearchResources(
+      requestLimit,
+      requestedOffset,
+      allowedAuthors || [],
+      signal
+    );
+    const filteredResources = resources
+      .map((resource, resourceIndex) => ({
+        resource,
+        resourceIndex,
+      }))
+      .filter(({ resource }) => {
+        const normalizedName = resource.name.trim().toLowerCase();
+        return allowedAuthorsSet ? allowedAuthorsSet.has(normalizedName) : true;
+      });
+
+    const reachedSearchEnd = resources.length < requestLimit;
+
+    if (resources.length === 0) {
+      hasMore = false;
+      break;
+    }
+
+    const settled = await Promise.allSettled(
+      filteredResources.map(async (resourceEntry) => {
+        const resource = resourceEntry.resource;
+        const payload = await fetchQuitterDocumentPayload(resource, signal);
+        return mapDocumentToFeedItem(resource, payload);
+      })
+    );
+    let consumedResourceCount = resources.length;
+    let reachedItemLimit = false;
+
+    for (let index = 0; index < settled.length; index += 1) {
+      const result = settled[index];
+
+      if (result.status === 'fulfilled') {
+        if (!result.value) {
+          continue;
+        }
+
+        if (seenIds.has(result.value.id)) {
+          continue;
+        }
+
+        seenIds.add(result.value.id);
+        items.push(result.value);
+
+        if (items.length >= itemLimit) {
+          consumedResourceCount = filteredResources[index].resourceIndex + 1;
+          reachedItemLimit = true;
+          break;
+        }
+
+        continue;
+      }
+
+      if (!isAbortError(result.reason)) {
+        console.error('Failed to load Quitter feed document', result.reason);
+      }
+    }
+
+    nextOffset = requestedOffset + consumedResourceCount;
+    const hasBufferedResources =
+      reachedItemLimit && consumedResourceCount < resources.length;
+
+    if (reachedSearchEnd && !hasBufferedResources) {
+      hasMore = false;
+    }
+  }
+
+  return {
+    hasMore,
+    items,
+    nextOffset,
+  };
+};
+
+export const fetchQuitterFollowedNames = async (
+  userName: string,
+  signal?: AbortSignal
+) => {
+  const normalizedUserName = userName.trim();
+
+  if (!normalizedUserName) {
+    return [];
+  }
+
+  const cached = followedNamesCache.get(normalizedUserName);
+  if (
+    cached &&
+    Date.now() - cached.fetchedAt < QUITTER_FOLLOWING_CACHE_TTL_MS
+  ) {
+    return cached.names;
+  }
+
+  const followedNames = new Set<string>();
+  const resources = await fetchQuitterUserResources(
+    normalizedUserName,
+    QUITTER_FOLLOWING_SCAN_TOTAL_LIMIT,
+    0,
+    signal
+  );
+
+  const candidateResources = resources
+    .filter(
+      (resource) =>
+        resource.size <= QUITTER_FOLLOW_CANDIDATE_MAX_SIZE &&
+        resource.size !== 32
+    )
+    .sort((left, right) => left.size - right.size)
+    .slice(0, QUITTER_FOLLOW_CANDIDATE_LIMIT);
+
+  const settled = await fetchFollowedNames(candidateResources, signal);
+
+  for (const result of settled) {
+    if (!result || result === normalizedUserName) {
+      continue;
+    }
+
+    followedNames.add(result);
+  }
+
+  const names = [...followedNames];
+  followedNamesCache.set(normalizedUserName, {
+    fetchedAt: Date.now(),
+    names,
+  });
+
+  return names;
+};
diff --git a/src/components/Widgets/quitter/quitterFeedTypes.ts b/src/components/Widgets/quitter/quitterFeedTypes.ts
new file mode 100644
index 00000000..1d5f8ad6
--- /dev/null
+++ b/src/components/Widgets/quitter/quitterFeedTypes.ts
@@ -0,0 +1,88 @@
+export type QuitterFeedSearchResource = {
+  created: number;
+  identifier: string;
+  latestSignature: string;
+  name: string;
+  service: 'DOCUMENT';
+  size: number;
+  updated?: number;
+};
+
+export type QuitterFeedImageRef = {
+  src: string;
+};
+
+export type QuitterFeedVideoRef = {
+  identifier: string;
+  mimeType?: string;
+  name: string;
+  service: 'DOCUMENT';
+};
+
+export type QuitterFeedDocument = {
+  images?: QuitterFeedImageRef[];
+  name: string;
+  text: string;
+  timestamp: number;
+  videos?: QuitterFeedVideoRef[];
+};
+
+export type QuitterFeedItemImage = {
+  alt: string;
+  src: string;
+};
+
+export type QuitterFeedItem = {
+  author: string;
+  avatarUrl: string;
+  hasVideo: boolean;
+  id: string;
+  identifier: string;
+  images: QuitterFeedItemImage[];
+  latestSignature: string;
+  publishedAt: number;
+  searchCreatedAt: number;
+  service: 'DOCUMENT';
+  text: string;
+  updatedAt?: number;
+};
+
+export type FetchQuitterFeedOptions = {
+  allowedAuthors?: string[];
+  excludeIds?: string[];
+  itemLimit?: number;
+  offset?: number;
+  searchLimit?: number;
+  signal?: AbortSignal;
+};
+
+export type QuitterFeedPage = {
+  hasMore: boolean;
+  items: QuitterFeedItem[];
+  nextOffset: number;
+};
+
+export type QuitterFollowingEmptyReason =
+  | 'no-following'
+  | 'no-name'
+  | 'no-posts'
+  | null;
+
+export type QuitterDashboardInitialFeedState = 'error' | 'loading' | 'success';
+
+/**
+ * Home dashboard Quitter widget feed snapshot.
+ * Intended: subscribe via useAtom only from QuitterFeedWidget.
+ */
+export type QuitterDashboardFeedCache = {
+  error: string | null;
+  feedKey: string;
+  followingEmptyReason: QuitterFollowingEmptyReason;
+  initialFeedState: QuitterDashboardInitialFeedState;
+  items: QuitterFeedItem[];
+  /** Timestamp of last successful full load (loadFeed). */
+  lastFullFetchAt: number;
+  /** Timestamp of last poll / refresh fetch (checkForNewPosts). */
+  lastPollAt: number | null;
+  pendingItems: QuitterFeedItem[];
+};
diff --git a/src/components/common/BorderGlow.css b/src/components/common/BorderGlow.css
new file mode 100644
index 00000000..f547e91e
--- /dev/null
+++ b/src/components/common/BorderGlow.css
@@ -0,0 +1,293 @@
+/* Keep sweep motion in CSS so React does not write styles every frame. */
+@property --cursor-angle {
+  syntax: '<angle>';
+  inherits: true;
+  initial-value: 110deg;
+}
+
+@property --edge-proximity {
+  syntax: '<number>';
+  inherits: true;
+  initial-value: 0;
+}
+
+@keyframes border-glow-sweep-rotate {
+  from {
+    transform: rotate(110deg);
+  }
+
+  to {
+    transform: rotate(470deg);
+  }
+}
+
+@keyframes border-glow-intro-rotate {
+  0% {
+    transform: rotate(110deg);
+    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+  }
+
+  37.5% {
+    transform: rotate(287.5deg);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+  }
+
+  93.75%,
+  100% {
+    transform: rotate(465deg);
+  }
+}
+
+@keyframes border-glow-intro-opacity {
+  0% {
+    opacity: 0;
+  }
+
+  12.5%,
+  62.5% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+.border-glow-card.border-glow-css-sweep.border-glow-card--always-on {
+  --edge-proximity: 100;
+}
+
+/*
+ * Rotating `.edge-light` makes its paint extend past the card's axis-aligned
+ * bounds; clip at the root so the sweep cannot bleed into the grid gutters.
+ */
+.border-glow-card.border-glow-css-sweep {
+  overflow: hidden;
+  clip-path: inset(0 round var(--border-radius));
+}
+
+.border-glow-card.border-glow-css-sweep.border-glow-card--always-on > .edge-light {
+  opacity: 1;
+  animation: border-glow-sweep-rotate var(--sweep-duration, 4000ms) linear infinite;
+}
+
+.border-glow-card.border-glow-css-sweep.border-glow-css-sweep-intro > .edge-light {
+  animation:
+    border-glow-intro-rotate var(--sweep-duration, 4000ms) both,
+    border-glow-intro-opacity var(--sweep-duration, 4000ms) both;
+  animation-iteration-count: var(--sweep-iteration-count, 1);
+}
+
+.border-glow-card.border-glow-css-sweep.border-glow-css-sweep-reverse > .edge-light {
+  animation-direction: reverse;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .border-glow-card.border-glow-css-sweep > .edge-light {
+    animation: none;
+  }
+
+  .border-glow-card.border-glow-css-sweep.border-glow-card--always-on > .edge-light {
+    transform: rotate(118deg);
+  }
+}
+
+.border-glow-card {
+  --edge-proximity: 0;
+  --cursor-angle: 45deg;
+  --edge-sensitivity: 30;
+  --color-sensitivity: calc(var(--edge-sensitivity) + 20);
+  --border-radius: 28px;
+  --glow-padding: 40px;
+  --cone-spread: 25;
+
+  position: relative;
+  border-radius: var(--border-radius);
+  isolation: isolate;
+  transform: translate3d(0, 0, 0.01px);
+  display: grid;
+  border: 1px solid var(--card-border, rgb(255 255 255 / 15%));
+  background: var(--card-bg, #120f17);
+  overflow: visible;
+  box-shadow:
+    var(--card-shadow,
+      rgba(0, 0, 0, 0.1) 0px 1px 2px,
+      rgba(0, 0, 0, 0.1) 0px 2px 4px,
+      rgba(0, 0, 0, 0.1) 0px 4px 8px,
+      rgba(0, 0, 0, 0.1) 0px 8px 16px,
+      rgba(0, 0, 0, 0.1) 0px 16px 32px,
+      rgba(0, 0, 0, 0.1) 0px 32px 64px);
+}
+
+.border-glow-card::before,
+.border-glow-card::after,
+.border-glow-card > .edge-light {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  transition: opacity 0.25s ease-out;
+  z-index: -1;
+}
+
+.border-glow-card.border-glow-card--foreground::before,
+.border-glow-card.border-glow-card--foreground::after,
+.border-glow-card.border-glow-card--foreground > .edge-light {
+  z-index: 2;
+}
+
+.border-glow-card:not(:hover):not(.sweep-active):not(.border-glow-card--always-on)::before,
+.border-glow-card:not(:hover):not(.sweep-active):not(.border-glow-card--always-on)::after,
+.border-glow-card:not(:hover):not(.sweep-active):not(.border-glow-card--always-on) > .edge-light {
+  opacity: 0;
+  transition: opacity 0.75s ease-in-out;
+}
+
+.border-glow-card.non-interactive:not(.sweep-active):not(.border-glow-card--always-on)::before,
+.border-glow-card.non-interactive:not(.sweep-active):not(.border-glow-card--always-on)::after,
+.border-glow-card.non-interactive:not(.sweep-active):not(.border-glow-card--always-on) > .edge-light {
+  opacity: 0;
+  transition: opacity 0.75s ease-in-out;
+}
+
+.border-glow-card::before {
+  border: 1px solid transparent;
+  background:
+    var(--card-bg, #120f17) padding-box,
+    linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
+    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) border-box,
+    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) border-box,
+    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) border-box,
+    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) border-box,
+    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) border-box,
+    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) border-box,
+    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) border-box,
+    var(--gradient-base, linear-gradient(#c299ff 0 100%)) border-box;
+
+  opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
+
+  mask-image:
+    conic-gradient(
+      from var(--cursor-angle) at center,
+      black calc(var(--cone-spread) * 1%),
+      transparent calc((var(--cone-spread) + 15) * 1%),
+      transparent calc((100 - var(--cone-spread) - 15) * 1%),
+      black calc((100 - var(--cone-spread)) * 1%)
+    );
+}
+
+.border-glow-card::after {
+  border: 1px solid transparent;
+  background:
+    var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) padding-box,
+    var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
+    var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) padding-box,
+    var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) padding-box,
+    var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) padding-box,
+    var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) padding-box,
+    var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) padding-box,
+    var(--gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;
+
+  mask-image:
+    linear-gradient(to bottom, black, black),
+    radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
+    radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
+    radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
+    radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
+    radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
+    conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
+
+  mask-composite: subtract, add, add, add, add, add;
+  opacity: calc(var(--fill-opacity, 0.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
+  mix-blend-mode: soft-light;
+}
+
+.border-glow-card > .edge-light {
+  inset: calc(var(--glow-padding) * -1);
+  pointer-events: none;
+  z-index: 1;
+
+  mask-image:
+    conic-gradient(
+      from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%
+    );
+
+  opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
+  mix-blend-mode: plus-lighter;
+}
+
+.border-glow-card > .edge-light::before {
+  content: "";
+  position: absolute;
+  inset: var(--glow-padding);
+  border-radius: inherit;
+  box-shadow:
+    inset 0 0 0 1px var(--glow-color, hsl(40deg 80% 80% / 100%)),
+    inset 0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
+    inset 0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
+    inset 0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
+    inset 0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
+    inset 0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
+    inset 0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%)),
+    0 0 1px 0 var(--glow-color-60, hsl(40deg 80% 80% / 60%)),
+    0 0 3px 0 var(--glow-color-50, hsl(40deg 80% 80% / 50%)),
+    0 0 6px 0 var(--glow-color-40, hsl(40deg 80% 80% / 40%)),
+    0 0 15px 0 var(--glow-color-30, hsl(40deg 80% 80% / 30%)),
+    0 0 25px 2px var(--glow-color-20, hsl(40deg 80% 80% / 20%)),
+    0 0 50px 2px var(--glow-color-10, hsl(40deg 80% 80% / 10%));
+}
+
+.border-glow-card.border-glow-css-sweep::before,
+.border-glow-card.border-glow-css-sweep::after {
+  display: none;
+}
+
+.border-glow-card.border-glow-css-sweep > .edge-light {
+  inset: 0;
+  border-radius: inherit;
+  mask-image: none;
+  mix-blend-mode: normal;
+  opacity: 0;
+  overflow: hidden;
+  transform-origin: center;
+  will-change: transform, opacity;
+  z-index: 2;
+}
+
+.border-glow-card.border-glow-css-sweep > .edge-light::before {
+  background:
+    conic-gradient(
+      from -22deg at center,
+      transparent 0deg,
+      transparent 38deg,
+      var(--glow-color-10, hsl(40deg 80% 80% / 10%)) 54deg,
+      var(--glow-color-30, hsl(40deg 80% 80% / 30%)) 72deg,
+      var(--glow-color-10, hsl(40deg 80% 80% / 10%)) 96deg,
+      transparent 122deg,
+      transparent 360deg
+    );
+  border-radius: inherit;
+  bottom: 0;
+  box-shadow: none;
+  filter: blur(12px);
+  height: auto;
+  inset: 0;
+  opacity: 0.5;
+  right: 0;
+  top: 0;
+  transform: none;
+  width: auto;
+}
+
+.border-glow-card.border-glow-css-sweep > .edge-light::after {
+  content: none;
+}
+
+.border-glow-inner {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: auto;
+  z-index: 1;
+}
diff --git a/src/components/common/BorderGlow.tsx b/src/components/common/BorderGlow.tsx
new file mode 100644
index 00000000..761625fa
--- /dev/null
+++ b/src/components/common/BorderGlow.tsx
@@ -0,0 +1,240 @@
+import {
+  CSSProperties,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import './BorderGlow.css';
+
+type BorderGlowProps = {
+  children: ReactNode;
+  className?: string;
+  interactive?: boolean;
+  alwaysOn?: boolean;
+  foregroundGlow?: boolean;
+  reverseSweep?: boolean;
+  edgeSensitivity?: number;
+  glowColor?: string;
+  backgroundColor?: string;
+  borderRadius?: number;
+  glowRadius?: number;
+  glowIntensity?: number;
+  coneSpread?: number;
+  animated?: boolean;
+  loopAnimated?: boolean;
+  animationDurationMs?: number;
+  colors?: string[];
+  fillOpacity?: number;
+  style?: CSSProperties;
+};
+
+function parseHSL(hslStr: string) {
+  const match = hslStr.match(/([\d.]+)\s*([\d.]+)%?\s*([\d.]+)%?/);
+  if (!match) return { h: 40, s: 80, l: 80 };
+  return {
+    h: parseFloat(match[1]),
+    s: parseFloat(match[2]),
+    l: parseFloat(match[3]),
+  };
+}
+
+function buildGlowVars(glowColor: string, intensity: number) {
+  const { h, s, l } = parseHSL(glowColor);
+  const base = `${h}deg ${s}% ${l}%`;
+  const opacities = [100, 60, 50, 40, 30, 20, 10];
+  const keys = ['', '-60', '-50', '-40', '-30', '-20', '-10'];
+  const vars: Record<string, string> = {};
+
+  for (let i = 0; i < opacities.length; i += 1) {
+    vars[`--glow-color${keys[i]}`] = `hsl(${base} / ${Math.min(
+      opacities[i] * intensity,
+      100
+    )}%)`;
+  }
+
+  return vars;
+}
+
+const GRADIENT_POSITIONS = [
+  '80% 55%',
+  '69% 34%',
+  '8% 6%',
+  '41% 38%',
+  '86% 85%',
+  '82% 18%',
+  '51% 4%',
+];
+const GRADIENT_KEYS = [
+  '--gradient-one',
+  '--gradient-two',
+  '--gradient-three',
+  '--gradient-four',
+  '--gradient-five',
+  '--gradient-six',
+  '--gradient-seven',
+];
+const COLOR_MAP = [0, 1, 2, 0, 1, 2, 1];
+
+function buildGradientVars(colors: string[]) {
+  const vars: Record<string, string> = {};
+  for (let i = 0; i < 7; i += 1) {
+    const c = colors[Math.min(COLOR_MAP[i], colors.length - 1)];
+    vars[GRADIENT_KEYS[i]] =
+      `radial-gradient(at ${GRADIENT_POSITIONS[i]}, ${c} 0px, transparent 50%)`;
+  }
+  vars['--gradient-base'] = `linear-gradient(${colors[0]} 0 100%)`;
+  return vars;
+}
+
+function getEdgeProximity(width: number, height: number, x: number, y: number) {
+  const cx = width / 2;
+  const cy = height / 2;
+  const dx = x - cx;
+  const dy = y - cy;
+  let kx = Infinity;
+  let ky = Infinity;
+  if (dx !== 0) kx = cx / Math.abs(dx);
+  if (dy !== 0) ky = cy / Math.abs(dy);
+  return Math.min(Math.max(1 / Math.min(kx, ky), 0), 1);
+}
+
+function getCursorAngle(width: number, height: number, x: number, y: number) {
+  const dx = x - width / 2;
+  const dy = y - height / 2;
+  if (dx === 0 && dy === 0) return 0;
+  const radians = Math.atan2(dy, dx);
+  let degrees = radians * (180 / Math.PI) + 90;
+  if (degrees < 0) degrees += 360;
+  return degrees;
+}
+
+const BorderGlow = ({
+  children,
+  className = '',
+  interactive = true,
+  alwaysOn = false,
+  foregroundGlow = false,
+  reverseSweep = false,
+  edgeSensitivity = 30,
+  glowColor = '40 80 80',
+  backgroundColor = '#120F17',
+  borderRadius = 28,
+  glowRadius = 40,
+  glowIntensity = 1.0,
+  coneSpread = 25,
+  animated = false,
+  loopAnimated = false,
+  animationDurationMs = 4000,
+  colors = ['#c084fc', '#f472b6', '#38bdf8'],
+  fillOpacity = 0.5,
+  style,
+}: BorderGlowProps) => {
+  const cardRef = useRef<HTMLDivElement | null>(null);
+  const rectRef = useRef<DOMRect | null>(null);
+  const pointerRef = useRef({ clientX: 0, clientY: 0 });
+  const pointerRafRef = useRef<number | null>(null);
+
+  const updatePointerGlow = useCallback(() => {
+    pointerRafRef.current = null;
+    const card = cardRef.current;
+    const rect = rectRef.current;
+    if (!card || !rect) return;
+
+    const x = pointerRef.current.clientX - rect.left;
+    const y = pointerRef.current.clientY - rect.top;
+    const edge = getEdgeProximity(rect.width, rect.height, x, y);
+    const angle = getCursorAngle(rect.width, rect.height, x, y);
+
+    card.style.setProperty('--edge-proximity', `${(edge * 100).toFixed(3)}`);
+    card.style.setProperty('--cursor-angle', `${angle.toFixed(3)}deg`);
+  }, []);
+
+  const cacheCardRect = useCallback(() => {
+    if (!cardRef.current) return;
+    rectRef.current = cardRef.current.getBoundingClientRect();
+  }, []);
+
+  const handlePointerEnter = useCallback(() => {
+    cacheCardRect();
+  }, [cacheCardRect]);
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent<HTMLDivElement>) => {
+      if (!rectRef.current) {
+        cacheCardRect();
+      }
+
+      pointerRef.current.clientX = e.clientX;
+      pointerRef.current.clientY = e.clientY;
+
+      if (pointerRafRef.current === null) {
+        pointerRafRef.current = requestAnimationFrame(updatePointerGlow);
+      }
+    },
+    [cacheCardRect, updatePointerGlow]
+  );
+
+  const handlePointerLeave = useCallback(() => {
+    rectRef.current = null;
+    if (pointerRafRef.current !== null) {
+      cancelAnimationFrame(pointerRafRef.current);
+      pointerRafRef.current = null;
+    }
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (pointerRafRef.current !== null) {
+        cancelAnimationFrame(pointerRafRef.current);
+      }
+    };
+  }, []);
+
+  const glowVars = useMemo(
+    () => buildGlowVars(glowColor, glowIntensity),
+    [glowColor, glowIntensity]
+  );
+  const gradientVars = useMemo(() => buildGradientVars(colors), [colors]);
+  const useCssSweep = alwaysOn || animated;
+  const sweepIterationCount = loopAnimated || alwaysOn ? 'infinite' : 1;
+
+  return (
+    <div
+      ref={cardRef}
+      onPointerEnter={interactive ? handlePointerEnter : undefined}
+      onPointerMove={interactive ? handlePointerMove : undefined}
+      onPointerLeave={interactive ? handlePointerLeave : undefined}
+      className={`border-glow-card ${interactive ? '' : 'non-interactive'} ${
+        alwaysOn ? 'border-glow-card--always-on' : ''
+      } ${foregroundGlow ? 'border-glow-card--foreground' : ''} ${
+        useCssSweep ? 'sweep-active border-glow-css-sweep' : ''
+      } ${animated && !alwaysOn ? 'border-glow-css-sweep-intro' : ''} ${
+        reverseSweep ? 'border-glow-css-sweep-reverse' : ''
+      } ${
+        className
+      }`.trim()}
+      style={
+        {
+          '--card-bg': backgroundColor,
+          '--edge-sensitivity': edgeSensitivity,
+          '--border-radius': `${borderRadius}px`,
+          '--glow-padding': `${glowRadius}px`,
+          '--cone-spread': coneSpread,
+          '--fill-opacity': fillOpacity,
+          '--sweep-duration': `${animationDurationMs}ms`,
+          '--sweep-iteration-count': sweepIterationCount,
+          ...glowVars,
+          ...gradientVars,
+          ...style,
+        } as CSSProperties
+      }
+    >
+      <span className="edge-light" />
+      <div className="border-glow-inner">{children}</div>
+    </div>
+  );
+};
+
+export default BorderGlow;
diff --git a/src/components/common/DecryptedText.tsx b/src/components/common/DecryptedText.tsx
new file mode 100644
index 00000000..04347e38
--- /dev/null
+++ b/src/components/common/DecryptedText.tsx
@@ -0,0 +1,138 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Box } from '@mui/material';
+
+type DecryptedTextProps = {
+  text: string;
+  animateOn?: 'hover';
+  active?: boolean;
+  speed?: number;
+  maxIterations?: number;
+  sequential?: boolean;
+  revealDirection?: 'start' | 'end';
+  useOriginalCharsOnly?: boolean;
+};
+
+const getScrambledChar = (
+  pool: string[],
+  fallback: string,
+  index: number,
+  step: number
+) => {
+  if (!pool.length) return fallback;
+  return pool[(index + step) % pool.length] ?? fallback;
+};
+
+export const DecryptedText = ({
+  text,
+  animateOn = 'hover',
+  active = false,
+  speed = 35,
+  maxIterations = 12,
+  sequential = true,
+  revealDirection = 'start',
+  useOriginalCharsOnly = true,
+}: DecryptedTextProps) => {
+  const [displayText, setDisplayText] = useState(text);
+  const timeoutRef = useRef<number | null>(null);
+  const stepRef = useRef(0);
+
+  const charPool = useMemo(
+    () => Array.from(new Set(text.split('').filter((char) => char.trim()))),
+    [text]
+  );
+
+  useEffect(() => {
+    setDisplayText(text);
+
+    return () => {
+      if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, [text]);
+
+  useEffect(() => {
+    if (animateOn !== 'hover') return;
+
+    if (active) {
+      runAnimation();
+      return;
+    }
+
+    stopAnimation();
+  }, [active, animateOn]);
+
+  const stopAnimation = () => {
+    if (timeoutRef.current !== null) {
+      window.clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+    stepRef.current = 0;
+    setDisplayText(text);
+  };
+
+  const runAnimation = () => {
+    stopAnimation();
+
+    const tick = () => {
+      const step = stepRef.current;
+      const progress = sequential
+        ? Math.min(
+            text.length,
+            Math.ceil(((step + 1) / maxIterations) * text.length)
+          )
+        : 0;
+
+      const chars = text.split('').map((char, index) => {
+        if (char === ' ') return char;
+
+        const revealed =
+          revealDirection === 'start'
+            ? index < progress
+            : index >= text.length - progress;
+
+        if (revealed || step >= maxIterations - 1) {
+          return char;
+        }
+
+        return useOriginalCharsOnly
+          ? getScrambledChar(charPool, char, index, step)
+          : getScrambledChar(
+              'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'.split(''),
+              char,
+              index,
+              step
+            );
+      });
+
+      setDisplayText(chars.join(''));
+
+      if (step < maxIterations - 1) {
+        stepRef.current += 1;
+        timeoutRef.current = window.setTimeout(tick, speed);
+        return;
+      }
+
+      timeoutRef.current = null;
+      stepRef.current = 0;
+      setDisplayText(text);
+    };
+
+    tick();
+  };
+
+  return (
+    <Box
+      component="span"
+      sx={{
+        display: 'block',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        width: '100%',
+      }}
+    >
+      {displayText}
+    </Box>
+  );
+};
diff --git a/src/components/common/GlassSurface.css b/src/components/common/GlassSurface.css
new file mode 100644
index 00000000..24bcb40e
--- /dev/null
+++ b/src/components/common/GlassSurface.css
@@ -0,0 +1,103 @@
+.glass-surface {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  backface-visibility: hidden;
+  transform: translateZ(0);
+  transition: opacity 0.26s ease-out;
+}
+
+.glass-surface__filter {
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  z-index: -1;
+}
+
+.glass-surface__content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  border-radius: inherit;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+}
+
+.glass-surface--svg {
+  background: light-dark(hsl(0 0% 100% / var(--glass-frost, 0)), hsl(0 0% 0% / var(--glass-frost, 0)));
+  backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1));
+  box-shadow:
+    0 0 2px 1px light-dark(color-mix(in oklch, black, transparent 85%), color-mix(in oklch, white, transparent 65%)) inset,
+    0 0 10px 4px light-dark(color-mix(in oklch, black, transparent 90%), color-mix(in oklch, white, transparent 85%)) inset,
+    0 4px 16px rgba(17, 17, 26, 0.05),
+    0 8px 24px rgba(17, 17, 26, 0.05),
+    0 16px 56px rgba(17, 17, 26, 0.05),
+    0 4px 16px rgba(17, 17, 26, 0.05) inset,
+    0 8px 24px rgba(17, 17, 26, 0.05) inset,
+    0 16px 56px rgba(17, 17, 26, 0.05) inset;
+}
+
+.glass-surface--fallback {
+  background: rgba(255, 255, 255, 0.25);
+  backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
+  -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  box-shadow:
+    0 8px 32px 0 rgba(31, 38, 135, 0.2),
+    0 2px 16px 0 rgba(31, 38, 135, 0.1),
+    inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
+    inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
+}
+
+@media (prefers-color-scheme: dark) {
+  .glass-surface--fallback {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
+    -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    box-shadow:
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
+      inset 0 -1px 0 0 rgba(255, 255, 255, 0.1);
+  }
+}
+
+@supports not (backdrop-filter: blur(10px)) {
+  .glass-surface--fallback {
+    background: rgba(255, 255, 255, 0.4);
+    box-shadow:
+      inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
+      inset 0 -1px 0 0 rgba(255, 255, 255, 0.3);
+  }
+
+  .glass-surface--fallback::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: rgba(255, 255, 255, 0.15);
+    border-radius: inherit;
+    z-index: -1;
+  }
+}
+
+@supports not (backdrop-filter: blur(10px)) {
+  @media (prefers-color-scheme: dark) {
+    .glass-surface--fallback {
+      background: rgba(0, 0, 0, 0.4);
+    }
+
+    .glass-surface--fallback::before {
+      background: rgba(255, 255, 255, 0.05);
+    }
+  }
+}
+
+.glass-surface:focus-visible {
+  outline: 2px solid light-dark(#007aff, #0a84ff);
+  outline-offset: 2px;
+}
diff --git a/src/components/common/GlassSurface.tsx b/src/components/common/GlassSurface.tsx
new file mode 100644
index 00000000..e2d0ad6b
--- /dev/null
+++ b/src/components/common/GlassSurface.tsx
@@ -0,0 +1,235 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { CSSProperties, ReactNode, useEffect, useId, useRef, useState } from 'react';
+import './GlassSurface.css';
+
+type GlassSurfaceProps = {
+  children: ReactNode;
+  width?: number | string;
+  height?: number | string;
+  borderRadius?: number;
+  borderWidth?: number;
+  brightness?: number;
+  opacity?: number;
+  blur?: number;
+  displace?: number;
+  backgroundOpacity?: number;
+  saturation?: number;
+  distortionScale?: number;
+  redOffset?: number;
+  greenOffset?: number;
+  blueOffset?: number;
+  xChannel?: 'R' | 'G' | 'B' | 'A';
+  yChannel?: 'R' | 'G' | 'B' | 'A';
+  mixBlendMode?: CSSProperties['mixBlendMode'];
+  className?: string;
+  style?: CSSProperties;
+};
+
+export default function GlassSurface({
+  children,
+  width = '100%',
+  height = '100%',
+  borderRadius = 20,
+  borderWidth = 0.07,
+  brightness = 50,
+  opacity = 0.93,
+  blur = 11,
+  displace = 0,
+  backgroundOpacity = 0,
+  saturation = 1,
+  distortionScale = -180,
+  redOffset = 0,
+  greenOffset = 10,
+  blueOffset = 20,
+  xChannel = 'R',
+  yChannel = 'G',
+  mixBlendMode = 'difference',
+  className = '',
+  style = {},
+}: GlassSurfaceProps) {
+  const uniqueId = useId().replace(/:/g, '-');
+  const filterId = `glass-filter-${uniqueId}`;
+  const redGradId = `red-grad-${uniqueId}`;
+  const blueGradId = `blue-grad-${uniqueId}`;
+
+  const [svgSupported, setSvgSupported] = useState(false);
+
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const feImageRef = useRef<SVGFEImageElement | null>(null);
+  const redChannelRef = useRef<SVGFEDisplacementMapElement | null>(null);
+  const greenChannelRef = useRef<SVGFEDisplacementMapElement | null>(null);
+  const blueChannelRef = useRef<SVGFEDisplacementMapElement | null>(null);
+  const gaussianBlurRef = useRef<SVGFEGaussianBlurElement | null>(null);
+
+  const generateDisplacementMap = () => {
+    const rect = containerRef.current?.getBoundingClientRect();
+    const actualWidth = rect?.width || 400;
+    const actualHeight = rect?.height || 200;
+    const edgeSize = Math.min(actualWidth, actualHeight) * (borderWidth * 0.5);
+
+    const svgContent = `
+      <svg viewBox="0 0 ${actualWidth} ${actualHeight}" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <linearGradient id="${redGradId}" x1="100%" y1="0%" x2="0%" y2="0%">
+            <stop offset="0%" stop-color="#0000"/>
+            <stop offset="100%" stop-color="red"/>
+          </linearGradient>
+          <linearGradient id="${blueGradId}" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stop-color="#0000"/>
+            <stop offset="100%" stop-color="blue"/>
+          </linearGradient>
+        </defs>
+        <rect x="0" y="0" width="${actualWidth}" height="${actualHeight}" fill="black"></rect>
+        <rect x="0" y="0" width="${actualWidth}" height="${actualHeight}" rx="${borderRadius}" fill="url(#${redGradId})" />
+        <rect x="0" y="0" width="${actualWidth}" height="${actualHeight}" rx="${borderRadius}" fill="url(#${blueGradId})" style="mix-blend-mode: ${mixBlendMode}" />
+        <rect x="${edgeSize}" y="${edgeSize}" width="${Math.max(actualWidth - edgeSize * 2, 0)}" height="${Math.max(actualHeight - edgeSize * 2, 0)}" rx="${Math.max(borderRadius - edgeSize, 0)}" fill="hsl(0 0% ${brightness}% / ${opacity})" style="filter:blur(${blur}px)" />
+      </svg>
+    `;
+
+    return `data:image/svg+xml,${encodeURIComponent(svgContent)}`;
+  };
+
+  const updateDisplacementMap = () => {
+    feImageRef.current?.setAttribute('href', generateDisplacementMap());
+  };
+
+  useEffect(() => {
+    updateDisplacementMap();
+
+    [
+      { ref: redChannelRef, offset: redOffset },
+      { ref: greenChannelRef, offset: greenOffset },
+      { ref: blueChannelRef, offset: blueOffset },
+    ].forEach(({ ref, offset }) => {
+      if (ref.current) {
+        ref.current.setAttribute('scale', (distortionScale + offset).toString());
+        ref.current.setAttribute('xChannelSelector', xChannel);
+        ref.current.setAttribute('yChannelSelector', yChannel);
+      }
+    });
+
+    gaussianBlurRef.current?.setAttribute('stdDeviation', displace.toString());
+  }, [
+    width,
+    height,
+    borderRadius,
+    borderWidth,
+    brightness,
+    opacity,
+    blur,
+    displace,
+    distortionScale,
+    redOffset,
+    greenOffset,
+    blueOffset,
+    xChannel,
+    yChannel,
+    mixBlendMode,
+  ]);
+
+  useEffect(() => {
+    if (!containerRef.current) return undefined;
+
+    const resizeObserver = new ResizeObserver(() => {
+      setTimeout(updateDisplacementMap, 0);
+    });
+
+    resizeObserver.observe(containerRef.current);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  useEffect(() => {
+    setTimeout(updateDisplacementMap, 0);
+  }, [width, height]);
+
+  useEffect(() => {
+    const supportsSVGFilters = () => {
+      if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return false;
+      }
+
+      const isWebkit = /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
+      const isFirefox = /Firefox/.test(navigator.userAgent);
+
+      if (isWebkit || isFirefox) {
+        return false;
+      }
+
+      const div = document.createElement('div');
+      div.style.backdropFilter = `url(#${filterId})`;
+
+      return div.style.backdropFilter !== '';
+    };
+
+    setSvgSupported(supportsSVGFilters());
+  }, [filterId]);
+
+  const containerStyle = {
+    ...style,
+    width: typeof width === 'number' ? `${width}px` : width,
+    height: typeof height === 'number' ? `${height}px` : height,
+    borderRadius: `${borderRadius}px`,
+    '--glass-radius': `${borderRadius}px`,
+    '--glass-frost': backgroundOpacity,
+    '--glass-saturation': saturation,
+    '--filter-id': `url(#${filterId})`,
+  } as CSSProperties;
+
+  return (
+    <div
+      ref={containerRef}
+      className={`glass-surface ${svgSupported ? 'glass-surface--svg' : 'glass-surface--fallback'} ${className}`.trim()}
+      style={containerStyle}
+    >
+      <svg className="glass-surface__filter" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+        <defs>
+          <filter id={filterId} colorInterpolationFilters="sRGB" x="0%" y="0%" width="100%" height="100%">
+            <feImage ref={feImageRef} x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="map" />
+
+            <feDisplacementMap ref={redChannelRef} in="SourceGraphic" in2="map" result="dispRed" />
+            <feColorMatrix
+              in="dispRed"
+              type="matrix"
+              values="1 0 0 0 0
+                      0 0 0 0 0
+                      0 0 0 0 0
+                      0 0 0 1 0"
+              result="red"
+            />
+
+            <feDisplacementMap ref={greenChannelRef} in="SourceGraphic" in2="map" result="dispGreen" />
+            <feColorMatrix
+              in="dispGreen"
+              type="matrix"
+              values="0 0 0 0 0
+                      0 1 0 0 0
+                      0 0 0 0 0
+                      0 0 0 1 0"
+              result="green"
+            />
+
+            <feDisplacementMap ref={blueChannelRef} in="SourceGraphic" in2="map" result="dispBlue" />
+            <feColorMatrix
+              in="dispBlue"
+              type="matrix"
+              values="0 0 0 0 0
+                      0 0 0 0 0
+                      0 0 1 0 0
+                      0 0 0 1 0"
+              result="blue"
+            />
+
+            <feBlend in="red" in2="green" mode="screen" result="rg" />
+            <feBlend in="rg" in2="blue" mode="screen" result="output" />
+            <feGaussianBlur ref={gaussianBlurRef} in="output" stdDeviation="0.7" />
+          </filter>
+        </defs>
+      </svg>
+
+      <div className="glass-surface__content">{children}</div>
+    </div>
+  );
+}
diff --git a/src/components/common/TiltedCard.css b/src/components/common/TiltedCard.css
new file mode 100644
index 00000000..16e72d56
--- /dev/null
+++ b/src/components/common/TiltedCard.css
@@ -0,0 +1,36 @@
+.tilted-card-figure {
+  position: relative;
+  perspective: 800px;
+  transform-style: preserve-3d;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+}
+
+.tilted-card-inner {
+  position: relative;
+  display: inline-block;
+  transform-style: preserve-3d;
+  will-change: transform;
+}
+
+.tilted-card-content {
+  display: inline-flex;
+  transform: translateZ(18px);
+  transform-style: preserve-3d;
+}
+
+.tilted-card-caption {
+  pointer-events: none;
+  position: absolute;
+  left: 0;
+  top: 0;
+  border-radius: 4px;
+  background-color: #fff;
+  padding: 4px 10px;
+  font-size: 10px;
+  color: #2d2d2d;
+  opacity: 0;
+  z-index: 3;
+}
diff --git a/src/components/common/TiltedCard.tsx b/src/components/common/TiltedCard.tsx
new file mode 100644
index 00000000..138c727b
--- /dev/null
+++ b/src/components/common/TiltedCard.tsx
@@ -0,0 +1,131 @@
+import { ReactNode, useRef, useState } from 'react';
+import { motion, useMotionValue, useSpring } from 'framer-motion';
+import './TiltedCard.css';
+
+const springValues = {
+  damping: 30,
+  stiffness: 100,
+  mass: 2,
+};
+
+type TiltedCardProps = {
+  children: ReactNode;
+  className?: string;
+  captionText?: string;
+  containerHeight?: string;
+  containerWidth?: string;
+  innerHeight?: string;
+  innerWidth?: string;
+  scaleOnHover?: number;
+  rotateAmplitude?: number;
+  showTooltip?: boolean;
+  disabled?: boolean;
+};
+
+export default function TiltedCard({
+  children,
+  className = '',
+  captionText = '',
+  containerHeight,
+  containerWidth,
+  innerHeight,
+  innerWidth,
+  scaleOnHover = 1.06,
+  rotateAmplitude = 10,
+  showTooltip = false,
+  disabled = false,
+}: TiltedCardProps) {
+  const ref = useRef<HTMLElement | null>(null);
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  const rotateX = useSpring(0, springValues);
+  const rotateY = useSpring(0, springValues);
+  const scale = useSpring(1, springValues);
+  const opacity = useSpring(0, springValues);
+  const rotateFigcaption = useSpring(0, {
+    stiffness: 350,
+    damping: 30,
+    mass: 1,
+  });
+  const [lastY, setLastY] = useState(0);
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLElement>) => {
+    if (disabled || !ref.current) return;
+
+    const rect = ref.current.getBoundingClientRect();
+    const offsetX = e.clientX - rect.left - rect.width / 2;
+    const offsetY = e.clientY - rect.top - rect.height / 2;
+    const rotationX = (offsetY / (rect.height / 2)) * -rotateAmplitude;
+    const rotationY = (offsetX / (rect.width / 2)) * rotateAmplitude;
+
+    rotateX.set(rotationX);
+    rotateY.set(rotationY);
+    x.set(e.clientX - rect.left);
+    y.set(e.clientY - rect.top);
+
+    const velocityY = offsetY - lastY;
+    rotateFigcaption.set(-velocityY * 0.6);
+    setLastY(offsetY);
+  };
+
+  const handleMouseEnter = () => {
+    if (disabled) return;
+    scale.set(scaleOnHover);
+    opacity.set(1);
+  };
+
+  const handleMouseLeave = () => {
+    opacity.set(0);
+    scale.set(1);
+    rotateX.set(0);
+    rotateY.set(0);
+    rotateFigcaption.set(0);
+    setLastY(0);
+  };
+
+  return (
+    <figure
+      ref={ref}
+      className={`tilted-card-figure ${className}`.trim()}
+      style={{
+        ...(containerHeight ? { height: containerHeight } : null),
+        ...(containerWidth ? { width: containerWidth } : null),
+      }}
+      onMouseMove={handleMouseMove}
+      onPointerMove={handleMouseMove as unknown as React.PointerEventHandler<HTMLElement>}
+      onMouseEnter={handleMouseEnter}
+      onPointerEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onPointerLeave={handleMouseLeave}
+    >
+      <motion.div
+        className="tilted-card-inner"
+        style={{
+          ...(innerWidth ? { width: innerWidth } : null),
+          ...(innerHeight ? { height: innerHeight } : null),
+          rotateX,
+          rotateY,
+          scale,
+          transformPerspective: 900,
+          transformStyle: 'preserve-3d',
+        }}
+      >
+        <div className="tilted-card-content">{children}</div>
+      </motion.div>
+
+      {showTooltip ? (
+        <motion.figcaption
+          className="tilted-card-caption"
+          style={{
+            x,
+            y,
+            opacity,
+            rotate: rotateFigcaption,
+          }}
+        >
+          {captionText}
+        </motion.figcaption>
+      ) : null}
+    </figure>
+  );
+}
diff --git a/src/components/ui/confetti.tsx b/src/components/ui/confetti.tsx
new file mode 100644
index 00000000..0554e193
--- /dev/null
+++ b/src/components/ui/confetti.tsx
@@ -0,0 +1,140 @@
+"use client";
+
+import type { ReactNode } from 'react';
+import React, {
+  createContext,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+import type {
+  CreateTypes as ConfettiInstance,
+  GlobalOptions as ConfettiGlobalOptions,
+  Options as ConfettiOptions,
+} from 'canvas-confetti';
+import confetti from 'canvas-confetti';
+import { Button } from '@mui/material';
+
+type Api = {
+  fire: (options?: ConfettiOptions) => void;
+};
+
+type Props = React.ComponentPropsWithRef<'canvas'> & {
+  children?: ReactNode;
+  globalOptions?: ConfettiGlobalOptions;
+  manualstart?: boolean;
+  options?: ConfettiOptions;
+};
+
+export type ConfettiRef = Api | null;
+
+export const ConfettiContext = createContext<Api>({} as Api);
+const DEFAULT_CONFETTI_GLOBAL_OPTIONS: ConfettiGlobalOptions = {
+  resize: true,
+  useWorker: true,
+};
+
+const ConfettiComponent = forwardRef<ConfettiRef, Props>((props, ref) => {
+  const {
+    options,
+    globalOptions = DEFAULT_CONFETTI_GLOBAL_OPTIONS,
+    manualstart = false,
+    children,
+    ...rest
+  } = props;
+  const instanceRef = useRef<ConfettiInstance | null>(null);
+
+  const canvasRef = useCallback(
+    (node: HTMLCanvasElement | null) => {
+      if (node !== null) {
+        if (instanceRef.current) return;
+        instanceRef.current = confetti.create(node, {
+          ...globalOptions,
+          resize: true,
+        });
+      } else if (instanceRef.current) {
+        instanceRef.current.reset();
+        instanceRef.current = null;
+      }
+    },
+    [globalOptions]
+  );
+
+  const fire = useCallback(
+    async (opts: ConfettiOptions = {}) => {
+      try {
+        await instanceRef.current?.({ ...options, ...opts });
+      } catch (error) {
+        console.error('Confetti error:', error);
+      }
+    },
+    [options]
+  );
+
+  const api = useMemo(
+    () => ({
+      fire,
+    }),
+    [fire]
+  );
+
+  useImperativeHandle(ref, () => api, [api]);
+
+  useEffect(() => {
+    if (!manualstart) {
+      void fire();
+    }
+  }, [manualstart, fire]);
+
+  return (
+    <ConfettiContext.Provider value={api}>
+      <canvas ref={canvasRef} {...rest} />
+      {children}
+    </ConfettiContext.Provider>
+  );
+});
+
+ConfettiComponent.displayName = 'Confetti';
+
+export const Confetti = ConfettiComponent;
+
+interface ConfettiButtonProps extends React.ComponentProps<'button'> {
+  options?: ConfettiOptions &
+    ConfettiGlobalOptions & { canvas?: HTMLCanvasElement };
+}
+
+const ConfettiButtonComponent = ({
+  options,
+  children,
+  ...props
+}: ConfettiButtonProps) => {
+  const handleClick = async (event: React.MouseEvent<HTMLButtonElement>) => {
+    try {
+      const rect = event.currentTarget.getBoundingClientRect();
+      const x = rect.left + rect.width / 2;
+      const y = rect.top + rect.height / 2;
+      await confetti({
+        ...options,
+        origin: {
+          x: x / window.innerWidth,
+          y: y / window.innerHeight,
+        },
+      });
+    } catch (error) {
+      console.error('Confetti button error:', error);
+    }
+  };
+
+  return (
+    <Button onClick={handleClick} {...props}>
+      {children}
+    </Button>
+  );
+};
+
+ConfettiButtonComponent.displayName = 'ConfettiButton';
+
+export const ConfettiButton = ConfettiButtonComponent;
diff --git a/src/components/ui/dot-pattern.tsx b/src/components/ui/dot-pattern.tsx
new file mode 100644
index 00000000..26b0d40e
--- /dev/null
+++ b/src/components/ui/dot-pattern.tsx
@@ -0,0 +1,46 @@
+import { Box } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import type { ComponentProps } from 'react';
+
+type DotPatternProps = ComponentProps<typeof Box> & {
+  color?: string;
+  cr?: number;
+  cx?: number;
+  cy?: number;
+  height?: number;
+  width?: number;
+};
+
+export const DotPattern = ({
+  color = '#8DB8FF',
+  cr = 1,
+  cx = 1,
+  cy = 1,
+  height = 20,
+  sx,
+  width = 20,
+  ...rest
+}: DotPatternProps) => {
+  const innerDot = `${alpha(color, 0.72)} 0 ${cr}px, transparent ${cr + 0.45}px`;
+  const outerGlow = `${alpha(color, 0.24)} 0 ${cr + 0.95}px, transparent ${
+    cr + 1.95
+  }px`;
+
+  return (
+    <Box
+      aria-hidden="true"
+      sx={{
+        backgroundImage: `radial-gradient(circle at ${cx}px ${cy}px, ${innerDot}), radial-gradient(circle at ${cx}px ${cy}px, ${outerGlow})`,
+        backgroundPosition: '0 0',
+        backgroundRepeat: 'repeat',
+        backgroundSize: `${width}px ${height}px`,
+        height: '100%',
+        inset: 0,
+        position: 'absolute',
+        width: '100%',
+        ...sx,
+      }}
+      {...rest}
+    />
+  );
+};
diff --git a/src/components/ui/progressive-blur.tsx b/src/components/ui/progressive-blur.tsx
new file mode 100644
index 00000000..b7264398
--- /dev/null
+++ b/src/components/ui/progressive-blur.tsx
@@ -0,0 +1,99 @@
+import { Box } from '@mui/material';
+import { alpha } from '@mui/material/styles';
+import type { ComponentProps } from 'react';
+
+type ProgressiveBlurProps = Omit<ComponentProps<typeof Box>, 'position'> & {
+  blurStrength?: number;
+  height?: number | string;
+  position?: 'bottom' | 'top';
+  tintColor?: string;
+};
+
+export const ProgressiveBlur = ({
+  blurStrength = 16,
+  height = '50%',
+  position = 'bottom',
+  sx,
+  tintColor = '#ffffff',
+  ...rest
+}: ProgressiveBlurProps) => {
+  const isBottom = position === 'bottom';
+  const blurMask = isBottom
+    ? 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.12) 18%, rgba(0,0,0,0.34) 42%, rgba(0,0,0,0.72) 72%, rgba(0,0,0,1) 100%)'
+    : 'linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.12) 18%, rgba(0,0,0,0.34) 42%, rgba(0,0,0,0.72) 72%, rgba(0,0,0,1) 100%)';
+  const tintGradient = isBottom
+    ? `linear-gradient(180deg, ${alpha(tintColor, 0)} 0%, ${alpha(
+        tintColor,
+        0.08
+      )} 24%, ${alpha(tintColor, 0.22)} 52%, ${alpha(
+        tintColor,
+        0.5
+      )} 78%, ${alpha(tintColor, 0.82)} 100%)`
+    : `linear-gradient(0deg, ${alpha(tintColor, 0)} 0%, ${alpha(
+        tintColor,
+        0.08
+      )} 24%, ${alpha(tintColor, 0.22)} 52%, ${alpha(
+        tintColor,
+        0.5
+      )} 78%, ${alpha(tintColor, 0.82)} 100%)`;
+  const sheenGradient = isBottom
+    ? `linear-gradient(180deg, ${alpha(tintColor, 0)} 0%, ${alpha(
+        tintColor,
+        0.03
+      )} 38%, ${alpha(tintColor, 0.1)} 68%, ${alpha(
+        tintColor,
+        0.18
+      )} 100%)`
+    : `linear-gradient(0deg, ${alpha(tintColor, 0)} 0%, ${alpha(
+        tintColor,
+        0.03
+      )} 38%, ${alpha(tintColor, 0.1)} 68%, ${alpha(
+        tintColor,
+        0.18
+      )} 100%)`;
+
+  return (
+    <Box
+      aria-hidden="true"
+      sx={{
+        height,
+        insetInline: 0,
+        overflow: 'hidden',
+        pointerEvents: 'none',
+        position: 'absolute',
+        [position]: 0,
+        ...sx,
+      }}
+      {...rest}
+    >
+      <Box
+        sx={{
+          backdropFilter: `blur(${blurStrength}px) saturate(118%)`,
+          inset: 0,
+          maskImage: blurMask,
+          maskRepeat: 'no-repeat',
+          maskSize: '100% 100%',
+          position: 'absolute',
+          WebkitBackdropFilter: `blur(${blurStrength}px) saturate(118%)`,
+          WebkitMaskImage: blurMask,
+          WebkitMaskRepeat: 'no-repeat',
+          WebkitMaskSize: '100% 100%',
+        }}
+      />
+      <Box
+        sx={{
+          background: tintGradient,
+          inset: 0,
+          position: 'absolute',
+        }}
+      />
+      <Box
+        sx={{
+          background: sheenGradient,
+          inset: 0,
+          position: 'absolute',
+        }}
+      />
+    </Box>
+  );
+};
diff --git a/src/data/featuredGroups.ts b/src/data/featuredGroups.ts
deleted file mode 100644
index ebe3c1bf..00000000
--- a/src/data/featuredGroups.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export interface FeaturedGroup {
-  id: number;
-  name: string;
-  description: string;
-}
-
-// Curated list of groups shown on the Home page (User tab).
-// Group IDs and names must match real Qortal groups.
-// Update IDs once confirmed; names are used to build logo URLs.
-export const featuredGroups: FeaturedGroup[] = [
-  {
-    id: 694,
-    name: 'Qortal',
-    description: 'Official Qortal community group',
-  },
-  {
-    id: 700,
-    name: 'Qortal-General-Chat',
-    description: 'General chat for the Qortal community',
-  },
-  {
-    id: 706,
-    name: 'Q-Apps',
-    description: 'Discussion and support for Qortal Q-Apps',
-  },
-];
diff --git a/src/encryption/encryption.ts b/src/encryption/encryption.ts
index 6fc5f8e7..a71dcee2 100644
--- a/src/encryption/encryption.ts
+++ b/src/encryption/encryption.ts
@@ -44,6 +44,28 @@ export async function getAllUserNames() {
   return nameData.map((item) => item.name);
 }
 
+async function getQortBalanceInfo() {
+  const wallet = await getSaveWallet();
+  const address = wallet.address0;
+  const validApi = await getBaseApi();
+  const response = await fetch(validApi + '/addresses/balance/' + address);
+
+  if (!response?.ok) throw new Error('0 QORT in your balance');
+  return await response.json();
+}
+
+async function getArbitraryPublishFee() {
+  const validApi = await getBaseApi();
+  const timestamp = Date.now();
+  const response = await fetch(
+    `${validApi}/transactions/unitfee?txType=ARBITRARY&timestamp=${timestamp}`
+  );
+
+  if (!response?.ok) throw new Error('Unable to get fee');
+  const fee = await response.json();
+  return Number(fee) / 1e8;
+}
+
 async function getKeyPair() {
   const res = await getData<any>('keyPair').catch(() => null);
   if (res) {
@@ -294,6 +316,19 @@ export const publishOnQDN = async ({
   title,
   uploadType = 'base64',
 }) => {
+  const [balance, fee] = await Promise.all([
+    getQortBalanceInfo(),
+    getArbitraryPublishFee(),
+  ]);
+
+  if (+balance < fee) {
+    throw new Error(
+      i18n.t('question:message.error.insufficient_balance_qort', {
+        postProcess: 'capitalizeFirstChar',
+      })
+    );
+  }
+
   if (data && service) {
     const registeredName = name || (await getNameInfo());
     if (!registeredName)
diff --git a/src/hooks/useAppMessageHandler.ts b/src/hooks/useAppMessageHandler.ts
index 0fae16a9..43847563 100644
--- a/src/hooks/useAppMessageHandler.ts
+++ b/src/hooks/useAppMessageHandler.ts
@@ -1,6 +1,7 @@
 import { useEffect, MutableRefObject } from 'react';
 import { executeEvent } from '../utils/events';
 import { handleGetFileFromIndexedDB } from '../utils/indexedDB';
+import { extractComponents } from '../components/Chat/MessageDisplay';
 
 type PermissionHandler = (message: any, event: MessageEvent) => void | Promise<void>;
 
@@ -41,6 +42,23 @@ export function useAppMessageHandler(
         executeEvent('openThreadNewPost', {
           data: message.payload?.data,
         });
+      } else if (message.action === 'NOTIFICATION_OPEN_APP') {
+        const payload = message.payload;
+        if (payload?.openWallets) {
+          executeEvent('openWalletsApp', {});
+        } else if (payload?.link) {
+          const data = extractComponents(payload.link);
+          if (data) {
+            executeEvent('addTab', { data });
+            executeEvent('open-apps-mode', {});
+          }
+        }
+      } else if (message.action === 'NOTIFICATION_PERMISSION_REQUEST') {
+        executeEvent('show-notification-permission', {
+          requestId: message.requestId,
+          appInfo: message.appInfo,
+          payload: message.payload,
+        });
       } else if (
         message.action === 'QORTAL_REQUEST_PERMISSION' &&
         message?.isFromExtension
diff --git a/src/hooks/useAppReset.ts b/src/hooks/useAppReset.ts
index 3376d134..0c2b55b4 100644
--- a/src/hooks/useAppReset.ts
+++ b/src/hooks/useAppReset.ts
@@ -19,24 +19,32 @@ import {
   isRunningPublicNodeAtom,
   joinRequestsCacheAtom,
   lastPaymentSeenTimestampAtom,
-  mailsAtom,
+  managedSubscriptionsAtom,
+  managedSubscriptionsLoadingAtom,
   memberGroupsAtom,
   mutedGroupsAtom,
   myGroupsWhereIAmAdminAtom,
+  myMemberGroupsAtom,
+  myMemberGroupsLastFetchedAtom,
+  mySubscriptionsAtom,
   navigationControllerAtom,
+  notificationsByAddressAtom,
   oldPinnedAppsAtom,
   promotionTimeIntervalAtom,
   promotionsAtom,
   qMailLastEnteredTimestampAtom,
+  quitterDashboardFeedCacheAtom,
   resourceDownloadControllerAtom,
   selectedGroupIdAtom,
   settingsLocalLastUpdatedAtom,
   settingsQDNLastUpdatedAtom,
   sortablePinnedAppsAtom,
+  subscriptionsLoadingAtom,
   timestampEnterDataAtom,
   txListAtom,
   isUsingImportExportSettingsAtom,
 } from '../atoms/global';
+import { clearMemberGroupsPolling } from '../subscriptions/useInitializeMySubscriptions';
 import {
   appCategoryFilterAtom,
   appSearchQueryAtom,
@@ -73,7 +81,6 @@ export function useAppReset() {
   const resetAtomQMailLastEnteredTimestampAtom = useResetAtom(
     qMailLastEnteredTimestampAtom
   );
-  const resetAtomMailsAtom = useResetAtom(mailsAtom);
   const resetGroupPropertiesAtom = useResetAtom(groupsPropertiesAtom);
   const resetLastPaymentSeenTimestampAtom = useResetAtom(
     lastPaymentSeenTimestampAtom
@@ -88,6 +95,16 @@ export function useAppReset() {
   const resetMyGroupsWhereIAmAdminAtom = useResetAtom(
     myGroupsWhereIAmAdminAtom
   );
+  const resetMyMemberGroupsAtom = useResetAtom(myMemberGroupsAtom);
+  const resetMyMemberGroupsLastFetchedAtom = useResetAtom(
+    myMemberGroupsLastFetchedAtom
+  );
+  const resetMySubscriptionsAtom = useResetAtom(mySubscriptionsAtom);
+  const resetManagedSubscriptionsAtom = useResetAtom(managedSubscriptionsAtom);
+  const resetSubscriptionsLoadingAtom = useResetAtom(subscriptionsLoadingAtom);
+  const resetManagedSubscriptionsLoadingAtom = useResetAtom(
+    managedSubscriptionsLoadingAtom
+  );
   const resetResourceDownloadControllerAtom = useResetAtom(
     resourceDownloadControllerAtom
   );
@@ -96,6 +113,7 @@ export function useAppReset() {
   const resetAddressInfoControllerAtom = useResetAtom(addressInfoControllerAtom);
   const resetBlobControllerAtom = useResetAtom(blobControllerAtom);
   const resetNavigationControllerAtom = useResetAtom(navigationControllerAtom);
+  const resetNotificationsByAddressAtom = useResetAtom(notificationsByAddressAtom);
   const resetEnabledDevModeAtom = useResetAtom(enabledDevModeAtom);
   const resetFullScreenAtom = useResetAtom(fullScreenAtom);
   const resetHasSettingsChangedAtom = useResetAtom(hasSettingsChangedAtom);
@@ -107,6 +125,9 @@ export function useAppReset() {
   const resetPromotionTimeIntervalAtom = useResetAtom(
     promotionTimeIntervalAtom
   );
+  const resetQuitterDashboardFeedCacheAtom = useResetAtom(
+    quitterDashboardFeedCacheAtom
+  );
 
   const resetAppSortAtom = useResetAtom(appSortAtom);
   const resetAppCategoryFilterAtom = useResetAtom(appCategoryFilterAtom);
@@ -132,7 +153,6 @@ export function useAppReset() {
     resetAtomOldPinnedAppsAtom();
     resetAtomIsUsingImportExportSettingsAtom();
     resetAtomQMailLastEnteredTimestampAtom();
-    resetAtomMailsAtom();
     resetGroupPropertiesAtom();
     resetLastPaymentSeenTimestampAtom();
     resetGroupsOwnerNamesAtom();
@@ -143,11 +163,19 @@ export function useAppReset() {
     resettxListAtomAtom();
     resetmemberGroupsAtomAtom();
     resetMyGroupsWhereIAmAdminAtom();
+    resetMyMemberGroupsAtom();
+    resetMyMemberGroupsLastFetchedAtom();
+    resetMySubscriptionsAtom();
+    resetManagedSubscriptionsAtom();
+    resetSubscriptionsLoadingAtom();
+    resetManagedSubscriptionsLoadingAtom();
+    clearMemberGroupsPolling();
     resetResourceDownloadControllerAtom();
     resetGlobalDownloadsAtom();
     resetAddressInfoControllerAtom();
     resetBlobControllerAtom();
     resetNavigationControllerAtom();
+    resetNotificationsByAddressAtom();
     resetEnabledDevModeAtom();
     resetFullScreenAtom();
     resetHasSettingsChangedAtom();
@@ -157,6 +185,7 @@ export function useAppReset() {
     resetSelectedGroupIdAtom();
     resetPromotionsAtom();
     resetPromotionTimeIntervalAtom();
+    resetQuitterDashboardFeedCacheAtom();
     resetAppSortAtom();
     resetAppCategoryFilterAtom();
     resetAppStatusFilterAtom();
@@ -174,7 +203,6 @@ export function useAppReset() {
     resetAtomOldPinnedAppsAtom,
     resetAtomIsUsingImportExportSettingsAtom,
     resetAtomQMailLastEnteredTimestampAtom,
-    resetAtomMailsAtom,
     resetGroupPropertiesAtom,
     resetLastPaymentSeenTimestampAtom,
     resetGroupsOwnerNamesAtom,
@@ -185,11 +213,18 @@ export function useAppReset() {
     resettxListAtomAtom,
     resetmemberGroupsAtomAtom,
     resetMyGroupsWhereIAmAdminAtom,
+    resetMyMemberGroupsAtom,
+    resetMyMemberGroupsLastFetchedAtom,
+    resetMySubscriptionsAtom,
+    resetManagedSubscriptionsAtom,
+    resetSubscriptionsLoadingAtom,
+    resetManagedSubscriptionsLoadingAtom,
     resetResourceDownloadControllerAtom,
     resetGlobalDownloadsAtom,
     resetAddressInfoControllerAtom,
     resetBlobControllerAtom,
     resetNavigationControllerAtom,
+    resetNotificationsByAddressAtom,
     resetEnabledDevModeAtom,
     resetFullScreenAtom,
     resetHasSettingsChangedAtom,
@@ -199,6 +234,7 @@ export function useAppReset() {
     resetSelectedGroupIdAtom,
     resetPromotionsAtom,
     resetPromotionTimeIntervalAtom,
+    resetQuitterDashboardFeedCacheAtom,
     resetAppSortAtom,
     resetAppCategoryFilterAtom,
     resetAppStatusFilterAtom,
diff --git a/src/hooks/useAuth.tsx b/src/hooks/useAuth.tsx
index 4bb3e3f5..0a063407 100644
--- a/src/hooks/useAuth.tsx
+++ b/src/hooks/useAuth.tsx
@@ -1,11 +1,14 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import {
   getDefaultLocalNodeUrl,
+  EXT_NODE_QORTAL_LINK,
+  HTTP_LOCALHOST_12391,
+  HTTPS_EXT_NODE_QORTAL_LINK,
   isLocalNodeUrl,
   TIME_MINUTES_2_IN_MILLISECONDS,
   TIME_SECONDS_40_IN_MILLISECONDS,
 } from '../constants/constants';
-import { isLocalPrivateHttpsUrl } from '../utils/helpers';
+import { isLocalPrivateHttpsUrl, ensureElectronCertIfLocalPrivateHttps } from '../utils/helpers';
 import { useAtom, useAtomValue, useSetAtom, useStore } from 'jotai';
 import {
   authenticatePasswordAtom,
@@ -14,12 +17,13 @@ import {
   extStateAtom,
   isLoadingAuthenticateAtom,
   isOpenCoreSetup,
-  isOpenDialogCoreRecommendationAtom,
   isOpenDialogCustomApikey,
   isOpenDialogResetApikey,
   isOpenSettingUpLocalCoreAtom,
   isOpenSyncingDialogAtom,
   isOpenUrlInvalidAtom,
+  isPublicNodeUnavailableAtom,
+  isRunningPublicNodeAtom,
   qortBalanceLoadingAtom,
   rawWalletAtom,
   selectedNodeInfoAtom,
@@ -33,26 +37,39 @@ import {
 } from '../background/background-cases';
 import { ApiKey } from '../types/auth';
 import { useModalGlobal } from './useModalGlobal';
+import { getWalletErrorMessage } from '../utils/walletErrorMessages';
 
 let balanceSetIntervalRef: null | NodeJS.Timeout = null;
+const LOCAL_CORE_READY_SYNC_PERCENT = 99.95;
+const ADMIN_STATUS_FETCH_TIMEOUT_MS = 5000;
+
+function isLocalCoreStatusSynced(status: any) {
+  const syncPercent = Number(status?.syncPercent);
+  return (
+    Number.isFinite(syncPercent) && syncPercent >= LOCAL_CORE_READY_SYNC_PERCENT
+  );
+}
+
+function isGatewayNode(nodeInfo?: ApiKey | null) {
+  return !nodeInfo?.url || nodeInfo.url.includes(EXT_NODE_QORTAL_LINK);
+}
 
 export const useAuth = () => {
   const setIsOpenResetApikey = useSetAtom(isOpenDialogResetApikey);
   const setIsOpenCustomApikeyDialog = useSetAtom(isOpenDialogCustomApikey);
   const setBalance = useSetAtom(balanceAtom);
   const setQortBalanceLoading = useSetAtom(qortBalanceLoadingAtom);
-  const setIsOpenRecommendation = useSetAtom(
-    isOpenDialogCoreRecommendationAtom
-  );
   const setIsOpenSettingUpCore = useSetAtom(isOpenSettingUpLocalCoreAtom);
   const actions = useModalGlobal({ setGlobalOpen: setIsOpenSettingUpCore });
-  const setIsOpenSyncingDialog = useSetAtom(isOpenSyncingDialogAtom);
 
   const setIsOpenCoreSetup = useSetAtom(isOpenCoreSetup);
+  const setIsOpenSyncingDialog = useSetAtom(isOpenSyncingDialogAtom);
   const [selectedNode, setSelectedNode] = useAtom(selectedNodeInfoAtom);
   const setUserInfo = useSetAtom(userInfoAtom);
   const setWalletToBeDecryptedError = useSetAtom(walletToBeDecryptedErrorAtom);
   const setIsUrlInvalid = useSetAtom(isOpenUrlInvalidAtom);
+  const setPublicNodeUnavailable = useSetAtom(isPublicNodeUnavailableAtom);
+  const setIsRunningPublicNode = useSetAtom(isRunningPublicNodeAtom);
 
   const setIsLoading = useSetAtom(isLoadingAuthenticateAtom);
   const setExtstate = useSetAtom(extStateAtom);
@@ -121,8 +138,7 @@ export const useAuth = () => {
             ? await window.coreSetup.isCoreRunning()
             : await checkIfLocalIsRunning(baseUrl);
           if (!runningRes && !disablePopup) {
-            setIsOpenCoreSetup(false);
-            setIsOpenRecommendation(true);
+            setIsOpenCoreSetup(true);
             return { isValid: false, validatedNodeInfo };
           }
           if (isLocal && isElectron && !disablePopup) {
@@ -145,7 +161,18 @@ export const useAuth = () => {
         if (!isLocal) {
           let isUrlGood = true;
           try {
-            const resUrlCheck = await fetch(`${baseUrl}/admin/status`);
+            const controller = new AbortController();
+            const timeoutId = window.setTimeout(() => {
+              controller.abort();
+            }, ADMIN_STATUS_FETCH_TIMEOUT_MS);
+            let resUrlCheck: Response;
+            try {
+              resUrlCheck = await fetch(`${baseUrl}/admin/status`, {
+                signal: controller.signal,
+              });
+            } finally {
+              window.clearTimeout(timeoutId);
+            }
             if (!resUrlCheck.ok) {
               isUrlGood = false;
             }
@@ -155,10 +182,19 @@ export const useAuth = () => {
 
           if (!isUrlGood) {
             if (!disablePopup) {
-              setIsUrlInvalid(true);
+              if (validatedNodeInfo?.url === HTTPS_EXT_NODE_QORTAL_LINK) {
+                setPublicNodeUnavailable(true);
+                setIsOpenCoreSetup(true);
+              } else {
+                setIsUrlInvalid(true);
+              }
             }
             return { isValid: false, validatedNodeInfo };
           }
+
+          if (validatedNodeInfo?.url === HTTPS_EXT_NODE_QORTAL_LINK) {
+            setPublicNodeUnavailable(false);
+          }
         }
 
         let isValid = false;
@@ -198,17 +234,13 @@ export const useAuth = () => {
           setLocalApiKeyNotElectronCase(validatedNodeInfo.apikey);
         }
 
-        if (isValid && isElectron && isLocalPrivateHttps) {
-          try {
-            const result = await window.electronAPI?.ensureCertForBase?.(
-              validatedNodeInfo?.url,
-              validatedNodeInfo?.apikey ?? ''
-            );
-            if (!result?.success) {
-              throw new Error('Failed to ensure cert for base');
-            }
-          } catch (err) {
-            throw new Error('Failed to ensure cert for base');
+        if (isValid && isElectron) {
+          const cert = await ensureElectronCertIfLocalPrivateHttps(
+            validatedNodeInfo?.url,
+            validatedNodeInfo?.apikey ?? ''
+          );
+          if (!cert.success) {
+            throw new Error(cert.error || 'Failed to ensure cert for base');
           }
         }
 
@@ -219,12 +251,12 @@ export const useAuth = () => {
     },
     [
       setIsOpenCustomApikeyDialog,
-      setIsOpenRecommendation,
       setIsOpenResetApikey,
       checkIfLocalIsRunning,
       generateApiKey,
       setIsOpenCoreSetup,
       setIsUrlInvalid,
+      setPublicNodeUnavailable,
     ]
   );
 
@@ -248,18 +280,30 @@ export const useAuth = () => {
 
   const handleSaveNodeInfo = useCallback(
     async (nodeInfo) => {
-      await window.sendMessage('setApiKey', nodeInfo);
-      if (nodeInfo) {
-        setSelectedNode(nodeInfo);
+      const nextNodeInfo =
+        nodeInfo || {
+          url: HTTPS_EXT_NODE_QORTAL_LINK,
+          apikey: '',
+        };
+
+      await window.sendMessage('setApiKey', nextNodeInfo);
+      setSelectedNode(nextNodeInfo);
+      handleSetGlobalApikey(nextNodeInfo);
+      try {
+        setIsRunningPublicNode(isGatewayNode(nextNodeInfo));
+      } catch (error) {
+        console.error(error);
       }
-      handleSetGlobalApikey(nodeInfo);
     },
-    [setSelectedNode]
+    [setIsRunningPublicNode, setSelectedNode]
   );
 
   const isNodeValid = useCallback(async (): Promise<boolean> => {
     try {
-      if (useLocalNode) {
+      const currentSelectedNode = store.get(selectedNodeInfoAtom);
+      const isCurrentLocalNode = isLocalNodeUrl(currentSelectedNode?.url);
+
+      if (isCurrentLocalNode) {
         const payload = {
           apikey: '',
           url: getDefaultLocalNodeUrl(),
@@ -273,7 +317,7 @@ export const useAuth = () => {
           return false;
         }
       } else {
-        const payload = selectedNode;
+        const payload = currentSelectedNode;
         if (!payload) return false;
         const { isValid, validatedNodeInfo } = await validateApiKey(payload);
 
@@ -287,7 +331,7 @@ export const useAuth = () => {
     } catch (error) {
       return false;
     }
-  }, [useLocalNode, validateApiKey, selectedNode, handleSaveNodeInfo]);
+  }, [store, validateApiKey, handleSaveNodeInfo]);
 
   const balanceSetInterval = useCallback(() => {
     try {
@@ -347,11 +391,15 @@ export const useAuth = () => {
 
   const isSyncedLocal = useCallback(async () => {
     try {
-      if (!useLocalNode) return true;
-      const res = await fetch(getDefaultLocalNodeUrl() + '/admin/status');
+      const currentSelectedNode = store.get(selectedNodeInfoAtom);
+      if (!isLocalNodeUrl(currentSelectedNode?.url)) return true;
+      const res = await fetch(HTTP_LOCALHOST_12391 + '/admin/status');
       if (!res?.ok) return false;
       const data = await res.json();
-      if (data?.syncPercent !== 100) {
+      if (!isLocalCoreStatusSynced(data)) {
+        if (enableAuthWhenSyncing) {
+          return true;
+        }
         setIsOpenSyncingDialog(true);
         return false;
       }
@@ -359,7 +407,7 @@ export const useAuth = () => {
     } catch (error) {
       return false;
     }
-  }, [useLocalNode, setIsOpenSyncingDialog, enableAuthWhenSyncing]);
+  }, [store, setIsOpenSyncingDialog, enableAuthWhenSyncing]);
 
   const authenticate = useCallback(
     async (skipToPublic?: boolean, skipLocalCheck?: boolean) => {
@@ -420,11 +468,12 @@ export const useAuth = () => {
               });
           } else if (response?.error) {
             setIsLoading(false);
-            setWalletToBeDecryptedError(response.error);
+            setWalletToBeDecryptedError(getWalletErrorMessage(response.error));
           }
         })
         .catch((error) => {
           setIsLoading(false);
+          setWalletToBeDecryptedError(getWalletErrorMessage(error));
           console.error('Failed to decrypt wallet:', error);
         });
     },
diff --git a/src/hooks/useBlockUsers.tsx b/src/hooks/useBlockUsers.tsx
index f39f451b..7226aaac 100644
--- a/src/hooks/useBlockUsers.tsx
+++ b/src/hooks/useBlockUsers.tsx
@@ -1,10 +1,113 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import { useAtom, useSetAtom } from 'jotai';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import {
   blockedAddressesAtom,
   blockedNamesAtom,
+  rawWalletAtom,
 } from '../atoms/global';
 
+type CoreBlockedLists = {
+  addresses: string[];
+  names: string[];
+};
+
+const normalizeListItems = (items: unknown): string[] => {
+  if (!Array.isArray(items)) return [];
+
+  return items
+    .filter((item): item is string => typeof item === 'string')
+    .map((item) => item.trim())
+    .filter(Boolean);
+};
+
+const toBlockedRecord = (items: string[]): Record<string, boolean> =>
+  items.reduce<Record<string, boolean>>((record, item) => {
+    record[item] = true;
+    return record;
+  }, {});
+
+const fetchCoreList = async (listName: string): Promise<string[]> => {
+  const response = await new Promise<unknown>((res, rej) => {
+    window
+      .sendMessage('listActions', {
+        type: 'get',
+        listName,
+      })
+      .then((response) => {
+        if (response.error) {
+          rej(response?.message);
+          return;
+        }
+
+        res(response);
+      })
+      .catch((error) => {
+        console.error('Failed qortalRequest', error);
+        rej(error);
+      });
+  });
+
+  return normalizeListItems(response);
+};
+
+const fetchCoreBlockedUsers = async (): Promise<CoreBlockedLists> => {
+  const [blockedAddresses, blockedNames] = await Promise.all([
+    fetchCoreList('blockedAddresses'),
+    fetchCoreList('blockedNames'),
+  ]);
+
+  return {
+    addresses: blockedAddresses,
+    names: blockedNames,
+  };
+};
+
+const runCoreListAction = async (
+  listName: string,
+  type: 'add' | 'remove',
+  items: string[]
+) => {
+  const normalizedItems = normalizeListItems(items);
+  if (!normalizedItems.length) return;
+
+  await new Promise<void>((res, rej) => {
+    window
+      .sendMessage('listActions', {
+        type,
+        items: normalizedItems,
+        listName,
+      })
+      .then((response) => {
+        if (response?.error) {
+          rej(response?.message);
+          return;
+        }
+
+        res();
+      })
+      .catch((error) => {
+        console.error('Failed qortalRequest', error);
+        rej(error);
+      });
+  });
+};
+
+const loadBlockedLists = async (
+  walletAddress: string,
+  setBlockedAddresses: (blockedAddresses: Record<string, boolean>) => void,
+  setBlockedNames: (blockedNames: Record<string, boolean>) => void
+) => {
+  if (!walletAddress) {
+    setBlockedAddresses({});
+    setBlockedNames({});
+    return;
+  }
+
+  const blockedUsers = await fetchCoreBlockedUsers();
+  setBlockedAddresses(toBlockedRecord(blockedUsers.addresses));
+  setBlockedNames(toBlockedRecord(blockedUsers.names));
+};
+
 /**
  * Loads blocked list into atoms when authenticated. Uses only setters so the
  * component that calls this does NOT subscribe to the atoms and will not
@@ -12,75 +115,35 @@ import {
  * useBlockedAddresses() in components that need to read the list.
  */
 export const useBlockedAddressesLoader = (isAuthenticated?: boolean) => {
+  const rawWallet = useAtomValue(rawWalletAtom);
   const setBlockedAddresses = useSetAtom(blockedAddressesAtom);
   const setBlockedNames = useSetAtom(blockedNamesAtom);
+  const activeWalletAddress = rawWallet?.address0 || '';
 
   useEffect(() => {
-    if (!isAuthenticated) return;
+    if (!isAuthenticated || !activeWalletAddress) return;
     setBlockedAddresses({});
     setBlockedNames({});
-    const fetchBlockedList = async () => {
-      try {
-        const response = await new Promise((res, rej) => {
-          window
-            .sendMessage('listActions', {
-              type: 'get',
-              listName: `blockedAddresses`,
-            })
-            .then((response) => {
-              if (response.error) {
-                rej(response?.message);
-                return;
-              } else {
-                res(response);
-              }
-            })
-            .catch((error) => {
-              console.error('Failed qortalRequest', error);
-            });
-        });
-
-        const blockedUsers: Record<string, boolean> = {};
-        response?.forEach((item) => {
-          blockedUsers[item] = true;
-        });
-        setBlockedAddresses(blockedUsers);
-
-        const response2 = await new Promise((res, rej) => {
-          window
-            .sendMessage('listActions', {
-              type: 'get',
-              listName: `blockedNames`,
-            })
-            .then((response) => {
-              if (response.error) {
-                rej(response?.message);
-                return;
-              } else {
-                res(response);
-              }
-            })
-            .catch((error) => {
-              console.error('Failed qortalRequest', error);
-            });
-        });
-
-        const blockedUsers2: Record<string, boolean> = {};
-        response2?.forEach((item) => {
-          blockedUsers2[item] = true;
-        });
-        setBlockedNames(blockedUsers2);
-      } catch (error) {
-        console.error(error);
-      }
-    };
-    fetchBlockedList();
-  }, [isAuthenticated, setBlockedAddresses, setBlockedNames]);
+    loadBlockedLists(
+      activeWalletAddress,
+      setBlockedAddresses,
+      setBlockedNames
+    ).catch((error) => {
+      console.error(error);
+    });
+  }, [
+    activeWalletAddress,
+    isAuthenticated,
+    setBlockedAddresses,
+    setBlockedNames,
+  ]);
 };
 
 export const useBlockedAddresses = (isAuthenticated?: boolean) => {
+  const rawWallet = useAtomValue(rawWalletAtom);
   const [blockedAddresses, setBlockedAddresses] = useAtom(blockedAddressesAtom);
   const [blockedNames, setBlockedNames] = useAtom(blockedNamesAtom);
+  const activeWalletAddress = rawWallet?.address0 || '';
 
   const getAllBlockedUsers = useCallback(
     () => ({
@@ -90,8 +153,18 @@ export const useBlockedAddresses = (isAuthenticated?: boolean) => {
     [blockedAddresses, blockedNames]
   );
 
+  const refreshBlockedUsers = useCallback(async () => {
+    if (!isAuthenticated || !activeWalletAddress) return;
+
+    await loadBlockedLists(
+      activeWalletAddress,
+      setBlockedAddresses,
+      setBlockedNames
+    );
+  }, [activeWalletAddress, isAuthenticated, setBlockedAddresses, setBlockedNames]);
+
   const isUserBlocked = useCallback(
-    (address) => {
+    (address?: string | null) => {
       try {
         if (!address) return false;
         return !!blockedAddresses[address];
@@ -105,112 +178,44 @@ export const useBlockedAddresses = (isAuthenticated?: boolean) => {
 
   const removeBlockFromList = useCallback(
     async (address, name) => {
+      let nextBlockedNames = blockedNames;
+      let nextBlockedAddresses = blockedAddresses;
+
       if (name) {
-        await new Promise((res, rej) => {
-          window
-            .sendMessage('listActions', {
-              type: 'remove',
-              items: [name],
-              listName: 'blockedNames',
-            })
-            .then((response) => {
-              if (response.error) {
-                rej(response?.message);
-                return;
-              } else {
-                setBlockedNames((prev) => {
-                  const copy = { ...prev };
-                  delete copy[name];
-                  return copy;
-                });
-                res(response);
-              }
-            })
-            .catch((error) => {
-              console.error('Failed qortalRequest', error);
-            });
-        });
+        await runCoreListAction('blockedNames', 'remove', [name]);
+        nextBlockedNames = { ...blockedNames };
+        delete nextBlockedNames[name];
+        setBlockedNames(nextBlockedNames);
       }
 
       if (address) {
-        await new Promise((res, rej) => {
-          window
-            .sendMessage('listActions', {
-              type: 'remove',
-              items: [address],
-              listName: 'blockedAddresses',
-            })
-            .then((response) => {
-              if (response.error) {
-                rej(response?.message);
-                return;
-              } else {
-                setBlockedAddresses((prev) => {
-                  const copy = { ...prev };
-                  delete copy[address];
-                  return copy;
-                });
-                res(response);
-              }
-            })
-            .catch((error) => {
-              console.error('Failed qortalRequest', error);
-            });
-        });
+        await runCoreListAction('blockedAddresses', 'remove', [address]);
+        nextBlockedAddresses = { ...blockedAddresses };
+        delete nextBlockedAddresses[address];
+        setBlockedAddresses(nextBlockedAddresses);
       }
     },
-    [setBlockedAddresses, setBlockedNames]
+    [blockedAddresses, blockedNames, setBlockedAddresses, setBlockedNames]
   );
 
   const addToBlockList = useCallback(
     async (address, name) => {
+      let nextBlockedNames = blockedNames;
+      let nextBlockedAddresses = blockedAddresses;
+
       if (name) {
-        await new Promise((res, rej) => {
-          window
-            .sendMessage('listActions', {
-              type: 'add',
-              items: [name],
-              listName: 'blockedNames',
-            })
-            .then((response) => {
-              if (response.error) {
-                rej(response?.message);
-                return;
-              } else {
-                setBlockedNames((prev) => ({ ...prev, [name]: true }));
-                res(response);
-              }
-            })
-            .catch((error) => {
-              console.error('Failed qortalRequest', error);
-            });
-        });
+        await runCoreListAction('blockedNames', 'add', [name]);
+        nextBlockedNames = { ...blockedNames, [name]: true };
+        setBlockedNames(nextBlockedNames);
       }
 
       if (address) {
-        await new Promise((res, rej) => {
-          window
-            .sendMessage('listActions', {
-              type: 'add',
-              items: [address],
-              listName: 'blockedAddresses',
-            })
-            .then((response) => {
-              if (response.error) {
-                rej(response?.message);
-                return;
-              } else {
-                setBlockedAddresses((prev) => ({ ...prev, [address]: true }));
-                res(response);
-              }
-            })
-            .catch((error) => {
-              console.error('Failed qortalRequest', error);
-            });
-        });
+        await runCoreListAction('blockedAddresses', 'add', [address]);
+        nextBlockedAddresses = { ...blockedAddresses, [address]: true };
+        setBlockedAddresses(nextBlockedAddresses);
       }
     },
-    [setBlockedAddresses, setBlockedNames]
+    [blockedAddresses, blockedNames, setBlockedAddresses, setBlockedNames]
   );
 
   return useMemo(
@@ -219,7 +224,14 @@ export const useBlockedAddresses = (isAuthenticated?: boolean) => {
       addToBlockList,
       removeBlockFromList,
       getAllBlockedUsers,
+      refreshBlockedUsers,
     }),
-    [isUserBlocked, addToBlockList, removeBlockFromList, getAllBlockedUsers]
+    [
+      isUserBlocked,
+      addToBlockList,
+      removeBlockFromList,
+      getAllBlockedUsers,
+      refreshBlockedUsers,
+    ]
   );
 };
diff --git a/src/hooks/useHandlePaymentNotification.tsx b/src/hooks/useHandlePaymentNotification.tsx
index e25fae27..dff48f56 100644
--- a/src/hooks/useHandlePaymentNotification.tsx
+++ b/src/hooks/useHandlePaymentNotification.tsx
@@ -1,10 +1,5 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { getBaseApiReact } from '../App';
-import { getData, storeData } from '../utils/chromeStorage';
-import {
-  checkDifference,
-  getNameInfoForOthers,
-} from '../background/background.ts';
+import { useCallback, useEffect, useRef } from 'react';
+import { getNameInfoForOthers } from '../background/background.ts';
 import { lastPaymentSeenTimestampAtom } from '../atoms/global';
 import { subscribeToEvent, unsubscribeFromEvent } from '../utils/events';
 import { useAtom } from 'jotai';
@@ -12,21 +7,12 @@ import { useAtom } from 'jotai';
 export const useHandlePaymentNotification = (address) => {
   const nameAddressOfSender = useRef({});
   const isFetchingName = useRef({});
-  const [latestTx, setLatestTx] = useState(null);
   const [lastEnteredTimestampPayment, setLastEnteredTimestampPayment] = useAtom(
     lastPaymentSeenTimestampAtom
   );
 
-  useEffect(() => {
-    if (lastEnteredTimestampPayment && address) {
-      storeData(`last-seen-payment-${address}`, Date.now()).catch((error) => {
-        console.error(error);
-      });
-    }
-  }, [lastEnteredTimestampPayment, address]);
-
   const getNameOrAddressOfSender = useCallback(async (senderAddress) => {
-    if (isFetchingName.current[senderAddress]) return senderAddress;
+    if (isFetchingName.current[senderAddress]) return;
     try {
       isFetchingName.current[senderAddress] = true;
       const res = await getNameInfoForOthers(senderAddress);
@@ -39,81 +25,16 @@ export const useHandlePaymentNotification = (address) => {
   }, []);
 
   const getNameOrAddressOfSenderMiddle = useCallback(
-    async (senderAddress) => {
+    (senderAddress) => {
       getNameOrAddressOfSender(senderAddress);
       return senderAddress;
     },
     [getNameOrAddressOfSender]
   );
 
-  const hasNewPayment = useMemo(() => {
-    if (!latestTx) return false;
-    if (!checkDifference(latestTx?.timestamp)) return false;
-    if (
-      !lastEnteredTimestampPayment ||
-      lastEnteredTimestampPayment < latestTx?.timestamp
-    )
-      return true;
-
-    return false;
-  }, [lastEnteredTimestampPayment, latestTx]);
-
-  const getLastSeenData = useCallback(async () => {
-    try {
-      if (!address) return;
-      const key = `last-seen-payment-${address}`;
-
-      const res = await getData<any>(key).catch(() => null);
-
-      if (res) {
-        setLastEnteredTimestampPayment(res);
-      }
-
-      const response = await fetch(
-        `${getBaseApiReact()}/transactions/search?txType=PAYMENT&address=${address}&confirmationStatus=CONFIRMED&limit=5&reverse=true`
-      );
-
-      const responseData = await response.json();
-
-      const latestTx = responseData.filter(
-        (tx) => tx?.creatorAddress !== address && tx?.recipient === address
-      )[0];
-
-      if (!latestTx) {
-        return; // continue to the next group
-      }
-
-      setLatestTx(latestTx);
-    } catch (error) {
-      console.error(error);
-    }
-  }, [address, setLastEnteredTimestampPayment]);
-
-  useEffect(() => {
-    getLastSeenData();
-    // Handler function for incoming messages
-    const messageHandler = (event) => {
-      if (event.origin !== window.location.origin) {
-        return;
-      }
-      const message = event.data;
-      if (message?.action === 'SET_PAYMENT_ANNOUNCEMENT' && message?.payload) {
-        setLatestTx(message.payload);
-      }
-    };
-
-    // Attach the event listener
-    window.addEventListener('message', messageHandler);
-
-    // Clean up the event listener on component unmount
-    return () => {
-      window.removeEventListener('message', messageHandler);
-    };
-  }, [getLastSeenData]);
-
   const setLastEnteredTimestampPaymentEventFunc = useCallback(
-    (e) => {
-      setLastEnteredTimestampPayment(Date.now);
+    () => {
+      setLastEnteredTimestampPayment(Date.now());
     },
     [setLastEnteredTimestampPayment]
   );
@@ -133,9 +54,8 @@ export const useHandlePaymentNotification = (address) => {
   }, [setLastEnteredTimestampPaymentEventFunc]);
 
   return {
-    latestTx,
     getNameOrAddressOfSenderMiddle,
-    hasNewPayment,
+    lastEnteredTimestampPayment,
     setLastEnteredTimestampPayment,
     nameAddressOfSender,
   };
diff --git a/src/hooks/useQMailFetch.ts b/src/hooks/useQMailFetch.ts
deleted file mode 100644
index c30a6f38..00000000
--- a/src/hooks/useQMailFetch.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import { useCallback, useEffect } from 'react';
-import { useSetAtom } from 'jotai';
-import { mailsAtom, qMailLastEnteredTimestampAtom } from '../atoms/global';
-import { getBaseApiReact } from '../App';
-
-const QMAIL_POLL_INTERVAL_MS = 150000; // 2.5 minutes
-
-/**
- * Fetches Q-mail list and last-entered timestamp, stores in global atoms,
- * and polls on an interval. Call from a parent that has user identity (e.g. Group).
- */
-export function useQMailFetch(userName: string | undefined, userAddress: string | undefined) {
-  const setMails = useSetAtom(mailsAtom);
-  const setLastEnteredTimestamp = useSetAtom(qMailLastEnteredTimestampAtom);
-
-  const getMails = useCallback(async () => {
-    if (!userName || !userAddress) return;
-    try {
-      const query = `qortal_qmail_${userName.slice(0, 20)}_${userAddress.slice(-6)}_mail_`;
-      const response = await fetch(
-        `${getBaseApiReact()}/arbitrary/resources/search?service=MAIL_PRIVATE&query=${query}&limit=10&includemetadata=false&offset=0&reverse=true&excludeblocked=true&mode=ALL`
-      );
-      const mailData = await response.json();
-      setMails(mailData ?? []);
-    } catch (error) {
-      console.error(error);
-    }
-  }, [userName, userAddress, setMails]);
-
-  const getTimestamp = useCallback(async () => {
-    try {
-      const response = await window.sendMessage('getEnteredQmailTimestamp');
-      if (!response?.error && response?.timestamp) {
-        setLastEnteredTimestamp(response.timestamp);
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  }, [setLastEnteredTimestamp]);
-
-  useEffect(() => {
-    getTimestamp();
-    if (!userName || !userAddress) return;
-    getMails();
-    const interval = setInterval(() => {
-      getTimestamp();
-      getMails();
-    }, QMAIL_POLL_INTERVAL_MS);
-    return () => clearInterval(interval);
-  }, [getMails, getTimestamp, userName, userAddress]);
-}
diff --git a/src/hooks/useQortalMessageListener.tsx b/src/hooks/useQortalMessageListener.tsx
index 1ae0583a..748d43f8 100644
--- a/src/hooks/useQortalMessageListener.tsx
+++ b/src/hooks/useQortalMessageListener.tsx
@@ -244,6 +244,12 @@ export const listOfAllQortalRequests = [
   'LIST_QDN_RESOURCES',
   'LOCK_TAB',
   'MULTI_ASSET_PAYMENT_WITH_PRIVATE_DATA',
+  'NOTIFICATION_ADD',
+  'NOTIFICATION_GET',
+  'NOTIFICATION_HAS_PERMISSION',
+  'NOTIFICATION_MARK_SEEN',
+  'NOTIFICATION_PERMISSION',
+  'NOTIFICATION_REMOVE',
   'OPEN_NEW_TAB',
   'PLAY_ENCRYPTED_MEDIA',
   'PUBLISH_MULTIPLE_QDN_RESOURCES',
@@ -272,6 +278,7 @@ export const listOfAllQortalRequests = [
   'UPDATE_FOREIGN_FEE',
   'UPDATE_GROUP',
   'UPDATE_NAME',
+   'UPDATE_SUBSCRIPTIONS',
   'VOTE_ON_POLL',
   'WHICH_UI',
 ];
@@ -322,6 +329,12 @@ export const UIQortalRequests = [
   'LEAVE_GROUP',
   'LOCK_TAB',
   'MULTI_ASSET_PAYMENT_WITH_PRIVATE_DATA',
+  'NOTIFICATION_ADD',
+  'NOTIFICATION_GET',
+  'NOTIFICATION_HAS_PERMISSION',
+  'NOTIFICATION_MARK_SEEN',
+  'NOTIFICATION_PERMISSION',
+  'NOTIFICATION_REMOVE',
   'OPEN_NEW_TAB',
   'PLAY_ENCRYPTED_MEDIA',
   'REENCRYPT_GROUP_KEYS',
@@ -343,6 +356,7 @@ export const UIQortalRequests = [
   'UPDATE_FOREIGN_FEE',
   'UPDATE_GROUP',
   'UPDATE_NAME',
+   'UPDATE_SUBSCRIPTIONS',
   'VOTE_ON_POLL',
   'WHICH_UI',
 ];
@@ -644,6 +658,7 @@ export const useQortalMessageListener = (
       'GET_USER_WALLET',
       'GET_WALLET_BALANCE',
       'IS_USING_PUBLIC_NODE',
+       'NOTIFICATION_HAS_PERMISSION',
       'LIST_ATS',
       'LIST_GROUPS',
       'LIST_QDN_RESOURCES',
diff --git a/src/i18n/i18n.ts b/src/i18n/i18n.ts
index c1dbe0b2..dfa2d07d 100644
--- a/src/i18n/i18n.ts
+++ b/src/i18n/i18n.ts
@@ -1,69 +1,85 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
-import HttpBackend from 'i18next-http-backend';
-import LanguageDetector from 'i18next-browser-languagedetector';
 import {
   capitalizeAll,
   capitalizeEachFirstChar,
   capitalizeFirstChar,
   capitalizeFirstWord,
+  capitalizeSentenceStarts,
 } from './processors';
 
 export const supportedLanguages = {
-  ar: { name: 'Arab', flag: '🇦🇪' },
-  de: { name: 'Deutsch', flag: '🇩🇪' },
   en: { name: 'English', flag: '🇺🇸' },
+  ar: { name: 'العربية', flag: '🇸🇦' },
+  de: { name: 'Deutsch', flag: '🇩🇪' },
   es: { name: 'Español', flag: '🇪🇸' },
-  fi: { name: 'Suomi', flag: '🇫🇮' },
   et: { name: 'Eesti', flag: '🇪🇪' },
+  fi: { name: 'Suomi', flag: '🇫🇮' },
   fr: { name: 'Français', flag: '🇫🇷' },
   it: { name: 'Italiano', flag: '🇮🇹' },
-  pt: { name: 'Português', flag: '🇧🇷' },
-  ru: { name: 'Русский', flag: '🇷🇺' },
   ja: { name: '日本語', flag: '🇯🇵' },
+  pt: { name: 'Português', flag: '🇵🇹' },
+  ru: { name: 'Русский', flag: '🇷🇺' },
   zh: { name: '中文', flag: '🇨🇳' },
-};
+} as const;
 
-// Load all JSON files under locales/**/*
-const modules = import.meta.glob('./locales/**/*.json', {
+const supportedLngs = Object.keys(supportedLanguages);
+
+const modules = import.meta.glob('./locales/*/*.json', {
   eager: true,
-}) as Record<string, any>;
+}) as Record<string, { default: Record<string, unknown> }>;
 
-// Construct i18n resources object
-const resources: Record<string, Record<string, any>> = {};
+const resources: Record<string, Record<string, unknown>> = {};
 
-for (const path in modules) {
-  // Path format: './locales/en/core.json'
+for (const path of Object.keys(modules)) {
   const match = path.match(/\.\/locales\/([^/]+)\/([^/]+)\.json$/);
   if (!match) continue;
 
-  const [, lang, ns] = match;
-  resources[lang] = resources[lang] || {};
-  resources[lang][ns] = modules[path].default;
+  const [, lng, ns] = match;
+  if (!supportedLngs.includes(lng)) continue;
+
+  if (!resources[lng]) resources[lng] = {};
+  resources[lng][ns] = modules[path].default;
 }
 
+function getInitialLanguage(): string {
+  try {
+    const raw = localStorage.getItem('i18nextLng');
+    if (!raw) return 'en';
+    const base = raw.split('-')[0];
+    return supportedLngs.includes(base) ? base : 'en';
+  } catch {
+    return 'en';
+  }
+}
+
+export const namespaces = [
+  'auth',
+  'core',
+  'group',
+  'question',
+  'tutorial',
+  'node',
+] as const;
+
 i18n
-  .use(HttpBackend)
   .use(initReactI18next)
-  .use(LanguageDetector)
   .use(capitalizeAll as any)
   .use(capitalizeEachFirstChar as any)
   .use(capitalizeFirstChar as any)
   .use(capitalizeFirstWord as any)
+  .use(capitalizeSentenceStarts as any)
   .init({
     resources,
     fallbackLng: 'en',
-    lng: localStorage.getItem('i18nextLng') || 'en',
-    supportedLngs: Object.keys(supportedLanguages),
-    backend: {
-      loadPath: '/locales/{{lng}}/{{ns}}.json',
-    },
-    ns: ['auth', 'core', 'group', 'question', 'tutorial'],
+    lng: getInitialLanguage(),
+    supportedLngs,
+    ns: [...namespaces],
     defaultNS: 'core',
     interpolation: { escapeValue: false },
     react: { useSuspense: false },
-    returnEmptyString: false, // return fallback instead of empty string
-    returnNull: false, // return fallback instead of null
+    returnEmptyString: false,
+    returnNull: false,
     debug: import.meta.env.MODE === 'development',
   });
 
diff --git a/src/i18n/locales/ar/auth.json b/src/i18n/locales/ar/auth.json
index 5f892b7b..a21bd4f7 100644
--- a/src/i18n/locales/ar/auth.json
+++ b/src/i18n/locales/ar/auth.json
@@ -74,8 +74,11 @@
       "set_apikey": "فشل تعيين مفتاح API:"
     },
     "generic": {
+      "block_list_intro": "أضف اسمًا أو عنوان Qortal للحظر. العناوين تؤثر على المعاملات؛ حظر الاسم يخفي بياناته في كل الـ Hub.",
       "blocked_addresses": "عناوين محظورة - تمنع معالجة المعاملات",
+      "blocked_addresses_hint": "يمنع المعالجة المرتبطة بالمعاملات من هذه العناوين.",
       "blocked_names": "أسماء محظورة لـ QDN",
+      "blocked_names_hint": "هذه الأسماء محظورة لبيانات QDN والـ Hub والميزات الاجتماعية.",
       "blocking": "جاري حظر {{ name }}",
       "choose_block": "اختر 'حظر المعاملات' أو 'الكل' لحظر رسائل الدردشة",
       "congrats_setup": "مبروك! لقد أكملت الإعداد بنجاح",
@@ -88,6 +91,7 @@
       "locating_encryption_keys": "جاري تحديد موقع مفاتيح التشفير",
       "insert_name_address": "الرجاء إدخال اسم أو عنوان لبدء محادثة خاصة.",
       "name_address": "اسم أو عنوان",
+      "no_blocked_users": "لا أحد محظور بعد. أضف عنوانًا أو اسمًا أعلاه لإخفائه.",
       "no_account": "لا توجد حسابات محفوظة",
       "no_minimum_length": "لا يوجد حد أدنى لطول النص المطلوب",
       "no_secret_key_published": "لا يوجد مفتاح سري منشور بعد",
@@ -142,6 +146,159 @@
   },
   "welcome": "مرحبًا بك في",
   "store_account": "حفظ الحساب في المركز",
+  "create_wallet": {
+    "error_enter_password": "أدخل كلمة مرور المحفظة.",
+    "error_confirm_password": "أكّد كلمة مرور المحفظة.",
+    "error_passwords_mismatch": "كلمتا المرور غير متطابقتين.",
+    "success_wallet_saved": "تم حفظ المحفظة",
+    "success_account_created": "تم إنشاء الحساب",
+    "success_ready_hub": "يمكنك الآن الدخول إلى المركز.",
+    "success_backup_before_hub": "انسخ احتياطيًا محفظتك المشفّرة قبل الدخول إلى المركز.",
+    "enter_hub": "دخول المركز",
+    "download_another_copy": "تنزيل نسخة أخرى",
+    "backup_wallet": "نسخ المحفظة احتياطيًا",
+    "backup_encrypted_notice": "هذه النسخة الاحتياطية مشفّرة بكلمة مرور محفظتك.",
+    "seed_title": "عبارة الاسترداد",
+    "seed_subtitle": "يمكنها استرداد حسابك. حفظ العبارة اختياري. سيأتي بعدها النسخ الاحتياطي المشفّر للمحفظة وهو الطريقة الموصى بها للاسترداد.",
+    "reveal": "إظهار",
+    "copied": "تم النسخ",
+    "copy": "نسخ",
+    "export": "تصدير",
+    "seed_warning": "لا تشاركها أبدًا. من يمتلكها يمكنه الوصول إلى حسابك. للحفظ اليومي استخدم النسخ الاحتياطي المشفّر بعد الإنشاء.",
+    "create_account": "إنشاء حساب",
+    "password_title": "إنشاء كلمة المرور",
+    "password_subtitle": "تحمي هذه الكلمة حسابك على هذا الجهاز.",
+    "wallet_password": "كلمة مرور المحفظة",
+    "confirm_password": "تأكيد كلمة المرور",
+    "save_account_in_hub": "حفظ الحساب في المركز",
+    "continue": "متابعة"
+  },
+  "import_account": {
+    "title": "استيراد الحساب",
+    "subtitle": "اختر كيف تريد استعادة حسابك."
+  },
+  "backup_wallet_modal": {
+    "subtitle": "قم بتنزيل ملف محفظة محليًا حتى تتمكن من استعادة هذا الحساب لاحقًا.",
+    "info_note": "يصدِّر هذا ملف محفظة محليًا على جهازك. احتفظ به في مكان آمن.",
+    "current_password": "كلمة المرور الحالية",
+    "keep_password_in_export": "الإبقاء على كلمة المرور الحالية في ملف المحفظة المصدَّر",
+    "new_password_for_backup": "كلمة مرور جديدة لهذا النسخ الاحتياطي",
+    "download_wallet_file": "تنزيل ملف المحفظة",
+    "error_no_active_wallet": "لم يُعثَر على محفظة نشطة للنسخ الاحتياطي.",
+    "error_unable_to_create_backup": "تعذَّر إنشاء نسخة احتياطية للمحفظة."
+  },
+  "wallet_errors": {
+    "unable_to_unlock_default": "تعذّر فتح قفل هذه المحفظة.",
+    "unable_to_save_backup": "تعذّر حفظ النسخة الاحتياطية للمحفظة.",
+    "unable_to_prepare_backup": "تعذّر تجهيز النسخة الاحتياطية للمحفظة.",
+    "account_not_found": "لم يُعثر على هذا الحساب المحفوظ. اختر حسابًا آخر أو استعد هذه المحفظة من نسخة احتياطية.",
+    "account_incomplete": "يبدو هذا الحساب المحفوظ غير كامل أو تالفًا. اختر حسابًا آخر أو استعد هذه المحفظة من نسخة احتياطية.",
+    "invalid_security_data": "يحتوي هذا الحساب المحفوظ على بيانات أمان غير صالحة للمحفظة. اختر حسابًا آخر أو استعد هذه المحفظة من نسخة احتياطية.",
+    "missing_encrypted_seed": "يُفتقد هذا الحساب المحفوظ إلى البذرة المشفرة (البيانات المقفلة للمحفظة اللازمة لفتحها). اختر حسابًا آخر أو استعد هذه المحفظة من نسخة احتياطية.",
+    "missing_field": "يُفتقد هذا الحساب المحفوظ إلى {{field}}. اختر حسابًا آخر أو استعد هذه المحفظة من نسخة احتياطية.",
+    "field": {
+      "address0": "عنوان المحفظة",
+      "encryptedSeed": "البذرة المشفرة (البيانات المقفلة للمحفظة اللازمة لفتحها)",
+      "iv": "بيانات تشفير المحفظة",
+      "kdfThreads": "إعدادات كلمة مرور المحفظة",
+      "mac": "فحص سلامة المحفظة",
+      "salt": "بيانات أمان كلمة مرور المحفظة",
+      "version": "إصدار المحفظة"
+    }
+  },
+  "connection_mode": {
+    "title": "وضع الاتصال",
+    "subtitle": "اختر طريقة اتصال Qortal بالشبكة.",
+    "local_title": "عقدة محلية",
+    "recommended": "موصى به",
+    "local_full_decentralized": "وصول لامركزي كامل",
+    "local_faster": "أداء أسرع",
+    "local_data_local": "بياناتك تبقى محليًا",
+    "public_title": "عقدة عامة",
+    "public_quick": "وصول سريع",
+    "public_limited_decentralization": "لامركزية محدودة",
+    "public_shared_infrastructure": "بنية تحتية مشتركة",
+    "status_running": "المستودع يعمل",
+    "status_missing": "لم يُكتشَف المستودع",
+    "status_checking": "جارٍ فحص العقدة المحلية",
+    "section_custom_nodes": "عقد مخصّصة",
+    "add_custom_node": "إضافة عقدة مخصّصة",
+    "empty_custom_nodes": "لا توجد عقد مخصّصة محفوظة",
+    "manual_setup_link": "إعداد العقدة يدويًا",
+    "save_settings": "حفظ الإعدادات",
+    "manual_edit_title": "تعديل عقدة مخصّصة",
+    "manual_add_title": "إعداد العقدة يدويًا",
+    "field_name": "الاسم",
+    "placeholder_node_name": "عقدة Qortal الخاصة بي",
+    "field_node_url": "رابط العقدة",
+    "placeholder_node_url": "https://127.0.0.1:12391",
+    "field_api_key_optional": "مفتاح API (اختياري)",
+    "placeholder_api_key": "أدخل مفتاح API",
+    "reload_after_new_node_title": "يلزم إعادة التحميل",
+    "reload_after_new_node_message": "لقد أضفتَ عقدةً جديدة؛ مطلوب تحديث التطبيق.",
+    "reload_after_new_node_button": "إعادة تحميل التطبيق"
+  },
+  "intro_features": {
+    "secure_title": "آمن وخاص",
+    "secure_text": "مفاتيحك وبياناتك، دائمًا تحت سيطرتك.",
+    "fast_title": "وصول سريع",
+    "fast_text": "افتح القفل وادخل فورًا إلى تجربة كورتال.",
+    "decentralized_title": "لامركزي",
+    "decentralized_text": "اتصل بالشبكة وفق شروطك.",
+    "built_title": "صمم من أجلك",
+    "built_text": "حساب واحد. إمكانيات بلا حدود."
+  },
+  "entry": {
+    "title": "دخول Qortal",
+    "subtitle": "سجّل الدخول أو أنشئ حسابك.",
+    "create_account": "إنشاء حساب",
+    "import_account": "استيراد حساب",
+    "no_accounts": "لم يُعثَر على حسابات على هذا الجهاز.",
+    "import_choice_backup_title": "ملف النسخ الاحتياطي",
+    "import_choice_backup_description": "استيراد نسخة احتياطية محفوظة من Hub.",
+    "import_choice_authenticate_title": "المصادقة الآن",
+    "import_choice_authenticate_description": "استخدم ملف نسخ احتياطي دون حفظه.",
+    "import_choice_seed_title": "عبارة الاسترداد",
+    "import_choice_seed_description": "الاستعادة باستخدام عبارة الاسترداد.",
+    "import_backup_heading": "استيراد من ملف نسخ احتياطي",
+    "import_backup_drop_hint": "أسقط ملف النسخ أو انقر للاختيار.",
+    "import_authenticate_heading": "المصادقة من ملف نسخ احتياطي",
+    "import_authenticate_drop_hint": "أسقط ملف نسخ احتياطي أو انقر للاختيار. لن يتم حفظه على هذا الجهاز.",
+    "import_seed_label": "عبارة الاسترداد",
+    "import_seed_placeholder": "أدخل عبارة الاسترداد",
+    "import_wallet_password": "كلمة مرور المحفظة",
+    "importing_account": "جارٍ استيراد الحساب...",
+    "seed_import_error": "تعذّر استيراد هذه العبارة.",
+    "seed_import_duplicate": "هذا الحساب محفوظ بالفعل على هذا الجهاز.",
+    "seed_import_success": "تم استيراد الحساب بنجاح.",
+    "import_backup_success_one": "تم استيراد {{count}} حساب بنجاح.",
+    "import_backup_success_other": "تم استيراد {{count}} حسابات بنجاح.",
+    "import_backup_duplicate": "هذه الحسابات محفوظة بالفعل على هذا الجهاز.",
+    "import_backup_invalid": "ملف النسخ الاحتياطي هذا لا يحتوي على حساب صالح.",
+    "import_file_read_aborted": "تم إيقاف قراءة الملف",
+    "import_file_read_failed": "فشلت قراءة الملف",
+    "filter_accounts_aria": "تصفية الحسابات حسب العنوان أو الاسم الأساسي أو الملاحظة",
+    "filter_placeholder": "العنوان أو الاسم الأساسي أو الملاحظة…",
+    "filter_no_results": "لا توجد حسابات مطابقة.",
+    "filter_clear": "مسح البحث",
+    "wallet_edit_name_label": "الاسم",
+    "wallet_edit_account_name_placeholder": "اسم الحساب",
+    "wallet_edit_note_label": "ملاحظة",
+    "wallet_edit_note_placeholder": "ملاحظة (اختياري)",
+    "wallet_edit_remove": "إزالة",
+    "wallet_edit_save": "حفظ",
+    "wallet_edit_aria_label": "تحرير اسم الحساب والملاحظة"
+  },
+  "authentication_form": {
+    "unnamed_account": "حساب بدون اسم",
+    "password_placeholder": "أدخل كلمة المرور",
+    "unlock": "فتح القفل",
+    "choose_another_account": "اختر حسابًا آخر",
+    "using_local_node": "عقدة محلية",
+    "using_public_node": "عقدة عامة",
+    "using_custom_node": "عقدة مخصصة"
+  },
+
   "temp_auth": {
     "tooltip": "المصادقة بدون حفظ حسابك في المركز",
     "button": "مصادقة مؤقتة"
diff --git a/src/i18n/locales/ar/core.json b/src/i18n/locales/ar/core.json
index c05457f7..ac69da6a 100644
--- a/src/i18n/locales/ar/core.json
+++ b/src/i18n/locales/ar/core.json
@@ -7,6 +7,7 @@
     "add_custom_framework": "إضافة إطار مخصص",
     "add_reaction": "إضافة تفاعل",
     "add_theme": "إضافة سمة",
+    "back": "رجوع",
     "backup_account": "نسخ احتياطي للحساب",
     "backup_wallet": "نسخ احتياطي للمحفظة",
     "cancel": "إلغاء",
@@ -132,9 +133,9 @@
   "core": {
     "block_height": "رقم البلوك",
     "data_peers": "أقران QDN (البيانات)",
-    "information": "معلومات السرفر",
+    "information": "معلومات Core",
     "peers": "السيرفرات المتصلة",
-    "version": "نسخة السرفر"
+    "version": "نسخة Core"
   },
   "current_language": "اللغة الحالية: {{ language }}",
   "dev": "ديف",
@@ -248,6 +249,8 @@
       "confirmed": "تم التأكيد",
       "created_by": "تم إنشاؤه بواسطة {{ owner }}",
       "devmode_local_node": "الرجاء استخدام نودك المحلي لوضع المطور! سجل الخروج واستخدم النود المحلي.",
+      "disable_os_push": "تعطيل إشعارات الدفع من نظام التشغيل",
+      "disable_os_push_desc": "اكتم تنبيهات سطح المكتب لهذا التطبيق مع بقاء نشاط الـ Hub مرئيًا.",
       "downloading_decrypting_app": "جاري تحميل وفك تشفير التطبيق الخاص.",
       "downloading": "جاري التحميل",
       "edited": "تم التعديل",
@@ -255,11 +258,17 @@
       "encrypted_not": "غير مشفر",
       "encrypted": "مشفر",
       "amount_qort": "المبلغ: {{ amount }} كورتال",
+      "app_notifications_hint": "ستظهر إشعارات تطبيقات Q هنا",
       "fee_qort": "الرسوم: {{ fee }} كورتال",
       "fetching_data": "جاري جلب بيانات التطبيق",
       "foreign_fee": "رسوم العملات الأجنبية: {{ fee }}",
       "get_qort_trade_portal": "احصل على كورتال من بوابة التبادل عبر السلاسل",
+      "loading": "جارٍ التحميل...",
       "mentioned": "تم الإشارة إليك",
+      "new_notification_from": "إشعار جديد من {{ appName }}",
+      "new_payment_body": "لقد استلمت {{ amount }} QORT.",
+      "new_payment_received": "تم استلام دفعة جديدة",
+      "new_qmail": "لديك بريد Q-Mail جديد",
       "message_with_image": "هذه الرسالة تحتوي بالفعل على صورة",
       "minimal_qort_balance": "امتلاك ما لا يقل عن {{ quantity }} QORT في رصيدك يتيح لك إرسال رسائل الدردشة بسرعة شبه فورية.",
       "most_recent_payment": "آخر {{ count }} دفعة",
@@ -271,12 +280,17 @@
       "name_rate": "تحتاج إلى اسم للتقييم",
       "name_registration": "رصيدك الحالي {{ balance }} كورتال. تسجيل الاسم يتطلب رسوم {{ fee }} كورتال",
       "name_unavailable": "الاسم {{ name }} غير متاح",
+      "no_app_notifications": "لا توجد إشعارات تطبيقات بعد",
       "no_data_image": "لا توجد بيانات للصورة",
       "no_description": "لا يوجد وصف",
       "no_messages": "لا توجد رسائل",
       "no_message": "لا توجد رسالة",
       "no_minting_details": "لا يمكن عرض تفاصيل التعدين على البوابة",
+      "no_notification_apps": "لا يوجد بعد أي تطبيقات لديها صلاحية الإشعارات.",
       "no_notifications": "لا توجد إشعارات جديدة",
+      "notification_settings": "إعدادات الإشعارات",
+      "notification_settings_desc": "اختر التطبيقات التي يمكنها إرسال تنبيهات سطح المكتب مع بقاء نشاط الـ Hub مرئيًا.",
+      "notifications": "الإشعارات",
       "no_payments": "لا توجد مدفوعات",
       "no_pinned_changes": "ليس لديك أي تغييرات على تطبيقاتك المثبتة",
       "no_results": "لا توجد نتائج",
@@ -297,6 +311,7 @@
       "replied_to": "رد على {{ person }}",
       "revert_default": "الرجوع للإعدادات الافتراضية",
       "revert_qdn": "الرجوع إلى QDN",
+      "revoke_permission": "إبطال",
       "save_qdn": "حفظ على QDN",
       "secure_ownership": "تملك آمن للبيانات المنشورة باسمك. يمكنك حتى بيع اسمك مع بياناتك لطرف ثالث.",
       "select_file": "الرجاء اختيار ملف",
@@ -308,7 +323,8 @@
       "unread_messages": "رسائل غير مقروءة أدناه",
       "unsaved_changes": "لديك تغييرات غير محفوظة على تطبيقاتك المثبتة. احفظها على QDN.",
       "updating": "جاري التحديث",
-      "wait": "الرجاء الانتظار"
+      "wait": "الرجاء الانتظار",
+      "open_q_trade_subtitle": "افتح Q-Trade واشترِ QORT من بوابة التداول."
     },
     "message": "رسالة",
     "promotion_text": "نص الترويج",
@@ -336,6 +352,7 @@
       "rated_app": "تم التقييم بنجاح. يرجى الانتظار بضع دقائق حتى تنتشر التغييرات على الشبكة",
       "request_read": "لقد قرأت هذا الطلب",
       "transfer": "تم التحويل بنجاح!",
+      "transfer_submitted": "تم إرسال تحويلك بنجاح.",
       "voted": "تم التصويت بنجاح. يرجى الانتظار بضع دقائق حتى تنتشر التغييرات على الشبكة"
     }
   },
@@ -365,7 +382,38 @@
     },
     "status_title": "حالة التعدين",
     "tier_share_per_block": "حصة المستوى لكل بلوك",
-    "total_minter_in_tier": "إجمالي المعدّنين في هذا المستوى"
+    "total_minter_in_tier": "إجمالي المعدّنين في هذا المستوى",
+    "panel": {
+      "dialog_subtitle": "راجع حالة التعدين الحالية وتقدمه والخطوات التالية.",
+      "state_syncing_title": "جارٍ المزامنة",
+      "state_syncing_body": "العقدة ما زالت تتم مزامنتها، لذا لا يمكن بدء التعدين بعد.",
+      "state_active_title": "التعدين نشط",
+      "state_active_body_node_selection": "مفتاح المعدّن هذا مهيأ على هذه العقدة. تعكس الإحصائيات الحساب المحدد.",
+      "state_active_body_account": "هذا الحساب مهيأ للتعدين على هذه العقدة.",
+      "state_inactive_title": "بدون التعدين",
+      "state_inactive_body_not_in_group": "هذا الحساب ليس بعد ضمن مجموعة المعدّنين.",
+      "state_inactive_body_multi_key": "هذه العقدة لديها بالفعل عدة مفاتيح تعدين مهيأة.",
+      "state_inactive_body_ready": "هذا الحساب جاهز للخطوة التالية من التعدين.",
+      "next_step_visit_q_mintership": "افتح تطبيق Q-Mintership للتقديم كمعدّن.",
+      "next_step_already_active": "التعدين نشط بالفعل على هذه العقدة.",
+      "next_step_wait_sync": "انتظر انتهاء مزامنة العقدة قبل أن يمكن بدء التعدين.",
+      "next_step_start_when_ready": "ابدأ التعدين على هذه العقدة عندما تكون جاهزًا.",
+      "section_your_wallet": "محفظتك",
+      "section_minter_profile_stats": "ملف المعدّن (إحصاءات)",
+      "section_account_identity": "هوية الحساب",
+      "section_progress_next_level": "التقدم نحو المستوى التالي",
+      "section_next_step": "الخطوة التالية",
+      "section_node_minting_accounts": "حسابات تعدين العقدة",
+      "select_account_for_stats_hint": "اختر حسابًا لتحديث التقدم وإحصاءات المكافآت على اليمين.",
+      "badge_viewing_stats": "عرض الإحصائيات",
+      "blocks_to_level": "كتل حتى المستوى {{level}}",
+      "minting_for_approx_days": "التعدين لمدة: ~{{days}} يومًا",
+      "reference_only": "(للمرجع فقط)",
+      "rewards_info_subtitle_own": "(معلومات مكافآتك)",
+      "rewards_info_subtitle_selected": "(المعدّن المحدد — مكافآت هذا المفتاح)",
+      "network_details": "تفاصيل الشبكة",
+      "loading_spinner_aria": "جارٍ التحميل"
+    }
   },
   "name": "اسم",
   "name_app": "اسم/تطبيق",
@@ -389,10 +437,36 @@
   "publish": "نشر",
   "q_apps": {
     "about": "حول تطبيق Q هذا",
-    "q_mail": "بريد Q",
-    "q_manager": "مدير Q",
-    "q_sandbox": "ساحة تطوير Q",
-    "q_wallets": "محافظ Q"
+    "q_mail": "Q-Mail",
+    "q_manager": "Q-Manager",
+    "q_sandbox": "Q-Sandbox",
+    "q_wallets": "Q-Wallets",
+    "wallets_workspace": "مساحة عمل المحافظ"
+  },
+  "account_lookup": {
+    "dialog_title": "بحث المستخدم",
+    "empty_title": "البحث في الحسابات",
+    "empty_subtitle": "أدخل اسمًا أو عنوانًا",
+    "tooltip_send_disabled": "هذا ملفك الشخصي.",
+    "tooltip_block_public_node": "حظر المستخدمين غير متاح عند تشغيل عقدة عامة.",
+    "tooltip_block_self": "لا يمكنك حظر نفسك.",
+    "error_lookup_failed": "تعذر البحث عن هذا الحساب.",
+    "chip_level": "المستوى {{level}}",
+    "chip_blocked": "محظور",
+    "chip_no_registered_name": "لا يوجد اسم مسجل",
+    "section_minting_progress": "تقدّم السك",
+    "minting_remaining": "{{remaining}} متبقية",
+    "minting_blocks_to_level": "{{remaining}} حتى المستوى {{level}}",
+    "minting_approx_one": "~{{count}} يومًا للسك (تقريبًا)",
+    "minting_approx_other": "~{{count}} يومًا للسك (تقريبًا)",
+    "minting_days_label": "مدة السك:",
+    "label_address": "العنوان",
+    "label_public_key": "المفتاح العام",
+    "payments_title": "المدفوعات الأخيرة",
+    "pagination_rows_per_page": "صفوف لكل صفحة:",
+    "pagination_displayed_rows": "{{from}}–{{to}} من {{count}}",
+    "action_block": "حظر",
+    "action_unblock": "إلغاء الحظر"
   },
   "app_detail": {
     "about": "حول",
@@ -454,7 +528,10 @@
     "official_apps": "التطبيقات الرسمية"
   },
   "aria": {
-    "apps_library_tabs": "علامات تبويب التنقل في مكتبة التطبيقات"
+    "apps_library_tabs": "علامات تبويب التنقل في مكتبة التطبيقات",
+    "core_controls": "عناصر التحكم Core",
+    "switch_theme_dark": "التبديل إلى الوضع الداكن",
+    "switch_theme_light": "التبديل إلى الوضع الفاتح"
   },
   "supply": "العرض",
   "tags": "الوسوم",
@@ -501,6 +578,157 @@
     "wallet": "محفظة",
     "wallet_other": "محافظ"
   },
+  "widget_container": {
+    "empty_message": "لا يوجد شيء لعرضه حاليًا.",
+    "empty_title": "لا عناصر بعد",
+    "error_title": "تعذّر تحميل هذه الأداة",
+    "loading": "جاري التحميل",
+    "loading_message": "جلب أحدث البيانات العامة من عقدة Qortal الافتراضية.",
+    "retry": "إعادة المحاولة"
+  },
+  "quitter_feed": {
+    "error_generic": "موجز Quitter العام غير متاح مؤقتًا. أعِد المحاولة بعد لحظة.",
+    "error_following": "موجز Quitter المخصّص غير متاح مؤقتًا. يُرجى إعادة المحاولة.",
+    "error_timeout": "فشل تحميل الموجز. يمكنك إعادة المحاولة أو العودة إلى العام.",
+    "loading_following": "جاري تحميل موجز المتابَعين...",
+    "loading_general": "جاري تحميل الموجز...",
+    "error_title_following": "فشل تحميل الموجز",
+    "error_title_general": "تعذّر تحميل المنشورات",
+    "empty_title_no_name": "سجّل الدخول لتخصيص موجزك",
+    "empty_title_no_following": "يبدو أنك لا تتابع أحدًا بعد.",
+    "empty_title_no_posts": "لا منشورات من الحسابات التي تتابعها",
+    "empty_title_general": "لا منشورات متاحة",
+    "empty_message_no_name": "سجّل الدخول باسم Qortal لبناء موجز مخصّص.",
+    "empty_message_no_following": "تصفّح Quitter وتابع الحسابات لبناء موجزك.",
+    "empty_message_no_posts": "الحسابات التي تتابعها لم تنشر على Quitter بعد.",
+    "tab_general": "عام",
+    "tab_following": "المتابَعون",
+    "subtitle_personalized": "موجز مخصّص",
+    "subtitle_public": "موجز عام",
+    "retry_following": "حاول مرة أخرى",
+    "retry_general": "إعادة المحاولة",
+    "return_to_general": "العودة إلى العام",
+    "posts_showing_one": "عرض {{count}} منشور",
+    "posts_showing_other": "عرض {{count}} منشورات",
+    "new_posts_one": "{{count}} منشور جديد",
+    "new_posts_other": "{{count}} منشورات جديدة"
+  },
+  "quick_tools_pad": {
+    "user_search": "بحث مستخدم",
+    "wallets": "المحافظ",
+    "minting": "Minting",
+    "backup_wallet": "نسخ احتياطي للمحفظة",
+    "q_chat": "Q-Chat",
+    "notifications_enable": "تشغيل الإشعارات",
+    "notifications_mute": "كتم الإشعارات",
+    "apps": "التطبيقات",
+    "extras": "",
+    "hint_notifications_desktop_only": "يكتم ذلك تنبيهات سطح المكتب فقط. إشعارات داخل المركز لا تزال تعمل.",
+    "hint_minting_panel": "يُفتَح هذا اللوح عندما تصبح مانِع عملات. ازرَ Q-Mintership للبدء!",
+    "snackbar_backup_wallet": "نزِّل ملف محفظتك. هذا مطلوب للوصول إلى حسابك."
+  },
   "website": "موقع ويب",
-  "welcome": "مرحبًا"
+  "welcome": "مرحبًا",
+  "qortino_workspace": {
+    "modules_hotkeys_label": "Hotkeys",
+    "modules_hotkeys_description": "Curated shortcuts for your most-used routes.",
+    "modules_music_label": "Music player",
+    "modules_music_description": "A compact Earbump player with search and quick playback.",
+    "modules_suggest_label": "Suggest a module",
+    "modules_suggest_description": "Compose > Add Subject + Message & Send it our way!",
+    "workspace_empty_prompt": "Choose what lives above QORTINO.",
+    "workspace_header_hotkeys": "Hotkeys",
+    "workspace_header_music": "Music player",
+    "workspace_add_app": "Add app",
+    "getting_started_heading": "Getting started",
+    "onboarding_step_progress": "Step {{current}} / {{total}}",
+    "dialog_module_title": "Choose a module",
+    "dialog_module_subtitle": "Pick what lives above QORTINO.",
+    "dialog_hotkeys_title": "Select hotkeys",
+    "dialog_hotkeys_subtitle": "Saved automatically for this account.",
+    "dialog_music_search_title": "Search Earbump",
+    "dialog_music_search_subtitle": "Find a track, press play, and drop it into the player above.",
+    "search_placeholder_qapps": "Search Q-Apps",
+    "search_placeholder_tracks": "Search tracks or artists",
+    "section_recommended": "Recommended",
+    "curated_badge": "[ CURATED ]",
+    "hotkeys_loading_library": "Loading Q-Apps library...",
+    "hotkeys_unavailable_title": "Q-Apps unavailable",
+    "hotkeys_no_match_title": "No Q-Apps match yet",
+    "hotkeys_no_match_hint": "Try another app name to wire a shortcut into the selected slot.",
+    "error_hotkey_catalog": "Unable to load Q-Apps right now.",
+    "music_section_results": "Results",
+    "music_section_discovery": "Discovery",
+    "music_loading_search": "Searching the EarBump library...",
+    "music_loading_discovery": "Loading EarBump discovery...",
+    "music_quiet_title": "EarBump is quiet right now",
+    "music_no_tracks_title": "No tracks surfaced",
+    "music_no_tracks_hint": "Try another title or artist to pull something into the player.",
+    "error_earbump_discovery": "Unable to load EarBump right now.",
+    "error_earbump_search": "Unable to search EarBump right now.",
+    "music_syncing_library": "Syncing with EarBump library...",
+    "music_empty_title": "EarBump library",
+    "music_empty_uploaded": "Waiting for library",
+    "music_track_load_failed": "This track could not finish loading on your node.",
+    "music_no_peers_data": "No peers for remaining data",
+    "music_preparing_peers_one": "Preparing on your node... {{percent}}% ({{count}} peer)",
+    "music_preparing_peers_other": "Preparing on your node... {{percent}}% ({{count}} peers)",
+    "music_preparing_percent_only": "Preparing on your node... {{percent}}%",
+    "music_searching_peers": "Looking for peers...",
+    "music_finalizing_track": "Finalizing the track on your node...",
+    "music_preparing_base": "Preparing on your node...",
+    "music_playback_stalled": "Playback stalled. Press play to retry.",
+    "music_stream_stalled": "Track stalled. Rebuilding the stream...",
+    "hotkeys_launch_description": "Launch {{appName}}",
+    "hotkeys_fallback_launch": "Launch Q-App",
+    "reaction_hotkeys_ready": "Hotkeys panel ready.",
+    "reaction_music_panel_ready": "Music panel ready.",
+    "reaction_panel_cleared": "Panel cleared.",
+    "reaction_music_player_ready": "Music player ready.",
+    "reaction_locked_track": "Locked on {{title}}.",
+    "reaction_track_rotation": "{{title}} is in rotation.",
+    "reaction_onboarding_route": "Onboarding route open. I'll keep the next step warm.",
+    "reaction_support_chat": "Support chat is open. Ask for the 6 QORT and I'll queue step two.",
+    "reaction_q_trade_open": "Q-Trade is up. If you grab QORT there, I'll take you forward.",
+    "reaction_name_flow": "Name flow open. This is where the hub starts recognizing you.",
+    "reaction_avatar_flow": "Avatar flow ready. Let's give this place a face.",
+    "track_meta_separator": "·",
+    "a11y_clear_hotkey_slot": "Clear slot {{n}}",
+    "runtime_workspace_bay_title": "Workspace bay hit a runtime snag.",
+    "runtime_workspace_bay_body": "QORTINO below is still safe. Refresh the Hub and if this keeps happening we will trace the exact crash from here.",
+    "runtime_qortino_title": "QORTINO hit a runtime snag.",
+    "runtime_qortino_body": "The workspace bay above is still safe. Refresh the Hub and if this keeps happening we will trace the exact crash from here.",
+    "hotkey_slot_number": "الفتحة {{n}}"
+  },
+  "bookmarks": {
+    "title": "الإشارات المرجعية",
+    "bookmarked": "تمت الإضافة",
+    "add_page": "إضافة الصفحة",
+    "loading": "جارٍ تحميل الإشارات...",
+    "folder": "مجلد",
+    "create_folder": "إنشاء مجلد",
+    "folder_name": "اسم المجلد",
+    "new_folder": "مجلد جديد",
+    "top_level": "المستوى الأعلى",
+    "edit_bookmark": "تعديل الإشارة",
+    "add_bookmark": "إضافة إشارة",
+    "save_location_without_query": "احفظ موقع Q-App بدون معاملات الاستعلام.",
+    "name": "الاسم",
+    "bookmark_name_placeholder": "اسم الإشارة",
+    "qortal_link": "رابط Qortal",
+    "qortal_link_placeholder": "qortal://APP/Name/path",
+    "no_bookmarks": "لا توجد إشارات بعد.",
+    "no_bookmarks_folder": "لا توجد إشارات في هذا المجلد.",
+    "bookmark_count_one": "{{count}} إشارة",
+    "bookmark_count_other": "{{count}} إشارات",
+    "edit": "تعديل",
+    "move": "نقل",
+    "delete": "حذف",
+    "rename": "إعادة تسمية",
+    "remove": "إزالة",
+    "create": "إنشاء",
+    "more": "المزيد",
+    "delete_folder_title": "حذف المجلد؟",
+    "delete_folder_message": "سيتم نقل الإشارات في هذا المجلد إلى المستوى الأعلى."
+  }
 }
diff --git a/src/i18n/locales/ar/group.json b/src/i18n/locales/ar/group.json
index c067f226..8309bfc5 100644
--- a/src/i18n/locales/ar/group.json
+++ b/src/i18n/locales/ar/group.json
@@ -28,6 +28,280 @@
     "select_group": "اختار جروب",
     "visit_q_mintership": "روح ل Q-Mintership"
   },
+  "dashboard": {
+    "qort_balance": "رصيد QORT",
+    "node_status": "حالة العقدة",
+    "node_unavailable": "العقدة غير متاحة",
+    "sync_percent": "{{percent}}% متزامن",
+    "minter_level": "مستوى المُعدِّن",
+    "peers": "الأقران",
+    "qdn": "QDN",
+    "core": "Core",
+    "hub": "Hub",
+    "node": "العقدة",
+    "using_node": "العقدة المستخدمة",
+    "change_node": "تغيير العقدة",
+    "node_type": "نوع العقدة",
+    "node_height": "ارتفاع العقدة",
+    "local_node": "عقدة محلية",
+    "public_node": "عقدة عامة",
+    "custom_node": "عقدة مخصصة",
+    "synchronizing": "جارٍ المزامنة",
+    "fully_operational": "يعمل بالكامل",
+    "not_operational": "غير يعمل",
+    "attention_needed": "يتطلب انتباهاً",
+    "apply": "تطبيق",
+    "info_panel_status": "الحالة",
+    "info_panel_node_comment": "// node_info",
+    "minter_pin_save_progress_default": "حفظ شريط المستوى كعرض افتراضي",
+    "minter_pin_save_dots_default": "حفظ نقاط التعدين كعرض افتراضي",
+    "node_switch_error": "تعذّر تبديل العقدة الآن.",
+    "node_menu_local": "عقدة محلية",
+    "node_menu_public": "عقدة عامة",
+    "qortino_runtime_title": "واجهة بطاقة QORTINO واجهت خطأ أثناء التشغيل.",
+    "qortino_runtime_body": "بقية لوحة التحكم ما زالت آمنة. حدّث Hub، وإذا تكرر ذلك أبلغ الفريق.",
+    "no_custom_nodes_saved": "لا توجد عقد مخصصة محفوظة",
+    "wallet_activity": "نشاط المحفظة",
+    "send": "إرسال",
+    "receive": "استقبال",
+    "buy": "شراء",
+    "recent_transaction": "المعاملة الأخيرة",
+    "loading_wallet_activity": "جارٍ تحميل نشاط المحفظة...",
+    "sent_to": "أُرسلت إلى ",
+    "received_from": "وُردت من ",
+    "no_wallet_activity": "لا يوجد نشاط جديد في المحفظة.",
+      "wallet_activity_window": "آخر معاملة خلال آخر 7 أيام",
+      "wallet_activity_unknown_address": "عنوان غير معروف",
+      "wallet_activity_relative_just_now": "الآن",
+      "wallet_activity_relative_minutes_ago_one": "منذ دقيقة",
+      "wallet_activity_relative_minutes_ago_other": "منذ {{count}} دقيقة",
+      "wallet_activity_relative_hours_ago_one": "منذ {{count}} ساعة",
+      "wallet_activity_relative_hours_ago_other": "منذ {{count}} ساعة",
+      "wallet_activity_relative_days_ago_one": "منذ {{count}} يوم",
+      "wallet_activity_relative_days_ago_other": "منذ {{count}} يومًا",
+      "open_in_q_chat": "افتح في Q-Chat",
+    "open_in_q_apps": "افتح في Q-Apps",
+    "quitter_feed": "موجز Quitter",
+    "quitter_show_more": "عرض المزيد",
+    "quitter_show_less": "عرض أقل",
+    "quitter_video_attachment": "مرفق فيديو",
+    "quitter_video_preview_hub": "المعاينة للقراءة فقط في Hub",
+    "featured_q_apps": "تطبيقات Q مميزة",
+    "featured_q_apps_subtitle": "شغّل تطبيقات موثوقة من المجتمع مباشرة من لوحة التحكم.",
+    "explore_all_q_apps": "استكشف كل تطبيقات Q",
+    "reduce_motion": "تقليل الحركة",
+    "account_overview": "نظرة عامة على الحساب",
+    "qortal_name_address": "اسم QORTAL والعنوان",
+    "profile": "الملف الشخصي",
+    "profile_settings": "إعدادات الملف الشخصي",
+    "profile_settings_description": "راجع اسمك وهوية حسابك.",
+    "security": "الأمان",
+    "security_settings": "إعدادات الأمان",
+    "security_settings_description": "لا تُظهر أو تنسخ مفتاحك الخاص إلا عند الضرورة القصوى.",
+    "developer": "المطوّر",
+    "developer_settings": "إعدادات المطوّر",
+    "developer_settings_description": "فعّل أدوات التطوير والتشخيص للاختبار المتقدم.",
+    "system": "النظام",
+    "system_settings": "إعدادات النظام",
+    "system_settings_description": "تحكّم في الإشعارات والحركة والتطبيقات المثبّتة والحسابات المحظورة.",
+    "current_name": "الاسم الحالي",
+    "no_name_registered": "لا يوجد اسم مسجل",
+    "wallet_address": "عنوان المحفظة",
+    "unavailable": "غير متاح",
+    "no_active_wallet": "لا توجد محفظة نشطة",
+    "names_qapp_actions_hint": "يُفضّل إجراء عمليات الشراء والبيع وتغيير الاسم في تطبيق Names Q-App.",
+    "open_the": "افتح",
+    "names": "Names",
+    "names_qapp_hint_suffix": "Q-App لشراء الأسماء أو بيعها أو تغيير اسمك المسجّل.",
+    "private_key_warning": "لا تشارك مفتاحك الخاص أبداً. من يمتلكه قد يتحكم بهذه المحفظة وأموالها.",
+    "wallet_password": "كلمة مرور المحفظة",
+    "wallet_password_placeholder": "أدخل كلمة مرور المحفظة",
+    "decrypt": "فك التشفير",
+    "copy_key": "نسخ المفتاح",
+    "private_key": "المفتاح الخاص",
+    "private_key_hint": "فعّل فك تشفير المفتاح الخاص فقط عند الحاجة لاستعادة المحفظة أو نقلها.",
+    "notifications_update_error": "تعذر تحديث إشعارات التطبيقات في الوقت الحالي.",
+    "wallet_unavailable_error": "بيانات المحفظة غير متاحة حالياً.",
+    "wallet_password_required": "أدخل كلمة مرور المحفظة لفك تشفير المفتاح الخاص.",
+    "wallet_decrypt_error_with_message": "تعذر فك تشفير محفظتك: {{message}}",
+    "wallet_decrypt_error": "تعذر فك تشفير محفظتك باستخدام هذه كلمة المرور.",
+    "private_key_copied": "تم نسخ المفتاح الخاص إلى الحافظة.",
+    "enable_dev_mode": "تفعيل وضع المطوّر",
+    "enable_dev_mode_desc": "افتح أسطح التطوير المحلية والتشخيص وأدوات الاختبار في Hub.",
+    "dev_mode_tip": "نصيحة: بعد التفعيل يظهر رمز أدوات المطوّر في الشريط الجانبي. قد تحتاج لتمرير المؤشر على الحافة اليسرى لإظهاره.",
+    "reduce_app_notifications": "تقليل إشعارات التطبيقات",
+    "reduce_app_notifications_desc": "فعّل لكتم إشعارات سطح المكتب. اتركه معطلاً لتنبيهات Hub المعتادة.",
+    "reduce_ui_animations": "تقليل حركة الواجهة",
+    "reduce_ui_animations_desc": "فعّل لتقليل الحركة في Hub. اتركه معطلاً للواجهة المتحركة الافتراضية.",
+    "pinned_qapp_backup": "نسخ احتياطي للـ Q-App المثبّتة",
+    "pinned_qapp_backup_desc": "احفظ تطبيقات Q-App المثبّتة في إعدادات QDN المشفّرة لتتبع نفس التخطيط بين الأجهزة.",
+    "manage_backup": "إدارة النسخ الاحتياطي",
+    "block_list": "قائمة الحظر",
+    "block_list_desc": "راجع الأسماء والعناوان المحظورة، ثم ألغِ حظر الحسابات عند الجاهزية.",
+    "blocked_count": "{{count}} محظور",
+    "addresses": "العناوين",
+    "unblock": "إلغاء الحظر",
+    "no_blocked_accounts": "لا توجد حسابات محظورة بعد.",
+    "show_receive_qr": "إظهار رمز QR للاستقبال",
+    "copy_address": "نسخ العنوان",
+    "privacy_mode_tooltip": "وضع الخصوصية: يُضبب المعلومات الحساسة لمشاركة الشاشة",
+    "toggle_privacy_mode": "تبديل وضع الخصوصية",
+    "send_qort": "إرسال QORT",
+    "send_qort_subtitle": "أرسل QORT إلى أي اسم مسجّل أو عنوان.",
+    "close_send_qort_modal": "إغلاق نافذة إرسال QORT",
+    "receive_qort": "استقبال QORT",
+    "receive_qort_subtitle": "امسح ضوئياً لاستقبال QORT",
+    "close_receive_qort_modal": "إغلاق نافذة استقبال QORT",
+    "download_qr": "تنزيل QR",
+    "qortal_address_or_name": "عنوان Qortal أو اسم مسجّل",
+    "blocked": "محظور",
+    "account_status_online": "متصل",
+    "account_status_busy": "مشغول",
+    "account_status_invisible": "مخفي",
+    "account_settings_tooltip": "إعدادات الحساب",
+    "open_account_settings_aria": "فتح إعدادات الحساب",
+    "name_change_confirm": "تغيير اسمك المسجّل من {{oldName}} إلى {{newName}}؟",
+    "name_change_success": "تم إرسال طلب تغيير الاسم بنجاح.",
+    "name_change_register_first": "سجّل اسمًا أولًا قبل تغييره.",
+    "name_change_enter_new_name": "أدخل الاسم الجديد الذي تريد استخدامه.",
+    "name_change_different_from_current": "اختر اسمًا مختلفًا عن الحالي.",
+    "name_change_details_still_loading": "ما زالت تفاصيل اسمك الجاري تحميلها. أعد المحاولة بعد لحظة.",
+    "name_change_choose_available": "اختر اسمًا متاحًا قبل المتابعة.",
+    "name_change_wallet_password_required": "أدخل كلمة مرور المحفظة قبل تغيير الاسم.",
+    "name_change_wallet_password_failed": "تعذّر التحقق من كلمة مرور المحفظة.",
+    "current_name_details_load_failed": "تعذّر تحميل تفاصيل اسمك الحالي.",
+    "name_change_unknown_error": "حدث خطأ أثناء تغيير الاسم.",
+    "name_availability_available": "الاسم متاح.",
+    "name_availability_checking": "جارٍ التحقق من توفر الاسم...",
+    "name_availability_same_as_current": "اختر اسمًا يختلف عن الذي تستخدمه حاليًا.",
+    "name_availability_taken": "هذا الاسم مستخدم بالفعل."
+  },
+  "groups_widget": {
+    "accept": "قبول",
+    "approve": "موافقة",
+    "cancel": "إلغاء",
+    "characters_count": "{{current}}/{{max}}",
+    "confirm_approve_request": "هل توافق على هذا الطلب وتدعوهم إلى المجموعة؟",
+    "confirm_join_group": "هل تريد الانضمام إلى هذه المجموعة الآن؟",
+    "confirm_join_promoted_closed": "هل تريد إرسال طلب انضمام إلى هذه المجموعة المُروَّجة؟",
+    "confirm_join_promoted_open": "هل تريد الانضمام إلى هذه المجموعة المُروَّجة الآن؟",
+    "connecting": "جاري الاتصال...",
+    "discover_groups": "اكتشاف المجموعات",
+    "error_accept_invite": "تعذّر قبول ذلك الدعوة حاليًا.",
+    "error_approve_request": "تعذّرت الموافقة على ذلك الطلب حاليًا.",
+    "error_load_invites": "تعذّر تحميل دعوات المجموعة حاليًا.",
+    "error_load_promotions": "تعذّر تحميل المجموعات المُروَّجة حاليًا.",
+    "error_load_requests": "تعذّر تحميل طلبات الانضمام حاليًا.",
+    "error_promoted": "تعذّر تنفيذ إجراء على تلك المجموعة المُروَّجة حاليًا.",
+    "error_publish_promotion": "تعذّر نشر ذلك الترويج حاليًا.",
+    "fresh_promotion_snippet": "هذه المجموعة لديها تحديث ترويجي جديد.",
+    "from_label": "من",
+    "group_admin_only": "لمسؤولي المجموعة فقط",
+    "group_general": "عام",
+    "group_named": "المجموعة {{id}}",
+    "ignore": "تجاهل",
+    "invitation_ready": "الدعوة جاهزة للمراجعة",
+    "invite_hidden": "تم إخفاء الدعوة من هذا الودجت مؤقتًا.",
+    "invites_empty_description": "ستظهر دعوات المجموعات الجديدة هنا عند وصولها.",
+    "invites_empty_title": "لا دعوات معلّقة",
+    "joined_group": "انضممت إلى {{name}}.",
+    "joined_promoted": "انضممت إلى {{name}}.",
+    "join_group": "انضمام إلى المجموعة",
+    "join_request_sent": "تم إرسال طلب الانضمام لـ {{name}}.",
+    "loading_invites": "جاري تحميل الدعوات",
+    "loading_notifications": "جاري تحميل الإشعارات",
+    "loading_promoted": "جاري تحميل المجموعات المُروَّجة",
+    "loading_requests": "جاري تحميل الطلبات",
+    "members_count": "{{count}} أعضاء",
+    "new_encrypted_message": "رسالة مشفّرة جديدة",
+    "notifications_empty_message": "انضمّ إلى مجتمعات في Q-Chat لملء هذا الموجز برسائل المجموعة والإشارات والنشاط.",
+    "notifications_empty_title": "ابدأ بمجموعات Q-Chat",
+    "open": "فتح",
+    "open_conversation": "فتح المحادثة",
+    "private_group": "مجموعة خاصة",
+    "private_group_invite": "دعوة إلى مجموعة خاصة",
+    "processing": "جاري المعالجة...",
+    "promoted_by": "روّجها {{name}}",
+    "promoted_empty_message": "ستظهر المجموعات المُروَّجة هنا عند توفّر محتوى مميّز جديد.",
+    "promoted_empty_title": "لا مجموعات مُروَّجة",
+    "promote_dialog_fee": " رسوم النشر: {{fee}} QORT.",
+    "promote_dialog_intro": "شارك تحديثًا قصيرًا مميّزًا لإحدى مجموعاتك التي تديرها.",
+    "promote_group": "ترويج المجموعة",
+    "promote_page_title": "روّج إحدى مجموعاتك",
+    "promotion_published": "تم نشر ترويج المجموعة.",
+    "promotion_placeholder": "اكتب ترويجًا قصيرًا لهذه المجموعة.",
+    "public_group": "مجموعة عامة",
+    "refresh": "تحديث",
+    "reject": "رفض",
+    "request_access": "طلب الوصول",
+    "request_approved": "تمت الموافقة على {{requester}} للمجموعة {{group}}.",
+    "request_removed": "تمت إزالة الطلب من هذا الودجت مؤقتًا.",
+    "request_sent": "تم إرسال الطلب",
+    "requests_empty_description": "ستظهر هنا طلبات الانضمام للمجموعات التي تديرها.",
+    "requests_empty_title": "لا طلبات معلّقة",
+    "select_admin_group": "اختر مجموعة تديرها",
+    "tab_invites": "الدعوات",
+    "tab_notifications": "الإشعارات",
+    "tab_promoted": "المُروَّجة",
+    "tab_requests": "الطلبات",
+    "unknown": "غير معروف",
+    "view_conversation": "عرض المحادثة",
+    "wants_to_join": "يريد الانضمام إلى هذه المجموعة.",
+    "you": "أنت",
+    "publish": "نشر"
+  },
+  "subscription": {
+    "subscriptions": "الاشتراكات",
+    "tooltip_actions_needed_one": "{{title}} - مطلوب إجراء {{count}}",
+    "tooltip_actions_needed_other": "{{title}} - مطلوب {{count}} إجراءات",
+    "relative_soon": "قريباً",
+    "relative_in_minutes_one": "خلال {{count}} دقيقة",
+    "relative_in_minutes_other": "خلال {{count}} دقيقة",
+    "relative_in_hours_one": "خلال {{count}} ساعة",
+    "relative_in_hours_other": "خلال {{count}} ساعات",
+    "relative_in_days_one": "خلال {{count}} يوم",
+    "relative_in_days_other": "خلال {{count}} أيام",
+    "relative_in_months_one": "خلال {{count}} شهر",
+    "relative_in_months_other": "خلال {{count}} أشهر",
+    "row_fallback_title": "اشتراك",
+    "by_creator": "بواسطة {{name}}",
+    "creator_fallback": "منشئ Qortal",
+    "price_line": "{{price}} QORT / {{interval}}",
+    "expires_suffix": " - ينتهي {{time}}",
+    "status_due": "مستحق",
+    "status_active": "نشط",
+    "status_owner": "مالك",
+    "managed_fallback": "اشتراك مُدار",
+    "members_one": "{{count}} عضو",
+    "members_other": "{{count}} أعضاء",
+    "join_requests_suffix_one": " - {{count}} طلب انضمام",
+    "join_requests_suffix_other": " - {{count}} طلبات انضمام",
+    "re_encryption_suffix": " - يلزم إعادة التشفير",
+    "actions_badge_one": "{{count}} إجراء",
+    "actions_badge_other": "{{count}} إجراءات",
+    "loading": "جاري تحميل الاشتراكات",
+    "section_needs_action": "يحتاج إجراء",
+    "section_active": "نشطة",
+    "open_subscriptions": "فتح الاشتراكات",
+    "empty_title": "اكتشف تطبيقات Q-App المدعومة بالاشتراك",
+    "empty_body": "اشترك عند المبدعين والمجتمعات من تطبيقات Q-App التي تدعم الاشتراكات، مثل SubWire.",
+    "open_subwire": "فتح SubWire",
+    "tab_subscriptions": "الاشتراكات",
+    "tab_subwire": "SubWire"
+  },
+  "group_invites": {
+    "empty_title": "لا توجد دعوات",
+    "empty_secondary_1": "ليس لديك دعوات معلقة",
+    "empty_secondary_2": "في الوقت الحالي.",
+    "empty_tertiary_no_groups": "أنت لم تنضم إلى أي مجموعات بعد.",
+    "cta_find_groups": "البحث عن مجموعات"
+  },
+  "group_join_requests": {
+    "empty_title": "لا توجد طلبات انضمام",
+    "empty_secondary_1": "ليس لديك طلبات معلقة",
+    "empty_secondary_2": "في الوقت الحالي.",
+    "empty_tertiary_no_admin_groups": "أنت لا تدير أي مجموعات بعد."
+  },
   "advanced_options": "خيارات متقدمة",
   "block_delay": {
     "minimum": "أقل وقت بين البلوكات",
@@ -72,6 +346,8 @@
     "generic": {
       "avatar_publish_fee": "نشر الصورة الشخصية يتطلب {{ fee }}",
       "avatar_registered_name": "مطلوب اسم مسجل لتحديد صورة شخصية",
+      "add_new_key_option": "إضافة مفتاح جديد",
+      "add_new_key_sparingly": "يُفضّل إضافة مفتاح جديد بحذر لتجنّب زيادة حجم مفاتيح المجموعة.",
       "admin_only": "هتظهر بس الجروبات اللي انت أدمن فيها",
       "already_in_group": "أنت بالفعل في الجروب ده!",
       "block_delay_minimum": "أقل تأخير للبلوك للموافقة على معاملات الجروب",
@@ -105,6 +381,7 @@
       "node_minting_key": "عندك بالفعل مفتاح تعدين لهذا الحساب على النود ده",
       "no_announcement": "مفيش إعلانات",
       "no_display": "مفيش حاجة للعرض",
+      "no_description": "لا يوجد وصف",
       "no_selection": "مفيش جروب محدد",
       "not_part_group": "انت مش من أعضاء الجروب المشفر، استنى لحد ما الأدمن يشفر المفاتيح تاني",
       "only_encrypted": "هتظهر بس الرسائل المشفرة",
@@ -134,7 +411,6 @@
     },
     "success": {
       "group_ban": "تم حظر العضو من الجروب بنجاح. التغييرات ممكن تاخد دقائق عشان تظهر",
-
       "group_creation": "تم إنشاء الجروب بنجاح. التغييرات ممكن تاخد دقائق عشان تظهر",
       "group_creation_name": "تم إنشاء الجروب {{group_name}}: في انتظار التأكيد",
       "group_creation_label": "تم إنشاء الجروب {{group_name}}: نجاح!",
@@ -171,5 +447,11 @@
       "user_joined": "تم انضمام المستخدم بنجاح!"
     }
   },
+  "context_menu": {
+    "mark_as_read": "وضع علامة مقروء",
+    "mute_push_notifications": "كتم إشعارات الدفع",
+    "unmute_push_notifications": "إلغاء كتم إشعارات الدفع",
+    "mark_all_read": "وضع علامة مقروء على الكل"
+  },
   "thread_posts": "بُوستات جديدة في الموضوع"
 }
diff --git a/src/i18n/locales/ar/node.json b/src/i18n/locales/ar/node.json
index 7553c091..1c41c84c 100644
--- a/src/i18n/locales/ar/node.json
+++ b/src/i18n/locales/ar/node.json
@@ -40,7 +40,8 @@
     "invalidKey": "مفتاح API غير صالح",
     "failed_stop": "تعذر إيقاف النواة",
     "failed_bootstrap": "تعذر التمهيد",
-    "failed_delete": "تعذر حذف قاعدة البيانات"
+    "failed_delete": "تعذر حذف قاعدة البيانات",
+    "failed_bootstrap_or_clear": "تعذر التمهيد أو مسح بيانات السلسلة أو تشغيل Core"
   },
   "status": {
     "complete": "مكتمل",
@@ -81,7 +82,12 @@
   "confirmations": {
     "stop": "هل أنت متأكد أنك تريد إيقاف النواة؟",
     "bootstrap": "هل أنت متأكد أنك تريد التمهيد؟",
-    "delete": "هل أنت متأكد أنك تريد حذف قاعدة البيانات؟"
+    "delete": "هل أنت متأكد أنك تريد حذف قاعدة البيانات؟",
+    "bootstrapOrClearChain": "يُنفَّذ التمهيد من اللقطة عند تشغيل Core محليًا. إن تعذَّر ذلك أو فشل التمهيد، فقد تُزال قاعدة بيانات السلسلة المحلية ويُعاد تشغيل Core؛ لا تُغيَّر ملفات المحفظة. متابعة؟"
+  },
+  "bootstrapChainHelp": {
+    "title": "تمهيد السلسلة",
+    "body": "إجراء واحد: تمهيد من اللقطة عندما يستجيب Core؛ أو مسح قاعدة بيانات السلسلة المحلية ثم تشغيل Core من جديد عند تعذُّر التمهيد. المحفظة مخزَّنة على حدة."
   },
   "stop": "إيقاف النواة",
   "bootstrap": "تمهيد",
@@ -89,6 +95,53 @@
   "more": "خيارات إضافية",
   "less": "خيارات أقل",
   "enableAuthWhenSyncing": "تمكين المصادقة عند المزامنة",
+  "coreSetupDialog": {
+    "title": "إعداد Qortal Core",
+    "introTitle": "شغّل عقدتك الخاصة محليًا.",
+    "introSubtitle": "يمكنك استخدام عقدة عامة أثناء بدء Core ومزامنته.",
+    "publicNodeUnavailable": "العقد العامة غير متاحة حاليًا. اترك هذه الشاشة مفتوحة أثناء بدء Core المحلي ومزامنته.",
+    "steps": {
+      "downloadDone": "تم تنزيل Core",
+      "downloadActive": "جاري تنزيل Core",
+      "downloadIdle": "تنزيل Core",
+      "runningDone": "Core يعمل",
+      "runningActive": "جاري بدء Core",
+      "runningIdle": "بدء Core"
+    },
+    "readyToDownload": "جاهز للتنزيل",
+    "readyToStart": "جاهز للبدء",
+    "syncing": "جاري المزامنة",
+    "helpers": {
+      "downloadDone": "ملفات Core مثبتة وجاهزة.",
+      "downloadActive": "جاري تنزيل Qortal Core وإعداده.",
+      "downloadIdle": "نزّل Qortal Core لتشغيل عقدتك الخاصة.",
+      "runningDoneSyncing": "Core يعمل ويزامن بيانات السلسلة.",
+      "runningDone": "Core يعمل محليًا.",
+      "runningWaiting": "سيبدأ Core ويمزامن في الخلفية.",
+      "runningBlocked": "متاح بعد تنزيل Core."
+    },
+    "nextStepPill": "الخطوة التالية",
+    "locationTitle": "موقع Core",
+    "locationCustom": "سيتم تشغيل Qortal Core من هذا المجلد.",
+    "locationDefault": "سيستخدم Qortal Core المجلد الافتراضي لهذا النظام.",
+    "locationPathDefault": "موقع Qortal Core الافتراضي",
+    "change": "تغيير",
+    "choose": "اختيار",
+    "clear": "مسح",
+    "advancedTitle": "متقدم",
+    "advancedSubtitle": "أدوات وخيارات متقدمة لـ Core.",
+    "maintenanceUnavailable": "أدوات صيانة Core غير متاحة أثناء بدء Core أو مزامنته.",
+    "stopCoreTitle": "إيقاف Core",
+    "stopCoreBody": "يوقف عملية Core المحلية.",
+    "stopButton": "إيقاف",
+    "cancel": "إلغاء",
+    "actionDownload": "تنزيل Core",
+    "actionStart": "بدء Core",
+    "actionDone": "تم",
+    "confirmTitle": "تأكيد الإجراء",
+    "folderCopied": "تم نسخ مجلد Core",
+    "progressAriaLabel": "تقدّم {{label}}"
+  },
   "NotFullyStarted": {
     "titleNotReady": "Core لم يبدأ بالكامل بعد",
     "descNotReady": "Qortal Core لم يبدأ بالكامل بعد. الرجاء الانتظار.",
diff --git a/src/i18n/locales/ar/question.json b/src/i18n/locales/ar/question.json
index a2a3a8a6..2bb4185b 100644
--- a/src/i18n/locales/ar/question.json
+++ b/src/i18n/locales/ar/question.json
@@ -152,8 +152,12 @@
     "invite": "هل تسمح للتطبيق بدعوة {{ invitee }}؟",
     "kick": "هل تسمح للتطبيق بطرد {{ partecipant }} من الجروب؟",
     "leave_group": "هل تسمح للتطبيق بمغادرة الجروب الآتي؟",
-    "list_hosted_data": "هل تسمح للتطبيق بجلب قائمة ملفاتك المضيفة؟",
-    "order_detail": "{{ qort_amount }}  مقابل عملة كورتال {{ foreign_amount }} {{ ticker }}",
+      "list_hosted_data": "هل تسمح للتطبيق بجلب قائمة ملفاتك المضيفة؟",
+      "notification": "السماح لهذا التطبيق بإرسال إشعارات الـ Hub إليك؟",
+      "notification_allow": "السماح",
+      "notification_dont_allow": "عدم السماح",
+      "notification_title": "إشعارات {{ appName }}",
+      "order_detail": "{{ qort_amount }}  مقابل عملة كورتال {{ foreign_amount }} {{ ticker }}",
     "pay_publish": "هل تسمح للتطبيق بعمل عمليات الدفع والنشر الآتية؟",
     "perform_admin_action_with_value": "بقيمة: {{ value }}",
     "perform_admin_action": "هل تسمح للتطبيق بعمل الإجراء الإداري: {{ type }}؟",
diff --git a/src/i18n/locales/ar/tutorial.json b/src/i18n/locales/ar/tutorial.json
index b4e9e8ab..692c00da 100644
--- a/src/i18n/locales/ar/tutorial.json
+++ b/src/i18n/locales/ar/tutorial.json
@@ -33,6 +33,7 @@
     "get_six_qorts_way3_action": "فتح Q-Trade",
     "register_name": "سجل اسمك",
     "confirming_transaction": "جاري تأكيد المعاملة",
+    "confirming": "جارٍ التأكيد",
     "load_avatar": "تحميل الصورة الرمزية",
     "explore_apps": "استكشف التطبيقات المميزة",
     "done": "تم",
@@ -53,6 +54,17 @@
     "devnet_testing_desc": "اختبر تطبيقات Q-Apps في بيئة DevNet-Testing",
     "open_app": "فتح",
     "address_copied": "تم نسخ العنوان إلى الحافظة",
-    "group_activity": "نشاط المجموعة"
+    "group_activity": "نشاط المجموعة",
+    "get_qorts_workspace_hint": "حرِّر أول ‎٦‎ QORT لديك لتفعيل باقي الإعداد.",
+    "register_name_workspace_hint": "الاسم المسجَّل يحوّل هذا الحساب إلى هوية مُعرَّفة.",
+    "load_avatar_workspace_hint": "امنح لوحة التحكم وجهاً لتشعر أن المكان يخصّك.",
+    "onboarding_transition_hard_part_done": "أحسنت. أنهيت الجزء الأصعب.",
+    "onboarding_transition_one_more": "رائع. بقي خطوة واحدة.",
+    "onboarding_press_next_when_ready": "أحسنت. أنهيت الجزء الأصعب. اضغط التالي عندما تكون مستعدًا.",
+    "register_name_pending_hint": "يجري حفظ الاسم على السلسلة؛ قد يستغرق لحظة.",
+    "persistent_guide_get_qorts": "لنبدأ بـ‎٦‎ QORT. اختر أي خيار أعلاه.",
+    "persistent_guide_register_name": "بعد ذلك سجِّل اسمك.",
+    "persistent_guide_load_avatar": "وأخيرًا أضف صورة رمزية.",
+    "post_onboarding_workspace_ready": "تمّ كل شيء. يمكنك البدء ببناء مساحة العمل أعلاه."
   }
 }
diff --git a/src/i18n/locales/de/auth.json b/src/i18n/locales/de/auth.json
index 469a4245..00ab7638 100644
--- a/src/i18n/locales/de/auth.json
+++ b/src/i18n/locales/de/auth.json
@@ -74,8 +74,11 @@
       "set_apikey": "API-Schlüssel konnte nicht gesetzt werden:"
     },
     "generic": {
+      "block_list_intro": "Füge einen Qortal-Namen oder eine Adresse hinzu, um zu blockieren. Adressen wirken auf Transaktionen; das Blockieren eines Namens blendet Daten im gesamten Hub aus.",
       "blocked_addresses": "Blockierte Adressen – verhindert TX-Verarbeitung",
+      "blocked_addresses_hint": "Blockiert die Verarbeitung von Transaktionen von diesen Adressen.",
       "blocked_names": "Blockierte Namen für QDN",
+      "blocked_names_hint": "Diese Namen sind für QDN-, Hub-Daten und soziale Funktionen gesperrt.",
       "blocking": "{{ name }} wird blockiert",
       "choose_block": "Wähle 'TXs blockieren' oder 'alles', um Chat-Nachrichten zu blockieren",
       "congrats_setup": "Glückwunsch, alles ist eingerichtet!",
@@ -88,6 +91,7 @@
       "locating_encryption_keys": "Verschlüsselungsschlüssel werden gesucht",
       "insert_name_address": "Bitte gib einen Namen oder eine Adresse ein, um eine private Unterhaltung zu starten.",
       "name_address": "Name oder Adresse",
+      "no_blocked_users": "Noch niemand blockiert. Oben Adresse oder Namen hinzufügen, wenn du jemanden ausblenden möchtest.",
       "no_account": "Keine Konten gespeichert",
       "no_minimum_length": "Keine Mindestlänge erforderlich",
       "no_secret_key_published": "Noch kein Secret Key veröffentlicht",
@@ -142,6 +146,159 @@
   },
   "welcome": "Willkommen bei",
   "store_account": "Konto im Hub speichern",
+  "create_wallet": {
+    "error_enter_password": "Gib ein Wallet-Passwort ein.",
+    "error_confirm_password": "Bestätige dein Wallet-Passwort.",
+    "error_passwords_mismatch": "Die Passwörter stimmen nicht überein.",
+    "success_wallet_saved": "Wallet gespeichert",
+    "success_account_created": "Konto erstellt",
+    "success_ready_hub": "Du kannst jetzt den Hub betreten.",
+    "success_backup_before_hub": "Sichere dein verschlüsseltes Wallet, bevor du den Hub betrittst.",
+    "enter_hub": "Hub öffnen",
+    "download_another_copy": "Weitere Kopie herunterladen",
+    "backup_wallet": "Wallet sichern",
+    "backup_encrypted_notice": "Diese Sicherung ist mit deinem Wallet-Passwort verschlüsselt.",
+    "seed_title": "Deine Seedphrase",
+    "seed_subtitle": "Damit kannst du dein Konto wiederherstellen. Das Speichern der Seedphrase ist optional. Als Nächstes folgt dein verschlüsseltes Wallet-Backup – empfohlene Methode zur Wiederherstellung.",
+    "reveal": "Einblenden",
+    "copied": "Kopiert",
+    "copy": "Kopieren",
+    "export": "Exportieren",
+    "seed_warning": "Teile sie niemandem mit. Wer sie hat, kann auf dein Konto zugreifen. Für den täglichen Schutz verwende nach der Erstellung das verschlüsselte Wallet-Backup.",
+    "create_account": "Konto erstellen",
+    "password_title": "Passwort erstellen",
+    "password_subtitle": "Dieses Passwort schützt dein Konto auf diesem Gerät.",
+    "wallet_password": "Wallet-Passwort",
+    "confirm_password": "Passwort bestätigen",
+    "save_account_in_hub": "Konto im Hub speichern",
+    "continue": "Weiter"
+  },
+  "import_account": {
+    "title": "Konto importieren",
+    "subtitle": "Wählen Sie, wie Sie Ihr Konto wiederherstellen möchten."
+  },
+  "backup_wallet_modal": {
+    "subtitle": "Laden Sie eine lokale Wallet-Datei herunter, um dieses Konto später wiederherzustellen.",
+    "info_note": "Dies exportiert eine Wallet-Datei lokal auf Ihrem Gerät. Bewahren Sie sie an einem sicheren Ort auf.",
+    "current_password": "Aktuelles Passwort",
+    "keep_password_in_export": "Aktuelles Passwort in der exportierten Wallet-Datei beibehalten",
+    "new_password_for_backup": "Neues Passwort für dieses Backup",
+    "download_wallet_file": "Wallet-Datei herunterladen",
+    "error_no_active_wallet": "Für das Backup wurde keine aktive Wallet gefunden.",
+    "error_unable_to_create_backup": "Das Wallet-Backup konnte nicht erstellt werden."
+  },
+  "wallet_errors": {
+    "unable_to_unlock_default": "dieses Wallet kann nicht entsperrt werden.",
+    "unable_to_save_backup": "das Wallet-Backup konnte nicht gespeichert werden.",
+    "unable_to_prepare_backup": "das Wallet-Backup konnte nicht vorbereitet werden.",
+    "account_not_found": "dieses gespeicherte Konto wurde nicht gefunden. Wähle ein anderes Konto oder stelle dieses Wallet aus einem Backup wieder her.",
+    "account_incomplete": "dieses gespeicherte Konto wirkt unvollständig oder beschädigt. Wähle ein anderes Konto oder stelle dieses Wallet aus einem Backup wieder her.",
+    "invalid_security_data": "dieses gespeicherte Konto enthält ungültige Wallet-Sicherheitsdaten. Wähle ein anderes Konto oder stelle dieses Wallet aus einem Backup wieder her.",
+    "missing_encrypted_seed": "bei diesem gespeicherten Konto fehlt der verschlüsselte Seed (die gesperrten Wallet-Daten zum Entsperren). Wähle ein anderes Konto oder stelle dieses Wallet aus einem Backup wieder her.",
+    "missing_field": "bei diesem gespeicherten Konto fehlt {{field}}. Wähle ein anderes Konto oder stelle dieses Wallet aus einem Backup wieder her.",
+    "field": {
+      "address0": "Wallet-Adresse",
+      "encryptedSeed": "verschlüsselter Seed (die gesperrten Wallet-Daten zum Entsperren)",
+      "iv": "Wallet-Verschlüsselungsdaten",
+      "kdfThreads": "Wallet-Passworteinstellungen",
+      "mac": "Wallet-Integritätsprüfung",
+      "salt": "Salt für die Wallet-Passwortsicherheit",
+      "version": "Wallet-Version"
+    }
+  },
+  "connection_mode": {
+    "title": "Verbindungsmodus",
+    "subtitle": "Wählen Sie, wie sich Qortal mit dem Netzwerk verbindet.",
+    "local_title": "Lokaler Knoten",
+    "recommended": "Empfohlen",
+    "local_full_decentralized": "Voller dezentralisierter Zugriff",
+    "local_faster": "Schnellere Leistung",
+    "local_data_local": "Ihre Daten bleiben lokal",
+    "public_title": "Öffentlicher Knoten",
+    "public_quick": "Schneller Zugang",
+    "public_limited_decentralization": "Eingeschränkte Dezentralisierung",
+    "public_shared_infrastructure": "Gemeinsame Infrastruktur",
+    "status_running": "Core läuft",
+    "status_missing": "Core nicht erkannt",
+    "status_checking": "Lokaler Knoten wird geprüft",
+    "section_custom_nodes": "Benutzerdefinierte Knoten",
+    "add_custom_node": "Knoten hinzufügen",
+    "empty_custom_nodes": "Keine eigenen Knoten gespeichert",
+    "manual_setup_link": "Manuelle Knoten-Einrichtung",
+    "save_settings": "Einstellungen speichern",
+    "manual_edit_title": "Eigenen Knoten bearbeiten",
+    "manual_add_title": "Manuelle Knoten-Einrichtung",
+    "field_name": "Name",
+    "placeholder_node_name": "Mein Qortal-Knoten",
+    "field_node_url": "Knoten-URL",
+    "placeholder_node_url": "https://127.0.0.1:12391",
+    "field_api_key_optional": "API-Schlüssel (optional)",
+    "placeholder_api_key": "API-Schlüssel eingeben",
+    "reload_after_new_node_title": "Neustart erforderlich",
+    "reload_after_new_node_message": "Sie haben einen neuen Knoten hinzugefügt. Die App muss neu geladen werden.",
+    "reload_after_new_node_button": "App neu laden"
+  },
+  "intro_features": {
+    "secure_title": "Sicher & privat",
+    "secure_text": "Ihre Schlüssel, Ihre Daten – immer unter Ihrer Kontrolle.",
+    "fast_title": "Schneller Zugang",
+    "fast_text": "Entsperren und sofort in Ihr Qortal-Erlebnis einsteigen.",
+    "decentralized_title": "Dezentral",
+    "decentralized_text": "Verbinden Sie sich mit dem Netzwerk nach Ihren Bedingungen.",
+    "built_title": "Für Sie gemacht",
+    "built_text": "Ein Konto. Unendliche Möglichkeiten."
+  },
+  "entry": {
+    "title": "Qortal betreten",
+    "subtitle": "Auf dein Konto zugreifen oder eines erstellen.",
+    "create_account": "Konto erstellen",
+    "import_account": "Konto importieren",
+    "no_accounts": "Auf diesem Gerät wurden keine Konten gefunden.",
+    "import_choice_backup_title": "Backup-Datei",
+    "import_choice_backup_description": "Ein gespeichertes Hub-Backup importieren.",
+    "import_choice_authenticate_title": "Jetzt authentifizieren",
+    "import_choice_authenticate_description": "Eine Backup-Datei verwenden, ohne sie zu speichern.",
+    "import_choice_seed_title": "Seedphrase",
+    "import_choice_seed_description": "Mit deiner Seedphrase wiederherstellen.",
+    "import_backup_heading": "Aus Backup-Datei importieren",
+    "import_backup_drop_hint": "Backup-Datei hierher ziehen oder zum Auswählen klicken.",
+    "import_authenticate_heading": "Mit Backup-Datei authentifizieren",
+    "import_authenticate_drop_hint": "Backup-Datei hierher ziehen oder zum Auswählen klicken. Sie wird auf diesem Gerät nicht gespeichert.",
+    "import_seed_label": "Seedphrase",
+    "import_seed_placeholder": "Seedphrase eingeben",
+    "import_wallet_password": "Wallet-Passwort",
+    "importing_account": "Konto wird importiert...",
+    "seed_import_error": "Diese Seedphrase konnte nicht importiert werden.",
+    "seed_import_duplicate": "Dieses Konto ist auf diesem Gerät bereits gespeichert.",
+    "seed_import_success": "Konto erfolgreich importiert.",
+    "import_backup_success_one": "{{count}} Konto erfolgreich importiert.",
+    "import_backup_success_other": "{{count}} Konten erfolgreich importiert.",
+    "import_backup_duplicate": "Diese Konten sind auf diesem Gerät bereits gespeichert.",
+    "import_backup_invalid": "Diese Backup-Datei enthält kein gültiges Konto.",
+    "import_file_read_aborted": "Dateilesen wurde abgebrochen",
+    "import_file_read_failed": "Dateilesen ist fehlgeschlagen",
+    "filter_accounts_aria": "Konten nach Adresse, primärem Namen oder Notiz filtern",
+    "filter_placeholder": "Adresse, primärer Name oder Notiz…",
+    "filter_no_results": "Keine Konten passen.",
+    "filter_clear": "Suche leeren",
+    "wallet_edit_name_label": "Name",
+    "wallet_edit_account_name_placeholder": "Kontoname",
+    "wallet_edit_note_label": "Notiz",
+    "wallet_edit_note_placeholder": "Optionale Notiz",
+    "wallet_edit_remove": "Entfernen",
+    "wallet_edit_save": "Speichern",
+    "wallet_edit_aria_label": "Name und Notiz bearbeiten"
+  },
+  "authentication_form": {
+    "unnamed_account": "Unbenanntes Konto",
+    "password_placeholder": "Passwort eingeben",
+    "unlock": "Entsperren",
+    "choose_another_account": "Anderes Konto wählen",
+    "using_local_node": "Lokaler Knoten",
+    "using_public_node": "Öffentlicher Knoten",
+    "using_custom_node": "Benutzerdefinierter Knoten"
+  },
+
   "temp_auth": {
     "tooltip": "Authentifizieren ohne Ihr Konto im Hub zu speichern",
     "button": "temporäre Auth."
diff --git a/src/i18n/locales/de/core.json b/src/i18n/locales/de/core.json
index 1c8ed438..fe43c92b 100644
--- a/src/i18n/locales/de/core.json
+++ b/src/i18n/locales/de/core.json
@@ -7,6 +7,7 @@
     "add_custom_framework": "Fügen Sie benutzerdefiniertes Framework hinzu",
     "add_reaction": "Reaktion hinzufügen",
     "add_theme": "Thema hinzufügen",
+    "back": "zurück",
     "backup_account": "Sicherungskonto",
     "backup_wallet": "Backup -Brieftasche",
     "cancel": "stornieren",
@@ -96,7 +97,7 @@
     "start_typing": "Fangen Sie hier an, hier zu tippen ...",
     "trade_qort": "Handel Qort",
     "transfer_qort": "Qort übertragen",
-    "unpin": "unpin",
+    "unpin": "loslösen",
     "unpin_app": "UNPIN App",
     "unpin_from_dashboard": "Unpin aus dem Dashboard",
     "update": "aktualisieren",
@@ -132,11 +133,11 @@
   "core": {
     "block_height": "Blockhöhe",
     "data_peers": "QDN (Daten) Peers",
-    "information": "Kerninformationen",
+    "information": "Core-Informationen",
     "peers": "Gefahrene Kollegen",
-    "version": "Kernversion"
+    "version": "Core-Version"
   },
-  "current_language": "current language: {{ language }}",
+  "current_language": "Aktuelle Sprache: {{ language }}",
   "dev": "Dev",
   "dev_mode": "Dev -Modus",
   "developer": {
@@ -208,7 +209,7 @@
       "encrypt_app": "App kann nicht verschlüsseln. App nicht veröffentlicht '",
       "fetch_app": "App kann nicht abrufen",
       "fetch_publish": "Veröffentlichung kann nicht abrufen",
-      "file_too_large": "file {{ filename }} is too large. Max size allowed is {{ size }} MB.",
+      "file_too_large": "Datei {{ filename }} ist zu groß. Maximal erlaubt sind {{ size }} MB.",
       "generic": "Ein Fehler ist aufgetreten",
       "initiate_download": "Download nicht einleiten",
       "invalid_amount": "ungültiger Betrag",
@@ -220,10 +221,10 @@
       "invalid_theme_format": "Ungültiges Themenformat",
       "invalid_zip": "Ungültiges Reißverschluss",
       "message_loading": "Fehlerladelademeldung.",
-      "message_size": "your message size is of {{ size }} bytes out of a maximum of {{ maximum }}",
+      "message_size": "Ihre Nachricht hat {{ size }} Bytes, maximal erlaubt sind {{ maximum }} Bytes.",
       "minting_account_add": "Es kann kein Münzkonto hinzufügen",
       "minting_account_remove": "Münzkonto kann nicht entfernen",
-      "missing_fields": "missing: {{ fields }}",
+      "missing_fields": "Fehlt: {{ fields }}",
       "navigation_timeout": "Navigationszeitüberschreitung",
       "network_generic": "Netzwerkfehler",
       "password_not_matching": "Passwortfelder stimmen nicht überein!",
@@ -239,14 +240,16 @@
     },
     "generic": {
       "already_voted": "Sie haben bereits gestimmt.",
-      "avatar_size": "{{ size }} KB max. for GIFS",
+      "avatar_size": "Max. {{ size }} KB für GIFs",
       "benefits_qort": "Vorteile von Qort",
       "building": "Gebäude",
       "building_app": "App -App",
-      "created_by": "created by {{ owner }}",
-      "buy_order_request": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy order</span>",
-      "buy_order_request_other": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy orders</span>",
+      "created_by": "erstellt von {{ owner }}",
+      "buy_order_request": "Die Anwendung <br/><italic>{{hostname}}</italic> <br/><span>fordert {{count}} Kaufauftrag an</span>",
+      "buy_order_request_other": "Die Anwendung <br/><italic>{{hostname}}</italic> <br/><span>fordert {{count}} Kaufaufträge an</span>",
       "devmode_local_node": "Bitte verwenden Sie Ihren lokalen Knoten für den Dev -Modus! Melden Sie sich an und verwenden Sie den lokalen Knoten.",
+      "disable_os_push": "OS-Push deaktivieren",
+      "disable_os_push_desc": "Desktop-Benachrichtigungen für diese App stummschalten, während die Aktivität im Hub sichtbar bleibt.",
       "downloading": "Herunterladen",
       "downloading_decrypting_app": "private App herunterladen und entschlüsseln.",
       "edited": "bearbeitet",
@@ -254,28 +257,39 @@
       "encrypted": "verschlüsselt",
       "encrypted_not": "nicht verschlüsselt",
       "amount_qort": "betrag: {{ amount }} QORT",
-      "fee_qort": "fee: {{ fee }} QORT",
+      "app_notifications_hint": "Q-App-Benachrichtigungen werden hier angezeigt",
+      "fee_qort": "Gebühr: {{ fee }} QORT",
       "fetching_data": "App -Daten abrufen",
-      "foreign_fee": "foreign fee: {{ fee }}",
+      "foreign_fee": "Fremdgebühr: {{ fee }}",
       "get_qort_trade_portal": "Holen Sie sich QORT mit dem CrossChain -Handelsportal von Qortal",
+      "loading": "Laden...",
       "minimal_qort_balance": "Wenn du mindestens {{ quantity }} QORT auf deinem Guthaben hast, kannst du Chatnachrichten nahezu in Echtzeit senden.",
       "mentioned": "erwähnt",
+      "new_notification_from": "Neue Benachrichtigung von {{ appName }}",
+      "new_payment_body": "Sie haben {{ amount }} QORT erhalten.",
+      "new_payment_received": "Neue Zahlung erhalten",
+      "new_qmail": "Du hast eine neue Q-Mail",
       "message_with_image": "Diese Nachricht hat bereits ein Bild",
-      "most_recent_payment": "{{ count }} most recent payment",
-      "name_available": "{{ name }} is available",
+      "most_recent_payment": "{{ count }} neueste Zahlung",
+      "name_available": "{{ name }} ist verfügbar",
       "name_benefits": "Vorteile eines Namens",
       "name_checking": "Überprüfen Sie, ob der Name bereits vorhanden ist",
       "name_preview": "Sie benötigen einen Namen, um die Vorschau zu verwenden",
       "name_publish": "Sie benötigen einen Qortalnamen, um zu veröffentlichen",
       "name_rate": "Sie benötigen einen Namen, um zu bewerten.",
       "name_registration": "Dein Guthaben beträgt {{ balance }} QORT. Für die Namensregistrierung wird eine Gebühr von {{ fee }} QORT fällig.",
-      "name_unavailable": "{{ name }} is unavailable",
+      "name_unavailable": "{{ name }} ist nicht verfügbar",
+      "no_app_notifications": "Noch keine App-Benachrichtigungen",
       "no_data_image": "Keine Daten für das Bild",
       "no_description": "Keine Beschreibung",
       "no_messages": "Keine Nachrichten",
       "no_message": "Keine Nachricht",
       "no_minting_details": "Müngungsdetails auf dem Gateway können nicht angezeigt werden",
+      "no_notification_apps": "Noch keine Apps mit Benachrichtigungsberechtigung.",
       "no_notifications": "Keine neuen Benachrichtigungen",
+      "notification_settings": "Benachrichtigungseinstellungen",
+      "notification_settings_desc": "Wählen Sie, welche Apps Desktop-Benachrichtigungen senden dürfen, während die Aktivität im Hub sichtbar bleibt.",
+      "notifications": "Benachrichtigungen",
       "no_payments": "Keine Zahlungen",
       "no_pinned_changes": "Sie haben derzeit keine Änderungen an Ihren angestellten Apps",
       "no_results": "Keine Ergebnisse",
@@ -285,17 +299,18 @@
       "overwrite_qdn": "überschreibt zu QDN",
       "password_confirm": "Bitte bestätigen Sie ein Passwort",
       "password_enter": "Bitte geben Sie ein Passwort ein",
-      "payment_request": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting a payment</span>",
-      "people_reaction": "people who reacted with {{ reaction }}",
+      "payment_request": "Die Anwendung <br/><italic>{{hostname}}</italic> <br/><span>fordert eine Zahlung an</span>",
+      "people_reaction": "Personen, die mit {{ reaction }} reagiert haben",
       "processing_transaction": "Ist die Verarbeitung von Transaktionen, bitte warten ...",
       "publish_data": "Veröffentlichung von Daten an Qortal: Alles, von Apps bis hin zu Videos. Voll dezentral!",
       "publishing": "Veröffentlichung ... bitte warten.",
       "qdn": "Verwenden Sie QDN Saving",
-      "rating": "rating for {{ service }} {{ name }}",
+      "rating": "Bewertung für {{ service }} {{ name }}",
       "register_name": "Sie benötigen einen registrierten Qortal -Namen, um Ihre angestellten Apps vor QDN zu speichern.",
-      "replied_to": "replied to {{ person }}",
+      "replied_to": "antwortete {{ person }}",
       "revert_default": "zurück zu Standard zurückkehren",
       "revert_qdn": "zurück zu QDN zurückkehren",
+      "revoke_permission": "Widerrufen",
       "save_qdn": "speichern auf qdn",
       "secure_ownership": "Sicheres Eigentum an Daten, die mit Ihrem Namen veröffentlicht wurden. Sie können Ihren Namen sogar zusammen mit Ihren Daten an einen Dritten verkaufen.",
       "select_file": "Bitte wählen Sie eine Datei aus",
@@ -307,7 +322,8 @@
       "unread_messages": "ungelesene Nachrichten unten",
       "unsaved_changes": "sie haben nicht gespeicherte Änderungen an Ihren angestellten Apps. Speichern Sie sie bei QDN.",
       "updating": "aktualisierung",
-      "wait": "bitte warten"
+      "wait": "bitte warten",
+      "open_q_trade_subtitle": "Öffne Q-Trade und kaufe QORT über das Handelsportal."
     },
     "message": "Nachricht",
     "promotion_text": "Promotionstext",
@@ -316,17 +332,17 @@
       "logout": "Sind Sie sicher, dass Sie sich abmelden möchten?",
       "new_user": "Sind Sie ein neuer Benutzer?",
       "delete_chat_image": "Möchten Sie Ihr vorheriges Chat -Bild löschen?",
-      "perform_transaction": "would you like to perform a {{action}} transaction?",
+      "perform_transaction": "Möchten Sie eine {{action}}-Transaktion ausführen?",
       "provide_thread": "Bitte geben Sie einen Thread -Titel an",
       "publish_app": "Möchten Sie diese App veröffentlichen?",
       "publish_avatar": "Möchten Sie einen Avatar veröffentlichen?",
       "publish_qdn": "Möchten Sie Ihre Einstellungen an QDN veröffentlichen (verschlüsselt)?",
       "overwrite_changes": "Die App konnte Ihre vorhandenen QDN-Saved-Apps nicht herunterladen. Möchten Sie diese Änderungen überschreiben?",
-      "rate_app": "would you like to rate this app a rating of {{ rate }}?. It will create a POLL tx.",
+      "rate_app": "Möchten Sie dieser App die Bewertung {{ rate }} geben? Es sind {{ days }} Tage bis zur nächsten Bewertung.",
       "register_name": "Möchten Sie diesen Namen registrieren?",
       "reset_pinned": "Mögen Sie Ihre aktuellen lokalen Änderungen nicht? Möchten Sie auf die standardmäßigen angestellten Apps zurücksetzen?",
       "reset_qdn": "Mögen Sie Ihre aktuellen lokalen Änderungen nicht? Möchten Sie auf Ihre gespeicherten QDN -Apps zurücksetzen?",
-      "transfer_qort": "would you like to transfer {{ amount }} QORT"
+      "transfer_qort": "Möchten Sie {{ amount }} QORT überweisen"
     },
     "success": {
       "order_submitted": "Ihre Kaufbestellung wurde eingereicht",
@@ -335,6 +351,7 @@
       "rated_app": "erfolgreich bewertet. Bitte warten Sie ein paar Minuten, bis das Netzwerk die Änderungen vorschreibt.",
       "request_read": "Ich habe diese Anfrage gelesen",
       "transfer": "Die Übertragung war erfolgreich!",
+      "transfer_submitted": "Deine Überweisung wurde erfolgreich übermittelt.",
       "voted": "erfolgreich abgestimmt. Bitte warten Sie ein paar Minuten, bis das Netzwerk die Änderungen vorschreibt."
     }
   },
@@ -364,11 +381,42 @@
     },
     "status_title": "Münzstatus",
     "tier_share_per_block": "Stufenanteil pro Block",
-    "total_minter_in_tier": "Gesamtanzahl der Minter in dieser Stufe"
+    "total_minter_in_tier": "Gesamtanzahl der Minter in dieser Stufe",
+    "panel": {
+      "dialog_subtitle": "Überprüfen Sie Ihren aktuellen Minting-Status, Fortschritt und die nächsten Schritte.",
+      "state_syncing_title": "Synchronisierung",
+      "state_syncing_body": "Der Knoten synchronisiert noch; Minting kann noch nicht beginnen.",
+      "state_active_title": "Minting aktiv",
+      "state_active_body_node_selection": "Dieser Minter-Schlüssel ist auf diesem Knoten konfiguriert. Die Statistiken beziehen sich auf das gewählte Konto.",
+      "state_active_body_account": "Dieses Konto ist auf diesem Knoten zum Minting konfiguriert.",
+      "state_inactive_title": "Kein Minting",
+      "state_inactive_body_not_in_group": "Dieses Konto gehört noch nicht zur Minter-Gruppe.",
+      "state_inactive_body_multi_key": "Auf diesem Knoten sind bereits mehrere Minter-Schlüssel konfiguriert.",
+      "state_inactive_body_ready": "Dieses Konto ist bereit für den nächsten Minting-Schritt.",
+      "next_step_visit_q_mintership": "Öffnen Sie die Q-Mintership-App, um Minter zu werden.",
+      "next_step_already_active": "Minting ist auf diesem Knoten bereits aktiv.",
+      "next_step_wait_sync": "Warten Sie, bis die Synchronisation abgeschlossen ist, bevor Minting starten kann.",
+      "next_step_start_when_ready": "Starten Sie das Minting auf diesem Knoten, wenn Sie bereit sind.",
+      "section_your_wallet": "Ihre Wallet",
+      "section_minter_profile_stats": "Minter-Profil (Statistiken)",
+      "section_account_identity": "Konto-Identität",
+      "section_progress_next_level": "Fortschritt zum nächsten Level",
+      "section_next_step": "Nächster Schritt",
+      "section_node_minting_accounts": "Minting-Konten des Knotens",
+      "select_account_for_stats_hint": "Wählen Sie ein Konto, um Fortschritt und Belohnungsstatistik rechts zu aktualisieren.",
+      "badge_viewing_stats": "Statistik wird angezeigt",
+      "blocks_to_level": "Blöcke bis Level {{level}}",
+      "minting_for_approx_days": "Minting für: ~{{days}} Tage",
+      "reference_only": "(nur zur Orientierung)",
+      "rewards_info_subtitle_own": "(Ihre Belohnungsinfos)",
+      "rewards_info_subtitle_selected": "(gewählter Minter — Belohnungen für diesen Schlüssel)",
+      "network_details": "Netzwerkdetails",
+      "loading_spinner_aria": "Wird geladen"
+    }
   },
   "name": "Name",
   "name_app": "Name/App",
-  "new_post_in": "new post in {{ title }}",
+  "new_post_in": "neuer Beitrag in {{ title }}",
   "none": "keiner",
   "note": "Notiz",
   "option": "Option",
@@ -390,8 +438,34 @@
     "about": "über diese Q-App",
     "q_mail": "Q-Mail",
     "q_manager": "Q-Manager",
-    "q_sandbox": "q-sandbox",
-    "q_wallets": "q-wallets"
+    "q_sandbox": "Q-Sandbox",
+    "q_wallets": "Q-Wallets",
+    "wallets_workspace": "Wallet-Arbeitsbereich"
+  },
+  "account_lookup": {
+    "dialog_title": "Nutzersuche",
+    "empty_title": "Konten durchsuchen",
+    "empty_subtitle": "Gib einen Namen oder eine Adresse ein.",
+    "tooltip_send_disabled": "Das ist dein eigenes Profil.",
+    "tooltip_block_public_node": "Nutzer sperren ist im öffentlichen Knotenbetrieb nicht verfügbar.",
+    "tooltip_block_self": "Du kannst dich nicht selbst sperren.",
+    "error_lookup_failed": "Dieses Konto konnte nicht abgerufen werden.",
+    "chip_level": "Stufe {{level}}",
+    "chip_blocked": "Gesperrt",
+    "chip_no_registered_name": "Kein registrierter Name",
+    "section_minting_progress": "Minting-Fortschritt",
+    "minting_remaining": "{{remaining}} verbleibend",
+    "minting_blocks_to_level": "{{remaining}} bis Stufe {{level}}",
+    "minting_approx_one": "~{{count}} Tag Minting (ca.)",
+    "minting_approx_other": "~{{count}} Tage Minting (ca.)",
+    "minting_days_label": "Minting:",
+    "label_address": "Adresse",
+    "label_public_key": "Öffentlicher Schlüssel",
+    "payments_title": "Letzte Zahlungen",
+    "pagination_rows_per_page": "Zeilen pro Seite:",
+    "pagination_displayed_rows": "{{from}}–{{to}} von {{count}}",
+    "action_block": "sperren",
+    "action_unblock": "entsperren"
   },
   "app_detail": {
     "about": "über",
@@ -453,7 +527,10 @@
     "official_apps": "offizielle Apps"
   },
   "aria": {
-    "apps_library_tabs": "Apps-Bibliothek Navigationsreiter"
+    "apps_library_tabs": "Apps-Bibliothek Navigationsreiter",
+    "core_controls": "Core-Steuerung",
+    "switch_theme_dark": "Zum Dunkelmodus wechseln",
+    "switch_theme_light": "Zum Hellmodus wechseln"
   },
   "supply": "liefern",
   "tags": "Tags",
@@ -490,7 +567,7 @@
   "video_fetching": "Video wird aus dem Qortal-Netzwerk abgerufen...",
   "video_building": "Download abgeschlossen: Video wird erstellt...",
   "vote": "Abstimmung",
-  "vote_other": "{{ count }} votes",
+  "vote_other": "{{ count }} Stimmen",
   "zip": "Reißverschluss",
   "wallet": {
     "litecoin": "Litecoin -Brieftasche",
@@ -498,6 +575,157 @@
     "wallet": "Geldbörse",
     "wallet_other": "Brieftaschen"
   },
+  "widget_container": {
+    "empty_message": "Im Moment gibt es nichts anzuzeigen.",
+    "empty_title": "Noch keine Einträge",
+    "error_title": "Dieses Widget konnte nicht geladen werden",
+    "loading": "Wird geladen",
+    "loading_message": "Die neuesten öffentlichen Daten werden vom Standard-Qortal-Knoten geladen.",
+    "retry": "Erneut versuchen"
+  },
+  "quitter_feed": {
+    "error_generic": "Der öffentliche Quitter-Feed ist vorübergehend nicht verfügbar. Bitte gleich noch einmal versuchen.",
+    "error_following": "Der personalisierte Quitter-Feed ist vorübergehend nicht verfügbar. Bitte versuche es erneut.",
+    "error_timeout": "Feed-Laden fehlgeschlagen. Du kannst es erneut versuchen oder zu Allgemein zurückkehren.",
+    "loading_following": "Persönlicher Feed wird geladen...",
+    "loading_general": "Feed wird geladen...",
+    "error_title_following": "Feed-Laden fehlgeschlagen",
+    "error_title_general": "Beiträge konnten nicht geladen werden",
+    "empty_title_no_name": "Melde dich an, um deinen Feed zu personalisieren",
+    "empty_title_no_following": "Du folgst noch niemandem.",
+    "empty_title_no_posts": "Keine gefolgten Beiträge verfügbar",
+    "empty_title_general": "Keine Beiträge verfügbar",
+    "empty_message_no_name": "Melde dich mit einem Qortal-Namen an, um einen personalisierten Feed zu erstellen.",
+    "empty_message_no_following": "Stöbere in Quitter und folge Konten, um deinen Feed aufzubauen.",
+    "empty_message_no_posts": "Die Konten, denen du folgst, haben noch keine Beiträge auf Quitter.",
+    "tab_general": "Allgemein",
+    "tab_following": "Folge ich",
+    "subtitle_personalized": "Personalisierter Feed",
+    "subtitle_public": "Öffentlicher Feed",
+    "retry_following": "Erneut versuchen",
+    "retry_general": "Erneut versuchen",
+    "return_to_general": "Zurück zu Allgemein",
+    "posts_showing_one": "{{count}} Beitrag wird angezeigt",
+    "posts_showing_other": "{{count}} Beiträge werden angezeigt",
+    "new_posts_one": "{{count}} neuer Beitrag",
+    "new_posts_other": "{{count}} neue Beiträge"
+  },
+  "quick_tools_pad": {
+    "user_search": "Benutzersuche",
+    "wallets": "Wallets",
+    "minting": "Minting",
+    "backup_wallet": "Wallet sichern",
+    "q_chat": "Q-Chat",
+    "notifications_enable": "Benachrichtigungen aktivieren",
+    "notifications_mute": "Benachrichtigungen stumm schalten",
+    "apps": "Apps",
+    "extras": "",
+    "hint_notifications_desktop_only": "Nur Desktop-Warnhinweise werden stumm geschaltet. Benachrichtigungen im Hub laufen weiter.",
+    "hint_minting_panel": "Dieses Panel schaltet sich frei, sobald du Minter bist. Schau bei Q-Mintership vorbei!",
+    "snackbar_backup_wallet": "Lade deine Wallet-Datei herunter. Sie wird für den Kontozugang benötigt."
+  },
   "website": "Webseite",
-  "welcome": "Willkommen"
+  "welcome": "Willkommen",
+  "qortino_workspace": {
+    "modules_hotkeys_label": "Hotkeys",
+    "modules_hotkeys_description": "Ausgewählte Abkürzungen für deine meistgenutzten Wege.",
+    "modules_music_label": "Musikplayer",
+    "modules_music_description": "Ein kompakter Earbump-Player mit Suche und schneller Wiedergabe.",
+    "modules_suggest_label": "Modul vorschlagen",
+    "modules_suggest_description": "Verfassen > Betreff + Nachricht hinzufügen & an uns senden!",
+    "workspace_empty_prompt": "Wähle, was oberhalb von QORTINO erscheint.",
+    "workspace_header_hotkeys": "Hotkeys",
+    "workspace_header_music": "Musikplayer",
+    "workspace_add_app": "App hinzufügen",
+    "getting_started_heading": "Erste Schritte",
+    "onboarding_step_progress": "Schritt {{current}} / {{total}}",
+    "dialog_module_title": "Modul wählen",
+    "dialog_module_subtitle": "Wähle, was oberhalb von QORTINO lebt.",
+    "dialog_hotkeys_title": "Hotkeys auswählen",
+    "dialog_hotkeys_subtitle": "Wird automatisch für dieses Konto gespeichert.",
+    "dialog_music_search_title": "Earbump durchsuchen",
+    "dialog_music_search_subtitle": "Titel suchen, Wiedergabe starten und in den Player oben übernehmen.",
+    "search_placeholder_qapps": "Q-Apps suchen",
+    "search_placeholder_tracks": "Titel oder Künstler suchen",
+    "section_recommended": "Empfohlen",
+    "curated_badge": "[ KURATIERT ]",
+    "hotkeys_loading_library": "Q-Apps-Bibliothek wird geladen...",
+    "hotkeys_unavailable_title": "Q-Apps nicht verfügbar",
+    "hotkeys_no_match_title": "Noch keine passenden Q-Apps",
+    "hotkeys_no_match_hint": "Probiere einen anderen Appnamen für eine Verknüpfung im gewählten Slot.",
+    "error_hotkey_catalog": "Q-Apps können gerade nicht geladen werden.",
+    "music_section_results": "Treffer",
+    "music_section_discovery": "Discovery",
+    "music_loading_search": "EarBump-Bibliothek wird durchsucht...",
+    "music_loading_discovery": "EarBump-Discovery wird geladen...",
+    "music_quiet_title": "EarBump ist gerade still",
+    "music_no_tracks_title": "Keine Titel gefunden",
+    "music_no_tracks_hint": "Probiere einen anderen Titel oder Künstler, um etwas in den Player zu holen.",
+    "error_earbump_discovery": "EarBump kann gerade nicht geladen werden.",
+    "error_earbump_search": "EarBump kann gerade nicht durchsucht werden.",
+    "music_syncing_library": "Synchronisiere mit der EarBump-Bibliothek...",
+    "music_empty_title": "EarBump-Bibliothek",
+    "music_empty_uploaded": "Warte auf Bibliothek",
+    "music_track_load_failed": "Dieser Titel konnte auf deinem Knoten nicht vollständig geladen werden.",
+    "music_no_peers_data": "Keine Peers für verbleibende Daten",
+    "music_preparing_peers_one": "Vorbereitung auf deinem Knoten... {{percent}}% ({{count}} Peer)",
+    "music_preparing_peers_other": "Vorbereitung auf deinem Knoten... {{percent}}% ({{count}} Peers)",
+    "music_preparing_percent_only": "Vorbereitung auf deinem Knoten... {{percent}}%",
+    "music_searching_peers": "Suche Peers...",
+    "music_finalizing_track": "Titel wird auf deinem Knoten fertiggestellt...",
+    "music_preparing_base": "Vorbereitung auf deinem Knoten...",
+    "music_playback_stalled": "Wiedergabe steht. Drücke Play, um es erneut zu versuchen.",
+    "music_stream_stalled": "Titel stockt. Stream wird neu aufgebaut...",
+    "hotkeys_launch_description": "{{appName}} starten",
+    "hotkeys_fallback_launch": "Q-App starten",
+    "reaction_hotkeys_ready": "Hotkey-Panel bereit.",
+    "reaction_music_panel_ready": "Musik-Panel bereit.",
+    "reaction_panel_cleared": "Panel geleert.",
+    "reaction_music_player_ready": "Musikplayer bereit.",
+    "reaction_locked_track": "Fixiert auf {{title}}.",
+    "reaction_track_rotation": "{{title}} ist in Rotation.",
+    "reaction_onboarding_route": "Onboarding geöffnet. Ich halte den nächsten Schritt warm.",
+    "reaction_support_chat": "Support-Chat ist offen. Bitte um die 6 QORT, dann reihe ich Schritt zwei ein.",
+    "reaction_q_trade_open": "Q-Trade ist offen. Wenn du dort QORT holst, gehe ich mit dir weiter.",
+    "reaction_name_flow": "Namensflow offen. Hier beginnt der Hub, dich zu erkennen.",
+    "reaction_avatar_flow": "Avatar-Flow bereit. Lass uns diesem Ort ein Gesicht geben.",
+    "track_meta_separator": "·",
+    "a11y_clear_hotkey_slot": "Slot {{n}} leeren",
+    "runtime_workspace_bay_title": "Workspace-Bereich mit Laufzeitproblem.",
+    "runtime_workspace_bay_body": "QORTINO darunter ist weiterhin sicher. Hub neu laden; wenn es bleibt, verfolgen wir den Absturz von hier.",
+    "runtime_qortino_title": "QORTINO mit Laufzeitproblem.",
+    "runtime_qortino_body": "Der Workspace-Bereich darüber ist weiterhin sicher. Hub neu laden; wenn es bleibt, verfolgen wir den Absturz von hier.",
+    "hotkey_slot_number": "Steckplatz {{n}}"
+  },
+  "bookmarks": {
+    "title": "Lesezeichen",
+    "bookmarked": "Gespeichert",
+    "add_page": "Seite hinzufügen",
+    "loading": "Lesezeichen werden geladen...",
+    "folder": "Ordner",
+    "create_folder": "Ordner erstellen",
+    "folder_name": "Ordnername",
+    "new_folder": "Neuer Ordner",
+    "top_level": "Oberste Ebene",
+    "edit_bookmark": "Lesezeichen bearbeiten",
+    "add_bookmark": "Lesezeichen hinzufügen",
+    "save_location_without_query": "Speichere einen Q-App-Ort ohne Abfrageparameter.",
+    "name": "Name",
+    "bookmark_name_placeholder": "Lesezeichenname",
+    "qortal_link": "Qortal-Link",
+    "qortal_link_placeholder": "qortal://APP/Name/Pfad",
+    "no_bookmarks": "Noch keine Lesezeichen.",
+    "no_bookmarks_folder": "Keine Lesezeichen in diesem Ordner.",
+    "bookmark_count_one": "{{count}} Lesezeichen",
+    "bookmark_count_other": "{{count}} Lesezeichen",
+    "edit": "Bearbeiten",
+    "move": "Verschieben",
+    "delete": "Löschen",
+    "rename": "Umbenennen",
+    "remove": "Entfernen",
+    "create": "Erstellen",
+    "more": "Mehr",
+    "delete_folder_title": "Ordner löschen?",
+    "delete_folder_message": "Lesezeichen in diesem Ordner werden auf die oberste Ebene verschoben."
+  }
 }
diff --git a/src/i18n/locales/de/group.json b/src/i18n/locales/de/group.json
index 07300fe5..0cbb32c0 100644
--- a/src/i18n/locales/de/group.json
+++ b/src/i18n/locales/de/group.json
@@ -28,6 +28,280 @@
     "select_group": "Gruppe auswählen",
     "visit_q_mintership": "Q-Mintership besuchen"
   },
+  "dashboard": {
+    "qort_balance": "QORT-Kontostand",
+    "node_status": "Node-Status",
+    "node_unavailable": "Node nicht verfügbar",
+    "sync_percent": "{{percent}}% synchronisiert",
+    "minter_level": "Minter-Level",
+    "peers": "Peers",
+    "qdn": "QDN",
+    "core": "Core",
+    "hub": "Hub",
+    "node": "Node",
+    "using_node": "Verwendeter Node",
+    "change_node": "Node ändern",
+    "node_type": "Node-Typ",
+    "node_height": "Node-Höhe",
+    "local_node": "Lokaler Node",
+    "public_node": "öffentlicher Node",
+    "custom_node": "Eigener Node",
+    "synchronizing": "Synchronisierung",
+    "fully_operational": "Voll funktionsfähig",
+    "not_operational": "Nicht funktionsfähig",
+    "attention_needed": "Aufmerksamkeit nötig",
+    "apply": "Beantragen",
+    "info_panel_status": "Status",
+    "info_panel_node_comment": "// knoten_info",
+    "minter_pin_save_progress_default": "Fortschrittsbalken als Standardansicht speichern",
+    "minter_pin_save_dots_default": "Minting-Punkte als Standardansicht speichern",
+    "node_switch_error": "Knoten konnte gerade nicht gewechselt werden.",
+    "node_menu_local": "Lokaler Node",
+    "node_menu_public": "Öffentlicher Node",
+    "qortino_runtime_title": "Die QORTINO-Kartenoberfläche ist auf einen Laufzeitfehler gestoßen.",
+    "qortino_runtime_body": "Der Rest des Dashboards bleibt sicher. Aktualisieren Sie den Hub und melden Sie es dem Team, falls es weiterhin auftritt.",
+    "no_custom_nodes_saved": "Keine eigenen Nodes gespeichert",
+    "wallet_activity": "Wallet-Aktivität",
+    "send": "Senden",
+    "receive": "Empfangen",
+    "buy": "Kaufen",
+    "recent_transaction": "Letzte Transaktion",
+    "loading_wallet_activity": "Wallet-Aktivität wird geladen...",
+    "sent_to": "gesendet an ",
+    "received_from": "empfangen von ",
+    "no_wallet_activity": "Keine neue Wallet-Aktivität.",
+      "wallet_activity_window": "Letzte Transaktion innerhalb der letzten 7 Tage",
+      "wallet_activity_unknown_address": "Unbekannte Adresse",
+      "wallet_activity_relative_just_now": "Gerade eben",
+      "wallet_activity_relative_minutes_ago_one": "vor {{count}} Minute",
+      "wallet_activity_relative_minutes_ago_other": "vor {{count}} Minuten",
+      "wallet_activity_relative_hours_ago_one": "vor {{count}} Stunde",
+      "wallet_activity_relative_hours_ago_other": "vor {{count}} Stunden",
+      "wallet_activity_relative_days_ago_one": "vor {{count}} Tag",
+      "wallet_activity_relative_days_ago_other": "vor {{count}} Tagen",
+      "open_in_q_chat": "In Q-Chat öffnen",
+    "open_in_q_apps": "In Q-Apps öffnen",
+    "quitter_feed": "Quitter-Feed",
+    "quitter_show_more": "Mehr anzeigen",
+    "quitter_show_less": "Weniger anzeigen",
+    "quitter_video_attachment": "Videoanhang",
+    "quitter_video_preview_hub": "Die Vorschau bleibt im Hub nur lesbar",
+    "featured_q_apps": "Empfohlene Q-Apps",
+    "featured_q_apps_subtitle": "Starte vertrauenswuerdige Community-Apps direkt von deinem Dashboard.",
+    "explore_all_q_apps": "Alle Q-Apps erkunden",
+    "reduce_motion": "Bewegung reduzieren",
+    "account_overview": "Kontoueberblick",
+    "qortal_name_address": "QORTAL-NAME & ADRESSE",
+    "profile": "Profil",
+    "profile_settings": "Profileinstellungen",
+    "profile_settings_description": "Pruefe deinen Namen und deine Kontoidentitaet.",
+    "security": "Sicherheit",
+    "security_settings": "Sicherheitseinstellungen",
+    "security_settings_description": "Zeige und kopiere deinen privaten Schluessel nur, wenn es absolut noetig ist.",
+    "developer": "Entwickler",
+    "developer_settings": "Entwicklereinstellungen",
+    "developer_settings_description": "Aktiviere Entwicklerwerkzeuge und Diagnosen fuer erweiterte Tests.",
+    "system": "System",
+    "system_settings": "Systemeinstellungen",
+    "system_settings_description": "Steuere Benachrichtigungen, Bewegung, angeheftete Apps und blockierte Konten.",
+    "current_name": "Aktueller Name",
+    "no_name_registered": "Kein Name registriert",
+    "wallet_address": "Wallet-Adresse",
+    "unavailable": "Nicht verfuegbar",
+    "no_active_wallet": "Keine aktive Wallet",
+    "names_qapp_actions_hint": "Kaufen, Verkaufen und Namensaenderungen sollten in der Names Q-App erledigt werden.",
+    "open_the": "Oeffne die",
+    "names": "Names",
+    "names_qapp_hint_suffix": "Q-App, um Namen zu kaufen, zu verkaufen oder deinen registrierten Namen zu aendern.",
+    "private_key_warning": "Teile deinen privaten Schluessel niemals. Wer ihn besitzt, koennte diese Wallet und ihre Guthaben kontrollieren.",
+    "wallet_password": "Wallet-Passwort",
+    "wallet_password_placeholder": "Gib dein Wallet-Passwort ein",
+    "decrypt": "Entschluesseln",
+    "copy_key": "Schluessel kopieren",
+    "private_key": "Privater Schluessel",
+    "private_key_hint": "Entschluessle deinen privaten Schluessel nur, wenn du diese Wallet wiederherstellen oder migrieren musst.",
+    "notifications_update_error": "App-Benachrichtigungen konnten gerade nicht aktualisiert werden.",
+    "wallet_unavailable_error": "Wallet-Daten sind gerade nicht verfuegbar.",
+    "wallet_password_required": "Gib dein Wallet-Passwort ein, um den privaten Schluessel zu entschluesseln.",
+    "wallet_decrypt_error_with_message": "Deine Wallet konnte nicht entschluesselt werden: {{message}}",
+    "wallet_decrypt_error": "Deine Wallet konnte mit diesem Passwort nicht entschluesselt werden.",
+    "private_key_copied": "Privater Schluessel in die Zwischenablage kopiert.",
+    "enable_dev_mode": "Dev-Modus aktivieren",
+    "enable_dev_mode_desc": "Schalte lokale Entwicklerbereiche, Diagnosen und Testwerkzeuge im Hub frei.",
+    "dev_mode_tip": "Tipp: Nach dem Aktivieren erscheint ein neues Entwicklerwerkzeug-Symbol in der Seitenleiste. Eventuell musst du ueber den linken Rand fahren, um es zu sehen.",
+    "reduce_app_notifications": "App-Benachrichtigungen reduzieren",
+    "reduce_app_notifications_desc": "Aktiviere dies, um Desktop-Push-Benachrichtigungen stummzuschalten. Aus lassen fuer normale Hub-Hinweise.",
+    "reduce_ui_animations": "UI-Animationen reduzieren",
+    "reduce_ui_animations_desc": "Aktiviere dies, um Bewegung im Hub zu minimieren. Aus lassen fuer die normale animierte Oberflaeche.",
+    "pinned_qapp_backup": "Backup angehefteter Q-Apps",
+    "pinned_qapp_backup_desc": "Speichere deine angehefteten Q-Apps in verschluesselten QDN-Einstellungen, damit dein Layout auf anderen Geraeten mitkommt.",
+    "manage_backup": "Backup verwalten",
+    "block_list": "Blockliste",
+    "block_list_desc": "Pruefe blockierte Namen und Adressen und entsperre Konten, wenn du bereit bist.",
+    "blocked_count": "{{count}} blockiert",
+    "addresses": "Adressen",
+    "unblock": "Entsperren",
+    "no_blocked_accounts": "Noch keine blockierten Konten.",
+    "show_receive_qr": "Empfangs-QR anzeigen",
+    "copy_address": "Adresse kopieren",
+    "privacy_mode_tooltip": "Privatsphaere-Modus: Verwischen sensibler Infos fuer Bildschirmfreigaben",
+    "toggle_privacy_mode": "Privatsphaere-Modus umschalten",
+    "send_qort": "QORT senden",
+    "send_qort_subtitle": "Sende QORT an jeden registrierten Namen oder jede Adresse.",
+    "close_send_qort_modal": "QORT-Senden-Fenster schliessen",
+    "receive_qort": "QORT empfangen",
+    "receive_qort_subtitle": "Scannen, um QORT zu empfangen",
+    "close_receive_qort_modal": "QORT-Empfangen-Fenster schliessen",
+    "download_qr": "QR herunterladen",
+    "qortal_address_or_name": "Qortal-Adresse oder registrierter Name",
+    "blocked": "Blockiert",
+    "account_status_online": "Online",
+    "account_status_busy": "Beschaeftigt",
+    "account_status_invisible": "Unsichtbar",
+    "account_settings_tooltip": "Kontoeinstellungen",
+    "open_account_settings_aria": "Kontoeinstellungen oeffnen",
+    "name_change_confirm": "Registrierten Namen von {{oldName}} zu {{newName}} aendern?",
+    "name_change_success": "Namensaenderung erfolgreich eingereicht.",
+    "name_change_register_first": "Registriere zuerst einen Namen, bevor du ihn aenderst.",
+    "name_change_enter_new_name": "Gib den neuen Namen ein, den du verwenden moechtest.",
+    "name_change_different_from_current": "Waehle einen anderen Namen als deinen aktuellen.",
+    "name_change_details_still_loading": "Aktuelle Namensdetails werden noch geladen. Versuche es gleich erneut.",
+    "name_change_choose_available": "Waehle einen verfuegbaren Namen, bevor du fortfaehrst.",
+    "name_change_wallet_password_required": "Gib dein Wallet-Passwort ein, bevor du den Namen aenderst.",
+    "name_change_wallet_password_failed": "Dein Wallet-Passwort konnte nicht verifiziert werden.",
+    "current_name_details_load_failed": "Aktuelle Namensdetails konnten nicht geladen werden.",
+    "name_change_unknown_error": "Beim Aendern deines Namens ist etwas schiefgelaufen.",
+    "name_availability_available": "Name ist verfuegbar.",
+    "name_availability_checking": "Verfuegbarkeit wird geprueft...",
+    "name_availability_same_as_current": "Waehle einen anderen Namen als den, den du bereits verwendest.",
+    "name_availability_taken": "Dieser Name ist bereits vergeben."
+  },
+  "groups_widget": {
+    "accept": "Annehmen",
+    "approve": "Genehmigen",
+    "cancel": "Abbrechen",
+    "characters_count": "{{current}}/{{max}}",
+    "confirm_approve_request": "Diese Anfrage genehmigen und zur Gruppe einladen?",
+    "confirm_join_group": "Jetzt dieser Gruppe beitreten?",
+    "confirm_join_promoted_closed": "Beitrittsanfrage an diese beworbene Gruppe senden?",
+    "confirm_join_promoted_open": "Jetzt dieser beworbenen Gruppe beitreten?",
+    "connecting": "Verbindung wird aufgebaut...",
+    "discover_groups": "Gruppen entdecken",
+    "error_accept_invite": "Einladung konnte gerade nicht angenommen werden.",
+    "error_approve_request": "Anfrage konnte gerade nicht genehmigt werden.",
+    "error_load_invites": "Gruppeneinladungen konnten gerade nicht geladen werden.",
+    "error_load_promotions": "Beworbene Gruppen konnten gerade nicht geladen werden.",
+    "error_load_requests": "Beitrittsanfragen konnten gerade nicht geladen werden.",
+    "error_promoted": "Aktion für diese beworbene Gruppe gerade nicht möglich.",
+    "error_publish_promotion": "Bewerbung konnte gerade nicht veröffentlicht werden.",
+    "fresh_promotion_snippet": "Diese Gruppe hat eine neue beworbene Aktualisierung.",
+    "from_label": "von",
+    "group_admin_only": "Nur Gruppen-Admins",
+    "group_general": "Allgemein",
+    "group_named": "Gruppe {{id}}",
+    "ignore": "Ignorieren",
+    "invitation_ready": "Einladung zur Prüfung bereit",
+    "invite_hidden": "Einladung vorerst in diesem Widget ausgeblendet.",
+    "invites_empty_description": "Neue Gruppeneinladungen erscheinen hier, sobald sie eintreffen.",
+    "invites_empty_title": "Keine ausstehenden Einladungen",
+    "joined_group": "{{name}} beigetreten.",
+    "joined_promoted": "{{name}} beigetreten.",
+    "join_group": "Gruppe beitreten",
+    "join_request_sent": "Beitrittsanfrage für {{name}} gesendet.",
+    "loading_invites": "Einladungen werden geladen",
+    "loading_notifications": "Benachrichtigungen werden geladen",
+    "loading_promoted": "Beworbene Gruppen werden geladen",
+    "loading_requests": "Anfragen werden geladen",
+    "members_count": "{{count}} Mitglieder",
+    "new_encrypted_message": "Neue verschlüsselte Nachricht",
+    "notifications_empty_message": "Tritt Q-Chat-Communities bei, um diesen Feed mit Gruppennachrichten, Erwähnungen und Aktivität zu füllen.",
+    "notifications_empty_title": "Starte mit Q-Chat-Gruppen",
+    "open": "Öffnen",
+    "open_conversation": "Unterhaltung öffnen",
+    "private_group": "Private Gruppe",
+    "private_group_invite": "Einladung zu privater Gruppe",
+    "processing": "Wird verarbeitet...",
+    "promoted_by": "Beworben von {{name}}",
+    "promoted_empty_message": "Beworbene Gruppen erscheinen hier, sobald neue Highlights verfügbar sind.",
+    "promoted_empty_title": "Keine beworbene Gruppen",
+    "promote_dialog_fee": " Veröffentlichungsgebühr: {{fee}} QORT.",
+    "promote_dialog_intro": "Teile ein kurzes herausgestelltes Update für eine deiner Admin-Gruppen.",
+    "promote_group": "Gruppe bewerben",
+    "promote_page_title": "Eine deiner Gruppen bewerben",
+    "promotion_published": "Gruppen-Bewerbung veröffentlicht.",
+    "promotion_placeholder": "Schreibe eine kurze Bewerbung für diese Gruppe.",
+    "public_group": "Öffentliche Gruppe",
+    "refresh": "Aktualisieren",
+    "reject": "Ablehnen",
+    "request_access": "Zugriff anfragen",
+    "request_approved": "{{requester}} wurde für {{group}} genehmigt.",
+    "request_removed": "Anfrage vorerst aus diesem Widget entfernt.",
+    "request_sent": "Anfrage gesendet",
+    "requests_empty_description": "Beitrittsanfragen für Gruppen, die du verwaltest, erscheinen hier.",
+    "requests_empty_title": "Keine ausstehenden Anfragen",
+    "select_admin_group": "Wähle eine Gruppe aus, bei der du Admin bist",
+    "tab_invites": "Einladungen",
+    "tab_notifications": "Benachrichtigungen",
+    "tab_promoted": "Beworben",
+    "tab_requests": "Anfragen",
+    "unknown": "Unbekannt",
+    "view_conversation": "Unterhaltung anzeigen",
+    "wants_to_join": "Möchte dieser Gruppe beitreten.",
+    "you": "Du",
+    "publish": "Veröffentlichen"
+  },
+  "subscription": {
+    "subscriptions": "abonnements",
+    "tooltip_actions_needed_one": "{{title}} – {{count}} Aktion erforderlich",
+    "tooltip_actions_needed_other": "{{title}} – {{count}} Aktionen erforderlich",
+    "relative_soon": "in Kürze",
+    "relative_in_minutes_one": "in {{count}} Min.",
+    "relative_in_minutes_other": "in {{count}} Min.",
+    "relative_in_hours_one": "in {{count}} Std.",
+    "relative_in_hours_other": "in {{count}} Std.",
+    "relative_in_days_one": "in {{count}} Tag",
+    "relative_in_days_other": "in {{count}} Tagen",
+    "relative_in_months_one": "in {{count}} Monat",
+    "relative_in_months_other": "in {{count}} Monaten",
+    "row_fallback_title": "abonnement",
+    "by_creator": "von {{name}}",
+    "creator_fallback": "Qortal-Ersteller",
+    "price_line": "{{price}} QORT / {{interval}}",
+    "expires_suffix": " – läuft ab {{time}}",
+    "status_due": "fällig",
+    "status_active": "aktiv",
+    "status_owner": "eigentümer",
+    "managed_fallback": "verwaltetes abonnement",
+    "members_one": "{{count}} mitglied",
+    "members_other": "{{count}} mitglieder",
+    "join_requests_suffix_one": " – {{count}} beitrittsanfrage",
+    "join_requests_suffix_other": " – {{count}} beitrittsanfragen",
+    "re_encryption_suffix": " – neuverschlüsselung erforderlich",
+    "actions_badge_one": "{{count}} aktion",
+    "actions_badge_other": "{{count}} aktionen",
+    "loading": "abonnements werden geladen",
+    "section_needs_action": "aktion erforderlich",
+    "section_active": "aktiv",
+    "open_subscriptions": "abonnements öffnen",
+    "empty_title": "Abonnementgestützte Q-Apps entdecken",
+    "empty_body": "Abonniere Ersteller und Communities in Q-Apps mit Abo-Unterstützung, z. B. SubWire.",
+    "open_subwire": "SubWire öffnen",
+    "tab_subscriptions": "Abonnements",
+    "tab_subwire": "SubWire"
+  },
+  "group_invites": {
+    "empty_title": "keine Einladungsanfragen",
+    "empty_secondary_1": "du hast derzeit keine ausstehenden Einladungen",
+    "empty_secondary_2": "im Moment.",
+    "empty_tertiary_no_groups": "du gehörst noch keiner Gruppe an.",
+    "cta_find_groups": "Gruppen finden"
+  },
+  "group_join_requests": {
+    "empty_title": "keine Beitrittsanfragen",
+    "empty_secondary_1": "du hast derzeit keine ausstehenden Anfragen",
+    "empty_secondary_2": "im Moment.",
+    "empty_tertiary_no_admin_groups": "du verwaltest noch keine Gruppen."
+  },
   "advanced_options": "Erweiterte Optionen",
   "block_delay": {
     "minimum": "Minimale Blockverzögerung",
@@ -72,6 +346,8 @@
     "generic": {
       "avatar_publish_fee": "Das Veröffentlichen eines Avatars kostet {{ fee }}",
       "avatar_registered_name": "Ein registrierter Name ist erforderlich, um einen Avatar zu setzen",
+      "add_new_key_option": "Einen neuen Schlüssel hinzufügen",
+      "add_new_key_sparingly": "Neue Schlüssel sollten nur sparsam hinzugefügt werden, um das Anwachsen der Gruppenschlüssel zu vermeiden.",
       "admin_only": "Nur Gruppen, in denen du Admin bist, werden angezeigt",
       "already_in_group": "Du bist bereits in dieser Gruppe!",
       "block_delay_minimum": "Minimale Blockverzögerung für Gruppen-Transaktionsfreigaben",
@@ -105,6 +381,7 @@
       "node_minting_key": "Du hast bereits einen Minting-Schlüssel für dieses Konto auf diesem Node",
       "no_announcement": "Keine Ankündigungen",
       "no_display": "Nichts anzuzeigen",
+      "no_description": "Keine Beschreibung",
       "no_selection": "Keine Gruppe ausgewählt",
       "not_part_group": "Du bist nicht Teil der verschlüsselten Mitgliedergruppe. Bitte warte, bis ein Admin den Schlüssel neu verschlüsselt.",
       "only_encrypted": "Nur unverschlüsselte Nachrichten werden angezeigt.",
@@ -170,5 +447,11 @@
       "user_joined": "Benutzer ist erfolgreich beigetreten!"
     }
   },
+  "context_menu": {
+    "mark_as_read": "Als gelesen markieren",
+    "mute_push_notifications": "Push-Benachrichtigungen stummschalten",
+    "unmute_push_notifications": "Push-Benachrichtigungen aktivieren",
+    "mark_all_read": "Alle als gelesen markieren"
+  },
   "thread_posts": "Neue Thread-Beiträge"
 }
diff --git a/src/i18n/locales/de/node.json b/src/i18n/locales/de/node.json
index 629405bd..0d85db51 100644
--- a/src/i18n/locales/de/node.json
+++ b/src/i18n/locales/de/node.json
@@ -40,7 +40,8 @@
     "invalidKey": "ungültiger API-Schlüssel",
     "failed_stop": "Core konnte nicht gestoppt werden",
     "failed_bootstrap": "Bootstrap konnte nicht ausgeführt werden",
-    "failed_delete": "Datenbank konnte nicht gelöscht werden"
+    "failed_delete": "Datenbank konnte nicht gelöscht werden",
+    "failed_bootstrap_or_clear": "Bootstrap, Ketten­daten löschen oder Core neu starten war nicht möglich"
   },
   "status": {
     "complete": "abgeschlossen",
@@ -81,7 +82,12 @@
   "confirmations": {
     "stop": "Bist du sicher, dass du den Core stoppen möchtest?",
     "bootstrap": "Bist du sicher, dass du den Bootstrap starten möchtest?",
-    "delete": "Bist du sicher, dass du die Datenbank löschen möchtest?"
+    "delete": "Bist du sicher, dass du die Datenbank löschen möchtest?",
+    "bootstrapOrClearChain": "Führt Bootstrap von einem Snapshot durch, wenn Core lokal läuft. Ist das nicht möglich oder schlägt Bootstrap fehl, kann die lokale Ketten‑DB entfernt und Core wieder gestartet werden; Wallet‑Dateien bleiben unverändert. Fortfahren?"
+  },
+  "bootstrapChainHelp": {
+    "title": "Chain bootstrappen",
+    "body": "Ein gemeinsamer Schritt: Snapshot‑Bootstrap, wenn Core erreichbar ist, oder lokale Ketten‑DB löschen und Core neu starten, wenn Bootstrap nicht möglich ist. Das Wallet liegt getrennt und wird nicht entfernt."
   },
   "stop": "Core stoppen",
   "bootstrap": "Bootstrap",
@@ -89,6 +95,53 @@
   "more": "mehr Optionen",
   "less": "weniger Optionen",
   "enableAuthWhenSyncing": "Authentifizierung beim Synchronisieren aktivieren",
+  "coreSetupDialog": {
+    "title": "Qortal Core einrichten",
+    "introTitle": "Führen Sie Ihren eigenen Node lokal aus.",
+    "introSubtitle": "Sie können einen öffentlichen Node nutzen, während Core startet und synchronisiert.",
+    "publicNodeUnavailable": "Öffentliche Nodes sind derzeit nicht verfügbar. Lassen Sie dieses Fenster offen, während der lokale Core startet und synchronisiert.",
+    "steps": {
+      "downloadDone": "Core heruntergeladen",
+      "downloadActive": "Core wird heruntergeladen",
+      "downloadIdle": "Core herunterladen",
+      "runningDone": "Core läuft",
+      "runningActive": "Core wird gestartet",
+      "runningIdle": "Core starten"
+    },
+    "readyToDownload": "Bereit zum Herunterladen",
+    "readyToStart": "Bereit zum Starten",
+    "syncing": "Synchronisiert",
+    "helpers": {
+      "downloadDone": "Core-Dateien sind installiert und bereit.",
+      "downloadActive": "Qortal Core wird heruntergeladen und vorbereitet.",
+      "downloadIdle": "Laden Sie Qortal Core herunter, um Ihren eigenen Node zu betreiben.",
+      "runningDoneSyncing": "Core läuft und synchronisiert Blockchain-Daten.",
+      "runningDone": "Core läuft lokal.",
+      "runningWaiting": "Core startet und synchronisiert im Hintergrund.",
+      "runningBlocked": "Verfügbar, nachdem Core heruntergeladen wurde."
+    },
+    "nextStepPill": "Nächster Schritt",
+    "locationTitle": "Core-Speicherort",
+    "locationCustom": "Qortal Core wird aus diesem Ordner ausgeführt.",
+    "locationDefault": "Qortal Core verwendet den Standardordner dieses Systems.",
+    "locationPathDefault": "Standard-Speicherort für Qortal Core",
+    "change": "Ändern",
+    "choose": "Auswählen",
+    "clear": "Leeren",
+    "advancedTitle": "Erweitert",
+    "advancedSubtitle": "Erweiterte Tools und Optionen für Core.",
+    "maintenanceUnavailable": "Core-Wartungstools sind nicht verfügbar, während Core startet oder synchronisiert.",
+    "stopCoreTitle": "Core stoppen",
+    "stopCoreBody": "Beendet den lokalen Core-Prozess.",
+    "stopButton": "Stoppen",
+    "cancel": "Abbrechen",
+    "actionDownload": "Core herunterladen",
+    "actionStart": "Core starten",
+    "actionDone": "Fertig",
+    "confirmTitle": "Aktion bestätigen",
+    "folderCopied": "Core-Ordner kopiert",
+    "progressAriaLabel": "Fortschritt: {{label}}"
+  },
   "NotFullyStarted": {
     "titleNotReady": "Core ist noch nicht vollständig gestartet",
     "descNotReady": "Qortal Core wurde noch nicht vollständig gestartet. Bitte warten.",
diff --git a/src/i18n/locales/de/question.json b/src/i18n/locales/de/question.json
index be03c0cd..16514dd1 100644
--- a/src/i18n/locales/de/question.json
+++ b/src/i18n/locales/de/question.json
@@ -152,8 +152,12 @@
     "invite": "Möchten Sie dieser Anwendung die Berechtigung geben, {{ invitee }} einzuladen?",
     "kick": "Möchten Sie dieser Anwendung die Berechtigung geben, {{ partecipant }} aus der Gruppe zu entfernen?",
     "leave_group": "Möchten Sie dieser Anwendung die Berechtigung geben, die folgende Gruppe zu verlassen?",
-    "list_hosted_data": "Möchten Sie dieser Anwendung die Berechtigung geben, eine Liste Ihrer gehosteten Daten abzurufen?",
-    "order_detail": "{{ qort_amount }} QORT für {{ foreign_amount }} {{ ticker }}",
+      "list_hosted_data": "Möchten Sie dieser Anwendung die Berechtigung geben, eine Liste Ihrer gehosteten Daten abzurufen?",
+      "notification": "dieser App erlauben, Ihnen Hub-Benachrichtigungen zu senden?",
+      "notification_allow": "erlauben",
+      "notification_dont_allow": "nicht erlauben",
+      "notification_title": "{{ appName }}-Benachrichtigungen",
+      "order_detail": "{{ qort_amount }} QORT für {{ foreign_amount }} {{ ticker }}",
     "pay_publish": "Möchten Sie dieser Anwendung die Berechtigung geben, die folgenden Zahlungen und Veröffentlichungen vorzunehmen?",
     "perform_admin_action_with_value": "mit Wert: {{ value }}",
     "perform_admin_action": "Möchten Sie dieser Anwendung die Berechtigung geben, die Admin-Aktion {{ type }} auszuführen?",
diff --git a/src/i18n/locales/de/tutorial.json b/src/i18n/locales/de/tutorial.json
index f610b3c1..5a72d318 100644
--- a/src/i18n/locales/de/tutorial.json
+++ b/src/i18n/locales/de/tutorial.json
@@ -33,6 +33,7 @@
     "get_six_qorts_way3_action": "Q-Trade öffnen",
     "register_name": "Namen registrieren",
     "confirming_transaction": "Transaktion wird bestätigt",
+    "confirming": "Wird best?tigt",
     "load_avatar": "Avatar laden",
     "explore_apps": "Ausgewählte Apps erkunden",
     "done": "Erledigt",
@@ -53,6 +54,17 @@
     "devnet_testing_desc": "Teste deine Q-Apps in der DevNet-Testing-Umgebung",
     "open_app": "Öffnen",
     "address_copied": "Adresse in die Zwischenablage kopiert",
-    "group_activity": "Gruppenaktivität"
+    "group_activity": "Gruppenaktivität",
+    "get_qorts_workspace_hint": "Schalte deine ersten 6 QORT frei, um den Rest der Einrichtung zu aktivieren.",
+    "register_name_workspace_hint": "Ein registrierter Name macht aus diesem Konto eine erkennbare Identität.",
+    "load_avatar_workspace_hint": "Gib dem Dashboard ein Gesicht, damit sich der Raum wie deiner anfühlt.",
+    "onboarding_transition_hard_part_done": "Gute Arbeit. Der schwierigste Teil ist geschafft.",
+    "onboarding_transition_one_more": "Super. Noch einer.",
+    "onboarding_press_next_when_ready": "Gute Arbeit. Der schwierigste Teil ist geschafft. Tippe auf Weiter, wenn du soweit bist.",
+    "register_name_pending_hint": "Name wird on-chain gespeichert. Das kann einen Moment dauern.",
+    "persistent_guide_get_qorts": "Wir starten mit 6 QORT. Wähle oben eine Option.",
+    "persistent_guide_register_name": "Als Nächstes registrierst du deinen Namen.",
+    "persistent_guide_load_avatar": "Zum Schluss fügst du deinen Avatar hinzu.",
+    "post_onboarding_workspace_ready": "Alles bereit. Du kannst deinen Workspace oben aufbauen."
   }
 }
diff --git a/src/i18n/locales/en/auth.json b/src/i18n/locales/en/auth.json
index 9a8e5072..57ec7cae 100644
--- a/src/i18n/locales/en/auth.json
+++ b/src/i18n/locales/en/auth.json
@@ -74,8 +74,11 @@
       "set_apikey": "failed to set API key:"
     },
     "generic": {
+      "block_list_intro": "Add a Qortal name or address to block them. Addresses affect transaction handling; blocking a name hides their data across the Hub.",
       "blocked_addresses": "blocked addresses- blocks processing of txs",
+      "blocked_addresses_hint": "Blocks processing related to transactions from these addresses.",
       "blocked_names": "blocked names for QDN",
+      "blocked_names_hint": "These names are blocked for QDN / Hub data and social features.",
       "blocking": "blocking {{ name }}",
       "choose_block": "choose 'block txs' or 'all' to block chat messages",
       "congrats_setup": "congrats, you’re all set up!",
@@ -86,6 +89,7 @@
       "keep_secure": "keep your account file secure",
       "last_encryption_date": "last encryption date: {{ date }} by {{ name }}",
       "locating_encryption_keys": "locating encryption keys",
+      "no_blocked_users": "Nobody is blocked yet. Add an address or name above when you want to mute them.",
       "insert_name_address": "Please enter a Qortal name or address to start a private conversation.",
       "name_address": "name or address",
       "no_account": "no accounts saved",
@@ -143,6 +147,160 @@
   },
   "welcome": "welcome to",
   "store_account": "store account in Hub",
+  "create_wallet": {
+    "error_enter_password": "enter a wallet password.",
+    "error_confirm_password": "confirm your wallet password.",
+    "error_passwords_mismatch": "passwords do not match.",
+    "success_wallet_saved": "wallet saved",
+    "success_account_created": "account created",
+    "success_ready_hub": "you’re now ready to enter Hub.",
+    "success_backup_before_hub": "back up your encrypted wallet before entering Hub.",
+    "enter_hub": "Enter Hub",
+    "download_another_copy": "download another copy",
+    "backup_wallet": "backup wallet",
+    "backup_encrypted_notice": "this backup is encrypted with your wallet password.",
+    "seed_title": "your Seedphrase",
+    "seed_subtitle": "this can recover your account. saving your seedphrase is optional. your encrypted wallet backup comes next which is the recommended way to recover your account.",
+    "reveal": "reveal",
+    "copied": "copied",
+    "copy": "copy",
+    "export": "export",
+    "seed_warning": "never share this. anyone with it can access your account. for daily safekeeping, use the encrypted wallet backup after creation.",
+    "create_account": "create account",
+    "password_title": "create password",
+    "password_subtitle": "this password protects your account on this device.",
+    "wallet_password": "wallet password",
+    "confirm_password": "confirm password",
+    "save_account_in_hub": "Save account in Hub",
+    "continue": "continue"
+  },
+  "import_account": {
+    "title": "import account",
+    "subtitle": "choose how you want to restore your account."
+  },
+  "backup_wallet_modal": {
+    "subtitle": "download a local wallet file so you can restore this account later.",
+    "info_note": "this exports a wallet file locally on your device. keep it stored somewhere safe.",
+    "current_password": "current password",
+    "keep_password_in_export": "keep the current password in the exported wallet file",
+    "new_password_for_backup": "new password for this backup",
+    "download_wallet_file": "download wallet file",
+    "error_no_active_wallet": "no active wallet was found for backup.",
+    "error_unable_to_create_backup": "unable to create the wallet backup."
+  },
+  "wallet_errors": {
+    "unable_to_unlock_default": "unable to unlock this wallet.",
+    "unable_to_save_backup": "unable to save this wallet backup.",
+    "unable_to_prepare_backup": "unable to prepare this wallet backup.",
+    "account_not_found": "this saved account could not be found. choose another account or restore this wallet from a backup.",
+    "account_incomplete": "this saved account looks incomplete or damaged. choose another account or restore this wallet from a backup.",
+    "invalid_security_data": "this saved account contains invalid wallet security data. choose another account or restore this wallet from a backup.",
+    "missing_encrypted_seed": "this saved account is missing its encrypted seed (the locked wallet data needed to unlock it). choose another account or restore this wallet from a backup.",
+    "missing_field": "this saved account is missing its {{field}}. choose another account or restore this wallet from a backup.",
+    "field": {
+      "address0": "wallet address",
+      "encryptedSeed": "encrypted seed (the locked wallet data needed to unlock it)",
+      "iv": "wallet encryption data",
+      "kdfThreads": "wallet password settings",
+      "mac": "wallet integrity check",
+      "salt": "wallet password security data",
+      "version": "wallet version"
+    }
+  },
+  "connection_mode": {
+    "title": "Connection Mode",
+    "subtitle": "Choose how Qortal connects to the network.",
+    "local_title": "Local Node",
+    "recommended": "Recommended",
+    "local_full_decentralized": "Full decentralized access",
+    "local_faster": "Faster performance",
+    "local_data_local": "Your data stays local",
+    "public_title": "Public Node",
+    "public_quick": "Quick access",
+    "public_limited_decentralization": "Limited decentralization",
+    "public_shared_infrastructure": "Shared infrastructure",
+    "status_running": "Core running",
+    "status_missing": "Core not detected",
+    "status_checking": "Checking local node",
+    "section_custom_nodes": "Custom Nodes",
+    "add_custom_node": "Add custom node",
+    "empty_custom_nodes": "No custom nodes saved",
+    "manual_setup_link": "Manual node setup",
+    "save_settings": "Save Settings",
+    "manual_edit_title": "Edit custom node",
+    "manual_add_title": "Manual node setup",
+    "field_name": "Name",
+    "placeholder_node_name": "My Qortal node",
+    "field_node_url": "Node URL",
+    "placeholder_node_url": "https://127.0.0.1:12391",
+    "field_api_key_optional": "API key (optional)",
+    "placeholder_api_key": "Enter API key",
+    "reload_after_new_node_title": "Reload required",
+    "reload_after_new_node_message": "You've added a new node, an app refresh is required",
+    "reload_after_new_node_button": "Reload app"
+  },
+  "intro_features": {
+    "secure_title": "Secure & Private",
+    "secure_text": "Your keys, your data, always in your control.",
+    "fast_title": "Fast Access",
+    "fast_text": "Unlock and get to your Qortal experience instantly.",
+    "decentralized_title": "Decentralized",
+    "decentralized_text": "Connect to the network on your terms.",
+    "built_title": "Built for You",
+    "built_text": "One account. Endless possibilities."
+  },
+  "entry": {
+    "title": "Enter Qortal",
+    "subtitle": "Access or create your account.",
+    "create_account": "Create account",
+    "import_account": "Import account",
+    "no_accounts": "No accounts found on this device.",
+    "import_choice_backup_title": "Backup file",
+    "import_choice_backup_description": "Import a saved Hub backup.",
+    "import_choice_authenticate_title": "Authenticate now",
+    "import_choice_authenticate_description": "Use a backup file without saving it.",
+    "import_choice_seed_title": "Seedphrase",
+    "import_choice_seed_description": "Restore using your seedphrase.",
+    "import_backup_heading": "Import from backup file",
+    "import_backup_drop_hint": "Drop backup file or click to select.",
+    "import_authenticate_heading": "Authenticate from backup file",
+    "import_authenticate_drop_hint": "Drop a backup file or click to select. It will not be saved on this device.",
+    "import_seed_label": "Seedphrase",
+    "import_seed_placeholder": "Enter your seedphrase",
+    "import_wallet_password": "Wallet password",
+    "importing_account": "Importing account...",
+    "seed_import_error": "Unable to import this seedphrase.",
+    "seed_import_duplicate": "This account is already stored on this device.",
+    "seed_import_success": "Account imported successfully.",
+    "import_backup_success_one": "{{count}} account imported successfully.",
+    "import_backup_success_other": "{{count}} accounts imported successfully.",
+    "import_backup_duplicate": "These accounts are already stored on this device.",
+    "import_backup_invalid": "This backup file does not contain a valid account.",
+    "import_file_read_aborted": "File reading was aborted",
+    "import_file_read_failed": "File reading has failed",
+    "filter_accounts_aria": "Filter accounts by address, primary name or note",
+    "filter_placeholder": "Address, primary name or note…",
+    "filter_no_results": "No accounts match.",
+    "filter_clear": "Clear search",
+    "wallet_edit_name_label": "Name",
+    "wallet_edit_account_name_placeholder": "Account name",
+    "wallet_edit_note_label": "Note",
+    "wallet_edit_note_placeholder": "Optional note",
+    "wallet_edit_remove": "Remove",
+    "wallet_edit_save": "Save",
+    "wallet_edit_aria_label": "Edit account label and note"
+  },
+  "authentication_form": {
+    "unnamed_account": "Unnamed account",
+    "password_placeholder": "Enter your password",
+    "unlock": "Unlock",
+    "choose_another_account": "Choose another account",
+    "using_local_node": "Using local node",
+    "using_public_node": "Using public node",
+    "using_custom_node": "Using custom node",
+    "using_custom_node_named": "Using {{label}}"
+  },
+
   "temp_auth": {
     "tooltip": "authenticate without storing your account in Hub",
     "button": "temp auth"
diff --git a/src/i18n/locales/en/core.json b/src/i18n/locales/en/core.json
index 3e0db42f..37d79f6c 100644
--- a/src/i18n/locales/en/core.json
+++ b/src/i18n/locales/en/core.json
@@ -7,6 +7,7 @@
     "add_custom_framework": "add custom framework",
     "add_reaction": "add reaction",
     "add_theme": "add theme",
+    "back": "back",
     "backup_account": "backup account",
     "backup_wallet": "backup wallet",
     "cancel": "cancel",
@@ -133,9 +134,9 @@
   "core": {
     "block_height": "block height",
     "data_peers": "QDN (data) peers",
-    "information": "core information",
+    "information": "Core information",
     "peers": "connected peers",
-    "version": "core version"
+    "version": "Core version"
   },
   "current_language": "current language: {{ language }}",
   "dev": "dev",
@@ -249,6 +250,8 @@
       "confirmed": "confirmed",
       "created_by": "created by {{ owner }}",
       "devmode_local_node": "please use your local node for dev mode! Logout and use Local node.",
+      "disable_os_push": "Disable OS push",
+      "disable_os_push_desc": "Mute desktop alerts for this app while keeping in-Hub activity visible.",
       "downloading_decrypting_app": "downloading and decrypting private app.",
       "downloading": "downloading",
       "edited": "edited",
@@ -256,11 +259,17 @@
       "encrypted_not": "not encrypted",
       "encrypted": "encrypted",
       "amount_qort": "amount: {{ amount }} QORT",
+      "app_notifications_hint": "Q-App notifications will appear here",
       "fee_qort": "fee: {{ fee }} QORT",
       "fetching_data": "fetching app data",
       "foreign_fee": "foreign fee: {{ fee }}",
       "get_qort_trade_portal": "get QORT using Qortal's crosschain trade portal",
+      "loading": "Loading...",
       "mentioned": "mentioned",
+      "new_notification_from": "New notification from {{ appName }}",
+      "new_payment_body": "You received {{ amount }} QORT.",
+      "new_payment_received": "New payment received",
+      "new_qmail": "You got a new qmail",
       "message_with_image": "this message already has an image",
       "minimal_qort_balance": "Having at least {{ quantity }} QORT in your balance allows you to send chat messages at near instant speed.",
       "most_recent_payment": "{{ count }} most recent payment",
@@ -272,12 +281,17 @@
       "name_rate": "you need a name to rate.",
       "name_registration": "Your balance is {{ balance }} QORT. A name registration requires a {{ fee }} QORT fee",
       "name_unavailable": "{{ name }} is unavailable",
+      "no_app_notifications": "No app notifications yet",
       "no_data_image": "no data for image",
       "no_description": "no description",
       "no_messages": "no messages",
       "no_message": "no message",
       "no_minting_details": "cannot view minting details on the gateway",
+      "no_notification_apps": "No apps have notification permission yet.",
       "no_notifications": "no new notifications",
+      "notification_settings": "Notification settings",
+      "notification_settings_desc": "Choose which apps can send desktop alerts while keeping in-Hub activity visible.",
+      "notifications": "Notifications",
       "no_payments": "no payments",
       "no_pinned_changes": "you currently do not have any changes to your pinned apps",
       "no_results": "no results",
@@ -299,6 +313,7 @@
       "replied_to_you": "↩ replied to you",
       "revert_default": "revert to default",
       "revert_qdn": "revert to QDN",
+      "revoke_permission": "Revoke",
       "save_qdn": "save to QDN",
       "secure_ownership": "secure ownership of data published by your name. You can even sell your name, along with your data to a third party.",
       "select_file": "please select a file",
@@ -311,7 +326,8 @@
       "replying_to": "replying to {{name}}",
       "unsaved_changes": "you have unsaved changes to your pinned apps. Save them to QDN.",
       "updating": "updating",
-      "wait": "please wait"
+      "wait": "please wait",
+      "open_q_trade_subtitle": "Open Q-Trade and buy QORT from the trade portal."
     },
     "message": "message",
     "promotion_text": "promotion text",
@@ -339,6 +355,7 @@
       "rated_app": "successfully rated. Please wait a couple minutes for the network to propagate the changes.",
       "request_read": "i have read this request",
       "transfer": "the transfer was successful!",
+      "transfer_submitted": "your transfer was submitted successfully.",
       "voted": "successfully voted. Please wait a couple minutes for the network to propagate the changes."
     }
   },
@@ -368,7 +385,38 @@
     },
     "status_title": "minting status",
     "tier_share_per_block": "tier share per block",
-    "total_minter_in_tier": "total minters in the tier"
+    "total_minter_in_tier": "total minters in the tier",
+    "panel": {
+      "dialog_subtitle": "Review your current minting state, progress, and next steps.",
+      "state_syncing_title": "Synchronizing",
+      "state_syncing_body": "The node is still syncing, so minting cannot begin yet.",
+      "state_active_title": "Minting active",
+      "state_active_body_node_selection": "This minter key is configured on this node. Stats reflect the selected account.",
+      "state_active_body_account": "This account is configured to mint on this node.",
+      "state_inactive_title": "Not minting",
+      "state_inactive_body_not_in_group": "This account is not yet part of the minter group.",
+      "state_inactive_body_multi_key": "This node already has multiple minting keys configured.",
+      "state_inactive_body_ready": "This account is ready for the next minting step.",
+      "next_step_visit_q_mintership": "Visit the Q-Mintership app to apply to become a minter.",
+      "next_step_already_active": "Minting is already active on this node.",
+      "next_step_wait_sync": "Wait for the node to finish syncing before minting can begin.",
+      "next_step_start_when_ready": "Start minting on this node when you are ready.",
+      "section_your_wallet": "Your wallet",
+      "section_minter_profile_stats": "Minter profile (stats)",
+      "section_account_identity": "Account identity",
+      "section_progress_next_level": "Progress to next level",
+      "section_next_step": "Next step",
+      "section_node_minting_accounts": "Node minting accounts",
+      "select_account_for_stats_hint": "Select an account to update progress and reward stats on the right.",
+      "badge_viewing_stats": "Viewing stats",
+      "blocks_to_level": "blocks to level {{level}}",
+      "minting_for_approx_days": "Minting for: ~{{days}} days",
+      "reference_only": "(for reference only)",
+      "rewards_info_subtitle_own": "(your rewards info)",
+      "rewards_info_subtitle_selected": "(selected minter — rewards for this key)",
+      "network_details": "Network details",
+      "loading_spinner_aria": "Loading"
+    }
   },
   "name": "name",
   "name_app": "name/App",
@@ -392,10 +440,36 @@
   "publish": "publish",
   "q_apps": {
     "about": "about this Q-App",
-    "q_mail": "q-mail",
-    "q_manager": "q-manager",
-    "q_sandbox": "q-Sandbox",
-    "q_wallets": "q-Wallets"
+    "q_mail": "Q-Mail",
+    "q_manager": "Q-Manager",
+    "q_sandbox": "Q-Sandbox",
+    "q_wallets": "Q-Wallets",
+    "wallets_workspace": "wallet workspace"
+  },
+  "account_lookup": {
+    "dialog_title": "User search",
+    "empty_title": "Search accounts",
+    "empty_subtitle": "Enter a name or address",
+    "tooltip_send_disabled": "This is your own profile.",
+    "tooltip_block_public_node": "Blocking users is unavailable while running on a public node.",
+    "tooltip_block_self": "You cannot block yourself.",
+    "error_lookup_failed": "Unable to look up this user.",
+    "chip_level": "Level {{level}}",
+    "chip_blocked": "Blocked",
+    "chip_no_registered_name": "No registered name",
+    "section_minting_progress": "Minting progress",
+    "minting_remaining": "{{remaining}} remaining",
+    "minting_blocks_to_level": "{{remaining}} to level {{level}}",
+    "minting_approx_one": "~{{count}} day minting (approx.)",
+    "minting_approx_other": "~{{count}} days minting (approx.)",
+    "minting_days_label": "Minting for:",
+    "label_address": "Address",
+    "label_public_key": "Public key",
+    "payments_title": "Recent payments",
+    "pagination_rows_per_page": "Rows per page:",
+    "pagination_displayed_rows": "{{from}}–{{to}} of {{count}}",
+    "action_block": "block",
+    "action_unblock": "unblock"
   },
   "app_detail": {
     "about": "about",
@@ -457,7 +531,10 @@
     "official_apps": "official apps"
   },
   "aria": {
-    "apps_library_tabs": "apps library navigation tabs"
+    "apps_library_tabs": "apps library navigation tabs",
+    "core_controls": "Core controls",
+    "switch_theme_dark": "Switch to dark mode",
+    "switch_theme_light": "Switch to light mode"
   },
   "supply": "supply",
   "tags": "tags",
@@ -504,6 +581,157 @@
     "wallet": "wallet",
     "wallet_other": "wallets"
   },
+  "widget_container": {
+    "empty_message": "Nothing to show right now.",
+    "empty_title": "No items yet",
+    "error_title": "Unable to load this widget",
+    "loading": "Loading",
+    "loading_message": "Pulling the latest public data from the default Qortal node.",
+    "retry": "Retry"
+  },
+  "quitter_feed": {
+    "error_generic": "The public Quitter feed is temporarily unavailable. Give it another try in a moment.",
+    "error_following": "The personalized Quitter feed is temporarily unavailable. Please try again.",
+    "error_timeout": "Feed load failed. You can try again or return to General.",
+    "loading_following": "Loading following feed...",
+    "loading_general": "Loading feed...",
+    "error_title_following": "Feed load failed",
+    "error_title_general": "Unable to load posts",
+    "empty_title_no_name": "Sign in to personalize your feed",
+    "empty_title_no_following": "It looks like you’re not following anyone yet.",
+    "empty_title_no_posts": "No followed posts available",
+    "empty_title_general": "No posts available",
+    "empty_message_no_name": "Sign in with a Qortal name to build a personalized feed.",
+    "empty_message_no_following": "Browse Quitter and follow accounts to build your feed.",
+    "empty_message_no_posts": "The accounts you follow haven’t posted to Quitter yet.",
+    "tab_general": "General",
+    "tab_following": "Following",
+    "subtitle_personalized": "Personalized feed",
+    "subtitle_public": "Public feed",
+    "retry_following": "Try Again",
+    "retry_general": "Retry",
+    "return_to_general": "Return to General",
+    "posts_showing_one": "{{count}} post showing",
+    "posts_showing_other": "{{count}} posts showing",
+    "new_posts_one": "{{count}} new post",
+    "new_posts_other": "{{count}} new posts"
+  },
+  "qortino_workspace": {
+    "modules_hotkeys_label": "Hotkeys",
+    "modules_hotkeys_description": "Curated shortcuts for your most-used routes.",
+    "modules_music_label": "Music player",
+    "modules_music_description": "A compact Earbump player with search and quick playback.",
+    "modules_suggest_label": "Suggest a module",
+    "modules_suggest_description": "Compose > Add Subject + Message & Send it our way!",
+    "workspace_empty_prompt": "Choose what lives above QORTINO.",
+    "workspace_header_hotkeys": "Hotkeys",
+    "workspace_header_music": "Music player",
+    "workspace_add_app": "Add app",
+    "getting_started_heading": "Getting started",
+    "onboarding_step_progress": "Step {{current}} / {{total}}",
+    "dialog_module_title": "Choose a module",
+    "dialog_module_subtitle": "Pick what lives above QORTINO.",
+    "dialog_hotkeys_title": "Select hotkeys",
+    "dialog_hotkeys_subtitle": "Saved automatically for this account.",
+    "dialog_music_search_title": "Search Earbump",
+    "dialog_music_search_subtitle": "Find a track, press play, and drop it into the player above.",
+    "search_placeholder_qapps": "Search Q-Apps",
+    "search_placeholder_tracks": "Search tracks or artists",
+    "section_recommended": "Recommended",
+    "curated_badge": "[ CURATED ]",
+    "hotkeys_loading_library": "Loading Q-Apps library...",
+    "hotkeys_unavailable_title": "Q-Apps unavailable",
+    "hotkeys_no_match_title": "No Q-Apps match yet",
+    "hotkeys_no_match_hint": "Try another app name to wire a shortcut into the selected slot.",
+    "error_hotkey_catalog": "Unable to load Q-Apps right now.",
+    "music_section_results": "Results",
+    "music_section_discovery": "Discovery",
+    "music_loading_search": "Searching the EarBump library...",
+    "music_loading_discovery": "Loading EarBump discovery...",
+    "music_quiet_title": "EarBump is quiet right now",
+    "music_no_tracks_title": "No tracks surfaced",
+    "music_no_tracks_hint": "Try another title or artist to pull something into the player.",
+    "error_earbump_discovery": "Unable to load EarBump right now.",
+    "error_earbump_search": "Unable to search EarBump right now.",
+    "music_syncing_library": "Syncing with EarBump library...",
+    "music_empty_title": "EarBump library",
+    "music_empty_uploaded": "Waiting for library",
+    "music_track_load_failed": "This track could not finish loading on your node.",
+    "music_no_peers_data": "No peers for remaining data",
+    "music_preparing_peers_one": "Preparing on your node... {{percent}}% ({{count}} peer)",
+    "music_preparing_peers_other": "Preparing on your node... {{percent}}% ({{count}} peers)",
+    "music_preparing_percent_only": "Preparing on your node... {{percent}}%",
+    "music_searching_peers": "Looking for peers...",
+    "music_finalizing_track": "Finalizing the track on your node...",
+    "music_preparing_base": "Preparing on your node...",
+    "music_playback_stalled": "Playback stalled. Press play to retry.",
+    "music_stream_stalled": "Track stalled. Rebuilding the stream...",
+    "hotkeys_launch_description": "Launch {{appName}}",
+    "hotkeys_fallback_launch": "Launch Q-App",
+    "reaction_hotkeys_ready": "Hotkeys panel ready.",
+    "reaction_music_panel_ready": "Music panel ready.",
+    "reaction_panel_cleared": "Panel cleared.",
+    "reaction_music_player_ready": "Music player ready.",
+    "reaction_locked_track": "Locked on {{title}}.",
+    "reaction_track_rotation": "{{title}} is in rotation.",
+    "reaction_onboarding_route": "Onboarding route open. I'll keep the next step warm.",
+    "reaction_support_chat": "Support chat is open. Ask for the 6 QORT and I'll queue step two.",
+    "reaction_q_trade_open": "Q-Trade is up. If you grab QORT there, I'll take you forward.",
+    "reaction_name_flow": "Name flow open. This is where the hub starts recognizing you.",
+    "reaction_avatar_flow": "Avatar flow ready. Let's give this place a face.",
+    "track_meta_separator": "·",
+    "a11y_clear_hotkey_slot": "Clear slot {{n}}",
+    "hotkey_slot_number": "Slot {{n}}",
+    "runtime_workspace_bay_title": "Workspace bay hit a runtime snag.",
+    "runtime_workspace_bay_body": "QORTINO below is still safe. Refresh the Hub and if this keeps happening we will trace the exact crash from here.",
+    "runtime_qortino_title": "QORTINO hit a runtime snag.",
+    "runtime_qortino_body": "The workspace bay above is still safe. Refresh the Hub and if this keeps happening we will trace the exact crash from here."
+  },
+  "quick_tools_pad": {
+    "user_search": "User Search",
+    "wallets": "Wallets",
+    "minting": "Minting",
+    "backup_wallet": "Backup Wallet",
+    "q_chat": "Q-Chat",
+    "notifications_enable": "Enable Notifications",
+    "notifications_mute": "Mute Notifications",
+    "apps": "Apps",
+    "extras": "",
+    "hint_notifications_desktop_only": "This only mutes desktop alerts. In-Hub notifications still continue.",
+    "hint_minting_panel": "This panel unlocks once you're a minter. Swing by Q-Mintership to get started!",
+    "snackbar_backup_wallet": "Download your wallet file. This is required to access your account"
+  },
   "website": "website",
-  "welcome": "welcome"
+  "welcome": "welcome",
+  "bookmarks": {
+    "title": "Bookmarks",
+    "bookmarked": "Bookmarked",
+    "add_page": "Add page",
+    "loading": "Loading bookmarks...",
+    "folder": "Folder",
+    "create_folder": "Create folder",
+    "folder_name": "Folder name",
+    "new_folder": "New folder",
+    "top_level": "Top level",
+    "edit_bookmark": "Edit bookmark",
+    "add_bookmark": "Add bookmark",
+    "save_location_without_query": "Save a Q-App location without query parameters.",
+    "name": "Name",
+    "bookmark_name_placeholder": "Bookmark name",
+    "qortal_link": "Qortal link",
+    "qortal_link_placeholder": "qortal://APP/Name/path",
+    "no_bookmarks": "No bookmarks yet.",
+    "no_bookmarks_folder": "No bookmarks in this folder.",
+    "bookmark_count_one": "{{count}} bookmark",
+    "bookmark_count_other": "{{count}} bookmarks",
+    "edit": "Edit",
+    "move": "Move",
+    "delete": "Delete",
+    "rename": "Rename",
+    "remove": "Remove",
+    "create": "Create",
+    "more": "More",
+    "delete_folder_title": "Delete folder?",
+    "delete_folder_message": "Bookmarks in this folder will be moved to the top level."
+  }
 }
diff --git a/src/i18n/locales/en/group.json b/src/i18n/locales/en/group.json
index 645b9801..02a6b046 100644
--- a/src/i18n/locales/en/group.json
+++ b/src/i18n/locales/en/group.json
@@ -28,6 +28,280 @@
     "select_group": "select a group",
     "visit_q_mintership": "visit Q-Mintership"
   },
+  "dashboard": {
+    "qort_balance": "QORT Balance",
+    "node_status": "Node Status",
+    "node_unavailable": "Node unavailable",
+    "sync_percent": "{{percent}}% Synced",
+    "minter_level": "Minter Level",
+    "peers": "Peers",
+    "qdn": "QDN",
+    "core": "Core",
+    "hub": "Hub",
+    "node": "Node",
+    "using_node": "Using Node",
+    "change_node": "Change node",
+    "node_type": "Node Type",
+    "node_height": "Node Height",
+    "local_node": "Local node",
+    "public_node": "Public node",
+    "custom_node": "Custom node",
+    "synchronizing": "Synchronizing",
+    "fully_operational": "Fully operational",
+    "not_operational": "Not operational",
+    "attention_needed": "Attention needed",
+    "apply": "Apply",
+    "info_panel_status": "status",
+    "info_panel_node_comment": "// node_info",
+    "minter_pin_save_progress_default": "Save level bar as default view",
+    "minter_pin_save_dots_default": "Save minting dots as default view",
+    "node_switch_error": "Could not switch nodes right now.",
+    "node_menu_local": "Local Node",
+    "node_menu_public": "Public Node",
+    "qortino_runtime_title": "QORTINO card shell hit a runtime snag.",
+    "qortino_runtime_body": "The rest of the dashboard is still safe. Refresh the Hub and if this keeps happening report it to the team.",
+    "no_custom_nodes_saved": "No custom nodes saved",
+    "wallet_activity": "Wallet Activity",
+    "send": "Send",
+    "receive": "Receive",
+    "buy": "Buy",
+    "recent_transaction": "Recent Transaction",
+    "loading_wallet_activity": "Loading recent wallet activity...",
+    "sent_to": "sent to ",
+    "received_from": "received from ",
+    "no_wallet_activity": "No new wallet activity.",
+      "wallet_activity_window": "Latest transaction within the past 7 days",
+      "wallet_activity_unknown_address": "Unknown address",
+      "wallet_activity_relative_just_now": "Just now",
+      "wallet_activity_relative_minutes_ago_one": "{{count}} minute ago",
+      "wallet_activity_relative_minutes_ago_other": "{{count}} minutes ago",
+      "wallet_activity_relative_hours_ago_one": "{{count}} hour ago",
+      "wallet_activity_relative_hours_ago_other": "{{count}} hours ago",
+      "wallet_activity_relative_days_ago_one": "{{count}} day ago",
+      "wallet_activity_relative_days_ago_other": "{{count}} days ago",
+      "open_in_q_chat": "Open in Q-Chat",
+    "open_in_q_apps": "Open in Q-Apps",
+    "quitter_feed": "Quitter Feed",
+    "quitter_show_more": "Show more",
+    "quitter_show_less": "Show less",
+    "quitter_video_attachment": "Video attachment",
+    "quitter_video_preview_hub": "Preview stays read-only in Hub",
+    "featured_q_apps": "Featured Q-Apps",
+    "featured_q_apps_subtitle": "Launch trusted community apps directly from your dashboard.",
+    "explore_all_q_apps": "Explore All Q-Apps",
+    "reduce_motion": "Reduce motion",
+    "account_overview": "Account Overview",
+    "qortal_name_address": "QORTAL NAME & ADDRESS",
+    "profile": "Profile",
+    "profile_settings": "Profile Settings",
+    "profile_settings_description": "Review your name and account identity.",
+    "security": "Security",
+    "security_settings": "Security Settings",
+    "security_settings_description": "Reveal and copy your private key only when absolutely needed.",
+    "developer": "Developer",
+    "developer_settings": "Developer Settings",
+    "developer_settings_description": "Enable developer tools and diagnostics for advanced testing.",
+    "system": "System",
+    "system_settings": "System Settings",
+    "system_settings_description": "Control notifications, motion, pinned apps, and blocked accounts.",
+    "current_name": "Current name",
+    "no_name_registered": "No name registered",
+    "wallet_address": "Wallet address",
+    "unavailable": "Unavailable",
+    "no_active_wallet": "No active wallet",
+    "names_qapp_actions_hint": "Buy, sell, and name-change actions should be handled in the Names Q-App.",
+    "open_the": "Open the",
+    "names": "Names",
+    "names_qapp_hint_suffix": "Q-App for buying names, selling names, or changing your registered name.",
+    "private_key_warning": "Never share your private key. Anyone who has it could potentially control this wallet and its funds.",
+    "wallet_password": "Wallet password",
+    "wallet_password_placeholder": "Enter your wallet password",
+    "decrypt": "Decrypt",
+    "copy_key": "Copy key",
+    "private_key": "Private key",
+    "private_key_hint": "Decrypt your private key only when you need to recover or migrate this wallet.",
+    "notifications_update_error": "We could not update app notifications right now.",
+    "wallet_unavailable_error": "Wallet data is unavailable right now.",
+    "wallet_password_required": "Enter your wallet password to decrypt the private key.",
+    "wallet_decrypt_error_with_message": "We could not decrypt your wallet: {{message}}",
+    "wallet_decrypt_error": "We could not decrypt your wallet with that password.",
+    "private_key_copied": "Private key copied to clipboard.",
+    "enable_dev_mode": "Enable Dev Mode",
+    "enable_dev_mode_desc": "Unlock local developer surfaces, diagnostics, and testing tools across the Hub.",
+    "dev_mode_tip": "Tip: Once enabled, a new Developer Tools icon will appear in your sidebar. You might need to hover over the left edge to reveal it.",
+    "reduce_app_notifications": "Reduce App Notifications",
+    "reduce_app_notifications_desc": "Turn on to mute desktop push notifications. Leave off for normal Hub alerts.",
+    "reduce_ui_animations": "Reduce UI Animations",
+    "reduce_ui_animations_desc": "Turn on to minimize motion throughout the Hub. Leave off for the normal animated interface.",
+    "pinned_qapp_backup": "Pinned Q-App backup",
+    "pinned_qapp_backup_desc": "Save your pinned Q-Apps to encrypted QDN settings so the same layout can follow you across devices.",
+    "manage_backup": "Manage backup",
+    "block_list": "Block list",
+    "block_list_desc": "Review blocked names and addresses, then unblock accounts when you are ready.",
+    "blocked_count": "{{count}} blocked",
+    "addresses": "Addresses",
+    "unblock": "Unblock",
+    "no_blocked_accounts": "No blocked accounts yet.",
+    "show_receive_qr": "Show receive QR",
+    "copy_address": "Copy address",
+    "privacy_mode_tooltip": "Privacy Mode: Blurs sensitive info for screen sharing",
+    "toggle_privacy_mode": "Toggle privacy mode",
+    "send_qort": "Send QORT",
+    "send_qort_subtitle": "Transfer QORT to any registered name or address.",
+    "close_send_qort_modal": "Close send QORT modal",
+    "receive_qort": "Receive QORT",
+    "receive_qort_subtitle": "Scan to receive QORT",
+    "close_receive_qort_modal": "Close receive QORT modal",
+    "download_qr": "Download QR",
+    "qortal_address_or_name": "Qortal address or registered name",
+    "blocked": "Blocked",
+    "account_status_online": "Online",
+    "account_status_busy": "Busy",
+    "account_status_invisible": "Invisible",
+    "account_settings_tooltip": "Account settings",
+    "open_account_settings_aria": "Open account settings",
+    "name_change_confirm": "Change your registered name from {{oldName}} to {{newName}}?",
+    "name_change_success": "Name change submitted successfully.",
+    "name_change_register_first": "Register a name first before changing it.",
+    "name_change_enter_new_name": "Enter the new name you want to use.",
+    "name_change_different_from_current": "Choose a different name from your current one.",
+    "name_change_details_still_loading": "Still loading your current name details. Try again in a moment.",
+    "name_change_choose_available": "Choose an available name before continuing.",
+    "name_change_wallet_password_required": "Enter your wallet password before changing your name.",
+    "name_change_wallet_password_failed": "We could not verify your wallet password.",
+    "current_name_details_load_failed": "We could not load your current name details.",
+    "name_change_unknown_error": "Something went wrong while changing your name.",
+    "name_availability_available": "Name is available.",
+    "name_availability_checking": "Checking name availability...",
+    "name_availability_same_as_current": "Choose a different name from the one you already use.",
+    "name_availability_taken": "That name is already taken."
+  },
+  "groups_widget": {
+    "accept": "Accept",
+    "approve": "Approve",
+    "cancel": "Cancel",
+    "characters_count": "{{current}}/{{max}}",
+    "confirm_approve_request": "Approve this request and invite them into the group?",
+    "confirm_join_group": "Join this group now?",
+    "confirm_join_promoted_closed": "Send a join request to this promoted group?",
+    "confirm_join_promoted_open": "Join this promoted group now?",
+    "connecting": "Connecting...",
+    "discover_groups": "Discover Groups",
+    "error_accept_invite": "Could not accept that invite right now.",
+    "error_approve_request": "Could not approve that request right now.",
+    "error_load_invites": "Could not load group invites right now.",
+    "error_load_promotions": "Could not load promoted groups right now.",
+    "error_load_requests": "Could not load join requests right now.",
+    "error_promoted": "Could not act on that promoted group right now.",
+    "error_publish_promotion": "Could not publish that promotion right now.",
+    "fresh_promotion_snippet": "This group has a fresh promoted update.",
+    "from_label": "from",
+    "group_admin_only": "Group admin only",
+    "group_general": "General",
+    "group_named": "Group {{id}}",
+    "ignore": "Ignore",
+    "invitation_ready": "Invitation ready to review",
+    "invite_hidden": "Invite hidden from this widget for now.",
+    "invites_empty_description": "Fresh group invitations will appear here as they arrive.",
+    "invites_empty_title": "No pending invites",
+    "joined_group": "Joined {{name}}.",
+    "joined_promoted": "Joined {{name}}.",
+    "join_group": "Join group",
+    "join_request_sent": "Join request sent for {{name}}.",
+    "loading_invites": "Loading invites",
+    "loading_notifications": "Loading notifications",
+    "loading_promoted": "Loading promoted groups",
+    "loading_requests": "Loading requests",
+    "members_count": "{{count}} members",
+    "new_encrypted_message": "New encrypted message",
+    "notifications_empty_message": "Join communities in Q-Chat to populate this feed with group messages, mentions, and activity.",
+    "notifications_empty_title": "Start with Q-Chat groups",
+    "open": "Open",
+    "open_conversation": "Open conversation",
+    "private_group": "Private group",
+    "private_group_invite": "Private group invite",
+    "processing": "Processing...",
+    "promoted_by": "Promoted by {{name}}",
+    "promoted_empty_message": "Promoted groups will appear here when fresh highlights are available.",
+    "promoted_empty_title": "No promoted groups",
+    "promote_dialog_fee": " Publish fee: {{fee}} QORT.",
+    "promote_dialog_intro": "Share a short highlighted update for one of your admin groups.",
+    "promote_group": "Promote Group",
+    "promote_page_title": "Promote one of your groups",
+    "promotion_published": "Group promotion published.",
+    "promotion_placeholder": "Write a short promotion for this group.",
+    "public_group": "Public group",
+    "refresh": "Refresh",
+    "reject": "Reject",
+    "request_access": "Request access",
+    "request_approved": "{{requester}} was approved for {{group}}.",
+    "request_removed": "Request removed from this widget for now.",
+    "request_sent": "Request sent",
+    "requests_empty_description": "Join requests from groups you manage will appear here.",
+    "requests_empty_title": "No pending requests",
+    "select_admin_group": "Select a group you admin",
+    "tab_invites": "Invites",
+    "tab_notifications": "Notifications",
+    "tab_promoted": "Promoted",
+    "tab_requests": "Requests",
+    "unknown": "Unknown",
+    "view_conversation": "View conversation",
+    "wants_to_join": "Wants to join this group.",
+    "you": "You",
+    "publish": "Publish"
+  },
+  "subscription": {
+    "subscriptions": "subscriptions",
+    "tooltip_actions_needed_one": "{{title}} - {{count}} action needed",
+    "tooltip_actions_needed_other": "{{title}} - {{count}} actions needed",
+    "relative_soon": "soon",
+    "relative_in_minutes_one": "in {{count}} min",
+    "relative_in_minutes_other": "in {{count}} mins",
+    "relative_in_hours_one": "in {{count}} hour",
+    "relative_in_hours_other": "in {{count}} hours",
+    "relative_in_days_one": "in {{count}} day",
+    "relative_in_days_other": "in {{count}} days",
+    "relative_in_months_one": "in {{count}} month",
+    "relative_in_months_other": "in {{count}} months",
+    "row_fallback_title": "subscription",
+    "by_creator": "by {{name}}",
+    "creator_fallback": "Qortal creator",
+    "price_line": "{{price}} QORT / {{interval}}",
+    "expires_suffix": " - expires {{time}}",
+    "status_due": "due",
+    "status_active": "active",
+    "status_owner": "owner",
+    "managed_fallback": "managed subscription",
+    "members_one": "{{count}} member",
+    "members_other": "{{count}} members",
+    "join_requests_suffix_one": " - {{count}} join request",
+    "join_requests_suffix_other": " - {{count}} join requests",
+    "re_encryption_suffix": " - re-encryption needed",
+    "actions_badge_one": "{{count}} action",
+    "actions_badge_other": "{{count}} actions",
+    "loading": "loading subscriptions",
+    "section_needs_action": "needs action",
+    "section_active": "active",
+    "open_subscriptions": "open subscriptions",
+    "empty_title": "Discover subscription-powered Q-Apps",
+    "empty_body": "Subscribe to creators and communities from Q-Apps that support subscriptions, such as SubWire.",
+    "open_subwire": "open SubWire",
+    "tab_subscriptions": "Subscriptions",
+    "tab_subwire": "SubWire"
+  },
+  "group_invites": {
+    "empty_title": "no invite requests",
+    "empty_secondary_1": "you don't have any pending invites",
+    "empty_secondary_2": "at the moment.",
+    "empty_tertiary_no_groups": "you are not part of any groups yet.",
+    "cta_find_groups": "find groups"
+  },
+  "group_join_requests": {
+    "empty_title": "no join requests",
+    "empty_secondary_1": "you don't have any pending requests",
+    "empty_secondary_2": "at the moment.",
+    "empty_tertiary_no_admin_groups": "you're not managing any groups yet."
+  },
   "advanced_options": "advanced options",
   "block_delay": {
     "minimum": "minimum Block delay",
@@ -73,6 +347,8 @@
     "generic": {
       "avatar_publish_fee": "publishing an Avatar requires {{ fee }}",
       "avatar_registered_name": "a registered name is required to set an avatar",
+      "add_new_key_option": "Add a new key",
+      "add_new_key_sparingly": "Adding a new key should be done sparingly to avoid increasing the size of the group keys.",
       "admin_only": "only groups where you are an admin will be shown",
       "already_in_group": "you are already in this group!",
       "block_delay_minimum": "minimum Block delay for Group Transaction Approvals",
@@ -106,6 +382,7 @@
       "node_minting_key": "you currently have a minting key for this account attached to this node",
       "no_announcement": "no announcements",
       "no_display": "nothing to display",
+      "no_description": "no description",
       "no_selection": "no group selected",
       "not_part_group": "you are not part of the encrypted group of members. Wait until an admin re-encrypts the keys.",
       "only_encrypted": "only unencrypted messages will be displayed.",
@@ -171,5 +448,11 @@
       "user_joined": "user successfully joined!"
     }
   },
+  "context_menu": {
+    "mark_as_read": "Mark as read",
+    "mute_push_notifications": "Mute push notifications",
+    "unmute_push_notifications": "Unmute push notifications",
+    "mark_all_read": "Mark all as read"
+  },
   "thread_posts": "new thread posts"
 }
diff --git a/src/i18n/locales/en/node.json b/src/i18n/locales/en/node.json
index b9f35037..30fd258f 100644
--- a/src/i18n/locales/en/node.json
+++ b/src/i18n/locales/en/node.json
@@ -40,7 +40,8 @@
     "invalidKey": "invalid apikey",
     "failed_stop": "unable to stop the Core",
     "failed_bootstrap": "unable to bootstrap",
-    "failed_delete": "unable to delete db"
+    "failed_delete": "unable to delete db",
+    "failed_bootstrap_or_clear": "could not bootstrap, clear chain data, or start Core"
   },
   "status": {
     "complete": "complete",
@@ -81,7 +82,12 @@
   "confirmations": {
     "stop": "Are you sure you want to stop the core?",
     "bootstrap": "Are you sure you want to bootstrap?",
-    "delete": "Are you sure you want to delete the db?"
+    "delete": "Are you sure you want to delete the db?",
+    "bootstrapOrClearChain": "Runs the bootstrap snapshot when Core is running locally. If that is not possible or bootstrap fails, local chain DB may be removed and Core will start again—wallet files are left alone. Continue?"
+  },
+  "bootstrapChainHelp": {
+    "title": "Bootstrap chain",
+    "body": "One tool: bootstrap from snapshot when Core is up, or wipe local chain DB and start Core again when bootstrap is not possible. Your wallet is stored separately."
   },
   "stop": "stop Core",
   "bootstrap": "bootstrap",
@@ -89,6 +95,53 @@
   "more": "more options",
   "less": "less options",
   "enableAuthWhenSyncing": "enable auth when syncing",
+  "coreSetupDialog": {
+    "title": "Set up Qortal Core",
+    "introTitle": "Run your own node locally.",
+    "introSubtitle": "You can use a public node while Core starts and syncs.",
+    "publicNodeUnavailable": "Public nodes are currently unavailable. Keep this screen open while local Core starts and syncs.",
+    "steps": {
+      "downloadDone": "Downloaded Core",
+      "downloadActive": "Downloading Core",
+      "downloadIdle": "Download Core",
+      "runningDone": "Core running",
+      "runningActive": "Starting Core",
+      "runningIdle": "Start Core"
+    },
+    "readyToDownload": "Ready to download",
+    "readyToStart": "Ready to start",
+    "syncing": "Syncing",
+    "helpers": {
+      "downloadDone": "Core files are installed and ready.",
+      "downloadActive": "Downloading and preparing Qortal Core.",
+      "downloadIdle": "Download Qortal Core to run your own node.",
+      "runningDoneSyncing": "Core is running and syncing blockchain data.",
+      "runningDone": "Core is running locally.",
+      "runningWaiting": "Core will start and begin syncing in the background.",
+      "runningBlocked": "Available after Core is downloaded."
+    },
+    "nextStepPill": "Next step",
+    "locationTitle": "Core location",
+    "locationCustom": "Qortal Core will run from this folder.",
+    "locationDefault": "Qortal Core will use the default folder for this system.",
+    "locationPathDefault": "Default Qortal Core location",
+    "change": "Change",
+    "choose": "Choose",
+    "clear": "Clear",
+    "advancedTitle": "Advanced",
+    "advancedSubtitle": "Advanced tools and options for Core.",
+    "maintenanceUnavailable": "Core maintenance tools are unavailable while Core is starting or syncing.",
+    "stopCoreTitle": "Stop Core",
+    "stopCoreBody": "Stops the local Core process.",
+    "stopButton": "Stop",
+    "cancel": "Cancel",
+    "actionDownload": "Download Core",
+    "actionStart": "Start Core",
+    "actionDone": "Done",
+    "confirmTitle": "Confirm action",
+    "folderCopied": "Core folder copied",
+    "progressAriaLabel": "{{label}} progress"
+  },
   "NotFullyStarted": {
     "titleNotReady": "Core not fully started",
     "descNotReady": "The Qortal Core has yet to be fully started. Please wait.",
diff --git a/src/i18n/locales/en/question.json b/src/i18n/locales/en/question.json
index dbb0743a..96a5393e 100644
--- a/src/i18n/locales/en/question.json
+++ b/src/i18n/locales/en/question.json
@@ -152,8 +152,12 @@
     "invite": "do you give this application permission to invite {{ invitee }}?",
     "kick": "do you give this application permission to kick {{ partecipant }} from the group?",
     "leave_group": "do you give this application permission to leave the following group?",
-    "list_hosted_data": "do you give this application permission to get a list of your hosted data?",
-    "order_detail": "{{ qort_amount }} QORT for {{ foreign_amount }} {{ ticker }}",
+      "list_hosted_data": "do you give this application permission to get a list of your hosted data?",
+      "notification": "allow this app to send you Hub notifications?",
+      "notification_allow": "allow",
+      "notification_dont_allow": "don't allow",
+      "notification_title": "{{ appName }} notifications",
+      "order_detail": "{{ qort_amount }} QORT for {{ foreign_amount }} {{ ticker }}",
     "pay_publish": "do you give this application permission to make the following payments and publishes?",
     "perform_admin_action_with_value": "with value: {{ value }}",
     "perform_admin_action": "do you give this application permission to perform the admin action: {{ type }}",
diff --git a/src/i18n/locales/en/tutorial.json b/src/i18n/locales/en/tutorial.json
index 6ed6b3fc..2ed590ea 100644
--- a/src/i18n/locales/en/tutorial.json
+++ b/src/i18n/locales/en/tutorial.json
@@ -33,6 +33,7 @@
     "get_six_qorts_way3_action": "Open Q-Trade",
     "register_name": "Register your name",
     "confirming_transaction": "Confirming transaction",
+    "confirming": "Confirming",
     "load_avatar": "Load your avatar",
     "explore_apps": "Explore featured apps",
     "done": "Done",
@@ -53,6 +54,19 @@
     "devnet_testing_desc": "Test your Q-Apps in the DevNet-Testing environment",
     "open_app": "Open",
     "address_copied": "Address copied to clipboard",
-    "group_activity": "Group Activity"
+    "group_activity": "Group Activity",
+    "qorts_acquired": "QORT acquired",
+    "qorts_acquired_hint": "The hardest part is over. Press Next when you are ready to register your name.",
+    "get_qorts_workspace_hint": "Unlock your first 6 QORT to activate the rest of the setup.",
+    "register_name_workspace_hint": "A registered name turns this account into a recognizable identity.",
+    "load_avatar_workspace_hint": "Give the dashboard a face so the whole space starts to feel like yours.",
+    "onboarding_transition_hard_part_done": "Nice work. The hardest part is done.",
+    "onboarding_transition_one_more": "Great. One more to go.",
+    "onboarding_press_next_when_ready": "Nice work. The hardest part is done. Press Next when you are ready.",
+    "register_name_pending_hint": "Saving name on-chain. This can take a moment.",
+    "persistent_guide_get_qorts": "Let's start with 6 QORT. Pick any option above.",
+    "persistent_guide_register_name": "Next, register your name.",
+    "persistent_guide_load_avatar": "Finally, add your avatar.",
+    "post_onboarding_workspace_ready": "All set. You can start building your workspace above."
   }
 }
diff --git a/src/i18n/locales/es/auth.json b/src/i18n/locales/es/auth.json
index 44eb95fe..afa7a0d0 100644
--- a/src/i18n/locales/es/auth.json
+++ b/src/i18n/locales/es/auth.json
@@ -74,8 +74,11 @@
       "set_apikey": "fallo al establecer la clave API:"
     },
     "generic": {
+      "block_list_intro": "Añade un nombre Qortal o una dirección para bloquearlos. Las direcciones afectan las transacciones; bloquear un nombre oculta sus datos en todo el Hub.",
       "blocked_addresses": "direcciones bloqueadas: bloquea procesamiento de transacciones",
+      "blocked_addresses_hint": "Impide el procesamiento relacionado con transacciones desde estas direcciones.",
       "blocked_names": "nombres bloqueados para QDN",
+      "blocked_names_hint": "Estos nombres están bloqueados para datos QDN/Hub y funciones sociales.",
       "blocking": "bloqueando a {{ name }}",
       "choose_block": "elige 'bloquear transacciones' o 'todo' para bloquear mensajes de chat",
       "congrats_setup": "¡felicidades, todo está listo!",
@@ -88,6 +91,7 @@
       "locating_encryption_keys": "localizando claves de cifrado",
       "insert_name_address": "Por favor ingresa un nombre o dirección para iniciar una conversación privada.",
       "name_address": "nombre o dirección",
+      "no_blocked_users": "Todavía no hay nadie bloqueado. Añade arriba una dirección o un nombre cuando quieras silenciarlos.",
       "no_account": "no hay cuentas guardadas",
       "no_minimum_length": "no hay requisito de longitud mínima",
       "no_secret_key_published": "aún no se ha publicado ninguna clave secreta",
@@ -142,6 +146,159 @@
   },
   "welcome": "bienvenido a",
   "store_account": "almacenar cuenta en el Hub",
+  "create_wallet": {
+    "error_enter_password": "Introduce una contraseña de la billetera.",
+    "error_confirm_password": "Confirma la contraseña de tu billetera.",
+    "error_passwords_mismatch": "Las contraseñas no coinciden.",
+    "success_wallet_saved": "Billetera guardada",
+    "success_account_created": "Cuenta creada",
+    "success_ready_hub": "Ya puedes entrar al Hub.",
+    "success_backup_before_hub": "Guarda tu billetera cifrada antes de entrar al Hub.",
+    "enter_hub": "Entrar al Hub",
+    "download_another_copy": "Descargar otra copia",
+    "backup_wallet": "Copia de seguridad de la billetera",
+    "backup_encrypted_notice": "Esta copia está cifrada con la contraseña de tu billetera.",
+    "seed_title": "Tu frase semilla",
+    "seed_subtitle": "Permite recuperar tu cuenta. Guardar la frase semilla es opcional. A continuación viene la copia cifrada de la billetera, la forma recomendada de recuperar la cuenta.",
+    "reveal": "Mostrar",
+    "copied": "Copiado",
+    "copy": "Copiar",
+    "export": "Exportar",
+    "seed_warning": "No la compartas nunca. Quien la tenga puede acceder a tu cuenta. Para el uso diario, usa la copia cifrada de la billetera después de crearla.",
+    "create_account": "Crear cuenta",
+    "password_title": "Crear contraseña",
+    "password_subtitle": "Esta contraseña protege tu cuenta en este dispositivo.",
+    "wallet_password": "Contraseña de la billetera",
+    "confirm_password": "Confirmar contraseña",
+    "save_account_in_hub": "Guardar cuenta en el Hub",
+    "continue": "Continuar"
+  },
+  "import_account": {
+    "title": "Importar cuenta",
+    "subtitle": "Elige cómo quieres restaurar tu cuenta."
+  },
+  "backup_wallet_modal": {
+    "subtitle": "Descarga un archivo local de la billetera para poder restaurar esta cuenta después.",
+    "info_note": "Esto exporta un archivo de billetera localmente en tu dispositivo. Guárdalo en un lugar seguro.",
+    "current_password": "Contraseña actual",
+    "keep_password_in_export": "Mantener la contraseña actual en el archivo de billetera exportado",
+    "new_password_for_backup": "Nueva contraseña para esta copia de seguridad",
+    "download_wallet_file": "Descargar archivo de billetera",
+    "error_no_active_wallet": "No se encontró una billetera activa para la copia de seguridad.",
+    "error_unable_to_create_backup": "No se pudo crear la copia de seguridad de la billetera."
+  },
+  "wallet_errors": {
+    "unable_to_unlock_default": "no se puede desbloquear esta billetera.",
+    "unable_to_save_backup": "no se pudo guardar esta copia de seguridad de la billetera.",
+    "unable_to_prepare_backup": "no se pudo preparar esta copia de seguridad de la billetera.",
+    "account_not_found": "no se encontró esta cuenta guardada. elige otra cuenta o restaura esta billetera desde una copia de seguridad.",
+    "account_incomplete": "esta cuenta guardada parece incompleta o dañada. elige otra cuenta o restaura esta billetera desde una copia de seguridad.",
+    "invalid_security_data": "esta cuenta guardada tiene datos de seguridad de la billetera no válidos. elige otra cuenta o restaura esta billetera desde una copia de seguridad.",
+    "missing_encrypted_seed": "a esta cuenta guardada le falta la semilla cifrada (los datos bloqueados de la billetera necesarios para desbloquearla). elige otra cuenta o restaura esta billetera desde una copia de seguridad.",
+    "missing_field": "a esta cuenta guardada le falta {{field}}. elige otra cuenta o restaura esta billetera desde una copia de seguridad.",
+    "field": {
+      "address0": "dirección de la billetera",
+      "encryptedSeed": "semilla cifrada (los datos bloqueados de la billetera necesarios para desbloquearla)",
+      "iv": "datos de cifrado de la billetera",
+      "kdfThreads": "ajustes de contraseña de la billetera",
+      "mac": "comprobación de integridad de la billetera",
+      "salt": "datos de seguridad de contraseña de la billetera",
+      "version": "versión de la billetera"
+    }
+  },
+  "connection_mode": {
+    "title": "Modo de conexión",
+    "subtitle": "Elige cómo se conecta Qortal a la red.",
+    "local_title": "Nodo local",
+    "recommended": "Recomendado",
+    "local_full_decentralized": "Acceso descentralizado completo",
+    "local_faster": "Mayor rendimiento",
+    "local_data_local": "Tus datos permanecen locales",
+    "public_title": "Nodo público",
+    "public_quick": "Acceso rápido",
+    "public_limited_decentralization": "Descentralización limitada",
+    "public_shared_infrastructure": "Infraestructura compartida",
+    "status_running": "Core en ejecución",
+    "status_missing": "Core no detectado",
+    "status_checking": "Comprobando nodo local",
+    "section_custom_nodes": "Nodos personalizados",
+    "add_custom_node": "Añadir nodo personalizado",
+    "empty_custom_nodes": "No hay nodos personalizados guardados",
+    "manual_setup_link": "Configuración manual del nodo",
+    "save_settings": "Guardar ajustes",
+    "manual_edit_title": "Editar nodo personalizado",
+    "manual_add_title": "Configuración manual del nodo",
+    "field_name": "Nombre",
+    "placeholder_node_name": "Mi nodo Qortal",
+    "field_node_url": "URL del nodo",
+    "placeholder_node_url": "https://127.0.0.1:12391",
+    "field_api_key_optional": "Clave API (opcional)",
+    "placeholder_api_key": "Introduce la clave API",
+    "reload_after_new_node_title": "Es necesario recargar",
+    "reload_after_new_node_message": "Has añadido un nuevo nodo; es necesario actualizar la aplicación.",
+    "reload_after_new_node_button": "Recargar aplicación"
+  },
+  "intro_features": {
+    "secure_title": "Seguro y privado",
+    "secure_text": "Tus claves, tus datos, siempre bajo tu control.",
+    "fast_title": "Acceso rápido",
+    "fast_text": "Desbloquea y entra al instante en tu experiencia Qortal.",
+    "decentralized_title": "Descentralizado",
+    "decentralized_text": "Conéctate a la red en tus propios términos.",
+    "built_title": "Hecho para ti",
+    "built_text": "Una cuenta. Infinitas posibilidades."
+  },
+  "entry": {
+    "title": "Entrar en Qortal",
+    "subtitle": "Accede o crea tu cuenta.",
+    "create_account": "Crear cuenta",
+    "import_account": "Importar cuenta",
+    "no_accounts": "No se encontraron cuentas en este dispositivo.",
+    "import_choice_backup_title": "Archivo de copia de seguridad",
+    "import_choice_backup_description": "Importa una copia de seguridad guardada del Hub.",
+    "import_choice_authenticate_title": "Autenticar ahora",
+    "import_choice_authenticate_description": "Usa un archivo de copia sin guardarlo.",
+    "import_choice_seed_title": "Frase semilla",
+    "import_choice_seed_description": "Restaura usando tu frase semilla.",
+    "import_backup_heading": "Importar desde archivo de copia",
+    "import_backup_drop_hint": "Arrastra el archivo de copia o haz clic para seleccionar.",
+    "import_authenticate_heading": "Autenticar desde archivo de copia",
+    "import_authenticate_drop_hint": "Arrastra un archivo de copia o haz clic para seleccionar. No se guardará en este dispositivo.",
+    "import_seed_label": "Frase semilla",
+    "import_seed_placeholder": "Introduce tu frase semilla",
+    "import_wallet_password": "Contraseña del monedero",
+    "importing_account": "Importando cuenta...",
+    "seed_import_error": "No se pudo importar esta frase semilla.",
+    "seed_import_duplicate": "Esta cuenta ya está guardada en este dispositivo.",
+    "seed_import_success": "Cuenta importada correctamente.",
+    "import_backup_success_one": "{{count}} cuenta importada correctamente.",
+    "import_backup_success_other": "{{count}} cuentas importadas correctamente.",
+    "import_backup_duplicate": "Estas cuentas ya están guardadas en este dispositivo.",
+    "import_backup_invalid": "Este archivo de copia no contiene una cuenta válida.",
+    "import_file_read_aborted": "Lectura del archivo cancelada",
+    "import_file_read_failed": "Error al leer el archivo",
+    "filter_accounts_aria": "Filtrar cuentas por dirección, nombre primario o nota",
+    "filter_placeholder": "Dirección, nombre primario o nota…",
+    "filter_no_results": "Ninguna cuenta coincide.",
+    "filter_clear": "Borrar búsqueda",
+    "wallet_edit_name_label": "Nombre",
+    "wallet_edit_account_name_placeholder": "Nombre de la cuenta",
+    "wallet_edit_note_label": "Nota",
+    "wallet_edit_note_placeholder": "Nota opcional",
+    "wallet_edit_remove": "Eliminar",
+    "wallet_edit_save": "Guardar",
+    "wallet_edit_aria_label": "Editar nombre y nota de la cuenta"
+  },
+  "authentication_form": {
+    "unnamed_account": "Cuenta sin nombre",
+    "password_placeholder": "Introduce tu contraseña",
+    "unlock": "Desbloquear",
+    "choose_another_account": "Elegir otra cuenta",
+    "using_local_node": "Nodo local",
+    "using_public_node": "Nodo público",
+    "using_custom_node": "Nodo personalizado"
+  },
+
   "temp_auth": {
     "tooltip": "autenticar sin almacenar tu cuenta en el Hub",
     "button": "auth. temporal"
diff --git a/src/i18n/locales/es/core.json b/src/i18n/locales/es/core.json
index 8375183e..aeeb538b 100644
--- a/src/i18n/locales/es/core.json
+++ b/src/i18n/locales/es/core.json
@@ -7,6 +7,7 @@
     "add_custom_framework": "Agregar marco personalizado",
     "add_reaction": "Agregar reacción",
     "add_theme": "Agregar tema",
+    "back": "volver",
     "backup_account": "cuenta de respaldo",
     "backup_wallet": "billetera de respaldo",
     "cancel": "Cancelar",
@@ -124,7 +125,7 @@
     "view_all": "ver todas"
   },
   "attachment": "adjunto",
-  "balance": "balance:",
+  "balance": "saldo:",
   "category": "categoría",
   "chat": "charlar",
   "comment_other": "comentario",
@@ -132,11 +133,11 @@
   "core": {
     "block_height": "altura de bloque",
     "data_peers": "compañeros QDN (datos)",
-    "information": "información central",
+    "information": "información de Core",
     "peers": "compañeros conectados",
-    "version": "versión central"
+    "version": "versión de Core"
   },
-  "current_language": "current language: {{ language }}",
+  "current_language": "idioma actual: {{ language }}",
   "dev": "enchufe",
   "dev_mode": "modo de desarrollo",
   "developer": {
@@ -208,7 +209,7 @@
       "encrypt_app": "No se puede cifrar la aplicación. Aplicación no publicada '",
       "fetch_app": "Incapaz de buscar la aplicación",
       "fetch_publish": "Incapaz de buscar publicar",
-      "file_too_large": "file {{ filename }} is too large. Max size allowed is {{ size }} MB.",
+      "file_too_large": "el archivo {{ filename }} es demasiado grande. El tamaño máximo es {{ size }} MB.",
       "generic": "Ocurrió un error",
       "initiate_download": "No se pudo iniciar la descarga",
       "invalid_amount": "cantidad no válida",
@@ -220,10 +221,10 @@
       "invalid_theme_format": "formato de tema no válido",
       "invalid_zip": "zip no válido",
       "message_loading": "Error de carga de mensaje.",
-      "message_size": "your message size is of {{ size }} bytes out of a maximum of {{ maximum }}",
+      "message_size": "tu mensaje tiene {{ size }} bytes de un máximo de {{ maximum }} bytes",
       "minting_account_add": "No se puede agregar una cuenta de menta",
       "minting_account_remove": "No se puede eliminar la cuenta de acuñación",
-      "missing_fields": "missing: {{ fields }}",
+      "missing_fields": "falta: {{ fields }}",
       "navigation_timeout": "tiempo de espera de navegación",
       "network_generic": "error de red",
       "password_not_matching": "¡Los campos de contraseña no coinciden!",
@@ -239,15 +240,17 @@
     },
     "generic": {
       "already_voted": "ya has votado.",
-      "avatar_size": "{{ size }} KB max. for GIFS",
+      "avatar_size": "máx. {{ size }} KB para GIF",
       "benefits_qort": "beneficios de tener Qort",
       "building": "edificio",
       "building_app": "aplicación de construcción",
       "confirmed": "confirmado",
-      "created_by": "created by {{ owner }}",
-      "buy_order_request": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy order</span>",
-      "buy_order_request_other": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy orders</span>",
+      "created_by": "creado por {{ owner }}",
+      "buy_order_request": "la aplicación <br/><italic>{{hostname}}</italic> <br/><span>solicita {{count}} orden de compra</span>",
+      "buy_order_request_other": "la aplicación <br/><italic>{{hostname}}</italic> <br/><span>solicita {{count}} órdenes de compra</span>",
       "devmode_local_node": "¡Utilice su nodo local para el modo Dev! INCOGAR y USAR NODO LOCAL.",
+      "disable_os_push": "Desactivar notificación push del SO",
+      "disable_os_push_desc": "Silencia las alertas de escritorio de esta app manteniendo visible la actividad en el Hub.",
       "downloading": "descarga",
       "downloading_decrypting_app": "Descarga y descifrado de la aplicación privada.",
       "edited": "editado",
@@ -255,28 +258,39 @@
       "encrypted": "encriptado",
       "encrypted_not": "no encriptado",
       "amount_qort": "cantidad: {{ amount }} QORT",
-      "fee_qort": "fee: {{ fee }} QORT",
+      "app_notifications_hint": "Las notificaciones de Q-App aparecerán aquí",
+      "fee_qort": "comisión: {{ fee }} QORT",
       "fetching_data": "Obtener datos de aplicaciones",
-      "foreign_fee": "foreign fee: {{ fee }}",
+      "foreign_fee": "comisión externa: {{ fee }}",
       "get_qort_trade_portal": "Obtenga Qort usando el portal de comercio Crosschain de Qortalal",
+      "loading": "Cargando...",
       "minimal_qort_balance": "Tener al menos {{ quantity }} QORT en tu saldo te permite enviar mensajes de chat a una velocidad casi instantánea.",
       "mentioned": "mencionado",
+      "new_notification_from": "Nueva notificación de {{ appName }}",
+      "new_payment_body": "Has recibido {{ amount }} QORT.",
+      "new_payment_received": "Nuevo pago recibido",
+      "new_qmail": "Tienes un nuevo Q-Mail",
       "message_with_image": "Este mensaje ya tiene una imagen",
-      "most_recent_payment": "{{ count }} most recent payment",
-      "name_available": "{{ name }} is available",
+      "most_recent_payment": "{{ count }} pago más reciente",
+      "name_available": "{{ name }} está disponible",
       "name_benefits": "Beneficios de un nombre",
       "name_checking": "Verificar si el nombre ya existe",
       "name_preview": "Necesita un nombre para usar la vista previa",
       "name_publish": "Necesita un nombre de Qortal para publicar",
       "name_rate": "Necesitas un nombre para calificar.",
       "name_registration": "Tu saldo es de {{ balance }} QORT. El registro de un nombre requiere una tarifa de {{ fee }} QORT.",
-      "name_unavailable": "{{ name }} is unavailable",
+      "name_unavailable": "{{ name }} no está disponible",
+      "no_app_notifications": "Aún no hay notificaciones de aplicaciones",
       "no_data_image": "No hay datos para la imagen",
       "no_description": "Sin descripción",
       "no_messages": "Sin mensajes",
       "no_message": "sin mensaje",
       "no_minting_details": "No se puede ver los detalles de acuñado en la puerta de enlace",
+      "no_notification_apps": "Aún no hay apps con permiso de notificaciones.",
       "no_notifications": "No hay nuevas notificaciones",
+      "notification_settings": "Ajustes de notificaciones",
+      "notification_settings_desc": "Elige qué apps pueden enviar alertas de escritorio manteniendo visible la actividad en el Hub.",
+      "notifications": "Notificaciones",
       "no_payments": "Sin pagos",
       "no_pinned_changes": "Actualmente no tiene ningún cambio en sus aplicaciones fijadas",
       "no_results": "Sin resultados",
@@ -286,17 +300,18 @@
       "overwrite_qdn": "sobrescribir a QDN",
       "password_confirm": "Confirme una contraseña",
       "password_enter": "Ingrese una contraseña",
-      "payment_request": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting a payment</span>",
-      "people_reaction": "people who reacted with {{ reaction }}",
+      "payment_request": "la aplicación <br/><italic>{{hostname}}</italic> <br/><span>solicita un pago</span>",
+      "people_reaction": "personas que reaccionaron con {{ reaction }}",
       "processing_transaction": "está procesando transacciones, espere ...",
       "publish_data": "Publicar datos en Qortal: cualquier cosa, desde aplicaciones hasta videos. Totalmente descentralizado!",
       "publishing": "Publicación ... por favor espera.",
       "qdn": "Use el ahorro de QDN",
-      "rating": "rating for {{ service }} {{ name }}",
+      "rating": "valoración de {{ service }} {{ name }}",
       "register_name": "Necesita un nombre de Qortal registrado para guardar sus aplicaciones fijadas en QDN.",
-      "replied_to": "replied to {{ person }}",
+      "replied_to": "respondió a {{ person }}",
       "revert_default": "Volver al valor predeterminado",
       "revert_qdn": "volver a QDN",
+      "revoke_permission": "Revocar",
       "save_qdn": "Guardar en QDN",
       "secure_ownership": "Asegure la propiedad de los datos publicados por su nombre. Incluso puede vender su nombre, junto con sus datos a un tercero.",
       "select_file": "Seleccione un archivo",
@@ -308,7 +323,8 @@
       "unread_messages": "mensajes no leídos a continuación",
       "unsaved_changes": "tiene cambios no salvos en sus aplicaciones fijadas. Guárdelos a QDN.",
       "updating": "actualización",
-      "wait": "espera por favor"
+      "wait": "espera por favor",
+      "open_q_trade_subtitle": "Abre Q-Trade y compra QORT en el portal de intercambio."
     },
     "message": "mensaje",
     "promotion_text": "texto de promoción",
@@ -317,17 +333,17 @@
       "logout": "¿Estás seguro de que te gustaría cerrar sesión?",
       "new_user": "¿Eres un nuevo usuario?",
       "delete_chat_image": "¿Le gustaría eliminar su imagen de chat anterior?",
-      "perform_transaction": "would you like to perform a {{action}} transaction?",
+      "perform_transaction": "¿quieres realizar una transacción {{action}}?",
       "provide_thread": "Proporcione un título de hilo",
       "publish_app": "¿Le gustaría publicar esta aplicación?",
       "publish_avatar": "¿Le gustaría publicar un avatar?",
       "publish_qdn": "¿Le gustaría publicar su configuración en QDN (cifrado)?",
       "overwrite_changes": "La aplicación no pudo descargar sus aplicaciones fijadas existentes de QDN. ¿Le gustaría sobrescribir esos cambios?",
-      "rate_app": "would you like to rate this app a rating of {{ rate }}?. It will create a POLL tx.",
+      "rate_app": "¿quieres valorar esta app con {{ rate }}?. Quedan {{ days }} días hasta tu próxima valoración.",
       "register_name": "¿Le gustaría registrar este nombre?",
       "reset_pinned": "¿No te gustan tus cambios locales actuales? ¿Le gustaría restablecer las aplicaciones fijadas predeterminadas?",
       "reset_qdn": "¿No te gustan tus cambios locales actuales? ¿Le gustaría restablecer a sus aplicaciones guardadas de QDN guardadas?",
-      "transfer_qort": "would you like to transfer {{ amount }} QORT"
+      "transfer_qort": "¿quieres transferir {{ amount }} QORT"
     },
     "success": {
       "order_submitted": "Su pedido de compra fue enviado",
@@ -336,6 +352,7 @@
       "rated_app": "calificado con éxito. Espere un par de minutos para que la red propoque los cambios.",
       "request_read": "He leído esta solicitud",
       "transfer": "¡La transferencia fue exitosa!",
+      "transfer_submitted": "Tu transferencia se envió correctamente.",
       "voted": "votado con éxito. Espere un par de minutos para que la red propoque los cambios."
     }
   },
@@ -365,11 +382,42 @@
     },
     "status_title": "estado de acuñación",
     "tier_share_per_block": "porción del nivel por bloque",
-    "total_minter_in_tier": "total de minters en el nivel"
+    "total_minter_in_tier": "total de minters en el nivel",
+    "panel": {
+      "dialog_subtitle": "Revise su estado de minting, el progreso y los siguientes pasos.",
+      "state_syncing_title": "Sincronizando",
+      "state_syncing_body": "El nodo aún se está sincronizando; el minting aún no puede comenzar.",
+      "state_active_title": "Minting activo",
+      "state_active_body_node_selection": "Esta clave de minter está configurada en este nodo. Las estadísticas reflejan la cuenta seleccionada.",
+      "state_active_body_account": "Esta cuenta está configurada para minting en este nodo.",
+      "state_inactive_title": "Sin minting",
+      "state_inactive_body_not_in_group": "Esta cuenta aún no forma parte del grupo de minters.",
+      "state_inactive_body_multi_key": "Este nodo ya tiene varias claves de minting configuradas.",
+      "state_inactive_body_ready": "Esta cuenta está lista para el siguiente paso de minting.",
+      "next_step_visit_q_mintership": "Visite la app Q-Mintership para solicitar ser minter.",
+      "next_step_already_active": "El minting ya está activo en este nodo.",
+      "next_step_wait_sync": "Espere a que el nodo termine de sincronizarse antes de que pueda iniciarse el minting.",
+      "next_step_start_when_ready": "Inicie el minting en este nodo cuando esté listo.",
+      "section_your_wallet": "Tu monedero",
+      "section_minter_profile_stats": "Perfil de minter (estadísticas)",
+      "section_account_identity": "Identidad de la cuenta",
+      "section_progress_next_level": "Progreso al siguiente nivel",
+      "section_next_step": "Siguiente paso",
+      "section_node_minting_accounts": "Cuentas de minting del nodo",
+      "select_account_for_stats_hint": "Seleccione una cuenta para actualizar el progreso y las estadísticas de recompensas a la derecha.",
+      "badge_viewing_stats": "Viendo estadísticas",
+      "blocks_to_level": "bloques hasta el nivel {{level}}",
+      "minting_for_approx_days": "Minting durante: ~{{days}} días",
+      "reference_only": "(solo como referencia)",
+      "rewards_info_subtitle_own": "(información de tus recompensas)",
+      "rewards_info_subtitle_selected": "(minter seleccionado — recompensas de esta clave)",
+      "network_details": "Detalles de la red",
+      "loading_spinner_aria": "Cargando"
+    }
   },
   "name": "nombre",
   "name_app": "nombre/aplicación",
-  "new_post_in": "new post in {{ title }}",
+  "new_post_in": "nueva publicación en {{ title }}",
   "none": "ninguno",
   "note": "nota",
   "option": "opción",
@@ -389,10 +437,36 @@
   "publish": "publicar",
   "q_apps": {
     "about": "Sobre este Q-App",
-    "q_mail": "QAIL",
-    "q_manager": "manager",
+    "q_mail": "Q-Mail",
+    "q_manager": "Q-Manager",
     "q_sandbox": "Q-Sandbox",
-    "q_wallets": "Medillas Q"
+    "q_wallets": "Q-Wallets",
+    "wallets_workspace": "espacio de trabajo de carteras"
+  },
+  "account_lookup": {
+    "dialog_title": "Búsqueda de usuario",
+    "empty_title": "Buscar cuentas",
+    "empty_subtitle": "Introduce un nombre o una dirección",
+    "tooltip_send_disabled": "Este es tu propio perfil.",
+    "tooltip_block_public_node": "Bloquear usuarios no está disponible al usar un nodo público.",
+    "tooltip_block_self": "No puedes bloquearte a ti mismo.",
+    "error_lookup_failed": "No se pudo consultar esta cuenta.",
+    "chip_level": "Nivel {{level}}",
+    "chip_blocked": "Bloqueado",
+    "chip_no_registered_name": "Sin nombre registrado",
+    "section_minting_progress": "Progreso de minting",
+    "minting_remaining": "{{remaining}} restantes",
+    "minting_blocks_to_level": "{{remaining}} para el nivel {{level}}",
+    "minting_approx_one": "~{{count}} día de minting (aprox.)",
+    "minting_approx_other": "~{{count}} días de minting (aprox.)",
+    "minting_days_label": "Minting:",
+    "label_address": "Dirección",
+    "label_public_key": "Clave pública",
+    "payments_title": "Pagos recientes",
+    "pagination_rows_per_page": "Filas por página:",
+    "pagination_displayed_rows": "{{from}}–{{to}} de {{count}}",
+    "action_block": "bloquear",
+    "action_unblock": "desbloquear"
   },
   "app_detail": {
     "about": "acerca de",
@@ -454,7 +528,10 @@
     "official_apps": "apps oficiales"
   },
   "aria": {
-    "apps_library_tabs": "pestañas de navegación de la biblioteca de apps"
+    "apps_library_tabs": "pestañas de navegación de la biblioteca de apps",
+    "core_controls": "Controles de Core",
+    "switch_theme_dark": "Cambiar al modo oscuro",
+    "switch_theme_light": "Cambiar al modo claro"
   },
   "supply": "suministrar",
   "tags": "etiquetas",
@@ -471,12 +548,12 @@
   "thread_other": "trapos",
   "thread_title": "título de hilo",
   "time": {
-    "day_one": "{{count}} day",
-    "day_other": "{{count}} days",
-    "hour_one": "{{count}} hour",
-    "hour_other": "{{count}} hours",
-    "minute_one": "{{count}} minute",
-    "minute_other": "{{count}} minutes",
+    "day_one": "{{count}} día",
+    "day_other": "{{count}} días",
+    "hour_one": "{{count}} hora",
+    "hour_other": "{{count}} horas",
+    "minute_one": "{{count}} minuto",
+    "minute_other": "{{count}} minutos",
     "time": "tiempo"
   },
   "title": "título",
@@ -491,7 +568,7 @@
   "video_fetching": "obteniendo video de la Red Qortal...",
   "video_building": "descarga completada: construyendo video...",
   "vote": "votar",
-  "vote_other": "{{ count }} votes",
+  "vote_other": "{{ count }} votos",
   "zip": "cremallera",
   "wallet": {
     "litecoin": "billetera",
@@ -499,6 +576,157 @@
     "wallet": "billetera",
     "wallet_other": "billeteras"
   },
+  "widget_container": {
+    "empty_message": "No hay nada que mostrar por ahora.",
+    "empty_title": "Sin elementos por ahora",
+    "error_title": "No se pudo cargar este widget",
+    "loading": "Cargando",
+    "loading_message": "Obteniendo los últimos datos públicos del nodo Qortal predeterminado.",
+    "retry": "Reintentar"
+  },
+  "quitter_feed": {
+    "error_generic": "El feed público de Quitter no está disponible temporalmente. Vuelve a intentarlo en un momento.",
+    "error_following": "El feed personalizado de Quitter no está disponible temporalmente. Inténtalo de nuevo.",
+    "error_timeout": "Error al cargar el feed. Puedes reintentar o volver a General.",
+    "loading_following": "Cargando feed siguiendo...",
+    "loading_general": "Cargando feed...",
+    "error_title_following": "Error al cargar el feed",
+    "error_title_general": "No se pudieron cargar las publicaciones",
+    "empty_title_no_name": "Inicia sesión para personalizar tu feed",
+    "empty_title_no_following": "Parece que aún no sigues a nadie.",
+    "empty_title_no_posts": "No hay publicaciones de cuentas que sigues",
+    "empty_title_general": "No hay publicaciones",
+    "empty_message_no_name": "Inicia sesión con un nombre Qortal para crear un feed personalizado.",
+    "empty_message_no_following": "Explora Quitter y sigue cuentas para armar tu feed.",
+    "empty_message_no_posts": "Las cuentas que sigues aún no han publicado en Quitter.",
+    "tab_general": "General",
+    "tab_following": "Siguiendo",
+    "subtitle_personalized": "Feed personalizado",
+    "subtitle_public": "Feed público",
+    "retry_following": "Intentar de nuevo",
+    "retry_general": "Reintentar",
+    "return_to_general": "Volver a General",
+    "posts_showing_one": "{{count}} publicación mostrada",
+    "posts_showing_other": "{{count}} publicaciones mostradas",
+    "new_posts_one": "{{count}} publicación nueva",
+    "new_posts_other": "{{count}} publicaciones nuevas"
+  },
+  "quick_tools_pad": {
+    "user_search": "Búsqueda de usuario",
+    "wallets": "Carteras",
+    "minting": "Acuñación",
+    "backup_wallet": "Copia de seguridad de la cartera",
+    "q_chat": "Q-Chat",
+    "notifications_enable": "Activar notificaciones",
+    "notifications_mute": "Silenciar notificaciones",
+    "apps": "Aplicaciones",
+    "extras": "",
+    "hint_notifications_desktop_only": "Solo silencia alertas del escritorio. Las notificaciones dentro del centro siguen activas.",
+    "hint_minting_panel": "Este panel se desbloquea cuando seas minter. ¡Pásate por Q-Mintership para empezar!",
+    "snackbar_backup_wallet": "Descarga el archivo de tu cartera. Es necesario para acceder a tu cuenta."
+  },
   "website": "sitio web",
-  "welcome": "bienvenido"
+  "welcome": "bienvenido",
+  "qortino_workspace": {
+    "modules_hotkeys_label": "Atajos",
+    "modules_hotkeys_description": "Accesos directos para tus rutas más usadas.",
+    "modules_music_label": "Reproductor de música",
+    "modules_music_description": "Un reproductor Earbump compacto con búsqueda y reproducción rápida.",
+    "modules_suggest_label": "Sugerir un módulo",
+    "modules_suggest_description": "Redacta > Añade asunto + mensaje y ¡envíanoslo!",
+    "workspace_empty_prompt": "Elige lo que aparece encima de QORTINO.",
+    "workspace_header_hotkeys": "Atajos",
+    "workspace_header_music": "Reproductor de música",
+    "workspace_add_app": "Añadir app",
+    "getting_started_heading": "Primeros pasos",
+    "onboarding_step_progress": "Paso {{current}} / {{total}}",
+    "dialog_module_title": "Elige un módulo",
+    "dialog_module_subtitle": "Elige lo que aparece sobre QORTINO.",
+    "dialog_hotkeys_title": "Seleccionar atajos",
+    "dialog_hotkeys_subtitle": "Se guarda automáticamente para esta cuenta.",
+    "dialog_music_search_title": "Buscar en Earbump",
+    "dialog_music_search_subtitle": "Busca un tema, pulsa reproducir y pásalo al reproductor de arriba.",
+    "search_placeholder_qapps": "Buscar Q-Apps",
+    "search_placeholder_tracks": "Buscar temas o artistas",
+    "section_recommended": "Recomendado",
+    "curated_badge": "[ CURADO ]",
+    "hotkeys_loading_library": "Cargando biblioteca de Q-Apps...",
+    "hotkeys_unavailable_title": "Q-Apps no disponibles",
+    "hotkeys_no_match_title": "Aún no hay Q-Apps que coincidan",
+    "hotkeys_no_match_hint": "Prueba otro nombre para vincular un acceso en la ranura seleccionada.",
+    "error_hotkey_catalog": "No se pueden cargar las Q-Apps ahora mismo.",
+    "music_section_results": "Resultados",
+    "music_section_discovery": "Descubrimiento",
+    "music_loading_search": "Buscando en la biblioteca EarBump...",
+    "music_loading_discovery": "Cargando descubrimiento EarBump...",
+    "music_quiet_title": "EarBump está silencioso ahora",
+    "music_no_tracks_title": "No hay temas",
+    "music_no_tracks_hint": "Prueba otro título o artista para traer algo al reproductor.",
+    "error_earbump_discovery": "No se puede cargar EarBump ahora mismo.",
+    "error_earbump_search": "No se puede buscar en EarBump ahora mismo.",
+    "music_syncing_library": "Sincronizando con la biblioteca EarBump...",
+    "music_empty_title": "Biblioteca EarBump",
+    "music_empty_uploaded": "Esperando biblioteca",
+    "music_track_load_failed": "Este tema no pudo terminar de cargarse en tu nodo.",
+    "music_no_peers_data": "Sin pares para los datos restantes",
+    "music_preparing_peers_one": "Preparando en tu nodo... {{percent}}% ({{count}} par)",
+    "music_preparing_peers_other": "Preparando en tu nodo... {{percent}}% ({{count}} pares)",
+    "music_preparing_percent_only": "Preparando en tu nodo... {{percent}}%",
+    "music_searching_peers": "Buscando pares...",
+    "music_finalizing_track": "Finalizando el tema en tu nodo...",
+    "music_preparing_base": "Preparando en tu nodo...",
+    "music_playback_stalled": "Reproducción detenida. Pulsa play para reintentar.",
+    "music_stream_stalled": "El tema se detuvo. Reconstruyendo la transmisión...",
+    "hotkeys_launch_description": "Abrir {{appName}}",
+    "hotkeys_fallback_launch": "Abrir Q-App",
+    "reaction_hotkeys_ready": "Panel de atajos listo.",
+    "reaction_music_panel_ready": "Panel de música listo.",
+    "reaction_panel_cleared": "Panel vaciado.",
+    "reaction_music_player_ready": "Reproductor de música listo.",
+    "reaction_locked_track": "Fijado en {{title}}.",
+    "reaction_track_rotation": "{{title}} está en rotación.",
+    "reaction_onboarding_route": "Ruta de onboarding abierta. Dejo el siguiente paso listo.",
+    "reaction_support_chat": "Chat de soporte abierto. Pide los 6 QORT y encolaré el paso dos.",
+    "reaction_q_trade_open": "Q-Trade está abierto. Si consigues QORT ahí, seguimos adelante.",
+    "reaction_name_flow": "Flujo de nombre abierto. Aquí el hub empieza a reconocerte.",
+    "reaction_avatar_flow": "Flujo de avatar listo. Pongamos cara a este espacio.",
+    "track_meta_separator": "·",
+    "a11y_clear_hotkey_slot": "Borrar ranura {{n}}",
+    "runtime_workspace_bay_title": "Problema de ejecución en el área de trabajo.",
+    "runtime_workspace_bay_body": "QORTINO abajo sigue a salvo. Actualiza el Hub; si persiste, rastrearemos el fallo desde aquí.",
+    "runtime_qortino_title": "QORTINO tuvo un problema de ejecución.",
+    "runtime_qortino_body": "El área de trabajo de arriba sigue a salvo. Actualiza el Hub; si persiste, rastrearemos el fallo desde aquí.",
+    "hotkey_slot_number": "Ranura {{n}}"
+  },
+  "bookmarks": {
+    "title": "Marcadores",
+    "bookmarked": "Marcado",
+    "add_page": "Agregar página",
+    "loading": "Cargando marcadores...",
+    "folder": "Carpeta",
+    "create_folder": "Crear carpeta",
+    "folder_name": "Nombre de carpeta",
+    "new_folder": "Nueva carpeta",
+    "top_level": "Nivel superior",
+    "edit_bookmark": "Editar marcador",
+    "add_bookmark": "Agregar marcador",
+    "save_location_without_query": "Guarda una ubicación de Q-App sin parámetros de consulta.",
+    "name": "Nombre",
+    "bookmark_name_placeholder": "Nombre del marcador",
+    "qortal_link": "Enlace de Qortal",
+    "qortal_link_placeholder": "qortal://APP/Nombre/ruta",
+    "no_bookmarks": "Aún no hay marcadores.",
+    "no_bookmarks_folder": "No hay marcadores en esta carpeta.",
+    "bookmark_count_one": "{{count}} marcador",
+    "bookmark_count_other": "{{count}} marcadores",
+    "edit": "Editar",
+    "move": "Mover",
+    "delete": "Eliminar",
+    "rename": "Renombrar",
+    "remove": "Quitar",
+    "create": "Crear",
+    "more": "Más",
+    "delete_folder_title": "¿Eliminar carpeta?",
+    "delete_folder_message": "Los marcadores de esta carpeta se moverán al nivel superior."
+  }
 }
diff --git a/src/i18n/locales/es/group.json b/src/i18n/locales/es/group.json
index 8496f8ad..e6a1d6ad 100644
--- a/src/i18n/locales/es/group.json
+++ b/src/i18n/locales/es/group.json
@@ -28,6 +28,280 @@
     "select_group": "seleccionar grupo",
     "visit_q_mintership": "visitar Q-Mintership"
   },
+  "dashboard": {
+    "qort_balance": "Saldo QORT",
+    "node_status": "Estado del nodo",
+    "node_unavailable": "Nodo no disponible",
+    "sync_percent": "{{percent}}% sincronizado",
+    "minter_level": "Nivel de minter",
+    "peers": "Pares",
+    "qdn": "QDN",
+    "core": "Core",
+    "hub": "Hub",
+    "node": "Nodo",
+    "using_node": "Nodo usado",
+    "change_node": "Cambiar nodo",
+    "node_type": "Tipo de nodo",
+    "node_height": "Altura del nodo",
+    "local_node": "Nodo local",
+    "public_node": "Nodo público",
+    "custom_node": "Nodo personalizado",
+    "synchronizing": "Sincronizando",
+    "fully_operational": "Totalmente operativo",
+    "not_operational": "No operativo",
+    "attention_needed": "Requiere atención",
+    "apply": "Aplicar",
+    "info_panel_status": "estado",
+    "info_panel_node_comment": "// info_nodo",
+    "minter_pin_save_progress_default": "Guardar barra de nivel como vista predeterminada",
+    "minter_pin_save_dots_default": "Guardar puntos de minting como vista predeterminada",
+    "node_switch_error": "No se pudo cambiar de nodo en este momento.",
+    "node_menu_local": "Nodo local",
+    "node_menu_public": "Nodo público",
+    "qortino_runtime_title": "La tarjeta QORTINO encontró un problema en tiempo de ejecución.",
+    "qortino_runtime_body": "El resto del panel sigue siendo seguro. Actualiza Hub y si se repite, infórmalo al equipo.",
+    "no_custom_nodes_saved": "No hay nodos personalizados guardados",
+    "wallet_activity": "Actividad de la wallet",
+    "send": "Enviar",
+    "receive": "Recibir",
+    "buy": "Comprar",
+    "recent_transaction": "Transacción reciente",
+    "loading_wallet_activity": "Cargando actividad de wallet...",
+    "sent_to": "enviado a ",
+    "received_from": "recibido de ",
+    "no_wallet_activity": "No hay nueva actividad de wallet.",
+      "wallet_activity_window": "Última transacci?n en los ?ltimos 7 días",
+      "wallet_activity_unknown_address": "Dirección desconocida",
+      "wallet_activity_relative_just_now": "Ahora mismo",
+      "wallet_activity_relative_minutes_ago_one": "Hace {{count}} minuto",
+      "wallet_activity_relative_minutes_ago_other": "Hace {{count}} minutos",
+      "wallet_activity_relative_hours_ago_one": "Hace {{count}} hora",
+      "wallet_activity_relative_hours_ago_other": "Hace {{count}} horas",
+      "wallet_activity_relative_days_ago_one": "Hace {{count}} día",
+      "wallet_activity_relative_days_ago_other": "Hace {{count}} días",
+      "open_in_q_chat": "Abrir en Q-Chat",
+    "open_in_q_apps": "Abrir en Q-Apps",
+    "quitter_feed": "Feed de Quitter",
+    "quitter_show_more": "Ver más",
+    "quitter_show_less": "Ver menos",
+    "quitter_video_attachment": "Adjunto de vídeo",
+    "quitter_video_preview_hub": "La vista previa es solo lectura en Hub",
+    "featured_q_apps": "Q-Apps destacadas",
+    "featured_q_apps_subtitle": "Abre apps comunitarias de confianza directamente desde tu panel.",
+    "explore_all_q_apps": "Explorar todas las Q-Apps",
+    "reduce_motion": "Reducir movimiento",
+    "account_overview": "Resumen de cuenta",
+    "qortal_name_address": "NOMBRE Y DIRECCION QORTAL",
+    "profile": "Perfil",
+    "profile_settings": "Ajustes de perfil",
+    "profile_settings_description": "Revisa tu nombre y la identidad de tu cuenta.",
+    "security": "Seguridad",
+    "security_settings": "Ajustes de seguridad",
+    "security_settings_description": "Revela y copia tu clave privada solo cuando sea absolutamente necesario.",
+    "developer": "Desarrollador",
+    "developer_settings": "Ajustes de desarrollador",
+    "developer_settings_description": "Activa herramientas de desarrollo y diagnosticos para pruebas avanzadas.",
+    "system": "Sistema",
+    "system_settings": "Ajustes del sistema",
+    "system_settings_description": "Controla notificaciones, movimiento, apps fijadas y cuentas bloqueadas.",
+    "current_name": "Nombre actual",
+    "no_name_registered": "No hay nombre registrado",
+    "wallet_address": "Direccion de wallet",
+    "unavailable": "No disponible",
+    "no_active_wallet": "No hay wallet activa",
+    "names_qapp_actions_hint": "Las acciones de comprar, vender y cambiar nombre deben hacerse en la Q-App Names.",
+    "open_the": "Abre la",
+    "names": "Names",
+    "names_qapp_hint_suffix": "Q-App para comprar nombres, vender nombres o cambiar tu nombre registrado.",
+    "private_key_warning": "Nunca compartas tu clave privada. Quien la tenga podria controlar esta wallet y sus fondos.",
+    "wallet_password": "Contrasena de wallet",
+    "wallet_password_placeholder": "Introduce tu contrasena de wallet",
+    "decrypt": "Descifrar",
+    "copy_key": "Copiar clave",
+    "private_key": "Clave privada",
+    "private_key_hint": "Descifra tu clave privada solo cuando necesites recuperar o migrar esta wallet.",
+    "notifications_update_error": "No se pudieron actualizar las notificaciones de la app ahora.",
+    "wallet_unavailable_error": "Los datos de la wallet no estan disponibles ahora.",
+    "wallet_password_required": "Introduce tu contrasena de wallet para descifrar la clave privada.",
+    "wallet_decrypt_error_with_message": "No pudimos descifrar tu wallet: {{message}}",
+    "wallet_decrypt_error": "No pudimos descifrar tu wallet con esa contrasena.",
+    "private_key_copied": "Clave privada copiada al portapapeles.",
+    "enable_dev_mode": "Activar modo dev",
+    "enable_dev_mode_desc": "Desbloquea superficies de desarrollo locales, diagnosticos y herramientas de prueba en el Hub.",
+    "dev_mode_tip": "Consejo: al activarlo, aparecera un nuevo icono de herramientas de desarrollo en la barra lateral. Puede que tengas que pasar el cursor por el borde izquierdo para verlo.",
+    "reduce_app_notifications": "Reducir notificaciones de apps",
+    "reduce_app_notifications_desc": "Activar para silenciar notificaciones push de escritorio. Dejalo apagado para alertas normales del Hub.",
+    "reduce_ui_animations": "Reducir animaciones UI",
+    "reduce_ui_animations_desc": "Activar para minimizar movimiento en el Hub. Dejalo apagado para la interfaz animada normal.",
+    "pinned_qapp_backup": "Copia de Q-Apps fijadas",
+    "pinned_qapp_backup_desc": "Guarda tus Q-Apps fijadas en ajustes QDN cifrados para que el mismo diseno te siga en otros dispositivos.",
+    "manage_backup": "Gestionar copia",
+    "block_list": "Lista de bloqueo",
+    "block_list_desc": "Revisa nombres y direcciones bloqueadas, y desbloquea cuentas cuando quieras.",
+    "blocked_count": "{{count}} bloqueados",
+    "addresses": "Direcciones",
+    "unblock": "Desbloquear",
+    "no_blocked_accounts": "Aun no hay cuentas bloqueadas.",
+    "show_receive_qr": "Mostrar QR de recepcion",
+    "copy_address": "Copiar direccion",
+    "privacy_mode_tooltip": "Modo privacidad: difumina informacion sensible para compartir pantalla",
+    "toggle_privacy_mode": "Alternar modo privacidad",
+    "send_qort": "Enviar QORT",
+    "send_qort_subtitle": "Transfiere QORT a cualquier nombre registrado o direccion.",
+    "close_send_qort_modal": "Cerrar modal de enviar QORT",
+    "receive_qort": "Recibir QORT",
+    "receive_qort_subtitle": "Escanea para recibir QORT",
+    "close_receive_qort_modal": "Cerrar modal de recibir QORT",
+    "download_qr": "Descargar QR",
+    "qortal_address_or_name": "Dirección Qortal o nombre registrado",
+    "blocked": "Bloqueados",
+    "account_status_online": "En línea",
+    "account_status_busy": "Ocupado",
+    "account_status_invisible": "Invisible",
+    "account_settings_tooltip": "Ajustes de la cuenta",
+    "open_account_settings_aria": "Abrir ajustes de la cuenta",
+    "name_change_confirm": "¿Cambiar tu nombre registrado de {{oldName}} a {{newName}}?",
+    "name_change_success": "Cambio de nombre enviado correctamente.",
+    "name_change_register_first": "Registra un nombre antes de cambiarlo.",
+    "name_change_enter_new_name": "Introduce el nuevo nombre que quieres usar.",
+    "name_change_different_from_current": "Elige un nombre distinto al actual.",
+    "name_change_details_still_loading": "Aún se cargan los datos de tu nombre. Inténtalo de nuevo en un momento.",
+    "name_change_choose_available": "Elige un nombre disponible antes de continuar.",
+    "name_change_wallet_password_required": "Introduce la contraseña de tu monedero antes de cambiar el nombre.",
+    "name_change_wallet_password_failed": "No pudimos verificar la contraseña de tu monedero.",
+    "current_name_details_load_failed": "No pudimos cargar los datos de tu nombre actual.",
+    "name_change_unknown_error": "Algo salió mal al cambiar tu nombre.",
+    "name_availability_available": "El nombre está disponible.",
+    "name_availability_checking": "Comprobando disponibilidad del nombre...",
+    "name_availability_same_as_current": "Elige un nombre distinto al que ya usas.",
+    "name_availability_taken": "Ese nombre ya está en uso."
+  },
+  "groups_widget": {
+    "accept": "Aceptar",
+    "approve": "Aprobar",
+    "cancel": "Cancelar",
+    "characters_count": "{{current}}/{{max}}",
+    "confirm_approve_request": "¿Aprobar esta solicitud e invitarlos al grupo?",
+    "confirm_join_group": "¿Unirte a este grupo ahora?",
+    "confirm_join_promoted_closed": "¿Enviar una solicitud de unión a este grupo promocionado?",
+    "confirm_join_promoted_open": "¿Unirte a este grupo promocionado ahora?",
+    "connecting": "Conectando...",
+    "discover_groups": "Descubrir grupos",
+    "error_accept_invite": "No se pudo aceptar esa invitación ahora.",
+    "error_approve_request": "No se pudo aprobar esa solicitud ahora.",
+    "error_load_invites": "No se pudieron cargar las invitaciones de grupo ahora.",
+    "error_load_promotions": "No se pudieron cargar los grupos promocionados ahora.",
+    "error_load_requests": "No se pudieron cargar las solicitudes de unión ahora.",
+    "error_promoted": "No se pudo actuar sobre ese grupo promocionado ahora.",
+    "error_publish_promotion": "No se pudo publicar esa promoción ahora.",
+    "fresh_promotion_snippet": "Este grupo tiene una actualización promocionada reciente.",
+    "from_label": "de",
+    "group_admin_only": "Solo administradores del grupo",
+    "group_general": "General",
+    "group_named": "Grupo {{id}}",
+    "ignore": "Ignorar",
+    "invitation_ready": "Invitación lista para revisar",
+    "invite_hidden": "Invitación oculta en este widget por ahora.",
+    "invites_empty_description": "Las nuevas invitaciones de grupo aparecerán aquí al llegar.",
+    "invites_empty_title": "Sin invitaciones pendientes",
+    "joined_group": "Te uniste a {{name}}.",
+    "joined_promoted": "Te uniste a {{name}}.",
+    "join_group": "Unirse al grupo",
+    "join_request_sent": "Solicitud de unión enviada para {{name}}.",
+    "loading_invites": "Cargando invitaciones",
+    "loading_notifications": "Cargando notificaciones",
+    "loading_promoted": "Cargando grupos promocionados",
+    "loading_requests": "Cargando solicitudes",
+    "members_count": "{{count}} miembros",
+    "new_encrypted_message": "Nuevo mensaje cifrado",
+    "notifications_empty_message": "Únete a comunidades en Q-Chat para llenar este feed con mensajes del grupo, menciones y actividad.",
+    "notifications_empty_title": "Empieza con grupos de Q-Chat",
+    "open": "Abrir",
+    "open_conversation": "Abrir conversación",
+    "private_group": "Grupo privado",
+    "private_group_invite": "Invitación a grupo privado",
+    "processing": "Procesando...",
+    "promoted_by": "Promovido por {{name}}",
+    "promoted_empty_message": "Los grupos promocionados aparecerán aquí cuando haya destacados nuevos.",
+    "promoted_empty_title": "Sin grupos promocionados",
+    "promote_dialog_fee": " Tarifa de publicación: {{fee}} QORT.",
+    "promote_dialog_intro": "Comparte una actualización destacada breve para uno de tus grupos donde eres admin.",
+    "promote_group": "Promover grupo",
+    "promote_page_title": "Promociona uno de tus grupos",
+    "promotion_published": "Promoción de grupo publicada.",
+    "promotion_placeholder": "Escribe una breve promoción para este grupo.",
+    "public_group": "Grupo público",
+    "refresh": "Actualizar",
+    "reject": "Rechazar",
+    "request_access": "Solicitar acceso",
+    "request_approved": "{{requester}} fue aprobado para {{group}}.",
+    "request_removed": "Solicitud eliminada de este widget por ahora.",
+    "request_sent": "Solicitud enviada",
+    "requests_empty_description": "Las solicitudes de unión de los grupos que administras aparecerán aquí.",
+    "requests_empty_title": "Sin solicitudes pendientes",
+    "select_admin_group": "Selecciona un grupo que administras",
+    "tab_invites": "Invitaciones",
+    "tab_notifications": "Notificaciones",
+    "tab_promoted": "Promocionados",
+    "tab_requests": "Solicitudes",
+    "unknown": "Desconocido",
+    "view_conversation": "Ver conversación",
+    "wants_to_join": "Quiere unirse a este grupo.",
+    "you": "Tú",
+    "publish": "Publicar"
+  },
+  "subscription": {
+    "subscriptions": "suscripciones",
+    "tooltip_actions_needed_one": "{{title}} - {{count}} acción pendiente",
+    "tooltip_actions_needed_other": "{{title}} - {{count}} acciones pendientes",
+    "relative_soon": "pronto",
+    "relative_in_minutes_one": "en {{count}} min",
+    "relative_in_minutes_other": "en {{count}} min",
+    "relative_in_hours_one": "en {{count}} hora",
+    "relative_in_hours_other": "en {{count}} horas",
+    "relative_in_days_one": "en {{count}} día",
+    "relative_in_days_other": "en {{count}} días",
+    "relative_in_months_one": "en {{count}} mes",
+    "relative_in_months_other": "en {{count}} meses",
+    "row_fallback_title": "suscripción",
+    "by_creator": "por {{name}}",
+    "creator_fallback": "creador de Qortal",
+    "price_line": "{{price}} QORT / {{interval}}",
+    "expires_suffix": " - caduca {{time}}",
+    "status_due": "pendiente",
+    "status_active": "activa",
+    "status_owner": "dueño",
+    "managed_fallback": "suscripción gestionada",
+    "members_one": "{{count}} miembro",
+    "members_other": "{{count}} miembros",
+    "join_requests_suffix_one": " - {{count}} solicitud de ingreso",
+    "join_requests_suffix_other": " - {{count}} solicitudes de ingreso",
+    "re_encryption_suffix": " - se necesita nuevo cifrado",
+    "actions_badge_one": "{{count}} acción",
+    "actions_badge_other": "{{count}} acciones",
+    "loading": "cargando suscripciones",
+    "section_needs_action": "requiere acción",
+    "section_active": "activas",
+    "open_subscriptions": "abrir suscripciones",
+    "empty_title": "Descubre Q-Apps basadas en suscripciones",
+    "empty_body": "Suscríbete a creadores y comunidades desde Q-Apps con suscripciones, como SubWire.",
+    "open_subwire": "abrir SubWire",
+    "tab_subscriptions": "Suscripciones",
+    "tab_subwire": "SubWire"
+  },
+  "group_invites": {
+    "empty_title": "sin invitaciones",
+    "empty_secondary_1": "no tienes invitaciones pendientes",
+    "empty_secondary_2": "en este momento.",
+    "empty_tertiary_no_groups": "aún no formas parte de ningún grupo.",
+    "cta_find_groups": "buscar grupos"
+  },
+  "group_join_requests": {
+    "empty_title": "sin solicitudes de ingreso",
+    "empty_secondary_1": "no tienes solicitudes pendientes",
+    "empty_secondary_2": "en este momento.",
+    "empty_tertiary_no_admin_groups": "aún no administras ningún grupo."
+  },
   "advanced_options": "opciones avanzadas",
   "block_delay": {
     "minimum": "retraso mínimo de bloque",
@@ -72,6 +346,8 @@
     "generic": {
       "avatar_publish_fee": "publicar un avatar requiere {{ fee }}",
       "avatar_registered_name": "se necesita un nombre registrado para establecer un avatar",
+      "add_new_key_option": "Añadir una clave nueva",
+      "add_new_key_sparingly": "Añadir una nueva clave debe hacerse con moderación para evitar aumentar el tamaño de las claves del grupo.",
       "admin_only": "solo se mostrarán los grupos donde eres administrador",
       "already_in_group": "¡ya estás en este grupo!",
       "block_delay_minimum": "retraso mínimo de bloque para aprobaciones de transacciones del grupo",
@@ -105,6 +381,7 @@
       "node_minting_key": "ya tienes una clave de minteo para esta cuenta en este nodo",
       "no_announcement": "no hay anuncios",
       "no_display": "nada que mostrar",
+      "no_description": "Sin descripción",
       "no_selection": "ningún grupo seleccionado",
       "not_part_group": "no formas parte del grupo cifrado. Espera a que un admin recifre las claves.",
       "only_encrypted": "solo se mostrarán los mensajes no cifrados.",
@@ -170,5 +447,11 @@
       "user_joined": "¡usuario unido con éxito!"
     }
   },
+  "context_menu": {
+    "mark_as_read": "Marcar como leído",
+    "mute_push_notifications": "Silenciar notificaciones push",
+    "unmute_push_notifications": "Activar notificaciones push",
+    "mark_all_read": "Marcar todo como leído"
+  },
   "thread_posts": "nuevas publicaciones del hilo"
 }
diff --git a/src/i18n/locales/es/node.json b/src/i18n/locales/es/node.json
index 98d57768..76490561 100644
--- a/src/i18n/locales/es/node.json
+++ b/src/i18n/locales/es/node.json
@@ -22,7 +22,7 @@
   "steps": {
     "java": "tiene Java",
     "downloaded": "Core descargado",
-    "running": "núcleo en ejecución"
+    "running": "Core en ejecución"
   },
   "actions": {
     "finished": "finalizado",
@@ -40,7 +40,8 @@
     "invalidKey": "clave API inválida",
     "failed_stop": "no se puede detener el Core",
     "failed_bootstrap": "no se puede hacer bootstrap",
-    "failed_delete": "no se puede eliminar la base de datos"
+    "failed_delete": "no se puede eliminar la base de datos",
+    "failed_bootstrap_or_clear": "no se puede hacer bootstrap, borrar datos de cadena ni iniciar Core"
   },
   "status": {
     "complete": "completo",
@@ -49,7 +50,7 @@
     "error": "error"
   },
   "recommendation": {
-    "title": "usar tu núcleo local",
+    "title": "usar tu Core local",
     "description": "Puedes continuar con el public node si lo deseas, pero recomendamos encarecidamente usar tu local node para la mejor experiencia. (Si estás intentando acceder sin conectividad, puedes continuar con public sin conexión.)",
     "subTitle": "ventajas de usar un nodo local:",
     "point1": "acceso completamente descentralizado",
@@ -63,7 +64,7 @@
     "resetDescription": "Tu clave API es inválida. Haz clic en restablecer para continuar."
   },
   "messages": {
-    "001": "iniciando el núcleo... por favor espera.",
+    "001": "iniciando Core... por favor espera.",
     "002": "error: no se puede iniciar el repositorio",
     "003": "error al ejecutar Qortal Core",
     "004": "error al descomprimir Qortal Core",
@@ -72,7 +73,7 @@
     "007": "error al descargar Java.",
     "008": "error al descomprimir Java",
     "009": "descargando Qortal Core... por favor espera.",
-    "010": "error: no se puede descargar o instalar el núcleo"
+    "010": "error: no se puede descargar o instalar Core"
   },
   "url": {
     "title": "URL inválida",
@@ -81,7 +82,12 @@
   "confirmations": {
     "stop": "¿estás seguro de que quieres detener el Core?",
     "bootstrap": "¿estás seguro de que quieres hacer bootstrap?",
-    "delete": "¿estás seguro de que quieres eliminar la base de datos?"
+    "delete": "¿estás seguro de que quieres eliminar la base de datos?",
+    "bootstrapOrClearChain": "Ejecuta el bootstrap por instantánea si Core está en ejecución localmente. Si no es posible o falla bootstrap, puede eliminarse la base de datos de cadena local y reiniciarse Core; los archivos del monedero no se tocan. ¿Continuar?"
+  },
+  "bootstrapChainHelp": {
+    "title": "Cadena bootstrap",
+    "body": "Una sola acción: bootstrap por instantánea cuando Core está arriba, o borrar la base de datos de cadena local y volver a iniciar Core cuando el bootstrap no es posible. El monedero se guarda por separado."
   },
   "stop": "detener Core",
   "bootstrap": "bootstrap",
@@ -89,6 +95,53 @@
   "more": "más opciones",
   "less": "menos opciones",
   "enableAuthWhenSyncing": "activar autenticación al sincronizar",
+  "coreSetupDialog": {
+    "title": "Configurar Qortal Core",
+    "introTitle": "Ejecuta tu propio nodo localmente.",
+    "introSubtitle": "Puedes usar un nodo público mientras Core arranca y se sincroniza.",
+    "publicNodeUnavailable": "Los nodos públicos no están disponibles ahora. Mantén esta pantalla abierta mientras el Core local arranca y se sincroniza.",
+    "steps": {
+      "downloadDone": "Core descargado",
+      "downloadActive": "Descargando Core",
+      "downloadIdle": "Descargar Core",
+      "runningDone": "Core en ejecución",
+      "runningActive": "Iniciando Core",
+      "runningIdle": "Iniciar Core"
+    },
+    "readyToDownload": "Listo para descargar",
+    "readyToStart": "Listo para iniciar",
+    "syncing": "Sincronizando",
+    "helpers": {
+      "downloadDone": "Los archivos de Core están instalados y listos.",
+      "downloadActive": "Descargando y preparando Qortal Core.",
+      "downloadIdle": "Descarga Qortal Core para ejecutar tu propio nodo.",
+      "runningDoneSyncing": "Core se está ejecutando y sincronizando la cadena de bloques.",
+      "runningDone": "Core se está ejecutando localmente.",
+      "runningWaiting": "Core arrancará y comenzará a sincronizarse en segundo plano.",
+      "runningBlocked": "Disponible después de descargar Core."
+    },
+    "nextStepPill": "Siguiente paso",
+    "locationTitle": "Ubicación de Core",
+    "locationCustom": "Qortal Core se ejecutará desde esta carpeta.",
+    "locationDefault": "Qortal Core usará la carpeta predeterminada de este sistema.",
+    "locationPathDefault": "Ubicación predeterminada de Qortal Core",
+    "change": "Cambiar",
+    "choose": "Elegir",
+    "clear": "Borrar",
+    "advancedTitle": "Avanzado",
+    "advancedSubtitle": "Herramientas y opciones avanzadas para Core.",
+    "maintenanceUnavailable": "Las herramientas de mantenimiento de Core no están disponibles mientras Core arranca o se sincroniza.",
+    "stopCoreTitle": "Detener Core",
+    "stopCoreBody": "Detiene el proceso local de Core.",
+    "stopButton": "Detener",
+    "cancel": "Cancelar",
+    "actionDownload": "Descargar Core",
+    "actionStart": "Iniciar Core",
+    "actionDone": "Hecho",
+    "confirmTitle": "Confirmar acción",
+    "folderCopied": "Carpeta de Core copiada",
+    "progressAriaLabel": "Progreso de {{label}}"
+  },
   "NotFullyStarted": {
     "titleNotReady": "Core no se ha iniciado completamente",
     "descNotReady": "Qortal Core aún no se ha iniciado por completo. Por favor, espera.",
diff --git a/src/i18n/locales/es/question.json b/src/i18n/locales/es/question.json
index 8cfec088..446752a9 100644
--- a/src/i18n/locales/es/question.json
+++ b/src/i18n/locales/es/question.json
@@ -152,8 +152,12 @@
     "invite": "¿Deseas permitir que esta aplicación invite a {{ invitee }}?",
     "kick": "¿Deseas permitir que esta aplicación expulse a {{ partecipant }} del grupo?",
     "leave_group": "¿Deseas permitir que esta aplicación abandone el siguiente grupo?",
-    "list_hosted_data": "¿Deseas permitir que esta aplicación obtenga una lista de tus datos alojados?",
-    "order_detail": "{{ qort_amount }} QORT por {{ foreign_amount }} {{ ticker }}",
+      "list_hosted_data": "¿Deseas permitir que esta aplicación obtenga una lista de tus datos alojados?",
+      "notification": "¿permitir que esta app te envíe notificaciones del Hub?",
+      "notification_allow": "permitir",
+      "notification_dont_allow": "no permitir",
+      "notification_title": "notificaciones de {{ appName }}",
+      "order_detail": "{{ qort_amount }} QORT por {{ foreign_amount }} {{ ticker }}",
     "pay_publish": "¿Deseas permitir que esta aplicación realice los siguientes pagos y publicaciones?",
     "perform_admin_action_with_value": "con valor: {{ value }}",
     "perform_admin_action": "¿Deseas permitir que esta aplicación realice la acción administrativa: {{ type }}?",
diff --git a/src/i18n/locales/es/tutorial.json b/src/i18n/locales/es/tutorial.json
index b137ce28..3b661a41 100644
--- a/src/i18n/locales/es/tutorial.json
+++ b/src/i18n/locales/es/tutorial.json
@@ -33,6 +33,7 @@
     "get_six_qorts_way3_action": "Abrir Q-Trade",
     "register_name": "Registra tu nombre",
     "confirming_transaction": "Confirmando transacción",
+    "confirming": "Confirmando",
     "load_avatar": "Carga tu avatar",
     "explore_apps": "Explorar aplicaciones destacadas",
     "done": "Hecho",
@@ -53,6 +54,17 @@
     "devnet_testing_desc": "Prueba tus Q-Apps en el entorno DevNet-Testing",
     "open_app": "Abrir",
     "address_copied": "Dirección copiada al portapapeles",
-    "group_activity": "Actividad de Grupo"
+    "group_activity": "Actividad de Grupo",
+    "get_qorts_workspace_hint": "Desbloquea tus primeros 6 QORT para activar el resto de la configuración.",
+    "register_name_workspace_hint": "Un nombre registrado convierte esta cuenta en una identidad reconocible.",
+    "load_avatar_workspace_hint": "Dale un rostro al panel para que el espacio se sienta tuyo.",
+    "onboarding_transition_hard_part_done": "Buen trabajo. Lo más difícil ya pasó.",
+    "onboarding_transition_one_more": "Genial. Solo falta uno más.",
+    "onboarding_press_next_when_ready": "Buen trabajo. Lo más difícil ya pasó. Pulsa Siguiente cuando estés listo.",
+    "register_name_pending_hint": "Guardando el nombre en cadena. Puede tardar un momento.",
+    "persistent_guide_get_qorts": "Empezamos con 6 QORT. Elige cualquier opción de arriba.",
+    "persistent_guide_register_name": "Ahora registra tu nombre.",
+    "persistent_guide_load_avatar": "Por último, añade tu avatar.",
+    "post_onboarding_workspace_ready": "Todo listo. Puedes empezar a montar tu espacio de trabajo arriba."
   }
 }
diff --git a/src/i18n/locales/et/auth.json b/src/i18n/locales/et/auth.json
index 05c2b801..b05ee821 100644
--- a/src/i18n/locales/et/auth.json
+++ b/src/i18n/locales/et/auth.json
@@ -74,8 +74,11 @@
       "set_apikey": "API võtme seadmine ebaõnnestus:"
     },
     "generic": {
+      "block_list_intro": "Lisa Qortali nimi või aadress blokeerimiseks. Aadressid mõjutavad tehinguid; nime blokeerimine peidab selle andmed kogu Hubis.",
       "blocked_addresses": "blokeeritud aadressid - peatab tehingute töötlemise",
+      "blocked_addresses_hint": "Blokeerib nende aadresside tehingute töötlemisega seotud toimingud.",
       "blocked_names": "blokeeritud QDN nimed",
+      "blocked_names_hint": "Need nimed on blokeeritud QDN/Hubi andmete ja sotsiaalsete funktsioonide jaoks.",
       "blocking": "blokeerin {{ name }}",
       "choose_block": "vali 'bloki tehingud' või 'kõik', et blokeerida vestlused",
       "congrats_setup": "palju õnne, kõik on valmis!",
@@ -88,6 +91,7 @@
       "locating_encryption_keys": "otsin krüpteerimisvõtmeid",
       "insert_name_address": "Palun sisesta nimi või aadress privaatse vestluse alustamiseks.",
       "name_address": "nimi või aadress",
+      "no_blocked_users": "Keegi pole veel blokeeritud. Lisa ülal aadress või nimi, et neid peita.",
       "no_account": "kontosid pole salvestatud",
       "no_minimum_length": "miinimumpikkuse nõuet pole",
       "no_secret_key_published": "salavõtit pole veel avaldatud",
@@ -143,6 +147,159 @@
   },
   "welcome": "Oled sisselogitud nimega",
   "store_account": "salvesta konto Hub’i",
+  "create_wallet": {
+    "error_enter_password": "Sisesta rahakoti parool.",
+    "error_confirm_password": "Kinnita rahakoti parool.",
+    "error_passwords_mismatch": "Paroolid ei ühti.",
+    "success_wallet_saved": "Rahakott salvestatud",
+    "success_account_created": "Konto loodud",
+    "success_ready_hub": "Nüüd võid Hubi siseneda.",
+    "success_backup_before_hub": "Enne Hubi sisendumist tee krüptitud rahakoti varukoopia.",
+    "enter_hub": "Sisene Hub",
+    "download_another_copy": "Laadi alla veel üks koopia",
+    "backup_wallet": "Varunda rahakott",
+    "backup_encrypted_notice": "See varukoopia on krüptitud sinu rahakoti parooliga.",
+    "seed_title": "Sinu seemnefraas",
+    "seed_subtitle": "Saad konto taastada. Seemnefraasi salvestamine on valikuline. Järgmisena tuleb krüptitud rahakoti varukoopia — soovituslik taastamisviis.",
+    "reveal": "Näita",
+    "copied": "Kopeeritud",
+    "copy": "Kopeeri",
+    "export": "Ekspordi",
+    "seed_warning": "Ära jaga seda kunagi. Igal, kel see on, võib kontole juurdepääsu saada. Igapäevaseks võta pärast loomist krüptitud rahakoti varukoopia.",
+    "create_account": "Loo konto",
+    "password_title": "Loo parool",
+    "password_subtitle": "See parool kaitseb kontot sellel seadmel.",
+    "wallet_password": "Rahakoti parool",
+    "confirm_password": "Kinnita parool",
+    "save_account_in_hub": "Salvesta konto Hub'i",
+    "continue": "Jätka"
+  },
+  "import_account": {
+    "title": "Impordi konto",
+    "subtitle": "Valige, kuidas soovite oma konto taastada."
+  },
+  "backup_wallet_modal": {
+    "subtitle": "Laadi alla kohalik rahakotifail, et seda kontot hiljem taastada.",
+    "info_note": "Ekspordib rahakotifaili kohalikult sinu seadmesse. Hoiusta see turvalises kohas.",
+    "current_password": "Praegune parool",
+    "keep_password_in_export": "Jäta eksporditud rahakotifaili praegune parool alles",
+    "new_password_for_backup": "Uus parool selle varukoopia jaoks",
+    "download_wallet_file": "Laadi alla rahakotifail",
+    "error_no_active_wallet": "Varundamiseks ei leitud aktiivset rahakotti.",
+    "error_unable_to_create_backup": "Rahakoti varukoopiat ei õnnestunud luua."
+  },
+  "wallet_errors": {
+    "unable_to_unlock_default": "seda rahakotti ei õnnestu avada.",
+    "unable_to_save_backup": "rahakoti varukoopiat ei õnnestunud salvestada.",
+    "unable_to_prepare_backup": "rahakoti varukoopiat ei õnnestunud valmistada.",
+    "account_not_found": "seda salvestatud kontot ei leitud. vali mõni teine konto või taasta rahakott varukoopiast.",
+    "account_incomplete": "salvestatud konto näib puuduolev või vigane. vali mõni teine konto või taasta rahakott varukoopiast.",
+    "invalid_security_data": "salvestatud kontol on sobimatud rahakoti turvaandmed. vali mõni teine konto või taasta rahakott varukoopiast.",
+    "missing_encrypted_seed": "salvestatud kontolt puudub krüptitud seeme (lukustatud rahakoti andmed selle avamiseks). vali mõni teine konto või taasta rahakott varukoopiast.",
+    "missing_field": "salvestatud kontolt puudub {{field}}. vali mõni teine konto või taasta rahakott varukoopiast.",
+    "field": {
+      "address0": "rahakoti aadress",
+      "encryptedSeed": "krüptitud seeme (lukustatud rahakoti andmed avamiseks)",
+      "iv": "rahakoti krüptoandmed",
+      "kdfThreads": "rahakoti parooli seaded",
+      "mac": "rahakoti tervikuskontroll",
+      "salt": "rahakoti parooliturbe andmed",
+      "version": "rahakoti versioon"
+    }
+  },
+  "connection_mode": {
+    "title": "Ühendusrežiim",
+    "subtitle": "Vali, kuidas Qortal võrguga ühendub.",
+    "local_title": "Kohalik sõlm",
+    "recommended": "Soovitatav",
+    "local_full_decentralized": "Täielik detsentraliseeritud ligipääs",
+    "local_faster": "Kiirem jõudlus",
+    "local_data_local": "Sinu andmed jäävad kohalikku",
+    "public_title": "Avalik sõlm",
+    "public_quick": "Kiire ligipääs",
+    "public_limited_decentralization": "Piiratud detsentraliseeritus",
+    "public_shared_infrastructure": "Jagatud infrastruktuur",
+    "status_running": "Core tötab",
+    "status_missing": "Cored ei tuvastatud",
+    "status_checking": "Kohalikku sõlme kontrollitakse",
+    "section_custom_nodes": "Kohandatud sõlmed",
+    "add_custom_node": "Lisa kohandatud sõlm",
+    "empty_custom_nodes": "Kohandatud sõlmi pole salvestatud",
+    "manual_setup_link": "Käsitsi sõlme seadistus",
+    "save_settings": "Salvesta seaded",
+    "manual_edit_title": "Muuda kohandatud sõlme",
+    "manual_add_title": "Käsitsi sõlme seadistus",
+    "field_name": "Nimi",
+    "placeholder_node_name": "Minu Qortal-sõlm",
+    "field_node_url": "Sõlme URL",
+    "placeholder_node_url": "https://127.0.0.1:12391",
+    "field_api_key_optional": "API-võti (valikuline)",
+    "placeholder_api_key": "Sisesta API-võti",
+    "reload_after_new_node_title": "Uuesti laadimine on vajalik",
+    "reload_after_new_node_message": "Lisasid uue sõlme; rakenduse värskendamine on vajalik.",
+    "reload_after_new_node_button": "Laadi rakendus uuesti"
+  },
+  "intro_features": {
+    "secure_title": "Turvaline ja privaatne",
+    "secure_text": "Sinu võtmed, sinu andmed – alati sinu kontrolli all.",
+    "fast_title": "Kiire ligipääs",
+    "fast_text": "Ava lukk ja sisene kohe Qortali kogemusse.",
+    "decentralized_title": "Hajutatud",
+    "decentralized_text": "Ühendu võrguga enda tingimustel.",
+    "built_title": "Sulle loodud",
+    "built_text": "Üks konto. Lõputud võimalused."
+  },
+  "entry": {
+    "title": "Sisene Qortali",
+    "subtitle": "Logi sisse või loo konto.",
+    "create_account": "Loo konto",
+    "import_account": "Impordi konto",
+    "no_accounts": "Sellest seadmest ei leitud ühtegi kontot.",
+    "import_choice_backup_title": "Varukoopiafail",
+    "import_choice_backup_description": "Impordi salvestatud Hubi varukoopia.",
+    "import_choice_authenticate_title": "Autendi kohe",
+    "import_choice_authenticate_description": "Kasuta varukoopiafaili seda salvestamata.",
+    "import_choice_seed_title": "Seemnelause",
+    "import_choice_seed_description": "Taasta seemnelause abil.",
+    "import_backup_heading": "Impordi varukoopiafailist",
+    "import_backup_drop_hint": "Lohista varukoopia või klõpsa valimiseks.",
+    "import_authenticate_heading": "Autendi varukoopiafailist",
+    "import_authenticate_drop_hint": "Lohista varukoopia või klõpsa valimiseks. Seda ei salvestata sellesse seadmesse.",
+    "import_seed_label": "Seemnelause",
+    "import_seed_placeholder": "Sisesta seemnelause",
+    "import_wallet_password": "Rahakoti parool",
+    "importing_account": "Impordin kontot...",
+    "seed_import_error": "Seda seemnelauset ei saanud importida.",
+    "seed_import_duplicate": "See konto on selles seadmes juba salvestatud.",
+    "seed_import_success": "Konto imporditi edukalt.",
+    "import_backup_success_one": "{{count}} konto imporditi edukalt.",
+    "import_backup_success_other": "{{count}} kontot imporditi edukalt.",
+    "import_backup_duplicate": "Need kontod on selles seadmes juba salvestatud.",
+    "import_backup_invalid": "See varukoopiafail ei sisalda kehtivat kontot.",
+    "import_file_read_aborted": "Faili lugemine katkestati",
+    "import_file_read_failed": "Faili lugemine nurjus",
+    "filter_accounts_aria": "Filtreeri kontosid aadressi, peamise nime või märkuse järgi",
+    "filter_placeholder": "Aadress, peamine nimi või märkus…",
+    "filter_no_results": "Ükski konto ei sobi.",
+    "filter_clear": "Tühjenda otsing",
+    "wallet_edit_name_label": "Nimi",
+    "wallet_edit_account_name_placeholder": "Konto nimi",
+    "wallet_edit_note_label": "Märge",
+    "wallet_edit_note_placeholder": "Valikuline märge",
+    "wallet_edit_remove": "Eemalda",
+    "wallet_edit_save": "Salvesta",
+    "wallet_edit_aria_label": "Muuda konto nime ja märget"
+  },
+  "authentication_form": {
+    "unnamed_account": "Nimeta konto",
+    "password_placeholder": "Sisesta parool",
+    "unlock": "Ava lukk",
+    "choose_another_account": "Vali teine konto",
+    "using_local_node": "Kohalik sõlm",
+    "using_public_node": "Avalik sõlm",
+    "using_custom_node": "Kohandatud sõlm"
+  },
+
   "temp_auth": {
     "tooltip": "autendi ilma oma kontot Hub’i salvestamata",
     "button": "ajutine sisselogimine"
diff --git a/src/i18n/locales/et/core.json b/src/i18n/locales/et/core.json
index 5a418e55..d3444a17 100644
--- a/src/i18n/locales/et/core.json
+++ b/src/i18n/locales/et/core.json
@@ -7,6 +7,7 @@
     "add_custom_framework": "lisa kohandatud raamistik",
     "add_reaction": "lisa reaktsioon",
     "add_theme": "lisa teema",
+    "back": "tagasi",
     "backup_account": "varunda konto",
     "backup_wallet": "varunda rahakott",
     "cancel": "tühista",
@@ -132,9 +133,9 @@
   "core": {
     "block_height": "ploki kõrgus",
     "data_peers": "QDN (andmed) sõlmed",
-    "information": "Sõlme info",
+    "information": "Core teave",
     "peers": "ühendatud sõlmed",
-    "version": "Sõlme versioon"
+    "version": "Core versioon"
   },
   "current_language": "praegune keel: {{ language }}",
   "dev": "arendus",
@@ -248,6 +249,8 @@
       "confirmed": "kinnitatud",
       "created_by": "loodud kasutaja {{ owner }} poolt",
       "devmode_local_node": "palun kasuta arendusrežiimis oma kohalikku sõlme! Logi välja ja vali kohalik sõlm.",
+      "disable_os_push": "Lülita OS-i väljatõuketeatised välja",
+      "disable_os_push_desc": "Summuta selle rakenduse töölauateatised, säilitades samal ajal Hubi tegevuse nähtavana.",
       "downloading_decrypting_app": "laadin ja dekrüpteerin privaatset rakendust.",
       "downloading": "allalaadimine",
       "edited": "muudetud",
@@ -255,11 +258,17 @@
       "encrypted_not": "pole krüpteeritud",
       "encrypted": "krüpteeritud",
       "amount_qort": "summa: {{ amount }} QORT",
+      "app_notifications_hint": "Q-rakenduse teavitused kuvatakse siin",
       "fee_qort": "tasu: {{ fee }} QORT",
       "fetching_data": "laadin rakenduse andmeid",
       "foreign_fee": "välismaine tasu: {{ fee }}",
       "get_qort_trade_portal": "hanki QORT Qortali rist-ahela kaubandusportaali kaudu",
+      "loading": "Laadimine...",
       "mentioned": "mainitud",
+      "new_notification_from": "Uus teavitus: {{ appName }}",
+      "new_payment_body": "Said kätte {{ amount }} QORTi.",
+      "new_payment_received": "Uus makse laekus",
+      "new_qmail": "Sul on uus Q-Mail",
       "message_with_image": "selles sõnumis on juba pilt",
       "minimal_qort_balance": "Vähemalt {{ quantity }} QORTi sinu saldol võimaldab saata vestlussõnumeid peaaegu hetkega.",
       "most_recent_payment": "{{ count }} viimast makset",
@@ -271,12 +280,17 @@
       "name_rate": "hinnangu andmiseks on vaja nime.",
       "name_registration": "sinu saldo on {{ balance }} QORT. Nime registreerimine nõuab {{ fee }} QORT tasu",
       "name_unavailable": "{{ name }} pole saadaval",
+      "no_app_notifications": "Rakenduse teavitusi pole veel",
       "no_data_image": "pildiandmed puuduvad",
       "no_description": "kirjeldus puudub",
       "no_messages": "sõnumeid pole",
       "no_message": "sõnum puudub",
       "no_minting_details": "mintimise andmeid pole võimalik värava kaudu vaadata",
+      "no_notification_apps": "Ühelgi rakendusel pole veel teavituste luba.",
       "no_notifications": "teavitusi pole",
+      "notification_settings": "Teavituste sätted",
+      "notification_settings_desc": "Vali, millised rakendused võivad saata töölaua märguandeid, säilitades samal ajal Hubi tegevuse nähtavana.",
+      "notifications": "Teavitused",
       "no_payments": "makseid pole",
       "no_pinned_changes": "sul pole praegu kinnitatud rakenduste muudatusi",
       "no_results": "tulemusi pole",
@@ -297,6 +311,7 @@
       "replied_to": "vastas kasutajale {{ person }}",
       "revert_default": "taasta vaikeseaded",
       "revert_qdn": "taasta QDN-ist",
+      "revoke_permission": "Tühista",
       "save_qdn": "salvesta QDN-i",
       "secure_ownership": "turvasta oma nime all avaldatud andmete omandiõigus. Soovi korral võid oma nime ja andmed ka kolmandale isikule müüa.",
       "select_file": "palun vali fail",
@@ -308,7 +323,8 @@
       "unread_messages": "lugemata sõnumid allpool",
       "unsaved_changes": "sul on salvestamata muudatusi kinnitatud rakendustes. Salvesta need QDN-i.",
       "updating": "uuendamine",
-      "wait": "palun oota"
+      "wait": "palun oota",
+      "open_q_trade_subtitle": "Ava Q-Trade ja osta QORT kauplemisportaalist."
     },
     "message": "sõnum",
     "promotion_text": "Sisesta lühikene tutvustus",
@@ -336,6 +352,7 @@
       "rated_app": "edukalt hinnatud. Palun oota paar minutit, kuni võrk muudatusi levitab.",
       "request_read": "olen selle päringu läbi lugenud",
       "transfer": "ülekanne õnnestus!",
+      "transfer_submitted": "Sinu ülekanne edastati edukalt.",
       "voted": "edukalt hääletatud. Palun oota paar minutit, kuni võrk muudatusi levitab."
     }
   },
@@ -365,7 +382,38 @@
     },
     "status_title": "mintimis konto detailne info",
     "tier_share_per_block": "Preemia protsent sellel tasemel",
-    "total_minter_in_tier": "mintijate koguarv sellel tasemel"
+    "total_minter_in_tier": "mintijate koguarv sellel tasemel",
+    "panel": {
+      "dialog_subtitle": "Vaata praegust mint olekut, edenemist ja järgmisi samme.",
+      "state_syncing_title": "Sünkroniseerimine",
+      "state_syncing_body": "Sõlm sünkroonib endiselt; mint ei saa veel alata.",
+      "state_active_title": "Mint aktiivne",
+      "state_active_body_node_selection": "See minteri võti on sellel sõlmel seadistatud. Statistikad peegeldavad valitud kontot.",
+      "state_active_body_account": "See konto on sellel sõlmel mintimiseks seadistatud.",
+      "state_inactive_title": "Mint puudub",
+      "state_inactive_body_not_in_group": "See konto ei ole veel minterite grupis.",
+      "state_inactive_body_multi_key": "Sellel sõlmel on juba mitu mintimisvõtit seadistatud.",
+      "state_inactive_body_ready": "See konto on valmis järgmise mint sammu jaoks.",
+      "next_step_visit_q_mintership": "Ava Q-Mintership rakendus, et minteriks kandideerida.",
+      "next_step_already_active": "Mint on sellel sõlmel juba aktiivne.",
+      "next_step_wait_sync": "Oota sõlme sünkroonimise lõppu enne kui mint saab alata.",
+      "next_step_start_when_ready": "Käivita mint sellel sõlmel kui olete valmis.",
+      "section_your_wallet": "Sinu rahakott",
+      "section_minter_profile_stats": "Minter profiil (statistika)",
+      "section_account_identity": "Konto identiteet",
+      "section_progress_next_level": "Edenemine järgmise tasemeni",
+      "section_next_step": "Järgmine samm",
+      "section_node_minting_accounts": "Sõlme mintimiskontod",
+      "select_account_for_stats_hint": "Valige konto edenemise ja preemiatestatistika uuendamiseks paremal.",
+      "badge_viewing_stats": "Statistikat vaadatakse",
+      "blocks_to_level": "plokke tasemele {{level}}",
+      "minting_for_approx_days": "Mint (~{{days}} päeva)",
+      "reference_only": "(ainult viitena)",
+      "rewards_info_subtitle_own": "(sinu preemiateave)",
+      "rewards_info_subtitle_selected": "(valitud minter — selle võtme preemiad)",
+      "network_details": "Võrgu üksikasjad",
+      "loading_spinner_aria": "Laadimine"
+    }
   },
   "name": "nimi",
   "name_app": "nimi/rakendus",
@@ -389,10 +437,36 @@
   "publish": "avalda",
   "q_apps": {
     "about": "rakenduse kohta",
-    "q_mail": "q-mail",
-    "q_manager": "q-manager",
-    "q_sandbox": "q-sandbox",
-    "q_wallets": "q-walletid"
+    "q_mail": "Q-Mail",
+    "q_manager": "Q-Manager",
+    "q_sandbox": "Q-Sandbox",
+    "q_wallets": "Q-Wallets",
+    "wallets_workspace": "rahakottide tööruum"
+  },
+  "account_lookup": {
+    "dialog_title": "Kasutaja otsing",
+    "empty_title": "Otsi kontosid",
+    "empty_subtitle": "Sisesta nimi või aadress",
+    "tooltip_send_disabled": "See on sinu enda profiil.",
+    "tooltip_block_public_node": "Kasutajate blokeerimine pole avaliku sõlme režiimis saadaval.",
+    "tooltip_block_self": "Sa ei saa iseennast blokeerida.",
+    "error_lookup_failed": "Selle kontoga ei saanud ühendust.",
+    "chip_level": "Tase {{level}}",
+    "chip_blocked": "Blokeeritud",
+    "chip_no_registered_name": "Registreeritud nimi puudub",
+    "section_minting_progress": "Mintimise edenemine",
+    "minting_remaining": "{{remaining}} jäänud",
+    "minting_blocks_to_level": "{{remaining}} tasemele {{level}}",
+    "minting_approx_one": "~{{count}} päev mintimist (ligik.)",
+    "minting_approx_other": "~{{count}} päeva mintimist (ligik.)",
+    "minting_days_label": "Mintimine:",
+    "label_address": "Aadress",
+    "label_public_key": "Avalik võti",
+    "payments_title": "Viimased maksed",
+    "pagination_rows_per_page": "Ridu lehel:",
+    "pagination_displayed_rows": "{{from}}–{{to}} / {{count}}",
+    "action_block": "blokeeri",
+    "action_unblock": "eemalda blokeering"
   },
   "app_detail": {
     "about": "teave",
@@ -454,7 +528,10 @@
     "official_apps": "ametlikud rakendused"
   },
   "aria": {
-    "apps_library_tabs": "rakenduste teegi navigeerimise vahelehed"
+    "apps_library_tabs": "rakenduste teegi navigeerimise vahelehed",
+    "core_controls": "Core juhtimine",
+    "switch_theme_dark": "Lülitu tumedasse režiimi",
+    "switch_theme_light": "Lülitu heledasse režiimi"
   },
   "supply": "Üldine QORT varu",
   "tags": "sildid",
@@ -501,6 +578,157 @@
     "wallet": "rahakott",
     "wallet_other": "rahakotid"
   },
+  "widget_container": {
+    "empty_message": "Hetkel pole midagi näidata.",
+    "empty_title": "Kirjeid veel pole",
+    "error_title": "Seda vidinat ei õnnestunud laadida",
+    "loading": "Laadimine",
+    "loading_message": "Värskete avalike andmete toomine vaikimisi Qortali sõlmest.",
+    "retry": "Proovi uuesti"
+  },
+  "quitter_feed": {
+    "error_generic": "Avalik Quitteri voog pole ajutiselt saadaval. Proovi hetke pärast uuesti.",
+    "error_following": "Isikupärastatud Quitteri voog pole ajutiselt saadaval. Palun proovi uuesti.",
+    "error_timeout": "Voo laadimine ebaõnnestus. Võid proovida uuesti või naasta Üldise juurde.",
+    "loading_following": "Jälgimisvoo laadimine...",
+    "loading_general": "Voo laadimine...",
+    "error_title_following": "Voo laadimine ebaõnnestus",
+    "error_title_general": "Postitusi ei õnnestunud laadida",
+    "empty_title_no_name": "Logi sisse, et oma voogu isikupärastada",
+    "empty_title_no_following": "Paistab, et sa ei järgi veel kedagi.",
+    "empty_title_no_posts": "Jälgitavatelt kontodelt pole postitusi",
+    "empty_title_general": "Postitusi pole saadaval",
+    "empty_message_no_name": "Logi sisse Qortali nimelaadiga, et luua isikupärastatud voog.",
+    "empty_message_no_following": "Sirvi Quitteri ja järgi kontosid oma voo koostamiseks.",
+    "empty_message_no_posts": "Kontod, keda järgid, ei ole Quitterisse veel postitanud.",
+    "tab_general": "Üldine",
+    "tab_following": "Jälgitavad",
+    "subtitle_personalized": "Isikupärastatud voog",
+    "subtitle_public": "Avalik voog",
+    "retry_following": "Proovi uuesti",
+    "retry_general": "Proovi uuesti",
+    "return_to_general": "Tagasi üldisse",
+    "posts_showing_one": "{{count}} postitus nähtaval",
+    "posts_showing_other": "{{count}} postitust nähtaval",
+    "new_posts_one": "{{count}} uus postitus",
+    "new_posts_other": "{{count}} uut postitust"
+  },
+  "quick_tools_pad": {
+    "user_search": "Kasutaja otsing",
+    "wallets": "Rahakotid",
+    "minting": "Minting",
+    "backup_wallet": "Varunda rahakott",
+    "q_chat": "Q-Chat",
+    "notifications_enable": "Luba teavitused",
+    "notifications_mute": "Summuta teavitused",
+    "apps": "Rakendused",
+    "extras": "",
+    "hint_notifications_desktop_only": "See summutab ainult töölauahoiatused. Keskusesisesed teavitused jätkuvad.",
+    "hint_minting_panel": "See paneel avaneb pärast minteriks saamist. Alusta külastades Q-Mintershipi!",
+    "snackbar_backup_wallet": "Laadi oma rahakotifail alla. Kontole juurdepääsuks see on vajalik."
+  },
   "website": "veebileht",
-  "welcome": "tere tulemast"
+  "welcome": "tere tulemast",
+  "qortino_workspace": {
+    "modules_hotkeys_label": "Hotkeys",
+    "modules_hotkeys_description": "Curated shortcuts for your most-used routes.",
+    "modules_music_label": "Music player",
+    "modules_music_description": "A compact Earbump player with search and quick playback.",
+    "modules_suggest_label": "Suggest a module",
+    "modules_suggest_description": "Compose > Add Subject + Message & Send it our way!",
+    "workspace_empty_prompt": "Choose what lives above QORTINO.",
+    "workspace_header_hotkeys": "Hotkeys",
+    "workspace_header_music": "Music player",
+    "workspace_add_app": "Add app",
+    "getting_started_heading": "Getting started",
+    "onboarding_step_progress": "Step {{current}} / {{total}}",
+    "dialog_module_title": "Choose a module",
+    "dialog_module_subtitle": "Pick what lives above QORTINO.",
+    "dialog_hotkeys_title": "Select hotkeys",
+    "dialog_hotkeys_subtitle": "Saved automatically for this account.",
+    "dialog_music_search_title": "Search Earbump",
+    "dialog_music_search_subtitle": "Find a track, press play, and drop it into the player above.",
+    "search_placeholder_qapps": "Search Q-Apps",
+    "search_placeholder_tracks": "Search tracks or artists",
+    "section_recommended": "Recommended",
+    "curated_badge": "[ CURATED ]",
+    "hotkeys_loading_library": "Loading Q-Apps library...",
+    "hotkeys_unavailable_title": "Q-Apps unavailable",
+    "hotkeys_no_match_title": "No Q-Apps match yet",
+    "hotkeys_no_match_hint": "Try another app name to wire a shortcut into the selected slot.",
+    "error_hotkey_catalog": "Unable to load Q-Apps right now.",
+    "music_section_results": "Results",
+    "music_section_discovery": "Discovery",
+    "music_loading_search": "Searching the EarBump library...",
+    "music_loading_discovery": "Loading EarBump discovery...",
+    "music_quiet_title": "EarBump is quiet right now",
+    "music_no_tracks_title": "No tracks surfaced",
+    "music_no_tracks_hint": "Try another title or artist to pull something into the player.",
+    "error_earbump_discovery": "Unable to load EarBump right now.",
+    "error_earbump_search": "Unable to search EarBump right now.",
+    "music_syncing_library": "Syncing with EarBump library...",
+    "music_empty_title": "EarBump library",
+    "music_empty_uploaded": "Waiting for library",
+    "music_track_load_failed": "This track could not finish loading on your node.",
+    "music_no_peers_data": "No peers for remaining data",
+    "music_preparing_peers_one": "Preparing on your node... {{percent}}% ({{count}} peer)",
+    "music_preparing_peers_other": "Preparing on your node... {{percent}}% ({{count}} peers)",
+    "music_preparing_percent_only": "Preparing on your node... {{percent}}%",
+    "music_searching_peers": "Looking for peers...",
+    "music_finalizing_track": "Finalizing the track on your node...",
+    "music_preparing_base": "Preparing on your node...",
+    "music_playback_stalled": "Playback stalled. Press play to retry.",
+    "music_stream_stalled": "Track stalled. Rebuilding the stream...",
+    "hotkeys_launch_description": "Launch {{appName}}",
+    "hotkeys_fallback_launch": "Launch Q-App",
+    "reaction_hotkeys_ready": "Hotkeys panel ready.",
+    "reaction_music_panel_ready": "Music panel ready.",
+    "reaction_panel_cleared": "Panel cleared.",
+    "reaction_music_player_ready": "Music player ready.",
+    "reaction_locked_track": "Locked on {{title}}.",
+    "reaction_track_rotation": "{{title}} is in rotation.",
+    "reaction_onboarding_route": "Onboarding route open. I'll keep the next step warm.",
+    "reaction_support_chat": "Support chat is open. Ask for the 6 QORT and I'll queue step two.",
+    "reaction_q_trade_open": "Q-Trade is up. If you grab QORT there, I'll take you forward.",
+    "reaction_name_flow": "Name flow open. This is where the hub starts recognizing you.",
+    "reaction_avatar_flow": "Avatar flow ready. Let's give this place a face.",
+    "track_meta_separator": "·",
+    "a11y_clear_hotkey_slot": "Clear slot {{n}}",
+    "runtime_workspace_bay_title": "Workspace bay hit a runtime snag.",
+    "runtime_workspace_bay_body": "QORTINO below is still safe. Refresh the Hub and if this keeps happening we will trace the exact crash from here.",
+    "runtime_qortino_title": "QORTINO hit a runtime snag.",
+    "runtime_qortino_body": "The workspace bay above is still safe. Refresh the Hub and if this keeps happening we will trace the exact crash from here.",
+    "hotkey_slot_number": "Pesa {{n}}"
+  },
+  "bookmarks": {
+    "title": "Järjehoidjad",
+    "bookmarked": "Järjehoidjates",
+    "add_page": "Lisa leht",
+    "loading": "Järjehoidjate laadimine...",
+    "folder": "Kaust",
+    "create_folder": "Loo kaust",
+    "folder_name": "Kausta nimi",
+    "new_folder": "Uus kaust",
+    "top_level": "Ülemine tase",
+    "edit_bookmark": "Muuda järjehoidjat",
+    "add_bookmark": "Lisa järjehoidja",
+    "save_location_without_query": "Salvesta Q-Appi asukoht ilma päringuparameetriteta.",
+    "name": "Nimi",
+    "bookmark_name_placeholder": "Järjehoidja nimi",
+    "qortal_link": "Qortali link",
+    "qortal_link_placeholder": "qortal://APP/Nimi/tee",
+    "no_bookmarks": "Järjehoidjaid veel pole.",
+    "no_bookmarks_folder": "Selles kaustas pole järjehoidjaid.",
+    "bookmark_count_one": "{{count}} järjehoidja",
+    "bookmark_count_other": "{{count}} järjehoidjat",
+    "edit": "Muuda",
+    "move": "Teisalda",
+    "delete": "Kustuta",
+    "rename": "Nimeta ümber",
+    "remove": "Eemalda",
+    "create": "Loo",
+    "more": "Veel",
+    "delete_folder_title": "Kustuta kaust?",
+    "delete_folder_message": "Selles kaustas olevad järjehoidjad teisaldatakse ülemisele tasemele."
+  }
 }
diff --git a/src/i18n/locales/et/group.json b/src/i18n/locales/et/group.json
index 80160c06..37f6cda6 100644
--- a/src/i18n/locales/et/group.json
+++ b/src/i18n/locales/et/group.json
@@ -28,6 +28,280 @@
     "select_group": "vali rühm",
     "visit_q_mintership": "külasta Q-Vermimist"
   },
+  "dashboard": {
+    "qort_balance": "QORT saldo",
+    "node_status": "Sõlme olek",
+    "node_unavailable": "Sõlm pole saadaval",
+    "sync_percent": "{{percent}}% sünkroonitud",
+    "minter_level": "Vermija tase",
+    "peers": "Partnerid",
+    "qdn": "QDN",
+    "core": "Core",
+    "hub": "Hub",
+    "node": "Sõlm",
+    "using_node": "Kasutatav sõlm",
+    "change_node": "Muuda sõlme",
+    "node_type": "Sõlme tüüp",
+    "node_height": "Sõlme kõrgus",
+    "local_node": "Kohalik sõlm",
+    "public_node": "Avalik sõlm",
+    "custom_node": "Kohandatud sõlm",
+    "synchronizing": "Sünkroonimine",
+    "fully_operational": "Täielikult töökorras",
+    "not_operational": "Ei tööta",
+    "attention_needed": "Vajab tähelepanu",
+    "apply": "Taotle",
+    "info_panel_status": "olek",
+    "info_panel_node_comment": "// node_info",
+    "minter_pin_save_progress_default": "Salvesta tasemeriiba vaikvaaten",
+    "minter_pin_save_dots_default": "Salvesta mintimise täpid vaikvaaten",
+    "node_switch_error": "Sõlme ei saanud praegu vahetada.",
+    "node_menu_local": "Kohalik sõlm",
+    "node_menu_public": "Avalik sõlm",
+    "qortino_runtime_title": "QORTINO kaardiümbris jooksis ootamatult kokku.",
+    "qortino_runtime_body": "Ülejäänud armatuurlaud on ikka ohutu. Värskenda Hubi ning kui see kordub, anna sellest tiimile teada.",
+    "no_custom_nodes_saved": "Kohandatud sõlmi pole salvestatud",
+    "wallet_activity": "Rahakoti tegevus",
+    "send": "Saada",
+    "receive": "Võta vastu",
+    "buy": "Osta",
+    "recent_transaction": "Viimane tehing",
+    "loading_wallet_activity": "Rahakoti tegevust laaditakse...",
+    "sent_to": "saadetud: ",
+    "received_from": "saadud: ",
+    "no_wallet_activity": "Uut rahakoti tegevust pole.",
+      "wallet_activity_window": "Viimane tehing viimase 7 päeva jooksul",
+      "wallet_activity_unknown_address": "Tundmatu aadress",
+      "wallet_activity_relative_just_now": "Äsja",
+      "wallet_activity_relative_minutes_ago_one": "{{count}} minut tagasi",
+      "wallet_activity_relative_minutes_ago_other": "{{count}} minutit tagasi",
+      "wallet_activity_relative_hours_ago_one": "{{count}} tund tagasi",
+      "wallet_activity_relative_hours_ago_other": "{{count}} tundi tagasi",
+      "wallet_activity_relative_days_ago_one": "{{count}} päev tagasi",
+      "wallet_activity_relative_days_ago_other": "{{count}} päeva tagasi",
+      "open_in_q_chat": "Ava Q-Chatis",
+    "open_in_q_apps": "Ava Q-Appsis",
+    "quitter_feed": "Quitter voog",
+    "quitter_show_more": "Näita rohkem",
+    "quitter_show_less": "Näita vähem",
+    "quitter_video_attachment": "Videomanus",
+    "quitter_video_preview_hub": "Eelvaade on Hubis ainult loetav",
+    "featured_q_apps": "Esiletõstetud Q-Apps",
+    "featured_q_apps_subtitle": "Käivita usaldusväärseid kogukonnaappe otse armatuurlaualt.",
+    "explore_all_q_apps": "Sirvi kõiki Q-Apps",
+    "reduce_motion": "Vähenda liikumist",
+    "account_overview": "Konto ülevaade",
+    "qortal_name_address": "QORTALI NIMI JA AADRESS",
+    "profile": "Profiil",
+    "profile_settings": "Profiili seaded",
+    "profile_settings_description": "Vaata oma nime ja konto identiteeti.",
+    "security": "Turvalisus",
+    "security_settings": "Turvaseaded",
+    "security_settings_description": "Näita ja kopeeri privaatvõtit ainult siis, kui see on tõesti vajalik.",
+    "developer": "Arendaja",
+    "developer_settings": "Arendaja seaded",
+    "developer_settings_description": "Luba arendustööriistad ja diagnostika täpsemaks testimiseks.",
+    "system": "Süsteem",
+    "system_settings": "Süsteemi seaded",
+    "system_settings_description": "Halda teavitusi, liikumist, kinnitatud appe ja blokeeritud kontosid.",
+    "current_name": "Praegune nimi",
+    "no_name_registered": "Nimi pole registreeritud",
+    "wallet_address": "Rahakoti aadress",
+    "unavailable": "Pole saadaval",
+    "no_active_wallet": "Aktiivset rahakotti pole",
+    "names_qapp_actions_hint": "Ostmise, müügi ja nimevahetuse toimingud tee Names Q-Appis.",
+    "open_the": "Ava",
+    "names": "Names",
+    "names_qapp_hint_suffix": "Q-App nimede ostmiseks, müümiseks või registreeritud nime muutmiseks.",
+    "private_key_warning": "Ära jaga kunagi oma privaatvõtit. Kellel see on, võib kontrollida seda rahakotti ja selle vahendeid.",
+    "wallet_password": "Rahakoti parool",
+    "wallet_password_placeholder": "Sisesta rahakoti parool",
+    "decrypt": "Dekrüpteeri",
+    "copy_key": "Kopeeri võti",
+    "private_key": "Privaatvõti",
+    "private_key_hint": "Dekrüpteeri privaatvõti ainult siis, kui pead rahakotti taastama või teise kohta viima.",
+    "notifications_update_error": "Rakenduste teavitusi ei saanud praegu uuendada.",
+    "wallet_unavailable_error": "Rahakoti andmed pole praegu saadaval.",
+    "wallet_password_required": "Privaatvõtme dekrüpteerimiseks sisesta rahakoti parool.",
+    "wallet_decrypt_error_with_message": "Rahakotti ei saanud dekrüpteerida: {{message}}",
+    "wallet_decrypt_error": "Selle parooliga ei saanud rahakotti dekrüpteerida.",
+    "private_key_copied": "Privaatvõti kopeeriti lõikepuhvrisse.",
+    "enable_dev_mode": "Luba arendusrežiim",
+    "enable_dev_mode_desc": "Ava kohalikud arenduspinnad, diagnostika ja testimisvahendid kogu Hubis.",
+    "dev_mode_tip": "Vihje: kui see on sees, ilmub külgribale uus arendustööriista ikoon. Võib-olla pead kursori vasaku serva peale viima, et see nähtavaks saada.",
+    "reduce_app_notifications": "Vähenda rakenduste teavitusi",
+    "reduce_app_notifications_desc": "Lülita sisse, et vaigistada töölaua tõuketeavitused. Jäta välja tavapäraste Hubi hoiatuste jaoks.",
+    "reduce_ui_animations": "Vähenda liidese animatsioone",
+    "reduce_ui_animations_desc": "Lülita sisse, et vähendada liikumist kogu Hubis. Jäta välja tavapärase animeeritud liidese jaoks.",
+    "pinned_qapp_backup": "Kinnitatud Q-Appide varundus",
+    "pinned_qapp_backup_desc": "Salvesta kinnitatud Q-Appid krüpteeritud QDN seadetesse, et sama paigutus järgiks sind seadmete vahel.",
+    "manage_backup": "Halda varundust",
+    "block_list": "Blokeeringute nimekiri",
+    "block_list_desc": "Vaata blokeeritud nimesid ja aadresse, seejärel eemalda blokeeringud, kui oled valmis.",
+    "blocked_count": "{{count}} blokeeritud",
+    "addresses": "Aadressid",
+    "unblock": "Eemalda blokeering",
+    "no_blocked_accounts": "Blokeeritud kontosid pole veel.",
+    "show_receive_qr": "Näita vastuvõtu QR-koodi",
+    "copy_address": "Kopeeri aadress",
+    "privacy_mode_tooltip": "Privaatsusrežiim: hägustab tundlikku teavet ekraanijagamise jaoks",
+    "toggle_privacy_mode": "Lülita privaatsusrežiimi",
+    "send_qort": "Saada QORT",
+    "send_qort_subtitle": "Saada QORT mis tahes registreeritud nimele või aadressile.",
+    "close_send_qort_modal": "Sulge QORTi saatmise aken",
+    "receive_qort": "Võta QORT vastu",
+    "receive_qort_subtitle": "Skanni, et võtta QORT vastu",
+    "close_receive_qort_modal": "Sulge QORTi vastuvõtmise aken",
+    "download_qr": "Laadi QR alla",
+    "qortal_address_or_name": "Qortal aadress või registreeritud nimi",
+    "blocked": "Blokeeritud",
+    "account_status_online": "Võrgus",
+    "account_status_busy": "Hõivatud",
+    "account_status_invisible": "Nähtamatu",
+    "account_settings_tooltip": "Konto seaded",
+    "open_account_settings_aria": "Ava konto seaded",
+    "name_change_confirm": "Muudame registreeritud nime {{oldName}} → {{newName}}?",
+    "name_change_success": "Nime muutmise päring edukalt esitatud.",
+    "name_change_register_first": "Enne muutmist registreeri nimi.",
+    "name_change_enter_new_name": "Sisesta uus nimi, mida soovid kasutada.",
+    "name_change_different_from_current": "Vali praegusest erinev nimi.",
+    "name_change_details_still_loading": "Praeguse nime andmeid veel laaditakse. Proovi hetk hiljem uuesti.",
+    "name_change_choose_available": "Enne jätkamist vali saadaolev nimi.",
+    "name_change_wallet_password_required": "Enne nime muutmist sisesta rahakoti parool.",
+    "name_change_wallet_password_failed": "Rahakoti parooli ei õnnestunud kontrollida.",
+    "current_name_details_load_failed": "Praeguse nime andmeid ei õnnestunud laadida.",
+    "name_change_unknown_error": "Nime muutmisel läks midagi valesti.",
+    "name_availability_available": "See nimi on vaba.",
+    "name_availability_checking": "Kontrollin nime kättesaadavust...",
+    "name_availability_same_as_current": "Vali nimi, mis erineb juba kasutatavast.",
+    "name_availability_taken": "See nimi on juba võetud."
+  },
+  "groups_widget": {
+    "accept": "Nõustu",
+    "approve": "Kinnita",
+    "cancel": "Tühista",
+    "characters_count": "{{current}}/{{max}}",
+    "confirm_approve_request": "Kas kinnitada see taotlus ja kutsuda nad gruppi?",
+    "confirm_join_group": "Kas liituda selle grupiga kohe?",
+    "confirm_join_promoted_closed": "Kas saata liitumistaotlus sellele reklaamitud grupile?",
+    "confirm_join_promoted_open": "Kas liituda selle reklaamitud grupiga kohe?",
+    "connecting": "Ühendamine...",
+    "discover_groups": "Avasta gruppe",
+    "error_accept_invite": "Seda kutset praegu ei saanud vastu võtta.",
+    "error_approve_request": "Seda taotlust praegu ei saanud kinnitada.",
+    "error_load_invites": "Grupikutseid praegu ei laaditud.",
+    "error_load_promotions": "Reklaamitud gruppe praegu ei laaditud.",
+    "error_load_requests": "Liitumistaotlusi praegu ei laaditud.",
+    "error_promoted": "Selle reklaamitud grupiga praegu ei saanud toimingut teha.",
+    "error_publish_promotion": "Seda reklaami praegu ei saanud avaldada.",
+    "fresh_promotion_snippet": "Sellel grupil on värske reklaamuuendus.",
+    "from_label": "saatja",
+    "group_admin_only": "Ainult grupi administraatorid",
+    "group_general": "Üldine",
+    "group_named": "Grupp {{id}}",
+    "ignore": "Ignoreeri",
+    "invitation_ready": "Kutse ülevaatamiseks valmis",
+    "invite_hidden": "Kutse on selle vidina puhul praegu peidetud.",
+    "invites_empty_description": "Värsked grupikutset tulevad siia, kui need saabuvad.",
+    "invites_empty_title": "Ootel kutseid pole",
+    "joined_group": "Liitusid grupiga {{name}}.",
+    "joined_promoted": "Liitusid grupiga {{name}}.",
+    "join_group": "Liitu grupiga",
+    "join_request_sent": "Liitumistaotlus grupile {{name}} saadetud.",
+    "loading_invites": "Kutsete laadimine",
+    "loading_notifications": "Teavituste laadimine",
+    "loading_promoted": "Reklaamitud gruppide laadimine",
+    "loading_requests": "Taotluste laadimine",
+    "members_count": "{{count}} liiget",
+    "new_encrypted_message": "Uus krüpteeritud sõnum",
+    "notifications_empty_message": "Liitu Q-Chati kogukondadega, et see voog täituks grupisõnumite, mainimiste ja tegevusega.",
+    "notifications_empty_title": "Alusta Q-Chati gruppidega",
+    "open": "Ava",
+    "open_conversation": "Ava vestlus",
+    "private_group": "Privaatne grupp",
+    "private_group_invite": "Kutse privaatsesse gruppi",
+    "processing": "Töötlemine...",
+    "promoted_by": "Reklaamija {{name}}",
+    "promoted_empty_message": "Reklaamitud grupid ilmuvad siia uute esiletõstmiste saabumisel.",
+    "promoted_empty_title": "Reklaamitud gruppe pole",
+    "promote_dialog_fee": " Avaldamistasu: {{fee}} QORT.",
+    "promote_dialog_intro": "Jaga lühike esiletõstetud uuendus ühe oma administraatoritaseme grupi jaoks.",
+    "promote_group": "Reklaami gruppi",
+    "promote_page_title": "Reklaami ühte oma grupist",
+    "promotion_published": "Grupireklaam avaldatud.",
+    "promotion_placeholder": "Kirjuta lühike reklaam selle grupi kohta.",
+    "public_group": "Avalik grupp",
+    "refresh": "Värskenda",
+    "reject": "Lükka tagasi",
+    "request_access": "Taotle juurdepääsu",
+    "request_approved": "{{requester}} kinnitati grupis {{group}}.",
+    "request_removed": "Taotlus eemaldatud sellest vidinast praegu.",
+    "request_sent": "Taotlus saadetud",
+    "requests_empty_description": "Hallatavate gruppide liitumistaotlused ilmuvad siia.",
+    "requests_empty_title": "Ootel taotlusi pole",
+    "select_admin_group": "Vali grupp, mille administraator sa oled",
+    "tab_invites": "Kutsed",
+    "tab_notifications": "Teavitused",
+    "tab_promoted": "Reklaamitud",
+    "tab_requests": "Taotlused",
+    "unknown": "Tundmatu",
+    "view_conversation": "Vaata vestlust",
+    "wants_to_join": "Soovib sellesse gruppi liituda.",
+    "you": "Sina",
+    "publish": "Avalda"
+  },
+  "subscription": {
+    "subscriptions": "tellimused",
+    "tooltip_actions_needed_one": "{{title}} – {{count}} toiming vajalik",
+    "tooltip_actions_needed_other": "{{title}} – {{count}} toimingut vajalik",
+    "relative_soon": "peagi",
+    "relative_in_minutes_one": "{{count}} minuti pärast",
+    "relative_in_minutes_other": "{{count}} minuti pärast",
+    "relative_in_hours_one": "{{count}} tunni pärast",
+    "relative_in_hours_other": "{{count}} tunni pärast",
+    "relative_in_days_one": "{{count}} päeva pärast",
+    "relative_in_days_other": "{{count}} päeva pärast",
+    "relative_in_months_one": "{{count}} kuu pärast",
+    "relative_in_months_other": "{{count}} kuu pärast",
+    "row_fallback_title": "tellimus",
+    "by_creator": "autor: {{name}}",
+    "creator_fallback": "Qortali looja",
+    "price_line": "{{price}} QORT / {{interval}}",
+    "expires_suffix": " – aegub {{time}}",
+    "status_due": "tähtaeg",
+    "status_active": "aktiivne",
+    "status_owner": "omanik",
+    "managed_fallback": "hallatav tellimus",
+    "members_one": "{{count}} liige",
+    "members_other": "{{count}} liiget",
+    "join_requests_suffix_one": " – {{count}} liitumistaotlus",
+    "join_requests_suffix_other": " – {{count}} liitumistaotlust",
+    "re_encryption_suffix": " – vajalik uus krüpteerimine",
+    "actions_badge_one": "{{count}} toiming",
+    "actions_badge_other": "{{count}} toimingut",
+    "loading": "tellimuste laadimine",
+    "section_needs_action": "vajab toimingut",
+    "section_active": "aktiivsed",
+    "open_subscriptions": "ava tellimused",
+    "empty_title": "Avasta tellimuspõhiseid Q-Appe",
+    "empty_body": "Telli loojaid ja kogukondi Q-Appidest, mis toetavad tellimusi, näiteks SubWire.",
+    "open_subwire": "ava SubWire",
+    "tab_subscriptions": "Tellimused",
+    "tab_subwire": "SubWire"
+  },
+  "group_invites": {
+    "empty_title": "kutseid pole",
+    "empty_secondary_1": "sul pole ootel kutseid",
+    "empty_secondary_2": "praegu.",
+    "empty_tertiary_no_groups": "sa ei kuulu veel ühegi grupiga.",
+    "cta_find_groups": "leia gruppe"
+  },
+  "group_join_requests": {
+    "empty_title": "ühtegi liitumistaotlust pole",
+    "empty_secondary_1": "sul pole ootel taotlusi",
+    "empty_secondary_2": "praegu.",
+    "empty_tertiary_no_admin_groups": "sa ei halda veel ühtki gruppi."
+  },
   "advanced_options": "lisavalikud",
   "block_delay": {
     "minimum": "minimaalne ploki viivitus",
@@ -53,6 +327,7 @@
     "dm": "DM",
     "name": "rühma nimi",
     "no_groups_found": "rühmad ei leitud",
+    "owner": "omanik",
     "open": "avatud (avalik)",
     "private": "privaatrühm",
     "promotions": "Uute Grupide Soovitused",
@@ -72,6 +347,8 @@
     "generic": {
       "avatar_publish_fee": "avatari avaldamine nõuab tasu {{ fee }}",
       "avatar_registered_name": "avatari seadistamiseks on vajalik registreeritud nimi",
+      "add_new_key_option": "Lisa uus võti",
+      "add_new_key_sparingly": "Uusi võtit tasub lisada säästlikult, et grupi võtmete maht ei kasvaks liiga suureks.",
       "admin_only": "kuvatakse ainult need rühmad, kus sina oled administraator",
       "already_in_group": "sa oled juba selles rühmas!",
       "block_delay_minimum": "minimaalne ploki viivitus rühma tehingute kinnitamiseks",
@@ -105,6 +382,7 @@
       "node_minting_key": "sul on hetkel selles sõlmes alloelvad aktiivsed mintimise kontod",
       "no_announcement": "teadaandeid ei ole",
       "no_display": "midagi ei ole kuvamiseks",
+      "no_description": "kirjeldus puudub",
       "no_selection": "rühma ei ole valitud",
       "not_part_group": "sa ei kuulu krüpteeritud liikmete rühma. Oota, kuni administraator võtmed uuesti krüpteerib.",
       "only_encrypted": "kuvatakse ainult krüpteerimata sõnumid.",
@@ -170,5 +448,11 @@
       "user_joined": "kasutaja liitumine õnnestus!"
     }
   },
+  "context_menu": {
+    "mark_as_read": "Märgi loetuks",
+    "mute_push_notifications": "Summuta tõuketeavitused",
+    "unmute_push_notifications": "Lõpeta tõuketeavituste summutamine",
+    "mark_all_read": "Märgi kõik loetuks"
+  },
   "thread_posts": "uued teemapostitused"
 }
diff --git a/src/i18n/locales/et/node.json b/src/i18n/locales/et/node.json
index 506ec36f..e1470f41 100644
--- a/src/i18n/locales/et/node.json
+++ b/src/i18n/locales/et/node.json
@@ -40,7 +40,8 @@
     "invalidKey": "sobimatu API-võti",
     "failed_stop": "Core'i peatamine ebaõnnestus",
     "failed_bootstrap": "bootstrap ebaõnnestus",
-    "failed_delete": "andmebaasi kustutamine ebaõnnestus"
+    "failed_delete": "andmebaasi kustutamine ebaõnnestus",
+    "failed_bootstrap_or_clear": "bootstrap, ahelaandmete tühjendamine või Core uuesti käivitamine ebaõnnestus"
   },
   "status": {
     "complete": "valmis",
@@ -81,7 +82,12 @@
   "confirmations": {
     "stop": "kas oled kindel, et soovid Core peatada?",
     "bootstrap": "kas oled kindel, et soovid bootstrapi käivitada?",
-    "delete": "kas oled kindel, et soovid andmebaasi kustutada?"
+    "delete": "kas oled kindel, et soovid andmebaasi kustutada?",
+    "bootstrapOrClearChain": "Teostab bootstrapi hetktõmmisest, kui Core töötab kohapeal. Kui see pole võimalik või bootstrap nurjub, võidakse kustutada kohalik ahela andmebaas ja käivitada Core uuesti — rahakotifailid jäävad puutumata. Jätkada?"
+  },
+  "bootstrapChainHelp": {
+    "title": "Ahela bootstrap",
+    "body": "Üks tööriist: bootstrap hetktõmmisest kui Core on kättesaadav; või kohaliku keti andmebaasi puhastamine ja Core uuesti käivitamine kui bootstrap pole võimalik. Rahakott hoitakse eraldi."
   },
   "stop": "peata Core",
   "bootstrap": "bootstrap",
@@ -89,6 +95,53 @@
   "more": "rohkem valikuid",
   "less": "vähem valikuid",
   "enableAuthWhenSyncing": "luba autentimine sünkroonimisel",
+  "coreSetupDialog": {
+    "title": "Qortal Core seadistamine",
+    "introTitle": "Käivita oma sõlm kohapeal.",
+    "introSubtitle": "Core käivitamise ja sünkroonimise ajal võid kasutada avalikku sõlme.",
+    "publicNodeUnavailable": "Avalikud sõlmed pole praegu saadaval. Hoia see ekraan avatud, kuni kohalik Core käivitub ja sünkitub.",
+    "steps": {
+      "downloadDone": "Core alla laaditud",
+      "downloadActive": "Core allalaadimine",
+      "downloadIdle": "Laadi Core alla",
+      "runningDone": "Core töötab",
+      "runningActive": "Core käivitamine",
+      "runningIdle": "Käivita Core"
+    },
+    "readyToDownload": "Valmis allalaadimiseks",
+    "readyToStart": "Valmis käivitamiseks",
+    "syncing": "Sünkroonimine",
+    "helpers": {
+      "downloadDone": "Core failid on installitud ja valmis.",
+      "downloadActive": "Qortal Core allalaadimine ja ettevalmistus.",
+      "downloadIdle": "Laadi Qortal Core alla, et oma sõlme käitada.",
+      "runningDoneSyncing": "Core töötab ja sünkroonib plokiahela andmeid.",
+      "runningDone": "Core töötab kohapeal.",
+      "runningWaiting": "Core käivitub ja hakkab taustal sünkroonima.",
+      "runningBlocked": "Saadaval pärast Core allalaadimist."
+    },
+    "nextStepPill": "Järgmine samm",
+    "locationTitle": "Core asukoht",
+    "locationCustom": "Qortal Core käivitatakse sellest kaustast.",
+    "locationDefault": "Qortal Core kasutab selle süsteemi vaikimaskausta.",
+    "locationPathDefault": "Vaikimisi Qortal Core asukoht",
+    "change": "Muuda",
+    "choose": "Vali",
+    "clear": "Tühjenda",
+    "advancedTitle": "Täpsem",
+    "advancedSubtitle": "Core täiendavad tööriistad ja valikud.",
+    "maintenanceUnavailable": "Core hooldustööriistad pole saadaval Core käivitamise või sünkroonimise ajal.",
+    "stopCoreTitle": "Peata Core",
+    "stopCoreBody": "Peatab kohaliku Core protsessi.",
+    "stopButton": "Peata",
+    "cancel": "Tühista",
+    "actionDownload": "Laadi Core alla",
+    "actionStart": "Käivita Core",
+    "actionDone": "Valmis",
+    "confirmTitle": "Kinnita toiming",
+    "folderCopied": "Core kaust kopeeritud",
+    "progressAriaLabel": "Edenemine: {{label}}"
+  },
   "NotFullyStarted": {
     "titleNotReady": "Core pole täielikult käivitatud",
     "descNotReady": "Qortal Core pole veel täielikult käivitatud. Palun oodake.",
diff --git a/src/i18n/locales/et/question.json b/src/i18n/locales/et/question.json
index eca219b0..3e6efd11 100644
--- a/src/i18n/locales/et/question.json
+++ b/src/i18n/locales/et/question.json
@@ -152,8 +152,12 @@
     "invite": "kas sa annad sellele rakendusele loa kutsuda {{ invitee }}?",
     "kick": "kas sa annad sellele rakendusele loa visata {{ partecipant }} rühmast välja?",
     "leave_group": "kas sa annad sellele rakendusele loa lahkuda järgmisest rühmast?",
-    "list_hosted_data": "kas sa annad sellele rakendusele loa kätte saada nimekirja sinu majutatud andmetest?",
-    "order_detail": "{{ qort_amount }} QORT hinnaga {{ foreign_amount }} {{ ticker }}",
+      "list_hosted_data": "kas sa annad sellele rakendusele loa kätte saada nimekirja sinu majutatud andmetest?",
+      "notification": "kas lubad sellel rakendusel saata sulle Hubi teavitusi?",
+      "notification_allow": "luba",
+      "notification_dont_allow": "ära luba",
+      "notification_title": "{{ appName }} teavitused",
+      "order_detail": "{{ qort_amount }} QORT hinnaga {{ foreign_amount }} {{ ticker }}",
     "pay_publish": "kas sa annad sellele rakendusele loa teha järgmised maksed ja avaldused?",
     "perform_admin_action_with_value": "väärtusega: {{ value }}",
     "perform_admin_action": "kas sa annad sellele rakendusele loa sooritada administraatori toiming: {{ type }}",
diff --git a/src/i18n/locales/et/tutorial.json b/src/i18n/locales/et/tutorial.json
index 555f5f16..7859fa1a 100644
--- a/src/i18n/locales/et/tutorial.json
+++ b/src/i18n/locales/et/tutorial.json
@@ -33,6 +33,7 @@
     "get_six_qorts_way3_action": "Ava Q-Trade",
     "register_name": "Registreeri oma nimi",
     "confirming_transaction": "Tehingut kinnitatakse",
+    "confirming": "Kinnitamine",
     "load_avatar": "Laadi oma avatar",
     "explore_apps": "Avasta esiletõstetud rakendusi",
     "done": "Valmis",
@@ -53,6 +54,17 @@
     "devnet_testing_desc": "Testi oma Q-App'e DevNet-testimise keskkonnas",
     "open_app": "Ava",
     "address_copied": "Aadress kopeeritud lõikelauale",
-    "group_activity": "Grupi aktiivsus"
+    "group_activity": "Grupi aktiivsus",
+    "get_qorts_workspace_hint": "Avage oma esimesed 6 QORT-i, et lubada ülejäänud seadistus.",
+    "register_name_workspace_hint": "Registreeritud nimi muudab selle konto äratuntavaks identiteediks.",
+    "load_avatar_workspace_hint": "Andke armatuurlauale nägu, et ruum tunduks teie oma.",
+    "onboarding_transition_hard_part_done": "Hea töö. Kõige raskem osa on tehtud.",
+    "onboarding_transition_one_more": "Suurepärane. Veel üks samm jäänud.",
+    "onboarding_press_next_when_ready": "Hea töö. Kõige raskem osa on tehtud. Vajutage järgmist, kui olete valmis.",
+    "register_name_pending_hint": "Nime salvestamine ahelas võtab hetk.",
+    "persistent_guide_get_qorts": "Alustame 6 QORT-iga. Valige ülemalt mõni võimalus.",
+    "persistent_guide_register_name": "Järgmisena registreerige oma nimi.",
+    "persistent_guide_load_avatar": "Viimaks lisage avatar.",
+    "post_onboarding_workspace_ready": "Kõik valmis. Tööjaama saate üles ehitada ülal."
   }
 }
diff --git a/src/i18n/locales/fi/auth.json b/src/i18n/locales/fi/auth.json
index b70e37b7..23e659de 100644
--- a/src/i18n/locales/fi/auth.json
+++ b/src/i18n/locales/fi/auth.json
@@ -74,8 +74,11 @@
       "set_apikey": "API-avaimen asettaminen epäonnistui:"
     },
     "generic": {
+      "block_list_intro": "Lisää Qortal-nimi tai -osoite estääksesi. Osoitteet vaikuttavat tapahtumiin; nimen esto piilottaa tiedot koko Hubissa.",
       "blocked_addresses": "estetyt osoitteet – estää tapahtumien käsittelyn",
+      "blocked_addresses_hint": "Estää näistä osoitteista tulevaan tapahtumien käsittelyyn liittyvät toiminnot.",
       "blocked_names": "estetyt nimet QDN:ssä",
+      "blocked_names_hint": "Nimet on estetty QDN-/Hub-datalta ja sosiaalisista ominaisuuksista.",
       "blocking": "estetään {{ name }}",
       "choose_block": "valitse 'estä tapahtumat' tai 'kaikki' estääksesi chat-viestit",
       "congrats_setup": "onnittelut, kaikki on valmista!",
@@ -88,6 +91,7 @@
       "locating_encryption_keys": "paikannetaan salausavaimia",
       "insert_name_address": "Kirjoita nimi tai osoite aloittaaksesi yksityisen keskustelun.",
       "name_address": "nimi tai osoite",
+      "no_blocked_users": "Ketään ei ole vielä estetty. Lisää yllä osoite tai nimi piilottaaksesi heidät.",
       "no_account": "ei tallennettuja tilejä",
       "no_minimum_length": "vähimmäispituutta ei ole määritetty",
       "no_secret_key_published": "salaista avainta ei ole vielä julkaistu",
@@ -143,6 +147,159 @@
   },
   "welcome": "tervetuloa",
   "store_account": "tallenna tili Hubiin",
+  "create_wallet": {
+    "error_enter_password": "Syötä lompakon salasana.",
+    "error_confirm_password": "Vahvista lompakon salasana.",
+    "error_passwords_mismatch": "Salasanat eivät täsmää.",
+    "success_wallet_saved": "Lompakko tallennettu",
+    "success_account_created": "Tili luotu",
+    "success_ready_hub": "Voit nyt siirtyä Hubiin.",
+    "success_backup_before_hub": "Varmuuskopioi salattu lompakkosi ennen Hubiin siirtymistä.",
+    "enter_hub": "Siirry Hubiin",
+    "download_another_copy": "Lataa toinen kopio",
+    "backup_wallet": "Varmuuskopioi lompakko",
+    "backup_encrypted_notice": "Tämä varmuuskopio on salattu lompakon salasanallasi.",
+    "seed_title": "Palautuslausekkeesi",
+    "seed_subtitle": "Voit palauttaa tilisi. Siemenlauseen tallennus on valinnaista. Seuraavaksi tiedosto salattu lompakovarmuuskopio — suositeltu palautustapa.",
+    "reveal": "Näytä",
+    "copied": "Kopioitu",
+    "copy": "Kopioi",
+    "export": "Vie",
+    "seed_warning": "Älä jaa tätä koskaan. Kuka tahansa sillä voi käyttää tiliäsi. Päivittäiskäyttöön: salattu lompakovarmuuskopio luonnin jälkeen.",
+    "create_account": "Luo tili",
+    "password_title": "Luo salasana",
+    "password_subtitle": "Suojaa tämän laitteesi tili.",
+    "wallet_password": "Lompakon salasana",
+    "confirm_password": "Vahvista salasana",
+    "save_account_in_hub": "Tallenna tili Hubiin",
+    "continue": "Jatka"
+  },
+  "import_account": {
+    "title": "Tuo tili",
+    "subtitle": "Valitse, miten haluat palauttaa tilisi."
+  },
+  "backup_wallet_modal": {
+    "subtitle": "Lataa paikallinen lompakkotiedosto, jotta voit palauttaa tämän tilin myöhemmin.",
+    "info_note": "Tämä vie lompakkotiedoston laitteesi paikallisesti. Säilytä tiedosto turvallisesti.",
+    "current_password": "Nykyinen salasana",
+    "keep_password_in_export": "Säilytä nykyinen salasana vietävässä lompakkotiedostossa",
+    "new_password_for_backup": "Uusi salasana tälle varmuuskopiolle",
+    "download_wallet_file": "Lataa lompakkotiedosto",
+    "error_no_active_wallet": "Aktiivista lompakkoa ei löytynyt varmuuskopiota varten.",
+    "error_unable_to_create_backup": "Lompakon varmuuskopiota ei voitu luoda."
+  },
+  "wallet_errors": {
+    "unable_to_unlock_default": "tätä lompakkoa ei voi purkaa.",
+    "unable_to_save_backup": "lompakon varmuuskopiota ei voitu tallentaa.",
+    "unable_to_prepare_backup": "lompakon varmuuskopiota ei voitu valmistaa.",
+    "account_not_found": "tallennettua tiliä ei löytynyt. valitse toinen tili tai palauta lompakko varmuuskopiosta.",
+    "account_incomplete": "tallennettu tili näyttää epätäydelliseltä tai vialliselta. valitse toinen tili tai palauta lompakko varmuuskopiosta.",
+    "invalid_security_data": "tallennuksessa oleva tili sisältää virheellisiä lompakon suojaustietoja. valitse toinen tili tai palauta lompakko varmuuskopiosta.",
+    "missing_encrypted_seed": "tallenteesta puuttuu salattu siemen (lukittu lompakkodata salauksen purkuun). valitse toinen tili tai palauta lompakko varmuuskopiosta.",
+    "missing_field": "tallenteesta puuttuu {{field}}. valitse toinen tili tai palauta lompakko varmuuskopiosta.",
+    "field": {
+      "address0": "lompakon osoite",
+      "encryptedSeed": "salattu siemen (lukittu lompakkodata avaamiseksi)",
+      "iv": "lompakon salaus tiedot",
+      "kdfThreads": "lompakon salasana-asetukset",
+      "mac": "lompakon eheystarkistus",
+      "salt": "lompakon salasanasuojaukseen liittyvät tiedot",
+      "version": "lompakon versio"
+    }
+  },
+  "connection_mode": {
+    "title": "Yhteystapa",
+    "subtitle": "Valitse, miten Qortal yhdistää verkkoon.",
+    "local_title": "Paikallinen solmu",
+    "recommended": "Suositeltu",
+    "local_full_decentralized": "Täysi hajautettu pääsy",
+    "local_faster": "Nopeampi suorituskyky",
+    "local_data_local": "Tietosi pysyvät paikallisesti",
+    "public_title": "Julkinen solmu",
+    "public_quick": "Nopea käyttöönotto",
+    "public_limited_decentralization": "Rajoitettu hajautuminen",
+    "public_shared_infrastructure": "Jaettu infrastruktuur",
+    "status_running": "Core käynnissä",
+    "status_missing": "Corea ei havaittu",
+    "status_checking": "Tarkistetaan paikallista solmua",
+    "section_custom_nodes": "Omat solmut",
+    "add_custom_node": "Lisää oma solmu",
+    "empty_custom_nodes": "Ei tallennettuja omia solmuja",
+    "manual_setup_link": "Solmun manuaalinen määritys",
+    "save_settings": "Tallenna asetukset",
+    "manual_edit_title": "Muokkaa omaa solmua",
+    "manual_add_title": "Solmun manuaalinen määritys",
+    "field_name": "Nimi",
+    "placeholder_node_name": "Oma Qortal-solmuni",
+    "field_node_url": "Solmun URL",
+    "placeholder_node_url": "https://127.0.0.1:12391",
+    "field_api_key_optional": "API-avain (valinnainen)",
+    "placeholder_api_key": "Syötä API-avain",
+    "reload_after_new_node_title": "Uudelleenlataus vaaditaan",
+    "reload_after_new_node_message": "Olet lisännyt uuden solmun; sovellus on päivitettävä.",
+    "reload_after_new_node_button": "Lataa sovellus uudelleen"
+  },
+  "intro_features": {
+    "secure_title": "Turvallinen ja yksityinen",
+    "secure_text": "Avaimesi, tietosi, aina hallinnassasi.",
+    "fast_title": "Nopea käyttö",
+    "fast_text": "Avaa ja pääset heti Qortal-kokemukseesi.",
+    "decentralized_title": "Hajautettu",
+    "decentralized_text": "Yhdistä verkkoon omilla ehdoillasi.",
+    "built_title": "Sinua varten",
+    "built_text": "Yksi tili. Rajattomat mahdollisuudet."
+  },
+  "entry": {
+    "title": "Siirry Qortaliin",
+    "subtitle": "Kirjaudu sisään tai luo tili.",
+    "create_account": "Luo tili",
+    "import_account": "Tuo tili",
+    "no_accounts": "Tilejä ei löytynyt tästä laitteesta.",
+    "import_choice_backup_title": "Varmuuskopiotiedosto",
+    "import_choice_backup_description": "Tuo tallennettu Hub-varmuuskopio.",
+    "import_choice_authenticate_title": "Tunnistaudu nyt",
+    "import_choice_authenticate_description": "Käytä varmuuskopiota tallentamatta sitä.",
+    "import_choice_seed_title": "Siemenlause",
+    "import_choice_seed_description": "Palauta siemenlauseellasi.",
+    "import_backup_heading": "Tuo varmuuskopiotiedostosta",
+    "import_backup_drop_hint": "Pudota varmuuskopio tai valitse tiedosto napsauttamalla.",
+    "import_authenticate_heading": "Tunnistaudu varmuuskopiolla",
+    "import_authenticate_drop_hint": "Pudota varmuuskopio tai valitse tiedosto napsauttamalla. Sitä ei tallenneta tälle laitteelle.",
+    "import_seed_label": "Siemenlause",
+    "import_seed_placeholder": "Syötä siemenlause",
+    "import_wallet_password": "Lompakon salasana",
+    "importing_account": "Tuodaan tiliä...",
+    "seed_import_error": "Siemenlausetta ei voitu tuoda.",
+    "seed_import_duplicate": "Tämä tili on jo tallennettu tälle laitteelle.",
+    "seed_import_success": "Tili tuotu onnistuneesti.",
+    "import_backup_success_one": "{{count}} tili tuotu onnistuneesti.",
+    "import_backup_success_other": "{{count}} tiliä tuotu onnistuneesti.",
+    "import_backup_duplicate": "Nämä tilit on jo tallennettu tälle laitteelle.",
+    "import_backup_invalid": "Tämä varmuuskopiotiedosto ei sisällä kelvollista tiliä.",
+    "import_file_read_aborted": "Tiedoston lukeminen keskeytettiin",
+    "import_file_read_failed": "Tiedoston lukeminen epäonnistui",
+    "filter_accounts_aria": "Suodata tilejä osoitteen, pää-/ensisijaisen nimen tai muistiinpanon perusteella",
+    "filter_placeholder": "Osoite, pää-/ensisijainen nimi tai muistiinpano…",
+    "filter_no_results": "Ei hakua vastaavia tilejä.",
+    "filter_clear": "Tyhjennä haku",
+    "wallet_edit_name_label": "Nimi",
+    "wallet_edit_account_name_placeholder": "Tilin nimi",
+    "wallet_edit_note_label": "Huomautus",
+    "wallet_edit_note_placeholder": "Valinnainen huomautus",
+    "wallet_edit_remove": "Poista",
+    "wallet_edit_save": "Tallenna",
+    "wallet_edit_aria_label": "Muokkaa tilin nimeä ja huomautusta"
+  },
+  "authentication_form": {
+    "unnamed_account": "Nimetön tili",
+    "password_placeholder": "Syötä salasana",
+    "unlock": "Avaa lukitus",
+    "choose_another_account": "Valitse toinen tili",
+    "using_local_node": "Paikallinen solmu",
+    "using_public_node": "Julkinen solmu",
+    "using_custom_node": "Mukautettu solmu"
+  },
+
   "temp_auth": {
     "tooltip": "kirjaudu sisään tallentamatta tiliä Hubiin",
     "button": "tilapäinen kirjautuminen"
diff --git a/src/i18n/locales/fi/core.json b/src/i18n/locales/fi/core.json
index e4314ce4..b02b15b9 100644
--- a/src/i18n/locales/fi/core.json
+++ b/src/i18n/locales/fi/core.json
@@ -7,6 +7,7 @@
     "add_custom_framework": "lisää oma kehys",
     "add_reaction": "lisää reaktio",
     "add_theme": "lisää teema",
+    "back": "takaisin",
     "backup_account": "varmuuskopioi tili",
     "backup_wallet": "varmuuskopioi lompakko",
     "cancel": "peruuta",
@@ -132,9 +133,9 @@
   "core": {
     "block_height": "lohkon korkeus",
     "data_peers": "QDN (data) vertaiset",
-    "information": "ytimen tiedot",
+    "information": "Core-tiedot",
     "peers": "yhdistetyt vertaiset",
-    "version": "ytimen versio"
+    "version": "Core-versio"
   },
   "current_language": "nykyinen kieli: {{ language }}",
   "dev": "kehittäjä",
@@ -245,19 +246,37 @@
       "building": "rakennetaan",
       "confirmed": "vahvistettu",
       "created_by": "luonut {{ owner }}",
+      "disable_os_push": "Poista OS-push käytöstä",
+      "disable_os_push_desc": "Mykistä työpöytähälytykset tältä sovellukselta; toiminta Hubissa näkyy edelleen.",
       "downloading": "ladataan",
       "edited": "muokattu",
       "editing_message": "muokataan viestiä",
       "encrypted_not": "ei salattu",
       "encrypted": "salattu",
       "fetching_data": "haetaan sovelluksen tietoja",
+      "loading": "Ladataan...",
       "mentioned": "mainittu",
+      "minimal_qort_balance": "Vähintään {{ quantity }} QORTin saldo mahdollistaa chat-viestien lähettämisen lähes välittömästi.",
+      "name_available": "{{ name }} on vapaana",
+      "name_benefits": "Nimen edut",
+      "name_checking": "tarkistetaan, onko nimi jo varattu",
+      "name_registration": "Saldo on {{ balance }} QORT. Nimen rekisteröinti vaatii {{ fee }} QORT:n maksun",
+      "name_unavailable": "{{ name }} ei ole saatavilla",
+      "new_notification_from": "Uusi ilmoitus: {{ appName }}",
+      "new_payment_body": "Vastaanotit {{ amount }} QORTia.",
+      "new_payment_received": "Uusi maksu vastaanotettu",
+      "new_qmail": "Sinulle on uusi Q-Mail",
+      "app_notifications_hint": "Q-sovellusilmoitukset näkyvät täällä",
+      "no_app_notifications": "Ei sovellusilmoituksia vielä",
+      "no_notification_apps": "Yhdelläkään sovelluksella ei ole vielä ilmoituslupaa.",
       "no_data_image": "ei tietoja kuvalle",
       "no_description": "ei kuvausta",
       "no_messages": "ei viestejä",
       "no_payments": "ei maksuja",
       "no_results": "ei tuloksia",
       "opened": "avattu",
+      "publish_data": "julkaise dataa Qortaliin: sovelluksista videoihin asti. Täysin hajautettua!",
+      "secure_ownership": "varmista nimelläsi julkaistun sisällön omistus. Voit myös myydä nimesi ja sisältösi kolmannelle osapuolelle.",
       "publishing": "julkaistaan... odota hetki",
       "select_file": "valitse tiedosto",
       "sending": "lähetetään...",
@@ -265,7 +284,15 @@
       "unread_messages": "lukemattomat viestit alla",
       "updating": "päivitetään",
       "wait": "odota hetki",
-      "minimal_qort_balance": "Vähintään {{ quantity }} QORTin saldo mahdollistaa chat-viestien lähettämisen lähes välittömästi."
+      "notification_settings": "Ilmoitusasetukset",
+      "notification_settings_desc": "Valitse, mitkä sovellukset voivat lähettää työpöytäilmoituksia; toiminta Hubissa näkyy edelleen.",
+      "notifications": "Ilmoitukset",
+      "revoke_permission": "Peruuta",
+      "open_q_trade_subtitle": "Avaa Q-Trade ja osta QORT kauppaportaalista."
+    },
+    "success": {
+      "transfer": "siirto onnistui!",
+      "transfer_submitted": "siirtosi on lähetetty onnistuneesti."
     }
   },
   "minting": {
@@ -293,7 +320,38 @@
     },
     "status_title": "minttauksen tila",
     "tier_share_per_block": "tasoluokan osuus per lohko",
-    "total_minter_in_tier": "minttereitä yhteensä tasossa"
+    "total_minter_in_tier": "minttereitä yhteensä tasossa",
+    "panel": {
+      "dialog_subtitle": "Tarkista minttauksen tilanne, edistyminen ja seuraavat vaiheet.",
+      "state_syncing_title": "Synkronointi",
+      "state_syncing_body": "Noodi synkronoituu edelleen, joten minttaus ei voi alkaa vielä.",
+      "state_active_title": "Minttaus käynnissä",
+      "state_active_body_node_selection": "Tämä minter-avain on määritetty tälle noodille. Tilastot vastaavat valittua tiliä.",
+      "state_active_body_account": "Tämä tili on määritetty minttaamaan tällä noodilla.",
+      "state_inactive_title": "Ei minttausta",
+      "state_inactive_body_not_in_group": "Tämä tili ei ole vielä minter-ryhmässä.",
+      "state_inactive_body_multi_key": "Tällä noodilla on jo useita minttausavaimia määritettynä.",
+      "state_inactive_body_ready": "Tämä tili on valmis seuraavaan minttausvaiheeseen.",
+      "next_step_visit_q_mintership": "Avaa Q-Mintership -sovellus ja hae minteriksi.",
+      "next_step_already_active": "Minttaus on jo käynnissä tällä noodilla.",
+      "next_step_wait_sync": "Odota noodin synkronoinnin päättymistä ennen minttauksen alkua.",
+      "next_step_start_when_ready": "Aloita minttaus tällä noodilla kun olet valmis.",
+      "section_your_wallet": "Lompakkosi",
+      "section_minter_profile_stats": "Minter-profiili (tilastot)",
+      "section_account_identity": "Tilin tunniste",
+      "section_progress_next_level": "Edistyminen seuraavalle tasolle",
+      "section_next_step": "Seuraava askel",
+      "section_node_minting_accounts": "Noodin minttaustilit",
+      "select_account_for_stats_hint": "Valitse tili päivittääksesi edistymisen ja palkkiotilastot oikealla.",
+      "badge_viewing_stats": "Tilastoja katsotaan",
+      "blocks_to_level": "lohkoja tasolle {{level}}",
+      "minting_for_approx_days": "Minttausta: ~{{days}} päivää",
+      "reference_only": "(vain tiedoksi)",
+      "rewards_info_subtitle_own": "(omat palkkiotietosi)",
+      "rewards_info_subtitle_selected": "(valittu minter — tämän avaimen palkkiot)",
+      "network_details": "Verkon tiedot",
+      "loading_spinner_aria": "Ladataan"
+    }
   },
   "name": "nimi",
   "name_app": "nimi/sovellus",
@@ -317,10 +375,36 @@
   "publish": "julkaise",
   "q_apps": {
     "about": "tietoa tästä Q-sovelluksesta",
-    "q_mail": "q-mail",
-    "q_manager": "q-manager",
-    "q_sandbox": "q-sandbox",
-    "q_wallets": "q-lompakot"
+    "q_mail": "Q-Mail",
+    "q_manager": "Q-Manager",
+    "q_sandbox": "Q-Sandbox",
+    "q_wallets": "Q-Wallets",
+    "wallets_workspace": "lompakoiden työtila"
+  },
+  "account_lookup": {
+    "dialog_title": "Käyttäjähaku",
+    "empty_title": "Etsi tilejä",
+    "empty_subtitle": "Syötä nimi tai osoite",
+    "tooltip_send_disabled": "Tämä on oma profiilisi.",
+    "tooltip_block_public_node": "Käyttäjien esto ei ole käytettävissä julkisella solmulla.",
+    "tooltip_block_self": "Et voi estää itseäsi.",
+    "error_lookup_failed": "Tätä tiliä ei voitu hakea.",
+    "chip_level": "Taso {{level}}",
+    "chip_blocked": "Estetty",
+    "chip_no_registered_name": "Ei rekisteröityä nimeä",
+    "section_minting_progress": "Louhinnan eteneminen",
+    "minting_remaining": "{{remaining}} jäljellä",
+    "minting_blocks_to_level": "{{remaining}} tasolle {{level}}",
+    "minting_approx_one": "~{{count}} päivä louhintaa (n.)",
+    "minting_approx_other": "~{{count}} päivää louhintaa (n.)",
+    "minting_days_label": "Louhinta:",
+    "label_address": "Osoite",
+    "label_public_key": "Julkinen avain",
+    "payments_title": "Viimeisimmät maksut",
+    "pagination_rows_per_page": "Rivejä per sivu:",
+    "pagination_displayed_rows": "{{from}}–{{to}} / {{count}}",
+    "action_block": "estä",
+    "action_unblock": "poista esto"
   },
   "app_detail": {
     "about": "tietoja",
@@ -382,7 +466,10 @@
     "official_apps": "viralliset sovellukset"
   },
   "aria": {
-    "apps_library_tabs": "sovelluskirjaston navigointivälilehdet"
+    "apps_library_tabs": "sovelluskirjaston navigointivälilehdet",
+    "core_controls": "Core-hallinta",
+    "switch_theme_dark": "Vaihda tummaan tilaan",
+    "switch_theme_light": "Vaihda vaaleaan tilaan"
   },
   "supply": "tarjonta",
   "tags": "tunnisteet",
@@ -429,6 +516,157 @@
     "wallet": "lompakko",
     "wallet_other": "lompakot"
   },
+  "widget_container": {
+    "empty_message": "Ei juuri nyt näytettävää.",
+    "empty_title": "Ei merkintöjä vielä",
+    "error_title": "Tätä widgettiä ei voitu ladata",
+    "loading": "Ladataan",
+    "loading_message": "Haetaan uusimpia julkisia tietoja oletus-Qortal-solmusta.",
+    "retry": "Yritä uudelleen"
+  },
+  "quitter_feed": {
+    "error_generic": "Julkinen Quitter-syöte ei ole juuri nyt käytettävissä. Yritä hetken kuluttua uudelleen.",
+    "error_following": "Personoitu Quitter-syöte ei ole juuri nyt käytettävissä. Yritä uudelleen.",
+    "error_timeout": "Syöteen lataus epäonnistui. Voit yrittää uudelleen tai palata Yleiseen.",
+    "loading_following": "Ladataan seurattujen syötettä...",
+    "loading_general": "Ladataan syötettä...",
+    "error_title_following": "Syöteen lataus epäonnistui",
+    "error_title_general": "Julkaisuja ei voitu ladata",
+    "empty_title_no_name": "Kirjaudu sisään personoidaksesi syötteesi",
+    "empty_title_no_following": "Et näytä seuraavan vielä ketään.",
+    "empty_title_no_posts": "Ei julkaisuja seuraamiltasi tileiltä",
+    "empty_title_general": "Ei julkaisuja saatavilla",
+    "empty_message_no_name": "Kirjaudu Qortal-nimellä rakentaaksesi personoidun syötteen.",
+    "empty_message_no_following": "Selaa Quitteria ja seuraa tilejä syöttesi rakentamiseksi.",
+    "empty_message_no_posts": "Seuraamasi tilit eivät ole vielä julkaisseet Quitterissa.",
+    "tab_general": "Yleinen",
+    "tab_following": "Seuratut",
+    "subtitle_personalized": "Personoitu syöte",
+    "subtitle_public": "Julkinen syöte",
+    "retry_following": "Yritä uudelleen",
+    "retry_general": "Yritä uudelleen",
+    "return_to_general": "Palaa Yleiseen",
+    "posts_showing_one": "{{count}} julkaisu näkyvissä",
+    "posts_showing_other": "{{count}} julkaisua näkyvissä",
+    "new_posts_one": "{{count}} uusi julkaisu",
+    "new_posts_other": "{{count}} uutta julkaisua"
+  },
+  "quick_tools_pad": {
+    "user_search": "Käyttäjähaku",
+    "wallets": "Lompakot",
+    "minting": "Minttaus",
+    "backup_wallet": "Varmuuskopioi lompakko",
+    "q_chat": "Q-Chat",
+    "notifications_enable": "Ota ilmoitukset käyttöön",
+    "notifications_mute": "Mykistä ilmoitukset",
+    "apps": "Sovellukset",
+    "extras": "",
+    "hint_notifications_desktop_only": "Tämä mykistää vain työpöytähälytykset. Keskuksen sisäiset ilmoitukset jatkuvat.",
+    "hint_minting_panel": "Tämä paneeli avautuu, kun olet minttaaja. Aloita käymällä Q-Mintershipissä!",
+    "snackbar_backup_wallet": "Lataa lompakkotiedostosi. Sitä tarvitaan tilin käyttöön."
+  },
   "website": "verkkosivusto",
-  "welcome": "tervetuloa"
+  "welcome": "tervetuloa",
+  "qortino_workspace": {
+    "modules_hotkeys_label": "Pikanäppäimet",
+    "modules_hotkeys_description": "Koonti pikavalinnoista yleisimpiin reitteihisi.",
+    "modules_music_label": "Musiikkisoitin",
+    "modules_music_description": "Kompakti Earbump-soitin haulle ja napakkaan toistoon.",
+    "modules_suggest_label": "Ehdota moduulia",
+    "modules_suggest_description": "Kirjoita > Lisää otsikko + viesti ja lähetä meille!",
+    "workspace_empty_prompt": "Valitse mitä näkyy QORTINOn yläpuolella.",
+    "workspace_header_hotkeys": "Pikanäppäimet",
+    "workspace_header_music": "Musiikkisoitin",
+    "workspace_add_app": "Lisää appi",
+    "getting_started_heading": "Alkuun",
+    "onboarding_step_progress": "Vaihe {{current}} / {{total}}",
+    "dialog_module_title": "Valitse moduuli",
+    "dialog_module_subtitle": "Valitse mikä näkyy QORTINOn yläpuolella.",
+    "dialog_hotkeys_title": "Valitse pikanäppäimet",
+    "dialog_hotkeys_subtitle": "Tallentuu automaattisesti tälle tilille.",
+    "dialog_music_search_title": "Etsi Earbumppia",
+    "dialog_music_search_subtitle": "Etsi kappale, näppäile toisto ja vie se yläpuolen soittimeen.",
+    "search_placeholder_qapps": "Etsi Q-appeja",
+    "search_placeholder_tracks": "Etsi kappaleita tai artisteja",
+    "section_recommended": "Suositellut",
+    "curated_badge": "[ KURATOITU ]",
+    "hotkeys_loading_library": "Ladataan Q-app-kirjastoa...",
+    "hotkeys_unavailable_title": "Q-appit ei saatavilla",
+    "hotkeys_no_match_title": "Ei vielä sopivia Q-appeja",
+    "hotkeys_no_match_hint": "Kokeile toista appea yhdistääksesi pikanäppäimen valittuun slottiin.",
+    "error_hotkey_catalog": "Q-appeja ei voi ladata juuri nyt.",
+    "music_section_results": "Tulokset",
+    "music_section_discovery": "Löydöt",
+    "music_loading_search": "Haetaan EarBump-kirjastosta...",
+    "music_loading_discovery": "Ladataan EarBump-löytöjä...",
+    "music_quiet_title": "EarBump on hiljainen juuri nyt",
+    "music_no_tracks_title": "Kappaleita ei löydy",
+    "music_no_tracks_hint": "Kokeile toista nimeä tai artistia saadaksesi jotain soittimeen.",
+    "error_earbump_discovery": "EarBumpia ei voida ladata juuri nyt.",
+    "error_earbump_search": "EarBumppia ei voida hakea juuri nyt.",
+    "music_syncing_library": "Synkronoidaan EarBump-kirjastoon...",
+    "music_empty_title": "EarBump-kirjasto",
+    "music_empty_uploaded": "Odotetaan kirjastoa",
+    "music_track_load_failed": "Tämä kappale ei ladannut kokonaan solmullasi.",
+    "music_no_peers_data": "Ei peereitä jäljelle jäävälle datalle",
+    "music_preparing_peers_one": "Valmistellaan solmallasi... {{percent}}% ({{count}} peer)",
+    "music_preparing_peers_other": "Valmistellaan solmallasi... {{percent}}% ({{count}} peeriä)",
+    "music_preparing_percent_only": "Valmistellaan solmallasi... {{percent}}%",
+    "music_searching_peers": "Etsitään peereitä...",
+    "music_finalizing_track": "Viimeistellään kappaletta solmallasi...",
+    "music_preparing_base": "Valmistellaan solmallasi...",
+    "music_playback_stalled": "Toisto jäi jumiin. Paina toista yrittääksesi uudelleen.",
+    "music_stream_stalled": "Kappale jumiin. Rakennetaan striimiä uudelleen...",
+    "hotkeys_launch_description": "Käynnistä {{appName}}",
+    "hotkeys_fallback_launch": "Käynnistä Q-App",
+    "reaction_hotkeys_ready": "Pikanäppäinpaneeli valmis.",
+    "reaction_music_panel_ready": "Musiikkipaneeli valmis.",
+    "reaction_panel_cleared": "Tyhjennetty.",
+    "reaction_music_player_ready": "Musiikkisoitin valmis.",
+    "reaction_locked_track": "Lukittu kappaleeseen {{title}}.",
+    "reaction_track_rotation": "{{title}} on pyörityksessä.",
+    "reaction_onboarding_route": "Aloitus avattu pidän seuraavan vaiheen lämpimänä.",
+    "reaction_support_chat": "Tukikanava avoinna pyydä 6 QORT ja järjestän vaiheet kaksi jonoon.",
+    "reaction_q_trade_open": "Q-Trade auki kun nappaat QORT:n sieltä jatkamme yhdessä eteenpäin.",
+    "reaction_name_flow": "Nimivirtaus auki hub alkaa tunnistaa sinut tästä.",
+    "reaction_avatar_flow": "Avatar-valmis annetaan tälle tilalle kasvot.",
+    "track_meta_separator": "·",
+    "a11y_clear_hotkey_slot": "Tyhjennä slotti {{n}}",
+    "runtime_workspace_bay_title": "Työtila-alueen ajonaikainen virhe.",
+    "runtime_workspace_bay_body": "QORTINO alla on turvassa. Päivitä Hub ja jatkamme jäljitystä tästä.",
+    "runtime_qortino_title": "QORTINO kohtasi ajonaikaisvirheen.",
+    "runtime_qortino_body": "Yläpuolen työalue on turvassa. Päivitä Hub ja jäljitätään kaatumista tästä.",
+    "hotkey_slot_number": "Slotti {{n}}"
+  },
+  "bookmarks": {
+    "title": "Kirjanmerkit",
+    "bookmarked": "Kirjanmerkki lisätty",
+    "add_page": "Lisää sivu",
+    "loading": "Ladataan kirjanmerkkejä...",
+    "folder": "Kansio",
+    "create_folder": "Luo kansio",
+    "folder_name": "Kansion nimi",
+    "new_folder": "Uusi kansio",
+    "top_level": "Ylin taso",
+    "edit_bookmark": "Muokkaa kirjanmerkkiä",
+    "add_bookmark": "Lisää kirjanmerkki",
+    "save_location_without_query": "Tallenna Q-App-sijainti ilman kyselyparametreja.",
+    "name": "Nimi",
+    "bookmark_name_placeholder": "Kirjanmerkin nimi",
+    "qortal_link": "Qortal-linkki",
+    "qortal_link_placeholder": "qortal://APP/Nimi/polku",
+    "no_bookmarks": "Ei vielä kirjanmerkkejä.",
+    "no_bookmarks_folder": "Tässä kansiossa ei ole kirjanmerkkejä.",
+    "bookmark_count_one": "{{count}} kirjanmerkki",
+    "bookmark_count_other": "{{count}} kirjanmerkkiä",
+    "edit": "Muokkaa",
+    "move": "Siirrä",
+    "delete": "Poista",
+    "rename": "Nimeä uudelleen",
+    "remove": "Poista",
+    "create": "Luo",
+    "more": "Lisää",
+    "delete_folder_title": "Poistetaanko kansio?",
+    "delete_folder_message": "Tämän kansion kirjanmerkit siirretään ylimmälle tasolle."
+  }
 }
diff --git a/src/i18n/locales/fi/group.json b/src/i18n/locales/fi/group.json
index aaa285ad..b85cb34f 100644
--- a/src/i18n/locales/fi/group.json
+++ b/src/i18n/locales/fi/group.json
@@ -28,6 +28,280 @@
     "select_group": "valitse ryhmä",
     "visit_q_mintership": "vieraile Q-Mintershipissä"
   },
+  "dashboard": {
+    "qort_balance": "QORT-saldo",
+    "node_status": "Noodin tila",
+    "node_unavailable": "Noodi ei ole saatavilla",
+    "sync_percent": "{{percent}}% synkronoitu",
+    "minter_level": "Minter-taso",
+    "peers": "Vertaiset",
+    "qdn": "QDN",
+    "core": "Core",
+    "hub": "Hub",
+    "node": "Noodi",
+    "using_node": "Käytössä oleva noodi",
+    "change_node": "Vaihda noodia",
+    "node_type": "Noodin tyyppi",
+    "node_height": "Noodin korkeus",
+    "local_node": "Paikallinen noodi",
+    "public_node": "Julkinen noodi",
+    "custom_node": "Mukautettu noodi",
+    "synchronizing": "Synkronoidaan",
+    "fully_operational": "Täysin toiminnassa",
+    "not_operational": "Ei toiminnassa",
+    "attention_needed": "Vaatii huomiota",
+    "apply": "Hae",
+    "info_panel_status": "tila",
+    "info_panel_node_comment": "// node_info",
+    "minter_pin_save_progress_default": "Tallenna taso palkki oletusnäkymäksi",
+    "minter_pin_save_dots_default": "Tallenna minttauksen pisteet oletusnäkymäksi",
+    "node_switch_error": "Solmua ei voitu vaihtaa juuri nyt.",
+    "node_menu_local": "Paikallinen solmu",
+    "node_menu_public": "Julkinen solmu",
+    "qortino_runtime_title": "QORTINO-kortin kuori kohtasi ajonaikaisen virheen.",
+    "qortino_runtime_body": "Muu kojelauta on edelleen turvallinen. Päivitä Hub ja jos ongelma toistuu, ilmoita tiimille.",
+    "no_custom_nodes_saved": "Ei tallennettuja mukautettuja noodeja",
+    "wallet_activity": "Lompakon toiminta",
+    "send": "Lähetä",
+    "receive": "Vastaanota",
+    "buy": "Osta",
+    "recent_transaction": "Viimeisin tapahtuma",
+    "loading_wallet_activity": "Ladataan lompakon toimintaa...",
+    "sent_to": "lähetetty: ",
+    "received_from": "vastaanotettu: ",
+    "no_wallet_activity": "Ei uutta lompakon toimintaa.",
+      "wallet_activity_window": "Viimeisin tapahtuma viimeisten 7 päivän aikana",
+      "wallet_activity_unknown_address": "Tuntematon osoite",
+      "wallet_activity_relative_just_now": "Juuri äsken",
+      "wallet_activity_relative_minutes_ago_one": "{{count}} minuutti sitten",
+      "wallet_activity_relative_minutes_ago_other": "{{count}} minuuttia sitten",
+      "wallet_activity_relative_hours_ago_one": "{{count}} tunti sitten",
+      "wallet_activity_relative_hours_ago_other": "{{count}} tuntia sitten",
+      "wallet_activity_relative_days_ago_one": "{{count}} päivä sitten",
+      "wallet_activity_relative_days_ago_other": "{{count}} päivää sitten",
+      "open_in_q_chat": "Avaa Q-Chatissa",
+    "open_in_q_apps": "Avaa Q-Appsissa",
+    "quitter_feed": "Quitter-syöte",
+    "quitter_show_more": "Näytä lisää",
+    "quitter_show_less": "Näytä vähemmän",
+    "quitter_video_attachment": "Videoliite",
+    "quitter_video_preview_hub": "Esikatselu on Hubissa vain luku -tilassa",
+    "featured_q_apps": "Suositellut Q-Appit",
+    "featured_q_apps_subtitle": "Käynnä luotettavia yhteisösovelluksia suoraan kojelaudalta.",
+    "explore_all_q_apps": "Selaa kaikkia Q-Appseja",
+    "reduce_motion": "Vähennä liikettä",
+    "account_overview": "Tilin yleiskatsaus",
+    "qortal_name_address": "QORTAL-NIMI JA -OSOITE",
+    "profile": "Profiili",
+    "profile_settings": "Profiilin asetukset",
+    "profile_settings_description": "Tarkista nimesi ja tilisi identiteetti.",
+    "security": "Turvallisuus",
+    "security_settings": "Tietoturva-asetukset",
+    "security_settings_description": "Näytä ja kopioi yksityinen avain vain, kun se on ehdottoman tarpeen.",
+    "developer": "Kehittäjä",
+    "developer_settings": "Kehittäjäasetukset",
+    "developer_settings_description": "Ota käyttöön kehitystyökalut ja diagnostiikka vaativampaan testaukseen.",
+    "system": "Järjestelmä",
+    "system_settings": "Järjestelmäasetukset",
+    "system_settings_description": "Hallitse ilmoituksia, liikettä, kiinnitettyjä appeja ja estettyjä tilejä.",
+    "current_name": "Nykyinen nimi",
+    "no_name_registered": "Nimeä ei ole rekisteröity",
+    "wallet_address": "Lompakon osoite",
+    "unavailable": "Ei saatavilla",
+    "no_active_wallet": "Ei aktiivista lompakkoa",
+    "names_qapp_actions_hint": "Osto-, myynti- ja nimen vaihto -toimet tehdään Names Q-Appissa.",
+    "open_the": "Avaa",
+    "names": "Names",
+    "names_qapp_hint_suffix": "Q-App nimien ostoon, myyntiin tai rekisteröidyn nimen vaihtoon.",
+    "private_key_warning": "Älä koskaan jaa yksityistä avaintasi. Sen hallussa voi hallita tätä lompakkoa ja varoja.",
+    "wallet_password": "Lompakon salasana",
+    "wallet_password_placeholder": "Syötä lompakon salasana",
+    "decrypt": "Pura salaus",
+    "copy_key": "Kopioi avain",
+    "private_key": "Yksityinen avain",
+    "private_key_hint": "Pura yksityisen avaimen salaus vain, kun palautat tai siirrät lompakon.",
+    "notifications_update_error": "Sovellusilmoituksia ei voitu päivittää juuri nyt.",
+    "wallet_unavailable_error": "Lompakon tiedot eivät ole juuri nyt saatavilla.",
+    "wallet_password_required": "Syötä lompakon salasana yksityisen avaimen salauksen purkamiseen.",
+    "wallet_decrypt_error_with_message": "Lompakon salausta ei voitu purkaa: {{message}}",
+    "wallet_decrypt_error": "Lompakon salausta ei voitu purkaa tällä salasanalla.",
+    "private_key_copied": "Yksityinen avain kopioitu leikepöydälle.",
+    "enable_dev_mode": "Ota kehittäjätila käyttöön",
+    "enable_dev_mode_desc": "Avaa paikalliset kehityspinnat, diagnostiikka ja testityökalut Hubissa.",
+    "dev_mode_tip": "Vinkki: käytössä uusi kehittäjätyökalu-kuvake sivupalkissa. Vie osoitin vasempaan reunaan, jos et näe sitä.",
+    "reduce_app_notifications": "Vähennä sovellusilmoituksia",
+    "reduce_app_notifications_desc": "Poista käytöstä työpöytäpush-ilmoitukset. Jätä pois päältä tavallisia Hub-hälytyksiä varten.",
+    "reduce_ui_animations": "Vähennä käyttöliittymän animaatioita",
+    "reduce_ui_animations_desc": "Vähennä liikettä Hubissa. Jätä pois päältä tavallista animoitua käyttöliittymää varten.",
+    "pinned_qapp_backup": "Kiinnitettyjen Q-Appien varmuuskopio",
+    "pinned_qapp_backup_desc": "Tallenna kiinnitetyt Q-Appit salattuihin QDN-asetuksiin, jotta sama asettelu seuraa laitteiden välillä.",
+    "manage_backup": "Hallitse varmuuskopiota",
+    "block_list": "Estolistä",
+    "block_list_desc": "Tarkista estetyt nimet ja osoitteet ja poista esto, kun olet valmis.",
+    "blocked_count": "{{count}} estetty",
+    "addresses": "Osoitteet",
+    "unblock": "Poista esto",
+    "no_blocked_accounts": "Ei vielä estettyjä tilejä.",
+    "show_receive_qr": "Näytä vastaanotto-QR",
+    "copy_address": "Kopioi osoite",
+    "privacy_mode_tooltip": "Yksityisyystila: sumeuttaa arkaluonteiset tiedot näytönjaon aikana",
+    "toggle_privacy_mode": "Vaihda yksityisyystilaa",
+    "send_qort": "Lähetä QORT",
+    "send_qort_subtitle": "Lähetä QORT mille tahansa rekisteröidylle nimelle tai osoitteelle.",
+    "close_send_qort_modal": "Sulje QORTin lähetysikkuna",
+    "receive_qort": "Vastaanota QORT",
+    "receive_qort_subtitle": "Skannaa vastaanottaaksesi QORT",
+    "close_receive_qort_modal": "Sulje QORTin vastaanottoikkuna",
+    "download_qr": "Lataa QR",
+    "qortal_address_or_name": "Qortal-osoite tai rekisteröity nimi",
+    "blocked": "Estetyt",
+    "account_status_online": "Paikalla",
+    "account_status_busy": "Varattu",
+    "account_status_invisible": "Näkymätön",
+    "account_settings_tooltip": "Tilin asetukset",
+    "open_account_settings_aria": "Avaa tilin asetukset",
+    "name_change_confirm": "Vaihdetaanko rekisteröity nimi nimestä {{oldName}} nimeen {{newName}}?",
+    "name_change_success": "Nimen vaihto lähetettiin onnistuneesti.",
+    "name_change_register_first": "Rekisteröi nimi ennen sen vaihtamista.",
+    "name_change_enter_new_name": "Anna uusi nimi, jota haluat käyttää.",
+    "name_change_different_from_current": "Valitse nimi, joka eroaa nykyisestä.",
+    "name_change_details_still_loading": "Nykyisten nimietietojen lataus on kesken. Yritä hetken kuluttua uudelleen.",
+    "name_change_choose_available": "Valitse vapaa nimi ennen jatkamista.",
+    "name_change_wallet_password_required": "Anna lompakon salasana ennen nimen vaihtoa.",
+    "name_change_wallet_password_failed": "Lompakon salasanaa ei voitu vahvistaa.",
+    "current_name_details_load_failed": "Nykyisten nimietietojen lataaminen epäonnistui.",
+    "name_change_unknown_error": "Nimen vaihdossa tapahtui virhe.",
+    "name_availability_available": "Nimi on vapaa.",
+    "name_availability_checking": "Tarkistetaan nimen saatavuutta...",
+    "name_availability_same_as_current": "Valitse nimi, joka eroaa jo käyttämästäsi.",
+    "name_availability_taken": "Tämä nimi on jo käytössä."
+  },
+  "groups_widget": {
+    "accept": "Hyväksy",
+    "approve": "Hyväksy pyyntö",
+    "cancel": "Peruuta",
+    "characters_count": "{{current}}/{{max}}",
+    "confirm_approve_request": "Hyväksytäänkö tämä pyyntö ja kutsutaanko he ryhmään?",
+    "confirm_join_group": "Liitytäänkö tähän ryhmään nyt?",
+    "confirm_join_promoted_closed": "Lähetetäänkö liittymispyyntö tähän nostettuun ryhmään?",
+    "confirm_join_promoted_open": "Liitytäänkö tähän nostettuun ryhmään nyt?",
+    "connecting": "Yhdistetään...",
+    "discover_groups": "Löydä ryhmiä",
+    "error_accept_invite": "Kutsua ei voitu hyväksyä juuri nyt.",
+    "error_approve_request": "Pyyntöä ei voitu hyväksyä juuri nyt.",
+    "error_load_invites": "Ryhmäkutsuja ei voitu ladata juuri nyt.",
+    "error_load_promotions": "Nostettuja ryhmiä ei voitu ladata juuri nyt.",
+    "error_load_requests": "Liittymispyyntöjä ei voitu ladata juuri nyt.",
+    "error_promoted": "Nostettuun ryhmään ei voitu toimia juuri nyt.",
+    "error_publish_promotion": "Nostoa ei voitu julkaista juuri nyt.",
+    "fresh_promotion_snippet": "Tällä ryhmällä on tuore nostettu päivitys.",
+    "from_label": "lähettäjä",
+    "group_admin_only": "Vain ryhmän ylläpitäjät",
+    "group_general": "Yleinen",
+    "group_named": "Ryhmä {{id}}",
+    "ignore": "Ohita",
+    "invitation_ready": "Kutsu tarkistettavaksi",
+    "invite_hidden": "Kutsu piilotettu tässä widgetissä toistaiseksi.",
+    "invites_empty_description": "Uudet ryhmäkutsut näkyvät täällä saapuessaan.",
+    "invites_empty_title": "Ei odottavia kutsuja",
+    "joined_group": "Liityit ryhmään {{name}}.",
+    "joined_promoted": "Liityit ryhmään {{name}}.",
+    "join_group": "Liity ryhmään",
+    "join_request_sent": "Liittymispyyntö lähetetty ryhmälle {{name}}.",
+    "loading_invites": "Ladataan kutsuja",
+    "loading_notifications": "Ladataan ilmoituksia",
+    "loading_promoted": "Ladataan nostettuja ryhmiä",
+    "loading_requests": "Ladataan pyyntöjä",
+    "members_count": "{{count}} jäsentä",
+    "new_encrypted_message": "Uusi salattu viesti",
+    "notifications_empty_message": "Liity Q-Chat-yhteisöihin, jotta tämä syöte täyttyy ryhmäviesteillä, maininnoilla ja toiminnalla.",
+    "notifications_empty_title": "Aloita Q-Chat-ryhmillä",
+    "open": "Avaa",
+    "open_conversation": "Avaa keskustelu",
+    "private_group": "Yksityinen ryhmä",
+    "private_group_invite": "Kutsu yksityiseen ryhmään",
+    "processing": "Käsitellään...",
+    "promoted_by": "Nostanut {{name}}",
+    "promoted_empty_message": "Nostetut ryhmät näkyvät täällä uusien kohokohtien tullessa.",
+    "promoted_empty_title": "Ei nostettuja ryhmiä",
+    "promote_dialog_fee": " Julkaisumaksu: {{fee}} QORT.",
+    "promote_dialog_intro": "Jaa lyhyt kohokohtapäivitys jostakin ylläpitämästäsi ryhmästä.",
+    "promote_group": "Nosta ryhmää",
+    "promote_page_title": "Nosta yhtä ryhmistäsi",
+    "promotion_published": "Ryhmän nosto julkaistu.",
+    "promotion_placeholder": "Kirjoita lyhyt nosto tälle ryhmälle.",
+    "public_group": "Julkinen ryhmä",
+    "refresh": "Päivitä",
+    "reject": "Hylkää",
+    "request_access": "Pyydä käyttöä",
+    "request_approved": "{{requester}} hyväksyttiin ryhmään {{group}}.",
+    "request_removed": "Pyyntö poistettu tästä widgetistä toistaiseksi.",
+    "request_sent": "Pyyntö lähetetty",
+    "requests_empty_description": "Hallitsemiesi ryhmien liittymispyynnöt näkyvät täällä.",
+    "requests_empty_title": "Ei odottavia pyyntöjä",
+    "select_admin_group": "Valitse ryhmä, jossa olet ylläpitäjä",
+    "tab_invites": "Kutsut",
+    "tab_notifications": "Ilmoitukset",
+    "tab_promoted": "Nostetut",
+    "tab_requests": "Pyynnöt",
+    "unknown": "Tuntematon",
+    "view_conversation": "Näytä keskustelu",
+    "wants_to_join": "Haluaa liittyä tähän ryhmään.",
+    "you": "Sinä",
+    "publish": "Julkaise"
+  },
+  "subscription": {
+    "subscriptions": "tilaukset",
+    "tooltip_actions_needed_one": "{{title}} – {{count}} toimenpide tarvitaan",
+    "tooltip_actions_needed_other": "{{title}} – {{count}} toimenpidettä tarvitaan",
+    "relative_soon": "pian",
+    "relative_in_minutes_one": "{{count}} minuutin kuluttua",
+    "relative_in_minutes_other": "{{count}} minuutin kuluttua",
+    "relative_in_hours_one": "{{count}} tunnin kuluttua",
+    "relative_in_hours_other": "{{count}} tunnin kuluttua",
+    "relative_in_days_one": "{{count}} päivän kuluttua",
+    "relative_in_days_other": "{{count}} päivän kuluttua",
+    "relative_in_months_one": "{{count}} kuukauden kuluttua",
+    "relative_in_months_other": "{{count}} kuukauden kuluttua",
+    "row_fallback_title": "tilaus",
+    "by_creator": "tekijä: {{name}}",
+    "creator_fallback": "Qortal-tekijä",
+    "price_line": "{{price}} QORT / {{interval}}",
+    "expires_suffix": " – vanhenee {{time}}",
+    "status_due": "erääntyy",
+    "status_active": "aktiivinen",
+    "status_owner": "omistaja",
+    "managed_fallback": "hallinnoitu tilaus",
+    "members_one": "{{count}} jäsen",
+    "members_other": "{{count}} jäsentä",
+    "join_requests_suffix_one": " – {{count}} liittymispyyntö",
+    "join_requests_suffix_other": " – {{count}} liittymispyyntöä",
+    "re_encryption_suffix": " – uudelleensalaus tarvitaan",
+    "actions_badge_one": "{{count}} toimenpide",
+    "actions_badge_other": "{{count}} toimenpidettä",
+    "loading": "ladataan tilauksia",
+    "section_needs_action": "vaatii toimenpiteitä",
+    "section_active": "aktiiviset",
+    "open_subscriptions": "avaa tilaukset",
+    "empty_title": "Löydä tilauspohjaisia Q-Appeja",
+    "empty_body": "Tilaa tekijöitä ja yhteisöjä Q-Appeista, jotka tukevat tilauksia, kuten SubWire.",
+    "open_subwire": "avaa SubWire",
+    "tab_subscriptions": "Tilaukset",
+    "tab_subwire": "SubWire"
+  },
+  "group_invites": {
+    "empty_title": "ei kutsuja",
+    "empty_secondary_1": "sinulla ei ole odottavia kutsuja",
+    "empty_secondary_2": "tällä hetkellä.",
+    "empty_tertiary_no_groups": "et ole vielä minkään ryhmän jäsen.",
+    "cta_find_groups": "etsi ryhmiä"
+  },
+  "group_join_requests": {
+    "empty_title": "ei liittymispyyntöjä",
+    "empty_secondary_1": "sinulla ei ole odottavia pyyntöjä",
+    "empty_secondary_2": "tällä hetkellä.",
+    "empty_tertiary_no_admin_groups": "et hallinnoi vielä yhtään ryhmää."
+  },
   "advanced_options": "lisäasetukset",
   "block_delay": {
     "minimum": "vähimmäislohkon viive",
@@ -72,6 +346,8 @@
     "generic": {
       "avatar_publish_fee": "profiilikuvan julkaisu vaatii {{ fee }}",
       "avatar_registered_name": "profiilikuvan asettamiseen tarvitaan rekisteröity nimi",
+      "add_new_key_option": "Lisää uusi avain",
+      "add_new_key_sparingly": "Uusia avaimia kannattaa lisätä vain harvoin, jotta ryhmän avainten koko ei kasva.",
       "admin_only": "vain ryhmät, joissa olet ylläpitäjä, näytetään",
       "already_in_group": "olet jo tässä ryhmässä!",
       "block_delay_minimum": "vähimmäislohkon viive ryhmätapahtumien hyväksyntään",
@@ -105,6 +381,7 @@
       "node_minting_key": "sinulla on tällä hetkellä minttausavain tälle tilille tässä solmussa",
       "no_announcement": "ei ilmoituksia",
       "no_display": "ei näytettävää sisältöä",
+      "no_description": "ei kuvausta",
       "no_selection": "ryhmää ei ole valittu",
       "not_part_group": "et ole osa salattua jäsenryhmää. Odota, että ylläpitäjä salaa avaimet uudelleen.",
       "only_encrypted": "vain salaamattomat viestit näytetään.",
@@ -170,5 +447,11 @@
       "user_joined": "käyttäjä liittyi onnistuneesti!"
     }
   },
+  "context_menu": {
+    "mark_as_read": "Merkitse luetuksi",
+    "mute_push_notifications": "Mykistä push-ilmoitukset",
+    "unmute_push_notifications": "Poista push-ilmoitusten mykistys",
+    "mark_all_read": "Merkitse kaikki luetuksi"
+  },
   "thread_posts": "uudet ketjun julkaisut"
 }
diff --git a/src/i18n/locales/fi/node.json b/src/i18n/locales/fi/node.json
index bd105d80..e15fc19c 100644
--- a/src/i18n/locales/fi/node.json
+++ b/src/i18n/locales/fi/node.json
@@ -6,7 +6,7 @@
     "removePath": "poista mukautettu Qortal-polku"
   },
   "introSetup": {
-    "paragraph1": "Qortal on hajautettu alusta, joka antaa sinulle täyden hallinnan tietoihisi, sovelluksiisi ja talouteesi. Aloittaaksesi suosittelemme asentamaan **Qortal Core** -ytimen, joka antaa virtaa verkolle ja mahdollistaa kaikki Qortalin ominaisuudet.",
+    "paragraph1": "Qortal on hajautettu alusta, joka antaa sinulle täyden hallinnan tietoihisi, sovelluksiisi ja talouteesi. Aloittaaksesi suosittelemme asentamaan **Qortal Core**, joka antaa virtaa verkolle ja mahdollistaa kaikki Qortalin ominaisuudet.",
     "paragraph2": "Tämä asennusohjelma opastaa sinua Qortal Coren asentamisessa ja määrittämisessä laitteellesi. Jatkaaksesi asennusta, napsauta **Seuraava**.",
     "note": "huomautus edistyneille käyttäjille",
     "advanced": "jos käytät etäsolmua, sulje tämä asennusohjelma ja napsauta sitten \"Valitse mukautettu solmu\""
@@ -22,7 +22,7 @@
   "steps": {
     "java": "java on asennettu",
     "downloaded": "Core ladattu",
-    "running": "core käynnissä"
+    "running": "Core käynnissä"
   },
   "actions": {
     "finished": "valmis",
@@ -40,7 +40,8 @@
     "invalidKey": "virheellinen apikey",
     "failed_stop": "Coren pysäyttäminen epäonnistui",
     "failed_bootstrap": "bootstrap epäonnistui",
-    "failed_delete": "tietokannan poistaminen epäonnistui"
+    "failed_delete": "tietokannan poistaminen epäonnistui",
+    "failed_bootstrap_or_clear": "bootstrap, ketjun tietojen tyhjennys tai Coren käynnistys epäonnistui"
   },
   "status": {
     "complete": "valmis",
@@ -49,7 +50,7 @@
     "error": "virhe"
   },
   "recommendation": {
-    "title": "paikallisen core-ytimen käyttö",
+    "title": "paikallisen Coren käyttö",
     "description": "Voit halutessasi jatkaa public nodella, mutta suosittelemme vahvasti käyttämään local nodea parhaan käyttökokemuksen saamiseksi. (Jos yrität käyttää ilman yhteyttä, voit jatkaa publicilla ilman yhteyttä.)",
     "subTitle": "paikallisen solmun käytön edut:",
     "point1": "täysi hajautettu pääsy",
@@ -63,16 +64,16 @@
     "resetDescription": "Apikeysi on virheellinen. Napsauta nollaa (reset) jatkaaksesi."
   },
   "messages": {
-    "001": "käynnistetään core-ydintä... odota hetki.",
+    "001": "käynnistetään Core... odota hetki.",
     "002": "virhe: tallennustilan käynnistäminen ei onnistu",
     "003": "virhe Qortal Coren ajamisessa",
     "004": "virhe Qortal Coren purkamisessa (unzipping)",
-    "005": "ladataan Qortal Core -ydintä... odota hetki.",
+    "005": "ladataan Qortal Core... odota hetki.",
     "006": "asetetaan Javaa... odota hetki.",
     "007": "virhe Javan lataamisessa.",
     "008": "virhe Javan purkamisessa (unzipping)",
-    "009": "ladataan Qortal Core -ydintä... odota hetki.",
-    "010": "virhe: core-ydintä ei voida ladata tai asentaa"
+    "009": "ladataan Qortal Core... odota hetki.",
+    "010": "virhe: Corea ei voida ladata tai asentaa"
   },
   "url": {
     "title": "url virheellinen",
@@ -81,7 +82,12 @@
   "confirmations": {
     "stop": "oletko varma, että haluat pysäyttää Coren?",
     "bootstrap": "oletko varma, että haluat käynnistää bootstrapin?",
-    "delete": "oletko varma, että haluat poistaa tietokannan?"
+    "delete": "oletko varma, että haluat poistaa tietokannan?",
+    "bootstrapOrClearChain": "Suorittaa bootstrapin tilannevedoksesta, kun Core käynnissä paikallisesti. Ellei onnistu tai bootstrap epäonnistuu, paikallinen ketjutietokanta voidaan poistaa ja Core käynnistää uudelleen; lompakkotiedostoja ei kosketa. Jatketaanko?"
+  },
+  "bootstrapChainHelp": {
+    "title": "Ketjun bootstrap",
+    "body": "Yksi työkalu: tilannevedoksen bootstrap kun Core käynnissä; tai paikallisen ketjutietokannan tyhjennys ja Core uudelleen kun bootstrap ei onnistu. Lompakko tallennetaan erilleen."
   },
   "stop": "pysäytä Core",
   "bootstrap": "bootstrap",
@@ -89,6 +95,53 @@
   "more": "lisää vaihtoehtoja",
   "less": "vähemmän vaihtoehtoja",
   "enableAuthWhenSyncing": "ota todennus käyttöön synkronoinnin aikana",
+  "coreSetupDialog": {
+    "title": "Määritä Qortal Core",
+    "introTitle": "Suorita oma solmu paikallisesti.",
+    "introSubtitle": "Voit käyttää julkista solmua Core käynnistyksen ja synkronoinnin aikana.",
+    "publicNodeUnavailable": "Julkiset solmut eivät ole juuri nyt käytettävissä. Pidä tämä näyttö auki paikallisen Core käynnistyksen ja synkronoinnin ajan.",
+    "steps": {
+      "downloadDone": "Core ladattu",
+      "downloadActive": "Ladataan Core",
+      "downloadIdle": "Lataa Core",
+      "runningDone": "Core käynnissä",
+      "runningActive": "Käynnistetään Core",
+      "runningIdle": "Käynnistä Core"
+    },
+    "readyToDownload": "Valmis lataamaan",
+    "readyToStart": "Valmis käynnistymään",
+    "syncing": "Synkronoidaan",
+    "helpers": {
+      "downloadDone": "Core-tiedostot on asennettu ja valmiit.",
+      "downloadActive": "Ladataan ja valmistellaan Qortal Core.",
+      "downloadIdle": "Lataa Qortal Core omalle solmullasi.",
+      "runningDoneSyncing": "Core on käynnissä ja synkronoi lohkoketjutietoja.",
+      "runningDone": "Core on käynnissä paikallisesti.",
+      "runningWaiting": "Core käynnistyy ja aloittaa synkronoinnin taustalla.",
+      "runningBlocked": "Käytettävissä Core-latauksen jälkeen."
+    },
+    "nextStepPill": "Seuraava vaihe",
+    "locationTitle": "Core-sijainti",
+    "locationCustom": "Qortal Core suoritetaan tästä kansiosta.",
+    "locationDefault": "Qortal Core käyttää järjestelmän oletuskansiota.",
+    "locationPathDefault": "Oletus Qortal Core -sijainti",
+    "change": "Vaihda",
+    "choose": "Valitse",
+    "clear": "Tyhjennä",
+    "advancedTitle": "Lisäasetukset",
+    "advancedSubtitle": "Edistyneet Core-työokalut ja -asetukset.",
+    "maintenanceUnavailable": "Core-huoltotyökalut eivät ole käytettävissä Core käynnistyksen tai synkronoinnin aikana.",
+    "stopCoreTitle": "Pysäytä Core",
+    "stopCoreBody": "Pysäyttää paikallisen Core-prosessin.",
+    "stopButton": "Pysäytä",
+    "cancel": "Peruuta",
+    "actionDownload": "Lataa Core",
+    "actionStart": "Käynnistä Core",
+    "actionDone": "Valmis",
+    "confirmTitle": "Vahvista toiminto",
+    "folderCopied": "Core-kansio kopioitu",
+    "progressAriaLabel": "Edistyminen: {{label}}"
+  },
   "NotFullyStarted": {
     "titleNotReady": "Core ei ole täysin käynnistynyt",
     "descNotReady": "Qortal Core ei ole vielä täysin käynnistynyt. Odota hetki.",
diff --git a/src/i18n/locales/fi/question.json b/src/i18n/locales/fi/question.json
index 699805a6..a32baf58 100644
--- a/src/i18n/locales/fi/question.json
+++ b/src/i18n/locales/fi/question.json
@@ -152,8 +152,12 @@
     "invite": "annatko tälle sovellukselle luvan kutsua {{ invitee }}?",
     "kick": "annatko tälle sovellukselle luvan potkaista {{ partecipant }} ulos ryhmästä?",
     "leave_group": "annatko tälle sovellukselle luvan poistua seuraavasta ryhmästä?",
-    "list_hosted_data": "annatko tälle sovellukselle luvan saada luettelon isännöimistäsi tiedoista?",
-    "order_detail": "{{ qort_amount }} QORT hintaan {{ foreign_amount }} {{ ticker }}",
+      "list_hosted_data": "annatko tälle sovellukselle luvan saada luettelon isännöimistäsi tiedoista?",
+      "notification": "sallitko tämän sovelluksen lähettää sinulle Hub-ilmoituksia?",
+      "notification_allow": "salli",
+      "notification_dont_allow": "älä salli",
+      "notification_title": "{{ appName }}-ilmoitukset",
+      "order_detail": "{{ qort_amount }} QORT hintaan {{ foreign_amount }} {{ ticker }}",
     "pay_publish": "annatko tälle sovellukselle luvan suorittaa seuraavat maksut ja julkaisut?",
     "perform_admin_action_with_value": "arvolla: {{ value }}",
     "perform_admin_action": "annatko tälle sovellukselle luvan suorittaa järjestelmänvalvojan toimenpiteen: {{ type }}",
diff --git a/src/i18n/locales/fi/tutorial.json b/src/i18n/locales/fi/tutorial.json
index c33c91f1..e7edc067 100644
--- a/src/i18n/locales/fi/tutorial.json
+++ b/src/i18n/locales/fi/tutorial.json
@@ -33,6 +33,7 @@
     "get_six_qorts_way3_action": "Avaa Q-Trade",
     "register_name": "Rekisteröi nimesi",
     "confirming_transaction": "Vahvistetaan tapahtumaa",
+    "confirming": "Vahvistetaan",
     "load_avatar": "Lataa avatar",
     "explore_apps": "Tutustu suosittuihin sovelluksiin",
     "done": "Valmis",
@@ -53,6 +54,17 @@
     "devnet_testing_desc": "Testaa Q-App-sovelluksiasi DevNet-testausympäristössä",
     "open_app": "Avaa",
     "address_copied": "Osoite kopioitu leikepöydälle",
-    "group_activity": "Ryhmätoiminta"
+    "group_activity": "Ryhmätoiminta",
+    "get_qorts_workspace_hint": "Avaa ensimmäiset 6 QORT aktivoidaksesi loput määrityksestä.",
+    "register_name_workspace_hint": "Rekisteröity nimi tekee tilistä tunnistettavan identiteetin.",
+    "load_avatar_workspace_hint": "Anna kojelaudalle kasvot jotta tila alkaa näyttää sinulta.",
+    "onboarding_transition_hard_part_done": "Hyvää työtä vaikein osa on käsitelty.",
+    "onboarding_transition_one_more": "Hienosti vielä yksi vaihe.",
+    "onboarding_press_next_when_ready": "Hyvää työtä. Vaikein osuus on käsitelty. Paina \"Seuraava\", kun olet valmis.",
+    "register_name_pending_hint": "Nimeä tallennetaan ketjuun — tämä voi kestää hetken.",
+    "persistent_guide_get_qorts": "Aloitetaan kuudesta QORT valitse yhteys ylhäältä.",
+    "persistent_guide_register_name": "Seuraavaksi rekisteröi nimesi.",
+    "persistent_guide_load_avatar": "Vielä lisää avatarisi.",
+    "post_onboarding_workspace_ready": "Valmista. Voit alkaa rakentaa työtilaa yläpuolella."
   }
 }
diff --git a/src/i18n/locales/fr/auth.json b/src/i18n/locales/fr/auth.json
index 4f466e36..a6a87a61 100644
--- a/src/i18n/locales/fr/auth.json
+++ b/src/i18n/locales/fr/auth.json
@@ -74,8 +74,11 @@
       "set_apikey": "échec de la configuration de la clé API :"
     },
     "generic": {
+      "block_list_intro": "Ajoutez un nom Qortal ou une adresse pour les bloquer. Les adresses concernent les transactions ; bloquer un nom masque ses données dans tout le Hub.",
       "blocked_addresses": "adresses bloquées – bloque le traitement des transactions",
+      "blocked_addresses_hint": "Empêche le traitement lié aux transactions en provenance de ces adresses.",
       "blocked_names": "noms bloqués pour QDN",
+      "blocked_names_hint": "Ces noms sont bloqués pour les données QDN / Hub et les fonctionnalités sociales.",
       "blocking": "blocage de {{ name }}",
       "choose_block": "choisissez 'bloquer les transactions' ou 'tout' pour bloquer les messages de chat",
       "congrats_setup": "félicitations, tout est prêt !",
@@ -88,6 +91,7 @@
       "locating_encryption_keys": "localisation des clés de chiffrement",
       "insert_name_address": "Veuillez entrer un nom ou une adresse pour démarrer une conversation privée.",
       "name_address": "nom ou adresse",
+      "no_blocked_users": "Personne n’est bloqué pour l’instant. Ajoutez une adresse ou un nom ci-dessus pour les masquer.",
       "no_account": "aucun compte enregistré",
       "no_minimum_length": "aucune exigence de longueur minimale",
       "no_secret_key_published": "aucune clé secrète publiée pour l'instant",
@@ -141,6 +145,159 @@
   },
   "welcome": "bienvenue sur",
   "store_account": "enregistrer le compte dans le Hub",
+  "create_wallet": {
+    "error_enter_password": "Saisis un mot de passe de portefeuille.",
+    "error_confirm_password": "Confirme ton mot de passe de portefeuille.",
+    "error_passwords_mismatch": "Les mots de passe ne correspondent pas.",
+    "success_wallet_saved": "Portefeuille enregistré",
+    "success_account_created": "Compte créé",
+    "success_ready_hub": "Tu peux maintenant entrer dans le Hub.",
+    "success_backup_before_hub": "Sauvegarde ton portefeuille chiffré avant d'entrer dans le Hub.",
+    "enter_hub": "Entrer dans le Hub",
+    "download_another_copy": "Télécharger une autre copie",
+    "backup_wallet": "Sauvegarder le portefeuille",
+    "backup_encrypted_notice": "Cette sauvegarde est chiffrée avec le mot de passe de ton portefeuille.",
+    "seed_title": "Ta phrase de récupération",
+    "seed_subtitle": "Elle peut récupérer ton compte. Enregistrer la phrase secrète est facultatif. La sauvegarde chiffrée du portefeuille arrive ensuite — méthode recommandée pour récupérer le compte.",
+    "reveal": "Afficher",
+    "copied": "Copié",
+    "copy": "Copier",
+    "export": "Exporter",
+    "seed_warning": "Ne la partage jamais. Quiconque l'a peut accéder à ton compte. Pour une conservation quotidienne, utilise la sauvegarde chiffrée après la création.",
+    "create_account": "Créer un compte",
+    "password_title": "Créer un mot de passe",
+    "password_subtitle": "Ce mot de passe protège ton compte sur cet appareil.",
+    "wallet_password": "Mot de passe du portefeuille",
+    "confirm_password": "Confirmer le mot de passe",
+    "save_account_in_hub": "Enregistrer le compte dans le Hub",
+    "continue": "Continuer"
+  },
+  "import_account": {
+    "title": "Importer un compte",
+    "subtitle": "Choisissez comment restaurer votre compte."
+  },
+  "backup_wallet_modal": {
+    "subtitle": "Téléchargez un fichier wallet local pour restaurer ce compte plus tard.",
+    "info_note": "Exporte un fichier wallet en local sur votre appareil. Rangez-le dans un lieu sûr.",
+    "current_password": "Mot de passe actuel",
+    "keep_password_in_export": "Conserver le mot de passe actuel dans le fichier wallet exporté",
+    "new_password_for_backup": "Nouveau mot de passe pour cette sauvegarde",
+    "download_wallet_file": "Télécharger le fichier wallet",
+    "error_no_active_wallet": "Aucun portefeuille actif trouvé pour la sauvegarde.",
+    "error_unable_to_create_backup": "Impossible de créer la sauvegarde du wallet."
+  },
+  "wallet_errors": {
+    "unable_to_unlock_default": "impossible de déverrouiller ce portefeuille.",
+    "unable_to_save_backup": "impossible d’enregistrer cette sauvegarde du portefeuille.",
+    "unable_to_prepare_backup": "impossible de préparer cette sauvegarde du portefeuille.",
+    "account_not_found": "ce compte enregistré est introuvable. choisissez un autre compte ou restaurez ce portefeuille depuis une sauvegarde.",
+    "account_incomplete": "ce compte enregistré semble incomplet ou endommagé. choisissez un autre compte ou restaurez ce portefeuille depuis une sauvegarde.",
+    "invalid_security_data": "ce compte enregistré contient des données de sécurité de portefeuille invalides. choisissez un autre compte ou restaurez ce portefeuille depuis une sauvegarde.",
+    "missing_encrypted_seed": "à ce compte enregistré manque la graine chiffrée (les données verrouillées du portefeuille nécessaires pour le déverrouiller). choisissez un autre compte ou restaurez ce portefeuille depuis une sauvegarde.",
+    "missing_field": "à ce compte enregistré manque {{field}}. choisissez un autre compte ou restaurez ce portefeuille depuis une sauvegarde.",
+    "field": {
+      "address0": "adresse du portefeuille",
+      "encryptedSeed": "graine chiffrée (les données verrouillées nécessaires pour déverrouiller le portefeuille)",
+      "iv": "données de chiffrement du portefeuille",
+      "kdfThreads": "paramètres du mot de passe du portefeuille",
+      "mac": "contrôle d’intégrité du portefeuille",
+      "salt": "données de sécurité du mot de passe du portefeuille",
+      "version": "version du portefeuille"
+    }
+  },
+  "connection_mode": {
+    "title": "Mode de connexion",
+    "subtitle": "Choisissez comment Qortal se connecte au réseau.",
+    "local_title": "Nœud local",
+    "recommended": "Recommandé",
+    "local_full_decentralized": "Accès entièrement décentralisé",
+    "local_faster": "Meilleures performances",
+    "local_data_local": "Vos données restent locales",
+    "public_title": "Nœud public",
+    "public_quick": "Accès rapide",
+    "public_limited_decentralization": "Décentralisation limitée",
+    "public_shared_infrastructure": "Infrastructure partagée",
+    "status_running": "Core en cours d’exécution",
+    "status_missing": "Core non détecté",
+    "status_checking": "Vérification du nœud local",
+    "section_custom_nodes": "Nœuds personnalisés",
+    "add_custom_node": "Ajouter un nœud personnalisé",
+    "empty_custom_nodes": "Aucun nœud personnalisé enregistré",
+    "manual_setup_link": "Configuration manuelle du nœud",
+    "save_settings": "Enregistrer les réglages",
+    "manual_edit_title": "Modifier le nœud personnalisé",
+    "manual_add_title": "Configuration manuelle du nœud",
+    "field_name": "Nom",
+    "placeholder_node_name": "Mon nœud Qortal",
+    "field_node_url": "URL du nœud",
+    "placeholder_node_url": "https://127.0.0.1:12391",
+    "field_api_key_optional": "Clé API (facultatif)",
+    "placeholder_api_key": "Saisir la clé API",
+    "reload_after_new_node_title": "Actualisation requise",
+    "reload_after_new_node_message": "Vous avez ajouté un nouveau nœud ; un rafraîchissement de l’application est nécessaire.",
+    "reload_after_new_node_button": "Recharger l’application"
+  },
+  "intro_features": {
+    "secure_title": "Sûr et privé",
+    "secure_text": "Vos clés, vos données, toujours sous votre contrôle.",
+    "fast_title": "Accès rapide",
+    "fast_text": "Déverrouillez et accédez instantanément à votre expérience Qortal.",
+    "decentralized_title": "Décentralisé",
+    "decentralized_text": "Connectez-vous au réseau selon vos conditions.",
+    "built_title": "Conçu pour vous",
+    "built_text": "Un compte. Des possibilités infinies."
+  },
+  "entry": {
+    "title": "Entrer dans Qortal",
+    "subtitle": "Accédez à votre compte ou créez-en un.",
+    "create_account": "Créer un compte",
+    "import_account": "Importer un compte",
+    "no_accounts": "Aucun compte trouvé sur cet appareil.",
+    "import_choice_backup_title": "Fichier de sauvegarde",
+    "import_choice_backup_description": "Importer une sauvegarde Hub enregistrée.",
+    "import_choice_authenticate_title": "S’authentifier maintenant",
+    "import_choice_authenticate_description": "Utiliser une sauvegarde sans l’enregistrer.",
+    "import_choice_seed_title": "Phrase secrète",
+    "import_choice_seed_description": "Restaurer avec votre phrase secrète.",
+    "import_backup_heading": "Importer depuis un fichier de sauvegarde",
+    "import_backup_drop_hint": "Déposez le fichier de sauvegarde ou cliquez pour le sélectionner.",
+    "import_authenticate_heading": "S’authentifier depuis une sauvegarde",
+    "import_authenticate_drop_hint": "Déposez une sauvegarde ou cliquez pour la sélectionner. Elle ne sera pas enregistrée sur cet appareil.",
+    "import_seed_label": "Phrase secrète",
+    "import_seed_placeholder": "Saisissez votre phrase secrète",
+    "import_wallet_password": "Mot de passe du portefeuille",
+    "importing_account": "Importation du compte...",
+    "seed_import_error": "Impossible d’importer cette phrase secrète.",
+    "seed_import_duplicate": "Ce compte est déjà enregistré sur cet appareil.",
+    "seed_import_success": "Compte importé avec succès.",
+    "import_backup_success_one": "{{count}} compte importé avec succès.",
+    "import_backup_success_other": "{{count}} comptes importés avec succès.",
+    "import_backup_duplicate": "Ces comptes sont déjà enregistrés sur cet appareil.",
+    "import_backup_invalid": "Ce fichier de sauvegarde ne contient pas de compte valide.",
+    "import_file_read_aborted": "Lecture du fichier annulée",
+    "import_file_read_failed": "Échec de la lecture du fichier",
+    "filter_accounts_aria": "Filtrer les comptes par adresse, nom principal ou note",
+    "filter_placeholder": "Adresse, nom principal ou note…",
+    "filter_no_results": "Aucun compte ne correspond.",
+    "filter_clear": "Effacer la recherche",
+    "wallet_edit_name_label": "Nom",
+    "wallet_edit_account_name_placeholder": "Nom du compte",
+    "wallet_edit_note_label": "Note",
+    "wallet_edit_note_placeholder": "Note (facultatif)",
+    "wallet_edit_remove": "Retirer",
+    "wallet_edit_save": "Enregistrer",
+    "wallet_edit_aria_label": "Modifier le nom et la note du compte"
+  },
+  "authentication_form": {
+    "unnamed_account": "Compte sans nom",
+    "password_placeholder": "Saisissez votre mot de passe",
+    "unlock": "Déverrouiller",
+    "choose_another_account": "Choisir un autre compte",
+    "using_local_node": "Nœud local",
+    "using_public_node": "Nœud public",
+    "using_custom_node": "Nœud personnalisé"
+  },
+
   "temp_auth": {
     "tooltip": "s'authentifier sans enregistrer votre compte dans le Hub",
     "button": "auth. temporaire"
diff --git a/src/i18n/locales/fr/core.json b/src/i18n/locales/fr/core.json
index 0476f445..b927ba32 100644
--- a/src/i18n/locales/fr/core.json
+++ b/src/i18n/locales/fr/core.json
@@ -7,6 +7,7 @@
     "add_custom_framework": "Ajouter un cadre personnalisé",
     "add_reaction": "ajouter une réaction",
     "add_theme": "Ajouter le thème",
+    "back": "retour",
     "backup_account": "compte de sauvegarde",
     "backup_wallet": "portefeuille de secours",
     "cancel": "Annuler",
@@ -132,11 +133,11 @@
   "core": {
     "block_height": "hauteur de blocage",
     "data_peers": "pairs QDN (données)",
-    "information": "Informations de base",
+    "information": "informations Core",
     "peers": "pairs connectés",
-    "version": "version de base"
+    "version": "version Core"
   },
-  "current_language": "current language: {{ language }}",
+  "current_language": "langue actuelle : {{ language }}",
   "dev": "dev",
   "dev_mode": "mode de développement",
   "developer": {
@@ -208,7 +209,7 @@
       "encrypt_app": "Impossible de crypter l'application. Application non publiée '",
       "fetch_app": "Impossible de récupérer l'application",
       "fetch_publish": "Impossible de récupérer la publication",
-      "file_too_large": "file {{ filename }} is too large. Max size allowed is {{ size }} MB.",
+      "file_too_large": "le fichier {{ filename }} est trop volumineux. La taille max est {{ size }} Mo.",
       "generic": "Une erreur s'est produite",
       "initiate_download": "Échec du téléchargement",
       "invalid_amount": "montant non valide",
@@ -220,10 +221,10 @@
       "invalid_theme_format": "format de thème non valide",
       "invalid_zip": "zip non valide",
       "message_loading": "Message de chargement d'erreur.",
-      "message_size": "your message size is of {{ size }} bytes out of a maximum of {{ maximum }}",
+      "message_size": "votre message fait {{ size }} octets pour un maximum de {{ maximum }} octets",
       "minting_account_add": "Impossible d'ajouter un compte de pénitence",
       "minting_account_remove": "Impossible de supprimer le compte de pénitence",
-      "missing_fields": "missing: {{ fields }}",
+      "missing_fields": "manquant : {{ fields }}",
       "navigation_timeout": "Délai de navigation",
       "network_generic": "erreur de réseau",
       "password_not_matching": "Les champs de mot de passe ne correspondent pas!",
@@ -239,15 +240,17 @@
     },
     "generic": {
       "already_voted": "Vous avez déjà voté.",
-      "avatar_size": "{{ size }} KB max. for GIFS",
+      "avatar_size": "{{ size }} Ko max pour les GIF",
       "benefits_qort": "Avantages d'avoir QORT",
       "building": "bâtiment",
       "building_app": "application de construction",
       "confirmed": "confirmé",
-      "created_by": "created by {{ owner }}",
-      "buy_order_request": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy order</span>",
-      "buy_order_request_other": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy orders</span>",
+      "created_by": "créé par {{ owner }}",
+      "buy_order_request": "l’application <br/><italic>{{hostname}}</italic> <br/><span>demande {{count}} ordre d’achat</span>",
+      "buy_order_request_other": "l’application <br/><italic>{{hostname}}</italic> <br/><span>demande {{count}} ordres d’achat</span>",
       "devmode_local_node": "Veuillez utiliser votre nœud local pour le mode Dev! Déconnectez-vous et utilisez le nœud local.",
+      "disable_os_push": "Désactiver les notifications push système",
+      "disable_os_push_desc": "Coupez les alertes bureau pour cette application tout en gardant l’activité du Hub visible.",
       "downloading": "téléchargement",
       "downloading_decrypting_app": "Téléchargement et décryptez l'application privée.",
       "edited": "édité",
@@ -255,28 +258,39 @@
       "encrypted": "crypté",
       "encrypted_not": "pas crypté",
       "amount_qort": "montant: {{ amount }} QORT",
-      "fee_qort": "fee: {{ fee }} QORT",
+      "app_notifications_hint": "Les notifications Q-App apparaîtront ici",
+      "fee_qort": "frais : {{ fee }} QORT",
       "fetching_data": "Rechercher les données de l'application",
-      "foreign_fee": "foreign fee: {{ fee }}",
+      "foreign_fee": "frais externes : {{ fee }}",
       "get_qort_trade_portal": "Obtenez Qort en utilisant le portail commercial de Crosschain de Qortal",
+      "loading": "Chargement...",
       "minimal_qort_balance": "Avoir au moins {{ quantity }} QORT sur votre solde vous permet d’envoyer des messages de chat à une vitesse quasi instantanée.",
       "mentioned": "mentionné",
+      "new_notification_from": "Nouvelle notification de {{ appName }}",
+      "new_payment_body": "Vous avez reçu {{ amount }} QORT.",
+      "new_payment_received": "Nouveau paiement reçu",
+      "new_qmail": "Vous avez un nouveau Q-Mail",
       "message_with_image": "Ce message a déjà une image",
-      "most_recent_payment": "{{ count }} most recent payment",
-      "name_available": "{{ name }} is available",
+      "most_recent_payment": "{{ count }} paiement le plus récent",
+      "name_available": "{{ name }} est disponible",
       "name_benefits": "Avantages d'un nom",
       "name_checking": "Vérifier si le nom existe déjà",
       "name_preview": "Vous avez besoin d'un nom pour utiliser l'aperçu",
       "name_publish": "Vous avez besoin d'un nom Qortal pour publier",
       "name_rate": "Vous avez besoin d'un nom pour évaluer.",
       "name_registration": "Votre solde est de {{ balance }} QORT. L'enregistrement d'un nom nécessite des frais de {{ fee }} QORT.",
-      "name_unavailable": "{{ name }} is unavailable",
+      "name_unavailable": "{{ name }} est indisponible",
+      "no_app_notifications": "Pas encore de notifications d’applications",
       "no_data_image": "Aucune donnée pour l'image",
       "no_description": "Aucune description",
       "no_messages": "pas de messages",
       "no_message": "pas de message",
       "no_minting_details": "Impossible d'afficher les détails de la passerelle sur la passerelle",
+      "no_notification_apps": "Aucune application n’a encore l’autorisation pour les notifications.",
       "no_notifications": "pas de nouvelles notifications",
+      "notification_settings": "Paramètres des notifications",
+      "notification_settings_desc": "Choisissez les apps pouvant envoyer des alertes bureau tout en gardant l’activité du Hub visible.",
+      "notifications": "Notifications",
       "no_payments": "Aucun paiement",
       "no_pinned_changes": "Vous n'avez actuellement aucune modification à vos applications épinglées",
       "no_results": "Aucun résultat",
@@ -286,17 +300,18 @@
       "overwrite_qdn": "Écraser à QDN",
       "password_confirm": "Veuillez confirmer un mot de passe",
       "password_enter": "Veuillez saisir un mot de passe",
-      "payment_request": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting a payment</span>",
-      "people_reaction": "people who reacted with {{ reaction }}",
+      "payment_request": "l’application <br/><italic>{{hostname}}</italic> <br/><span>demande un paiement</span>",
+      "people_reaction": "personnes ayant réagi avec {{ reaction }}",
       "processing_transaction": "La transaction de traitement est-elle, veuillez patienter ...",
       "publish_data": "Publier des données à Qortal: n'importe quoi, des applications aux vidéos. Entièrement décentralisé!",
       "publishing": "Publication ... Veuillez patienter.",
       "qdn": "Utiliser une économie QDN",
-      "rating": "rating for {{ service }} {{ name }}",
+      "rating": "note pour {{ service }} {{ name }}",
       "register_name": "Vous avez besoin d'un nom Qortal enregistré pour enregistrer vos applications épinglées sur QDN.",
-      "replied_to": "replied to {{ person }}",
+      "replied_to": "a répondu à {{ person }}",
       "revert_default": "revenir à la valeur par défaut",
       "revert_qdn": "revenir à QDN",
+      "revoke_permission": "Révoquer",
       "save_qdn": "Enregistrer sur QDN",
       "secure_ownership": "sécuriser la propriété des données publiées par votre nom. Vous pouvez même vendre votre nom, ainsi que vos données à un tiers.",
       "select_file": "Veuillez sélectionner un fichier",
@@ -308,7 +323,8 @@
       "unread_messages": "messages non lus ci-dessous",
       "unsaved_changes": "vous avez des modifications non enregistrées à vos applications épinglées. Enregistrez-les sur QDN.",
       "updating": "mise à jour",
-      "wait": "attendez s'il vous plaît"
+      "wait": "attendez s'il vous plaît",
+      "open_q_trade_subtitle": "Ouvre Q-Trade et achète des QORT sur le portail d’échange."
     },
     "message": "message",
     "promotion_text": "texte de promotion",
@@ -317,17 +333,17 @@
       "logout": "Êtes-vous sûr que vous aimeriez vous connecter?",
       "new_user": "Êtes-vous un nouvel utilisateur?",
       "delete_chat_image": "Souhaitez-vous supprimer votre image de chat précédente?",
-      "perform_transaction": "would you like to perform a {{action}} transaction?",
+      "perform_transaction": "voulez-vous effectuer une transaction {{action}} ?",
       "provide_thread": "Veuillez fournir un titre de fil",
       "publish_app": "Souhaitez-vous publier cette application?",
       "publish_avatar": "Souhaitez-vous publier un avatar?",
       "publish_qdn": "Souhaitez-vous publier vos paramètres sur QDN (chiffré)?",
       "overwrite_changes": "L'application n'a pas été en mesure de télécharger vos applications épinglées existantes existantes. Souhaitez-vous écraser ces changements?",
-      "rate_app": "would you like to rate this app a rating of {{ rate }}?. It will create a POLL tx.",
+      "rate_app": "voulez-vous attribuer à cette app une note de {{ rate }} ?. Il reste {{ days }} jours avant votre prochaine note.",
       "register_name": "Souhaitez-vous enregistrer ce nom?",
       "reset_pinned": "Vous n'aimez pas vos changements locaux actuels? Souhaitez-vous réinitialiser les applications épinglées par défaut?",
       "reset_qdn": "Vous n'aimez pas vos changements locaux actuels? Souhaitez-vous réinitialiser avec vos applications QDN enregistrées?",
-      "transfer_qort": "would you like to transfer {{ amount }} QORT"
+      "transfer_qort": "voulez-vous transférer {{ amount }} QORT"
     },
     "success": {
       "order_submitted": "Votre commande d'achat a été soumise",
@@ -336,6 +352,7 @@
       "rated_app": "Évalué avec succès. Veuillez patienter quelques minutes pour que le réseau propage les modifications.",
       "request_read": "J'ai lu cette demande",
       "transfer": "Le transfert a réussi!",
+      "transfer_submitted": "Votre transfert a été envoyé avec succès.",
       "voted": "voté avec succès. Veuillez patienter quelques minutes pour que le réseau propage les modifications."
     }
   },
@@ -365,11 +382,42 @@
     },
     "status_title": "statut de frappe",
     "tier_share_per_block": "part du niveau par bloc",
-    "total_minter_in_tier": "nombre total de minters dans ce niveau"
+    "total_minter_in_tier": "nombre total de minters dans ce niveau",
+    "panel": {
+      "dialog_subtitle": "Consultez votre état de minage, votre progression et les prochaines étapes.",
+      "state_syncing_title": "Synchronisation",
+      "state_syncing_body": "Le nœud se synchronise encore ; le minage ne peut pas encore commencer.",
+      "state_active_title": "Minage actif",
+      "state_active_body_node_selection": "Cette clé de minage est configurée sur ce nœud. Les statistiques reflètent le compte sélectionné.",
+      "state_active_body_account": "Ce compte est configuré pour le minage sur ce nœud.",
+      "state_inactive_title": "Pas de minage",
+      "state_inactive_body_not_in_group": "Ce compte ne fait pas encore partie du groupe des minters.",
+      "state_inactive_body_multi_key": "Ce nœud a déjà plusieurs clés de minage configurées.",
+      "state_inactive_body_ready": "Ce compte est prêt pour l’étape de minage suivante.",
+      "next_step_visit_q_mintership": "Ouvrez l’app Q-Mintership pour demander à devenir minter.",
+      "next_step_already_active": "Le minage est déjà actif sur ce nœud.",
+      "next_step_wait_sync": "Attendez la fin de la synchronisation du nœud avant de pouvoir démarrer le minage.",
+      "next_step_start_when_ready": "Démarrez le minage sur ce nœud lorsque vous êtes prêt.",
+      "section_your_wallet": "Votre portefeuille",
+      "section_minter_profile_stats": "Profil minter (stats)",
+      "section_account_identity": "Identité du compte",
+      "section_progress_next_level": "Progression vers le niveau suivant",
+      "section_next_step": "Prochaine étape",
+      "section_node_minting_accounts": "Comptes de minage du nœud",
+      "select_account_for_stats_hint": "Sélectionnez un compte pour mettre à jour la progression et les stats de récompense à droite.",
+      "badge_viewing_stats": "Stats affichées",
+      "blocks_to_level": "blocs jusqu’au niveau {{level}}",
+      "minting_for_approx_days": "Minage pendant : ~{{days}} jours",
+      "reference_only": "(à titre indicatif)",
+      "rewards_info_subtitle_own": "(vos infos sur les récompenses)",
+      "rewards_info_subtitle_selected": "(minter sélectionné — récompenses pour cette clé)",
+      "network_details": "Détails du réseau",
+      "loading_spinner_aria": "Chargement"
+    }
   },
   "name": "nom",
   "name_app": "nom / application",
-  "new_post_in": "new post in {{ title }}",
+  "new_post_in": "nouveau message dans {{ title }}",
   "none": "aucun",
   "note": "note",
   "option": "option",
@@ -389,10 +437,36 @@
   "publish": "publier",
   "q_apps": {
     "about": "À propos de ce Q-App",
-    "q_mail": "Q-Rail",
-    "q_manager": "manager",
-    "q_sandbox": "Q-sandbox",
-    "q_wallets": "porte-à-tête"
+    "q_mail": "Q-Mail",
+    "q_manager": "Q-Manager",
+    "q_sandbox": "Q-Sandbox",
+    "q_wallets": "Q-Wallets",
+    "wallets_workspace": "espace portefeuilles"
+  },
+  "account_lookup": {
+    "dialog_title": "Recherche d'utilisateur",
+    "empty_title": "Rechercher des comptes",
+    "empty_subtitle": "Saisissez un nom ou une adresse",
+    "tooltip_send_disabled": "Ceci est votre propre profil.",
+    "tooltip_block_public_node": "Le blocage des utilisateurs n'est pas disponible sur un nœud public.",
+    "tooltip_block_self": "Vous ne pouvez pas vous bloquer vous‑même.",
+    "error_lookup_failed": "Impossible de consulter ce compte.",
+    "chip_level": "Niveau {{level}}",
+    "chip_blocked": "Bloqué",
+    "chip_no_registered_name": "Aucun nom enregistré",
+    "section_minting_progress": "Progression du minting",
+    "minting_remaining": "{{remaining}} restants",
+    "minting_blocks_to_level": "{{remaining}} jusqu'au niveau {{level}}",
+    "minting_approx_one": "~{{count}} jour de minting (env.)",
+    "minting_approx_other": "~{{count}} jours de minting (env.)",
+    "minting_days_label": "Minting :",
+    "label_address": "Adresse",
+    "label_public_key": "Clé publique",
+    "payments_title": "Paiements récents",
+    "pagination_rows_per_page": "Lignes par page :",
+    "pagination_displayed_rows": "{{from}}–{{to}} sur {{count}}",
+    "action_block": "bloquer",
+    "action_unblock": "débloquer"
   },
   "app_detail": {
     "about": "à propos",
@@ -454,7 +528,10 @@
     "official_apps": "apps officielles"
   },
   "aria": {
-    "apps_library_tabs": "onglets de navigation de la bibliothèque d'apps"
+    "apps_library_tabs": "onglets de navigation de la bibliothèque d'apps",
+    "core_controls": "Contrôles du Core",
+    "switch_theme_dark": "Passer en mode sombre",
+    "switch_theme_light": "Passer en mode clair"
   },
   "supply": "fournir",
   "tags": "balises",
@@ -468,13 +545,13 @@
     "name": "nom de thème"
   },
   "thread": "fil",
-  "thread_other": "threads",
+  "thread_other": "fils",
   "thread_title": "Titre du fil",
   "time": {
-    "day_one": "{{count}} day",
-    "day_other": "{{count}} days",
-    "hour_one": "{{count}} hour",
-    "hour_other": "{{count}} hours",
+    "day_one": "{{count}} jour",
+    "day_other": "{{count}} jours",
+    "hour_one": "{{count}} heure",
+    "hour_other": "{{count}} heures",
     "minute_one": "{{count}} minute",
     "minute_other": "{{count}} minutes",
     "time": "temps"
@@ -499,6 +576,157 @@
     "wallet": "portefeuille",
     "wallet_other": "portefeuilles"
   },
+  "widget_container": {
+    "empty_message": "Rien à afficher pour le moment.",
+    "empty_title": "Pas encore d’éléments",
+    "error_title": "Impossible de charger ce widget",
+    "loading": "Chargement",
+    "loading_message": "Récupération des dernières données publiques depuis le nœud Qortal par défaut.",
+    "retry": "Réessayer"
+  },
+  "quitter_feed": {
+    "error_generic": "Le flux public Quitter est temporairement indisponible. Réessayez dans un instant.",
+    "error_following": "Le flux Quitter personnalisé est temporairement indisponible. Veuillez réessayer.",
+    "error_timeout": "Échec du chargement du flux. Vous pouvez réessayer ou revenir au général.",
+    "loading_following": "Chargement du flux suivis…",
+    "loading_general": "Chargement du flux…",
+    "error_title_following": "Échec du chargement du flux",
+    "error_title_general": "Impossible de charger les publications",
+    "empty_title_no_name": "Connectez-vous pour personnaliser votre flux",
+    "empty_title_no_following": "Il semble que vous ne suiviez personne pour l’instant.",
+    "empty_title_no_posts": "Aucune publication des comptes suivis",
+    "empty_title_general": "Aucune publication disponible",
+    "empty_message_no_name": "Connectez-vous avec un nom Qortal pour créer un flux personnalisé.",
+    "empty_message_no_following": "Parcourez Quitter et suivez des comptes pour composer votre flux.",
+    "empty_message_no_posts": "Les comptes que vous suivez n’ont pas encore publié sur Quitter.",
+    "tab_general": "Général",
+    "tab_following": "Abonnements",
+    "subtitle_personalized": "Flux personnalisé",
+    "subtitle_public": "Flux public",
+    "retry_following": "Réessayer",
+    "retry_general": "Réessayer",
+    "return_to_general": "Retour au général",
+    "posts_showing_one": "{{count}} publication affichée",
+    "posts_showing_other": "{{count}} publications affichées",
+    "new_posts_one": "{{count}} nouvelle publication",
+    "new_posts_other": "{{count}} nouvelles publications"
+  },
+  "quick_tools_pad": {
+    "user_search": "Recherche d’utilisateur",
+    "wallets": "Portefeuilles",
+    "minting": "Minting",
+    "backup_wallet": "Sauvegarder le portefeuille",
+    "q_chat": "Q-Chat",
+    "notifications_enable": "Activer les notifications",
+    "notifications_mute": "Couper les notifications",
+    "apps": "Apps",
+    "extras": "",
+    "hint_notifications_desktop_only": "Cela désactive uniquement les alertes sur le bureau. Les notifications dans le concentrateur continuent.",
+    "hint_minting_panel": "Ce panneau se déverrouille quand vous êtes minter. Passez sur Q-Mintership pour commencer !",
+    "snackbar_backup_wallet": "Téléchargez le fichier de votre portefeuille. Il est nécessaire pour accéder à votre compte."
+  },
   "website": "site web",
-  "welcome": "accueillir"
+  "welcome": "accueillir",
+  "qortino_workspace": {
+    "modules_hotkeys_label": "Raccourcis",
+    "modules_hotkeys_description": "Raccourcis pour vos itinéraires les plus utilisés.",
+    "modules_music_label": "Lecteur musique",
+    "modules_music_description": "Un lecteur Earbump compact avec recherche et lecture rapide.",
+    "modules_suggest_label": "Suggérer un module",
+    "modules_suggest_description": "Rédiger > Ajouter sujet + message et envoyez-nous !",
+    "workspace_empty_prompt": "Choisissez ce qui s'affiche au-dessus de QORTINO.",
+    "workspace_header_hotkeys": "Raccourcis",
+    "workspace_header_music": "Lecteur musique",
+    "workspace_add_app": "Ajouter une app",
+    "getting_started_heading": "Pour commencer",
+    "onboarding_step_progress": "Étape {{current}} / {{total}}",
+    "dialog_module_title": "Choisir un module",
+    "dialog_module_subtitle": "Choisissez ce qui vit au-dessus de QORTINO.",
+    "dialog_hotkeys_title": "Sélectionner les raccourcis",
+    "dialog_hotkeys_subtitle": "Enregistré automatiquement pour ce compte.",
+    "dialog_music_search_title": "Rechercher Earbump",
+    "dialog_music_search_subtitle": "Trouvez un morceau, lisez-le et envoyez-le vers le lecteur ci-dessus.",
+    "search_placeholder_qapps": "Rechercher des Q-Apps",
+    "search_placeholder_tracks": "Rechercher morceaux ou artistes",
+    "section_recommended": "Recommandé",
+    "curated_badge": "[ CURATÉ ]",
+    "hotkeys_loading_library": "Chargement de la bibliothèque Q-Apps...",
+    "hotkeys_unavailable_title": "Q-Apps indisponibles",
+    "hotkeys_no_match_title": "Aucune Q-App ne correspond encore",
+    "hotkeys_no_match_hint": "Essayez un autre nom pour lier un raccourci à l’emplacement choisi.",
+    "error_hotkey_catalog": "Impossible de charger les Q-Apps pour le moment.",
+    "music_section_results": "Résultats",
+    "music_section_discovery": "Découverte",
+    "music_loading_search": "Recherche dans la bibliothèque EarBump...",
+    "music_loading_discovery": "Chargement de la découverte EarBump...",
+    "music_quiet_title": "EarBump est silencieux pour l'instant",
+    "music_no_tracks_title": "Aucun morceau trouvé",
+    "music_no_tracks_hint": "Essayez un autre titre ou artiste pour alimenter le lecteur.",
+    "error_earbump_discovery": "Impossible de charger EarBump pour le moment.",
+    "error_earbump_search": "Impossible de rechercher EarBump pour le moment.",
+    "music_syncing_library": "Synchronisation avec la bibliothèque EarBump...",
+    "music_empty_title": "Bibliothèque EarBump",
+    "music_empty_uploaded": "En attente de la bibliothèque",
+    "music_track_load_failed": "Ce morceau n'a pas pu finir de se charger sur votre nœud.",
+    "music_no_peers_data": "Aucun pair pour les données restantes",
+    "music_preparing_peers_one": "Préparation sur votre nœud... {{percent}}% ({{count}} pair)",
+    "music_preparing_peers_other": "Préparation sur votre nœud... {{percent}}% ({{count}} pairs)",
+    "music_preparing_percent_only": "Préparation sur votre nœud... {{percent}}%",
+    "music_searching_peers": "Recherche de pairs...",
+    "music_finalizing_track": "Finalisation du morceau sur votre nœud...",
+    "music_preparing_base": "Préparation sur votre nœud...",
+    "music_playback_stalled": "Lecture bloquée. Appuyez sur lecture pour réessayer.",
+    "music_stream_stalled": "Morceau bloqué. Reconstruction du flux...",
+    "hotkeys_launch_description": "Lancer {{appName}}",
+    "hotkeys_fallback_launch": "Lancer la Q-App",
+    "reaction_hotkeys_ready": "Panneau des raccourcis prêt.",
+    "reaction_music_panel_ready": "Panneau musique prêt.",
+    "reaction_panel_cleared": "Panneau effacé.",
+    "reaction_music_player_ready": "Lecteur musique prêt.",
+    "reaction_locked_track": "Verrouillé sur {{title}}.",
+    "reaction_track_rotation": "{{title}} est en rotation.",
+    "reaction_onboarding_route": "Parcours d’accueil ouvert. Je garde l’étape suivante au chaud.",
+    "reaction_support_chat": "Chat support ouvert. Demandez les 6 QORT et j’enchaîne avec l’étape deux.",
+    "reaction_q_trade_open": "Q-Trade est ouvert. Si vous prenez des QORT là, on avance ensemble.",
+    "reaction_name_flow": "Flux nom ouvert. C’est là que le hub vous reconnaît.",
+    "reaction_avatar_flow": "Flux avatar prêt. Donnez un visage à cet espace.",
+    "track_meta_separator": "·",
+    "a11y_clear_hotkey_slot": "Effacer l’emplacement {{n}}",
+    "runtime_workspace_bay_title": "Problème d’exécution dans la zone workspace.",
+    "runtime_workspace_bay_body": "QORTINO ci-dessous est toujours sûr. Rafraîchissez le Hub ; si ça persiste, nous tracerons le plantage depuis ici.",
+    "runtime_qortino_title": "QORTINO a rencontré un problème d’exécution.",
+    "runtime_qortino_body": "La zone workspace au-dessus est toujours sûre. Rafraîchissez le Hub ; si ça persiste, nous tracerons le plantage depuis ici.",
+    "hotkey_slot_number": "Emplacement {{n}}"
+  },
+  "bookmarks": {
+    "title": "Favoris",
+    "bookmarked": "En favori",
+    "add_page": "Ajouter la page",
+    "loading": "Chargement des favoris...",
+    "folder": "Dossier",
+    "create_folder": "Créer un dossier",
+    "folder_name": "Nom du dossier",
+    "new_folder": "Nouveau dossier",
+    "top_level": "Niveau supérieur",
+    "edit_bookmark": "Modifier le favori",
+    "add_bookmark": "Ajouter un favori",
+    "save_location_without_query": "Enregistre un emplacement de Q-App sans paramètres de requête.",
+    "name": "Nom",
+    "bookmark_name_placeholder": "Nom du favori",
+    "qortal_link": "Lien Qortal",
+    "qortal_link_placeholder": "qortal://APP/Nom/chemin",
+    "no_bookmarks": "Aucun favori pour le moment.",
+    "no_bookmarks_folder": "Aucun favori dans ce dossier.",
+    "bookmark_count_one": "{{count}} favori",
+    "bookmark_count_other": "{{count}} favoris",
+    "edit": "Modifier",
+    "move": "Déplacer",
+    "delete": "Supprimer",
+    "rename": "Renommer",
+    "remove": "Retirer",
+    "create": "Créer",
+    "more": "Plus",
+    "delete_folder_title": "Supprimer le dossier ?",
+    "delete_folder_message": "Les favoris de ce dossier seront déplacés au niveau supérieur."
+  }
 }
diff --git a/src/i18n/locales/fr/group.json b/src/i18n/locales/fr/group.json
index a10753b4..f56a3fad 100644
--- a/src/i18n/locales/fr/group.json
+++ b/src/i18n/locales/fr/group.json
@@ -28,6 +28,280 @@
     "select_group": "sélectionner un groupe",
     "visit_q_mintership": "visiter Q-Mintership"
   },
+  "dashboard": {
+    "qort_balance": "Solde QORT",
+    "node_status": "État du nœud",
+    "node_unavailable": "Nœud indisponible",
+    "sync_percent": "{{percent}}% synchronisé",
+    "minter_level": "Niveau de minter",
+    "peers": "Pairs",
+    "qdn": "QDN",
+    "core": "Core",
+    "hub": "Hub",
+    "node": "Nœud",
+    "using_node": "Nœud utilisé",
+    "change_node": "Changer de nœud",
+    "node_type": "Type de nœud",
+    "node_height": "Hauteur du nœud",
+    "local_node": "Nœud local",
+    "public_node": "Nœud public",
+    "custom_node": "Nœud personnalisé",
+    "synchronizing": "Synchronisation",
+    "fully_operational": "Entièrement opérationnel",
+    "not_operational": "Non opérationnel",
+    "attention_needed": "Attention requise",
+    "apply": "Demander",
+    "info_panel_status": "statut",
+    "info_panel_node_comment": "// infos_nœud",
+    "minter_pin_save_progress_default": "Enregistrer la barre de niveau comme vue par défaut",
+    "minter_pin_save_dots_default": "Enregistrer les points de minage comme vue par défaut",
+    "node_switch_error": "Impossible de changer de nœud pour le moment.",
+    "node_menu_local": "Nœud local",
+    "node_menu_public": "Nœud public",
+    "qortino_runtime_title": "Le conteneur de carte QORTINO a rencontré un problème d’exécution.",
+    "qortino_runtime_body": "Le reste du tableau de bord reste sécurisé. Actualisez le Hub et si cela persiste, signalez-le à l’équipe.",
+    "no_custom_nodes_saved": "Aucun nœud personnalisé enregistré",
+    "wallet_activity": "Activité du portefeuille",
+    "send": "Envoyer",
+    "receive": "Recevoir",
+    "buy": "Acheter",
+    "recent_transaction": "Transaction récente",
+    "loading_wallet_activity": "Chargement de l’activité du portefeuille...",
+    "sent_to": "envoyé à ",
+    "received_from": "reçu de ",
+    "no_wallet_activity": "Aucune nouvelle activité du portefeuille.",
+      "wallet_activity_window": "Dernière transaction au cours des 7 derniers jours",
+      "wallet_activity_unknown_address": "Adresse inconnue",
+      "wallet_activity_relative_just_now": "À l’instant",
+      "wallet_activity_relative_minutes_ago_one": "Il y a {{count}} minute",
+      "wallet_activity_relative_minutes_ago_other": "Il y a {{count}} minutes",
+      "wallet_activity_relative_hours_ago_one": "Il y a {{count}} heure",
+      "wallet_activity_relative_hours_ago_other": "Il y a {{count}} heures",
+      "wallet_activity_relative_days_ago_one": "Il y a {{count}} jour",
+      "wallet_activity_relative_days_ago_other": "Il y a {{count}} jours",
+      "open_in_q_chat": "Ouvrir dans Q-Chat",
+    "open_in_q_apps": "Ouvrir dans Q-Apps",
+    "quitter_feed": "Fil Quitter",
+    "quitter_show_more": "Voir plus",
+    "quitter_show_less": "Voir moins",
+    "quitter_video_attachment": "Vidéo jointe",
+    "quitter_video_preview_hub": "L’aperçu reste en lecture seule dans Hub",
+    "featured_q_apps": "Q-Apps en vedette",
+    "featured_q_apps_subtitle": "Lancez des apps communautaires fiables directement depuis votre tableau de bord.",
+    "explore_all_q_apps": "Explorer toutes les Q-Apps",
+    "reduce_motion": "Réduire les animations",
+    "account_overview": "Vue du compte",
+    "qortal_name_address": "NOM ET ADRESSE QORTAL",
+    "profile": "Profil",
+    "profile_settings": "Paramètres du profil",
+    "profile_settings_description": "Vérifiez votre nom et votre identité de compte.",
+    "security": "Sécurité",
+    "security_settings": "Paramètres de sécurité",
+    "security_settings_description": "Révélez et copiez votre clé privée uniquement si c’est absolument nécessaire.",
+    "developer": "Développeur",
+    "developer_settings": "Paramètres développeur",
+    "developer_settings_description": "Activez les outils de développement et le diagnostic pour des tests avancés.",
+    "system": "Système",
+    "system_settings": "Paramètres système",
+    "system_settings_description": "Contrôlez les notifications, les animations, les apps épinglées et les comptes bloqués.",
+    "current_name": "Nom actuel",
+    "no_name_registered": "Aucun nom enregistré",
+    "wallet_address": "Adresse du wallet",
+    "unavailable": "Indisponible",
+    "no_active_wallet": "Aucun wallet actif",
+    "names_qapp_actions_hint": "Les achats, ventes et changements de nom doivent être faits dans la Q-App Names.",
+    "open_the": "Ouvrez la",
+    "names": "Names",
+    "names_qapp_hint_suffix": "Q-App pour acheter, vendre ou changer votre nom enregistré.",
+    "private_key_warning": "Ne partagez jamais votre clé privée. Quiconque la possède pourrait contrôler ce wallet et ses fonds.",
+    "wallet_password": "Mot de passe du wallet",
+    "wallet_password_placeholder": "Entrez le mot de passe du wallet",
+    "decrypt": "Déchiffrer",
+    "copy_key": "Copier la clé",
+    "private_key": "Clé privée",
+    "private_key_hint": "Déchiffrez votre clé privée uniquement pour récupérer ou migrer ce wallet.",
+    "notifications_update_error": "Impossible de mettre à jour les notifications des apps pour le moment.",
+    "wallet_unavailable_error": "Les données du wallet sont indisponibles pour le moment.",
+    "wallet_password_required": "Entrez le mot de passe du wallet pour déchiffrer la clé privée.",
+    "wallet_decrypt_error_with_message": "Impossible de déchiffrer votre wallet : {{message}}",
+    "wallet_decrypt_error": "Impossible de déchiffrer votre wallet avec ce mot de passe.",
+    "private_key_copied": "Clé privée copiée dans le presse-papiers.",
+    "enable_dev_mode": "Activer le mode dev",
+    "enable_dev_mode_desc": "Débloquez les surfaces de développement locales, le diagnostic et les outils de test dans le Hub.",
+    "dev_mode_tip": "Astuce : une fois activé, une nouvelle icône Outils développeur apparaîtra dans la barre latérale. Essayez peut-être de survoler le bord gauche pour la voir.",
+    "reduce_app_notifications": "Réduire les notifications d’apps",
+    "reduce_app_notifications_desc": "Activez pour couper les notifications push bureau. Laissez désactivé pour les alertes normales du Hub.",
+    "reduce_ui_animations": "Réduire les animations de l’interface",
+    "reduce_ui_animations_desc": "Activez pour réduire les animations dans le Hub. Laissez désactivé pour l’interface animée habituelle.",
+    "pinned_qapp_backup": "Sauvegarde des Q-Apps épinglées",
+    "pinned_qapp_backup_desc": "Enregistrez vos Q-Apps épinglées dans les paramètres QDN chiffrés pour que la même disposition vous suive sur vos appareils.",
+    "manage_backup": "Gérer la sauvegarde",
+    "block_list": "Liste de blocage",
+    "block_list_desc": "Consultez les noms et adresses bloqués, puis débloquez les comptes quand vous le souhaitez.",
+    "blocked_count": "{{count}} bloqués",
+    "addresses": "Adresses",
+    "unblock": "Débloquer",
+    "no_blocked_accounts": "Aucun compte bloqué pour le moment.",
+    "show_receive_qr": "Afficher le QR de réception",
+    "copy_address": "Copier l’adresse",
+    "privacy_mode_tooltip": "Confidentialité : floute les infos sensibles pour le partage d’écran",
+    "toggle_privacy_mode": "Activer ou désactiver le mode confidentialité",
+    "send_qort": "Envoyer QORT",
+    "send_qort_subtitle": "Transférez QORT vers un nom enregistré ou une adresse.",
+    "close_send_qort_modal": "Fermer la fenêtre d’envoi de QORT",
+    "receive_qort": "Recevoir QORT",
+    "receive_qort_subtitle": "Scannez pour recevoir QORT",
+    "close_receive_qort_modal": "Fermer la fenêtre de réception de QORT",
+    "download_qr": "Télécharger le QR",
+    "qortal_address_or_name": "Adresse Qortal ou nom enregistré",
+    "blocked": "Bloqués",
+    "account_status_online": "En ligne",
+    "account_status_busy": "Occupé",
+    "account_status_invisible": "Invisible",
+    "account_settings_tooltip": "Paramètres du compte",
+    "open_account_settings_aria": "Ouvrir les paramètres du compte",
+    "name_change_confirm": "Changer votre nom enregistré de {{oldName}} à {{newName}} ?",
+    "name_change_success": "Changement de nom envoyé avec succès.",
+    "name_change_register_first": "Enregistrez d’abord un nom avant de le modifier.",
+    "name_change_enter_new_name": "Saisissez le nouveau nom que vous souhaitez utiliser.",
+    "name_change_different_from_current": "Choisissez un nom différent de l’actuel.",
+    "name_change_details_still_loading": "Chargement des détails du nom en cours. Réessayez dans un instant.",
+    "name_change_choose_available": "Choisissez un nom disponible avant de continuer.",
+    "name_change_wallet_password_required": "Saisissez le mot de passe du portefeuille avant de changer le nom.",
+    "name_change_wallet_password_failed": "Impossible de vérifier le mot de passe du portefeuille.",
+    "current_name_details_load_failed": "Impossible de charger les détails de votre nom actuel.",
+    "name_change_unknown_error": "Une erreur s’est produite lors du changement de nom.",
+    "name_availability_available": "Ce nom est disponible.",
+    "name_availability_checking": "Vérification de la disponibilité du nom...",
+    "name_availability_same_as_current": "Choisissez un nom différent de celui que vous utilisez déjà.",
+    "name_availability_taken": "Ce nom est déjà pris."
+  },
+  "groups_widget": {
+    "accept": "Accepter",
+    "approve": "Approuver",
+    "cancel": "Annuler",
+    "characters_count": "{{current}}/{{max}}",
+    "confirm_approve_request": "Approuver cette demande et les inviter dans le groupe ?",
+    "confirm_join_group": "Rejoindre ce groupe maintenant ?",
+    "confirm_join_promoted_closed": "Envoyer une demande d’adhésion à ce groupe promu ?",
+    "confirm_join_promoted_open": "Rejoindre ce groupe promu maintenant ?",
+    "connecting": "Connexion...",
+    "discover_groups": "Découvrir des groupes",
+    "error_accept_invite": "Impossible d’accepter cette invitation pour le moment.",
+    "error_approve_request": "Impossible d’approuver cette demande pour le moment.",
+    "error_load_invites": "Impossible de charger les invitations de groupe pour le moment.",
+    "error_load_promotions": "Impossible de charger les groupes promus pour le moment.",
+    "error_load_requests": "Impossible de charger les demandes d’adhésion pour le moment.",
+    "error_promoted": "Impossible d’agir sur ce groupe promu pour le moment.",
+    "error_publish_promotion": "Impossible de publier cette promotion pour le moment.",
+    "fresh_promotion_snippet": "Ce groupe a une mise en avant promotionnelle récente.",
+    "from_label": "de",
+    "group_admin_only": "Administrateurs du groupe uniquement",
+    "group_general": "Général",
+    "group_named": "Groupe {{id}}",
+    "ignore": "Ignorer",
+    "invitation_ready": "Invitation prête à examiner",
+    "invite_hidden": "Invitation masquée dans ce widget pour l’instant.",
+    "invites_empty_description": "Les nouvelles invitations de groupe apparaîtront ici à leur arrivée.",
+    "invites_empty_title": "Aucune invitation en attente",
+    "joined_group": "Vous avez rejoint {{name}}.",
+    "joined_promoted": "Vous avez rejoint {{name}}.",
+    "join_group": "Rejoindre le groupe",
+    "join_request_sent": "Demande d’adhésion envoyée pour {{name}}.",
+    "loading_invites": "Chargement des invitations",
+    "loading_notifications": "Chargement des notifications",
+    "loading_promoted": "Chargement des groupes promus",
+    "loading_requests": "Chargement des demandes",
+    "members_count": "{{count}} membres",
+    "new_encrypted_message": "Nouveau message chiffré",
+    "notifications_empty_message": "Rejoignez des communautés dans Q-Chat pour alimenter ce fil avec des messages de groupe, des mentions et de l’activité.",
+    "notifications_empty_title": "Commencez avec les groupes Q-Chat",
+    "open": "Ouvrir",
+    "open_conversation": "Ouvrir la conversation",
+    "private_group": "Groupe privé",
+    "private_group_invite": "Invitation à un groupe privé",
+    "processing": "Traitement...",
+    "promoted_by": "Promu par {{name}}",
+    "promoted_empty_message": "Les groupes promus apparaîtront ici lorsque de nouveaux contenus seront disponibles.",
+    "promoted_empty_title": "Aucun groupe promu",
+    "promote_dialog_fee": " Frais de publication : {{fee}} QORT.",
+    "promote_dialog_intro": "Partagez une courte mise en avant pour l’un de vos groupes où vous êtes admin.",
+    "promote_group": "Promouvoir le groupe",
+    "promote_page_title": "Promouvoir l’un de vos groupes",
+    "promotion_published": "Promotion de groupe publiée.",
+    "promotion_placeholder": "Rédigez une courte promotion pour ce groupe.",
+    "public_group": "Groupe public",
+    "refresh": "Actualiser",
+    "reject": "Refuser",
+    "request_access": "Demander l’accès",
+    "request_approved": "{{requester}} a été approuvé pour {{group}}.",
+    "request_removed": "Demande retirée de ce widget pour l’instant.",
+    "request_sent": "Demande envoyée",
+    "requests_empty_description": "Les demandes d’adhésion des groupes que vous gérez apparaîtront ici.",
+    "requests_empty_title": "Aucune demande en attente",
+    "select_admin_group": "Sélectionnez un groupe dont vous êtes administrateur",
+    "tab_invites": "Invitations",
+    "tab_notifications": "Notifications",
+    "tab_promoted": "Promus",
+    "tab_requests": "Demandes",
+    "unknown": "Inconnu",
+    "view_conversation": "Voir la conversation",
+    "wants_to_join": "Souhaite rejoindre ce groupe.",
+    "you": "Vous",
+    "publish": "Publier"
+  },
+  "subscription": {
+    "subscriptions": "abonnements",
+    "tooltip_actions_needed_one": "{{title}} - {{count}} action requise",
+    "tooltip_actions_needed_other": "{{title}} - {{count}} actions requises",
+    "relative_soon": "bientôt",
+    "relative_in_minutes_one": "dans {{count}} min",
+    "relative_in_minutes_other": "dans {{count}} min",
+    "relative_in_hours_one": "dans {{count}} heure",
+    "relative_in_hours_other": "dans {{count}} heures",
+    "relative_in_days_one": "dans {{count}} jour",
+    "relative_in_days_other": "dans {{count}} jours",
+    "relative_in_months_one": "dans {{count}} mois",
+    "relative_in_months_other": "dans {{count}} mois",
+    "row_fallback_title": "abonnement",
+    "by_creator": "par {{name}}",
+    "creator_fallback": "créateur Qortal",
+    "price_line": "{{price}} QORT / {{interval}}",
+    "expires_suffix": " - expire {{time}}",
+    "status_due": "à payer",
+    "status_active": "actif",
+    "status_owner": "propriétaire",
+    "managed_fallback": "abonnement géré",
+    "members_one": "{{count}} membre",
+    "members_other": "{{count}} membres",
+    "join_requests_suffix_one": " - {{count}} demande d’adhésion",
+    "join_requests_suffix_other": " - {{count}} demandes d’adhésion",
+    "re_encryption_suffix": " - recryptage nécessaire",
+    "actions_badge_one": "{{count}} action",
+    "actions_badge_other": "{{count}} actions",
+    "loading": "chargement des abonnements",
+    "section_needs_action": "action requise",
+    "section_active": "actifs",
+    "open_subscriptions": "ouvrir les abonnements",
+    "empty_title": "Découvrez les Q-Apps par abonnement",
+    "empty_body": "Abonnez-vous aux créateurs et communautés via des Q-Apps compatibles abonnements, comme SubWire.",
+    "open_subwire": "ouvrir SubWire",
+    "tab_subscriptions": "Abonnements",
+    "tab_subwire": "SubWire"
+  },
+  "group_invites": {
+    "empty_title": "aucune invitation",
+    "empty_secondary_1": "vous n’avez pas d’invitations en attente",
+    "empty_secondary_2": "pour le moment.",
+    "empty_tertiary_no_groups": "vous ne faites encore partie d’aucun groupe.",
+    "cta_find_groups": "trouver des groupes"
+  },
+  "group_join_requests": {
+    "empty_title": "aucune demande d’adhésion",
+    "empty_secondary_1": "vous n’avez pas de demandes en attente",
+    "empty_secondary_2": "pour le moment.",
+    "empty_tertiary_no_admin_groups": "vous n’administrez encore aucun groupe."
+  },
   "advanced_options": "options avancées",
   "block_delay": {
     "minimum": "délai minimum de bloc",
@@ -72,6 +346,8 @@
     "generic": {
       "avatar_publish_fee": "la publication d’un avatar coûte {{ fee }}",
       "avatar_registered_name": "un nom enregistré est requis pour définir un avatar",
+      "add_new_key_option": "Ajouter une nouvelle clé",
+      "add_new_key_sparingly": "Ajoutez une nouvelle clé avec parcimonie pour éviter d'augmenter la taille des clés du groupe.",
       "admin_only": "seuls les groupes dont vous êtes admin seront affichés",
       "already_in_group": "vous êtes déjà dans ce groupe !",
       "block_delay_minimum": "délai minimum de bloc pour les validations de transactions de groupe",
@@ -105,6 +381,7 @@
       "node_minting_key": "vous avez déjà une clé de minage attachée à ce nœud",
       "no_announcement": "aucune annonce",
       "no_display": "rien à afficher",
+      "no_description": "Aucune description",
       "no_selection": "aucun groupe sélectionné",
       "not_part_group": "vous ne faites pas partie du groupe chiffré. Attendez qu’un admin rechiffre les clés.",
       "only_encrypted": "seuls les messages non chiffrés seront affichés.",
@@ -170,5 +447,11 @@
       "user_joined": "utilisateur ajouté avec succès !"
     }
   },
+  "context_menu": {
+    "mark_as_read": "Marquer comme lu",
+    "mute_push_notifications": "Couper les notifications push",
+    "unmute_push_notifications": "Réactiver les notifications push",
+    "mark_all_read": "Tout marquer comme lu"
+  },
   "thread_posts": "nouveaux messages du fil"
 }
diff --git a/src/i18n/locales/fr/node.json b/src/i18n/locales/fr/node.json
index 7e77fd82..75736dfd 100644
--- a/src/i18n/locales/fr/node.json
+++ b/src/i18n/locales/fr/node.json
@@ -40,7 +40,8 @@
     "invalidKey": "clé API invalide",
     "failed_stop": "impossible d’arrêter le Core",
     "failed_bootstrap": "impossible d’initialiser",
-    "failed_delete": "impossible de supprimer la base de données"
+    "failed_delete": "impossible de supprimer la base de données",
+    "failed_bootstrap_or_clear": "impossible de bootstrapper, d’effacer les données de chaîne ou de démarrer le Core"
   },
   "status": {
     "complete": "terminé",
@@ -81,7 +82,12 @@
   "confirmations": {
     "stop": "êtes-vous sûr de vouloir arrêter le Core ?",
     "bootstrap": "êtes-vous sûr de vouloir initialiser ?",
-    "delete": "êtes-vous sûr de vouloir supprimer la base de données ?"
+    "delete": "êtes-vous sûr de vouloir supprimer la base de données ?",
+    "bootstrapOrClearChain": "Effectue une initialisation depuis un instantané si le Core fonctionne localement. Sinon ou en cas d’échec, la base chaîne locale peut être supprimée et le Core peut redémarrer ; les fichiers portefeuille ne sont pas modifiés. Continuer ?"
+  },
+  "bootstrapChainHelp": {
+    "title": "Initialiser la chaîne",
+    "body": "Un seul outil : bootstrap par instantané quand le Core répond, ou effacer la base chaîne locale et relancer le Core si le bootstrap est impossible. Votre portefeuille reste séparé."
   },
   "stop": "arrêter le Core",
   "bootstrap": "initialiser",
@@ -89,6 +95,53 @@
   "more": "plus d’options",
   "less": "moins d’options",
   "enableAuthWhenSyncing": "activer l'authentification lors de la synchronisation",
+  "coreSetupDialog": {
+    "title": "Configurer Qortal Core",
+    "introTitle": "Exécutez votre propre nœud localement.",
+    "introSubtitle": "Vous pouvez utiliser un nœud public pendant que Core démarre et se synchronise.",
+    "publicNodeUnavailable": "Les nœuds publics sont indisponibles pour le moment. Gardez cet écran ouvert pendant que le Core local démarre et se synchronise.",
+    "steps": {
+      "downloadDone": "Core téléchargé",
+      "downloadActive": "Téléchargement de Core",
+      "downloadIdle": "Télécharger Core",
+      "runningDone": "Core en cours d'exécution",
+      "runningActive": "Démarrage de Core",
+      "runningIdle": "Démarrer Core"
+    },
+    "readyToDownload": "Prêt à télécharger",
+    "readyToStart": "Prêt à démarrer",
+    "syncing": "Synchronisation",
+    "helpers": {
+      "downloadDone": "Les fichiers Core sont installés et prêts.",
+      "downloadActive": "Téléchargement et préparation de Qortal Core.",
+      "downloadIdle": "Téléchargez Qortal Core pour exécuter votre propre nœud.",
+      "runningDoneSyncing": "Core s'exécute et synchronise les données de la blockchain.",
+      "runningDone": "Core s'exécute localement.",
+      "runningWaiting": "Core démarrera et se synchronisera en arrière-plan.",
+      "runningBlocked": "Disponible après le téléchargement de Core."
+    },
+    "nextStepPill": "Étape suivante",
+    "locationTitle": "Emplacement de Core",
+    "locationCustom": "Qortal Core s'exécutera depuis ce dossier.",
+    "locationDefault": "Qortal Core utilisera le dossier par défaut de ce système.",
+    "locationPathDefault": "Emplacement par défaut de Qortal Core",
+    "change": "Modifier",
+    "choose": "Choisir",
+    "clear": "Effacer",
+    "advancedTitle": "Avancé",
+    "advancedSubtitle": "Outils et options avancés pour Core.",
+    "maintenanceUnavailable": "Les outils de maintenance de Core ne sont pas disponibles pendant le démarrage ou la synchronisation de Core.",
+    "stopCoreTitle": "Arrêter Core",
+    "stopCoreBody": "Arrête le processus Core local.",
+    "stopButton": "Arrêter",
+    "cancel": "Annuler",
+    "actionDownload": "Télécharger Core",
+    "actionStart": "Démarrer Core",
+    "actionDone": "Terminé",
+    "confirmTitle": "Confirmer l'action",
+    "folderCopied": "Dossier Core copié",
+    "progressAriaLabel": "Progression : {{label}}"
+  },
   "NotFullyStarted": {
     "titleNotReady": "Core n'est pas complètement démarré",
     "descNotReady": "Qortal Core n'est pas encore complètement démarré. Veuillez patienter.",
diff --git a/src/i18n/locales/fr/question.json b/src/i18n/locales/fr/question.json
index 3d5a6560..712ab785 100644
--- a/src/i18n/locales/fr/question.json
+++ b/src/i18n/locales/fr/question.json
@@ -152,8 +152,12 @@
     "invite": "Souhaitez-vous autoriser cette application à inviter {{ invitee }} ?",
     "kick": "Souhaitez-vous autoriser cette application à exclure {{ partecipant }} du groupe ?",
     "leave_group": "Souhaitez-vous autoriser cette application à quitter le groupe suivant ?",
-    "list_hosted_data": "Souhaitez-vous autoriser cette application à obtenir une liste de vos données hébergées ?",
-    "order_detail": "{{ qort_amount }} QORT pour {{ foreign_amount }} {{ ticker }}",
+      "list_hosted_data": "Souhaitez-vous autoriser cette application à obtenir une liste de vos données hébergées ?",
+      "notification": "autoriser cette application à vous envoyer des notifications du hub ?",
+      "notification_allow": "autoriser",
+      "notification_dont_allow": "ne pas autoriser",
+      "notification_title": "notifications {{ appName }}",
+      "order_detail": "{{ qort_amount }} QORT pour {{ foreign_amount }} {{ ticker }}",
     "pay_publish": "Souhaitez-vous autoriser cette application à effectuer les paiements et publications suivants ?",
     "perform_admin_action_with_value": "avec la valeur : {{ value }}",
     "perform_admin_action": "Souhaitez-vous autoriser cette application à exécuter l'action d'administration : {{ type }} ?",
diff --git a/src/i18n/locales/fr/tutorial.json b/src/i18n/locales/fr/tutorial.json
index 7096c7c8..0f63710c 100644
--- a/src/i18n/locales/fr/tutorial.json
+++ b/src/i18n/locales/fr/tutorial.json
@@ -33,6 +33,7 @@
     "get_six_qorts_way3_action": "Ouvrir Q-Trade",
     "register_name": "Enregistrez votre nom",
     "confirming_transaction": "Confirmation de la transaction",
+    "confirming": "Confirmation",
     "load_avatar": "Chargez votre avatar",
     "explore_apps": "Explorer les applications vedettes",
     "done": "Terminé",
@@ -53,6 +54,17 @@
     "devnet_testing_desc": "Testez vos Q-Apps dans l'environnement DevNet-Testing",
     "open_app": "Ouvrir",
     "address_copied": "Adresse copiée dans le presse-papiers",
-    "group_activity": "Activité de groupe"
+    "group_activity": "Activité de groupe",
+    "get_qorts_workspace_hint": "Débloquez vos 6 premiers QORT pour activer le reste de la configuration.",
+    "register_name_workspace_hint": "Un nom enregistré fait de ce compte une identité reconnaissable.",
+    "load_avatar_workspace_hint": "Donnez un visage au tableau de bord pour que l’espace vous ressemble.",
+    "onboarding_transition_hard_part_done": "Bon travail. La partie la plus difficile est faite.",
+    "onboarding_transition_one_more": "Super. Encore une étape.",
+    "onboarding_press_next_when_ready": "Bon travail. La partie la plus difficile est faite. Appuyez sur Suivant quand vous êtes prêt.",
+    "register_name_pending_hint": "Enregistrement du nom on-chain. Cela peut prendre un instant.",
+    "persistent_guide_get_qorts": "Commençons par 6 QORT. Choisissez une option ci-dessus.",
+    "persistent_guide_register_name": "Ensuite, enregistrez votre nom.",
+    "persistent_guide_load_avatar": "Enfin, ajoutez votre avatar.",
+    "post_onboarding_workspace_ready": "Tout est prêt. Vous pouvez composer votre workspace au-dessus."
   }
 }
diff --git a/src/i18n/locales/it/auth.json b/src/i18n/locales/it/auth.json
index 6808a619..c7eb4d97 100644
--- a/src/i18n/locales/it/auth.json
+++ b/src/i18n/locales/it/auth.json
@@ -74,14 +74,18 @@
       "set_apikey": "impossibile impostare la chiave API:"
     },
     "generic": {
+      "block_list_intro": "Aggiungi un nome Qortal o un indirizzo per bloccarli. Gli indirizzi influenzano le transazioni; bloccare un nome nasconde i suoi dati in tutto il Hub.",
       "blocked_addresses": "indirizzi bloccati: l'elaborazione dei blocchi di TXS",
+      "blocked_addresses_hint": "Blocca l'elaborazione legata alle transazioni provenienti da questi indirizzi.",
       "blocked_names": "nomi bloccati per QDN",
-      "blocking": "blocking {{ name }}",
+      "blocked_names_hint": "Questi nomi sono bloccati per dati QDN/Hub e funzioni sociali.",
+      "blocking": "blocco di {{ name }}",
       "choose_block": "scegli 'Blocca TXS' o 'Tutti' per bloccare i messaggi di chat",
       "congrats_setup": "congratulazioni, tutto è stato impostato!",
       "decide_block": "decidi cosa bloccare",
       "downloading_encryption_keys": "scaricamento chiavi di crittazione",
       "name_address": "nome o indirizzo",
+      "no_blocked_users": "Nessuno è ancora bloccato. Aggiungi sopra indirizzo o nome per silenziare qualcuno.",
       "no_account": "nessun account salvato",
       "no_minimum_length": "non esiste un requisito di lunghezza minima",
       "no_secret_key_published": "nessuna chiave segreta ancora pubblicata",
@@ -116,7 +120,7 @@
   "note": "nota",
   "password": "password",
   "password_confirmation": "conferma password",
-  "seed_phrase": "seed phrase",
+  "seed_phrase": "frase di recupero",
   "seed_your": "la tua seed phrase",
   "tips": {
     "additional_wallet": "usa quest'opzione per collegare ulteriori portafogli Qortal già creati, per potervi accedere in seguito. Avrai bisogno di accedere al tuo file JSON di backup.",
@@ -142,6 +146,158 @@
   },
   "welcome": "benvenuto in",
   "store_account": "salva account nell'Hub",
+  "create_wallet": {
+    "error_enter_password": "Inserisci una password del wallet.",
+    "error_confirm_password": "Conferma la password del wallet.",
+    "error_passwords_mismatch": "Le password non corrispondono.",
+    "success_wallet_saved": "Wallet salvato",
+    "success_account_created": "Account creato",
+    "success_ready_hub": "Ora puoi entrare nell'Hub.",
+    "success_backup_before_hub": "Esegui il backup del wallet crittografato prima di entrare nell'Hub.",
+    "enter_hub": "Entra nell'Hub",
+    "download_another_copy": "Scarica un'altra copia",
+    "backup_wallet": "Backup wallet",
+    "backup_encrypted_notice": "Questo backup è crittografato con la password del wallet.",
+    "seed_title": "La tua seed phrase",
+    "seed_subtitle": "Può recuperare il tuo account. Salvare la seed phrase è facoltativo. Subito dopo c'è il backup crittografato del wallet: il modo consigliato per recuperare l'account.",
+    "reveal": "Mostra",
+    "copied": "Copiato",
+    "copy": "Copia",
+    "export": "Esporta",
+    "seed_warning": "Non condividerla mai. Chi la possiede può accedere al tuo account. Per l'uso quotidiano, usa il backup crittografato dopo la creazione.",
+    "create_account": "Crea account",
+    "password_title": "Crea password",
+    "password_subtitle": "Questa password protegge il tuo account su questo dispositivo.",
+    "wallet_password": "Password del wallet",
+    "confirm_password": "Conferma password",
+    "save_account_in_hub": "Salva account nell'Hub",
+    "continue": "Continua"
+  },
+  "import_account": {
+    "title": "Importa account",
+    "subtitle": "Scegli come ripristinare il tuo account."
+  },
+  "backup_wallet_modal": {
+    "subtitle": "Scarica un file locale del wallet così puoi ripristinare questo account più tardi.",
+    "info_note": "Esporta un file del wallet sul dispositivo. Conservalo in un luogo sicuro.",
+    "current_password": "Password attuale",
+    "keep_password_in_export": "Mantieni la password attuale nel file del wallet esportato",
+    "new_password_for_backup": "Nuova password per questo backup",
+    "download_wallet_file": "Scarica il file del wallet",
+    "error_no_active_wallet": "Nessun wallet attivo trovato per il backup.",
+    "error_unable_to_create_backup": "Impossibile creare il backup del wallet."
+  },
+  "wallet_errors": {
+    "unable_to_unlock_default": "impossibile sbloccare questo wallet.",
+    "unable_to_save_backup": "impossibile salvare questo backup del wallet.",
+    "unable_to_prepare_backup": "impossibile preparare questo backup del wallet.",
+    "account_not_found": "questo account salvato non è stato trovato. scegli un altro account o ripristina questo wallet da un backup.",
+    "account_incomplete": "questo account salvato sembra incompleto o danneggiato. scegli un altro account o ripristina questo wallet da un backup.",
+    "invalid_security_data": "questo account salvato contiene dati di sicurezza del wallet non validi. scegli un altro account o ripristina questo wallet da un backup.",
+    "missing_encrypted_seed": "a questo account salvato manca il seed crittografato (i dati bloccati del wallet necessari per sbloccarlo). scegli un altro account o ripristina questo wallet da un backup.",
+    "missing_field": "a questo account salvato manca {{field}}. scegli un altro account o ripristina questo wallet da un backup.",
+    "field": {
+      "address0": "indirizzo del wallet",
+      "encryptedSeed": "seed crittografato (i dati bloccati necessari per sbloccare il wallet)",
+      "iv": "dati di crittografia del wallet",
+      "kdfThreads": "impostazioni password del wallet",
+      "mac": "controllo integrità del wallet",
+      "salt": "dati di sicurezza della password del wallet",
+      "version": "versione del wallet"
+    }
+  },
+  "connection_mode": {
+    "title": "Modalità di connessione",
+    "subtitle": "Scegli come Qortal si collega alla rete.",
+    "local_title": "Nodo locale",
+    "recommended": "Consigliato",
+    "local_full_decentralized": "Accesso completamente decentralizzato",
+    "local_faster": "Prestazioni migliori",
+    "local_data_local": "I tuoi dati restano locali",
+    "public_title": "Nodo pubblico",
+    "public_quick": "Accesso rapido",
+    "public_limited_decentralization": "Decentralizzazione limitata",
+    "public_shared_infrastructure": "Infrastruttura condivisa",
+    "status_running": "Core in esecuzione",
+    "status_missing": "Core non rilevato",
+    "status_checking": "Verifica del nodo locale",
+    "section_custom_nodes": "Nodi personalizzati",
+    "add_custom_node": "Aggiungi nodo personalizzato",
+    "empty_custom_nodes": "Nessun nodo personalizzato salvato",
+    "manual_setup_link": "Configurazione manuale del nodo",
+    "save_settings": "Salva impostazioni",
+    "manual_edit_title": "Modifica nodo personalizzato",
+    "manual_add_title": "Configurazione manuale del nodo",
+    "field_name": "Nome",
+    "placeholder_node_name": "Il mio nodo Qortal",
+    "field_node_url": "URL del nodo",
+    "placeholder_node_url": "https://127.0.0.1:12391",
+    "field_api_key_optional": "Chiave API (facoltativa)",
+    "placeholder_api_key": "Inserisci chiave API",
+    "reload_after_new_node_title": "Aggiornamento necessario",
+    "reload_after_new_node_message": "Hai aggiunto un nuovo nodo; è necessario aggiornare l’app.",
+    "reload_after_new_node_button": "Ricarica app"
+  },
+  "intro_features": {
+    "secure_title": "Sicuro e privato",
+    "secure_text": "Le tue chiavi, i tuoi dati, sempre sotto il tuo controllo.",
+    "fast_title": "Accesso rapido",
+    "fast_text": "Sblocca e accedi subito alla tua esperienza Qortal.",
+    "decentralized_title": "Decentralizzato",
+    "decentralized_text": "Connettiti alla rete alle tue condizioni.",
+    "built_title": "Fatto per te",
+    "built_text": "Un account. Infinite possibilità."
+  },
+  "entry": {
+    "title": "Entra in Qortal",
+    "subtitle": "Accedi o crea il tuo account.",
+    "create_account": "Crea account",
+    "import_account": "Importa account",
+    "no_accounts": "Nessun account trovato su questo dispositivo.",
+    "import_choice_backup_title": "File di backup",
+    "import_choice_backup_description": "Importa un backup Hub salvato.",
+    "import_choice_authenticate_title": "Autenticati ora",
+    "import_choice_authenticate_description": "Usa un file di backup senza salvarlo.",
+    "import_choice_seed_title": "Frase seed",
+    "import_choice_seed_description": "Ripristina usando la tua frase seed.",
+    "import_backup_heading": "Importa da file di backup",
+    "import_backup_drop_hint": "Trascina il file di backup o clicca per selezionarlo.",
+    "import_authenticate_heading": "Autenticati da file di backup",
+    "import_authenticate_drop_hint": "Trascina un file di backup o clicca per selezionarlo. Non verrà salvato su questo dispositivo.",
+    "import_seed_label": "Frase seed",
+    "import_seed_placeholder": "Inserisci la tua frase seed",
+    "import_wallet_password": "Password del wallet",
+    "importing_account": "Importazione account...",
+    "seed_import_error": "Impossibile importare questa frase seed.",
+    "seed_import_duplicate": "Questo account è già salvato su questo dispositivo.",
+    "seed_import_success": "Account importato correttamente.",
+    "import_backup_success_one": "{{count}} account importato correttamente.",
+    "import_backup_success_other": "{{count}} account importati correttamente.",
+    "import_backup_duplicate": "Questi account sono già salvati su questo dispositivo.",
+    "import_backup_invalid": "Questo file di backup non contiene un account valido.",
+    "import_file_read_aborted": "Lettura del file annullata",
+    "import_file_read_failed": "Lettura del file non riuscita",
+    "filter_accounts_aria": "Filtra account per indirizzo, nome primario o nota",
+    "filter_placeholder": "Indirizzo, nome primario o nota…",
+    "filter_no_results": "Nessun account corrisponde.",
+    "filter_clear": "Cancella ricerca",
+    "wallet_edit_name_label": "Nome",
+    "wallet_edit_account_name_placeholder": "Nome account",
+    "wallet_edit_note_label": "Nota",
+    "wallet_edit_note_placeholder": "Nota (opzionale)",
+    "wallet_edit_remove": "Rimuovi",
+    "wallet_edit_save": "Salva",
+    "wallet_edit_aria_label": "Modifica nome e nota dell’account"
+  },
+  "authentication_form": {
+    "unnamed_account": "Account senza nome",
+    "password_placeholder": "Inserisci la password",
+    "unlock": "Sblocca",
+    "choose_another_account": "Scegli un altro account",
+    "using_local_node": "Nodo locale",
+    "using_public_node": "Nodo pubblico",
+    "using_custom_node": "Nodo personalizzato"
+  },
   "temp_auth": {
     "tooltip": "autenticarsi senza salvare l'account nell'Hub",
     "button": "auth. temporanea"
diff --git a/src/i18n/locales/it/core.json b/src/i18n/locales/it/core.json
index 65a47e5e..b9cfe231 100644
--- a/src/i18n/locales/it/core.json
+++ b/src/i18n/locales/it/core.json
@@ -7,6 +7,7 @@
     "add_custom_framework": "aggiungi framework personalizzato",
     "add_reaction": "aggiungi reazione",
     "add_theme": "aggiungi tema",
+    "back": "indietro",
     "backup_account": "account di backup",
     "backup_wallet": "wallet di backup",
     "cancel": "cancella",
@@ -51,7 +52,7 @@
     "join": "unisciti a",
     "leave_comment": "lascia un commento",
     "load_announcements": "carica annunci più vecchi",
-    "logout": "logout",
+    "logout": "esci",
     "new": {
       "chat": "nuova chat",
       "post": "nuovo post",
@@ -132,9 +133,9 @@
   "core": {
     "block_height": "altezza del blocco",
     "data_peers": "peer QDN (dati)",
-    "information": "informazioni di base",
+    "information": "informazioni Core",
     "peers": "peer connessi",
-    "version": "versione core"
+    "version": "versione Core"
   },
   "current_language": "lingua corrente: {{ language }}",
   "dev": "dev",
@@ -248,6 +249,8 @@
       "buy_order_request": "l'applicazione <br/><italic>{{hostname}}</italic> <br/><span>sta effettuando {{count}} ordine d'acquisto</span>.",
       "buy_order_request_other": "l'applicazione <br/><italic>{{hostname}}</italic> <br/><span>sta effettuando {{count}} ordini d'acquisto</span>.",
       "devmode_local_node": "si prega di utilizzare il tuo nodo locale per la modalità Dev! Scollegati ed usa il nodo locale.",
+      "disable_os_push": "Disattiva push del sistema operativo",
+      "disable_os_push_desc": "Silenzia gli avvisi desktop per questa app mantenendo visibile l’attività nell’Hub.",
       "downloading": "download",
       "downloading_decrypting_app": "download e decriptazione dell'app privata.",
       "edited": "modificato",
@@ -255,12 +258,18 @@
       "encrypted": "crittografato",
       "encrypted_not": "non crittografato",
       "amount_qort": "importo: {{ amount }} QORT",
+      "app_notifications_hint": "Le notifiche Q-App appariranno qui",
       "fee_qort": "commissione: {{ fee }} QORT",
       "fetching_data": "recupero dei dati dell'app",
       "foreign_fee": "commissione esterna: {{ fee }}",
       "get_qort_trade_portal": "ottieni QORT con il portale di trade crosschain di Qortal",
+      "loading": "Caricamento...",
       "minimal_qort_balance": "Avere almeno {{ quantity }} QORT nel tuo saldo ti consente di inviare messaggi di chat a una velocità quasi istantanea.",
       "mentioned": "menzionato",
+      "new_notification_from": "Nuova notifica da {{ appName }}",
+      "new_payment_body": "Hai ricevuto {{ amount }} QORT.",
+      "new_payment_received": "Nuovo pagamento ricevuto",
+      "new_qmail": "Hai un nuovo Q-Mail",
       "message_with_image": "questo messaggio ha già un'immagine",
       "most_recent_payment": "{{ count }} pagamenti più recenti",
       "name_available": "{{ name }} è disponibile",
@@ -271,11 +280,16 @@
       "name_rate": "hai bisogno di un nome da valutare.",
       "name_registration": "il tuo saldo è {{ balance }} QORT. La registrazione di un nome richiede una commissione di {{ fee }} QORT",
       "name_unavailable": "{{ name }} non disponibile",
+      "no_app_notifications": "Nessuna notifica dell’app al momento",
       "no_data_image": "nessun dato per l'immagine",
       "no_description": "nessuna descrizione",
       "no_messages": "nessun messaggio",
       "no_minting_details": "impossibile visualizzare i dettagli di minting sul gateway",
+      "no_notification_apps": "Nessuna app ha ancora l’autorizzazione per le notifiche.",
       "no_notifications": "nessuna nuova notifica",
+      "notification_settings": "Impostazioni notifiche",
+      "notification_settings_desc": "Scegli quali app possono inviare avvisi desktop mantenendo visibile l’attività nell’Hub.",
+      "notifications": "Notifiche",
       "no_payments": "nessun pagamento",
       "no_pinned_changes": "per ora non ci sono modifiche alle app bloccate",
       "no_results": "nessun risultato",
@@ -296,6 +310,7 @@
       "replied_to": "risposta a {{ person }}",
       "revert_default": "ritorna a predefinito",
       "revert_qdn": "ritorna a QDN",
+      "revoke_permission": "Revoca",
       "save_qdn": "salva su QDN",
       "secure_ownership": "sicura proprietà dei dati pubblicati con il tuo nome. Puoi anche vendere il tuo nome, insieme ai tuoi dati a una terza parte.",
       "select_file": "seleziona un file",
@@ -307,7 +322,8 @@
       "unread_messages": "messaggi non letti qua sotto",
       "unsaved_changes": "hai cambiato modifiche alle app bloccate. Salvali su QDN.",
       "updating": "aggiornamento",
-      "wait": "attendere per favore"
+      "wait": "attendere per favore",
+      "open_q_trade_subtitle": "Apri Q-Trade e acquista QORT dal portale di scambio."
     },
     "message": "messaggio",
     "promotion_text": "testo di promozione",
@@ -335,6 +351,7 @@
       "rated_app": "valutato con successo. Si prega di attendere un paio di minuti affinché la rete propaghi le modifiche.",
       "request_read": "ho letto questa richiesta",
       "transfer": "il trasferimento è stato di successo!",
+      "transfer_submitted": "Il tuo trasferimento è stato inviato con successo.",
       "voted": "votato con successo. Si prega di attendere un paio di minuti affinché la rete propaghi le modifiche."
     }
   },
@@ -364,7 +381,38 @@
     },
     "status_title": "stato minting",
     "tier_share_per_block": "quota della fascia per blocco",
-    "total_minter_in_tier": "minter totali in questa fascia"
+    "total_minter_in_tier": "minter totali in questa fascia",
+    "panel": {
+      "dialog_subtitle": "Controlla lo stato del minting, i progressi e i prossimi passi.",
+      "state_syncing_title": "Sincronizzazione",
+      "state_syncing_body": "Il nodo è ancora in sincronizzazione; il minting non può ancora iniziare.",
+      "state_active_title": "Minting attivo",
+      "state_active_body_node_selection": "Questa chiave minter è configurata su questo nodo. Le statistiche riflettono l’account selezionato.",
+      "state_active_body_account": "Questo account è configurato per il minting su questo nodo.",
+      "state_inactive_title": "Nessun minting",
+      "state_inactive_body_not_in_group": "Questo account non fa ancora parte del gruppo minter.",
+      "state_inactive_body_multi_key": "Questo nodo ha già più chiavi di minting configurate.",
+      "state_inactive_body_ready": "Questo account è pronto per il passaggio successivo del minting.",
+      "next_step_visit_q_mintership": "Apri l’app Q-Mintership per candidarti come minter.",
+      "next_step_already_active": "Il minting è già attivo su questo nodo.",
+      "next_step_wait_sync": "Attendi che il nodo finisca di sincronizzarsi prima che il minting possa iniziare.",
+      "next_step_start_when_ready": "Avvia il minting su questo nodo quando sei pronto.",
+      "section_your_wallet": "Il tuo wallet",
+      "section_minter_profile_stats": "Profilo minter (statistiche)",
+      "section_account_identity": "Identità dell’account",
+      "section_progress_next_level": "Progressi al livello successivo",
+      "section_next_step": "Passo successivo",
+      "section_node_minting_accounts": "Account di minting sul nodo",
+      "select_account_for_stats_hint": "Seleziona un account per aggiornare progressi e statistiche delle ricompense a destra.",
+      "badge_viewing_stats": "Statistiche in visualizzazione",
+      "blocks_to_level": "blocchi al livello {{level}}",
+      "minting_for_approx_days": "Minting per: ~{{days}} giorni",
+      "reference_only": "(solo a titolo indicativo)",
+      "rewards_info_subtitle_own": "(info ricompense tue)",
+      "rewards_info_subtitle_selected": "(minter selezionato — ricompense per questa chiave)",
+      "network_details": "Dettagli di rete",
+      "loading_spinner_aria": "Caricamento"
+    }
   },
   "name": "nome",
   "name_app": "nome/app",
@@ -391,7 +439,33 @@
     "q_mail": "Q-Mail",
     "q_manager": "Q-Manager",
     "q_sandbox": "Q-Sandbox",
-    "q_wallets": "Q-Wallets"
+    "q_wallets": "Q-Wallets",
+    "wallets_workspace": "spazio dei portafogli"
+  },
+  "account_lookup": {
+    "dialog_title": "Cerca utente",
+    "empty_title": "Cerca account",
+    "empty_subtitle": "Inserisci un nome o un indirizzo",
+    "tooltip_send_disabled": "Questo è il tuo profilo.",
+    "tooltip_block_public_node": "Il blocco utenti non è disponibile quando usi un nodo pubblico.",
+    "tooltip_block_self": "Non puoi bloccare te stesso.",
+    "error_lookup_failed": "Impossibile consultare questo account.",
+    "chip_level": "Livello {{level}}",
+    "chip_blocked": "Bloccato",
+    "chip_no_registered_name": "Nessun nome registrato",
+    "section_minting_progress": "Avanzamento minting",
+    "minting_remaining": "{{remaining}} rimanenti",
+    "minting_blocks_to_level": "{{remaining}} per il livello {{level}}",
+    "minting_approx_one": "~{{count}} giorno di minting (circa)",
+    "minting_approx_other": "~{{count}} giorni di minting (circa)",
+    "minting_days_label": "Minting:",
+    "label_address": "Indirizzo",
+    "label_public_key": "Chiave pubblica",
+    "payments_title": "Pagamenti recenti",
+    "pagination_rows_per_page": "Righe per pagina:",
+    "pagination_displayed_rows": "{{from}}–{{to}} di {{count}}",
+    "action_block": "blocca",
+    "action_unblock": "sblocca"
   },
   "app_detail": {
     "about": "informazioni",
@@ -453,7 +527,10 @@
     "official_apps": "app ufficiali"
   },
   "aria": {
-    "apps_library_tabs": "schede di navigazione della libreria app"
+    "apps_library_tabs": "schede di navigazione della libreria app",
+    "core_controls": "Controlli Core",
+    "switch_theme_dark": "Passa alla modalità scura",
+    "switch_theme_light": "Passa alla modalità chiara"
   },
   "supply": "offerta monetaria",
   "tags": "tag",
@@ -480,7 +557,7 @@
   },
   "title": "titolo",
   "to": "a",
-  "tutorial": "tutorial",
+  "tutorial": "esercitazione guidata",
   "unknown": "sconosciuto",
   "url": "uRL",
   "user_lookup": "ricerca utente",
@@ -490,14 +567,165 @@
   "video_fetching": "recupero del video dalla rete Qortal...",
   "video_building": "download completato: creazione del video...",
   "vote": "votare",
-  "vote_other": "{{ count }} votes",
+  "vote_other": "{{ count }} voti",
   "zip": "zip",
   "wallet": {
     "litecoin": "wallet Litecoin",
     "qortal": "wallet Qortal",
-    "wallet": "wallet",
+    "wallet": "portafoglio",
     "wallet_other": "wallet"
   },
+  "widget_container": {
+    "empty_message": "Al momento non c’è nulla da mostrare.",
+    "empty_title": "Nessun elemento ancora",
+    "error_title": "Impossibile caricare questo widget",
+    "loading": "Caricamento",
+    "loading_message": "Recupero degli ultimi dati pubblici dal nodo Qortal predefinito.",
+    "retry": "Riprova"
+  },
+  "quitter_feed": {
+    "error_generic": "Il feed pubblico Quitter è temporaneamente non disponibile. Riprova fra un momento.",
+    "error_following": "Il feed Quitter personalizzato è temporaneamente non disponibile. Riprova.",
+    "error_timeout": "Caricamento del feed non riuscito. Puoi riprovare o tornare a Generale.",
+    "loading_following": "Caricamento feed Seguiti...",
+    "loading_general": "Caricamento feed...",
+    "error_title_following": "Caricamento feed non riuscito",
+    "error_title_general": "Impossibile caricare i post",
+    "empty_title_no_name": "Accedi per personalizzare il feed",
+    "empty_title_no_following": "Sembra che tu non segua ancora nessuno.",
+    "empty_title_no_posts": "Nessun post dagli account che segui",
+    "empty_title_general": "Nessun post disponibile",
+    "empty_message_no_name": "Accedi con un nome Qortal per creare un feed personalizzato.",
+    "empty_message_no_following": "Sfoglia Quitter e segui account per costruire il tuo feed.",
+    "empty_message_no_posts": "Gli account che segui non hanno ancora pubblicato su Quitter.",
+    "tab_general": "Generale",
+    "tab_following": "Seguiti",
+    "subtitle_personalized": "Feed personalizzato",
+    "subtitle_public": "Feed pubblico",
+    "retry_following": "Riprova",
+    "retry_general": "Riprova",
+    "return_to_general": "Torna a Generale",
+    "posts_showing_one": "{{count}} post in visualizzazione",
+    "posts_showing_other": "{{count}} post in visualizzazione",
+    "new_posts_one": "{{count}} nuovo post",
+    "new_posts_other": "{{count}} nuovi post"
+  },
+  "quick_tools_pad": {
+    "user_search": "Ricerca utente",
+    "wallets": "Wallet",
+    "minting": "Minting",
+    "backup_wallet": "Backup del wallet",
+    "q_chat": "Q-Chat",
+    "notifications_enable": "Attiva notifiche",
+    "notifications_mute": "Disattiva notifiche",
+    "apps": "App",
+    "extras": "",
+    "hint_notifications_desktop_only": "Disattiva solo gli avvisi desktop. Le notifiche nell’hub continuano.",
+    "hint_minting_panel": "Questo pannello si sblocca quando sei minter. Passa da Q-Mintership per iniziare!",
+    "snackbar_backup_wallet": "Scarica il file del wallet. È richiesto per accedere al tuo account."
+  },
   "website": "sito web",
-  "welcome": "benvenuto"
+  "welcome": "benvenuto",
+  "qortino_workspace": {
+    "modules_hotkeys_label": "Scorciatoie",
+    "modules_hotkeys_description": "Percorsi curati per le rotte più usate.",
+    "modules_music_label": "Lettore musicale",
+    "modules_music_description": "Lettore Earbump compatto con ricerca e riproduzione rapida.",
+    "modules_suggest_label": "Suggerisci un modulo",
+    "modules_suggest_description": "Scrivi > Aggiungi oggetto + messaggio e mandacelo!",
+    "workspace_empty_prompt": "Scegli cosa appare sopra QORTINO.",
+    "workspace_header_hotkeys": "Scorciatoie",
+    "workspace_header_music": "Lettore musicale",
+    "workspace_add_app": "Aggiungi app",
+    "getting_started_heading": "Introduzione",
+    "onboarding_step_progress": "Passo {{current}} / {{total}}",
+    "dialog_module_title": "Scegli un modulo",
+    "dialog_module_subtitle": "Scegli cosa vive sopra QORTINO.",
+    "dialog_hotkeys_title": "Seleziona scorciatoie",
+    "dialog_hotkeys_subtitle": "Salvato automaticamente per questo account.",
+    "dialog_music_search_title": "Cerca Earbump",
+    "dialog_music_search_subtitle": "Trova un brano, premi play e mandalo al lettore sopra.",
+    "search_placeholder_qapps": "Cerca Q-App",
+    "search_placeholder_tracks": "Cerca brani o artisti",
+    "section_recommended": "Consigliati",
+    "curated_badge": "[ CURATO ]",
+    "hotkeys_loading_library": "Caricamento libreria Q-App...",
+    "hotkeys_unavailable_title": "Q-App non disponibili",
+    "hotkeys_no_match_title": "Nessuna Q-App corrispondente ancora",
+    "hotkeys_no_match_hint": "Prova un altro nome di app per creare una scorciatoia nella slot selezionata.",
+    "error_hotkey_catalog": "Impossibile caricare le Q-App ora.",
+    "music_section_results": "Risultati",
+    "music_section_discovery": "Scoperta",
+    "music_loading_search": "Ricerca nella libreria EarBump...",
+    "music_loading_discovery": "Caricamento discovery EarBump...",
+    "music_quiet_title": "EarBump è in silenzio adesso",
+    "music_no_tracks_title": "Nessun brano trovato",
+    "music_no_tracks_hint": "Prova un altro titolo o artista per portarlo nel lettore.",
+    "error_earbump_discovery": "Impossibile caricare EarBump ora.",
+    "error_earbump_search": "Impossibile cercare in EarBump ora.",
+    "music_syncing_library": "Sincronizzazione con la libreria EarBump...",
+    "music_empty_title": "Libreria EarBump",
+    "music_empty_uploaded": "In attesa della libreria",
+    "music_track_load_failed": "Questo brano non ha potuto caricarsi completamente sul tuo nodo.",
+    "music_no_peers_data": "Nessun peer per i dati restanti",
+    "music_preparing_peers_one": "Preparazione sul nodo... {{percent}}% ({{count}} peer)",
+    "music_preparing_peers_other": "Preparazione sul nodo... {{percent}}% ({{count}} peer)",
+    "music_preparing_percent_only": "Preparazione sul nodo... {{percent}}%",
+    "music_searching_peers": "Ricerca peer...",
+    "music_finalizing_track": "Finalizzazione brano sul nodo...",
+    "music_preparing_base": "Preparazione sul nodo...",
+    "music_playback_stalled": "Riproduzione bloccata. Premi play per riprovare.",
+    "music_stream_stalled": "Brano bloccato. Ricostruzione stream...",
+    "hotkeys_launch_description": "Apri {{appName}}",
+    "hotkeys_fallback_launch": "Apri Q-App",
+    "reaction_hotkeys_ready": "Pannello scorciatoie pronto.",
+    "reaction_music_panel_ready": "Pannello musica pronto.",
+    "reaction_panel_cleared": "Pannello svuotato.",
+    "reaction_music_player_ready": "Lettore musicale pronto.",
+    "reaction_locked_track": "Bloccato su {{title}}.",
+    "reaction_track_rotation": "{{title}} è in rotazione.",
+    "reaction_onboarding_route": "Percorso onboarding aperto. Tengo il passo successivo pronto.",
+    "reaction_support_chat": "Chat di supporto aperta. Chiedi i 6 QORT e metto in coda il passo due.",
+    "reaction_q_trade_open": "Q-Trade è aperto. Se prendi QORT lì, andiamo avanti.",
+    "reaction_name_flow": "Flusso nome aperto. Qui l'hub inizia a riconoscerti.",
+    "reaction_avatar_flow": "Flusso avatar pronto. Diamo un volto a questo spazio.",
+    "track_meta_separator": "·",
+    "a11y_clear_hotkey_slot": "Svuota slot {{n}}",
+    "runtime_workspace_bay_title": "Problema runtime nell’area workspace.",
+    "runtime_workspace_bay_body": "QORTINO sotto è ancora sicuro. Aggiorna l’Hub; se persiste, tracciamo il crash da qui.",
+    "runtime_qortino_title": "Problema runtime su QORTINO.",
+    "runtime_qortino_body": "L’area sopra è ancora sicura. Aggiorna l’Hub; se persiste, tracciamo il crash da qui.",
+    "hotkey_slot_number": "Slot {{n}}"
+  },
+  "bookmarks": {
+    "title": "Segnalibri",
+    "bookmarked": "Salvato",
+    "add_page": "Aggiungi pagina",
+    "loading": "Caricamento segnalibri...",
+    "folder": "Cartella",
+    "create_folder": "Crea cartella",
+    "folder_name": "Nome cartella",
+    "new_folder": "Nuova cartella",
+    "top_level": "Livello principale",
+    "edit_bookmark": "Modifica segnalibro",
+    "add_bookmark": "Aggiungi segnalibro",
+    "save_location_without_query": "Salva una posizione Q-App senza parametri di query.",
+    "name": "Nome",
+    "bookmark_name_placeholder": "Nome segnalibro",
+    "qortal_link": "Link Qortal",
+    "qortal_link_placeholder": "qortal://APP/Nome/percorso",
+    "no_bookmarks": "Nessun segnalibro.",
+    "no_bookmarks_folder": "Nessun segnalibro in questa cartella.",
+    "bookmark_count_one": "{{count}} segnalibro",
+    "bookmark_count_other": "{{count}} segnalibri",
+    "edit": "Modifica",
+    "move": "Sposta",
+    "delete": "Elimina",
+    "rename": "Rinomina",
+    "remove": "Rimuovi",
+    "create": "Crea",
+    "more": "Altro",
+    "delete_folder_title": "Eliminare la cartella?",
+    "delete_folder_message": "I segnalibri in questa cartella verranno spostati al livello principale."
+  }
 }
diff --git a/src/i18n/locales/it/group.json b/src/i18n/locales/it/group.json
index 9c1275d7..0ca1a272 100644
--- a/src/i18n/locales/it/group.json
+++ b/src/i18n/locales/it/group.json
@@ -28,6 +28,280 @@
     "select_group": "seleziona un gruppo",
     "visit_q_mintership": "visita Q-Mintership"
   },
+  "dashboard": {
+    "qort_balance": "Saldo QORT",
+    "node_status": "Stato nodo",
+    "node_unavailable": "Nodo non disponibile",
+    "sync_percent": "{{percent}}% sincronizzato",
+    "minter_level": "Livello minter",
+    "peers": "Peer",
+    "qdn": "QDN",
+    "core": "Core",
+    "hub": "Hub",
+    "node": "Nodo",
+    "using_node": "Nodo in uso",
+    "change_node": "Cambia nodo",
+    "node_type": "Tipo di nodo",
+    "node_height": "Altezza nodo",
+    "local_node": "Nodo locale",
+    "public_node": "Nodo pubblico",
+    "custom_node": "Nodo personalizzato",
+    "synchronizing": "Sincronizzazione",
+    "fully_operational": "Completamente operativo",
+    "not_operational": "Non operativo",
+    "attention_needed": "Richiede attenzione",
+    "apply": "Applica",
+    "info_panel_status": "stato",
+    "info_panel_node_comment": "// info_nodo",
+    "minter_pin_save_progress_default": "Salva la barra livello come vista predefinita",
+    "minter_pin_save_dots_default": "Salva i pallini minting come vista predefinita",
+    "node_switch_error": "Impossibile cambiare nodo adesso.",
+    "node_menu_local": "Nodo locale",
+    "node_menu_public": "Nodo pubblico",
+    "qortino_runtime_title": "Il contenitore della card QORTINO ha riscontrato un errore di runtime.",
+    "qortino_runtime_body": "Il resto della dashboard è al sicuro. Aggiorna Hub e se si ripete segnalalo al team.",
+    "no_custom_nodes_saved": "Nessun nodo personalizzato salvato",
+    "wallet_activity": "Attivit? wallet",
+    "send": "Invia",
+    "receive": "Ricevi",
+    "buy": "Compra",
+    "recent_transaction": "Transazione recente",
+    "loading_wallet_activity": "Caricamento attivit? wallet...",
+    "sent_to": "inviato a ",
+    "received_from": "ricevuto da ",
+    "no_wallet_activity": "Nessuna nuova attivit? wallet.",
+      "wallet_activity_window": "Ultima transazione negli ultimi 7 giorni",
+      "wallet_activity_unknown_address": "Indirizzo sconosciuto",
+      "wallet_activity_relative_just_now": "Proprio ora",
+      "wallet_activity_relative_minutes_ago_one": "{{count}} minuto fa",
+      "wallet_activity_relative_minutes_ago_other": "{{count}} minuti fa",
+      "wallet_activity_relative_hours_ago_one": "{{count}} ora fa",
+      "wallet_activity_relative_hours_ago_other": "{{count}} ore fa",
+      "wallet_activity_relative_days_ago_one": "{{count}} giorno fa",
+      "wallet_activity_relative_days_ago_other": "{{count}} giorni fa",
+      "open_in_q_chat": "Apri in Q-Chat",
+    "open_in_q_apps": "Apri in Q-Apps",
+    "quitter_feed": "Feed Quitter",
+    "quitter_show_more": "Mostra altro",
+    "quitter_show_less": "Mostra meno",
+    "quitter_video_attachment": "Allegato video",
+    "quitter_video_preview_hub": "Anteprima in sola lettura nell’Hub",
+    "featured_q_apps": "Q-App in evidenza",
+    "featured_q_apps_subtitle": "Avvia app di comunità affidabili direttamente dalla dashboard.",
+    "explore_all_q_apps": "Esplora tutte le Q-App",
+    "reduce_motion": "Riduci movimento",
+    "account_overview": "Panoramica account",
+    "qortal_name_address": "NOME E INDIRIZZO QORTAL",
+    "profile": "Profilo",
+    "profile_settings": "Impostazioni profilo",
+    "profile_settings_description": "Controlla il tuo nome e l’identità dell’account.",
+    "security": "Sicurezza",
+    "security_settings": "Impostazioni sicurezza",
+    "security_settings_description": "Mostra e copia la chiave privata solo quando è assolutamente necessario.",
+    "developer": "Sviluppatore",
+    "developer_settings": "Impostazioni sviluppatore",
+    "developer_settings_description": "Abilita strumenti di sviluppo e diagnostica per test avanzati.",
+    "system": "Sistema",
+    "system_settings": "Impostazioni di sistema",
+    "system_settings_description": "Controlla notifiche, movimento, app appuntate e account bloccati.",
+    "current_name": "Nome attuale",
+    "no_name_registered": "Nessun nome registrato",
+    "wallet_address": "Indirizzo wallet",
+    "unavailable": "Non disponibile",
+    "no_active_wallet": "لا توجد محفظة نشطة",
+    "names_qapp_actions_hint": "Acquisto, vendita e cambio nome vanno gestiti nella Q-App Names.",
+    "open_the": "Apri",
+    "names": "Names",
+    "names_qapp_hint_suffix": "Q-App per comprare o vendere nomi o cambiare il nome registrato.",
+    "private_key_warning": "Non condividere mai la chiave privata. Chi la possiede potrebbe controllare questo wallet e i fondi.",
+    "wallet_password": "Password del wallet",
+    "wallet_password_placeholder": "Inserisci la password del wallet",
+    "decrypt": "Decifra",
+    "copy_key": "Copia chiave",
+    "private_key": "Chiave privata",
+    "private_key_hint": "Decifra la chiave privata solo quando devi recuperare o migrare questo wallet.",
+    "notifications_update_error": "Impossibile aggiornare le notifiche delle app in questo momento.",
+    "wallet_unavailable_error": "I dati del wallet non sono disponibili al momento.",
+    "wallet_password_required": "Inserisci la password del wallet per decifrare la chiave privata.",
+    "wallet_decrypt_error_with_message": "Impossibile decifrare il wallet: {{message}}",
+    "wallet_decrypt_error": "Impossibile decifrare il wallet con quella password.",
+    "private_key_copied": "Chiave privata copiata negli appunti.",
+    "enable_dev_mode": "Abilita modalità sviluppatore",
+    "enable_dev_mode_desc": "Sblocca superfici di sviluppo locali, diagnostica e strumenti di test in Hub.",
+    "dev_mode_tip": "Suggerimento: una volta attivata, apparirà un’icona Strumenti sviluppatore nella barra laterale. Passa sul bordo sinistro per vederla.",
+    "reduce_app_notifications": "Riduci notifiche app",
+    "reduce_app_notifications_desc": "Attiva per disattivare le notifiche push sul desktop. Lascia spento per gli avvisi normali dell’Hub.",
+    "reduce_ui_animations": "Riduci animazioni UI",
+    "reduce_ui_animations_desc": "Attiva per ridurre il movimento nell’Hub. Lascia spento per l’interfaccia animata normale.",
+    "pinned_qapp_backup": "Backup Q-App appuntate",
+    "pinned_qapp_backup_desc": "Salva le Q-App appuntate nelle impostazioni QDN crittografate perché lo stesso layout ti segua sui dispositivi.",
+    "manage_backup": "Gestisci backup",
+    "block_list": "Lista bloccati",
+    "block_list_desc": "Esamina nomi e indirizzi bloccati, poi sblocca gli account quando sei pronto.",
+    "blocked_count": "{{count}} bloccati",
+    "addresses": "Indirizzi",
+    "unblock": "Sblocca",
+    "no_blocked_accounts": "Nessun account ancora bloccato.",
+    "show_receive_qr": "Mostra QR ricezione",
+    "copy_address": "Copia indirizzo",
+    "privacy_mode_tooltip": "Privacy: sfoca informazioni sensibili per la condivisione schermo",
+    "toggle_privacy_mode": "Alterna modalità privacy",
+    "send_qort": "Invia QORT",
+    "send_qort_subtitle": "Trasferisci QORT a qualsiasi nome registrato o indirizzo.",
+    "close_send_qort_modal": "Chiudi finestra invio QORT",
+    "receive_qort": "Ricevi QORT",
+    "receive_qort_subtitle": "Scansiona per ricevere QORT",
+    "close_receive_qort_modal": "Chiudi finestra ricezione QORT",
+    "download_qr": "Scarica QR",
+    "qortal_address_or_name": "Indirizzo Qortal o nome registrato",
+    "blocked": "Bloccati",
+    "account_status_online": "Online",
+    "account_status_busy": "Occupato",
+    "account_status_invisible": "Invisibile",
+    "account_settings_tooltip": "Impostazioni account",
+    "open_account_settings_aria": "Apri impostazioni account",
+    "name_change_confirm": "Cambiare il nome registrato da {{oldName}} a {{newName}}?",
+    "name_change_success": "Richiesta di cambio nome inviata correttamente.",
+    "name_change_register_first": "Registra prima un nome prima di modificarlo.",
+    "name_change_enter_new_name": "Inserisci il nuovo nome che vuoi usare.",
+    "name_change_different_from_current": "Scegli un nome diverso da quello attuale.",
+    "name_change_details_still_loading": "Caricamento dei dettagli del nome in corso. Riprova tra un momento.",
+    "name_change_choose_available": "Scegli un nome disponibile prima di continuare.",
+    "name_change_wallet_password_required": "Inserisci la password del portafoglio prima di cambiare nome.",
+    "name_change_wallet_password_failed": "Impossibile verificare la password del portafoglio.",
+    "current_name_details_load_failed": "Impossibile caricare i dettagli del nome attuale.",
+    "name_change_unknown_error": "Si è verificato un errore durante il cambio nome.",
+    "name_availability_available": "Il nome è disponibile.",
+    "name_availability_checking": "Verifica disponibilità del nome...",
+    "name_availability_same_as_current": "Scegli un nome diverso da quello che usi già.",
+    "name_availability_taken": "Quel nome è già in uso."
+  },
+  "groups_widget": {
+    "accept": "Accetta",
+    "approve": "Approva",
+    "cancel": "Annulla",
+    "characters_count": "{{current}}/{{max}}",
+    "confirm_approve_request": "Approvare questa richiesta e invitarli nel gruppo?",
+    "confirm_join_group": "Unirti a questo gruppo ora?",
+    "confirm_join_promoted_closed": "Inviare una richiesta di ingresso per questo gruppo promosso?",
+    "confirm_join_promoted_open": "Unirti a questo gruppo promosso ora?",
+    "connecting": "Connessione...",
+    "discover_groups": "Scopri gruppi",
+    "error_accept_invite": "Impossibile accettare quell’invito ora.",
+    "error_approve_request": "Impossibile approvare quella richiesta ora.",
+    "error_load_invites": "Impossibile caricare gli inviti del gruppo ora.",
+    "error_load_promotions": "Impossibile caricare i gruppi promossi ora.",
+    "error_load_requests": "Impossibile caricare le richieste di ingresso ora.",
+    "error_promoted": "Impossibile agire su quel gruppo promosso ora.",
+    "error_publish_promotion": "Impossibile pubblicare quella promozione ora.",
+    "fresh_promotion_snippet": "Questo gruppo ha un aggiornamento promosso recente.",
+    "from_label": "da",
+    "group_admin_only": "Solo amministratori del gruppo",
+    "group_general": "Generale",
+    "group_named": "Gruppo {{id}}",
+    "ignore": "Ignora",
+    "invitation_ready": "Invito pronto per la revisione",
+    "invite_hidden": "Invito nascosto in questo widget per ora.",
+    "invites_empty_description": "I nuovi inviti al gruppo appariranno qui al loro arrivo.",
+    "invites_empty_title": "Nessun invito in sospeso",
+    "joined_group": "Ti sei unito a {{name}}.",
+    "joined_promoted": "Ti sei unito a {{name}}.",
+    "join_group": "Unisciti al gruppo",
+    "join_request_sent": "Richiesta di ingresso inviata per {{name}}.",
+    "loading_invites": "Caricamento inviti",
+    "loading_notifications": "Caricamento notifiche",
+    "loading_promoted": "Caricamento gruppi promossi",
+    "loading_requests": "Caricamento richieste",
+    "members_count": "{{count}} membri",
+    "new_encrypted_message": "Nuovo messaggio crittografato",
+    "notifications_empty_message": "Entra nelle community in Q-Chat per popolare questo feed con messaggi di gruppo, menzioni e attività.",
+    "notifications_empty_title": "Inizia con i gruppi Q-Chat",
+    "open": "Apri",
+    "open_conversation": "Apri conversazione",
+    "private_group": "Gruppo privato",
+    "private_group_invite": "Invito a gruppo privato",
+    "processing": "Elaborazione...",
+    "promoted_by": "Promosso da {{name}}",
+    "promoted_empty_message": "I gruppi promossi appariranno qui quando ci saranno novità.",
+    "promoted_empty_title": "Nessun gruppo promosso",
+    "promote_dialog_fee": " Tariffa di pubblicazione: {{fee}} QORT.",
+    "promote_dialog_intro": "Condividi un breve aggiornamento in evidenza per uno dei tuoi gruppi da amministratore.",
+    "promote_group": "Promuovi gruppo",
+    "promote_page_title": "Promuovi uno dei tuoi gruppi",
+    "promotion_published": "Promozione del gruppo pubblicata.",
+    "promotion_placeholder": "Scrivi una breve promozione per questo gruppo.",
+    "public_group": "Gruppo pubblico",
+    "refresh": "Aggiorna",
+    "reject": "Rifiuta",
+    "request_access": "Richiedi accesso",
+    "request_approved": "{{requester}} è stato approvato per {{group}}.",
+    "request_removed": "Richiesta rimossa da questo widget per ora.",
+    "request_sent": "Richiesta inviata",
+    "requests_empty_description": "Le richieste di ingresso dei gruppi che gestisci appariranno qui.",
+    "requests_empty_title": "Nessuna richiesta in sospeso",
+    "select_admin_group": "Seleziona un gruppo che amministri",
+    "tab_invites": "Inviti",
+    "tab_notifications": "Notifiche",
+    "tab_promoted": "Promossi",
+    "tab_requests": "Richieste",
+    "unknown": "Sconosciuto",
+    "view_conversation": "Vedi conversazione",
+    "wants_to_join": "Vuole unirsi a questo gruppo.",
+    "you": "Tu",
+    "publish": "Pubblica"
+  },
+  "subscription": {
+    "subscriptions": "abbonamenti",
+    "tooltip_actions_needed_one": "{{title}} - {{count}} azione richiesta",
+    "tooltip_actions_needed_other": "{{title}} - {{count}} azioni richieste",
+    "relative_soon": "a breve",
+    "relative_in_minutes_one": "tra {{count}} min",
+    "relative_in_minutes_other": "tra {{count}} min",
+    "relative_in_hours_one": "tra {{count}} ora",
+    "relative_in_hours_other": "tra {{count}} ore",
+    "relative_in_days_one": "tra {{count}} giorno",
+    "relative_in_days_other": "tra {{count}} giorni",
+    "relative_in_months_one": "tra {{count}} mese",
+    "relative_in_months_other": "tra {{count}} mesi",
+    "row_fallback_title": "abbonamento",
+    "by_creator": "di {{name}}",
+    "creator_fallback": "creatore Qortal",
+    "price_line": "{{price}} QORT / {{interval}}",
+    "expires_suffix": " - scade {{time}}",
+    "status_due": "in scadenza",
+    "status_active": "attivo",
+    "status_owner": "proprietario",
+    "managed_fallback": "abbonamento gestito",
+    "members_one": "{{count}} membro",
+    "members_other": "{{count}} membri",
+    "join_requests_suffix_one": " - {{count}} richiesta di accesso",
+    "join_requests_suffix_other": " - {{count}} richieste di accesso",
+    "re_encryption_suffix": " - necessaria nuova crittografia",
+    "actions_badge_one": "{{count}} azione",
+    "actions_badge_other": "{{count}} azioni",
+    "loading": "caricamento abbonamenti",
+    "section_needs_action": "richiede azione",
+    "section_active": "attivi",
+    "open_subscriptions": "apri abbonamenti",
+    "empty_title": "Scopri le Q-Apps con abbonamenti",
+    "empty_body": "Abbonati a creatori e community da Q-Apps che supportano gli abbonamenti, come SubWire.",
+    "open_subwire": "apri SubWire",
+    "tab_subscriptions": "Abbonamenti",
+    "tab_subwire": "SubWire"
+  },
+  "group_invites": {
+    "empty_title": "nessun invito",
+    "empty_secondary_1": "non hai inviti in sospeso",
+    "empty_secondary_2": "al momento.",
+    "empty_tertiary_no_groups": "non fai ancora parte di nessun gruppo.",
+    "cta_find_groups": "trova gruppi"
+  },
+  "group_join_requests": {
+    "empty_title": "nessuna richiesta di ingresso",
+    "empty_secondary_1": "non hai richieste in sospeso",
+    "empty_secondary_2": "al momento.",
+    "empty_tertiary_no_admin_groups": "non stai ancora gestendo nessun gruppo."
+  },
   "advanced_options": "opzioni avanzate",
   "block_delay": {
     "minimum": "ritardo del blocco minimo",
@@ -72,6 +346,8 @@
     "generic": {
       "avatar_publish_fee": "la pubblicazione di un Avatar richiede {{ fee }}",
       "avatar_registered_name": "È necessario un nome registrato per impostare un avatar",
+      "add_new_key_option": "Aggiungi una nuova chiave",
+      "add_new_key_sparingly": "Aggiungere una nuova chiave va fatto con parsimonia per evitare di aumentare la dimensione delle chiavi di gruppo.",
       "admin_only": "verranno mostrati solo i gruppi in cui sei un amministratore",
       "already_in_group": "sei già in questo gruppo!",
       "block_delay_minimum": "ritardo minimo del blocco per le approvazioni delle transazioni di gruppo",
@@ -105,6 +381,7 @@
       "node_minting_key": "hai una chiave di minting per questo account collegata al nodo",
       "no_announcement": "nessun annuncio",
       "no_display": "niente da visualizzare",
+      "no_description": "nessuna descrizione",
       "no_selection": "nessun gruppo selezionato",
       "not_part_group": "non fai parte del gruppo crittografato di membri. Attendere che un amministratore recripti le chiavi.",
       "only_encrypted": "verranno visualizzati solo messaggi non crittografati.",
@@ -170,5 +447,11 @@
       "user_joined": "l'utente si è unito con successo!"
     }
   },
+  "context_menu": {
+    "mark_as_read": "Segna come letto",
+    "mute_push_notifications": "Disattiva notifiche push",
+    "unmute_push_notifications": "Riattiva notifiche push",
+    "mark_all_read": "Segna tutto come letto"
+  },
   "thread_posts": "nuovi post di thread"
 }
diff --git a/src/i18n/locales/it/node.json b/src/i18n/locales/it/node.json
index 6e404513..c89765c7 100644
--- a/src/i18n/locales/it/node.json
+++ b/src/i18n/locales/it/node.json
@@ -40,7 +40,8 @@
     "invalidKey": "apikey non valida",
     "failed_stop": "impossibile fermare il Core",
     "failed_bootstrap": "impossibile eseguire il bootstrap",
-    "failed_delete": "impossibile eliminare il database"
+    "failed_delete": "impossibile eliminare il database",
+    "failed_bootstrap_or_clear": "bootstrap, cancellazione dati catena o avvio di Core non riusciti"
   },
   "status": {
     "complete": "completo",
@@ -81,7 +82,12 @@
   "confirmations": {
     "stop": "sei sicuro di voler fermare il Core?",
     "bootstrap": "sei sicuro di voler eseguire il bootstrap?",
-    "delete": "sei sicuro di voler eliminare il database?"
+    "delete": "sei sicuro di voler eliminare il database?",
+    "bootstrapOrClearChain": "Esegue il bootstrap dall’istantanea quando Core è in esecuzione in locale. Se non è possibile o il bootstrap fallisce, la DB catena locale può essere rimossa e Core viene riavviato; i file del portafoglio non vengono toccati. Continuare?"
+  },
+  "bootstrapChainHelp": {
+    "title": "Bootstrap della catena",
+    "body": "Un solo strumento: bootstrap dall’istantanea quando Core è attivo oppure ripulire la DB catena locale e riavviare Core quando il bootstrap non è possibile. Il portafoglio è archiviato separatamente."
   },
   "stop": "ferma Core",
   "bootstrap": "bootstrap",
@@ -89,6 +95,53 @@
   "more": "più opzioni",
   "less": "meno opzioni",
   "enableAuthWhenSyncing": "abilita l'autenticazione durante la sincronizzazione",
+  "coreSetupDialog": {
+    "title": "Configura Qortal Core",
+    "introTitle": "Esegui il tuo nodo in locale.",
+    "introSubtitle": "Puoi usare un nodo pubblico mentre Core si avvia e si sincronizza.",
+    "publicNodeUnavailable": "I nodi pubblici non sono disponibili al momento. Tieni aperta questa schermata mentre Core locale si avvia e si sincronizza.",
+    "steps": {
+      "downloadDone": "Core scaricato",
+      "downloadActive": "Download di Core in corso",
+      "downloadIdle": "Scarica Core",
+      "runningDone": "Core in esecuzione",
+      "runningActive": "Avvio di Core",
+      "runningIdle": "Avvia Core"
+    },
+    "readyToDownload": "Pronto per scaricare",
+    "readyToStart": "Pronto per avviare",
+    "syncing": "Sincronizzazione",
+    "helpers": {
+      "downloadDone": "I file di Core sono installati e pronti.",
+      "downloadActive": "Download e preparazione di Qortal Core.",
+      "downloadIdle": "Scarica Qortal Core per eseguire il tuo nodo.",
+      "runningDoneSyncing": "Core è in esecuzione e sincronizza i dati della blockchain.",
+      "runningDone": "Core è in esecuzione in locale.",
+      "runningWaiting": "Core si avvierà e sincronizzerà in background.",
+      "runningBlocked": "Disponibile dopo il download di Core."
+    },
+    "nextStepPill": "Passo successivo",
+    "locationTitle": "Posizione di Core",
+    "locationCustom": "Qortal Core verrà eseguito da questa cartella.",
+    "locationDefault": "Qortal Core userà la cartella predefinita di questo sistema.",
+    "locationPathDefault": "Posizione predefinita di Qortal Core",
+    "change": "Cambia",
+    "choose": "Scegli",
+    "clear": "Cancella",
+    "advancedTitle": "Avanzate",
+    "advancedSubtitle": "Strumenti e opzioni avanzate per Core.",
+    "maintenanceUnavailable": "Gli strumenti di manutenzione di Core non sono disponibili mentre Core si avvia o si sincronizza.",
+    "stopCoreTitle": "Ferma Core",
+    "stopCoreBody": "Arresta il processo locale di Core.",
+    "stopButton": "Ferma",
+    "cancel": "Annulla",
+    "actionDownload": "Scarica Core",
+    "actionStart": "Avvia Core",
+    "actionDone": "Fatto",
+    "confirmTitle": "Conferma azione",
+    "folderCopied": "Cartella Core copiata",
+    "progressAriaLabel": "Avanzamento: {{label}}"
+  },
   "NotFullyStarted": {
     "titleNotReady": "Core non è completamente avviato",
     "descNotReady": "Qortal Core non è ancora completamente avviato. Attendere prego.",
diff --git a/src/i18n/locales/it/question.json b/src/i18n/locales/it/question.json
index c8c26823..555abdd8 100644
--- a/src/i18n/locales/it/question.json
+++ b/src/i18n/locales/it/question.json
@@ -152,8 +152,12 @@
     "invite": "consenti a questa applicazione di invitare {{ invitee }}?",
     "kick": "consenti a questa applicazione di espellere {{ partecipant }} dal gruppo?",
     "leave_group": "consenti a questa applicazione di uscire dal seguente gruppo?",
-    "list_hosted_data": "consenti a questa applicazione di ottenere l'elenco dei tuoi dati ospitati?",
-    "order_detail": "{{ qort_amount }} QORT per {{ foreign_amount }} {{ ticker }}",
+      "list_hosted_data": "consenti a questa applicazione di ottenere l'elenco dei tuoi dati ospitati?",
+      "notification": "consentire a questa app di inviarti le notifiche dell'Hub?",
+      "notification_allow": "consenti",
+      "notification_dont_allow": "non consentire",
+      "notification_title": "notifiche di {{ appName }}",
+      "order_detail": "{{ qort_amount }} QORT per {{ foreign_amount }} {{ ticker }}",
     "pay_publish": "consenti a questa applicazione di effettuare i seguenti pagamenti e pubblicazioni?",
     "perform_admin_action_with_value": "con valore: {{ value }}",
     "perform_admin_action": "consenti a questa applicazione di eseguire l'azione amministrativa: {{ type }}",
diff --git a/src/i18n/locales/it/tutorial.json b/src/i18n/locales/it/tutorial.json
index fc27fe05..06c2712b 100644
--- a/src/i18n/locales/it/tutorial.json
+++ b/src/i18n/locales/it/tutorial.json
@@ -33,6 +33,7 @@
     "get_six_qorts_way3_action": "Apri Q-Trade",
     "register_name": "Registra il tuo nome",
     "confirming_transaction": "Conferma transazione",
+    "confirming": "Conferma",
     "load_avatar": "Carica il tuo avatar",
     "explore_apps": "Esplora le app in evidenza",
     "done": "Fatto",
@@ -53,6 +54,17 @@
     "devnet_testing_desc": "Testa le tue Q-Apps nell'ambiente DevNet-Testing",
     "open_app": "Apri",
     "address_copied": "Indirizzo copiato negli appunti",
-    "group_activity": "Attività di gruppo"
+    "group_activity": "Attività di gruppo",
+    "get_qorts_workspace_hint": "Sblocca i primi 6 QORT per attivare il resto della configurazione.",
+    "register_name_workspace_hint": "Un nome registrato rende questo account un’identità riconoscibile.",
+    "load_avatar_workspace_hint": "Dai un volto alla dashboard perché tutto sia più tuo.",
+    "onboarding_transition_hard_part_done": "Ottimo lavoro. La parte più dura è fatta.",
+    "onboarding_transition_one_more": "Grande. Ne manca ancora una.",
+    "onboarding_press_next_when_ready": "Ottimo lavoro. La parte più dura è fatta. Premi Avanti quando sei pronto.",
+    "register_name_pending_hint": "Salvataggio nome on-chain: può richiedere qualche momento.",
+    "persistent_guide_get_qorts": "Iniziamo con 6 QORT. Scegli un’opzione sopra.",
+    "persistent_guide_register_name": "Poi registra il tuo nome.",
+    "persistent_guide_load_avatar": "Infine carica il tuo avatar.",
+    "post_onboarding_workspace_ready": "Tutto pronto. Puoi iniziare a costruire lo workspace sopra."
   }
 }
diff --git a/src/i18n/locales/ja/auth.json b/src/i18n/locales/ja/auth.json
index 205353c9..31a5ac53 100644
--- a/src/i18n/locales/ja/auth.json
+++ b/src/i18n/locales/ja/auth.json
@@ -74,8 +74,11 @@
       "set_apikey": "APIキーの設定に失敗しました："
     },
     "generic": {
+      "block_list_intro": "Qortal の名前またはアドレスを追加してブロックします。アドレスは取引処理に影響し、名前をブロックすると Hub 全体でそのデータが表示されません。",
       "blocked_addresses": "ブロックされたアドレス - トランザクションの処理をブロックします",
+      "blocked_addresses_hint": "これらのアドレスからの取引関連の処理をブロックします。",
       "blocked_names": "QDN用のブロックされた名前",
+      "blocked_names_hint": "これらの名前は QDN / Hub のデータおよびソーシャル機能でブロックされます。",
       "blocking": "{{ name }} をブロック中",
       "choose_block": "チャットメッセージをブロックするには「取引をブロック」または「すべて」を選択してください",
       "congrats_setup": "おめでとうございます、準備が整いました！",
@@ -88,6 +91,7 @@
       "locating_encryption_keys": "暗号鍵を特定中",
       "insert_name_address": "プライベート会話を開始するには、名前またはアドレスを入力してください。",
       "name_address": "名前またはアドレス",
+      "no_blocked_users": "まだブロックした人はいません。非表示にしたい場合は上にアドレスまたは名前を追加してください。",
       "no_account": "保存されたアカウントがありません",
       "no_minimum_length": "最小文字数の制限はありません",
       "no_secret_key_published": "まだ秘密鍵が公開されていません",
@@ -142,6 +146,159 @@
   },
   "welcome": "ようこそ",
   "store_account": "アカウントをハブに保存",
+  "create_wallet": {
+    "error_enter_password": "ウォレットのパスワードを入力してください。",
+    "error_confirm_password": "ウォレットのパスワードを確認してください。",
+    "error_passwords_mismatch": "パスワードが一致しません。",
+    "success_wallet_saved": "ウォレットを保存しました",
+    "success_account_created": "アカウントを作成しました",
+    "success_ready_hub": "これでハブに入れます。",
+    "success_backup_before_hub": "ハブに入る前に、暗号化されたウォレットをバックアップしてください。",
+    "enter_hub": "ハブに入る",
+    "download_another_copy": "別のコピーをダウンロード",
+    "backup_wallet": "ウォレットをバックアップ",
+    "backup_encrypted_notice": "このバックアップはウォレットのパスワードで暗号化されています。",
+    "seed_title": "シードフレーズ",
+    "seed_subtitle": "アカウントを復旧できます。シードフレーズの保存は任意です。その後はウォレットの暗号化バックアップがあり、復旧にはこちらを推奨します。",
+    "reveal": "表示する",
+    "copied": "コピーしました",
+    "copy": "コピー",
+    "export": "エクスポート",
+    "seed_warning": "他人に見せないでください。知っている人はだれでもアカウントにアクセスできます。日ごとの保管には作成後に暗号化ウォレットバックアップを使ってください。",
+    "create_account": "アカウントを作成",
+    "password_title": "パスワードを作成",
+    "password_subtitle": "このパスワードでこのデバイス上のアカウントを保護します。",
+    "wallet_password": "ウォレットパスワード",
+    "confirm_password": "パスワードの確認",
+    "save_account_in_hub": "アカウントをハブに保存",
+    "continue": "続行"
+  },
+  "import_account": {
+    "title": "アカウントをインポート",
+    "subtitle": "アカウントを復元する方法を選んでください。"
+  },
+  "backup_wallet_modal": {
+    "subtitle": "後でこのアカウントを復元できるよう、ウォレットファイルをローカルにダウンロードします。",
+    "info_note": "お使いのデバイスにウォレットファイルを書き出します。安全な場所に保管してください。",
+    "current_password": "現在のパスワード",
+    "keep_password_in_export": "エクスポートするウォレットファイルに現在のパスワードをそのまま使う",
+    "new_password_for_backup": "このバックアップ用の新しいパスワード",
+    "download_wallet_file": "ウォレットファイルをダウンロード",
+    "error_no_active_wallet": "バックアップ対象のアクティブなウォレットが見つかりません。",
+    "error_unable_to_create_backup": "ウォレットのバックアップを作成できませんでした。"
+  },
+  "wallet_errors": {
+    "unable_to_unlock_default": "このウォレットのロックを解除できません。",
+    "unable_to_save_backup": "このウォレットバックアップを保存できませんでした。",
+    "unable_to_prepare_backup": "このウォレットバックアップを準備できませんでした。",
+    "account_not_found": "この保存済みアカウントが見つかりません。別のアカウントを選ぶか、バックアップからこのウォレットを復元してください。",
+    "account_incomplete": "この保存済みアカウントは不完全または損傷している可能性があります。別のアカウントを選ぶか、バックアップからこのウォレットを復元してください。",
+    "invalid_security_data": "この保存済みアカウントに無効なウォレットセキュリティデータが含まれています。別のアカウントを選ぶか、バックアップからこのウォレットを復元してください。",
+    "missing_encrypted_seed": "この保存済みアカウントに暗号化シード（ロック解除に必要なウォレットデータ）がありません。別のアカウントを選ぶか、バックアップからこのウォレットを復元してください。",
+    "missing_field": "この保存済みアカウントに{{field}}がありません。別のアカウントを選ぶか、バックアップからこのウォレットを復元してください。",
+    "field": {
+      "address0": "ウォレットアドレス",
+      "encryptedSeed": "暗号化シード（ロック解除に必要なウォレットデータ）",
+      "iv": "ウォレット暗号データ",
+      "kdfThreads": "ウォレットパスワード設定",
+      "mac": "ウォレット整合性チェック",
+      "salt": "ウォレットパスワードセキュリティデータ",
+      "version": "ウォレットバージョン"
+    }
+  },
+  "connection_mode": {
+    "title": "接続モード",
+    "subtitle": "Qortal がネットワークに接続する方法を選びます。",
+    "local_title": "ローカルノード",
+    "recommended": "推奨",
+    "local_full_decentralized": "完全分散アクセス",
+    "local_faster": "高速なパフォーマンス",
+    "local_data_local": "データはローカルに留まります",
+    "public_title": "パブリックノード",
+    "public_quick": "すばやくアクセス",
+    "public_limited_decentralization": "分散性は限定的",
+    "public_shared_infrastructure": "共有インフラ",
+    "status_running": "Core 実行中",
+    "status_missing": "Core を検出できません",
+    "status_checking": "ローカルノードを確認中",
+    "section_custom_nodes": "カスタムノード",
+    "add_custom_node": "カスタムノードを追加",
+    "empty_custom_nodes": "保存されたカスタムノードはありません",
+    "manual_setup_link": "ノードの手動セットアップ",
+    "save_settings": "設定を保存",
+    "manual_edit_title": "カスタムノードを編集",
+    "manual_add_title": "ノードの手動セットアップ",
+    "field_name": "名前",
+    "placeholder_node_name": "自分の Qortal ノード",
+    "field_node_url": "ノード URL",
+    "placeholder_node_url": "https://127.0.0.1:12391",
+    "field_api_key_optional": "API キー（任意）",
+    "placeholder_api_key": "API キーを入力",
+    "reload_after_new_node_title": "再読み込みが必要です",
+    "reload_after_new_node_message": "新しいノードを追加しました。アプリの更新が必要です。",
+    "reload_after_new_node_button": "アプリを再読み込み"
+  },
+  "intro_features": {
+    "secure_title": "安全でプライベート",
+    "secure_text": "鍵もデータも、常にあなたの管理下に。",
+    "fast_title": "すばやいアクセス",
+    "fast_text": "ロックを解除して、すぐに Qortal 体験へ。",
+    "decentralized_title": "分散型",
+    "decentralized_text": "自分の条件でネットワークに接続。",
+    "built_title": "あなたのために",
+    "built_text": "ひとつのアカウント。無限の可能性。"
+  },
+  "entry": {
+    "title": "Qortal に入る",
+    "subtitle": "アカウントにアクセスするか、新規作成してください。",
+    "create_account": "アカウントを作成",
+    "import_account": "アカウントをインポート",
+    "no_accounts": "このデバイスにアカウントが見つかりません。",
+    "import_choice_backup_title": "バックアップファイル",
+    "import_choice_backup_description": "保存した Hub バックアップをインポートします。",
+    "import_choice_authenticate_title": "今すぐ認証",
+    "import_choice_authenticate_description": "バックアップファイルを保存せずに使用します。",
+    "import_choice_seed_title": "シードフレーズ",
+    "import_choice_seed_description": "シードフレーズで復元します。",
+    "import_backup_heading": "バックアップファイルからインポート",
+    "import_backup_drop_hint": "バックアップをドロップするか、クリックして選択してください。",
+    "import_authenticate_heading": "バックアップファイルで認証",
+    "import_authenticate_drop_hint": "バックアップファイルをドロップするか、クリックして選択してください。このデバイスには保存されません。",
+    "import_seed_label": "シードフレーズ",
+    "import_seed_placeholder": "シードフレーズを入力",
+    "import_wallet_password": "ウォレットのパスワード",
+    "importing_account": "インポート中...",
+    "seed_import_error": "このシードフレーズをインポートできませんでした。",
+    "seed_import_duplicate": "このアカウントはこのデバイスに既に保存されています。",
+    "seed_import_success": "アカウントをインポートしました。",
+    "import_backup_success_one": "{{count}} 件のアカウントをインポートしました。",
+    "import_backup_success_other": "{{count}} 件のアカウントをインポートしました。",
+    "import_backup_duplicate": "これらのアカウントはこのデバイスに既に保存されています。",
+    "import_backup_invalid": "このバックアップファイルに有効なアカウントが含まれていません。",
+    "import_file_read_aborted": "ファイルの読み取りが中止されました",
+    "import_file_read_failed": "ファイルの読み取りに失敗しました",
+    "filter_accounts_aria": "アドレス・プライマリ名・メモでアカウントを絞り込み",
+    "filter_placeholder": "アドレス・プライマリ名・メモ…",
+    "filter_no_results": "一致するアカウントはありません。",
+    "filter_clear": "検索をクリア",
+    "wallet_edit_name_label": "名前",
+    "wallet_edit_account_name_placeholder": "アカウント名",
+    "wallet_edit_note_label": "メモ",
+    "wallet_edit_note_placeholder": "メモ（任意）",
+    "wallet_edit_remove": "削除",
+    "wallet_edit_save": "保存",
+    "wallet_edit_aria_label": "アカウント名とメモを編集"
+  },
+  "authentication_form": {
+    "unnamed_account": "名前のないアカウント",
+    "password_placeholder": "パスワードを入力",
+    "unlock": "ロック解除",
+    "choose_another_account": "別のアカウントを選択",
+    "using_local_node": "ローカルノード",
+    "using_public_node": "公開ノード",
+    "using_custom_node": "カスタムノード"
+  },
+
   "temp_auth": {
     "tooltip": "アカウントをハブに保存せずに認証する",
     "button": "一時認証"
diff --git a/src/i18n/locales/ja/core.json b/src/i18n/locales/ja/core.json
index 372741ce..86123e58 100644
--- a/src/i18n/locales/ja/core.json
+++ b/src/i18n/locales/ja/core.json
@@ -7,6 +7,7 @@
     "add_custom_framework": "カスタムフレームワークを追加します",
     "add_reaction": "反応を追加します",
     "add_theme": "テーマを追加します",
+    "back": "戻る",
     "backup_account": "バックアップアカウント",
     "backup_wallet": "バックアップウォレット",
     "cancel": "キャンセル",
@@ -96,7 +97,7 @@
     "start_typing": "ここで入力を開始します...",
     "trade_qort": "取引Qort",
     "transfer_qort": "QORTを転送します",
-    "unpin": "unpin",
+    "unpin": "ピン留め解除",
     "unpin_app": "UNPINアプリ",
     "unpin_from_dashboard": "ダッシュボードからリプリッド",
     "update": "アップデート",
@@ -132,11 +133,11 @@
   "core": {
     "block_height": "ブロックの高さ",
     "data_peers": "QDN (データ) ピア",
-    "information": "コア情報",
+    "information": "Core 情報",
     "peers": "コネクテッドピア",
-    "version": "コアバージョン"
+    "version": "Core バージョン"
   },
-  "current_language": "current language: {{ language }}",
+  "current_language": "現在の言語: {{ language }}",
   "dev": "開発者",
   "dev_mode": "開発モード",
   "developer": {
@@ -208,7 +209,7 @@
       "encrypt_app": "アプリを暗号化できません。公開されていないアプリ」",
       "fetch_app": "アプリを取得できません",
       "fetch_publish": "公開を取得できません",
-      "file_too_large": "file {{ filename }} is too large. Max size allowed is {{ size }} MB.",
+      "file_too_large": "ファイル {{ filename }} が大きすぎます。最大 {{ size }} MB です。",
       "generic": "エラーが発生しました",
       "initiate_download": "ダウンロードを開始できませんでした",
       "invalid_amount": "無効な量",
@@ -220,10 +221,10 @@
       "invalid_theme_format": "無効なテーマ形式",
       "invalid_zip": "無効なzip",
       "message_loading": "メッセージの読み込みエラー。",
-      "message_size": "your message size is of {{ size }} bytes out of a maximum of {{ maximum }}",
+      "message_size": "メッセージは {{ size }} バイトです（最大 {{ maximum }} バイト）",
       "minting_account_add": "ミントアカウントを追加できません",
       "minting_account_remove": "ミントアカウントを削除できません",
-      "missing_fields": "missing: {{ fields }}",
+      "missing_fields": "不足: {{ fields }}",
       "navigation_timeout": "ナビゲーションタイムアウト",
       "network_generic": "ネットワークエラー",
       "password_not_matching": "パスワードフィールドは一致しません！",
@@ -239,15 +240,17 @@
     },
     "generic": {
       "already_voted": "あなたはすでに投票しました。",
-      "avatar_size": "{{ size }} KB max. for GIFS",
+      "avatar_size": "GIF は最大 {{ size }} KB",
       "benefits_qort": "QORTを持つことの利点",
       "building": "建物",
       "building_app": "ビルディングアプリ",
       "confirmed": "確認済み",
-      "created_by": "created by {{ owner }}",
-      "buy_order_request": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy order</span>",
-      "buy_order_request_other": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy orders</span>",
+      "created_by": "{{ owner }} が作成",
+      "buy_order_request": "アプリ <br/><italic>{{hostname}}</italic> <br/><span>が買い注文を {{count}} 件要求しています</span>",
+      "buy_order_request_other": "アプリ <br/><italic>{{hostname}}</italic> <br/><span>が買い注文を {{count}} 件要求しています</span>",
       "devmode_local_node": "DEVモードにローカルノードを使用してください！ログアウトしてローカルノードを使用します。",
+      "disable_os_push": "OSのプッシュ通知をオフ",
+      "disable_os_push_desc": "このアプリのデスクトップ通知をミュートし、ハブ内の表示はそのままにします。",
       "downloading": "ダウンロード",
       "downloading_decrypting_app": "プライベートアプリのダウンロードと復号化。",
       "edited": "編集",
@@ -255,28 +258,39 @@
       "encrypted": "暗号化",
       "encrypted_not": "暗号化されていません",
       "amount_qort": "金額: {{ amount }} QORT",
-      "fee_qort": "fee: {{ fee }} QORT",
+      "app_notifications_hint": "Q-Appの通知はここに表示されます",
+      "fee_qort": "手数料: {{ fee }} QORT",
       "fetching_data": "アプリデータを取得します",
-      "foreign_fee": "foreign fee: {{ fee }}",
+      "foreign_fee": "外部手数料: {{ fee }}",
       "get_qort_trade_portal": "QORTALのCrossChain Tradeポータルを使用してQORTを取得します",
+      "loading": "読み込み中...",
       "minimal_qort_balance": "残高に少なくとも {{ quantity }} QORT があると、ほぼ即時の速度でチャットメッセージを送信できます。",
       "mentioned": "言及された",
+      "new_notification_from": "{{ appName }}からの新しい通知",
+      "new_payment_body": "{{ amount }} QORTを受け取りました。",
+      "new_payment_received": "新しい入金を受信しました",
+      "new_qmail": "新しいQ-Mailが届きました",
       "message_with_image": "このメッセージにはすでに画像があります",
-      "most_recent_payment": "{{ count }} most recent payment",
-      "name_available": "{{ name }} is available",
+      "most_recent_payment": "直近の支払い {{ count }} 件",
+      "name_available": "{{ name }} は利用可能です",
       "name_benefits": "名前の利点",
       "name_checking": "名前が既に存在するかどうかを確認します",
       "name_preview": "プレビューを使用するには名前が必要です",
       "name_publish": "公開するにはQortal名が必要です",
       "name_rate": "評価するには名前が必要です。",
       "name_registration": "残高は {{ balance }} QORT です。名前の登録には {{ fee }} QORT の手数料が必要です。",
-      "name_unavailable": "{{ name }} is unavailable",
+      "name_unavailable": "{{ name }} は利用できません",
+      "no_app_notifications": "アプリの通知はまだありません",
       "no_data_image": "画像のデータはありません",
       "no_description": "説明なし",
       "no_messages": "メッセージはありません",
       "no_message": "メッセージはありません",
       "no_minting_details": "ゲートウェイでミントの詳細を表示できません",
+      "no_notification_apps": "通知の許可があるアプリはまだありません。",
       "no_notifications": "新しい通知はありません",
+      "notification_settings": "通知設定",
+      "notification_settings_desc": "ハブ内の表示はそのままに、デスクトップ通知を送れるアプリを選びます。",
+      "notifications": "通知",
       "no_payments": "支払いなし",
       "no_pinned_changes": "現在、ピン留めアプリに変更がありません",
       "no_results": "結果はありません",
@@ -286,17 +300,18 @@
       "overwrite_qdn": "QDNに上書きします",
       "password_confirm": "パスワードを確認してください",
       "password_enter": "パスワードを入力してください",
-      "payment_request": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting a payment</span>",
-      "people_reaction": "people who reacted with {{ reaction }}",
+      "payment_request": "アプリ <br/><italic>{{hostname}}</italic> <br/><span>が支払いを要求しています</span>",
+      "people_reaction": "{{ reaction }} で反応した人",
       "processing_transaction": "トランザクションを処理していますか、お待ちください...",
       "publish_data": "Qortalにデータを公開：アプリからビデオまで何でも。完全に分散化されました！",
       "publishing": "出版...待ってください。",
       "qdn": "QDN保存を使用します",
-      "rating": "rating for {{ service }} {{ name }}",
+      "rating": "{{ service }} {{ name }} の評価",
       "register_name": "ピン留めアプリをQDNに保存するには、登録されたQORTAL名が必要です。",
-      "replied_to": "replied to {{ person }}",
+      "replied_to": "{{ person }} に返信",
       "revert_default": "デフォルトに戻します",
       "revert_qdn": "QDNに戻ります",
+      "revoke_permission": "取り消す",
       "save_qdn": "QDNに保存します",
       "secure_ownership": "あなたの名前で公開されたデータの安全な所有権。データとともに、名前をサードパーティに販売することもできます。",
       "select_file": "ファイルを選択してください",
@@ -308,7 +323,8 @@
       "unread_messages": "以下の未読メッセージ",
       "unsaved_changes": "ピン留めアプリに救われていない変更があります。それらをqdnに保存します。",
       "updating": "更新",
-      "wait": "お待ちください"
+      "wait": "お待ちください",
+      "open_q_trade_subtitle": "Q-Trade を開き、取引ポータルで QORT を購入します。"
     },
     "message": "メッセージ",
     "promotion_text": "プロモーションテキスト",
@@ -317,17 +333,17 @@
       "logout": "ログアウトしたいですか？",
       "new_user": "あなたは新しいユーザーですか？",
       "delete_chat_image": "以前のチャット画像を削除しますか？",
-      "perform_transaction": "would you like to perform a {{action}} transaction?",
+      "perform_transaction": "{{action}} トランザクションを実行しますか？",
       "provide_thread": "スレッドタイトルを提供してください",
       "publish_app": "このアプリを公開しますか？",
       "publish_avatar": "アバターを公開しますか？",
       "publish_qdn": "設定をQDN（暗号化）に公開しますか？",
       "overwrite_changes": "このアプリは、既存のQDNが節約したピン留めアプリをダウンロードできませんでした。これらの変更を上書きしませんか？",
-      "rate_app": "would you like to rate this app a rating of {{ rate }}?. It will create a POLL tx.",
+      "rate_app": "このアプリを {{ rate }} で評価しますか？次の評価まであと {{ days }} 日です。",
       "register_name": "この名前を登録しますか？",
       "reset_pinned": "あなたの現在のローカルの変更が気に入らない？デフォルトのピン留めアプリにリセットしますか？",
       "reset_qdn": "あなたの現在のローカルの変更が気に入らない？保存したQDNピン留めアプリにリセットしますか？",
-      "transfer_qort": "would you like to transfer {{ amount }} QORT"
+      "transfer_qort": "{{ amount }} QORT を送金しますか"
     },
     "success": {
       "order_submitted": "購入注文が提出されました",
@@ -336,6 +352,7 @@
       "rated_app": "正常に評価されています。ネットワークが変更を提案するまで数分待ってください。",
       "request_read": "このリクエストを読みました",
       "transfer": "転送は成功しました！",
+      "transfer_submitted": "送金は正常に送信されました。",
       "voted": "正常に投票しました。ネットワークが変更を提案するまで数分待ってください。"
     }
   },
@@ -365,11 +382,42 @@
     },
     "status_title": "ミントステータス",
     "tier_share_per_block": "ブロックごとのティアシェア",
-    "total_minter_in_tier": "このティアの合計ミンター数"
+    "total_minter_in_tier": "このティアの合計ミンター数",
+    "panel": {
+      "dialog_subtitle": "ミンティングの状態・進捗・次のステップを確認します。",
+      "state_syncing_title": "同期中",
+      "state_syncing_body": "ノードはまだ同期中のため、ミンティングはまだ開始できません。",
+      "state_active_title": "ミンティング有効",
+      "state_active_body_node_selection": "このミンターキーはこのノードで設定されています。統計は選択中のアカウントを反映します。",
+      "state_active_body_account": "このアカウントはこのノードでミンティングするよう設定されています。",
+      "state_inactive_title": "ミンティングしていません",
+      "state_inactive_body_not_in_group": "このアカウントはまだミンターグループに含まれていません。",
+      "state_inactive_body_multi_key": "このノードにはすでに複数のミンティングキーが設定されています。",
+      "state_inactive_body_ready": "このアカウントは次のミンティングの手順へ進める状態です。",
+      "next_step_visit_q_mintership": "Q-Mintership アプリからミンター申請を行ってください。",
+      "next_step_already_active": "このノードではすでにミンティングが有効です。",
+      "next_step_wait_sync": "ミンティングを始めるには、ノードの同期完了をお待ちください。",
+      "next_step_start_when_ready": "準備ができたらこのノードでミンティングを開始してください。",
+      "section_your_wallet": "あなたのウォレット",
+      "section_minter_profile_stats": "ミンタープロフィール（統計）",
+      "section_account_identity": "アカウント情報",
+      "section_progress_next_level": "次のレベルまでの進捗",
+      "section_next_step": "次のステップ",
+      "section_node_minting_accounts": "ノードのミンティングアカウント",
+      "select_account_for_stats_hint": "右側の進捗と報酬統計を更新するアカウントを選びます。",
+      "badge_viewing_stats": "統計を表示中",
+      "blocks_to_level": "レベル {{level}} までのブロック",
+      "minting_for_approx_days": "ミンティング期間：約 {{days}} 日",
+      "reference_only": "（参考）",
+      "rewards_info_subtitle_own": "（自分の報酬情報）",
+      "rewards_info_subtitle_selected": "（選択中のミンター — このキーの報酬）",
+      "network_details": "ネットワーク詳細",
+      "loading_spinner_aria": "読み込み中"
+    }
   },
   "name": "名前",
   "name_app": "名前/アプリ",
-  "new_post_in": "new post in {{ title }}",
+  "new_post_in": "{{ title }} の新しい投稿",
   "none": "なし",
   "note": "注記",
   "option": "オプション",
@@ -389,10 +437,36 @@
   "publish": "公開",
   "q_apps": {
     "about": "このq-appについて",
-    "q_mail": "Qメール",
-    "q_manager": "Qマネージャー",
+    "q_mail": "Q-Mail",
+    "q_manager": "Q-Manager",
     "q_sandbox": "Q-Sandbox",
-    "q_wallets": "Q-Wallets"
+    "q_wallets": "Q-Wallets",
+    "wallets_workspace": "ウォレットのワークスペース"
+  },
+  "account_lookup": {
+    "dialog_title": "ユーザー検索",
+    "empty_title": "アカウントを検索",
+    "empty_subtitle": "名前またはアドレスを入力",
+    "tooltip_send_disabled": "これはあなた自身のプロフィールです。",
+    "tooltip_block_public_node": "公開ノードではユーザーのブロックは利用できません。",
+    "tooltip_block_self": "自分自身をブロックすることはできません。",
+    "error_lookup_failed": "このアカウントを照会できませんでした。",
+    "chip_level": "レベル {{level}}",
+    "chip_blocked": "ブロック中",
+    "chip_no_registered_name": "登録名なし",
+    "section_minting_progress": "ミンティングの進行状況",
+    "minting_remaining": "残り {{remaining}}",
+    "minting_blocks_to_level": "レベル {{level}} まであと {{remaining}}",
+    "minting_approx_one": "約 {{count}} 日のミンティング",
+    "minting_approx_other": "約 {{count}} 日のミンティング",
+    "minting_days_label": "ミンティング:",
+    "label_address": "アドレス",
+    "label_public_key": "公開鍵",
+    "payments_title": "最近の支払い",
+    "pagination_rows_per_page": "ページあたりの行:",
+    "pagination_displayed_rows": "{{count}} 件中 {{from}}～{{to}}",
+    "action_block": "ブロック",
+    "action_unblock": "ブロック解除"
   },
   "app_detail": {
     "about": "概要",
@@ -454,7 +528,10 @@
     "official_apps": "公式アプリ"
   },
   "aria": {
-    "apps_library_tabs": "アプリライブラリナビゲーションタブ"
+    "apps_library_tabs": "アプリライブラリナビゲーションタブ",
+    "core_controls": "Core の操作",
+    "switch_theme_dark": "ダークモードに切り替え",
+    "switch_theme_light": "ライトモードに切り替え"
   },
   "supply": "供給",
   "tags": "タグ",
@@ -471,12 +548,12 @@
   "thread_other": "スレッド",
   "thread_title": "スレッドタイトル",
   "time": {
-    "day_one": "{{count}} day",
-    "day_other": "{{count}} days",
-    "hour_one": "{{count}} hour",
-    "hour_other": "{{count}} hours",
-    "minute_one": "{{count}} minute",
-    "minute_other": "{{count}} minutes",
+    "day_one": "{{count}} 日",
+    "day_other": "{{count}} 日",
+    "hour_one": "{{count}} 時間",
+    "hour_other": "{{count}} 時間",
+    "minute_one": "{{count}} 分",
+    "minute_other": "{{count}} 分",
     "time": "時間"
   },
   "title": "タイトル",
@@ -491,7 +568,7 @@
   "video_fetching": "Qortalネットワークから動画を取得しています...",
   "video_building": "ダウンロード完了：動画を構築中...",
   "vote": "投票する",
-  "vote_other": "{{ count }} votes",
+  "vote_other": "{{ count }} 票",
   "zip": "ジップ",
   "wallet": {
     "litecoin": "ライトコインウォレット",
@@ -499,6 +576,157 @@
     "wallet": "財布",
     "wallet_other": "財布"
   },
+  "widget_container": {
+    "empty_message": "今すぐ表示できる内容はありません。",
+    "empty_title": "まだ項目がありません",
+    "error_title": "このウィジェットを読み込めませんでした",
+    "loading": "読み込み中",
+    "loading_message": "既定の Qortal ノードから最新の公開データを取得しています。",
+    "retry": "再試行"
+  },
+  "quitter_feed": {
+    "error_generic": "公開の Quitter フィードは一時的に利用できません。しばらくしてからもう一度お試しください。",
+    "error_following": "パーソナライズされた Quitter フィードは一時的に利用できません。もう一度お試しください。",
+    "error_timeout": "フィードの読み込みに失敗しました。再試行するか「一般」に戻れます。",
+    "loading_following": "フォロー中のフィードを読み込み中…",
+    "loading_general": "フィードを読み込み中…",
+    "error_title_following": "フィードの読み込みに失敗しました",
+    "error_title_general": "投稿を読み込めませんでした",
+    "empty_title_no_name": "フィードをパーソナライズするにはサインインしてください",
+    "empty_title_no_following": "まだ誰もフォローしていないようです。",
+    "empty_title_no_posts": "フォロー中のアカウントの投稿はありません",
+    "empty_title_general": "投稿がありません",
+    "empty_message_no_name": "パーソナライズされたフィードを作るには Qortal 名でサインインしてください。",
+    "empty_message_no_following": "Quitter を見てアカウントをフォローし、フィードを作りましょう。",
+    "empty_message_no_posts": "フォロー中のアカウントはまだ Quitter に投稿していません。",
+    "tab_general": "一般",
+    "tab_following": "フォロー中",
+    "subtitle_personalized": "パーソナライズされたフィード",
+    "subtitle_public": "公開フィード",
+    "retry_following": "再試行",
+    "retry_general": "再試行",
+    "return_to_general": "一般に戻る",
+    "posts_showing_one": "表示中の投稿 {{count}} 件",
+    "posts_showing_other": "表示中の投稿 {{count}} 件",
+    "new_posts_one": "新しい投稿 {{count}} 件",
+    "new_posts_other": "新しい投稿 {{count}} 件"
+  },
+  "quick_tools_pad": {
+    "user_search": "ユーザー検索",
+    "wallets": "ウォレット",
+    "minting": "ミンティング",
+    "backup_wallet": "ウォレットをバックアップ",
+    "q_chat": "Q-Chat",
+    "notifications_enable": "通知をオン",
+    "notifications_mute": "通知をオフ",
+    "apps": "アプリ",
+    "extras": "",
+    "hint_notifications_desktop_only": "デスクトップ通知のみをミュートします。ハブ内の通知は続きます。",
+    "hint_minting_panel": "ミンターになるとこのパネルが使えます。まずは Q-Mintership へどうぞ。",
+    "snackbar_backup_wallet": "ウォレットファイルをダウンロードしてください。アカウントにアクセスするために必要です。"
+  },
   "website": "Webサイト",
-  "welcome": "いらっしゃいませ"
+  "welcome": "いらっしゃいませ",
+  "qortino_workspace": {
+    "modules_hotkeys_label": "Hotkeys",
+    "modules_hotkeys_description": "Curated shortcuts for your most-used routes.",
+    "modules_music_label": "Music player",
+    "modules_music_description": "A compact Earbump player with search and quick playback.",
+    "modules_suggest_label": "Suggest a module",
+    "modules_suggest_description": "Compose > Add Subject + Message & Send it our way!",
+    "workspace_empty_prompt": "Choose what lives above QORTINO.",
+    "workspace_header_hotkeys": "Hotkeys",
+    "workspace_header_music": "Music player",
+    "workspace_add_app": "Add app",
+    "getting_started_heading": "Getting started",
+    "onboarding_step_progress": "Step {{current}} / {{total}}",
+    "dialog_module_title": "Choose a module",
+    "dialog_module_subtitle": "Pick what lives above QORTINO.",
+    "dialog_hotkeys_title": "Select hotkeys",
+    "dialog_hotkeys_subtitle": "Saved automatically for this account.",
+    "dialog_music_search_title": "Search Earbump",
+    "dialog_music_search_subtitle": "Find a track, press play, and drop it into the player above.",
+    "search_placeholder_qapps": "Search Q-Apps",
+    "search_placeholder_tracks": "Search tracks or artists",
+    "section_recommended": "Recommended",
+    "curated_badge": "[ CURATED ]",
+    "hotkeys_loading_library": "Loading Q-Apps library...",
+    "hotkeys_unavailable_title": "Q-Apps unavailable",
+    "hotkeys_no_match_title": "No Q-Apps match yet",
+    "hotkeys_no_match_hint": "Try another app name to wire a shortcut into the selected slot.",
+    "error_hotkey_catalog": "Unable to load Q-Apps right now.",
+    "music_section_results": "Results",
+    "music_section_discovery": "Discovery",
+    "music_loading_search": "Searching the EarBump library...",
+    "music_loading_discovery": "Loading EarBump discovery...",
+    "music_quiet_title": "EarBump is quiet right now",
+    "music_no_tracks_title": "No tracks surfaced",
+    "music_no_tracks_hint": "Try another title or artist to pull something into the player.",
+    "error_earbump_discovery": "Unable to load EarBump right now.",
+    "error_earbump_search": "Unable to search EarBump right now.",
+    "music_syncing_library": "Syncing with EarBump library...",
+    "music_empty_title": "EarBump library",
+    "music_empty_uploaded": "Waiting for library",
+    "music_track_load_failed": "This track could not finish loading on your node.",
+    "music_no_peers_data": "No peers for remaining data",
+    "music_preparing_peers_one": "Preparing on your node... {{percent}}% ({{count}} peer)",
+    "music_preparing_peers_other": "Preparing on your node... {{percent}}% ({{count}} peers)",
+    "music_preparing_percent_only": "Preparing on your node... {{percent}}%",
+    "music_searching_peers": "Looking for peers...",
+    "music_finalizing_track": "Finalizing the track on your node...",
+    "music_preparing_base": "Preparing on your node...",
+    "music_playback_stalled": "Playback stalled. Press play to retry.",
+    "music_stream_stalled": "Track stalled. Rebuilding the stream...",
+    "hotkeys_launch_description": "Launch {{appName}}",
+    "hotkeys_fallback_launch": "Launch Q-App",
+    "reaction_hotkeys_ready": "Hotkeys panel ready.",
+    "reaction_music_panel_ready": "Music panel ready.",
+    "reaction_panel_cleared": "Panel cleared.",
+    "reaction_music_player_ready": "Music player ready.",
+    "reaction_locked_track": "Locked on {{title}}.",
+    "reaction_track_rotation": "{{title}} is in rotation.",
+    "reaction_onboarding_route": "Onboarding route open. I'll keep the next step warm.",
+    "reaction_support_chat": "Support chat is open. Ask for the 6 QORT and I'll queue step two.",
+    "reaction_q_trade_open": "Q-Trade is up. If you grab QORT there, I'll take you forward.",
+    "reaction_name_flow": "Name flow open. This is where the hub starts recognizing you.",
+    "reaction_avatar_flow": "Avatar flow ready. Let's give this place a face.",
+    "track_meta_separator": "·",
+    "a11y_clear_hotkey_slot": "Clear slot {{n}}",
+    "runtime_workspace_bay_title": "Workspace bay hit a runtime snag.",
+    "runtime_workspace_bay_body": "QORTINO below is still safe. Refresh the Hub and if this keeps happening we will trace the exact crash from here.",
+    "runtime_qortino_title": "QORTINO hit a runtime snag.",
+    "runtime_qortino_body": "The workspace bay above is still safe. Refresh the Hub and if this keeps happening we will trace the exact crash from here.",
+    "hotkey_slot_number": "スロット {{n}}"
+  },
+  "bookmarks": {
+    "title": "ブックマーク",
+    "bookmarked": "ブックマーク済み",
+    "add_page": "ページを追加",
+    "loading": "ブックマークを読み込み中...",
+    "folder": "フォルダー",
+    "create_folder": "フォルダーを作成",
+    "folder_name": "フォルダー名",
+    "new_folder": "新しいフォルダー",
+    "top_level": "トップレベル",
+    "edit_bookmark": "ブックマークを編集",
+    "add_bookmark": "ブックマークを追加",
+    "save_location_without_query": "クエリパラメータなしで Q-App の場所を保存します。",
+    "name": "名前",
+    "bookmark_name_placeholder": "ブックマーク名",
+    "qortal_link": "Qortal リンク",
+    "qortal_link_placeholder": "qortal://APP/名前/パス",
+    "no_bookmarks": "ブックマークはまだありません。",
+    "no_bookmarks_folder": "このフォルダーにブックマークはありません。",
+    "bookmark_count_one": "{{count}} 件のブックマーク",
+    "bookmark_count_other": "{{count}} 件のブックマーク",
+    "edit": "編集",
+    "move": "移動",
+    "delete": "削除",
+    "rename": "名前を変更",
+    "remove": "削除",
+    "create": "作成",
+    "more": "その他",
+    "delete_folder_title": "フォルダーを削除しますか？",
+    "delete_folder_message": "このフォルダー内のブックマークはトップレベルに移動されます。"
+  }
 }
diff --git a/src/i18n/locales/ja/group.json b/src/i18n/locales/ja/group.json
index c84ddcb8..6f508174 100644
--- a/src/i18n/locales/ja/group.json
+++ b/src/i18n/locales/ja/group.json
@@ -28,6 +28,280 @@
     "select_group": "グループを選択",
     "visit_q_mintership": "Q-Mintership を訪問"
   },
+  "dashboard": {
+    "qort_balance": "QORT 残高",
+    "node_status": "ノード状態",
+    "node_unavailable": "ノードは利用できません",
+    "sync_percent": "{{percent}}% 同期済み",
+    "minter_level": "ミンターレベル",
+    "peers": "ピア",
+    "qdn": "QDN",
+    "core": "Core",
+    "hub": "Hub",
+    "node": "ノード",
+    "using_node": "使用中のノード",
+    "change_node": "ノードを変更",
+    "node_type": "ノードの種類",
+    "node_height": "ノードの高さ",
+    "local_node": "ローカルノード",
+    "public_node": "パブリックノード",
+    "custom_node": "カスタムノード",
+    "synchronizing": "同期中",
+    "fully_operational": "完全稼働",
+    "not_operational": "稼働していません",
+    "attention_needed": "要対応",
+    "apply": "適用",
+    "info_panel_status": "ステータス",
+    "info_panel_node_comment": "// node_info",
+    "minter_pin_save_progress_default": "レベルバーをデフォルトの表示として保存",
+    "minter_pin_save_dots_default": "ミンティングのドットをデフォルトの表示として保存",
+    "node_switch_error": "現在ノードを切り替えられませんでした。",
+    "node_menu_local": "ローカルノード",
+    "node_menu_public": "パブリックノード",
+    "qortino_runtime_title": "QORTINO カードシェルでランタイムエラーが発生しました。",
+    "qortino_runtime_body": "ダッシュボードの他の部分は安全です。Hub を更新し、繰り返す場合はチームに報告してください。",
+    "no_custom_nodes_saved": "保存されたカスタムノードはありません",
+    "wallet_activity": "ウォレットの活動",
+    "send": "送信",
+    "receive": "受信",
+    "buy": "購入",
+    "recent_transaction": "直近のトランザクション",
+    "loading_wallet_activity": "ウォレットの活動を読み込み中...",
+    "sent_to": "送信先 ",
+    "received_from": "受信元 ",
+    "no_wallet_activity": "ウォレットに新しい活動はありません。",
+      "wallet_activity_window": "過去7日以内の最新トランザクション",
+      "wallet_activity_unknown_address": "不明なアドレス",
+      "wallet_activity_relative_just_now": "たった今",
+      "wallet_activity_relative_minutes_ago_one": "{{count}}分前",
+      "wallet_activity_relative_minutes_ago_other": "{{count}}分前",
+      "wallet_activity_relative_hours_ago_one": "{{count}}時間前",
+      "wallet_activity_relative_hours_ago_other": "{{count}}時間前",
+      "wallet_activity_relative_days_ago_one": "{{count}}日前",
+      "wallet_activity_relative_days_ago_other": "{{count}}日前",
+      "open_in_q_chat": "Q-Chat で開く",
+    "open_in_q_apps": "Q-Apps で開く",
+    "quitter_feed": "Quitter フィード",
+    "quitter_show_more": "もっと見る",
+    "quitter_show_less": "表示を減らす",
+    "quitter_video_attachment": "動画の添付",
+    "quitter_video_preview_hub": "Hub ではプレビューは閲覧のみです",
+    "featured_q_apps": "おすすめの Q-Apps",
+    "featured_q_apps_subtitle": "ダッシュボードから信頼できるコミュニティアプリを直接起動します。",
+    "explore_all_q_apps": "すべての Q-Apps を見る",
+    "reduce_motion": "動きを減らす",
+    "account_overview": "アカウント概要",
+    "qortal_name_address": "QORTAL 名とアドレス",
+    "profile": "プロフィール",
+    "profile_settings": "プロフィール設定",
+    "profile_settings_description": "名前とアカウントの身元を確認します。",
+    "security": "セキュリティ",
+    "security_settings": "セキュリティ設定",
+    "security_settings_description": "秘密鍵の表示とコピーは必要な場合にだけ行ってください。",
+    "developer": "開発者",
+    "developer_settings": "開発者設定",
+    "developer_settings_description": "高度なテスト用に開発者ツールと診断を有効にします。",
+    "system": "システム",
+    "system_settings": "システム設定",
+    "system_settings_description": "通知、モーション、ピン留めアプリ、ブロック済みアカウントを制御します。",
+    "current_name": "現在の名前",
+    "no_name_registered": "登録名がありません",
+    "wallet_address": "ウォレットアドレス",
+    "unavailable": "利用不可",
+    "no_active_wallet": "アクティブなウォレットがありません",
+    "names_qapp_actions_hint": "購入・売却・改名は Names Q-App で行ってください。",
+    "open_the": "開く",
+    "names": "Names",
+    "names_qapp_hint_suffix": "名前の購入・売却、または登録名の変更用の Q-App です。",
+    "private_key_warning": "秘密鍵は共有しないでください。取得した人がこのウォレットと資金を操作できる可能性があります。",
+    "wallet_password": "ウォレットのパスワード",
+    "wallet_password_placeholder": "ウォレットのパスワードを入力",
+    "decrypt": "復号",
+    "copy_key": "鍵をコピー",
+    "private_key": "秘密鍵",
+    "private_key_hint": "ウォレットの復元や移行が必要なときだけ秘密鍵を復号してください。",
+    "notifications_update_error": "アプリ通知を今すぐ更新できませんでした。",
+    "wallet_unavailable_error": "ウォレットデータは現在利用できません。",
+    "wallet_password_required": "秘密鍵を復号するにはウォレットのパスワードを入力してください。",
+    "wallet_decrypt_error_with_message": "ウォレットを復号できませんでした: {{message}}",
+    "wallet_decrypt_error": "そのパスワードではウォレットを復号できませんでした。",
+    "private_key_copied": "秘密鍵をクリップボードにコピーしました。",
+    "enable_dev_mode": "開発者モードを有効化",
+    "enable_dev_mode_desc": "Hub 全体でローカル開発画面、診断、テストツールを利用できます。",
+    "dev_mode_tip": "ヒント: 有効にするとサイドバーに開発者ツールのアイコンが表示されます。左端にカーソルを合わせると見える場合があります。",
+    "reduce_app_notifications": "アプリ通知を減らす",
+    "reduce_app_notifications_desc": "オンにするとデスクトップのプッシュ通知をミュートします。通常の Hub アラートにはオフのままにしてください。",
+    "reduce_ui_animations": "UI アニメーションを減らす",
+    "reduce_ui_animations_desc": "オンにすると Hub の動きを抑えます。通常のアニメーション UI にはオフにしてください。",
+    "pinned_qapp_backup": "ピン留め Q-App のバックアップ",
+    "pinned_qapp_backup_desc": "ピン留めした Q-App を暗号化された QDN 設定に保存し、同じレイアウトを端末間で使えます。",
+    "manage_backup": "バックアップを管理",
+    "block_list": "ブロック一覧",
+    "block_list_desc": "ブロックした名前とアドレスを確認し、準備ができたらブロックを解除します。",
+    "blocked_count": "{{count}} 件ブロック",
+    "addresses": "アドレス",
+    "unblock": "ブロック解除",
+    "no_blocked_accounts": "まだブロックしたアカウントはありません。",
+    "show_receive_qr": "受取用 QR を表示",
+    "copy_address": "アドレスをコピー",
+    "privacy_mode_tooltip": "プライバシーモード: 画面共有時に機微情報をぼかします",
+    "toggle_privacy_mode": "プライバシーモードの切替",
+    "send_qort": "QORT を送信",
+    "send_qort_subtitle": "登録名またはアドレスへ QORT を送金します。",
+    "close_send_qort_modal": "QORT 送金モーダルを閉じる",
+    "receive_qort": "QORT を受信",
+    "receive_qort_subtitle": "スキャンして QORT を受け取る",
+    "close_receive_qort_modal": "QORT 受取モーダルを閉じる",
+    "download_qr": "QR をダウンロード",
+    "qortal_address_or_name": "Qortalアドレスまたは登録済みの名前",
+    "blocked": "ブロック",
+    "account_status_online": "オンライン",
+    "account_status_busy": "取り込み中",
+    "account_status_invisible": "非表示",
+    "account_settings_tooltip": "アカウント設定",
+    "open_account_settings_aria": "アカウント設定を開く",
+    "name_change_confirm": "登録名を {{oldName}} から {{newName}} に変更しますか？",
+    "name_change_success": "名前変更の送信が完了しました。",
+    "name_change_register_first": "名前を変更する前に登録してください。",
+    "name_change_enter_new_name": "使用する新しい名前を入力してください。",
+    "name_change_different_from_current": "現在の名前とは別の名前を選んでください。",
+    "name_change_details_still_loading": "現在の名前の情報を読み込み中です。しばらくしてから再試行してください。",
+    "name_change_choose_available": "続行する前に利用可能な名前を選んでください。",
+    "name_change_wallet_password_required": "名前を変更する前にウォレットのパスワードを入力してください。",
+    "name_change_wallet_password_failed": "ウォレットのパスワードを確認できませんでした。",
+    "current_name_details_load_failed": "現在の名前の情報を読み込めませんでした。",
+    "name_change_unknown_error": "名前の変更中に問題が発生しました。",
+    "name_availability_available": "この名前は利用できます。",
+    "name_availability_checking": "名前の利用可否を確認しています…",
+    "name_availability_same_as_current": "すでに使っている名前とは別の名前を選んでください。",
+    "name_availability_taken": "この名前はすでに使われています。"
+  },
+  "groups_widget": {
+    "accept": "承認する",
+    "approve": "承認",
+    "cancel": "キャンセル",
+    "characters_count": "{{current}}/{{max}}",
+    "confirm_approve_request": "このリクエストを承認してグループへ招待しますか？",
+    "confirm_join_group": "このグループに今すぐ参加しますか？",
+    "confirm_join_promoted_closed": "このプロモーション済みグループに参加リクエストを送信しますか？",
+    "confirm_join_promoted_open": "このプロモーション済みグループに今すぐ参加しますか？",
+    "connecting": "接続中…",
+    "discover_groups": "グループを見つける",
+    "error_accept_invite": "その招待を今は受理できません。",
+    "error_approve_request": "そのリクエストを今は承認できません。",
+    "error_load_invites": "グループ招待を今は読み込めません。",
+    "error_load_promotions": "プロモーション済みグループを今は読み込めません。",
+    "error_load_requests": "参加リクエストを今は読み込めません。",
+    "error_promoted": "そのプロモーション済みグループへの操作が今はできません。",
+    "error_publish_promotion": "そのプロモーションを今は公開できません。",
+    "fresh_promotion_snippet": "このグループには新しいプロモーション情報があります。",
+    "from_label": "送信者",
+    "group_admin_only": "グループ管理者のみ",
+    "group_general": "一般",
+    "group_named": "グループ {{id}}",
+    "ignore": "無視",
+    "invitation_ready": "確認待ちの招待",
+    "invite_hidden": "招待はひとまずこのウィジェットから非表示にしました。",
+    "invites_empty_description": "新しいグループ招待は届いたらここに表示されます。",
+    "invites_empty_title": "保留中の招待はありません",
+    "joined_group": "{{name}} に参加しました。",
+    "joined_promoted": "{{name}} に参加しました。",
+    "join_group": "グループに参加",
+    "join_request_sent": "{{name}} への参加リクエストを送信しました。",
+    "loading_invites": "招待を読み込み中",
+    "loading_notifications": "通知を読み込み中",
+    "loading_promoted": "プロモーション済みグループを読み込み中",
+    "loading_requests": "リクエストを読み込み中",
+    "members_count": "{{count}} 人のメンバー",
+    "new_encrypted_message": "新しい暗号化メッセージ",
+    "notifications_empty_message": "Q-Chat のコミュニティに参加すると、グループメッセージ・メンション・アクティビティがここに表示されます。",
+    "notifications_empty_title": "Q-Chat グループから始めましょう",
+    "open": "開く",
+    "open_conversation": "会話を開く",
+    "private_group": "非公開グループ",
+    "private_group_invite": "非公開グループへの招待",
+    "processing": "処理中…",
+    "promoted_by": "{{name}} がプロモーション",
+    "promoted_empty_message": "新しいハイライトがあるとプロモーション済みグループがここに表示されます。",
+    "promoted_empty_title": "プロモーション済みグループはありません",
+    "promote_dialog_fee": " 公開手数料: {{fee}} QORT。",
+    "promote_dialog_intro": "管理中のグループの短いハイライト更新を共有します。",
+    "promote_group": "グループをプロモーション",
+    "promote_page_title": "自分のグループをプロモーション",
+    "promotion_published": "グループプロモーションを公開しました。",
+    "promotion_placeholder": "このグループの短いプロモ文を入力してください。",
+    "public_group": "公開グループ",
+    "refresh": "更新",
+    "reject": "却下",
+    "request_access": "参加をリクエスト",
+    "request_approved": "{{requester}} が {{group}} に承認されました。",
+    "request_removed": "リクエストをひとまずこのウィジェットから削除しました。",
+    "request_sent": "リクエストを送信しました",
+    "requests_empty_description": "管理しているグループからの参加リクエストがここに表示されます。",
+    "requests_empty_title": "保留中のリクエストはありません",
+    "select_admin_group": "管理者であるグループを選択",
+    "tab_invites": "招待",
+    "tab_notifications": "通知",
+    "tab_promoted": "プロモーション",
+    "tab_requests": "リクエスト",
+    "unknown": "不明",
+    "view_conversation": "会話を表示",
+    "wants_to_join": "このグループへの参加を希望しています。",
+    "you": "あなた",
+    "publish": "公開"
+  },
+  "subscription": {
+    "subscriptions": "サブスクリプション",
+    "tooltip_actions_needed_one": "{{title}} – {{count}} 件の対応が必要",
+    "tooltip_actions_needed_other": "{{title}} – {{count}} 件の対応が必要",
+    "relative_soon": "まもなく",
+    "relative_in_minutes_one": "{{count}} 分後",
+    "relative_in_minutes_other": "{{count}} 分後",
+    "relative_in_hours_one": "{{count}} 時間後",
+    "relative_in_hours_other": "{{count}} 時間後",
+    "relative_in_days_one": "{{count}} 日後",
+    "relative_in_days_other": "{{count}} 日後",
+    "relative_in_months_one": "{{count}} か月後",
+    "relative_in_months_other": "{{count}} か月後",
+    "row_fallback_title": "サブスクリプション",
+    "by_creator": "{{name}} 作成",
+    "creator_fallback": "Qortal クリエイター",
+    "price_line": "{{price}} QORT / {{interval}}",
+    "expires_suffix": " – 期限 {{time}}",
+    "status_due": "支払い期限",
+    "status_active": "有効",
+    "status_owner": "オーナー",
+    "managed_fallback": "管理サブスクリプション",
+    "members_one": "メンバー {{count}} 人",
+    "members_other": "メンバー {{count}} 人",
+    "join_requests_suffix_one": " – 参加リクエスト {{count}} 件",
+    "join_requests_suffix_other": " – 参加リクエスト {{count}} 件",
+    "re_encryption_suffix": " – 再暗号化が必要",
+    "actions_badge_one": "{{count}} 件",
+    "actions_badge_other": "{{count}} 件",
+    "loading": "サブスクリプションを読み込み中",
+    "section_needs_action": "対応が必要",
+    "section_active": "有効",
+    "open_subscriptions": "サブスクリプションを開く",
+    "empty_title": "サブスクリプション対応の Q-App を見つける",
+    "empty_body": "SubWire など、サブスクリプションに対応した Q-App からクリエイターやコミュニティを購読できます。",
+    "open_subwire": "SubWire を開く",
+    "tab_subscriptions": "サブスクリプション",
+    "tab_subwire": "SubWire"
+  },
+  "group_invites": {
+    "empty_title": "招待はありません",
+    "empty_secondary_1": "保留中の招待はありません",
+    "empty_secondary_2": "現時点では。",
+    "empty_tertiary_no_groups": "まだどのグループにも参加していません。",
+    "cta_find_groups": "グループを探す"
+  },
+  "group_join_requests": {
+    "empty_title": "参加リクエストはありません",
+    "empty_secondary_1": "保留中のリクエストはありません",
+    "empty_secondary_2": "現時点では。",
+    "empty_tertiary_no_admin_groups": "まだ管理しているグループはありません。"
+  },
   "advanced_options": "高度なオプション",
   "block_delay": {
     "minimum": "最小ブロック遅延",
@@ -72,6 +346,8 @@
     "generic": {
       "avatar_publish_fee": "アバターの公開には {{ fee }} が必要です",
       "avatar_registered_name": "アバターを設定するには登録済みの名前が必要です",
+      "add_new_key_option": "新しい鍵を追加",
+      "add_new_key_sparingly": "グループ鍵が大きくなりすぎないよう、新しい鍵は必要なときに限って追加してください。",
       "admin_only": "あなたが管理者のグループのみ表示されます",
       "already_in_group": "すでにこのグループに参加しています！",
       "block_delay_minimum": "グループ取引承認の最小ブロック遅延",
@@ -105,6 +381,7 @@
       "node_minting_key": "このノードに現在接続されているアカウントのマイニング鍵があります",
       "no_announcement": "お知らせはありません",
       "no_display": "表示するものがありません",
+      "no_description": "説明なし",
       "no_selection": "グループが選択されていません",
       "not_part_group": "暗号化されたグループの一員ではありません。管理者による鍵の再暗号化をお待ちください。",
       "only_encrypted": "暗号化されていないメッセージのみ表示されます",
@@ -170,5 +447,11 @@
       "user_joined": "ユーザーが正常に参加しました！"
     }
   },
+  "context_menu": {
+    "mark_as_read": "既読にする",
+    "mute_push_notifications": "プッシュ通知をオフ",
+    "unmute_push_notifications": "プッシュ通知をオン",
+    "mark_all_read": "すべて既読にする"
+  },
   "thread_posts": "新しいスレッド投稿"
 }
diff --git a/src/i18n/locales/ja/node.json b/src/i18n/locales/ja/node.json
index 44f36a1d..eb27dffb 100644
--- a/src/i18n/locales/ja/node.json
+++ b/src/i18n/locales/ja/node.json
@@ -40,7 +40,8 @@
     "invalidKey": "無効な APIキー",
     "failed_stop": "Core を停止できませんでした",
     "failed_bootstrap": "ブートストラップできませんでした",
-    "failed_delete": "データベースを削除できませんでした"
+    "failed_delete": "データベースを削除できませんでした",
+    "failed_bootstrap_or_clear": "ブートストラップ、チェーンデータのクリア、または Core の起動に失敗しました"
   },
   "status": {
     "complete": "完了",
@@ -81,7 +82,12 @@
   "confirmations": {
     "stop": "Core を停止してもよろしいですか？",
     "bootstrap": "ブートストラップしてもよろしいですか？",
-    "delete": "データベースを削除してもよろしいですか？"
+    "delete": "データベースを削除してもよろしいですか？",
+    "bootstrapOrClearChain": "Core がローカルで動作しているときはスナップショットからブートストラップします。できない場合や失敗した場合はローカルのチェーン DB を削除して Core を再起動する場合があります。ウォレット・ファイルはそのままです。続行しますか？"
+  },
+  "bootstrapChainHelp": {
+    "title": "チェーンブートストラップ",
+    "body": "1 つの操作：Core が応答できるときはスナップショットからブートストラップ。ブートストラップできないときはローカルチェーン DB を消去して Core を再起動。ウォレットは別に保存されます。"
   },
   "stop": "Core を停止",
   "bootstrap": "ブートストラップ",
@@ -89,6 +95,53 @@
   "more": "その他のオプション",
   "less": "少ないオプション",
   "enableAuthWhenSyncing": "同期時に認証を有効にする",
+  "coreSetupDialog": {
+    "title": "Qortal Core をセットアップ",
+    "introTitle": "自分のノードをローカルで実行できます。",
+    "introSubtitle": "Core の起動と同期中もパブリックノードを利用できます。",
+    "publicNodeUnavailable": "現在パブリックノードは利用できません。ローカル Core の起動と同期が終わるまでこの画面を開いたままにしてください。",
+    "steps": {
+      "downloadDone": "Core をダウンロード済み",
+      "downloadActive": "Core をダウンロード中",
+      "downloadIdle": "Core をダウンロード",
+      "runningDone": "Core 実行中",
+      "runningActive": "Core を起動中",
+      "runningIdle": "Core を起動"
+    },
+    "readyToDownload": "ダウンロードの準備完了",
+    "readyToStart": "起動の準備完了",
+    "syncing": "同期中",
+    "helpers": {
+      "downloadDone": "Core ファイルはインストール済みで準備できています。",
+      "downloadActive": "Qortal Core をダウンロードして準備しています。",
+      "downloadIdle": "自分のノードを動かすには Qortal Core をダウンロードしてください。",
+      "runningDoneSyncing": "Core は実行中でブロックチェーンを同期しています。",
+      "runningDone": "Core はローカルで実行中です。",
+      "runningWaiting": "Core はバックグラウンドで起動し同期を開始します。",
+      "runningBlocked": "Core のダウンロード後に利用できます。"
+    },
+    "nextStepPill": "次のステップ",
+    "locationTitle": "Core の場所",
+    "locationCustom": "Qortal Core はこのフォルダから実行されます。",
+    "locationDefault": "Qortal Core はこのシステムのデフォルトフォルダを使います。",
+    "locationPathDefault": "既定の Qortal Core の場所",
+    "change": "変更",
+    "choose": "選択",
+    "clear": "クリア",
+    "advancedTitle": "詳細",
+    "advancedSubtitle": "Core 向けの高度なツールとオプション。",
+    "maintenanceUnavailable": "Core の起動または同期中はメンテナンスツールは使えません。",
+    "stopCoreTitle": "Core を停止",
+    "stopCoreBody": "ローカルの Core プロセスを停止します。",
+    "stopButton": "停止",
+    "cancel": "キャンセル",
+    "actionDownload": "Core をダウンロード",
+    "actionStart": "Core を起動",
+    "actionDone": "完了",
+    "confirmTitle": "操作の確認",
+    "folderCopied": "Core フォルダをコピーしました",
+    "progressAriaLabel": "{{label}} の進行状況"
+  },
   "NotFullyStarted": {
     "titleNotReady": "Core は完全に起動していません",
     "descNotReady": "Qortal Core はまだ完全に起動していません。しばらくお待ちください。",
diff --git a/src/i18n/locales/ja/question.json b/src/i18n/locales/ja/question.json
index ff9d04fc..428b31d9 100644
--- a/src/i18n/locales/ja/question.json
+++ b/src/i18n/locales/ja/question.json
@@ -152,8 +152,12 @@
     "invite": "このアプリに {{ invitee }} を招待することを許可しますか？",
     "kick": "このアプリに {{ partecipant }} をグループからキックすることを許可しますか？",
     "leave_group": "このアプリに次のグループを退出することを許可しますか？",
-    "list_hosted_data": "このアプリにホストされたデータの一覧を取得することを許可しますか？",
-    "order_detail": "{{ foreign_amount }} {{ ticker }} に対して {{ qort_amount }} QORT",
+      "list_hosted_data": "このアプリにホストされたデータの一覧を取得することを許可しますか？",
+      "notification": "このアプリにHubの通知を送ることを許可しますか？",
+      "notification_allow": "許可",
+      "notification_dont_allow": "許可しない",
+      "notification_title": "{{ appName }}の通知",
+      "order_detail": "{{ foreign_amount }} {{ ticker }} に対して {{ qort_amount }} QORT",
     "pay_publish": "このアプリに以下の支払いや公開を許可しますか？",
     "perform_admin_action_with_value": "値：{{ value }}",
     "perform_admin_action": "このアプリに管理アクション {{ type }} を実行することを許可しますか？",
diff --git a/src/i18n/locales/ja/tutorial.json b/src/i18n/locales/ja/tutorial.json
index 71124aa4..a9d28af7 100644
--- a/src/i18n/locales/ja/tutorial.json
+++ b/src/i18n/locales/ja/tutorial.json
@@ -33,6 +33,7 @@
     "get_six_qorts_way3_action": "Q-Tradeを開く",
     "register_name": "名前を登録する",
     "confirming_transaction": "取引を確認中",
+    "confirming": "確認中…",
     "load_avatar": "アバターを読み込む",
     "explore_apps": "おすすめアプリを探索する",
     "done": "完了",
@@ -53,6 +54,17 @@
     "devnet_testing_desc": "DevNet-Testing環境でQ-Appsをテストする",
     "open_app": "開く",
     "address_copied": "アドレスをクリップボードにコピーしました",
-    "group_activity": "グループアクティビティ"
+    "group_activity": "グループアクティビティ",
+    "get_qorts_workspace_hint": "最初の 6 QORT を解放すると、セットアップの続きが有効になります。",
+    "register_name_workspace_hint": "名前を登録すると、このアカウントが識別しやすい身元になります。",
+    "load_avatar_workspace_hint": "ダッシュボードに顔を与え、空間が自分らしく感じられるようにしましょう。",
+    "onboarding_transition_hard_part_done": "よくできました。いちばん難しい部分は終わりです。",
+    "onboarding_transition_one_more": "素晴らしい。あとひとつです。",
+    "onboarding_press_next_when_ready": "よくできました。いちばん難しい部分は終わりです。準備ができたら「次へ」を押してください。",
+    "register_name_pending_hint": "名前をオンチェーンで保存しています。しばらくかかることがあります。",
+    "persistent_guide_get_qorts": "まずは 6 QORT から。上の選択肢から選んでください。",
+    "persistent_guide_register_name": "次に名前を登録しましょう。",
+    "persistent_guide_load_avatar": "最後にアバターを設定しましょう。",
+    "post_onboarding_workspace_ready": "準備完了です。上のワークスペースを組み立て始められます。"
   }
 }
diff --git a/src/i18n/locales/pt/auth.json b/src/i18n/locales/pt/auth.json
index d47515c9..c8ee4b42 100644
--- a/src/i18n/locales/pt/auth.json
+++ b/src/i18n/locales/pt/auth.json
@@ -74,8 +74,11 @@
       "set_apikey": "falha ao definir a APIkey:"
     },
     "generic": {
+      "block_list_intro": "Adicione um nome Qortal ou um endereço para bloqueá-los. Os endereços afetam transações; bloquear um nome oculta seus dados em todo o Hub.",
       "blocked_addresses": "endereços bloqueados – bloqueia o processamento de transações",
+      "blocked_addresses_hint": "Impede processamento relacionado a transações nestes endereços.",
       "blocked_names": "nomes bloqueados para o QDN",
+      "blocked_names_hint": "Estes nomes estão bloqueados para dados QDN/Hub e recursos sociais.",
       "blocking": "bloqueando {{ name }}",
       "choose_block": "escolha 'bloquear transações' ou 'tudo' para bloquear mensagens de chat",
       "congrats_setup": "parabéns, está tudo pronto!",
@@ -88,6 +91,7 @@
       "locating_encryption_keys": "localizando chaves de criptografia",
       "insert_name_address": "Por favor insira um nome ou endereço para iniciar uma conversa privada.",
       "name_address": "nome ou endereço",
+      "no_blocked_users": "Ninguém bloqueado ainda. Adicione acima um endereço ou nome para silenciar.",
       "no_account": "nenhuma conta salva",
       "no_minimum_length": "não há exigência de comprimento mínimo",
       "no_secret_key_published": "nenhuma chave secreta publicada ainda",
@@ -141,6 +145,159 @@
   },
   "welcome": "Bemvindo ao",
   "store_account": "armazenar conta no Hub",
+  "create_wallet": {
+    "error_enter_password": "Digite uma senha da carteira.",
+    "error_confirm_password": "Confirme a senha da carteira.",
+    "error_passwords_mismatch": "As senhas não coincidem.",
+    "success_wallet_saved": "Carteira salva",
+    "success_account_created": "Conta criada",
+    "success_ready_hub": "Agora você pode entrar no Hub.",
+    "success_backup_before_hub": "Faça backup da carteira criptografada antes de entrar no Hub.",
+    "enter_hub": "Entrar no Hub",
+    "download_another_copy": "Baixar outra cópia",
+    "backup_wallet": "Fazer backup da carteira",
+    "backup_encrypted_notice": "Este backup é criptografado com a senha da sua carteira.",
+    "seed_title": "Sua frase-semente",
+    "seed_subtitle": "Ela pode recuperar sua conta. Salvar a frase-semente é opcional. Em seguida vem o backup criptografado da carteira — a forma recomendada de recuperar a conta.",
+    "reveal": "Revelar",
+    "copied": "Copiado",
+    "copy": "Copiar",
+    "export": "Exportar",
+    "seed_warning": "Nunca compartilhe. Quem tiver acesso pode usar sua conta. Para o dia a dia, use o backup criptografado após a criação.",
+    "create_account": "Criar conta",
+    "password_title": "Criar senha",
+    "password_subtitle": "Esta senha protege sua conta neste dispositivo.",
+    "wallet_password": "Senha da carteira",
+    "confirm_password": "Confirmar senha",
+    "save_account_in_hub": "Salvar conta no Hub",
+    "continue": "Continuar"
+  },
+  "import_account": {
+    "title": "Importar conta",
+    "subtitle": "Escolha como restaurar sua conta."
+  },
+  "backup_wallet_modal": {
+    "subtitle": "Baixe um arquivo local da carteira para restaurar esta conta depois.",
+    "info_note": "Exporta um arquivo da carteira no seu dispositivo. Guarde-o em lugar seguro.",
+    "current_password": "Senha atual",
+    "keep_password_in_export": "Manter a senha atual no arquivo da carteira exportado",
+    "new_password_for_backup": "Nova senha para este backup",
+    "download_wallet_file": "Baixar arquivo da carteira",
+    "error_no_active_wallet": "Nenhuma carteira ativa encontrada para o backup.",
+    "error_unable_to_create_backup": "Não foi possível criar o backup da carteira."
+  },
+  "wallet_errors": {
+    "unable_to_unlock_default": "não foi possível desbloquear esta carteira.",
+    "unable_to_save_backup": "não foi possível salvar este backup da carteira.",
+    "unable_to_prepare_backup": "não foi possível preparar este backup da carteira.",
+    "account_not_found": "esta conta guardada não foi encontrada. escolha outra conta ou restaure esta carteira de um backup.",
+    "account_incomplete": "esta conta guardada parece incompleta ou corrompida. escolha outra conta ou restaure esta carteira de um backup.",
+    "invalid_security_data": "esta conta guardada contém dados de segurança da carteira inválidos. escolha outra conta ou restaure esta carteira de um backup.",
+    "missing_encrypted_seed": "falta a semente criptografada nesta conta guardada (os dados bloqueados da carteira necessários para desbloquear). escolha outra conta ou restaure esta carteira de um backup.",
+    "missing_field": "falta {{field}} nesta conta guardada. escolha outra conta ou restaure esta carteira de um backup.",
+    "field": {
+      "address0": "endereço da carteira",
+      "encryptedSeed": "semente criptografada (dados bloqueados necessários para desbloquear a carteira)",
+      "iv": "dados de criptografia da carteira",
+      "kdfThreads": "configurações de senha da carteira",
+      "mac": "verificação de integridade da carteira",
+      "salt": "dados de segurança da senha da carteira",
+      "version": "versão da carteira"
+    }
+  },
+  "connection_mode": {
+    "title": "Modo de conexão",
+    "subtitle": "Escolha como o Qortal se conecta à rede.",
+    "local_title": "Nó local",
+    "recommended": "Recomendado",
+    "local_full_decentralized": "Acesso totalmente descentralizado",
+    "local_faster": "Melhor desempenho",
+    "local_data_local": "Seus dados permanecem locais",
+    "public_title": "Nó público",
+    "public_quick": "Acesso rápido",
+    "public_limited_decentralization": "Descentralização limitada",
+    "public_shared_infrastructure": "Infraestrutura compartilhada",
+    "status_running": "Core em execução",
+    "status_missing": "Core não detectado",
+    "status_checking": "Verificando o nó local",
+    "section_custom_nodes": "Nós personalizados",
+    "add_custom_node": "Adicionar nó personalizado",
+    "empty_custom_nodes": "Nenhum nó personalizado salvo",
+    "manual_setup_link": "Configuração manual do nó",
+    "save_settings": "Salvar configurações",
+    "manual_edit_title": "Editar nó personalizado",
+    "manual_add_title": "Configuração manual do nó",
+    "field_name": "Nome",
+    "placeholder_node_name": "Meu nó Qortal",
+    "field_node_url": "URL do nó",
+    "placeholder_node_url": "https://127.0.0.1:12391",
+    "field_api_key_optional": "Chave de API (opcional)",
+    "placeholder_api_key": "Digite a chave de API",
+    "reload_after_new_node_title": "É necessário recarregar",
+    "reload_after_new_node_message": "Adicionaste um novo nó; é necessário atualizar a aplicação.",
+    "reload_after_new_node_button": "Recarregar aplicação"
+  },
+  "intro_features": {
+    "secure_title": "Seguro e privado",
+    "secure_text": "As suas chaves, os seus dados, sempre sob o seu controlo.",
+    "fast_title": "Acesso rápido",
+    "fast_text": "Desbloqueie e entre já na sua experiência Qortal.",
+    "decentralized_title": "Descentralizado",
+    "decentralized_text": "Ligue-se à rede às suas condições.",
+    "built_title": "Feito para si",
+    "built_text": "Uma conta. Possibilidades infinitas."
+  },
+  "entry": {
+    "title": "Entrar no Qortal",
+    "subtitle": "Aceda ou crie a sua conta.",
+    "create_account": "Criar conta",
+    "import_account": "Importar conta",
+    "no_accounts": "Nenhuma conta encontrada neste dispositivo.",
+    "import_choice_backup_title": "Ficheiro de cópia de segurança",
+    "import_choice_backup_description": "Importar uma cópia de segurança guardada do Hub.",
+    "import_choice_authenticate_title": "Autenticar agora",
+    "import_choice_authenticate_description": "Usar um ficheiro de cópia sem o guardar.",
+    "import_choice_seed_title": "Frase de recuperação",
+    "import_choice_seed_description": "Restaurar com a sua frase de recuperação.",
+    "import_backup_heading": "Importar a partir do ficheiro de cópia",
+    "import_backup_drop_hint": "Arraste o ficheiro de cópia ou clique para selecionar.",
+    "import_authenticate_heading": "Autenticar a partir de ficheiro de cópia",
+    "import_authenticate_drop_hint": "Arraste um ficheiro de cópia ou clique para selecionar. Não será guardado neste dispositivo.",
+    "import_seed_label": "Frase de recuperação",
+    "import_seed_placeholder": "Introduza a sua frase de recuperação",
+    "import_wallet_password": "Palavra-passe da carteira",
+    "importing_account": "A importar conta...",
+    "seed_import_error": "Não foi possível importar esta frase de recuperação.",
+    "seed_import_duplicate": "Esta conta já está guardada neste dispositivo.",
+    "seed_import_success": "Conta importada com sucesso.",
+    "import_backup_success_one": "{{count}} conta importada com sucesso.",
+    "import_backup_success_other": "{{count}} contas importadas com sucesso.",
+    "import_backup_duplicate": "Estas contas já estão guardadas neste dispositivo.",
+    "import_backup_invalid": "Este ficheiro de cópia não contém uma conta válida.",
+    "import_file_read_aborted": "Leitura do ficheiro foi cancelada",
+    "import_file_read_failed": "Falha ao ler o ficheiro",
+    "filter_accounts_aria": "Filtrar contas por endereço, nome principal ou nota",
+    "filter_placeholder": "Endereço, nome principal ou nota…",
+    "filter_no_results": "Nenhuma conta corresponde.",
+    "filter_clear": "Limpar pesquisa",
+    "wallet_edit_name_label": "Nome",
+    "wallet_edit_account_name_placeholder": "Nome da conta",
+    "wallet_edit_note_label": "Nota",
+    "wallet_edit_note_placeholder": "Nota opcional",
+    "wallet_edit_remove": "Remover",
+    "wallet_edit_save": "Guardar",
+    "wallet_edit_aria_label": "Editar nome e nota da conta"
+  },
+  "authentication_form": {
+    "unnamed_account": "Conta sem nome",
+    "password_placeholder": "Introduza a palavra-passe",
+    "unlock": "Desbloquear",
+    "choose_another_account": "Escolher outra conta",
+    "using_local_node": "Nó local",
+    "using_public_node": "Nó público",
+    "using_custom_node": "Nó personalizado"
+  },
+
   "temp_auth": {
     "tooltip": "autenticar sem armazenar sua conta no Hub",
     "button": "auth. temporária"
diff --git a/src/i18n/locales/pt/core.json b/src/i18n/locales/pt/core.json
index ef850d1f..acf0dbd7 100644
--- a/src/i18n/locales/pt/core.json
+++ b/src/i18n/locales/pt/core.json
@@ -7,6 +7,7 @@
     "add_custom_framework": "adicionar framework personalizado",
     "add_reaction": "adicionar reação",
     "add_theme": "adicionar tema",
+    "back": "voltar",
     "backup_account": "conta backup",
     "backup_wallet": "carteira backup",
     "cancel": "cancelar",
@@ -51,7 +52,7 @@
     "join": "juntar",
     "leave_comment": "deixar comentario",
     "load_announcements": "carregar anuncios mais antigos",
-    "logout": "logout",
+    "logout": "terminar sessão",
     "new": {
       "chat": "nova conversa",
       "post": "nova postagem",
@@ -112,7 +113,7 @@
   "announcement_other": "anuncios",
   "api": "API",
   "app": "app",
-  "app_other": "apps",
+  "app_other": "aplicações",
   "app_name": "nome do app",
   "app_private": "privado",
   "app_service_type": "aplicativo tipo serviço",
@@ -132,9 +133,9 @@
   "core": {
     "block_height": "altura do bloco",
     "data_peers": "peers QDN (dados)",
-    "information": "informação do nó",
+    "information": "informações do Core",
     "peers": "nós conectados",
-    "version": "versão do nó"
+    "version": "versão do Core"
   },
   "current_language": "lingua atual: {{ language }}",
   "dev": "desenvolvedor",
@@ -248,6 +249,8 @@
       "confirmed": "confirmado",
       "created_by": "criado por {{ owner }}",
       "devmode_local_node": "por favor, use seu nó local no modo de desenvolvimento! Faça logout e use o nó local.",
+      "disable_os_push": "Desativar push do sistema operacional",
+      "disable_os_push_desc": "Silencie os alertas da área de trabalho deste app mantendo a atividade no Hub visível.",
       "downloading_decrypting_app": "baixando e descriptografando aplicativo privado.",
       "downloading": "baixando",
       "edited": "editado",
@@ -255,11 +258,17 @@
       "encrypted_not": "não criptografado",
       "encrypted": "criptografado",
       "amount_qort": "quantia: {{ amount }} QORT",
+      "app_notifications_hint": "As notificações do Q-App aparecerão aqui",
       "fee_qort": "taxa: {{ fee }} QORTs",
       "fetching_data": "buscando dados do aplicativo",
       "foreign_fee": "taxa externa: {{ fee }}",
       "get_qort_trade_portal": "obtenha QORTs usando o portal de troca crosschain do Qortal",
+      "loading": "A carregar...",
       "mentioned": "mencionado",
+      "new_notification_from": "Nova notificação de {{ appName }}",
+      "new_payment_body": "Você recebeu {{ amount }} QORT.",
+      "new_payment_received": "Novo pagamento recebido",
+      "new_qmail": "Você recebeu um novo Q-Mail",
       "message_with_image": "esta mensagem já possui uma imagem",
       "minimal_qort_balance": "Ter pelo menos {{ quantity }} QORT no seu saldo permite enviar mensagens de chat a uma velocidade quase instantânea.",
       "most_recent_payment": "{{ count }} pagamento mais recente",
@@ -271,12 +280,17 @@
       "name_rate": "você precisa de um nome para avaliar.",
       "name_registration": "seu saldo é {{ balance }} QORTs. O registro de um nome requer uma taxa de {{ fee }} QORTs",
       "name_unavailable": "{{ name }} está indisponível",
+      "no_app_notifications": "Ainda não há notificações de aplicativos",
       "no_data_image": "sem dados para imagem",
       "no_description": "sem descrição",
       "no_messages": "sem mensagens",
       "no_message": "nenhuma mensagem",
       "no_minting_details": "não é possível visualizar os detalhes de cunhagem no gateway",
+      "no_notification_apps": "Nenhum app tem permissão de notificação ainda.",
       "no_notifications": "nenhuma nova notificação",
+      "notification_settings": "Configurações de notificação",
+      "notification_settings_desc": "Escolha quais apps podem enviar alertas na área de trabalho mantendo a atividade no Hub visível.",
+      "notifications": "Notificações",
       "no_payments": "nenhum pagamento",
       "no_pinned_changes": "você atualmente não tem alterações nos seus aplicativos fixados",
       "no_results": "nenhum resultado",
@@ -297,6 +311,7 @@
       "replied_to": "respondeu para {{ person }}",
       "revert_default": "reverter para o padrão",
       "revert_qdn": "reverter para a QDN",
+      "revoke_permission": "Revogar",
       "save_qdn": "salvar na QDN",
       "secure_ownership": "garanta a propriedade dos dados publicados com seu nome. Você pode até vender seu nome e os dados para terceiros.",
       "select_file": "por favor, selecione um arquivo",
@@ -308,7 +323,8 @@
       "unread_messages": "mensagens não lidas abaixo",
       "unsaved_changes": "você tem alterações não salvas nos seus aplicativos fixados. Salve-os na QDN.",
       "updating": "atualizando",
-      "wait": "por favor, aguarde"
+      "wait": "por favor, aguarde",
+      "open_q_trade_subtitle": "Abre o Q-Trade e compra QORT no portal de negociação."
     },
     "message": "messagem",
     "promotion_text": "texto promocional",
@@ -336,6 +352,7 @@
       "rated_app": "avaliado com sucesso. Por favor, aguarde alguns minutos para que a rede propague as alterações.",
       "request_read": "eu li esta solicitação",
       "transfer": "a transferência foi bem-sucedida!",
+      "transfer_submitted": "Sua transferência foi enviada com sucesso.",
       "voted": "voto registrado com sucesso. Por favor, aguarde alguns minutos para que a rede propague as alterações."
     }
   },
@@ -365,7 +382,38 @@
     },
     "status_title": "status de cunhagem",
     "tier_share_per_block": "partilhe por bloco da camada",
-    "total_minter_in_tier": "total de cunhadores na camada"
+    "total_minter_in_tier": "total de cunhadores na camada",
+    "panel": {
+      "dialog_subtitle": "Revise o estado de minting, o progresso e os próximos passos.",
+      "state_syncing_title": "A sincronizar",
+      "state_syncing_body": "O nó ainda está a sincronizar; o minting ainda não pode começar.",
+      "state_active_title": "Minting ativo",
+      "state_active_body_node_selection": "Esta chave de minter está configurada neste nó. As estatísticas refletem a conta selecionada.",
+      "state_active_body_account": "Esta conta está configurada para mint neste nó.",
+      "state_inactive_title": "Sem minting",
+      "state_inactive_body_not_in_group": "Esta conta ainda não faz parte do grupo de minters.",
+      "state_inactive_body_multi_key": "Este nó já tem várias chaves de minting configuradas.",
+      "state_inactive_body_ready": "Esta conta está pronta para o próximo passo de minting.",
+      "next_step_visit_q_mintership": "Abra a app Q-Mintership para se candidatar a minter.",
+      "next_step_already_active": "O minting já está ativo neste nó.",
+      "next_step_wait_sync": "Aguarde o nó terminar de sincronizar antes de o minting poder começar.",
+      "next_step_start_when_ready": "Inicie o minting neste nó quando estiver pronto.",
+      "section_your_wallet": "A sua carteira",
+      "section_minter_profile_stats": "Perfil de minter (estatísticas)",
+      "section_account_identity": "Identidade da conta",
+      "section_progress_next_level": "Progresso para o nível seguinte",
+      "section_next_step": "Próximo passo",
+      "section_node_minting_accounts": "Contas de mint no nó",
+      "select_account_for_stats_hint": "Selecione uma conta para atualizar progresso e estatísticas de recompensa à direita.",
+      "badge_viewing_stats": "A ver estatísticas",
+      "blocks_to_level": "blocos até ao nível {{level}}",
+      "minting_for_approx_days": "Mint durante: ~{{days}} dias",
+      "reference_only": "(apenas para referência)",
+      "rewards_info_subtitle_own": "(informação das suas recompensas)",
+      "rewards_info_subtitle_selected": "(minter selecionado — recompensas desta chave)",
+      "network_details": "Detalhes da rede",
+      "loading_spinner_aria": "A carregar"
+    }
   },
   "name": "nome",
   "name_app": "nome/Aplicativo",
@@ -389,10 +437,36 @@
   "publish": "publicar",
   "q_apps": {
     "about": "sobre este Q-App",
-    "q_mail": "q-mail",
-    "q_manager": "q-Gerente",
-    "q_sandbox": "q-Sandbox",
-    "q_wallets": "q-Casteiras"
+    "q_mail": "Q-Mail",
+    "q_manager": "Q-Manager",
+    "q_sandbox": "Q-Sandbox",
+    "q_wallets": "Q-Wallets",
+    "wallets_workspace": "área de trabalho das carteiras"
+  },
+  "account_lookup": {
+    "dialog_title": "Pesquisa de utilizador",
+    "empty_title": "Pesquisar contas",
+    "empty_subtitle": "Introduza um nome ou endereço",
+    "tooltip_send_disabled": "Este é o teu próprio perfil.",
+    "tooltip_block_public_node": "Bloquear utilizadores não está disponível num nó público.",
+    "tooltip_block_self": "Não te podes bloquear a ti próprio.",
+    "error_lookup_failed": "Não foi possível consultar esta conta.",
+    "chip_level": "Nível {{level}}",
+    "chip_blocked": "Bloqueado",
+    "chip_no_registered_name": "Sem nome registado",
+    "section_minting_progress": "Progresso de minting",
+    "minting_remaining": "{{remaining}} restantes",
+    "minting_blocks_to_level": "{{remaining}} para o nível {{level}}",
+    "minting_approx_one": "~{{count}} dia de minting (aprox.)",
+    "minting_approx_other": "~{{count}} dias de minting (aprox.)",
+    "minting_days_label": "Minting:",
+    "label_address": "Endereço",
+    "label_public_key": "Chave pública",
+    "payments_title": "Pagamentos recentes",
+    "pagination_rows_per_page": "Linhas por página:",
+    "pagination_displayed_rows": "{{from}}–{{to}} de {{count}}",
+    "action_block": "bloquear",
+    "action_unblock": "desbloquear"
   },
   "app_detail": {
     "about": "sobre",
@@ -454,7 +528,10 @@
     "official_apps": "apps oficiais"
   },
   "aria": {
-    "apps_library_tabs": "abas de navegação da biblioteca de apps"
+    "apps_library_tabs": "abas de navegação da biblioteca de apps",
+    "core_controls": "Controles do Core",
+    "switch_theme_dark": "Mudar para modo escuro",
+    "switch_theme_light": "Mudar para modo claro"
   },
   "supply": "fornecer",
   "tags": "tags",
@@ -501,6 +578,157 @@
     "wallet": "carteira",
     "wallet_other": "carteiras"
   },
+  "widget_container": {
+    "empty_message": "Nada para mostrar no momento.",
+    "empty_title": "Ainda sem itens",
+    "error_title": "Não foi possível carregar este widget",
+    "loading": "A carregar",
+    "loading_message": "A obter os dados públicos mais recentes do nó Qortal predefinido.",
+    "retry": "Tentar novamente"
+  },
+  "quitter_feed": {
+    "error_generic": "O feed público Quitter está temporariamente indisponível. Tenta novamente daqui a pouco.",
+    "error_following": "O feed personalizado Quitter está temporariamente indisponível. Tenta novamente.",
+    "error_timeout": "Falha ao carregar o feed. Podes tentar de novo ou voltar ao Geral.",
+    "loading_following": "A carregar feed de contas seguidas...",
+    "loading_general": "A carregar feed...",
+    "error_title_following": "Falha ao carregar o feed",
+    "error_title_general": "Não foi possível carregar as publicações",
+    "empty_title_no_name": "Inicia sessão para personalizares o teu feed",
+    "empty_title_no_following": "Parece que ainda não segues ninguém.",
+    "empty_title_no_posts": "Sem publicações de contas que segues",
+    "empty_title_general": "Sem publicações disponíveis",
+    "empty_message_no_name": "Inicia sessão com um nome Qortal para criares um feed personalizado.",
+    "empty_message_no_following": "Explora o Quitter e segue contas para construíres o teu feed.",
+    "empty_message_no_posts": "As contas que segues ainda não publicaram no Quitter.",
+    "tab_general": "Geral",
+    "tab_following": "A seguir",
+    "subtitle_personalized": "Feed personalizado",
+    "subtitle_public": "Feed público",
+    "retry_following": "Tentar de novo",
+    "retry_general": "Tentar novamente",
+    "return_to_general": "Voltar ao Geral",
+    "posts_showing_one": "{{count}} publicação a ser mostrada",
+    "posts_showing_other": "{{count}} publicações a ser mostradas",
+    "new_posts_one": "{{count}} publicação nova",
+    "new_posts_other": "{{count}} publicações novas"
+  },
+  "quick_tools_pad": {
+    "user_search": "Pesquisa de utilizador",
+    "wallets": "Carteiras",
+    "minting": "Minting",
+    "backup_wallet": "Cópia de segurança da carteira",
+    "q_chat": "Q-Chat",
+    "notifications_enable": "Ativar notificações",
+    "notifications_mute": "Silenciar notificações",
+    "apps": "Aplicações",
+    "extras": "",
+    "hint_notifications_desktop_only": "Só silencia alertas na área de trabalho. As notificações no hub continuam.",
+    "hint_minting_panel": "Este painel desbloqueia quando fores um minter. Passa pelo Q-Mintership para começar!",
+    "snackbar_backup_wallet": "Transferir o ficheiro da tua carteira. É necessário para acederes à conta."
+  },
   "website": "página na web",
-  "welcome": "bem-vindo"
+  "welcome": "bem-vindo",
+  "qortino_workspace": {
+    "modules_hotkeys_label": "Atalhos",
+    "modules_hotkeys_description": "Atalhos para as rotas que você mais usa.",
+    "modules_music_label": "Player de música",
+    "modules_music_description": "Player Earbump compacto com busca e reprodução rápida.",
+    "modules_suggest_label": "Sugerir um módulo",
+    "modules_suggest_description": "Escreva > Adicione assunto + mensagem e envie para nós!",
+    "workspace_empty_prompt": "Escolha o que fica acima do QORTINO.",
+    "workspace_header_hotkeys": "Atalhos",
+    "workspace_header_music": "Player de música",
+    "workspace_add_app": "Adicionar app",
+    "getting_started_heading": "Começando",
+    "onboarding_step_progress": "Passo {{current}} / {{total}}",
+    "dialog_module_title": "Escolher um módulo",
+    "dialog_module_subtitle": "Escolha o que fica acima do QORTINO.",
+    "dialog_hotkeys_title": "Selecionar atalhos",
+    "dialog_hotkeys_subtitle": "Salvo automaticamente para esta conta.",
+    "dialog_music_search_title": "Buscar Earbump",
+    "dialog_music_search_subtitle": "Encontre uma faixa, toque play e mande para o player acima.",
+    "search_placeholder_qapps": "Buscar Q-Apps",
+    "search_placeholder_tracks": "Buscar faixas ou artistas",
+    "section_recommended": "Recomendados",
+    "curated_badge": "[ CURADO ]",
+    "hotkeys_loading_library": "Carregando biblioteca de Q-Apps...",
+    "hotkeys_unavailable_title": "Q-Apps indisponíveis",
+    "hotkeys_no_match_title": "Nenhuma Q-App corresponde ainda",
+    "hotkeys_no_match_hint": "Tente outro nome para criar um atalho na posição escolhida.",
+    "error_hotkey_catalog": "Não foi possível carregar as Q-Apps agora.",
+    "music_section_results": "Resultados",
+    "music_section_discovery": "Descoberta",
+    "music_loading_search": "Buscando na biblioteca EarBump...",
+    "music_loading_discovery": "Carregando descoberta EarBump...",
+    "music_quiet_title": "EarBump está quieto agora",
+    "music_no_tracks_title": "Nenhuma faixa encontrada",
+    "music_no_tracks_hint": "Tente outro título ou artista para puxar algo para o player.",
+    "error_earbump_discovery": "Não foi possível carregar o EarBump agora.",
+    "error_earbump_search": "Não foi possível buscar no EarBump agora.",
+    "music_syncing_library": "Sincronizando com a biblioteca EarBump...",
+    "music_empty_title": "Biblioteca EarBump",
+    "music_empty_uploaded": "Aguardando biblioteca",
+    "music_track_load_failed": "Esta faixa não conseguiu terminar de carregar no seu nó.",
+    "music_no_peers_data": "Sem peers para dados restantes",
+    "music_preparing_peers_one": "Preparando no seu nó... {{percent}}% ({{count}} peer)",
+    "music_preparing_peers_other": "Preparando no seu nó... {{percent}}% ({{count}} peers)",
+    "music_preparing_percent_only": "Preparando no seu nó... {{percent}}%",
+    "music_searching_peers": "Procurando peers...",
+    "music_finalizing_track": "Finalizando a faixa no seu nó...",
+    "music_preparing_base": "Preparando no seu nó...",
+    "music_playback_stalled": "Reprodução travou. Toque play para tentar novamente.",
+    "music_stream_stalled": "Faixa travou. Recriando o stream...",
+    "hotkeys_launch_description": "Abrir {{appName}}",
+    "hotkeys_fallback_launch": "Abrir Q-App",
+    "reaction_hotkeys_ready": "Painel de atalhos pronto.",
+    "reaction_music_panel_ready": "Painel de música pronto.",
+    "reaction_panel_cleared": "Painel limpo.",
+    "reaction_music_player_ready": "Player de música pronto.",
+    "reaction_locked_track": "Preso em {{title}}.",
+    "reaction_track_rotation": "{{title}} está na rotação.",
+    "reaction_onboarding_route": "Fluxo de integração aberto. Deixo o próximo passo pronto.",
+    "reaction_support_chat": "Chat de suporte aberto. Peça os 6 QORT e coloco o passo dois na fila.",
+    "reaction_q_trade_open": "Q-Trade está aberto. Se pegar QORT lá, seguimos.",
+    "reaction_name_flow": "Fluxo de nome aberto. É onde o hub começa a reconhecer você.",
+    "reaction_avatar_flow": "Fluxo de avatar pronto. Vamos dar rosto ao espaço.",
+    "track_meta_separator": "·",
+    "a11y_clear_hotkey_slot": "Limpar slot {{n}}",
+    "runtime_workspace_bay_title": "Falha de execução na área workspace.",
+    "runtime_workspace_bay_body": "O QORTINO abaixo continua seguro. Atualize o Hub; se persistir, rastreamos aqui.",
+    "runtime_qortino_title": "Erro em tempo de execução no QORTINO.",
+    "runtime_qortino_body": "A área acima permanece segura. Atualize o Hub; se persistir, rastreamos aqui.",
+    "hotkey_slot_number": "Slot {{n}}"
+  },
+  "bookmarks": {
+    "title": "Marcadores",
+    "bookmarked": "Marcado",
+    "add_page": "Adicionar página",
+    "loading": "A carregar marcadores...",
+    "folder": "Pasta",
+    "create_folder": "Criar pasta",
+    "folder_name": "Nome da pasta",
+    "new_folder": "Nova pasta",
+    "top_level": "Nível superior",
+    "edit_bookmark": "Editar marcador",
+    "add_bookmark": "Adicionar marcador",
+    "save_location_without_query": "Guarda uma localização de Q-App sem parâmetros de consulta.",
+    "name": "Nome",
+    "bookmark_name_placeholder": "Nome do marcador",
+    "qortal_link": "Ligação Qortal",
+    "qortal_link_placeholder": "qortal://APP/Nome/caminho",
+    "no_bookmarks": "Ainda não há marcadores.",
+    "no_bookmarks_folder": "Não há marcadores nesta pasta.",
+    "bookmark_count_one": "{{count}} marcador",
+    "bookmark_count_other": "{{count}} marcadores",
+    "edit": "Editar",
+    "move": "Mover",
+    "delete": "Eliminar",
+    "rename": "Renomear",
+    "remove": "Remover",
+    "create": "Criar",
+    "more": "Mais",
+    "delete_folder_title": "Eliminar pasta?",
+    "delete_folder_message": "Os marcadores nesta pasta serão movidos para o nível superior."
+  }
 }
diff --git a/src/i18n/locales/pt/group.json b/src/i18n/locales/pt/group.json
index 61c84086..d832273e 100644
--- a/src/i18n/locales/pt/group.json
+++ b/src/i18n/locales/pt/group.json
@@ -28,6 +28,280 @@
     "select_group": "selecionar um grupo",
     "visit_q_mintership": "visitar Q-Mintership"
   },
+  "dashboard": {
+    "qort_balance": "Saldo QORT",
+    "node_status": "Status do nó",
+    "node_unavailable": "Nó indisponível",
+    "sync_percent": "{{percent}}% sincronizado",
+    "minter_level": "Nível de minter",
+    "peers": "Pares",
+    "qdn": "QDN",
+    "core": "Core",
+    "hub": "Hub",
+    "node": "Nó",
+    "using_node": "Nó em uso",
+    "change_node": "Alterar nó",
+    "node_type": "Tipo de nó",
+    "node_height": "Altura do nó",
+    "local_node": "Nó local",
+    "public_node": "Nó público",
+    "custom_node": "Nó personalizado",
+    "synchronizing": "Sincronizando",
+    "fully_operational": "Totalmente operacional",
+    "not_operational": "Não operacional",
+    "attention_needed": "Precisa de atenção",
+    "apply": "Aplicar",
+    "info_panel_status": "estado",
+    "info_panel_node_comment": "// info_nodo",
+    "minter_pin_save_progress_default": "Guardar barra de nível como vista predefinida",
+    "minter_pin_save_dots_default": "Guardar pontos de mint como vista predefinida",
+    "node_switch_error": "Não foi possível mudar de nó neste momento.",
+    "node_menu_local": "Nó local",
+    "node_menu_public": "Nó público",
+    "qortino_runtime_title": "A camada do cartão QORTINO encontrou um erro de execução.",
+    "qortino_runtime_body": "O resto do painel continua seguro. Atualize o Hub e, se repetir, informe a equipa.",
+    "no_custom_nodes_saved": "Nenhum nó personalizado salvo",
+    "wallet_activity": "Atividade da carteira",
+    "send": "Enviar",
+    "receive": "Receber",
+    "buy": "Comprar",
+    "recent_transaction": "Transação recente",
+    "loading_wallet_activity": "Carregando atividade da carteira...",
+    "sent_to": "enviado para ",
+    "received_from": "recebido de ",
+    "no_wallet_activity": "Nenhuma nova atividade da carteira.",
+      "wallet_activity_window": "Última transação nos últimos 7 dias",
+      "wallet_activity_unknown_address": "Endereço desconhecido",
+      "wallet_activity_relative_just_now": "Agora mesmo",
+      "wallet_activity_relative_minutes_ago_one": "há {{count}} minuto",
+      "wallet_activity_relative_minutes_ago_other": "há {{count}} minutos",
+      "wallet_activity_relative_hours_ago_one": "há {{count}} hora",
+      "wallet_activity_relative_hours_ago_other": "há {{count}} horas",
+      "wallet_activity_relative_days_ago_one": "há {{count}} dia",
+      "wallet_activity_relative_days_ago_other": "há {{count}} dias",
+      "open_in_q_chat": "Abrir no Q-Chat",
+    "open_in_q_apps": "Abrir no Q-Apps",
+    "quitter_feed": "Feed Quitter",
+    "quitter_show_more": "Mostrar mais",
+    "quitter_show_less": "Mostrar menos",
+    "quitter_video_attachment": "Anexo de vídeo",
+    "quitter_video_preview_hub": "Pré-visualização somente leitura no Hub",
+    "featured_q_apps": "Q-Apps em destaque",
+    "featured_q_apps_subtitle": "Inicie apps de comunidade confiáveis diretamente do painel.",
+    "explore_all_q_apps": "Explorar todas as Q-Apps",
+    "reduce_motion": "Reduzir movimento",
+    "account_overview": "Visao da conta",
+    "qortal_name_address": "NOME E ENDEREÇO QORTAL",
+    "profile": "Perfil",
+    "profile_settings": "Definições de perfil",
+    "profile_settings_description": "Reveja o seu nome e a identidade da conta.",
+    "security": "Seguranca",
+    "security_settings": "Definições de segurança",
+    "security_settings_description": "Mostre e copie a chave privada apenas quando for estritamente necessário.",
+    "developer": "Desenvolvedor",
+    "developer_settings": "Definições de programador",
+    "developer_settings_description": "Ative ferramentas de desenvolvimento e diagnóstico para testes avançados.",
+    "system": "Sistema",
+    "system_settings": "Definições do sistema",
+    "system_settings_description": "Controle notificações, movimento, apps afixadas e contas bloqueadas.",
+    "current_name": "Nome atual",
+    "no_name_registered": "Sem nome registado",
+    "wallet_address": "Endereco da wallet",
+    "unavailable": "Indisponivel",
+    "no_active_wallet": "Nenhuma carteira ativa",
+    "names_qapp_actions_hint": "Compra, venda e alteração de nome devem ser feitas na Q-App Names.",
+    "open_the": "Abrir",
+    "names": "Names",
+    "names_qapp_hint_suffix": "Q-App para comprar ou vender nomes ou alterar o nome registado.",
+    "private_key_warning": "Nunca partilhe a chave privada. Quem a tiver pode controlar esta carteira e os fundos.",
+    "wallet_password": "Palavra-passe da carteira",
+    "wallet_password_placeholder": "Introduza a palavra-passe da carteira",
+    "decrypt": "Desencriptar",
+    "copy_key": "Copiar chave",
+    "private_key": "Chave privada",
+    "private_key_hint": "Desencripte a chave privada só quando precisar de recuperar ou migrar esta carteira.",
+    "notifications_update_error": "Não foi possível atualizar as notificações das apps agora.",
+    "wallet_unavailable_error": "Os dados da carteira não estão disponíveis de momento.",
+    "wallet_password_required": "Introduza a palavra-passe da carteira para desencriptar a chave privada.",
+    "wallet_decrypt_error_with_message": "Não foi possível desencriptar a carteira: {{message}}",
+    "wallet_decrypt_error": "Não foi possível desencriptar a carteira com essa palavra-passe.",
+    "private_key_copied": "Chave privada copiada para a área de transferência.",
+    "enable_dev_mode": "Ativar modo de programador",
+    "enable_dev_mode_desc": "Desbloqueie superfícies de desenvolvimento locais, diagnóstico e ferramentas de teste no Hub.",
+    "dev_mode_tip": "Dica: depois de ativar, surge um ícone de Ferramentas de programador na barra lateral. Passe o rato na margem esquerda para o ver.",
+    "reduce_app_notifications": "Reduzir notificações das apps",
+    "reduce_app_notifications_desc": "Ligue para silenciar notificações push no ambiente de trabalho. Deixe desligado para alertas normais do Hub.",
+    "reduce_ui_animations": "Reduzir animações da IU",
+    "reduce_ui_animations_desc": "Ligue para minimizar o movimento no Hub. Deixe desligado para a interface animada normal.",
+    "pinned_qapp_backup": "Cópia de segurança das Q-Apps afixadas",
+    "pinned_qapp_backup_desc": "Guarde as Q-Apps afixadas nas definições QDN encriptadas para o mesmo esquema o acompanhar entre dispositivos.",
+    "manage_backup": "Gerir cópia de segurança",
+    "block_list": "Lista de bloqueios",
+    "block_list_desc": "Veja nomes e endereços bloqueados e desbloqueie contas quando estiver pronto.",
+    "blocked_count": "{{count}} bloqueados",
+    "addresses": "Enderecos",
+    "unblock": "Desbloquear",
+    "no_blocked_accounts": "Ainda não há contas bloqueadas.",
+    "show_receive_qr": "Mostrar QR de receção",
+    "copy_address": "Copiar endereco",
+    "privacy_mode_tooltip": "Modo privacidade: desfoca informação sensível para partilha de ecrã",
+    "toggle_privacy_mode": "Alternar modo privacidade",
+    "send_qort": "Enviar QORT",
+    "send_qort_subtitle": "Transfira QORT para qualquer nome registado ou endereço.",
+    "close_send_qort_modal": "Fechar janela de envio de QORT",
+    "receive_qort": "Receber QORT",
+    "receive_qort_subtitle": "Digitalize para receber QORT",
+    "close_receive_qort_modal": "Fechar janela de receção de QORT",
+    "download_qr": "Baixar QR",
+    "qortal_address_or_name": "Endereço Qortal ou nome registrado",
+    "blocked": "Bloqueados",
+    "account_status_online": "Online",
+    "account_status_busy": "Ocupado",
+    "account_status_invisible": "Invisível",
+    "account_settings_tooltip": "Configurações da conta",
+    "open_account_settings_aria": "Abrir configurações da conta",
+    "name_change_confirm": "Alterar seu nome registrado de {{oldName}} para {{newName}}?",
+    "name_change_success": "Alteração de nome enviada com sucesso.",
+    "name_change_register_first": "Registre um nome antes de alterá-lo.",
+    "name_change_enter_new_name": "Digite o novo nome que você deseja usar.",
+    "name_change_different_from_current": "Escolha um nome diferente do atual.",
+    "name_change_details_still_loading": "Ainda carregando os dados do nome. Tente novamente em instantes.",
+    "name_change_choose_available": "Escolha um nome disponível antes de continuar.",
+    "name_change_wallet_password_required": "Digite a senha da carteira antes de alterar o nome.",
+    "name_change_wallet_password_failed": "Não foi possível verificar a senha da carteira.",
+    "current_name_details_load_failed": "Não foi possível carregar os dados do nome atual.",
+    "name_change_unknown_error": "Algo deu errado ao alterar seu nome.",
+    "name_availability_available": "O nome está disponível.",
+    "name_availability_checking": "Verificando disponibilidade do nome...",
+    "name_availability_same_as_current": "Escolha um nome diferente daquele que você já usa.",
+    "name_availability_taken": "Esse nome já está em uso."
+  },
+  "groups_widget": {
+    "accept": "Aceitar",
+    "approve": "Aprovar",
+    "cancel": "Cancelar",
+    "characters_count": "{{current}}/{{max}}",
+    "confirm_approve_request": "Aprovar este pedido e convidá-los para o grupo?",
+    "confirm_join_group": "Entrar neste grupo agora?",
+    "confirm_join_promoted_closed": "Enviar um pedido de entrada para este grupo promovido?",
+    "confirm_join_promoted_open": "Entrar neste grupo promovido agora?",
+    "connecting": "A conectar...",
+    "discover_groups": "Descobrir grupos",
+    "error_accept_invite": "Não foi possível aceitar esse convite neste momento.",
+    "error_approve_request": "Não foi possível aprovar esse pedido neste momento.",
+    "error_load_invites": "Não foi possível carregar convites do grupo neste momento.",
+    "error_load_promotions": "Não foi possível carregar grupos promovidos neste momento.",
+    "error_load_requests": "Não foi possível carregar pedidos de entrada neste momento.",
+    "error_promoted": "Não foi possível agir sobre esse grupo promovido neste momento.",
+    "error_publish_promotion": "Não foi possível publicar essa promoção neste momento.",
+    "fresh_promotion_snippet": "Este grupo tem uma atualização promovida recente.",
+    "from_label": "de",
+    "group_admin_only": "Apenas administradores do grupo",
+    "group_general": "Geral",
+    "group_named": "Grupo {{id}}",
+    "ignore": "Ignorar",
+    "invitation_ready": "Convite pronto para rever",
+    "invite_hidden": "Convite oculto neste widget por agora.",
+    "invites_empty_description": "Novos convites de grupo aparecerão aqui quando chegarem.",
+    "invites_empty_title": "Sem convites pendentes",
+    "joined_group": "Entrou em {{name}}.",
+    "joined_promoted": "Entrou em {{name}}.",
+    "join_group": "Entrar no grupo",
+    "join_request_sent": "Pedido de entrada enviado para {{name}}.",
+    "loading_invites": "A carregar convites",
+    "loading_notifications": "A carregar notificações",
+    "loading_promoted": "A carregar grupos promovidos",
+    "loading_requests": "A carregar pedidos",
+    "members_count": "{{count}} membros",
+    "new_encrypted_message": "Nova mensagem encriptada",
+    "notifications_empty_message": "Junta-te a comunidades no Q-Chat para preencher este feed com mensagens de grupo, menções e atividade.",
+    "notifications_empty_title": "Começa com grupos Q-Chat",
+    "open": "Abrir",
+    "open_conversation": "Abrir conversa",
+    "private_group": "Grupo privado",
+    "private_group_invite": "Convite para grupo privado",
+    "processing": "A processar...",
+    "promoted_by": "Promovido por {{name}}",
+    "promoted_empty_message": "Grupos promovidos aparecerão aqui quando houver destaques novos.",
+    "promoted_empty_title": "Sem grupos promovidos",
+    "promote_dialog_fee": " Taxa de publicação: {{fee}} QORT.",
+    "promote_dialog_intro": "Partilha uma atualização curta em destaque para um dos teus grupos de admin.",
+    "promote_group": "Promover grupo",
+    "promote_page_title": "Promove um dos teus grupos",
+    "promotion_published": "Promoção do grupo publicada.",
+    "promotion_placeholder": "Escreve uma promoção curta para este grupo.",
+    "public_group": "Grupo público",
+    "refresh": "Atualizar",
+    "reject": "Rejeitar",
+    "request_access": "Pedir acesso",
+    "request_approved": "{{requester}} foi aprovado para {{group}}.",
+    "request_removed": "Pedido removido deste widget por agora.",
+    "request_sent": "Pedido enviado",
+    "requests_empty_description": "Pedidos de entrada dos grupos que geres aparecerão aqui.",
+    "requests_empty_title": "Sem pedidos pendentes",
+    "select_admin_group": "Seleciona um grupo que administras",
+    "tab_invites": "Convites",
+    "tab_notifications": "Notificações",
+    "tab_promoted": "Promovidos",
+    "tab_requests": "Pedidos",
+    "unknown": "Desconhecido",
+    "view_conversation": "Ver conversa",
+    "wants_to_join": "Quer entrar neste grupo.",
+    "you": "Tu",
+    "publish": "Publicar"
+  },
+  "subscription": {
+    "subscriptions": "assinaturas",
+    "tooltip_actions_needed_one": "{{title}} - {{count}} ação necessária",
+    "tooltip_actions_needed_other": "{{title}} - {{count}} ações necessárias",
+    "relative_soon": "em breve",
+    "relative_in_minutes_one": "em {{count}} min",
+    "relative_in_minutes_other": "em {{count}} min",
+    "relative_in_hours_one": "em {{count}} hora",
+    "relative_in_hours_other": "em {{count}} horas",
+    "relative_in_days_one": "em {{count}} dia",
+    "relative_in_days_other": "em {{count}} dias",
+    "relative_in_months_one": "em {{count}} mês",
+    "relative_in_months_other": "em {{count}} meses",
+    "row_fallback_title": "assinatura",
+    "by_creator": "por {{name}}",
+    "creator_fallback": "criador Qortal",
+    "price_line": "{{price}} QORT / {{interval}}",
+    "expires_suffix": " - expira {{time}}",
+    "status_due": "vencendo",
+    "status_active": "ativa",
+    "status_owner": "proprietário",
+    "managed_fallback": "assinatura gerenciada",
+    "members_one": "{{count}} membro",
+    "members_other": "{{count}} membros",
+    "join_requests_suffix_one": " - {{count}} pedido de entrada",
+    "join_requests_suffix_other": " - {{count}} pedidos de entrada",
+    "re_encryption_suffix": " - necessária nova criptografia",
+    "actions_badge_one": "{{count}} ação",
+    "actions_badge_other": "{{count}} ações",
+    "loading": "carregando assinaturas",
+    "section_needs_action": "precisa de ação",
+    "section_active": "ativas",
+    "open_subscriptions": "abrir assinaturas",
+    "empty_title": "Descubra Q-Apps com assinaturas",
+    "empty_body": "Assine criadores e comunidades em Q-Apps com suporte a assinaturas, como SubWire.",
+    "open_subwire": "abrir SubWire",
+    "tab_subscriptions": "Assinaturas",
+    "tab_subwire": "SubWire"
+  },
+  "group_invites": {
+    "empty_title": "sem convites",
+    "empty_secondary_1": "você não tem convites pendentes",
+    "empty_secondary_2": "no momento.",
+    "empty_tertiary_no_groups": "você ainda não faz parte de nenhum grupo.",
+    "cta_find_groups": "encontrar grupos"
+  },
+  "group_join_requests": {
+    "empty_title": "sem solicitações de entrada",
+    "empty_secondary_1": "você não tem solicitações pendentes",
+    "empty_secondary_2": "no momento.",
+    "empty_tertiary_no_admin_groups": "você ainda não gerencia nenhum grupo."
+  },
   "advanced_options": "opções avancadas",
   "block_delay": {
     "minimum": "minimo atraso de Bloco",
@@ -72,6 +346,8 @@
     "generic": {
       "avatar_publish_fee": "publicar um avatar requer {{ fee }}",
       "avatar_registered_name": "é necessário um nome registrado para definir um avatar",
+      "add_new_key_option": "Adicionar uma nova chave",
+      "add_new_key_sparingly": "Adicionar uma nova chave deve ser feito com moderação para evitar aumentar o tamanho das chaves do grupo.",
       "admin_only": "somente grupos nos quais você é administrador serão exibidos",
       "already_in_group": "você já está neste grupo!",
       "block_delay_minimum": "atraso mínimo de blocos para aprovações de transações em grupo",
@@ -90,7 +366,6 @@
       "group_member_list_changed": "a lista de membros do grupo foi alterada. Por favor, recriptografe a chave secreta.",
       "group_no_secret_key": "não há chave secreta do grupo. Seja o primeiro administrador a publicar uma!",
       "group_secret_key_no_owner": "a última chave secreta do grupo foi publicada por alguém que não é o proprietário. Como proprietário do grupo, recriptografe a chave como precaução.",
-
       "invalid_content": "conteúdo, remetente ou timestamp inválido nos dados da reação",
       "invalid_data": "erro ao carregar o conteúdo: dados inválidos",
       "latest_promotion": "apenas a promoção mais recente da semana será exibida para o seu grupo.",
@@ -106,6 +381,7 @@
       "node_minting_key": "você já possui uma chave de cunhagem para esta conta associada a este nó",
       "no_announcement": "nenhum anúncio",
       "no_display": "nada para exibir",
+      "no_description": "sem descrição",
       "no_selection": "nenhum grupo selecionado",
       "not_part_group": "você não faz parte do grupo criptografado de membros. Aguarde até que um administrador recriptografe as chaves.",
       "only_encrypted": "apenas mensagens não criptografadas serão exibidas.",
@@ -171,5 +447,11 @@
       "user_joined": "usuário entrou com sucesso!"
     }
   },
+  "context_menu": {
+    "mark_as_read": "Marcar como lido",
+    "mute_push_notifications": "Silenciar notificações push",
+    "unmute_push_notifications": "Ativar notificações push",
+    "mark_all_read": "Marcar tudo como lido"
+  },
   "thread_posts": "novas postagens do tópico"
 }
diff --git a/src/i18n/locales/pt/node.json b/src/i18n/locales/pt/node.json
index b3c7a1b9..71f7a561 100644
--- a/src/i18n/locales/pt/node.json
+++ b/src/i18n/locales/pt/node.json
@@ -40,7 +40,8 @@
     "invalidKey": "chave API inválida",
     "failed_stop": "não foi possível parar o Core",
     "failed_bootstrap": "não foi possível inicializar",
-    "failed_delete": "não foi possível excluir o banco de dados"
+    "failed_delete": "não foi possível excluir o banco de dados",
+    "failed_bootstrap_or_clear": "não foi possível inicializar, limpar dados da cadeia ou iniciar o Core"
   },
   "status": {
     "complete": "completo",
@@ -81,7 +82,12 @@
   "confirmations": {
     "stop": "tem certeza de que deseja parar o Core?",
     "bootstrap": "tem certeza de que deseja inicializar?",
-    "delete": "tem certeza de que deseja excluir o banco de dados?"
+    "delete": "tem certeza de que deseja excluir o banco de dados?",
+    "bootstrapOrClearChain": "Executa o bootstrap a partir do snapshot quando o Core está em execução localmente. Se isso não for possível ou falhar, o banco de dados da cadeia local pode ser removido e o Core reiniciado; os arquivos da carteira ficam intactos. Continuar?"
+  },
+  "bootstrapChainHelp": {
+    "title": "Bootstrap da cadeia",
+    "body": "Uma única ação: bootstrap por snapshot enquanto o Core estiver ativo, ou apagar o BD da cadeia local e iniciar o Core de novo quando o bootstrap não for possível. A carteira fica guardada separadamente."
   },
   "stop": "parar Core",
   "bootstrap": "inicializar",
@@ -89,6 +95,53 @@
   "more": "mais opções",
   "less": "menos opções",
   "enableAuthWhenSyncing": "ativar autenticação ao sincronizar",
+  "coreSetupDialog": {
+    "title": "Configurar Qortal Core",
+    "introTitle": "Execute seu próprio nó localmente.",
+    "introSubtitle": "Pode usar um nó público enquanto o Core inicia e sincroniza.",
+    "publicNodeUnavailable": "Os nós públicos estão indisponíveis no momento. Mantenha este ecrã aberto enquanto o Core local inicia e sincroniza.",
+    "steps": {
+      "downloadDone": "Core transferido",
+      "downloadActive": "A transferir Core",
+      "downloadIdle": "Transferir Core",
+      "runningDone": "Core em execução",
+      "runningActive": "A iniciar Core",
+      "runningIdle": "Iniciar Core"
+    },
+    "readyToDownload": "Pronto para transferir",
+    "readyToStart": "Pronto para iniciar",
+    "syncing": "A sincronizar",
+    "helpers": {
+      "downloadDone": "Os ficheiros do Core estão instalados e prontos.",
+      "downloadActive": "A transferir e preparar Qortal Core.",
+      "downloadIdle": "Transfira Qortal Core para executar o seu próprio nó.",
+      "runningDoneSyncing": "O Core está a correr e a sincronizar dados da blockchain.",
+      "runningDone": "O Core está a correr localmente.",
+      "runningWaiting": "O Core iniciará e sincronizará em segundo plano.",
+      "runningBlocked": "Disponível após transferir o Core."
+    },
+    "nextStepPill": "Próximo passo",
+    "locationTitle": "Localização do Core",
+    "locationCustom": "O Qortal Core será executado a partir desta pasta.",
+    "locationDefault": "O Qortal Core usará a pasta predefinida deste sistema.",
+    "locationPathDefault": "Localização predefinida do Qortal Core",
+    "change": "Alterar",
+    "choose": "Escolher",
+    "clear": "Limpar",
+    "advancedTitle": "Avançado",
+    "advancedSubtitle": "Ferramentas e opções avançadas para o Core.",
+    "maintenanceUnavailable": "Ferramentas de manutenção do Core não estão disponíveis enquanto o Core inicia ou sincroniza.",
+    "stopCoreTitle": "Parar Core",
+    "stopCoreBody": "Para o processo local do Core.",
+    "stopButton": "Parar",
+    "cancel": "Cancelar",
+    "actionDownload": "Transferir Core",
+    "actionStart": "Iniciar Core",
+    "actionDone": "Concluído",
+    "confirmTitle": "Confirmar ação",
+    "folderCopied": "Pasta do Core copiada",
+    "progressAriaLabel": "Progresso de {{label}}"
+  },
   "NotFullyStarted": {
     "titleNotReady": "Core não foi totalmente iniciado",
     "descNotReady": "Qortal Core ainda não foi totalmente iniciado. Por favor, aguarde.",
diff --git a/src/i18n/locales/pt/question.json b/src/i18n/locales/pt/question.json
index 27b494a3..d67190c6 100644
--- a/src/i18n/locales/pt/question.json
+++ b/src/i18n/locales/pt/question.json
@@ -153,8 +153,12 @@
     "invite": "você dá permissão para que este aplicativo convide {{ invitee }}?",
     "kick": "você dá permissão para que este aplicativo remova {{ partecipant }} do grupo?",
     "leave_group": "você dá permissão para que este aplicativo saia do seguinte grupo?",
-    "list_hosted_data": "você dá permissão para que este aplicativo obtenha uma lista dos seus dados hospedados?",
-    "order_detail": "{{ qort_amount }} QORTs por {{ foreign_amount }} {{ ticker }}",
+      "list_hosted_data": "você dá permissão para que este aplicativo obtenha uma lista dos seus dados hospedados?",
+      "notification": "permitir que este aplicativo envie notificações do Hub?",
+      "notification_allow": "permitir",
+      "notification_dont_allow": "não permitir",
+      "notification_title": "notificações de {{ appName }}",
+      "order_detail": "{{ qort_amount }} QORTs por {{ foreign_amount }} {{ ticker }}",
     "pay_publish": "você dá permissão para que este aplicativo realize os seguintes pagamentos e publicações?",
     "perform_admin_action_with_value": "com valor: {{ value }}",
     "perform_admin_action": "você dá permissão para que este aplicativo execute a ação administrativa: {{ type }}",
diff --git a/src/i18n/locales/pt/tutorial.json b/src/i18n/locales/pt/tutorial.json
index 2f5da2b1..9da09c6d 100644
--- a/src/i18n/locales/pt/tutorial.json
+++ b/src/i18n/locales/pt/tutorial.json
@@ -33,6 +33,7 @@
     "get_six_qorts_way3_action": "Abrir Q-Trade",
     "register_name": "Registre seu nome",
     "confirming_transaction": "Confirmando transação",
+    "confirming": "Confirmando",
     "load_avatar": "Carregue seu avatar",
     "explore_apps": "Explorar aplicativos em destaque",
     "done": "Concluído",
@@ -53,6 +54,17 @@
     "devnet_testing_desc": "Teste seus Q-Apps no ambiente DevNet-Testing",
     "open_app": "Abrir",
     "address_copied": "Endereço copiado para a área de transferência",
-    "group_activity": "Atividade de Grupo"
+    "group_activity": "Atividade de Grupo",
+    "get_qorts_workspace_hint": "Desbloqueie seus primeiros 6 QORT para ativar o restante da configuração.",
+    "register_name_workspace_hint": "Um nome registrado faz desta conta uma identidade reconhecível.",
+    "load_avatar_workspace_hint": "Dê um rosto ao painel para o espaço parecer seu.",
+    "onboarding_transition_hard_part_done": "Bom trabalho. A parte mais difícil acabou.",
+    "onboarding_transition_one_more": "Ótimo. Falta só mais uma.",
+    "onboarding_press_next_when_ready": "Bom trabalho. A parte mais difícil acabou. Toque Avançar quando estiver pronto.",
+    "register_name_pending_hint": "Salvando nome on-chain — pode demorar um momento.",
+    "persistent_guide_get_qorts": "Começamos com 6 QORT. Escolha qualquer opção acima.",
+    "persistent_guide_register_name": "Em seguida registre seu nome.",
+    "persistent_guide_load_avatar": "Por fim adicione seu avatar.",
+    "post_onboarding_workspace_ready": "Tudo pronto. Você já pode montar seu workspace acima."
   }
 }
diff --git a/src/i18n/locales/ru/auth.json b/src/i18n/locales/ru/auth.json
index e136d7d7..a19575b2 100644
--- a/src/i18n/locales/ru/auth.json
+++ b/src/i18n/locales/ru/auth.json
@@ -74,8 +74,11 @@
       "set_apikey": "не удалось установить API-ключ:"
     },
     "generic": {
+      "block_list_intro": "Добавьте имя Qortal или адрес для блокировки. Адреса влияют на транзакции; блокировка имени скрывает данные в Hub.",
       "blocked_addresses": "заблокированные адреса — блокируют обработку транзакций",
+      "blocked_addresses_hint": "Блокирует обработку транзакций с этих адресов.",
       "blocked_names": "заблокированные имена для QDN",
+      "blocked_names_hint": "Эти имена заблокированы для данных QDN/Hub и социальных функций.",
       "blocking": "блокировка {{ name }}",
       "choose_block": "выберите 'блокировать транзакции' или 'всё' для блокировки чата",
       "congrats_setup": "поздравляем, всё готово!",
@@ -88,6 +91,7 @@
       "locating_encryption_keys": "поиск ключей шифрования",
       "insert_name_address": "Введите имя или адрес, чтобы начать личный разговор.",
       "name_address": "имя или адрес",
+      "no_blocked_users": "Никого ещё не заблокировали. Укажите выше адрес или имя.",
       "no_account": "нет сохранённых аккаунтов",
       "no_minimum_length": "нет требования к минимальной длине",
       "no_secret_key_published": "секретный ключ ещё не опубликован",
@@ -142,6 +146,159 @@
   },
   "welcome": "добро пожаловать в",
   "store_account": "сохранить аккаунт в Хабе",
+  "create_wallet": {
+    "error_enter_password": "Введите пароль кошелька.",
+    "error_confirm_password": "Подтвердите пароль кошелька.",
+    "error_passwords_mismatch": "Пароли не совпадают.",
+    "success_wallet_saved": "Кошелёк сохранён",
+    "success_account_created": "Аккаунт создан",
+    "success_ready_hub": "Теперь можно войти в Хаб.",
+    "success_backup_before_hub": "Сделайте резервную копию зашифрованного кошелька перед входом в Хаб.",
+    "enter_hub": "Войти в Хаб",
+    "download_another_copy": "Скачать ещё копию",
+    "backup_wallet": "Резервная копия кошелька",
+    "backup_encrypted_notice": "Эта копия зашифрована паролем вашего кошелька.",
+    "seed_title": "Ваша сид-фраза",
+    "seed_subtitle": "Она нужна для восстановления аккаунта. Сохранять сид-фразу необязательно. Далее идёт зашифрованная резервная копия кошелька — рекомендуемый способ восстановления.",
+    "reveal": "Показать",
+    "copied": "Скопировано",
+    "copy": "Копировать",
+    "export": "Экспорт",
+    "seed_warning": "Никому не передавайте. Имеющий её получит доступ к аккаунту. Для обычного хранения используйте зашифрованную резервную копию после создания.",
+    "create_account": "Создать аккаунт",
+    "password_title": "Создать пароль",
+    "password_subtitle": "Этот пароль защищает аккаунт на этом устройстве.",
+    "wallet_password": "Пароль кошелька",
+    "confirm_password": "Подтвердите пароль",
+    "save_account_in_hub": "Сохранить аккаунт в Хабе",
+    "continue": "Продолжить"
+  },
+  "import_account": {
+    "title": "Импортировать аккаунт",
+    "subtitle": "Выберите, как восстановить аккаунт."
+  },
+  "backup_wallet_modal": {
+    "subtitle": "Скачайте локальный файл кошелька, чтобы восстановить этот аккаунт позже.",
+    "info_note": "Файл кошелька сохраняется локально на устройстве. Храните его в надёжном месте.",
+    "current_password": "Текущий пароль",
+    "keep_password_in_export": "Сохранить текущий пароль в экспортируемом файле кошелька",
+    "new_password_for_backup": "Новый пароль для этой резервной копии",
+    "download_wallet_file": "Скачать файл кошелька",
+    "error_no_active_wallet": "Активный кошелёк для резервной копии не найден.",
+    "error_unable_to_create_backup": "Не удалось создать резервную копию кошелька."
+  },
+  "wallet_errors": {
+    "unable_to_unlock_default": "не удалось разблокировать этот кошелёк.",
+    "unable_to_save_backup": "не удалось сохранить эту резервную копию кошелька.",
+    "unable_to_prepare_backup": "не удалось подготовить эту резервную копию кошелька.",
+    "account_not_found": "этот сохранённый аккаунт не найден. выберите другой аккаунт или восстановите этот кошелёк из резервной копии.",
+    "account_incomplete": "этот сохранённый аккаунт выглядит неполным или повреждённым. выберите другой аккаунт или восстановите этот кошелёк из резервной копии.",
+    "invalid_security_data": "в этом сохранённом аккаунте недопустимые данные безопасности кошелька. выберите другой аккаунт или восстановите этот кошелёк из резервной копии.",
+    "missing_encrypted_seed": "у этого сохранённого аккаунта отсутствует зашифрованная сид-фраза (заблокированные данные кошелька, нужные для разблокировки). выберите другой аккаунт или восстановите этот кошелёк из резервной копии.",
+    "missing_field": "у этого сохранённого аккаунта отсутствует {{field}}. выберите другой аккаунт или восстановите этот кошелёк из резервной копии.",
+    "field": {
+      "address0": "адрес кошелька",
+      "encryptedSeed": "зашифрованная сид-фраза (заблокированные данные, нужные чтобы открыть кошелёк)",
+      "iv": "данные шифрования кошелька",
+      "kdfThreads": "параметры пароля кошелька",
+      "mac": "проверка целостности кошелька",
+      "salt": "данные соли/безопасности пароля кошелька",
+      "version": "версия кошелька"
+    }
+  },
+  "connection_mode": {
+    "title": "Режим подключения",
+    "subtitle": "Выберите, как Qortal подключается к сети.",
+    "local_title": "Локальный узел",
+    "recommended": "Рекомендуется",
+    "local_full_decentralized": "Полный децентрализованный доступ",
+    "local_faster": "Выше производительность",
+    "local_data_local": "Ваши данные остаются локально",
+    "public_title": "Публичный узел",
+    "public_quick": "Быстрый доступ",
+    "public_limited_decentralization": "Ограниченная децентрализация",
+    "public_shared_infrastructure": "Общая инфраструктура",
+    "status_running": "Core запущен",
+    "status_missing": "Core не обнаружен",
+    "status_checking": "Проверка локального узла",
+    "section_custom_nodes": "Пользовательские узлы",
+    "add_custom_node": "Добавить свой узел",
+    "empty_custom_nodes": "Нет сохранённых пользовательских узлов",
+    "manual_setup_link": "Ручная настройка узла",
+    "save_settings": "Сохранить настройки",
+    "manual_edit_title": "Изменить пользовательский узел",
+    "manual_add_title": "Ручная настройка узла",
+    "field_name": "Имя",
+    "placeholder_node_name": "Мой узел Qortal",
+    "field_node_url": "URL узла",
+    "placeholder_node_url": "https://127.0.0.1:12391",
+    "field_api_key_optional": "Ключ API (необязательно)",
+    "placeholder_api_key": "Введите ключ API",
+    "reload_after_new_node_title": "Требуется перезагрузка",
+    "reload_after_new_node_message": "Вы добавили новый узел — необходимо обновить приложение.",
+    "reload_after_new_node_button": "Перезагрузить приложение"
+  },
+  "intro_features": {
+    "secure_title": "Безопасно и конфиденциально",
+    "secure_text": "Ваши ключи, ваши данные — всегда под вашим контролем.",
+    "fast_title": "Быстрый доступ",
+    "fast_text": "Разблокируйте и мгновенно попадите в свой Qortal.",
+    "decentralized_title": "Децентрализовано",
+    "decentralized_text": "Подключайтесь к сети на ваших условиях.",
+    "built_title": "Создано для вас",
+    "built_text": "Один аккаунт. Безграничные возможности."
+  },
+  "entry": {
+    "title": "Войти в Qortal",
+    "subtitle": "Войдите в аккаунт или создайте новый.",
+    "create_account": "Создать аккаунт",
+    "import_account": "Импортировать аккаунт",
+    "no_accounts": "На этом устройстве аккаунты не найдены.",
+    "import_choice_backup_title": "Файл резервной копии",
+    "import_choice_backup_description": "Импорт сохранённой резервной копии Hub.",
+    "import_choice_authenticate_title": "Войти сейчас",
+    "import_choice_authenticate_description": "Использовать файл резервной копии без сохранения.",
+    "import_choice_seed_title": "Сид-фраза",
+    "import_choice_seed_description": "Восстановить с помощью сид-фразы.",
+    "import_backup_heading": "Импорт из файла резервной копии",
+    "import_backup_drop_hint": "Перетащите файл резервной копии или нажмите для выбора.",
+    "import_authenticate_heading": "Войти из файла резервной копии",
+    "import_authenticate_drop_hint": "Перетащите файл резервной копии или нажмите для выбора. Он не будет сохранён на этом устройстве.",
+    "import_seed_label": "Сид-фраза",
+    "import_seed_placeholder": "Введите сид-фразу",
+    "import_wallet_password": "Пароль кошелька",
+    "importing_account": "Импорт аккаунта...",
+    "seed_import_error": "Не удалось импортировать эту сид-фразу.",
+    "seed_import_duplicate": "Этот аккаунт уже сохранён на этом устройстве.",
+    "seed_import_success": "Аккаунт успешно импортирован.",
+    "import_backup_success_one": "{{count}} аккаунт успешно импортирован.",
+    "import_backup_success_other": "{{count}} аккаунтов успешно импортировано.",
+    "import_backup_duplicate": "Эти аккаунты уже сохранены на этом устройстве.",
+    "import_backup_invalid": "Этот файл резервной копии не содержит действительный аккаунт.",
+    "import_file_read_aborted": "Чтение файла прервано",
+    "import_file_read_failed": "Не удалось прочитать файл",
+    "filter_accounts_aria": "Фильтровать счета по адресу, основному имени или заметке",
+    "filter_placeholder": "Адрес, основное имя или заметка…",
+    "filter_no_results": "Подходящих счетов нет.",
+    "filter_clear": "Очистить поиск",
+    "wallet_edit_name_label": "Имя",
+    "wallet_edit_account_name_placeholder": "Имя аккаунта",
+    "wallet_edit_note_label": "Заметка",
+    "wallet_edit_note_placeholder": "Необязательная заметка",
+    "wallet_edit_remove": "Удалить",
+    "wallet_edit_save": "Сохранить",
+    "wallet_edit_aria_label": "Редактировать имя и заметку аккаунта"
+  },
+  "authentication_form": {
+    "unnamed_account": "Аккаунт без имени",
+    "password_placeholder": "Введите пароль",
+    "unlock": "Разблокировать",
+    "choose_another_account": "Выбрать другой аккаунт",
+    "using_local_node": "Локальный узел",
+    "using_public_node": "Публичный узел",
+    "using_custom_node": "Пользовательский узел"
+  },
+
   "temp_auth": {
     "tooltip": "аутентифицироваться без сохранения аккаунта в Хабе",
     "button": "временная аутентификация"
diff --git a/src/i18n/locales/ru/core.json b/src/i18n/locales/ru/core.json
index bc699165..ecc4531e 100644
--- a/src/i18n/locales/ru/core.json
+++ b/src/i18n/locales/ru/core.json
@@ -7,6 +7,7 @@
     "add_custom_framework": "Добавьте пользовательскую структуру",
     "add_reaction": "Добавить реакцию",
     "add_theme": "Добавить тему",
+    "back": "назад",
     "backup_account": "резервная учетная запись",
     "backup_wallet": "резервный кошелек",
     "cancel": "отмена",
@@ -132,11 +133,11 @@
   "core": {
     "block_height": "высота блока",
     "data_peers": "QDN (данные) узлы",
-    "information": "Основная информация",
+    "information": "информация Core",
     "peers": "Подключенные сверстники",
-    "version": "Основная версия"
+    "version": "версия Core"
   },
-  "current_language": "current language: {{ language }}",
+  "current_language": "текущий язык: {{ language }}",
   "dev": "девчонка",
   "dev_mode": "разработчик режим",
   "developer": {
@@ -208,7 +209,7 @@
       "encrypt_app": "Невозможно зашифровать приложение. Приложение не опубликовано '",
       "fetch_app": "Невозможно получить приложение",
       "fetch_publish": "Невозможно получить опубликовать",
-      "file_too_large": "file {{ filename }} is too large. Max size allowed is {{ size }} MB.",
+      "file_too_large": "файл {{ filename }} слишком большой. Максимум {{ size }} МБ.",
       "generic": "Произошла ошибка",
       "initiate_download": "Не удалось инициировать загрузку",
       "invalid_amount": "неверная сумма",
@@ -220,10 +221,10 @@
       "invalid_theme_format": "Неверный формат темы",
       "invalid_zip": "Неверный молния",
       "message_loading": "Ошибка загрузки сообщения.",
-      "message_size": "your message size is of {{ size }} bytes out of a maximum of {{ maximum }}",
+      "message_size": "размер сообщения {{ size }} байт, максимум {{ maximum }} байт",
       "minting_account_add": "Невозможно добавить аккаунт с майном",
       "minting_account_remove": "Невозможно удалить счета -майтинга",
-      "missing_fields": "missing: {{ fields }}",
+      "missing_fields": "отсутствует: {{ fields }}",
       "navigation_timeout": "Тайм -аут навигации",
       "network_generic": "сетевая ошибка",
       "password_not_matching": "Поля пароля не совпадают!",
@@ -239,15 +240,17 @@
     },
     "generic": {
       "already_voted": "Вы уже проголосовали.",
-      "avatar_size": "{{ size }} KB max. for GIFS",
+      "avatar_size": "макс. {{ size }} КБ для GIF",
       "benefits_qort": "Преимущества наличия qort",
       "building": "здание",
       "building_app": "строительство приложения",
       "confirmed": "подтвержденный",
-      "created_by": "created by {{ owner }}",
-      "buy_order_request": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy order</span>",
-      "buy_order_request_other": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting {{count}} buy orders</span>",
+      "created_by": "создано {{ owner }}",
+      "buy_order_request": "приложение <br/><italic>{{hostname}}</italic> <br/><span>запрашивает {{count}} заявку на покупку</span>",
+      "buy_order_request_other": "приложение <br/><italic>{{hostname}}</italic> <br/><span>запрашивает {{count}} заявок на покупку</span>",
       "devmode_local_node": "Пожалуйста, используйте свой локальный узел для режима Dev! Выход и используйте локальный узел.",
+      "disable_os_push": "Отключить push ОС",
+      "disable_os_push_desc": "Отключите уведомления на рабочем столе для этого приложения; активность в Hub остаётся видимой.",
       "downloading": "загрузка",
       "downloading_decrypting_app": "Загрузка и расшифровка частного приложения.",
       "edited": "отредактировано",
@@ -255,28 +258,39 @@
       "encrypted": "зашифровано",
       "encrypted_not": "не шифровано",
       "amount_qort": "сумма: {{ amount }} QORT",
-      "fee_qort": "fee: {{ fee }} QORT",
+      "app_notifications_hint": "Уведомления Q-App появятся здесь",
+      "fee_qort": "комиссия: {{ fee }} QORT",
       "fetching_data": "Извлечение данных приложения",
-      "foreign_fee": "foreign fee: {{ fee }}",
+      "foreign_fee": "внешняя комиссия: {{ fee }}",
       "get_qort_trade_portal": "Получить Qort, используя торговый портал Qortal's Crosschain",
+      "loading": "Загрузка...",
       "minimal_qort_balance": "Наличие как минимум {{ quantity }} QORT на вашем балансе позволяет отправлять сообщения в чате практически мгновенно.",
       "mentioned": "упомянул",
+      "new_notification_from": "Новое уведомление от {{ appName }}",
+      "new_payment_body": "Вы получили {{ amount }} QORT.",
+      "new_payment_received": "Получен новый платёж",
+      "new_qmail": "У вас новое сообщение Q-Mail",
       "message_with_image": "У этого сообщения уже есть изображение",
-      "most_recent_payment": "{{ count }} most recent payment",
-      "name_available": "{{ name }} is available",
+      "most_recent_payment": "{{ count }} последних платежей",
+      "name_available": "{{ name }} доступно",
       "name_benefits": "Преимущества имени",
       "name_checking": "Проверка, если имя уже существует",
       "name_preview": "вам нужно имя для использования предварительного просмотра",
       "name_publish": "вам нужно имя Qortal для публикации",
       "name_rate": "Вам нужно имя, чтобы оценить.",
       "name_registration": "Ваш баланс: {{ balance }} QORT. Для регистрации имени требуется комиссия {{ fee }} QORT.",
-      "name_unavailable": "{{ name }} is unavailable",
+      "name_unavailable": "{{ name }} недоступно",
+      "no_app_notifications": "Пока нет уведомлений приложений",
       "no_data_image": "Нет данных для изображения",
       "no_description": "Нет описания",
       "no_messages": "Нет сообщений",
       "no_message": "Нет сообщения",
       "no_minting_details": "Не могу просматривать детали маттинга на шлюзе",
+      "no_notification_apps": "Пока ни у каких приложений нет разрешения на уведомления.",
       "no_notifications": "Нет новых уведомлений",
+      "notification_settings": "Настройки уведомлений",
+      "notification_settings_desc": "Выберите, какие приложения могут показывать оповещения на рабочем столе, при этом активность в Hub остаётся видимой.",
+      "notifications": "Уведомления",
       "no_payments": "Нет платежей",
       "no_pinned_changes": "В настоящее время у вас нет никаких изменений в ваших приложениях",
       "no_results": "Нет результатов",
@@ -286,17 +300,18 @@
       "overwrite_qdn": "перезаписать в QDN",
       "password_confirm": "Пожалуйста, подтвердите пароль",
       "password_enter": "Пожалуйста, введите пароль",
-      "payment_request": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting a payment</span>",
-      "people_reaction": "people who reacted with {{ reaction }}",
+      "payment_request": "приложение <br/><italic>{{hostname}}</italic> <br/><span>запрашивает платёж</span>",
+      "people_reaction": "люди, отреагировавшие {{ reaction }}",
       "processing_transaction": "Обработка транзакции, подождите ...",
       "publish_data": "Опубликовать данные в Qortal: все, от приложений до видео. Полностью децентрализован!",
       "publishing": "Публикация ... пожалуйста, подождите.",
       "qdn": "Используйте QDN Saving",
-      "rating": "rating for {{ service }} {{ name }}",
+      "rating": "оценка {{ service }} {{ name }}",
       "register_name": "Вам нужно зарегистрированное имя Qortal, чтобы сохранить ваши приложения для QDN.",
-      "replied_to": "replied to {{ person }}",
+      "replied_to": "ответил(а) {{ person }}",
       "revert_default": "вернуться к дефолту",
       "revert_qdn": "вернуться к QDN",
+      "revoke_permission": "Отозвать",
       "save_qdn": "сохранить в QDN",
       "secure_ownership": "Безопасное право собственности на данные, опубликованные вашим именем. Вы даже можете продать свое имя вместе с вашими данными третьей стороне.",
       "select_file": "Пожалуйста, выберите файл",
@@ -308,26 +323,27 @@
       "unread_messages": "Непрочитанные сообщения ниже",
       "unsaved_changes": "У вас есть неспасенные изменения в ваши приложения. Сохраните их в QDN.",
       "updating": "обновление",
-      "wait": "пожалуйста, подождите"
+      "wait": "пожалуйста, подождите",
+      "open_q_trade_subtitle": "Откройте Q-Trade и купите QORT через торговый портал."
     },
     "message": "сообщение",
     "promotion_text": "Текст продвижения",
     "question": {
-      "accept_vote_on_poll": "Принимаете ли вы эту транзакцию holed_on_poll? Опросы публики!",
+      "accept_vote_on_poll": "Подтвердить транзакцию VOTE_ON_POLL? Опросы публичны!",
       "logout": "Вы уверены, что хотели бы выйти в систему?",
       "new_user": "Вы новый пользователь?",
       "delete_chat_image": "Хотели бы вы удалить предыдущее изображение чата?",
-      "perform_transaction": "would you like to perform a {{action}} transaction?",
+      "perform_transaction": "выполнить транзакцию {{action}}?",
       "provide_thread": "Пожалуйста, предоставьте заголовок ветки",
       "publish_app": "Хотели бы вы опубликовать это приложение?",
       "publish_avatar": "Хотели бы вы опубликовать аватар?",
       "publish_qdn": "Хотели бы вы опубликовать свои настройки в QDN (зашифровано)?",
       "overwrite_changes": "Приложение не смогло загрузить ваши существующие приложения, закрепленные QDN. Хотели бы вы перезаписать эти изменения?",
-      "rate_app": "would you like to rate this app a rating of {{ rate }}?. It will create a POLL tx.",
+      "rate_app": "оценить это приложение на {{ rate }}? До следующей оценки {{ days }} дн.",
       "register_name": "Хотите зарегистрировать это имя?",
       "reset_pinned": "Не нравятся ваши текущие локальные изменения? Хотели бы вы сбросить приложения по умолчанию?",
       "reset_qdn": "Не нравятся ваши текущие локальные изменения? Хотели бы вы сбросить в сохраненные приложения QDN?",
-      "transfer_qort": "would you like to transfer {{ amount }} QORT"
+      "transfer_qort": "перевести {{ amount }} QORT"
     },
     "success": {
       "order_submitted": "Ваш заказ на покупку был отправлен",
@@ -336,6 +352,7 @@
       "rated_app": "успешно оцененный. Пожалуйста, подождите пару минут, пока сеть прокатит изменения.",
       "request_read": "Я прочитал этот запрос",
       "transfer": "Передача была успешной!",
+      "transfer_submitted": "Ваш перевод успешно отправлен.",
       "voted": "успешно проголосовал. Пожалуйста, подождите пару минут, пока сеть прокатит изменения."
     }
   },
@@ -365,7 +382,38 @@
     },
     "status_title": "Статус майтинга",
     "tier_share_per_block": "доля уровня за блок",
-    "total_minter_in_tier": "всего майнеров на этом уровне"
+    "total_minter_in_tier": "всего майнеров на этом уровне",
+    "panel": {
+      "dialog_subtitle": "Просмотрите текущее состояние минтинга, прогресс и следующие шаги.",
+      "state_syncing_title": "Синхронизация",
+      "state_syncing_body": "Узел всё ещё синхронизируется; минтинг пока не может начаться.",
+      "state_active_title": "Минтинг активен",
+      "state_active_body_node_selection": "Этот ключ минтера настроен на этом узле. Статистика относится к выбранному аккаунту.",
+      "state_active_body_account": "Этот аккаунт настроен на минтинг на этом узле.",
+      "state_inactive_title": "Нет минтинга",
+      "state_inactive_body_not_in_group": "Этот аккаунт ещё не входит в группу минтеров.",
+      "state_inactive_body_multi_key": "На этом узле уже настроено несколько ключей минтинга.",
+      "state_inactive_body_ready": "Этот аккаунт готов к следующему шагу минтинга.",
+      "next_step_visit_q_mintership": "Откройте приложение Q-Mintership, чтобы подать заявку на статус минтера.",
+      "next_step_already_active": "Минтинг на этом узле уже активен.",
+      "next_step_wait_sync": "Дождитесь окончания синхронизации узла перед началом минтинга.",
+      "next_step_start_when_ready": "Запустите минтинг на этом узле, когда будете готовы.",
+      "section_your_wallet": "Ваш кошелёк",
+      "section_minter_profile_stats": "Профиль минтера (статистика)",
+      "section_account_identity": "Аккаунт",
+      "section_progress_next_level": "Прогресс к следующему уровню",
+      "section_next_step": "Следующий шаг",
+      "section_node_minting_accounts": "Аккаунты минтинга на узле",
+      "select_account_for_stats_hint": "Выберите аккаунт, чтобы обновить прогресс и статистику вознаграждений справа.",
+      "badge_viewing_stats": "Просмотр статистики",
+      "blocks_to_level": "блоков до уровня {{level}}",
+      "minting_for_approx_days": "Минтинг: ~{{days}} дн.",
+      "reference_only": "(только для справки)",
+      "rewards_info_subtitle_own": "(ваша информация о вознаграждениях)",
+      "rewards_info_subtitle_selected": "(выбранный минтер — вознаграждения этого ключа)",
+      "network_details": "Детали сети",
+      "loading_spinner_aria": "Загрузка"
+    }
   },
   "name": "имя",
   "name_app": "имя/приложение",
@@ -391,8 +439,36 @@
     "about": "об этом Q-App",
     "q_mail": "Q-Mail",
     "q_manager": "Q-Manager",
-    "q_sandbox": "Q-SANDBOX",
-    "q_wallets": "Q-Wallet"
+    "q_sandbox": "Q-Sandbox",
+    "q_wallets": "Q-Wallets",
+    "wallets_workspace": "рабочая область кошельков"
+  },
+  "account_lookup": {
+    "dialog_title": "Поиск пользователя",
+    "empty_title": "Поиск аккаунтов",
+    "empty_subtitle": "Введите имя или адрес",
+    "tooltip_send_disabled": "Это ваш собственный профиль.",
+    "tooltip_block_public_node": "Блокировка пользователей недоступна на публичном узле.",
+    "tooltip_block_self": "Вы не можете заблокировать себя.",
+    "error_lookup_failed": "Не удалось найти этот аккаунт.",
+    "chip_level": "Уровень {{level}}",
+    "chip_blocked": "Заблокирован",
+    "chip_no_registered_name": "Нет зарегистрированного имени",
+    "section_minting_progress": "Прогресс майнинга",
+    "minting_remaining": "Осталось {{remaining}}",
+    "minting_blocks_to_level": "{{remaining}} до уровня {{level}}",
+    "minting_approx_one": "~{{count}} день майнинга (прибл.)",
+    "minting_approx_few": "~{{count}} дня майнинга (прибл.)",
+    "minting_approx_many": "~{{count}} дней майнинга (прибл.)",
+    "minting_approx_other": "~{{count}} дней майнинга (прибл.)",
+    "minting_days_label": "Майнинг:",
+    "label_address": "Адрес",
+    "label_public_key": "Публичный ключ",
+    "payments_title": "Недавние платежи",
+    "pagination_rows_per_page": "Строк на странице:",
+    "pagination_displayed_rows": "{{from}}–{{to}} из {{count}}",
+    "action_block": "блокировать",
+    "action_unblock": "разблокировать"
   },
   "app_detail": {
     "about": "о приложении",
@@ -454,7 +530,10 @@
     "official_apps": "официальные приложения"
   },
   "aria": {
-    "apps_library_tabs": "вкладки навигации библиотеки приложений"
+    "apps_library_tabs": "вкладки навигации библиотеки приложений",
+    "core_controls": "управление Core",
+    "switch_theme_dark": "Переключить на тёмный режим",
+    "switch_theme_light": "Переключить на светлый режим"
   },
   "supply": "поставлять",
   "tags": "теги",
@@ -471,12 +550,12 @@
   "thread_other": "нить",
   "thread_title": "Название ветки",
   "time": {
-    "day_one": "{{count}} day",
-    "day_other": "{{count}} days",
-    "hour_one": "{{count}} hour",
-    "hour_other": "{{count}} hours",
-    "minute_one": "{{count}} minute",
-    "minute_other": "{{count}} minutes",
+    "day_one": "{{count}} день",
+    "day_other": "{{count}} дн.",
+    "hour_one": "{{count}} час",
+    "hour_other": "{{count}} ч.",
+    "minute_one": "{{count}} минута",
+    "minute_other": "{{count}} мин.",
     "time": "время"
   },
   "title": "заголовок",
@@ -491,7 +570,7 @@
   "video_fetching": "получение видео из сети Qortal...",
   "video_building": "загрузка завершена: создание видео...",
   "vote": "голосование",
-  "vote_other": "{{ count }} votes",
+  "vote_other": "{{ count }} голосов",
   "zip": "молния",
   "wallet": {
     "litecoin": "кошелек Litecoin",
@@ -499,6 +578,157 @@
     "wallet": "кошелек",
     "wallet_other": "кошельки"
   },
+  "widget_container": {
+    "empty_message": "Сейчас нечего показывать.",
+    "empty_title": "Пока нет записей",
+    "error_title": "Не удалось загрузить этот виджет",
+    "loading": "Загрузка",
+    "loading_message": "Получение последних публичных данных с узла Qortal по умолчанию.",
+    "retry": "Повторить"
+  },
+  "quitter_feed": {
+    "error_generic": "Публичная лента Quitter временно недоступна. Попробуйте ещё раз через мгновение.",
+    "error_following": "Персональная лента Quitter временно недоступна. Попробуйте снова.",
+    "error_timeout": "Не удалось загрузить ленту. Можно повторить или вернуться к общей.",
+    "loading_following": "Загрузка ленты подписок...",
+    "loading_general": "Загрузка ленты...",
+    "error_title_following": "Не удалось загрузить ленту",
+    "error_title_general": "Не удалось загрузить публикации",
+    "empty_title_no_name": "Войдите, чтобы персонализировать ленту",
+    "empty_title_no_following": "Похоже, вы пока ни на кого не подписаны.",
+    "empty_title_no_posts": "Нет публикаций от подписок",
+    "empty_title_general": "Нет доступных публикаций",
+    "empty_message_no_name": "Войдите с именем Qortal, чтобы создать персональную ленту.",
+    "empty_message_no_following": "Просматривайте Quitter и подписывайтесь на аккаунты, чтобы собрать ленту.",
+    "empty_message_no_posts": "Аккаунты, на которые вы подписаны, ещё не публиковали в Quitter.",
+    "tab_general": "Общее",
+    "tab_following": "Подписки",
+    "subtitle_personalized": "Персональная лента",
+    "subtitle_public": "Публичная лента",
+    "retry_following": "Попробовать снова",
+    "retry_general": "Повторить",
+    "return_to_general": "Вернуться к общему",
+    "posts_showing_one": "Показана {{count}} публикация",
+    "posts_showing_other": "Показано публикаций: {{count}}",
+    "new_posts_one": "{{count}} новая публикация",
+    "new_posts_other": "{{count}} новых публикаций"
+  },
+  "quick_tools_pad": {
+    "user_search": "Поиск пользователя",
+    "wallets": "Кошельки",
+    "minting": "Минтинг",
+    "backup_wallet": "Резервная копия кошелька",
+    "q_chat": "Q-Chat",
+    "notifications_enable": "Включить уведомления",
+    "notifications_mute": "Отключить уведомления",
+    "apps": "Приложения",
+    "extras": "",
+    "hint_notifications_desktop_only": "Отключаются только оповещения на рабочем столе. Уведомления в хабе продолжают приходить.",
+    "hint_minting_panel": "Панель откроется, когда вы станете минтером. Загляните в Q-Mintership, чтобы начать!",
+    "snackbar_backup_wallet": "Скачайте файл кошелька — он нужен для доступа к аккаунту."
+  },
   "website": "веб -сайт",
-  "welcome": "добро пожаловать"
+  "welcome": "добро пожаловать",
+  "qortino_workspace": {
+    "modules_hotkeys_label": "Hotkeys",
+    "modules_hotkeys_description": "Curated shortcuts for your most-used routes.",
+    "modules_music_label": "Music player",
+    "modules_music_description": "A compact Earbump player with search and quick playback.",
+    "modules_suggest_label": "Suggest a module",
+    "modules_suggest_description": "Compose > Add Subject + Message & Send it our way!",
+    "workspace_empty_prompt": "Choose what lives above QORTINO.",
+    "workspace_header_hotkeys": "Hotkeys",
+    "workspace_header_music": "Music player",
+    "workspace_add_app": "Add app",
+    "getting_started_heading": "Getting started",
+    "onboarding_step_progress": "Step {{current}} / {{total}}",
+    "dialog_module_title": "Choose a module",
+    "dialog_module_subtitle": "Pick what lives above QORTINO.",
+    "dialog_hotkeys_title": "Select hotkeys",
+    "dialog_hotkeys_subtitle": "Saved automatically for this account.",
+    "dialog_music_search_title": "Search Earbump",
+    "dialog_music_search_subtitle": "Find a track, press play, and drop it into the player above.",
+    "search_placeholder_qapps": "Search Q-Apps",
+    "search_placeholder_tracks": "Search tracks or artists",
+    "section_recommended": "Recommended",
+    "curated_badge": "[ CURATED ]",
+    "hotkeys_loading_library": "Loading Q-Apps library...",
+    "hotkeys_unavailable_title": "Q-Apps unavailable",
+    "hotkeys_no_match_title": "No Q-Apps match yet",
+    "hotkeys_no_match_hint": "Try another app name to wire a shortcut into the selected slot.",
+    "error_hotkey_catalog": "Unable to load Q-Apps right now.",
+    "music_section_results": "Results",
+    "music_section_discovery": "Discovery",
+    "music_loading_search": "Searching the EarBump library...",
+    "music_loading_discovery": "Loading EarBump discovery...",
+    "music_quiet_title": "EarBump is quiet right now",
+    "music_no_tracks_title": "No tracks surfaced",
+    "music_no_tracks_hint": "Try another title or artist to pull something into the player.",
+    "error_earbump_discovery": "Unable to load EarBump right now.",
+    "error_earbump_search": "Unable to search EarBump right now.",
+    "music_syncing_library": "Syncing with EarBump library...",
+    "music_empty_title": "EarBump library",
+    "music_empty_uploaded": "Waiting for library",
+    "music_track_load_failed": "This track could not finish loading on your node.",
+    "music_no_peers_data": "No peers for remaining data",
+    "music_preparing_peers_one": "Preparing on your node... {{percent}}% ({{count}} peer)",
+    "music_preparing_peers_other": "Preparing on your node... {{percent}}% ({{count}} peers)",
+    "music_preparing_percent_only": "Preparing on your node... {{percent}}%",
+    "music_searching_peers": "Looking for peers...",
+    "music_finalizing_track": "Finalizing the track on your node...",
+    "music_preparing_base": "Preparing on your node...",
+    "music_playback_stalled": "Playback stalled. Press play to retry.",
+    "music_stream_stalled": "Track stalled. Rebuilding the stream...",
+    "hotkeys_launch_description": "Launch {{appName}}",
+    "hotkeys_fallback_launch": "Launch Q-App",
+    "reaction_hotkeys_ready": "Hotkeys panel ready.",
+    "reaction_music_panel_ready": "Music panel ready.",
+    "reaction_panel_cleared": "Panel cleared.",
+    "reaction_music_player_ready": "Music player ready.",
+    "reaction_locked_track": "Locked on {{title}}.",
+    "reaction_track_rotation": "{{title}} is in rotation.",
+    "reaction_onboarding_route": "Onboarding route open. I'll keep the next step warm.",
+    "reaction_support_chat": "Support chat is open. Ask for the 6 QORT and I'll queue step two.",
+    "reaction_q_trade_open": "Q-Trade is up. If you grab QORT there, I'll take you forward.",
+    "reaction_name_flow": "Name flow open. This is where the hub starts recognizing you.",
+    "reaction_avatar_flow": "Avatar flow ready. Let's give this place a face.",
+    "track_meta_separator": "·",
+    "a11y_clear_hotkey_slot": "Clear slot {{n}}",
+    "runtime_workspace_bay_title": "Workspace bay hit a runtime snag.",
+    "runtime_workspace_bay_body": "QORTINO below is still safe. Refresh the Hub and if this keeps happening we will trace the exact crash from here.",
+    "runtime_qortino_title": "QORTINO hit a runtime snag.",
+    "runtime_qortino_body": "The workspace bay above is still safe. Refresh the Hub and if this keeps happening we will trace the exact crash from here.",
+    "hotkey_slot_number": "Слот {{n}}"
+  },
+  "bookmarks": {
+    "title": "Закладки",
+    "bookmarked": "В закладках",
+    "add_page": "Добавить страницу",
+    "loading": "Загрузка закладок...",
+    "folder": "Папка",
+    "create_folder": "Создать папку",
+    "folder_name": "Имя папки",
+    "new_folder": "Новая папка",
+    "top_level": "Верхний уровень",
+    "edit_bookmark": "Редактировать закладку",
+    "add_bookmark": "Добавить закладку",
+    "save_location_without_query": "Сохраните расположение Q-App без параметров запроса.",
+    "name": "Имя",
+    "bookmark_name_placeholder": "Название закладки",
+    "qortal_link": "Ссылка Qortal",
+    "qortal_link_placeholder": "qortal://APP/Имя/путь",
+    "no_bookmarks": "Закладок пока нет.",
+    "no_bookmarks_folder": "В этой папке нет закладок.",
+    "bookmark_count_one": "{{count}} закладка",
+    "bookmark_count_other": "{{count}} закладки",
+    "edit": "Редактировать",
+    "move": "Переместить",
+    "delete": "Удалить",
+    "rename": "Переименовать",
+    "remove": "Убрать",
+    "create": "Создать",
+    "more": "Еще",
+    "delete_folder_title": "Удалить папку?",
+    "delete_folder_message": "Закладки из этой папки будут перемещены на верхний уровень."
+  }
 }
diff --git a/src/i18n/locales/ru/group.json b/src/i18n/locales/ru/group.json
index 6bcf4358..357b14f1 100644
--- a/src/i18n/locales/ru/group.json
+++ b/src/i18n/locales/ru/group.json
@@ -28,6 +28,280 @@
     "select_group": "выбрать группу",
     "visit_q_mintership": "посетить Q-Mintership"
   },
+  "dashboard": {
+    "qort_balance": "Баланс QORT",
+    "node_status": "Статус узла",
+    "node_unavailable": "Узел недоступен",
+    "sync_percent": "{{percent}}% синхронизировано",
+    "minter_level": "Уровень минтера",
+    "peers": "Пиры",
+    "qdn": "QDN",
+    "core": "Core",
+    "hub": "Hub",
+    "node": "Узел",
+    "using_node": "Используемый узел",
+    "change_node": "Сменить узел",
+    "node_type": "Тип узла",
+    "node_height": "Высота узла",
+    "local_node": "Локальный узел",
+    "public_node": "Публичный узел",
+    "custom_node": "Пользовательский узел",
+    "synchronizing": "Синхронизация",
+    "fully_operational": "Полностью работоспособен",
+    "not_operational": "Не работает",
+    "attention_needed": "Требуется внимание",
+    "apply": "Применить",
+    "info_panel_status": "статус",
+    "info_panel_node_comment": "// node_info",
+    "minter_pin_save_progress_default": "Сделать шкалу уровня представлением по умолчанию",
+    "minter_pin_save_dots_default": "Сделать точки минтинга представлением по умолчанию",
+    "node_switch_error": "Сейчас не удалось переключить узел.",
+    "node_menu_local": "Локальный узел",
+    "node_menu_public": "Публичный узел",
+    "qortino_runtime_title": "Оболочка карточки QORTINO столкнулась с ошибкой выполнения.",
+    "qortino_runtime_body": "Остальная панель в безопасности. Обновите Hub; если повторится — сообщите команде.",
+    "no_custom_nodes_saved": "Нет сохранённых пользовательских узлов",
+    "wallet_activity": "Активность кошелька",
+    "send": "Отправить",
+    "receive": "Получить",
+    "buy": "Купить",
+    "recent_transaction": "Последняя транзакция",
+    "loading_wallet_activity": "Загрузка активности кошелька...",
+    "sent_to": "отправлено ",
+    "received_from": "получено от ",
+    "no_wallet_activity": "Нет новой активности кошелька.",
+      "wallet_activity_window": "Последняя транзакция за последние 7 дней",
+      "wallet_activity_unknown_address": "Неизвестный адрес",
+      "wallet_activity_relative_just_now": "Только что",
+      "wallet_activity_relative_minutes_ago_one": "{{count}} минуту назад",
+      "wallet_activity_relative_minutes_ago_other": "{{count}} мин. назад",
+      "wallet_activity_relative_hours_ago_one": "{{count}} час назад",
+      "wallet_activity_relative_hours_ago_other": "{{count}} ч. назад",
+      "wallet_activity_relative_days_ago_one": "{{count}} день назад",
+      "wallet_activity_relative_days_ago_other": "{{count}} дн. назад",
+      "open_in_q_chat": "Открыть в Q-Chat",
+    "open_in_q_apps": "Открыть в Q-Apps",
+    "quitter_feed": "Лента Quitter",
+    "quitter_show_more": "Показать больше",
+    "quitter_show_less": "Свернуть",
+    "quitter_video_attachment": "Видеовложение",
+    "quitter_video_preview_hub": "Предпросмотр в Hub доступен только для чтения",
+    "featured_q_apps": "Рекомендуемые Q-Apps",
+    "featured_q_apps_subtitle": "Запускайте проверенные приложения сообщества прямо с панели.",
+    "explore_all_q_apps": "Все Q-Apps",
+    "reduce_motion": "Меньше анимаций",
+    "account_overview": "Обзор аккаунта",
+    "qortal_name_address": "ИМЯ И АДРЕС QORTAL",
+    "profile": "Профиль",
+    "profile_settings": "Настройки профиля",
+    "profile_settings_description": "Проверьте имя и идентичность аккаунта.",
+    "security": "Безопасность",
+    "security_settings": "Настройки безопасности",
+    "security_settings_description": "Показывайте и копируйте закрытый ключ только при крайней необходимости.",
+    "developer": "Разработчик",
+    "developer_settings": "Настройки разработчика",
+    "developer_settings_description": "Включите инструменты разработчика и диагностику для расширенного тестирования.",
+    "system": "Система",
+    "system_settings": "Системные настройки",
+    "system_settings_description": "Управляйте уведомлениями, анимацией, закреплёнными приложениями и заблокированными аккаунтами.",
+    "current_name": "Текущее имя",
+    "no_name_registered": "Имя не зарегистрировано",
+    "wallet_address": "Адрес кошелька",
+    "unavailable": "Недоступно",
+    "no_active_wallet": "Нет активного кошелька",
+    "names_qapp_actions_hint": "Покупка, продажа и смена имени выполняются в Q-App Names.",
+    "open_the": "Открыть",
+    "names": "Names",
+    "names_qapp_hint_suffix": "Q-App для покупки и продажи имён или смены зарегистрированного имени.",
+    "private_key_warning": "Никогда не делитесь закрытым ключом. У кого он есть, тот может управлять этим кошельком и средствами.",
+    "wallet_password": "Пароль кошелька",
+    "wallet_password_placeholder": "Введите пароль кошелька",
+    "decrypt": "Расшифровать",
+    "copy_key": "Копировать ключ",
+    "private_key": "Закрытый ключ",
+    "private_key_hint": "Расшифровывайте закрытый ключ только для восстановления или переноса кошелька.",
+    "notifications_update_error": "Сейчас не удалось обновить уведомления приложений.",
+    "wallet_unavailable_error": "Данные кошелька сейчас недоступны.",
+    "wallet_password_required": "Введите пароль кошелька, чтобы расшифровать закрытый ключ.",
+    "wallet_decrypt_error_with_message": "Не удалось расшифровать кошелёк: {{message}}",
+    "wallet_decrypt_error": "Не удалось расшифровать кошелёк этим паролем.",
+    "private_key_copied": "Закрытый ключ скопирован в буфер обмена.",
+    "enable_dev_mode": "Включить режим разработчика",
+    "enable_dev_mode_desc": "Откройте локальные поверхности разработки, диагностику и тестовые инструменты в Hub.",
+    "dev_mode_tip": "Совет: после включения в боковой панели появится значок инструментов разработчика. Наведите курсор на левый край, чтобы увидеть его.",
+    "reduce_app_notifications": "Меньше уведомлений приложений",
+    "reduce_app_notifications_desc": "Включите, чтобы отключить push-уведомления на рабочем столе. Оставьте выключенным для обычных оповещений Hub.",
+    "reduce_ui_animations": "Меньше анимаций интерфейса",
+    "reduce_ui_animations_desc": "Включите, чтобы уменьшить движение в Hub. Оставьте выключенным для обычного анимированного интерфейса.",
+    "pinned_qapp_backup": "Резервное копирование закреплённых Q-App",
+    "pinned_qapp_backup_desc": "Сохраняйте закреплённые Q-App в зашифрованных настройках QDN, чтобы тот же макет был на всех устройствах.",
+    "manage_backup": "Управление резервной копией",
+    "block_list": "Список блокировок",
+    "block_list_desc": "Просмотрите заблокированные имена и адреса, затем разблокируйте аккаунты, когда будете готовы.",
+    "blocked_count": "{{count}} заблокировано",
+    "addresses": "Адреса",
+    "unblock": "Разблокировать",
+    "no_blocked_accounts": "Заблокированных аккаунтов пока нет.",
+    "show_receive_qr": "Показать QR для получения",
+    "copy_address": "Копировать адрес",
+    "privacy_mode_tooltip": "Режим конфиденциальности: размывает чувствительные данные при демонстрации экрана",
+    "toggle_privacy_mode": "Переключить режим конфиденциальности",
+    "send_qort": "Отправить QORT",
+    "send_qort_subtitle": "Отправьте QORT на любое зарегистрированное имя или адрес.",
+    "close_send_qort_modal": "Закрыть окно отправки QORT",
+    "receive_qort": "Получить QORT",
+    "receive_qort_subtitle": "Сканируйте, чтобы получить QORT",
+    "close_receive_qort_modal": "Закрыть окно получения QORT",
+    "download_qr": "Скачать QR",
+    "qortal_address_or_name": "Адрес Qortal или зарегистрированное имя",
+    "blocked": "Заблокированные",
+    "account_status_online": "В сети",
+    "account_status_busy": "Занят",
+    "account_status_invisible": "Невидимый",
+    "account_settings_tooltip": "Настройки аккаунта",
+    "open_account_settings_aria": "Открыть настройки аккаунта",
+    "name_change_confirm": "Изменить зарегистрированное имя с {{oldName}} на {{newName}}?",
+    "name_change_success": "Запрос на смену имени успешно отправлен.",
+    "name_change_register_first": "Сначала зарегистрируйте имя, прежде чем менять его.",
+    "name_change_enter_new_name": "Введите новое имя, которое хотите использовать.",
+    "name_change_different_from_current": "Выберите имя, отличное от текущего.",
+    "name_change_details_still_loading": "Данные текущего имени ещё загружаются. Повторите попытку через мгновение.",
+    "name_change_choose_available": "Перед продолжением выберите свободное имя.",
+    "name_change_wallet_password_required": "Перед сменой имени введите пароль кошелька.",
+    "name_change_wallet_password_failed": "Не удалось проверить пароль кошелька.",
+    "current_name_details_load_failed": "Не удалось загрузить данные текущего имени.",
+    "name_change_unknown_error": "При смене имени что-то пошло не так.",
+    "name_availability_available": "Имя свободно.",
+    "name_availability_checking": "Проверка доступности имени...",
+    "name_availability_same_as_current": "Выберите имя, отличное от уже используемого.",
+    "name_availability_taken": "Это имя уже занято."
+  },
+  "groups_widget": {
+    "accept": "Принять",
+    "approve": "Одобрить",
+    "cancel": "Отмена",
+    "characters_count": "{{current}}/{{max}}",
+    "confirm_approve_request": "Одобрить эту заявку и пригласить в группу?",
+    "confirm_join_group": "Присоединиться к этой группе сейчас?",
+    "confirm_join_promoted_closed": "Отправить заявку на вступление в эту продвигаемую группу?",
+    "confirm_join_promoted_open": "Присоединиться к этой продвигаемой группе сейчас?",
+    "connecting": "Подключение...",
+    "discover_groups": "Найти группы",
+    "error_accept_invite": "Не удалось принять это приглашение.",
+    "error_approve_request": "Не удалось одобрить эту заявку.",
+    "error_load_invites": "Не удалось загрузить приглашения в группы.",
+    "error_load_promotions": "Не удалось загрузить продвигаемые группы.",
+    "error_load_requests": "Не удалось загрузить заявки на вступление.",
+    "error_promoted": "Не удалось выполнить действие с этой продвигаемой группой.",
+    "error_publish_promotion": "Не удалось опубликовать это продвижение.",
+    "fresh_promotion_snippet": "У этой группы свежее продвигаемое обновление.",
+    "from_label": "от",
+    "group_admin_only": "Только администраторы группы",
+    "group_general": "Общий чат",
+    "group_named": "Группа {{id}}",
+    "ignore": "Пропустить",
+    "invitation_ready": "Приглашение готово к просмотру",
+    "invite_hidden": "Приглашение скрыто в этом виджете.",
+    "invites_empty_description": "Новые приглашения в группы появятся здесь по мере поступления.",
+    "invites_empty_title": "Нет ожидающих приглашений",
+    "joined_group": "Вы вступили в {{name}}.",
+    "joined_promoted": "Вы вступили в {{name}}.",
+    "join_group": "Вступить в группу",
+    "join_request_sent": "Заявка на вступление в {{name}} отправлена.",
+    "loading_invites": "Загрузка приглашений",
+    "loading_notifications": "Загрузка уведомлений",
+    "loading_promoted": "Загрузка продвигаемых групп",
+    "loading_requests": "Загрузка заявок",
+    "members_count": "{{count}} участников",
+    "new_encrypted_message": "Новое зашифрованное сообщение",
+    "notifications_empty_message": "Присоединяйтесь к сообществам в Q-Chat, чтобы этот поток наполнился групповыми сообщениями, упоминаниями и активностью.",
+    "notifications_empty_title": "Начните с групп Q-Chat",
+    "open": "Открыть",
+    "open_conversation": "Открыть беседу",
+    "private_group": "Закрытая группа",
+    "private_group_invite": "Приглашение в закрытую группу",
+    "processing": "Обработка...",
+    "promoted_by": "Продвигает {{name}}",
+    "promoted_empty_message": "Продвигаемые группы появятся здесь при появлении новых материалов.",
+    "promoted_empty_title": "Нет продвигаемых групп",
+    "promote_dialog_fee": " Плата за публикацию: {{fee}} QORT.",
+    "promote_dialog_intro": "Поделитесь коротким акцентным обновлением для одной из ваших групп под вашим управлением.",
+    "promote_group": "Продвигать группу",
+    "promote_page_title": "Продвинуть одну из ваших групп",
+    "promotion_published": "Продвижение группы опубликовано.",
+    "promotion_placeholder": "Напишите короткий текст продвижения для этой группы.",
+    "public_group": "Открытая группа",
+    "refresh": "Обновить",
+    "reject": "Отклонить",
+    "request_access": "Запросить доступ",
+    "request_approved": "{{requester}} одобрен для группы {{group}}.",
+    "request_removed": "Заявка убрана из этого виджета.",
+    "request_sent": "Запрос отправлен",
+    "requests_empty_description": "Заявки на вступление из групп под вашим управлением появятся здесь.",
+    "requests_empty_title": "Нет ожидающих заявок",
+    "select_admin_group": "Выберите группу, где вы администратор",
+    "tab_invites": "Приглашения",
+    "tab_notifications": "Уведомления",
+    "tab_promoted": "Продвижение",
+    "tab_requests": "Заявки",
+    "unknown": "Неизвестно",
+    "view_conversation": "Просмотр беседы",
+    "wants_to_join": "Хочет вступить в эту группу.",
+    "you": "Вы",
+    "publish": "Опубликовать"
+  },
+  "subscription": {
+    "subscriptions": "подписки",
+    "tooltip_actions_needed_one": "{{title}} — требуется {{count}} действие",
+    "tooltip_actions_needed_other": "{{title}} — требуется {{count}} действий",
+    "relative_soon": "скоро",
+    "relative_in_minutes_one": "через {{count}} мин",
+    "relative_in_minutes_other": "через {{count}} мин",
+    "relative_in_hours_one": "через {{count}} ч",
+    "relative_in_hours_other": "через {{count}} ч",
+    "relative_in_days_one": "через {{count}} день",
+    "relative_in_days_other": "через {{count}} дн.",
+    "relative_in_months_one": "через {{count}} мес.",
+    "relative_in_months_other": "через {{count}} мес.",
+    "row_fallback_title": "подписка",
+    "by_creator": "от {{name}}",
+    "creator_fallback": "создатель Qortal",
+    "price_line": "{{price}} QORT / {{interval}}",
+    "expires_suffix": " — истекает {{time}}",
+    "status_due": "к оплате",
+    "status_active": "активна",
+    "status_owner": "владелец",
+    "managed_fallback": "управляемая подписка",
+    "members_one": "{{count}} участник",
+    "members_other": "{{count}} участников",
+    "join_requests_suffix_one": " — {{count}} заявка на вступление",
+    "join_requests_suffix_other": " — {{count}} заявок на вступление",
+    "re_encryption_suffix": " — нужно повторное шифрование",
+    "actions_badge_one": "{{count}} действие",
+    "actions_badge_other": "{{count}} действий",
+    "loading": "загрузка подписок",
+    "section_needs_action": "нужны действия",
+    "section_active": "активные",
+    "open_subscriptions": "открыть подписки",
+    "empty_title": "Откройте Q-Apps с подписками",
+    "empty_body": "Подписывайтесь на авторов и сообщества в Q-Apps с поддержкой подписок, например SubWire.",
+    "open_subwire": "открыть SubWire",
+    "tab_subscriptions": "Подписки",
+    "tab_subwire": "SubWire"
+  },
+  "group_invites": {
+    "empty_title": "нет приглашений",
+    "empty_secondary_1": "у вас нет ожидающих приглашений",
+    "empty_secondary_2": "на данный момент.",
+    "empty_tertiary_no_groups": "вы ещё не состоите ни в одной группе.",
+    "cta_find_groups": "найти группы"
+  },
+  "group_join_requests": {
+    "empty_title": "нет запросов на вступление",
+    "empty_secondary_1": "у вас нет ожидающих запросов",
+    "empty_secondary_2": "на данный момент.",
+    "empty_tertiary_no_admin_groups": "вы пока не управляете ни одной группой."
+  },
   "advanced_options": "расширенные настройки",
   "block_delay": {
     "minimum": "минимальная задержка блока",
@@ -72,6 +346,8 @@
     "generic": {
       "avatar_publish_fee": "публикация аватара требует {{ fee }}",
       "avatar_registered_name": "для установки аватара требуется зарегистрированное имя",
+      "add_new_key_option": "Добавить новый ключ",
+      "add_new_key_sparingly": "Новые ключи следует добавлять умеренно, чтобы не увеличивать размер групповых ключей.",
       "admin_only": "будут показаны только группы, где вы админ",
       "already_in_group": "вы уже состоите в этой группе!",
       "block_delay_minimum": "минимальная задержка блока для одобрения транзакций",
@@ -105,6 +381,7 @@
       "node_minting_key": "этот узел уже содержит ключ майнинга для этой учетной записи",
       "no_announcement": "нет объявлений",
       "no_display": "нечего отображать",
+      "no_description": "Нет описания",
       "no_selection": "группа не выбрана",
       "not_part_group": "вы не состоите в зашифрованной группе. Подождите, пока админ обновит ключи.",
       "only_encrypted": "будут показаны только незашифрованные сообщения",
@@ -170,5 +447,11 @@
       "user_joined": "пользователь успешно присоединился!"
     }
   },
+  "context_menu": {
+    "mark_as_read": "Отметить как прочитанное",
+    "mute_push_notifications": "Отключить push-уведомления",
+    "unmute_push_notifications": "Включить push-уведомления",
+    "mark_all_read": "Отметить все как прочитанные"
+  },
   "thread_posts": "новые сообщения темы"
 }
diff --git a/src/i18n/locales/ru/node.json b/src/i18n/locales/ru/node.json
index 004c7d13..f0d509cc 100644
--- a/src/i18n/locales/ru/node.json
+++ b/src/i18n/locales/ru/node.json
@@ -22,7 +22,7 @@
   "steps": {
     "java": "есть Java",
     "downloaded": "Core загружен",
-    "running": "ядро запущено"
+    "running": "Core запущено"
   },
   "actions": {
     "finished": "завершено",
@@ -40,7 +40,8 @@
     "invalidKey": "недействительный API-ключ",
     "failed_stop": "не удалось остановить Core",
     "failed_bootstrap": "не удалось выполнить bootstrap",
-    "failed_delete": "не удалось удалить базу данных"
+    "failed_delete": "не удалось удалить базу данных",
+    "failed_bootstrap_or_clear": "не удалось выполнить bootstrap, очистить данные цепи или запустить Core"
   },
   "status": {
     "complete": "завершено",
@@ -63,7 +64,7 @@
     "resetDescription": "Ваш API-ключ недействителен. Нажмите «Сброс» для продолжения."
   },
   "messages": {
-    "001": "запуск ядра... пожалуйста, подождите.",
+    "001": "запуск Core... пожалуйста, подождите.",
     "002": "ошибка: невозможно запустить репозиторий",
     "003": "ошибка при запуске Qortal Core",
     "004": "ошибка распаковки Qortal Core",
@@ -72,7 +73,7 @@
     "007": "ошибка загрузки Java.",
     "008": "ошибка распаковки Java",
     "009": "загрузка Qortal Core... пожалуйста, подождите.",
-    "010": "ошибка: не удалось загрузить или установить ядро"
+    "010": "ошибка: не удалось загрузить или установить Core"
   },
   "url": {
     "title": "недействительный URL",
@@ -81,7 +82,12 @@
   "confirmations": {
     "stop": "вы уверены, что хотите остановить Core?",
     "bootstrap": "вы уверены, что хотите выполнить bootstrap?",
-    "delete": "вы уверены, что хотите удалить базу данных?"
+    "delete": "вы уверены, что хотите удалить базу данных?",
+    "bootstrapOrClearChain": "Запускает bootstrap из снимка, если Core работает локально. Если это невозможно или bootstrap завершается с ошибкой, локальная база цепочки может быть удалена и Core перезапущен; файлы кошелька не затрагиваются. Продолжить?"
+  },
+  "bootstrapChainHelp": {
+    "title": "Bootstrap цепочки",
+    "body": "Одно действие: bootstrap из снимка, когда Core доступен, или очистка локальной БД цепочки и повторный запуск Core, если bootstrap невозможен. Кошелёк хранится отдельно."
   },
   "stop": "остановить Core",
   "bootstrap": "bootstrap",
@@ -89,6 +95,53 @@
   "more": "больше параметров",
   "less": "меньше параметров",
   "enableAuthWhenSyncing": "включить аутентификацию при синхронизации",
+  "coreSetupDialog": {
+    "title": "Настроить Qortal Core",
+    "introTitle": "Запускайте свой узел локально.",
+    "introSubtitle": "Можно использовать публичный узел, пока Core запускается и синхронизируется.",
+    "publicNodeUnavailable": "Публичные узлы сейчас недоступны. Не закрывайте этот экран, пока локальный Core запускается и синхронизируется.",
+    "steps": {
+      "downloadDone": "Core загружен",
+      "downloadActive": "Загрузка Core",
+      "downloadIdle": "Скачать Core",
+      "runningDone": "Core запущен",
+      "runningActive": "Запуск Core",
+      "runningIdle": "Запустить Core"
+    },
+    "readyToDownload": "Готово к загрузке",
+    "readyToStart": "Готово к запуску",
+    "syncing": "Синхронизация",
+    "helpers": {
+      "downloadDone": "Файлы Core установлены и готовы.",
+      "downloadActive": "Загрузка и подготовка Qortal Core.",
+      "downloadIdle": "Скачайте Qortal Core для собственного узла.",
+      "runningDoneSyncing": "Core работает и синхронизирует данные блокчейна.",
+      "runningDone": "Core запущен локально.",
+      "runningWaiting": "Core запустится и начнёт синхронизацию в фоне.",
+      "runningBlocked": "Доступно после загрузки Core."
+    },
+    "nextStepPill": "Следующий шаг",
+    "locationTitle": "Расположение Core",
+    "locationCustom": "Qortal Core будет запускаться из этой папки.",
+    "locationDefault": "Qortal Core будет использовать стандартную папку системы.",
+    "locationPathDefault": "Расположение Qortal Core по умолчанию",
+    "change": "Изменить",
+    "choose": "Выбрать",
+    "clear": "Очистить",
+    "advancedTitle": "Дополнительно",
+    "advancedSubtitle": "Расширенные инструменты и параметры Core.",
+    "maintenanceUnavailable": "Инструменты обслуживания Core недоступны во время запуска или синхронизации Core.",
+    "stopCoreTitle": "Остановить Core",
+    "stopCoreBody": "Останавливает локальный процесс Core.",
+    "stopButton": "Стоп",
+    "cancel": "Отмена",
+    "actionDownload": "Скачать Core",
+    "actionStart": "Запустить Core",
+    "actionDone": "Готово",
+    "confirmTitle": "Подтвердить действие",
+    "folderCopied": "Папка Core скопирована",
+    "progressAriaLabel": "Прогресс: {{label}}"
+  },
   "NotFullyStarted": {
     "titleNotReady": "Core ещё не полностью запущено",
     "descNotReady": "Qortal Core ещё не полностью запущено. Пожалуйста, подождите.",
diff --git a/src/i18n/locales/ru/question.json b/src/i18n/locales/ru/question.json
index 75c6cdf2..c708f210 100644
--- a/src/i18n/locales/ru/question.json
+++ b/src/i18n/locales/ru/question.json
@@ -152,8 +152,12 @@
     "invite": "Разрешить этому приложению пригласить {{ invitee }}?",
     "kick": "Разрешить этому приложению исключить {{ partecipant }} из группы?",
     "leave_group": "Разрешить этому приложению выйти из следующей группы?",
-    "list_hosted_data": "Разрешить этому приложению получить список ваших размещённых данных?",
-    "order_detail": "{{ qort_amount }} QORT за {{ foreign_amount }} {{ ticker }}",
+      "list_hosted_data": "Разрешить этому приложению получить список ваших размещённых данных?",
+      "notification": "разрешить этому приложению отправлять вам уведомления в Hub?",
+      "notification_allow": "разрешить",
+      "notification_dont_allow": "не разрешать",
+      "notification_title": "уведомления {{ appName }}",
+      "order_detail": "{{ qort_amount }} QORT за {{ foreign_amount }} {{ ticker }}",
     "pay_publish": "Разрешить этому приложению произвести следующие платежи и публикации?",
     "perform_admin_action_with_value": "со значением: {{ value }}",
     "perform_admin_action": "Разрешить этому приложению выполнить административное действие: {{ type }}?",
diff --git a/src/i18n/locales/ru/tutorial.json b/src/i18n/locales/ru/tutorial.json
index d5bb4b2b..7290803b 100644
--- a/src/i18n/locales/ru/tutorial.json
+++ b/src/i18n/locales/ru/tutorial.json
@@ -33,6 +33,7 @@
     "get_six_qorts_way3_action": "Открыть Q-Trade",
     "register_name": "Зарегистрируйте имя",
     "confirming_transaction": "Подтверждение транзакции",
+    "confirming": "Подтверждение…",
     "load_avatar": "Загрузите аватар",
     "explore_apps": "Изучите популярные приложения",
     "done": "Готово",
@@ -53,6 +54,17 @@
     "devnet_testing_desc": "Тестируйте ваши Q-Apps в среде DevNet-Testing",
     "open_app": "Открыть",
     "address_copied": "Адрес скопирован в буфер обмена",
-    "group_activity": "Активность группы"
+    "group_activity": "Активность группы",
+    "get_qorts_workspace_hint": "Разблокируй первые 6 QORT, чтобы продолжить настройку.",
+    "register_name_workspace_hint": "Зарегистрированное имя превращает этот аккаунт в узнаваемую личность.",
+    "load_avatar_workspace_hint": "Добавь аватар, чтобы область управления была твоей.",
+    "onboarding_transition_hard_part_done": "Отлично. Самое сложное позади.",
+    "onboarding_transition_one_more": "Так держать. Остался ещё один шаг.",
+    "onboarding_press_next_when_ready": "Отлично. Самое сложное позади. Нажми «Дальше», когда будешь готов.",
+    "register_name_pending_hint": "Имя сохраняется в блокчейне; это может занять время.",
+    "persistent_guide_get_qorts": "Начинаем с 6 QORT. Выберите любой способ выше.",
+    "persistent_guide_register_name": "Далее зарегистрируй своё имя.",
+    "persistent_guide_load_avatar": "Наконец добавь аватар.",
+    "post_onboarding_workspace_ready": "Готово. Выше можно настраивать рабочую область."
   }
 }
diff --git a/src/i18n/locales/zh/auth.json b/src/i18n/locales/zh/auth.json
index ab914d2b..ffb642a8 100644
--- a/src/i18n/locales/zh/auth.json
+++ b/src/i18n/locales/zh/auth.json
@@ -74,8 +74,11 @@
       "set_apikey": "设置 API 密钥失败："
     },
     "generic": {
+      "block_list_intro": "添加 Qortal 名称或地址以屏蔽。地址会影响交易处理；屏蔽名称会在整个 Hub 中隐藏其数据。",
       "blocked_addresses": "被屏蔽的地址 - 阻止交易处理",
+      "blocked_addresses_hint": "阻止与这些地址相关交易的处理。",
       "blocked_names": "QDN 屏蔽名称",
+      "blocked_names_hint": "这些名称在 QDN/Hub 数据与社交功能中被屏蔽。",
       "blocking": "正在屏蔽 {{ name }}",
       "choose_block": "选择“屏蔽交易”或“全部”来屏蔽聊天消息",
       "congrats_setup": "恭喜，你已完成设置！",
@@ -88,6 +91,7 @@
       "locating_encryption_keys": "正在定位加密密钥",
       "insert_name_address": "请输入名称或地址以开始私密对话。",
       "name_address": "名称或地址",
+      "no_blocked_users": "尚未屏蔽任何人。在上方添加地址或名称以隐藏对方。",
       "no_account": "没有保存的账户",
       "no_minimum_length": "没有最小长度要求",
       "no_secret_key_published": "尚未发布密钥",
@@ -142,6 +146,159 @@
   },
   "welcome": "欢迎来到",
   "store_account": "在中心存储账户",
+  "create_wallet": {
+    "error_enter_password": "请输入钱包密码。",
+    "error_confirm_password": "请确认钱包密码。",
+    "error_passwords_mismatch": "两次输入的密码不一致。",
+    "success_wallet_saved": "钱包已保存",
+    "success_account_created": "账户已创建",
+    "success_ready_hub": "现在可以进入中心。",
+    "success_backup_before_hub": "进入中心前请先备份您的加密钱包。",
+    "enter_hub": "进入中心",
+    "download_another_copy": "下载另一份副本",
+    "backup_wallet": "备份钱包",
+    "backup_encrypted_notice": "此备份使用您的钱包密码加密。",
+    "seed_title": "您的助记词",
+    "seed_subtitle": "可用于恢复账户。保存助记词为可选步骤。接下来是加密钱包备份，这是推荐的账户恢复方式。",
+    "reveal": "显示",
+    "copied": "已复制",
+    "copy": "复制",
+    "export": "导出",
+    "seed_warning": "请勿向任何人泄露。拥有助记词的人即可访问您的账户。日常保管请在创建后使用加密钱包备份。",
+    "create_account": "创建账户",
+    "password_title": "创建密码",
+    "password_subtitle": "此密码用于在此设备上保护您的账户。",
+    "wallet_password": "钱包密码",
+    "confirm_password": "确认密码",
+    "save_account_in_hub": "在中心保存账户",
+    "continue": "继续"
+  },
+  "import_account": {
+    "title": "导入账户",
+    "subtitle": "选择如何恢复您的账户。"
+  },
+  "backup_wallet_modal": {
+    "subtitle": "下载本地钱包文件，以便稍后恢复该账户。",
+    "info_note": "钱包文件将导出并保存在本地设备上，请存放在安全的位置。",
+    "current_password": "当前密码",
+    "keep_password_in_export": "在导出的钱包文件中保留当前密码",
+    "new_password_for_backup": "用于此备份的新密码",
+    "download_wallet_file": "下载钱包文件",
+    "error_no_active_wallet": "未找到可用于备份的活跃钱包。",
+    "error_unable_to_create_backup": "无法创建钱包备份。"
+  },
+  "wallet_errors": {
+    "unable_to_unlock_default": "无法解锁该钱包。",
+    "unable_to_save_backup": "无法保存该钱包备份。",
+    "unable_to_prepare_backup": "无法准备该钱包备份。",
+    "account_not_found": "未找到该已保存账户。请选择其他账户或从备份恢复此钱包。",
+    "account_incomplete": "该已保存账户似乎不完整或已损坏。请选择其他账户或从备份恢复此钱包。",
+    "invalid_security_data": "该已保存账户包含无效的钱包安全数据。请选择其他账户或从备份恢复此钱包。",
+    "missing_encrypted_seed": "该已保存账户缺少加密种子（解锁所需的钱包锁定数据）。请选择其他账户或从备份恢复此钱包。",
+    "missing_field": "该已保存账户缺少 {{field}}。请选择其他账户或从备份恢复此钱包。",
+    "field": {
+      "address0": "钱包地址",
+      "encryptedSeed": "加密种子（解锁所需的钱包锁定数据）",
+      "iv": "钱包加密数据",
+      "kdfThreads": "钱包密码设置",
+      "mac": "钱包完整性校验",
+      "salt": "钱包密码安全数据",
+      "version": "钱包版本"
+    }
+  },
+  "connection_mode": {
+    "title": "连接模式",
+    "subtitle": "选择 Qortal 如何连接到网络。",
+    "local_title": "本地节点",
+    "recommended": "推荐",
+    "local_full_decentralized": "完全去中心化访问",
+    "local_faster": "更快性能",
+    "local_data_local": "数据保留在本地",
+    "public_title": "公共节点",
+    "public_quick": "快速接入",
+    "public_limited_decentralization": "去中心化程度有限",
+    "public_shared_infrastructure": "共享基础设施",
+    "status_running": "Core 正在运行",
+    "status_missing": "未检测到 Core",
+    "status_checking": "正在检查本地节点",
+    "section_custom_nodes": "自定义节点",
+    "add_custom_node": "添加自定义节点",
+    "empty_custom_nodes": "尚未保存自定义节点",
+    "manual_setup_link": "手动节点设置",
+    "save_settings": "保存设置",
+    "manual_edit_title": "编辑自定义节点",
+    "manual_add_title": "手动节点设置",
+    "field_name": "名称",
+    "placeholder_node_name": "我的 Qortal 节点",
+    "field_node_url": "节点 URL",
+    "placeholder_node_url": "https://127.0.0.1:12391",
+    "field_api_key_optional": "API 密钥（可选）",
+    "placeholder_api_key": "输入 API 密钥",
+    "reload_after_new_node_title": "需要重新加载",
+    "reload_after_new_node_message": "您添加了新节点，需要刷新应用。",
+    "reload_after_new_node_button": "重新加载应用"
+  },
+  "intro_features": {
+    "secure_title": "安全且注重隐私",
+    "secure_text": "您的密钥、您的数据，始终由您掌控。",
+    "fast_title": "快速访问",
+    "fast_text": "解锁后即可立即进入您的 Qortal 体验。",
+    "decentralized_title": "去中心化",
+    "decentralized_text": "按您自己的方式连接网络。",
+    "built_title": "为您而打造",
+    "built_text": "一个账户，无限可能。"
+  },
+  "entry": {
+    "title": "进入 Qortal",
+    "subtitle": "登录或创建你的账户。",
+    "create_account": "创建账户",
+    "import_account": "导入账户",
+    "no_accounts": "此设备上未找到账户。",
+    "import_choice_backup_title": "备份文件",
+    "import_choice_backup_description": "导入已保存的 Hub 备份。",
+    "import_choice_authenticate_title": "立即认证",
+    "import_choice_authenticate_description": "使用备份文件但不保存。",
+    "import_choice_seed_title": "助记词",
+    "import_choice_seed_description": "使用助记词恢复。",
+    "import_backup_heading": "从备份文件导入",
+    "import_backup_drop_hint": "拖放备份文件或点击选择。",
+    "import_authenticate_heading": "从备份文件认证",
+    "import_authenticate_drop_hint": "拖放备份文件或点击选择。它不会保存在此设备上。",
+    "import_seed_label": "助记词",
+    "import_seed_placeholder": "输入你的助记词",
+    "import_wallet_password": "钱包密码",
+    "importing_account": "正在导入账户...",
+    "seed_import_error": "无法导入此助记词。",
+    "seed_import_duplicate": "该账户已保存在此设备上。",
+    "seed_import_success": "账户导入成功。",
+    "import_backup_success_one": "已成功导入 {{count}} 个账户。",
+    "import_backup_success_other": "已成功导入 {{count}} 个账户。",
+    "import_backup_duplicate": "这些账户已保存在此设备上。",
+    "import_backup_invalid": "此备份文件不包含有效账户。",
+    "import_file_read_aborted": "文件读取已中止",
+    "import_file_read_failed": "文件读取失败",
+    "filter_accounts_aria": "按地址、主名称或备注筛选账户",
+    "filter_placeholder": "地址、主名称或备注…",
+    "filter_no_results": "没有匹配的账户。",
+    "filter_clear": "清除搜索",
+    "wallet_edit_name_label": "名称",
+    "wallet_edit_account_name_placeholder": "账户名称",
+    "wallet_edit_note_label": "备注",
+    "wallet_edit_note_placeholder": "可选备注",
+    "wallet_edit_remove": "移除",
+    "wallet_edit_save": "保存",
+    "wallet_edit_aria_label": "编辑账户名称和备注"
+  },
+  "authentication_form": {
+    "unnamed_account": "未命名账户",
+    "password_placeholder": "输入密码",
+    "unlock": "解锁",
+    "choose_another_account": "选择其他账户",
+    "using_local_node": "本地节点",
+    "using_public_node": "公共节点",
+    "using_custom_node": "自定义节点"
+  },
+
   "temp_auth": {
     "tooltip": "在不存储账户的情况下进行认证",
     "button": "临时认证"
diff --git a/src/i18n/locales/zh/core.json b/src/i18n/locales/zh/core.json
index b104a181..1fbd9d1b 100644
--- a/src/i18n/locales/zh/core.json
+++ b/src/i18n/locales/zh/core.json
@@ -7,6 +7,7 @@
     "add_custom_framework": "添加自定义框架",
     "add_reaction": "添加反应",
     "add_theme": "添加主题",
+    "back": "返回",
     "backup_account": "备份帐户",
     "backup_wallet": "备用钱包",
     "cancel": "取消",
@@ -132,11 +133,11 @@
   "core": {
     "block_height": "块高度",
     "data_peers": "QDN (数据) 节点",
-    "information": "核心信息",
+    "information": "Core 信息",
     "peers": "连接的同行",
-    "version": "核心版本"
+    "version": "Core 版本"
   },
-  "current_language": "current language: {{ language }}",
+  "current_language": "当前语言：{{ language }}",
   "dev": "开发",
   "dev_mode": "开发模式",
   "developer": {
@@ -208,7 +209,7 @@
       "encrypt_app": "无法加密应用程序。应用未发布'",
       "fetch_app": "无法获取应用",
       "fetch_publish": "无法获取发布",
-      "file_too_large": "file {{ filename }} is too large. Max size allowed is {{ size }} MB.",
+      "file_too_large": "文件 {{ filename }} 过大。最大允许 {{ size }} MB。",
       "generic": "发生错误",
       "initiate_download": "无法启动下载",
       "invalid_amount": "无效的金额",
@@ -220,10 +221,10 @@
       "invalid_theme_format": "无效的主题格式",
       "invalid_zip": "无效拉链",
       "message_loading": "错误加载消息。",
-      "message_size": "your message size is of {{ size }} bytes out of a maximum of {{ maximum }}",
+      "message_size": "消息大小为 {{ size }} 字节，最大 {{ maximum }} 字节",
       "minting_account_add": "无法添加薄荷帐户",
       "minting_account_remove": "无法删除铸造帐户",
-      "missing_fields": "missing: {{ fields }}",
+      "missing_fields": "缺少：{{ fields }}",
       "navigation_timeout": "导航超时",
       "network_generic": "网络错误",
       "password_not_matching": "密码字段不匹配！",
@@ -239,7 +240,7 @@
     },
     "generic": {
       "already_voted": "您已经投票了。",
-      "avatar_size": "{{ size }} KB max. for GIFS",
+      "avatar_size": "GIF 最大 {{ size }} KB",
       "benefits_qort": "Qort的好处",
       "building": "建筑",
       "building_app": "建筑应用",
@@ -248,6 +249,8 @@
       "buy_order_request": "应用程序<br/><italic>{{hostname}}</italic><br/><span>正在请求{{count}}购买订单</span>",
       "buy_order_request_other": "应用程序<br/><italic>{{hostname}}</italic><br/><span>正在请求{{count}}购买订单</span>",
       "devmode_local_node": "请使用您的本地节点进行开发模式！注销并使用本地节点。",
+      "disable_os_push": "关闭系统推送",
+      "disable_os_push_desc": "关闭此应用的桌面提醒，同时继续在 Hub 中查看活动。",
       "downloading": "下载",
       "downloading_decrypting_app": "下载和解密私人应用程序。",
       "edited": "编辑",
@@ -255,28 +258,39 @@
       "encrypted": "加密",
       "encrypted_not": "没有加密",
       "amount_qort": "金额: {{ amount }} QORT",
-      "fee_qort": "fee: {{ fee }} QORT",
+      "app_notifications_hint": "Q-App 通知将显示在此处",
+      "fee_qort": "费用：{{ fee }} QORT",
       "fetching_data": "获取应用程序数据",
-      "foreign_fee": "foreign fee: {{ fee }}",
+      "foreign_fee": "外部费用：{{ fee }}",
       "get_qort_trade_portal": "使用Qortal的交叉链贸易门户网站获取Qort",
+      "loading": "加载中...",
       "minimal_qort_balance": "账户中至少拥有 {{ quantity }} QORT，可让您以接近即时的速度发送聊天消息。",
       "mentioned": "提及",
+      "new_notification_from": "来自 {{ appName }} 的新通知",
+      "new_payment_body": "您收到了 {{ amount }} QORT。",
+      "new_payment_received": "收到新的付款",
+      "new_qmail": "您收到了新的 Q-Mail",
       "message_with_image": "此消息已经有一个图像",
-      "most_recent_payment": "{{ count }} most recent payment",
-      "name_available": "{{ name }} is available",
+      "most_recent_payment": "最近 {{ count }} 笔付款",
+      "name_available": "{{ name }} 可用",
       "name_benefits": "名称的好处",
       "name_checking": "检查名称是否已经存在",
       "name_preview": "您需要一个使用预览的名称",
       "name_publish": "您需要一个Qortal名称才能发布",
       "name_rate": "您需要一个名称来评估。",
       "name_registration": "您的余额为 {{ balance }} QORT。名称注册需要 {{ fee }} QORT 费用。",
-      "name_unavailable": "{{ name }} is unavailable",
+      "name_unavailable": "{{ name }} 不可用",
+      "no_app_notifications": "尚无应用通知",
       "no_data_image": "没有图像数据",
       "no_description": "没有描述",
       "no_messages": "没有消息",
       "no_message": "没有消息",
       "no_minting_details": "无法在网关上查看薄荷细节",
+      "no_notification_apps": "还没有应用拥有通知权限。",
       "no_notifications": "没有新的通知",
+      "notification_settings": "通知设置",
+      "notification_settings_desc": "选择哪些应用可以发送桌面提醒，同时继续在 Hub 中查看活动。",
+      "notifications": "通知",
       "no_payments": "无付款",
       "no_pinned_changes": "您目前对固定应用程序没有任何更改",
       "no_results": "没有结果",
@@ -287,16 +301,17 @@
       "password_confirm": "请确认密码",
       "password_enter": "请输入密码",
       "payment_request": "the Application <br/><italic>{{hostname}}</italic> <br/><span>is requesting a payment</span>",
-      "people_reaction": "people who reacted with {{ reaction }}",
+      "people_reaction": "使用 {{ reaction }} 回应的人",
       "processing_transaction": "正在处理交易，请等待...",
       "publish_data": "将数据发布到Qortal：从应用到视频的任何内容。完全分散！",
       "publishing": "出版...请等待。",
       "qdn": "使用QDN保存",
-      "rating": "rating for {{ service }} {{ name }}",
+      "rating": "对 {{ service }} {{ name }} 的评分",
       "register_name": "您需要一个注册的Qortal名称来将固定的应用程序保存到QDN。",
-      "replied_to": "replied to {{ person }}",
+      "replied_to": "回复了 {{ person }}",
       "revert_default": "还原为默认值",
       "revert_qdn": "还原为QDN",
+      "revoke_permission": "撤销",
       "save_qdn": "保存到QDN",
       "secure_ownership": "确保按您的名字发布的数据所有权。您甚至可以将数据以及数据出售给第三方。",
       "select_file": "请选择一个文件",
@@ -308,7 +323,8 @@
       "unread_messages": "下面未读消息",
       "unsaved_changes": "您对固定应用程序有未保存的更改。将它们保存到QDN。",
       "updating": "更新",
-      "wait": "请稍等"
+      "wait": "请稍等",
+      "open_q_trade_subtitle": "打开 Q-Trade，在交易门户购买 QORT。"
     },
     "message": "信息",
     "promotion_text": "促销文本",
@@ -317,17 +333,17 @@
       "logout": "您确定要注销吗？",
       "new_user": "您是新用户吗？",
       "delete_chat_image": "您想删除以前的聊天图片吗？",
-      "perform_transaction": "would you like to perform a {{action}} transaction?",
+      "perform_transaction": "要执行 {{action}} 交易吗？",
       "provide_thread": "请提供线程标题",
       "publish_app": "您想发布此应用吗？",
       "publish_avatar": "您想发布一个化身吗？",
       "publish_qdn": "您想将您的设置发布到QDN（加密）吗？",
       "overwrite_changes": "该应用程序无法下载您现有的QDN固定固定应用程序。您想覆盖这些更改吗？",
-      "rate_app": "would you like to rate this app a rating of {{ rate }}?. It will create a POLL tx.",
+      "rate_app": "要将此应用评为 {{ rate }} 吗？距离下次评分还有 {{ days }} 天。",
       "register_name": "您想注册这个名字吗？",
       "reset_pinned": "不喜欢您当前的本地更改吗？您想重置默认的固定应用吗？",
       "reset_qdn": "不喜欢您当前的本地更改吗？您想重置保存的QDN固定应用吗？",
-      "transfer_qort": "would you like to transfer {{ amount }} QORT"
+      "transfer_qort": "要转账 {{ amount }} QORT 吗"
     },
     "success": {
       "order_submitted": "您的买入订单已提交",
@@ -336,6 +352,7 @@
       "rated_app": "成功评分。请等待几分钟，以使网络传播更改。",
       "request_read": "我读了这个请求",
       "transfer": "转会很成功！",
+      "transfer_submitted": "您的转账已成功提交。",
       "voted": "成功投票。请等待几分钟，以使网络传播更改。"
     }
   },
@@ -365,11 +382,42 @@
     },
     "status_title": "铸造状态",
     "tier_share_per_block": "每个区块的等级份额",
-    "total_minter_in_tier": "该等级层级中的总铸造者数"
+    "total_minter_in_tier": "该等级层级中的总铸造者数",
+    "panel": {
+      "dialog_subtitle": "查看当前的铸造状态、进度和后续步骤。",
+      "state_syncing_title": "同步中",
+      "state_syncing_body": "节点仍在同步，铸造尚未开始。",
+      "state_active_title": "铸造进行中",
+      "state_active_body_node_selection": "此锻造者密钥已在本节点配置。统计数据反映所选账户。",
+      "state_active_body_account": "此账户已在本节点启用铸造。",
+      "state_inactive_title": "未在铸造",
+      "state_inactive_body_not_in_group": "此账户还不是锻造者群组成员。",
+      "state_inactive_body_multi_key": "本节点已配置多个铸造密钥。",
+      "state_inactive_body_ready": "此账户已准备好进入下一步铸造流程。",
+      "next_step_visit_q_mintership": "打开 Q-Mintership 应用申请成为锻造者。",
+      "next_step_already_active": "本节点上铸造已处于活动状态。",
+      "next_step_wait_sync": "请等待节点同步完成后再开始铸造。",
+      "next_step_start_when_ready": "准备好后在本节点启动铸造。",
+      "section_your_wallet": "您的钱包",
+      "section_minter_profile_stats": "锻造者资料（统计）",
+      "section_account_identity": "账户身份",
+      "section_progress_next_level": "下一级进度",
+      "section_next_step": "下一步",
+      "section_node_minting_accounts": "节点铸造账户",
+      "select_account_for_stats_hint": "选择一个账户以更新右侧的进度与奖励统计。",
+      "badge_viewing_stats": "正在查看统计",
+      "blocks_to_level": "距离等级 {{level}} 的区块数",
+      "minting_for_approx_days": "铸造时长：约 {{days}} 天",
+      "reference_only": "（仅供参考）",
+      "rewards_info_subtitle_own": "（您的奖励信息）",
+      "rewards_info_subtitle_selected": "（所选锻造者 — 此密钥的奖励）",
+      "network_details": "网络详情",
+      "loading_spinner_aria": "加载中"
+    }
   },
   "name": "姓名",
   "name_app": "名称/应用",
-  "new_post_in": "new post in {{ title }}",
+  "new_post_in": "{{ title }} 中的新帖子",
   "none": "没有任何",
   "note": "笔记",
   "option": "选项",
@@ -389,10 +437,36 @@
   "publish": "发布",
   "q_apps": {
     "about": "关于这个Q-App",
-    "q_mail": "Q邮件",
+    "q_mail": "Q-Mail",
     "q_manager": "Q-Manager",
-    "q_sandbox": "q-sandbox",
-    "q_wallets": "Q-WALLETS"
+    "q_sandbox": "Q-Sandbox",
+    "q_wallets": "Q-Wallets",
+    "wallets_workspace": "钱包工作区"
+  },
+  "account_lookup": {
+    "dialog_title": "用户搜索",
+    "empty_title": "搜索账户",
+    "empty_subtitle": "输入名称或地址",
+    "tooltip_send_disabled": "这是您自己的资料。",
+    "tooltip_block_public_node": "在公共节点上无法屏蔽用户。",
+    "tooltip_block_self": "您不能屏蔽自己。",
+    "error_lookup_failed": "无法查询此账户。",
+    "chip_level": "等级 {{level}}",
+    "chip_blocked": "已屏蔽",
+    "chip_no_registered_name": "未注册名称",
+    "section_minting_progress": "铸币进度",
+    "minting_remaining": "剩余 {{remaining}}",
+    "minting_blocks_to_level": "距离等级 {{level}} 还需 {{remaining}}",
+    "minting_approx_one": "约 {{count}} 天的铸币",
+    "minting_approx_other": "约 {{count}} 天的铸币",
+    "minting_days_label": "铸币:",
+    "label_address": "地址",
+    "label_public_key": "公钥",
+    "payments_title": "最近付款",
+    "pagination_rows_per_page": "每页行数：",
+    "pagination_displayed_rows": "第 {{from}}-{{to}} 条，共 {{count}} 条",
+    "action_block": "屏蔽",
+    "action_unblock": "取消屏蔽"
   },
   "app_detail": {
     "about": "关于",
@@ -454,7 +528,10 @@
     "official_apps": "官方应用"
   },
   "aria": {
-    "apps_library_tabs": "应用库导航标签"
+    "apps_library_tabs": "应用库导航标签",
+    "core_controls": "Core 控制",
+    "switch_theme_dark": "切换到深色模式",
+    "switch_theme_light": "切换到浅色模式"
   },
   "supply": "供应",
   "tags": "标签",
@@ -471,12 +548,12 @@
   "thread_other": "线程",
   "thread_title": "线程标题",
   "time": {
-    "day_one": "{{count}} day",
-    "day_other": "{{count}} days",
-    "hour_one": "{{count}} hour",
-    "hour_other": "{{count}} hours",
-    "minute_one": "{{count}} minute",
-    "minute_other": "{{count}} minutes",
+    "day_one": "{{count}} 天",
+    "day_other": "{{count}} 天",
+    "hour_one": "{{count}} 小时",
+    "hour_other": "{{count}} 小时",
+    "minute_one": "{{count}} 分钟",
+    "minute_other": "{{count}} 分钟",
     "time": "时间"
   },
   "title": "标题",
@@ -491,7 +568,7 @@
   "video_fetching": "正在从 Qortal 网络获取视频...",
   "video_building": "下载完成：正在生成视频...",
   "vote": "投票",
-  "vote_other": "{{ count }} votes",
+  "vote_other": "{{ count }} 票",
   "zip": "拉链",
   "wallet": {
     "litecoin": "莱特币钱包",
@@ -499,6 +576,157 @@
     "wallet": "钱包",
     "wallet_other": "钱包"
   },
+  "widget_container": {
+    "empty_message": "目前没有可显示的内容。",
+    "empty_title": "尚无项目",
+    "error_title": "无法加载此小组件",
+    "loading": "加载中",
+    "loading_message": "正在从默认 Qortal 节点获取最新公开数据。",
+    "retry": "重试"
+  },
+  "quitter_feed": {
+    "error_generic": "公开 Quitter 动态暂时不可用。请稍后再试。",
+    "error_following": "个性化 Quitter 动态暂时不可用。请重试。",
+    "error_timeout": "动态加载失败。你可以重试或返回「综合」。",
+    "loading_following": "正在加载关注动态…",
+    "loading_general": "正在加载动态…",
+    "error_title_following": "动态加载失败",
+    "error_title_general": "无法加载帖子",
+    "empty_title_no_name": "登录以个性化你的动态",
+    "empty_title_no_following": "你似乎还没有关注任何人。",
+    "empty_title_no_posts": "暂无已关注账号的帖子",
+    "empty_title_general": "暂无帖子",
+    "empty_message_no_name": "使用 Qortal 名称登录以建立个性化动态。",
+    "empty_message_no_following": "浏览 Quitter 并关注账号以构建你的动态。",
+    "empty_message_no_posts": "你关注的账号尚未在 Quitter 发帖。",
+    "tab_general": "综合",
+    "tab_following": "关注",
+    "subtitle_personalized": "个性化动态",
+    "subtitle_public": "公开动态",
+    "retry_following": "再试一次",
+    "retry_general": "重试",
+    "return_to_general": "返回综合",
+    "posts_showing_one": "显示 {{count}} 条帖子",
+    "posts_showing_other": "显示 {{count}} 条帖子",
+    "new_posts_one": "{{count}} 条新帖子",
+    "new_posts_other": "{{count}} 条新帖子"
+  },
+  "quick_tools_pad": {
+    "user_search": "用户搜索",
+    "wallets": "钱包",
+    "minting": "铸造",
+    "backup_wallet": "备份钱包",
+    "q_chat": "Q-Chat",
+    "notifications_enable": "开启通知",
+    "notifications_mute": "静音通知",
+    "apps": "应用",
+    "extras": "",
+    "hint_notifications_desktop_only": "仅静音桌面提醒，中心内的通知仍会继续。",
+    "hint_minting_panel": "成为铸造者后即可使用此面板。请前往 Q-Mintership 开始。",
+    "snackbar_backup_wallet": "请下载钱包文件，访问账户需要它。"
+  },
   "website": "网站",
-  "welcome": "欢迎"
+  "welcome": "欢迎",
+  "qortino_workspace": {
+    "modules_hotkeys_label": "Hotkeys",
+    "modules_hotkeys_description": "Curated shortcuts for your most-used routes.",
+    "modules_music_label": "Music player",
+    "modules_music_description": "A compact Earbump player with search and quick playback.",
+    "modules_suggest_label": "Suggest a module",
+    "modules_suggest_description": "Compose > Add Subject + Message & Send it our way!",
+    "workspace_empty_prompt": "Choose what lives above QORTINO.",
+    "workspace_header_hotkeys": "Hotkeys",
+    "workspace_header_music": "Music player",
+    "workspace_add_app": "Add app",
+    "getting_started_heading": "Getting started",
+    "onboarding_step_progress": "Step {{current}} / {{total}}",
+    "dialog_module_title": "Choose a module",
+    "dialog_module_subtitle": "Pick what lives above QORTINO.",
+    "dialog_hotkeys_title": "Select hotkeys",
+    "dialog_hotkeys_subtitle": "Saved automatically for this account.",
+    "dialog_music_search_title": "Search Earbump",
+    "dialog_music_search_subtitle": "Find a track, press play, and drop it into the player above.",
+    "search_placeholder_qapps": "Search Q-Apps",
+    "search_placeholder_tracks": "Search tracks or artists",
+    "section_recommended": "Recommended",
+    "curated_badge": "[ CURATED ]",
+    "hotkeys_loading_library": "Loading Q-Apps library...",
+    "hotkeys_unavailable_title": "Q-Apps unavailable",
+    "hotkeys_no_match_title": "No Q-Apps match yet",
+    "hotkeys_no_match_hint": "Try another app name to wire a shortcut into the selected slot.",
+    "error_hotkey_catalog": "Unable to load Q-Apps right now.",
+    "music_section_results": "Results",
+    "music_section_discovery": "Discovery",
+    "music_loading_search": "Searching the EarBump library...",
+    "music_loading_discovery": "Loading EarBump discovery...",
+    "music_quiet_title": "EarBump is quiet right now",
+    "music_no_tracks_title": "No tracks surfaced",
+    "music_no_tracks_hint": "Try another title or artist to pull something into the player.",
+    "error_earbump_discovery": "Unable to load EarBump right now.",
+    "error_earbump_search": "Unable to search EarBump right now.",
+    "music_syncing_library": "Syncing with EarBump library...",
+    "music_empty_title": "EarBump library",
+    "music_empty_uploaded": "Waiting for library",
+    "music_track_load_failed": "This track could not finish loading on your node.",
+    "music_no_peers_data": "No peers for remaining data",
+    "music_preparing_peers_one": "Preparing on your node... {{percent}}% ({{count}} peer)",
+    "music_preparing_peers_other": "Preparing on your node... {{percent}}% ({{count}} peers)",
+    "music_preparing_percent_only": "Preparing on your node... {{percent}}%",
+    "music_searching_peers": "Looking for peers...",
+    "music_finalizing_track": "Finalizing the track on your node...",
+    "music_preparing_base": "Preparing on your node...",
+    "music_playback_stalled": "Playback stalled. Press play to retry.",
+    "music_stream_stalled": "Track stalled. Rebuilding the stream...",
+    "hotkeys_launch_description": "Launch {{appName}}",
+    "hotkeys_fallback_launch": "Launch Q-App",
+    "reaction_hotkeys_ready": "Hotkeys panel ready.",
+    "reaction_music_panel_ready": "Music panel ready.",
+    "reaction_panel_cleared": "Panel cleared.",
+    "reaction_music_player_ready": "Music player ready.",
+    "reaction_locked_track": "Locked on {{title}}.",
+    "reaction_track_rotation": "{{title}} is in rotation.",
+    "reaction_onboarding_route": "Onboarding route open. I'll keep the next step warm.",
+    "reaction_support_chat": "Support chat is open. Ask for the 6 QORT and I'll queue step two.",
+    "reaction_q_trade_open": "Q-Trade is up. If you grab QORT there, I'll take you forward.",
+    "reaction_name_flow": "Name flow open. This is where the hub starts recognizing you.",
+    "reaction_avatar_flow": "Avatar flow ready. Let's give this place a face.",
+    "track_meta_separator": "·",
+    "a11y_clear_hotkey_slot": "Clear slot {{n}}",
+    "runtime_workspace_bay_title": "Workspace bay hit a runtime snag.",
+    "runtime_workspace_bay_body": "QORTINO below is still safe. Refresh the Hub and if this keeps happening we will trace the exact crash from here.",
+    "runtime_qortino_title": "QORTINO hit a runtime snag.",
+    "runtime_qortino_body": "The workspace bay above is still safe. Refresh the Hub and if this keeps happening we will trace the exact crash from here.",
+    "hotkey_slot_number": "插槽 {{n}}"
+  },
+  "bookmarks": {
+    "title": "书签",
+    "bookmarked": "已加入书签",
+    "add_page": "添加页面",
+    "loading": "正在加载书签...",
+    "folder": "文件夹",
+    "create_folder": "创建文件夹",
+    "folder_name": "文件夹名称",
+    "new_folder": "新建文件夹",
+    "top_level": "顶层",
+    "edit_bookmark": "编辑书签",
+    "add_bookmark": "添加书签",
+    "save_location_without_query": "保存不含查询参数的 Q-App 位置。",
+    "name": "名称",
+    "bookmark_name_placeholder": "书签名称",
+    "qortal_link": "Qortal 链接",
+    "qortal_link_placeholder": "qortal://APP/名称/路径",
+    "no_bookmarks": "还没有书签。",
+    "no_bookmarks_folder": "此文件夹中没有书签。",
+    "bookmark_count_one": "{{count}} 个书签",
+    "bookmark_count_other": "{{count}} 个书签",
+    "edit": "编辑",
+    "move": "移动",
+    "delete": "删除",
+    "rename": "重命名",
+    "remove": "移除",
+    "create": "创建",
+    "more": "更多",
+    "delete_folder_title": "删除文件夹？",
+    "delete_folder_message": "此文件夹中的书签将移至顶层。"
+  }
 }
diff --git a/src/i18n/locales/zh/group.json b/src/i18n/locales/zh/group.json
index b2d2374a..23a42032 100644
--- a/src/i18n/locales/zh/group.json
+++ b/src/i18n/locales/zh/group.json
@@ -28,6 +28,280 @@
     "select_group": "选择群组",
     "visit_q_mintership": "访问 Q-Mintership"
   },
+  "dashboard": {
+    "qort_balance": "QORT 余额",
+    "node_status": "节点状态",
+    "node_unavailable": "节点不可用",
+    "sync_percent": "{{percent}}% 已同步",
+    "minter_level": "矿工等级",
+    "peers": "对等节点",
+    "qdn": "QDN",
+    "core": "Core",
+    "hub": "Hub",
+    "node": "节点",
+    "using_node": "当前节点",
+    "change_node": "更换节点",
+    "node_type": "节点类型",
+    "node_height": "节点高度",
+    "local_node": "本地节点",
+    "public_node": "公共节点",
+    "custom_node": "自定义节点",
+    "synchronizing": "同步中",
+    "fully_operational": "完全运行",
+    "not_operational": "未运行",
+    "attention_needed": "需要注意",
+    "apply": "应用",
+    "info_panel_status": "状态",
+    "info_panel_node_comment": "// node_info",
+    "minter_pin_save_progress_default": "将进度条设为默认视图",
+    "minter_pin_save_dots_default": "将铸币圆点设为默认视图",
+    "node_switch_error": "暂时无法切换节点。",
+    "node_menu_local": "本地节点",
+    "node_menu_public": "公共节点",
+    "qortino_runtime_title": "QORTINO 卡片外壳遇到运行时错误。",
+    "qortino_runtime_body": "仪表盘其余部分仍安全。请刷新 Hub；若重复出现请告知团队。",
+    "no_custom_nodes_saved": "未保存任何自定义节点",
+    "wallet_activity": "钱包动态",
+    "send": "发送",
+    "receive": "接收",
+    "buy": "购买",
+    "recent_transaction": "最近交易",
+    "loading_wallet_activity": "正在加载钱包动态...",
+    "sent_to": "发送至 ",
+    "received_from": "接收自 ",
+    "no_wallet_activity": "暂无新的钱包动态。",
+      "wallet_activity_window": "近 7 天内的最新交易",
+      "wallet_activity_unknown_address": "未知地址",
+      "wallet_activity_relative_just_now": "刚刚",
+      "wallet_activity_relative_minutes_ago_one": "{{count}} 分钟前",
+      "wallet_activity_relative_minutes_ago_other": "{{count}} 分钟前",
+      "wallet_activity_relative_hours_ago_one": "{{count}} 小时前",
+      "wallet_activity_relative_hours_ago_other": "{{count}} 小时前",
+      "wallet_activity_relative_days_ago_one": "{{count}} 天前",
+      "wallet_activity_relative_days_ago_other": "{{count}} 天前",
+      "open_in_q_chat": "在 Q-Chat 中打开",
+    "open_in_q_apps": "在 Q-Apps 中打开",
+    "quitter_feed": "Quitter 动态",
+    "quitter_show_more": "显示更多",
+    "quitter_show_less": "收起",
+    "quitter_video_attachment": "视频附件",
+    "quitter_video_preview_hub": "预览在 Hub 中为只读",
+    "featured_q_apps": "精选 Q-Apps",
+    "featured_q_apps_subtitle": "从仪表盘直接启动可信的社区应用。",
+    "explore_all_q_apps": "浏览全部 Q-Apps",
+    "reduce_motion": "减少动态效果",
+    "account_overview": "账户概览",
+    "qortal_name_address": "QORTAL 名称与地址",
+    "profile": "个人资料",
+    "profile_settings": "个人资料设置",
+    "profile_settings_description": "查看您的名称和账户身份。",
+    "security": "安全",
+    "security_settings": "安全设置",
+    "security_settings_description": "仅在绝对需要时显示并复制私钥。",
+    "developer": "开发者",
+    "developer_settings": "开发者设置",
+    "developer_settings_description": "启用开发者工具与诊断以进行高级测试。",
+    "system": "系统",
+    "system_settings": "系统设置",
+    "system_settings_description": "控制通知、动效、固定应用与已屏蔽账户。",
+    "current_name": "当前名称",
+    "no_name_registered": "未注册名称",
+    "wallet_address": "钱包地址",
+    "unavailable": "不可用",
+    "no_active_wallet": "无活动钱包",
+    "names_qapp_actions_hint": "购买、出售与更名请在 Names Q-App 中处理。",
+    "open_the": "打开",
+    "names": "Names",
+    "names_qapp_hint_suffix": "用于购买、出售名称或更改已注册名称的 Q-App。",
+    "private_key_warning": "切勿分享私钥。任何持有私钥的人都可能控制此钱包及其资金。",
+    "wallet_password": "钱包密码",
+    "wallet_password_placeholder": "输入钱包密码",
+    "decrypt": "解密",
+    "copy_key": "复制密钥",
+    "private_key": "私钥",
+    "private_key_hint": "仅在需要恢复或迁移此钱包时解密私钥。",
+    "notifications_update_error": "当前无法更新应用通知。",
+    "wallet_unavailable_error": "钱包数据暂时不可用。",
+    "wallet_password_required": "输入钱包密码以解密私钥。",
+    "wallet_decrypt_error_with_message": "无法解密钱包：{{message}}",
+    "wallet_decrypt_error": "无法使用该密码解密钱包。",
+    "private_key_copied": "私钥已复制到剪贴板。",
+    "enable_dev_mode": "启用开发者模式",
+    "enable_dev_mode_desc": "在 Hub 中解锁本地开发界面、诊断与测试工具。",
+    "dev_mode_tip": "提示：启用后侧边栏会出现开发者工具图标。可将指针移到左边缘以显示。",
+    "reduce_app_notifications": "减少应用通知",
+    "reduce_app_notifications_desc": "开启以静音桌面推送通知。关闭则保留常规 Hub 提醒。",
+    "reduce_ui_animations": "减少界面动画",
+    "reduce_ui_animations_desc": "开启以减少 Hub 中的动效。关闭则使用默认动画界面。",
+    "pinned_qapp_backup": "已固定 Q-App 备份",
+    "pinned_qapp_backup_desc": "将固定的 Q-App 保存到加密的 QDN 设置，以便布局跨设备同步。",
+    "manage_backup": "管理备份",
+    "block_list": "屏蔽列表",
+    "block_list_desc": "查看已屏蔽的名称与地址，准备好后可解除屏蔽。",
+    "blocked_count": "{{count}} 个已屏蔽",
+    "addresses": "地址",
+    "unblock": "解除屏蔽",
+    "no_blocked_accounts": "尚无已屏蔽账户。",
+    "show_receive_qr": "显示收款二维码",
+    "copy_address": "复制地址",
+    "privacy_mode_tooltip": "隐私模式：共享屏幕时模糊敏感信息",
+    "toggle_privacy_mode": "切换隐私模式",
+    "send_qort": "发送 QORT",
+    "send_qort_subtitle": "向任意已注册名称或地址转账 QORT。",
+    "close_send_qort_modal": "关闭发送 QORT 窗口",
+    "receive_qort": "接收 QORT",
+    "receive_qort_subtitle": "扫描以接收 QORT",
+    "close_receive_qort_modal": "关闭接收 QORT 窗口",
+    "download_qr": "下载二维码",
+    "qortal_address_or_name": "Qortal 地址或已注册名称",
+    "blocked": "已屏蔽",
+    "account_status_online": "在线",
+    "account_status_busy": "忙碌",
+    "account_status_invisible": "隐身",
+    "account_settings_tooltip": "账户设置",
+    "open_account_settings_aria": "打开账户设置",
+    "name_change_confirm": "将您的注册名称从 {{oldName}} 更改为 {{newName}}？",
+    "name_change_success": "名称更改已成功提交。",
+    "name_change_register_first": "请先注册名称再进行更改。",
+    "name_change_enter_new_name": "输入要使用的新名称。",
+    "name_change_different_from_current": "请选择与当前名称不同的名称。",
+    "name_change_details_still_loading": "仍在加载当前名称信息。请稍后再试。",
+    "name_change_choose_available": "请先选择一个可用的名称再继续。",
+    "name_change_wallet_password_required": "更改名称前请输入钱包密码。",
+    "name_change_wallet_password_failed": "无法验证您的钱包密码。",
+    "current_name_details_load_failed": "无法加载您当前名称的详细信息。",
+    "name_change_unknown_error": "更改名称时出现问题。",
+    "name_availability_available": "该名称可用。",
+    "name_availability_checking": "正在检查名称是否可用…",
+    "name_availability_same_as_current": "请选择与您正在使用的名称不同的名称。",
+    "name_availability_taken": "该名称已被占用。"
+  },
+  "groups_widget": {
+    "accept": "接受",
+    "approve": "批准",
+    "cancel": "取消",
+    "characters_count": "{{current}}/{{max}}",
+    "confirm_approve_request": "批准此请求并邀请他们加入群组？",
+    "confirm_join_group": "现在加入此群组？",
+    "confirm_join_promoted_closed": "向此推广群组发送加入请求？",
+    "confirm_join_promoted_open": "现在加入此推广群组？",
+    "connecting": "正在连接…",
+    "discover_groups": "发现群组",
+    "error_accept_invite": "目前无法接受该邀请。",
+    "error_approve_request": "目前无法批准该请求。",
+    "error_load_invites": "目前无法加载群组邀请。",
+    "error_load_promotions": "目前无法加载推广群组。",
+    "error_load_requests": "目前无法加载加入请求。",
+    "error_promoted": "目前无法对该推广群组进行操作。",
+    "error_publish_promotion": "目前无法发布该推广。",
+    "fresh_promotion_snippet": "此群组有新的推广更新。",
+    "from_label": "来自",
+    "group_admin_only": "仅限群组管理员",
+    "group_general": "通用",
+    "group_named": "群组 {{id}}",
+    "ignore": "忽略",
+    "invitation_ready": "邀请可供查看",
+    "invite_hidden": "邀请已在此小部件中暂时隐藏。",
+    "invites_empty_description": "新的群组邀请送达后将显示在这里。",
+    "invites_empty_title": "暂无待处理邀请",
+    "joined_group": "已加入 {{name}}。",
+    "joined_promoted": "已加入 {{name}}。",
+    "join_group": "加入群组",
+    "join_request_sent": "已向 {{name}} 发送加入请求。",
+    "loading_invites": "正在加载邀请",
+    "loading_notifications": "正在加载通知",
+    "loading_promoted": "正在加载推广群组",
+    "loading_requests": "正在加载请求",
+    "members_count": "{{count}} 名成员",
+    "new_encrypted_message": "新的加密消息",
+    "notifications_empty_message": "加入 Q-Chat 社区，让这个信息流显示群组消息、提及和活动。",
+    "notifications_empty_title": "从 Q-Chat 群组开始",
+    "open": "打开",
+    "open_conversation": "打开对话",
+    "private_group": "私人群组",
+    "private_group_invite": "私人群组邀请",
+    "processing": "正在处理…",
+    "promoted_by": "由 {{name}} 推广",
+    "promoted_empty_message": "有新的重点内容时，推广群组将显示在这里。",
+    "promoted_empty_title": "暂无推广群组",
+    "promote_dialog_fee": " 发布费用：{{fee}} QORT。",
+    "promote_dialog_intro": "为您管理的一个群组分享简短的亮点更新。",
+    "promote_group": "推广群组",
+    "promote_page_title": "推广您的其中一个群组",
+    "promotion_published": "群组推广已发布。",
+    "promotion_placeholder": "为此群组写一段简短的推广文案。",
+    "public_group": "公开群组",
+    "refresh": "刷新",
+    "reject": "拒绝",
+    "request_access": "请求加入",
+    "request_approved": "{{requester}} 已获准加入 {{group}}。",
+    "request_removed": "请求已从此小部件中暂时移除。",
+    "request_sent": "请求已发送",
+    "requests_empty_description": "您所管理群组的加入请求将显示在这里。",
+    "requests_empty_title": "暂无待处理请求",
+    "select_admin_group": "选择您担任管理员的群组",
+    "tab_invites": "邀请",
+    "tab_notifications": "通知",
+    "tab_promoted": "推广",
+    "tab_requests": "请求",
+    "unknown": "未知",
+    "view_conversation": "查看对话",
+    "wants_to_join": "希望加入此群组。",
+    "you": "你",
+    "publish": "发布"
+  },
+  "subscription": {
+    "subscriptions": "订阅",
+    "tooltip_actions_needed_one": "{{title}} - 需处理 {{count}} 项",
+    "tooltip_actions_needed_other": "{{title}} - 需处理 {{count}} 项",
+    "relative_soon": "即将",
+    "relative_in_minutes_one": "{{count}} 分钟后",
+    "relative_in_minutes_other": "{{count}} 分钟后",
+    "relative_in_hours_one": "{{count}} 小时后",
+    "relative_in_hours_other": "{{count}} 小时后",
+    "relative_in_days_one": "{{count}} 天后",
+    "relative_in_days_other": "{{count}} 天后",
+    "relative_in_months_one": "{{count}} 个月后",
+    "relative_in_months_other": "{{count}} 个月后",
+    "row_fallback_title": "订阅",
+    "by_creator": "由 {{name}}",
+    "creator_fallback": "Qortal 创作者",
+    "price_line": "{{price}} QORT / {{interval}}",
+    "expires_suffix": " - 到期 {{time}}",
+    "status_due": "待付",
+    "status_active": "有效",
+    "status_owner": "所有者",
+    "managed_fallback": "托管订阅",
+    "members_one": "{{count}} 名成员",
+    "members_other": "{{count}} 名成员",
+    "join_requests_suffix_one": " - {{count}} 条加入申请",
+    "join_requests_suffix_other": " - {{count}} 条加入申请",
+    "re_encryption_suffix": " - 需要重新加密",
+    "actions_badge_one": "{{count}} 项操作",
+    "actions_badge_other": "{{count}} 项操作",
+    "loading": "正在加载订阅",
+    "section_needs_action": "需要处理",
+    "section_active": "进行中",
+    "open_subscriptions": "打开订阅",
+    "empty_title": "发现支持订阅的 Q-App",
+    "empty_body": "在支持订阅的 Q-App（例如 SubWire）中订阅创作者与社区。",
+    "open_subwire": "打开 SubWire",
+    "tab_subscriptions": "订阅",
+    "tab_subwire": "SubWire"
+  },
+  "group_invites": {
+    "empty_title": "没有邀请",
+    "empty_secondary_1": "你目前没有待处理的邀请，",
+    "empty_secondary_2": "请稍后再查看。",
+    "empty_tertiary_no_groups": "你还未加入任何群组。",
+    "cta_find_groups": "查找群组"
+  },
+  "group_join_requests": {
+    "empty_title": "没有加入申请",
+    "empty_secondary_1": "你目前没有待处理的申请",
+    "empty_secondary_2": "请稍后再查看。",
+    "empty_tertiary_no_admin_groups": "你还没有管理任何群组。"
+  },
   "advanced_options": "高级选项",
   "block_delay": {
     "minimum": "最小区块延迟",
@@ -72,6 +346,8 @@
     "generic": {
       "avatar_publish_fee": "发布头像需支付 {{ fee }}",
       "avatar_registered_name": "设置头像需先注册名称",
+      "add_new_key_option": "添加新密钥",
+      "add_new_key_sparingly": "请谨慎添加新密钥，以免增大群组密钥规模。",
       "admin_only": "仅显示你为管理员的群组",
       "already_in_group": "你已经在这个群组中！",
       "block_delay_minimum": "群组交易批准的最小区块延迟",
@@ -105,6 +381,7 @@
       "node_minting_key": "你已有该账户的铸币密钥与该节点绑定",
       "no_announcement": "暂无公告",
       "no_display": "无显示内容",
+      "no_description": "没有描述",
       "no_selection": "未选择任何群组",
       "not_part_group": "你不是该加密群组的成员。请等待管理员重新加密密钥",
       "only_encrypted": "只显示未加密消息",
@@ -170,5 +447,11 @@
       "user_joined": "用户成功加入！"
     }
   },
+  "context_menu": {
+    "mark_as_read": "标记为已读",
+    "mute_push_notifications": "静音推送通知",
+    "unmute_push_notifications": "取消静音推送通知",
+    "mark_all_read": "全部标为已读"
+  },
   "thread_posts": "新主题消息"
 }
diff --git a/src/i18n/locales/zh/node.json b/src/i18n/locales/zh/node.json
index 6e3fbdc5..fc629e5e 100644
--- a/src/i18n/locales/zh/node.json
+++ b/src/i18n/locales/zh/node.json
@@ -21,8 +21,8 @@
   },
   "steps": {
     "java": "已安装 Java",
-    "downloaded": "已下载核心",
-    "running": "核心正在运行"
+    "downloaded": "已下载 Core",
+    "running": "Core 正在运行"
   },
   "actions": {
     "finished": "已完成",
@@ -40,7 +40,8 @@
     "invalidKey": "无效的 API 密钥",
     "failed_stop": "无法停止 Core",
     "failed_bootstrap": "无法引导启动",
-    "failed_delete": "无法删除数据库"
+    "failed_delete": "无法删除数据库",
+    "failed_bootstrap_or_clear": "无法完成引导、清除链数据或启动 Core"
   },
   "status": {
     "complete": "完成",
@@ -49,7 +50,7 @@
     "error": "错误"
   },
   "recommendation": {
-    "title": "使用你的本地核心",
+    "title": "使用你的本地 Core",
     "description": "如果你愿意，你可以继续使用 public node，但我们强烈建议使用你的 local node 以获得最佳体验。 (如果你在没有连接的情况下尝试访问，你可以在无连接时继续使用 public。)",
     "subTitle": "使用本地节点的优点：",
     "point1": "完全去中心化访问",
@@ -63,7 +64,7 @@
     "resetDescription": "你的 API 密钥无效。点击重置以继续。"
   },
   "messages": {
-    "001": "正在启动核心...请稍候。",
+    "001": "正在启动 Core...请稍候。",
     "002": "错误：无法启动存储库",
     "003": "运行 Qortal Core 时出错",
     "004": "解压 Qortal Core 出错",
@@ -72,7 +73,7 @@
     "007": "下载 Java 出错。",
     "008": "解压 Java 出错",
     "009": "正在下载 Qortal Core...请稍候。",
-    "010": "错误：无法下载或安装核心"
+    "010": "错误：无法下载或安装 Core"
   },
   "url": {
     "title": "URL 无效",
@@ -81,7 +82,12 @@
   "confirmations": {
     "stop": "确定要停止 Core 吗？",
     "bootstrap": "确定要引导启动吗？",
-    "delete": "确定要删除数据库吗？"
+    "delete": "确定要删除数据库吗？",
+    "bootstrapOrClearChain": "当 Core 在本地运行时，从快照执行引导。若无法执行或引导失败，可能会删除本地链数据库并重新启动 Core；钱包文件不会被改动。是否继续？"
+  },
+  "bootstrapChainHelp": {
+    "title": "链引导",
+    "body": "一项操作：在 Core 可用时从快照引导；若无法引导，则清除本地链数据库并再次启动 Core。钱包单独保存。"
   },
   "stop": "停止 Core",
   "bootstrap": "引导启动",
@@ -89,6 +95,53 @@
   "more": "更多选项",
   "less": "更少选项",
   "enableAuthWhenSyncing": "同步时启用身份验证",
+  "coreSetupDialog": {
+    "title": "设置 Qortal Core",
+    "introTitle": "在本地运行您自己的节点。",
+    "introSubtitle": "在 Core 启动并同步时，您可以使用公共节点。",
+    "publicNodeUnavailable": "公共节点当前不可用。请在本地 Core 启动并同步时保持此界面打开。",
+    "steps": {
+      "downloadDone": "已下载 Core",
+      "downloadActive": "正在下载 Core",
+      "downloadIdle": "下载 Core",
+      "runningDone": "Core 运行中",
+      "runningActive": "正在启动 Core",
+      "runningIdle": "启动 Core"
+    },
+    "readyToDownload": "准备下载",
+    "readyToStart": "准备启动",
+    "syncing": "同步中",
+    "helpers": {
+      "downloadDone": "Core 文件已安装并就绪。",
+      "downloadActive": "正在下载并准备 Qortal Core。",
+      "downloadIdle": "下载 Qortal Core 以运行您自己的节点。",
+      "runningDoneSyncing": "Core 正在运行并同步区块链数据。",
+      "runningDone": "Core 在本地运行中。",
+      "runningWaiting": "Core 将在后台启动并开始同步。",
+      "runningBlocked": "在下载 Core 后可用。"
+    },
+    "nextStepPill": "下一步",
+    "locationTitle": "Core 位置",
+    "locationCustom": "Qortal Core 将从此文件夹运行。",
+    "locationDefault": "Qortal Core 将使用此系统的默认文件夹。",
+    "locationPathDefault": "默认 Qortal Core 位置",
+    "change": "更改",
+    "choose": "选择",
+    "clear": "清除",
+    "advancedTitle": "高级",
+    "advancedSubtitle": "适用于 Core 的高级工具与选项。",
+    "maintenanceUnavailable": "在 Core 启动或同步期间，Core 维护工具不可用。",
+    "stopCoreTitle": "停止 Core",
+    "stopCoreBody": "停止本地 Core 进程。",
+    "stopButton": "停止",
+    "cancel": "取消",
+    "actionDownload": "下载 Core",
+    "actionStart": "启动 Core",
+    "actionDone": "完成",
+    "confirmTitle": "确认操作",
+    "folderCopied": "已复制 Core 文件夹",
+    "progressAriaLabel": "{{label}} 进度"
+  },
   "NotFullyStarted": {
     "titleNotReady": "Core 尚未完全启动",
     "descNotReady": "Qortal Core 尚未完全启动。请稍候。",
diff --git a/src/i18n/locales/zh/question.json b/src/i18n/locales/zh/question.json
index 2ce38778..550efed4 100644
--- a/src/i18n/locales/zh/question.json
+++ b/src/i18n/locales/zh/question.json
@@ -152,8 +152,12 @@
     "invite": "是否允许该应用邀请 {{ invitee }}？",
     "kick": "是否允许该应用将 {{ partecipant }} 从群组中移除？",
     "leave_group": "是否允许该应用退出以下群组？",
-    "list_hosted_data": "是否允许该应用获取您托管的数据列表？",
-    "order_detail": "{{ qort_amount }} QORT 兑换 {{ foreign_amount }} {{ ticker }}",
+      "list_hosted_data": "是否允许该应用获取您托管的数据列表？",
+      "notification": "是否允许此应用向你发送 Hub 通知？",
+      "notification_allow": "允许",
+      "notification_dont_allow": "不允许",
+      "notification_title": "{{ appName }} 通知",
+      "order_detail": "{{ qort_amount }} QORT 兑换 {{ foreign_amount }} {{ ticker }}",
     "pay_publish": "是否允许该应用执行以下付款和发布？",
     "perform_admin_action_with_value": "值：{{ value }}",
     "perform_admin_action": "是否允许该应用执行管理员操作：{{ type }}？",
diff --git a/src/i18n/locales/zh/tutorial.json b/src/i18n/locales/zh/tutorial.json
index 80d188d2..63f426d4 100644
--- a/src/i18n/locales/zh/tutorial.json
+++ b/src/i18n/locales/zh/tutorial.json
@@ -33,6 +33,7 @@
     "get_six_qorts_way3_action": "打开 Q-Trade",
     "register_name": "注册您的名称",
     "confirming_transaction": "确认交易中",
+    "confirming": "确认中…",
     "load_avatar": "加载头像",
     "explore_apps": "探索精选应用",
     "done": "完成",
@@ -53,6 +54,17 @@
     "devnet_testing_desc": "在DevNet-Testing环境中测试您的Q-Apps",
     "open_app": "打开",
     "address_copied": "地址已复制到剪贴板",
-    "group_activity": "群组动态"
+    "group_activity": "群组动态",
+    "get_qorts_workspace_hint": "解锁你的前 6 个 QORT 以启用其余设置。",
+    "register_name_workspace_hint": "注册姓名后，此账户会变成可识别的身份。",
+    "load_avatar_workspace_hint": "给仪表板一张脸，让整个空间开始有你的感觉。",
+    "onboarding_transition_hard_part_done": "做得很好。最难的部分已经过去了。",
+    "onboarding_transition_one_more": "很棒。再走一步就完成了。",
+    "onboarding_press_next_when_ready": "做得很好。最难的部分已经过去了。准备好了请按下一步。",
+    "register_name_pending_hint": "正在链上保存姓名，这可能需要一点时间。",
+    "persistent_guide_get_qorts": "先从 6 个 QORT 开始。任选上方的一种方式。",
+    "persistent_guide_register_name": "接下来注册你的名字。",
+    "persistent_guide_load_avatar": "最后上传你的头像。",
+    "post_onboarding_workspace_ready": "全部就绪。你可以开始在上方搭建工作区。"
   }
 }
diff --git a/src/i18n/processors.ts b/src/i18n/processors.ts
index d7ae34c9..1d998a2e 100644
--- a/src/i18n/processors.ts
+++ b/src/i18n/processors.ts
@@ -52,3 +52,42 @@ export const capitalizeFirstWord = {
     return firstWord.toUpperCase() + restOfString + trailingSpaces;
   },
 };
+
+/**
+ * Uppercases the first Unicode letter of the string, then the first letter after
+ * each sentence break: . / ! / ? (possibly repeated, e.g. ?!) followed by whitespace,
+ * and the first letter after one or more newlines (for paragraph breaks without prior punctuation).
+ * Does not lowercase the rest of the string (unlike capitalizeEachFirstChar).
+ *
+ * Note: Abbreviations like "e.g. " can still trigger capitalization of the following word.
+ */
+export const capitalizeSentenceStarts = {
+  type: 'postProcessor',
+  name: 'capitalizeSentenceStarts',
+  process: (value: string) => {
+    if (value == null || value === '') return value;
+
+    // First letter of the whole string (skip leading whitespace).
+    let result = value.replace(
+      /^(\s*)(\p{L})/u,
+      (_, leading: string, letter: string) =>
+        leading + letter.toLocaleUpperCase()
+    );
+
+    // After sentence punctuation + whitespace (includes \n, so ".\nWord" works).
+    result = result.replace(
+      /([.!?]+)(\s+)(\p{L})/gu,
+      (_, punct: string, space: string, letter: string) =>
+        punct + space + letter.toLocaleUpperCase()
+    );
+
+    // Line/paragraph break without ending .!? on the same fragment (e.g. "one\ntwo").
+    result = result.replace(
+      /(\n+)(\p{L})/gu,
+      (_: string, nl: string, letter: string) =>
+        nl + letter.toLocaleUpperCase()
+    );
+
+    return result;
+  },
+};
diff --git a/src/main.tsx b/src/main.tsx
index 0fe342ed..6ec1ac54 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,4 +1,5 @@
 import { createRoot } from 'react-dom/client';
+import './utils/configureDomPurify';
 import App from './App.tsx';
 import '../src/styles/index.css';
 import './messaging/MessagesToBackground.tsx';
@@ -6,7 +7,6 @@ import { MessageQueueProvider } from './messaging/MessageQueueContext.tsx';
 import { ThemeProvider } from './components/Theme/ThemeContext.tsx';
 import { CssBaseline } from '@mui/material';
 import './i18n/i18n.js';
-import { OnLaunchWrapper } from './OnLaunchWrapper.tsx';
 
 createRoot(document.getElementById('root')!).render(
   <>
diff --git a/src/messaging/MessagesToBackground.tsx b/src/messaging/MessagesToBackground.tsx
index a17a0e99..7e937a32 100644
--- a/src/messaging/MessagesToBackground.tsx
+++ b/src/messaging/MessagesToBackground.tsx
@@ -56,7 +56,7 @@ export const sendMessageBackground = async (
       callbackMap.delete(requestId);
       reject({
         error: 'timeout',
-        message: `Request timed out after ${timeout} ms`,
+        message: `Request timed out after ${timeout} ms (action: ${action})`,
       });
     }, timeout);
 
diff --git a/src/qortal/get.ts b/src/qortal/get.ts
index f5eebd68..41dcc63e 100644
--- a/src/qortal/get.ts
+++ b/src/qortal/get.ts
@@ -94,6 +94,7 @@ import {
 } from '../qdn/encryption/group-encryption.ts';
 import { publishData } from '../qdn/publish/publish.ts';
 import {
+  getNotificationPermissionKey,
   getPermission,
   isRunningGateway,
   setPermission,
@@ -120,6 +121,7 @@ import i18n from 'i18next';
 import aesjs from 'aes-js';
 import { roundUpToDecimals } from '../utils/numberFunctions.ts';
 import { normalizeFilename } from '../utils/downloadFromLocation.ts';
+import { getElectronPersistentStorage } from '../utils/electronPersistentStorage.ts';
 
 const uid = new ShortUniqueId({ length: 6 });
 
@@ -442,6 +444,7 @@ function getFileFromContentScript(fileId) {
 }
 
 const responseResolvers = new Map();
+const notificationPermissionResolvers = new Map();
 
 const handleMessage = (event) => {
   const { action, requestId, result } = event.data;
@@ -454,6 +457,12 @@ const handleMessage = (event) => {
     // Resolve the stored promise with the result
     responseResolvers.get(requestId)(result || false);
     responseResolvers.delete(requestId); // Clean up after resolving
+  } else if (
+    action === 'NOTIFICATION_PERMISSION_RESPONSE' &&
+    notificationPermissionResolvers.has(requestId)
+  ) {
+    notificationPermissionResolvers.get(requestId)(result || false);
+    notificationPermissionResolvers.delete(requestId);
   }
 };
 
@@ -578,6 +587,106 @@ export const getUserAccount = async ({
   }
 };
 
+export const getNotificationPermission = async ({
+  appInfo,
+  skipAuth,
+}) => {
+  try {
+    const stored =
+      (await getPermission(getNotificationPermissionKey(appInfo?.name))) ||
+      false;
+    let skip = !!stored || !!skipAuth;
+    let hadSessionPermissions = false;
+
+    if (
+      appInfo?.tabId &&
+      appInfo?.name &&
+      hasSessionPermission(
+        appInfo.tabId,
+        appInfo.name,
+        'NOTIFICATION_PERMISSION'
+      )
+    ) {
+      skip = true;
+      hadSessionPermissions = true;
+    }
+
+    let resPermission;
+    if (!skip) {
+      resPermission = await new Promise((resolve) => {
+        const requestId = `notificationPermission_${Date.now()}`;
+        notificationPermissionResolvers.set(requestId, resolve);
+        window.postMessage(
+          {
+            action: 'NOTIFICATION_PERMISSION_REQUEST',
+            requestId,
+            appInfo,
+            payload: {
+              text1: i18n.t('question:permission.notification', {
+                defaultValue: 'Allow this app to send you Hub notifications?',
+                postProcess: 'capitalizeFirstChar',
+              }),
+            },
+          },
+          window.location.origin
+        );
+        setTimeout(() => {
+          if (notificationPermissionResolvers.has(requestId)) {
+            notificationPermissionResolvers.get(requestId)(false);
+            notificationPermissionResolvers.delete(requestId);
+          }
+        }, TIME_MINUTES_1_IN_MILLISECONDS);
+      });
+    }
+
+    const { accepted = false } = resPermission || {};
+    if (resPermission && accepted) {
+      setPermission(getNotificationPermissionKey(appInfo?.name), true);
+    }
+    if (accepted || skip) {
+      if (!hadSessionPermissions && appInfo?.tabId && appInfo?.name) {
+        setSessionPermissions(appInfo.tabId, appInfo.name, [
+          'NOTIFICATION_PERMISSION',
+        ]);
+      }
+      return true;
+    }
+    throw new Error(
+      i18n.t('question:message.generic.user_declined_request', {
+        postProcess: 'capitalizeFirstChar',
+      })
+    );
+  } catch (error) {
+    throw new Error(
+      error?.message ||
+        i18n.t('auth:message.error.fetch_user_account', {
+          postProcess: 'capitalizeFirstChar',
+        })
+    );
+  }
+};
+
+export const notificationHasPermission = async ({
+  appInfo,
+  skipAuth,
+}: {
+  appInfo?: { name?: string; tabId?: number };
+  skipAuth?: boolean;
+}) => {
+  if (skipAuth) return true;
+  if (!appInfo?.name) return false;
+  const stored =
+    (await getPermission(getNotificationPermissionKey(appInfo.name))) === true;
+  const session =
+    appInfo.tabId != null &&
+    hasSessionPermission(
+      appInfo.tabId,
+      appInfo.name,
+      'NOTIFICATION_PERMISSION'
+    );
+  return stored || session;
+};
+
 export const sessionPermissions = async (data, isFromExtension, appInfo) => {
   try {
     const { permissions = [] } = data;
@@ -1516,6 +1625,18 @@ export const publishQDNResource = async (
       })
     );
   }
+
+   if (
+    typeof data.identifier === 'string' &&
+    data.identifier.trim().startsWith('symmetric-qchat-group-')
+  ) {
+    throw new Error(
+      i18n.t('group:message.generic.invalid_data', {
+        postProcess: 'capitalizeFirstChar',
+      })
+    );
+  }
+
   // Use "default" if user hasn't specified an identifier
   const service = data.service;
   const appFee = data?.appFee ? +data.appFee : undefined;
@@ -1822,6 +1943,21 @@ export const publishMultipleQDNResources = async (
       })
     );
   }
+
+  const FORBIDDEN_IDENTIFIER_PREFIX = 'symmetric-qchat-group-';
+  const hasForbiddenIdentifier = resources.some(
+    (resource) =>
+      typeof resource?.identifier === 'string' &&
+      resource.identifier.trim().startsWith(FORBIDDEN_IDENTIFIER_PREFIX)
+  );
+  if (hasForbiddenIdentifier) {
+    throw new Error(
+      i18n.t('group:message.generic.invalid_data', {
+        postProcess: 'capitalizeFirstChar',
+      })
+    );
+  }
+
   const isPublicNode = await isRunningGateway();
   if (isPublicNode) {
     const hasOversizedFilePublicNode = resources.some((resource) => {
@@ -1950,22 +2086,38 @@ export const publishMultipleQDNResources = async (
     hasAppFee = true;
   }
 
+
+  let paymentFeeAmount = 0;
   const handleDynamicValues = {};
   if (hasAppFee) {
     const feePayment = await getFee('PAYMENT');
+    paymentFeeAmount = +feePayment.fee;
 
-    (handleDynamicValues['appFee'] = +appFee + +feePayment.fee),
+    ((handleDynamicValues['appFee'] = +appFee + +feePayment.fee),
       (handleDynamicValues['checkbox1'] = {
         value: true,
         label: i18n.t('question:accept_app_fee', {
           postProcess: 'capitalizeFirstChar',
         }),
-      });
+      }));
   }
   if (data?.encrypt) {
     handleDynamicValues['highlightedText'] = `isEncrypted: ${!!data.encrypt}`;
   }
 
+  const totalRequiredQort =
+    resources.length * +fee.fee +
+    paymentFeeAmount +
+    (hasAppFee && appFee ? +appFee : 0);
+  const balance = await getBalanceInfo();
+  if (+balance < totalRequiredQort) {
+    throw new Error(
+      i18n.t('question:message.error.insufficient_balance_qort', {
+        postProcess: 'capitalizeFirstChar',
+      })
+    );
+  }
+
   // Check for session permission
   const hasPermission =
     appInfo?.tabId &&
@@ -4993,6 +5145,418 @@ export const getArrrSyncStatus = async () => {
   }
 };
 
+const CUSTOM_WS_SUBSCRIPTIONS_KEY = 'qortal_custom_ws_subscriptions';
+
+/** Current user address for address-scoped storage (set by app when user logs in). */
+function getCurrentAddress(): string | null {
+  if (typeof window === 'undefined') return null;
+  const w = window as Window & { __qortalCurrentAddress?: string | null };
+  return w.__qortalCurrentAddress ?? null;
+}
+
+function getAppStorage() {
+  if (typeof window === 'undefined') return undefined;
+  return (
+    window as {
+      appStorage?: {
+        get: (k: string) => Promise<unknown>;
+        set: (k: string, v: unknown) => Promise<void>;
+      };
+    }
+  ).appStorage;
+}
+
+function parseSubscriptionsRecord(value: unknown): Record<string, any[]> {
+  if (value != null && typeof value === 'object' && !Array.isArray(value))
+    return value as Record<string, any[]>;
+  if (Array.isArray(value)) return { __legacy: value };
+  return {};
+}
+
+async function getStoredCustomSubscriptions() {
+  const address = getCurrentAddress();
+  const appStorage = getAppStorage();
+  if (appStorage) {
+    try {
+      const value = await appStorage.get(CUSTOM_WS_SUBSCRIPTIONS_KEY);
+      const record = parseSubscriptionsRecord(value);
+      if (!address) return [];
+      return Array.isArray(record[address]) ? record[address] : [];
+    } catch (_) {
+      return [];
+    }
+  }
+  if (typeof localStorage === 'undefined') return [];
+  try {
+    const raw = localStorage.getItem(CUSTOM_WS_SUBSCRIPTIONS_KEY);
+    if (!raw) return [];
+    const value = JSON.parse(raw);
+    const record = parseSubscriptionsRecord(value);
+    if (!address) return [];
+    return Array.isArray(record[address]) ? record[address] : [];
+  } catch (_) {
+    return [];
+  }
+}
+
+async function setStoredCustomSubscriptions(list: any[]) {
+  const address = getCurrentAddress();
+  const appStorage = getAppStorage();
+  if (appStorage) {
+    try {
+      const value = await appStorage.get(CUSTOM_WS_SUBSCRIPTIONS_KEY);
+      const record = parseSubscriptionsRecord(value);
+      if (address) record[address] = list;
+      await appStorage.set(CUSTOM_WS_SUBSCRIPTIONS_KEY, record);
+    } catch (err) {
+      console.error(
+        '[get.ts] setStoredCustomSubscriptions appStorage failed:',
+        err
+      );
+    }
+  } else if (typeof localStorage !== 'undefined' && address) {
+    try {
+      const raw = localStorage.getItem(CUSTOM_WS_SUBSCRIPTIONS_KEY);
+      const record = parseSubscriptionsRecord(raw ? JSON.parse(raw) : null);
+      record[address] = list;
+      localStorage.setItem(CUSTOM_WS_SUBSCRIPTIONS_KEY, JSON.stringify(record));
+    } catch (err) {
+      console.error(
+        '[get.ts] setStoredCustomSubscriptions localStorage failed:',
+        err
+      );
+    }
+  }
+  executeEvent('custom-ws-subscriptions-updated', list);
+}
+
+/** Allowed filter keys and their types for notification subscription resourceFilter. */
+const NOTIFICATION_FILTER_SPEC = {
+  service: 'string',
+  query: 'string',
+  identifier: 'string',
+  names: 'arrayOfString',
+  title: 'string',
+  description: 'string',
+  keywords: 'arrayOfString',
+  prefix: 'boolean',
+  defaultResource: 'boolean',
+  followedOnly: 'boolean',
+  excludeBlocked: 'boolean',
+  after: 'long',
+  before: 'long',
+  mode: 'string', // ALL | ANY, internal
+};
+
+function validateNotificationFilters(filters) {
+  if (filters == null || typeof filters !== 'object') return;
+  for (const [key, value] of Object.entries(filters)) {
+    if (!(key in NOTIFICATION_FILTER_SPEC)) {
+      throw new Error(`Unknown filter key: "${key}"`);
+    }
+    if (value === undefined || value === null) continue;
+    const type = NOTIFICATION_FILTER_SPEC[key];
+    switch (type) {
+      case 'string':
+        if (typeof value !== 'string') {
+          throw new Error(`Filter "${key}" must be a string`);
+        }
+        break;
+      case 'arrayOfString':
+        if (!Array.isArray(value)) {
+          throw new Error(`Filter "${key}" must be an array of strings`);
+        }
+        if (value.some((v) => typeof v !== 'string')) {
+          throw new Error(`Filter "${key}" must be an array of strings`);
+        }
+        break;
+      case 'boolean':
+        if (typeof value !== 'boolean') {
+          throw new Error(`Filter "${key}" must be a boolean`);
+        }
+        break;
+      case 'integer':
+      case 'long':
+        if (typeof value !== 'number' || !Number.isInteger(value)) {
+          throw new Error(`Filter "${key}" must be an integer`);
+        }
+        break;
+      default:
+        break;
+    }
+  }
+}
+
+export const addNotificationSubscriptions = async (payload, appInfo) => {
+  if (
+    !appInfo?.tabId ||
+    !appInfo?.name ||
+    !hasSessionPermission(
+      appInfo.tabId,
+      appInfo.name,
+      'NOTIFICATION_PERMISSION'
+    )
+  ) {
+    throw new Error(
+      'Notification permission required. Call NOTIFICATION_PERMISSION first.'
+    );
+  }
+  const notifications = payload?.notifications;
+  if (!Array.isArray(notifications) || notifications.length === 0) {
+    throw new Error('notifications must be a non-empty array');
+  }
+  const appName = (appInfo?.name ?? '').toLowerCase();
+  const appService = appInfo?.service ?? 'APP';
+
+  const toSubscription = (item) => {
+    if (
+      !item ||
+      typeof item.notificationId !== 'string' ||
+      !item.notificationId.trim()
+    ) {
+      throw new Error('Each item must have a non-empty notificationId');
+    }
+    if (typeof item.link !== 'string' || !item.link.trim()) {
+      throw new Error('Each item must have a non-empty link');
+    }
+    const filters = item.filters;
+    if (!filters || typeof filters !== 'object') {
+      throw new Error('Each item must have filters (object)');
+    }
+    validateNotificationFilters(filters);
+    const message = item.message;
+    if (
+      !message ||
+      typeof message !== 'object' ||
+      typeof message.en !== 'string' ||
+      !message.en.trim()
+    ) {
+      throw new Error("Each item must have message with at least 'en'");
+    }
+    return {
+      event: 'RESOURCE_PUBLISHED',
+      resourceFilter: { ...filters, mode: filters.mode ?? 'ALL' },
+      image: typeof item.image === 'string' ? item.image : undefined,
+      link: item.link.trim(),
+      notificationId: item.notificationId.trim(),
+      appName,
+      appService,
+      message: { ...message },
+    };
+  };
+
+  const transformed = notifications.map(toSubscription);
+  const key = (sub) => `${sub.notificationId}-${sub.appName}-${sub.appService}`;
+  const current = await getStoredCustomSubscriptions();
+  const byKey = new Map(current.map((s) => [key(s), s]));
+  transformed.forEach((s) => byKey.set(key(s), s));
+  const merged = Array.from(byKey.values());
+  await setStoredCustomSubscriptions(merged);
+  return true;
+};
+
+export const removeNotificationSubscriptions = async (payload, appInfo) => {
+  const appName = (appInfo?.name ?? '').toLowerCase();
+  const appService = appInfo?.service ?? 'APP';
+  const notificationIds = payload?.notificationIds;
+  const idsSet =
+    Array.isArray(notificationIds) && notificationIds.length > 0
+      ? new Set(notificationIds.map((id) => String(id).trim()))
+      : null;
+
+  const current = await getStoredCustomSubscriptions();
+  const toUnsubscribe = [];
+  const filtered = current.filter((sub) => {
+    const sameApp =
+      (sub.appName ?? '').toLowerCase() === appName &&
+      (sub.appService ?? 'APP') === appService;
+    if (!sameApp) return true;
+    if (idsSet == null) {
+      toUnsubscribe.push({
+        notificationId: sub.notificationId ?? '',
+        appName: sub.appName ?? '',
+        appService: sub.appService ?? 'APP',
+      });
+      return false;
+    }
+    if (idsSet.has(sub.notificationId ?? '')) {
+      toUnsubscribe.push({
+        notificationId: sub.notificationId ?? '',
+        appName: sub.appName ?? '',
+        appService: sub.appService ?? 'APP',
+      });
+      return false;
+    }
+    return true;
+  });
+  await setStoredCustomSubscriptions(filtered);
+  if (toUnsubscribe.length > 0) {
+    executeEvent('custom-ws-unsubscribe', toUnsubscribe);
+  }
+  return true;
+};
+
+const NOTIFICATION_SEEN_IN_APP_KEY = 'qortal_notification_seen_in_app';
+const NOTIFICATION_SEEN_IN_APP_MAX_AGE_MS = 3 * 24 * 60 * 60 * 1000; // 3 days
+
+/** Stored shape: address -> notificationKey -> timestamp. Electron: appStorage (sync read from cache); else localStorage. */
+function getStoredSeenInAppRecord(): Record<string, Record<string, number>> {
+  const appStorage = getAppStorage();
+  const electronStorage = getElectronPersistentStorage();
+  let raw: string | null | unknown = null;
+  if (appStorage != null && electronStorage != null) {
+    raw = (electronStorage as any).getItem(NOTIFICATION_SEEN_IN_APP_KEY, null);
+  } else if (typeof localStorage !== 'undefined') {
+    raw = localStorage.getItem(NOTIFICATION_SEEN_IN_APP_KEY);
+  }
+  if (raw == null) return {};
+  try {
+    const parsed: unknown =
+      typeof raw === 'string' ? JSON.parse(raw) : raw;
+    if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+      return {};
+    }
+    const obj = parsed as Record<string, unknown>;
+    const cutoff = Date.now() - NOTIFICATION_SEEN_IN_APP_MAX_AGE_MS;
+    const result: Record<string, Record<string, number>> = {};
+    for (const [addr, inner] of Object.entries(obj)) {
+      if (inner && typeof inner === 'object' && !Array.isArray(inner)) {
+        const keyRecord: Record<string, number> = {};
+        for (const [k, t] of Object.entries(inner)) {
+          if (typeof t === 'number' && t > cutoff) keyRecord[k] = t;
+        }
+        if (Object.keys(keyRecord).length > 0) result[addr] = keyRecord;
+      }
+    }
+    return result;
+  } catch (_) {
+    return {};
+  }
+}
+
+function getStoredSeenInAppKeys(address: string | null): string[] {
+  if (!address) return [];
+  const record = getStoredSeenInAppRecord();
+  const byAddr = record[address] ?? {};
+  const cutoff = Date.now() - NOTIFICATION_SEEN_IN_APP_MAX_AGE_MS;
+  return Object.keys(byAddr).filter(
+    (k) => typeof byAddr[k] === 'number' && byAddr[k] > cutoff
+  );
+}
+
+function setStoredSeenInAppKeys(
+  address: string | null,
+  keys: string[]
+): string[] {
+  if (!address || keys.length === 0) return [];
+  const record = getStoredSeenInAppRecord();
+  const now = Date.now();
+  const cutoff = now - NOTIFICATION_SEEN_IN_APP_MAX_AGE_MS;
+  record[address] = record[address] ?? {};
+  for (const k of keys) record[address][k] = now;
+  const pruned: Record<string, Record<string, number>> = {};
+  for (const [addr, inner] of Object.entries(record)) {
+    const filtered = Object.fromEntries(
+      Object.entries(inner).filter(
+        ([, t]) => typeof t === 'number' && t > cutoff
+      )
+    );
+    if (Object.keys(filtered).length > 0) pruned[addr] = filtered;
+  }
+  const appStorage = getAppStorage();
+  const electronStorage = getElectronPersistentStorage();
+  if (appStorage != null && electronStorage != null) {
+    (electronStorage as any).setItem(NOTIFICATION_SEEN_IN_APP_KEY, pruned);
+    appStorage
+      .set(NOTIFICATION_SEEN_IN_APP_KEY, pruned)
+      .catch((err) =>
+        console.error('[get.ts] setStoredSeenInAppKeys appStorage failed:', err)
+      );
+  } else if (typeof localStorage !== 'undefined') {
+    localStorage.setItem(NOTIFICATION_SEEN_IN_APP_KEY, JSON.stringify(pruned));
+  }
+  const keysList = Object.keys(record[address] ?? {}).filter(
+    (k) => typeof record[address][k] === 'number' && record[address][k] > cutoff
+  );
+  executeEvent('notification-seen-in-app-updated', { address, keys: keysList });
+  return keysList;
+}
+
+/**
+ * Mark notifications as "seen in app" for the current address.
+ * Payload: { notificationIds: (string | { notificationId: string, identifier?: string })[] }.
+ * App name/service from appInfo.
+ * - String: add prefix key only (all with that notificationId).
+ * - Object with optional identifier: add prefix key; if identifier present, also add full key for that item.
+ */
+export const markNotificationSeenInApp = (payload, appInfo) => {
+  const notificationIds = payload?.notificationIds;
+  if (!Array.isArray(notificationIds) || notificationIds.length === 0) {
+    return [];
+  }
+  const address = getCurrentAddress();
+  if (!address) return [];
+  const appName = (appInfo?.name ?? '').toLowerCase();
+  const appService = appInfo?.service ?? 'APP';
+  const current = getStoredSeenInAppKeys(address);
+  const set = new Set(current);
+  notificationIds.forEach((item) => {
+    const notificationId =
+      typeof item === 'string'
+        ? String(item).trim()
+        : item && typeof item === 'object' && item.notificationId != null
+          ? String(item.notificationId).trim()
+          : '';
+    if (!notificationId) return;
+    const prefixKey = `RESOURCE_PUBLISHED-${appName}-${appService}-${notificationId}`;
+    const identifier =
+      item && typeof item === 'object' && item.identifier != null
+        ? String(item.identifier).trim()
+        : '';
+    if (identifier) {
+      set.add(`${prefixKey}-${identifier}`);
+    } else {
+      set.add(prefixKey);
+    }
+  });
+  const merged = Array.from(set);
+  return setStoredSeenInAppKeys(address, merged);
+};
+
+/** Returns notification rules for the app in the same format as NOTIFICATION_ADD (image, link, notificationId, message, filters). */
+export const getNotificationSubscriptions = async (_payload, appInfo) => {
+  const appName = (appInfo?.name ?? '').toLowerCase();
+  const appService = appInfo?.service ?? 'APP';
+  const current = await getStoredCustomSubscriptions();
+  const forApp = current.filter(
+    (sub) =>
+      (sub.appName ?? '').toLowerCase() === appName &&
+      (sub.appService ?? 'APP') === appService
+  );
+  return forApp.map((sub) => {
+    const rf = sub.resourceFilter ?? {};
+    const filters = {
+      service: typeof rf.service === 'string' ? rf.service : '',
+      identifier: typeof rf.identifier === 'string' ? rf.identifier : '',
+    };
+    if (typeof rf.name === 'string') filters.name = rf.name;
+    if (rf.excludeBlocked !== undefined)
+      filters.excludeBlocked = !!rf.excludeBlocked;
+    if (typeof rf.mode === 'string') filters.mode = rf.mode;
+    return {
+      image: typeof sub.image === 'string' ? sub.image : undefined,
+      link: typeof sub.link === 'string' ? sub.link : '',
+      notificationId:
+        typeof sub.notificationId === 'string' ? sub.notificationId : '',
+      message:
+        sub.message && typeof sub.message === 'object'
+          ? { ...sub.message }
+          : { en: '' },
+      filters,
+    };
+  });
+};
+
 export const sendCoin = async (data, isFromExtension) => {
   const requiredFields = ['coin', 'amount'];
   const missingFields: string[] = [];
@@ -6074,7 +6638,15 @@ export const openNewTab = async (data, isFromExtension) => {
           postProcess: 'capitalizeFirstChar',
         })
       );
-    executeEvent('addTab', { data: { service, name, identifier, path } });
+      executeEvent('addTab', {
+      data: {
+        service,
+        name,
+        identifier,
+        path,
+        ...(data.navigateIfAlreadyOpen && { navigateIfAlreadyOpen: true }),
+      },
+    });
     executeEvent('open-apps-mode', {});
     return true;
   } else {
diff --git a/src/qortal/qortal-requests.ts b/src/qortal/qortal-requests.ts
index b498f6a8..f39709e7 100644
--- a/src/qortal/qortal-requests.ts
+++ b/src/qortal/qortal-requests.ts
@@ -76,9 +76,16 @@ import {
   playEncryptedMedia,
   cleanupEncryptedMedia,
   cleanupEncryptedMediaByTabId,
+  addNotificationSubscriptions,
+  getNotificationPermission,
+  getNotificationSubscriptions,
+  markNotificationSeenInApp,
+  notificationHasPermission,
+  removeNotificationSubscriptions,
 } from './get.ts';
 import { getData, storeData } from '../utils/chromeStorage.ts';
 import { executeEvent } from '../utils/events.ts';
+import { triggerMemberGroupsFetch } from '../subscriptions/useInitializeMySubscriptions.ts';
 
 function getLocalStorage(key) {
   return getData(key).catch((error) => {
@@ -109,16 +116,96 @@ export const isRunningGateway = async () => {
   return isGateway;
 };
 
-export async function setPermission(key, value) {
-  try {
-    // Get the existing qortalRequestPermissions object
-    const qortalRequestPermissions =
-      (await getLocalStorage('qortalRequestPermissions')) || {};
+const getAppStorage = () =>
+  typeof window !== 'undefined' &&
+  (
+    window as {
+      appStorage?: {
+        get: (k: string) => Promise<unknown>;
+        set: (k: string, v: unknown) => Promise<void>;
+      };
+    }
+  ).appStorage;
+
+const NOTIFICATION_PERMISSION_PREFIX = 'qAPPNotification-';
 
-    // Update the permission
-    qortalRequestPermissions[key] = value;
+function normalizeNotificationPermissionAppName(appName: unknown): string {
+  return String(appName ?? '')
+    .trim()
+    .toLowerCase();
+}
+
+export function getNotificationPermissionKey(appName: unknown): string {
+  return `${NOTIFICATION_PERMISSION_PREFIX}${normalizeNotificationPermissionAppName(appName)}`;
+}
 
-    // Save the updated object back to storage
+function isNotificationPermissionKey(key: unknown): key is string {
+  return (
+    typeof key === 'string' && key.startsWith(NOTIFICATION_PERMISSION_PREFIX)
+  );
+}
+
+function normalizePermissionKey(key: unknown): string {
+  if (!isNotificationPermissionKey(key)) return String(key ?? '');
+  return getNotificationPermissionKey(
+    key.slice(NOTIFICATION_PERMISSION_PREFIX.length)
+  );
+}
+
+function migrateNotificationPermissionKeys(
+  permissions: Record<string, unknown>,
+  normalizedKey: string
+): Record<string, unknown> {
+  if (!isNotificationPermissionKey(normalizedKey)) return permissions;
+  const normalizedAppName = normalizeNotificationPermissionAppName(
+    normalizedKey.slice(NOTIFICATION_PERMISSION_PREFIX.length)
+  );
+  const next = { ...permissions };
+  for (const key of Object.keys(next)) {
+    if (!isNotificationPermissionKey(key)) continue;
+    const keyAppName = normalizeNotificationPermissionAppName(
+      key.slice(NOTIFICATION_PERMISSION_PREFIX.length)
+    );
+    if (keyAppName === normalizedAppName && key !== normalizedKey) {
+      delete next[key];
+    }
+  }
+  return next;
+}
+
+function toPermissionRecord(value: unknown): Record<string, unknown> {
+  return value && typeof value === 'object' && !Array.isArray(value)
+    ? (value as Record<string, unknown>)
+    : {};
+}
+
+export async function setPermission(key, value) {
+  try {
+    const normalizedKey = normalizePermissionKey(key);
+    const appStorage = getAppStorage();
+    if (appStorage) {
+      const rawPermissions = toPermissionRecord(
+        await appStorage.get('qortalRequestPermissions')
+      );
+      const qortalRequestPermissions = migrateNotificationPermissionKeys(
+        rawPermissions,
+        normalizedKey
+      );
+      qortalRequestPermissions[normalizedKey] = value;
+      await appStorage.set(
+        'qortalRequestPermissions',
+        qortalRequestPermissions
+      );
+      return;
+    }
+    const rawPermissions = toPermissionRecord(
+      await getLocalStorage('qortalRequestPermissions')
+    );
+    const qortalRequestPermissions = migrateNotificationPermissionKeys(
+      rawPermissions,
+      normalizedKey
+    );
+    qortalRequestPermissions[normalizedKey] = value;
     await setLocalStorage('qortalRequestPermissions', qortalRequestPermissions);
   } catch (error) {
     console.error('Error setting permission:', error);
@@ -127,18 +214,93 @@ export async function setPermission(key, value) {
 
 export async function getPermission(key) {
   try {
-    // Get the qortalRequestPermissions object from storage
-    const qortalRequestPermissions =
-      (await getLocalStorage('qortalRequestPermissions')) || {};
-
-    // Return the value for the given key, or null if it doesn't exist
-    return qortalRequestPermissions[key] || null;
+    const normalizedKey = normalizePermissionKey(key);
+    const appStorage = getAppStorage();
+    if (appStorage) {
+      const qortalRequestPermissions = toPermissionRecord(
+        await appStorage.get('qortalRequestPermissions')
+      );
+      return qortalRequestPermissions[normalizedKey] ?? null;
+    }
+    const qortalRequestPermissions = toPermissionRecord(
+      await getLocalStorage('qortalRequestPermissions')
+    );
+    return qortalRequestPermissions[normalizedKey] ?? null;
   } catch (error) {
     console.error('Error getting permission:', error);
     return null;
   }
 }
 
+/** Returns the full permissions object (for listing apps with notification permission). */
+export async function getQortalRequestPermissions() {
+  try {
+    const appStorage = getAppStorage();
+    if (appStorage) {
+      return (await appStorage.get('qortalRequestPermissions')) || {};
+    }
+    return (await getLocalStorage('qortalRequestPermissions')) || {};
+  } catch (error) {
+    console.error('Error getting permissions:', error);
+    return {};
+  }
+}
+
+/** App names that have qAPPNotification-<appName> === true. */
+export async function getAppsWithNotificationPermission() {
+  const perms = await getQortalRequestPermissions();
+  const apps = [];
+  for (const key of Object.keys(perms)) {
+    if (key.startsWith('qAPPNotification-') && perms[key] === true) {
+      apps.push(
+        normalizeNotificationPermissionAppName(
+          key.replace(/^qAPPNotification-/, '')
+        )
+      );
+    }
+  }
+  return apps;
+}
+
+const QORTAL_NOTIFICATION_OS_PUSH_DISABLED_KEY =
+  'qortalNotificationOsPushDisabled';
+
+/** Map of appName -> true if OS push is disabled for that app. */
+export async function getNotificationOsPushDisabledMap() {
+  try {
+    const appStorage = getAppStorage();
+    if (appStorage) {
+      const map =
+        (await appStorage.get(QORTAL_NOTIFICATION_OS_PUSH_DISABLED_KEY)) || {};
+      return typeof map === 'object' && !Array.isArray(map) ? map : {};
+    }
+    const raw = await getData(QORTAL_NOTIFICATION_OS_PUSH_DISABLED_KEY);
+    return raw && typeof raw === 'object' && !Array.isArray(raw) ? raw : {};
+  } catch {
+    return {};
+  }
+}
+
+export async function getNotificationOsPushDisabled(appName) {
+  const map = await getNotificationOsPushDisabledMap();
+  return map[appName] === true;
+}
+
+export async function setNotificationOsPushDisabled(appName, disabled) {
+  try {
+    const map = await getNotificationOsPushDisabledMap();
+    map[appName] = !!disabled;
+    const appStorage = getAppStorage();
+    if (appStorage) {
+      await appStorage.set(QORTAL_NOTIFICATION_OS_PUSH_DISABLED_KEY, map);
+      return;
+    }
+    await storeData(QORTAL_NOTIFICATION_OS_PUSH_DISABLED_KEY, map);
+  } catch (error) {
+    console.error('Error setting notification OS push disabled:', error);
+  }
+}
+
 // In-memory storage for session permissions
 const sessionPermissionsStore = new Map<
   string,
@@ -175,6 +337,7 @@ export const VALID_SESSION_PERMISSIONS = [
   'SIGN_FOREIGN_FEES',
   'REENCRYPT_GROUP_KEYS',
   'START_CROSSCHAIN_SERVER',
+  'NOTIFICATION_PERMISSION',
 ];
 
 // Permissions automatically granted for the session when GET_USER_ACCOUNT is accepted
@@ -331,6 +494,65 @@ function setupMessageListenerQortalRequest() {
         break;
       }
 
+      case 'NOTIFICATION_PERMISSION': {
+        try {
+          const res = await getNotificationPermission({
+            isFromExtension,
+            appInfo,
+            skipAuth,
+          });
+          event.source!.postMessage(
+            {
+              requestId: request.requestId,
+              action: request.action,
+              payload: res,
+              type: 'backgroundMessageResponse',
+            },
+            event.origin
+          );
+        } catch (error) {
+          event.source!.postMessage(
+            {
+              requestId: request.requestId,
+              action: request.action,
+              error: error?.message ?? 'Unable to get notification permission',
+              type: 'backgroundMessageResponse',
+            },
+            event.origin
+          );
+        }
+        break;
+      }
+
+      case 'NOTIFICATION_HAS_PERMISSION': {
+        try {
+          const res = await notificationHasPermission({
+            appInfo,
+            skipAuth,
+          });
+          event.source!.postMessage(
+            {
+              requestId: request.requestId,
+              action: request.action,
+              payload: res,
+              type: 'backgroundMessageResponse',
+            },
+            event.origin
+          );
+        } catch (error) {
+          event.source!.postMessage(
+            {
+              requestId: request.requestId,
+              action: request.action,
+              error: error?.message ?? 'Unable to read notification permission',
+              type: 'backgroundMessageResponse',
+            },
+            event.origin
+          );
+        }
+        break;
+      }
+
       case 'WHICH_UI': {
         try {
           const res = await getWhichUI();
@@ -1630,6 +1852,119 @@ function setupMessageListenerQortalRequest() {
         break;
       }
 
+      case 'NOTIFICATION_ADD': {
+        try {
+          const res = await addNotificationSubscriptions(
+            request.payload,
+            appInfo
+          );
+          event.source.postMessage(
+            {
+              requestId: request.requestId,
+              action: request.action,
+              payload: res,
+              type: 'backgroundMessageResponse',
+            },
+            event.origin
+          );
+        } catch (error) {
+          event.source.postMessage(
+            {
+              requestId: request.requestId,
+              action: request.action,
+              error: error?.message ?? 'NOTIFICATION_ADD failed',
+              type: 'backgroundMessageResponse',
+            },
+            event.origin
+          );
+        }
+        break;
+      }
+
+      case 'NOTIFICATION_GET': {
+        try {
+          const res = await getNotificationSubscriptions(
+            request.payload,
+            appInfo
+          );
+          event.source.postMessage(
+            {
+              requestId: request.requestId,
+              action: request.action,
+              payload: res,
+              type: 'backgroundMessageResponse',
+            },
+            event.origin
+          );
+        } catch (error) {
+          event.source.postMessage(
+            {
+              requestId: request.requestId,
+              action: request.action,
+              error: error?.message ?? 'NOTIFICATION_GET failed',
+              type: 'backgroundMessageResponse',
+            },
+            event.origin
+          );
+        }
+        break;
+      }
+
+      case 'NOTIFICATION_MARK_SEEN': {
+        try {
+          const res = await markNotificationSeenInApp(request.payload, appInfo);
+          event.source.postMessage(
+            {
+              requestId: request.requestId,
+              action: request.action,
+              payload: res,
+              type: 'backgroundMessageResponse',
+            },
+            event.origin
+          );
+        } catch (error) {
+          event.source.postMessage(
+            {
+              requestId: request.requestId,
+              action: request.action,
+              error: error?.message ?? 'NOTIFICATION_MARK_SEEN failed',
+              type: 'backgroundMessageResponse',
+            },
+            event.origin
+          );
+        }
+        break;
+      }
+
+      case 'NOTIFICATION_REMOVE': {
+        try {
+          const res = await removeNotificationSubscriptions(
+            request.payload,
+            appInfo
+          );
+          event.source.postMessage(
+            {
+              requestId: request.requestId,
+              action: request.action,
+              payload: res,
+              type: 'backgroundMessageResponse',
+            },
+            event.origin
+          );
+        } catch (error) {
+          event.source.postMessage(
+            {
+              requestId: request.requestId,
+              action: request.action,
+              error: error?.message ?? 'NOTIFICATION_REMOVE failed',
+              type: 'backgroundMessageResponse',
+            },
+            event.origin
+          );
+        }
+        break;
+      }
+
       case 'REGISTER_NAME': {
         try {
           const res = await registerNameRequest(
@@ -2001,6 +2336,37 @@ function setupMessageListenerQortalRequest() {
         break;
       }
 
+      case 'UPDATE_SUBSCRIPTIONS': {
+        try {
+          if (appInfo?.name?.toLowerCase() !== 'subscriptions') {
+            throw new Error(
+              'UPDATE_SUBSCRIPTIONS is only available to the Subscriptions app'
+            );
+          }
+          triggerMemberGroupsFetch();
+          event.source!.postMessage(
+            {
+              requestId: request.requestId,
+              action: request.action,
+              payload: { ok: true },
+              type: 'backgroundMessageResponse',
+            },
+            event.origin
+          );
+        } catch (error) {
+          event.source!.postMessage(
+            {
+              requestId: request.requestId,
+              action: request.action,
+              error: error?.message ?? 'Unable to update subscriptions',
+              type: 'backgroundMessageResponse',
+            },
+            event.origin
+          );
+        }
+        break;
+      }
+
       case 'GET_ARRR_SYNC_STATUS': {
         try {
           const res = await getArrrSyncStatus(request.payload);
diff --git a/src/styles/App-styles.ts b/src/styles/App-styles.ts
index 14a97614..3a6d2674 100644
--- a/src/styles/App-styles.ts
+++ b/src/styles/App-styles.ts
@@ -10,7 +10,7 @@ export const AppContainer = styled(Box)(({ theme }) => ({
   height: '100vh',
   overflow: 'hidden',
   radius: '15px',
-  width: '100vw',
+  width: '100%',
 }));
 
 export const AuthenticatedContainer = styled(Box)(({ theme }) => ({
diff --git a/src/styles/CoreSyncStatus.css b/src/styles/CoreSyncStatus.css
index 97b970bd..c997d7f2 100644
--- a/src/styles/CoreSyncStatus.css
+++ b/src/styles/CoreSyncStatus.css
@@ -24,6 +24,7 @@
   transition: opacity 0.2s;
   visibility: hidden;
   z-index: 99999999;
+  pointer-events: none;
 }
 
 .tooltip[data-theme='light'] .core-panel {
diff --git a/src/styles/blueMaterial.ts b/src/styles/blueMaterial.ts
new file mode 100644
index 00000000..ed54f27d
--- /dev/null
+++ b/src/styles/blueMaterial.ts
@@ -0,0 +1,251 @@
+import { alpha, type Theme } from '@mui/material/styles';
+
+export const APP_BLUE = {
+  primary: '#84AFF0',
+  hover: '#6FA3F0',
+  pressed: '#5A8FE0',
+  soft: 'rgba(132, 175, 240, 0.12)',
+  glow: 'rgba(132, 175, 240, 0.25)',
+  gradientTop: '#8FB8F3',
+  gradientMid: '#79AAF0',
+  gradientBottom: '#6FA3F0',
+  gradientHoverTop: '#98BFF6',
+  gradientHoverMid: '#83B1F3',
+  gradientHoverBottom: '#76A7F1',
+  gradientPressedTop: '#7FAEF0',
+  gradientPressedBottom: '#6F9FE7',
+} as const;
+
+export const APP_BLUE_SURFACE_TEXT = 'rgba(10, 18, 30, 0.92)';
+
+type AmbientIntensity = 'soft' | 'medium' | 'strong';
+
+const getAmbientStrength = (intensity: AmbientIntensity) => {
+  if (intensity === 'strong') {
+    return {
+      halo: 0.17,
+      shoulder: 0.18,
+      core: 0.52,
+      field: 0.072,
+      line: 0.11,
+    };
+  }
+
+  if (intensity === 'medium') {
+    return {
+      halo: 0.12,
+      shoulder: 0.14,
+      core: 0.42,
+      field: 0.056,
+      line: 0.082,
+    };
+  }
+
+  return {
+    halo: 0.09,
+    shoulder: 0.1,
+    core: 0.3,
+    field: 0.042,
+    line: 0.06,
+  };
+};
+
+export const getBlueTier1Gradient = (
+  state: 'base' | 'hover' | 'pressed' = 'base'
+) => {
+  if (state === 'hover') {
+    return `linear-gradient(180deg, ${APP_BLUE.gradientHoverTop} 0%, ${APP_BLUE.gradientHoverMid} 42%, ${APP_BLUE.gradientHoverBottom} 100%)`;
+  }
+
+  if (state === 'pressed') {
+    return `linear-gradient(180deg, ${APP_BLUE.gradientPressedTop} 0%, ${APP_BLUE.gradientPressedBottom} 100%)`;
+  }
+
+  return `linear-gradient(180deg, ${APP_BLUE.gradientTop} 0%, ${APP_BLUE.gradientMid} 42%, ${APP_BLUE.gradientBottom} 100%)`;
+};
+
+export const getBlueTier1Shadow = (
+  state: 'base' | 'hover' | 'pressed' = 'base'
+) => {
+  if (state === 'hover') {
+    return '0 8px 22px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.04) inset, 0 0 22px rgba(132, 175, 240, 0.22)';
+  }
+
+  if (state === 'pressed') {
+    return '0 4px 12px rgba(0, 0, 0, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.02) inset, 0 0 12px rgba(132, 175, 240, 0.14)';
+  }
+
+  return '0 6px 18px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 0 18px rgba(132, 175, 240, 0.18)';
+};
+
+export const getBlueTier1ButtonSx = () => ({
+  appearance: 'none',
+  background: getBlueTier1Gradient('base'),
+  border: '1px solid rgba(143, 184, 243, 0.22)',
+  boxShadow: getBlueTier1Shadow('base'),
+  color: APP_BLUE_SURFACE_TEXT,
+  '&:hover': {
+    background: getBlueTier1Gradient('hover'),
+    boxShadow: getBlueTier1Shadow('hover'),
+    filter: 'saturate(1.02)',
+  },
+  '&:active': {
+    background: getBlueTier1Gradient('pressed'),
+    boxShadow: getBlueTier1Shadow('pressed'),
+    transform: 'translateY(1px)',
+  },
+  '&:focus-visible': {
+    boxShadow:
+      '0 0 0 2px rgba(132, 175, 240, 0.28), 0 6px 18px rgba(0, 0, 0, 0.28), 0 0 18px rgba(132, 175, 240, 0.18)',
+    outline: 'none',
+  },
+});
+
+export const getBlueTier1PillSurface = (theme: Theme) => ({
+  background:
+    theme.palette.mode === 'dark'
+      ? `linear-gradient(180deg, ${alpha(APP_BLUE.gradientTop, 0.96)} 0%, ${alpha(
+          APP_BLUE.gradientMid,
+          0.92
+        )} 42%, ${alpha(APP_BLUE.gradientBottom, 0.88)} 100%)`
+      : `linear-gradient(180deg, ${alpha(APP_BLUE.gradientTop, 0.92)} 0%, ${alpha(
+          APP_BLUE.gradientMid,
+          0.88
+        )} 42%, ${alpha(APP_BLUE.gradientBottom, 0.84)} 100%)`,
+  boxShadow:
+    '0 4px 14px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.045) inset, 0 0 12px rgba(132, 175, 240, 0.13)',
+});
+
+export const getBlueTier2BadgeSx = (theme: Theme, active = false) => ({
+  background: active
+    ? `linear-gradient(180deg, ${alpha(APP_BLUE.hover, 0.84)} 0%, ${alpha(
+        APP_BLUE.pressed,
+        0.94
+      )} 100%)`
+    : `linear-gradient(180deg, ${alpha(
+        APP_BLUE.gradientTop,
+        theme.palette.mode === 'dark' ? 0.34 : 0.26
+      )} 0%, ${alpha(
+        APP_BLUE.gradientBottom,
+        theme.palette.mode === 'dark' ? 0.22 : 0.18
+      )} 100%)`,
+  border: `1px solid ${
+    active
+      ? alpha(APP_BLUE.gradientTop, theme.palette.mode === 'dark' ? 0.26 : 0.22)
+      : alpha(APP_BLUE.gradientTop, theme.palette.mode === 'dark' ? 0.22 : 0.17)
+  }`,
+  boxShadow: active
+    ? '0 3px 10px rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(255, 255, 255, 0.03) inset, 0 0 10px rgba(132, 175, 240, 0.12)'
+    : `0 0 0 1px rgba(255, 255, 255, ${
+        theme.palette.mode === 'dark' ? 0.03 : 0.02
+      }) inset, 0 0 8px rgba(132, 175, 240, ${
+        theme.palette.mode === 'dark' ? 0.06 : 0.04
+      })`,
+});
+
+export const getBlueTier3DotSx = (theme: Theme, filled: boolean) =>
+  filled
+    ? {
+        background: `linear-gradient(180deg, ${alpha(APP_BLUE.gradientTop, 0.9)} 0%, ${alpha(
+          APP_BLUE.gradientBottom,
+          0.82
+        )} 100%)`,
+        boxShadow: `0 0 0 1px ${alpha(APP_BLUE.gradientTop, 0.18)}, 0 0 10px ${alpha(
+          APP_BLUE.primary,
+          theme.palette.mode === 'dark' ? 0.12 : 0.08
+        )}`,
+      }
+    : {
+        background:
+          theme.palette.mode === 'dark'
+            ? 'rgba(255,255,255,0.06)'
+            : 'rgba(27,29,36,0.08)',
+        boxShadow: 'none',
+      };
+
+export const getBlueTier3StepperState = (
+  isDarkMode: boolean,
+  status: 'inactive' | 'active' | 'complete'
+) => {
+  if (status === 'inactive') {
+    return {
+      background:
+        isDarkMode ? 'rgba(255,255,255,0.06)' : 'rgba(27,29,36,0.08)',
+      borderColor:
+        isDarkMode ? 'rgba(255,255,255,0.16)' : 'rgba(27,29,36,0.14)',
+      boxShadow: 'none',
+      scale: 1,
+    };
+  }
+
+  if (status === 'complete') {
+    return {
+      background: `linear-gradient(180deg, ${alpha(APP_BLUE.hover, 0.82)} 0%, ${alpha(
+        APP_BLUE.pressed,
+        0.88
+      )} 100%)`,
+      borderColor: alpha(APP_BLUE.gradientTop, 0.28),
+      boxShadow: '0 0 0 1px rgba(255,255,255,0.02) inset',
+      scale: 1,
+    };
+  }
+
+  return {
+    background: getBlueTier1Gradient('base'),
+    borderColor: alpha(APP_BLUE.gradientTop, 0.28),
+    boxShadow: isDarkMode
+      ? '0 0 0 1px rgba(143,184,243,0.22), 0 0 12px rgba(132,175,240,0.16)'
+      : '0 0 0 1px rgba(143,184,243,0.18), 0 0 8px rgba(132,175,240,0.1)',
+    scale: 1,
+  };
+};
+
+export const getBlueTier3ProgressBackground = () =>
+  `linear-gradient(90deg, ${APP_BLUE.gradientTop} 0%, ${APP_BLUE.primary} 58%, ${APP_BLUE.hover} 100%)`;
+
+export const getBlueAmbientSeamBackground = (
+  theme: Theme,
+  intensity: AmbientIntensity = 'medium'
+) => {
+  const strength = getAmbientStrength(intensity);
+
+  if (theme.palette.mode === 'dark') {
+    return `linear-gradient(90deg, transparent 0%, rgba(60, 76, 90, 0) 12%, rgba(60, 76, 90, ${strength.shoulder * 0.72}) 26%, rgba(132, 175, 240, ${strength.shoulder}) 40%, rgba(132, 175, 240, ${strength.core * 0.82}) 46%, rgba(132, 175, 240, ${strength.core}) 50%, rgba(132, 175, 240, ${strength.core * 0.82}) 54%, rgba(132, 175, 240, ${strength.shoulder}) 60%, rgba(60, 76, 90, ${strength.shoulder * 0.72}) 74%, rgba(60, 76, 90, 0) 88%, transparent 100%), radial-gradient(92% 92% at 50% 100%, rgba(132, 175, 240, ${strength.halo}) 0%, rgba(132, 175, 240, ${strength.halo * 0.56}) 30%, rgba(14, 15, 20, 0.032) 52%, transparent 76%)`;
+  }
+
+  return `linear-gradient(90deg, transparent 0%, rgba(60, 76, 90, 0) 12%, rgba(60, 76, 90, ${strength.shoulder * 0.44}) 26%, rgba(132, 175, 240, ${strength.shoulder * 0.52}) 44%, rgba(132, 175, 240, ${strength.core * 0.38}) 50%, rgba(132, 175, 240, ${strength.shoulder * 0.52}) 56%, rgba(60, 76, 90, ${strength.shoulder * 0.44}) 74%, rgba(60, 76, 90, 0) 88%, transparent 100%), radial-gradient(92% 92% at 50% 100%, rgba(132, 175, 240, ${strength.halo * 0.5}) 0%, rgba(132, 175, 240, ${strength.halo * 0.24}) 30%, rgba(14, 15, 20, 0.014) 52%, transparent 76%)`;
+};
+
+export const getBlueAmbientFieldBackground = (
+  theme: Theme,
+  intensity: AmbientIntensity = 'soft'
+) => {
+  const strength = getAmbientStrength(intensity);
+
+  if (theme.palette.mode === 'dark') {
+    return `radial-gradient(88% 140% at 50% 0%, rgba(132, 175, 240, ${strength.field}) 0%, rgba(132, 175, 240, ${strength.field * 0.54}) 26%, rgba(14, 15, 20, 0.022) 56%, transparent 82%), linear-gradient(90deg, transparent 0%, rgba(132, 175, 240, ${strength.field * 0.18}) 18%, rgba(132, 175, 240, ${strength.field * 0.5}) 50%, rgba(132, 175, 240, ${strength.field * 0.18}) 82%, transparent 100%)`;
+  }
+
+  return `radial-gradient(88% 140% at 50% 0%, rgba(132, 175, 240, ${strength.field * 0.62}) 0%, rgba(132, 175, 240, ${strength.field * 0.34}) 26%, rgba(14, 15, 20, 0.014) 56%, transparent 82%), linear-gradient(90deg, transparent 0%, rgba(132, 175, 240, ${strength.field * 0.12}) 18%, rgba(132, 175, 240, ${strength.field * 0.34}) 50%, rgba(132, 175, 240, ${strength.field * 0.12}) 82%, transparent 100%)`;
+};
+
+export const getBlueAmbientLineBackground = (
+  theme: Theme,
+  intensity: AmbientIntensity = 'soft'
+) => {
+  const strength = getAmbientStrength(intensity);
+
+  if (theme.palette.mode === 'dark') {
+    return `linear-gradient(90deg, transparent 0%, rgba(60,76,90,0.02) 10%, rgba(60,76,90,0.07) 24%, rgba(132,175,240,${strength.line}) 50%, rgba(60,76,90,0.07) 76%, rgba(60,76,90,0.02) 90%, transparent 100%)`;
+  }
+
+  return `linear-gradient(90deg, transparent 0%, rgba(60,76,90,0.015) 10%, rgba(60,76,90,0.05) 24%, rgba(132,175,240,${strength.line * 0.72}) 50%, rgba(60,76,90,0.05) 76%, rgba(60,76,90,0.015) 90%, transparent 100%)`;
+};
+
+export const getBlueAmbientPillGlowBackground = (theme: Theme) => {
+  if (theme.palette.mode === 'dark') {
+    return 'radial-gradient(58% 136% at 50% 50%, rgba(132,175,240,0.096) 0%, rgba(132,175,240,0.058) 22%, rgba(132,175,240,0.026) 44%, rgba(14,15,20,0.01) 72%, transparent 100%)';
+  }
+
+  return 'radial-gradient(58% 136% at 50% 50%, rgba(132,175,240,0.06) 0%, rgba(132,175,240,0.034) 22%, rgba(132,175,240,0.015) 44%, rgba(255,255,255,0.006) 72%, transparent 100%)';
+};
diff --git a/src/styles/index.css b/src/styles/index.css
index ad9124c9..730a80a4 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -2,21 +2,36 @@
   font-family: 'Inter';
   src: url('./fonts/Inter-SemiBold.ttf') format('truetype');
   font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url('./fonts/Inter-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
 }
 @font-face {
   font-family: 'Inter';
   src: url('./fonts/Inter-ExtraBold.ttf') format('truetype');
   font-weight: 800;
+  font-style: normal;
+  font-display: swap;
 }
 @font-face {
   font-family: 'Inter';
   src: url('./fonts/Inter-Bold.ttf') format('truetype');
   font-weight: 700;
+  font-style: normal;
+  font-display: swap;
 }
 @font-face {
   font-family: 'Inter';
   src: url('./fonts/Inter-Regular.ttf') format('truetype');
   font-weight: 400;
+  font-style: normal;
+  font-display: swap;
 }
 
 /* * {    // TODO restore and check
diff --git a/src/styles/theme-common.ts b/src/styles/theme-common.ts
index 4d7cb581..c7082e46 100644
--- a/src/styles/theme-common.ts
+++ b/src/styles/theme-common.ts
@@ -1,4 +1,8 @@
 import { Theme } from '@mui/material/styles';
+import {
+  APP_BLUE_SURFACE_TEXT,
+  getBlueTier1ButtonSx,
+} from './blueMaterial';
 
 /**
  * Returns the common MuiCssBaseline global styles shared by both themes.
@@ -10,50 +14,66 @@ export const getCommonGlobalStyles = (theme: Theme) => ({
   },
 
   html: {
+    backgroundColor: theme.palette.background.default,
     padding: 0,
     margin: 0,
   },
 
   body: {
+    backgroundColor: theme.palette.background.default,
+    color: theme.palette.text.primary,
+    fontSynthesis: 'none',
     padding: 0,
     margin: 0,
+    textRendering: 'geometricPrecision',
+    WebkitFontSmoothing: 'antialiased',
+    MozOsxFontSmoothing: 'grayscale',
     wordBreak: 'break-word',
   },
 
   '::-webkit-scrollbar-track': {
-    backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.04)' : 'rgba(0, 0, 0, 0.04)',
+    backgroundColor: 'transparent',
   },
 
   '::-webkit-scrollbar-track:hover': {
-    backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.06)' : 'rgba(0, 0, 0, 0.06)',
+    backgroundColor: 'transparent',
   },
 
   '::-webkit-scrollbar': {
-    width: '10px',
-    height: '10px',
+    width: '8px',
+    height: '8px',
   },
 
   '::-webkit-scrollbar-thumb': {
-    backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.22)' : 'rgba(0, 0, 0, 0.2)',
-    borderRadius: '5px',
+    backgroundColor:
+      theme.palette.mode === 'dark'
+        ? 'rgba(255, 255, 255, 0.12)'
+        : 'rgba(0, 0, 0, 0.14)',
+    borderRadius: '999px',
     border: '2px solid transparent',
     backgroundClip: 'content-box',
     transition: 'background-color 0.2s ease',
   },
 
   '::-webkit-scrollbar-thumb:hover': {
-    backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.35)' : 'rgba(0, 0, 0, 0.3)',
+    backgroundColor:
+      theme.palette.mode === 'dark'
+        ? 'rgba(255, 255, 255, 0.18)'
+        : 'rgba(0, 0, 0, 0.2)',
   },
 
   '::-webkit-scrollbar-thumb:active': {
-    backgroundColor: theme.palette.mode === 'dark' ? 'rgba(255, 255, 255, 0.45)' : 'rgba(0, 0, 0, 0.4)',
+    backgroundColor:
+      theme.palette.mode === 'dark'
+        ? 'rgba(255, 255, 255, 0.24)'
+        : 'rgba(0, 0, 0, 0.26)',
   },
 });
 
 // Extend the Theme interface
 const commonThemeOptions = {
   typography: {
-    fontFamily: ['Inter'].join(','),
+    fontFamily: ['Inter', 'Segoe UI', 'ui-sans-serif', 'system-ui', 'sans-serif'].join(','),
     h1: {
       fontSize: '2rem',
       fontWeight: 600,
@@ -113,11 +133,16 @@ const commonThemeOptions = {
     MuiButton: {
       styleOverrides: {
         root: {
-          transition: 'filter 0.3s ease-in-out',
+          transition:
+            'background 180ms ease, box-shadow 180ms ease, border-color 180ms ease, color 180ms ease, filter 180ms ease, transform 180ms ease',
           '&:hover': {
-            filter: 'brightness(1.1)',
+            filter: 'none',
           },
         },
+        containedPrimary: {
+          ...getBlueTier1ButtonSx(),
+          color: APP_BLUE_SURFACE_TEXT,
+        },
       },
       defaultProps: {
         disableElevation: true,
diff --git a/src/styles/theme-dark.ts b/src/styles/theme-dark.ts
index 42df82a3..92183cbc 100644
--- a/src/styles/theme-dark.ts
+++ b/src/styles/theme-dark.ts
@@ -1,30 +1,39 @@
 import { createTheme, ThemeOptions } from '@mui/material/styles';
 import { commonThemeOptions, getCommonGlobalStyles } from './theme-common';
+import { APP_BLUE } from './blueMaterial';
 
 export const darkThemeOptions: ThemeOptions = {
   ...commonThemeOptions,
   palette: {
     mode: 'dark',
     primary: {
-      main: 'rgb(100, 155, 240)',
-      dark: 'rgb(45, 92, 201)',
-      light: 'rgb(130, 185, 255)',
+      main: APP_BLUE.primary,
+      dark: APP_BLUE.pressed,
+      light: APP_BLUE.gradientTop,
     },
     secondary: {
-      main: 'rgb(69, 173, 255)',
+      main: APP_BLUE.hover,
     },
     background: {
-      default: 'rgb(49, 51, 56)',
-      surface: 'rgb(58, 60, 65)',
-      paper: 'rgb(77, 80, 85)',
+      default: '#0E0F14',
+      surface: '#1B1D24',
+      paper: '#1D1F27',
+      elevated: '#23262F',
     },
     text: {
-      primary: 'rgb(255, 255, 255)',
-      secondary: 'rgb(179, 179, 179)',
+      primary: 'rgb(244, 247, 251)',
+      secondary: '#989BA7',
     },
+    divider: '#23262F',
     border: {
-      main: 'rgba(255, 255, 255, 0.12)',
-      subtle: 'rgba(255, 255, 255, 0.08)',
+      main: '#23262F',
+      subtle: '#23262F',
+    },
+    action: {
+      hover: '#23262F',
+      selected: '#262931',
+      focus: '#262931',
+      active: 'rgba(236, 243, 255, 0.86)',
     },
     other: {
       positive: 'rgb(94, 176, 73)',
@@ -37,13 +46,15 @@ export const darkThemeOptions: ThemeOptions = {
     MuiCard: {
       styleOverrides: {
         root: {
-          boxShadow: 'none',
+          boxShadow: '0 8px 18px rgba(0, 0, 0, 0.12)',
           borderRadius: '8px',
-          transition: 'all 0.3s ease-in-out',
+          border: '1px solid rgba(255, 255, 255, 0.1)',
+          transition:
+            'background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease',
           '&:hover': {
             cursor: 'pointer',
-            boxShadow:
-              ' 0px 3px 4px 0px hsla(0,0%,0%,0.14), 0px 3px 3px -2px hsla(0,0%,0%,0.12), 0px 1px 8px 0px hsla(0,0%,0%,0.2);',
+            borderColor: 'rgba(255, 255, 255, 0.2)',
+            boxShadow: '0 10px 20px rgba(0, 0, 0, 0.14)',
           },
         },
       },
@@ -52,18 +63,29 @@ export const darkThemeOptions: ThemeOptions = {
     MuiCssBaseline: {
       styleOverrides: (theme) => ({
         ':root': {
-          '--Mail-Background': 'rgba(6, 10, 30, 1)',
-          '--bg-primary': 'rgba(6, 10, 30, 1)',
-          '--bg-2': 'rgb(39, 40, 44)',
+          '--Mail-Background': '#0E0F14',
+          '--bg-primary': '#0E0F14',
+          '--bg-2': '#0E0F14',
           '--primary-main': theme.palette.primary.main,
           '--text-primary': theme.palette.text.primary,
           '--text-secondary': theme.palette.text.secondary,
           '--background-default': theme.palette.background.default,
           '--background-paper': theme.palette.background.paper,
           '--background-surface': theme.palette.background.surface,
-          '--videoplayer-bg': 'rgba(31, 32, 35, 1)',
+          '--background-elevated': theme.palette.background.elevated,
+          '--videoplayer-bg': 'rgb(18, 21, 27)',
         },
         ...getCommonGlobalStyles(theme),
+        html: {
+          backgroundColor: '#0E0F14',
+          backgroundImage: 'linear-gradient(180deg, #0E0F14 0%, #0E0F14 100%)',
+          backgroundRepeat: 'no-repeat',
+        },
+        body: {
+          backgroundColor: '#0E0F14',
+          backgroundImage: 'linear-gradient(180deg, #0E0F14 0%, #0E0F14 100%)',
+          backgroundRepeat: 'no-repeat',
+        },
       }),
     },
 
diff --git a/src/styles/theme-light.ts b/src/styles/theme-light.ts
index 58e6f706..f85e513e 100644
--- a/src/styles/theme-light.ts
+++ b/src/styles/theme-light.ts
@@ -1,30 +1,39 @@
 import { createTheme, ThemeOptions } from '@mui/material/styles';
 import { commonThemeOptions, getCommonGlobalStyles } from './theme-common';
+import { APP_BLUE } from './blueMaterial';
 
 export const lightThemeOptions: ThemeOptions = {
   ...commonThemeOptions,
   palette: {
     mode: 'light',
     primary: {
-      main: 'rgb(41, 121, 218)',
-      dark: 'rgb(80, 160, 180)',
-      light: 'rgb(150, 180, 220)',
+      main: APP_BLUE.primary,
+      dark: APP_BLUE.pressed,
+      light: APP_BLUE.gradientTop,
     },
     secondary: {
-      main: 'rgb(55, 145, 215)',
+      main: APP_BLUE.hover,
     },
     background: {
-      default: 'rgb(228, 230, 235)',
-      surface: 'rgb(218, 220, 226)',
-      paper: 'rgb(206, 209, 216)',
+      default: '#DDD6CA',
+      surface: '#EEE7DC',
+      paper: '#F6F2EA',
+      elevated: '#E2D9CB',
     },
     text: {
-      primary: 'rgba(0, 0, 0, 0.8)',
-      secondary: 'rgba(0, 0, 0, 0.55)',
+      primary: 'rgba(21, 26, 35, 0.94)',
+      secondary: 'rgba(88, 96, 110, 0.86)',
+    },
+    divider: 'rgba(28, 36, 52, 0.12)',
+    action: {
+      hover: 'rgba(28, 36, 52, 0.06)',
+      selected: 'rgba(41, 121, 218, 0.12)',
+      focus: 'rgba(41, 121, 218, 0.14)',
+      active: 'rgba(24, 29, 36, 0.86)',
     },
     border: {
-      main: 'rgba(0, 0, 0, 0.12)',
-      subtle: 'rgba(0, 0, 0, 0.08)',
+      main: 'rgba(28, 36, 52, 0.16)',
+      subtle: 'rgba(28, 36, 52, 0.11)',
     },
     other: {
       positive: 'rgb(94, 176, 73)',
@@ -38,13 +47,15 @@ export const lightThemeOptions: ThemeOptions = {
       styleOverrides: {
         root: {
           boxShadow:
-            'rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(230, 200, 200, 0.06) 0px 1px 2px 0px;',
+            '0 12px 28px rgba(44, 38, 28, 0.07)',
           borderRadius: '8px',
-          transition: 'all 0.3s ease-in-out',
+          border: '1px solid rgba(15, 23, 42, 0.1)',
+          transition:
+            'background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease',
           '&:hover': {
             cursor: 'pointer',
-            boxShadow:
-              'rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;',
+            borderColor: 'rgba(15, 23, 42, 0.14)',
+            boxShadow: '0 14px 30px rgba(44, 38, 28, 0.09)',
           },
         },
       },
@@ -53,18 +64,29 @@ export const lightThemeOptions: ThemeOptions = {
     MuiCssBaseline: {
       styleOverrides: (theme) => ({
         ':root': {
-          '--Mail-Background': 'rgb(228, 230, 235)',
-          '--bg-primary': 'rgb(218, 220, 226)',
-          '--bg-2': 'rgb(206, 209, 216)',
+          '--Mail-Background': '#DDD6CA',
+          '--bg-primary': '#DDD6CA',
+          '--bg-2': '#EEE7DC',
           '--primary-main': theme.palette.primary.main,
           '--text-primary': theme.palette.text.primary,
           '--text-secondary': theme.palette.text.secondary,
           '--background-default': theme.palette.background.default,
           '--background-paper': theme.palette.background.paper,
           '--background-surface': theme.palette.background.surface,
-          '--videoplayer-bg': 'rgb(218, 220, 226)',
+          '--background-elevated': theme.palette.background.elevated,
+          '--videoplayer-bg': 'rgb(226, 217, 203)',
         },
         ...getCommonGlobalStyles(theme),
+        html: {
+          backgroundColor: '#DDD6CA',
+          backgroundImage: 'linear-gradient(180deg, #EEE7DC 0%, #DDD6CA 100%)',
+          backgroundRepeat: 'no-repeat',
+        },
+        body: {
+          backgroundColor: '#DDD6CA',
+          backgroundImage: 'linear-gradient(180deg, #EEE7DC 0%, #DDD6CA 100%)',
+          backgroundRepeat: 'no-repeat',
+        },
       }),
     },
 
diff --git a/src/styles/theme.d.ts b/src/styles/theme.d.ts
index e10c5c14..c4d99f23 100644
--- a/src/styles/theme.d.ts
+++ b/src/styles/theme.d.ts
@@ -3,6 +3,7 @@ import '@mui/material/styles';
 declare module '@mui/material/styles' {
   interface TypeBackground {
     surface: string;
+    elevated: string;
   }
   interface Palette {
     border: {
diff --git a/src/subscriptions/useInitializeMySubscriptions.ts b/src/subscriptions/useInitializeMySubscriptions.ts
new file mode 100644
index 00000000..9395342a
--- /dev/null
+++ b/src/subscriptions/useInitializeMySubscriptions.ts
@@ -0,0 +1,125 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { getBaseApiReact } from '../App';
+import {
+  managedSubscriptionsAtom,
+  managedSubscriptionsLoadingAtom,
+  myMemberGroupsAtom,
+  myMemberGroupsLastFetchedAtom,
+  mySubscriptionsAtom,
+  subscriptionsLoadingAtom,
+  userInfoAtom,
+} from '../atoms/global';
+import { useManagedSubscriptionsFromGroups } from './useSubscriptionsFromManagedGroups';
+import { useSubscriptionsFromGroups } from './useSubscriptionsFromGroups';
+
+const MEMBER_GROUPS_INTERVAL_MS = 5 * 60 * 1000;
+
+let doFetchMemberGroups: (() => void) | null = null;
+
+export function triggerMemberGroupsFetch() {
+  doFetchMemberGroups?.();
+}
+
+export function clearMemberGroupsPolling() {
+  doFetchMemberGroups = null;
+}
+
+export function useInitializeMySubscriptions() {
+  const userInfo = useAtomValue(userInfoAtom);
+  const [myMemberGroups, setMyMemberGroups] = useAtom(myMemberGroupsAtom);
+  const [lastFetched, setLastFetched] = useAtom(myMemberGroupsLastFetchedAtom);
+  const setMySubscriptions = useSetAtom(mySubscriptionsAtom);
+  const setManagedSubscriptions = useSetAtom(managedSubscriptionsAtom);
+  const setSubscriptionsLoading = useSetAtom(subscriptionsLoadingAtom);
+  const setManagedSubscriptionsLoading = useSetAtom(
+    managedSubscriptionsLoadingAtom
+  );
+
+  const fetchRef = useRef({
+    address: userInfo?.address as string | undefined,
+    lastFetched,
+    setGroups: setMyMemberGroups,
+    setLastFetched,
+  });
+
+  useEffect(() => {
+    fetchRef.current = {
+      address: userInfo?.address,
+      lastFetched,
+      setGroups: setMyMemberGroups,
+      setLastFetched,
+    };
+  },[userInfo?.address, setMyMemberGroups, setLastFetched, lastFetched]);
+
+  useEffect(() => {
+    async function fetchMemberGroups() {
+      const { address, setGroups, setLastFetched: setTimestamp } =
+        fetchRef.current;
+      if (!address) return;
+
+      try {
+        const response = await fetch(`${getBaseApiReact()}/groups/member/${address}`);
+        if (!response.ok) return;
+        setGroups(await response.json());
+        setTimestamp(Date.now());
+      } catch {
+        // Keep the previous subscription snapshot when the node request fails.
+      }
+    }
+
+    doFetchMemberGroups = fetchMemberGroups;
+    const intervalId = window.setInterval(
+      fetchMemberGroups,
+      MEMBER_GROUPS_INTERVAL_MS
+    );
+
+    return () => {
+      window.clearInterval(intervalId);
+      clearMemberGroupsPolling();
+    };
+  }, []);
+
+  const address = userInfo?.address;
+  useEffect(() => {
+    if (!address) return;
+    if (Date.now() - fetchRef.current.lastFetched < MEMBER_GROUPS_INTERVAL_MS) {
+      return;
+    }
+    doFetchMemberGroups?.();
+  }, [address]);
+
+  const myMemberGroupsWhereAdmin = useMemo(
+    () => myMemberGroups.filter((group: any) => group?.isAdmin),
+    [myMemberGroups]
+  );
+
+  const { mySubscriptions, loading } = useSubscriptionsFromGroups(
+    userInfo?.address,
+    userInfo?.name,
+    myMemberGroups
+  );
+
+  const { managedSubscriptions, loading: managedLoading } =
+    useManagedSubscriptionsFromGroups(
+      userInfo?.address,
+      userInfo?.name,
+      myMemberGroupsWhereAdmin
+    );
+
+  useEffect(() => {
+    setMySubscriptions(mySubscriptions);
+  }, [mySubscriptions, setMySubscriptions]);
+
+  useEffect(() => {
+    setManagedSubscriptions(managedSubscriptions);
+  }, [managedSubscriptions, setManagedSubscriptions]);
+
+  useEffect(() => {
+    setSubscriptionsLoading(loading);
+  }, [loading, setSubscriptionsLoading]);
+
+  useEffect(() => {
+    setManagedSubscriptionsLoading(managedLoading);
+  }, [managedLoading, setManagedSubscriptionsLoading]);
+}
diff --git a/src/subscriptions/useSubscriptionsFromGroups.ts b/src/subscriptions/useSubscriptionsFromGroups.ts
new file mode 100644
index 00000000..0265b5cb
--- /dev/null
+++ b/src/subscriptions/useSubscriptionsFromGroups.ts
@@ -0,0 +1,385 @@
+import { Sha256 } from 'asmcrypto.js';
+import { useEffect, useRef, useState } from 'react';
+import { getBaseApiReact } from '../App';
+
+export const publicSaltSubscriptionApp =
+  'gnRp+Pao85XZlExcqynLS0+GaKCL3ia9E1sEm9XPaOA=';
+
+type BillingInterval = 'monthly';
+type GroupAccessType = 'private';
+
+export type SubscriptionGroupItem = {
+  groupId: number;
+  owner: string;
+  groupName: string;
+  description?: string;
+  created?: number;
+  isOpen?: boolean;
+  memberCount?: number;
+  ownerPrimaryName?: string;
+  isAdmin?: boolean;
+  [key: string]: unknown;
+};
+
+type SubscriptionFullDetails = {
+  schema: string;
+  subscriptionId: string;
+  ownerName: string;
+  ownerAddress?: string;
+  groupId: number;
+  groupAccess: GroupAccessType;
+  title: string;
+  description: string;
+  perks: string[];
+  tags?: string[];
+  createdAt: string;
+  amountQort?: string;
+  intervalDays?: number;
+  graceDays?: number;
+  states?: unknown[];
+  status?: 'active' | 'disabled';
+  disabledAt?: number;
+  disabledReason?: string;
+};
+
+export type MySubscription = {
+  id: string;
+  title: string;
+  ownerName: string;
+  groupInfo: SubscriptionGroupItem;
+  priceQort: number;
+  billingInterval: BillingInterval;
+  status: 'active' | 'payment-needed' | 'disabled';
+  nextPaymentDue: number | null;
+  link: string;
+};
+
+const AMOUNT_TOLERANCE = 0.00001;
+
+function bytesToBase64(bytes: Uint8Array | number[]) {
+  let binary = '';
+  const byteArray = bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes);
+  for (let index = 0; index < byteArray.length; index += 1) {
+    binary += String.fromCharCode(byteArray[index]);
+  }
+  return btoa(binary);
+}
+
+function getPaidIntervalsFromAmount(paidAmount: number, unitPrice: number) {
+  if (
+    !Number.isFinite(paidAmount) ||
+    !Number.isFinite(unitPrice) ||
+    unitPrice <= 0
+  ) {
+    return 0;
+  }
+  const raw = paidAmount / unitPrice;
+  if (!Number.isFinite(raw) || raw <= 0) return 0;
+  return Math.floor(raw + AMOUNT_TOLERANCE);
+}
+
+function isMultipleOfUnitPrice(paidAmount: number, unitPrice: number) {
+  const intervals = getPaidIntervalsFromAmount(paidAmount, unitPrice);
+  if (intervals < 1) return false;
+  return Math.abs(paidAmount - unitPrice * intervals) <= AMOUNT_TOLERANCE;
+}
+
+export function getSubscriptionIdForGroup(groupId: number) {
+  return `subscription-${groupId}`;
+}
+
+const safeBase64 = (base64: string) =>
+  base64
+    .replace(/\+/g, '.')
+    .replace(/\//g, '~')
+    .replace(/_/g, '!')
+    .replace(/=+$/, '');
+
+export async function hashWord(
+  word: string,
+  collisionStrength: number,
+  publicSalt: string
+) {
+  const saltedWord = publicSalt + word;
+
+  try {
+    if (!crypto?.subtle?.digest) throw new Error('Web Crypto unavailable');
+    const encoded = new TextEncoder().encode(saltedWord);
+    const hashBuffer = await crypto.subtle.digest('SHA-256', encoded);
+    return safeBase64(bytesToBase64(new Uint8Array(hashBuffer))).slice(
+      0,
+      collisionStrength
+    );
+  } catch {
+    const hash = new Sha256()
+      .process(new TextEncoder().encode(saltedWord))
+      .finish().result;
+    return safeBase64(bytesToBase64(hash as number[])).slice(
+      0,
+      collisionStrength
+    );
+  }
+}
+
+export async function buildSubscriptionIdentifiers(subscriptionId: string) {
+  const typeDetails = await hashWord(
+    'subscription_details',
+    14,
+    publicSaltSubscriptionApp
+  );
+  const typeIndex = await hashWord(
+    'subscription_index',
+    14,
+    publicSaltSubscriptionApp
+  );
+  const idHash = await hashWord(subscriptionId, 14, publicSaltSubscriptionApp);
+
+  if (!typeDetails || !typeIndex || !idHash) {
+    throw new Error('Failed to create subscription identifiers');
+  }
+
+  return {
+    detailsIdentifier: typeDetails + idHash,
+    indexIdentifier: `${typeIndex}${idHash}-v1`,
+    idHash,
+  };
+}
+
+function intervalDaysToBillingInterval(_intervalDays: number): BillingInterval {
+  return 'monthly';
+}
+
+function parseOnChainIndexData(data: string) {
+  if (!data || typeof data !== 'string') return null;
+  const decoded =
+    data.length > 0 && !data.includes('|')
+      ? (() => {
+          try {
+            return atob(data);
+          } catch {
+            return data;
+          }
+        })()
+      : data;
+  const parts = decoded.trim().split('|');
+  if (parts.length < 5 || parts[0] !== 'qsub1') return null;
+  const priceQort = parseFloat(parts[2]);
+  if (Number.isNaN(priceQort)) return null;
+  return { priceQort, intervalDays: 30 };
+}
+
+async function fetchSubscriptionIndexPrice(
+  ownerName: string,
+  indexIdentifier: string
+) {
+  const response = await fetch(
+    `${getBaseApiReact()}/arbitrary/DOCUMENT/${encodeURIComponent(ownerName)}/${encodeURIComponent(indexIdentifier)}`
+  );
+  if (!response.ok) return null;
+  let dataStr = await response.text();
+  try {
+    const parsed = JSON.parse(dataStr);
+    const raw = parsed?.resource?.data ?? parsed?.data;
+    if (raw != null) dataStr = typeof raw === 'string' ? raw : String(raw);
+  } catch {
+    // Plain text response.
+  }
+  if (!dataStr.includes('|')) {
+    try {
+      dataStr = atob(dataStr);
+    } catch {
+      return null;
+    }
+  }
+  return parseOnChainIndexData(dataStr);
+}
+
+function parseProductRecordData(raw: any): { si?: string; tx: string } | null {
+  if (!raw) return null;
+  if (typeof raw.tx === 'string') {
+    return { si: typeof raw.si === 'string' ? raw.si : undefined, tx: raw.tx };
+  }
+
+  const b64 = raw.data ?? raw.resource?.data;
+  if (typeof b64 === 'string') {
+    try {
+      const decoded = JSON.parse(atob(b64)) as { si?: string; tx?: string };
+      if (decoded && typeof decoded.tx === 'string') {
+        return {
+          si: typeof decoded.si === 'string' ? decoded.si : undefined,
+          tx: decoded.tx,
+        };
+      }
+    } catch {
+      // Ignore malformed product data.
+    }
+  }
+  return null;
+}
+
+export function useSubscriptionsFromGroups(
+  address: string | undefined,
+  name: string | undefined,
+  groups: SubscriptionGroupItem[]
+) {
+  const [mySubscriptions, setMySubscriptions] = useState<MySubscription[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const hasLoadedOnce = useRef(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function run() {
+      if (!address || !name || !Array.isArray(groups) || groups.length === 0) {
+        setMySubscriptions([]);
+        setLoading(false);
+        return;
+      }
+
+      if (!hasLoadedOnce.current) setLoading(true);
+      setError(null);
+
+      try {
+        const results = await Promise.all(
+          groups
+            .filter((group) => group.owner !== address && !group.isOpen)
+            .map(async (group) => {
+              const ownerPrimaryName = group.ownerPrimaryName;
+              if (!ownerPrimaryName) return null;
+
+              const subscriptionId = getSubscriptionIdForGroup(group.groupId);
+              const { detailsIdentifier, indexIdentifier } =
+                await buildSubscriptionIdentifiers(subscriptionId);
+
+              const matches = await fetch(
+                `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=DOCUMENT&identifier=${indexIdentifier}&name=${ownerPrimaryName}&limit=1&exactmatchnames=true&prefix=true`
+              );
+              if (!matches.ok) return null;
+              const matchesData = await matches.json();
+              if (!matchesData?.length) return null;
+
+              const detailsResponse = await fetch(
+                `${getBaseApiReact()}/arbitrary/DOCUMENT/${encodeURIComponent(ownerPrimaryName)}/${encodeURIComponent(detailsIdentifier)}`
+              );
+              if (!detailsResponse.ok) return null;
+
+              const details = (await detailsResponse.json()) as
+                | SubscriptionFullDetails
+                | undefined;
+              if ((details as any)?.status === 'disabled') return null;
+
+              const title =
+                details && typeof (details as any)?.title === 'string'
+                  ? (details as any).title
+                  : null;
+              let priceQort =
+                details && (details as any)?.amountQort != null
+                  ? Number((details as any).amountQort)
+                  : null;
+              if (!title || !priceQort) return null;
+
+              let resolvedIntervalDays = 30;
+              let nextPaymentDue: number | null = null;
+
+              try {
+                const paymentRecords = await fetch(
+                  `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=PRODUCT&identifier=${detailsIdentifier}&name=${name}&limit=1&exactmatchnames=true&reverse=true`
+                );
+                if (paymentRecords.ok) {
+                  const paymentRecordsData = await paymentRecords.json();
+                  const record = paymentRecordsData?.[0];
+                  let recordData: any = null;
+
+                  if (record?.data) {
+                    recordData = record.data;
+                  } else if (record?.identifier) {
+                    const dataResponse = await fetch(
+                      `${getBaseApiReact()}/arbitrary/PRODUCT/${name}/${record.identifier}`
+                    );
+                    if (dataResponse.ok) recordData = await dataResponse.json();
+                  }
+
+                  const parsed = parseProductRecordData(recordData);
+                  if (parsed?.si && parsed?.tx) {
+                    const indexData = await fetchSubscriptionIndexPrice(
+                      ownerPrimaryName,
+                      parsed.si
+                    );
+                    if (indexData) {
+                      priceQort = indexData.priceQort;
+                      resolvedIntervalDays = indexData.intervalDays;
+                    }
+
+                    const txResponse = await fetch(
+                      `${getBaseApiReact()}/transactions/signature/${parsed.tx}`
+                    );
+                    if (txResponse.ok) {
+                      const txData = await txResponse.json();
+                      const paymentTs = txData?.timestamp;
+                      const amountPaid = parseFloat(txData?.amount || '0');
+                      if (
+                        paymentTs != null &&
+                        amountPaid > 0 &&
+                        isMultipleOfUnitPrice(amountPaid, priceQort)
+                      ) {
+                        const paidIntervals = getPaidIntervalsFromAmount(
+                          amountPaid,
+                          priceQort
+                        );
+                        nextPaymentDue =
+                          paymentTs +
+                          paidIntervals *
+                            resolvedIntervalDays *
+                            24 *
+                            60 *
+                            60 *
+                            1000;
+                      }
+                    }
+                  }
+                }
+              } catch {
+                // Missing payment metadata just means the subscription needs payment.
+              }
+
+              return {
+                id: subscriptionId,
+                title,
+                ownerName: ownerPrimaryName,
+                groupInfo: group,
+                priceQort,
+                billingInterval:
+                  intervalDaysToBillingInterval(resolvedIntervalDays),
+                nextPaymentDue,
+                link: '',
+                status:
+                  nextPaymentDue == null || Date.now() > nextPaymentDue
+                    ? 'payment-needed'
+                    : 'active',
+              } satisfies MySubscription;
+            })
+        );
+
+        if (!cancelled) {
+          setMySubscriptions(results.filter(Boolean) as MySubscription[]);
+          hasLoadedOnce.current = true;
+        }
+      } catch (event: any) {
+        if (!cancelled) {
+          setError(event?.message ?? 'Failed to load subscriptions');
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    void run();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [address, name, groups]);
+
+  return { mySubscriptions, loading, error };
+}
diff --git a/src/subscriptions/useSubscriptionsFromManagedGroups.ts b/src/subscriptions/useSubscriptionsFromManagedGroups.ts
new file mode 100644
index 00000000..820eb480
--- /dev/null
+++ b/src/subscriptions/useSubscriptionsFromManagedGroups.ts
@@ -0,0 +1,234 @@
+import { useEffect, useRef, useState } from 'react';
+import { getBaseApiReact } from '../App';
+import { base64ToUint8Array } from '../qdn/encryption/group-encryption';
+import {
+  buildSubscriptionIdentifiers,
+  getSubscriptionIdForGroup,
+  type SubscriptionGroupItem,
+} from './useSubscriptionsFromGroups';
+
+export type ManagedSubscriptionActions = {
+  groupId: number;
+  pendingJoinRequests: number;
+  needsReEncryption: boolean;
+  totalActions: number;
+};
+
+export type ManagedSubscriptionEntry = {
+  group: SubscriptionGroupItem;
+  groupId: number;
+  actions: ManagedSubscriptionActions;
+  url: string;
+};
+
+export async function getGroupMembers(groupNumber: number) {
+  const response = await fetch(
+    `${getBaseApiReact()}/groups/members/${groupNumber}?limit=0`
+  );
+  return response.json();
+}
+
+export async function getGroupAdmins(groupNumber: number) {
+  const response = await fetch(
+    `${getBaseApiReact()}/groups/members/${groupNumber}?limit=0&onlyAdmins=true`
+  );
+  const groupData = await response.json();
+  const names: string[] = [];
+
+  for (const member of groupData?.members ?? []) {
+    if (member?.member && member?.primaryName) {
+      names.push(member.primaryName);
+    }
+  }
+
+  return { names };
+}
+
+export function useManagedSubscriptionsFromGroups(
+  address: string | undefined,
+  name: string | undefined,
+  groups: SubscriptionGroupItem[]
+) {
+  const [managedSubscriptions, setManagedSubscriptions] = useState<
+    ManagedSubscriptionEntry[]
+  >([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const hasLoadedOnce = useRef(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function run() {
+      if (!address || !name || !Array.isArray(groups) || groups.length === 0) {
+        setManagedSubscriptions([]);
+        setLoading(false);
+        return;
+      }
+
+      if (!hasLoadedOnce.current) setLoading(true);
+      setError(null);
+
+      try {
+        const results = await Promise.all(
+          groups
+            .filter((group) => group.owner === address)
+            .map(async (group): Promise<ManagedSubscriptionEntry | null> => {
+              try {
+                const subscriptionId = getSubscriptionIdForGroup(group.groupId);
+                const { detailsIdentifier, indexIdentifier } =
+                  await buildSubscriptionIdentifiers(subscriptionId);
+                const baseIdentifierPrefix = indexIdentifier.replace(
+                  /-v\d+$/,
+                  ''
+                );
+
+                const matchesResponse = await fetch(
+                  `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=DOCUMENT&identifier=${baseIdentifierPrefix}&exactmatchnames=true&limit=1&prefix=true&reverse=true&name=${name}`
+                );
+                if (!matchesResponse.ok) return null;
+                const matches = await matchesResponse.json();
+                const latestIdentifier = matches?.[0]?.identifier;
+                if (!latestIdentifier || !/-v\d+$/.test(latestIdentifier)) {
+                  return null;
+                }
+
+                let validJoinRequestCount = 0;
+                const joinResponse = await fetch(
+                  `${getBaseApiReact()}/groups/joinrequests/${group.groupId}`
+                );
+                if (joinResponse.ok) {
+                  const joinRequests = await joinResponse.json();
+                  const validations = await Promise.all(
+                    (Array.isArray(joinRequests) ? joinRequests : []).map(
+                      async (request) => {
+                        try {
+                          const nameResponse = await fetch(
+                            `${getBaseApiReact()}/names/primary/${request.joiner}`
+                          );
+                          if (!nameResponse.ok) return false;
+                          const primaryName = (await nameResponse.json())?.name;
+                          if (!primaryName) return false;
+
+                          const resourceResponse = await fetch(
+                            `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=PRODUCT&identifier=${detailsIdentifier}&exactmatchnames=true&limit=1&prefix=true&reverse=true&name=${primaryName}`
+                          );
+                          const resources = await resourceResponse.json();
+                          return resourceResponse.ok && resources.length > 0;
+                        } catch {
+                          return false;
+                        }
+                      }
+                    )
+                  );
+                  validJoinRequestCount = validations.filter(Boolean).length;
+                }
+
+                let needsReEncryption = false;
+                try {
+                  const memberData = await getGroupMembers(group.groupId);
+                  const { names: adminNames } = await getGroupAdmins(
+                    group.groupId
+                  );
+
+                  if (adminNames.length > 0) {
+                    const queryString = adminNames
+                      .map(
+                        (adminName) => `name=${encodeURIComponent(adminName)}`
+                      )
+                      .join('&');
+                    const resourcesResponse = await fetch(
+                      `${getBaseApiReact()}/arbitrary/resources/search?mode=ALL&service=DOCUMENT_PRIVATE&identifier=symmetric-qchat-group-${group.groupId}&exactmatchnames=true&limit=0&reverse=true&${queryString}&prefix=true`
+                    );
+
+                    if (!resourcesResponse.ok) {
+                      needsReEncryption = true;
+                    } else {
+                      const resources = await resourcesResponse.json();
+                      const matchingResources = resources.filter(
+                        (resource: any) =>
+                          resource.identifier ===
+                          `symmetric-qchat-group-${group.groupId}`
+                      );
+
+                      if (!matchingResources.length) {
+                        needsReEncryption = true;
+                      } else {
+                        const latestResource = matchingResources.sort(
+                          (left: any, right: any) => {
+                            const leftDate = left.updated
+                              ? new Date(left.updated)
+                              : new Date(left.created);
+                            const rightDate = right.updated
+                              ? new Date(right.updated)
+                              : new Date(right.created);
+                            return rightDate.getTime() - leftDate.getTime();
+                          }
+                        )[0];
+
+                        const encryptedResponse = await fetch(
+                          `${getBaseApiReact()}/arbitrary/DOCUMENT_PRIVATE/${latestResource.name}/${latestResource.identifier}?encoding=base64`
+                        );
+                        const encryptedData = await encryptedResponse.text();
+                        const combined = base64ToUint8Array(encryptedData);
+                        const countStart = combined.length - 4;
+                        const countArray = combined.slice(
+                          countStart,
+                          countStart + 4
+                        );
+                        const count = new Uint32Array(countArray.buffer)[0];
+
+                        if (count !== memberData?.memberCount) {
+                          needsReEncryption = true;
+                        }
+                      }
+                    }
+                  }
+                } catch {
+                  // Network failures should not create false positive actions.
+                }
+
+                const actions = {
+                  groupId: group.groupId,
+                  pendingJoinRequests: validJoinRequestCount,
+                  needsReEncryption,
+                  totalActions:
+                    validJoinRequestCount + (needsReEncryption ? 1 : 0),
+                };
+
+                return {
+                  group,
+                  groupId: group.groupId,
+                  actions,
+                  url: `manage/${group.groupId}`,
+                };
+              } catch {
+                return null;
+              }
+            })
+        );
+
+        if (!cancelled) {
+          setManagedSubscriptions(
+            results.filter(Boolean) as ManagedSubscriptionEntry[]
+          );
+          hasLoadedOnce.current = true;
+        }
+      } catch (event: any) {
+        if (!cancelled) {
+          setError(event?.message ?? 'Failed to load managed subscriptions');
+        }
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    void run();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [address, name, groups]);
+
+  return { managedSubscriptions, loading, error };
+}
diff --git a/src/types/auth.ts b/src/types/auth.ts
index a540f51c..2b8560e8 100644
--- a/src/types/auth.ts
+++ b/src/types/auth.ts
@@ -1,4 +1,5 @@
 export interface ApiKey {
   url: string;
   apikey: string;
+  name?: string;
 }
diff --git a/src/types/authTransition.ts b/src/types/authTransition.ts
new file mode 100644
index 00000000..98af3d04
--- /dev/null
+++ b/src/types/authTransition.ts
@@ -0,0 +1,17 @@
+export type SharedElementRect = {
+  height: number;
+  left: number;
+  top: number;
+  width: number;
+};
+
+export type AuthUnlockTransitionSnapshot = {
+  addressLabel: string;
+  addressRect: SharedElementRect;
+  avatarRect: SharedElementRect;
+  avatarSrc?: string;
+  displayName: string;
+  nameRect: SharedElementRect;
+  primaryName?: string;
+  walletAddress?: string;
+};
diff --git a/src/types/react-activity.d.ts b/src/types/react-activity.d.ts
new file mode 100644
index 00000000..159e538a
--- /dev/null
+++ b/src/types/react-activity.d.ts
@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+
+/** React 19.2+ `<Activity />` — types not yet in @types/react at our pinned version. */
+declare module 'react' {
+  export const Activity: (props: {
+    mode: 'visible' | 'hidden';
+    children?: ReactNode;
+  }) => ReactNode;
+}
diff --git a/src/types/window.d.ts b/src/types/window.d.ts
index c54060b7..ed65187e 100644
--- a/src/types/window.d.ts
+++ b/src/types/window.d.ts
@@ -1,6 +1,34 @@
 declare global {
   interface Window {
-    coreSetup?: unknown;
+    appStorage?: {
+      get: (key: string) => Promise<unknown>;
+      set: (key: string, value: unknown) => Promise<void>;
+      delete: (key: string) => Promise<void>;
+    };
+    miscStorage?: {
+      get: (key: string) => Promise<unknown>;
+      set: (key: string, value: unknown) => Promise<void>;
+      delete: (key: string) => Promise<void>;
+    };
+    coreSetup?: {
+      isCoreRunning?: () => Promise<boolean>;
+      isCoreRunningOnSystem?: () => Promise<boolean>;
+      isCoreInstalledOnSystem?: () => Promise<boolean>;
+      isCoreInstalled?: () => Promise<boolean>;
+      verifySteps?: () => Promise<void>;
+      deleteDB?: () => Promise<boolean>;
+      dbExists?: () => Promise<boolean>;
+      installCore?: () => Promise<unknown>;
+      startCore?: () => Promise<unknown>;
+      getApiKey?: () => Promise<string>;
+      resetApikey?: () => Promise<boolean>;
+      pickQortalDirectory?: () => Promise<unknown>;
+      removeCustomPath?: () => Promise<void>;
+      stopCore?: () => Promise<boolean>;
+      bootstrap?: () => Promise<boolean>;
+      bootstrapOrClearChainAndStart?: () => Promise<boolean>;
+      onProgress?: (cb: (p: unknown) => void) => () => void;
+    };
     electronAPI?: {
       openExternal?: (url: string) => void;
       setAllowedDomains?: (domains: string[]) => void;
@@ -11,7 +39,11 @@ declare global {
       windowMinimize?: () => void;
       windowMaximize?: () => Promise<void>;
       windowClose?: () => void;
+      focusWindow?: () => Promise<void>;
       getWindowState?: () => Promise<{ isMaximized: boolean }>;
+      onWindowStateChange?: (
+        callback: (state: { isMaximized: boolean }) => void
+      ) => () => void;
       getPlatform?: () => Promise<string>;
       showAppMenu?: (x?: number, y?: number) => void;
       getAppSettings?: () => Promise<{ closeAction?: 'ask' | 'minimizeToTray' | 'quit' }>;
@@ -27,4 +59,3 @@ declare global {
 }
 
 export {};
-
diff --git a/src/utils/configureDomPurify.ts b/src/utils/configureDomPurify.ts
new file mode 100644
index 00000000..1130de58
--- /dev/null
+++ b/src/utils/configureDomPurify.ts
@@ -0,0 +1,34 @@
+import DOMPurify from 'dompurify';
+
+let openerPolicyHookInstalled = false;
+
+function mergeRel(existing: string | null): string {
+  const tokens = new Set<string>();
+  if (existing) {
+    for (const raw of existing.trim().split(/\s+/)) {
+      if (raw) tokens.add(raw.toLowerCase());
+    }
+  }
+  tokens.add('noopener');
+  tokens.add('noreferrer');
+  return [...tokens].join(' ');
+}
+
+/**
+ * Links with target="_blank" must not receive window.opener in the new browsing context
+ * (reverse tabnabbing). Applied to all DOMPurify.sanitize runs after this module loads.
+ */
+function installOpenerPolicyHook(): void {
+  if (openerPolicyHookInstalled) return;
+  openerPolicyHookInstalled = true;
+
+  DOMPurify.addHook('afterSanitizeAttributes', (node) => {
+    if (node.nodeName !== 'A') return;
+    const target = node.getAttribute('target');
+    if (target == null) return;
+    if (target.replace(/\s+/g, '').toLowerCase() !== '_blank') return;
+    node.setAttribute('rel', mergeRel(node.getAttribute('rel')));
+  });
+}
+
+installOpenerPolicyHook();
diff --git a/src/utils/decryptWallet.ts b/src/utils/decryptWallet.ts
index 44b4aa9a..2c675358 100644
--- a/src/utils/decryptWallet.ts
+++ b/src/utils/decryptWallet.ts
@@ -5,12 +5,26 @@ import Base58 from '../encryption/Base58';
 import { AES_CBC, HmacSha512 } from 'asmcrypto.js';
 import { doInitWorkers, kdf } from '../encryption/kdf';
 import i18n from 'i18next';
+import {
+  getWalletErrorMessage,
+  validateStoredWalletForDecrypt,
+} from './walletErrorMessages';
 
 export const decryptStoredWallet = async (password, wallet) => {
+  validateStoredWalletForDecrypt(wallet);
+
   const threads = doInitWorkers(crypto.kdfThreads);
-  const encryptedSeedBytes = Base58.decode(wallet.encryptedSeed);
-  const iv = Base58.decode(wallet.iv);
-  const salt = Base58.decode(wallet.salt);
+  let encryptedSeedBytes;
+  let iv;
+  let salt;
+
+  try {
+    encryptedSeedBytes = Base58.decode(wallet.encryptedSeed);
+    iv = Base58.decode(wallet.iv);
+    salt = Base58.decode(wallet.salt);
+  } catch (error) {
+    throw new Error(getWalletErrorMessage(error));
+  }
 
   const key = await kdf(password, salt, threads);
   const encryptionKey = key.slice(0, 32);
diff --git a/src/utils/electronPersistentStorage.ts b/src/utils/electronPersistentStorage.ts
new file mode 100644
index 00000000..5286b161
--- /dev/null
+++ b/src/utils/electronPersistentStorage.ts
@@ -0,0 +1,78 @@
+/**
+ * Jotai-compatible storage that backs onto window.appStorage (Electron persistent-store.json).
+ * Uses an in-memory cache for sync getItem; setItem/removeItem persist async.
+ * Use for atoms that should persist in Electron the same way as permissions.
+ */
+
+/** Sync storage compatible with Jotai's atomWithStorage (getItem returns same type as initialValue). */
+export type ElectronPersistentStorage = {
+  getItem: <T>(key: string, initialValue: T) => T;
+  setItem: (key: string, value: unknown) => void;
+  removeItem: (key: string) => void;
+};
+
+const cache: Record<string, unknown> = {};
+let storageInstance: ElectronPersistentStorage | null = null;
+
+function getAppStorage(): Window['appStorage'] {
+  if (typeof window === 'undefined') return undefined;
+  return (window as Window & { appStorage?: Window['appStorage'] }).appStorage;
+}
+
+export function getElectronPersistentStorage(): ElectronPersistentStorage | undefined {
+  if (!getAppStorage()) return undefined;
+  if (storageInstance) return storageInstance;
+  const appStorage = getAppStorage()!;
+  storageInstance = {
+    getItem<T>(key: string, initialValue: T): T {
+      return (key in cache ? cache[key] : initialValue) as T;
+    },
+    setItem(key: string, value: unknown): void {
+      cache[key] = value;
+      appStorage.set(key, value).catch((err) =>
+        console.error('[electronPersistentStorage] setItem failed:', err)
+      );
+    },
+    removeItem(key: string): void {
+      delete cache[key];
+      appStorage.delete(key).catch((err) =>
+        console.error('[electronPersistentStorage] removeItem failed:', err)
+      );
+    },
+  };
+  return storageInstance;
+}
+
+/** Keys used for notification/ws atoms so hydration can load them. */
+export const ELECTRON_PERSISTENT_ATOM_KEYS = {
+  customWsSubscriptionsByAddress: 'qortal_custom_ws_subscriptions',
+  notificationSeenInApp: 'qortal_notification_seen_in_app',
+  seenAllNotificationsByAddress: 'qortal_seen_all_notifications',
+} as const;
+
+/** Populate in-memory cache from appStorage (call once when app mounts in Electron). */
+export async function hydrateElectronPersistentCache(): Promise<void> {
+  const appStorage = getAppStorage();
+  if (!appStorage) return;
+  const keys = Object.values(ELECTRON_PERSISTENT_ATOM_KEYS);
+  const results = await Promise.all(keys.map((k) => appStorage.get(k)));
+  keys.forEach((key, i) => {
+    const value = results[i];
+    if (value !== undefined && value !== null) cache[key] = value;
+  });
+}
+
+/**
+ * After appStorage.get (fresh from main), align the sync cache used by atomWithStorage getItem.
+ * Use when another window/session may have persisted updates (e.g. account switch).
+ */
+export function primeElectronPersistentCacheKey(
+  key: string,
+  value: unknown | null | undefined
+): void {
+  if (value !== undefined && value !== null) {
+    cache[key] = value;
+    return;
+  }
+  delete cache[key];
+}
diff --git a/src/utils/generateWallet/generateWallet.ts b/src/utils/generateWallet/generateWallet.ts
index 55fb761b..73538cb3 100644
--- a/src/utils/generateWallet/generateWallet.ts
+++ b/src/utils/generateWallet/generateWallet.ts
@@ -110,11 +110,11 @@ export const saveFileToDisk = async (data, qortAddress) => {
       filename: fileName,
       mimeType: 'application/json',
     });
-    if (saveResult?.canceled || !saveResult?.filePath) return;
+    if (saveResult?.canceled || !saveResult?.filePath) return false;
     const encoder = new TextEncoder();
     const chunk = encoder.encode(dataString);
     await window.electron.writeChunk(saveResult.filePath, chunk, false);
-    return;
+    return true;
   }
 
   // Web: File System Access API for a real file picker when supported
@@ -135,9 +135,9 @@ export const saveFileToDisk = async (data, qortAddress) => {
       const writable = await handle.createWritable();
       await writable.write(dataString);
       await writable.close();
-      return;
+      return true;
     } catch (err) {
-      if (err?.name === 'AbortError') return; // User canceled
+      if (err?.name === 'AbortError') return false; // User canceled
       // Fall through to FileSaver fallback on other errors
     }
   }
@@ -145,6 +145,7 @@ export const saveFileToDisk = async (data, qortAddress) => {
   // Fallback: classic download (no guaranteed file picker)
   const blob = new Blob([dataString], { type: 'application/json' });
   await FileSaver.saveAs(blob, fileName);
+  return true;
 };
 
 export const saveFileToDiskGeneric = async (blob, filename) => {
diff --git a/src/utils/globalApi.ts b/src/utils/globalApi.ts
index 4e4855f9..facb491b 100644
--- a/src/utils/globalApi.ts
+++ b/src/utils/globalApi.ts
@@ -42,7 +42,7 @@ export const getBaseApiReactForPrimaryName = (customApi?: string): string => {
 };
 
 export const getArbitraryEndpointReact = (): string => {
-  return `/arbitrary/resources/searchsimple`;
+  return `/arbitrary/resources/search`;
 };
 
 export const getBaseApiReactSocket = (customApi?: string): string => {
@@ -50,7 +50,8 @@ export const getBaseApiReactSocket = (customApi?: string): string => {
     return customApi;
   }
   if (globalApiKey?.url) {
-    const protocol = getProtocol(globalApiKey.url) === 'http' ? 'ws://' : 'wss://';
+    const protocol =
+      getProtocol(globalApiKey.url) === 'http' ? 'ws://' : 'wss://';
     return `${protocol}${cleanUrl(globalApiKey.url)}`;
   }
   return groupApiSocket;
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index 83efd9dd..9c052efc 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -35,6 +35,42 @@ export function isLocalPrivateHttpsUrl(url: string | undefined): boolean {
   }
 }
 
+/**
+ * In Electron, fetches and registers the node's CA for private/loopback HTTPS URLs
+ * before the renderer talks to that base over TLS (avoids Chromium rejecting self-signed).
+ * No-ops on web or when the URL is not HTTPS to a private host.
+ */
+export async function ensureElectronCertIfLocalPrivateHttps(
+  url: string | undefined,
+  apiKey = ''
+): Promise<{ success: boolean; error?: string }> {
+  if (!url || !isLocalPrivateHttpsUrl(url)) {
+    return { success: true };
+  }
+  const ensure = window.electronAPI?.ensureCertForBase;
+  if (!ensure) {
+    return { success: true };
+  }
+  const base = url.trim().replace(/\/+$/, '');
+  try {
+    const result = await ensure(base, apiKey);
+    if (result?.success) {
+      return { success: true };
+    }
+    return {
+      success: false,
+      error:
+        result?.error || 'Unable to prepare local HTTPS certificate',
+    };
+  } catch (e) {
+    return {
+      success: false,
+      error:
+        e instanceof Error ? e.message : 'Unable to prepare local HTTPS certificate',
+    };
+  }
+}
+
 export const delay = (time: number) =>
   new Promise((_, reject) =>
     setTimeout(() => reject(new Error('Request timed out')), time)
diff --git a/src/utils/openExternalHttp.ts b/src/utils/openExternalHttp.ts
new file mode 100644
index 00000000..669fab66
--- /dev/null
+++ b/src/utils/openExternalHttp.ts
@@ -0,0 +1,39 @@
+/**
+ * Opens http(s) URLs in the system browser. In Electron, uses openExternal
+ * (must stay allowlisted — see electron preload). Else uses window.open.
+ */
+export function openHttpUrlExternally(url: string | null | undefined): boolean {
+  if (url == null || typeof url !== 'string') {
+    return false;
+  }
+
+  const trimmed = url.trim();
+  if (!trimmed) {
+    return false;
+  }
+
+  let parsed: URL;
+  try {
+    parsed = new URL(trimmed);
+  } catch {
+    return false;
+  }
+
+  if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
+    return false;
+  }
+
+  if (!parsed.hostname) {
+    return false;
+  }
+
+  const href = parsed.toString();
+
+  if (window?.electronAPI?.openExternal) {
+    window.electronAPI.openExternal(href);
+    return true;
+  }
+
+  window.open(href, '_blank', 'noopener,noreferrer');
+  return true;
+}
diff --git a/src/utils/openQChatTab.ts b/src/utils/openQChatTab.ts
new file mode 100644
index 00000000..469d2640
--- /dev/null
+++ b/src/utils/openQChatTab.ts
@@ -0,0 +1,16 @@
+import { executeEvent } from './events';
+
+export const QCHAT_INTERNAL_TAB_ID = 'q-chat';
+
+// Q-Chat is still backed by Hub's built-in chat state, but it should live in
+// the Q-App tab strip so users can switch between it and regular Q-Apps.
+export const openQChatTab = () => {
+  executeEvent('addTab', {
+    data: {
+      internal: QCHAT_INTERNAL_TAB_ID,
+      name: 'Q-Chat',
+      service: 'INTERNAL',
+    },
+  });
+  executeEvent('open-apps-mode', {});
+};
diff --git a/src/utils/walletErrorMessages.ts b/src/utils/walletErrorMessages.ts
new file mode 100644
index 00000000..10c77be9
--- /dev/null
+++ b/src/utils/walletErrorMessages.ts
@@ -0,0 +1,99 @@
+import i18n from '../i18n/i18n';
+
+export const getWalletFieldLabel = (field: string) =>
+  i18n.t(`auth:wallet_errors.field.${field}`, {
+    defaultValue: field,
+  });
+
+export const getMissingWalletFieldMessage = (field: string) => {
+  if (field === 'encryptedSeed') {
+    return i18n.t('auth:wallet_errors.missing_encrypted_seed', {
+      postProcess: 'capitalizeFirstChar',
+    });
+  }
+
+  return i18n.t('auth:wallet_errors.missing_field', {
+    field: getWalletFieldLabel(field),
+    postProcess: 'capitalizeFirstChar',
+  });
+};
+
+const getRawErrorMessage = (error: unknown) => {
+  if (typeof error === 'string') return error;
+  if (error instanceof Error) return error.message;
+
+  if (error && typeof error === 'object' && 'message' in error) {
+    const message = (error as { message?: unknown }).message;
+    return typeof message === 'string' ? message : '';
+  }
+
+  return '';
+};
+
+export const getWalletErrorMessage = (error: unknown, fallback?: string) => {
+  const resolvedFallback =
+    fallback ??
+    i18n.t('auth:wallet_errors.unable_to_unlock_default', {
+      postProcess: 'capitalizeFirstChar',
+    });
+
+  const rawMessage = getRawErrorMessage(error).trim();
+  const normalizedMessage = rawMessage.toLowerCase();
+
+  if (!rawMessage) return resolvedFallback;
+
+  if (normalizedMessage.includes('encryptedseed')) {
+    return getMissingWalletFieldMessage('encryptedSeed');
+  }
+
+  if (
+    normalizedMessage.includes('cannot read properties') ||
+    normalizedMessage.includes('undefined is not an object') ||
+    normalizedMessage.includes('null is not an object')
+  ) {
+    return i18n.t('auth:wallet_errors.account_incomplete', {
+      postProcess: 'capitalizeFirstChar',
+    });
+  }
+
+  if (
+    normalizedMessage.includes('base58.decode') ||
+    normalizedMessage.includes('base58 alphabet') ||
+    normalizedMessage.includes('unacceptable input')
+  ) {
+    return i18n.t('auth:wallet_errors.invalid_security_data', {
+      postProcess: 'capitalizeFirstChar',
+    });
+  }
+
+  if (
+    normalizedMessage.includes('missing its wallet') ||
+    normalizedMessage.includes('missing its encrypted seed')
+  ) {
+    return rawMessage;
+  }
+
+  return rawMessage || resolvedFallback;
+};
+
+export const validateStoredWalletForDecrypt = (wallet: unknown) => {
+  if (!wallet || typeof wallet !== 'object') {
+    throw new Error(
+      i18n.t('auth:wallet_errors.account_not_found', {
+        postProcess: 'capitalizeFirstChar',
+      })
+    );
+  }
+
+  const requiredFields = ['encryptedSeed', 'iv', 'salt', 'mac'];
+  const walletRecord = wallet as Record<string, unknown>;
+
+  for (const field of requiredFields) {
+    if (
+      typeof walletRecord[field] !== 'string' ||
+      walletRecord[field].trim().length === 0
+    ) {
+      throw new Error(getMissingWalletFieldMessage(field));
+    }
+  }
+};