diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 0000000000000000000000000000000000000000..ff3e288b323884fdf22dfbb073b29cd767254099
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,42 @@
+# Copilot Instructions for This Nuxt Repository
+
+## Code Structure
+- Prefer imports from absolute paths using `@`: `@/components/...`, over relative paths.
+- Break pages and components into small, reusable units whenever possible.
+  - **Max page size:** 400 LOC.
+  - Follow **Single Responsibility Principle** for all components.
+- Avoid trailing spaces and maintain consistent formatting (use project ESLint/Prettier rules).
+
+## Error Handling & Logging
+- **Never** use `console.*` for logging, debugging, or error reporting.
+- Always use `toastError(message, error)` to surface errors to the user.
+
+## Loading States
+- When components or pages depend on async data, include **Skeleton components** whenever possible.
+  - Skeletons should be lightweight, reusable, and reflect the expected layout.
+
+## Architecture & Data Flow
+- **HTM/ctokens** is a separate domain and **not** directly tied to the wallet-dapp. Keep abstractions clean.
+- Always use the **store** (Pinia/Vuex) and **mediating interfaces/services** for API communication.
+  - APIs may change - components should never call APIs directly.
+  - Prefer strongly typed interfaces for request/response modeling.
+  - Prefer defining Pinia stores as `state`, `getters`, and `actions` (avoid using `defineStore` with only setup functions).
+
+## UI & Styling
+- Maintain consistent component naming and directory structure. Add directories as needed.
+- Avoid excessive inline styles; prefer Tailwind CSS utility classes or component-scoped styles.
+- If required, install Shadcn UI components via `pnpm dlx shadcn-vue@latest add <component>` and import them properly.
+
+## Project Documentation
+- **Do not** create markdown files for documentation, architecture, reference, summary or instructions.
+- Write self-documenting code; add comments only where intent is not obvious.
+
+## Code formatting
+- Prefer arrow functions and concise syntax where applicable.
+
+## General Guidelines
+- Prefer using `NuxtLink` for internal navigation over `<a>` tags. External links should use `<a>` with `target="_blank"` and `rel="noopener noreferrer"`.
+- Do not repeat the code. If you notice that it is the same in a multiple files - extract the code into a separate file/component, implementing common functionality
+- When using any component creating a link/navigation, ensure it has a class `keychainify-checked` to avoid hydration issues when keychain is installed.
+- Prefer fallback-safe, defensive programming for external interactions (APIs, wallets, etc.).
+- Keep dependencies minimal and review them regularly.
diff --git a/package.json b/package.json
index 01b79f7038cfcffa59eda172a98febdd9729ef15..2ba55d9d5c640d9c29622ab58a83dcdbe026c698 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,7 @@
     "@eslint/compat": "^1.3.1",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.32.0",
-    "@hiveio/beekeeper": "1.28.4-rc0",
+    "@hiveio/beekeeper": "1.28.4",
     "@hiveio/wax": "1.28.4-rc0-stable.251125135529",
     "@hiveio/wax-signers-keychain": "1.28.4-rc0-stable.251125135529",
     "@hiveio/wax-signers-metamask": "1.28.4-rc0-stable.251125135529",
@@ -89,6 +89,7 @@
   },
   "dependencies": {
     "google-auth-library": "^10.4.2",
+    "html5-qrcode": "^2.3.8",
     "jsonwebtoken": "^9.0.2",
     "qrcode": "^1.5.4"
   }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4969069e0e00fb8de337180cfd9a3c456f202a6e..f21618a150386d3a4de68197ac73ae63afc14d92 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -15,6 +15,9 @@ importers:
       google-auth-library:
         specifier: ^10.4.2
         version: 10.4.2
+      html5-qrcode:
+        specifier: ^2.3.8
+        version: 2.3.8
       jsonwebtoken:
         specifier: ^9.0.2
         version: 9.0.2
@@ -32,8 +35,8 @@ importers:
         specifier: ^9.32.0
         version: 9.32.0
       '@hiveio/beekeeper':
-        specifier: 1.28.4-rc0
-        version: 1.28.4-rc0
+        specifier: 1.28.4
+        version: 1.28.4
       '@hiveio/wax':
         specifier: 1.28.4-rc0-stable.251125135529
         version: 1.28.4-rc0-stable.251125135529
@@ -761,8 +764,8 @@ packages:
   '@floating-ui/vue@1.1.6':
     resolution: {integrity: sha512-XFlUzGHGv12zbgHNk5FN2mUB7ROul3oG2ENdTpWdE+qMFxyNxWSRmsoyhiEnpmabNm6WnUvR1OvJfUfN4ojC1A==}
 
-  '@hiveio/beekeeper@1.28.4-rc0':
-    resolution: {integrity: sha1-qLgaAY/l+gXAdleuIeyaMAo6wxA=, tarball: https://gitlab.syncad.com/api/v4/projects/198/packages/npm/@hiveio/beekeeper/-/@hiveio/beekeeper-1.28.4-rc0.tgz}
+  '@hiveio/beekeeper@1.28.4':
+    resolution: {integrity: sha1-X+2VqUKItQPk4Dr+t+/sfQ+84YY=, tarball: https://gitlab.syncad.com/api/v4/projects/198/packages/npm/@hiveio/beekeeper/-/@hiveio/beekeeper-1.28.4.tgz}
     engines: {node: ^20.11 || >= 21.2}
 
   '@hiveio/wax-signers-keychain@1.28.4-rc0-stable.251125135529':
@@ -3633,6 +3636,9 @@ packages:
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
+  html5-qrcode@2.3.8:
+    resolution: {integrity: sha512-jsr4vafJhwoLVEDW3n1KvPnCCXWaQfRng0/EEYk1vNcQGcG/htAdhJX0be8YyqMoSz7+hZvOZSTAepsabiuhiQ==}
+
   http-assert@1.5.0:
     resolution: {integrity: sha512-uPpH7OKX4H25hBmU6G1jWNaqJGpTXxey+YOUizJUAgu0AjLUeC8D73hTrhvDS5D+GJN1DN1+hhc/eF/wpxtp0w==}
     engines: {node: '>= 0.8'}
@@ -6596,7 +6602,7 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@hiveio/beekeeper@1.28.4-rc0': {}
+  '@hiveio/beekeeper@1.28.4': {}
 
   '@hiveio/wax-signers-keychain@1.28.4-rc0-stable.251125135529':
     dependencies:
@@ -9922,6 +9928,8 @@ snapshots:
 
   hookable@5.5.3: {}
 
+  html5-qrcode@2.3.8: {}
+
   http-assert@1.5.0:
     dependencies:
       deep-equal: 1.0.1
diff --git a/src/components/QrScanner.vue b/src/components/QrScanner.vue
new file mode 100644
index 0000000000000000000000000000000000000000..394214f44f76740fe8c08f2e5c0daa9b338d94c3
--- /dev/null
+++ b/src/components/QrScanner.vue
@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import type { Html5Qrcode } from 'html5-qrcode';
+import { X } from 'lucide-vue-next';
+import { onUnmounted, ref, watch } from 'vue';
+
+import { Button } from '@/components/ui/button';
+import { toastError } from '@/utils/parse-error';
+
+interface Props {
+  modelValue: boolean;
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: boolean): void;
+  (e: 'scan', result: string): void;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
+
+const scannerContainer = ref<HTMLDivElement>();
+const isLoading = ref(true);
+const html5QrCode = ref<Html5Qrcode | null>(null);
+
+const closeScanner = () => {
+  emit('update:modelValue', false);
+};
+
+const stopScanner = async () => {
+  if (html5QrCode.value) {
+    try {
+      await html5QrCode.value.stop();
+      html5QrCode.value.clear();
+    } catch {
+      // Silently ignore errors when stopping scanner
+    }
+  }
+};
+
+const onScanSuccess = (decodedText: string) => {
+  emit('scan', decodedText);
+  stopScanner();
+  closeScanner();
+};
+
+const onScanError = () => {
+  // Silently ignore scan errors (happens frequently during normal scanning)
+};
+
+const startScanner = async () => {
+  try {
+    // Dynamically import html5-qrcode
+    const { Html5Qrcode } = await import('html5-qrcode');
+
+    if (!scannerContainer.value) return;
+
+    html5QrCode.value = new Html5Qrcode('qr-reader');
+
+    const config = {
+      fps: 10,
+      qrbox: { width: 250, height: 250 },
+      aspectRatio: 1.0
+    };
+
+    await html5QrCode.value.start(
+      { facingMode: 'environment' },
+      config,
+      onScanSuccess,
+      onScanError
+    );
+
+    isLoading.value = false;
+  } catch (error) {
+    toastError('Failed to start QR scanner:', error);
+    closeScanner();
+  }
+};
+
+// Watch modelValue to start/stop scanner
+watch(() => props.modelValue, async (newValue) => {
+  if (newValue) {
+    isLoading.value = true;
+    await startScanner();
+  } else
+    await stopScanner();
+
+}, { immediate: true });
+
+onUnmounted(async () => {
+  await stopScanner();
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition
+      enter-active-class="transition-opacity duration-200"
+      enter-from-class="opacity-0"
+      enter-to-class="opacity-100"
+      leave-active-class="transition-opacity duration-200"
+      leave-from-class="opacity-100"
+      leave-to-class="opacity-0"
+    >
+      <div
+        v-if="modelValue"
+        class="fixed inset-0 z-[200] bg-black/80 backdrop-blur-sm flex items-center justify-center p-4"
+        style="pointer-events: auto;"
+        @click.self="closeScanner"
+      >
+        <div
+          class="relative bg-background rounded-lg shadow-xl max-w-md w-full overflow-hidden"
+          style="pointer-events: auto;"
+          @click.stop
+        >
+          <!-- Header -->
+          <div class="flex items-center justify-between p-4 border-b">
+            <h3 class="text-lg font-semibold">Scan QR Code</h3>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="h-8 w-8"
+              @click.stop="closeScanner"
+            >
+              <X class="h-4 w-4" />
+            </Button>
+          </div>
+
+          <!-- Scanner Container -->
+          <div class="p-4">
+            <div
+              v-if="isLoading"
+              class="flex flex-col items-center justify-center gap-4 py-12"
+            >
+              <div class="h-12 w-12 animate-spin rounded-full border-4 border-muted border-t-primary" />
+              <p class="text-sm text-muted-foreground">Initializing camera...</p>
+            </div>
+
+            <div
+              id="qr-reader"
+              ref="scannerContainer"
+              class="w-full rounded-lg overflow-hidden"
+            />
+
+            <p class="text-sm text-muted-foreground text-center mt-4">
+              Point your camera at a QR code to scan
+            </p>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+/* Override html5-qrcode default styles */
+:deep(#qr-reader) {
+  border: none !important;
+}
+
+:deep(#qr-reader video) {
+  border-radius: 0.5rem;
+}
+
+:deep(#qr-reader__dashboard_section) {
+  display: none !important;
+}
+
+:deep(#qr-reader__camera_selection) {
+  display: none !important;
+}
+</style>
diff --git a/src/components/ReceiveTransferCard.vue b/src/components/ReceiveTransferCard.vue
index 934bdf79b10c0d8044015e369596db3e9ab61bb5..f694060276e4c7631280a2b0e01fa4016cbc8fad 100644
--- a/src/components/ReceiveTransferCard.vue
+++ b/src/components/ReceiveTransferCard.vue
@@ -2,23 +2,34 @@
 import type { htm_operation } from '@mtyszczak-cargo/htm';
 import { computed, ref, watch } from 'vue';
 import { useRouter } from 'vue-router';
-import { toast } from 'vue-sonner';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
 import { TokenAmountInput } from '@/components/htm/amount';
+import QrScanner from '@/components/QrScanner.vue';
 import ReceiverTokenSummary from '@/components/ReceiverTokenSummary.vue';
 import TransferCompletedSummary from '@/components/TransferCompletedSummary.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
 import { useTokensStore, type CTokenDisplayBase } from '@/stores/tokens.store';
+import { useWalletStore } from '@/stores/wallet.store';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
+import { TempCTokensSigner } from '@/utils/wallet/ctokens/temp-signer';
+
+interface TransferSummary {
+  amount: string;
+  tokenLabel: string;
+  senderPublicKey: string;
+  receiver: string;
+  receiverPublicKey: string;
+  remainingBalance?: string;
+  timestamp?: string;
+}
 
 interface Props {
-  receiverName?: string;
   receiverKey?: string;
-  receiverAvatar?: string;
   tokenData: CTokenDisplayBase | undefined;
   queryAmount?: string;
   queryMemo?: string;
@@ -27,15 +38,47 @@ interface Props {
 
 const props = defineProps<Props>();
 
+const senderPublicKey = ref('');
+
+const receiverName = ref('');
+const receiverAvatar = ref<string | undefined>(undefined);
+
+const fetchUserMetadata = async () => {
+  try {
+    if (!props.receiverKey) return;
+
+    const { name, profileImage } = await tokensStore.getUser(props.receiverKey);
+    receiverName.value = name || '';
+    receiverAvatar.value = profileImage;
+  } catch (error) {
+    toastError('Failed to load receiver metadata', error);
+  }
+};
+
 const emit = defineEmits<{
-  transferCompleted: [summary: { amount: string; tokenLabel: string; receiver: string; remainingBalance?: string; timestamp?: string }];
+  transferCompleted: [summary: TransferSummary];
 }>();
 
-const router = useRouter();
 const tokensStore = useTokensStore();
+const walletStore = useWalletStore();
 
 const tokenComputed = computed(() => props.tokenData);
-const amountComputed = computed(() => props.queryAmount ? props.tokenData ? (props.queryAmount.slice(0, -props.tokenData.precision) + '.' + props.queryAmount.slice(-props.tokenData.precision)) : '' : '');
+const amountComputed = computed(() => {
+  if (props.tokenData === undefined || props.queryAmount === undefined)
+    return '';
+
+  if (props.tokenData.precision === 0)
+    return props.queryAmount || '';
+
+  return ((props.queryAmount.slice(0, -props.tokenData.precision) || '0') + '.' + props.queryAmount.slice(-props.tokenData.precision));
+});
+
+// QR code signing state
+const showQrScanner = ref(false);
+const scannedPrivateKey = ref<string | null>(null);
+const tempSigner = shallowRef<TempCTokensSigner | undefined>(undefined);
+
+const router = useRouter();
 
 // Form state
 const form = ref({
@@ -44,14 +87,39 @@ const form = ref({
   memo: props.queryMemo || ''
 });
 
-
 const isSending = ref(false);
 const transferCompleted = ref(false);
-const sentSummary = ref<{ amount: string; tokenLabel: string; receiver: string; remainingBalance?: string; timestamp?: string } | null>(null);
+const sentSummary = ref<TransferSummary | null>(null);
 
 // Check if user is logged in
 const isLoggedIn = computed(() => !!tokensStore.wallet);
 
+// Handle QR code scan
+const handleQrScan = async (privateKey: string) => {
+  try {
+    scannedPrivateKey.value = privateKey;
+
+    // Create a temporary signer from the scanned private key
+    tempSigner.value = await TempCTokensSigner.for(privateKey);
+
+    showQrScanner.value = false;
+  } catch (error) {
+    toastError('Invalid private key from QR code', error);
+    scannedPrivateKey.value = null;
+    tempSigner.value = undefined;
+  }
+};
+
+// Clear scanned key
+const clearScannedKey = () => {
+  scannedPrivateKey.value = null;
+  if (tempSigner.value) {
+    tempSigner.value.destroy();
+    tempSigner.value = undefined;
+  }
+  senderPublicKey.value = tokensStore.getUserPublicKey() || '';
+};
+
 // TODO: Fix validation
 
 const isFormValid = computed(() => {
@@ -66,11 +134,9 @@ const handleSend = async () => {
     return;
   }
 
-  if (!isLoggedIn.value || !CTokensProvider.getOperationalPublicKey()) {
-    toast.error('Please log in to your wallet first');
-    router.push({
-      path: '/tokens/list'
-    });
+  // For non-logged-in users, require QR code
+  if (!isLoggedIn.value && !tempSigner.value) {
+    toastError('Please scan your private key QR code to sign the transaction', new Error('No signer available'));
     return;
   }
 
@@ -82,7 +148,14 @@ const handleSend = async () => {
   try {
     isSending.value = true;
 
-    const sender = CTokensProvider.getOperationalPublicKey()!;
+    // Determine the sender's public key
+    const sender = tempSigner.value
+      ? tempSigner.value.publicKey
+      : tokensStore.getUserPublicKey();
+
+    if (!sender)
+      throw new Error('Could not determine sender public key');
+
 
     await waitForTransactionStatus(
       () => ([{
@@ -97,14 +170,21 @@ const handleSend = async () => {
           memo: form.value.memo
         }
       } satisfies htm_operation]),
-      'Transfer'
+      'Transfer',
+      true,
+      tempSigner.value // Use temp signer if available
     );
 
     transferCompleted.value = true;
 
-    const balanceObj = await tokensStore.getBalanceSingleToken(sender, form.value.token.assetNum);
+    let remainingBalance = `0 ${form.value.token.symbol}`;
+
+    try {
+      const balanceObj = await tokensStore.getBalanceSingleToken(sender, form.value.token.assetNum);
+      remainingBalance = balanceObj.displayBalance;
+    } catch {}
 
-    const receiverLabel = props.receiverName || props.receiverKey || 'Recipient';
+    const receiverLabel = receiverName.value || props.receiverKey || 'Recipient';
     const tokenLabel = form.value.token.symbol || form.value.token.name || String(form.value.token.assetNum) || '';
 
     const ts = new Date().toISOString();
@@ -112,11 +192,16 @@ const handleSend = async () => {
     sentSummary.value = {
       amount: form.value.amount,
       tokenLabel,
+      senderPublicKey: senderPublicKey.value,
       receiver: receiverLabel,
-      remainingBalance: balanceObj.displayBalance,
+      receiverPublicKey: props.receiverKey!,
+      remainingBalance,
       timestamp: ts
     };
 
+    // Clear scanned key after successful transfer
+    clearScannedKey();
+
     emit('transferCompleted', sentSummary.value);
   } catch (error) {
     toastError('Transfer failed', error);
@@ -125,6 +210,14 @@ const handleSend = async () => {
   }
 };
 
+const conditionalLogin = async () => {
+  if (await CTokensProvider.hasWallet())
+    walletStore.isProvideWalletPasswordModalOpen = true;
+  else
+    router.push({ path: '/tokens/register-account' });
+
+};
+
 // Watch query params changes to update form
 watch(() => props.queryAmount, (newValue) => {
   if (newValue)
@@ -140,6 +233,17 @@ watch(() => props.queryMemo, (newValue) => {
   if (newValue)
     form.value.memo = newValue;
 });
+
+watch(isLoggedIn, (newValue) => {
+  const key = tokensStore.getUserPublicKey();
+  senderPublicKey.value = newValue && key ? key : '';
+});
+
+onMounted(() => {
+  fetchUserMetadata();
+
+  senderPublicKey.value = tokensStore.getUserPublicKey() || '';
+});
 </script>
 
 <template>
@@ -151,6 +255,109 @@ watch(() => props.queryMemo, (newValue) => {
       </CardDescription>
     </CardHeader>
     <CardContent class="space-y-4">
+      <!-- QR Code Signing Section (for non-logged-in users) -->
+      <div
+        class="space-y-5"
+      >
+        <!-- QR Code Signing Section (for non-logged-in users) -->
+        <div
+          class="p-4 border rounded-lg bg-muted/50 space-y-3"
+        >
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <svg
+                width="20"
+                height="20"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="text-primary"
+              >
+                <path
+                  style="fill: currentColor"
+                  d="M3,11H5V13H3V11M11,5H13V9H11V5M9,11H13V15H11V13H9V11M15,11H17V13H19V11H21V13H19V15H21V19H19V21H17V19H13V21H11V17H15V15H17V13H15V11M19,19V15H17V19H19M15,3H21V9H15V3M17,5V7H19V5H17M3,3H9V9H3V3M5,5V7H7V5H5M3,15H9V21H3V15M5,17V19H7V17H5Z"
+                />
+              </svg>
+              <Label class="text-sm font-medium">Sign with QR Code</Label>
+            </div>
+            <Button
+              v-if="!tempSigner"
+              size="sm"
+              variant="outline"
+              @click="showQrScanner = true"
+            >
+              <svg
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="mr-1.5"
+              >
+                <path
+                  style="fill: currentColor"
+                  d="M4,4H10V10H4V4M20,4V10H14V4H20M14,15H16V13H14V11H16V13H18V11H20V13H18V15H20V18H18V20H16V18H13V20H11V16H14V15M16,15V18H18V15H16M4,20V14H10V20H4M6,6V8H8V6H6M16,6V8H18V6H16M6,16V18H8V16H6M4,11H6V13H4V11M9,11H13V15H11V13H9V11M11,6H13V10H11V6M2,2V6H0V2A2,2 0 0,1 2,0H6V2H2M22,0A2,2 0 0,1 24,2V6H22V2H18V0H22M2,18V22H6V24H2A2,2 0 0,1 0,22V18H2M22,22V18H24V22A2,2 0 0,1 22,24H18V22H22Z"
+                />
+              </svg>
+              Scan Private Key
+            </Button>
+          </div>
+
+          <!-- Scanned Key Display -->
+          <div
+            v-if="tempSigner"
+            class="flex items-center gap-2 p-2 bg-background rounded border border-green-500"
+          >
+            <svg
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="text-green-500 flex-shrink-0"
+            >
+              <path
+                style="fill: currentColor"
+                d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+              />
+            </svg>
+            <span class="text-xs font-mono text-muted-foreground flex-1 truncate">
+              {{ tempSigner.publicKey }}
+            </span>
+            <Button
+              size="sm"
+              variant="ghost"
+              @click="clearScannedKey"
+            >
+              <svg
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  style="fill: currentColor"
+                  d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+                />
+              </svg>
+            </Button>
+          </div>
+
+          <p class="text-xs text-muted-foreground">
+            {{ tempSigner ? 'Private key loaded. Ready to sign transaction.' : 'Scan your private key QR code to sign the transfer without logging in.' }}
+          </p>
+
+          <!-- Alternative: Connect Wallet -->
+          <div v-if="!isLoggedIn && !tempSigner" class="pt-2 border-t">
+            <Button
+              variant="link"
+              size="sm"
+              class="w-full text-xs"
+              @click="conditionalLogin()"
+            >
+              Or connect your persistent wallet instead
+            </Button>
+          </div>
+        </div>
+      </div>
+
       <!-- Compact recipient + token summary -->
       <ReceiverTokenSummary
         :receiver-name="receiverName"
@@ -163,6 +370,7 @@ watch(() => props.queryMemo, (newValue) => {
       <TokenAmountInput
         id="token-amount"
         v-model="form.amount"
+        :public-key="senderPublicKey"
         :variant="tokenComputed ? 'explicit' : 'selector'"
         :token="form.token"
       />
@@ -180,10 +388,10 @@ watch(() => props.queryMemo, (newValue) => {
         <Button
           v-if="!transferCompleted"
           class="w-full"
-          :disabled="isSending || !isFormValid"
+          :disabled="isSending || !isFormValid || (!isLoggedIn && !tempSigner)"
           @click="handleSend"
         >
-          {{ isSending ? 'Sending...' : (isLoggedIn ? 'Send Token' : 'Log in to Send Token') }}
+          {{ isSending ? 'Sending...' : (isLoggedIn || tempSigner ? 'Send Token' : 'Scan QR Code or Log in to Send Token') }}
         </Button>
 
         <!-- Bank-style confirmation summary shown after a successful transfer -->
@@ -203,4 +411,10 @@ watch(() => props.queryMemo, (newValue) => {
       </div>
     </CardContent>
   </Card>
+
+  <!-- QR Scanner Modal -->
+  <QrScanner
+    v-model="showQrScanner"
+    @scan="handleQrScan"
+  />
 </template>
diff --git a/src/components/SendTransferCard.vue b/src/components/SendTransferCard.vue
index c4747a231317ecdf009cc43cf75d6fb9ee9cb959..1be3def3dbdad6c6e8aa71e48fa27ce3f85e602a 100644
--- a/src/components/SendTransferCard.vue
+++ b/src/components/SendTransferCard.vue
@@ -4,9 +4,7 @@ import { computed, ref, watch } from 'vue';
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
 import { TokenAmountInput } from '@/components/htm/amount';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import type { CTokenDisplayBase } from '@/stores/tokens.store';
-import CTokensProvider from '@/utils/wallet/ctokens/signer';
-
+import { useTokensStore, type CTokenDisplayBase } from '@/stores/tokens.store';
 
 interface Props {
   token?: CTokenDisplayBase;
@@ -22,6 +20,8 @@ const emit = defineEmits<{
   updateMemo: [value: string];
 }>();
 
+const tokensStore = useTokensStore();
+
 // Form state
 const form = ref({
   amount: props.initialAmount || '',
@@ -35,7 +35,7 @@ const selectedToken = computed<CTokenDisplayBase | undefined>({
   }
 });
 
-const userOperationalKey = computed(() => CTokensProvider.getOperationalPublicKey());
+const userOperationalKey = computed(() => tokensStore.getUserPublicKey());
 
 // Watch form changes to emit updates
 watch(() => form.value.amount, (newValue) => {
diff --git a/src/components/TransferCompletedSummary.vue b/src/components/TransferCompletedSummary.vue
index c01d31017d00c9ef1380584e2015ca99d9bc6ca3..33f68f52a96eed6edbd5d416bfc91f9c4f85bb69 100644
--- a/src/components/TransferCompletedSummary.vue
+++ b/src/components/TransferCompletedSummary.vue
@@ -4,7 +4,7 @@ import { useRouter } from 'vue-router';
 
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import CTokensProvider from '@/utils/wallet/ctokens/signer';
+import { useTokensStore } from '@/stores/tokens.store';
 
 interface Props {
   amount: string;
@@ -23,10 +23,14 @@ const props = defineProps<Props>();
 
 const router = useRouter();
 
+const tokensStore = useTokensStore();
+
 const generateInvoice = () => {
+  const pk = tokensStore.getUserPublicKey();
+
   const params = new URLSearchParams({
-    fromPk: props.isReceiveMode ? CTokensProvider.getOperationalPublicKey() || '' : CTokensProvider.getOperationalPublicKey() || '',
-    toPk: props.isReceiveMode ? props.receiverKey || '' : CTokensProvider.getOperationalPublicKey() || '',
+    fromPk: pk || '',
+    toPk: props.isReceiveMode ? props.receiverKey || '' : pk || '',
     'asset-num': props.assetNum.toString(),
     amount: props.amount
   });
diff --git a/src/components/htm/HTMLoginContent.vue b/src/components/htm/HTMLoginContent.vue
index 72fdb0edf7cad121e9a88922c103783b2903ac76..a012044dc840cfe36e9af304a30fa3cd16d0e578 100644
--- a/src/components/htm/HTMLoginContent.vue
+++ b/src/components/htm/HTMLoginContent.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 
+import HTMPasswordFields from '@/components/htm/HTMPasswordFields.vue';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Separator } from '@/components/ui/separator';
+import { useHTMAutoLogin } from '@/composables/useHTMAutoLogin';
 import { useSettingsStore, UsedWallet } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
 import { useUserStore } from '@/stores/user.store';
@@ -27,14 +29,29 @@ const isLoading = ref(false);
 
 const managementKey = ref('');
 const operationalKey = ref('');
-const password = ref('');
-const repeatPassword = ref('');
 
 const walletStore = useWalletStore();
 const settingsStore = useSettingsStore();
 const userStore = useUserStore();
 const tokensStore = useTokensStore();
 
+// Use auto-login composable
+const {
+  encryptKeys,
+  password,
+  repeatPassword,
+  showEncryptionWarning,
+  passwordsMatch,
+  isPasswordValid,
+  getPasswordToUse
+} = useHTMAutoLogin();
+
+// Form validation
+const isFormValid = computed(() => {
+  const hasOperationalKey = operationalKey.value.trim().length > 0;
+  return hasOperationalKey && isPasswordValid.value;
+});
+
 const handleConditionalSiteLogin = async (operationalKey: string) => {
   const wax = await getWax();
 
@@ -62,7 +79,8 @@ const handleConditionalSiteLogin = async (operationalKey: string) => {
 
 const connect = async () => {
   try {
-    if (password.value !== repeatPassword.value) {
+    // Validate passwords match (only if encrypting)
+    if (encryptKeys.value && password.value !== repeatPassword.value) {
       toastError('Failed to connect to HTM', 'The provided passwords do not match');
 
       return;
@@ -70,9 +88,12 @@ const connect = async () => {
 
     isLoading.value = true;
 
-    const { operational } = await CTokensProvider.createWallet(password.value, operationalKey.value, managementKey.value.length === 0 ? undefined : managementKey.value);
+    // Get the password to use (user-provided or random)
+    const passwordToUse = getPasswordToUse();
 
-    await CTokensProvider.login(password.value);
+    const { operational } = await CTokensProvider.createWallet(passwordToUse, operationalKey.value, managementKey.value.length === 0 ? undefined : managementKey.value);
+
+    await CTokensProvider.login(passwordToUse);
 
     await handleConditionalSiteLogin(operational);
 
@@ -118,22 +139,15 @@ const connect = async () => {
           />
         </div>
         <Separator />
-        <div class="mt-3 mb-1 space-y-1">
-          <Label for="password">Password</Label>
-          <Input
-            id="password"
-            v-model="password"
-            type="password"
-            placeholder="Enter a password to encrypt the wallet"
-          />
-        </div>
-        <div class="space-y-1">
-          <Label for="repeatPassword">Repeat Password</Label>
-          <Input
-            id="repeatPassword"
-            v-model="repeatPassword"
-            type="password"
-            placeholder="Repeat the password"
+
+        <!-- Password Fields Component -->
+        <div class="mt-4">
+          <HTMPasswordFields
+            v-model:encrypt-keys="encryptKeys"
+            v-model:password="password"
+            v-model:repeat-password="repeatPassword"
+            :show-warning="showEncryptionWarning"
+            :passwords-match="passwordsMatch"
           />
         </div>
       </div>
@@ -142,7 +156,7 @@ const connect = async () => {
         <p>Step 2: Click this button to verify your configuration and connect to the wallet:</p>
         <div class="flex justify-center mt-4">
           <Button
-            :disabled="isLoading"
+            :disabled="isLoading || !isFormValid"
             variant="outline"
             size="lg"
             class="px-8 py-4 border-[#FBA510] border-[2px]"
@@ -154,7 +168,7 @@ const connect = async () => {
       </div>
       <div v-else>
         <Button
-          :disabled="isLoading || !operationalKey || !password || !repeatPassword"
+          :disabled="isLoading || !isFormValid"
           class="w-full"
           @click="connect"
         >
diff --git a/src/components/htm/HTMLoginForm.vue b/src/components/htm/HTMLoginForm.vue
index 3aba2235d2f823c584a721f4eb7076c4c294464b..6037374c9bfa8aa1310bca4f59cde8f1a985df11 100644
--- a/src/components/htm/HTMLoginForm.vue
+++ b/src/components/htm/HTMLoginForm.vue
@@ -12,6 +12,7 @@ import { useTokensStore } from '@/stores/tokens.store';
 import { useUserStore } from '@/stores/user.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
+import { canAutoLogin, performAutoLogin } from '@/utils/auto-login';
 import { toastError } from '@/utils/parse-error';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
@@ -35,6 +36,7 @@ const userStore = useUserStore();
 const settingsStore = useSettingsStore();
 
 const isCheckingWalletStatus = ref(true);
+const isAutoLoginAvailable = ref(false);
 
 const tokensStore = useTokensStore();
 
@@ -55,6 +57,22 @@ onMounted(async () => {
 
     hasStoredHTMWallet.value = walletExists;
     mode.value = walletExists ? 'login' : 'create';
+
+    // Check for auto-login availability
+    isAutoLoginAvailable.value = await canAutoLogin();
+
+    // If auto-login is available, try it automatically
+    if (isAutoLoginAvailable.value) {
+      const success = await performAutoLogin();
+      if (success) {
+        const operationalKey = tokensStore.getUserPublicKey();
+        if (operationalKey) {
+          await handleConditionalSiteLogin(operationalKey);
+          emit('success');
+          emit('setaccount', operationalKey);
+        }
+      }
+    }
   } catch (error) {
     toastError('Failed to verify existing HTM wallet', error);
     hasStoredHTMWallet.value = false;
@@ -111,7 +129,7 @@ const handleSetAccount = async (account: string) => {
 const handleLoginSuccess = async () => {
   try {
     // Get operational key after successful login
-    const operationalKey = CTokensProvider.getOperationalPublicKey();
+    const operationalKey = tokensStore.getUserPublicKey();
     if (!operationalKey)
       throw new Error('Failed to get operational key after login');
 
@@ -161,8 +179,19 @@ const handleLoginSuccess = async () => {
       <CardDescription>{{ description }}</CardDescription>
     </CardHeader>
     <CardContent class="space-y-4">
+      <!-- Auto-login in progress message -->
+      <div
+        v-if="isCheckingWalletStatus && isAutoLoginAvailable"
+        class="text-center space-y-2 py-4"
+      >
+        <div class="animate-spin mx-auto h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
+        <p class="text-sm text-muted-foreground">
+          Automatically logging you in...
+        </p>
+      </div>
+
       <div
-        v-if="isCheckingWalletStatus"
+        v-else-if="isCheckingWalletStatus"
         class="text-sm text-muted-foreground text-center py-6"
       >
         Checking for existing HTM wallet...
diff --git a/src/components/htm/HTMPasswordFields.vue b/src/components/htm/HTMPasswordFields.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f051fc48d9eedbec8afd3bd191c11ef457299d4d
--- /dev/null
+++ b/src/components/htm/HTMPasswordFields.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Switch } from '@/components/ui/switch';
+
+const encryptKeys = defineModel<boolean>('encryptKeys', { required: true });
+const password = defineModel<string>('password', { required: true });
+const repeatPassword = defineModel<string>('repeatPassword', { required: true });
+
+defineProps<{
+  showWarning?: boolean;
+  passwordsMatch?: boolean;
+}>();
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Encryption Toggle -->
+    <div class="flex items-center justify-between space-x-2">
+      <div class="space-y-0.5">
+        <Label for="encrypt-keys" class="text-base">
+          Encrypt keys using password
+        </Label>
+        <p class="text-xs text-muted-foreground">
+          Protect your keys with a password (recommended)
+        </p>
+      </div>
+      <Switch
+        id="encrypt-keys"
+        v-model="encryptKeys"
+      />
+    </div>
+
+    <!-- Warning when encryption is disabled -->
+    <Alert v-if="showWarning" variant="warning">
+      <AlertDescription>
+        <strong>Auto-Login Enabled:</strong> Your keys will be encrypted with a random password that's automatically stored in your browser. You'll be logged in automatically when you visit HTM pages. This is convenient but less secure than using a password you control.
+      </AlertDescription>
+    </Alert>
+
+    <!-- Password fields (only when encryption is enabled) -->
+    <div v-if="encryptKeys" class="space-y-4">
+      <div class="space-y-1">
+        <Label for="password">Password</Label>
+        <Input
+          id="password"
+          v-model="password"
+          type="password"
+          placeholder="Enter a password to encrypt the wallet"
+        />
+      </div>
+      <div class="space-y-1">
+        <Label for="repeatPassword">Repeat Password</Label>
+        <Input
+          id="repeatPassword"
+          v-model="repeatPassword"
+          type="password"
+          placeholder="Repeat the password"
+        />
+      </div>
+
+      <div v-if="password && repeatPassword && !passwordsMatch">
+        <p class="text-sm text-red-500">
+          Passwords do not match
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/htm/HTMProvidePasswordContent.vue b/src/components/htm/HTMProvidePasswordContent.vue
index 4651609d249516e0a98365fb5480476875f2a643..2a7b55a38fb645497b02264f5152942fa7860b19 100644
--- a/src/components/htm/HTMProvidePasswordContent.vue
+++ b/src/components/htm/HTMProvidePasswordContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 import { toast } from 'vue-sonner';
 
 import HTMLoginContent from '@/components/htm/HTMLoginContent.vue';
@@ -11,6 +11,7 @@ import { useTokensStore } from '@/stores/tokens.store';
 import { useUserStore } from '@/stores/user.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
+import { canAutoLogin, performAutoLogin } from '@/utils/auto-login';
 import { toastError } from '@/utils/parse-error';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
@@ -29,6 +30,7 @@ const settingsStore = useSettingsStore();
 const tokensStore = useTokensStore();
 
 const isLoading = ref(false);
+const isAutoLoginAvailable = ref(false);
 
 const password = ref('');
 const mode = ref<'login' | 'create'>('login');
@@ -41,6 +43,24 @@ const switchToLoginMode = () => {
   mode.value = 'login';
 };
 
+// Check for auto-login on mount
+onMounted(async () => {
+  isAutoLoginAvailable.value = await canAutoLogin();
+
+  // If auto-login is available, try it automatically
+  if (isAutoLoginAvailable.value) {
+    isLoading.value = true;
+    const success = await performAutoLogin();
+    isLoading.value = false;
+
+    if (success) {
+      emit('success');
+      // Close the modal since auto-login succeeded
+      walletStore.isProvideWalletPasswordModalOpen = false;
+    }
+  }
+});
+
 const connect = async () => {
   try {
     isLoading.value = true;
@@ -56,7 +76,7 @@ const connect = async () => {
         await tokensStore.reset(ctokensWallet);
       } else {
         await walletStore.createWalletFor({
-          account: CTokensProvider.getOperationalPublicKey(),
+          account: tokensStore.getUserPublicKey(),
           wallet: UsedWallet.CTOKENS_IMPLEMENTATION
         }, 'posting');
         if (settingsStore.settings?.account)
@@ -84,8 +104,19 @@ const handleCreateAccount = async () => {
 
 <template>
   <div class="space-y-4">
+    <!-- Auto-login in progress message -->
+    <div
+      v-if="isLoading && isAutoLoginAvailable"
+      class="text-center space-y-2 py-4"
+    >
+      <div class="animate-spin mx-auto h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
+      <p class="text-sm text-muted-foreground">
+        Automatically logging you in...
+      </p>
+    </div>
+
     <div
-      v-if="mode === 'login'"
+      v-else-if="mode === 'login'"
       class="space-y-4"
     >
       <p>Provide your HTM wallet password:</p>
diff --git a/src/components/htm/HTMRegistrationForm/HTMRegistrationForm.vue b/src/components/htm/HTMRegistrationForm/HTMRegistrationForm.vue
index 96fdc58ea2c347a4fb77082171b3e69c1da2babb..36820773a45ccf55306dc12f2b7f51a9593fc970 100644
--- a/src/components/htm/HTMRegistrationForm/HTMRegistrationForm.vue
+++ b/src/components/htm/HTMRegistrationForm/HTMRegistrationForm.vue
@@ -8,12 +8,14 @@ import type { HTMRegistrationContext } from '@/components/htm/HTMRegistrationFor
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
+import { useHTMAutoLogin } from '@/composables/useHTMAutoLogin';
 import { UsedWallet, useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore } from '@/stores/tokens.store';
 import { useUserStore } from '@/stores/user.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
+import { generateQrCode } from '@/utils/qr/create-qr';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import { isValidUrl } from '@/utils/validators';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
@@ -37,15 +39,25 @@ const successShow = () => {
 
 const hasConfirmedDownload = ref(false);
 const keysGenerated = ref(false);
+const autoImport = ref(true);
+
+// Use auto-login composable
+const {
+  encryptKeys,
+  password,
+  repeatPassword,
+  showEncryptionWarning,
+  passwordsMatch,
+  isPasswordValid,
+  getPasswordToUse
+} = useHTMAutoLogin();
 
 // Registration form data - simplified to match standard account creation flow
 const registrationData = ref({
   name: '',                 // Account display name
   about: '',                // Description/bio (optional)
   website: '',              // Website URL (optional)
-  profile_image: '',        // Profile image URL (optional)
-  walletPassword: '',       // Password to encrypt the wallet
-  repeatPassword: ''        // Password confirmation
+  profile_image: ''         // Profile image URL (optional)
 });
 
 // Generated HTM keys (auto-generated, not manually entered)
@@ -71,7 +83,7 @@ const resetProcess = () => {
 // Generate HTM keys automatically (called during registration)
 const generateAndDownloadKeys = async () => {
   if (!isBasicInfoValid.value) {
-    toast.error('Please fill in all required fields');
+    toastError('Please fill in all required fields');
     return;
   }
 
@@ -111,12 +123,38 @@ const generateAndDownloadKeys = async () => {
 
 // Form validation - only basic info needed in step 1
 const isBasicInfoValid = computed(() => {
-  return registrationData.value.name.trim().length > 0 &&
-         registrationData.value.walletPassword.trim().length > 0 &&
-         registrationData.value.repeatPassword.trim().length > 0 &&
-         registrationData.value.walletPassword === registrationData.value.repeatPassword;
+  const hasName = registrationData.value.name.trim().length > 0;
+  return hasName && isPasswordValid.value;
 });
 
+// Download operational private key as QR code
+const downloadPrivateKeyQR = async () => {
+  try {
+    // Prepare text
+    const description = `HTM Operational Private key: ${registrationData.value.name}`;
+
+    const blob = await generateQrCode(
+      generatedKeys.value.operationalPrivateKey,
+      description
+    );
+
+    const url = URL.createObjectURL(blob);
+
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `htm-operational-key-${registrationData.value.name}.png`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+
+    URL.revokeObjectURL(url);
+
+    toast.success('QR code downloaded successfully');
+  } catch (error) {
+    toastError('Failed to generate QR code', error);
+  }
+};
+
 // Download HTM keys file (similar to Hive authority data file)
 const downloadKeysFile = () => {
   const cleanAccountName = generatedKeys.value.operationalPublicKey;
@@ -190,17 +228,14 @@ const registerHTMAccount = async () => {
     if (!hasConfirmedDownload.value)
       throw new Error('Please confirm you have saved the keys file');
 
-
-    // Validate passwords match
-    if (registrationData.value.walletPassword !== registrationData.value.repeatPassword)
+    // Validate passwords match (only if encrypting)
+    if (encryptKeys.value && !passwordsMatch.value)
       throw new Error('Passwords do not match');
 
-
     // Validate website URL if provided
     if (registrationData.value.website && !isValidUrl(registrationData.value.website))
       throw new Error('Please enter a valid website URL');
 
-
     // Validate profile image URL if provided
     if (registrationData.value.profile_image && !isValidUrl(registrationData.value.profile_image))
       throw new Error('Please enter a valid profile image URL');
@@ -208,20 +243,30 @@ const registerHTMAccount = async () => {
     // Get wax instance
     const wax = await getWax();
 
-    // Create temporary beekeeper wallet to import keys and sign transactions
-
-    // Create HTM wallet for persistent storage
-    const keys = await CTokensProvider.createWallet(
-      registrationData.value.walletPassword,
-      generatedKeys.value.operationalPrivateKey,
-      generatedKeys.value.managementPrivateKey
-    );
-
-    await CTokensProvider.login(
-      registrationData.value.walletPassword
-    );
-
-    const explicitWallet = await CTokensProvider.for(wax, 'owner', false);
+    // Get the password to use (user-provided or random)
+    const passwordToUse = getPasswordToUse();
+
+    // Create HTM wallet for persistent storage (only if auto-import is enabled)
+    let keys;
+    if (autoImport.value) {
+      keys = await CTokensProvider.createWallet(
+        passwordToUse,
+        generatedKeys.value.operationalPrivateKey,
+        generatedKeys.value.managementPrivateKey
+      );
+
+      await CTokensProvider.login(passwordToUse);
+    } else {
+      // Just use the keys without creating a wallet
+      keys = {
+        operational: generatedKeys.value.operationalPublicKey,
+        management: generatedKeys.value.managementPublicKey
+      };
+    }
+
+    const explicitWallet = autoImport.value
+      ? await CTokensProvider.for(wax, 'owner', false)
+      : undefined;
 
     // Wait for transaction status
     await waitForTransactionStatus(
@@ -249,7 +294,9 @@ const registerHTMAccount = async () => {
       explicitWallet
     );
 
-    await handleConditionalSiteLogin(keys.operational!);
+    // Only handle login if auto-import is enabled
+    if (autoImport.value)
+      await handleConditionalSiteLogin(keys.operational!);
 
     // After successful registration, redirect to login
     successShow();
@@ -266,24 +313,29 @@ provide<HTMRegistrationContext>(HTM_REGISTRATION_KEY, {
   generatedKeys,
   keysGenerated,
   hasConfirmedDownload,
+  encryptKeys,
+  password,
+  repeatPassword,
+  showEncryptionWarning,
+  passwordsMatch,
+  autoImport,
   isLoading,
   isBasicInfoValid,
   generateAndDownloadKeys,
   downloadKeysFile,
+  downloadPrivateKeyQR,
   resetProcess
 });
 </script>
 
 <template>
-  <Card
-    class="w-full"
-  >
+  <Card class="w-full max-w-2xl mx-auto">
     <CardHeader>
       <CardTitle class="text-2xl">
         Register New HTM Account
       </CardTitle>
       <CardDescription>
-        Create your HTM account with auto-generated secure keys. Follow the simple steps below.
+        Create your HTM account with auto-generated secure keys.
       </CardDescription>
     </CardHeader>
     <CardContent class="space-y-6">
diff --git a/src/components/htm/HTMRegistrationForm/steps/Step1.vue b/src/components/htm/HTMRegistrationForm/steps/Step1.vue
index 3d7b3f2df6089c29c4418edf98ec429f11371cb1..0c6afd0bf8103564baa9b48dda2cad74fd4b364c 100644
--- a/src/components/htm/HTMRegistrationForm/steps/Step1.vue
+++ b/src/components/htm/HTMRegistrationForm/steps/Step1.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { mdiNumeric1Circle } from '@mdi/js';
 
+import HTMPasswordFields from '@/components/htm/HTMPasswordFields.vue';
 import { HTM_REGISTRATION_KEY } from '@/components/htm/HTMRegistrationForm/types';
 import type { HTMRegistrationContext } from '@/components/htm/HTMRegistrationForm/types';
 import { Input } from '@/components/ui/input';
@@ -9,7 +10,7 @@ import { Separator } from '@/components/ui/separator';
 import { Textarea } from '@/components/ui/textarea';
 
 // Inject the registration context from parent
-const { registrationData } = inject<HTMRegistrationContext>(HTM_REGISTRATION_KEY)!;
+const { registrationData, encryptKeys, password, repeatPassword, showEncryptionWarning, passwordsMatch } = inject<HTMRegistrationContext>(HTM_REGISTRATION_KEY)!;
 </script>
 
 <template>
@@ -31,101 +32,78 @@ const { registrationData } = inject<HTMRegistrationContext>(HTM_REGISTRATION_KEY
       </div>
     </div>
 
-    <!-- Display Name (required) -->
-    <div class="space-y-2">
-      <Label for="account-name">
-        Display Name *
-      </Label>
-      <Input
-        id="account-name"
-        v-model="registrationData.name"
-        type="text"
-        placeholder="Enter your display name"
-        required
-        maxlength="50"
-      />
-      <p class="text-xs text-muted-foreground">
-        Your public display name (max 50 characters)
-      </p>
-    </div>
+    <!-- Compact grid layout for user card style -->
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <!-- Display Name (required) -->
+      <div class="space-y-2 md:col-span-2">
+        <Label for="account-name">
+          Display Name *
+        </Label>
+        <Input
+          id="account-name"
+          v-model="registrationData.name"
+          type="text"
+          placeholder="Enter your display name"
+          required
+          maxlength="50"
+        />
+        <p class="text-xs text-muted-foreground">
+          Your public display name (max 50 characters)
+        </p>
+      </div>
 
-    <!-- About/Description (optional) -->
-    <div class="space-y-2">
-      <Label for="account-about">
-        About (Optional)
-      </Label>
-      <Textarea
-        id="account-about"
-        v-model="registrationData.about"
-        placeholder="Tell us about yourself or your project..."
-        rows="3"
-        maxlength="500"
-      />
-    </div>
+      <!-- Website (optional) -->
+      <div class="space-y-2">
+        <Label for="account-website">
+          Website
+        </Label>
+        <Input
+          id="account-website"
+          v-model="registrationData.website"
+          type="url"
+          placeholder="https://your-website.com"
+        />
+      </div>
 
-    <!-- Website (optional) -->
-    <div class="space-y-2">
-      <Label for="account-website">
-        Website (Optional)
-      </Label>
-      <Input
-        id="account-website"
-        v-model="registrationData.website"
-        type="url"
-        placeholder="https://your-website.com"
-      />
-    </div>
+      <!-- Profile Image (optional) -->
+      <div class="space-y-2">
+        <Label for="account-profile-image">
+          Profile Image URL
+        </Label>
+        <Input
+          id="account-profile-image"
+          v-model="registrationData.profile_image"
+          type="url"
+          placeholder="https://example.com/image.jpg"
+        />
+      </div>
 
-    <!-- Profile Image (optional) -->
-    <div class="space-y-2">
-      <Label for="account-profile-image">
-        Profile Image URL (Optional)
-      </Label>
-      <Input
-        id="account-profile-image"
-        v-model="registrationData.profile_image"
-        type="url"
-        placeholder="https://example.com/your-image.jpg"
-      />
+      <!-- About/Description (optional) -->
+      <div class="space-y-2 md:col-span-2">
+        <Label for="account-about">
+          About
+        </Label>
+        <Textarea
+          id="account-about"
+          v-model="registrationData.about"
+          placeholder="Tell us about yourself or your project..."
+          rows="3"
+          maxlength="500"
+        />
+      </div>
     </div>
-  </div>
 
-  <Separator />
-
-  <!-- Wallet Password (required) -->
-  <div class="space-y-2">
-    <Label for="wallet-password">
-      Wallet Password *
-    </Label>
-    <Input
-      id="wallet-password"
-      v-model="registrationData.walletPassword"
-      type="password"
-      placeholder="Enter a secure password"
-      required
-    />
-    <p class="text-xs text-muted-foreground">
-      Create a password to encrypt and secure your HTM wallet locally
-    </p>
-  </div>
+    <Separator />
 
-  <!-- Repeat Password (required) -->
-  <div class="space-y-2">
-    <Label for="repeat-password">
-      Repeat Password *
-    </Label>
-    <Input
-      id="repeat-password"
-      v-model="registrationData.repeatPassword"
-      type="password"
-      placeholder="Repeat your password"
-      required
-    />
-  </div>
-
-  <div v-if="registrationData.walletPassword && registrationData.repeatPassword && registrationData.walletPassword !== registrationData.repeatPassword">
-    <p class="text-sm text-red-500">
-      Passwords do not match
-    </p>
+    <!-- Password Fields Component -->
+    <div class="space-y-4">
+      <HTMPasswordFields
+        v-model:encrypt-keys="encryptKeys"
+        v-model:password="password"
+        v-model:repeat-password="repeatPassword"
+        :show-warning="showEncryptionWarning"
+        :passwords-match="passwordsMatch"
+      />
+    </div>
   </div>
 </template>
diff --git a/src/components/htm/HTMRegistrationForm/steps/Step2.vue b/src/components/htm/HTMRegistrationForm/steps/Step2.vue
index 6540357cf7ce2cd5e8e84c8c13774fea442c5eee..06b91de969f451edd5059f1d1a08c24e72b5b84f 100644
--- a/src/components/htm/HTMRegistrationForm/steps/Step2.vue
+++ b/src/components/htm/HTMRegistrationForm/steps/Step2.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { mdiNumeric2Circle, mdiRefresh, mdiDownload } from '@mdi/js';
+import { mdiNumeric2Circle, mdiRefresh, mdiDownload, mdiQrcode } from '@mdi/js';
 
 import { HTM_REGISTRATION_KEY } from '@/components/htm/HTMRegistrationForm/types';
 import type { HTMRegistrationContext } from '@/components/htm/HTMRegistrationForm/types';
@@ -15,6 +15,7 @@ const {
   isBasicInfoValid,
   generateAndDownloadKeys,
   downloadKeysFile,
+  downloadPrivateKeyQR,
   resetProcess
 } = inject<HTMRegistrationContext>(HTM_REGISTRATION_KEY)!;
 </script>
@@ -90,6 +91,29 @@ const {
       <span v-else>Generate & Download HTM Keys</span>
     </Button>
 
+    <!-- Download QR Code button -->
+    <Button
+      v-if="keysGenerated"
+      type="button"
+      variant="outline"
+      class="w-full"
+      @click="downloadPrivateKeyQR"
+    >
+      <svg
+        width="16"
+        height="16"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        class="mr-2"
+      >
+        <path
+          style="fill: currentColor"
+          :d="mdiQrcode"
+        />
+      </svg>
+      Download Operational Key as QR Code
+    </Button>
+
     <!-- Show generated public keys (read-only) -->
     <div
       v-if="keysGenerated"
diff --git a/src/components/htm/HTMRegistrationForm/steps/Step3.vue b/src/components/htm/HTMRegistrationForm/steps/Step3.vue
index 9966f3d3b6deaf0b95c7526b70c77da8c018062b..8c9cb8e48fc803e974520f513333c7aabb2ff978 100644
--- a/src/components/htm/HTMRegistrationForm/steps/Step3.vue
+++ b/src/components/htm/HTMRegistrationForm/steps/Step3.vue
@@ -5,9 +5,10 @@ import { HTM_REGISTRATION_KEY } from '@/components/htm/HTMRegistrationForm/types
 import type { HTMRegistrationContext } from '@/components/htm/HTMRegistrationForm/types';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Label } from '@/components/ui/label';
+import { Separator } from '@/components/ui/separator';
 
 // Inject the registration context from parent
-const { keysGenerated, hasConfirmedDownload } = inject<HTMRegistrationContext>(HTM_REGISTRATION_KEY)!;
+const { keysGenerated, hasConfirmedDownload, autoImport } = inject<HTMRegistrationContext>(HTM_REGISTRATION_KEY)!;
 </script>
 
 <template>
@@ -45,5 +46,31 @@ const { keysGenerated, hasConfirmedDownload } = inject<HTMRegistrationContext>(H
         </Label>
       </div>
     </div>
+
+    <Separator />
+
+    <!-- Auto-import checkbox -->
+    <div class="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-900 rounded-lg p-4">
+      <div class="flex items-center space-x-2">
+        <Checkbox
+          id="auto-import"
+          v-model="autoImport"
+          class="w-4 h-4"
+        />
+        <div class="space-y-1">
+          <Label
+            for="auto-import"
+            class="text-sm text-blue-800 dark:text-blue-200 cursor-pointer font-semibold"
+          >
+            Store secret keys in this browser
+          </Label>
+          <p class="text-xs text-blue-700 dark:text-blue-300">
+            When enabled, tka application will create a HTM wallet
+            for you and store there your private keys immediately.
+            Otherwise only account will be created.
+          </p>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
diff --git a/src/components/htm/HTMRegistrationForm/types.ts b/src/components/htm/HTMRegistrationForm/types.ts
index 7f7bc6a201843c509b295fa3efbc6bedae21091c..9e8aa3797e047e111917882e3e0dc8c345b92d19 100644
--- a/src/components/htm/HTMRegistrationForm/types.ts
+++ b/src/components/htm/HTMRegistrationForm/types.ts
@@ -6,8 +6,6 @@ export interface HTMRegistrationContext {
     about: string;
     website: string;
     profile_image: string;
-    walletPassword: string;
-    repeatPassword: string;
   }>;
   generatedKeys: Ref<{
     operationalPrivateKey: string;
@@ -17,10 +15,17 @@ export interface HTMRegistrationContext {
   }>;
   keysGenerated: Ref<boolean>;
   hasConfirmedDownload: Ref<boolean>;
+  encryptKeys: Ref<boolean>;
+  password: Ref<string>;
+  repeatPassword: Ref<string>;
+  showEncryptionWarning: ComputedRef<boolean>;
+  passwordsMatch: ComputedRef<boolean>;
+  autoImport: Ref<boolean>;
   isLoading: Ref<boolean>;
   isBasicInfoValid: ComputedRef<boolean>;
   generateAndDownloadKeys: () => Promise<void>;
   downloadKeysFile: () => void;
+  downloadPrivateKeyQR: () => Promise<void>;
   resetProcess: () => void;
 }
 
diff --git a/src/components/htm/HTMTokenBalancesTable.vue b/src/components/htm/HTMTokenBalancesTable.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3a5d03ff2b60336809e8f3adb4efcf731b769383
--- /dev/null
+++ b/src/components/htm/HTMTokenBalancesTable.vue
@@ -0,0 +1,283 @@
+<script setup lang="ts">
+import { mdiArrowUp, mdiArrowDown, mdiSend } from '@mdi/js';
+
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import TextTooltip from '@/components/ui/texttooltip/TextTooltip.vue';
+import type { CTokenPairBalanceDefinition } from '@/stores/tokens.store';
+
+// Props
+interface Props {
+  balances: CTokenPairBalanceDefinition[];
+  showActions?: boolean;
+  loading?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  showActions: true,
+  loading: false
+});
+
+// Emits
+const emit = defineEmits<{
+  transfer: [balance: CTokenPairBalanceDefinition['liquid']];
+  stake: [balance: CTokenPairBalanceDefinition['liquid']];
+  unstake: [balance: CTokenPairBalanceDefinition['vesting']];
+}>();
+
+const handleTransfer = (balance: CTokenPairBalanceDefinition['liquid']) => {
+  emit('transfer', balance);
+};
+
+const handleStake = (balance: CTokenPairBalanceDefinition['liquid']) => {
+  emit('stake', balance);
+};
+
+const handleUnstake = (balance: CTokenPairBalanceDefinition['vesting']) => {
+  emit('unstake', balance);
+};
+</script>
+
+<template>
+  <Card>
+    <CardContent class="p-0">
+      <div class="overflow-x-auto">
+        <table class="w-full">
+          <thead class="border-b">
+            <tr class="hover:bg-muted/50">
+              <th class="text-left p-4 font-medium text-muted-foreground">
+                Asset
+              </th>
+              <th class="text-right p-4 font-medium text-muted-foreground">
+                Balances
+              </th>
+              <th class="text-right p-4 font-medium text-muted-foreground">
+                Total
+              </th>
+              <th v-if="showActions" class="text-right p-4 font-medium text-muted-foreground">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="balance in balances"
+              :key="balance.liquid.assetNum"
+              class="border-b hover:bg-muted/50 transition-colors cursor-pointer"
+            >
+              <NuxtLink
+                :to="`/tokens/token?asset-num=${balance.liquid.assetNum}`"
+                class="contents keychainify-checked"
+              >
+                <!-- Asset Info -->
+                <td class="p-4">
+                  <div class="flex items-center gap-3">
+                    <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center overflow-hidden">
+                      <img
+                        v-if="balance.liquid.image"
+                        :src="balance.liquid.image"
+                        :alt="balance.liquid.symbol"
+                        class="h-full w-full object-cover"
+                      >
+                      <span
+                        v-else
+                        class="text-sm font-medium text-primary"
+                      >
+                        {{ balance.liquid.symbol?.charAt(0).toUpperCase() || '' }}
+                      </span>
+                    </div>
+                    <div>
+                      <div class="flex items-center gap-2">
+                        <span class="font-semibold">
+                          {{ balance.liquid.name }}
+                        </span>
+                        <span
+                          v-if="balance.vesting.balance > 0n"
+                          class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200"
+                        >
+                          <svg
+                            width="12"
+                            height="12"
+                            xmlns="http://www.w3.org/2000/svg"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              style="fill: currentColor"
+                              :d="mdiArrowUp"
+                            />
+                          </svg>
+                          STAKED
+                        </span>
+                      </div>
+                      <div class="text-sm text-muted-foreground">
+                        {{ balance.liquid.symbol }}
+                      </div>
+                      <div class="text-xs text-muted-foreground font-mono">
+                        {{ balance.liquid.assetNum }}
+                      </div>
+                    </div>
+                  </div>
+                </td>
+
+                <!-- Combined Balances -->
+                <td class="p-4 align-middle">
+                  <div class="ml-auto flex w-full max-w-[260px] flex-col gap-3 text-sm">
+                    <div class="flex items-center justify-between gap-3">
+                      <span
+                        :class="[
+                          'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold uppercase tracking-wide',
+                          balance.liquid.balance === 0n
+                            ? 'bg-muted text-muted-foreground border-transparent'
+                            : 'bg-emerald-50 text-emerald-700 border-emerald-200'
+                        ]"
+                      >
+                        Liquid
+                      </span>
+                      <span
+                        :class="[
+                          'font-medium tabular-nums',
+                          balance.liquid.balance === 0n ? 'text-muted-foreground' : 'text-foreground'
+                        ]"
+                      >
+                        {{ balance.liquid.displayBalance }}
+                      </span>
+                    </div>
+
+                    <div class="flex items-center justify-between gap-3">
+                      <span
+                        :class="[
+                          'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold uppercase tracking-wide',
+                          balance.vesting.balance === 0n
+                            ? 'bg-muted text-muted-foreground border-transparent'
+                            : 'bg-sky-50 text-sky-700 border-sky-200'
+                        ]"
+                      >
+                        Staked
+                      </span>
+                      <span
+                        :class="[
+                          'font-medium tabular-nums',
+                          balance.vesting.balance === 0n ? 'text-muted-foreground' : 'text-foreground'
+                        ]"
+                      >
+                        {{ balance.vesting.displayBalance }}
+                      </span>
+                    </div>
+
+                    <template v-if="balance.liquid.balance > 0n || balance.vesting.balance > 0n">
+                      <div class="flex h-1.5 w-full overflow-hidden rounded-full bg-muted">
+                        <div
+                          class="h-full bg-emerald-500 transition-all"
+                          :style="{ width: `${(balance.liquid.balance * 100n / (balance.liquid.balance + balance.vesting.balance))}%` }"
+                        />
+                        <div
+                          class="h-full bg-sky-500 transition-all"
+                          :style="{ width: `${(balance.vesting.balance * 100n / (balance.liquid.balance + balance.vesting.balance))}%` }"
+                        />
+                      </div>
+                      <div class="flex items-center justify-between text-xs text-muted-foreground">
+                        <span>Distribution</span>
+                        <span class="tabular-nums">
+                          {{ (Number((balance.liquid.balance * 10000n / (balance.liquid.balance + balance.vesting.balance))) / 100).toFixed(1) }}% liquid ·
+                          {{ (Number((balance.vesting.balance * 10000n / (balance.liquid.balance + balance.vesting.balance))) / 100).toFixed(1) }}% staked
+                        </span>
+                      </div>
+                    </template>
+
+                    <div
+                      v-else
+                      class="text-xs text-muted-foreground text-right"
+                    >
+                      No balance yet
+                    </div>
+                  </div>
+                </td>
+
+                <!-- Total Balance -->
+                <td class="p-4 text-right">
+                  <div class="font-semibold tabular-nums">
+                    {{ balance.displayTotal }}
+                  </div>
+                </td>
+
+                <!-- Actions -->
+                <td v-if="showActions" class="p-4">
+                  <div class="flex justify-end gap-1">
+                    <TextTooltip
+                      content="Transfer tokens"
+                    >
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        :disabled="balance.liquid.balance === 0n"
+                        @click.prevent="handleTransfer(balance.liquid)"
+                      >
+                        <svg
+                          width="14"
+                          height="14"
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            style="fill: currentColor"
+                            :d="mdiSend"
+                          />
+                        </svg>
+                      </Button>
+                    </TextTooltip>
+
+                    <TextTooltip
+                      content="Stake tokens"
+                    >
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        :disabled="balance.liquid.balance === 0n"
+                        @click.prevent="handleStake(balance.liquid)"
+                      >
+                        <svg
+                          width="14"
+                          height="14"
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            style="fill: currentColor"
+                            :d="mdiArrowUp"
+                          />
+                        </svg>
+                      </Button>
+                    </TextTooltip>
+
+                    <TextTooltip
+                      content="Unstake tokens"
+                    >
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        :disabled="balance.vesting.balance === 0n"
+                        @click.prevent="handleUnstake(balance.vesting)"
+                      >
+                        <svg
+                          width="14"
+                          height="14"
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            style="fill: currentColor"
+                            :d="mdiArrowDown"
+                          />
+                        </svg>
+                      </Button>
+                    </TextTooltip>
+                  </div>
+                </td>
+              </NuxtLink>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/src/components/htm/HTMUserCard.vue b/src/components/htm/HTMUserCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..67df088d8f60d707c1bf9cdda316460ef4cf8294
--- /dev/null
+++ b/src/components/htm/HTMUserCard.vue
@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import { mdiStar, mdiStarOutline } from '@mdi/js';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import type { CTokenUser } from '@/stores/tokens.store';
+
+interface Props {
+  user: CTokenUser;
+  showViewIcon?: boolean;
+  showStar?: boolean;
+  isFavorited?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  showViewIcon: false,
+  showStar: false,
+  isFavorited: false
+});
+
+const emit = defineEmits<{
+  toggleFavorite: [event: Event];
+}>();
+
+// Get avatar fallback text
+const getAvatarFallback = (user: CTokenUser): string => {
+  if (user.name)
+    return user.name.slice(0, 2).toUpperCase();
+
+  if (user.displayName)
+    return user.displayName.slice(0, 2).toUpperCase();
+
+  if (user.operationalKey)
+    return user.operationalKey.slice(3, 5).toUpperCase();
+
+  return '??';
+};
+
+// Handle star click
+const handleStarClick = (event: Event) => {
+  event.preventDefault();
+  event.stopPropagation();
+  emit('toggleFavorite', event);
+};
+</script>
+
+<template>
+  <Card class="transition-all">
+    <CardHeader class="pb-3">
+      <div class="flex items-start gap-4">
+        <!-- User Avatar -->
+        <Avatar
+          size="sm"
+          shape="circle"
+        >
+          <AvatarImage
+            v-if="user.profileImage"
+            :src="user.profileImage"
+            :alt="user.displayName || 'User'"
+          />
+          <AvatarFallback>
+            <svg
+              v-if="!user.profileImage"
+              width="24"
+              height="24"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="text-muted-foreground"
+            >
+              <path
+                style="fill: currentColor"
+                d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
+              />
+            </svg>
+            <span
+              v-else
+              class="text-sm font-semibold"
+            >
+              {{ getAvatarFallback(user) }}
+            </span>
+          </AvatarFallback>
+        </Avatar>
+
+        <!-- User Info -->
+        <div class="flex-1 min-w-0">
+          <div class="flex flex-col gap-1 mb-1">
+            <CardTitle class="text-lg truncate">
+              {{ user.displayName || 'Unknown User' }}
+            </CardTitle>
+          </div>
+          <CardDescription class="text-xs truncate font-mono">
+            {{ user.operationalKey }}
+          </CardDescription>
+        </div>
+
+        <!-- Star Icon -->
+        <button
+          v-if="showStar"
+          class="flex-shrink-0 p-1 rounded-full hover:bg-accent transition-colors"
+          :class="{ 'text-yellow-500': isFavorited, 'text-muted-foreground': !isFavorited }"
+          @click="handleStarClick"
+        >
+          <svg
+            width="20"
+            height="20"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+          >
+            <path
+              style="fill: currentColor"
+              :d="isFavorited ? mdiStar : mdiStarOutline"
+            />
+          </svg>
+        </button>
+
+        <!-- View Icon -->
+        <svg
+          v-else-if="showViewIcon"
+          width="20"
+          height="20"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="text-muted-foreground group-hover:text-foreground transition-colors flex-shrink-0"
+        >
+          <path
+            style="fill: currentColor"
+            d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+          />
+        </svg>
+      </div>
+    </CardHeader>
+
+    <CardContent class="space-y-4">
+      <!-- About -->
+      <p
+        v-if="user.about"
+        class="text-sm text-muted-foreground line-clamp-3 min-h-[3.75rem]"
+      >
+        {{ user.about }}
+      </p>
+      <p
+        v-else
+        class="text-sm text-muted-foreground italic min-h-[3.75rem]"
+      >
+        No bio provided
+      </p>
+
+      <!-- User Properties -->
+      <div class="space-y-2 text-sm">
+        <!-- Hive Account -->
+        <div
+          v-if="user.hiveAccount"
+          class="flex items-center justify-between"
+        >
+          <span class="text-muted-foreground">Hive Account:</span>
+          <span class="font-semibold text-foreground truncate ml-2">
+            @{{ user.hiveAccount }}
+          </span>
+        </div>
+
+        <!-- Location -->
+        <div
+          v-if="user.location"
+          class="flex items-center justify-between"
+        >
+          <span class="text-muted-foreground">Location:</span>
+          <span class="font-semibold text-foreground truncate ml-2">
+            {{ user.location }}
+          </span>
+        </div>
+
+        <!-- Website -->
+        <div
+          v-if="user.website"
+          class="flex items-center gap-2"
+        >
+          <svg
+            width="14"
+            height="14"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="text-muted-foreground flex-shrink-0"
+          >
+            <path
+              style="fill: currentColor"
+              d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
+            />
+          </svg>
+          <a
+            :href="user.website"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-primary hover:underline truncate"
+          >
+            {{ user.website.replace(/^https?:\/\//, '') }}
+          </a>
+        </div>
+
+        <!-- Social Links -->
+        <div
+          v-if="user.twitter || user.github"
+          class="flex items-center gap-3 pt-2"
+        >
+          <a
+            v-if="user.twitter"
+            :href="`https://twitter.com/${user.twitter}`"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-muted-foreground hover:text-foreground transition-colors"
+            title="Twitter"
+          >
+            <svg
+              width="18"
+              height="18"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path
+                style="fill: currentColor"
+                d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.70,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"
+              />
+            </svg>
+          </a>
+          <a
+            v-if="user.github"
+            :href="`https://github.com/${user.github}`"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-muted-foreground hover:text-foreground transition-colors"
+            title="GitHub"
+          >
+            <svg
+              width="18"
+              height="18"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+            >
+              <path
+                style="fill: currentColor"
+                d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
+              />
+            </svg>
+          </a>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/src/components/htm/HTMUserHeader.vue b/src/components/htm/HTMUserHeader.vue
new file mode 100644
index 0000000000000000000000000000000000000000..48cd706d16f1bdd70c164cd0433906378fcad1ff
--- /dev/null
+++ b/src/components/htm/HTMUserHeader.vue
@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { mdiAccountCircle, mdiEmail, mdiMapMarker, mdiTwitter, mdiGithub, mdiWeb } from '@mdi/js';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import type { CTokenUser } from '@/stores/tokens.store';
+
+// Props
+interface Props {
+  user: CTokenUser;
+}
+
+defineProps<Props>();
+
+// Get avatar fallback text
+const getAvatarFallback = (user: CTokenUser): string => {
+  if (user.name)
+    return user.name.slice(0, 2).toUpperCase();
+
+  if (user.displayName)
+    return user.displayName.slice(0, 2).toUpperCase();
+
+  if (user.operationalKey)
+    return user.operationalKey.slice(3, 5).toUpperCase();
+
+  return '??';
+};
+</script>
+
+<template>
+  <div class="flex flex-col md:flex-row items-start gap-6">
+    <!-- Avatar -->
+    <Avatar class="h-32 w-32 flex-shrink-0 border-4 border-background shadow-xl">
+      <AvatarImage
+        v-if="user.profileImage"
+        :src="user.profileImage"
+        :alt="user.displayName || 'User'"
+      />
+      <AvatarFallback class="text-4xl font-bold">
+        <svg
+          v-if="!user.profileImage"
+          width="64"
+          height="64"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="text-muted-foreground"
+        >
+          <path
+            style="fill: currentColor"
+            d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
+          />
+        </svg>
+        <span v-else>
+          {{ getAvatarFallback(user) }}
+        </span>
+      </AvatarFallback>
+    </Avatar>
+
+    <!-- User Info -->
+    <div class="flex-1 space-y-4">
+      <div>
+        <h1 class="text-4xl font-bold mb-2 text-foreground">
+          {{ user.displayName || 'Unknown User' }}
+        </h1>
+        <p v-if="user.name && user.name !== user.displayName" class="text-lg text-muted-foreground mb-3">
+          {{ user.name }}
+        </p>
+        <p v-if="user.about" class="text-muted-foreground max-w-2xl">
+          {{ user.about }}
+        </p>
+      </div>
+
+      <!-- Social Links -->
+      <div class="flex flex-wrap items-center gap-2">
+        <a
+          v-if="user.website"
+          :href="user.website"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-2 px-3 py-1.5 bg-background hover:bg-accent rounded-md text-sm transition-colors border"
+        >
+          <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path style="fill: currentColor" :d="mdiWeb" />
+          </svg>
+          Website
+        </a>
+        <a
+          v-if="user.twitter"
+          :href="`https://twitter.com/${user.twitter}`"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-2 px-3 py-1.5 bg-background hover:bg-accent rounded-md text-sm transition-colors border"
+        >
+          <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path style="fill: currentColor" :d="mdiTwitter" />
+          </svg>
+          @{{ user.twitter }}
+        </a>
+        <a
+          v-if="user.github"
+          :href="`https://github.com/${user.github}`"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-2 px-3 py-1.5 bg-background hover:bg-accent rounded-md text-sm transition-colors border"
+        >
+          <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path style="fill: currentColor" :d="mdiGithub" />
+          </svg>
+          {{ user.github }}
+        </a>
+        <a
+          v-if="user.hiveAccount"
+          :href="`https://explore.openhive.network/@${user.hiveAccount}`"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="inline-flex items-center gap-2 px-3 py-1.5 bg-background hover:bg-accent rounded-md text-sm transition-colors border"
+        >
+          <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path style="fill: currentColor" :d="mdiAccountCircle" />
+          </svg>
+          @{{ user.hiveAccount }}
+        </a>
+        <span
+          v-if="user.location"
+          class="inline-flex items-center gap-2 px-3 py-1.5 bg-background rounded-md text-sm border"
+        >
+          <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path style="fill: currentColor" :d="mdiMapMarker" />
+          </svg>
+          {{ user.location }}
+        </span>
+        <a
+          v-if="user.email"
+          :href="`mailto:${user.email}`"
+          class="inline-flex items-center gap-2 px-3 py-1.5 bg-background hover:bg-accent rounded-md text-sm transition-colors border"
+        >
+          <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+            <path style="fill: currentColor" :d="mdiEmail" />
+          </svg>
+          {{ user.email }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/htm/HTMUserKeys.vue b/src/components/htm/HTMUserKeys.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ee55b46bb933e20fbefaddf9430fdef75019ef1d
--- /dev/null
+++ b/src/components/htm/HTMUserKeys.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { Button as CopyButton } from '@/components/ui/copybutton';
+import type { CTokenUser } from '@/stores/tokens.store';
+
+// Props
+interface Props {
+  user: CTokenUser;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <div>
+    <h3 class="text-sm font-semibold text-muted-foreground uppercase tracking-wider mb-3">
+      Account Keys
+    </h3>
+    <div class="grid grid-cols-1 gap-3">
+      <!-- Operational Key -->
+      <div class="flex items-center gap-3 p-3 bg-muted/50 rounded-lg">
+        <div class="flex-1 min-w-0">
+          <p class="text-xs text-muted-foreground mb-1">Operational Key</p>
+          <code class="text-sm font-mono break-all">{{ user.operationalKey }}</code>
+        </div>
+        <CopyButton :value="user.operationalKey" />
+      </div>
+
+      <!-- Management Key -->
+      <div class="flex items-center gap-3 p-3 bg-muted/50 rounded-lg">
+        <div class="flex-1 min-w-0">
+          <p class="text-xs text-muted-foreground mb-1">Management Key</p>
+          <code class="text-sm font-mono break-all">{{ user.managementKey }}</code>
+        </div>
+        <CopyButton :value="user.managementKey" />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/htm/HTMUserMetadata.vue b/src/components/htm/HTMUserMetadata.vue
new file mode 100644
index 0000000000000000000000000000000000000000..dcd3d26c9415ac826a4f3d2e6a5c79fb0b86befe
--- /dev/null
+++ b/src/components/htm/HTMUserMetadata.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+
+// Props
+interface Props {
+  metadata: Record<string, unknown>;
+}
+
+defineProps<Props>();
+</script>
+
+<template>
+  <Card v-if="Object.keys(metadata).length > 0">
+    <CardHeader>
+      <CardTitle>Additional Information</CardTitle>
+      <CardDescription>User metadata stored on chain</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div class="space-y-3">
+        <div
+          v-for="(value, key) in metadata"
+          :key="key"
+          class="flex flex-col sm:flex-row sm:items-center justify-between py-3 border-b last:border-0 gap-2"
+        >
+          <span class="text-sm font-medium text-muted-foreground">{{ key }}</span>
+          <span class="font-mono text-sm break-all sm:text-right">{{ value }}</span>
+        </div>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/src/components/htm/amount/TokenAmountInput.vue b/src/components/htm/amount/TokenAmountInput.vue
index d3340c5a0f42f329bd32ab13fa6fd96a568ee032..dcf5227829bc188f8fff2fa234f7259942510ac9 100644
--- a/src/components/htm/amount/TokenAmountInput.vue
+++ b/src/components/htm/amount/TokenAmountInput.vue
@@ -2,7 +2,6 @@
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Label } from '@/components/ui/label';
 import { useTokensStore, type CTokenDisplayBase } from '@/stores/tokens.store';
-import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 import Input from './Input.vue';
 import TokenSelector from './TokenSelector.vue';
@@ -10,6 +9,7 @@ import TokenSelector from './TokenSelector.vue';
 type CommonProps = {
   disabled?: boolean;
   id?: string;
+  publicKey?: string;
 }
 
 type Props = (CommonProps & {
@@ -53,14 +53,22 @@ watch(validationError, () => {
   if (validationError.value)
     model.value = '';
 });
+const publicKey = computed(() => props.publicKey || tokensStore.getUserPublicKey());
+const refetchAvailableBalance = async (newValue: string | undefined) => {
+  if (!newValue || !selectedToken.value) return;
+  try {
+    const tokensBalance = await tokensStore.getBalanceSingleToken(newValue, selectedToken.value.assetNum);
+    selectedAvailableBalance.value = tokensBalance.displayBalance;
+  } catch {} // TODO: Move this balance fetching logic to the components above
+};
+watch(publicKey, refetchAvailableBalance);
 watch(selectedToken, async newValue => {
   if (newValue && 'displayBalance' in newValue) // only for CTokenBalanceDisplay - selector variant
     selectedAvailableBalance.value = newValue.displayBalance as string;
   else if (newValue) {
-    const key = CTokensProvider.getOperationalPublicKey();
-    if (!key) return;
+    if (!publicKey.value) return;
     try {
-      const tokensBalance = await tokensStore.getBalanceSingleToken(key, newValue.assetNum);
+      const tokensBalance = await tokensStore.getBalanceSingleToken(publicKey.value, newValue.assetNum);
       selectedAvailableBalance.value = tokensBalance.displayBalance;
     } catch {} // TODO: Move this balance fetching logic to the components above
   }
@@ -86,6 +94,8 @@ onMounted(() => {
     selectedToken.value = props.token;
   if (props.variant === 'explicit' && props.availableBalance)
     selectedAvailableBalance.value = props.availableBalance;
+  if (publicKey.value)
+    refetchAvailableBalance(publicKey.value);
 });
 </script>
 
diff --git a/src/components/htm/amount/UserSelector.vue b/src/components/htm/amount/UserSelector.vue
new file mode 100644
index 0000000000000000000000000000000000000000..52571f6c1abd3f1d7319d467a815e4b6403b4cc3
--- /dev/null
+++ b/src/components/htm/amount/UserSelector.vue
@@ -0,0 +1,426 @@
+<script setup lang="ts">
+import { mdiArrowDown, mdiStar } from '@mdi/js';
+import { Check, QrCode, Search } from 'lucide-vue-next';
+import { computed, ref, watch } from 'vue';
+
+import QrScanner from '@/components/QrScanner.vue';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { useFavoritesStore } from '@/stores/favorites.store';
+import { useTokensStore, type CTokenUser } from '@/stores/tokens.store';
+import { debounce } from '@/utils/debouncers';
+import { toastError } from '@/utils/parse-error';
+
+interface UserOption {
+  operationalKey: string;
+  displayName: string;
+  name: string;
+  profileImage?: string;
+  about?: string;
+  isFavorite: boolean;
+}
+
+interface Props {
+  modelValue?: CTokenUser | undefined;
+  placeholder?: string;
+  disabled?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: undefined,
+  placeholder: 'Select user or enter STM public key'
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: CTokenUser | undefined): void;
+}>();
+
+const tokensStore = useTokensStore();
+const favoritesStore = useFavoritesStore();
+
+// Reactive state
+const searchQuery = ref('');
+const selectedValue = ref<string | null>(props.modelValue?.operationalKey || null);
+const isSearching = ref(false);
+const searchResults = ref<CTokenUser[]>([]);
+const isOpen = ref(false);
+const showQrScanner = ref(false);
+
+// Watch props.modelValue and update selectedValue
+watch(() => props.modelValue, (newValue) => {
+  selectedValue.value = newValue?.operationalKey || null;
+});
+
+// Convert favorites to user options (memoized)
+const favoriteUsers = computed((): UserOption[] => {
+  // Only compute if we have favorites
+  if (favoritesStore.favoriteAccountsCount === 0) return [];
+
+  return favoritesStore.accounts.map(account => ({
+    operationalKey: account.operationalKey,
+    displayName: account.displayName || account.name || account.operationalKey.substring(0, 8),
+    name: account.name || account.displayName || '',
+    profileImage: account.profileImage,
+    about: account.about,
+    isFavorite: true
+  }));
+});
+
+// Convert search results to user options
+const searchedUsers = computed((): UserOption[] => {
+  return searchResults.value
+    .filter(user => !favoritesStore.isAccountFavorited(user.operationalKey))
+    .map(user => ({
+      operationalKey: user.operationalKey,
+      displayName: user.displayName,
+      name: user.name,
+      profileImage: user.profileImage,
+      about: user.about,
+      isFavorite: false
+    }));
+});
+
+// Filtered users based on search query (optimized)
+const filteredUsers = computed((): UserOption[] => {
+  const query = searchQuery.value.trim();
+
+  if (!query) {
+    // If no search, show only favorites
+    return favoriteUsers.value;
+  }
+
+  // Don't filter until we have at least 2 characters
+  if (query.length < 2)
+    return favoriteUsers.value;
+
+
+  const lowerQuery = query.toLowerCase();
+
+  // Combine and filter in one pass for better performance
+  const allUsersList = [...favoriteUsers.value, ...searchedUsers.value];
+
+  return allUsersList.filter(user =>
+    user.displayName.toLowerCase().includes(lowerQuery) ||
+    user.name.toLowerCase().includes(lowerQuery) ||
+    user.operationalKey.toLowerCase().includes(lowerQuery) ||
+    user.about?.toLowerCase().includes(lowerQuery)
+  );
+});
+
+// Selected user
+const selectedUser = ref<(CTokenUser & { isFavorite: boolean }) | undefined>(undefined);
+
+// Check if query is a public key (starts with STM)
+const isPublicKey = (query: string): boolean => {
+  return query.trim().toUpperCase().startsWith('STM');
+};
+
+// Search users via API or handle direct public key input
+const searchUsers = async (query: string) => {
+  const trimmedQuery = query.trim();
+
+  if (!trimmedQuery) {
+    searchResults.value = [];
+    return;
+  }
+
+  try {
+    isSearching.value = true;
+
+    // If it's a public key, create a minimal user entry
+    if (isPublicKey(trimmedQuery)) {
+      const response = await tokensStore.getUser(trimmedQuery);
+      searchResults.value = [response];
+    } else {
+      // Normal search
+      const response = await tokensStore.searchUsers(trimmedQuery, 1);
+      searchResults.value = response.items || [];
+    }
+  } catch (error) {
+    toastError('Failed to search users:', error);
+    searchResults.value = [];
+  } finally {
+    isSearching.value = false;
+  }
+};
+
+const debouncedSearch = debounce(searchUsers);
+
+// Watch search query with debounce
+watch(searchQuery, debouncedSearch);
+
+// Select user handler
+const selectUser = (user: UserOption) => {
+  selectedUser.value = {
+    operationalKey: user.operationalKey,
+    managementKey: '',
+    displayName: user.displayName,
+    name: user.name,
+    about: user.about || '',
+    profileImage: user.profileImage || '',
+    website: '',
+    metadata: {},
+    isFavorite: user.isFavorite
+  };
+
+  emit('update:modelValue', selectedUser.value);
+  isOpen.value = false;
+  searchQuery.value = '';
+  searchResults.value = [];
+};
+
+// Get initials for avatar fallback
+const getInitials = (displayName: string): string => {
+  const words = displayName.trim().split(/\s+/);
+  if (words.length >= 2 && words[0]?.[0] && words[1]?.[0])
+    return (words[0][0] + words[1][0]).toUpperCase();
+
+  return displayName.substring(0, 2).toUpperCase();
+};
+
+// Handle QR code scan
+const handleQrScan = async (decodedText: string) => {
+  const trimmedText = decodedText.trim();
+
+  let pk: string | undefined = undefined;
+
+  try {
+    const url = new URL(trimmedText);
+    const toSearch = url.searchParams.get('to');
+    if (toSearch)
+      pk = toSearch;
+  } catch {
+    if (isPublicKey(trimmedText))
+      pk = trimmedText;
+    else {
+      // Private key
+      if(trimmedText.length === 51) {
+        try {
+          const bk = await import('@hiveio/beekeeper');
+          const instance = await bk.default({ enableLogs: false, inMemory: true });
+          const { wallet } = await instance.createSession(Math.random().toString()).createWallet(Math.random().toString(), Math.random().toString(), true);
+          pk = await wallet.importKey(trimmedText);
+          await instance.delete();
+        } catch {}
+      }
+    }
+  }
+
+  if (pk) {
+    try {
+      const user = await tokensStore.getUser(pk);
+      selectUser({
+        operationalKey: user.operationalKey,
+        displayName: user.displayName,
+        name: user.name,
+        profileImage: user.profileImage,
+        about: user.about,
+        isFavorite: favoritesStore.isAccountFavorited(user.operationalKey)
+      });
+
+      return;
+    } catch {}
+  }
+
+  toastError('Failed to load user from QR code', new Error('No valid STM public key found'));
+};
+
+const openQrScanner = () => {
+  isOpen.value = false; // Close the popover
+  showQrScanner.value = true;
+};
+</script>
+
+<template>
+  <div class="border border-input rounded-md flex flex-row items-center">
+    <Popover v-model:open="isOpen">
+      <PopoverTrigger as-child class="border-l-0 border-t-0 border-b-0 border-r rounded-r-none">
+        <Button
+          variant="outline"
+          role="combobox"
+          :aria-expanded="isOpen"
+          :disabled="disabled"
+          as-child
+          class="w-full justify-between flex h-9 py-1 cursor-pointer font-normal"
+        >
+          <div
+            v-if="selectedValue"
+            class="flex items-center gap-2 truncate flex-1 min-w-0"
+          >
+            <Avatar class="h-5 w-5">
+              <AvatarImage
+                v-if="selectedUser?.profileImage"
+                :src="selectedUser.profileImage"
+                :alt="selectedUser.displayName"
+              />
+              <AvatarFallback class="text-xs">
+                {{ selectedUser ? getInitials(selectedUser.displayName) : 'U' }}
+              </AvatarFallback>
+            </Avatar>
+            <span class="text-sm truncate max-w-[280px]">
+              {{ selectedUser?.displayName || selectedValue }}
+            </span>
+            <svg
+              v-if="selectedUser?.isFavorite"
+              width="12"
+              height="12"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="text-yellow-500 flex-shrink-0"
+            >
+              <path
+                style="fill: currentColor"
+                :d="mdiStar"
+              />
+            </svg>
+          </div>
+          <span
+            v-else
+            class="text-muted-foreground truncate flex-1"
+          >
+            {{ placeholder }}
+          </span>
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="ml-2 h-4 w-4 shrink-0 opacity-50"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiArrowDown"
+            />
+          </svg>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-[400px] p-0" align="start">
+        <div class="flex items-center border-b px-3 py-2">
+          <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+          <Input
+            v-model="searchQuery"
+            placeholder="Search by name, address, or STM public key..."
+            class="h-8 border-0 focus-visible:ring-0 focus-visible:ring-offset-0"
+          />
+        </div>
+        <div class="max-h-[300px] overflow-y-auto">
+          <div v-if="isSearching" class="flex flex-col items-center gap-2 py-8">
+            <div class="h-8 w-8 animate-spin rounded-full border-4 border-muted border-t-primary" />
+            <span class="text-sm text-muted-foreground">Searching...</span>
+          </div>
+          <div v-else-if="filteredUsers.length === 0" class="flex flex-col items-center gap-2 py-8">
+            <Search class="h-8 w-8 opacity-40 text-muted-foreground" />
+            <span class="text-sm text-muted-foreground">
+              {{ !searchQuery.trim() ? 'Start typing to search users or enter STM public key' : 'No users found' }}
+            </span>
+          </div>
+          <div v-else class="p-1">
+            <!-- Favorites section -->
+            <div v-if="filteredUsers.some(u => u.isFavorite)">
+              <div class="px-2 py-1.5 text-xs font-semibold text-muted-foreground">
+                Favorites
+              </div>
+              <button
+                v-for="user in filteredUsers.filter(u => u.isFavorite)"
+                :key="user.operationalKey"
+                class="w-full flex items-center gap-3 px-2 py-2 rounded-sm hover:bg-accent transition-colors text-left"
+                :class="{ 'bg-accent': selectedValue === user.operationalKey }"
+                @click="selectUser(user)"
+              >
+                <Avatar class="h-8 w-8 flex-shrink-0">
+                  <AvatarImage
+                    v-if="user.profileImage"
+                    :src="user.profileImage"
+                    :alt="user.displayName"
+                  />
+                  <AvatarFallback class="text-xs">
+                    {{ getInitials(user.displayName) }}
+                  </AvatarFallback>
+                </Avatar>
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center gap-1.5">
+                    <span class="text-sm font-medium truncate">{{ user.displayName }}</span>
+                    <svg
+                      width="12"
+                      height="12"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      class="text-yellow-500 flex-shrink-0"
+                    >
+                      <path
+                        style="fill: currentColor"
+                        :d="mdiStar"
+                      />
+                    </svg>
+                  </div>
+                  <p v-if="user.about" class="text-xs text-muted-foreground truncate">
+                    {{ user.about }}
+                  </p>
+                </div>
+                <Check
+                  v-if="selectedValue === user.operationalKey"
+                  class="h-4 w-4 text-primary flex-shrink-0"
+                />
+              </button>
+            </div>
+
+            <!-- Search results section -->
+            <div v-if="filteredUsers.some(u => !u.isFavorite)">
+              <div
+                v-if="filteredUsers.some(u => u.isFavorite)"
+                class="px-2 py-1.5 text-xs font-semibold text-muted-foreground mt-2"
+              >
+                Search Results
+              </div>
+              <button
+                v-for="user in filteredUsers.filter(u => !u.isFavorite)"
+                :key="user.operationalKey"
+                class="w-full flex items-center gap-3 px-2 py-2 rounded-sm hover:bg-accent transition-colors text-left"
+                :class="{ 'bg-accent': selectedValue === user.operationalKey }"
+                @click="selectUser(user)"
+              >
+                <Avatar class="h-8 w-8 flex-shrink-0">
+                  <AvatarImage
+                    v-if="user.profileImage"
+                    :src="user.profileImage"
+                    :alt="user.displayName"
+                  />
+                  <AvatarFallback class="text-xs">
+                    {{ getInitials(user.displayName) }}
+                  </AvatarFallback>
+                </Avatar>
+                <div class="flex-1 min-w-0">
+                  <p class="text-sm font-medium truncate">{{ user.displayName }}</p>
+                  <p v-if="user.about" class="text-xs text-muted-foreground truncate">
+                    {{ user.about }}
+                  </p>
+                </div>
+                <Check
+                  v-if="selectedValue === user.operationalKey"
+                  class="h-4 w-4 text-primary flex-shrink-0"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+
+    <Button
+      variant="ghost"
+      size="icon"
+      class="w-10 rounded-none"
+      @click="openQrScanner"
+    >
+      <QrCode class="h-6 w-6" />
+    </Button>
+
+    <!-- QR Scanner Component -->
+    <QrScanner
+      v-model="showQrScanner"
+      @scan="handleQrScan"
+    />
+  </div>
+</template>
diff --git a/src/components/htm/amount/index.ts b/src/components/htm/amount/index.ts
index bf297fc1f2a5a9470b7e64d306faee535d41c6a0..54cb4410a590944a3163f3580b5846f00d302951 100644
--- a/src/components/htm/amount/index.ts
+++ b/src/components/htm/amount/index.ts
@@ -1 +1,2 @@
 export { default as TokenAmountInput } from './TokenAmountInput.vue';
+export { default as UserSelector } from './UserSelector.vue';
diff --git a/src/components/htm/tokens/QRCodeCard.vue b/src/components/htm/tokens/QRCodeCard.vue
index 4e98be6eafbfd8160f31303aed475ca48b079d5d..f28f3baff763cdbfc3b8a006c2a379eddfe3c83e 100644
--- a/src/components/htm/tokens/QRCodeCard.vue
+++ b/src/components/htm/tokens/QRCodeCard.vue
@@ -2,8 +2,9 @@
 import { computed, onMounted, ref, watch } from 'vue';
 
 import { Card, CardContent } from '@/components/ui/card';
+import { useTokensStore } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
-import CTokensProvider from '@/utils/wallet/ctokens/signer';
+import { generateQrCodeDataUrl } from '@/utils/qr/create-qr';
 
 const props = defineProps<{
   assetNum: number | string;
@@ -11,12 +12,11 @@ const props = defineProps<{
   memo?: string;
 }>();
 
-const qrCodeDataUrl = ref<string>('');
+const tokensStore = useTokensStore();
 
-const userOperationalKey = computed(() => CTokensProvider.getOperationalPublicKey());
+const qrCodeDataUrl = ref<string>('');
 
-/* eslint-disable-next-line @typescript-eslint/consistent-type-imports */
-let qrCode: undefined | typeof import('qrcode') = undefined;
+const userOperationalKey = computed(() => tokensStore.getUserPublicKey());
 
 const generateQRCode = async () => {
   // Generate QR code even without amount (amount is optional)
@@ -37,16 +37,8 @@ const generateQRCode = async () => {
 
     const url = `${baseUrl}/tokens/pos/send?${params.toString()}`;
 
-    if (!qrCode)
-      qrCode = await import('qrcode');
-
-    const dataUrl = await qrCode.toDataURL(url, {
-      width: 300,
-      margin: 2,
-      color: {
-        dark: '#000000',
-        light: '#FFFFFF'
-      }
+    const dataUrl = await generateQrCodeDataUrl(url, undefined, {
+      width: 300
     });
     qrCodeDataUrl.value = dataUrl;
     /* eslint-disable-next-line no-console */
diff --git a/src/components/htm/tokens/TokenCreationCard.vue b/src/components/htm/tokens/TokenCreationCard.vue
index c5f0df7fd0fadfa665e3847376e092b942a97f5f..178c434c7a40cdfdc30824c094306e86729fa7a2 100644
--- a/src/components/htm/tokens/TokenCreationCard.vue
+++ b/src/components/htm/tokens/TokenCreationCard.vue
@@ -11,6 +11,7 @@ import { Separator } from '@/components/ui/separator';
 import { Textarea } from '@/components/ui/textarea';
 import type { CTokenDisplayBase } from '@/stores/tokens.store';
 import { copyText } from '@/utils/copy';
+import { toastError } from '@/utils/parse-error';
 import type { validateTokenSymbol } from '@/utils/validators';
 
 interface Props {
@@ -63,8 +64,8 @@ const copyAssetNum = async () => {
   try {
     copyText(String(props.generatedAssetNum));
     toast.success('Asset Num copied to clipboard!');
-  } catch (_error) {
-    toast.error('Failed to copy Asset Num');
+  } catch {
+    toastError('Failed to copy Asset Num');
   }
 };
 </script>
diff --git a/src/components/htm/tokens/TokenCreationForm.vue b/src/components/htm/tokens/TokenCreationForm.vue
index 8a371adf4e1a4273ca48793241753beb886cfeda..7aa5d13e93f5e7012e76f1e18202e96653aaa1e5 100644
--- a/src/components/htm/tokens/TokenCreationForm.vue
+++ b/src/components/htm/tokens/TokenCreationForm.vue
@@ -2,7 +2,6 @@
 import type { asset, ITransaction } from '@hiveio/wax';
 import { mdiRocket, mdiLoading } from '@mdi/js';
 import type { asset_definition, asset_metadata_update, htm_operation } from '@mtyszczak-cargo/htm';
-import { toast } from 'vue-sonner';
 
 import HTMTokenPreview from '@/components/htm/HTMTokenPreview.vue';
 import TokenCreationCard from '@/components/htm/tokens/TokenCreationCard.vue';
@@ -15,6 +14,7 @@ import type { CTokenDisplayBase } from '@/stores/tokens.store';
 import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
+import { debounce } from '@/utils/debouncers';
 import { generateNAI as generateHTMNAI, parseAssetAmount, toVesting, assetNumFromNAI, naiFromAssetNum } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
@@ -60,19 +60,19 @@ const createButtonState = computed(() => {
 // Create token using HTM
 const createToken = async () => {
   if (!isFormValid.value) {
-    toast.error('Please fill all required fields and agree to disclaimer');
+    toastError('Please fill all required fields and agree to disclaimer');
     return;
   }
 
   // Check if user has a wallet connected
   if (!tokensStore.wallet) {
-    toast.error('Please connect your HTM wallet first');
+    toastError('Please connect your HTM wallet first');
     return;
   }
 
   // Check if user has a wallet connected
   if (walletStore.isL2Wallet) {
-    toast.error('Please connect your L1 wallet first');
+    toastError('Please connect your L1 wallet first');
     return;
   }
 
@@ -83,7 +83,7 @@ const createToken = async () => {
     const assetNum = generateAssetNum();
 
     if (!assetNum) {
-      toast.error('Failed to generate token Asset Num. Please try again.');
+      toastError('Failed to generate token Asset Num. Please try again.');
       return;
     }
   }
@@ -107,7 +107,7 @@ const createToken = async () => {
       nai: toVesting(nai, identifierPrecision),
       precision: identifierPrecision
     };
-    const owner = CTokensProvider.getOperationalPublicKey()!;
+    const owner = tokensStore.getUserPublicKey()!;
     const assetTokenName = tokenName.value.trim();
     const trimmedSymbol = tokenSymbol.value.trim();
     const trimmedDescription = tokenDescription.value.trim();
@@ -206,7 +206,7 @@ const previewToken = computed(() => {
 
   return {
     ...formToken.value,
-    ownerPublicKey: CTokensProvider.getOperationalPublicKey() || '',
+    ownerPublicKey: tokensStore.getUserPublicKey() || '',
     displayTotalSupply: initialSupply.value || '0',
     totalSupply: supplyValue,
     maxSupply: capped.value ? supplyValue : BigInt(0),
@@ -249,27 +249,21 @@ const isFormValid = computed(() => {
 // Symbol validation state
 const symbolValidation = computed(() => validateTokenSymbol(tokenSymbol.value));
 
-// Debounced token ID generation
-let debounceTimer: NodeJS.Timeout | null = null;
-
 // Auto-generate token ID when symbol changes (debounced)
-watch(tokenSymbol, (newSymbol) => {
-  // Clear previous timer
-  if (debounceTimer)
-    clearTimeout(debounceTimer);
-
+watch(tokenSymbol, debounce((newSymbol) => {
   // Reset state immediately when symbol is invalid
   if (!validateTokenSymbol(newSymbol).isValid) {
     generatedAssetNum.value = '';
     return;
   }
 
-  // Debounce the generation to avoid excessive calls
-  debounceTimer = setTimeout(() => {
-    if (symbolValidation.value.isValid)
-      generateAssetNum();
-  }, 300); // Wait 300ms after user stops typing
-});
+  generateAssetNum();
+}));
+
+// Auto-generate token ID when symbol changes (debounced)
+watch(precision, debounce(() => {
+  generateAssetNum();
+}));
 
 // Generate unique token ID
 const generateAssetNum = (): string | undefined => {
diff --git a/src/components/htm/tokens/TokenStakeCard.vue b/src/components/htm/tokens/TokenStakeCard.vue
index 822c61f5effc07f69150603121911367f6a6d117..30ae45d4af68e52b97a68abf27fe917422d03d76 100644
--- a/src/components/htm/tokens/TokenStakeCard.vue
+++ b/src/components/htm/tokens/TokenStakeCard.vue
@@ -8,7 +8,7 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/com
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { useSettingsStore } from '@/stores/settings.store';
-import type { CTokenBalanceDisplay, CTokenDefinitionDisplay } from '@/stores/tokens.store';
+import { useTokensStore, type CTokenBalanceDisplay, type CTokenDefinitionDisplay } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { isVesting, toLiquid, toVesting } from '@/utils/nai-tokens';
 import { toastError } from '@/utils/parse-error';
@@ -30,6 +30,7 @@ const emit = defineEmits<{
 
 const settingsStore = useSettingsStore();
 const walletStore = useWalletStore();
+const tokensStore = useTokensStore();
 const router = useRouter();
 
 const isStaking = ref(false);
@@ -100,7 +101,7 @@ const handleStake = async () => {
     await waitForTransactionStatus(
       () => ([{
         token_transform_operation: {
-          holder: CTokensProvider.getOperationalPublicKey()!,
+          holder: tokensStore.getUserPublicKey()!,
           receiver: stakeForm.value.receiver || undefined,
           amount: {
             amount: stakeForm.value.amount,
@@ -170,7 +171,7 @@ const handleUnstake = async () => {
     await waitForTransactionStatus(
       () => ([{
         token_transform_operation: {
-          holder: CTokensProvider.getOperationalPublicKey()!,
+          holder: tokensStore.getUserPublicKey()!,
           receiver: stakeForm.value.receiver || undefined,
           amount: {
             amount: stakeForm.value.amount,
diff --git a/src/components/htm/tokens/TokenTopHoldersCard.vue b/src/components/htm/tokens/TokenTopHoldersCard.vue
index 378c048fb8cd2ab152dedaecab669873ec7206f1..dbda4db9ba01a9e877f4757b4799f6ee78bdb017 100644
--- a/src/components/htm/tokens/TokenTopHoldersCard.vue
+++ b/src/components/htm/tokens/TokenTopHoldersCard.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
+import { mdiStar, mdiStarOutline } from '@mdi/js';
+import { toast } from 'vue-sonner';
+
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button as CopyButton } from '@/components/ui/copybutton';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { useFavoritesStore } from '@/stores/favorites.store';
 import type { CTokenDefinitionDisplay, CTokenUserRanked } from '@/stores/tokens.store';
 
 const props = defineProps<{
@@ -10,6 +14,33 @@ const props = defineProps<{
   topHolders: CTokenUserRanked[];
   isLoadingHolders: boolean;
 }>();
+
+const favoritesStore = useFavoritesStore();
+
+const toggleFavorite = (holder: CTokenUserRanked, event: Event) => {
+  event.preventDefault();
+  event.stopPropagation();
+
+  const isFavorited = favoritesStore.isAccountFavorited(holder.operationalKey);
+
+  if (isFavorited) {
+    favoritesStore.removeAccountFromFavorites(holder.operationalKey);
+    toast.success('Removed from favorites', {
+      description: `${holder.displayName} has been removed from your favorites`
+    });
+  } else {
+    favoritesStore.addAccountToFavorites({
+      operationalKey: holder.operationalKey,
+      displayName: holder.displayName,
+      name: holder.name,
+      profileImage: holder.profileImage,
+      about: holder.about
+    });
+    toast.success('Added to favorites', {
+      description: `${holder.displayName} has been added to your favorites`
+    });
+  }
+};
 </script>
 
 <template>
@@ -60,10 +91,11 @@ const props = defineProps<{
         v-else-if="props.topHolders.length > 0"
         class="space-y-2"
       >
-        <div
+        <NuxtLink
           v-for="(holder, index) in props.topHolders.slice(0, 10)"
           :key="holder.operationalKey"
-          class="flex items-center gap-4 p-3 rounded-lg border hover:border-primary/20 hover:bg-accent/50 transition-colors"
+          :to="`/tokens/users/${holder.operationalKey}`"
+          class="flex items-center gap-4 p-3 rounded-lg border hover:border-primary/20 hover:bg-accent/50 transition-colors group"
         >
           <div class="relative flex-shrink-0">
             <div class="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-primary/20 to-primary/10 text-sm font-bold text-primary border-2 border-primary/20">
@@ -94,16 +126,44 @@ const props = defineProps<{
               <p class="font-semibold text-foreground truncate">
                 {{ holder.displayName }}
               </p>
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger>
-                    <CopyButton :value="holder.operationalKey" />
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>Copy holder address</p>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
+              <div class="flex items-center gap-1">
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger>
+                      <CopyButton :value="holder.operationalKey" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Copy holder address</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger as-child>
+                      <button
+                        class="inline-flex items-center justify-center p-1.5 rounded-md transition-colors hover:bg-accent opacity-0 group-hover:opacity-100"
+                        @click="(e) => toggleFavorite(holder, e)"
+                      >
+                        <svg
+                          width="16"
+                          height="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 24 24"
+                          :class="favoritesStore.isAccountFavorited(holder.operationalKey) ? 'text-yellow-500' : 'text-muted-foreground'"
+                        >
+                          <path
+                            style="fill: currentColor"
+                            :d="favoritesStore.isAccountFavorited(holder.operationalKey) ? mdiStar : mdiStarOutline"
+                          />
+                        </svg>
+                      </button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{{ favoritesStore.isAccountFavorited(holder.operationalKey) ? 'Remove from favorites' : 'Add to favorites' }}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
             </div>
             <p class="text-sm text-muted-foreground">
               Rank #{{ holder.rank }}
@@ -118,7 +178,7 @@ const props = defineProps<{
               {{ props.token.symbol || 'tokens' }}
             </p>
           </div>
-        </div>
+        </NuxtLink>
       </div>
 
       <div
diff --git a/src/components/htm/tokens/TokenTransferCard.vue b/src/components/htm/tokens/TokenTransferCard.vue
index d91fb2e12ebb27256eed82882798a3875ed105b5..ab9d11fc30b112604f1d6c295f1f577c6e2d02c6 100644
--- a/src/components/htm/tokens/TokenTransferCard.vue
+++ b/src/components/htm/tokens/TokenTransferCard.vue
@@ -2,18 +2,19 @@
 import type { htm_operation } from '@mtyszczak-cargo/htm';
 
 import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
-import { TokenAmountInput } from '@/components/htm/amount';
+import { TokenAmountInput, UserSelector } from '@/components/htm/amount';
+import QrScanner from '@/components/QrScanner.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
-import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { useSettingsStore } from '@/stores/settings.store';
-import type { CTokenBalanceDisplay, CTokenDefinitionDisplay } from '@/stores/tokens.store';
+import { type CTokenUser, useTokensStore, type CTokenBalanceDisplay, type CTokenDefinitionDisplay } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import { isValidPublicKey, validateAmountPrecision } from '@/utils/validators';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
+import { TempCTokensSigner } from '@/utils/wallet/ctokens/temp-signer';
 
 const props = defineProps<{
   token: CTokenDefinitionDisplay;
@@ -26,11 +27,20 @@ const emit = defineEmits<{
   refresh: [];
 }>();
 
+const recipientData = ref<CTokenUser | undefined>(undefined);
+watch(recipientData, (newVal) => {
+  transferForm.value.to = newVal ? newVal.operationalKey : '';
+});
+
 const settingsStore = useSettingsStore();
 const walletStore = useWalletStore();
+const tokensStore = useTokensStore();
 const router = useRouter();
 
 const isTransferring = ref(false);
+const showQrScanner = ref(false);
+const scannedPrivateKey = ref<string | null>(null);
+const tempSigner = shallowRef<TempCTokensSigner | undefined>(undefined);
 
 // Transfer form
 const transferForm = ref({
@@ -53,10 +63,41 @@ const amountValidation = computed(() => {
   return validateAmountPrecision(transferForm.value.amount, props.token.precision);
 });
 
+// Handle QR code scan
+const handleQrScan = async (privateKey: string) => {
+  try {
+    scannedPrivateKey.value = privateKey;
+
+    // Create a temporary signer from the scanned private key
+    tempSigner.value = await TempCTokensSigner.for(privateKey);
+
+    showQrScanner.value = false;
+  } catch (error) {
+    toastError('Invalid private key from QR code', error);
+    scannedPrivateKey.value = null;
+    tempSigner.value = undefined;
+  }
+};
+
+// Clear scanned key
+const clearScannedKey = () => {
+  scannedPrivateKey.value = null;
+  if (tempSigner.value) {
+    tempSigner.value.destroy();
+    tempSigner.value = undefined;
+  }
+};
+
 // Handle transfer (simplified for now)
 const handleTransfer = async () => {
-  if (!props.token || !props.isLoggedIn) {
-    toastError('You must be logged in to transfer tokens', new Error('Not logged in'));
+  if (!props.token) {
+    toastError('Token information not available', new Error('Token not found'));
+    return;
+  }
+
+  // For non-logged-in users, require QR code
+  if (!props.isLoggedIn && !tempSigner.value) {
+    toastError('Please scan your private key QR code to sign the transaction', new Error('No signer available'));
     return;
   }
 
@@ -81,6 +122,15 @@ const handleTransfer = async () => {
   try {
     isTransferring.value = true;
 
+    // Determine the sender's public key
+    const senderPublicKey = tempSigner.value
+      ? tempSigner.value.publicKey
+      : tokensStore.getUserPublicKey();
+
+    if (!senderPublicKey)
+      throw new Error('Could not determine sender public key');
+
+
     // Wait for transaction status
     await waitForTransactionStatus(
       () => ([{
@@ -91,11 +141,13 @@ const handleTransfer = async () => {
             precision: props.token!.precision
           },
           receiver: transferForm.value.to,
-          sender: CTokensProvider.getOperationalPublicKey()!,
+          sender: senderPublicKey,
           memo: transferForm.value.memo
         }
       } satisfies htm_operation]),
-      'Transfer'
+      'Transfer',
+      true,
+      tempSigner.value // Use temp signer if available
     );
 
     // Reset form on success
@@ -105,6 +157,9 @@ const handleTransfer = async () => {
       memo: ''
     };
 
+    // Clear scanned key after successful transfer
+    clearScannedKey();
+
     // Emit refresh event to parent
     emit('refresh');
   } catch (error) {
@@ -154,70 +209,108 @@ const connectToHTM = async () => {
       </CardDescription>
     </CardHeader>
     <CardContent class="space-y-6 flex-1">
-      <!-- Not logged in state -->
+      <!-- Transfer form - shown when logged in OR has scanned QR code -->
       <div
-        v-if="!props.isLoggedIn"
-        class="text-center py-12 space-y-4"
+        class="space-y-5"
       >
-        <div class="w-16 h-16 mx-auto bg-muted rounded-full flex items-center justify-center">
-          <svg
-            width="24"
-            height="24"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="text-muted-foreground"
-          >
-            <path
-              style="fill: currentColor"
-              d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
-            />
-          </svg>
-        </div>
-        <p class="text-muted-foreground font-medium">
-          Connect your wallet to transfer tokens
-        </p>
-        <Button
-          size="lg"
-          @click="connectToHTM"
+        <!-- QR Code Signing Section (for non-logged-in users) -->
+        <div
+          class="p-4 border rounded-lg bg-muted/50 space-y-3"
         >
-          Connect Wallet
-        </Button>
-      </div>
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <svg
+                width="20"
+                height="20"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="text-primary"
+              >
+                <path
+                  style="fill: currentColor"
+                  d="M3,11H5V13H3V11M11,5H13V9H11V5M9,11H13V15H11V13H9V11M15,11H17V13H19V11H21V13H19V15H21V19H19V21H17V19H13V21H11V17H15V15H17V13H15V11M19,19V15H17V19H19M15,3H21V9H15V3M17,5V7H19V5H17M3,3H9V9H3V3M5,5V7H7V5H5M3,15H9V21H3V15M5,17V19H7V17H5Z"
+                />
+              </svg>
+              <Label class="text-sm font-medium">Sign with QR Code</Label>
+            </div>
+            <Button
+              v-if="!tempSigner"
+              size="sm"
+              variant="outline"
+              @click="showQrScanner = true"
+            >
+              <svg
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="mr-1.5"
+              >
+                <path
+                  style="fill: currentColor"
+                  d="M4,4H10V10H4V4M20,4V10H14V4H20M14,15H16V13H14V11H16V13H18V11H20V13H18V15H20V18H18V20H16V18H13V20H11V16H14V15M16,15V18H18V15H16M4,20V14H10V20H4M6,6V8H8V6H6M16,6V8H18V6H16M6,16V18H8V16H6M4,11H6V13H4V11M9,11H13V15H11V13H9V11M11,6H13V10H11V6M2,2V6H0V2A2,2 0 0,1 2,0H6V2H2M22,0A2,2 0 0,1 24,2V6H22V2H18V0H22M2,18V22H6V24H2A2,2 0 0,1 0,22V18H2M22,22V18H24V22A2,2 0 0,1 22,24H18V22H22Z"
+                />
+              </svg>
+              Scan Private Key
+            </Button>
+          </div>
 
-      <!-- No balance / token not owned state -->
-      <div
-        v-else-if="!props.userBalance || props.userBalance.balance === 0n"
-        class="text-center py-12 space-y-4"
-      >
-        <div class="w-16 h-16 mx-auto bg-amber-100 dark:bg-amber-900/20 rounded-full flex items-center justify-center">
-          <svg
-            width="24"
-            height="24"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="text-amber-600 dark:text-amber-400"
+          <!-- Scanned Key Display -->
+          <div
+            v-if="tempSigner"
+            class="flex items-center gap-2 p-2 bg-background rounded border border-green-500"
           >
-            <path
-              style="fill: currentColor"
-              d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
-            />
-          </svg>
-        </div>
-        <div>
-          <p class="text-foreground font-semibold mb-2">
-            You don't own this token
-          </p>
-          <p class="text-sm text-muted-foreground">
-            Your account doesn't have any {{ props.token.symbol || props.token.name }} tokens to transfer.
+            <svg
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="text-green-500 flex-shrink-0"
+            >
+              <path
+                style="fill: currentColor"
+                d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"
+              />
+            </svg>
+            <span class="text-xs font-mono text-muted-foreground flex-1 truncate">
+              {{ tempSigner.publicKey }}
+            </span>
+            <Button
+              size="sm"
+              variant="ghost"
+              @click="clearScannedKey"
+            >
+              <svg
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  style="fill: currentColor"
+                  d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+                />
+              </svg>
+            </Button>
+          </div>
+
+          <p class="text-xs text-muted-foreground">
+            {{ tempSigner ? 'Private key loaded. Ready to sign transaction.' : 'Scan your private key QR code to sign the transfer without logging in.' }}
           </p>
+
+          <!-- Alternative: Connect Wallet -->
+          <div v-if="!props.isLoggedIn && !tempSigner" class="pt-2 border-t">
+            <Button
+              variant="link"
+              size="sm"
+              class="w-full text-xs"
+              @click="connectToHTM"
+            >
+              Or connect your persistent wallet instead
+            </Button>
+          </div>
         </div>
-      </div>
 
-      <!-- Transfer form - only shown when logged in and has balance -->
-      <div
-        v-else
-        class="space-y-5"
-      >
         <div class="space-y-2">
           <Label
             for="recipient"
@@ -225,13 +318,13 @@ const connectToHTM = async () => {
           >
             Recipient Address (Public Key)
           </Label>
-          <Input
+          <UserSelector
             id="recipient"
-            v-model="transferForm.to"
-            placeholder="Enter recipient public key address (STM...)"
+            v-model="recipientData"
             :disabled="isTransferring"
             class="transition-colors font-mono text-sm"
             :class="transferForm.to ? (isRecipientValid ? 'border-green-500 focus-visible:ring-green-500' : 'border-red-500 focus-visible:ring-red-500') : ''"
+            placeholder="Enter recipient public key (STM...)"
           />
           <p class="text-xs text-muted-foreground">
             Enter a valid public key address starting with STM (not a Hive account name)
@@ -296,4 +389,10 @@ const connectToHTM = async () => {
       </div>
     </CardContent>
   </Card>
+
+  <!-- QR Scanner Modal -->
+  <QrScanner
+    v-model="showQrScanner"
+    @scan="handleQrScan"
+  />
 </template>
diff --git a/src/components/navigation/AppHeader.vue b/src/components/navigation/AppHeader.vue
index f2841b87b2eb85ed82fac7698703803e422d3f10..2183547af9359b655d061bef9346f2d2f0d4e2e1 100644
--- a/src/components/navigation/AppHeader.vue
+++ b/src/components/navigation/AppHeader.vue
@@ -17,26 +17,10 @@ const hasAnyAccount = computed(() =>
   (settingsStore.settings.account !== undefined && walletStore.hasWallet) ||
   tokensStore.wallet !== undefined
 );
-
-const route = useRoute();
-
-const hasTokenInRoute = computed(() => {
-  return route.fullPath.includes('/tokens/');
-});
-const hasL1WalletConnected = computed(() => walletStore.hasWallet && !walletStore.isL2Wallet);
 </script>
 
 <template>
   <header class="w-full h-[60px] bg-background">
-    <div
-      v-if="hasTokenInRoute && !hasL1WalletConnected"
-      class="fixed bottom-0 z-12 select-none cursor-pointer dark:bg-blue-800 bg-blue-600 px-4 h-[20px] w-full md:w-[calc(100%-var(--sidebar-width))] flex flex-row justify-center items-center"
-      @click="walletStore.openWalletSelectModal()"
-    >
-      <span class="text-xs font-semibold text-white/90">
-        You are using L1 proxy account.
-      </span>
-    </div>
     <div class="fixed top-0 z-10 bg-background/60 backdrop-blur-sm px-4 h-[60px] border-b w-full md:w-[calc(100%-var(--sidebar-width))] flex items-center justify-between">
       <ToggleSidebar />
       <AccountSwitcher v-if="settingsStore.isLoaded && hasAnyAccount" />
diff --git a/src/components/onboarding/WalletOnboarding.vue b/src/components/onboarding/WalletOnboarding.vue
index a0086b565e6665beef55b2f9ffdace2d7c5bd97b..82ad016c34867fb9bc8114ca2a220d7c947cb92f 100644
--- a/src/components/onboarding/WalletOnboarding.vue
+++ b/src/components/onboarding/WalletOnboarding.vue
@@ -14,7 +14,7 @@ const emit = defineEmits(['complete', 'close']);
 const selectedWallet = ref<UsedWallet | null>(null);
 const selectedAccount = ref<string | null>(null);
 
-const close = () => {
+const complete = () => {
   emit('complete', { wallet: selectedWallet.value!, account: selectedAccount.value! });
 };
 
@@ -82,7 +82,7 @@ const backToStage1 = () => {
         v-if="stage_3_thank_you"
         :wallet="selectedWallet!"
         :account="selectedAccount!"
-        @close="close"
+        @close="complete"
       />
     </div>
   </div>
diff --git a/src/components/ui/badge/Badge.vue b/src/components/ui/badge/Badge.vue
new file mode 100644
index 0000000000000000000000000000000000000000..03745685633a1ea9492e38b010eef28d7e03d704
--- /dev/null
+++ b/src/components/ui/badge/Badge.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { BadgeVariants } from "."
+import { cn } from "@/lib/utils"
+import { badgeVariants } from "."
+
+const props = defineProps<{
+  variant?: BadgeVariants["variant"]
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>
diff --git a/src/components/ui/badge/index.ts b/src/components/ui/badge/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5ab6ef6d7f5c81ff9ba3811e333e0702f4a88b20
--- /dev/null
+++ b/src/components/ui/badge/index.ts
@@ -0,0 +1,26 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Badge } from "./Badge.vue"
+
+export const badgeVariants = cva(
+  "inline-flex gap-1 items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>
diff --git a/src/components/ui/pagination/Pagination.vue b/src/components/ui/pagination/Pagination.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d3afe9568a0adbf859dc65fd8995eab275e2b3af
--- /dev/null
+++ b/src/components/ui/pagination/Pagination.vue
@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { mdiChevronLeft, mdiChevronRight, mdiChevronDoubleLeft, mdiChevronDoubleRight } from '@mdi/js';
+import { Button } from '@/components/ui/button';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  maxVisiblePages?: number;
+  loading?: boolean;
+}
+
+interface PaginationEmits {
+  (e: 'update:currentPage', page: number): void;
+  (e: 'pageChange', page: number): void;
+}
+
+const props = withDefaults(defineProps<PaginationProps>(), {
+  maxVisiblePages: 5,
+  loading: false
+});
+
+const emit = defineEmits<PaginationEmits>();
+
+// Calculate which page numbers to display
+const visiblePages = computed(() => {
+  const { currentPage, totalPages, maxVisiblePages } = props;
+
+  if (totalPages <= maxVisiblePages) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
+  }
+
+  const halfVisible = Math.floor(maxVisiblePages / 2);
+  let start = Math.max(1, currentPage - halfVisible);
+  let end = Math.min(totalPages, start + maxVisiblePages - 1);
+
+  // Adjust start if we're near the end
+  if (end - start < maxVisiblePages - 1) {
+    start = Math.max(1, end - maxVisiblePages + 1);
+  }
+
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+});
+
+const showFirstEllipsis = computed(() => {
+  const pages = visiblePages.value;
+  return pages.length > 0 && pages[0]! > 1;
+});
+
+const showLastEllipsis = computed(() => {
+  const pages = visiblePages.value;
+  return pages.length > 0 && pages[pages.length - 1]! < props.totalPages;
+});
+
+const goToPage = (page: number) => {
+  if (page < 1 || page > props.totalPages || page === props.currentPage || props.loading) {
+    return;
+  }
+
+  emit('update:currentPage', page);
+  emit('pageChange', page);
+};
+
+const goToFirst = () => goToPage(1);
+const goToPrevious = () => goToPage(props.currentPage - 1);
+const goToNext = () => goToPage(props.currentPage + 1);
+const goToLast = () => goToPage(props.totalPages);
+</script>
+
+<template>
+  <nav
+    v-if="totalPages > 0"
+    class="flex items-center justify-center gap-1"
+    aria-label="Pagination"
+  >
+    <!-- First Page Button -->
+    <Button
+      variant="outline"
+      size="icon"
+      :disabled="currentPage === 1 || loading"
+      @click="goToFirst"
+      aria-label="Go to first page"
+    >
+      <svg
+        width="18"
+        height="18"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+      >
+        <path
+          style="fill: currentColor"
+          :d="mdiChevronDoubleLeft"
+        />
+      </svg>
+    </Button>
+
+    <!-- Previous Page Button -->
+    <Button
+      variant="outline"
+      size="icon"
+      :disabled="currentPage === 1 || loading"
+      @click="goToPrevious"
+      aria-label="Go to previous page"
+    >
+      <svg
+        width="18"
+        height="18"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+      >
+        <path
+          style="fill: currentColor"
+          :d="mdiChevronLeft"
+        />
+      </svg>
+    </Button>
+
+    <!-- First Ellipsis -->
+    <span v-if="showFirstEllipsis" class="px-2 text-muted-foreground">
+      ...
+    </span>
+
+    <!-- Page Numbers -->
+    <Button
+      v-for="page in visiblePages"
+      :key="page"
+      :variant="page === currentPage ? 'default' : 'outline'"
+      size="icon"
+      :disabled="loading"
+      @click="goToPage(page)"
+      :aria-label="`Go to page ${page}`"
+      :aria-current="page === currentPage ? 'page' : undefined"
+    >
+      {{ page }}
+    </Button>
+
+    <!-- Last Ellipsis -->
+    <span v-if="showLastEllipsis" class="px-2 text-muted-foreground">
+      ...
+    </span>
+
+    <!-- Next Page Button -->
+    <Button
+      variant="outline"
+      size="icon"
+      :disabled="currentPage === totalPages || loading"
+      @click="goToNext"
+      aria-label="Go to next page"
+    >
+      <svg
+        width="18"
+        height="18"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+      >
+        <path
+          style="fill: currentColor"
+          :d="mdiChevronRight"
+        />
+      </svg>
+    </Button>
+
+    <!-- Last Page Button -->
+    <Button
+      variant="outline"
+      size="icon"
+      :disabled="currentPage === totalPages || loading"
+      @click="goToLast"
+      aria-label="Go to last page"
+    >
+      <svg
+        width="18"
+        height="18"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+      >
+        <path
+          style="fill: currentColor"
+          :d="mdiChevronDoubleRight"
+        />
+      </svg>
+    </Button>
+  </nav>
+</template>
diff --git a/src/components/ui/pagination/index.ts b/src/components/ui/pagination/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..b60aa92687bb82f5310132ffc71e933439fbe78e
--- /dev/null
+++ b/src/components/ui/pagination/index.ts
@@ -0,0 +1 @@
+export { default as Pagination } from './Pagination.vue';
diff --git a/src/components/ui/popover/Popover.vue b/src/components/ui/popover/Popover.vue
new file mode 100644
index 0000000000000000000000000000000000000000..18a762ae186453df785e47b0d57256b8bf57dcd4
--- /dev/null
+++ b/src/components/ui/popover/Popover.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from "reka-ui"
+import { PopoverRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <PopoverRoot v-bind="forwarded">
+    <slot />
+  </PopoverRoot>
+</template>
diff --git a/src/components/ui/popover/PopoverContent.vue b/src/components/ui/popover/PopoverContent.vue
new file mode 100644
index 0000000000000000000000000000000000000000..701e4c6a688a8194dea06c6b79fb4f95ddf10dbf
--- /dev/null
+++ b/src/components/ui/popover/PopoverContent.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  PopoverContent,
+  PopoverPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<PopoverContentProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    align: "center",
+    sideOffset: 4,
+  },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <PopoverPortal>
+    <PopoverContent
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        cn(
+          'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </PopoverContent>
+  </PopoverPortal>
+</template>
diff --git a/src/components/ui/popover/PopoverTrigger.vue b/src/components/ui/popover/PopoverTrigger.vue
new file mode 100644
index 0000000000000000000000000000000000000000..185b1178d240021efff4b8b2f3512384759b28ee
--- /dev/null
+++ b/src/components/ui/popover/PopoverTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from "reka-ui"
+import { PopoverTrigger } from "reka-ui"
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger v-bind="props">
+    <slot />
+  </PopoverTrigger>
+</template>
diff --git a/src/components/ui/popover/index.ts b/src/components/ui/popover/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a7eb883a3d2ad2831293bfce56c5ea0acc196004
--- /dev/null
+++ b/src/components/ui/popover/index.ts
@@ -0,0 +1,4 @@
+export { default as Popover } from "./Popover.vue"
+export { default as PopoverContent } from "./PopoverContent.vue"
+export { default as PopoverTrigger } from "./PopoverTrigger.vue"
+export { PopoverAnchor } from "reka-ui"
diff --git a/src/components/ui/table/Table.vue b/src/components/ui/table/Table.vue
new file mode 100644
index 0000000000000000000000000000000000000000..26c7c45cf2f29a577400c7061521c2a8b8776da2
--- /dev/null
+++ b/src/components/ui/table/Table.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div class="relative w-full overflow-auto">
+    <table :class="cn('w-full caption-bottom text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>
diff --git a/src/components/ui/table/TableBody.vue b/src/components/ui/table/TableBody.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fadb9a7b3ff5121977fea412c9fcdcea503930aa
--- /dev/null
+++ b/src/components/ui/table/TableBody.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
+    <slot />
+  </tbody>
+</template>
diff --git a/src/components/ui/table/TableCaption.vue b/src/components/ui/table/TableCaption.vue
new file mode 100644
index 0000000000000000000000000000000000000000..a2bf57f7f03cb09b7a61f13647bbed2ea42c6671
--- /dev/null
+++ b/src/components/ui/table/TableCaption.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
+    <slot />
+  </caption>
+</template>
diff --git a/src/components/ui/table/TableCell.vue b/src/components/ui/table/TableCell.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8ff4a7fb3f89d10dc761a74d8aa5c9e00c506778
--- /dev/null
+++ b/src/components/ui/table/TableCell.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <td
+    :class="
+      cn(
+        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>
diff --git a/src/components/ui/table/TableEmpty.vue b/src/components/ui/table/TableEmpty.vue
new file mode 100644
index 0000000000000000000000000000000000000000..95193286d84ba42475b4d478743d23087a151309
--- /dev/null
+++ b/src/components/ui/table/TableEmpty.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { cn } from "@/lib/utils"
+import TableCell from "./TableCell.vue"
+import TableRow from "./TableRow.vue"
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes["class"]
+  colspan?: number
+}>(), {
+  colspan: 1,
+})
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>
diff --git a/src/components/ui/table/TableFooter.vue b/src/components/ui/table/TableFooter.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7f3bf64572f3d3c22b9e6356a000e694be75a94e
--- /dev/null
+++ b/src/components/ui/table/TableFooter.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
+    <slot />
+  </tfoot>
+</template>
diff --git a/src/components/ui/table/TableHead.vue b/src/components/ui/table/TableHead.vue
new file mode 100644
index 0000000000000000000000000000000000000000..5761761d8a75d676ae0ae6f6045e9dc4997dcb25
--- /dev/null
+++ b/src/components/ui/table/TableHead.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)">
+    <slot />
+  </th>
+</template>
diff --git a/src/components/ui/table/TableHeader.vue b/src/components/ui/table/TableHeader.vue
new file mode 100644
index 0000000000000000000000000000000000000000..66e1e60262a8822d4933f6a8016e03b82bc78c25
--- /dev/null
+++ b/src/components/ui/table/TableHeader.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <thead :class="cn('[&_tr]:border-b', props.class)">
+    <slot />
+  </thead>
+</template>
diff --git a/src/components/ui/table/TableRow.vue b/src/components/ui/table/TableRow.vue
new file mode 100644
index 0000000000000000000000000000000000000000..036db304d8f9c6e6b982e2144a970408a9ec437d
--- /dev/null
+++ b/src/components/ui/table/TableRow.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tr :class="cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)">
+    <slot />
+  </tr>
+</template>
diff --git a/src/components/ui/table/index.ts b/src/components/ui/table/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3be308b55d8f9a318b419928d8c0a88df2137a26
--- /dev/null
+++ b/src/components/ui/table/index.ts
@@ -0,0 +1,9 @@
+export { default as Table } from "./Table.vue"
+export { default as TableBody } from "./TableBody.vue"
+export { default as TableCaption } from "./TableCaption.vue"
+export { default as TableCell } from "./TableCell.vue"
+export { default as TableEmpty } from "./TableEmpty.vue"
+export { default as TableFooter } from "./TableFooter.vue"
+export { default as TableHead } from "./TableHead.vue"
+export { default as TableHeader } from "./TableHeader.vue"
+export { default as TableRow } from "./TableRow.vue"
diff --git a/src/components/utilcards/MemoEncryptCard.vue b/src/components/utilcards/MemoEncryptCard.vue
index 94dcae67533f8045bdc239d42e3c4909a97becec..186bc0b5ed63c64d1834652c7ce5450954c5b58b 100644
--- a/src/components/utilcards/MemoEncryptCard.vue
+++ b/src/components/utilcards/MemoEncryptCard.vue
@@ -8,13 +8,14 @@ import { Input } from '@/components/ui/input';
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { Textarea } from '@/components/ui/textarea';
 import { useSettingsStore } from '@/stores/settings.store';
+import { useTokensStore } from '@/stores/tokens.store';
 import { useWalletStore } from '@/stores/wallet.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
-import type CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 const walletStore = useWalletStore();
 const settingsStore = useSettingsStore();
+const tokensStore = useTokensStore();
 
 const hasWallet = computed(() => walletStore.hasWallet);
 const wallet = computed(() => walletStore.wallet);
@@ -48,7 +49,7 @@ const useMyMemoKey = async () => {
 
     if(walletStore.isL2Wallet) {
       // XXX: Maybe handle this in a better way in the future - maybe a common interface for L2 wallets?
-      const key = (wallet.value as CTokensProvider)!.publicKey;
+      const key = tokensStore.getUserPublicKey();
       if (key)
         encryptForKey.value = key;
     } else {
diff --git a/src/components/utilcards/RequestAccountCreateManual.vue b/src/components/utilcards/RequestAccountCreateManual.vue
index 840227a1a03a9162ee4b56bd1eb423d2cb780798..d23d81e10d252c4e2bf492b705441661e1f9123e 100644
--- a/src/components/utilcards/RequestAccountCreateManual.vue
+++ b/src/components/utilcards/RequestAccountCreateManual.vue
@@ -131,7 +131,7 @@ const resetProcess = () => {
 
 const generateAndDownloadAuthorityData = async () => {
   if (!accountNameValid.value) {
-    toast.error('Please enter a valid account name first');
+    toastError('Please enter a valid account name first');
     return;
   }
 
@@ -169,9 +169,6 @@ const generateAndDownloadAuthorityData = async () => {
     toast.success('Authority data generated and downloaded successfully!');
 
   } catch (error) {
-    toast.error('Failed to generate authority data', {
-      description: 'Please try again or check your connection.'
-    });
     toastError('Failed to generate authority data', error);
   } finally {
     isGeneratingKeys.value = false;
diff --git a/src/components/wallet/MetamaskConnectionManager.vue b/src/components/wallet/MetamaskConnectionManager.vue
index 4d74b9a864b89459bf1b816413e2f8d0a88f07b4..70e69650f87eba8f3ad4c1452b9523cfd022566c 100644
--- a/src/components/wallet/MetamaskConnectionManager.vue
+++ b/src/components/wallet/MetamaskConnectionManager.vue
@@ -56,7 +56,7 @@ const parseMetamaskPublicKeys = async () => {
       await metamaskStore.connect(0, 'posting');
       isMetamaskConnected.value = metamaskStore.isConnected;
     } catch {
-      toast.error('Metamask is not installed or not connected');
+      toastError('Metamask is not installed or not connected');
       return;
     }
 
diff --git a/src/composables/useHTMAutoLogin.ts b/src/composables/useHTMAutoLogin.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a29a76e3dd76db65910b2c14b36f3e169efd9e16
--- /dev/null
+++ b/src/composables/useHTMAutoLogin.ts
@@ -0,0 +1,64 @@
+import { ref, computed } from 'vue';
+
+/**
+ * Composable for HTM auto-login functionality
+ * Handles password encryption toggle and auto-login password generation
+ */
+export const useHTMAutoLogin = () => {
+  const encryptKeys = ref(true);
+  const password = ref('');
+  const repeatPassword = ref('');
+
+  // Show warning when encryption is disabled
+  const showEncryptionWarning = computed(() => !encryptKeys.value);
+
+  // Check if passwords match
+  const passwordsMatch = computed(() => {
+    if (!encryptKeys.value) return true;
+    if (!password.value || !repeatPassword.value) return true;
+    return password.value === repeatPassword.value;
+  });
+
+  // Check if password fields are valid
+  const isPasswordValid = computed(() => {
+    if (!encryptKeys.value) return true;
+    return password.value.trim().length > 0 &&
+           repeatPassword.value.trim().length > 0 &&
+           passwordsMatch.value;
+  });
+
+  // Generate a random password when encryption is disabled
+  const generateRandomPassword = (): string => {
+    const randomPart1 = Math.random().toString(36).substring(2, 15);
+    const randomPart2 = Math.random().toString(36).substring(2, 15);
+    const randomPart3 = Date.now().toString(36);
+    return `${randomPart1}${randomPart2}${randomPart3}`;
+  };
+
+  // Get the password to use (either user-provided or random)
+  const getPasswordToUse = (): string => {
+    if (encryptKeys.value) {
+      localStorage.removeItem('htm_random_password');
+
+      return password.value;
+    }
+
+    // Generate random password and store in localStorage (client-side only)
+    const randomPassword = generateRandomPassword();
+
+    // Safe localStorage access for SSR
+    localStorage.setItem('htm_random_password', randomPassword);
+
+    return randomPassword;
+  };
+
+  return {
+    encryptKeys,
+    password,
+    repeatPassword,
+    showEncryptionWarning,
+    passwordsMatch,
+    isPasswordValid,
+    getPasswordToUse
+  };
+};
diff --git a/src/layouts/common/CommonLayout.vue b/src/layouts/common/CommonLayout.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3b41520eb4fe74f51548de5110b54e74a0755ce3
--- /dev/null
+++ b/src/layouts/common/CommonLayout.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { ref, onMounted, defineAsyncComponent } from 'vue';
+
+import AppSidebar from '@/components/navigation';
+import AppHeader from '@/components/navigation/AppHeader.vue';
+import { SidebarProvider } from '@/components/ui/sidebar';
+import { useFavoritesStore } from '@/stores/favorites.store';
+import type { UsedWallet } from '@/stores/settings.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useUserStore } from '@/stores/user.store';
+import { useWalletStore } from '@/stores/wallet.store';
+import { toastError } from '@/utils/parse-error';
+
+const route = useRoute();
+
+const hasTokenInRoute = computed(() => {
+  return route.fullPath.includes('/tokens/');
+});
+
+const WalletOnboarding = defineAsyncComponent(() => import('@/components/onboarding/index'));
+const HTMProvidePassword = defineAsyncComponent(() => import('@/components/htm/HTMProvidePassword.vue'));
+
+const hasUser = ref(true);
+const settingsStore = useSettingsStore();
+const walletStore = useWalletStore();
+const userStore = useUserStore();
+const favoritesStore = useFavoritesStore();
+onMounted(() => {
+  settingsStore.loadSettings();
+  hasUser.value = settingsStore.settings.account !== undefined;
+  favoritesStore.loadFromStorage();
+  if (hasUser.value) {
+    walletStore.createWalletFor(settingsStore.settings, 'posting').then(() => {
+      userStore.parseUserData(settingsStore.settings.account!).catch(error => {
+        toastError('Failed to load user data', error);
+      });
+    });
+  }
+});
+const complete = async (data: { account: string; wallet: UsedWallet }) => {
+  hasUser.value = true;
+  const settings = {
+    account: data.account,
+    wallet: data.wallet
+  };
+  walletStore.closeWalletSelectModal();
+  settingsStore.setSettings(settings);
+
+  try {
+    await walletStore.createWalletFor(settings, 'posting');
+
+    await userStore.parseUserData(settingsStore.settings.account!);
+  } catch (error) {
+    toastError('Failed to create wallet', error);
+  }
+};
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar :force-token-view="hasTokenInRoute" />
+    <div class="w-full">
+      <AppHeader />
+      <main class="w-full h-[calc(100%-60px)] bg-background">
+        <slot />
+      </main>
+    </div>
+    <aside
+      v-if="walletStore.isWalletSelectModalOpen"
+      class="fixed inset-0 flex items-center justify-center z-20"
+    >
+      <WalletOnboarding
+        @close="walletStore.closeWalletSelectModal()"
+        @complete="complete"
+      />
+    </aside>
+    <aside
+      v-if="walletStore.isProvideWalletPasswordModalOpen"
+      class="fixed inset-0 flex items-center justify-center z-20"
+    >
+      <HTMProvidePassword />
+    </aside>
+  </SidebarProvider>
+</template>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 66ef90d3ac20e978342232d8909e740b08ab05d2..e95e3abc9bdc6106d179f2e5f95429ea08b0227f 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,83 +1,9 @@
 <script setup lang="ts">
-import { ref, onMounted, defineAsyncComponent } from 'vue';
-import { toast } from 'vue-sonner';
-
-import HTMProvidePassword from '@/components/htm/HTMProvidePassword.vue';
-import AppSidebar from '@/components/navigation';
-import AppHeader from '@/components/navigation/AppHeader.vue';
-import { SidebarProvider } from '@/components/ui/sidebar';
-import type { UsedWallet } from '@/stores/settings.store';
-import { useSettingsStore } from '@/stores/settings.store';
-import { useUserStore } from '@/stores/user.store';
-import { useWalletStore } from '@/stores/wallet.store';
-import { toastError } from '@/utils/parse-error';
-
-
-const route = useRoute();
-
-const hasTokenInRoute = computed(() => {
-  return route.fullPath.includes('/tokens/');
-});
-
-const WalletOnboarding = defineAsyncComponent(() => import('@/components/onboarding/index'));
-
-const hasUser = ref(true);
-const settingsStore = useSettingsStore();
-const walletStore = useWalletStore();
-const userStore = useUserStore();
-onMounted(async () => {
-  settingsStore.loadSettings();
-  hasUser.value = settingsStore.settings.account !== undefined;
-  if (hasUser.value) {
-    walletStore.createWalletFor(settingsStore.settings, 'posting').then(() => {
-      userStore.parseUserData(settingsStore.settings.account!).catch(error => {
-        toast.error(`Failed to load user data: ${(error as Error).message}`);
-      });
-    });
-  }
-});
-const complete = async (data: { account: string; wallet: UsedWallet }) => {
-  hasUser.value = true;
-  const settings = {
-    account: data.account,
-    wallet: data.wallet
-  };
-  walletStore.closeWalletSelectModal();
-  settingsStore.setSettings(settings);
-
-  try {
-    await walletStore.createWalletFor(settings, 'posting');
-
-    await userStore.parseUserData(settingsStore.settings.account!);
-  } catch (error) {
-    toastError('Failed to create wallet', error);
-  }
-};
+import CommonLayout from '@/layouts/common/CommonLayout.vue';
 </script>
 
 <template>
-  <SidebarProvider>
-    <AppSidebar :force-token-view="hasTokenInRoute" />
-    <div class="w-full">
-      <AppHeader />
-      <main class="w-full h-[calc(100%-60px)] bg-background">
-        <slot />
-      </main>
-    </div>
-    <aside
-      v-if="walletStore.isWalletSelectModalOpen"
-      class="fixed inset-0 flex items-center justify-center z-20"
-    >
-      <WalletOnboarding
-        @close="walletStore.closeWalletSelectModal()"
-        @complete="complete"
-      />
-    </aside>
-    <aside
-      v-if="walletStore.isProvideWalletPasswordModalOpen"
-      class="fixed inset-0 flex items-center justify-center z-20"
-    >
-      <HTMProvidePassword />
-    </aside>
-  </SidebarProvider>
+  <CommonLayout>
+    <NuxtPage />
+  </CommonLayout>
 </template>
diff --git a/src/components/htm/HTMView.vue b/src/layouts/htm.vue
similarity index 56%
rename from src/components/htm/HTMView.vue
rename to src/layouts/htm.vue
index 3d04026c5c4e8a7fcb1914a25ded8503f5ada59a..bf52fd525093265d4b7568fa3a194e9fdc2ca185 100644
--- a/src/components/htm/HTMView.vue
+++ b/src/layouts/htm.vue
@@ -1,23 +1,41 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue';
-
 import HTMLoginForm from '@/components/htm/HTMLoginForm.vue';
 import { HTMRegistrationForm } from '@/components/htm/HTMRegistrationForm';
 import HTMRegistrationOptions from '@/components/htm/HTMRegistrationOptions.vue';
+import CommonLayout from '@/layouts/common/CommonLayout.vue';
 import { useTokensStore } from '@/stores/tokens.store';
+import { useWalletStore } from '@/stores/wallet.store';
+import { canAutoLogin, performAutoLogin } from '@/utils/auto-login';
+import { toastError } from '@/utils/parse-error';
 
-
+const route = useRoute();
 const tokensStore = useTokensStore();
+const walletStore = useWalletStore();
+
+// Access meta
+const isPublicPage = computed(() => route.meta.isPublicPage ?? false); // Default to false
+const isAuthenticated = computed(() => !!tokensStore.wallet);
 
-const props = defineProps<{
-  isPublicPage?: boolean;
-}>();
+const hasL1WalletConnected = computed(() => walletStore.hasWallet && !walletStore.isL2Wallet);
 
 const showRegistrationForm = ref(false);
 const showLoginForm = ref(false);
 
-// Check if user is authenticated (has wallet connected)
-const isAuthenticated = computed(() => tokensStore.wallet || props.isPublicPage);
+const tryAutoLogin = async () => {
+  if (!import.meta.client || isAuthenticated.value) return;
+
+  try {
+    const canLogin = await canAutoLogin();
+    if (canLogin)
+      await performAutoLogin();
+  } catch (error) {
+    toastError('Auto-login failed', error);
+  }
+};
+
+onMounted(() => {
+  void tryAutoLogin();
+});
 
 // Handle showing registration form
 const handleShowRegistration = () => {
@@ -45,11 +63,10 @@ const goBack = () => {
 </script>
 
 <template>
-  <div class="p-8">
+  <CommonLayout>
     <!-- Show account overview component -->
-    <div v-if="isAuthenticated">
-      <!-- Show slot content when authenticated -->
-      <slot />
+    <div v-if="isAuthenticated || isPublicPage" class="p-8">
+      <NuxtPage />
     </div>
     <!-- Show login/registration options when not authenticated -->
     <div
@@ -80,5 +97,14 @@ const goBack = () => {
         @show-login-form="handleShowLogin"
       />
     </div>
-  </div>
+    <div
+      v-if="!hasL1WalletConnected"
+      class="fixed bottom-0 z-12 select-none cursor-pointer dark:bg-blue-800 bg-blue-600 px-4 h-[20px] w-full md:w-[calc(100%-var(--sidebar-width))] flex flex-row justify-center items-center"
+      @click="walletStore.openWalletSelectModal()"
+    >
+      <span class="text-xs font-semibold text-white/90">
+        You are using L1 proxy account.
+      </span>
+    </div>
+  </CommonLayout>
 </template>
diff --git a/src/pages/tokens/create.vue b/src/pages/tokens/create.vue
index a2de470ebb339a76f3e0247ce91c17abd40e080b..22983aa14844efde0421d67183c8cdcae6ed4a9f 100644
--- a/src/pages/tokens/create.vue
+++ b/src/pages/tokens/create.vue
@@ -1,52 +1,53 @@
 <script setup lang="ts">
 import { mdiArrowLeft } from '@mdi/js';
 
-import HTMView from '@/components/htm/HTMView.vue';
 import TokenCreationForm from '@/components/htm/tokens/TokenCreationForm.vue';
 import { Button } from '@/components/ui/button';
+
+definePageMeta({
+  layout: 'htm'
+});
 </script>
 
 <template>
-  <HTMView>
-    <div class="container mx-auto p-6 max-w-4xl">
-      <div class="space-y-6">
-        <!-- Header -->
-        <div class="flex items-center justify-between gap-4">
-          <NuxtLink to="/tokens/list" class="keychainify-checked">
-            <Button
-              variant="ghost"
-              size="sm"
-              class="gap-2 hover:bg-accent"
+  <div class="container mx-auto p-6 max-w-4xl">
+    <div class="space-y-6">
+      <!-- Header -->
+      <div class="flex items-center justify-between gap-4">
+        <NuxtLink to="/tokens/list" class="keychainify-checked">
+          <Button
+            variant="ghost"
+            size="sm"
+            class="gap-2 hover:bg-accent"
+          >
+            <svg
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="flex-shrink-0"
             >
-              <svg
-                width="16"
-                height="16"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                class="flex-shrink-0"
-              >
-                <path
-                  style="fill: currentColor"
-                  :d="mdiArrowLeft"
-                />
-              </svg>
-              Back to Tokens List
-            </Button>
-          </NuxtLink>
-        </div>
-
-        <div class="text-center space-y-2">
-          <h1 class="text-3xl font-bold tracking-tight">
-            Create Custom Token
-          </h1>
-          <p class="text-muted-foreground">
-            Create your own custom token on the Hive Token Machine
-          </p>
-        </div>
+              <path
+                style="fill: currentColor"
+                :d="mdiArrowLeft"
+              />
+            </svg>
+            Back to Tokens List
+          </Button>
+        </NuxtLink>
+      </div>
 
-        <!-- Token Creation Form -->
-        <TokenCreationForm />
+      <div class="text-center space-y-2">
+        <h1 class="text-3xl font-bold tracking-tight">
+          Create Custom Token
+        </h1>
+        <p class="text-muted-foreground">
+          Create your own custom token on the Hive Token Machine
+        </p>
       </div>
+
+      <!-- Token Creation Form -->
+      <TokenCreationForm />
     </div>
-  </HTMView>
+  </div>
 </template>
diff --git a/src/pages/tokens/edit.vue b/src/pages/tokens/edit.vue
index 8dbf66adb1aadf4005dc267b6f2ab99dc6e6c527..0c6826e4c07edf07236acfcf579e61ca04b690e0 100644
--- a/src/pages/tokens/edit.vue
+++ b/src/pages/tokens/edit.vue
@@ -3,10 +3,8 @@ import { mdiArrowLeft, mdiContentSave, mdiLoading } from '@mdi/js';
 import type { htm_operation } from '@mtyszczak-cargo/htm';
 import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
-import { toast } from 'vue-sonner';
 
 import HTMTokenPreview from '@/components/htm/HTMTokenPreview.vue';
-import HTMView from '@/components/htm/HTMView.vue';
 import TokenCreationCard from '@/components/htm/tokens/TokenCreationCard.vue';
 import { Alert, AlertDescription } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
@@ -18,7 +16,10 @@ import { useTokensStore } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
 import { validateTokenSymbol } from '@/utils/validators';
-import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+definePageMeta({
+  layout: 'htm'
+});
 
 // Router
 const route = useRoute();
@@ -58,8 +59,8 @@ const isLoggedIn = computed(() => !!settingsStore.settings.account);
 
 // Check if current user is the token owner
 const isTokenOwner = computed(() => {
-  if (!token.value?.ownerPublicKey || !CTokensProvider.getOperationalPublicKey()) return false;
-  return token.value.ownerPublicKey === CTokensProvider.getOperationalPublicKey();
+  if (!token.value?.ownerPublicKey || !tokensStore.getUserPublicKey()) return false;
+  return token.value.ownerPublicKey === tokensStore.getUserPublicKey();
 });
 
 // Symbol validation for TokenCreationCard
@@ -157,7 +158,7 @@ const handleSaveChanges = async () => {
             nai: token.value!.nai!,
             precision: token.value!.precision!
           },
-          owner: CTokensProvider.getOperationalPublicKey()!,
+          owner: tokensStore.getUserPublicKey()!,
           metadata: {
             items: Object.entries(metadata).map(([key, value]) => ({
               key,
@@ -193,7 +194,7 @@ const handleInit = async () => {
 
   // Check ownership after loading
   if (!isTokenOwner.value) {
-    toast.error('You do not have permission to edit this token');
+    toastError('You do not have permission to edit this token');
     router.push({
       path: '/tokens/token',
       query: { 'asset-num': assetNum.value }
@@ -212,164 +213,162 @@ onMounted(() => {
 </script>
 
 <template>
-  <HTMView>
-    <div class="container mx-auto py-4 sm:py-6 space-y-6 px-4 max-w-4xl">
-      <!-- Header -->
-      <div class="flex items-center justify-between gap-4">
-        <NuxtLink :to="`/tokens/token?asset-num=${assetNum}`" class="keychainify-checked">
-          <Button
-            variant="ghost"
-            size="sm"
-            class="gap-2 hover:bg-accent"
+  <div class="container mx-auto py-4 sm:py-6 space-y-6 px-4 max-w-4xl">
+    <!-- Header -->
+    <div class="flex items-center justify-between gap-4">
+      <NuxtLink :to="`/tokens/token?asset-num=${assetNum}`" class="keychainify-checked">
+        <Button
+          variant="ghost"
+          size="sm"
+          class="gap-2 hover:bg-accent"
+        >
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="flex-shrink-0"
           >
-            <svg
-              width="16"
-              height="16"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              class="flex-shrink-0"
-            >
-              <path
-                style="fill: currentColor"
-                :d="mdiArrowLeft"
-              />
-            </svg>
-            Back to Token
-          </Button>
-        </NuxtLink>
-      </div>
+            <path
+              style="fill: currentColor"
+              :d="mdiArrowLeft"
+            />
+          </svg>
+          Back to Token
+        </Button>
+      </NuxtLink>
+    </div>
 
-      <!-- Loading State -->
-      <div
-        v-if="isLoading"
-        class="space-y-6"
-      >
-        <Card>
-          <CardHeader>
-            <Skeleton class="h-8 w-48" />
-            <Skeleton class="h-4 w-64" />
-          </CardHeader>
-          <CardContent class="space-y-4">
-            <Skeleton class="h-10 w-full" />
-            <Skeleton class="h-10 w-full" />
-            <Skeleton class="h-24 w-full" />
-          </CardContent>
-        </Card>
-      </div>
+    <!-- Loading State -->
+    <div
+      v-if="isLoading"
+      class="space-y-6"
+    >
+      <Card>
+        <CardHeader>
+          <Skeleton class="h-8 w-48" />
+          <Skeleton class="h-4 w-64" />
+        </CardHeader>
+        <CardContent class="space-y-4">
+          <Skeleton class="h-10 w-full" />
+          <Skeleton class="h-10 w-full" />
+          <Skeleton class="h-24 w-full" />
+        </CardContent>
+      </Card>
+    </div>
 
-      <!-- Edit Form -->
-      <div
-        v-else-if="token && isTokenOwner"
-        class="space-y-6"
-      >
-        <!-- Page Title -->
-        <div>
-          <h1 class="text-3xl font-bold text-foreground mb-2">
-            Edit Token Definition
-          </h1>
-          <p class="text-muted-foreground">
-            Update the metadata for your token. Only the token owner can make these changes.
-          </p>
-        </div>
+    <!-- Edit Form -->
+    <div
+      v-else-if="token && isTokenOwner"
+      class="space-y-6"
+    >
+      <!-- Page Title -->
+      <div>
+        <h1 class="text-3xl font-bold text-foreground mb-2">
+          Edit Token Definition
+        </h1>
+        <p class="text-muted-foreground">
+          Update the metadata for your token. Only the token owner can make these changes.
+        </p>
+      </div>
 
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
-          <!-- Token Metadata Form -->
-          <TokenCreationCard
-            :token="formToken"
-            :is-submitting="isUpdating"
-            :symbol-validation="symbolValidation"
-            mode="edit"
-            @update:token="handleTokenUpdate"
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <!-- Token Metadata Form -->
+        <TokenCreationCard
+          :token="formToken"
+          :is-submitting="isUpdating"
+          :symbol-validation="symbolValidation"
+          mode="edit"
+          @update:token="handleTokenUpdate"
+        />
+
+        <!-- Token Preview -->
+        <div class="space-y-6">
+          <HTMTokenPreview
+            v-if="previewToken"
+            :token="previewToken"
           />
 
-          <!-- Token Preview -->
-          <div class="space-y-6">
-            <HTMTokenPreview
-              v-if="previewToken"
-              :token="previewToken"
-            />
-
-            <!-- Technical Info Alert -->
-            <Alert>
-              <AlertDescription>
-                <div class="">
-                  <p class="font-semibold">
-                    Technical Information (Cannot be changed)
-                  </p>
-                  <div class="flex flex-wrap gap-4 mt-2 text-sm">
-                    <div>
-                      <span class="text-muted-foreground">Asset num:</span>
-                      <span class="ml-1 font-mono">{{ token.assetNum }}</span>
-                    </div>
-                    <div>
-                      <span class="text-muted-foreground">Precision:</span>
-                      <span class="ml-1 font-mono">{{ token.precision }}</span>
-                    </div>
-                    <div>
-                      <span class="text-muted-foreground">Owner:</span>
-                      <span class="ml-1 font-mono text-xs break-all">{{ token.ownerPublicKey }}</span>
-                    </div>
+          <!-- Technical Info Alert -->
+          <Alert>
+            <AlertDescription>
+              <div class="">
+                <p class="font-semibold">
+                  Technical Information (Cannot be changed)
+                </p>
+                <div class="flex flex-wrap gap-4 mt-2 text-sm">
+                  <div>
+                    <span class="text-muted-foreground">Asset num:</span>
+                    <span class="ml-1 font-mono">{{ token.assetNum }}</span>
+                  </div>
+                  <div>
+                    <span class="text-muted-foreground">Precision:</span>
+                    <span class="ml-1 font-mono">{{ token.precision }}</span>
+                  </div>
+                  <div>
+                    <span class="text-muted-foreground">Owner:</span>
+                    <span class="ml-1 font-mono text-xs break-all">{{ token.ownerPublicKey }}</span>
                   </div>
                 </div>
-              </AlertDescription>
-            </Alert>
-
-            <!-- Action Buttons -->
-            <div class="flex gap-4">
-              <NuxtLink :to="`/tokens/token?asset-num=${assetNum}`" class="keychainify-checked">
-                <Button
-                  variant="outline"
-                  size="lg"
-                  class="flex-1"
-                  :disabled="isUpdating"
-                >
-                  Cancel
-                </Button>
-              </NuxtLink>
+              </div>
+            </AlertDescription>
+          </Alert>
+
+          <!-- Action Buttons -->
+          <div class="flex gap-4">
+            <NuxtLink :to="`/tokens/token?asset-num=${assetNum}`" class="keychainify-checked">
               <Button
+                variant="outline"
                 size="lg"
-                class="flex-1 gap-2"
-                :disabled="isUpdating || !isFormValid || !hasChanges"
-                @click="handleSaveChanges"
+                class="flex-1"
+                :disabled="isUpdating"
               >
-                <svg
-                  v-if="isUpdating"
-                  width="16"
-                  height="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  class="animate-spin"
-                >
-                  <path
-                    style="fill: currentColor"
-                    :d="mdiLoading"
-                  />
-                </svg>
-                <svg
-                  v-else
-                  width="16"
-                  height="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    style="fill: currentColor"
-                    :d="mdiContentSave"
-                  />
-                </svg>
-                {{ isUpdating ? 'Updating...' : 'Save Changes' }}
+                Cancel
               </Button>
-            </div>
-
-            <!-- Info message if no changes -->
-            <Alert v-if="!hasChanges && !isUpdating">
-              <AlertDescription>
-                No changes detected. Modify the fields above to update your token metadata.
-              </AlertDescription>
-            </Alert>
+            </NuxtLink>
+            <Button
+              size="lg"
+              class="flex-1 gap-2"
+              :disabled="isUpdating || !isFormValid || !hasChanges"
+              @click="handleSaveChanges"
+            >
+              <svg
+                v-if="isUpdating"
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="animate-spin"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="mdiLoading"
+                />
+              </svg>
+              <svg
+                v-else
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="mdiContentSave"
+                />
+              </svg>
+              {{ isUpdating ? 'Updating...' : 'Save Changes' }}
+            </Button>
           </div>
+
+          <!-- Info message if no changes -->
+          <Alert v-if="!hasChanges && !isUpdating">
+            <AlertDescription>
+              No changes detected. Modify the fields above to update your token metadata.
+            </AlertDescription>
+          </Alert>
         </div>
       </div>
     </div>
-  </HTMView>
+  </div>
 </template>
diff --git a/src/pages/tokens/invoice.vue b/src/pages/tokens/invoice.vue
index 4d58fbeb93288291372302d830ab9e3e2434ba3d..4132fcb8ebab4fc83ef258ed438d0c99c7c53cf7 100644
--- a/src/pages/tokens/invoice.vue
+++ b/src/pages/tokens/invoice.vue
@@ -4,13 +4,16 @@ import { computed, onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { toast } from 'vue-sonner';
 
-import HTMView from '@/components/htm/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
 import { useTokensStore, type CTokenDefinitionDisplay } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
 
+definePageMeta({
+  layout: 'htm'
+});
+
 // Router
 const route = useRoute();
 const router = useRouter();
@@ -90,7 +93,7 @@ const loadTokenDetails = async () => {
 onMounted(async () => {
   // Validate required params
   if (!fromPk.value || !toPk.value || !amount.value || !assetNum.value) {
-    toast.error('Missing required invoice parameters');
+    toastError('Missing required invoice parameters');
     router.push('/tokens/list');
     return;
   }
@@ -102,240 +105,238 @@ onMounted(async () => {
 </script>
 
 <template>
-  <HTMView>
-    <div class="container mx-auto py-4 sm:py-6 space-y-6 px-4 max-w-2xl">
-      <!-- Header -->
-      <div class="flex items-center justify-between gap-4">
-        <Button
-          variant="ghost"
-          size="sm"
-          class="gap-2 hover:bg-accent"
-          @click="goBack"
+  <div class="container mx-auto py-4 sm:py-6 space-y-6 px-4 max-w-2xl">
+    <!-- Header -->
+    <div class="flex items-center justify-between gap-4">
+      <Button
+        variant="ghost"
+        size="sm"
+        class="gap-2 hover:bg-accent"
+        @click="goBack"
+      >
+        <svg
+          width="16"
+          height="16"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="flex-shrink-0"
         >
-          <svg
-            width="16"
-            height="16"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="flex-shrink-0"
-          >
-            <path
-              style="fill: currentColor"
-              :d="mdiArrowLeft"
-            />
-          </svg>
-          Back
-        </Button>
-      </div>
+          <path
+            style="fill: currentColor"
+            :d="mdiArrowLeft"
+          />
+        </svg>
+        Back
+      </Button>
+    </div>
 
-      <!-- Loading State -->
-      <div
-        v-if="isLoading"
-        class="space-y-6"
-      >
-        <Card>
-          <CardContent class="p-8">
-            <Skeleton class="h-64 w-full" />
-          </CardContent>
-        </Card>
-      </div>
+    <!-- Loading State -->
+    <div
+      v-if="isLoading"
+      class="space-y-6"
+    >
+      <Card>
+        <CardContent class="p-8">
+          <Skeleton class="h-64 w-full" />
+        </CardContent>
+      </Card>
+    </div>
 
-      <!-- Invoice -->
-      <div
-        v-else
-        class="space-y-6"
-      >
-        <!-- Invoice Card -->
-        <Card class="border-2">
-          <CardContent class="p-8 sm:p-12">
-            <div class="space-y-8">
-              <!-- Header Section -->
-              <div class="text-center border-b pb-6">
-                <div class="text-sm text-muted-foreground mb-1">
-                  {{ fromName || 'Sender' }}
+    <!-- Invoice -->
+    <div
+      v-else
+      class="space-y-6"
+    >
+      <!-- Invoice Card -->
+      <Card class="border-2">
+        <CardContent class="p-8 sm:p-12">
+          <div class="space-y-8">
+            <!-- Header Section -->
+            <div class="text-center border-b pb-6">
+              <div class="text-sm text-muted-foreground mb-1">
+                {{ fromName || 'Sender' }}
+              </div>
+              <div
+                v-if="fromPk"
+                class="text-xs text-muted-foreground font-mono mb-4"
+              >
+                {{ fromPk }}
+              </div>
+              <h1 class="text-3xl font-bold tracking-tight">
+                INVOICE
+              </h1>
+            </div>
+
+            <!-- Invoice Details -->
+            <div class="flex justify-between text-sm">
+              <div>
+                <div class="text-muted-foreground">
+                  Invoice#
                 </div>
-                <div
-                  v-if="fromPk"
-                  class="text-xs text-muted-foreground font-mono mb-4"
-                >
-                  {{ fromPk }}
+                <div class="font-medium">
+                  {{ invoiceNumber }}
                 </div>
-                <h1 class="text-3xl font-bold tracking-tight">
-                  INVOICE
-                </h1>
               </div>
-
-              <!-- Invoice Details -->
-              <div class="flex justify-between text-sm">
-                <div>
-                  <div class="text-muted-foreground">
-                    Invoice#
-                  </div>
-                  <div class="font-medium">
-                    {{ invoiceNumber }}
-                  </div>
+              <div class="text-right">
+                <div class="text-muted-foreground">
+                  Date
                 </div>
-                <div class="text-right">
-                  <div class="text-muted-foreground">
-                    Date
-                  </div>
-                  <div class="font-medium">
-                    {{ invoiceDate }}
-                  </div>
+                <div class="font-medium">
+                  {{ invoiceDate }}
                 </div>
               </div>
+            </div>
 
-              <Separator />
+            <Separator />
 
-              <!-- Items Table -->
-              <div class="space-y-4">
-                <div class="grid grid-cols-12 gap-4 text-sm font-medium text-muted-foreground border-b pb-2">
-                  <div class="col-span-1">
-                    #
-                  </div>
-                  <div class="col-span-5">
-                    Item
-                  </div>
-                  <div class="col-span-2 text-center">
-                    Qty
-                  </div>
-                  <div class="col-span-2 text-right">
-                    Rate
-                  </div>
-                  <div class="col-span-2 text-right">
-                    Amount
-                  </div>
+            <!-- Items Table -->
+            <div class="space-y-4">
+              <div class="grid grid-cols-12 gap-4 text-sm font-medium text-muted-foreground border-b pb-2">
+                <div class="col-span-1">
+                  #
                 </div>
+                <div class="col-span-5">
+                  Item
+                </div>
+                <div class="col-span-2 text-center">
+                  Qty
+                </div>
+                <div class="col-span-2 text-right">
+                  Rate
+                </div>
+                <div class="col-span-2 text-right">
+                  Amount
+                </div>
+              </div>
 
-                <!-- Item Row -->
-                <div class="grid grid-cols-12 gap-4 text-sm">
-                  <div class="col-span-1">
-                    1
-                  </div>
-                  <div class="col-span-5">
-                    <div class="font-medium">
-                      Token Transfer
-                    </div>
-                    <div class="text-xs text-muted-foreground mt-1">
-                      {{ tokenSymbol }}
-                      <span
-                        v-if="!fromName || !toName"
-                        class="text-muted-foreground/70"
-                      >
-                        ({{ assetNum }})
-                      </span>
-                    </div>
-                  </div>
-                  <div class="col-span-2 text-center">
-                    1.00
-                  </div>
-                  <div class="col-span-2 text-right">
-                    {{ formattedAmount }}
+              <!-- Item Row -->
+              <div class="grid grid-cols-12 gap-4 text-sm">
+                <div class="col-span-1">
+                  1
+                </div>
+                <div class="col-span-5">
+                  <div class="font-medium">
+                    Token Transfer
                   </div>
-                  <div class="col-span-2 text-right font-medium">
-                    {{ formattedAmount }}
+                  <div class="text-xs text-muted-foreground mt-1">
+                    {{ tokenSymbol }}
+                    <span
+                      v-if="!fromName || !toName"
+                      class="text-muted-foreground/70"
+                    >
+                      ({{ assetNum }})
+                    </span>
                   </div>
                 </div>
-
-                <Separator class="my-4" />
-
-                <!-- Subtotal -->
-                <div class="flex justify-end">
-                  <div class="w-64 space-y-2">
-                    <div class="flex justify-between text-sm">
-                      <span class="text-muted-foreground">Sub Total</span>
-                      <span class="font-medium">{{ formattedAmount }}</span>
-                    </div>
-                    <Separator />
-                    <div class="flex justify-between text-base font-bold">
-                      <span>TOTAL</span>
-                      <span>{{ formattedAmount }}</span>
-                    </div>
-                  </div>
+                <div class="col-span-2 text-center">
+                  1.00
+                </div>
+                <div class="col-span-2 text-right">
+                  {{ formattedAmount }}
+                </div>
+                <div class="col-span-2 text-right font-medium">
+                  {{ formattedAmount }}
                 </div>
               </div>
 
-              <Separator />
+              <Separator class="my-4" />
 
-              <!-- Recipient Section -->
-              <div class="space-y-3">
-                <div class="bg-muted/30 p-4 rounded-lg space-y-2">
-                  <div class="text-sm font-medium">
-                    Recipient:
+              <!-- Subtotal -->
+              <div class="flex justify-end">
+                <div class="w-64 space-y-2">
+                  <div class="flex justify-between text-sm">
+                    <span class="text-muted-foreground">Sub Total</span>
+                    <span class="font-medium">{{ formattedAmount }}</span>
                   </div>
-                  <div
-                    v-if="toPk"
-                    class="text-xs font-mono text-muted-foreground break-all"
-                  >
-                    {{ toPk }}
+                  <Separator />
+                  <div class="flex justify-between text-base font-bold">
+                    <span>TOTAL</span>
+                    <span>{{ formattedAmount }}</span>
                   </div>
                 </div>
               </div>
+            </div>
 
-              <!-- Memo Section -->
-              <div
-                v-if="memo"
-                class="space-y-3"
-              >
+            <Separator />
+
+            <!-- Recipient Section -->
+            <div class="space-y-3">
+              <div class="bg-muted/30 p-4 rounded-lg space-y-2">
                 <div class="text-sm font-medium">
-                  Memo:
+                  Recipient:
                 </div>
-                <div class="bg-muted/30 p-4 rounded-lg">
-                  <p class="text-sm text-muted-foreground whitespace-pre-wrap">
-                    {{ memo }}
-                  </p>
+                <div
+                  v-if="toPk"
+                  class="text-xs font-mono text-muted-foreground break-all"
+                >
+                  {{ toPk }}
                 </div>
               </div>
+            </div>
 
-              <!-- Footer -->
-              <div class="text-center text-sm text-muted-foreground pt-6 border-t">
-                Thanks for your business.
+            <!-- Memo Section -->
+            <div
+              v-if="memo"
+              class="space-y-3"
+            >
+              <div class="text-sm font-medium">
+                Memo:
               </div>
+              <div class="bg-muted/30 p-4 rounded-lg">
+                <p class="text-sm text-muted-foreground whitespace-pre-wrap">
+                  {{ memo }}
+                </p>
+              </div>
+            </div>
+
+            <!-- Footer -->
+            <div class="text-center text-sm text-muted-foreground pt-6 border-t">
+              Thanks for your business.
             </div>
-          </CardContent>
-        </Card>
+          </div>
+        </CardContent>
+      </Card>
 
-        <!-- Action Buttons -->
-        <div class="flex flex-col sm:flex-row gap-3">
-          <Button
-            class="flex-1 gap-2"
-            @click="downloadAsPDF"
+      <!-- Action Buttons -->
+      <div class="flex flex-col sm:flex-row gap-3">
+        <Button
+          class="flex-1 gap-2"
+          @click="downloadAsPDF"
+        >
+          <svg
+            width="18"
+            height="18"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="flex-shrink-0"
           >
-            <svg
-              width="18"
-              height="18"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              class="flex-shrink-0"
-            >
-              <path
-                style="fill: currentColor"
-                :d="mdiDownload"
-              />
-            </svg>
-            Download as PDF
-          </Button>
-          <Button
-            variant="outline"
-            class="flex-1 gap-2"
-            @click="downloadAsImage"
+            <path
+              style="fill: currentColor"
+              :d="mdiDownload"
+            />
+          </svg>
+          Download as PDF
+        </Button>
+        <Button
+          variant="outline"
+          class="flex-1 gap-2"
+          @click="downloadAsImage"
+        >
+          <svg
+            width="18"
+            height="18"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="flex-shrink-0"
           >
-            <svg
-              width="18"
-              height="18"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              class="flex-shrink-0"
-            >
-              <path
-                style="fill: currentColor"
-                :d="mdiDownload"
-              />
-            </svg>
-            Download as Image
-          </Button>
-        </div>
+            <path
+              style="fill: currentColor"
+              :d="mdiDownload"
+            />
+          </svg>
+          Download as Image
+        </Button>
       </div>
     </div>
-  </HTMView>
+  </div>
 </template>
diff --git a/src/pages/tokens/list.vue b/src/pages/tokens/list.vue
index 6e549e4cd18cd6f4c3a696846e50fada4a2aa394..121a1a3b1abf3df5859f4b2c3059530e31d3215b 100644
--- a/src/pages/tokens/list.vue
+++ b/src/pages/tokens/list.vue
@@ -4,21 +4,23 @@ import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
 import HTMTokenCard from '@/components/htm/HTMTokenCard.vue';
-import HTMView from '@/components/htm/HTMView.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
+import { Pagination } from '@/components/ui/pagination';
 import { Skeleton } from '@/components/ui/skeleton';
 import TextTooltip from '@/components/ui/texttooltip/TextTooltip.vue';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore, type CTokenDisplayBase, type TokenStoreApiResponse, type CTokenPairDefinition } from '@/stores/tokens.store';
 import { debounce } from '@/utils/debouncers';
 import { toastError } from '@/utils/parse-error';
-import CTokensProvider from '@/utils/wallet/ctokens/signer';
-
 
+definePageMeta({
+  layout: 'htm',
+  isPublicPage: true
+});
 
 // Router
 const router = useRouter();
@@ -49,7 +51,7 @@ const searchFn = async (query: string) => {
 
     updateUrl();
 
-    tokensList.value = await tokensStore.searchTokens(query, tokensList.value.page, showOnlyMyTokens.value ? CTokensProvider.getOperationalPublicKey()! : undefined);
+    tokensList.value = await tokensStore.searchTokens(query, tokensList.value.page, showOnlyMyTokens.value ? tokensStore.getUserPublicKey()! : undefined);
   } catch (error) {
     toastError('Failed to search tokens', error);
   }
@@ -65,7 +67,7 @@ const loadTokens = async (page: number = 1) => {
   try {
     updateUrl();
 
-    const result = await tokensStore.loadTokens(page, showOnlyMyTokens.value ? CTokensProvider.getOperationalPublicKey()! : undefined);
+    const result = await tokensStore.loadTokens(page, showOnlyMyTokens.value ? tokensStore.getUserPublicKey()! : undefined);
 
     if (result)
       tokensList.value = result;
@@ -106,12 +108,16 @@ watch(showOnlyMyTokens, () => {
   if (searchQuery.value.trim().length > 0)
     return void searchFn(searchQuery.value);
 
-  void loadTokens(tokensList.value.page);
+  void loadTokens(1); // Reset to page 1 when filtering
 });
 
-const loadMore = () => {
+const handlePageChange = (page: number) => {
   if (tokensStore.isLoading) return;
-  void loadTokens(tokensList.value.page + 1);
+
+  if (searchQuery.value.trim().length > 0)
+    void searchFn(searchQuery.value);
+  else
+    void loadTokens(page);
 };
 
 const clearSearch = () => {
@@ -148,229 +154,210 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <HTMView :is-public-page="true">
-    <div class="container mx-auto py-6 space-y-6">
-      <!-- Header -->
-      <div class="flex items-center justify-between">
-        <div>
-          <h1 class="text-3xl font-bold tracking-tight">
-            Tokens List
-          </h1>
-          <p class="text-muted-foreground">
-            Browse all registered tokens on Hive Token Machine
-          </p>
-        </div>
-
-        <div class="flex gap-2">
-          <Button
-            variant="outline"
-            :disabled="tokensStore.isLoading"
-            @click="refresh"
-          >
-            <svg
-              width="16"
-              height="16"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              :class="{ 'animate-spin': tokensStore.isLoading }"
-              class="mr-2"
-            >
-              <path
-                style="fill: currentColor"
-                :d="mdiRefresh"
-              />
-            </svg>
-            Refresh
-          </Button>
-
-          <TextTooltip
-            content="You need to be logged in to create a new token."
-            :ignore="!!settingsStore.account"
-          >
-            <NuxtLink :to="!!settingsStore.account ? '/tokens/create' : ''" class="keychainify-checked">
-              <Button
-                :disabled="!settingsStore.account"
-              >
-                <svg
-                  width="16"
-                  height="16"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  class="mr-2"
-                >
-                  <path
-                    style="fill: currentColor"
-                    :d="mdiPlus"
-                  />
-                </svg>
-                Create Token
-              </Button>
-            </NuxtLink>
-          </TextTooltip>
-        </div>
+  <div class="container mx-auto py-6 space-y-6">
+    <!-- Header -->
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-3xl font-bold tracking-tight">
+          Tokens List
+        </h1>
+        <p class="text-muted-foreground">
+          Browse all registered tokens on Hive Token Machine
+        </p>
       </div>
 
-      <!-- Search -->
-      <div class="flex flex-col sm:flex-row gap-4">
-        <div class="max-w-[350px] flex-1 relative">
-          <Input
-            v-model="searchQuery"
-            placeholder="Search tokens by symbol, name, or Asset num..."
-            class="w-full"
-            @input="debouncedSearch(searchQuery)"
-          />
+      <div class="flex gap-2">
+        <Button
+          variant="outline"
+          :disabled="tokensStore.isLoading"
+          @click="refresh"
+        >
           <svg
-            v-if="searchQuery.length > 0"
             width="16"
             height="16"
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
-            class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground cursor-pointer"
-            @click="clearSearch"
+            :class="{ 'animate-spin': tokensStore.isLoading }"
+            class="mr-2"
           >
             <path
               style="fill: currentColor"
-              :d="mdiCloseCircle"
+              :d="mdiRefresh"
             />
           </svg>
-        </div>
-        <div class="inline-flex items-center gap-2">
-          <TextTooltip
-            content="You need to be logged in to filter tokens using your account."
-            :ignore="!!settingsStore.account"
-          >
-            <Checkbox
-              id="show-my-tokens"
-              v-model="showOnlyMyTokens"
-              :disabled="!settingsStore.account || tokensStore.isLoading"
-              class="w-4 h-4"
-            />
-            <Label
-              for="show-my-tokens"
-              class="text-sm cursor-pointer"
+          Refresh
+        </Button>
+
+        <TextTooltip
+          content="You need to be logged in to create a new token."
+          :ignore="!!settingsStore.account"
+        >
+          <NuxtLink :to="!!settingsStore.account ? '/tokens/create' : ''" class="keychainify-checked">
+            <Button
+              :disabled="!settingsStore.account"
             >
-              Show my tokens only
-            </Label>
-          </TextTooltip>
-        </div>
+              <svg
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="mr-2"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="mdiPlus"
+                />
+              </svg>
+              Create Token
+            </Button>
+          </NuxtLink>
+        </TextTooltip>
       </div>
+    </div>
 
-      <!-- Loading Skeletons -->
-      <div
-        v-if="isFirstLoad || tokensStore.isLoading && tokensList.total === 0"
-        class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6"
-      >
-        <Card
-          v-for="i in 12"
-          :key="i"
+    <!-- Search -->
+    <div class="flex flex-col sm:flex-row gap-4">
+      <div class="max-w-[350px] flex-1 relative">
+        <Input
+          v-model="searchQuery"
+          placeholder="Search tokens by symbol, name, or Asset num..."
+          class="w-full"
+          @input="debouncedSearch(searchQuery)"
+        />
+        <svg
+          v-if="searchQuery.length > 0"
+          width="16"
+          height="16"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground cursor-pointer"
+          @click="clearSearch"
         >
-          <CardHeader class="pb-3">
-            <div class="flex items-start gap-4">
-              <Skeleton class="h-12 w-12 rounded-full" />
-              <div class="flex-1 space-y-2">
-                <Skeleton class="h-5 w-3/4" />
-                <Skeleton class="h-4 w-1/2" />
-              </div>
-            </div>
-          </CardHeader>
-          <CardContent class="space-y-3">
-            <Skeleton class="h-4 w-full" />
-            <Skeleton class="h-4 w-5/6" />
-            <div class="pt-3 space-y-2">
-              <Skeleton class="h-3 w-full" />
-              <Skeleton class="h-3 w-full" />
-              <Skeleton class="h-3 w-2/3" />
-            </div>
-          </CardContent>
-        </Card>
+          <path
+            style="fill: currentColor"
+            :d="mdiCloseCircle"
+          />
+        </svg>
+      </div>
+      <div class="inline-flex items-center gap-2">
+        <TextTooltip
+          content="You need to be logged in to filter tokens using your account."
+          :ignore="!!settingsStore.account"
+        >
+          <Checkbox
+            id="show-my-tokens"
+            v-model="showOnlyMyTokens"
+            :disabled="!settingsStore.account || tokensStore.isLoading"
+            class="w-4 h-4"
+          />
+          <Label
+            for="show-my-tokens"
+            class="text-sm cursor-pointer"
+          >
+            Show my tokens only
+          </Label>
+        </TextTooltip>
       </div>
+    </div>
 
-      <!-- Tokens -->
-      <div v-else-if="!tokensStore.isLoading" class="flex flex-col gap-4">
+    <!-- Loading Skeletons -->
+    <div
+      v-if="isFirstLoad || tokensStore.isLoading && tokensList.total === 0"
+      class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6"
+    >
+      <Card
+        v-for="i in 12"
+        :key="i"
+      >
+        <CardHeader class="pb-3">
+          <div class="flex items-start gap-4">
+            <Skeleton class="h-12 w-12 rounded-full" />
+            <div class="flex-1 space-y-2">
+              <Skeleton class="h-5 w-3/4" />
+              <Skeleton class="h-4 w-1/2" />
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent class="space-y-3">
+          <Skeleton class="h-4 w-full" />
+          <Skeleton class="h-4 w-5/6" />
+          <div class="pt-3 space-y-2">
+            <Skeleton class="h-3 w-full" />
+            <Skeleton class="h-3 w-full" />
+            <Skeleton class="h-3 w-2/3" />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
 
-        <!-- Tokens Grid -->
-        <div v-if="tokensList.items.length > 0" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
-          <template
-            v-for="token in tokensList.items"
-            :key="token.liquid?.assetNum || token.vesting?.assetNum"
-          >
-            <NuxtLink
-              v-if="token.liquid"
-              :to="`/tokens/token?asset-num=${token.liquid.assetNum}`"
-              class="keychainify-checked"
-            >
-              <HTMTokenCard
-                :token="token.liquid"
-                class="h-full hover:shadow-lg group"
-                @click="viewTokenDetails"
-              />
-            </NuxtLink>
-            <NuxtLink
-              v-if="token.vesting"
-              :to="`/tokens/token?asset-num=${token.vesting.assetNum}`"
-              class="keychainify-checked"
-            >
-              <HTMTokenCard
-                :token="token.vesting"
-                class="h-full hover:shadow-lg group"
-                @click="viewTokenDetails"
-              />
-            </NuxtLink>
-          </template>
-        </div>
-
-        <!-- Load More Button -->
-        <div
-          v-else-if="tokensList.hasMore"
-          class="text-center pt-4"
+    <!-- Tokens -->
+    <div v-else-if="!tokensStore.isLoading" class="flex flex-col gap-4">
+
+      <!-- Tokens Grid -->
+      <div v-if="tokensList.items.length > 0" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
+        <template
+          v-for="token in tokensList.items"
+          :key="token.liquid?.assetNum || token.vesting?.assetNum"
         >
-          <Button
-            variant="outline"
-            :disabled="tokensStore.isLoading"
-            @click="loadMore"
+          <NuxtLink
+            v-if="token.liquid"
+            :to="`/tokens/token?asset-num=${token.liquid.assetNum}`"
+            class="keychainify-checked"
           >
-            <svg
-              v-if="tokensStore.isLoading"
-              width="16"
-              height="16"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              class="mr-2 animate-spin"
-            >
-              <path
-                style="fill: currentColor"
-                d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"
-              />
-            </svg>
-            {{ tokensStore.isLoading ? 'Loading...' : 'Load More Tokens' }}
-          </Button>
-        </div>
-
-        <!-- Empty State -->
-        <Card v-else>
-          <CardContent class="text-center py-12">
-            <svg
-              width="64"
-              height="64"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              class="mx-auto text-muted-foreground mb-4"
-            >
-              <path
-                style="fill: currentColor"
-                d="M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H5M11,7H13V17H11V7Z"
-              />
-            </svg>
-            <h3 class="text-lg font-semibold mb-2">
-              No Tokens Found
-            </h3>
-            <p class="text-muted-foreground">
-              <span v-if="searchQuery.length > 0">There are no tokens matching your search.</span>
-              <span v-else>There are no registered tokens available at the moment.</span>
-            </p>
-          </CardContent>
-        </Card>
+            <HTMTokenCard
+              :token="token.liquid"
+              class="h-full hover:shadow-lg group"
+              @click="viewTokenDetails"
+            />
+          </NuxtLink>
+          <NuxtLink
+            v-if="token.vesting"
+            :to="`/tokens/token?asset-num=${token.vesting.assetNum}`"
+            class="keychainify-checked"
+          >
+            <HTMTokenCard
+              :token="token.vesting"
+              class="h-full hover:shadow-lg group"
+              @click="viewTokenDetails"
+            />
+          </NuxtLink>
+        </template>
+      </div>
+
+      <!-- Pagination -->
+      <div v-if="tokensList.items.length > 0" class="flex justify-center pt-6">
+        <Pagination
+          :current-page="tokensList.page"
+          :total-pages="tokensList.pages"
+          :loading="tokensStore.isLoading"
+          @page-change="handlePageChange"
+        />
       </div>
+
+      <!-- Empty State -->
+      <Card v-else-if="tokensList.items.length === 0">
+        <CardContent class="text-center py-12">
+          <svg
+            width="64"
+            height="64"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="mx-auto text-muted-foreground mb-4"
+          >
+            <path
+              style="fill: currentColor"
+              d="M5,3C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H5M11,7H13V17H11V7Z"
+            />
+          </svg>
+          <h3 class="text-lg font-semibold mb-2">
+            No Tokens Found
+          </h3>
+          <p class="text-muted-foreground">
+            <span v-if="searchQuery.length > 0">There are no tokens matching your search.</span>
+            <span v-else>There are no registered tokens available at the moment.</span>
+          </p>
+        </CardContent>
+      </Card>
     </div>
-  </HTMView>
+  </div>
 </template>
diff --git a/src/pages/tokens/my-balance.vue b/src/pages/tokens/my-balance.vue
index 18e766775753112546edbeb9db8508eaebf17d82..dfadef3d608260f9702343cdeffe4ad75dca7950 100644
--- a/src/pages/tokens/my-balance.vue
+++ b/src/pages/tokens/my-balance.vue
@@ -1,36 +1,39 @@
 <script setup lang="ts">
 import {
   mdiRefresh,
-  mdiSend,
   mdiAccount,
   mdiArrowUp,
   mdiArrowDown,
   mdiPlusCircle,
   mdiWallet,
-  mdiImageMultiple
+  mdiImageMultiple,
+  mdiStar
 } from '@mdi/js';
 import type { htm_operation } from '@mtyszczak-cargo/htm';
 import { onMounted, ref } from 'vue';
-import { toast } from 'vue-sonner';
 
-import CollapsibleMemoInput from '@/components/CollapsibleMemoInput.vue';
 import { TokenAmountInput } from '@/components/htm/amount';
-import HTMView from '@/components/htm/HTMView.vue';
+import HTMTokenBalancesTable from '@/components/htm/HTMTokenBalancesTable.vue';
+import TokenTransferCard from '@/components/htm/tokens/TokenTransferCard.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
+import { Pagination } from '@/components/ui/pagination';
 import { Skeleton } from '@/components/ui/skeleton';
-import TextTooltip from '@/components/ui/texttooltip/TextTooltip.vue';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import AddToGoogleWallet from '@/components/wallet/AddToGoogleWallet.vue';
-import { useTokensStore, type CTokenBalanceDisplay, type CTokenPairBalanceDefinition, type TokenStoreApiResponse } from '@/stores/tokens.store';
+import { useFavoritesStore } from '@/stores/favorites.store';
+import { useTokensStore, type CTokenBalanceDisplay, type CTokenPairBalanceDefinition, type TokenStoreApiResponse, type CTokenDefinitionDisplay } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
 import { waitForTransactionStatus } from '@/utils/transaction-status';
-import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+definePageMeta({
+  layout: 'htm'
+});
 
 const tokensStore = useTokensStore();
+const favoritesStore = useFavoritesStore();
 
 // State
 const isLoading = ref(false);
@@ -38,11 +41,9 @@ const searchQuery = ref('');
 
 // Transfer dialog state
 const isTransferDialogOpen = ref(false);
-const transferAmount = ref('');
-const transferRecipient = ref('');
-const transferMemo = ref('');
 const selectedTokenForTransfer = ref<CTokenBalanceDisplay | null>(null);
-const isTransferLoading = ref(false);
+const selectedTokenDefinition = ref<CTokenDefinitionDisplay | null>(null);
+const isLoadingTokenDefinition = ref(false);
 
 // Transform dialog state
 const isTransformDialogOpen = ref(false);
@@ -73,7 +74,7 @@ const loadAccountBalances = async (page = 1) => {
     isLoading.value = true;
 
     const [createdTokens, balances] = await Promise.all([
-      tokensStore.loadTokens(1, CTokensProvider.getOperationalPublicKey()!),
+      tokensStore.loadTokens(1, tokensStore.getUserPublicKey()!),
       tokensStore.loadBalances(page)
     ]);
     createdTokensCount.value = createdTokens.total;
@@ -99,55 +100,39 @@ const loadMoreItems = () => {
   void loadAccountBalances(fetchedBalances.value!.page + 1);
 };
 
-const openTransferDialog = (balance: CTokenBalanceDisplay) => {
+const handlePageChange = (page: number) => {
+  if (isLoading.value) return;
+  void loadAccountBalances(page);
+};
+
+const openTransferDialog = async (balance: CTokenBalanceDisplay) => {
   if (balance.isStaked) {
-    toast.error('No liquid balance available for transfer');
+    toastError('No liquid balance available for transfer');
     return;
   }
 
   selectedTokenForTransfer.value = balance;
-  transferAmount.value = '';
-  transferRecipient.value = '';
-  transferMemo.value = '';
   isTransferDialogOpen.value = true;
-};
-
-const transferTokens = async () => {
-  if (!selectedTokenForTransfer.value || !transferAmount.value || !transferRecipient.value) {
-    toast.error('Please fill in all fields');
-    return;
-  }
 
+  // Fetch full token definition
   try {
-    isTransferLoading.value = true;
-
-    // Wait for transaction status
-    await waitForTransactionStatus(
-      () => ([{
-        token_transfer_operation: {
-          receiver: transferRecipient.value,
-          sender: CTokensProvider.getOperationalPublicKey()!,
-          amount: {
-            amount: transferAmount.value,
-            nai: selectedTokenForTransfer.value?.nai || '',
-            precision: selectedTokenForTransfer.value?.precision || 0
-          },
-          memo: transferMemo.value
-        }
-      } satisfies htm_operation]),
-      'Transfer'
-    );
-
-    // Refresh balances on success
-    await loadAccountBalances();
-    isTransferDialogOpen.value = false;
+    isLoadingTokenDefinition.value = true;
+    selectedTokenDefinition.value = await tokensStore.getTokenByAssetNum(balance.assetNum);
   } catch (error) {
-    toastError('Failed to transfer tokens', error);
+    toastError('Failed to load token details', error);
+    isTransferDialogOpen.value = false;
   } finally {
-    isTransferLoading.value = false;
+    isLoadingTokenDefinition.value = false;
   }
 };
 
+const handleTransferComplete = async () => {
+  isTransferDialogOpen.value = false;
+  await loadAccountBalances();
+};
+
+
+
 const openTransformDialog = (balance: CTokenBalanceDisplay) => {
   selectedToken.value = balance;
   transformDirection.value = balance.isStaked ? 'staked-to-liquid' : 'liquid-to-staked';
@@ -157,7 +142,7 @@ const openTransformDialog = (balance: CTokenBalanceDisplay) => {
 
 const transformTokens = async () => {
   if (!selectedToken.value || !transformAmount.value) {
-    toast.error('Please enter an amount');
+    toastError('Please enter an amount');
     return;
   }
 
@@ -173,7 +158,7 @@ const transformTokens = async () => {
             nai: selectedToken.value!.nai!,
             precision: selectedToken.value!.precision!
           },
-          holder: CTokensProvider.getOperationalPublicKey()!
+          holder: tokensStore.getUserPublicKey()!
         }
       } satisfies htm_operation]),
       transformDirection.value === 'liquid-to-staked' ? 'Stake' : 'Unstake'
@@ -189,13 +174,6 @@ const transformTokens = async () => {
   }
 };
 
-// Set max transfer amount - use raw amount without precision formatting
-const setMaxTransferAmount = async () => {
-  if (!selectedTokenForTransfer.value) return;
-
-  transferAmount.value = String(selectedTokenForTransfer.value.balance);
-};
-
 // Set max transform amount - use raw amount without precision formatting
 const setMaxTransformAmount = async () => {
   if (!selectedToken.value) return;
@@ -210,46 +188,49 @@ onMounted(() => {
 </script>
 
 <template>
-  <HTMView>
-    <div class="container mx-auto py-6 space-y-6">
-      <!-- Header -->
-      <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
-        <div>
-          <h1 class="text-3xl font-bold tracking-tight">
-            Account Balances
-          </h1>
-          <p class="text-muted-foreground">
-            Manage your custom token balances, transfers, and staking on Hive Token Machine
-          </p>
-        </div>
+  <div class="container mx-auto py-6 space-y-6">
+    <!-- Header -->
+    <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
+      <div>
+        <h1 class="text-3xl font-bold tracking-tight">
+          Account Balances
+        </h1>
+        <p class="text-muted-foreground">
+          Manage your custom token balances, transfers, and staking on Hive Token Machine
+        </p>
+      </div>
 
-        <div class="flex items-center gap-2">
-          <Button
-            variant="outline"
-            :disabled="isLoading"
-            @click="loadAccountBalances()"
+      <div class="flex items-center gap-2">
+        <Button
+          variant="outline"
+          :disabled="isLoading"
+          @click="loadAccountBalances()"
+        >
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="mr-2"
           >
-            <svg
-              width="16"
-              height="16"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              class="mr-2"
-            >
-              <path
-                style="fill: currentColor"
-                :d="mdiRefresh"
-              />
-            </svg>
-            Refresh
-          </Button>
-          <AddToGoogleWallet />
-        </div>
+            <path
+              style="fill: currentColor"
+              :d="mdiRefresh"
+            />
+          </svg>
+          Refresh
+        </Button>
+        <AddToGoogleWallet />
       </div>
+    </div>
 
-      <!-- Summary Cards -->
-      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-        <Card>
+    <!-- Summary Cards -->
+    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+      <NuxtLink
+        to="/tokens/list?mytokens=1"
+        class="keychainify-checked"
+      >
+        <Card class="cursor-pointer hover:bg-accent/50 transition-colors h-full">
           <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle class="text-sm font-medium">
               Created Tokens
@@ -276,39 +257,72 @@ onMounted(() => {
             </p>
           </CardContent>
         </Card>
+      </NuxtLink>
 
-        <Card>
-          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle class="text-sm font-medium">
-              Owned Tokens
-            </CardTitle>
-            <svg
-              width="16"
-              height="16"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              class="text-muted-foreground"
-            >
-              <path
-                style="fill: currentColor"
-                :d="mdiWallet"
-              />
-            </svg>
-          </CardHeader>
-          <CardContent>
-            <div class="text-2xl font-bold">
-              {{ formatCount(ownedTokensCount) }}
-            </div>
-            <p class="text-xs text-muted-foreground">
-              Tokens in your balance
-            </p>
-          </CardContent>
-        </Card>
+      <Card>
+        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle class="text-sm font-medium">
+            Owned Tokens
+          </CardTitle>
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="text-muted-foreground"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiWallet"
+            />
+          </svg>
+        </CardHeader>
+        <CardContent>
+          <div class="text-2xl font-bold">
+            {{ formatCount(ownedTokensCount) }}
+          </div>
+          <p class="text-xs text-muted-foreground">
+            Tokens in your balance
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle class="text-sm font-medium">
+            NFT Collections
+          </CardTitle>
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="text-muted-foreground"
+          >
+            <path
+              style="fill: currentColor"
+              :d="mdiImageMultiple"
+            />
+          </svg>
+        </CardHeader>
+        <CardContent>
+          <div class="text-2xl font-bold">
+            {{ formatCount(nftCollectionsCount) }}
+          </div>
+          <p class="text-xs text-muted-foreground">
+            NFT collections created
+          </p>
+        </CardContent>
+      </Card>
 
-        <Card>
+      <NuxtLink
+        to="/tokens/users/favorites"
+        class="keychainify-checked"
+      >
+        <Card class="cursor-pointer hover:bg-accent/50 transition-colors h-full">
           <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
             <CardTitle class="text-sm font-medium">
-              NFT Collections
+              Favorite Accounts
             </CardTitle>
             <svg
               width="16"
@@ -319,603 +333,279 @@ onMounted(() => {
             >
               <path
                 style="fill: currentColor"
-                :d="mdiImageMultiple"
+                :d="mdiStar"
               />
             </svg>
           </CardHeader>
           <CardContent>
             <div class="text-2xl font-bold">
-              {{ formatCount(nftCollectionsCount) }}
+              {{ formatCount(favoritesStore.favoriteAccountsCount) }}
             </div>
             <p class="text-xs text-muted-foreground">
-              NFT collections created
+              Quick access to saved accounts
             </p>
           </CardContent>
         </Card>
+      </NuxtLink>
+    </div>
 
-        <Card>
-          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle class="text-sm font-medium">
-              Staked Tokens
-            </CardTitle>
-            <svg
-              width="16"
-              height="16"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              class="text-muted-foreground"
-            >
-              <path
-                style="fill: currentColor"
-                :d="mdiArrowUp"
+    <!-- Search -->
+    <div class="flex items-center gap-4">
+      <div class="flex-1">
+        <TooltipProvider
+          :delay-duration="200"
+          disable-hoverable-content
+        >
+          <Tooltip>
+            <TooltipTrigger class="max-w-sm w-full">
+              <Input
+                v-model="searchQuery"
+                placeholder="Search tokens by symbol, name, or Asset num..."
+                class="w-full"
+                disabled
               />
-            </svg>
-          </CardHeader>
-          <CardContent>
-            <div class="text-2xl font-bold">
-              {{ formatCount(stakedTokensCount) }}
-            </div>
-            <p class="text-xs text-muted-foreground">
-              Tokens currently staked
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-
-      <!-- Search -->
-      <div class="flex items-center gap-4">
-        <div class="flex-1">
-          <TooltipProvider
-            :delay-duration="200"
-            disable-hoverable-content
-          >
-            <Tooltip>
-              <TooltipTrigger class="max-w-sm w-full">
-                <Input
-                  v-model="searchQuery"
-                  placeholder="Search tokens by symbol, name, or Asset num..."
-                  class="w-full"
-                  disabled
-                />
-              </TooltipTrigger>
-              <TooltipContent>
-                <p>Search not available yet</p>
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </div>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Search not available yet</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       </div>
+    </div>
 
-      <!-- Loading State -->
-      <div
-        v-if="tokensStore.isLoading"
-        class="space-y-4"
+    <!-- Loading State -->
+    <div
+      v-if="tokensStore.isLoading"
+      class="space-y-4"
+    >
+      <Card
+        v-for="i in 3"
+        :key="i"
       >
-        <Card
-          v-for="i in 3"
-          :key="i"
-        >
-          <CardHeader>
-            <div class="flex items-center justify-between">
-              <div class="space-y-2">
-                <Skeleton class="h-4 w-[250px]" />
-                <Skeleton class="h-3 w-[200px]" />
-              </div>
-              <Skeleton class="h-8 w-8 rounded-full" />
+        <CardHeader>
+          <div class="flex items-center justify-between">
+            <div class="space-y-2">
+              <Skeleton class="h-4 w-[250px]" />
+              <Skeleton class="h-3 w-[200px]" />
             </div>
-          </CardHeader>
-          <CardContent>
-            <div class="grid grid-cols-3 gap-4">
-              <div class="space-y-2">
-                <Skeleton class="h-3 w-[100px]" />
-                <Skeleton class="h-6 w-[80px]" />
-              </div>
-              <div class="space-y-2">
-                <Skeleton class="h-3 w-[100px]" />
-                <Skeleton class="h-6 w-[80px]" />
-              </div>
-              <div class="space-y-2">
-                <Skeleton class="h-3 w-[100px]" />
-                <Skeleton class="h-6 w-[80px]" />
-              </div>
+            <Skeleton class="h-8 w-8 rounded-full" />
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div class="grid grid-cols-3 gap-4">
+            <div class="space-y-2">
+              <Skeleton class="h-3 w-[100px]" />
+              <Skeleton class="h-6 w-[80px]" />
             </div>
-          </CardContent>
-        </Card>
+            <div class="space-y-2">
+              <Skeleton class="h-3 w-[100px]" />
+              <Skeleton class="h-6 w-[80px]" />
+            </div>
+            <div class="space-y-2">
+              <Skeleton class="h-3 w-[100px]" />
+              <Skeleton class="h-6 w-[80px]" />
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+
+    <!-- Balances Table -->
+    <div
+      v-else-if="fetchedBalances && fetchedBalances.items.length > 0"
+      class="space-y-4"
+    >
+      <HTMTokenBalancesTable
+        :balances="fetchedBalances.items"
+        :show-actions="true"
+        @transfer="openTransferDialog"
+        @stake="openTransformDialog"
+        @unstake="openTransformDialog"
+      />
+
+      <!-- Pagination -->
+      <div v-if="fetchedBalances.items.length > 0" class="flex justify-center pt-4">
+        <Pagination
+          :current-page="fetchedBalances.page"
+          :total-pages="fetchedBalances.pages"
+          :loading="isLoading"
+          @page-change="handlePageChange"
+        />
       </div>
 
-      <!-- Balances Table -->
+      <!-- Load More Button (kept as alternative if needed) -->
       <div
-        v-else-if="fetchedBalances && fetchedBalances.items.length > 0"
-        class="space-y-4"
+        v-else-if="fetchedBalances.hasMore && fetchedBalances.pages <= 1"
+        class="flex justify-center pt-4"
       >
-        <Card>
-          <CardContent class="p-0">
-            <div class="overflow-x-auto">
-              <table class="w-full">
-                <thead class="border-b">
-                  <tr class="hover:bg-muted/50">
-                    <th class="text-left p-4 font-medium text-muted-foreground">
-                      Asset
-                    </th>
-                    <th class="text-right p-4 font-medium text-muted-foreground">
-                      Balances
-                    </th>
-                    <th class="text-right p-4 font-medium text-muted-foreground">
-                      Total
-                    </th>
-                    <th class="text-right p-4 font-medium text-muted-foreground">
-                      Actions
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr
-                    v-for="balance in fetchedBalances.items"
-                    :key="balance.liquid.assetNum"
-                    class="border-b hover:bg-muted/50 transition-colors cursor-pointer"
-                  >
-                    <NuxtLink
-                      :to="`/tokens/token?asset-num=${balance.liquid.assetNum}`"
-                      class="contents keychainify-checked"
-                    >
-                      <!-- Asset Info -->
-                      <td class="p-4">
-                        <div class="flex items-center gap-3">
-                          <div class="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center overflow-hidden">
-                            <img
-                              v-if="balance.liquid.image"
-                              :src="balance.liquid.image"
-                              :alt="balance.liquid.symbol"
-                              class="h-full w-full object-cover"
-                            >
-                            <span
-                              v-else
-                              class="text-sm font-medium text-primary"
-                            >
-                              {{ balance.liquid.symbol?.charAt(0).toUpperCase() || '' }}
-                            </span>
-                          </div>
-                          <div>
-                            <div class="flex items-center gap-2">
-                              <span class="font-semibold">
-                                {{ balance.liquid.name }}
-                              </span>
-                              <span
-                                v-if="balance.vesting.balance > 0n"
-                                class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 border border-blue-200"
-                              >
-                                <svg
-                                  width="12"
-                                  height="12"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                  viewBox="0 0 24 24"
-                                >
-                                  <path
-                                    style="fill: currentColor"
-                                    :d="mdiArrowUp"
-                                  />
-                                </svg>
-                                STAKED
-                              </span>
-                            </div>
-                            <div class="text-sm text-muted-foreground">
-                              {{ balance.liquid.symbol }}
-                            </div>
-                            <div class="text-xs text-muted-foreground font-mono">
-                              {{ balance.liquid.assetNum }}
-                            </div>
-                          </div>
-                        </div>
-                      </td>
-
-                      <!-- Combined Balances -->
-                      <td class="p-4 align-middle">
-                        <div class="ml-auto flex w-full max-w-[260px] flex-col gap-3 text-sm">
-                          <div class="flex items-center justify-between gap-3">
-                            <span
-                              :class="[
-                                'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold uppercase tracking-wide',
-                                balance.liquid.balance === 0n
-                                  ? 'bg-muted text-muted-foreground border-transparent'
-                                  : 'bg-emerald-50 text-emerald-700 border-emerald-200'
-                              ]"
-                            >
-                              Liquid
-                            </span>
-                            <span
-                              :class="[
-                                'font-medium tabular-nums',
-                                balance.liquid.balance === 0n ? 'text-muted-foreground' : 'text-foreground'
-                              ]"
-                            >
-                              {{ balance.liquid.displayBalance }}
-                            </span>
-                          </div>
-
-                          <div class="flex items-center justify-between gap-3">
-                            <span
-                              :class="[
-                                'inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-semibold uppercase tracking-wide',
-                                balance.vesting.balance === 0n
-                                  ? 'bg-muted text-muted-foreground border-transparent'
-                                  : 'bg-sky-50 text-sky-700 border-sky-200'
-                              ]"
-                            >
-                              Staked
-                            </span>
-                            <span
-                              :class="[
-                                'font-medium tabular-nums',
-                                balance.vesting.balance === 0n ? 'text-muted-foreground' : 'text-foreground'
-                              ]"
-                            >
-                              {{ balance.vesting.displayBalance }}
-                            </span>
-                          </div>
-
-                          <template v-if="balance.liquid.balance > 0n || balance.vesting.balance > 0n">
-                            <div class="flex h-1.5 w-full overflow-hidden rounded-full bg-muted">
-                              <div
-                                class="h-full bg-emerald-500 transition-all"
-                                :style="{ width: `${(balance.liquid.balance * 100n / (balance.liquid.balance + balance.vesting.balance))}%` }"
-                              />
-                              <div
-                                class="h-full bg-sky-500 transition-all"
-                                :style="{ width: `${(balance.vesting.balance * 100n / (balance.liquid.balance + balance.vesting.balance))}%` }"
-                              />
-                            </div>
-                            <div class="flex items-center justify-between text-xs text-muted-foreground">
-                              <span>Distribution</span>
-                              <span class="tabular-nums">
-                                {{ (Number((balance.liquid.balance * 10000n / (balance.liquid.balance + balance.vesting.balance))) / 100).toFixed(1) }}% liquid ·
-                                {{ (Number((balance.vesting.balance * 10000n / (balance.liquid.balance + balance.vesting.balance))) / 100).toFixed(1) }}% staked
-                              </span>
-                            </div>
-                          </template>
-
-                          <div
-                            v-else
-                            class="text-xs text-muted-foreground text-right"
-                          >
-                            No balance yet
-                          </div>
-                        </div>
-                      </td>
-
-                      <!-- Total Balance -->
-                      <td class="p-4 text-right">
-                        <div class="font-semibold tabular-nums">
-                          {{ balance.displayTotal }}
-                        </div>
-                      </td>
-
-                      <!-- Actions -->
-                      <td class="p-4">
-                        <div class="flex justify-end gap-1">
-                          <TextTooltip
-                            content="Transfer tokens"
-                          >
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              :disabled="balance.liquid.balance === 0n"
-                              @click.prevent="openTransferDialog(balance.liquid)"
-                            >
-                              <svg
-                                width="14"
-                                height="14"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 24 24"
-                              >
-                                <path
-                                  style="fill: currentColor"
-                                  :d="mdiSend"
-                                />
-                              </svg>
-                            </Button>
-                          </TextTooltip>
-
-                          <TextTooltip
-                            content="Stake tokens"
-                          >
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              :disabled="balance.liquid.balance === 0n"
-                              @click.prevent="openTransformDialog(balance.liquid)"
-                            >
-                              <svg
-                                width="14"
-                                height="14"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 24 24"
-                              >
-                                <path
-                                  style="fill: currentColor"
-                                  :d="mdiArrowUp"
-                                />
-                              </svg>
-                            </Button>
-                          </TextTooltip>
-
-                          <TextTooltip
-                            content="Unstake tokens"
-                          >
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              :disabled="balance.vesting.balance === 0n"
-                              @click.prevent="openTransformDialog(balance.vesting)"
-                            >
-                              <svg
-                                width="14"
-                                height="14"
-                                xmlns="http://www.w3.org/2000/svg"
-                                viewBox="0 0 24 24"
-                              >
-                                <path
-                                  style="fill: currentColor"
-                                  :d="mdiArrowDown"
-                                />
-                              </svg>
-                            </Button>
-                          </TextTooltip>
-                        </div>
-                      </td>
-                    </NuxtLink>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </CardContent>
-        </Card>
-
-        <!-- Load More Button -->
-        <div
-          v-if="fetchedBalances.hasMore"
-          class="flex justify-center pt-4"
+        <Button
+          variant="outline"
+          size="lg"
+          @click="loadMoreItems"
         >
-          <Button
-            variant="outline"
-            size="lg"
-            @click="loadMoreItems"
-          >
-            Load More
-            <span class="ml-2 text-muted-foreground">
-              ({{ fetchedBalances.page }} / {{ fetchedBalances.pages }})
-            </span>
-          </Button>
-        </div>
+          Load More
+          <span class="ml-2 text-muted-foreground">
+            ({{ fetchedBalances.page }} / {{ fetchedBalances.pages }})
+          </span>
+        </Button>
       </div>
+    </div>
 
-      <!-- Empty State -->
-      <div
-        v-else
-        class="text-center py-12"
+    <!-- Empty State -->
+    <div
+      v-else
+      class="text-center py-12"
+    >
+      <svg
+        width="48"
+        height="48"
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        class="mx-auto text-muted-foreground mb-4"
+      >
+        <path
+          style="fill: currentColor"
+          :d="mdiAccount"
+        />
+      </svg>
+      <h3 class="text-lg font-semibold mb-2">
+        No token balances found
+      </h3>
+      <p class="text-muted-foreground mb-4">
+        {{ searchQuery ? 'No tokens match your search criteria' : 'You don\'t have any token balances yet' }}
+      </p>
+      <Button
+        v-if="!searchQuery"
+        @click="loadAccountBalances()"
       >
         <svg
-          width="48"
-          height="48"
+          width="16"
+          height="16"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 24 24"
-          class="mx-auto text-muted-foreground mb-4"
+          class="mr-2"
         >
           <path
             style="fill: currentColor"
-            :d="mdiAccount"
+            :d="mdiRefresh"
           />
         </svg>
-        <h3 class="text-lg font-semibold mb-2">
-          No token balances found
-        </h3>
-        <p class="text-muted-foreground mb-4">
-          {{ searchQuery ? 'No tokens match your search criteria' : 'You don\'t have any token balances yet' }}
-        </p>
-        <Button
-          v-if="!searchQuery"
-          @click="loadAccountBalances()"
-        >
-          <svg
-            width="16"
-            height="16"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
-            class="mr-2"
-          >
-            <path
-              style="fill: currentColor"
-              :d="mdiRefresh"
-            />
-          </svg>
-          Refresh Balances
-        </Button>
-      </div>
-
-      <!-- Transfer Dialog -->
-      <Dialog v-model:open="isTransferDialogOpen">
-        <DialogContent class="sm:max-w-[425px]">
-          <DialogHeader>
-            <div class="flex items-center gap-3 mb-2">
-              <div class="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center overflow-hidden">
-                <img
-                  v-if="selectedTokenForTransfer && selectedTokenForTransfer.image"
-                  :src="selectedTokenForTransfer.image"
-                  :alt="selectedTokenForTransfer.symbol"
-                  class="h-full w-full object-cover"
-                >
-                <span
-                  v-else
-                  class="text-base font-medium text-primary"
-                >
-                  {{ selectedTokenForTransfer ? selectedTokenForTransfer.symbol!.charAt(0).toUpperCase() : '' }}
-                </span>
-              </div>
-              <DialogTitle>Transfer {{ selectedTokenForTransfer ? selectedTokenForTransfer.name : '' }}</DialogTitle>
-            </div>
-            <DialogDescription>
-              Send tokens to another account. Available balance: {{ selectedTokenForTransfer ? selectedTokenForTransfer.displayBalance : '0' }} {{ selectedTokenForTransfer ? selectedTokenForTransfer.symbol : '' }}
-            </DialogDescription>
-          </DialogHeader>
-
-          <div class="grid gap-4 py-4">
-            <div class="grid gap-2">
-              <Label for="recipient">Recipient Account</Label>
-              <Input
-                id="recipient"
-                v-model="transferRecipient"
-                placeholder="Enter account name"
-              />
-            </div>
-
-            <TokenAmountInput
-              v-if="selectedTokenForTransfer"
-              v-model="transferAmount"
-              variant="explicit"
-              :token="selectedTokenForTransfer"
-              :disabled="isTransferLoading"
-              :available-balance="selectedTokenForTransfer!.displayBalance"
-              @max="setMaxTransferAmount"
-            />
+        Refresh Balances
+      </Button>
+    </div>
 
-            <!-- memo -->
-            <CollapsibleMemoInput
-              v-model="transferMemo"
-              :disabled="isTransferLoading"
-              placeholder="Add memo..."
-              :rows="4"
-            />
-          </div>
+    <!-- Transfer Dialog -->
+    <Dialog v-model:open="isTransferDialogOpen">
+      <DialogContent class="sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Transfer {{ selectedTokenForTransfer?.name || 'Token' }}</DialogTitle>
+          <DialogDescription>
+            Send {{ selectedTokenForTransfer?.symbol || selectedTokenForTransfer?.name }} tokens to another account
+          </DialogDescription>
+        </DialogHeader>
+
+        <div v-if="isLoadingTokenDefinition" class="mt-4 p-8">
+          <Skeleton class="h-64 w-full" />
+        </div>
 
-          <div class="flex justify-end gap-2">
-            <Button
-              variant="outline"
-              @click="isTransferDialogOpen = false"
-            >
-              Cancel
-            </Button>
-            <Button
-              :disabled="isTransferLoading || !transferAmount || !transferRecipient"
-              @click="transferTokens"
-            >
-              <svg
-                v-if="isTransferLoading"
-                width="16"
-                height="16"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                class="mr-2 animate-spin"
+        <div v-else-if="selectedTokenDefinition" class="mt-4">
+          <TokenTransferCard
+            :token="selectedTokenDefinition"
+            :user-balance="selectedTokenForTransfer"
+            :is-logged-in="true"
+            :asset-num="selectedTokenDefinition.assetNum"
+            @refresh="handleTransferComplete"
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+
+    <!-- Transform Dialog -->
+    <Dialog v-model:open="isTransformDialogOpen">
+      <DialogContent class="sm:max-w-[425px]">
+        <DialogHeader>
+          <div class="flex items-center gap-3 mb-2">
+            <div class="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center overflow-hidden">
+              <img
+                v-if="selectedToken && selectedToken.image"
+                :src="selectedToken.image"
+                :alt="selectedToken.symbol"
               >
-                <path
-                  style="fill: currentColor"
-                  :d="mdiRefresh"
-                />
-              </svg>
-              <svg
+              <span
                 v-else
-                width="16"
-                height="16"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                class="mr-2"
+                class="text-base font-medium text-primary"
               >
-                <path
-                  style="fill: currentColor"
-                  :d="mdiSend"
-                />
-              </svg>
-              {{ isTransferLoading ? 'Transferring...' : 'Transfer' }}
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-
-      <!-- Transform Dialog -->
-      <Dialog v-model:open="isTransformDialogOpen">
-        <DialogContent class="sm:max-w-[425px]">
-          <DialogHeader>
-            <div class="flex items-center gap-3 mb-2">
-              <div class="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center overflow-hidden">
-                <img
-                  v-if="selectedToken && selectedToken.image"
-                  :src="selectedToken.image"
-                  :alt="selectedToken.symbol"
-                >
-                <span
-                  v-else
-                  class="text-base font-medium text-primary"
-                >
-                  {{ selectedToken ? selectedToken.symbol!.charAt(0).toUpperCase() : '' }}
-                </span>
-              </div>
-              <DialogTitle>
-                {{ transformDirection === 'liquid-to-staked' ? 'Stake' : 'Unstake' }} {{ selectedToken ? selectedToken.name : '' }}
-              </DialogTitle>
+                {{ selectedToken ? selectedToken.symbol!.charAt(0).toUpperCase() : '' }}
+              </span>
             </div>
-            <DialogDescription>
-              {{ transformDirection === 'liquid-to-staked'
-                ? `Stake tokens to earn rewards. Available: ${selectedToken ? selectedToken.displayBalance : '0'} ${selectedToken ? selectedToken.symbol : ''}`
-                : `Unstake tokens to make them liquid. Available: ${selectedToken ? selectedToken.displayBalance : '0'} ${selectedToken ? selectedToken.symbol : ''}`
-              }}
-            </DialogDescription>
-          </DialogHeader>
-
-          <div class="grid gap-4 py-4">
-            <TokenAmountInput
-              v-if="selectedToken"
-              v-model="transformAmount"
-              variant="explicit"
-              :token="selectedToken"
-              :disabled="isTransformLoading"
-              :available-balance="selectedToken.displayBalance"
-              @max="setMaxTransformAmount"
-            />
+            <DialogTitle>
+              {{ transformDirection === 'liquid-to-staked' ? 'Stake' : 'Unstake' }} {{ selectedToken ? selectedToken.name : '' }}
+            </DialogTitle>
           </div>
+          <DialogDescription>
+            {{ transformDirection === 'liquid-to-staked'
+              ? `Stake tokens to earn rewards. Available: ${selectedToken ? selectedToken.displayBalance : '0'} ${selectedToken ? selectedToken.symbol : ''}`
+              : `Unstake tokens to make them liquid. Available: ${selectedToken ? selectedToken.displayBalance : '0'} ${selectedToken ? selectedToken.symbol : ''}`
+            }}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div class="grid gap-4 py-4">
+          <TokenAmountInput
+            v-if="selectedToken"
+            v-model="transformAmount"
+            variant="explicit"
+            :token="selectedToken"
+            :disabled="isTransformLoading"
+            :available-balance="selectedToken.displayBalance"
+            @max="setMaxTransformAmount"
+          />
+        </div>
 
-          <div class="flex justify-end gap-2">
-            <Button
-              variant="outline"
-              @click="isTransformDialogOpen = false"
+        <div class="flex justify-end gap-2">
+          <Button
+            variant="outline"
+            @click="isTransformDialogOpen = false"
+          >
+            Cancel
+          </Button>
+          <Button
+            :disabled="isTransformLoading || !transformAmount"
+            @click="transformTokens"
+          >
+            <svg
+              v-if="isTransformLoading"
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="mr-2 animate-spin"
             >
-              Cancel
-            </Button>
-            <Button
-              :disabled="isTransformLoading || !transformAmount"
-              @click="transformTokens"
+              <path
+                style="fill: currentColor"
+                :d="mdiRefresh"
+              />
+            </svg>
+            <svg
+              v-else
+              width="16"
+              height="16"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              class="mr-2"
             >
-              <svg
-                v-if="isTransformLoading"
-                width="16"
-                height="16"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                class="mr-2 animate-spin"
-              >
-                <path
-                  style="fill: currentColor"
-                  :d="mdiRefresh"
-                />
-              </svg>
-              <svg
-                v-else
-                width="16"
-                height="16"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                class="mr-2"
-              >
-                <path
-                  style="fill: currentColor"
-                  :d="transformDirection === 'liquid-to-staked' ? mdiArrowUp : mdiArrowDown"
-                />
-              </svg>
-              {{ isTransformLoading
-                ? (transformDirection === 'liquid-to-staked' ? 'Staking...' : 'Unstaking...')
-                : (transformDirection === 'liquid-to-staked' ? 'Stake' : 'Unstake')
-              }}
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-    </div>
-  </HTMView>
+              <path
+                style="fill: currentColor"
+                :d="transformDirection === 'liquid-to-staked' ? mdiArrowUp : mdiArrowDown"
+              />
+            </svg>
+            {{ isTransformLoading
+              ? (transformDirection === 'liquid-to-staked' ? 'Staking...' : 'Unstaking...')
+              : (transformDirection === 'liquid-to-staked' ? 'Stake' : 'Unstake')
+            }}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  </div>
 </template>
diff --git a/src/pages/tokens/pos/receive.vue b/src/pages/tokens/pos/receive.vue
index 3504a20245f77983b1562ffd8415262c89c3e556..b677275daece3567dca2105c25cd4128ff6701a4 100644
--- a/src/pages/tokens/pos/receive.vue
+++ b/src/pages/tokens/pos/receive.vue
@@ -3,7 +3,6 @@ import { mdiArrowLeft } from '@mdi/js';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import HTMView from '@/components/htm/HTMView.vue';
 import QRCodeCard from '@/components/htm/tokens/QRCodeCard.vue';
 import SendTransferCard from '@/components/SendTransferCard.vue';
 import { Button } from '@/components/ui/button';
@@ -12,6 +11,10 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { useTokensStore, type CTokenDisplayBase } from '@/stores/tokens.store';
 import { toastError } from '@/utils/parse-error';
 
+definePageMeta({
+  layout: 'htm'
+});
+
 // Router
 const route = useRoute();
 const router = useRouter();
@@ -129,84 +132,82 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
 </script>
 
 <template>
-  <HTMView>
-    <div class="container mx-auto py-4 sm:py-6 space-y-6 px-4 max-w-4xl">
-      <!-- Header -->
-      <div class="flex items-center justify-between gap-4">
-        <NuxtLink v-if="token" :to="`/tokens/token?asset-num=${token!.assetNum}`" class="keychainify-checked">
-          <Button
-            variant="ghost"
-            size="sm"
-            class="gap-2 hover:bg-accent"
-            @click="goBack"
+  <div class="container mx-auto py-4 sm:py-6 space-y-6 px-4 max-w-4xl">
+    <!-- Header -->
+    <div class="flex items-center justify-between gap-4">
+      <NuxtLink v-if="token" :to="`/tokens/token?asset-num=${token!.assetNum}`" class="keychainify-checked">
+        <Button
+          variant="ghost"
+          size="sm"
+          class="gap-2 hover:bg-accent"
+          @click="goBack"
+        >
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="flex-shrink-0"
           >
-            <svg
-              width="16"
-              height="16"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              class="flex-shrink-0"
-            >
-              <path
-                style="fill: currentColor"
-                :d="mdiArrowLeft"
-              />
-            </svg>
-            Back to Token
-          </Button>
-        </NuxtLink>
-      </div>
+            <path
+              style="fill: currentColor"
+              :d="mdiArrowLeft"
+            />
+          </svg>
+          Back to Token
+        </Button>
+      </NuxtLink>
+    </div>
 
-      <!-- Loading State -->
-      <div
-        v-if="isLoading"
-        class="space-y-6"
-      >
-        <Card>
-          <CardHeader>
-            <Skeleton class="h-8 w-48" />
-            <Skeleton class="h-4 w-64" />
-          </CardHeader>
-          <CardContent class="space-y-4">
-            <Skeleton class="h-10 w-full" />
-            <Skeleton class="h-10 w-full" />
-            <Skeleton class="h-24 w-full" />
-          </CardContent>
-        </Card>
-      </div>
+    <!-- Loading State -->
+    <div
+      v-if="isLoading"
+      class="space-y-6"
+    >
+      <Card>
+        <CardHeader>
+          <Skeleton class="h-8 w-48" />
+          <Skeleton class="h-4 w-64" />
+        </CardHeader>
+        <CardContent class="space-y-4">
+          <Skeleton class="h-10 w-full" />
+          <Skeleton class="h-10 w-full" />
+          <Skeleton class="h-24 w-full" />
+        </CardContent>
+      </Card>
+    </div>
 
-      <!-- Receive Form -->
-      <div
-        v-if="!isLoading"
-        class="space-y-6"
-      >
-        <!-- Page Title -->
-        <div>
-          <h1 class="text-3xl font-bold text-foreground mb-2">
-            Generate QR Code
-          </h1>
-          <p class="text-muted-foreground">
-            Generate a QR code for others to scan and send you tokens.
-          </p>
-        </div>
-
-        <!-- Send Transfer Card -->
-        <SendTransferCard
-          :token="token || undefined"
-          @update-token="handleTokenUpdate"
-          @update-amount="form.amount = $event"
-          @update-memo="form.memo = $event"
-        />
-
-        <!-- QR Code Card (visible when asset number is available) -->
-        <QRCodeCard
-          v-if="assetNum"
-          :key="assetNum"
-          :asset-num="assetNum"
-          :amount="form.amount"
-          :memo="form.memo"
-        />
+    <!-- Receive Form -->
+    <div
+      v-if="!isLoading"
+      class="space-y-6"
+    >
+      <!-- Page Title -->
+      <div>
+        <h1 class="text-3xl font-bold text-foreground mb-2">
+          Generate QR Code
+        </h1>
+        <p class="text-muted-foreground">
+          Generate a QR code for others to scan and send you tokens.
+        </p>
       </div>
+
+      <!-- Send Transfer Card -->
+      <SendTransferCard
+        :token="token || undefined"
+        @update-token="handleTokenUpdate"
+        @update-amount="form.amount = $event"
+        @update-memo="form.memo = $event"
+      />
+
+      <!-- QR Code Card (visible when asset number is available) -->
+      <QRCodeCard
+        v-if="assetNum"
+        :key="assetNum"
+        :asset-num="assetNum"
+        :amount="form.amount"
+        :memo="form.memo"
+      />
     </div>
-  </HTMView>
+  </div>
 </template>
diff --git a/src/pages/tokens/pos/send.vue b/src/pages/tokens/pos/send.vue
index cdae7632023ea91a6fa7bac50be93478a31d9883..885ed64e038fd9aee9dfe1c311851e04496fea26 100644
--- a/src/pages/tokens/pos/send.vue
+++ b/src/pages/tokens/pos/send.vue
@@ -3,24 +3,23 @@ import { mdiArrowLeft } from '@mdi/js';
 import { computed, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import HTMView from '@/components/htm/HTMView.vue';
 import ReceiveTransferCard from '@/components/ReceiveTransferCard.vue';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
-import { useSettingsStore } from '@/stores/settings.store';
 import { useTokensStore, type CTokenDefinitionDisplay } from '@/stores/tokens.store';
-import { useUserStore } from '@/stores/user.store';
 import { toastError } from '@/utils/parse-error';
-import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+definePageMeta({
+  layout: 'htm',
+  isPublicPage: true
+});
 
 // Router
 const route = useRoute();
 const router = useRouter();
 
-const settingsStore = useSettingsStore();
 const tokensStore = useTokensStore();
-const userStore = useUserStore();
 
 // State
 const token = ref<CTokenDefinitionDisplay | undefined>(undefined);
@@ -28,37 +27,10 @@ const isLoading = ref(true);
 
 // Get parameters from route query
 const assetNum = computed(() => Number(route.query['asset-num']));
-const receiverKey = computed(() => route.query.to as string || CTokensProvider.getOperationalPublicKey());
+const receiverKey = computed(() => route.query.to as string || tokensStore.getUserPublicKey());
 const queryAmount = computed(() => route.query.amount as string | undefined);
 const queryMemo = computed(() => route.query.memo as string | undefined);
 
-const userOperationalKey = computed(() => CTokensProvider.getOperationalPublicKey());
-
-// Check if user is logged in
-const isLoggedIn = computed(() => !!tokensStore.wallet);
-
-const htmUserMetadata = ref<{
-  displayName: string;
-  about?: string;
-  name?: string;
-  profileImage?: string;
-  website?: string;
-} | undefined>(undefined);
-
-const fetchHTMUserData = async () => {
-  try {
-    htmUserMetadata.value = await tokensStore.getCurrentUserMetadata();
-  } catch (_error) {}
-};
-
-// Receiver display helpers
-const receiverDisplayName = computed(() => {
-  // The recipient is you — prefer parsed user name (L2 if available)
-  const name = userStore.name || settingsStore.settings.account || userOperationalKey.value || '';
-  if (name) return name;
-  return 'You';
-});
-
 // Load token details
 const loadTokenDetails = async () => {
   if (!assetNum.value) return;
@@ -77,12 +49,6 @@ onMounted(async () => {
 
   isLoading.value = true;
 
-  // Load user balances if logged in
-  if (isLoggedIn.value) {
-    await tokensStore.loadBalances();
-    await fetchHTMUserData();
-  }
-
   // Load token details if asset number is available
   if (assetNum.value)
     await loadTokenDetails();
@@ -90,26 +56,6 @@ onMounted(async () => {
   isLoading.value = false;
 });
 
-// If the user logs in after the page mounted, reload balances, HTM user metadata, and token details
-watch(isLoggedIn, async (loggedIn, wasLoggedIn) => {
-  // Only act when the user becomes logged in
-  if (!loggedIn || wasLoggedIn === loggedIn) return;
-
-  isLoading.value = true;
-
-  try {
-    await tokensStore.loadBalances();
-    await fetchHTMUserData();
-
-    if (assetNum.value)
-      await loadTokenDetails();
-  } catch (e) {
-    toastError('Error reloading data after login', e);
-  } finally {
-    isLoading.value = false;
-  }
-});
-
 // Also watch the tokens store wallet instance
 watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
   if (!newWallet || newWallet === oldWallet) return;
@@ -117,9 +63,6 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
   isLoading.value = true;
 
   try {
-    await tokensStore.loadBalances();
-    await fetchHTMUserData();
-
     if (assetNum.value)
       await loadTokenDetails();
   } catch (e) {
@@ -131,78 +74,74 @@ watch(() => tokensStore.wallet, async (newWallet, oldWallet) => {
 </script>
 
 <template>
-  <HTMView>
-    <div class="container mx-auto py-4 sm:py-6 space-y-6 px-4 max-w-4xl">
-      <!-- Header -->
-      <div class="flex items-center justify-between gap-4">
-        <NuxtLink :to="`/tokens/token?asset-num=${assetNum}`" class="keychainify-checked">
-          <Button
-            v-if="assetNum"
-            variant="ghost"
-            size="sm"
-            class="gap-2 hover:bg-accent"
+  <div class="container mx-auto py-4 sm:py-6 space-y-6 px-4 max-w-4xl">
+    <!-- Header -->
+    <div class="flex items-center justify-between gap-4">
+      <NuxtLink :to="`/tokens/token?asset-num=${assetNum}`" class="keychainify-checked">
+        <Button
+          v-if="assetNum"
+          variant="ghost"
+          size="sm"
+          class="gap-2 hover:bg-accent"
+        >
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="flex-shrink-0"
           >
-            <svg
-              width="16"
-              height="16"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              class="flex-shrink-0"
-            >
-              <path
-                style="fill: currentColor"
-                :d="mdiArrowLeft"
-              />
-            </svg>
-            Back to Token
-          </Button>
-        </NuxtLink>
-      </div>
+            <path
+              style="fill: currentColor"
+              :d="mdiArrowLeft"
+            />
+          </svg>
+          Back to Token
+        </Button>
+      </NuxtLink>
+    </div>
 
-      <!-- Loading State -->
-      <div
-        v-if="isLoading"
-        class="space-y-6"
-      >
-        <Card>
-          <CardHeader>
-            <Skeleton class="h-8 w-48" />
-            <Skeleton class="h-4 w-64" />
-          </CardHeader>
-          <CardContent class="space-y-4">
-            <Skeleton class="h-10 w-full" />
-            <Skeleton class="h-10 w-full" />
-            <Skeleton class="h-24 w-full" />
-          </CardContent>
-        </Card>
-      </div>
+    <!-- Loading State -->
+    <div
+      v-if="isLoading"
+      class="space-y-6"
+    >
+      <Card>
+        <CardHeader>
+          <Skeleton class="h-8 w-48" />
+          <Skeleton class="h-4 w-64" />
+        </CardHeader>
+        <CardContent class="space-y-4">
+          <Skeleton class="h-10 w-full" />
+          <Skeleton class="h-10 w-full" />
+          <Skeleton class="h-24 w-full" />
+        </CardContent>
+      </Card>
+    </div>
 
-      <!-- Send Token Form (from QR scan) -->
-      <div
-        v-if="!isLoading"
-        class="space-y-6"
-      >
-        <!-- Page Title -->
-        <div>
-          <h1 class="text-3xl font-bold text-foreground mb-2">
-            Send Token
-          </h1>
-          <p class="text-muted-foreground">
-            Confirm and send the token transfer.
-          </p>
-        </div>
-
-        <!-- Receive Transfer Card -->
-        <ReceiveTransferCard
-          :receiver-name="htmUserMetadata?.displayName || receiverDisplayName"
-          :receiver-key="receiverKey"
-          :receiver-avatar="htmUserMetadata?.profileImage"
-          :token-data="token"
-          :query-amount="queryAmount"
-          :query-memo="queryMemo"
-          :asset-num="assetNum"
-        />
+    <!-- Send Token Form (from QR scan) -->
+    <div
+      v-if="!isLoading"
+      class="space-y-6"
+    >
+      <!-- Page Title -->
+      <div>
+        <h1 class="text-3xl font-bold text-foreground mb-2">
+          Send Token
+        </h1>
+        <p class="text-muted-foreground">
+          Confirm and send the token transfer.
+        </p>
       </div>
+
+      <!-- Receive Transfer Card -->
+      <ReceiveTransferCard
+        :receiver-key="receiverKey"
+        :token-data="token"
+        :query-amount="queryAmount"
+        :query-memo="queryMemo"
+        :asset-num="assetNum"
+      />
     </div>
-  </HTMView>
+  </div>
 </template>
diff --git a/src/pages/tokens/token.vue b/src/pages/tokens/token.vue
index a6061fe23c8c366068a3c189e2529283aec70f5a..0e18e9aec70efbc147efa37ef9e84e60a8d79345 100644
--- a/src/pages/tokens/token.vue
+++ b/src/pages/tokens/token.vue
@@ -3,7 +3,6 @@ import { mdiPencilOutline, mdiQrcodeScan } from '@mdi/js';
 import { onMounted, ref, computed, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
-import HTMView from '@/components/htm/HTMView.vue';
 import TokenInformationCard from '@/components/htm/tokens/TokenInformationCard.vue';
 import TokenStakeCard from '@/components/htm/tokens/TokenStakeCard.vue';
 import TokenTopHoldersCard from '@/components/htm/tokens/TokenTopHoldersCard.vue';
@@ -14,7 +13,11 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { formatAsset, useTokensStore, type CTokenBalanceDisplay, type CTokenDefinitionDisplay, type CTokenUserRanked } from '@/stores/tokens.store';
 import { getWax } from '@/stores/wax.store';
 import { toastError } from '@/utils/parse-error';
-import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+definePageMeta({
+  layout: 'htm',
+  isPublicPage: true
+});
 
 // Router
 const route = useRoute();
@@ -38,8 +41,8 @@ const isLoggedIn = computed(() => !!tokensStore.wallet);
 
 // Check if current user is the token owner
 const isTokenOwner = computed(() => {
-  if (!token.value?.ownerPublicKey || !CTokensProvider.getOperationalPublicKey()) return false;
-  return token.value.ownerPublicKey === CTokensProvider.getOperationalPublicKey();
+  if (!token.value?.ownerPublicKey || !tokensStore.getUserPublicKey()) return false;
+  return token.value.ownerPublicKey === tokensStore.getUserPublicKey();
 });
 
 // Load token details
@@ -53,7 +56,7 @@ const loadTokenDetails = async () => {
     if (isLoggedIn.value) {
       try {
         userBalance.value = await tokensStore.getBalanceSingleToken(
-          CTokensProvider.getOperationalPublicKey()!,
+          tokensStore.getUserPublicKey()!,
           assetNum.value
         );
       } catch {
@@ -121,15 +124,39 @@ onMounted(async () => {
 </script>
 
 <template>
-  <HTMView is-public-page>
-    <div class="container mx-auto py-4 sm:py-6 space-y-6 px-4">
-      <!-- Header with back button -->
-      <div class="flex items-center justify-between gap-4">
-        <NuxtLink to="/tokens/list" class="keychainify-checked">
+  <div class="container mx-auto py-4 sm:py-6 space-y-6 px-4">
+    <!-- Header with back button -->
+    <div class="flex items-center justify-between gap-4">
+      <NuxtLink to="/tokens/list" class="keychainify-checked">
+        <Button
+          variant="ghost"
+          size="sm"
+          class="gap-2 hover:bg-accent"
+        >
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="flex-shrink-0"
+          >
+            <path
+              style="fill: currentColor"
+              d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
+            />
+          </svg>
+          Back to Tokens
+        </Button>
+      </NuxtLink>
+      <div
+        class="flex gap-3"
+      >
+        <NuxtLink :to="`/tokens/pos/receive?asset-num=${assetNum}`" class="keychainify-checked">
           <Button
-            variant="ghost"
+            variant="outline"
             size="sm"
-            class="gap-2 hover:bg-accent"
+            class="gap-2"
+            @click="showQRCode"
           >
             <svg
               width="16"
@@ -140,130 +167,104 @@ onMounted(async () => {
             >
               <path
                 style="fill: currentColor"
-                d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
+                :d="mdiQrcodeScan"
               />
             </svg>
-            Back to Tokens
+            Show QR Code
           </Button>
         </NuxtLink>
-        <div
-          class="flex gap-3"
+        <NuxtLink v-if="isTokenOwner" :to="`/tokens/edit?asset-num=${assetNum}`" class="keychainify-checked">
+        <Button
+          variant="default"
+          size="sm"
+          class="gap-2"
         >
-          <NuxtLink :to="`/tokens/pos/receive?asset-num=${assetNum}`" class="keychainify-checked">
-            <Button
-              variant="outline"
-              size="sm"
-              class="gap-2"
-              @click="showQRCode"
-            >
-              <svg
-                width="16"
-                height="16"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                class="flex-shrink-0"
-              >
-                <path
-                  style="fill: currentColor"
-                  :d="mdiQrcodeScan"
-                />
-              </svg>
-              Show QR Code
-            </Button>
-          </NuxtLink>
-          <NuxtLink v-if="isTokenOwner" :to="`/tokens/edit?asset-num=${assetNum}`" class="keychainify-checked">
-          <Button
-            variant="default"
-            size="sm"
-            class="gap-2"
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="flex-shrink-0"
           >
-            <svg
-              width="16"
-              height="16"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              class="flex-shrink-0"
-            >
-              <path
-                style="fill: currentColor"
-                :d="mdiPencilOutline"
-              />
-            </svg>
-            Edit Token Definition
-          </Button>
-          </NuxtLink>
-        </div>
+            <path
+              style="fill: currentColor"
+              :d="mdiPencilOutline"
+            />
+          </svg>
+          Edit Token Definition
+        </Button>
+        </NuxtLink>
       </div>
+    </div>
 
-      <!-- Loading State -->
-      <div
-        v-if="isLoading"
-        class="space-y-6"
-      >
-        <div class="flex items-center gap-4">
-          <Skeleton class="h-16 w-16 rounded-full" />
-          <div class="space-y-2">
-            <Skeleton class="h-8 w-48" />
-            <Skeleton class="h-4 w-32" />
-          </div>
+    <!-- Loading State -->
+    <div
+      v-if="isLoading"
+      class="space-y-6"
+    >
+      <div class="flex items-center gap-4">
+        <Skeleton class="h-16 w-16 rounded-full" />
+        <div class="space-y-2">
+          <Skeleton class="h-8 w-48" />
+          <Skeleton class="h-4 w-32" />
         </div>
+      </div>
 
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-          <Card
-            v-for="i in 3"
-            :key="i"
-          >
-            <CardHeader>
-              <Skeleton class="h-5 w-24" />
-            </CardHeader>
-            <CardContent>
-              <Skeleton class="h-8 w-32" />
-            </CardContent>
-          </Card>
-        </div>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <Card
+          v-for="i in 3"
+          :key="i"
+        >
+          <CardHeader>
+            <Skeleton class="h-5 w-24" />
+          </CardHeader>
+          <CardContent>
+            <Skeleton class="h-8 w-32" />
+          </CardContent>
+        </Card>
       </div>
+    </div>
 
-      <!-- Token Details -->
-      <div
-        v-else-if="token"
-        class="space-y-6"
-      >
-        <!-- Token Information Card -->
-        <TokenInformationCard
+    <!-- Token Details -->
+    <div
+      v-else-if="token"
+      class="space-y-6"
+    >
+      <!-- Token Information Card -->
+      <TokenInformationCard
+        :token="token"
+        :user-balance="userBalance"
+        :is-logged-in="isLoggedIn"
+      />
+
+      <!-- Actions Section -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
+        <!-- Transfer Section -->
+        <TokenTransferCard
           :token="token"
           :user-balance="userBalance"
           :is-logged-in="isLoggedIn"
+          :asset-num="assetNum"
+          @refresh="refreshData"
         />
 
-        <!-- Actions Section -->
-        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
-          <!-- Transfer Section -->
-          <TokenTransferCard
-            :token="token"
-            :user-balance="userBalance"
-            :is-logged-in="isLoggedIn"
-            :asset-num="assetNum"
-            @refresh="refreshData"
-          />
-
-          <!-- Stake/Unstake Section -->
-          <TokenStakeCard
-            :token="token"
-            :user-balance="userBalance"
-            :is-logged-in="isLoggedIn"
-            :is-token-owner="isTokenOwner"
-            :asset-num="assetNum"
-            @refresh="refreshData"
-          />
+        <!-- Stake/Unstake Section -->
+        <TokenStakeCard
+          :token="token"
+          :user-balance="userBalance"
+          :is-logged-in="isLoggedIn"
+          :is-token-owner="isTokenOwner"
+          :asset-num="assetNum"
+          @refresh="refreshData"
+        />
 
-          <!-- Top Holders Section -->
-          <TokenTopHoldersCard
-            :token="token"
-            :top-holders="topHolders"
-            :is-loading-holders="isLoadingHolders"
-          />
-        </div>
+        <!-- Top Holders Section -->
+        <TokenTopHoldersCard
+          :token="token"
+          :top-holders="topHolders"
+          :is-loading-holders="isLoadingHolders"
+        />
       </div>
     </div>
-  </HTMView>
+  </div>
 </template>
diff --git a/src/pages/tokens/users/[id].vue b/src/pages/tokens/users/[id].vue
new file mode 100644
index 0000000000000000000000000000000000000000..f5fc2d8de59fb8feb65adf37e44daa94a3ccf6f3
--- /dev/null
+++ b/src/pages/tokens/users/[id].vue
@@ -0,0 +1,257 @@
+<script setup lang="ts">
+import { mdiStar, mdiStarOutline } from '@mdi/js';
+import { onMounted, ref, computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+import HTMTokenBalancesTable from '@/components/htm/HTMTokenBalancesTable.vue';
+import HTMUserHeader from '@/components/htm/HTMUserHeader.vue';
+import HTMUserKeys from '@/components/htm/HTMUserKeys.vue';
+import HTMUserMetadata from '@/components/htm/HTMUserMetadata.vue';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useFavoritesStore } from '@/stores/favorites.store';
+import { useTokensStore, type CTokenUser, type CTokenPairBalanceDefinition } from '@/stores/tokens.store';
+import { toastError } from '@/utils/parse-error';
+
+definePageMeta({
+  layout: 'htm',
+  isPublicPage: true
+});
+
+// Router
+const route = useRoute();
+
+// Stores
+const tokensStore = useTokensStore();
+const favoritesStore = useFavoritesStore();
+
+// State
+const user = ref<CTokenUser | null>(null);
+const userBalances = ref<CTokenPairBalanceDefinition[]>([]);
+const isLoading = ref(true);
+const isLoadingBalances = ref(false);
+
+// Get operational key from route parameter
+const operationalKey = computed(() => decodeURIComponent(route.params.id as string));
+
+// Check if account is favorited
+const isFavorited = computed(() => favoritesStore.isAccountFavorited(operationalKey.value));
+
+// Toggle favorite
+const toggleFavorite = () => {
+  if (!user.value) return;
+
+  if (isFavorited.value)
+    favoritesStore.removeAccountFromFavorites(operationalKey.value);
+  else {
+    favoritesStore.addAccountToFavorites({
+      operationalKey: user.value.operationalKey,
+      displayName: user.value.displayName,
+      name: user.value.name,
+      profileImage: user.value.profileImage,
+      about: user.value.about
+    });
+  }
+};
+
+// Load user details
+const loadUserDetails = async () => {
+  try {
+    user.value = await tokensStore.getUser(operationalKey.value);
+
+    // Update favorite info if it exists
+    if (user.value && isFavorited.value) {
+      favoritesStore.updateAccountInfo(operationalKey.value, {
+        displayName: user.value.displayName,
+        name: user.value.name,
+        profileImage: user.value.profileImage,
+        about: user.value.about
+      });
+    }
+  } catch (error) {
+    toastError('Failed to load user details', error);
+  }
+};
+
+// Load user token balances
+const loadUserBalances = async () => {
+  if (!user.value) return;
+
+  try {
+    isLoadingBalances.value = true;
+    const balances = await tokensStore.getBalance(user.value.operationalKey, undefined, 1);
+    userBalances.value = balances.items.filter(b => b.total > 0n);
+  } catch {
+    // Silently fail - user might not have any balances
+    userBalances.value = [];
+  } finally {
+    isLoadingBalances.value = false;
+  }
+};
+
+// Initialize
+onMounted(async () => {
+  isLoading.value = true;
+  await loadUserDetails();
+  if (user.value)
+    await loadUserBalances();
+
+  isLoading.value = false;
+});
+</script>
+
+<template>
+  <div class="container mx-auto py-4 sm:py-6 space-y-6 px-4">
+    <!-- Header with back button and favorite toggle -->
+    <div class="flex items-center justify-between gap-4">
+      <NuxtLink to="/tokens/users/favorites" class="keychainify-checked">
+        <Button
+          variant="ghost"
+          size="sm"
+          class="gap-2 hover:bg-accent"
+        >
+          <svg
+            width="16"
+            height="16"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            class="flex-shrink-0"
+          >
+            <path
+              style="fill: currentColor"
+              d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
+            />
+          </svg>
+          Back to Favorites
+        </Button>
+      </NuxtLink>
+
+      <Button
+        v-if="user"
+        variant="outline"
+        size="sm"
+        @click="toggleFavorite"
+      >
+        <svg
+          width="16"
+          height="16"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="mr-2"
+          :class="{ 'text-yellow-500': isFavorited }"
+        >
+          <path
+            style="fill: currentColor"
+            :d="isFavorited ? mdiStar : mdiStarOutline"
+          />
+        </svg>
+        {{ isFavorited ? 'Unfavorite' : 'Add to Favorites' }}
+      </Button>
+    </div>
+
+    <!-- Loading State -->
+    <div
+      v-if="isLoading"
+      class="space-y-6"
+    >
+      <Card>
+        <CardHeader class="pb-6">
+          <div class="flex flex-col md:flex-row items-start gap-6">
+            <Skeleton class="h-32 w-32 rounded-full flex-shrink-0" />
+            <div class="flex-1 space-y-4 w-full">
+              <Skeleton class="h-10 w-64" />
+              <Skeleton class="h-5 w-full max-w-md" />
+              <div class="flex gap-2">
+                <Skeleton class="h-8 w-20" />
+                <Skeleton class="h-8 w-20" />
+                <Skeleton class="h-8 w-20" />
+              </div>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent class="space-y-6">
+          <Skeleton class="h-24 w-full" />
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <Skeleton class="h-20 w-full" />
+            <Skeleton class="h-20 w-full" />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+
+    <!-- User Details -->
+    <div
+      v-else-if="user"
+      class="space-y-6"
+    >
+      <!-- Main Profile Card -->
+      <Card class="overflow-hidden">
+        <CardHeader class="pb-6 bg-gradient-to-br from-primary/5 to-primary/10">
+          <HTMUserHeader :user="user" />
+        </CardHeader>
+
+        <CardContent class="pt-6 space-y-6">
+          <HTMUserKeys :user="user" />
+        </CardContent>
+      </Card>
+
+      <!-- Token Balances -->
+      <div v-if="userBalances.length > 0 || isLoadingBalances">
+        <div class="flex items-center justify-between mb-4">
+          <h2 class="text-2xl font-bold">Token Holdings</h2>
+          <span class="text-sm text-muted-foreground">
+            {{ userBalances.length }} {{ userBalances.length === 1 ? 'token' : 'tokens' }}
+          </span>
+        </div>
+
+        <!-- Loading Skeleton for Table -->
+        <Card v-if="isLoadingBalances">
+          <CardContent class="p-4 space-y-4">
+            <Skeleton class="h-12 w-full" />
+            <Skeleton class="h-20 w-full" />
+            <Skeleton class="h-20 w-full" />
+            <Skeleton class="h-20 w-full" />
+          </CardContent>
+        </Card>
+
+        <!-- Token Balances Table -->
+        <HTMTokenBalancesTable
+          v-else
+          :balances="userBalances"
+          :show-actions="false"
+        />
+      </div>
+
+      <!-- Additional Metadata -->
+      <HTMUserMetadata :metadata="user.metadata" />
+    </div>
+
+    <!-- Error State -->
+    <Card v-else>
+      <CardContent class="text-center py-12">
+        <svg
+          width="64"
+          height="64"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="mx-auto text-muted-foreground mb-4"
+        >
+          <path
+            style="fill: currentColor"
+            d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"
+          />
+        </svg>
+        <h3 class="text-lg font-semibold mb-2">
+          User Not Found
+        </h3>
+        <p class="text-muted-foreground mb-4">
+          The user you're looking for doesn't exist or has been removed.
+        </p>
+        <NuxtLink to="/tokens/users/favorites" class="keychainify-checked">
+          <Button>Back to Favorites</Button>
+        </NuxtLink>
+      </CardContent>
+    </Card>
+  </div>
+</template>
diff --git a/src/pages/tokens/users/favorites.vue b/src/pages/tokens/users/favorites.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3fd7fe799c3367b061faaa04e515cfe9c82d4e91
--- /dev/null
+++ b/src/pages/tokens/users/favorites.vue
@@ -0,0 +1,390 @@
+<script setup lang="ts">
+import { mdiStarOutline, mdiCloseCircle, mdiDownload, mdiUpload, mdiDeleteOutline, mdiStarOff } from '@mdi/js';
+import { onMounted, ref, computed } from 'vue';
+import { toast } from 'vue-sonner';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent } from '@/components/ui/card';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { TextTooltip } from '@/components/ui/texttooltip';
+import { useFavoritesStore, type FavoriteAccount } from '@/stores/favorites.store';
+import { toastError } from '@/utils/parse-error';
+
+definePageMeta({
+  layout: 'htm'
+});
+
+// Store
+const favoritesStore = useFavoritesStore();
+
+// State
+const searchQuery = ref('');
+
+// Computed
+const filteredAccounts = computed(() => {
+  if (!searchQuery.value.trim())
+    return favoritesStore.accounts;
+
+
+  const query = searchQuery.value.toLowerCase();
+  return favoritesStore.accounts.filter(account =>
+    account.operationalKey.toLowerCase().includes(query) ||
+    account.displayName?.toLowerCase().includes(query) ||
+    account.name?.toLowerCase().includes(query) ||
+    account.about?.toLowerCase().includes(query)
+  );
+});
+
+const clearSearch = () => {
+  searchQuery.value = '';
+};
+
+// Unfavorite with undo
+const handleUnfavorite = (account: FavoriteAccount) => {
+  const removedAccount = { ...account };
+  favoritesStore.removeAccountFromFavorites(account.operationalKey);
+
+  toast.success(`Removed ${account.displayName || account.name || account.operationalKey} from favorites`, {
+    action: {
+      label: 'Undo',
+      onClick: () => {
+        favoritesStore.addAccountToFavorites(removedAccount);
+        toast.success('Restored to favorites');
+      }
+    },
+    duration: 5000
+  });
+};
+
+// Get avatar fallback
+const getAvatarFallback = (account: FavoriteAccount): string => {
+  if (account.name)
+    return account.name.slice(0, 2).toUpperCase();
+  if (account.displayName)
+    return account.displayName.slice(0, 2).toUpperCase();
+  if (account.operationalKey)
+    return account.operationalKey.slice(3, 5).toUpperCase();
+  return '??';
+};
+
+// Export/Import functionality
+const exportFavorites = () => {
+  const data = favoritesStore.exportFavorites();
+  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `htm-favorites-${new Date().toISOString().split('T')[0]}.json`;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+
+  toast.success('Favorites exported successfully');
+};
+
+const importFavorites = (event: Event) => {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  if (!file) return;
+
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    try {
+      const data = JSON.parse(e.target?.result as string);
+      const result = favoritesStore.importFavorites(data);
+
+      if (result.accountsImported > 0 || result.tokensImported > 0) {
+        const parts = [];
+        if (result.accountsImported > 0)
+          parts.push(`${result.accountsImported} account${result.accountsImported > 1 ? 's' : ''}`);
+
+        if (result.tokensImported > 0)
+          parts.push(`${result.tokensImported} token${result.tokensImported > 1 ? 's' : ''}`);
+
+        toast.success(`Imported ${parts.join(' and ')}`);
+      } else
+        toast.info('No new favorites to import');
+
+
+      if (result.errors.length > 0)
+        toastError(`${result.errors.length} invalid item${result.errors.length > 1 ? 's' : ''} skipped`);
+    } catch {
+      toastError('Failed to import favorites. Invalid file format.');
+    }
+
+    // Reset input so the same file can be selected again
+    input.value = '';
+  };
+  reader.readAsText(file);
+};
+
+// Initialize
+onMounted(() => {
+  favoritesStore.loadFromStorage();
+});
+</script>
+
+<template>
+  <div class="container mx-auto py-6 space-y-6">
+    <!-- Header -->
+    <div class="flex items-center justify-between">
+      <div>
+        <h1 class="text-3xl font-bold tracking-tight">
+          Favorite Accounts
+        </h1>
+        <p class="text-muted-foreground">
+          Quick access to your saved HTM accounts
+        </p>
+      </div>
+
+      <div class="flex gap-2">
+        <!-- Export/Import Dialog -->
+        <Dialog>
+          <DialogTrigger as-child>
+            <Button
+              variant="outline"
+            >
+              <svg
+                width="16"
+                height="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                class="mr-2"
+              >
+                <path
+                  style="fill: currentColor"
+                  :d="mdiDownload"
+                />
+              </svg>
+              Manage
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Manage Favorites</DialogTitle>
+              <DialogDescription>
+                Export or import your favorite accounts for backup or transfer.
+              </DialogDescription>
+            </DialogHeader>
+            <div class="space-y-4 pt-4">
+              <Button
+                variant="outline"
+                class="w-full"
+                @click="exportFavorites"
+              >
+                <svg
+                  width="16"
+                  height="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  class="mr-2"
+                >
+                  <path
+                    style="fill: currentColor"
+                    :d="mdiDownload"
+                  />
+                </svg>
+                Export Favorites
+              </Button>
+              <div>
+                <label
+                  for="import-file"
+                  class="block"
+                >
+                  <Button
+                    variant="outline"
+                    as="span"
+                    class="w-full cursor-pointer"
+                  >
+                    <svg
+                      width="16"
+                      height="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      class="mr-2"
+                    >
+                      <path
+                        style="fill: currentColor"
+                        :d="mdiUpload"
+                      />
+                    </svg>
+                    Import Favorites
+                  </Button>
+                </label>
+                <input
+                  id="import-file"
+                  type="file"
+                  accept="application/json"
+                  class="hidden"
+                  @change="importFavorites"
+                >
+              </div>
+              <Button
+                variant="destructive"
+                class="w-full"
+                @click="favoritesStore.clearAccounts"
+              >
+                <svg
+                  width="16"
+                  height="16"
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 24 24"
+                  class="mr-2"
+                >
+                  <path
+                    style="fill: currentColor"
+                    :d="mdiDeleteOutline"
+                  />
+                </svg>
+                Clear All Favorites
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+
+    <!-- Search -->
+    <div class="flex flex-col sm:flex-row gap-4">
+      <div class="max-w-[350px] flex-1 relative">
+        <Input
+          v-model="searchQuery"
+          placeholder="Search favorites by name or key..."
+          class="w-full"
+        />
+        <svg
+          v-if="searchQuery.length > 0"
+          width="16"
+          height="16"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground cursor-pointer"
+          @click="clearSearch"
+        >
+          <path
+            style="fill: currentColor"
+            :d="mdiCloseCircle"
+          />
+        </svg>
+      </div>
+    </div>
+
+    <!-- Favorites List -->
+    <Card v-if="filteredAccounts.length > 0">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead class="w-[50px]" />
+            <TableHead>Account</TableHead>
+            <TableHead class="hidden md:table-cell">About</TableHead>
+            <TableHead class="text-right pr-6">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow
+            v-for="account in filteredAccounts"
+            :key="account.operationalKey"
+            class="group"
+          >
+            <NuxtLink
+              :to="`/tokens/users/${encodeURIComponent(account.operationalKey)}`"
+              class="keychainify-checked contents"
+            >
+              <TableCell>
+                <Avatar size="sm" shape="circle">
+                  <AvatarImage
+                    v-if="account.profileImage"
+                    :src="account.profileImage"
+                    :alt="account.displayName || account.name || 'User'"
+                  />
+                  <AvatarFallback>
+                    <svg
+                      v-if="!account.profileImage"
+                      width="20"
+                      height="20"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                      class="text-muted-foreground"
+                    >
+                      <path
+                        style="fill: currentColor"
+                        d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
+                      />
+                    </svg>
+                    <span v-else class="text-sm font-semibold">
+                      {{ getAvatarFallback(account) }}
+                    </span>
+                  </AvatarFallback>
+                </Avatar>
+              </TableCell>
+              <TableCell>
+                <div class="font-medium hover:text-primary transition-colors">
+                  {{ account.displayName || account.name || 'Unknown User' }}
+                </div>
+                <div class="text-xs text-muted-foreground font-mono truncate max-w-[200px]">
+                  {{ account.operationalKey }}
+                </div>
+              </TableCell>
+              <TableCell class="hidden md:table-cell">
+                <p class="text-sm text-muted-foreground line-clamp-2 max-w-md">
+                  {{ account.about || 'No bio provided' }}
+                </p>
+              </TableCell>
+              <TableCell class="text-right pr-4">
+                <TextTooltip content="Remove from favorites">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    class="h-8 w-8 text-muted-foreground hover:text-foreground hover:bg-accent"
+                    @click.prevent="handleUnfavorite(account)"
+                  >
+                    <svg
+                      width="18"
+                      height="18"
+                      xmlns="http://www.w3.org/2000/svg"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        style="fill: currentColor"
+                        :d="mdiStarOff"
+                      />
+                    </svg>
+                  </Button>
+                </TextTooltip>
+              </TableCell>
+            </NuxtLink>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </Card>
+
+    <!-- Empty State -->
+    <Card v-else>
+      <CardContent class="text-center py-12">
+        <svg
+          width="64"
+          height="64"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          class="mx-auto text-muted-foreground mb-4"
+        >
+          <path
+            style="fill: currentColor"
+            :d="mdiStarOutline"
+          />
+        </svg>
+        <h3 class="text-lg font-semibold mb-2">
+          No Favorite Accounts
+        </h3>
+        <p class="text-muted-foreground mb-4">
+          <span v-if="searchQuery.length > 0">No favorites match your search.</span>
+          <span v-else>You haven't saved any favorite accounts yet. Star accounts from account pages to save them here.</span>
+        </p>
+      </CardContent>
+    </Card>
+  </div>
+</template>
diff --git a/src/stores/favorites.store.ts b/src/stores/favorites.store.ts
new file mode 100644
index 0000000000000000000000000000000000000000..bbb2498488092ea97dd75d0d97999a11b10e402e
--- /dev/null
+++ b/src/stores/favorites.store.ts
@@ -0,0 +1,225 @@
+import { defineStore } from 'pinia';
+
+export interface FavoriteAccount {
+  operationalKey: string;
+  displayName?: string;
+  name?: string;
+  profileImage?: string;
+  about?: string;
+  addedAt: number; // timestamp
+}
+
+export interface FavoriteToken {
+  nai: string;
+  symbol: string;
+  name?: string;
+  image?: string;
+  addedAt: number; // timestamp
+}
+
+interface FavoritesData {
+  accounts: FavoriteAccount[];
+  tokens: FavoriteToken[];
+}
+
+const STORAGE_KEY = 'htm-favorites';
+
+export const useFavoritesStore = defineStore('favorites', {
+  state: () => ({
+    accounts: [] as FavoriteAccount[],
+    tokens: [] as FavoriteToken[]
+  }),
+
+  getters: {
+    favoriteAccountsCount: (state) => state.accounts.length,
+    favoriteTokensCount: (state) => state.tokens.length,
+
+    favoriteAccountKeys: (state) => new Set(state.accounts.map(acc => acc.operationalKey)),
+
+    favoriteTokenNais: (state) => new Set(state.tokens.map(token => token.nai))
+  },
+
+  actions: {
+    // Load from localStorage
+    loadFromStorage () {
+      try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (stored) {
+          const data: FavoritesData = JSON.parse(stored);
+          this.accounts = data.accounts || [];
+          this.tokens = data.tokens || [];
+        }
+      } catch {
+        this.accounts = [];
+        this.tokens = [];
+      }
+    },
+
+    // Save to localStorage
+    saveToStorage () {
+      try {
+        const data: FavoritesData = {
+          accounts: this.accounts,
+          tokens: this.tokens
+        };
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+      } catch {}
+    },
+
+    // Account methods
+    isAccountFavorited (operationalKey: string): boolean {
+      return this.favoriteAccountKeys.has(operationalKey);
+    },
+
+    addAccountToFavorites (account: Omit<FavoriteAccount, 'addedAt'>) {
+      if (this.isAccountFavorited(account.operationalKey))
+        return;
+
+
+      this.accounts.push({
+        ...account,
+        addedAt: Date.now()
+      });
+      this.saveToStorage();
+    },
+
+    removeAccountFromFavorites (operationalKey: string) {
+      this.accounts = this.accounts.filter(acc => acc.operationalKey !== operationalKey);
+      this.saveToStorage();
+    },
+
+    toggleAccountFavorite (account: Omit<FavoriteAccount, 'addedAt'>) {
+      if (this.isAccountFavorited(account.operationalKey))
+        this.removeAccountFromFavorites(account.operationalKey);
+      else
+        this.addAccountToFavorites(account);
+
+    },
+
+    updateAccountInfo (operationalKey: string, updates: Partial<Omit<FavoriteAccount, 'operationalKey' | 'addedAt'>>) {
+      const index = this.accounts.findIndex(acc => acc.operationalKey === operationalKey);
+      if (index !== -1) {
+        this.accounts[index] = {
+          ...this.accounts[index],
+          ...updates
+        } as FavoriteAccount;
+        this.saveToStorage();
+      }
+    },
+
+    // Token methods
+    isTokenFavorited (nai: string): boolean {
+      return this.favoriteTokenNais.has(nai);
+    },
+
+    addTokenToFavorites (token: Omit<FavoriteToken, 'addedAt'>) {
+      if (this.isTokenFavorited(token.nai))
+        return;
+
+
+      this.tokens.push({
+        ...token,
+        addedAt: Date.now()
+      });
+      this.saveToStorage();
+    },
+
+    removeTokenFromFavorites (nai: string) {
+      this.tokens = this.tokens.filter(token => token.nai !== nai);
+      this.saveToStorage();
+    },
+
+    toggleTokenFavorite (token: Omit<FavoriteToken, 'addedAt'>) {
+      if (this.isTokenFavorited(token.nai))
+        this.removeTokenFromFavorites(token.nai);
+      else
+        this.addTokenToFavorites(token);
+
+    },
+
+    // General methods
+    clearAll () {
+      this.accounts = [];
+      this.tokens = [];
+      this.saveToStorage();
+    },
+
+    clearAccounts () {
+      this.accounts = [];
+      this.saveToStorage();
+    },
+
+    clearTokens () {
+      this.tokens = [];
+      this.saveToStorage();
+    },
+
+    // Export data for backup (minimal format)
+    exportFavorites () {
+      return {
+        accounts: this.accounts.map(acc => acc.operationalKey),
+        tokens: this.tokens.map(token => token.nai)
+      };
+    },
+
+    // Import data from backup (validates format)
+    importFavorites (data: { accounts?: string[]; tokens?: string[] }) {
+      const importedAccounts: string[] = [];
+      const importedTokens: string[] = [];
+      const errors: string[] = [];
+
+      // Process accounts
+      if (Array.isArray(data.accounts)) {
+        for (const item of data.accounts) {
+          if (typeof item === 'string' && item.trim())
+            importedAccounts.push(item.trim());
+          else
+            errors.push(`Invalid account format: ${JSON.stringify(item)}`);
+
+        }
+      }
+
+      // Process tokens
+      if (Array.isArray(data.tokens)) {
+        for (const item of data.tokens) {
+          if (typeof item === 'string' && item.trim())
+            importedTokens.push(item.trim());
+          else
+            errors.push(`Invalid token format: ${JSON.stringify(item)}`);
+
+        }
+      }
+
+      // Merge with existing favorites (avoid duplicates)
+      const existingAccountKeys = new Set(this.accounts.map(acc => acc.operationalKey));
+      const existingTokenNais = new Set(this.tokens.map(token => token.nai));
+
+      const newAccounts = importedAccounts.filter(key => !existingAccountKeys.has(key));
+      const newTokens = importedTokens.filter(nai => !existingTokenNais.has(nai));
+
+      // Add new favorites
+      newAccounts.forEach(operationalKey => {
+        this.accounts.push({
+          operationalKey,
+          addedAt: Date.now()
+        });
+      });
+
+      newTokens.forEach(nai => {
+        this.tokens.push({
+          nai,
+          symbol: '', // Will be populated when viewed
+          addedAt: Date.now()
+        });
+      });
+
+      this.saveToStorage();
+
+      return {
+        accountsImported: newAccounts.length,
+        tokensImported: newTokens.length,
+        errors
+      };
+    }
+  }
+});
diff --git a/src/stores/tokens.store.ts b/src/stores/tokens.store.ts
index e401e4545043253a97cdb00da43d4da606eda63a..d0a0408d98e8055d3cab4e0e452d3426d9ee81c4 100644
--- a/src/stores/tokens.store.ts
+++ b/src/stores/tokens.store.ts
@@ -2,10 +2,9 @@ import type { IWaxBaseInterface } from '@hiveio/wax';
 import { defineStore } from 'pinia';
 import { shallowRef } from 'vue';
 
-import { transformUserName } from '@/stores/user.store';
 import { getWax } from '@/stores/wax.store';
 import { isVesting } from '@/utils/nai-tokens';
-import { CtokensAppMetadataType, type CtokensAppAssetType, type CtokensAppBalance, type CtokensAppToken } from '@/utils/wallet/ctokens/api';
+import { CtokensAppMetadataType, type CtokensAppAssetType, type CtokensAppBalance, type CtokensAppToken, type CtokensAppUser } from '@/utils/wallet/ctokens/api';
 import CTokensProvider from '@/utils/wallet/ctokens/signer';
 
 export interface CTokenDisplayBase {
@@ -24,13 +23,19 @@ export interface CTokenDisplayBase {
 }
 
 export interface CTokenUser {
+  managementKey: string;
   operationalKey: string;
+  hiveAccount?: string | null;
   metadata: Record<string, unknown>;
   displayName: string;
   about: string;
   name: string;
   profileImage: string;
   website: string;
+  email?: string;
+  location?: string;
+  twitter?: string;
+  github?: string;
 }
 
 export interface CTokenUserRanked extends CTokenUser {
@@ -82,19 +87,36 @@ const transformUserToDisplayFormat = <T extends {
   metadata?: Record<string, any>;
   user?: string;
   operational_key?: string;
+  management_key?: string;
+  hive_account?: string | null;
 }>(userData: T): CTokenUser => {
   const { metadata } = userData;
 
-  const operationalKey = userData.user || String(userData.operational_key);
+  const operationalKey = userData.user || String(userData.operational_key || '');
+  const managementKey = String(userData.management_key || '');
+
+  // Generate display name
+  let displayName = String(metadata?.name || '');
+  if (!displayName) {
+    // Use operational key as fallback, format it nicely
+    const keyPart = operationalKey.slice(3, 13);
+    displayName = `${keyPart.slice(0, 4)}...${keyPart.slice(-4)}`;
+  }
 
   return {
+    managementKey,
     operationalKey,
+    hiveAccount: userData.hive_account,
     metadata: metadata || {},
-    displayName: String(metadata?.name) || transformUserName(operationalKey),
+    displayName,
     about: metadata?.about as string,
     name: metadata?.name as string,
     profileImage: metadata?.profile_image as string,
-    website: metadata?.website as string
+    website: metadata?.website as string,
+    email: metadata?.email as string,
+    location: metadata?.location as string,
+    twitter: metadata?.twitter as string,
+    github: metadata?.github as string
   };
 };
 
@@ -114,6 +136,11 @@ const transformToApiResponseFormat = <ActualDataResponse, T extends {
 const cTokensProvider = shallowRef<CTokensProvider | undefined>(undefined);
 
 export const formatAsset = (wax: IWaxBaseInterface, value: string | bigint, precision: number, name?: string): string => {
+  if (precision === 0) {
+    const formatted = wax.formatter.formatNumber(String(value), 0);
+    return name ? `${formatted} ${name}` : formatted;
+  }
+
   const integer = String(value).slice(0, -precision) || '0';
   const fraction = String(value).slice(-precision).padEnd(precision, '0');
 
@@ -421,6 +448,96 @@ export const useTokensStore = defineStore('tokens', {
         this.isLoading = false;
       }
     },
+    async getUser (operationalKey: string): Promise<CTokenUser> {
+      this.isLoading = true;
+
+      try {
+        const wax = await getWax();
+
+        const user = await wax.restApi.ctokensApi.users({ user: operationalKey });
+
+        if (!user?.management_key)
+          throw new Error('User not found');
+
+        return transformUserToDisplayFormat(user);
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    async loadUsers (page = 1): Promise<TokenStoreApiResponse<CTokenUser>> {
+      this.isLoading = true;
+
+      try {
+        const wax = await getWax();
+
+        const usersResponse = await wax.restApi.ctokensApi.metadata.metadataType({
+          metadataType: CtokensAppMetadataType.User,
+          key: '',
+          value: '',
+          page
+        });
+
+        const users = (usersResponse.items || []).map((user) =>
+          transformUserToDisplayFormat(user as CtokensAppUser)
+        );
+
+        return transformToApiResponseFormat(users, usersResponse, page);
+      } finally {
+        this.isLoading = false;
+      }
+    },
+    async searchUsers (query: string, page = 1): Promise<TokenStoreApiResponse<CTokenUser>> {
+      this.isLoading = true;
+
+      try {
+        const wax = await getWax();
+
+        // Search by name or other metadata fields
+        const searchArray = [
+          wax.restApi.ctokensApi.metadata.metadataType({
+            metadataType: CtokensAppMetadataType.User,
+            key: 'name',
+            value: query,
+            page
+          }),
+          wax.restApi.ctokensApi.metadata.metadataType({
+            metadataType: CtokensAppMetadataType.User,
+            key: 'about',
+            value: query,
+            page
+          })
+        ];
+
+        const usersFound = await Promise.allSettled(searchArray);
+
+        const usersRaw = new Map<string, CTokenUser>();
+
+        let maxPages = 0, totalItems = 0;
+
+        for (const result of usersFound) {
+          if (result.status === 'fulfilled') {
+            for (const item of (result.value.items || []) as CtokensAppUser[]) {
+              if (item.operational_key)
+                usersRaw.set(item.operational_key, transformUserToDisplayFormat(item));
+
+            }
+
+            maxPages = Math.max(maxPages, result.value.total_pages || 0);
+            totalItems += result.value.total_items || 0;
+          }
+        }
+
+        const usersData = Array.from(usersRaw.values());
+
+        return transformToApiResponseFormat(usersData, {
+          items: usersData,
+          total_items: totalItems,
+          total_pages: maxPages
+        }, page);
+      } finally {
+        this.isLoading = false;
+      }
+    },
     async reset (cTokensWallet?: CTokensProvider | undefined) {
       // Cleanup only if we don't want to use any other L2 wallet
       if (cTokensWallet === undefined)
diff --git a/src/utils/auto-login.ts b/src/utils/auto-login.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c3fa84dfba9a9b977acb881bea1bc05e59d0a27d
--- /dev/null
+++ b/src/utils/auto-login.ts
@@ -0,0 +1,126 @@
+import { toast } from 'vue-sonner';
+
+import { useSettingsStore } from '@/stores/settings.store';
+import { useTokensStore } from '@/stores/tokens.store';
+import { useUserStore } from '@/stores/user.store';
+import { useWalletStore } from '@/stores/wallet.store';
+import { getWax } from '@/stores/wax.store';
+import { toastError } from '@/utils/parse-error';
+import CTokensProvider from '@/utils/wallet/ctokens/signer';
+
+const AUTO_LOGIN_PASSWORD_KEY = 'htm_random_password';
+
+const isClient = (): boolean => typeof window !== 'undefined';
+
+const getLocalStorageItem = (key: string): string | null => {
+  if (!isClient()) return null;
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+};
+
+const removeLocalStorageItem = (key: string): void => {
+  if (!isClient()) return;
+  try {
+    localStorage.removeItem(key);
+  } catch {
+    // Silent fail
+  }
+};
+
+
+
+/**
+ * Check if auto-login is available
+ * Auto-login is available when:
+ * 1. Running on client side
+ * 2. A random password exists in localStorage (user registered with encryptKeys disabled)
+ * 3. An HTM wallet exists
+ * 4. User is not already logged in
+ */
+export const canAutoLogin = async (): Promise<boolean> => {
+  if (!isClient()) return false;
+
+  const autoPassword = getLocalStorageItem(AUTO_LOGIN_PASSWORD_KEY);
+  if (!autoPassword) return false;
+
+  if (CTokensProvider.isLoggedIn()) return false;
+
+  try {
+    return await CTokensProvider.hasWallet();
+  } catch {
+    return false;
+  }
+};
+
+/**
+ * Perform auto-login using the stored random password
+ * Returns true if successful, false otherwise
+ */
+export const performAutoLogin = async (): Promise<boolean> => {
+  if (!isClient()) return false;
+
+  const settingsStore = useSettingsStore();
+  const walletStore = useWalletStore();
+  const tokensStore = useTokensStore();
+  const userStore = useUserStore();
+
+  try {
+    const autoPassword = getLocalStorageItem(AUTO_LOGIN_PASSWORD_KEY);
+    if (!autoPassword) return false;
+
+    const hasWallet = await CTokensProvider.hasWallet();
+    if (!hasWallet) return false;
+
+    await CTokensProvider.login(autoPassword);
+
+    const wax = await getWax();
+    const operationalKey = tokensStore.getUserPublicKey();
+
+    if (!operationalKey)
+      throw new Error('Failed to get operational key after auto-login');
+
+
+    // Check if user already has L1 wallet connected
+    if (walletStore.wallet !== undefined && !walletStore.isL2Wallet) {
+      // Already logged in using L1 wallet, just add HTM layer
+      await tokensStore.reset(await CTokensProvider.for(wax, 'posting'));
+      toast.success('HTM wallet auto-connected!', {
+        description: 'Your HTM account is now ready to use'
+      });
+      return true;
+    }
+
+    await walletStore.createWalletFor(settingsStore.settings, 'posting');
+    await userStore.parseUserData(operationalKey);
+    await tokensStore.getCurrentUserMetadata();
+
+    toast.success('Automatically logged in!', {
+      description: 'Welcome back to your HTM account'
+    });
+
+    return true;
+  } catch (error) {
+    // Silent fail for auto-login - don't annoy users with errors
+    toastError('Auto-Login Failed', error);
+    return false;
+  }
+};
+
+/**
+ * Check if the current wallet is using auto-login (random password)
+ */
+export const isUsingAutoLogin = (): boolean => {
+  if (!isClient()) return false;
+  const autoPassword = getLocalStorageItem(AUTO_LOGIN_PASSWORD_KEY);
+  return !!autoPassword;
+};
+
+/**
+ * Clear the auto-login password (when user wants to switch to manual password)
+ */
+export const clearAutoLoginPassword = (): void => {
+  removeLocalStorageItem(AUTO_LOGIN_PASSWORD_KEY);
+};
diff --git a/src/utils/parse-error.ts b/src/utils/parse-error.ts
index 48b25feae24b88198ac4b63bcd41acb3653ab624..a096c71b5af501192f41a134cdeb380d86901450 100644
--- a/src/utils/parse-error.ts
+++ b/src/utils/parse-error.ts
@@ -2,8 +2,8 @@ import { toast } from 'vue-sonner';
 
 import { useErrorDialogStore } from '@/stores/error-dialog.store';
 
-export const toastError = (title: string, error: unknown) => {
-  let description: string;
+export const toastError = (title: string, error?: unknown) => {
+  let description: string | undefined = undefined;
 
   if (typeof error === 'object' && error && 'message' in error) {
     if ('name' in error
@@ -19,11 +19,11 @@ export const toastError = (title: string, error: unknown) => {
       description = error.apiError.error.message as string;
     else
       description = error.message as string;}
-  else
+  else if (error)
     description = String(error);
 
   toast.error(title, {
-    description: description.length > 100 ? description.slice(0, 100) + '...' : description,
+    description: description ? description.length > 100 ? description.slice(0, 100) + '...' : description : undefined,
     duration: 8_000,
     action: {
       label: 'Details',
diff --git a/src/utils/qr/create-qr.ts b/src/utils/qr/create-qr.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5aed041b8656d09d0352fcd83254288deb59bbdf
--- /dev/null
+++ b/src/utils/qr/create-qr.ts
@@ -0,0 +1,110 @@
+import type { QRCodeToDataURLOptions } from 'qrcode';
+
+/* eslint-disable-next-line @typescript-eslint/consistent-type-imports */
+let qrCodeModule: Promise<typeof import('qrcode')> | undefined = undefined;
+
+const generateQr = async (
+  returnType: 'blob' | 'dataUrl', qrContent: string, description?: string, qrCodeOptions?: QRCodeToDataURLOptions
+): Promise<Blob | string> => {
+  if (!qrCodeModule)
+
+    qrCodeModule = import('qrcode');
+
+
+  const qrCode = await qrCodeModule;
+
+  const qrDataUrl = await qrCode.toDataURL(qrContent, {
+    width: 512,
+    margin: 2,
+    ...qrCodeOptions,
+    color: {
+      dark: '#000000',
+      light: '#FFFFFF',
+      ...(qrCodeOptions?.color || {})
+    }
+  });
+
+  // If no description, just return the QR code blob without text
+  if (!description) {
+    if (returnType === 'dataUrl')
+      return qrDataUrl;
+
+    const response = await fetch(qrDataUrl);
+    return await response.blob();
+  }
+
+  // Create canvas to add text at the bottom of dynamic size
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  if (!ctx) throw new Error('Could not get canvas context');
+
+  // Load QR code image
+  const qrImage = new Image();
+  await new Promise<void>((resolve, reject) => {
+    qrImage.onload = () => resolve();
+    qrImage.onerror = reject;
+    qrImage.src = qrDataUrl;
+  });
+
+  // Calculate optimal font size to fit the QR code width
+  const maxWidth = qrImage.width * 0.95; // Use 95% of QR code width
+  const minFontSize = 14;
+  const maxFontSize = 28;
+  let fontSize = maxFontSize;
+
+  // Find the largest font size that fits
+  ctx.textAlign = 'center';
+  for (let size = maxFontSize; size >= minFontSize; size--) {
+    ctx.font = `bold ${size}px Arial`;
+    const metrics = ctx.measureText(description);
+    if (metrics.width <= maxWidth) {
+      fontSize = size;
+      break;
+    }
+  }
+
+  // Calculate text height needed
+  const textHeight = fontSize + 30; // Font size + padding
+
+  // Set canvas size (QR code + dynamic text area at bottom)
+  canvas.width = qrImage.width;
+  canvas.height = qrImage.height + textHeight;
+
+  // Fill background with white
+  ctx.fillStyle = '#FFFFFF';
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  // Draw QR code at the top
+  ctx.drawImage(qrImage, 0, 0);
+
+  // Add text at the bottom with calculated font size
+  ctx.fillStyle = '#000000';
+  ctx.font = `bold ${fontSize}px Arial`; // Reapply font after canvas resize
+  ctx.textAlign = 'center';
+  ctx.fillText(description, canvas.width / 2, qrImage.height + (textHeight / 2) + (fontSize / 3));
+
+  if (returnType === 'dataUrl')
+    return canvas.toDataURL('image/png');
+
+  // Convert canvas to blob and download
+  const blob = await new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob((b) => {
+      if (b) resolve(b);
+      else reject(new Error('Failed to create blob'));
+    }, 'image/png');
+  });
+
+  return blob;
+};
+
+export const generateQrCode = async (
+  qrContent: string, description?: string, qrCodeOptions?: QRCodeToDataURLOptions
+): Promise<Blob> => {
+  return generateQr('blob', qrContent, description, qrCodeOptions) as Promise<Blob>;
+};
+
+export const generateQrCodeDataUrl = async (
+  qrContent: string, description?: string, qrCodeOptions?: QRCodeToDataURLOptions
+): Promise<string> => {
+  return generateQr('dataUrl', qrContent, description, qrCodeOptions) as Promise<string>;
+};
diff --git a/src/utils/transaction-status.ts b/src/utils/transaction-status.ts
index 55b1b09299e5c3e77971f44d33bd04ec71c2c971..5f01f5d46090fc5f478e9b74baa6424ddff0fb94 100644
--- a/src/utils/transaction-status.ts
+++ b/src/utils/transaction-status.ts
@@ -1,4 +1,4 @@
-import type { AEncryptionProvider, ITransaction } from '@hiveio/wax';
+import type { AEncryptionProvider, ITransaction, WaxRequestError } from '@hiveio/wax';
 import { HtmTransaction, type htm_operation, PROTOCOL_OPERATION_ID } from '@mtyszczak-cargo/htm';
 import { toast } from 'vue-sonner';
 
@@ -38,9 +38,9 @@ const pollTransactionStatus = async (
       }
     } catch (error: unknown) {
       // Check HTTP status code from error
-      const errorObj = error as Record<string, unknown>;
-      const response = errorObj?.response as Record<string, unknown> | undefined;
-      const httpCode = errorObj?.httpCode || errorObj?.status || response?.status;
+      const errorObj = error as WaxRequestError<Record<string, unknown>>;
+      const response = errorObj.response;
+      const httpCode = response.status;
 
       // 404 means transaction not yet processed - keep polling
       if (httpCode === 404) {
@@ -61,8 +61,8 @@ const pollTransactionStatus = async (
       // Any other error means transaction failed
       return {
         success: false,
-        message: (errorObj?.message as string) || 'Transaction failed',
-        details: (errorObj?.details as string) || (errorObj?.hint as string) || JSON.stringify(error)
+        message: 'Transaction failed',
+        details: response.response?.message as string || JSON.stringify(error)
       };
     }
   }
diff --git a/src/utils/wallet/ctokens/signer.ts b/src/utils/wallet/ctokens/signer.ts
index 373b949c34ea153b5a8cb421284379f1acf08e9d..61f770793b139b8a8d67f62fcdabba5489456b16 100644
--- a/src/utils/wallet/ctokens/signer.ts
+++ b/src/utils/wallet/ctokens/signer.ts
@@ -15,8 +15,6 @@ const MANAGEMENT_WALLET_NAME_SUFFIX = 'management';
 
 const LOCAL_STORAGE_WALLET_INDEX_KEY = 'ctokens_wallet_index';
 const LOCAL_STORAGE_WALLET_INDEX_DEFAULT = 0;
-const LOCAL_STORAGE_OPERATIONAL_PUBLIC_KEY = 'ctokens_operational_public_key';
-const LOCAL_STORAGE_MANAGEMENT_PUBLIC_KEY = 'ctokens_management_public_key';
 
 export class CTokensProvider extends AEncryptionProvider {
   static #beekeeper: IBeekeeperInstance | undefined;
@@ -32,27 +30,18 @@ export class CTokensProvider extends AEncryptionProvider {
     return !!CTokensProvider.#operationalWallet;
   }
 
-  // TODO: Remove this code after @hiveio/beekeeper bugfix - bump deps
-  private static lastOperationalPk: string | undefined = undefined;
-
-  private static lastManagementPk: string | undefined = undefined;
-  // TODO: Remove this method !!!
   public static getOperationalPublicKey (): string | undefined {
-    CTokensProvider.ensurePublicKeysLoaded();
-    return CTokensProvider.lastOperationalPk;
-  }
+    if (CTokensProvider.#operationalWallet)
+      return CTokensProvider.#operationalWallet.getPublicKeys()[0];
 
-  public static getManagementPublicKey (): string | undefined {
-    CTokensProvider.ensurePublicKeysLoaded();
-    return CTokensProvider.lastManagementPk;
+    return undefined;
   }
 
-  public static getOperationalWallet (): IBeekeeperUnlockedWallet | undefined {
-    return CTokensProvider.#operationalWallet;
-  }
+  public static getManagementPublicKey (): string | undefined {
+    if (CTokensProvider.#managementWallet)
+      return CTokensProvider.#managementWallet.getPublicKeys()[0];
 
-  public static getManagementWallet (): IBeekeeperUnlockedWallet | undefined {
-    return CTokensProvider.#managementWallet;
+    return undefined;
   }
 
   private constructor (
@@ -62,12 +51,10 @@ export class CTokensProvider extends AEncryptionProvider {
   ) {
     super();
 
-    CTokensProvider.ensurePublicKeysLoaded();
-
     this.extendedChain = chain.extendRest(RestApi);
     this.extendedChain.restApi.ctokensApi.endpointUrl = endpointUrl;
 
-    const publicKey = role === 'owner' ? CTokensProvider.lastManagementPk : CTokensProvider.lastOperationalPk;
+    const publicKey = role === 'owner' ? CTokensProvider.getManagementPublicKey() : CTokensProvider.getOperationalPublicKey();
 
     if (!publicKey)
       throw new WaxCTokensEncryptionProviderError('The requested wallet does not have a public key.');
@@ -84,13 +71,15 @@ export class CTokensProvider extends AEncryptionProvider {
   public async destroy () {
     await CTokensProvider.#beekeeper?.delete();
     CTokensProvider.#beekeeper = undefined;
+    CTokensProvider.#operationalWallet = undefined;
+    CTokensProvider.#managementWallet = undefined;
   }
 
   private static async prepareBeekeeper () {
     if (!CTokensProvider.#beekeeper) {
       // XXX: Fix dynamic beekeeeper import
       CTokensProvider.#beekeeper = await (import('@hiveio/beekeeper')).then(async bk => {
-        return await bk.default({ inMemory: false, enableLogs: false, unlockTimeout: /* 1 day: */ 1440 });
+        return await bk.default({ inMemory: false, enableLogs: false, unlockTimeout: /* 1 day: */ 86400 });
       });
     }
   }
@@ -122,8 +111,6 @@ export class CTokensProvider extends AEncryptionProvider {
   public static async login (password: string) {
     await CTokensProvider.prepareBeekeeper();
 
-    CTokensProvider.ensurePublicKeysLoaded();
-
     const session = CTokensProvider.#beekeeper!.createSession(Math.random().toString());
 
     try {
@@ -161,8 +148,6 @@ export class CTokensProvider extends AEncryptionProvider {
     const operational = await wallet.importKey(operationalPrivateKey);
     wallet.lock();
 
-    CTokensProvider.setOperationalPublicKey(operational);
-
     let management: TPublicKey | undefined;
 
     if (managementPrivateKey) {
@@ -171,14 +156,10 @@ export class CTokensProvider extends AEncryptionProvider {
       managementWallet.lock();
     }
 
-    CTokensProvider.setManagementPublicKey(management);
-
     return { management, operational };
   }
 
   public static async for (chain: IHiveChainInterface, role: TRole, onlineCheckKeys = true, ctokensUrl?: string): Promise<CTokensProvider> {
-    CTokensProvider.ensurePublicKeysLoaded();
-
     if (role === 'owner') {
       if (!CTokensProvider.#managementWallet)
         throw new WaxCTokensEncryptionProviderError('Owner wallet is not available. Make sure to login with the correct password and import the required key.');
@@ -222,38 +203,6 @@ export class CTokensProvider extends AEncryptionProvider {
 
     return [signature];
   }
-
-  private static ensurePublicKeysLoaded () {
-    if (!CTokensProvider.lastOperationalPk) {
-      const storedOperational = localStorage.getItem(LOCAL_STORAGE_OPERATIONAL_PUBLIC_KEY);
-      if (storedOperational)
-        CTokensProvider.lastOperationalPk = storedOperational;
-    }
-
-    if (!CTokensProvider.lastManagementPk) {
-      const storedManagement = localStorage.getItem(LOCAL_STORAGE_MANAGEMENT_PUBLIC_KEY);
-      if (storedManagement)
-        CTokensProvider.lastManagementPk = storedManagement;
-    }
-  }
-
-  private static setOperationalPublicKey (publicKey: string | undefined) {
-    CTokensProvider.lastOperationalPk = publicKey;
-
-    if (!publicKey)
-      localStorage.removeItem(LOCAL_STORAGE_OPERATIONAL_PUBLIC_KEY);
-    else
-      localStorage.setItem(LOCAL_STORAGE_OPERATIONAL_PUBLIC_KEY, publicKey);
-  }
-
-  private static setManagementPublicKey (publicKey: string | undefined) {
-    CTokensProvider.lastManagementPk = publicKey;
-
-    if (!publicKey)
-      localStorage.removeItem(LOCAL_STORAGE_MANAGEMENT_PUBLIC_KEY);
-    else
-      localStorage.setItem(LOCAL_STORAGE_MANAGEMENT_PUBLIC_KEY, publicKey);
-  }
 }
 
 export default CTokensProvider;
diff --git a/src/utils/wallet/ctokens/temp-signer.ts b/src/utils/wallet/ctokens/temp-signer.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c3ea6d4eaadd25c1eda486a808c4ab629c683bce
--- /dev/null
+++ b/src/utils/wallet/ctokens/temp-signer.ts
@@ -0,0 +1,76 @@
+import type { IBeekeeperInstance, IBeekeeperUnlockedWallet } from '@hiveio/beekeeper';
+import type { ISignatureTransaction, TPublicKey, TSignature } from '@hiveio/wax';
+import { AEncryptionProvider } from '@hiveio/wax';
+
+/**
+ * Temporary signer for one-time transactions using a private key from QR code
+ * Does not persist the key - only exists in memory for the transaction
+ */
+export class TempCTokensSigner extends AEncryptionProvider {
+  private static beekeeper?: Promise<IBeekeeperInstance>;
+
+  #wallet: IBeekeeperUnlockedWallet;
+
+  private constructor (
+    wallet: IBeekeeperUnlockedWallet,
+    public readonly publicKey: TPublicKey
+  ) {
+    super();
+    this.#wallet = wallet;
+  }
+
+  /**
+   * Create a temporary signer from a private key (e.g., scanned from QR code)
+   */
+  public static async for (privateKey: string): Promise<TempCTokensSigner> {
+    // Initialize beekeeper if needed
+    if (!TempCTokensSigner.beekeeper) {
+      const bk = await import('@hiveio/beekeeper');
+      TempCTokensSigner.beekeeper = bk.default({
+        inMemory: true,
+        enableLogs: false,
+        unlockTimeout: 120 // Very short timeout - just for this transaction - two minutes
+      });
+    }
+
+    const bk = await TempCTokensSigner.beekeeper;
+
+    const session = bk.createSession(Math.random().toString());
+
+    const tempPassword = Math.random().toString(36);
+    const walletName = `TEMP_WALLET_${Math.random()}`;
+
+    const { wallet } = await session.createWallet(walletName, tempPassword, true);
+
+    const publicKey = await wallet.importKey(privateKey);
+
+    return new TempCTokensSigner(wallet, publicKey);
+  }
+
+  /**
+   * Clean up temporary resources
+   */
+  public async destroy (): Promise<void> {
+    this.#wallet.close();
+  }
+
+  public override async generateSignatures (transaction: ISignatureTransaction): Promise<TSignature[]> {
+    if (!TempCTokensSigner.beekeeper)
+      throw new Error('Beekeeper not initialized');
+
+    const signature = this.#wallet.signDigest(this.publicKey, transaction.sigDigest);
+
+    await this.destroy(); // Clean up directly after use
+
+    return [signature];
+  }
+
+  // Encryption/decryption not supported for temp signers
+  public async encryptData (_content: string, _recipient: TPublicKey): Promise<string> {
+    throw new Error('Encryption not supported for temporary signers');
+  }
+
+  public async decryptData (_content: string): Promise<string> {
+    throw new Error('Decryption not supported for temporary signers');
+  }
+}