diff --git a/CHANGELOG.md b/CHANGELOG.md
index 405855e..9652cb3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,28 @@
 
 All notable changes to Q-Wallets will be documented in this file.
 
+## [1.3.3] - 2026-05-11
+
+### Changed
+
+- Redesigned the wallet hub as a full visual and UX overhaul, replacing the older boxed layout with a cinematic coin-led workspace, atmospheric backgrounds, refreshed wallet tabs, and a cleaner right-side Address Book panel.
+- Unified the QORT, BTC, LTC, DOGE, DGB, RVN, and ARRR wallet pages around the same shared workspace structure.
+- Reworked send dialogs so transfers are easier to understand and harder to misread, with recipient-first layouts, cleaner amount fields, better Max/fee placement, clearer loading states while recipient data is being confirmed, and a smoother send-to-contact flow.
+- Modernized the Address Book into a more usable wallet companion, with easier add/edit/delete flows, QORT name search when creating contacts, duplicate-contact warnings, explicit address confirmation before saving, softer row styling, lighter table text, pastel avatars, improved search styling, and better sync feedback.
+- Refined transaction tables with lighter headers, improved pagination options, exact dates after 24 hours, smoother row hover feedback, and fewer layout jumps.
+- Stabilized Receive QR layout inside Qortal Hub so the right rail can open naturally without making the background atmosphere shift.
+- Reduced unnecessary automatic QORT balance refreshes from every 1 minute to every 2.5 minutes while keeping manual refresh available.
+
+### Added
+
+- Receive QR dialogs now work consistently for every wallet, not only QORT.
+- QORT Address Book name search now marks results that are already saved with an "already in list" label.
+- Save protection now warns users when they try to add a contact before confirming the address.
+- Address Book sync now recognizes when local contacts are returned to the last synced state.
+- Before and after screenshots for the redesign preview. Click either thumbnail to enlarge.
+
+[![Q-Wallets before redesign](/changelog/q-wallets-before-redesign.png)](/changelog/q-wallets-before-redesign.png) [![Q-Wallets after redesign](/changelog/q-wallets-after-redesign-1-3-3.png)](/changelog/q-wallets-after-redesign-1-3-3.png)
+
 ## [1.3.2] - 2026-03-06
 
 ### Fixed
diff --git a/eslint.config.js b/eslint.config.js
index f00cc47..b55d6d1 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -8,12 +8,9 @@ import prettierConfig from 'eslint-config-prettier';
 
 export default tseslint.config(
   { ignores: ['dist'] },
+  js.configs.recommended,
+  ...tseslint.configs.recommended,
   {
-    extends: [
-      js.configs.recommended,
-      ...tseslint.configs.recommended,
-      'plugin:prettier/recommended',
-    ],
     files: ['**/*.{ts,tsx}'],
     languageOptions: {
       ecmaVersion: 2020,
@@ -30,12 +27,8 @@ export default tseslint.config(
         'warn',
         { allowConstantExport: true },
       ],
-      'prettier/prettier': 'error',
+      'prettier/prettier': ['error', { endOfLine: 'auto' }],
     },
   },
-  {
-    // This disables ESLint rules that would conflict with Prettier
-    name: 'prettier-config',
-    rules: prettierConfig.rules,
-  }
+  prettierConfig
 );
diff --git a/package-lock.json b/package-lock.json
index 33e3789..5173ff1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "q-wallets",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "q-wallets",
-      "version": "1.3.2",
+      "version": "1.3.3",
       "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
@@ -31,6 +31,7 @@
         "react-window": "^1.8.11"
       },
       "devDependencies": {
+        "@eslint/js": "^9.34.0",
         "@testing-library/jest-dom": "^6.9.1",
         "@testing-library/react": "^16.3.1",
         "@testing-library/user-event": "^14.6.1",
@@ -40,12 +41,17 @@
         "@vitejs/plugin-react": "^4.3.4",
         "@vitest/coverage-v8": "^4.0.16",
         "@vitest/ui": "^4.0.16",
+        "eslint": "^9.34.0",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-prettier": "^5.5.4",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "eslint-plugin-react-refresh": "^0.4.20",
+        "globals": "^16.3.0",
         "happy-dom": "^20.0.11",
         "jsdom": "^27.4.0",
         "prettier": "^3.6.2",
         "typescript": "^5.8.2",
+        "typescript-eslint": "^8.40.0",
         "vite": "^6.2.2",
         "vitest": "^4.0.16"
       }
@@ -399,6 +405,15 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@babel/traverse/node_modules/globals": {
+      "version": "11.12.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
+      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/@babel/types": {
       "version": "7.28.5",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
@@ -1129,12 +1144,11 @@
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
-      "integrity": "sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "eslint-visitor-keys": "^3.4.3"
       },
@@ -1154,7 +1168,6 @@
       "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
@@ -1163,27 +1176,25 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.12.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
-      "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
       }
     },
     "node_modules/@eslint/config-array": {
-      "version": "0.21.0",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.0.tgz",
-      "integrity": "sha512-ENIdc4iLu0d93HeYirvKmrzshzofPw6VkZRKQGe9Nv46ZnWUzcF1xV01dcvEg/1wXUR61OmmlSfyeyO7EvjLxQ==",
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.2.tgz",
+      "integrity": "sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
-        "@eslint/object-schema": "^2.1.6",
+        "@eslint/object-schema": "^2.1.7",
         "debug": "^4.3.1",
-        "minimatch": "^3.1.2"
+        "minimatch": "^3.1.5"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1195,7 +1206,6 @@
       "integrity": "sha512-xR93k9WhrDYpXHORXpxVL5oHj3Era7wo6k/Wd8/IsQNnZUTzkGS29lyn3nAT05v6ltUuTFVCCYDEGfy2Or/sPA==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
@@ -1206,7 +1216,6 @@
       "integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.15"
       },
@@ -1215,21 +1224,20 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.1.tgz",
-      "integrity": "sha512-gtF186CXhIl1p4pJNGZw8Yc6RlshoePRvE0X91oPGb3vZ8pM3qOS9W9NGPat9LziaBV7XrJWGylNQXkGcnM3IQ==",
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.5.tgz",
+      "integrity": "sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
-        "ajv": "^6.12.4",
+        "ajv": "^6.14.0",
         "debug": "^4.3.2",
         "espree": "^10.0.1",
         "globals": "^14.0.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
-        "js-yaml": "^4.1.0",
-        "minimatch": "^3.1.2",
+        "js-yaml": "^4.1.1",
+        "minimatch": "^3.1.5",
         "strip-json-comments": "^3.1.1"
       },
       "engines": {
@@ -1245,7 +1253,6 @@
       "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -1259,7 +1266,6 @@
       "integrity": "sha512-EoyvqQnBNsV1CWaEJ559rxXL4c8V92gxirbawSmVUOWXlsRxxQXl6LmCpdUblgxgSkDIqKnhzba2SjRTI/A5Rw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
@@ -1268,12 +1274,11 @@
       }
     },
     "node_modules/@eslint/object-schema": {
-      "version": "2.1.6",
-      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.6.tgz",
-      "integrity": "sha512-RBMg5FRL0I0gs51M/guSAj5/e14VQ4tpZnQNWwuDT66P14I43ItmPfIZRhO9fUVIPOAQXU47atlywZ/czoqFPA==",
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
@@ -1284,7 +1289,6 @@
       "integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@eslint/core": "^0.15.2",
         "levn": "^0.4.1"
@@ -1344,7 +1348,6 @@
       "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=18.18.0"
       }
@@ -1355,7 +1358,6 @@
       "integrity": "sha512-YuI2ZHQL78Q5HbhDiBA1X4LmYdXCKCMQIfw0pw7piHJwyREFebJUvrQN4cMssyES6x+vfUbx1CIpaQUKYdQZOw==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@humanfs/core": "^0.19.1",
         "@humanwhocodes/retry": "^0.3.0"
@@ -1370,7 +1372,6 @@
       "integrity": "sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=18.18"
       },
@@ -1385,7 +1386,6 @@
       "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=12.22"
       },
@@ -1400,7 +1400,6 @@
       "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=18.18"
       },
@@ -1882,6 +1881,44 @@
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@pkgr/core": {
       "version": "0.2.9",
       "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.2.9.tgz",
@@ -2540,8 +2577,7 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
@@ -2628,6 +2664,277 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.40.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.40.0.tgz",
+      "integrity": "sha512-w/EboPlBwnmOBtRbiOvzjD+wdiZdgFeo17lkltrtn7X37vagKKWJABvyfsJXTlHe6XBzugmYgd4A4nW+k8Mixw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.40.0",
+        "@typescript-eslint/type-utils": "8.40.0",
+        "@typescript-eslint/utils": "8.40.0",
+        "@typescript-eslint/visitor-keys": "8.40.0",
+        "graphemer": "^1.4.0",
+        "ignore": "^7.0.0",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.40.0",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/parser": {
+      "version": "8.40.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.40.0.tgz",
+      "integrity": "sha512-jCNyAuXx8dr5KJMkecGmZ8KI61KBUhkCob+SD+C+I5+Y1FWI2Y3QmY4/cxMCC5WAsZqoEtEETVhUiUMIGCf6Bw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.40.0",
+        "@typescript-eslint/types": "8.40.0",
+        "@typescript-eslint/typescript-estree": "8.40.0",
+        "@typescript-eslint/visitor-keys": "8.40.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.40.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.40.0.tgz",
+      "integrity": "sha512-/A89vz7Wf5DEXsGVvcGdYKbVM9F7DyFXj52lNYUDS1L9yJfqjW/fIp5PgMuEJL/KeqVTe2QSbXAGUZljDUpArw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.40.0",
+        "@typescript-eslint/types": "^8.40.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.40.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.40.0.tgz",
+      "integrity": "sha512-y9ObStCcdCiZKzwqsE8CcpyuVMwRouJbbSrNuThDpv16dFAj429IkM6LNb1dZ2m7hK5fHyzNcErZf7CEeKXR4w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.40.0",
+        "@typescript-eslint/visitor-keys": "8.40.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.40.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.40.0.tgz",
+      "integrity": "sha512-jtMytmUaG9d/9kqSl/W3E3xaWESo4hFDxAIHGVW/WKKtQhesnRIJSAJO6XckluuJ6KDB5woD1EiqknriCtAmcw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.40.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.40.0.tgz",
+      "integrity": "sha512-eE60cK4KzAc6ZrzlJnflXdrMqOBaugeukWICO2rB0KNvwdIMaEaYiywwHMzA1qFpTxrLhN9Lp4E/00EgWcD3Ow==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.40.0",
+        "@typescript-eslint/typescript-estree": "8.40.0",
+        "@typescript-eslint/utils": "8.40.0",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.40.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.40.0.tgz",
+      "integrity": "sha512-ETdbFlgbAmXHyFPwqUIYrfc12ArvpBhEVgGAxVYSwli26dn8Ko+lIo4Su9vI9ykTZdJn+vJprs/0eZU0YMAEQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.40.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.40.0.tgz",
+      "integrity": "sha512-k1z9+GJReVVOkc1WfVKs1vBrR5MIKKbdAjDTPvIK3L8De6KbFfPFt6BKpdkdk7rZS2GtC/m6yI5MYX+UsuvVYQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.40.0",
+        "@typescript-eslint/tsconfig-utils": "8.40.0",
+        "@typescript-eslint/types": "8.40.0",
+        "@typescript-eslint/visitor-keys": "8.40.0",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
+      "integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
+      "version": "9.0.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
+      "integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.8.0.tgz",
+      "integrity": "sha512-AcM7dV/5ul4EekoQ29Agm5vri8JNqRyj39o0qpX6vDF2GZrtutZl5RwgD1XnZjiTAfncsJhMI48QQH3sN87YNA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.40.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.40.0.tgz",
+      "integrity": "sha512-Cgzi2MXSZyAUOY+BFwGs17s7ad/7L+gKt6Y8rAVVWS+7o6wrjeFN4nVfTpbE25MNcxyJ+iYUXflbs2xR9h4UBg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/scope-manager": "8.40.0",
+        "@typescript-eslint/types": "8.40.0",
+        "@typescript-eslint/typescript-estree": "8.40.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.40.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.40.0.tgz",
+      "integrity": "sha512-8CZ47QwalyRjsypfwnbI3hKy5gJDPmrkLjkgMxhi0+DZZ2QNx2naS6/hWoVYUHU7LU2zleF68V9miaVZvhFfTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.40.0",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
@@ -2877,12 +3184,11 @@
       }
     },
     "node_modules/acorn": {
-      "version": "8.15.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
-      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "version": "8.16.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
+      "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -2896,7 +3202,6 @@
       "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
@@ -2930,12 +3235,11 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz",
+      "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -2984,8 +3288,7 @@
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true,
-      "license": "Python-2.0",
-      "peer": true
+      "license": "Python-2.0"
     },
     "node_modules/aria-query": {
       "version": "5.3.0",
@@ -3065,8 +3368,7 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/base64-js": {
       "version": "1.5.1",
@@ -3105,17 +3407,29 @@
       "license": "MIT"
     },
     "node_modules/brace-expansion": {
-      "version": "1.1.12",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
-      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
+      "integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "balanced-match": "^1.0.0",
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.24.4",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz",
@@ -3350,8 +3664,7 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/convert-source-map": {
       "version": "1.9.0",
@@ -3497,9 +3810,9 @@
       "license": "MIT"
     },
     "node_modules/debug": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
-      "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+      "version": "4.4.3",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -3538,8 +3851,7 @@
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/dequal": {
       "version": "2.0.3",
@@ -3706,7 +4018,6 @@
       "integrity": "sha512-RNCHRX5EwdrESy3Jc9o8ie8Bog+PeYvvSR8sDGoZxNFTvZ4dlxUB3WzQ3bQMztFrSRODGrLLj8g6OFuGY/aiQg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -3809,13 +4120,35 @@
         }
       }
     },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz",
+      "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-react-refresh": {
+      "version": "0.4.20",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-refresh/-/eslint-plugin-react-refresh-0.4.20.tgz",
+      "integrity": "sha512-XpbHQ2q5gUF8BGOX4dHe+71qoirYMhApEPZ7sfhF/dNnOF1UXnCMGZf79SFTBO7Bz5YEIT4TMieSlJBWhP9WBA==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "eslint": ">=8.40"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "8.4.0",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
       "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^5.2.0"
@@ -3833,7 +4166,6 @@
       "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
@@ -3847,7 +4179,6 @@
       "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
         "supports-color": "^7.1.0"
@@ -3865,7 +4196,6 @@
       "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "acorn": "^8.15.0",
         "acorn-jsx": "^5.3.2",
@@ -3879,12 +4209,11 @@
       }
     },
     "node_modules/esquery": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
-      "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
       "dev": true,
       "license": "BSD-3-Clause",
-      "peer": true,
       "dependencies": {
         "estraverse": "^5.1.0"
       },
@@ -3898,7 +4227,6 @@
       "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "estraverse": "^5.2.0"
       },
@@ -3912,7 +4240,6 @@
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -3943,7 +4270,6 @@
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3992,8 +4318,7 @@
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/fast-diff": {
       "version": "1.3.0",
@@ -4002,6 +4327,36 @@
       "dev": true,
       "license": "Apache-2.0"
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fast-json-patch": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/fast-json-patch/-/fast-json-patch-3.1.1.tgz",
@@ -4013,16 +4368,24 @@
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
     },
     "node_modules/fdir": {
       "version": "6.5.0",
@@ -4055,7 +4418,6 @@
       "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "flat-cache": "^4.0.0"
       },
@@ -4075,6 +4437,19 @@
         "node": ">= 12"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/find-root": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
@@ -4087,7 +4462,6 @@
       "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "locate-path": "^6.0.0",
         "path-exists": "^4.0.0"
@@ -4105,7 +4479,6 @@
       "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "flatted": "^3.2.9",
         "keyv": "^4.5.4"
@@ -4173,7 +4546,6 @@
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
       "dev": true,
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -4192,12 +4564,16 @@
       }
     },
     "node_modules/globals": {
-      "version": "11.12.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-      "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
+      "version": "16.3.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-16.3.0.tgz",
+      "integrity": "sha512-bqWEnJ1Nt3neqx2q5SFfGS8r/ahumIakg3HcwtNlrVlwXIeNumWn/c7Pn/wKzGhf6SaW6H6uWXLqC30STCMchQ==",
+      "dev": true,
       "license": "MIT",
       "engines": {
-        "node": ">=4"
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/goober": {
@@ -4209,6 +4585,13 @@
         "csstype": "^3.0.10"
       }
     },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/happy-dom": {
       "version": "20.0.11",
       "resolved": "https://registry.npmjs.org/happy-dom/-/happy-dom-20.0.11.tgz",
@@ -4456,7 +4839,6 @@
       "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 4"
       }
@@ -4483,7 +4865,6 @@
       "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.8.19"
       }
@@ -4601,7 +4982,6 @@
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4618,7 +4998,6 @@
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -4654,6 +5033,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-plain-obj": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
@@ -4825,7 +5214,6 @@
       "integrity": "sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "argparse": "^2.0.1"
       },
@@ -4900,8 +5288,7 @@
       "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/json-parse-even-better-errors": {
       "version": "2.3.1",
@@ -4914,16 +5301,14 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/json5": {
       "version": "2.2.3",
@@ -4944,7 +5329,6 @@
       "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "json-buffer": "3.0.1"
       }
@@ -4955,7 +5339,6 @@
       "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "prelude-ls": "^1.2.1",
         "type-check": "~0.4.0"
@@ -4976,7 +5359,6 @@
       "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "p-locate": "^5.0.0"
       },
@@ -4992,8 +5374,7 @@
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/longest-streak": {
       "version": "3.1.0",
@@ -5272,6 +5653,16 @@
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
       "license": "MIT"
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/micromark": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
@@ -5714,6 +6105,33 @@
       ],
       "license": "MIT"
     },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -5746,12 +6164,11 @@
       }
     },
     "node_modules/minimatch": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
-      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
       "dev": true,
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
       },
@@ -5831,8 +6248,7 @@
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true,
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/node-releases": {
       "version": "2.0.19",
@@ -5937,7 +6353,6 @@
       "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
@@ -5956,7 +6371,6 @@
       "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "yocto-queue": "^0.1.0"
       },
@@ -5973,7 +6387,6 @@
       "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "p-limit": "^3.0.2"
       },
@@ -6058,7 +6471,6 @@
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       }
@@ -6166,7 +6578,6 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">= 0.8.0"
       }
@@ -6329,6 +6740,27 @@
       "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==",
       "license": "MIT"
     },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/re-resizable": {
       "version": "6.11.2",
       "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.11.2.tgz",
@@ -6727,6 +7159,17 @@
         "node": ">=4"
       }
     },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/rollup": {
       "version": "4.53.2",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.53.2.tgz",
@@ -6769,6 +7212,30 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -6963,7 +7430,6 @@
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=8"
       },
@@ -7132,6 +7598,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/totalist": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
@@ -7188,6 +7667,19 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
+      "integrity": "sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
     "node_modules/ts-key-enum": {
       "version": "3.0.13",
       "resolved": "https://registry.npmjs.org/ts-key-enum/-/ts-key-enum-3.0.13.tgz",
@@ -7206,7 +7698,6 @@
       "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "prelude-ls": "^1.2.1"
       },
@@ -7228,6 +7719,30 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/typescript-eslint": {
+      "version": "8.40.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.40.0.tgz",
+      "integrity": "sha512-Xvd2l+ZmFDPEt4oj1QEXzA4A2uUK6opvKu3eGN9aGjB8au02lIVcLyi375w94hHyejTOmzIU77L8ol2sRg9n7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/eslint-plugin": "8.40.0",
+        "@typescript-eslint/parser": "8.40.0",
+        "@typescript-eslint/typescript-estree": "8.40.0",
+        "@typescript-eslint/utils": "8.40.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
     "node_modules/undici-types": {
       "version": "7.10.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.10.0.tgz",
@@ -7359,7 +7874,6 @@
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
       "dev": true,
       "license": "BSD-2-Clause",
-      "peer": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -7699,7 +8213,6 @@
       "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7787,7 +8300,6 @@
       "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
diff --git a/package.json b/package.json
index 07e60c0..3acef24 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "q-wallets",
   "private": true,
-  "version": "1.3.2",
+  "version": "1.3.3",
   "type": "module",
   "scripts": {
-    "build": "tsc -b && vite build && cp CHANGELOG.md dist/",
+    "build": "tsc -b && vite build && node -e \"require('fs').copyFileSync('CHANGELOG.md', 'dist/CHANGELOG.md')\"",
     "dev": "vite",
     "format:check": "prettier --check .",
     "format": "prettier --write .",
@@ -39,6 +39,7 @@
     "react-window": "^1.8.11"
   },
   "devDependencies": {
+    "@eslint/js": "^9.34.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",
     "@testing-library/user-event": "^14.6.1",
@@ -48,12 +49,17 @@
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^4.0.16",
     "@vitest/ui": "^4.0.16",
+    "eslint": "^9.34.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.3.0",
     "happy-dom": "^20.0.11",
     "jsdom": "^27.4.0",
     "prettier": "^3.6.2",
     "typescript": "^5.8.2",
+    "typescript-eslint": "^8.40.0",
     "vite": "^6.2.2",
     "vitest": "^4.0.16"
   }
diff --git a/public/changelog/q-wallets-after-redesign-1-3-3.png b/public/changelog/q-wallets-after-redesign-1-3-3.png
new file mode 100644
index 0000000..37aa9c3
Binary files /dev/null and b/public/changelog/q-wallets-after-redesign-1-3-3.png differ
diff --git a/public/changelog/q-wallets-before-redesign.png b/public/changelog/q-wallets-before-redesign.png
new file mode 100644
index 0000000..43ce9ee
Binary files /dev/null and b/public/changelog/q-wallets-before-redesign.png differ
diff --git a/src/AppLayout.tsx b/src/AppLayout.tsx
index b7b6300..7b66b08 100644
--- a/src/AppLayout.tsx
+++ b/src/AppLayout.tsx
@@ -1,6 +1,7 @@
 import {
   AppBar,
   Box,
+  ButtonBase,
   Container,
   Dialog,
   DialogContent,
@@ -31,15 +32,132 @@ import doge from './assets/doge.png';
 import dgb from './assets/dgb.png';
 import rvn from './assets/rvn.png';
 import arrr from './assets/arrr.png';
+import qWalletsLogo from './assets/q-wallets-logo.webp';
 import { useIframe } from './hooks/useIframeListener';
 import { useTranslation } from 'react-i18next';
 import packageJson from '../package.json';
 import { EMPTY_STRING, TIME_MINUTES_1 } from './common/constants';
 import MenuIcon from '@mui/icons-material/Menu';
 import { syncAllAddressBooksOnStartup } from './utils/addressBookQDN';
+import {
+  ADDRESS_BOOK_STORAGE_EVENT,
+  setAddressBookAccountScope,
+} from './utils/addressBookStorage';
 import changelogContent from '../CHANGELOG.md?raw';
 import Markdown from 'react-markdown';
 
+type SceneGlowLayerKey = 'primaryCyan' | 'topBlue' | 'stars' | 'vignette';
+
+type SceneGlowLayerSettings = {
+  blur: number;
+  intensity: number;
+  spread: number;
+  x: number;
+  y: number;
+};
+
+type SceneGlowSettings = Record<SceneGlowLayerKey, SceneGlowLayerSettings>;
+
+const DEFAULT_SCENE_GLOW_SETTINGS: SceneGlowSettings = {
+  primaryCyan: { blur: 0, intensity: 99, spread: 81, x: 90, y: -61 },
+  topBlue: { blur: 0, intensity: 100, spread: 100, x: 0, y: 0 },
+  stars: { blur: 0, intensity: 96, spread: 85, x: 12, y: -11 },
+  vignette: { blur: 0, intensity: 100, spread: 100, x: 0, y: 0 },
+};
+
+const sceneLayerTransform = (layer: SceneGlowLayerSettings) =>
+  `translate(${layer.x}px, ${layer.y}px) scale(${layer.spread / 100})`;
+
+const sceneGlowLayerSx = (
+  layer: SceneGlowLayerSettings,
+  sx: {
+    background: string;
+    height: string;
+    left: string;
+    opacity: number;
+    top: string;
+    width: string;
+  }
+) => ({
+  background: sx.background,
+  filter: `blur(${layer.blur}px)`,
+  height: sx.height,
+  left: sx.left,
+  opacity: sx.opacity * (layer.intensity / 100),
+  pointerEvents: 'none',
+  position: 'absolute' as const,
+  top: sx.top,
+  transform: sceneLayerTransform(layer),
+  transformOrigin: 'center',
+  width: sx.width,
+});
+
+function SceneAtmosphere({ settings }: { settings: SceneGlowSettings }) {
+  return (
+    <Box
+      aria-hidden="true"
+      sx={{
+        inset: 0,
+        minHeight: '100%',
+        overflow: 'hidden',
+        pointerEvents: 'none',
+        position: 'absolute',
+        width: '100%',
+        zIndex: 0,
+      }}
+    >
+      <Box
+        sx={sceneGlowLayerSx(settings.primaryCyan, {
+          background:
+            'radial-gradient(ellipse at center, rgba(24,189,242,0.18) 0%, rgba(24,189,242,0.065) 42%, transparent 76%)',
+          height: '55vh',
+          left: '-10vw',
+          opacity: 1,
+          top: '-4vh',
+          width: '62vw',
+        })}
+      />
+      <Box
+        sx={sceneGlowLayerSx(settings.topBlue, {
+          background:
+            'radial-gradient(ellipse at center, rgba(42,117,217,0.12) 0%, rgba(42,117,217,0.045) 42%, transparent 72%)',
+          height: '34vh',
+          left: '20vw',
+          opacity: 1,
+          top: '-10vh',
+          width: '58vw',
+        })}
+      />
+      <Box
+        sx={{
+          backgroundImage:
+            'radial-gradient(circle at 12% 20%, rgba(24,189,242,0.36) 0 1px, transparent 1.7px), radial-gradient(circle at 62% 8%, rgba(74,179,255,0.26) 0 1px, transparent 1.8px), radial-gradient(circle at 39% 34%, rgba(180,226,255,0.18) 0 1px, transparent 1.6px)',
+          backgroundPosition: '0 0, 80px 30px, 140px 70px',
+          backgroundSize: '310px 220px, 420px 280px, 520px 360px',
+          filter: `blur(${settings.stars.blur}px)`,
+          inset: 0,
+          opacity: 0.28 * (settings.stars.intensity / 100),
+          pointerEvents: 'none',
+          position: 'absolute',
+          transform: sceneLayerTransform(settings.stars),
+          transformOrigin: 'center',
+        }}
+      />
+      <Box
+        sx={sceneGlowLayerSx(settings.vignette, {
+          background:
+            'linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.16) 100%)',
+          height: '100%',
+          left: '0',
+          opacity: 1,
+          top: '0',
+          width: '100%',
+        })}
+      />
+    </Box>
+  );
+}
+
 export default function AppLayout() {
   useIframe();
 
@@ -51,10 +169,15 @@ export default function AppLayout() {
 
   const { setWalletState } = useContext(walletContext);
   const { address, avatarUrl, name } = useAuth();
+  setAddressBookAccountScope(address || null);
   const [isUsingGateway, setIsUsingGateway] = useState(true);
   const [nodeInfo, setNodeInfo] = useState<any>(null);
   const [mobileOpen, setMobileOpen] = useState(false);
   const [changelogOpen, setChangelogOpen] = useState(false);
+  const [changelogPreviewImage, setChangelogPreviewImage] = useState<{
+    alt: string;
+    src: string;
+  } | null>(null);
 
   // derive selected from the URL
   const selectedSegment = useMemo(() => {
@@ -130,14 +253,22 @@ export default function AppLayout() {
     }
   }, [address, avatarUrl, isUsingGateway, name, nodeInfo, setWalletState]);
 
+  useEffect(() => {
+    window.dispatchEvent(new Event(ADDRESS_BOOK_STORAGE_EVENT));
+  }, [address]);
+
   // Sync address books from QDN on app startup
   useEffect(() => {
     // Only sync if user is authenticated
     if (address && name) {
-      syncAllAddressBooksOnStartup(name).catch((err) => {
-        console.error('Failed to sync address books on startup:', err);
-        // App continues to work with localStorage only
-      });
+      syncAllAddressBooksOnStartup(name)
+        .catch((err) => {
+          console.error('Failed to sync address books on startup:', err);
+          // App continues to work with localStorage only
+        })
+        .finally(() => {
+          window.dispatchEvent(new Event(ADDRESS_BOOK_STORAGE_EVENT));
+        });
     }
   }, [address, name]);
 
@@ -157,16 +288,16 @@ export default function AppLayout() {
       title: t('core:coins.qortal', { postProcess: 'capitalizeFirstChar' }),
       icon: <img src={qort} style={coinStyle} />,
     },
-    {
-      segment: 'litecoin',
-      title: t('core:coins.litecoin', { postProcess: 'capitalizeFirstChar' }),
-      icon: <img src={ltc} style={coinStyle} />,
-    },
     {
       segment: 'bitcoin',
       title: t('core:coins.bitcoin', { postProcess: 'capitalizeFirstChar' }),
       icon: <img src={btc} style={coinStyle} />,
     },
+    {
+      segment: 'litecoin',
+      title: t('core:coins.litecoin', { postProcess: 'capitalizeFirstChar' }),
+      icon: <img src={ltc} style={coinStyle} />,
+    },
     {
       segment: 'dogecoin',
       title: t('core:coins.dogecoin', { postProcess: 'capitalizeFirstChar' }),
@@ -191,7 +322,26 @@ export default function AppLayout() {
     },
   ];
 
-  const drawerWidth = isMobile ? 120 : 140;
+  const navItems = NAVIGATION.filter(
+    (i): i is NavSegment => (i as any).segment
+  );
+  const coinLabels: Record<string, string> = {
+    qortal: 'QORT',
+    litecoin: 'LTC',
+    bitcoin: 'BTC',
+    dogecoin: 'DOGE',
+    digibyte: 'DGB',
+    ravencoin: 'RVN',
+    piratechain: 'ARRR',
+  };
+  const activeNavItem =
+    navItems.find(
+      (item) =>
+        selectedSegment === item.segment ||
+        (selectedSegment === '/' && item.segment === '/')
+    ) ?? navItems[0];
+
+  const drawerWidth = 280;
 
   const drawerSx = {
     width: drawerWidth,
@@ -201,7 +351,7 @@ export default function AppLayout() {
       display: 'flex',
       flexDirection: 'column',
       overflowX: 'hidden',
-      pt: 1,
+      p: 1.5,
       width: drawerWidth,
     },
   } as const;
@@ -218,18 +368,29 @@ export default function AppLayout() {
   };
 
   const drawerContent = (
-    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%', width: drawerWidth }}>
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        width: '100%',
+      }}
+    >
       <List
         disablePadding
         subheader={
           <ListSubheader
             component="div"
             sx={{
+              bgcolor: 'transparent',
+              color: 'text.secondary',
               fontSize: 11,
-              letterSpacing: 1.2,
+              fontWeight: 700,
+              letterSpacing: 1,
               lineHeight: 1.2,
+              px: 1,
               py: 1.5,
-              textAlign: 'center',
+              textTransform: 'uppercase',
             }}
           >
             {t('core:wallets', { postProcess: 'capitalizeAll' })}
@@ -237,35 +398,43 @@ export default function AppLayout() {
         }
         sx={{ flexGrow: 1 }}
       >
-        {NAVIGATION.filter((i): i is NavSegment => (i as any).segment).map((item) => {
+        {navItems.map((item) => {
           const isSelected =
             selectedSegment === item.segment ||
             (selectedSegment === '/' && item.segment === '/');
           return (
-            <ListItem key={item.segment} disablePadding>
+            <ListItem key={item.segment} disablePadding sx={{ mb: 0.5 }}>
               <ListItemButton
                 onClick={() => handleNavigate(item.segment)}
                 selected={isSelected}
                 sx={{
-                  py: 2,
-                  minHeight: 56,
+                  borderRadius: 1.5,
+                  minHeight: 48,
+                  px: 1,
+                  py: 1,
                   '&.Mui-selected': (theme: Theme) => ({
-                    borderRight: `3px solid ${theme.palette.primary.main}`,
+                    bgcolor: theme.palette.action.selected,
+                    color: theme.palette.primary.main,
+                    fontWeight: 700,
                   }),
                 }}
               >
                 <ListItemIcon
                   sx={{
-                    minWidth: 0,
                     display: 'flex',
                     alignItems: 'center',
                     gap: 1,
+                    minWidth: 0,
+                    width: '100%',
                   }}
                 >
-                  <Box sx={{ width: 24, height: 24, display: 'inline-flex' }}>{item.icon}</Box>
+                  <Box sx={{ width: 24, height: 24, display: 'inline-flex' }}>
+                    {item.icon}
+                  </Box>
                   <Box
                     sx={{
-                      fontSize: 11,
+                      fontSize: 13,
+                      fontWeight: 500,
                       overflow: 'hidden',
                       textOverflow: 'ellipsis',
                       whiteSpace: 'nowrap',
@@ -280,7 +449,10 @@ export default function AppLayout() {
         })}
       </List>
       <Box sx={{ mt: 'auto', mb: 1, textAlign: 'center' }}>
-        <Typography variant="caption" sx={{ fontSize: 10, color: 'text.secondary' }}>
+        <Typography
+          variant="caption"
+          sx={{ fontSize: 10, color: 'text.secondary' }}
+        >
           v{packageJson.version}
         </Typography>
         <br />
@@ -296,27 +468,249 @@ export default function AppLayout() {
     </Box>
   );
 
+  const desktopNavigation = (
+    <Box
+      sx={{
+        alignItems: 'center',
+        display: { xs: 'none', md: 'block' },
+        mb: 0.75,
+      }}
+    >
+      <Box
+        sx={{
+          alignItems: 'center',
+          display: 'flex',
+          gap: 1.5,
+          justifyContent: 'space-between',
+          minHeight: 50,
+          px: 1.5,
+        }}
+      >
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            gap: 1,
+            flex: { md: '0 1 96px', lg: '0 0 184px' },
+            minWidth: 0,
+          }}
+        >
+          <Box
+            component="img"
+            alt="Q-Wallets"
+            src={qWalletsLogo}
+            sx={{
+              filter: 'drop-shadow(0 0 12px rgba(24,189,242,0.26))',
+              height: 32,
+              width: 32,
+            }}
+          />
+          <Typography
+            sx={{
+              display: { md: 'none', lg: 'block' },
+              fontSize: 18,
+              fontWeight: 700,
+              lineHeight: 1,
+              whiteSpace: 'nowrap',
+            }}
+          >
+            Q-Wallets
+          </Typography>
+          <Link
+            component="button"
+            variant="caption"
+            onClick={() => setChangelogOpen(true)}
+            sx={{
+              bgcolor: 'rgba(255,255,255,0.055)',
+              border: (t) =>
+                `1px solid ${
+                  t.palette.mode === 'dark'
+                    ? 'rgba(116,158,180,0.16)'
+                    : 'rgba(17,24,39,0.08)'
+                }`,
+              borderRadius: 999,
+              color: 'text.secondary',
+              fontSize: 11,
+              fontWeight: 600,
+              lineHeight: 1,
+              px: 1,
+              py: 0.5,
+              textDecoration: 'none',
+            }}
+          >
+            v{packageJson.version}
+          </Link>
+        </Box>
+        <Box
+          sx={{
+            display: 'flex',
+            flex: '1 1 auto',
+            flexWrap: 'nowrap',
+            gap: 0,
+            justifyContent: 'center',
+            minWidth: 0,
+          }}
+        >
+          {navItems.map((item, index) => {
+            const isSelected =
+              selectedSegment === item.segment ||
+              (selectedSegment === '/' && item.segment === '/');
+            return (
+              <Box
+                key={item.segment}
+                sx={{
+                  alignItems: 'center',
+                  display: 'inline-flex',
+                }}
+              >
+                <ButtonBase
+                  onClick={() => handleNavigate(item.segment)}
+                  sx={{
+                    alignItems: 'center',
+                    border: '1px solid transparent',
+                    borderRadius: 1,
+                    color: isSelected ? 'text.primary' : 'text.secondary',
+                    display: 'inline-flex',
+                    gap: 0.75,
+                    minHeight: 42,
+                    minWidth: { md: 44, lg: 74 },
+                    overflow: 'hidden',
+                    px: { md: 0.8, lg: 1.2 },
+                    py: 0.75,
+                    position: 'relative',
+                    bgcolor: isSelected
+                      ? 'rgba(24, 189, 242, 0.1)'
+                      : 'transparent',
+                    '&:hover': {
+                      bgcolor: isSelected
+                        ? 'rgba(24, 189, 242, 0.16)'
+                        : 'rgba(255,255,255,0.035)',
+                      color: 'text.primary',
+                    },
+                  }}
+                >
+                  <Box sx={{ display: 'inline-flex', height: 22, width: 22 }}>
+                    {item.icon}
+                  </Box>
+                  <Typography
+                    variant="caption"
+                    sx={{
+                      display: { md: 'none', lg: 'block' },
+                      fontWeight: isSelected ? 700 : 600,
+                      lineHeight: 1,
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    {coinLabels[item.segment] ?? item.title}
+                  </Typography>
+                </ButtonBase>
+                {index < navItems.length - 1 && (
+                  <Box
+                    sx={{
+                      borderLeft: '1px solid rgba(116,158,180,0.22)',
+                      height: 28,
+                      mx: { md: 0.45, lg: 0.7 },
+                    }}
+                  />
+                )}
+              </Box>
+            );
+          })}
+        </Box>
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            gap: 1,
+            justifyContent: 'flex-end',
+            minWidth: 54,
+          }}
+        >
+          <Box
+            sx={{
+              borderLeft: '1px solid rgba(116,158,180,0.2)',
+              height: 34,
+              mx: 0.25,
+            }}
+          />
+          <IconButton
+            aria-label="close"
+            onClick={() =>
+              window.parent?.postMessage({ action: 'CLOSE_QAPP' }, '*')
+            }
+            sx={{
+              color: 'text.secondary',
+              '&:hover': {
+                bgcolor: 'rgba(255,255,255,0.035)',
+                color: 'text.primary',
+              },
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+        </Box>
+      </Box>
+    </Box>
+  );
+
   return (
-    <Box sx={{ display: 'flex', width: '100%' }}>
+    <Box
+      sx={{
+        bgcolor: '#030b14',
+        backgroundImage:
+          'linear-gradient(180deg, #020917 0%, #061421 48%, #030b14 100%)',
+        isolation: 'isolate',
+        minHeight: '100dvh',
+        overflowX: 'hidden',
+        position: 'relative',
+        width: '100%',
+      }}
+    >
+      <SceneAtmosphere settings={DEFAULT_SCENE_GLOW_SETTINGS} />
       {isMobile && (
-        <AppBar position="fixed" color="primary" sx={{ zIndex: (t: Theme) => t.zIndex.drawer + 1 }}>
-          <Toolbar sx={{ minHeight: 56 }}>
+        <AppBar
+          position="sticky"
+          elevation={0}
+          sx={{
+            bgcolor: 'background.paper',
+            borderBottom: (t) => `1px solid ${t.palette.divider}`,
+            color: 'text.primary',
+            zIndex: (t: Theme) => t.zIndex.drawer + 1,
+          }}
+        >
+          <Toolbar sx={{ minHeight: 56, px: 1.5 }}>
             <IconButton
-              color="inherit"
+              color="primary"
               edge="start"
               onClick={handleDrawerToggle}
               sx={{ mr: 1 }}
             >
               <MenuIcon />
             </IconButton>
-            <Typography variant="h6" component="div" noWrap>
-              {t('core:wallets', { postProcess: 'capitalizeAll' })}
-            </Typography>
+            <Box sx={{ display: 'inline-flex', height: 26, mr: 1, width: 26 }}>
+              {activeNavItem?.icon}
+            </Box>
+            <Box sx={{ minWidth: 0 }}>
+              <Typography
+                variant="subtitle1"
+                component="div"
+                noWrap
+                sx={{ fontWeight: 700 }}
+              >
+                {activeNavItem?.title}
+              </Typography>
+              <Typography
+                variant="caption"
+                sx={{ color: 'text.secondary', fontWeight: 600 }}
+              >
+                {t('core:wallets', { postProcess: 'capitalizeAll' })}
+              </Typography>
+            </Box>
           </Toolbar>
         </AppBar>
       )}
 
-      {isMobile ? (
+      {isMobile && (
         <Drawer
           variant="temporary"
           open={mobileOpen}
@@ -326,20 +720,31 @@ export default function AppLayout() {
         >
           {drawerContent}
         </Drawer>
-      ) : (
-        <Drawer variant="permanent" sx={drawerSx}>
-          {drawerContent}
-        </Drawer>
       )}
 
-      <Box component="main" sx={{ flexGrow: 1, width: '100%', overflowX: 'auto' }}>
-        {isMobile && <Toolbar />}
-        <Container maxWidth="xl" sx={{ my: isMobile ? 6 : 8 }}>
+      <Box
+        component="main"
+        sx={{
+          overflowX: 'hidden',
+          px: { xs: 1.5, sm: 2, md: 3, lg: 4 },
+          py: { xs: 2, md: 1.5 },
+          position: 'relative',
+          width: '100%',
+          zIndex: 1,
+        }}
+      >
+        <Container
+          maxWidth={false}
+          disableGutters
+          sx={{ maxWidth: 1660, mx: 'auto' }}
+        >
+          {desktopNavigation}
           <Outlet />
         </Container>
       </Box>
 
       <Dialog
+        disableScrollLock
         open={changelogOpen}
         onClose={() => setChangelogOpen(false)}
         maxWidth="md"
@@ -349,22 +754,41 @@ export default function AppLayout() {
         <DialogTitle sx={{ textAlign: 'center', position: 'relative' }}>
           CHANGELOG
           <IconButton
+            aria-label="Close changelog"
             onClick={() => setChangelogOpen(false)}
             size="small"
-            sx={{ position: 'absolute', right: 8, top: '50%', transform: 'translateY(-50%)' }}
+            sx={{
+              position: 'absolute',
+              right: 8,
+              top: '50%',
+              transform: 'translateY(-50%)',
+            }}
           >
             <CloseIcon />
           </IconButton>
         </DialogTitle>
-        <DialogContent dividers>
+        <DialogContent dividers sx={{ scrollbarGutter: 'stable' }}>
           <Box
             sx={{
               '& h1': { fontSize: '1.5rem', fontWeight: 600, mb: 2, mt: 0 },
-              '& h2': { fontSize: '1.2rem', fontWeight: 600, mb: 1, mt: 3, color: 'primary.main' },
+              '& h2': {
+                fontSize: '1.2rem',
+                fontWeight: 600,
+                mb: 1,
+                mt: 3,
+                color: 'primary.main',
+              },
               '& h3': { fontSize: '1rem', fontWeight: 600, mb: 1, mt: 2 },
               '& ul': { pl: 2, mb: 1 },
               '& li': { mb: 0.5, fontSize: 14 },
               '& p': { mb: 1, fontSize: 14 },
+              '& p:has(img)': {
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: 1.25,
+                mb: 1.5,
+                mt: 1,
+              },
               '& code': {
                 backgroundColor: 'action.hover',
                 px: 0.5,
@@ -374,10 +798,120 @@ export default function AppLayout() {
               },
             }}
           >
-            <Markdown>{changelogContent}</Markdown>
+            <Markdown
+              components={{
+                a: ({ href, children }: any) => {
+                  const isChangelogImage =
+                    typeof href === 'string' && href.startsWith('/changelog/');
+
+                  if (!isChangelogImage) {
+                    return (
+                      <Link href={href} target="_blank" rel="noreferrer">
+                        {children}
+                      </Link>
+                    );
+                  }
+
+                  const alt = href.includes('before')
+                    ? 'Q-Wallets before redesign'
+                    : 'Q-Wallets after redesign';
+
+                  return (
+                    <ButtonBase
+                      aria-label={`Open ${alt}`}
+                      onClick={() =>
+                        setChangelogPreviewImage({
+                          alt,
+                          src: href,
+                        })
+                      }
+                      sx={{
+                        borderRadius: 1,
+                        display: 'block',
+                        overflow: 'hidden',
+                        width: { xs: 'calc(50% - 5px)', sm: 168 },
+                        '&:focus-visible': {
+                          outline: '1px solid rgba(24,189,242,0.65)',
+                          outlineOffset: 2,
+                        },
+                      }}
+                    >
+                      {children}
+                    </ButtonBase>
+                  );
+                },
+                img: ({ src, alt }: any) => (
+                  <Box
+                    component="img"
+                    alt={alt || ''}
+                    src={src}
+                    sx={{
+                      border: (t) => `1px solid ${t.palette.divider}`,
+                      borderRadius: 1,
+                      display: 'block',
+                      height: { xs: 74, sm: 90 },
+                      objectFit: 'cover',
+                      width: '100%',
+                    }}
+                  />
+                ),
+              }}
+            >
+              {changelogContent}
+            </Markdown>
           </Box>
         </DialogContent>
       </Dialog>
+
+      <Dialog
+        disableScrollLock
+        maxWidth="lg"
+        fullWidth
+        open={Boolean(changelogPreviewImage)}
+        onClose={() => setChangelogPreviewImage(null)}
+        slotProps={{
+          paper: {
+            sx: {
+              bgcolor: 'rgba(3, 17, 29, 0.985)',
+              border: '1px solid rgba(91,132,158,0.28)',
+              borderRadius: 2,
+              overflow: 'hidden',
+            },
+          },
+        }}
+      >
+        <DialogTitle sx={{ pr: 6 }}>
+          {changelogPreviewImage?.alt}
+          <IconButton
+            aria-label="Close image preview"
+            onClick={() => setChangelogPreviewImage(null)}
+            size="small"
+            sx={{
+              position: 'absolute',
+              right: 12,
+              top: 12,
+            }}
+          >
+            <CloseIcon />
+          </IconButton>
+        </DialogTitle>
+        <DialogContent sx={{ pt: '0 !important' }}>
+          {changelogPreviewImage ? (
+            <Box
+              component="img"
+              alt={changelogPreviewImage.alt}
+              src={changelogPreviewImage.src}
+              sx={{
+                borderRadius: 1,
+                display: 'block',
+                maxHeight: '72vh',
+                objectFit: 'contain',
+                width: '100%',
+              }}
+            />
+          ) : null}
+        </DialogContent>
+      </Dialog>
     </Box>
   );
 }
diff --git a/src/assets/q-wallets-logo.webp b/src/assets/q-wallets-logo.webp
new file mode 100644
index 0000000..8b83721
Binary files /dev/null and b/src/assets/q-wallets-logo.webp differ
diff --git a/src/assets/wallet-renders/arrr-coin-render.png b/src/assets/wallet-renders/arrr-coin-render.png
new file mode 100644
index 0000000..79a86d1
Binary files /dev/null and b/src/assets/wallet-renders/arrr-coin-render.png differ
diff --git a/src/assets/wallet-renders/btc-coin-render.png b/src/assets/wallet-renders/btc-coin-render.png
new file mode 100644
index 0000000..11f9866
Binary files /dev/null and b/src/assets/wallet-renders/btc-coin-render.png differ
diff --git a/src/assets/wallet-renders/dgb-coin-render.png b/src/assets/wallet-renders/dgb-coin-render.png
new file mode 100644
index 0000000..228063b
Binary files /dev/null and b/src/assets/wallet-renders/dgb-coin-render.png differ
diff --git a/src/assets/wallet-renders/doge-coin-render.png b/src/assets/wallet-renders/doge-coin-render.png
new file mode 100644
index 0000000..a6dc323
Binary files /dev/null and b/src/assets/wallet-renders/doge-coin-render.png differ
diff --git a/src/assets/wallet-renders/ltc-coin-render.png b/src/assets/wallet-renders/ltc-coin-render.png
new file mode 100644
index 0000000..673e170
Binary files /dev/null and b/src/assets/wallet-renders/ltc-coin-render.png differ
diff --git a/src/assets/wallet-renders/qort-coin-render.png b/src/assets/wallet-renders/qort-coin-render.png
new file mode 100644
index 0000000..92aafc0
Binary files /dev/null and b/src/assets/wallet-renders/qort-coin-render.png differ
diff --git a/src/assets/wallet-renders/rvn-coin-render.png b/src/assets/wallet-renders/rvn-coin-render.png
new file mode 100644
index 0000000..91da106
Binary files /dev/null and b/src/assets/wallet-renders/rvn-coin-render.png differ
diff --git a/src/common/functions.ts b/src/common/functions.ts
index 2d978db..f3909dc 100644
--- a/src/common/functions.ts
+++ b/src/common/functions.ts
@@ -1,37 +1,34 @@
 import { EMPTY_STRING, ONE_SPACE } from './constants';
 
-let timeSegments = [
-  3.154e10,
-  2.628e9,
-  6.048e8,
-  8.64e7,
-  3.6e6,
-  60000,
-  -Infinity,
-];
-
-let makeTimeString =
-  (unit: string, singularString: string) =>
-  (timeSegment: number, time: number) =>
-    time >= 2 * timeSegment
-      ? `${Math.floor(time / timeSegment)} ${unit}s ago`
-      : singularString;
-
-let timeFunctions = [
-  makeTimeString('year', '1 year ago'),
-  makeTimeString('month', '1 month ago'),
-  makeTimeString('week', '1 week ago'),
-  makeTimeString('day', '1 day ago'),
-  makeTimeString('hour', 'an hour ago'),
-  makeTimeString('minute', 'a minute ago'),
-  (_: any) => 'just now',
-];
-
 export function epochToAgo(epoch: number) {
-  let timeDifference = Date.now() - epoch;
-  let index = timeSegments.findIndex((time) => timeDifference >= time);
-  let timeAgo = timeFunctions[index](timeSegments[index], timeDifference);
-  return timeAgo;
+  const date = new Date(epoch);
+  if (!Number.isFinite(epoch) || Number.isNaN(date.getTime())) {
+    return '-';
+  }
+
+  const minute = 60000;
+  const hour = 60 * minute;
+  const day = 24 * hour;
+  const timeDifference = Math.max(0, Date.now() - epoch);
+
+  if (timeDifference < minute) {
+    return 'just now';
+  }
+
+  if (timeDifference < hour) {
+    const minutes = Math.floor(timeDifference / minute);
+    return `${minutes} minute${minutes === 1 ? '' : 's'} ago`;
+  }
+
+  if (timeDifference < day) {
+    const hours = Math.floor(timeDifference / hour);
+    return `${hours} hour${hours === 1 ? '' : 's'} ago`;
+  }
+
+  const dayOfMonth = String(date.getDate()).padStart(2, '0');
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const year = String(date.getFullYear()).slice(-2);
+  return `${dayOfMonth}/${month}/${year}`;
 }
 
 export function secondsToDhms(seconds: number) {
diff --git a/src/components/AddressBook/AddressBookDialog.tsx b/src/components/AddressBook/AddressBookDialog.tsx
index 091a430..4e58bbc 100644
--- a/src/components/AddressBook/AddressBookDialog.tsx
+++ b/src/components/AddressBook/AddressBookDialog.tsx
@@ -9,13 +9,12 @@ import {
   TextField,
   Box,
   Button,
+  InputAdornment,
   useTheme,
   useMediaQuery,
-  Snackbar,
-  Alert,
 } from '@mui/material';
-import { Close, Add, Save } from '@mui/icons-material';
-import { Coin, useGlobal } from 'qapp-core';
+import { Add, Close, Search } from '@mui/icons-material';
+import { Coin } from 'qapp-core';
 import { useTranslation } from 'react-i18next';
 import { Transition } from '../../styles/page-styles';
 import { AddressBookEntry } from '../../utils/Types';
@@ -25,18 +24,40 @@ import {
   deleteAddress,
   addAddress,
   updateAddress,
+  moveAddressBookEntry,
+  toggleAddressBookFavorite,
 } from '../../utils/addressBookStorage';
-import { publishToQDN } from '../../utils/addressBookQDN';
 import { AddressBookTable } from './AddressBookTable';
 import { AddressFormDialog } from './AddressFormDialog';
 import { DeleteConfirmationDialog } from './DeleteConfirmationDialog';
-import { EMPTY_STRING, ADDRESSBOOK_ROWS_PER_PAGE } from '../../common/constants';
+import {
+  EMPTY_STRING,
+  ADDRESSBOOK_ROWS_PER_PAGE,
+} from '../../common/constants';
+import coinLogoARRR from '../../assets/arrr.png';
+import coinLogoBTC from '../../assets/btc.png';
+import coinLogoDGB from '../../assets/dgb.png';
+import coinLogoDOGE from '../../assets/doge.png';
+import coinLogoLTC from '../../assets/ltc.png';
+import coinLogoQORT from '../../assets/qort.png';
+import coinLogoRVN from '../../assets/rvn.png';
+
+const coinLogos: Partial<Record<Coin, string>> = {
+  [Coin.ARRR]: coinLogoARRR,
+  [Coin.BTC]: coinLogoBTC,
+  [Coin.DGB]: coinLogoDGB,
+  [Coin.DOGE]: coinLogoDOGE,
+  [Coin.LTC]: coinLogoLTC,
+  [Coin.QORT]: coinLogoQORT,
+  [Coin.RVN]: coinLogoRVN,
+};
 
 interface AddressBookDialogProps {
   open: boolean;
   onClose: () => void;
   coinType: Coin;
   onSelectAddress?: (address: string, name: string) => void;
+  onAddressBookChange?: () => void;
   prefillData?: { name: string; address: string } | null;
 }
 
@@ -45,35 +66,33 @@ export const AddressBookDialog: React.FC<AddressBookDialogProps> = ({
   onClose,
   coinType,
   onSelectAddress,
+  onAddressBookChange,
   prefillData,
 }) => {
   const { t } = useTranslation(['core']);
   const theme = useTheme();
-  const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
+  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const coinLogo = coinLogos[coinType] || coinLogoQORT;
 
   const [entries, setEntries] = useState<AddressBookEntry[]>([]);
   const [searchQuery, setSearchQuery] = useState(EMPTY_STRING);
   const [openForm, setOpenForm] = useState(false);
   const [openDeleteConfirm, setOpenDeleteConfirm] = useState(false);
-  const [editingEntry, setEditingEntry] = useState<AddressBookEntry | undefined>(undefined);
-  const [deletingEntry, setDeletingEntry] = useState<AddressBookEntry | undefined>(undefined);
+  const [editingEntry, setEditingEntry] = useState<
+    AddressBookEntry | undefined
+  >(undefined);
+  const [deletingEntry, setDeletingEntry] = useState<
+    AddressBookEntry | undefined
+  >(undefined);
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(ADDRESSBOOK_ROWS_PER_PAGE);
   const [saveError, setSaveError] = useState<string>(EMPTY_STRING);
-  const [isSyncing, setIsSyncing] = useState(false);
-  const [hasUnsyncedChanges, setHasUnsyncedChanges] = useState(false);
-  const [showSyncSuccess, setShowSyncSuccess] = useState(false);
-
-  // Get authenticated username for QDN sync
-  const userName = useGlobal().auth.name;
 
   // Load entries when dialog opens or coinType changes
   useEffect(() => {
     if (open) {
       setPage(0);
       loadEntries();
-      // Reset unsynced changes flag when dialog opens
-      setHasUnsyncedChanges(false);
     }
   }, [open, coinType]);
 
@@ -99,9 +118,12 @@ export const AddressBookDialog: React.FC<AddressBookDialogProps> = ({
     setPage(0);
   }, [searchQuery, coinType]);
 
-  const loadEntries = () => {
-    const allEntries = getAddressBook(coinType);
+  const loadEntries = (query = searchQuery) => {
+    const allEntries = query.trim()
+      ? searchAddresses(coinType, query)
+      : getAddressBook(coinType);
     setEntries(allEntries);
+    return allEntries;
   };
 
   const handleAddNew = () => {
@@ -123,17 +145,24 @@ export const AddressBookDialog: React.FC<AddressBookDialogProps> = ({
 
   const handleDeleteConfirm = () => {
     if (deletingEntry) {
-      deleteAddress(deletingEntry.id, coinType);
-      loadEntries();
+      const deleted = deleteAddress(deletingEntry.id, coinType);
+      if (deleted) {
+        loadEntries();
+        onAddressBookChange?.();
+      }
       setOpenDeleteConfirm(false);
       setDeletingEntry(undefined);
-      setHasUnsyncedChanges(true);
 
       // Adjust page if we deleted the last item on the current page
-      const newTotalEntries = entries.length - 1;
-      const maxPage = Math.max(0, Math.ceil(newTotalEntries / rowsPerPage) - 1);
-      if (page > maxPage) {
-        setPage(maxPage);
+      if (deleted) {
+        const newTotalEntries = entries.length - 1;
+        const maxPage = Math.max(
+          0,
+          Math.ceil(newTotalEntries / rowsPerPage) - 1
+        );
+        if (page > maxPage) {
+          setPage(maxPage);
+        }
       }
     }
   };
@@ -145,26 +174,32 @@ export const AddressBookDialog: React.FC<AddressBookDialogProps> = ({
 
   const handleSave = (entry: Omit<AddressBookEntry, 'id' | 'createdAt'>) => {
     try {
+      let savedEntry: AddressBookEntry | null;
       if (editingEntry) {
         // Update existing entry
-        updateAddress(editingEntry.id, coinType, {
+        savedEntry = updateAddress(editingEntry.id, coinType, {
           name: entry.name,
           address: entry.address,
           note: entry.note,
         });
       } else {
         // Add new entry
-        addAddress(entry);
+        savedEntry = addAddress(entry);
+      }
+
+      if (!savedEntry) {
+        throw new Error(t('core:message.error.something_went_wrong'));
       }
+
       loadEntries();
       setOpenForm(false);
-      setEditingEntry(undefined);
       setSaveError(EMPTY_STRING);
-      setHasUnsyncedChanges(true);
+      onAddressBookChange?.();
     } catch (error: any) {
       console.error('Error saving address:', error);
       // Set the error message to display in the form
-      const errorMessage = error?.message || t('core:message.error.something_went_wrong');
+      const errorMessage =
+        error?.message || t('core:message.error.something_went_wrong');
       setSaveError(
         errorMessage === 'Address already exists in the address book'
           ? t('core:message.error.address_already_exists')
@@ -175,6 +210,10 @@ export const AddressBookDialog: React.FC<AddressBookDialogProps> = ({
 
   const handleFormClose = () => {
     setOpenForm(false);
+    setSaveError(EMPTY_STRING);
+  };
+
+  const handleFormExited = () => {
     setEditingEntry(undefined);
     setSaveError(EMPTY_STRING);
   };
@@ -194,34 +233,28 @@ export const AddressBookDialog: React.FC<AddressBookDialogProps> = ({
     setPage(newPage);
   };
 
-  const handleRowsPerPageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleRowsPerPageChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
     setRowsPerPage(parseInt(event.target.value, 10));
     setPage(0);
   };
 
-  const handleSyncToQDN = async () => {
-    setIsSyncing(true);
-
-    try {
-      const currentEntries = getAddressBook(coinType);
-      await publishToQDN(coinType, currentEntries, userName || undefined);
-
-      // Show success notification
-      console.log(`Address Book: Successfully synced ${coinType} to QDN`);
-      // Reset unsynced changes flag after successful sync
-      setHasUnsyncedChanges(false);
-      // Show success snackbar
-      setShowSyncSuccess(true);
-    } catch (error) {
-      console.error('Failed to sync to QDN:', error);
-      // Optional: Show error notification to user
-    } finally {
-      setIsSyncing(false);
+  const handleToggleFavorite = (entry: AddressBookEntry) => {
+    const updatedEntries = toggleAddressBookFavorite(entry.id, coinType);
+    if (updatedEntries) {
+      loadEntries();
+      onAddressBookChange?.();
+      setPage(0);
     }
   };
 
-  const handleCloseSyncSuccess = () => {
-    setShowSyncSuccess(false);
+  const handleReorder = (sourceId: string, targetId: string) => {
+    const updatedEntries = moveAddressBookEntry(coinType, sourceId, targetId);
+    if (updatedEntries) {
+      loadEntries();
+      onAddressBookChange?.();
+    }
   };
 
   return (
@@ -231,71 +264,214 @@ export const AddressBookDialog: React.FC<AddressBookDialogProps> = ({
         open={open}
         onClose={onClose}
         slots={{ transition: Transition }}
-        maxWidth="md"
-        fullWidth
+        maxWidth={false}
+        disableScrollLock
+        slotProps={{
+          paper: {
+            sx: {
+              bgcolor: 'rgba(3, 17, 29, 0.985)',
+              backgroundImage:
+                'radial-gradient(circle at 13% 6%, rgba(24,189,242,0.13), transparent 30%), linear-gradient(180deg, rgba(5,24,39,0.99) 0%, rgba(3,13,23,0.995) 100%)',
+              border: '1px solid rgba(91,132,158,0.28)',
+              borderRadius: fullScreen ? 0 : 2,
+              boxShadow:
+                '0 28px 72px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04)',
+              maxHeight: fullScreen ? '100dvh' : 'calc(100dvh - 48px)',
+              overflowX: 'hidden',
+              width: fullScreen ? '100%' : 'min(900px, calc(100vw - 24px))',
+            },
+          },
+        }}
       >
-        <AppBar sx={{ position: 'relative' }}>
-          <Toolbar>
-            <Typography sx={{ ml: 2, flex: 1, textAlign: 'center' }} variant="h4" component="div">
-              {t('core:address_book_title', {
-                coinType: coinType,
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Typography>
+        <AppBar
+          sx={{
+            bgcolor: 'transparent',
+            backgroundColor: 'transparent',
+            backgroundImage: 'none',
+            borderBottom: 'none',
+            boxShadow: 'none',
+            color: 'text.primary',
+            position: 'relative',
+          }}
+        >
+          <Toolbar
+            sx={{
+              minHeight: { xs: 72, md: 76 },
+              px: { xs: 2.35, md: 2.75 },
+            }}
+          >
+            <Box
+              sx={{
+                alignItems: 'center',
+                display: 'flex',
+                flexGrow: 1,
+                gap: { xs: 1.35, md: 1.55 },
+                minWidth: 0,
+              }}
+            >
+              <Box
+                component="img"
+                src={coinLogo}
+                alt=""
+                sx={{
+                  filter: 'drop-shadow(0 0 16px rgba(24,189,242,0.45))',
+                  height: { xs: 34, md: 36 },
+                  width: { xs: 34, md: 36 },
+                }}
+              />
+              <Typography
+                sx={{
+                  color: 'text.primary',
+                  fontSize: { xs: 19, md: 20 },
+                  fontWeight: 700,
+                  letterSpacing: 0,
+                  lineHeight: 1.05,
+                  minWidth: 0,
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                }}
+                component="div"
+              >
+                {t('core:address_book_title', {
+                  coinType: coinType,
+                  postProcess: 'capitalizeFirstChar',
+                })}
+              </Typography>
+            </Box>
             <IconButton
-              edge="end"
               color="inherit"
               onClick={onClose}
-              aria-label={t('core:action.close', { postProcess: 'capitalizeFirstChar' })}
+              aria-label={t('core:action.close', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+              sx={{
+                color: 'text.secondary',
+                ml: 1.2,
+                p: 0.35,
+                '&:hover': {
+                  bgcolor: 'rgba(116,158,180,0.08)',
+                  color: 'text.primary',
+                },
+                '& svg': {
+                  fontSize: { xs: 28, md: 29 },
+                },
+              }}
             >
               <Close />
             </IconButton>
           </Toolbar>
         </AppBar>
 
-        <DialogContent>
-          <Box sx={{ p: 2 }}>
-            {/* Search Field */}
-            <TextField
-              fullWidth
-              label={t('core:address_book_search', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-              variant="outlined"
-              value={searchQuery}
-              onChange={handleSearchChange}
-              sx={{ mb: 3 }}
-            />
-
-            {/* QDN Sync and Add New Buttons */}
-            <Box sx={{ mb: 2, display: 'flex', justifyContent: 'flex-end', gap: 2 }}>
-              <Button
-                startIcon={<Save />}
-                onClick={handleSyncToQDN}
-                disabled={isSyncing || !hasUnsyncedChanges}
+        <DialogContent
+          sx={{
+            overflowX: 'hidden',
+            px: { xs: 2.15, sm: 2.45, md: 2.75 },
+            pb: { xs: 2.2, sm: 2.45, md: 2.75 },
+            pt: { xs: 0.2, md: 0.3 },
+            scrollbarGutter: 'stable',
+          }}
+        >
+          <Box sx={{ mx: 'auto', width: '100%' }}>
+            <Box
+              sx={{
+                alignItems: { xs: 'stretch', md: 'center' },
+                display: 'grid',
+                gap: { xs: 1, md: 1 },
+                gridTemplateColumns: {
+                  xs: '1fr',
+                  md: 'minmax(0, 1fr) 190px',
+                },
+                mb: { xs: 1.35, md: 1.5 },
+              }}
+            >
+              <TextField
+                fullWidth
+                placeholder={t('core:address_book_search', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+                variant="outlined"
+                value={searchQuery}
+                onChange={handleSearchChange}
+                slotProps={{
+                  htmlInput: {
+                    'aria-label': t('core:address_book_search', {
+                      postProcess: 'capitalizeFirstChar',
+                    }),
+                  },
+                  input: {
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <Search
+                          sx={{
+                            color: 'text.secondary',
+                            fontSize: 20,
+                          }}
+                        />
+                      </InputAdornment>
+                    ),
+                  },
+                }}
                 sx={{
-                  backgroundColor: '#4caf50',
-                  color: 'white',
-                  '&:hover': {
-                    backgroundColor: '#45a049',
+                  '& .MuiOutlinedInput-root': {
+                    bgcolor: 'rgba(0,8,16,0.2)',
+                    borderRadius: 1.35,
+                    minHeight: { xs: 44, md: 44 },
+                    '& fieldset': {
+                      borderColor: 'rgba(116,158,180,0.16)',
+                    },
+                    '&:hover fieldset': {
+                      borderColor: 'rgba(116,158,180,0.3)',
+                    },
+                    '&.Mui-focused fieldset': {
+                      borderColor: 'rgba(24,189,242,0.62)',
+                    },
                   },
-                  '&:disabled': {
-                    backgroundColor: '#a5d6a7',
-                    color: 'white',
+                  '& .MuiOutlinedInput-input': {
+                    color: 'text.secondary',
+                    fontSize: { xs: 13, md: 13 },
+                    fontWeight: 400,
+                    py: { xs: 1.1, md: 1.1 },
+                    '&::placeholder': {
+                      color: 'text.secondary',
+                      fontWeight: 400,
+                      opacity: 0.88,
+                    },
+                  },
+                  '& .MuiInputAdornment-root svg': {
+                    fontSize: 20,
                   },
                 }}
-              >
-                {t('core:address_book_sync_qdn', { postProcess: 'capitalizeFirstChar' })}
-                {isSyncing && '...'}
-              </Button>
+              />
               <Button
                 variant="contained"
                 startIcon={<Add />}
                 onClick={handleAddNew}
+                size="small"
                 sx={{
-                  backgroundColor: '#05a2e4',
+                  bgcolor: 'rgba(6,126,208,0.94)',
+                  backgroundImage:
+                    'linear-gradient(180deg, rgba(18,158,238,0.94), rgba(4,111,198,0.94))',
+                  border: '1px solid rgba(85,205,255,0.38)',
+                  borderRadius: 1.35,
+                  boxShadow:
+                    '0 8px 20px rgba(3,139,236,0.18), inset 0 1px 0 rgba(255,255,255,0.16)',
+                  color: 'rgba(255,255,255,0.96)',
+                  fontSize: { xs: 12.5, md: 13 },
+                  fontWeight: 650,
+                  minHeight: { xs: 42, md: 44 },
+                  px: { xs: 1.2, md: 1.3 },
+                  whiteSpace: 'nowrap',
+                  '& .MuiButton-startIcon': {
+                    mr: { xs: 0.65, md: 1 },
+                    '& svg': {
+                      fontSize: { xs: 17, md: 18 },
+                    },
+                  },
                   '&:hover': {
-                    backgroundColor: '#02648d',
+                    bgcolor: '#1399e8',
+                    borderColor: 'rgba(107,216,255,0.52)',
+                    boxShadow: '0 12px 26px rgba(24,189,242,0.24)',
                   },
                 }}
               >
@@ -305,17 +481,25 @@ export const AddressBookDialog: React.FC<AddressBookDialogProps> = ({
               </Button>
             </Box>
 
-            {/* Address List */}
             {entries.length === 0 ? (
               <Box
                 sx={{
+                  alignItems: 'center',
+                  bgcolor: 'rgba(0,8,16,0.12)',
+                  border: '1px solid rgba(116,158,180,0.08)',
+                  borderRadius: 1.35,
                   display: 'flex',
                   justifyContent: 'center',
-                  alignItems: 'center',
-                  minHeight: '200px',
+                  minHeight: { xs: 156, md: 170 },
                 }}
               >
-                <Typography variant="body1" color="text.secondary">
+                <Typography
+                  sx={{
+                    color: 'text.secondary',
+                    fontSize: { xs: 14, md: 15 },
+                    fontWeight: 500,
+                  }}
+                >
                   {t('core:address_book_empty', {
                     postProcess: 'capitalizeFirstChar',
                   })}
@@ -327,6 +511,8 @@ export const AddressBookDialog: React.FC<AddressBookDialogProps> = ({
                 onEdit={handleEdit}
                 onDelete={handleDeleteClick}
                 onUse={onSelectAddress ? handleUse : undefined}
+                onToggleFavorite={handleToggleFavorite}
+                onReorder={handleReorder}
                 page={page}
                 rowsPerPage={rowsPerPage}
                 onPageChange={handlePageChange}
@@ -347,6 +533,7 @@ export const AddressBookDialog: React.FC<AddressBookDialogProps> = ({
         prefillName={prefillData?.name}
         prefillAddress={prefillData?.address}
         saveError={saveError}
+        onExited={handleFormExited}
       />
 
       {/* Delete Confirmation Dialog */}
@@ -356,22 +543,6 @@ export const AddressBookDialog: React.FC<AddressBookDialogProps> = ({
         onConfirm={handleDeleteConfirm}
         entryName={deletingEntry?.name || EMPTY_STRING}
       />
-
-      {/* QDN Sync Success Notification */}
-      <Snackbar
-        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-        open={showSyncSuccess}
-        autoHideDuration={4000}
-        onClose={handleCloseSyncSuccess}
-      >
-        <Alert onClose={handleCloseSyncSuccess} severity="success" sx={{ width: '100%' }}>
-          {t('core:message.success.qdn_sync', {
-            coinType: coinType,
-            defaultValue: `Successfully synced ${coinType} address book to QDN`,
-            postProcess: 'capitalizeFirstChar',
-          })}
-        </Alert>
-      </Snackbar>
     </>
   );
 };
diff --git a/src/components/AddressBook/AddressBookTable.tsx b/src/components/AddressBook/AddressBookTable.tsx
index 6e02ec3..f70be27 100644
--- a/src/components/AddressBook/AddressBookTable.tsx
+++ b/src/components/AddressBook/AddressBookTable.tsx
@@ -1,41 +1,110 @@
 import React, { useState } from 'react';
 import {
-  Table,
-  TableBody,
-  TableContainer,
-  TableHead,
-  TableRow,
-  TablePagination,
-  Paper,
-  IconButton,
+  Avatar,
   Box,
+  IconButton,
+  MenuItem,
+  Paper,
+  Select,
   Tooltip,
-  useTheme,
+  Typography,
   useMediaQuery,
+  useTheme,
 } from '@mui/material';
-import { Edit, Delete, Send, ContentCopy } from '@mui/icons-material';
+import type { SelectChangeEvent } from '@mui/material/Select';
+import {
+  ContentCopy,
+  Delete,
+  Edit,
+  KeyboardArrowLeft,
+  KeyboardArrowRight,
+  PersonOutline,
+  Star,
+  StarBorder,
+} from '@mui/icons-material';
 import { useTranslation } from 'react-i18next';
-import { StyledTableCell } from '../../styles/page-styles';
 import { AddressBookEntry } from '../../utils/Types';
 import { copyToClipboard, cropString } from '../../common/functions';
 import { EMPTY_STRING, TIME_SECONDS_2 } from '../../common/constants';
+import {
+  getAddressBookAvatarColor,
+  getAddressBookAvatarSx,
+} from './avatarPalette';
 
 interface AddressBookTableProps {
   entries: AddressBookEntry[];
   onEdit: (entry: AddressBookEntry) => void;
   onDelete: (entry: AddressBookEntry) => void;
   onUse?: (entry: AddressBookEntry) => void;
+  onToggleFavorite?: (entry: AddressBookEntry) => void;
+  onReorder?: (sourceId: string, targetId: string) => void;
   page: number;
   rowsPerPage: number;
   onPageChange: (event: unknown, newPage: number) => void;
   onRowsPerPageChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
+const getInitial = (value: string) =>
+  value.trim().charAt(0).toUpperCase() || '?';
+
+const formatRange = (page: number, rowsPerPage: number, count: number) => {
+  if (count === 0) return '0-0 of 0';
+  const start = page * rowsPerPage + 1;
+  const end = Math.min(count, (page + 1) * rowsPerPage);
+  return `${start}-${end} of ${count}`;
+};
+
+const headerSx = {
+  color: 'text.secondary',
+  fontSize: { xs: 12, md: 11.8 },
+  fontWeight: 700,
+  letterSpacing: 0,
+  lineHeight: 1,
+  textTransform: 'uppercase',
+} as const;
+
+const cellTextSx = {
+  display: 'block',
+  fontSize: { xs: 14, md: 13 },
+  fontWeight: 600,
+  lineHeight: 1.12,
+  minWidth: 0,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+} as const;
+
+const tableRowHoverSx = {
+  overflow: 'hidden',
+  position: 'relative',
+  '&::before': {
+    background:
+      'linear-gradient(90deg, rgba(24,189,242,0.07), rgba(24,189,242,0.025))',
+    content: '""',
+    inset: 0,
+    opacity: 0,
+    pointerEvents: 'none',
+    position: 'absolute',
+    transition: 'opacity 520ms ease-out',
+    zIndex: 0,
+  },
+  '&:hover::before': {
+    opacity: 1,
+    transitionDuration: '90ms',
+  },
+  '& > *': {
+    position: 'relative',
+    zIndex: 1,
+  },
+} as const;
+
 export const AddressBookTable: React.FC<AddressBookTableProps> = ({
   entries,
   onEdit,
   onDelete,
   onUse,
+  onToggleFavorite,
+  onReorder,
   page,
   rowsPerPage,
   onPageChange,
@@ -45,8 +114,10 @@ export const AddressBookTable: React.FC<AddressBookTableProps> = ({
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
   const [copiedId, setCopiedId] = useState<string | null>(null);
-
-  // Calculate paginated entries
+  const [draggedId, setDraggedId] = useState<string | null>(null);
+  const [dragOverId, setDragOverId] = useState<string | null>(null);
+  const [suppressUseClick, setSuppressUseClick] = useState(false);
+  const maxPage = Math.max(0, Math.ceil(entries.length / rowsPerPage) - 1);
   const paginatedEntries = entries.slice(
     page * rowsPerPage,
     page * rowsPerPage + rowsPerPage
@@ -62,238 +133,611 @@ export const AddressBookTable: React.FC<AddressBookTableProps> = ({
     }
   };
 
-  // Responsive rendering for mobile
+  const handleRowsPerPageSelect = (event: SelectChangeEvent<string>) => {
+    onRowsPerPageChange?.({
+      target: { value: event.target.value },
+    } as React.ChangeEvent<HTMLInputElement>);
+  };
+
+  const handleUseEntry = (entry: AddressBookEntry) => {
+    if (suppressUseClick) return;
+    onUse?.(entry);
+  };
+
+  const handleUseKeyDown = (
+    event: React.KeyboardEvent<HTMLElement>,
+    entry: AddressBookEntry
+  ) => {
+    if (!onUse) return;
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleUseEntry(entry);
+    }
+  };
+
+  const handleDragStart = (
+    event: React.DragEvent<HTMLElement>,
+    entry: AddressBookEntry
+  ) => {
+    if (!onReorder) return;
+    setDraggedId(entry.id);
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData('text/plain', entry.id);
+  };
+
+  const handleDragOver = (
+    event: React.DragEvent<HTMLElement>,
+    entry: AddressBookEntry
+  ) => {
+    if (!onReorder || !draggedId || draggedId === entry.id) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+    setDragOverId(entry.id);
+  };
+
+  const handleDrop = (
+    event: React.DragEvent<HTMLElement>,
+    entry: AddressBookEntry
+  ) => {
+    if (!onReorder) return;
+    event.preventDefault();
+    const sourceId = draggedId || event.dataTransfer.getData('text/plain');
+    setDraggedId(null);
+    setDragOverId(null);
+
+    if (!sourceId || sourceId === entry.id) return;
+
+    setSuppressUseClick(true);
+    onReorder(sourceId, entry.id);
+    window.setTimeout(() => setSuppressUseClick(false), 0);
+  };
+
+  const handleDragEnd = () => {
+    setDraggedId(null);
+    setDragOverId(null);
+  };
+
+  const renderActions = (entry: AddressBookEntry) => (
+    <Box
+      sx={{
+        alignItems: 'center',
+        display: 'flex',
+        gap: { xs: 0.45, md: 0.55 },
+        justifyContent: 'flex-end',
+      }}
+    >
+      {onToggleFavorite && (
+        <Tooltip title={entry.favorite ? 'Remove favorite' : 'Favorite'} placement="top">
+          <IconButton
+            size="small"
+            onClick={(event) => {
+              event.stopPropagation();
+              onToggleFavorite(entry);
+            }}
+            aria-label={entry.favorite ? 'Remove favorite' : 'Favorite'}
+            sx={{
+              color: entry.favorite ? '#f6c84c' : 'text.secondary',
+              p: { xs: 0.45, md: 0.45 },
+              '&:hover': {
+                bgcolor: 'rgba(246,200,76,0.08)',
+                color: '#ffd76a',
+              },
+            }}
+          >
+            {entry.favorite ? (
+              <Star sx={{ fontSize: { xs: 19, md: 21 } }} />
+            ) : (
+              <StarBorder sx={{ fontSize: { xs: 19, md: 21 } }} />
+            )}
+          </IconButton>
+        </Tooltip>
+      )}
+      <Tooltip
+        title={t('core:address_book_edit', {
+          postProcess: 'capitalizeFirstChar',
+        })}
+        placement="top"
+      >
+        <IconButton
+          size="small"
+          onClick={(event) => {
+            event.stopPropagation();
+            onEdit(entry);
+          }}
+          aria-label={t('core:address_book_edit', {
+            postProcess: 'capitalizeFirstChar',
+          })}
+          sx={{
+            color: 'text.secondary',
+            p: { xs: 0.45, md: 0.45 },
+            '&:hover': {
+              bgcolor: 'rgba(24,189,242,0.08)',
+              color: 'primary.main',
+            },
+          }}
+        >
+          <Edit sx={{ fontSize: { xs: 19, md: 21 } }} />
+        </IconButton>
+      </Tooltip>
+      <Tooltip
+        title={t('core:address_book_delete', {
+          postProcess: 'capitalizeFirstChar',
+        })}
+        placement="top"
+      >
+        <IconButton
+          size="small"
+          onClick={(event) => {
+            event.stopPropagation();
+            onDelete(entry);
+          }}
+          aria-label={t('core:address_book_delete', {
+            postProcess: 'capitalizeFirstChar',
+          })}
+          sx={{
+            color: 'text.secondary',
+            p: { xs: 0.45, md: 0.45 },
+            '&:hover': {
+              bgcolor: 'rgba(255,91,105,0.08)',
+              color: 'error.main',
+            },
+          }}
+        >
+          <Delete sx={{ fontSize: { xs: 19, md: 21 } }} />
+        </IconButton>
+      </Tooltip>
+    </Box>
+  );
+
+  const footer = (
+    <Box
+      sx={{
+        alignItems: { xs: 'stretch', sm: 'center' },
+        bgcolor: 'rgba(0,8,16,0.1)',
+        borderTop: '1px solid rgba(116,158,180,0.075)',
+        display: 'grid',
+        gap: { xs: 1.5, md: 1.2 },
+        gridTemplateColumns: { xs: '1fr', md: '1fr auto auto' },
+        minHeight: { xs: 88, md: 52 },
+        px: { xs: 2, md: 1.4 },
+      }}
+    >
+      <Box sx={{ alignItems: 'center', display: 'flex', gap: 0.8 }}>
+        <PersonOutline
+          sx={{ color: 'primary.main', fontSize: { xs: 24, md: 17 } }}
+        />
+        <Typography
+          sx={{
+            color: 'text.secondary',
+            fontSize: { xs: 15, md: 13 },
+            fontWeight: 600,
+            letterSpacing: 0,
+          }}
+        >
+          <Box
+            component="span"
+            sx={{ color: 'primary.main', fontWeight: 700, mr: 0.45 }}
+          >
+            {entries.length}
+          </Box>
+          {entries.length === 1 ? 'address' : 'addresses'}
+        </Typography>
+      </Box>
+
+      <Box sx={{ alignItems: 'center', display: 'flex', gap: 1 }}>
+        <Typography
+          sx={{
+            color: 'text.secondary',
+            fontSize: { xs: 14, md: 12.5 },
+            fontWeight: 500,
+            letterSpacing: 0,
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {t('core:rows_per_page', {
+            postProcess: 'capitalizeFirstChar',
+          })}
+        </Typography>
+        <Select
+          value={String(rowsPerPage)}
+          onChange={handleRowsPerPageSelect}
+          sx={{
+            bgcolor: 'rgba(0,8,16,0.24)',
+            borderRadius: 1,
+            color: 'text.primary',
+            fontSize: { xs: 15, md: 13 },
+            fontWeight: 700,
+            height: { xs: 44, md: 34 },
+            minWidth: { xs: 86, md: 62 },
+            '& .MuiOutlinedInput-notchedOutline': {
+              borderColor: 'rgba(116,158,180,0.2)',
+            },
+            '&:hover .MuiOutlinedInput-notchedOutline': {
+              borderColor: 'rgba(24,189,242,0.5)',
+            },
+            '& .MuiSelect-icon': {
+              color: 'text.primary',
+              fontSize: 22,
+            },
+          }}
+        >
+          {[5, 10, 15].map((value) => (
+            <MenuItem key={value} value={String(value)}>
+              {value}
+            </MenuItem>
+          ))}
+        </Select>
+      </Box>
+
+      <Box
+        sx={{
+          alignItems: 'center',
+          display: 'flex',
+          gap: { xs: 1.3, md: 0.65 },
+          justifyContent: { xs: 'space-between', md: 'flex-end' },
+        }}
+      >
+        <Typography
+          sx={{
+            color: 'text.secondary',
+            fontSize: { xs: 14, md: 12.5 },
+            fontWeight: 500,
+            minWidth: { md: 68 },
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {formatRange(page, rowsPerPage, entries.length)}
+        </Typography>
+        <IconButton
+          disabled={page <= 0}
+          onClick={(event) => onPageChange(event, page - 1)}
+          sx={{
+            color: 'text.secondary',
+            p: { xs: 0.5, md: 0.35 },
+            '&:not(:disabled):hover': {
+              bgcolor: 'rgba(24,189,242,0.09)',
+              color: 'primary.main',
+            },
+          }}
+        >
+          <KeyboardArrowLeft sx={{ fontSize: { xs: 24, md: 21 } }} />
+        </IconButton>
+        <IconButton
+          disabled={page >= maxPage}
+          onClick={(event) => onPageChange(event, page + 1)}
+          sx={{
+            color: 'primary.main',
+            p: { xs: 0.5, md: 0.35 },
+            '&:disabled': { color: 'text.disabled' },
+            '&:not(:disabled):hover': {
+              bgcolor: 'rgba(24,189,242,0.09)',
+            },
+          }}
+        >
+          <KeyboardArrowRight sx={{ fontSize: { xs: 24, md: 21 } }} />
+        </IconButton>
+      </Box>
+    </Box>
+  );
+
   if (isMobile) {
     return (
-      <Box>
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-          {paginatedEntries.map((entry) => (
-          <Paper
-            key={entry.id}
-            elevation={2}
-            sx={{ p: 2, borderRadius: 2 }}
-          >
-            <Box sx={{ mb: 1 }}>
-              <Box sx={{ fontWeight: 700, color: 'text.primary', mb: 0.5 }}>
-                {entry.name}
-              </Box>
-              <Box
-                sx={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: 1,
-                  color: 'text.secondary',
-                  fontSize: '0.875rem'
-                }}
-              >
-                <span>{cropString(entry.address)}</span>
-                <IconButton
-                  size="small"
-                  onClick={() => handleCopy(entry.address, entry.id)}
-                  aria-label={t('core:address_book_copy', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
+      <Paper
+        elevation={0}
+        sx={{
+          bgcolor: 'rgba(2,16,27,0.54)',
+          backgroundImage:
+            'linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.006))',
+          border: '1px solid rgba(116,158,180,0.085)',
+          borderRadius: 1.35,
+          overflow: 'hidden',
+        }}
+      >
+        <Box sx={{ display: 'grid' }}>
+          {paginatedEntries.map((entry, index) => (
+            <Box
+              key={entry.id}
+              draggable={Boolean(onReorder)}
+              role={onUse ? 'button' : undefined}
+              tabIndex={onUse ? 0 : undefined}
+              onClick={onUse ? () => handleUseEntry(entry) : undefined}
+              onDragStart={(event) => handleDragStart(event, entry)}
+              onDragOver={(event) => handleDragOver(event, entry)}
+              onDrop={(event) => handleDrop(event, entry)}
+              onDragEnd={handleDragEnd}
+              onKeyDown={
+                onUse ? (event) => handleUseKeyDown(event, entry) : undefined
+              }
+              sx={{
+                ...tableRowHoverSx,
+                borderBottom:
+                  index === paginatedEntries.length - 1
+                    ? 'none'
+                    : '1px solid rgba(116,158,180,0.075)',
+                cursor: onReorder ? 'grab' : onUse ? 'pointer' : 'default',
+                display: 'grid',
+                gap: 1.1,
+                opacity: draggedId === entry.id ? 0.52 : 1,
+                p: 2,
+                transition: 'background-color 150ms ease, opacity 150ms ease',
+                ...(dragOverId === entry.id && {
+                  bgcolor: 'rgba(24,189,242,0.08)',
+                }),
+                '&:focus-visible': {
+                  outline: '1px solid rgba(24,189,242,0.48)',
+                  outlineOffset: -1,
+                },
+              }}
+            >
+              <Box sx={{ alignItems: 'center', display: 'flex', gap: 1.2 }}>
+                <Avatar
+                  sx={{
+                    ...getAddressBookAvatarSx(
+                      getAddressBookAvatarColor(
+                        `${entry.name}-${entry.address}`,
+                        page * rowsPerPage + index
+                      )
+                    ),
+                    fontSize: 16,
+                    fontWeight: 800,
+                    height: 42,
+                    width: 42,
+                  }}
                 >
-                  <ContentCopy fontSize="small" />
-                </IconButton>
+                  {getInitial(entry.name)}
+                </Avatar>
+                <Typography sx={{ ...cellTextSx, color: 'text.primary' }}>
+                  {entry.name || '-'}
+                </Typography>
+                {renderActions(entry)}
               </Box>
-              {entry.note && (
-                <Box sx={{ color: 'text.secondary', fontSize: '0.75rem', mt: 1 }}>
-                  {entry.note}
-                </Box>
-              )}
-            </Box>
-            <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
-              {onUse && (
-                <IconButton
-                  size="small"
-                  onClick={() => onUse(entry)}
-                  color="primary"
-                  aria-label={t('core:address_book_use', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
+              <Box sx={{ alignItems: 'center', display: 'flex', gap: 0.65 }}>
+                <Typography
+                  sx={{
+                    ...cellTextSx,
+                    color: 'text.secondary',
+                    fontWeight: 500,
+                  }}
                 >
-                  <Send fontSize="small" />
-                </IconButton>
-              )}
-              <IconButton
-                size="small"
-                onClick={() => onEdit(entry)}
-                color="primary"
-                aria-label={t('core:address_book_edit', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              >
-                <Edit fontSize="small" />
-              </IconButton>
-              <IconButton
-                size="small"
-                onClick={() => onDelete(entry)}
-                color="error"
-                aria-label={t('core:address_book_delete', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
+                  {cropString(entry.address, 22)}
+                </Typography>
+                <Tooltip
+                  title={
+                    copiedId === entry.id
+                      ? t('core:address_book_copied', {
+                          postProcess: 'capitalizeFirstChar',
+                        })
+                      : t('core:address_book_copy', {
+                          postProcess: 'capitalizeFirstChar',
+                        })
+                  }
+                  placement="top"
+                >
+                  <IconButton
+                    size="small"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      handleCopy(entry.address, entry.id);
+                    }}
+                    sx={{
+                      color:
+                        copiedId === entry.id
+                          ? 'success.main'
+                          : 'text.secondary',
+                      p: 0.35,
+                    }}
+                  >
+                    <ContentCopy sx={{ fontSize: 18 }} />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+              <Typography
+                sx={{
+                  ...cellTextSx,
+                  color: entry.note ? 'text.secondary' : 'text.disabled',
+                  fontWeight: 500,
+                }}
               >
-                <Delete fontSize="small" />
-              </IconButton>
+                {entry.note || '-'}
+              </Typography>
             </Box>
-          </Paper>
-        ))}
+          ))}
         </Box>
-        <TablePagination
-          component="div"
-          count={entries.length}
-          page={page}
-          onPageChange={onPageChange}
-          rowsPerPage={rowsPerPage}
-          onRowsPerPageChange={onRowsPerPageChange}
-          labelRowsPerPage={t('core:rows_per_page', {
-            postProcess: 'capitalizeFirstChar',
-          })}
-        />
-      </Box>
+        {footer}
+      </Paper>
     );
   }
 
-  // Desktop table view
   return (
-    <Box>
-      <TableContainer component={Paper}>
-        <Table>
-          <TableHead>
-            <TableRow>
-              <StyledTableCell sx={{ width: '15%' }}>
-                {t('core:address_book_name', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell sx={{ width: '25%' }}>
-                {t('core:address_book_address', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell sx={{ width: '40%' }}>
-                {t('core:address_book_note', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="right" sx={{ width: '20%' }}>
-                {t('core:address_book_actions', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {paginatedEntries.map((entry) => (
-            <TableRow
+    <Paper
+      elevation={0}
+      sx={{
+        bgcolor: 'rgba(2,16,27,0.54)',
+        backgroundImage:
+          'linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.006))',
+        border: '1px solid rgba(116,158,180,0.085)',
+        borderRadius: 1.35,
+        boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.018)',
+        overflow: 'hidden',
+      }}
+    >
+      <Box sx={{ overflowX: 'auto', scrollbarGutter: 'stable' }}>
+        <Box sx={{ minWidth: 730 }}>
+          <Box
+            aria-hidden
+            sx={{
+              alignItems: 'center',
+              bgcolor: 'rgba(0,8,16,0.08)',
+              borderBottom: '1px solid rgba(116,158,180,0.075)',
+              display: 'grid',
+              gap: 1.2,
+              gridTemplateColumns:
+                'minmax(120px, 0.86fr) minmax(180px, 1fr) minmax(198px, 1.08fr) minmax(124px, 0.56fr)',
+              minHeight: 44,
+              px: 1.4,
+            }}
+          >
+            <Typography sx={headerSx}>
+              {t('core:address_book_name', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+            </Typography>
+            <Typography sx={headerSx}>
+              {t('core:address_book_address', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+            </Typography>
+            <Typography sx={headerSx}>
+              {t('core:address_book_note', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+            </Typography>
+            <Typography sx={{ ...headerSx, textAlign: 'right' }}>
+              {t('core:address_book_actions', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+            </Typography>
+          </Box>
+
+          {paginatedEntries.map((entry, index) => (
+            <Box
               key={entry.id}
-              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
+              draggable={Boolean(onReorder)}
+              role={onUse ? 'button' : undefined}
+              tabIndex={onUse ? 0 : undefined}
+              onClick={onUse ? () => handleUseEntry(entry) : undefined}
+              onDragStart={(event) => handleDragStart(event, entry)}
+              onDragOver={(event) => handleDragOver(event, entry)}
+              onDrop={(event) => handleDrop(event, entry)}
+              onDragEnd={handleDragEnd}
+              onKeyDown={
+                onUse ? (event) => handleUseKeyDown(event, entry) : undefined
+              }
+              sx={{
+                ...tableRowHoverSx,
+                alignItems: 'center',
+                borderBottom:
+                  index === paginatedEntries.length - 1
+                    ? 'none'
+                    : '1px solid rgba(116,158,180,0.065)',
+                cursor: onReorder ? 'grab' : onUse ? 'pointer' : 'default',
+                display: 'grid',
+                gap: 1.2,
+                gridTemplateColumns:
+                  'minmax(120px, 0.86fr) minmax(180px, 1fr) minmax(198px, 1.08fr) minmax(124px, 0.56fr)',
+                minHeight: 54,
+                opacity: draggedId === entry.id ? 0.52 : 1,
+                px: 1.4,
+                transition: 'background-color 150ms ease, opacity 150ms ease',
+                ...(dragOverId === entry.id && {
+                  bgcolor: 'rgba(24,189,242,0.08)',
+                }),
+                '&:focus-visible': {
+                  outline: '1px solid rgba(24,189,242,0.48)',
+                  outlineOffset: -1,
+                },
+              }}
             >
-              <StyledTableCell component="th" scope="row">
-                 <Tooltip title={entry.name || EMPTY_STRING} placement="top">
-                  <span>{entry.name ? cropString(entry.name, 20) : '-'}</span>
+              <Box
+                sx={{
+                  alignItems: 'center',
+                  display: 'flex',
+                  gap: 0.85,
+                  minWidth: 0,
+                }}
+              >
+                <Avatar
+                  sx={{
+                    ...getAddressBookAvatarSx(
+                      getAddressBookAvatarColor(
+                        `${entry.name}-${entry.address}`,
+                        page * rowsPerPage + index
+                      )
+                    ),
+                    fontSize: 13,
+                    fontWeight: 800,
+                    height: 28,
+                    width: 28,
+                  }}
+                >
+                  {getInitial(entry.name)}
+                </Avatar>
+                <Tooltip title={entry.name || EMPTY_STRING} placement="top">
+                  <Typography sx={{ ...cellTextSx, color: 'text.primary' }}>
+                    {entry.name || '-'}
+                  </Typography>
                 </Tooltip>
-              </StyledTableCell>
-              <StyledTableCell>
-                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                  <Tooltip title={entry.address} placement="top">
-                    <span>{cropString(entry.address)}</span>
-                  </Tooltip>
-                  <Tooltip
-                    title={
-                      copiedId === entry.id
-                        ? t('core:address_book_copied', {
-                            postProcess: 'capitalizeFirstChar',
-                          })
-                        : t('core:address_book_copy', {
-                            postProcess: 'capitalizeFirstChar',
-                          })
-                    }
-                    placement="top"
+              </Box>
+
+              <Box
+                sx={{
+                  alignItems: 'center',
+                  display: 'flex',
+                  gap: 1,
+                  minWidth: 0,
+                }}
+              >
+                <Tooltip title={entry.address} placement="top">
+                  <Typography
+                    sx={{
+                      ...cellTextSx,
+                      color: 'text.secondary',
+                      fontWeight: 500,
+                    }}
                   >
-                    <IconButton
-                      size="small"
-                      onClick={() => handleCopy(entry.address, entry.id)}
-                      sx={{
-                        color: copiedId === entry.id ? 'success.main' : 'inherit',
-                      }}
-                    >
-                      <ContentCopy fontSize="small" />
-                    </IconButton>
-                  </Tooltip>
-                </Box>
-              </StyledTableCell>
-              <StyledTableCell>
-                <Tooltip title={entry.note || EMPTY_STRING} placement="top">
-                  <span>{entry.note ? cropString(entry.note, 50) : '-'}</span>
+                    {cropString(entry.address, 24)}
+                  </Typography>
                 </Tooltip>
-              </StyledTableCell>
-              <StyledTableCell align="right">
-                <Box sx={{ display: 'flex', gap: 0.5, justifyContent: 'flex-end' }}>
-                  {onUse && (
-                    <Tooltip
-                      title={t('core:address_book_use', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                      placement="top"
-                    >
-                      <IconButton
-                        size="small"
-                        onClick={() => onUse(entry)}
-                        color="primary"
-                      >
-                        <Send fontSize="small" />
-                      </IconButton>
-                    </Tooltip>
-                  )}
-                  <Tooltip
-                    title={t('core:address_book_edit', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                    placement="top"
-                  >
-                    <IconButton
-                      size="small"
-                      onClick={() => onEdit(entry)}
-                      color="primary"
-                    >
-                      <Edit fontSize="small" />
-                    </IconButton>
-                  </Tooltip>
-                  <Tooltip
-                    title={t('core:address_book_delete', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                    placement="top"
+                <Tooltip
+                  title={
+                    copiedId === entry.id
+                      ? t('core:address_book_copied', {
+                          postProcess: 'capitalizeFirstChar',
+                        })
+                      : t('core:address_book_copy', {
+                          postProcess: 'capitalizeFirstChar',
+                        })
+                  }
+                  placement="top"
+                >
+                  <IconButton
+                    size="small"
+                    onClick={(event) => {
+                      event.stopPropagation();
+                      handleCopy(entry.address, entry.id);
+                    }}
+                    sx={{
+                      color:
+                        copiedId === entry.id
+                          ? 'success.main'
+                          : 'text.secondary',
+                      flexShrink: 0,
+                      p: 0.35,
+                      '&:hover': { color: 'primary.main' },
+                    }}
                   >
-                    <IconButton
-                      size="small"
-                      onClick={() => onDelete(entry)}
-                      color="error"
-                    >
-                      <Delete fontSize="small" />
-                    </IconButton>
-                  </Tooltip>
-                </Box>
-              </StyledTableCell>
-            </TableRow>
+                    <ContentCopy sx={{ fontSize: 18 }} />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+
+              <Tooltip title={entry.note || EMPTY_STRING} placement="top">
+                <Typography
+                  sx={{
+                    ...cellTextSx,
+                    color: entry.note ? 'text.secondary' : 'text.disabled',
+                    fontWeight: 500,
+                  }}
+                >
+                  {entry.note ? cropString(entry.note, 34) : '-'}
+                </Typography>
+              </Tooltip>
+              {renderActions(entry)}
+            </Box>
           ))}
-        </TableBody>
-      </Table>
-      <TablePagination
-        rowsPerPageOptions={[5, 10, 15]}
-        component="div"
-        count={entries.length}
-        rowsPerPage={rowsPerPage}
-        page={page}
-        onPageChange={onPageChange}
-        onRowsPerPageChange={onRowsPerPageChange}
-        labelRowsPerPage={t('core:rows_per_page', {
-          postProcess: 'capitalizeFirstChar',
-        })}
-      />
-    </TableContainer>
-    </Box>
+        </Box>
+      </Box>
+      {footer}
+    </Paper>
   );
 };
diff --git a/src/components/AddressBook/AddressFormDialog.tsx b/src/components/AddressBook/AddressFormDialog.tsx
index ad9e55c..1f1a20c 100644
--- a/src/components/AddressBook/AddressFormDialog.tsx
+++ b/src/components/AddressBook/AddressFormDialog.tsx
@@ -1,23 +1,113 @@
-import React, { useState, useEffect } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import {
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  TextField,
-  Button,
   Box,
+  Button,
   CircularProgress,
+  ClickAwayListener,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
   InputAdornment,
+  TextField,
+  Typography,
 } from '@mui/material';
+import Check from '@mui/icons-material/Check';
+import CheckCircleOutline from '@mui/icons-material/CheckCircleOutline';
+import Close from '@mui/icons-material/Close';
+import PersonOutline from '@mui/icons-material/PersonOutline';
 import { Coin } from 'qapp-core';
 import { useTranslation } from 'react-i18next';
-import { DialogGeneral } from '../../styles/page-styles';
+import {
+  DialogGeneral,
+  FAST_DIALOG_TRANSITION_MS,
+  Transition,
+} from '../../styles/page-styles';
 import { AddressBookEntry } from '../../utils/Types';
+import { getAddressBook } from '../../utils/addressBookStorage';
 import { validateAddress } from '../../utils/addressValidation';
-import { ADDRESSBOOK_NAME_LENGTH, ADDRESSBOOK_NOTE_LENGTH, EMPTY_STRING } from '../../common/constants';
+import {
+  ADDRESSBOOK_NAME_LENGTH,
+  ADDRESSBOOK_NOTE_LENGTH,
+  EMPTY_STRING,
+} from '../../common/constants';
+import {
+  searchQortalNames,
+  type QortalNameSearchResult,
+} from '../../utils/qortalNodeApi';
+import coinLogoARRR from '../../assets/arrr.png';
+import coinLogoBTC from '../../assets/btc.png';
+import coinLogoDGB from '../../assets/dgb.png';
+import coinLogoDOGE from '../../assets/doge.png';
+import coinLogoLTC from '../../assets/ltc.png';
+import coinLogoQORT from '../../assets/qort.png';
+import coinLogoRVN from '../../assets/rvn.png';
 
-const ADDRESS_LOOKUP_DEBOUNCE_MS = 1000;
+const ADDRESS_LOOKUP_DEBOUNCE_MS = 350;
 const ADDRESS_MIN_LENGTH = 3;
+const QORT_ADDRESS_PATTERN = /^Q[1-9A-HJ-NP-Za-km-z]{33}$/;
+
+type QortResolvedContact = {
+  address: string;
+  name: string;
+};
+
+const coinLogos: Partial<Record<Coin, string>> = {
+  [Coin.ARRR]: coinLogoARRR,
+  [Coin.BTC]: coinLogoBTC,
+  [Coin.DGB]: coinLogoDGB,
+  [Coin.DOGE]: coinLogoDOGE,
+  [Coin.LTC]: coinLogoLTC,
+  [Coin.QORT]: coinLogoQORT,
+  [Coin.RVN]: coinLogoRVN,
+};
+
+const fieldLabelSx = {
+  color: 'rgba(228,238,248,0.9)',
+  fontSize: { xs: 14.5, sm: 15 },
+  fontWeight: 700,
+  letterSpacing: 0,
+  lineHeight: 1.2,
+  mb: 0.85,
+} as const;
+
+const formFieldSx = {
+  '& .MuiOutlinedInput-root': {
+    bgcolor: 'rgba(0,8,16,0.2)',
+    borderRadius: 1.35,
+    minHeight: { xs: 54, sm: 56 },
+    px: { xs: 1.2, sm: 1.35 },
+    '& fieldset': {
+      borderColor: 'rgba(116,158,180,0.16)',
+    },
+    '&:hover fieldset': {
+      borderColor: 'rgba(116,158,180,0.3)',
+    },
+    '&.Mui-focused fieldset': {
+      borderColor: 'rgba(24,189,242,0.62)',
+      borderWidth: 1,
+    },
+  },
+  '& .MuiOutlinedInput-input': {
+    color: 'text.primary',
+    fontSize: { xs: 15.5, sm: 16 },
+    fontWeight: 500,
+    py: 0,
+    '&::placeholder': {
+      color: 'text.secondary',
+      fontWeight: 400,
+      opacity: 0.58,
+    },
+  },
+  '& .MuiFormHelperText-root': {
+    color: 'text.secondary',
+    fontSize: 12.5,
+    fontWeight: 600,
+    lineHeight: 1.25,
+    ml: 1.2,
+    mt: 0.85,
+  },
+} as const;
 
 interface AddressFormDialogProps {
   open: boolean;
@@ -28,6 +118,8 @@ interface AddressFormDialogProps {
   prefillName?: string;
   prefillAddress?: string;
   saveError?: string;
+  disableRestoreFocus?: boolean;
+  onExited?: () => void;
 }
 
 export const AddressFormDialog: React.FC<AddressFormDialogProps> = ({
@@ -39,8 +131,11 @@ export const AddressFormDialog: React.FC<AddressFormDialogProps> = ({
   prefillName,
   prefillAddress,
   saveError,
+  disableRestoreFocus,
+  onExited,
 }) => {
   const { t } = useTranslation(['core']);
+  const coinLogo = coinLogos[coinType] || coinLogoQORT;
 
   const [name, setName] = useState(EMPTY_STRING);
   const [address, setAddress] = useState(EMPTY_STRING);
@@ -52,20 +147,54 @@ export const AddressFormDialog: React.FC<AddressFormDialogProps> = ({
 
   // QORT-specific state for username resolution
   const [addressValidating, setAddressValidating] = useState(false);
+  const [addressConfirmed, setAddressConfirmed] = useState(false);
+  const [addressLookupEnabled, setAddressLookupEnabled] = useState(false);
+  const [saveConfirmPromptActive, setSaveConfirmPromptActive] = useState(false);
+  const [nameLookupEnabled, setNameLookupEnabled] = useState(false);
+  const [nameSearchOpen, setNameSearchOpen] = useState(false);
+  const [nameSuggestions, setNameSuggestions] = useState<
+    QortalNameSearchResult[]
+  >([]);
+  const [qortResolvedContact, setQortResolvedContact] =
+    useState<QortResolvedContact | null>(null);
 
   const isEditMode = !!entry;
+  const existingQortContacts = useMemo(() => {
+    if (coinType !== Coin.QORT || !open) return [];
+    return getAddressBook(Coin.QORT).filter(
+      (contact) => contact.id !== entry?.id
+    );
+  }, [coinType, entry?.id, open]);
+
+  const isNameSuggestionAlreadySaved = (
+    suggestion: QortalNameSearchResult
+  ) => {
+    const suggestionName = suggestion.name.trim().toLowerCase();
+    const suggestionOwner = (suggestion.owner || EMPTY_STRING).trim();
+
+    return existingQortContacts.some(
+      (contact) =>
+        contact.address.trim() === suggestionOwner ||
+        contact.name.trim().toLowerCase() === suggestionName
+    );
+  };
 
   // Load entry data when editing
   useEffect(() => {
     if (open) {
+      const nextName = entry ? entry.name : prefillName || EMPTY_STRING;
+      const nextAddress = entry
+        ? entry.address
+        : prefillAddress || EMPTY_STRING;
+
       if (entry) {
-        setName(entry.name);
-        setAddress(entry.address);
+        setName(nextName);
+        setAddress(nextAddress);
         setNote(entry.note);
       } else {
         // Reset form for new entry or use prefill data
-        setName(prefillName || EMPTY_STRING);
-        setAddress(prefillAddress || EMPTY_STRING);
+        setName(nextName);
+        setAddress(nextAddress);
         setNote(EMPTY_STRING);
       }
       // Clear errors when dialog opens
@@ -73,49 +202,151 @@ export const AddressFormDialog: React.FC<AddressFormDialogProps> = ({
       setAddressError(EMPTY_STRING);
       setNoteError(EMPTY_STRING);
       setAddressValidating(false);
+      setAddressLookupEnabled(false);
+      setAddressConfirmed(!!entry);
+      setSaveConfirmPromptActive(false);
+      setNameLookupEnabled(false);
+      setNameSearchOpen(false);
+      setNameSuggestions([]);
+      setQortResolvedContact(
+        coinType === Coin.QORT && nextName.trim() && nextAddress.trim()
+          ? {
+              address: nextAddress.trim(),
+              name: nextName.trim(),
+            }
+          : null
+      );
     }
-  }, [open, entry, prefillName, prefillAddress]);
+  }, [open, entry, prefillName, prefillAddress, coinType]);
 
-  // QORT username resolution - validate and auto-fill address from username
+  // QORT name search - lets users choose a registered name and then confirm its owner address.
   useEffect(() => {
-    if (coinType !== Coin.QORT || !name || name.length < ADDRESS_MIN_LENGTH) {
+    const query = name.trim();
+
+    if (
+      coinType !== Coin.QORT ||
+      !nameLookupEnabled ||
+      !query ||
+      query.length < ADDRESS_MIN_LENGTH
+    ) {
+      setNameSuggestions([]);
+      setNameSearchOpen(false);
+      setAddressValidating(false);
       return;
     }
 
     setAddressValidating(true);
+    let cancelled = false;
     const controller = new AbortController();
 
     const timeout = setTimeout(async () => {
       try {
-        const nameRes = await fetch(`/names/${encodeURIComponent(name)}`, {
-          signal: controller.signal,
-        }).then(async (r) => {
-          if (!r.ok) {
-            console.warn(`No name found: ${name}`);
-            return { error: 'Name not found' };
-          }
-          return r.json();
+        const results = await searchQortalNames(query, 10, controller.signal);
+
+        if (cancelled) return;
+        setNameSuggestions(results);
+        setNameSearchOpen(results.length > 0);
+        setNameError(
+          results.length === 0
+            ? t('core:message.error.recipient_not_found', {
+                postProcess: 'capitalizeFirstChar',
+              })
+            : EMPTY_STRING
+        );
+      } catch (err: any) {
+        if (!cancelled && err.name !== 'AbortError') {
+          console.error('Name lookup failed:', err.message);
+          setNameSuggestions([]);
+          setNameSearchOpen(false);
+          setNameError(
+            t('core:message.error.recipient_lookup_failed', {
+              postProcess: 'capitalizeFirstChar',
+            })
+          );
+        }
+      } finally {
+        if (!cancelled) {
+          setAddressValidating(false);
+        }
+      }
+    }, ADDRESS_LOOKUP_DEBOUNCE_MS);
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timeout);
+      controller.abort();
+    };
+  }, [name, coinType, nameLookupEnabled, t]);
+
+  useEffect(() => {
+    const addressQuery = address.trim();
+
+    if (
+      coinType !== Coin.QORT ||
+      !addressLookupEnabled ||
+      !addressQuery ||
+      !QORT_ADDRESS_PATTERN.test(addressQuery)
+    ) {
+      if (addressLookupEnabled) {
+        setAddressValidating(false);
+      }
+      return;
+    }
+
+    setAddressValidating(true);
+    let cancelled = false;
+
+    const timeout = setTimeout(async () => {
+      try {
+        if (typeof qortalRequest !== 'function') return;
+
+        const primaryName = await qortalRequest({
+          action: 'GET_PRIMARY_NAME',
+          address: addressQuery,
         });
 
-        // If name was found, update address field with the owner address
-        if (!nameRes?.error && nameRes?.owner) {
-          console.log(`QORT name resolved: ${name} -> ${nameRes.owner}`);
-          setAddress(nameRes.owner);
-          setAddressError(EMPTY_STRING);
+        if (cancelled) return;
+
+        if (typeof primaryName === 'string' && primaryName.trim()) {
+          const resolvedName = primaryName.trim();
+          setName(resolvedName);
+          setNameError(EMPTY_STRING);
+          setQortResolvedContact({
+            address: addressQuery,
+            name: resolvedName,
+          });
+        } else {
+          setName(EMPTY_STRING);
+          setNameError(
+            t('core:message.error.recipient_not_found', {
+              postProcess: 'capitalizeFirstChar',
+            })
+          );
+          setQortResolvedContact(null);
         }
       } catch (err: any) {
-        if (err.name === 'AbortError') return;
-        console.error('Name lookup failed:', err.message);
+        if (!cancelled) {
+          console.error('Address owner lookup failed:', err.message);
+          setName(EMPTY_STRING);
+          setNameError(
+            t('core:message.error.recipient_lookup_failed', {
+              postProcess: 'capitalizeFirstChar',
+            })
+          );
+          setQortResolvedContact(null);
+        }
       } finally {
-        setAddressValidating(false);
+        if (!cancelled) {
+          setAddressValidating(false);
+        }
       }
     }, ADDRESS_LOOKUP_DEBOUNCE_MS);
 
     return () => {
+      cancelled = true;
       clearTimeout(timeout);
-      controller.abort();
     };
-  }, [name, coinType, t]);
+  }, [address, addressLookupEnabled, coinType, t]);
 
   const validateName = (value: string): boolean => {
     if (!value.trim()) {
@@ -156,6 +387,15 @@ export const AddressFormDialog: React.FC<AddressFormDialogProps> = ({
       );
       return false;
     }
+    if (coinType === Coin.QORT && !QORT_ADDRESS_PATTERN.test(value.trim())) {
+      setAddressError(
+        t('core:address_book_address_invalid', {
+          coinType: coinType,
+          postProcess: 'capitalizeFirstChar',
+        })
+      );
+      return false;
+    }
     setAddressError(EMPTY_STRING);
     return true;
   };
@@ -176,13 +416,31 @@ export const AddressFormDialog: React.FC<AddressFormDialogProps> = ({
 
   const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
+    setNameLookupEnabled(true);
     setName(value);
+    if (coinType === Coin.QORT) {
+      setAddressLookupEnabled(false);
+      setAddress(EMPTY_STRING);
+      setAddressConfirmed(false);
+      setAddressError(EMPTY_STRING);
+      setQortResolvedContact(null);
+    }
     validateName(value);
   };
 
   const handleAddressChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value.trim();
+    if (coinType === Coin.QORT) {
+      setName(EMPTY_STRING);
+      setNameError(EMPTY_STRING);
+      setNameLookupEnabled(false);
+      setNameSearchOpen(false);
+      setNameSuggestions([]);
+      setAddressLookupEnabled(true);
+      setQortResolvedContact(null);
+    }
     setAddress(value);
+    setAddressConfirmed(false);
     validateAddressField(value);
   };
 
@@ -208,135 +466,595 @@ export const AddressFormDialog: React.FC<AddressFormDialogProps> = ({
     }
   };
 
+  const handleSelectNameSuggestion = (suggestion: QortalNameSearchResult) => {
+    const resolvedAddress = suggestion.owner ?? EMPTY_STRING;
+    setNameLookupEnabled(false);
+    setAddressLookupEnabled(false);
+    setName(suggestion.name);
+    setAddress(resolvedAddress);
+    setAddressConfirmed(false);
+    setQortResolvedContact({
+      address: resolvedAddress.trim(),
+      name: suggestion.name.trim(),
+    });
+    setNameSearchOpen(false);
+    setNameSuggestions([]);
+    validateName(suggestion.name);
+    validateAddressField(resolvedAddress);
+  };
+
+  const handleConfirmAddress = () => {
+    if (
+      coinType === Coin.QORT &&
+      (!qortResolvedContact ||
+        qortResolvedContact.address !== address.trim() ||
+        qortResolvedContact.name !== name.trim())
+    ) {
+      setAddressConfirmed(false);
+      setAddressError(
+        t('core:message.error.recipient_not_found', {
+          postProcess: 'capitalizeFirstChar',
+        })
+      );
+      return;
+    }
+
+    if (validateAddressField(address)) {
+      setAddressConfirmed(true);
+      setSaveConfirmPromptActive(false);
+    }
+  };
+
+  const isQortResolvedContactCurrent =
+    coinType !== Coin.QORT ||
+    (!!qortResolvedContact &&
+      qortResolvedContact.address === address.trim() &&
+      qortResolvedContact.name === name.trim());
   const isFormValid =
     name.trim() !== EMPTY_STRING &&
     address.trim() !== EMPTY_STRING &&
     !nameError &&
     !addressError &&
     !noteError &&
-    (coinType === Coin.QORT ? !addressValidating : true);
+    (coinType === Coin.QORT
+      ? !addressValidating && addressConfirmed && isQortResolvedContactCurrent
+      : true);
+  const shouldGlowAddressConfirmText =
+    coinType === Coin.QORT &&
+    !addressConfirmed &&
+    !addressError &&
+    saveConfirmPromptActive;
 
   return (
-    <DialogGeneral open={open} onClose={onClose} maxWidth="sm" fullWidth>
-      <DialogTitle sx={{textAlign: 'center'}} variant="h4">
-        {isEditMode
-          ? t('core:address_book_edit', {
-              postProcess: 'capitalizeFirstChar',
-            })
-          : t('core:address_book_add_new', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-      </DialogTitle>
-      <DialogContent>
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2, mt: 1 }}>
-          {/* Name Field */}
-          <TextField
-            required
-            fullWidth
-            label={t('core:address_book_name', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            value={name}
-            onChange={handleNameChange}
-            error={!!nameError}
-            helperText={
-              nameError || (coinType === Coin.QORT && addressValidating
-                ? t('core:message.generic.validating')
-                : (
-                  <Box
-                    component="span"
-                    sx={{ display: 'flex', justifyContent: 'space-between' }}
-                  >
-                    <span></span>
-                    <span style={{ fontSize: '0.75rem' }}>{name.length}/{ADDRESSBOOK_NAME_LENGTH}</span>
-                  </Box>
-                ))
-            }
-            slotProps={{
-              htmlInput: {
-                maxLength: ADDRESSBOOK_NAME_LENGTH,
-              },
-              input: {
-                endAdornment: coinType === Coin.QORT && addressValidating ? (
-                  <InputAdornment position="end">
-                    <CircularProgress size={20} />
-                  </InputAdornment>
-                ) : undefined,
-              },
+    <DialogGeneral
+      open={open}
+      onClose={onClose}
+      maxWidth={false}
+      fullWidth
+      disableScrollLock
+      disableRestoreFocus={disableRestoreFocus}
+      slots={{ transition: Transition }}
+      slotProps={{
+        transition: {
+          onExited,
+          timeout: FAST_DIALOG_TRANSITION_MS,
+        },
+        paper: {
+          sx: {
+            bgcolor: 'rgba(3, 17, 29, 0.985)',
+            backgroundImage:
+              'radial-gradient(circle at 13% 6%, rgba(24,189,242,0.13), transparent 30%), linear-gradient(180deg, rgba(5,24,39,0.99) 0%, rgba(3,13,23,0.995) 100%)',
+            border: '1px solid rgba(91,132,158,0.28)',
+            borderRadius: 2,
+            boxShadow:
+              '0 28px 72px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04)',
+            overflow: 'hidden',
+            width: 'min(592px, calc(100vw - 24px))',
+          },
+        },
+      }}
+    >
+      <DialogTitle
+        sx={{
+          alignItems: 'center',
+          bgcolor: 'transparent',
+          backgroundColor: 'transparent',
+          backgroundImage: 'none',
+          borderBottom: 'none',
+          display: 'flex',
+          minHeight: { xs: 76, sm: 78 },
+          px: { xs: 2.35, sm: 2.55 },
+          py: 0,
+          position: 'relative',
+        }}
+      >
+        <Box
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            flexGrow: 1,
+            gap: { xs: 1.45, sm: 1.65 },
+            minWidth: 0,
+          }}
+        >
+          <Box
+            component="img"
+            src={coinLogo}
+            alt=""
+            sx={{
+              filter: 'drop-shadow(0 0 16px rgba(24,189,242,0.45))',
+              height: { xs: 34, sm: 36 },
+              width: { xs: 34, sm: 36 },
             }}
           />
+          <Typography
+            sx={{
+              color: 'text.primary',
+              fontSize: { xs: 18, sm: 19 },
+              fontWeight: 700,
+              letterSpacing: 0,
+              lineHeight: 1,
+              minWidth: 0,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {isEditMode
+              ? t('core:address_book_edit', {
+                  postProcess: 'capitalizeFirstChar',
+                })
+              : t('core:address_book_add_new', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+          </Typography>
+        </Box>
+        <IconButton
+          aria-label={t('core:action.close', {
+            postProcess: 'capitalizeFirstChar',
+          })}
+          onClick={onClose}
+          sx={{
+            color: 'text.secondary',
+            ml: 1.2,
+            p: 0.35,
+            '&:hover': {
+              bgcolor: 'rgba(116,158,180,0.08)',
+              color: 'text.primary',
+            },
+            '& svg': {
+              fontSize: 25,
+            },
+          }}
+        >
+          <Close />
+        </IconButton>
+      </DialogTitle>
 
-          {/* Address Field */}
-          <TextField
-            required
-            fullWidth
-            label={t('core:address_book_address', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            value={address}
-            onChange={handleAddressChange}
-            error={!!addressError}
-            helperText={addressError}
-          />
-
-          {/* Note Field */}
-          <TextField
-            fullWidth
-            label={t('core:address_book_note', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            value={note}
-            onChange={handleNoteChange}
-            error={!!noteError}
-            helperText={
-              noteError || (
+      <DialogContent
+        sx={{
+          overflow: 'visible',
+          px: { xs: '20px !important', sm: '28px !important' },
+          pb: { xs: '20px !important', sm: '22px !important' },
+          pt: { xs: '0px !important', sm: '2px !important' },
+        }}
+      >
+        <Box sx={{ display: 'grid', gap: { xs: 2.25, sm: 2.45 } }}>
+          <Box sx={{ position: 'relative' }}>
+            <Typography sx={fieldLabelSx}>
+              {t('core:address_book_name', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+            </Typography>
+            <TextField
+              required
+              fullWidth
+              aria-label={t('core:address_book_name', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+              placeholder="Enter name"
+              value={name}
+              onChange={handleNameChange}
+              error={!!nameError}
+              helperText={nameError || EMPTY_STRING}
+              slotProps={{
+                htmlInput: {
+                  maxLength: ADDRESSBOOK_NAME_LENGTH,
+                },
+                input: {
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <PersonOutline
+                        sx={{ color: 'text.secondary', fontSize: 22 }}
+                      />
+                    </InputAdornment>
+                  ),
+                  endAdornment:
+                    coinType === Coin.QORT && addressValidating ? (
+                      <InputAdornment position="end">
+                        <CircularProgress size={16} />
+                      </InputAdornment>
+                    ) : undefined,
+                },
+              }}
+              sx={formFieldSx}
+            />
+            {coinType === Coin.QORT && nameSearchOpen && (
+              <ClickAwayListener
+                onClickAway={() => setNameSearchOpen(false)}
+              >
                 <Box
-                  component="span"
-                  sx={{ display: 'flex', justifyContent: 'space-between' }}
+                  sx={{
+                    bgcolor: 'rgba(5, 16, 27, 0.98)',
+                    border: '1px solid rgba(116,158,180,0.2)',
+                    borderRadius: 1,
+                    boxShadow: '0 18px 40px rgba(0,0,0,0.32)',
+                    left: 0,
+                    maxHeight: 216,
+                    overflowY: 'auto',
+                    position: 'absolute',
+                    right: 0,
+                    top: 'calc(100% + 6px)',
+                    zIndex: 1500,
+                  }}
                 >
-                  <span></span>
-                  <span style={{ fontSize: '0.75rem' }}>{note.length}/{ADDRESSBOOK_NOTE_LENGTH}</span>
+                  {nameSuggestions.map((suggestion) => {
+                    const alreadySaved =
+                      isNameSuggestionAlreadySaved(suggestion);
+
+                    return (
+                      <Box
+                        component="button"
+                        type="button"
+                        key={`${suggestion.name}-${suggestion.owner}`}
+                        onClick={() => handleSelectNameSuggestion(suggestion)}
+                        sx={{
+                          alignItems: 'center',
+                          appearance: 'none',
+                          bgcolor: 'transparent',
+                          border: 0,
+                          color: 'text.primary',
+                          cursor: 'pointer',
+                          display: 'grid',
+                          font: 'inherit',
+                          gap: 0.35,
+                          justifyItems: 'start',
+                          px: 2,
+                          py: 1.1,
+                          textAlign: 'left',
+                          width: '100%',
+                          '&:hover': {
+                            bgcolor: 'rgba(24,189,242,0.08)',
+                          },
+                        }}
+                      >
+                        <Typography sx={{ fontSize: 14, fontWeight: 700 }}>
+                          {suggestion.name}
+                          {alreadySaved ? (
+                            <Box
+                              component="span"
+                              sx={{
+                                color: 'error.main',
+                                fontSize: 12,
+                                fontWeight: 700,
+                                ml: 0.75,
+                              }}
+                            >
+                              (already in list)
+                            </Box>
+                          ) : null}
+                        </Typography>
+                        <Typography
+                          sx={{
+                            color: 'text.secondary',
+                            fontSize: 12,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            width: '100%',
+                          }}
+                        >
+                          {suggestion.owner}
+                        </Typography>
+                      </Box>
+                    );
+                  })}
                 </Box>
-              )
-            }
-            multiline
-            rows={5}
-            slotProps={{
-              htmlInput: {
-                maxLength: ADDRESSBOOK_NOTE_LENGTH,
-              },
-            }}
-          />
+              </ClickAwayListener>
+            )}
+          </Box>
+
+          {coinType === Coin.QORT && (
+            <Box sx={{ alignItems: 'center', display: 'flex', gap: 2 }}>
+              <Box
+                sx={{
+                  bgcolor: 'rgba(116,158,180,0.1)',
+                  flex: 1,
+                  height: '1px',
+                }}
+              />
+              <Typography
+                sx={{
+                  color: 'text.secondary',
+                  fontSize: 12,
+                  fontWeight: 700,
+                  letterSpacing: 0,
+                }}
+              >
+                OR
+              </Typography>
+              <Box
+                sx={{
+                  bgcolor: 'rgba(116,158,180,0.1)',
+                  flex: 1,
+                  height: '1px',
+                }}
+              />
+            </Box>
+          )}
+
+          <Box>
+            <Typography sx={fieldLabelSx}>
+              {t('core:address_book_address', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+            </Typography>
+            <TextField
+              required
+              fullWidth
+              aria-label={t('core:address_book_address', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+              placeholder={`Enter ${coinType} address`}
+              value={address}
+              onChange={handleAddressChange}
+              error={!!addressError}
+              helperText={
+                addressError ||
+                (coinType === Coin.QORT
+                  ? addressConfirmed
+                    ? 'Address confirmed'
+                    : 'Confirm this address before saving.'
+                  : EMPTY_STRING)
+              }
+              slotProps={{
+                input: {
+                  endAdornment:
+                    coinType === Coin.QORT ? (
+                      <InputAdornment
+                        position="end"
+                        sx={{
+                          ml: 1,
+                          mr: 0,
+                        }}
+                      >
+                        <IconButton
+                          aria-label="Confirm address"
+                          disabled={!address.trim() || !!addressError}
+                          onClick={handleConfirmAddress}
+                          sx={{
+                            color: addressConfirmed
+                              ? 'success.main'
+                              : 'primary.main',
+                            height: { xs: 38, sm: 40 },
+                            width: { xs: 38, sm: 40 },
+                            '&:disabled': {
+                              color: 'text.disabled',
+                            },
+                          }}
+                        >
+                          {addressConfirmed ? (
+                            <CheckCircleOutline sx={{ fontSize: 22 }} />
+                          ) : (
+                            <Check sx={{ fontSize: 22 }} />
+                          )}
+                        </IconButton>
+                      </InputAdornment>
+                    ) : undefined,
+                },
+              }}
+              sx={{
+                ...formFieldSx,
+                '& .MuiFormHelperText-root': {
+                  ...formFieldSx['& .MuiFormHelperText-root'],
+                  animation: shouldGlowAddressConfirmText
+                    ? 'addressConfirmWarningPulse 900ms ease-in-out infinite'
+                    : 'none',
+                  color: addressError
+                    ? 'error.main'
+                    : addressConfirmed
+                      ? 'success.main'
+                      : coinType === Coin.QORT
+                        ? 'error.main'
+                        : 'text.secondary',
+                  textShadow: shouldGlowAddressConfirmText
+                    ? '0 0 10px rgba(255,90,104,0.42)'
+                    : 'none',
+                  '@keyframes addressConfirmWarningPulse': {
+                    '0%, 100%': {
+                      color: '#ff4d5e',
+                      textShadow: '0 0 0 rgba(255,90,104,0)',
+                    },
+                    '50%': {
+                      color: '#ffffff',
+                      textShadow:
+                        '0 0 12px rgba(255,90,104,0.7), 0 0 22px rgba(255,90,104,0.34)',
+                    },
+                  },
+                },
+              }}
+            />
+          </Box>
+
+          <Box>
+            <Typography sx={fieldLabelSx}>
+              {t('core:address_book_note', {
+                postProcess: 'capitalizeFirstChar',
+              })}{' '}
+              (optional)
+            </Typography>
+            <Box sx={{ position: 'relative' }}>
+              <TextField
+                fullWidth
+                aria-label={t('core:address_book_note', {
+                  postProcess: 'capitalizeFirstChar',
+                })}
+                placeholder="Add a note (optional)"
+                value={note}
+                onChange={handleNoteChange}
+                error={!!noteError}
+                helperText={noteError || EMPTY_STRING}
+                multiline
+                rows={3}
+                slotProps={{
+                  htmlInput: {
+                    maxLength: ADDRESSBOOK_NOTE_LENGTH,
+                  },
+                }}
+                sx={{
+                  ...formFieldSx,
+                  '& .MuiOutlinedInput-root': {
+                    ...formFieldSx['& .MuiOutlinedInput-root'],
+                    alignItems: 'flex-start',
+                    minHeight: 94,
+                    pb: 2.2,
+                    pt: 1.05,
+                  },
+                  '& .MuiOutlinedInput-input': {
+                    ...formFieldSx['& .MuiOutlinedInput-input'],
+                    fontSize: { xs: 14.5, sm: 15 },
+                    fontWeight: 400,
+                    lineHeight: 1.45,
+                    pr: 7,
+                    '&::placeholder': {
+                      color: 'text.secondary',
+                      fontWeight: 400,
+                      opacity: 0.48,
+                    },
+                  },
+                }}
+              />
+              <Typography
+                sx={{
+                  bottom: noteError ? 30 : 10,
+                  color: 'text.secondary',
+                  fontSize: 14,
+                  fontWeight: 700,
+                  position: 'absolute',
+                  right: 16,
+                }}
+              >
+                {note.length}/{ADDRESSBOOK_NOTE_LENGTH}
+              </Typography>
+            </Box>
+          </Box>
         </Box>
       </DialogContent>
-      <DialogActions sx={{ ml: 1, px: 3, pb: 2, justifyContent: 'space-between' }}>
-        <Box sx={{ color: 'error.main', fontSize: '1rem', maxWidth: '60%' }}>
+
+      <DialogActions
+        sx={{
+          borderTop: '1px solid rgba(116,158,180,0.12)',
+          flexDirection: { xs: 'column', sm: 'row' },
+          gap: { xs: 1.1, sm: 1.4 },
+          justifyContent: 'space-between',
+          pb: { xs: '14px !important', sm: '12px !important' },
+          pt: '12px !important',
+          px: { xs: '20px !important', sm: '28px !important' },
+        }}
+      >
+        <Box
+          sx={{
+            color: 'error.main',
+            fontSize: 13,
+            fontWeight: 600,
+            maxWidth: { xs: '100%', sm: '48%' },
+            minHeight: { xs: saveError ? 'auto' : 0, sm: 'auto' },
+            width: { xs: '100%', sm: 'auto' },
+          }}
+        >
           {saveError}
         </Box>
-        <Box sx={{ display: 'flex', gap: 1 }}>
-          <Button onClick={onClose}>
-            {t('core:address_book_cancel', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Button>
+        <Box
+          sx={{
+            display: 'flex',
+            gap: 1.2,
+            justifyContent: { xs: 'stretch', sm: 'flex-end' },
+            width: { xs: '100%', sm: 'auto' },
+          }}
+        >
           <Button
-            onClick={handleSave}
-            variant="contained"
-            disabled={!isFormValid}
+            onClick={onClose}
+            variant="outlined"
             sx={{
-              backgroundColor: '#05a2e4',
+              borderColor: 'rgba(116,158,180,0.22)',
+              borderRadius: 1.35,
+              color: 'primary.main',
+              fontSize: { xs: 14, sm: 14.5 },
+              fontWeight: 700,
+              minHeight: { xs: 38, sm: 40 },
+              minWidth: { xs: 0, sm: 86 },
+              px: 2,
+              width: { xs: '100%', sm: 'auto' },
               '&:hover': {
-                backgroundColor: '#02648d',
-              },
-              '&:disabled': {
-                backgroundColor: 'rgba(0, 0, 0, 0.12)',
+                bgcolor: 'rgba(116,158,180,0.08)',
+                borderColor: 'rgba(116,158,180,0.38)',
               },
             }}
           >
-            {t('core:address_book_save', {
+            {t('core:address_book_cancel', {
               postProcess: 'capitalizeFirstChar',
             })}
           </Button>
+          <Box
+            component="span"
+            onMouseEnter={() => {
+              if (coinType === Coin.QORT && !addressConfirmed) {
+                setSaveConfirmPromptActive(true);
+              }
+            }}
+            onMouseLeave={() => setSaveConfirmPromptActive(false)}
+            sx={{
+              display: 'inline-flex',
+              width: { xs: '100%', sm: 'auto' },
+            }}
+          >
+            <Button
+              onClick={handleSave}
+              variant="contained"
+              disabled={!isFormValid}
+              sx={{
+                bgcolor: '#0a9eff',
+                backgroundImage:
+                  'linear-gradient(180deg, rgba(24,174,255,0.98), rgba(4,126,220,0.98))',
+                border: '1px solid rgba(85,205,255,0.32)',
+                borderRadius: 1.35,
+                boxShadow:
+                  '0 10px 26px rgba(3,139,236,0.28), inset 0 1px 0 rgba(255,255,255,0.18)',
+                color: 'white',
+                fontSize: { xs: 14, sm: 14.5 },
+                fontWeight: 700,
+                minHeight: { xs: 38, sm: 40 },
+                minWidth: { xs: 0, sm: 86 },
+                px: 2,
+                width: { xs: '100%', sm: 'auto' },
+                '&:hover': {
+                  bgcolor: '#16baf2',
+                  boxShadow: '0 14px 32px rgba(24,189,242,0.32)',
+                },
+                '&:disabled': {
+                  bgcolor: 'rgba(116,158,180,0.16)',
+                  backgroundImage: 'none',
+                  borderColor: 'rgba(116,158,180,0.08)',
+                  boxShadow: 'none',
+                  color: 'rgba(255,255,255,0.34)',
+                },
+              }}
+            >
+              {t('core:address_book_save', {
+                postProcess: 'capitalizeFirstChar',
+              })}
+            </Button>
+          </Box>
         </Box>
       </DialogActions>
     </DialogGeneral>
diff --git a/src/components/AddressBook/DeleteConfirmationDialog.tsx b/src/components/AddressBook/DeleteConfirmationDialog.tsx
index 3661fdc..d9ba8a8 100644
--- a/src/components/AddressBook/DeleteConfirmationDialog.tsx
+++ b/src/components/AddressBook/DeleteConfirmationDialog.tsx
@@ -16,31 +16,90 @@ interface DeleteConfirmationDialogProps {
   entryName: string;
 }
 
-export const DeleteConfirmationDialog: React.FC<DeleteConfirmationDialogProps> = ({
-  open,
-  onClose,
-  onConfirm,
-  entryName,
-}) => {
+export const DeleteConfirmationDialog: React.FC<
+  DeleteConfirmationDialogProps
+> = ({ open, onClose, onConfirm, entryName }) => {
   const { t } = useTranslation(['core']);
 
   return (
-    <DialogGeneral open={open} onClose={onClose} maxWidth="xs" fullWidth>
-      <DialogTitle sx={{textAlign: 'center'}} variant="h4">
+    <DialogGeneral
+      open={open}
+      onClose={onClose}
+      maxWidth={false}
+      fullWidth
+      slotProps={{
+        paper: {
+          sx: {
+            bgcolor: 'rgba(3, 17, 29, 0.985)',
+            backgroundImage:
+              'radial-gradient(circle at 13% 6%, rgba(24,189,242,0.13), transparent 30%), linear-gradient(180deg, rgba(5,24,39,0.99) 0%, rgba(3,13,23,0.995) 100%)',
+            border: '1px solid rgba(91,132,158,0.28)',
+            borderRadius: 2,
+            boxShadow:
+              '0 28px 72px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04)',
+            overflow: 'hidden',
+            width: 'min(420px, calc(100vw - 24px))',
+          },
+        },
+      }}
+    >
+      <DialogTitle
+        sx={{
+          bgcolor: 'transparent',
+          borderBottom: 'none',
+          fontSize: 20,
+          fontWeight: 700,
+          lineHeight: 1.1,
+          pb: 0.75,
+          pt: 2.35,
+          textAlign: 'center',
+        }}
+      >
         {t('core:address_book_delete', {
           postProcess: 'capitalizeFirstChar',
         })}
       </DialogTitle>
-      <DialogContent>
-        <Typography variant="body1" sx={{textAlign: 'center'}}>
+      <DialogContent sx={{ px: 3, pb: 1.5, pt: '10px !important' }}>
+        <Typography
+          sx={{
+            color: 'text.secondary',
+            fontSize: 14,
+            fontWeight: 500,
+            lineHeight: 1.45,
+            textAlign: 'center',
+          }}
+        >
           {t('core:address_book_delete_confirm', {
             name: entryName,
             postProcess: 'capitalizeFirstChar',
           })}
         </Typography>
       </DialogContent>
-      <DialogActions sx={{ px: 3, pb: 2 }}>
-        <Button onClick={onClose}>
+      <DialogActions
+        sx={{
+          borderTop: '1px solid rgba(116,158,180,0.12)',
+          gap: 1.2,
+          justifyContent: 'flex-end',
+          px: 3,
+          py: 1.6,
+        }}
+      >
+        <Button
+          onClick={onClose}
+          variant="outlined"
+          sx={{
+            borderColor: 'rgba(116,158,180,0.22)',
+            borderRadius: 1.35,
+            color: 'primary.main',
+            fontWeight: 700,
+            minHeight: 38,
+            minWidth: 86,
+            '&:hover': {
+              bgcolor: 'rgba(116,158,180,0.08)',
+              borderColor: 'rgba(116,158,180,0.38)',
+            },
+          }}
+        >
           {t('core:address_book_cancel', {
             postProcess: 'capitalizeFirstChar',
           })}
@@ -50,6 +109,10 @@ export const DeleteConfirmationDialog: React.FC<DeleteConfirmationDialogProps> =
           variant="contained"
           color="error"
           sx={{
+            borderRadius: 1.35,
+            fontWeight: 700,
+            minHeight: 38,
+            minWidth: 86,
             '&:hover': {
               backgroundColor: 'error.dark',
             },
diff --git a/src/components/AddressBook/__tests__/AddressFormDialog.test.tsx b/src/components/AddressBook/__tests__/AddressFormDialog.test.tsx
index ace7a03..756ae08 100644
--- a/src/components/AddressBook/__tests__/AddressFormDialog.test.tsx
+++ b/src/components/AddressBook/__tests__/AddressFormDialog.test.tsx
@@ -4,6 +4,7 @@ import userEvent from '@testing-library/user-event';
 import { AddressFormDialog } from '../AddressFormDialog';
 import { Coin } from 'qapp-core';
 import * as addressValidation from '../../../utils/addressValidation';
+import { searchQortalNames } from '../../../utils/qortalNodeApi';
 
 // Mock react-i18next
 vi.mock('react-i18next', () => ({
@@ -16,8 +17,9 @@ vi.mock('react-i18next', () => ({
 // Mock address validation
 vi.mock('../../../utils/addressValidation');
 
-// Mock fetch for QORT name resolution
-global.fetch = vi.fn();
+vi.mock('../../../utils/qortalNodeApi', () => ({
+  searchQortalNames: vi.fn(),
+}));
 
 describe('AddressFormDialog', () => {
   const defaultProps = {
@@ -30,6 +32,8 @@ describe('AddressFormDialog', () => {
   beforeEach(() => {
     vi.clearAllMocks();
     vi.mocked(addressValidation.validateAddress).mockReturnValue(true);
+    vi.mocked(searchQortalNames).mockResolvedValue([]);
+    vi.stubGlobal('qortalRequest', vi.fn());
   });
 
   describe('basic rendering', () => {
@@ -185,22 +189,25 @@ describe('AddressFormDialog', () => {
   });
 
   describe('QORT name resolution', () => {
-    it('should show loading indicator when validating QORT name', async () => {
+    const qortAddress = `Q${'A'.repeat(33)}`;
+
+    it('should search QORT names while typing', async () => {
       const user = userEvent.setup();
-      vi.mocked(global.fetch).mockResolvedValue({
-        ok: true,
-        json: async () => ({ owner: 'QAddress123' }),
-      } as Response);
+      vi.mocked(searchQortalNames).mockResolvedValue([
+        { name: 'Alice', owner: qortAddress },
+      ]);
 
       render(<AddressFormDialog {...defaultProps} coinType={Coin.QORT} />);
 
       const nameInput = screen.getByLabelText(/core:address_book_name/);
       await user.type(nameInput, 'Alice');
 
-      // Should show validating message
-      await waitFor(() => {
-        expect(screen.getByText(/core:message.generic.validating/)).toBeInTheDocument();
-      });
+      expect(await screen.findByText(qortAddress)).toBeInTheDocument();
+      expect(searchQortalNames).toHaveBeenCalledWith(
+        'Alice',
+        10,
+        expect.any(AbortSignal)
+      );
     });
 
     it('should not resolve name for non-QORT coins', async () => {
@@ -211,7 +218,63 @@ describe('AddressFormDialog', () => {
       const nameInput = screen.getByLabelText(/core:address_book_name/);
       await user.type(nameInput, 'Alice');
 
-      expect(global.fetch).not.toHaveBeenCalled();
+      expect(searchQortalNames).not.toHaveBeenCalled();
+    });
+
+    it('should clear the resolved QORT address when the selected name changes', async () => {
+      const user = userEvent.setup();
+      vi.mocked(searchQortalNames).mockResolvedValue([
+        { name: 'Phill', owner: qortAddress },
+      ]);
+
+      render(<AddressFormDialog {...defaultProps} coinType={Coin.QORT} />);
+
+      const nameInput = screen.getByLabelText(
+        /core:address_book_name/
+      ) as HTMLInputElement;
+      const addressInput = screen.getByLabelText(
+        /core:address_book_address/
+      ) as HTMLInputElement;
+
+      await user.type(nameInput, 'Phill');
+      await user.click(await screen.findByText('Phill'));
+
+      expect(nameInput.value).toBe('Phill');
+      expect(addressInput.value).toBe(qortAddress);
+
+      await user.type(nameInput, 'l');
+
+      expect(nameInput.value).toBe('Philll');
+      expect(addressInput.value).toBe('');
+    });
+
+    it('should resolve a typed QORT address to its primary name and clear the name if the address changes', async () => {
+      const user = userEvent.setup();
+      const qortalRequestMock = vi.fn().mockResolvedValue('Phill');
+      vi.stubGlobal('qortalRequest', qortalRequestMock);
+
+      render(<AddressFormDialog {...defaultProps} coinType={Coin.QORT} />);
+
+      const nameInput = screen.getByLabelText(
+        /core:address_book_name/
+      ) as HTMLInputElement;
+      const addressInput = screen.getByLabelText(
+        /core:address_book_address/
+      ) as HTMLInputElement;
+
+      await user.type(addressInput, qortAddress);
+
+      await waitFor(() => {
+        expect(qortalRequestMock).toHaveBeenCalledWith({
+          action: 'GET_PRIMARY_NAME',
+          address: qortAddress,
+        });
+        expect(nameInput.value).toBe('Phill');
+      });
+
+      await user.type(addressInput, 'A');
+
+      expect(nameInput.value).toBe('');
     });
   });
 });
diff --git a/src/components/AddressBook/avatarPalette.ts b/src/components/AddressBook/avatarPalette.ts
new file mode 100644
index 0000000..406dbd8
--- /dev/null
+++ b/src/components/AddressBook/avatarPalette.ts
@@ -0,0 +1,33 @@
+export const addressBookAvatarColors = [
+  '#AEB7FF',
+  '#8CCAFF',
+  '#FFB4C1',
+  '#7DE3C2',
+  '#FFD98A',
+  '#C3B1FF',
+  '#6ED7E6',
+  '#FFC38A',
+  '#B6E3A3',
+  '#E2B7FF',
+];
+
+export const getAddressBookAvatarColor = (
+  seed: string,
+  fallbackIndex = 0
+) => {
+  const source = seed.trim() || String(fallbackIndex);
+  let hash = 0;
+
+  for (let index = 0; index < source.length; index += 1) {
+    hash = (hash * 31 + source.charCodeAt(index)) >>> 0;
+  }
+
+  return addressBookAvatarColors[hash % addressBookAvatarColors.length];
+};
+
+export const getAddressBookAvatarSx = (color: string) => ({
+  bgcolor: color,
+  boxShadow: `0 0 18px color-mix(in srgb, ${color} 38%, transparent)`,
+  color: 'rgba(5, 22, 32, 0.86)',
+  textShadow: '0 1px 0 rgba(255,255,255,0.22)',
+});
diff --git a/src/components/ExternalSendForm.tsx b/src/components/ExternalSendForm.tsx
new file mode 100644
index 0000000..4a239a6
--- /dev/null
+++ b/src/components/ExternalSendForm.tsx
@@ -0,0 +1,822 @@
+import type {
+  ChangeEvent,
+  ComponentProps,
+  ComponentType,
+  FC,
+  ReactNode,
+} from 'react';
+import {
+  AppBar,
+  Avatar,
+  Box,
+  Button,
+  IconButton,
+  InputAdornment,
+  Slider,
+  SliderProps,
+  TextField,
+  Toolbar,
+  Tooltip,
+  Typography,
+} from '@mui/material';
+import {
+  LockOutlined,
+  Close,
+  InfoOutlined,
+  NorthEast,
+  PersonOutline,
+  ShieldOutlined,
+} from '@mui/icons-material';
+import { NumericFormat as _NumericFormat } from 'react-number-format';
+import {
+  getAddressBookAvatarColor,
+  getAddressBookAvatarSx,
+} from './AddressBook/avatarPalette';
+
+const NumericFormat = _NumericFormat as FC<
+  ComponentProps<typeof _NumericFormat> & Record<string, unknown>
+>;
+
+type ExternalSendFormProps = {
+  addressError: boolean;
+  addressHelperText: ReactNode;
+  addressInputId: string;
+  amount: number;
+  afterRecipientContent?: ReactNode;
+  balance: number | string | null | undefined;
+  balanceError?: string | null;
+  coinLogo: string;
+  feeContent: ReactNode;
+  isBalanceLoading: boolean;
+  maxSendable: number;
+  onAmountChange: (amount: number) => void;
+  onClearRecipient?: () => void;
+  onClose: () => void;
+  onOpenAddressBook?: () => void;
+  onRecipientChange: (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => void;
+  recipientInputProps?: Record<string, unknown>;
+  onSend: () => void;
+  onSendMax: () => void;
+  recipient: string;
+  recipientDisplayName?: string;
+  recipientSubtitle?: string;
+  sendDisabled: boolean;
+  showAddressBookButton?: boolean;
+  showBalanceMeter?: boolean;
+  symbol: string;
+};
+
+type ExternalFeeSliderProps = {
+  defaultValue: number;
+  fee: number;
+  getAriaValueText: NonNullable<SliderProps['getAriaValueText']>;
+  marks: SliderProps['marks'];
+  max: number;
+  min: number;
+  onChange: NonNullable<SliderProps['onChange']>;
+  sliderId: string;
+  step: number;
+};
+
+const maxOrZero = (value: number) =>
+  Number.isFinite(value) && value > 0 ? value : 0;
+
+export const sendCoinDialogPaperSx = {
+  backgroundColor: 'rgba(3, 17, 29, 0.985)',
+  backgroundImage:
+    'radial-gradient(circle at 13% 6%, rgba(24,189,242,0.13), transparent 30%), linear-gradient(180deg, rgba(5,24,39,0.99) 0%, rgba(3,13,23,0.995) 100%)',
+  border: '1px solid rgba(91,132,158,0.28)',
+  borderRadius: 2,
+  boxShadow:
+    '0 28px 72px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04)',
+  minHeight: 'min(590px, calc(100dvh - 32px))',
+  width: 'min(640px, calc(100vw - 24px))',
+} as const;
+
+const sendLabelSx = {
+  color: 'rgba(228,238,248,0.9)',
+  fontSize: { xs: 14.5, sm: 15 },
+  fontWeight: 700,
+  lineHeight: 1.2,
+} as const;
+
+const helperSx = {
+  color: 'text.secondary',
+  fontSize: { xs: 12.5, sm: 13 },
+  fontWeight: 500,
+  lineHeight: 1.45,
+  ml: 1.6,
+  mt: 0.85,
+} as const;
+
+const fieldSx = {
+  '& .MuiFormHelperText-root': {
+    ...helperSx,
+  },
+  '& .MuiOutlinedInput-root': {
+    bgcolor: 'rgba(0,8,16,0.2)',
+    borderRadius: 1.35,
+    minHeight: { xs: 54, sm: 56 },
+    px: { xs: 1.2, sm: 1.35 },
+    transition: 'background-color 160ms ease',
+    '& fieldset': {
+      borderColor: 'rgba(116,158,180,0.16)',
+    },
+    '&:hover fieldset': {
+      borderColor: 'rgba(116,158,180,0.3)',
+    },
+    '&.Mui-focused': {
+      bgcolor: 'rgba(0,8,16,0.2)',
+    },
+    '&.Mui-focused fieldset': {
+      borderColor: 'rgba(24,189,242,0.62)',
+      borderWidth: 1,
+    },
+  },
+  '& .MuiOutlinedInput-input': {
+    color: 'text.primary',
+    fontSize: { xs: 16, sm: 16.5 },
+    fontWeight: 500,
+    py: 0,
+    '&::placeholder': {
+      color: 'text.secondary',
+      fontWeight: 400,
+      opacity: 0.58,
+    },
+  },
+} as const;
+
+const infoIconSx = {
+  color: 'text.secondary',
+  fontSize: { xs: 14.5, sm: 15 },
+  opacity: 0.82,
+} as const;
+
+export function ExternalSendForm({
+  addressError,
+  addressHelperText,
+  addressInputId,
+  afterRecipientContent,
+  amount,
+  coinLogo,
+  feeContent,
+  maxSendable,
+  onAmountChange,
+  onClearRecipient,
+  onClose,
+  onOpenAddressBook,
+  onRecipientChange,
+  onSend,
+  onSendMax,
+  recipient,
+  recipientDisplayName = '',
+  recipientInputProps,
+  recipientSubtitle = 'Address book contact',
+  sendDisabled,
+  showAddressBookButton = false,
+  symbol,
+}: ExternalSendFormProps) {
+  const safeMax = maxOrZero(maxSendable);
+  const recipientInitials =
+    recipientDisplayName
+      .split(' ')
+      .filter(Boolean)
+      .map((part) => part[0])
+      .join('')
+      .slice(0, 2)
+      .toUpperCase() || symbol[0];
+  const recipientAvatarColor = getAddressBookAvatarColor(
+    `${recipientDisplayName}-${recipient}`
+  );
+
+  return (
+    <>
+      <AppBar
+        sx={{
+          bgcolor: 'transparent',
+          backgroundColor: 'transparent',
+          backgroundImage: 'none',
+          borderBottom: 'none',
+          boxShadow: 'none',
+          color: 'text.primary',
+          position: 'static',
+        }}
+      >
+        <Toolbar
+          sx={{
+            minHeight: '78px !important',
+            px: { xs: 2.35, sm: 2.55 },
+          }}
+        >
+          <IconButton
+            color="inherit"
+            onClick={onClose}
+            aria-label="close"
+            sx={{
+              color: 'text.secondary',
+              mr: { xs: 1.25, sm: 1.45 },
+              p: 0.35,
+              '& svg': { fontSize: 28 },
+              '&:hover': {
+                bgcolor: 'rgba(116,158,180,0.08)',
+                color: 'text.primary',
+              },
+            }}
+          >
+            <Close />
+          </IconButton>
+          <Avatar
+            sx={{
+              bgcolor: 'transparent',
+              boxShadow: '0 0 20px rgba(24,189,242,0.24)',
+              height: { xs: 34, sm: 36 },
+              mr: { xs: 1.65, sm: 1.8 },
+              width: { xs: 34, sm: 36 },
+            }}
+            alt={`${symbol} Logo`}
+            src={coinLogo}
+          />
+          <Typography
+            variant="h6"
+            noWrap
+            component="div"
+            sx={{
+              color: 'text.primary',
+              flexGrow: 1,
+              fontSize: { xs: 18, sm: 19 },
+              fontWeight: 700,
+              letterSpacing: 0,
+              lineHeight: 1,
+            }}
+          >
+            Transfer {symbol}
+          </Typography>
+          <Button
+            disabled={sendDisabled}
+            variant="contained"
+            startIcon={<NorthEast />}
+            aria-label={`send-${symbol.toLowerCase()}`}
+            onClick={onSend}
+            sx={{
+              bgcolor: '#0a9eff',
+              backgroundImage:
+                'linear-gradient(180deg, rgba(24,174,255,0.98), rgba(4,126,220,0.98))',
+              border: '1px solid rgba(85,205,255,0.32)',
+              borderRadius: 1.4,
+              boxShadow:
+                '0 10px 26px rgba(3,139,236,0.34), inset 0 1px 0 rgba(255,255,255,0.18)',
+              color: 'white',
+              fontSize: { xs: 14, sm: 14.5 },
+              fontWeight: 700,
+              justifySelf: 'end',
+              minHeight: { xs: 38, sm: 40 },
+              minWidth: { xs: 92, sm: 98 },
+              px: { xs: 1.65, sm: 1.9 },
+              '& .MuiButton-startIcon svg': {
+                fontSize: 19,
+              },
+              '&:hover': {
+                bgcolor: '#16baf2',
+                boxShadow: '0 18px 44px rgba(24,189,242,0.38)',
+              },
+              '&:disabled': {
+                bgcolor: 'rgba(116,158,180,0.18)',
+                backgroundImage: 'none',
+                borderColor: 'rgba(116,158,180,0.1)',
+                boxShadow: 'none',
+                color: 'rgba(255,255,255,0.44)',
+              },
+            }}
+          >
+            Send
+          </Button>
+        </Toolbar>
+      </AppBar>
+
+      <Box
+        sx={{
+          display: 'grid',
+          gap: { xs: 2.85, sm: 3.05 },
+          minHeight: { xs: 472, sm: 484 },
+          px: { xs: 2.75, sm: 3 },
+          pb: { xs: 2.85, sm: 3 },
+          pt: { xs: 0.4, sm: 0.55 },
+        }}
+      >
+        <Box sx={{ display: 'grid', gap: 0.85 }}>
+          <Typography sx={sendLabelSx}>To</Typography>
+          {recipientDisplayName ? (
+            <Box
+              sx={{
+                bgcolor: 'rgba(0,8,16,0.18)',
+                border: '1px solid rgba(116,158,180,0.15)',
+                borderRadius: 1.55,
+                display: 'grid',
+                overflow: 'hidden',
+              }}
+            >
+              <Box
+                sx={{
+                  alignItems: 'center',
+                  display: 'grid',
+                  gap: 1.25,
+                  gridTemplateColumns: 'auto minmax(0, 1fr) auto auto',
+                  minHeight: { xs: 70, sm: 72 },
+                  px: { xs: 1.65, sm: 1.75 },
+                  py: { xs: 0.85, sm: 0.95 },
+                }}
+              >
+                <Avatar
+                  sx={{
+                    ...getAddressBookAvatarSx(recipientAvatarColor),
+                    fontSize: { xs: 13, sm: 13.5 },
+                    fontWeight: 700,
+                    height: { xs: 42, sm: 44 },
+                    width: { xs: 42, sm: 44 },
+                  }}
+                >
+                  {recipientInitials}
+                </Avatar>
+                <Box sx={{ display: 'grid', gap: 0.35, minWidth: 0 }}>
+                  <Typography
+                    noWrap
+                    sx={{
+                      color: 'text.primary',
+                      fontSize: { xs: 18, sm: 18.5 },
+                      fontWeight: 700,
+                      lineHeight: 1.05,
+                    }}
+                  >
+                    {recipientDisplayName}
+                  </Typography>
+                  <Typography
+                    noWrap
+                    sx={{
+                      color: 'text.secondary',
+                      fontSize: { xs: 13.2, sm: 13.6 },
+                      fontWeight: 500,
+                      lineHeight: 1,
+                    }}
+                  >
+                    {recipientSubtitle}
+                  </Typography>
+                </Box>
+                {onClearRecipient ? (
+                  <IconButton
+                    aria-label="Clear recipient"
+                    onClick={onClearRecipient}
+                    sx={{
+                      color: 'text.secondary',
+                      height: { xs: 32, sm: 34 },
+                      width: { xs: 32, sm: 34 },
+                      '& svg': { fontSize: { xs: 20, sm: 21 } },
+                      '&:hover': {
+                        bgcolor: 'rgba(116,158,180,0.08)',
+                        color: 'text.primary',
+                      },
+                    }}
+                  >
+                    <Close />
+                  </IconButton>
+                ) : null}
+                {showAddressBookButton && onOpenAddressBook ? (
+                  <IconButton
+                    aria-label="Open address book"
+                    onClick={onOpenAddressBook}
+                    sx={{
+                      border: '1px solid rgba(116,158,180,0.12)',
+                      borderRadius: 1.2,
+                      color: 'primary.main',
+                      height: { xs: 34, sm: 36 },
+                      width: { xs: 34, sm: 36 },
+                      '&:hover': {
+                        bgcolor: 'rgba(24,189,242,0.08)',
+                        borderColor: 'rgba(24,189,242,0.34)',
+                        color: '#37d0ff',
+                      },
+                    }}
+                  >
+                    <PersonOutline sx={{ fontSize: { xs: 19, sm: 20 } }} />
+                  </IconButton>
+                ) : null}
+              </Box>
+              <Box
+                sx={{
+                  alignItems: 'center',
+                  borderTop: '1px solid rgba(116,158,180,0.115)',
+                  display: 'flex',
+                  gap: 0.85,
+                  minHeight: { xs: 40, sm: 42 },
+                  minWidth: 0,
+                  px: { xs: 1.65, sm: 1.75 },
+                  py: 0.65,
+                }}
+              >
+                <Typography
+                  sx={{
+                    color: 'text.secondary',
+                    flexShrink: 0,
+                    fontSize: { xs: 13, sm: 13.5 },
+                    fontWeight: 600,
+                  }}
+                >
+                  Address:
+                </Typography>
+                <Typography
+                  noWrap
+                  sx={{
+                    color: 'text.secondary',
+                    fontSize: { xs: 13, sm: 13.5 },
+                    fontWeight: 500,
+                    minWidth: 0,
+                  }}
+                >
+                  {recipient}
+                </Typography>
+              </Box>
+            </Box>
+          ) : (
+            <TextField
+              required
+              id={addressInputId}
+              value={recipient}
+              onChange={onRecipientChange}
+              error={addressError}
+              fullWidth
+              placeholder={`${symbol} address`}
+              helperText={addressError ? addressHelperText : undefined}
+              slotProps={{
+                htmlInput: {
+                  'aria-label': `${symbol} receiver address`,
+                  autoCapitalize: 'none',
+                  autoComplete: 'new-password',
+                  autoCorrect: 'off',
+                  spellCheck: false,
+                  ...recipientInputProps,
+                },
+                input: {
+                  endAdornment:
+                    showAddressBookButton && onOpenAddressBook ? (
+                      <InputAdornment position="end">
+                        <Tooltip title="Open address book">
+                          <IconButton
+                            aria-label="Open address book"
+                            onClick={onOpenAddressBook}
+                            sx={{
+                              border: '1px solid rgba(116,158,180,0.12)',
+                              borderRadius: 1,
+                              color: 'primary.main',
+                              height: { xs: 31, sm: 32 },
+                              width: { xs: 31, sm: 32 },
+                              '&:hover': {
+                                bgcolor: 'rgba(24,189,242,0.08)',
+                                borderColor: 'rgba(24,189,242,0.34)',
+                                color: '#37d0ff',
+                              },
+                            }}
+                          >
+                            <PersonOutline sx={{ fontSize: 18 }} />
+                          </IconButton>
+                        </Tooltip>
+                      </InputAdornment>
+                    ) : undefined,
+                },
+              }}
+              sx={{
+                ...fieldSx,
+                '& .MuiFormHelperText-root': {
+                  ...helperSx,
+                  color: addressError ? 'error.main' : 'text.secondary',
+                },
+              }}
+            />
+          )}
+        </Box>
+
+        {afterRecipientContent}
+
+        <Box sx={{ display: 'grid', gap: 1.05 }}>
+          <Box
+            sx={{
+              alignItems: 'center',
+              display: 'flex',
+              flexWrap: 'wrap',
+              gap: 0.9,
+              justifyContent: 'space-between',
+            }}
+          >
+            <Typography sx={sendLabelSx}>Amount</Typography>
+            <Box
+              sx={{
+                alignItems: 'center',
+                display: 'inline-flex',
+                gap: 0.75,
+                minHeight: 26,
+              }}
+            >
+              <Tooltip title="Maximum amount available after reserving the sending fee">
+                <Box
+                  sx={{
+                    alignItems: 'center',
+                    color: 'text.secondary',
+                    display: 'inline-flex',
+                    gap: 0.45,
+                  }}
+                >
+                  <InfoOutlined sx={infoIconSx} />
+                  <Typography
+                    sx={{
+                      color: 'text.secondary',
+                      fontSize: { xs: 13.2, sm: 13.6 },
+                      fontWeight: 500,
+                      lineHeight: 1.2,
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    {`Max sendable ${safeMax} ${symbol}`}
+                  </Typography>
+                </Box>
+              </Tooltip>
+              <Button
+                variant="text"
+                onClick={onSendMax}
+                sx={{
+                  color: 'primary.main',
+                  fontSize: { xs: 13.8, sm: 14.2 },
+                  fontWeight: 700,
+                  lineHeight: 1,
+                  minHeight: 24,
+                  minWidth: 0,
+                  px: 0.35,
+                  py: 0,
+                  '&:hover': {
+                    bgcolor: 'transparent',
+                    color: '#37d0ff',
+                  },
+                }}
+              >
+                Max
+              </Button>
+            </Box>
+          </Box>
+          <NumericFormat
+            decimalScale={8}
+            defaultValue={0}
+            value={amount === 0 ? '' : amount}
+            allowNegative={false}
+            customInput={TextField as ComponentType<any>}
+            valueIsNumericString
+            placeholder="0.00"
+            fullWidth
+            isAllowed={(values) => {
+              const { formattedValue, floatValue } = values;
+              return formattedValue === '' || (floatValue ?? 0) <= safeMax;
+            }}
+            onValueChange={(values) => {
+              onAmountChange(values.floatValue ?? 0);
+            }}
+            required
+            slotProps={{
+              htmlInput: {
+                'aria-label': `${symbol} amount`,
+              },
+              input: {
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <Typography
+                      sx={{
+                        color: 'text.secondary',
+                        fontSize: { xs: 14.5, sm: 15 },
+                        fontWeight: 700,
+                        letterSpacing: 0,
+                        lineHeight: 1,
+                      }}
+                    >
+                      {symbol}
+                    </Typography>
+                  </InputAdornment>
+                ),
+              },
+            }}
+            sx={{
+              ...fieldSx,
+              '& .MuiOutlinedInput-root': {
+                ...fieldSx['& .MuiOutlinedInput-root'],
+                bgcolor: 'rgba(0,8,16,0.2)',
+                borderRadius: 1.55,
+                minHeight: { xs: 54, sm: 56 },
+                px: { xs: 1.45, sm: 1.6 },
+                '& fieldset': {
+                  borderColor: 'rgba(24,158,255,0.9)',
+                  boxShadow: '0 0 18px rgba(24,158,255,0.18)',
+                },
+                '&:hover fieldset': {
+                  borderColor: 'rgba(24,174,255,0.96)',
+                },
+              },
+              '& .MuiOutlinedInput-input': {
+                color: 'text.primary',
+                fontSize: { xs: 23, sm: 24 },
+                fontWeight: 400,
+                py: 0,
+                textAlign: 'left',
+                '&::placeholder': {
+                  color: 'text.secondary',
+                  fontWeight: 400,
+                  opacity: 0.86,
+                },
+              },
+            }}
+          />
+        </Box>
+
+        {feeContent}
+
+        <Box
+          sx={{
+            alignItems: 'flex-start',
+            bgcolor: 'rgba(8, 57, 52, 0.34)',
+            border: '1px solid rgba(34, 227, 138, 0.11)',
+            borderRadius: 1.55,
+            display: 'flex',
+            gap: 1.6,
+            px: { xs: 1.7, sm: 1.85 },
+            py: { xs: 2.05, sm: 2.2 },
+          }}
+        >
+          <ShieldOutlined
+            sx={{ color: 'success.main', fontSize: { xs: 29, sm: 31 } }}
+          />
+          <Box sx={{ display: 'grid', gap: 0.35 }}>
+            <Typography
+              sx={{
+                color: 'text.primary',
+                fontSize: { xs: 13.5, sm: 14 },
+                fontWeight: 700,
+                lineHeight: 1.25,
+              }}
+            >
+              Always double-check the address before sending.
+            </Typography>
+            <Typography
+              sx={{
+                color: 'text.secondary',
+                fontSize: { xs: 12.8, sm: 13.2 },
+                fontWeight: 400,
+                lineHeight: 1.35,
+              }}
+            >
+              Transactions cannot be reversed after broadcast.
+            </Typography>
+          </Box>
+        </Box>
+
+        <Box
+          sx={{
+            alignItems: 'center',
+            bgcolor: 'rgba(0,8,16,0.12)',
+            border: '1px solid rgba(116,158,180,0.09)',
+            borderRadius: 1.35,
+            color: 'text.secondary',
+            display: 'flex',
+            gap: 0.75,
+            justifyContent: 'center',
+            minHeight: { xs: 40, sm: 42 },
+            mt: -0.1,
+            px: 1.4,
+          }}
+        >
+          <LockOutlined sx={{ fontSize: { xs: 14, sm: 15 } }} />
+          <Typography
+            sx={{
+              color: 'text.secondary',
+              fontSize: { xs: 12.5, sm: 13 },
+              fontWeight: 600,
+              lineHeight: 1,
+              textAlign: 'center',
+            }}
+          >
+            {symbol === 'ARRR' ? (
+              <>Secure &bull; Private &bull; Decentralized</>
+            ) : (
+              <>Secure &bull; Decentralized</>
+            )}
+          </Typography>
+        </Box>
+      </Box>
+    </>
+  );
+}
+
+export function ExternalFeeSlider({
+  defaultValue,
+  fee,
+  getAriaValueText,
+  marks,
+  max,
+  min,
+  onChange,
+  sliderId,
+  step,
+}: ExternalFeeSliderProps) {
+  return (
+    <>
+      <Box
+        sx={{
+          alignItems: 'center',
+          bgcolor: 'rgba(0,8,16,0.13)',
+          border: '1px solid rgba(116,158,180,0.14)',
+          borderRadius: 1.15,
+          display: 'grid',
+          gap: { xs: 1.35, sm: 1.55 },
+          gridTemplateColumns: { xs: '1fr', sm: '148px minmax(0, 1fr)' },
+          minHeight: 64,
+          px: 1.55,
+          py: 0.85,
+        }}
+      >
+        <Box>
+          <Typography
+            sx={{
+              color: 'text.secondary',
+              fontSize: 12.5,
+              fontWeight: 500,
+              letterSpacing: 0,
+              whiteSpace: 'nowrap',
+            }}
+          >
+            Fee per byte
+          </Typography>
+          <Typography
+            sx={{
+              color: 'text.primary',
+              fontSize: 17,
+              fontWeight: 650,
+              lineHeight: 1.1,
+              mt: 0.45,
+            }}
+          >
+            {fee} SAT
+          </Typography>
+        </Box>
+        <Box sx={{ px: { xs: 0.5, sm: 1.2 } }}>
+          <Slider
+            track={false}
+            step={step}
+            min={min}
+            max={max}
+            value={fee || defaultValue}
+            valueLabelDisplay="auto"
+            aria-labelledby={sliderId}
+            getAriaValueText={getAriaValueText}
+            marks={marks}
+            onChange={onChange}
+            sx={{
+              color: 'primary.main',
+              '& .MuiSlider-mark': {
+                bgcolor: 'rgba(255,255,255,0.4)',
+                height: 3,
+                width: 3,
+              },
+              '& .MuiSlider-markLabel': {
+                color: 'text.secondary',
+                fontSize: 11,
+                fontWeight: 500,
+              },
+              '& .MuiSlider-rail': {
+                bgcolor: 'rgba(116,158,180,0.28)',
+                height: 3,
+              },
+              '& .MuiSlider-thumb': {
+                boxShadow: '0 0 16px rgba(24,189,242,0.3)',
+                height: 18,
+                width: 18,
+              },
+            }}
+          />
+        </Box>
+      </Box>
+      <Box
+        sx={{
+          alignItems: 'center',
+          color: 'text.secondary',
+          display: 'inline-flex',
+          gap: 0.75,
+          justifySelf: 'end',
+          mt: -0.75,
+          opacity: 0.74,
+          px: 0.4,
+        }}
+      >
+        <InfoOutlined sx={infoIconSx} />
+        <Tooltip title="Low fees may result in slow or unconfirmed transactions">
+          <Typography sx={{ fontSize: { xs: 12.5, sm: 13 }, fontWeight: 500 }}>
+            Confirmation speed depends on the selected fee
+          </Typography>
+        </Tooltip>
+      </Box>
+    </>
+  );
+}
diff --git a/src/components/FeeManager.tsx b/src/components/FeeManager.tsx
index e11fe65..c3662d8 100644
--- a/src/components/FeeManager.tsx
+++ b/src/components/FeeManager.tsx
@@ -1,20 +1,22 @@
 import {
   Box,
+  Button,
+  Collapse,
+  InputAdornment,
   MenuItem,
   Select,
   TextField,
+  Tooltip,
   ToggleButton,
   ToggleButtonGroup,
   Typography,
+  useMediaQuery,
 } from '@mui/material';
-import { MouseEvent, useEffect } from 'react';
-import {
-  CoinActionContainer,
-  CoinActionRow,
-  CustomLabel,
-  HeaderRow,
-} from '../styles/Fees-styles';
-import { useRecommendedFees, FeeType } from '../hooks/useRecommendedFees';
+import { InfoOutlined } from '@mui/icons-material';
+import type { ChangeEvent, MouseEvent } from 'react';
+import { useEffect, useState } from 'react';
+import { useRecommendedFees } from '../hooks/useRecommendedFees';
+import type { FeeType } from '../hooks/useRecommendedFees';
 import { useTranslation } from 'react-i18next';
 
 type FeeManagerProps = {
@@ -24,6 +26,8 @@ type FeeManagerProps = {
 
 export const FeeManager = ({ coin, onChange }: FeeManagerProps) => {
   const { t } = useTranslation('core');
+  const reduceMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
+  const [advancedOpen, setAdvancedOpen] = useState(false);
 
   const {
     selectedFeePublisher,
@@ -36,148 +40,436 @@ export const FeeManager = ({ coin, onChange }: FeeManagerProps) => {
     setCustomFee,
   } = useRecommendedFees({ selectedCoin: coin });
 
-  const handleChangeRecommended = (
+  const handleFeeTypeChange = (
     _event: MouseEvent<HTMLElement>,
-    newAlignment: FeeType | null
+    nextFeeType: FeeType | null
   ) => {
-    if (newAlignment) {
-      setSelectFeeType(newAlignment);
+    if (nextFeeType) {
+      setSelectFeeType(nextFeeType);
     }
   };
 
   useEffect(() => {
     onChange(currentFee ?? 0);
   }, [currentFee, onChange]);
+
+  const feeValue = currentFee ?? '--';
+  const feeIsLong =
+    typeof currentFee === 'number' &&
+    Number.isFinite(currentFee) &&
+    Math.abs(currentFee) > 9999;
+  const selectedFeeLabel = t(`core:fee.${selectFeeType}`, {
+    postProcess: 'capitalizeFirstChar',
+  });
+  const feeUnitText = currentFee === null ? 'Loading' : `${feeValue} sat/kB`;
+  const feeText =
+    currentFee === null ? 'Fee loading' : `${selectedFeeLabel}: ${feeUnitText}`;
+  const isDogeFee = coin.toUpperCase() === 'DOGE';
+  const compactFeeText = isDogeFee ? feeUnitText : feeText;
+  const feeTooltipTitle = `${t('core:fee.current', {
+    fee: feeValue,
+    postProcess: 'capitalizeFirstChar',
+  })}. ${t('core:message.generic.low_fee_transation', {
+    postProcess: 'capitalizeFirstChar',
+  })}`;
+  const feeOptions: Array<{
+    fee: number | null;
+    helper?: string;
+    label: string;
+    value: FeeType;
+  }> = [
+    {
+      fee: data?.low_fee_per_kb ?? null,
+      label: t('core:fee.low', { postProcess: 'capitalizeFirstChar' }),
+      value: 'low',
+    },
+    {
+      fee: data?.medium_fee_per_kb ?? null,
+      helper: 'Recommended',
+      label: t('core:fee.medium', { postProcess: 'capitalizeFirstChar' }),
+      value: 'medium',
+    },
+    {
+      fee: data?.high_fee_per_kb ?? null,
+      label: t('core:fee.high', { postProcess: 'capitalizeFirstChar' }),
+      value: 'high',
+    },
+    {
+      fee: customFee,
+      label: t('core:fee.custom', { postProcess: 'capitalizeFirstChar' }),
+      value: 'custom',
+    },
+  ];
+
   return (
     <Box
-      style={{
+      sx={{
+        bgcolor: 'rgba(0,8,16,0.13)',
+        border: '1px solid rgba(116,158,180,0.14)',
+        borderRadius: 1.15,
+        overflow: 'hidden',
         width: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
       }}
     >
       <Box
         sx={{
-          display: 'flex',
-          justifyContent: 'center',
           alignItems: 'center',
-          marginTop: '20px',
-          flexDirection: 'column',
-          width: '50ch',
+          display: 'grid',
+          gap: { xs: 1, sm: 1.15 },
+          gridTemplateColumns: {
+            xs: '1fr',
+            sm: 'minmax(88px, 0.68fr) minmax(150px, 1.1fr) auto minmax(134px, 0.95fr)',
+          },
+          px: { xs: 1.45, sm: 1.55 },
+          py: 1.05,
         }}
       >
-        <CoinActionContainer
+        <Typography
+          sx={{
+            color: 'text.secondary',
+            fontSize: 12.5,
+            fontWeight: 500,
+            letterSpacing: 0,
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {t('core:fee.publisher', {
+            postProcess: 'capitalizeFirstChar',
+          })}
+        </Typography>
+
+        <Select
+          size="small"
+          value={selectedFeePublisher}
+          onChange={(e: { target: { value: string } }) => {
+            if (e.target.value) {
+              setSelectedFeePublisher(e.target.value);
+            }
+          }}
           sx={{
-            border: '1px solid #3F3F3F',
-            borderRadius: '5px',
-            padding: '5px',
+            bgcolor: 'rgba(0,8,16,0.24)',
+            borderRadius: 1.2,
+            color: 'text.primary',
+            fontSize: 13,
+            fontWeight: 600,
+            minWidth: 0,
+            width: '100%',
+            '& .MuiOutlinedInput-notchedOutline': {
+              borderColor: 'primary.main',
+            },
+            '&:hover .MuiOutlinedInput-notchedOutline': {
+              borderColor: 'primary.main',
+            },
+            '& .MuiSelect-icon': {
+              color: 'text.primary',
+            },
           }}
         >
+          <MenuItem value="Foreign-Fee-Publisher">
+            Foreign-Fee-Publisher
+          </MenuItem>
+          <MenuItem value="JSON.Bridge">JSON.Bridge</MenuItem>
+        </Select>
+
+        <Button
+          variant="outlined"
+          aria-expanded={advancedOpen}
+          onClick={() => setAdvancedOpen((current) => !current)}
+          sx={{
+            bgcolor: advancedOpen ? 'rgba(24,189,242,0.08)' : 'transparent',
+            borderColor:
+              advancedOpen
+                ? 'rgba(24,189,242,0.54)'
+                : 'rgba(116,158,180,0.2)',
+            borderRadius: 1.2,
+            color: advancedOpen ? 'primary.main' : 'text.primary',
+            fontSize: 12,
+            fontWeight: 600,
+            minHeight: 32,
+            minWidth: 104,
+            px: 1.35,
+            textTransform: 'none',
+            '&:hover': {
+              bgcolor: 'rgba(116,158,180,0.08)',
+              borderColor: 'rgba(24,189,242,0.45)',
+            },
+          }}
+        >
+          Advanced
+        </Button>
+
+        <Tooltip title={feeTooltipTitle}>
           <Box
             sx={{
-              display: 'flex',
-              flexDirection: 'column',
               alignItems: 'center',
+              color: 'text.secondary',
+              display: 'inline-flex',
+              gap: 0.55,
+              justifySelf: { xs: 'start', sm: 'end' },
+              minWidth: { sm: 0 },
+              opacity: 0.72,
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              width: { xs: 'auto', sm: '100%' },
             }}
           >
-            <Typography>
-              {t('core:fee.publisher', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Typography>
-
-            <Select
-              size="small"
-              value={selectedFeePublisher}
-              onChange={(e: { target: { value: string } }) => {
-                if (e.target.value) {
-                  setSelectedFeePublisher(e.target.value);
-                }
+            <InfoOutlined
+              sx={{ color: 'text.secondary', fontSize: 15, opacity: 0.82 }}
+            />
+            <Typography
+              sx={{
+                fontSize: 12.5,
+                fontWeight: 500,
+                minWidth: 0,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
               }}
             >
-              <MenuItem value={'Foreign-Fee-Publisher'}>
-                Foreign-Fee-Publisher
-              </MenuItem>
-              <MenuItem value={'JSON.Bridge'}>JSON.Bridge</MenuItem>
-            </Select>
+              {feeIsLong
+                ? isDogeFee
+                  ? compactFeeText
+                  : `${selectedFeeLabel} fee set`
+                : compactFeeText}
+            </Typography>
           </Box>
+        </Tooltip>
 
-          <ToggleButtonGroup
-            color="primary"
-            value={selectFeeType}
-            exclusive
-            onChange={handleChangeRecommended}
-            aria-label="Platform"
+        <Collapse
+          in={advancedOpen}
+          timeout={reduceMotion ? 0 : 360}
+          unmountOnExit
+          sx={{
+            gridColumn: '1 / -1',
+            maxWidth: '100%',
+            mt: 0.15,
+            '& .MuiCollapse-wrapperInner': {
+              opacity: advancedOpen ? 1 : 0,
+              transform: advancedOpen ? 'translateY(0)' : 'translateY(-8px)',
+              transition: reduceMotion
+                ? 'none'
+                : 'opacity 280ms ease-out, transform 360ms cubic-bezier(0.2, 0, 0, 1)',
+            },
+          }}
+        >
+          <Box
+            sx={{
+              borderTop: '1px solid rgba(116,158,180,0.12)',
+              display: 'grid',
+              gap: 1,
+              pt: 1.05,
+            }}
           >
-            {data && [
-              <ToggleButton key="low" value="low">
-                {t('core:fee.low', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </ToggleButton>,
-              <ToggleButton key="medium" value="medium">
-                {t('core:fee.medium', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </ToggleButton>,
-              <ToggleButton key="high" value="high">
-                {t('core:fee.high', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </ToggleButton>
-            ]}
+            <ToggleButtonGroup
+              exclusive
+              value={selectFeeType}
+              onChange={handleFeeTypeChange}
+              aria-label={`${coin} fee speed`}
+              sx={{
+                display: 'grid',
+                gap: 0.65,
+                gridTemplateColumns: {
+                  xs: 'repeat(2, minmax(0, 1fr))',
+                  sm: 'repeat(4, minmax(0, 1fr))',
+                },
+                width: '100%',
+                '& .MuiToggleButtonGroup-grouped': {
+                  border: '1px solid rgba(116,158,180,0.2) !important',
+                  borderRadius: '8px !important',
+                  m: '0 !important',
+                },
+              }}
+            >
+              {feeOptions.map((option) => {
+                const isRecommendedPreset =
+                  option.value !== 'custom' && option.fee !== null;
+                const valueText =
+                  option.value === 'custom'
+                    ? option.fee !== null && option.fee > 0
+                      ? `${option.fee} sat/kB`
+                      : 'Manual entry'
+                    : isRecommendedPreset
+                      ? `${option.fee} sat/kB`
+                      : 'Loading';
 
-            <ToggleButton value="custom">
-              {t('core:fee.custom', {
-                postProcess: 'capitalizeFirstChar',
+                return (
+                  <ToggleButton
+                    key={option.value}
+                    disabled={option.value !== 'custom' && !data}
+                    value={option.value}
+                    sx={{
+                      alignItems: 'flex-start',
+                      alignContent: option.helper ? 'start' : 'center',
+                      bgcolor:
+                        selectFeeType === option.value
+                          ? 'rgba(24,189,242,0.1)'
+                          : 'rgba(0,8,16,0.2)',
+                      color: 'text.primary',
+                      display: 'grid',
+                      gap: 0.28,
+                      justifyItems: 'start',
+                      minHeight: 64,
+                      overflow: 'hidden',
+                      px: 1,
+                      py: 0.85,
+                      textAlign: 'left',
+                      textTransform: 'none',
+                      '&.Mui-selected': {
+                        bgcolor: 'rgba(24,189,242,0.12)',
+                        borderColor: 'rgba(24,189,242,0.54) !important',
+                        color: 'primary.main',
+                      },
+                      '&.Mui-selected:hover, &:hover': {
+                        bgcolor: 'rgba(24,189,242,0.1)',
+                      },
+                    }}
+                  >
+                    <Typography
+                      sx={{
+                        fontSize: 12.5,
+                        fontWeight: 700,
+                        lineHeight: 1.05,
+                      }}
+                    >
+                      {option.label}
+                    </Typography>
+                    <Typography
+                      sx={{
+                        color:
+                          selectFeeType === option.value
+                            ? 'primary.main'
+                            : 'text.secondary',
+                        fontSize: 11.5,
+                        fontWeight: 550,
+                        lineHeight: 1.05,
+                        minWidth: 0,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        width: '100%',
+                      }}
+                    >
+                      {valueText}
+                    </Typography>
+                    {option.helper && (
+                      <Typography
+                        sx={{
+                          color:
+                            selectFeeType === option.value
+                              ? 'primary.main'
+                              : 'text.secondary',
+                          fontSize: 10.8,
+                          fontWeight: 700,
+                          lineHeight: 1.05,
+                          opacity: selectFeeType === option.value ? 0.95 : 0.7,
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                          width: '100%',
+                        }}
+                      >
+                        {option.helper}
+                      </Typography>
+                    )}
+                  </ToggleButton>
+                );
               })}
-            </ToggleButton>
-          </ToggleButtonGroup>
+            </ToggleButtonGroup>
 
-          {selectFeeType === 'custom' && (
-            <CoinActionRow>
-              <HeaderRow>
-                <Box>
-                  <CustomLabel htmlFor="standard-adornment-name">
-                    {t('core:fee.custom', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </CustomLabel>
-
-                  <TextField
-                    id="standard-adornment-name"
-                    type="number"
-                    value={customFee}
-                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCustomFee(+e.target.value)}
-                    autoComplete="off"
-                  />
-                </Box>
-              </HeaderRow>
-            </CoinActionRow>
-          )}
-        </CoinActionContainer>
-
-        <Typography
-          id="ltc-fee-slider"
-          sx={{
-            marginTop: '15px',
-          }}
-        >
-          {t('core:fee.current', {
-            fee: currentFee,
-            postProcess: 'capitalizeFirstChar',
-          })}
-        </Typography>
+            {selectFeeType === 'custom' && (
+              <TextField
+                type="number"
+                value={customFee}
+                onChange={(event: ChangeEvent<HTMLInputElement>) =>
+                  setCustomFee(+event.target.value)
+                }
+                autoComplete="off"
+                placeholder="0"
+                size="small"
+                fullWidth
+                slotProps={{
+                  htmlInput: {
+                    inputMode: 'numeric',
+                    min: 0,
+                  },
+                  input: {
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <Typography
+                          sx={{
+                            color: 'text.secondary',
+                            fontSize: 13,
+                            fontWeight: 500,
+                          }}
+                        >
+                          sat/kB
+                        </Typography>
+                      </InputAdornment>
+                    ),
+                  },
+                }}
+                sx={{
+                  maxWidth: '100%',
+                  '& .MuiOutlinedInput-root': {
+                    bgcolor: 'rgba(0,8,16,0.24)',
+                    borderRadius: 1.1,
+                    color: 'text.primary',
+                    fontSize: 14,
+                    fontWeight: 500,
+                    minHeight: 38,
+                    '& fieldset': {
+                      borderColor: 'rgba(116,158,180,0.2)',
+                    },
+                    '&:hover fieldset': {
+                      borderColor: 'rgba(116,158,180,0.34)',
+                    },
+                    '&.Mui-focused fieldset': {
+                      borderColor: 'rgba(24,189,242,0.62)',
+                      borderWidth: 1,
+                    },
+                  },
+                  '& .MuiOutlinedInput-input': {
+                    py: 0,
+                    '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button':
+                      {
+                        WebkitAppearance: 'none',
+                        margin: 0,
+                      },
+                  },
+                  '& input[type=number]': {
+                    MozAppearance: 'textfield',
+                  },
+                }}
+              />
+            )}
+          </Box>
+        </Collapse>
 
-        <Typography
-          align="center"
-          sx={{ fontWeight: 600, fontSize: '14px', marginTop: '15px' }}
-        >
-          {t('core:message.generic.low_fee_transation', {
-            postProcess: 'capitalizeFirstChar',
-          })}
-        </Typography>
+        {feeIsLong && !isDogeFee && (
+          <Tooltip title={feeTooltipTitle}>
+            <Box
+              sx={{
+                alignItems: 'center',
+                color: 'text.secondary',
+                display: 'inline-flex',
+                gap: 0.55,
+                gridColumn: {
+                  xs: '1',
+                  sm: selectFeeType === 'custom' ? '3 / 5' : '2 / 5',
+                },
+                justifySelf: { xs: 'start', sm: 'end' },
+                opacity: 0.72,
+                whiteSpace: 'nowrap',
+              }}
+            >
+              <InfoOutlined
+                sx={{ color: 'text.secondary', fontSize: 15, opacity: 0.82 }}
+              />
+              <Typography sx={{ fontSize: 12.5, fontWeight: 500 }}>
+                {compactFeeText}
+              </Typography>
+            </Box>
+          </Tooltip>
+        )}
       </Box>
     </Box>
   );
diff --git a/src/components/WalletWorkspace/index.tsx b/src/components/WalletWorkspace/index.tsx
new file mode 100644
index 0000000..8386cad
--- /dev/null
+++ b/src/components/WalletWorkspace/index.tsx
@@ -0,0 +1,2985 @@
+import {
+  Add,
+  CheckCircleOutline,
+  Close,
+  CopyAllTwoTone,
+  Edit,
+  ErrorOutline,
+  FileDownloadOutlined,
+  InfoOutlined,
+  LockOutlined,
+  NorthEast,
+  Refresh,
+  Search,
+  SouthWest,
+  Star,
+  StarBorder,
+  Sync,
+  VerifiedRounded,
+} from '@mui/icons-material';
+import {
+  Avatar,
+  Box,
+  Button,
+  Collapse,
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  InputAdornment,
+  LinearProgress,
+  TablePagination,
+  TextField,
+  Typography,
+} from '@mui/material';
+import type { Theme } from '@mui/material/styles';
+import { Coin } from 'qapp-core';
+import {
+  ChangeEvent,
+  DragEvent,
+  KeyboardEvent,
+  MouseEvent,
+  ReactNode,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import QRCode from 'react-qr-code';
+import arrrCoinRender from '../../assets/wallet-renders/arrr-coin-render.png';
+import arrrCoinIcon from '../../assets/arrr.png';
+import btcCoinRender from '../../assets/wallet-renders/btc-coin-render.png';
+import btcCoinIcon from '../../assets/btc.png';
+import dgbCoinRender from '../../assets/wallet-renders/dgb-coin-render.png';
+import dgbCoinIcon from '../../assets/dgb.png';
+import dogeCoinRender from '../../assets/wallet-renders/doge-coin-render.png';
+import dogeCoinIcon from '../../assets/doge.png';
+import ltcCoinRender from '../../assets/wallet-renders/ltc-coin-render.png';
+import ltcCoinIcon from '../../assets/ltc.png';
+import qortCoinRender from '../../assets/wallet-renders/qort-coin-render.png';
+import qortCoinIcon from '../../assets/qort.png';
+import rvnCoinRender from '../../assets/wallet-renders/rvn-coin-render.png';
+import rvnCoinIcon from '../../assets/rvn.png';
+import {
+  copyToClipboard,
+  cropString,
+  epochToAgo,
+} from '../../common/functions';
+import {
+  CustomWidthTooltip,
+  WalletButtons,
+  WalletCard,
+} from '../../styles/page-styles';
+import { AddressBookEntry } from '../../utils/Types';
+import {
+  ADDRESS_BOOK_STORAGE_EVENT,
+  getAddressBook,
+  moveAddressBookEntry,
+  toggleAddressBookFavorite,
+  updateAddress,
+} from '../../utils/addressBookStorage';
+import { AddressFormDialog } from '../AddressBook/AddressFormDialog';
+import {
+  getAddressBookAvatarColor,
+  getAddressBookAvatarSx,
+} from '../AddressBook/avatarPalette';
+
+export type WalletCoinSymbol =
+  | 'QORT'
+  | 'BTC'
+  | 'LTC'
+  | 'DOGE'
+  | 'DGB'
+  | 'RVN'
+  | 'ARRR';
+
+type WalletVisual = {
+  accent: string;
+  coinIcon: string;
+  coinImage: string;
+  coinType: Coin;
+  decimals: number;
+  glow: string;
+  glowSoft: string;
+  name: string;
+  symbol: WalletCoinSymbol;
+};
+
+export const WALLET_VISUALS: Record<WalletCoinSymbol, WalletVisual> = {
+  QORT: {
+    accent: '#18bdf2',
+    coinIcon: qortCoinIcon,
+    coinImage: qortCoinRender,
+    coinType: Coin.QORT,
+    decimals: 2,
+    glow: 'rgba(24, 189, 242, 0.42)',
+    glowSoft: 'rgba(24, 189, 242, 0.13)',
+    name: 'Qortal',
+    symbol: 'QORT',
+  },
+  BTC: {
+    accent: '#f6a70b',
+    coinIcon: btcCoinIcon,
+    coinImage: btcCoinRender,
+    coinType: Coin.BTC,
+    decimals: 8,
+    glow: 'rgba(246, 167, 11, 0.38)',
+    glowSoft: 'rgba(246, 167, 11, 0.11)',
+    name: 'Bitcoin',
+    symbol: 'BTC',
+  },
+  LTC: {
+    accent: '#b9c4d4',
+    coinIcon: ltcCoinIcon,
+    coinImage: ltcCoinRender,
+    coinType: Coin.LTC,
+    decimals: 8,
+    glow: 'rgba(185, 196, 212, 0.36)',
+    glowSoft: 'rgba(185, 196, 212, 0.12)',
+    name: 'Litecoin',
+    symbol: 'LTC',
+  },
+  DOGE: {
+    accent: '#d7aa36',
+    coinIcon: dogeCoinIcon,
+    coinImage: dogeCoinRender,
+    coinType: Coin.DOGE,
+    decimals: 8,
+    glow: 'rgba(215, 170, 54, 0.36)',
+    glowSoft: 'rgba(215, 170, 54, 0.11)',
+    name: 'Dogecoin',
+    symbol: 'DOGE',
+  },
+  DGB: {
+    accent: '#2a75d9',
+    coinIcon: dgbCoinIcon,
+    coinImage: dgbCoinRender,
+    coinType: Coin.DGB,
+    decimals: 8,
+    glow: 'rgba(42, 117, 217, 0.36)',
+    glowSoft: 'rgba(42, 117, 217, 0.12)',
+    name: 'DigiByte',
+    symbol: 'DGB',
+  },
+  RVN: {
+    accent: '#f09a38',
+    coinIcon: rvnCoinIcon,
+    coinImage: rvnCoinRender,
+    coinType: Coin.RVN,
+    decimals: 8,
+    glow: 'rgba(240, 154, 56, 0.36)',
+    glowSoft: 'rgba(56, 102, 214, 0.14)',
+    name: 'Ravencoin',
+    symbol: 'RVN',
+  },
+  ARRR: {
+    accent: '#e0b64a',
+    coinIcon: arrrCoinIcon,
+    coinImage: arrrCoinRender,
+    coinType: Coin.ARRR,
+    decimals: 8,
+    glow: 'rgba(224, 182, 74, 0.36)',
+    glowSoft: 'rgba(224, 182, 74, 0.11)',
+    name: 'Pirate Chain',
+    symbol: 'ARRR',
+  },
+};
+
+const getWalletVars = (visual: WalletVisual) =>
+  ({
+    '--wallet-accent': visual.accent,
+    '--wallet-coin-image': `url(${visual.coinImage})`,
+    '--wallet-glow': visual.glow,
+    '--wallet-glow-soft': visual.glowSoft,
+  }) as Record<string, string>;
+
+type WalletGlowLayerKey = 'coinShadow' | 'floorReflection' | 'floorShadow';
+
+type WalletGlowLayerSettings = {
+  blur: number;
+  intensity: number;
+  spread: number;
+  x: number;
+  y: number;
+};
+
+type WalletGlowDevSettings = Record<
+  WalletGlowLayerKey,
+  WalletGlowLayerSettings
+>;
+
+const DEFAULT_WALLET_GLOW_SETTINGS: WalletGlowDevSettings = {
+  coinShadow: { blur: 57, intensity: 75, spread: 75, x: -7, y: 2 },
+  floorReflection: { blur: 8, intensity: 220, spread: 109, x: -16, y: 14 },
+  floorShadow: { blur: 7, intensity: 220, spread: 100, x: -7, y: 0 },
+};
+
+const createWalletGlowCssVars = (settings: WalletGlowDevSettings) => {
+  const layerVars = (prefix: string, layer: WalletGlowLayerSettings) => ({
+    [`--${prefix}-blur`]: `${layer.blur}px`,
+    [`--${prefix}-intensity`]: `${layer.intensity / 100}`,
+    [`--${prefix}-spread`]: `${layer.spread / 100}`,
+    [`--${prefix}-x`]: `${layer.x}px`,
+    [`--${prefix}-y`]: `${layer.y}px`,
+  });
+
+  return {
+    ...layerVars('wallet-coin-shadow', settings.coinShadow),
+    '--wallet-coin-shadow-blur-effective': `${
+      (settings.coinShadow.blur * settings.coinShadow.spread) / 100
+    }px`,
+    '--wallet-coin-shadow-x-effective': `${
+      (settings.coinShadow.x * settings.coinShadow.spread) / 100
+    }px`,
+    '--wallet-coin-shadow-y-effective': `${
+      (settings.coinShadow.y * settings.coinShadow.spread) / 100
+    }px`,
+    ...layerVars('wallet-floor-reflection', settings.floorReflection),
+    ...layerVars('wallet-floor-shadow', settings.floorShadow),
+  } as Record<string, string>;
+};
+
+const WALLET_GLOW_CSS_VARS = createWalletGlowCssVars(
+  DEFAULT_WALLET_GLOW_SETTINGS
+);
+
+const RECEIVE_QR_SLOT_HEIGHT = 404;
+
+const walletOuterSurfaceSx = {
+  backgroundColor: (t: Theme) =>
+    t.palette.mode === 'dark'
+      ? 'rgba(8, 32, 50, 0.66)'
+      : t.palette.background.paper,
+  backgroundImage: (t: Theme) =>
+    t.palette.mode === 'dark'
+      ? 'linear-gradient(180deg, rgba(13, 48, 72, 0.54) 0%, rgba(7, 28, 45, 0.58) 100%)'
+      : 'none',
+} as const;
+
+const walletInnerSurfaceSx = {
+  bgcolor: (t: Theme) =>
+    t.palette.mode === 'dark' ? 'rgba(17, 60, 86, 0.34)' : 'background.paper',
+} as const;
+
+export const formatWalletAmount = (
+  value: unknown,
+  symbol: WalletCoinSymbol,
+  decimals = WALLET_VISUALS[symbol].decimals
+) => {
+  if (value === null || value === undefined || value === '')
+    return `0 ${symbol}`;
+
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) return `${String(value)} ${symbol}`;
+
+  return `${new Intl.NumberFormat('en-US', {
+    maximumFractionDigits: decimals,
+    minimumFractionDigits: 0,
+  }).format(numeric)} ${symbol}`;
+};
+
+const WALLET_BALANCE_DISPLAY_LIMIT = '999,999.99'.length;
+
+const formatWalletDisplayAmount = (
+  value: unknown,
+  symbol: WalletCoinSymbol,
+  decimals = WALLET_VISUALS[symbol].decimals
+) => {
+  if (value === null || value === undefined || value === '')
+    return `0 ${symbol}`;
+
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) return `${String(value)} ${symbol}`;
+
+  const formatter = (maximumFractionDigits: number) =>
+    new Intl.NumberFormat('en-US', {
+      maximumFractionDigits,
+      minimumFractionDigits: 0,
+    }).format(numeric);
+
+  let maximumFractionDigits = decimals;
+  let formatted = formatter(maximumFractionDigits);
+
+  while (
+    formatted.length > WALLET_BALANCE_DISPLAY_LIMIT &&
+    maximumFractionDigits > 0
+  ) {
+    maximumFractionDigits -= 1;
+    formatted = formatter(maximumFractionDigits);
+  }
+
+  return `${formatted} ${symbol}`;
+};
+
+function ReceiveActionIcon({ open }: { open: boolean }) {
+  const transition =
+    'opacity 260ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1)';
+
+  return (
+    <Box
+      aria-hidden="true"
+      component="span"
+      sx={{
+        alignItems: 'center',
+        display: 'inline-grid',
+        height: 20,
+        justifyItems: 'center',
+        position: 'relative',
+        width: 20,
+        '& svg': {
+          fontSize: 20,
+          gridArea: '1 / 1',
+          position: 'absolute',
+          transformOrigin: 'center',
+          transition,
+        },
+      }}
+    >
+      <SouthWest
+        sx={{
+          opacity: open ? 0 : 1,
+          transform: open
+            ? 'rotate(225deg) scale(0.42)'
+            : 'rotate(0deg) scale(1)',
+        }}
+      />
+      <Close
+        sx={{
+          opacity: open ? 1 : 0,
+          transform: open
+            ? 'rotate(0deg) scale(1)'
+            : 'rotate(-225deg) scale(0.42)',
+        }}
+      />
+    </Box>
+  );
+}
+
+function ReceiveActionLabel({
+  hideReceiveLabel,
+  open,
+  receiveLabel,
+}: {
+  hideReceiveLabel: string;
+  open: boolean;
+  receiveLabel: string;
+}) {
+  const labelSx = (visible: boolean, direction: number) =>
+    ({
+      gridArea: '1 / 1',
+      opacity: visible ? 1 : 0,
+      transform: visible
+        ? 'translateY(0) scale(1)'
+        : `translateY(${direction * 8}px) scale(0.94)`,
+      transition:
+        'opacity 240ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1)',
+      whiteSpace: 'nowrap',
+    }) as const;
+
+  return (
+    <Box
+      aria-hidden="true"
+      component="span"
+      sx={{
+        alignItems: 'center',
+        display: 'inline-grid',
+        justifyItems: 'center',
+        minWidth: '7ch',
+      }}
+    >
+      <Box component="span" sx={labelSx(!open, -1)}>
+        {receiveLabel}
+      </Box>
+      <Box component="span" sx={labelSx(open, 1)}>
+        {hideReceiveLabel}
+      </Box>
+    </Box>
+  );
+}
+
+function ReceiveQrMotionContent({
+  address,
+  coin,
+  onQrClick,
+  open,
+}: ReceiveQrPanelProps & { open: boolean }) {
+  const [entered, setEntered] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      setEntered(false);
+      return undefined;
+    }
+
+    const frameId = requestAnimationFrame(() => setEntered(true));
+    return () => {
+      cancelAnimationFrame(frameId);
+    };
+  }, [open]);
+
+  const visible = open && entered;
+
+  return (
+    <Box
+      sx={{
+        opacity: visible ? 1 : 0,
+        transformOrigin: 'top center',
+        transition: open ? 'opacity 260ms ease-out' : 'opacity 320ms ease-in',
+        willChange: 'opacity',
+      }}
+    >
+      <ReceiveQrPanel address={address} coin={coin} onQrClick={onQrClick} />
+    </Box>
+  );
+}
+
+type ReceiveQrDialogProps = {
+  address?: string | null;
+  coin: WalletCoinSymbol;
+  onClose: () => void;
+  open: boolean;
+};
+
+function ReceiveQrDialog({
+  address,
+  coin,
+  onClose,
+  open,
+}: ReceiveQrDialogProps) {
+  const visual = WALLET_VISUALS[coin];
+  const value = address ?? '';
+
+  return (
+    <Dialog
+      disableScrollLock
+      fullWidth
+      maxWidth={false}
+      onClose={onClose}
+      open={open}
+      slotProps={{
+        paper: {
+          sx: {
+            ...getWalletVars(visual),
+            backgroundColor: 'rgba(3, 17, 29, 0.985)',
+            backgroundImage:
+              'radial-gradient(circle at 16% 8%, color-mix(in srgb, var(--wallet-accent) 16%, transparent), transparent 34%), linear-gradient(180deg, rgba(5,24,39,0.99) 0%, rgba(3,13,23,0.995) 100%)',
+            border: '1px solid rgba(91,132,158,0.28)',
+            borderRadius: 2,
+            boxShadow:
+              '0 28px 72px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04)',
+            color: 'text.primary',
+            overflow: 'hidden',
+            width: 'min(386px, calc(100vw - 28px))',
+          },
+        },
+      }}
+    >
+      <DialogTitle
+        sx={{
+          alignItems: 'center',
+          display: 'flex',
+          gap: 1.35,
+          minHeight: 74,
+          pb: 1.3,
+          pl: 2.4,
+          pr: 6,
+          pt: 2,
+        }}
+      >
+        <Box
+          component="img"
+          alt={`${visual.symbol} coin`}
+          src={visual.coinImage}
+          sx={{
+            filter: 'drop-shadow(0 0 18px var(--wallet-glow-soft))',
+            height: 38,
+            objectFit: 'contain',
+            width: 38,
+          }}
+        />
+        <Box sx={{ minWidth: 0 }}>
+          <Typography
+            sx={{
+              fontSize: 19,
+              fontWeight: 800,
+              letterSpacing: 0,
+              lineHeight: 1.1,
+            }}
+          >
+            Receive {visual.symbol}
+          </Typography>
+          <Typography
+            sx={{
+              color: 'text.secondary',
+              fontSize: 12.5,
+              fontWeight: 600,
+              lineHeight: 1.3,
+              mt: 0.35,
+            }}
+          >
+            {visual.name} address
+          </Typography>
+        </Box>
+        <IconButton
+          aria-label="Close receive QR dialog"
+          onClick={onClose}
+          size="small"
+          sx={{
+            color: 'text.secondary',
+            position: 'absolute',
+            right: 14,
+            top: 14,
+            '&:hover': {
+              bgcolor: 'rgba(116,158,180,0.08)',
+              color: 'text.primary',
+            },
+          }}
+        >
+          <Close fontSize="small" />
+        </IconButton>
+      </DialogTitle>
+      <DialogContent
+        sx={{
+          display: 'grid',
+          gap: 1.55,
+          justifyItems: 'center',
+          px: 2.4,
+          pb: 2.4,
+          pt: 0,
+        }}
+      >
+        <Box
+          sx={{
+            bgcolor: '#fff',
+            borderRadius: 1.25,
+            boxShadow:
+              '0 0 0 1px rgba(255,255,255,0.08), 0 18px 42px rgba(0,0,0,0.22)',
+            p: 1.1,
+            width: 'min(246px, 100%)',
+          }}
+        >
+          <QRCode
+            value={value}
+            size={224}
+            fgColor="#000000"
+            bgColor="#ffffff"
+            level="H"
+            style={{ display: 'block', height: '100%', width: '100%' }}
+          />
+        </Box>
+        <Box
+          sx={{
+            alignItems: 'center',
+            bgcolor: 'rgba(3, 16, 27, 0.64)',
+            border: '1px solid rgba(116,158,180,0.16)',
+            borderRadius: 1,
+            display: 'flex',
+            gap: 1,
+            minHeight: 46,
+            px: 1.2,
+            width: '100%',
+          }}
+        >
+          <Typography
+            sx={{
+              color: value ? 'text.primary' : 'text.secondary',
+              flex: 1,
+              fontSize: 13.5,
+              fontWeight: 700,
+              minWidth: 0,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {value || 'No address available'}
+          </Typography>
+          <CustomWidthTooltip placement="top" title="Copy address">
+            <span style={{ display: 'inline-flex' }}>
+              <IconButton
+                disabled={!value}
+                onClick={() => copyToClipboard(value)}
+                size="small"
+                sx={{
+                  color: 'text.secondary',
+                  ml: 'auto',
+                  '&:hover': { color: 'var(--wallet-accent)' },
+                }}
+              >
+                <CopyAllTwoTone fontSize="small" />
+              </IconButton>
+            </span>
+          </CustomWidthTooltip>
+        </Box>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+const toFiniteWalletNumber = (value: unknown) => {
+  const parsed =
+    typeof value === 'number' ? value : Number.parseFloat(String(value ?? 0));
+  return Number.isFinite(parsed) ? parsed : null;
+};
+
+const useChargingBalance = (
+  value: unknown,
+  isLoading?: boolean,
+  balanceError?: string | null
+) => {
+  const [animatedValue, setAnimatedValue] = useState<number | null>(null);
+  const previousTargetRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    const target = toFiniteWalletNumber(value);
+
+    if (isLoading || balanceError || target === null) {
+      previousTargetRef.current = null;
+      setAnimatedValue(null);
+      return;
+    }
+
+    const previousTarget = previousTargetRef.current;
+    previousTargetRef.current = target;
+
+    if (previousTarget === target) {
+      setAnimatedValue(target);
+      return;
+    }
+
+    const absTarget = Math.abs(target);
+    const chargeOffset =
+      absTarget > 0
+        ? Math.max(absTarget * 0.035, Math.min(absTarget, 0.01))
+        : 0;
+    const startValue =
+      target >= 0 ? Math.max(0, target - chargeOffset) : target;
+    const duration = 720;
+    const startedAt = performance.now();
+    let frameId = 0;
+
+    const tick = (now: number) => {
+      const progress = Math.min(1, (now - startedAt) / duration);
+      const eased = 1 - Math.pow(1 - progress, 3);
+      setAnimatedValue(startValue + (target - startValue) * eased);
+
+      if (progress < 1) {
+        frameId = requestAnimationFrame(tick);
+      }
+    };
+
+    setAnimatedValue(startValue);
+    frameId = requestAnimationFrame(tick);
+
+    return () => cancelAnimationFrame(frameId);
+  }, [balanceError, isLoading, value]);
+
+  return animatedValue;
+};
+
+type WalletSummaryCardProps = {
+  address?: string | null;
+  balance?: unknown;
+  balanceDecimals?: number;
+  balanceError?: string | null;
+  coin: WalletCoinSymbol;
+  copyAddressLabel?: string;
+  hideReceiveLabel?: string;
+  isBalanceLoading?: boolean;
+  noAddressLabel?: string;
+  onSend: () => void;
+  onToggleReceive: () => void;
+  receiveLabel?: string;
+  receiveOpen: boolean;
+  sendLabel?: string;
+};
+
+export function WalletSummaryCard({
+  address,
+  balance,
+  balanceDecimals,
+  balanceError,
+  coin,
+  copyAddressLabel = 'Copy address',
+  hideReceiveLabel = 'Hide QR',
+  isBalanceLoading,
+  noAddressLabel = 'No address available',
+  onSend,
+  onToggleReceive,
+  receiveLabel = 'Receive',
+  receiveOpen,
+  sendLabel = 'Send',
+}: WalletSummaryCardProps) {
+  const visual = WALLET_VISUALS[coin];
+  const addressLabel = address || noAddressLabel;
+  const animatedBalance = useChargingBalance(
+    balance,
+    isBalanceLoading,
+    balanceError
+  );
+  const stableFormattedBalance = formatWalletDisplayAmount(
+    balance,
+    visual.symbol,
+    balanceDecimals
+  );
+  const displayFormattedBalance = formatWalletDisplayAmount(
+    animatedBalance ?? balance,
+    visual.symbol,
+    balanceDecimals
+  );
+  const balanceAmount = displayFormattedBalance.endsWith(` ${visual.symbol}`)
+    ? displayFormattedBalance.slice(0, -(visual.symbol.length + 1))
+    : displayFormattedBalance;
+  const balanceFitUnits = Math.max(5.6, stableFormattedBalance.length * 0.62);
+  const balanceFontSize = {
+    xs: `min(clamp(2rem, 12vw, 3rem), calc(100cqw / ${balanceFitUnits}))`,
+    md: `min(clamp(2.45rem, 4vw, 3.35rem), calc(100cqw / ${balanceFitUnits}))`,
+  };
+
+  return (
+    <WalletCard
+      sx={{
+        ...getWalletVars(visual),
+        backgroundColor: 'transparent',
+        backgroundImage: 'none',
+        borderColor: 'transparent',
+        borderRadius: 0,
+        boxShadow: 'none',
+        minHeight: { md: 250 },
+        overflow: 'visible',
+        position: 'relative',
+        width: '100%',
+      }}
+    >
+      <Box
+        sx={{
+          alignItems: 'center',
+          display: 'grid',
+          gap: { xs: 2.25, md: 2.5 },
+          gridTemplateColumns: {
+            xs: '1fr',
+            md: 'minmax(150px, 0.46fr) minmax(220px, 0.68fr) minmax(280px, 0.86fr)',
+            xl: 'minmax(250px, 0.55fr) minmax(285px, 0.72fr) minmax(380px, 0.95fr)',
+          },
+          minHeight: { md: 250 },
+          pb: { xs: 2.25, md: 2.45 },
+          pl: { xs: 2.25, md: 2.5, lg: 3.4 },
+          pr: { xs: 2.25, md: 4.1 },
+          pt: { xs: 2.25, md: 2.45 },
+          position: 'relative',
+          zIndex: 1,
+        }}
+      >
+        <Box
+          aria-hidden="true"
+          sx={{
+            alignItems: 'center',
+            display: 'flex',
+            isolation: 'isolate',
+            justifyContent: { xs: 'center', md: 'flex-start' },
+            minHeight: { xs: 188, md: 210 },
+            minWidth: 0,
+            overflow: 'visible',
+            position: 'relative',
+            '&::before': {
+              background:
+                'radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.48) 0%, rgba(0,0,0,0.25) 35%, transparent 72%)',
+              bottom: { xs: 16, md: 21 },
+              content: '""',
+              filter: 'blur(var(--wallet-floor-shadow-blur, 7px))',
+              height: { xs: 20, md: 24 },
+              left: { xs: '21%', md: '7%' },
+              opacity: 'calc(0.62 * var(--wallet-floor-shadow-intensity, 1))',
+              pointerEvents: 'none',
+              position: 'absolute',
+              transform:
+                'translate(var(--wallet-floor-shadow-x, 0px), var(--wallet-floor-shadow-y, 0px)) perspective(180px) rotateX(64deg) scale(var(--wallet-floor-shadow-spread, 1))',
+              width: { xs: '58%', md: '78%' },
+              zIndex: 0,
+            },
+            '&::after': {
+              background: `
+                radial-gradient(ellipse at 48% 54%, color-mix(in srgb, var(--wallet-accent) 58%, transparent) 0%, color-mix(in srgb, var(--wallet-accent) 28%, transparent) 17%, transparent 50%),
+                radial-gradient(ellipse at 50% 66%, rgba(255,255,255,0.18) 0%, color-mix(in srgb, var(--wallet-accent) 18%, transparent) 12%, transparent 36%),
+                linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--wallet-accent) 22%, transparent) 26%, color-mix(in srgb, var(--wallet-accent) 11%, transparent) 55%, transparent 86%)
+              `,
+              bottom: { xs: 13, md: 17 },
+              borderRadius: '50%',
+              content: '""',
+              filter: 'blur(var(--wallet-floor-reflection-blur, 8px))',
+              height: { xs: 28, md: 38 },
+              left: { xs: '12%', md: '-3%' },
+              opacity:
+                'calc(0.78 * var(--wallet-floor-reflection-intensity, 1))',
+              pointerEvents: 'none',
+              position: 'absolute',
+              transform:
+                'translate(var(--wallet-floor-reflection-x, 0px), var(--wallet-floor-reflection-y, 0px)) perspective(190px) rotateX(66deg) scale(var(--wallet-floor-reflection-spread, 1))',
+              width: { xs: '82%', md: '126%' },
+              zIndex: 0,
+            },
+          }}
+        >
+          <Box
+            sx={{
+              alignItems: 'center',
+              aspectRatio: '1 / 1',
+              display: 'flex',
+              justifyContent: 'center',
+              position: 'relative',
+              width: 'clamp(154px, 15.4vw, 236px)',
+              zIndex: 1,
+            }}
+          >
+            <Box
+              component="img"
+              alt=""
+              src={visual.coinImage}
+              sx={{
+                filter:
+                  'drop-shadow(var(--wallet-coin-shadow-x-effective, 0px) var(--wallet-coin-shadow-y-effective, 28px) var(--wallet-coin-shadow-blur-effective, 24px) rgba(0,0,0,calc(0.52 * var(--wallet-coin-shadow-intensity, 1)))) drop-shadow(0 0 11px color-mix(in srgb, var(--wallet-accent) 76%, transparent)) drop-shadow(22px 0 30px color-mix(in srgb, var(--wallet-accent) 28%, transparent))',
+                maxHeight: 'clamp(150px, 16.2vw, 250px)',
+                maxWidth: 'clamp(150px, 16.2vw, 250px)',
+                objectFit: 'contain',
+                opacity: 0.96,
+                position: 'relative',
+                animation: 'walletCoinFloat 5200ms ease-in-out infinite',
+                width: '112%',
+                zIndex: 1,
+                '@keyframes walletCoinFloat': {
+                  '0%, 100%': {
+                    transform: 'translateY(0) rotate(-4deg)',
+                  },
+                  '50%': {
+                    transform: 'translateY(-5px) rotate(-3.2deg)',
+                  },
+                },
+              }}
+            />
+          </Box>
+        </Box>
+
+        <Box
+          sx={{
+            alignContent: 'center',
+            display: 'grid',
+            gap: { xs: 1.85, md: 1.7 },
+            minHeight: { md: 170 },
+            minWidth: 0,
+          }}
+        >
+          <Box
+            sx={{
+              display: 'grid',
+              gap: 0.65,
+              minHeight: 58,
+              minWidth: 0,
+            }}
+          >
+            <Box sx={{ alignItems: 'center', display: 'flex', gap: 0.75 }}>
+              <Typography
+                sx={{
+                  color: 'text.primary',
+                  fontSize: { xs: 22, md: 24 },
+                  fontWeight: 700,
+                  lineHeight: 1.05,
+                }}
+              >
+                {visual.name} Wallet
+              </Typography>
+              <VerifiedRounded
+                sx={{
+                  color: 'var(--wallet-accent)',
+                  filter: 'drop-shadow(0 0 8px var(--wallet-glow))',
+                  fontSize: 19,
+                }}
+              />
+            </Box>
+            <Typography sx={{ color: 'text.secondary', fontWeight: 600 }}>
+              {visual.symbol}
+            </Typography>
+          </Box>
+
+          <Box
+            sx={{
+              containerType: 'inline-size',
+              minWidth: 0,
+            }}
+          >
+            <Typography
+              variant="body2"
+              sx={{ color: 'text.secondary', fontWeight: 500 }}
+            >
+              Available balance
+            </Typography>
+            <Typography
+              component="div"
+              sx={{
+                alignItems: 'baseline',
+                display: 'flex',
+                fontSize: balanceFontSize,
+                fontWeight: 700,
+                gap: '0.32em',
+                lineHeight: 1,
+                maxWidth: '100%',
+                minHeight: {
+                  xs: 'clamp(2.15rem, 12vw, 3.1rem)',
+                  md: 'clamp(2.6rem, 4vw, 3.45rem)',
+                },
+                mt: 0.55,
+                overflow: 'hidden',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {isBalanceLoading && !balanceError ? (
+                <Box sx={{ alignSelf: 'center', maxWidth: 260, width: '100%' }}>
+                  <LinearProgress />
+                </Box>
+              ) : balanceError ? (
+                <Typography color="error.main" sx={{ fontWeight: 700 }}>
+                  {balanceError}
+                </Typography>
+              ) : (
+                <>
+                  <Typography
+                    component="span"
+                    sx={{
+                      font: 'inherit',
+                      fontWeight: 'inherit',
+                      lineHeight: 1,
+                      minWidth: 0,
+                      overflow: 'hidden',
+                      textOverflow: 'clip',
+                      whiteSpace: 'nowrap',
+                    }}
+                  >
+                    {balanceAmount}
+                  </Typography>
+                  <Typography
+                    component="span"
+                    sx={{
+                      flexShrink: 0,
+                      fontSize: '0.34em',
+                      fontWeight: 700,
+                      lineHeight: 1,
+                    }}
+                  >
+                    {visual.symbol}
+                  </Typography>
+                </>
+              )}
+            </Typography>
+          </Box>
+        </Box>
+
+        <Box
+          sx={{
+            alignContent: 'center',
+            display: 'grid',
+            gap: 1.35,
+            minHeight: { md: 190 },
+          }}
+        >
+          <Typography
+            variant="caption"
+            sx={{
+              color: 'text.secondary',
+              fontSize: 13,
+              fontWeight: 600,
+              lineHeight: 1,
+            }}
+          >
+            Your Address
+          </Typography>
+          <Box
+            sx={{
+              alignItems: 'center',
+              background:
+                'linear-gradient(90deg, color-mix(in srgb, var(--wallet-accent) 7%, rgba(0, 8, 16, 0.4)) 0%, rgba(0, 8, 16, 0.36) 38%, rgba(0, 8, 16, 0.44) 100%)',
+              border:
+                '1px solid color-mix(in srgb, var(--wallet-accent) 18%, rgba(116,158,180,0.24))',
+              borderRadius: 1,
+              boxShadow:
+                'inset 1px 0 0 color-mix(in srgb, var(--wallet-accent) 18%, transparent), inset 0 1px 0 rgba(255,255,255,0.035)',
+              display: 'flex',
+              gap: 1,
+              minHeight: 54,
+              minWidth: 0,
+              px: 1.35,
+              py: 0.9,
+            }}
+          >
+            <Typography
+              variant="body2"
+              sx={{
+                color: address ? 'text.primary' : 'text.secondary',
+                fontSize: 14,
+                fontWeight: 600,
+                minWidth: 0,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {addressLabel}
+            </Typography>
+            <CustomWidthTooltip placement="top" title={copyAddressLabel}>
+              <IconButton
+                size="small"
+                onClick={() => copyToClipboard(address ?? '')}
+                sx={{
+                  color: 'text.secondary',
+                  ml: 'auto',
+                  '&:hover': { color: 'var(--wallet-accent)' },
+                }}
+              >
+                <CopyAllTwoTone fontSize="small" />
+              </IconButton>
+            </CustomWidthTooltip>
+          </Box>
+
+          <Box
+            sx={{
+              display: 'grid',
+              gap: 1.4,
+              gridTemplateColumns: { xs: '1fr', sm: '1fr 1fr' },
+            }}
+          >
+            <WalletButtons
+              variant="contained"
+              startIcon={<NorthEast />}
+              aria-label={`Send ${visual.symbol}`}
+              onClick={onSend}
+              sx={{
+                background:
+                  'linear-gradient(180deg, color-mix(in srgb, var(--wallet-accent) 36%, rgba(20,39,53,0.96)) 0%, color-mix(in srgb, var(--wallet-accent) 24%, rgba(7,18,30,0.98)) 100%)',
+                border:
+                  '1px solid color-mix(in srgb, var(--wallet-accent) 52%, transparent)',
+                boxShadow:
+                  '0 12px 28px color-mix(in srgb, var(--wallet-accent) 14%, transparent), inset 1px 0 0 color-mix(in srgb, var(--wallet-accent) 26%, transparent), inset 0 1px 0 rgba(255,255,255,0.1)',
+                color: 'text.primary',
+                fontSize: 15,
+                fontWeight: 700,
+                minHeight: 52,
+                '&:hover': {
+                  background:
+                    'linear-gradient(180deg, color-mix(in srgb, var(--wallet-accent) 46%, rgba(24,45,60,0.98)) 0%, color-mix(in srgb, var(--wallet-accent) 30%, rgba(7,18,30,0.98)) 100%)',
+                  borderColor: 'var(--wallet-accent)',
+                  boxShadow:
+                    '0 14px 32px color-mix(in srgb, var(--wallet-accent) 24%, transparent), inset 0 1px 0 rgba(255,255,255,0.12)',
+                },
+              }}
+            >
+              {sendLabel}
+            </WalletButtons>
+            <Button
+              aria-label={receiveOpen ? hideReceiveLabel : receiveLabel}
+              disableFocusRipple
+              disableRipple
+              onClick={onToggleReceive}
+              startIcon={<ReceiveActionIcon open={receiveOpen} />}
+              variant="outlined"
+              sx={{
+                bgcolor: 'rgba(0, 8, 16, 0.28)',
+                borderColor:
+                  'color-mix(in srgb, var(--wallet-accent) 16%, rgba(116,158,180,0.24))',
+                boxShadow:
+                  'inset 1px 0 0 color-mix(in srgb, var(--wallet-accent) 12%, transparent)',
+                color: 'var(--wallet-accent)',
+                fontSize: 15,
+                fontWeight: 700,
+                minHeight: 52,
+                transition:
+                  'background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease',
+                '& .MuiButton-startIcon': {
+                  alignItems: 'center',
+                  display: 'inline-flex',
+                  height: 20,
+                  justifyContent: 'center',
+                  mr: 0.9,
+                  width: 20,
+                },
+                '&:hover': {
+                  bgcolor:
+                    'color-mix(in srgb, var(--wallet-accent) 8%, transparent)',
+                  borderColor: 'var(--wallet-accent)',
+                },
+              }}
+            >
+              <ReceiveActionLabel
+                hideReceiveLabel={hideReceiveLabel}
+                open={receiveOpen}
+                receiveLabel={receiveLabel}
+              />
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    </WalletCard>
+  );
+}
+
+type ReceiveQrPanelProps = {
+  address?: string | null;
+  coin: WalletCoinSymbol;
+  copyLabel?: string;
+  downloadLabel?: string;
+  onQrClick?: () => void;
+};
+
+export function ReceiveQrPanel({
+  address,
+  coin,
+  downloadLabel = 'Download',
+  onQrClick,
+}: ReceiveQrPanelProps) {
+  const visual = WALLET_VISUALS[coin];
+  const qrRef = useRef<HTMLDivElement | null>(null);
+  const value = address ?? '';
+
+  const handleDownload = () => {
+    const svg = qrRef.current?.querySelector('svg');
+    if (!svg) return;
+
+    const clonedSvg = svg.cloneNode(true) as SVGElement;
+    clonedSvg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+    const svgData = new XMLSerializer().serializeToString(clonedSvg);
+    const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${visual.symbol.toLowerCase()}-receive-qr.svg`;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <WalletCard
+      sx={{
+        ...getWalletVars(visual),
+        ...walletOuterSurfaceSx,
+        alignItems: 'center',
+        boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.025)',
+        display: 'grid',
+        filter: 'none',
+        justifyItems: 'center',
+        minHeight: { md: 342 },
+        overflow: 'hidden',
+        p: { xs: 2, md: 2.25 },
+        width: '100%',
+      }}
+    >
+      <Box sx={{ textAlign: 'center', width: '100%' }}>
+        <Typography sx={{ fontSize: 15, fontWeight: 700, mb: 1.25 }}>
+          Receive {visual.symbol}
+        </Typography>
+        <Box
+          component="button"
+          type="button"
+          aria-label={`Show ${visual.symbol} receive QR code`}
+          onClick={onQrClick}
+          sx={{
+            appearance: 'none',
+            background: 'transparent',
+            border: 0,
+            borderRadius: 1.5,
+            cursor: onQrClick ? 'pointer' : 'default',
+            display: 'inline-grid',
+            font: 'inherit',
+            p: 0.35,
+            position: 'relative',
+            '&:hover .qr-target-frame': {
+              borderColor: 'var(--wallet-accent)',
+            },
+          }}
+        >
+          <Box
+            className="qr-target-frame"
+            sx={{
+              ...walletInnerSurfaceSx,
+              border: '1px solid rgba(116,158,180,0.16)',
+              borderRadius: 1.5,
+              p: 0.95,
+              position: 'relative',
+              transition: 'border-color 160ms ease',
+            }}
+          >
+            <Box
+              ref={qrRef}
+              sx={{
+                aspectRatio: '1 / 1',
+                bgcolor: '#fff',
+                borderRadius: 1,
+                p: 1.05,
+                width: { xs: 190, md: 212 },
+              }}
+            >
+              <QRCode
+                value={value}
+                size={204}
+                fgColor="#000000"
+                bgColor="#ffffff"
+                level="H"
+                style={{ height: '100%', width: '100%' }}
+              />
+            </Box>
+          </Box>
+        </Box>
+        <Typography variant="body2" sx={{ color: 'text.secondary', mt: 1.25 }}>
+          Scan to receive
+        </Typography>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            mt: 1.5,
+          }}
+        >
+          <Button
+            onClick={handleDownload}
+            size="small"
+            startIcon={<FileDownloadOutlined />}
+            variant="outlined"
+          >
+            {downloadLabel}
+          </Button>
+        </Box>
+      </Box>
+    </WalletCard>
+  );
+}
+
+type WalletAddressBookPanelProps = {
+  coin: WalletCoinSymbol;
+  onAddContact: () => void;
+  onAddressBookChange?: () => void;
+  onSelectAddress: (address: string, name: string) => void;
+  refreshKey?: unknown;
+};
+
+export function WalletAddressBookPanel({
+  coin,
+  onAddContact,
+  onAddressBookChange,
+  onSelectAddress,
+  refreshKey,
+}: WalletAddressBookPanelProps) {
+  const visual = WALLET_VISUALS[coin];
+  const [entries, setEntries] = useState<AddressBookEntry[]>([]);
+  const [search, setSearch] = useState('');
+  const [draggedEntryId, setDraggedEntryId] = useState<string | null>(null);
+  const [dragOverEntryId, setDragOverEntryId] = useState<string | null>(null);
+  const [editingEntry, setEditingEntry] = useState<
+    AddressBookEntry | undefined
+  >(undefined);
+  const [editFormOpen, setEditFormOpen] = useState(false);
+  const [editSaveError, setEditSaveError] = useState('');
+  const [suppressSelect, setSuppressSelect] = useState(false);
+
+  useEffect(() => {
+    setEntries(getAddressBook(visual.coinType));
+  }, [refreshKey, visual.coinType]);
+
+  useEffect(() => {
+    const handleAddressBookStorage = () => {
+      setEntries(getAddressBook(visual.coinType));
+    };
+
+    window.addEventListener(
+      ADDRESS_BOOK_STORAGE_EVENT,
+      handleAddressBookStorage
+    );
+    return () => {
+      window.removeEventListener(
+        ADDRESS_BOOK_STORAGE_EVENT,
+        handleAddressBookStorage
+      );
+    };
+  }, [visual.coinType]);
+
+  const visibleEntries = useMemo(() => {
+    const query = search.trim().toLowerCase();
+    if (!query) return entries;
+    return entries.filter(
+      (entry) =>
+        entry.name.toLowerCase().includes(query) ||
+        entry.address.toLowerCase().includes(query) ||
+        entry.note.toLowerCase().includes(query)
+    );
+  }, [entries, search]);
+
+  const maxVisibleContacts = 12;
+  const displayedEntries = visibleEntries.slice(0, maxVisibleContacts);
+  const hasMoreContacts = visibleEntries.length > maxVisibleContacts;
+
+  const reloadEntries = () => {
+    const nextEntries = getAddressBook(visual.coinType);
+    setEntries(nextEntries);
+    return nextEntries;
+  };
+
+  const handleToggleFavorite = (
+    event: MouseEvent<HTMLButtonElement>,
+    entry: AddressBookEntry
+  ) => {
+    event.stopPropagation();
+    event.currentTarget.blur();
+    const updatedEntries = toggleAddressBookFavorite(entry.id, visual.coinType);
+    if (updatedEntries) {
+      reloadEntries();
+      onAddressBookChange?.();
+    }
+  };
+
+  const handleEditContact = (
+    event: MouseEvent<HTMLButtonElement>,
+    entry: AddressBookEntry
+  ) => {
+    event.stopPropagation();
+    event.currentTarget.blur();
+    setEditSaveError('');
+    setEditingEntry(entry);
+    setEditFormOpen(true);
+  };
+
+  const handleEditFormClose = () => {
+    setEditFormOpen(false);
+  };
+
+  const handleEditFormExited = () => {
+    setEditingEntry(undefined);
+    setEditSaveError('');
+  };
+
+  const handleEditSave = (
+    entry: Omit<AddressBookEntry, 'id' | 'createdAt'>
+  ) => {
+    if (!editingEntry) return;
+
+    try {
+      const savedEntry = updateAddress(editingEntry.id, visual.coinType, {
+        name: entry.name,
+        address: entry.address,
+        note: entry.note,
+      });
+
+      if (!savedEntry) {
+        throw new Error('Could not save contact.');
+      }
+
+      reloadEntries();
+      setEditFormOpen(false);
+      setEditSaveError('');
+      onAddressBookChange?.();
+    } catch (error: any) {
+      console.error('Error saving address:', error);
+      setEditSaveError(
+        error?.message || 'Could not save contact. Please try again.'
+      );
+    }
+  };
+
+  const handleReorder = (sourceId: string, targetId: string) => {
+    const updatedEntries = moveAddressBookEntry(
+      visual.coinType,
+      sourceId,
+      targetId
+    );
+    if (updatedEntries) {
+      reloadEntries();
+      onAddressBookChange?.();
+    }
+  };
+
+  const handleDragStart = (
+    event: DragEvent<HTMLDivElement>,
+    entry: AddressBookEntry
+  ) => {
+    setDraggedEntryId(entry.id);
+    event.dataTransfer.effectAllowed = 'move';
+    event.dataTransfer.setData('text/plain', entry.id);
+  };
+
+  const handleDragOver = (
+    event: DragEvent<HTMLDivElement>,
+    entry: AddressBookEntry
+  ) => {
+    if (!draggedEntryId || draggedEntryId === entry.id) return;
+    event.preventDefault();
+    event.dataTransfer.dropEffect = 'move';
+    setDragOverEntryId(entry.id);
+  };
+
+  const handleDrop = (
+    event: DragEvent<HTMLDivElement>,
+    entry: AddressBookEntry
+  ) => {
+    event.preventDefault();
+    const sourceId = draggedEntryId || event.dataTransfer.getData('text/plain');
+    setDraggedEntryId(null);
+    setDragOverEntryId(null);
+
+    if (!sourceId || sourceId === entry.id) return;
+
+    setSuppressSelect(true);
+    handleReorder(sourceId, entry.id);
+    window.setTimeout(() => setSuppressSelect(false), 0);
+  };
+
+  const handleDragEnd = () => {
+    setDraggedEntryId(null);
+    setDragOverEntryId(null);
+  };
+
+  return (
+    <>
+      <WalletCard
+        sx={{
+          ...getWalletVars(visual),
+          background:
+            'linear-gradient(180deg, rgba(10, 34, 52, 0.82) 0%, rgba(7, 27, 43, 0.76) 100%)',
+          borderColor: 'rgba(116,158,180,0.14)',
+          boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.04)',
+          overflow: 'hidden',
+          width: '100%',
+        }}
+      >
+        <Box sx={{ px: { xs: 1.75, md: 2.1 }, py: { xs: 1.75, md: 2 } }}>
+          <Typography sx={{ fontSize: 16, fontWeight: 700, mb: 1.2 }}>
+            Address book ({visual.symbol})
+          </Typography>
+          <TextField
+            fullWidth
+            placeholder="Search by name, address or note"
+            size="small"
+            value={search}
+            onChange={(event) => setSearch(event.target.value)}
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <Search fontSize="small" sx={{ color: 'text.secondary' }} />
+                </InputAdornment>
+              ),
+            }}
+            sx={{
+              mb: 1.1,
+              '& .MuiInputBase-input': {
+                fontSize: 13,
+                lineHeight: '18px',
+                py: 0.65,
+              },
+              '& .MuiOutlinedInput-root': {
+                bgcolor: 'rgba(1, 12, 24, 0.34)',
+                minHeight: 32,
+                '& fieldset': {
+                  borderColor: (t) =>
+                    t.palette.mode === 'dark'
+                      ? 'rgba(116,158,180,0.18)'
+                      : 'rgba(17,24,39,0.08)',
+                },
+                '&:hover fieldset': { borderColor: 'primary.main' },
+              },
+            }}
+          />
+          <Button
+            fullWidth
+            startIcon={<Add />}
+            variant="outlined"
+            onClick={onAddContact}
+            sx={{
+              bgcolor: 'rgba(13, 48, 72, 0.32)',
+              borderColor: 'rgba(116,158,180,0.16)',
+              color: 'text.secondary',
+              fontWeight: 600,
+              mb: 1.35,
+              minHeight: 32,
+              py: 0.4,
+              '&:hover': {
+                bgcolor: (t) =>
+                  t.palette.mode === 'dark'
+                    ? 'rgba(18, 64, 94, 0.42)'
+                    : 'rgba(17,24,39,0.04)',
+                borderColor:
+                  'color-mix(in srgb, var(--wallet-accent, #18bdf2) 28%, transparent)',
+                color: 'text.primary',
+              },
+            }}
+          >
+            Add contact
+          </Button>
+
+          <Box
+            sx={{
+              display: 'grid',
+              gap: 0.45,
+              overflow: 'visible',
+            }}
+          >
+            {displayedEntries.length > 0 ? (
+              displayedEntries.map((entry, index) => {
+                const initials =
+                  entry.name
+                    .split(' ')
+                    .filter(Boolean)
+                    .map((part) => part[0])
+                    .join('')
+                    .slice(0, 2)
+                    .toUpperCase() || visual.symbol[0];
+                const avatarColor = getAddressBookAvatarColor(
+                  `${entry.name}-${entry.address}`,
+                  index
+                );
+
+                return (
+                  <Box
+                    key={entry.id}
+                    draggable
+                    role="button"
+                    tabIndex={0}
+                    onClick={(event: MouseEvent<HTMLDivElement>) => {
+                      if (suppressSelect) return;
+                      event.currentTarget.blur();
+                      onSelectAddress(entry.address, entry.name);
+                    }}
+                    onDragStart={(event) => handleDragStart(event, entry)}
+                    onDragOver={(event) => handleDragOver(event, entry)}
+                    onDrop={(event) => handleDrop(event, entry)}
+                    onDragEnd={handleDragEnd}
+                    onKeyDown={(event: KeyboardEvent<HTMLDivElement>) => {
+                      if (event.key === 'Enter' || event.key === ' ') {
+                        event.preventDefault();
+                        onSelectAddress(entry.address, entry.name);
+                      }
+                    }}
+                    sx={{
+                      alignItems: 'center',
+                      bgcolor: 'rgba(6, 25, 40, 0.22)',
+                      border: '1px solid rgba(116,158,180,0.075)',
+                      borderRadius: 1,
+                      cursor: 'grab',
+                      display: 'grid',
+                      gap: 0.85,
+                      gridTemplateColumns: '38px minmax(0, 1fr) 104px',
+                      minHeight: 46,
+                      opacity: draggedEntryId === entry.id ? 0.52 : 1,
+                      px: 1,
+                      py: 0.55,
+                      transition:
+                        'background-color 150ms ease, border-color 150ms ease, opacity 150ms ease',
+                      ...(dragOverEntryId === entry.id && {
+                        bgcolor: 'rgba(24,189,242,0.08)',
+                        borderColor: 'rgba(24,189,242,0.28)',
+                      }),
+                      '&:hover': {
+                        bgcolor: 'rgba(14, 49, 72, 0.3)',
+                        borderColor: 'rgba(116,158,180,0.13)',
+                      },
+                      '&:hover .contact-action, &:focus-within .contact-action':
+                        {
+                          opacity: 1,
+                          pointerEvents: 'auto',
+                          transform: 'translateX(0)',
+                        },
+                      '&:hover .contact-action-star, &:focus-within .contact-action-star':
+                        {
+                          right: 72,
+                        },
+                      '&:focus-visible': {
+                        borderColor:
+                          'color-mix(in srgb, var(--wallet-accent, #18bdf2) 44%, transparent)',
+                        outline: 'none',
+                      },
+                    }}
+                  >
+                    <Avatar
+                      sx={{
+                        ...getAddressBookAvatarSx(avatarColor),
+                        fontSize: 12,
+                        fontWeight: 600,
+                        height: 32,
+                        width: 32,
+                      }}
+                    >
+                      {initials}
+                    </Avatar>
+                    <Box
+                      sx={{
+                        alignContent: 'center',
+                        display: 'grid',
+                        gap: entry.note ? 0.2 : 0,
+                        minHeight: 32,
+                        minWidth: 0,
+                      }}
+                    >
+                      <Typography
+                        sx={{
+                          fontSize: 14,
+                          fontWeight: 600,
+                          lineHeight: 1.15,
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                        }}
+                      >
+                        {entry.name}
+                      </Typography>
+                      {entry.note && (
+                        <Typography
+                          variant="caption"
+                          sx={{
+                            color: 'text.secondary',
+                            display: 'block',
+                            fontSize: 12.5,
+                            lineHeight: 1.2,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                          }}
+                        >
+                          {entry.note}
+                        </Typography>
+                      )}
+                    </Box>
+                    <Box
+                      className="contact-actions"
+                      sx={{
+                        height: 32,
+                        justifySelf: 'end',
+                        position: 'relative',
+                        width: 104,
+                      }}
+                    >
+                      <CustomWidthTooltip placement="top" title="Copy address">
+                        <IconButton
+                          className="contact-action contact-action-copy"
+                          disableFocusRipple
+                          disableRipple
+                          size="small"
+                          onClick={(event: MouseEvent<HTMLButtonElement>) => {
+                            event.stopPropagation();
+                            event.currentTarget.blur();
+                            copyToClipboard(entry.address);
+                          }}
+                          sx={{
+                            bgcolor: 'transparent',
+                            border: '1px solid rgba(116,158,180,0.16)',
+                            borderRadius: 1,
+                            boxShadow: 'none',
+                            color: 'text.secondary',
+                            height: 32,
+                            opacity: 0,
+                            overflow: 'hidden',
+                            pointerEvents: 'none',
+                            position: 'absolute',
+                            right: 36,
+                            transform: 'translateX(10px)',
+                            transition:
+                              'opacity 180ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1), color 150ms ease, border-color 150ms ease, background-color 150ms ease',
+                            width: 32,
+                            '& .MuiTouchRipple-root': { display: 'none' },
+                            '&:hover': {
+                              bgcolor: 'rgba(116,158,180,0.08)',
+                              borderColor: 'rgba(116,158,180,0.26)',
+                              boxShadow: 'none',
+                              color: 'text.primary',
+                            },
+                          }}
+                        >
+                          <CopyAllTwoTone fontSize="small" />
+                        </IconButton>
+                      </CustomWidthTooltip>
+                      <CustomWidthTooltip
+                        placement="top"
+                        title={entry.favorite ? 'Remove favorite' : 'Favorite'}
+                      >
+                        <IconButton
+                          className="contact-action contact-action-star"
+                          disableFocusRipple
+                          disableRipple
+                          size="small"
+                          onClick={(event: MouseEvent<HTMLButtonElement>) =>
+                            handleToggleFavorite(event, entry)
+                          }
+                          sx={{
+                            bgcolor: 'transparent',
+                            border: entry.favorite
+                              ? 0
+                              : '1px solid rgba(116,158,180,0.16)',
+                            borderRadius: 1,
+                            boxShadow: 'none',
+                            color: entry.favorite
+                              ? '#f6c84c'
+                              : 'text.secondary',
+                            height: 32,
+                            opacity: entry.favorite ? 1 : 0,
+                            overflow: 'hidden',
+                            pointerEvents: entry.favorite ? 'auto' : 'none',
+                            position: 'absolute',
+                            right: entry.favorite ? 0 : 72,
+                            transform: entry.favorite
+                              ? 'translateX(0)'
+                              : 'translateX(10px)',
+                            transition:
+                              'opacity 180ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1), right 260ms cubic-bezier(0.16, 1, 0.3, 1), color 150ms ease, border-color 150ms ease, background-color 150ms ease',
+                            width: 32,
+                            '& .MuiTouchRipple-root': { display: 'none' },
+                            '&:hover': {
+                              bgcolor: 'rgba(246,200,76,0.08)',
+                              borderColor: 'rgba(246,200,76,0.28)',
+                              boxShadow: 'none',
+                              color: '#ffd76a',
+                            },
+                          }}
+                        >
+                          {entry.favorite ? (
+                            <Star sx={{ fontSize: 19 }} />
+                          ) : (
+                            <StarBorder sx={{ fontSize: 19 }} />
+                          )}
+                        </IconButton>
+                      </CustomWidthTooltip>
+                      <CustomWidthTooltip placement="top" title="Edit contact">
+                        <IconButton
+                          className="contact-action contact-action-edit"
+                          disableFocusRipple
+                          disableRipple
+                          size="small"
+                          onClick={(event: MouseEvent<HTMLButtonElement>) =>
+                            handleEditContact(event, entry)
+                          }
+                          sx={{
+                            bgcolor: 'transparent',
+                            border: '1px solid rgba(116,158,180,0.16)',
+                            borderRadius: 1,
+                            boxShadow: 'none',
+                            color: 'text.secondary',
+                            height: 32,
+                            opacity: 0,
+                            overflow: 'hidden',
+                            pointerEvents: 'none',
+                            position: 'absolute',
+                            right: 0,
+                            transform: 'translateX(10px)',
+                            transition:
+                              'opacity 180ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1), color 150ms ease, border-color 150ms ease, background-color 150ms ease',
+                            width: 32,
+                            '& .MuiTouchRipple-root': { display: 'none' },
+                            '&:hover': {
+                              bgcolor: 'rgba(116,158,180,0.08)',
+                              borderColor: 'rgba(116,158,180,0.26)',
+                              boxShadow: 'none',
+                              color: 'text.primary',
+                            },
+                          }}
+                        >
+                          <Edit fontSize="small" />
+                        </IconButton>
+                      </CustomWidthTooltip>
+                    </Box>
+                  </Box>
+                );
+              })
+            ) : (
+              <Box
+                sx={{
+                  alignItems: 'center',
+                  background:
+                    'linear-gradient(180deg, rgba(6, 30, 48, 0.2) 0%, rgba(4, 18, 31, 0.2) 100%)',
+                  border: '1px solid rgba(116,158,180,0.075)',
+                  borderRadius: 1,
+                  color: 'text.secondary',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  justifyContent: 'center',
+                  minHeight: { xs: 270, md: 300 },
+                  px: { xs: 2.4, md: 2.7 },
+                  py: { xs: 3.8, md: 4.35 },
+                  textAlign: 'center',
+                }}
+              >
+                <Box
+                  sx={{
+                    alignItems: 'center',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    mb: 2.1,
+                    position: 'relative',
+                  }}
+                >
+                  <Box
+                    sx={{
+                      alignItems: 'center',
+                      bgcolor: 'rgba(116,158,180,0.09)',
+                      border: '1px solid rgba(116,158,180,0.18)',
+                      borderRadius: 1.4,
+                      boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.035)',
+                      color: 'rgba(148,177,204,0.74)',
+                      display: 'grid',
+                      height: 62,
+                      justifyItems: 'center',
+                      width: 62,
+                    }}
+                  >
+                    <Box
+                      component="img"
+                      src={visual.coinIcon}
+                      alt=""
+                      sx={{
+                        filter:
+                          'drop-shadow(0 0 12px color-mix(in srgb, var(--wallet-accent, #18bdf2) 36%, transparent))',
+                        height: 36,
+                        opacity: 0.92,
+                        width: 36,
+                      }}
+                    />
+                  </Box>
+                </Box>
+                <Typography
+                  sx={{
+                    color: 'text.primary',
+                    fontSize: { xs: 16, md: 17 },
+                    fontWeight: 700,
+                    lineHeight: 1.2,
+                  }}
+                >
+                  {search.trim()
+                    ? 'No matching contacts found'
+                    : `No ${visual.symbol} contacts yet`}
+                </Typography>
+                <Typography
+                  variant="body2"
+                  sx={{
+                    color: 'text.secondary',
+                    fontSize: { xs: 13, md: 13.5 },
+                    lineHeight: 1.45,
+                    maxWidth: 310,
+                    mt: 1.15,
+                    opacity: 0.86,
+                  }}
+                >
+                  {search.trim()
+                    ? 'Try a different name, address or note.'
+                    : `Add contacts to your address book to send ${visual.symbol} faster and avoid mistakes.`}
+                </Typography>
+                {!search.trim() && (
+                  <Button
+                    startIcon={<Add />}
+                    variant="contained"
+                    onClick={onAddContact}
+                    sx={{
+                      bgcolor: 'rgba(6,126,208,0.94)',
+                      backgroundImage:
+                        'linear-gradient(180deg, rgba(18,158,238,0.96), rgba(4,111,198,0.96))',
+                      border: '1px solid rgba(85,205,255,0.4)',
+                      borderRadius: 1.35,
+                      boxShadow:
+                        '0 14px 32px rgba(3,139,236,0.2), inset 0 1px 0 rgba(255,255,255,0.16)',
+                      color: 'rgba(255,255,255,0.96)',
+                      fontSize: { xs: 13.5, md: 14 },
+                      fontWeight: 700,
+                      mt: 2.7,
+                      minHeight: 44,
+                      px: 2.25,
+                      whiteSpace: 'nowrap',
+                      '& .MuiButton-startIcon': {
+                        mr: 0.8,
+                        '& svg': { fontSize: 20 },
+                      },
+                      '&:hover': {
+                        bgcolor: '#1399e8',
+                        borderColor: 'rgba(107,216,255,0.55)',
+                        boxShadow:
+                          '0 16px 36px rgba(24,189,242,0.25), inset 0 1px 0 rgba(255,255,255,0.18)',
+                      },
+                    }}
+                  >
+                    Add your first contact
+                  </Button>
+                )}
+              </Box>
+            )}
+          </Box>
+          {hasMoreContacts && (
+            <Button
+              variant="text"
+              onClick={onAddContact}
+              sx={{
+                color: 'primary.main',
+                fontSize: 12,
+                fontWeight: 400,
+                justifyContent: 'flex-start',
+                lineHeight: 1,
+                minHeight: 16,
+                mt: 0.25,
+                px: 0,
+                py: 0,
+                textTransform: 'none',
+                '&:hover': {
+                  bgcolor: 'transparent',
+                  color: '#37d0ff',
+                },
+              }}
+            >
+              View all contacts
+            </Button>
+          )}
+        </Box>
+      </WalletCard>
+      <AddressFormDialog
+        coinType={visual.coinType}
+        disableRestoreFocus
+        entry={editingEntry}
+        onClose={handleEditFormClose}
+        onExited={handleEditFormExited}
+        onSave={handleEditSave}
+        open={editFormOpen}
+        saveError={editSaveError}
+      />
+    </>
+  );
+}
+
+type WalletTransactionsCardProps = {
+  actions?: ReactNode;
+  children: ReactNode;
+  isRefreshing?: boolean;
+  onRefresh?: () => void;
+  title?: string;
+};
+
+type WalletTransactionsLoaderProps = {
+  label?: string;
+};
+
+export function WalletTransactionsLoader({
+  label = 'Loading transactions',
+}: WalletTransactionsLoaderProps) {
+  return (
+    <Box
+      role="status"
+      aria-live="polite"
+      sx={{
+        '@keyframes walletLoaderPulse': {
+          '0%, 100%': { opacity: 0.34, transform: 'scaleX(0.96)' },
+          '50%': { opacity: 0.9, transform: 'scaleX(1)' },
+        },
+        '@keyframes walletLoaderSweep': {
+          '0%': { transform: 'translateX(-110%)' },
+          '100%': { transform: 'translateX(110%)' },
+        },
+        display: 'grid',
+        gap: 1.5,
+        justifyItems: 'center',
+        px: { xs: 1, sm: 2 },
+        py: { xs: 3, md: 3.5 },
+      }}
+    >
+      <Box
+        sx={{
+          display: 'grid',
+          gap: 0.75,
+          maxWidth: 560,
+          width: 'min(100%, 560px)',
+        }}
+      >
+        {[0, 1, 2].map((index) => (
+          <Box
+            key={index}
+            sx={{
+              animation: `walletLoaderPulse 1450ms ease-in-out ${index * 110}ms infinite`,
+              bgcolor: 'rgba(116,158,180,0.12)',
+              border: '1px solid rgba(116,158,180,0.08)',
+              borderRadius: 1,
+              height: 12,
+              overflow: 'hidden',
+              position: 'relative',
+              transformOrigin: 'center',
+              width: index === 1 ? '84%' : index === 2 ? '68%' : '100%',
+              '&::after': {
+                animation: 'walletLoaderSweep 1550ms ease-in-out infinite',
+                background:
+                  'linear-gradient(90deg, transparent, rgba(24,189,242,0.22), transparent)',
+                content: '""',
+                inset: 0,
+                position: 'absolute',
+              },
+            }}
+          />
+        ))}
+      </Box>
+      <Typography
+        sx={{
+          color: 'text.secondary',
+          fontSize: 13,
+          fontWeight: 600,
+          letterSpacing: 0,
+        }}
+      >
+        {label}
+      </Typography>
+    </Box>
+  );
+}
+
+type WalletExternalTransactionEntry = {
+  address?: string;
+  addressInWallet?: boolean;
+  amount?: number;
+};
+
+export type WalletExternalTransactionRow = {
+  feeAmount?: unknown;
+  inputs?: WalletExternalTransactionEntry[];
+  memo?: string;
+  outputs?: WalletExternalTransactionEntry[];
+  timestamp?: number;
+  totalAmount?: unknown;
+  txHash?: string;
+};
+
+type WalletExternalTransactionsListLabels = {
+  copyHash: (hash: string) => string;
+  fee: string;
+  memo?: string;
+  noTransactions: string;
+  receiver: string;
+  rowsPerPage: string;
+  sender: string;
+  time: string;
+  totalAmount: string;
+  transactionHash: string;
+  waitingConfirmation: string;
+};
+
+type WalletExternalTransactionsListProps = {
+  ActionsComponent: any;
+  coin: WalletCoinSymbol;
+  copyHashLabel?: string;
+  labels: WalletExternalTransactionsListLabels;
+  onCopyHash: (hash: string) => void;
+  onPageChange: (
+    event: MouseEvent<HTMLButtonElement> | null,
+    newPage: number
+  ) => void;
+  onRowsPerPageChange: (
+    event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => void;
+  page: number;
+  rows: WalletExternalTransactionRow[];
+  rowsPerPage: number;
+  showMemo?: boolean;
+};
+
+const externalTransactionHeaderSx = {
+  color: 'text.secondary',
+  fontSize: 11,
+  fontWeight: 700,
+  letterSpacing: 0,
+  minWidth: 0,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  textTransform: 'uppercase',
+  whiteSpace: 'nowrap',
+};
+
+const walletTableRowHoverSx = {
+  overflow: 'hidden',
+  position: 'relative',
+  '&::before': {
+    background:
+      'linear-gradient(90deg, rgba(24,189,242,0.07), rgba(24,189,242,0.025))',
+    content: '""',
+    inset: 0,
+    opacity: 0,
+    pointerEvents: 'none',
+    position: 'absolute',
+    transition: 'opacity 520ms ease-out',
+    zIndex: 0,
+  },
+  '&:hover::before': {
+    opacity: 1,
+    transitionDuration: '90ms',
+  },
+  '& > *': {
+    position: 'relative',
+    zIndex: 1,
+  },
+} as const;
+
+const formatExternalTransactionAmount = (value: unknown) => {
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) return '-';
+  return (numeric / 1e8).toFixed(8);
+};
+
+export function WalletExternalTransactionsList({
+  ActionsComponent,
+  coin,
+  copyHashLabel,
+  labels,
+  onCopyHash,
+  onPageChange,
+  onRowsPerPageChange,
+  page,
+  rows,
+  rowsPerPage,
+  showMemo,
+}: WalletExternalTransactionsListProps) {
+  const gridColumns = showMemo
+    ? 'minmax(120px, 1fr) minmax(120px, 1fr) minmax(120px, 0.9fr) minmax(88px, 0.7fr) minmax(118px, 0.8fr) minmax(78px, 0.55fr) minmax(92px, 0.65fr)'
+    : 'minmax(130px, 1fr) minmax(130px, 1fr) minmax(128px, 0.9fr) minmax(118px, 0.78fr) minmax(78px, 0.55fr) minmax(92px, 0.65fr)';
+  const minWidth = showMemo ? 880 : 760;
+  const pagedRows =
+    rowsPerPage > 0
+      ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+      : rows;
+
+  const renderEndpoint = (entries?: WalletExternalTransactionEntry[]) => {
+    const firstEntry = entries?.[0];
+    if (!firstEntry?.address) {
+      return (
+        <Typography sx={{ color: 'text.secondary', fontSize: 13 }}>
+          -
+        </Typography>
+      );
+    }
+
+    const remainingCount = Math.max((entries?.length ?? 0) - 1, 0);
+
+    return (
+      <Box
+        sx={{ alignItems: 'center', display: 'flex', gap: 0.65, minWidth: 0 }}
+      >
+        <Typography
+          component="span"
+          title={firstEntry.address}
+          sx={{
+            color: firstEntry.addressInWallet ? 'text.primary' : 'info.main',
+            display: 'block',
+            fontSize: 13,
+            fontWeight: firstEntry.addressInWallet ? 500 : 600,
+            minWidth: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {firstEntry.address}
+        </Typography>
+        {remainingCount > 0 && (
+          <Typography
+            component="span"
+            sx={{
+              bgcolor: 'rgba(116,158,180,0.08)',
+              border: '1px solid rgba(116,158,180,0.14)',
+              borderRadius: 999,
+              color: 'text.secondary',
+              flexShrink: 0,
+              fontSize: 11,
+              fontWeight: 700,
+              lineHeight: 1,
+              px: 0.65,
+              py: 0.35,
+            }}
+          >
+            +{remainingCount}
+          </Typography>
+        )}
+      </Box>
+    );
+  };
+
+  const renderAmount = (row: WalletExternalTransactionRow) => {
+    const numeric = Number(row.totalAmount);
+    if (!Number.isFinite(numeric)) return '-';
+    const isIncoming = numeric > 0;
+
+    return (
+      <Typography
+        sx={{
+          color: isIncoming ? 'success.main' : 'error.main',
+          fontSize: 13,
+          fontWeight: 700,
+          textAlign: 'right',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {isIncoming ? '+' : ''}
+        {formatExternalTransactionAmount(row.totalAmount)} {coin}
+      </Typography>
+    );
+  };
+
+  const renderFee = (row: WalletExternalTransactionRow) => {
+    const numericFee = Number(row.feeAmount);
+    if (!Number.isFinite(numericFee) || numericFee === 0) return '-';
+
+    return (
+      <Typography
+        sx={{
+          color: Number(row.totalAmount) <= 0 ? 'error.main' : 'text.secondary',
+          fontSize: 13,
+          fontWeight: 500,
+          textAlign: 'right',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        -{formatExternalTransactionAmount(row.feeAmount)}
+      </Typography>
+    );
+  };
+
+  if (!rows.length) {
+    return (
+      <Box
+        sx={{
+          bgcolor: 'transparent',
+          borderBottom: (t) => `1px solid ${t.palette.divider}`,
+          borderTop: (t) => `1px solid ${t.palette.divider}`,
+          color: 'text.secondary',
+          px: 2,
+          py: 4,
+          textAlign: 'center',
+        }}
+      >
+        <Typography sx={{ fontWeight: 600 }}>
+          {labels.noTransactions}
+        </Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <>
+      <Box sx={{ overflowX: 'auto' }}>
+        <Box sx={{ minWidth }}>
+          <Box
+            aria-hidden
+            sx={{
+              alignItems: 'center',
+              borderBottom: (t) => `1px solid ${t.palette.divider}`,
+              display: 'grid',
+              gap: 1,
+              gridTemplateColumns: gridColumns,
+              px: 1.25,
+              py: 1,
+            }}
+          >
+            <Typography sx={externalTransactionHeaderSx}>
+              {labels.sender}
+            </Typography>
+            <Typography sx={externalTransactionHeaderSx}>
+              {labels.receiver}
+            </Typography>
+            <Typography sx={externalTransactionHeaderSx}>
+              {labels.transactionHash}
+            </Typography>
+            {showMemo && (
+              <Typography sx={externalTransactionHeaderSx}>
+                {labels.memo}
+              </Typography>
+            )}
+            <Typography
+              sx={{ ...externalTransactionHeaderSx, textAlign: 'right' }}
+            >
+              {labels.totalAmount}
+            </Typography>
+            <Typography
+              sx={{ ...externalTransactionHeaderSx, textAlign: 'right' }}
+            >
+              {labels.fee}
+            </Typography>
+            <Typography sx={externalTransactionHeaderSx}>
+              {labels.time}
+            </Typography>
+          </Box>
+
+          <Box sx={{ display: 'grid' }}>
+            {pagedRows.map((row, index) => {
+              const hash = row.txHash ?? '';
+
+              return (
+                <Box
+                  key={hash || index}
+                  sx={{
+                    ...walletTableRowHoverSx,
+                    alignItems: 'center',
+                    bgcolor: 'transparent',
+                    borderBottom: (t) =>
+                      `1px solid ${
+                        t.palette.mode === 'dark'
+                          ? 'rgba(116,158,180,0.085)'
+                          : 'rgba(17,24,39,0.06)'
+                      }`,
+                    display: 'grid',
+                    gap: 1,
+                    gridTemplateColumns: gridColumns,
+                    minHeight: 46,
+                    px: 1.25,
+                    py: 0.85,
+                    transition:
+                      'background-color 150ms ease, border-color 150ms ease',
+                  }}
+                >
+                  {renderEndpoint(row.inputs)}
+                  {renderEndpoint(row.outputs)}
+                  <Box
+                    sx={{
+                      alignItems: 'center',
+                      display: 'flex',
+                      gap: 0.35,
+                      minWidth: 0,
+                    }}
+                  >
+                    <Typography
+                      component="span"
+                      title={hash}
+                      sx={{
+                        color: 'text.primary',
+                        display: 'block',
+                        fontSize: 13,
+                        fontWeight: 600,
+                        minWidth: 0,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {hash ? cropString(hash) : '-'}
+                    </Typography>
+                    {hash && (
+                      <CustomWidthTooltip
+                        placement="top"
+                        title={copyHashLabel || labels.copyHash(hash)}
+                      >
+                        <IconButton
+                          aria-label="copy"
+                          size="small"
+                          onClick={() => onCopyHash(hash)}
+                          sx={{ color: 'text.secondary', p: 0.25 }}
+                        >
+                          <CopyAllTwoTone sx={{ fontSize: 16 }} />
+                        </IconButton>
+                      </CustomWidthTooltip>
+                    )}
+                  </Box>
+                  {showMemo && (
+                    <Typography
+                      title={row.memo}
+                      sx={{
+                        color: row.memo ? 'text.primary' : 'text.secondary',
+                        fontSize: 13,
+                        minWidth: 0,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {row.memo || '-'}
+                    </Typography>
+                  )}
+                  {renderAmount(row)}
+                  {renderFee(row)}
+                  <CustomWidthTooltip
+                    placement="top"
+                    title={
+                      row.timestamp
+                        ? new Date(row.timestamp).toLocaleString()
+                        : labels.waitingConfirmation
+                    }
+                  >
+                    <Typography
+                      sx={{
+                        color: 'text.secondary',
+                        fontSize: 13,
+                        fontWeight: 500,
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {row.timestamp ? epochToAgo(row.timestamp) : '-'}
+                    </Typography>
+                  </CustomWidthTooltip>
+                </Box>
+              );
+            })}
+          </Box>
+        </Box>
+      </Box>
+      <TablePagination
+        component="div"
+        labelRowsPerPage={labels.rowsPerPage}
+        rowsPerPageOptions={[5, 10, 25]}
+        count={rows.length}
+        rowsPerPage={rowsPerPage}
+        page={page}
+        slotProps={{
+          select: {
+            inputProps: {
+              'aria-label': labels.rowsPerPage,
+            },
+            MenuProps: {
+              disableScrollLock: true,
+            },
+            native: true,
+          },
+        }}
+        onPageChange={onPageChange}
+        onRowsPerPageChange={onRowsPerPageChange}
+        ActionsComponent={ActionsComponent}
+        sx={{
+          color: 'text.secondary',
+          mt: 0.5,
+          '& .MuiTablePagination-toolbar': {
+            minHeight: 44,
+            px: 0,
+          },
+          '& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows':
+            {
+              color: 'text.secondary',
+              fontSize: 13,
+            },
+        }}
+      />
+    </>
+  );
+}
+
+export function WalletTransactionsCard({
+  actions,
+  children,
+  isRefreshing,
+  onRefresh,
+  title = 'Transactions',
+}: WalletTransactionsCardProps) {
+  return (
+    <WalletCard
+      sx={{
+        background:
+          'linear-gradient(180deg, rgba(10, 36, 56, 0.74) 0%, rgba(7, 29, 47, 0.68) 100%)',
+        borderColor: 'rgba(116,158,180,0.15)',
+        boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.045)',
+        overflow: 'hidden',
+        width: '100%',
+        '& .MuiTableContainer-root': {
+          bgcolor: 'transparent',
+          border: 0,
+          borderRadius: 0,
+          boxShadow: 'none',
+          overflowX: 'hidden',
+        },
+        '& .MuiTable-root': {
+          tableLayout: 'fixed',
+          width: '100%',
+        },
+        '& .MuiTableCell-root': {
+          minWidth: 0,
+        },
+        '& .MuiTableCell-root:nth-of-type(1), & .MuiTableCell-root:nth-of-type(2)':
+          {
+            width: '18%',
+          },
+        '& .MuiTableCell-root:nth-of-type(3)': {
+          width: '16%',
+        },
+        '& .MuiTableCell-root:nth-of-type(4)': {
+          width: '12%',
+        },
+        '& .MuiTableCell-root:nth-of-type(5)': {
+          width: '10%',
+        },
+        '& .MuiTableCell-root:nth-of-type(6)': {
+          width: '10%',
+        },
+        '& .MuiTableCell-root:nth-of-type(7)': {
+          width: '10%',
+        },
+        '& .MuiTableCell-head': {
+          bgcolor: 'transparent',
+          color: 'text.secondary',
+          fontSize: 11,
+          fontWeight: 600,
+          letterSpacing: 0,
+          overflow: 'hidden',
+          px: 1.5,
+          py: 1.2,
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        },
+        '& .MuiTableCell-body': {
+          bgcolor: 'transparent',
+          fontSize: 13,
+          height: 46,
+          lineHeight: 1.25,
+          overflow: 'hidden',
+          px: 1.5,
+          py: 0.85,
+          textOverflow: 'ellipsis',
+          verticalAlign: 'middle',
+          whiteSpace: 'nowrap',
+        },
+        '& .MuiTableBody-root .MuiTableRow-root': {
+          transition: 'background-color 150ms ease',
+        },
+        '& .MuiTableBody-root .MuiTableRow-root:hover': {
+          bgcolor: (t) =>
+            t.palette.mode === 'dark'
+              ? 'rgba(24,189,242,0.055)'
+              : 'rgba(5,127,168,0.05)',
+        },
+        '& .MuiTableBody-root .MuiTableCell-root:nth-of-type(1) > .MuiBox-root, & .MuiTableBody-root .MuiTableCell-root:nth-of-type(2) > .MuiBox-root':
+          {
+            display: 'grid !important',
+            gridTemplateColumns: 'minmax(0, 1fr)',
+            minWidth: 0,
+          },
+        '& .MuiTableBody-root .MuiTableCell-root:nth-of-type(1) > .MuiBox-root:not(:first-of-type), & .MuiTableBody-root .MuiTableCell-root:nth-of-type(2) > .MuiBox-root:not(:first-of-type)':
+          {
+            display: 'none !important',
+          },
+        '& .MuiTableBody-root .MuiTableCell-root:nth-of-type(1) span, & .MuiTableBody-root .MuiTableCell-root:nth-of-type(2) span':
+          {
+            minWidth: 0,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          },
+        '& .MuiTableBody-root .MuiTableCell-root:nth-of-type(1) span + span, & .MuiTableBody-root .MuiTableCell-root:nth-of-type(2) span + span':
+          {
+            display: 'none',
+          },
+        '& .MuiTableBody-root .MuiTableCell-root:nth-of-type(3) .MuiIconButton-root':
+          {
+            ml: 0.25,
+            p: 0.25,
+          },
+        '& .MuiTableFooter-root .MuiTableCell-root': {
+          borderBottom: 0,
+          px: 0,
+        },
+        '& .MuiTablePagination-root': {
+          color: 'text.secondary',
+        },
+        '& .MuiTablePagination-toolbar': {
+          minHeight: 44,
+          px: 0,
+        },
+        '& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows':
+          {
+            color: 'text.secondary',
+            fontSize: 13,
+          },
+      }}
+    >
+      <Box
+        sx={{
+          px: { xs: 1.5, md: 2.25, lg: 2.75 },
+          pt: { xs: 1.5, md: 2.05 },
+          pb: 1.15,
+        }}
+      >
+        <Box
+          sx={{
+            alignItems: { xs: 'flex-start', sm: 'center' },
+            display: 'flex',
+            flexDirection: { xs: 'column', sm: 'row' },
+            gap: 0.75,
+            justifyContent: 'space-between',
+            mb: 1,
+          }}
+        >
+          <Typography
+            variant="subtitle1"
+            sx={{ fontWeight: 600, lineHeight: 1.1 }}
+          >
+            {title}
+          </Typography>
+          {(actions || onRefresh) && (
+            <Box
+              sx={{
+                alignItems: 'center',
+                display: 'flex',
+                gap: 0.75,
+                justifyContent: { xs: 'space-between', sm: 'flex-end' },
+                minWidth: 0,
+                width: { xs: '100%', sm: 'auto' },
+              }}
+            >
+              {actions}
+              {onRefresh && (
+                <Button
+                  onClick={onRefresh}
+                  loading={isRefreshing}
+                  loadingPosition="start"
+                  size="small"
+                  startIcon={<Refresh sx={{ fontSize: 18 }} />}
+                  variant="text"
+                  sx={{
+                    borderRadius: 1,
+                    fontSize: 13,
+                    fontWeight: 700,
+                    minHeight: 34,
+                    px: 1,
+                    whiteSpace: 'nowrap',
+                    '& .MuiButton-startIcon': {
+                      mr: 0.65,
+                    },
+                  }}
+                >
+                  Refresh
+                </Button>
+              )}
+            </Box>
+          )}
+        </Box>
+      </Box>
+      <Box
+        sx={{
+          background:
+            'linear-gradient(180deg, rgba(18, 62, 89, 0.36) 0%, rgba(12, 47, 72, 0.32) 100%)',
+          borderTop: '1px solid rgba(116,158,180,0.11)',
+          boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.028)',
+          overflow: 'hidden',
+        }}
+      >
+        {children}
+      </Box>
+    </WalletCard>
+  );
+}
+
+type WalletSyncCardProps = {
+  isSyncing?: boolean;
+  onSync: () => void;
+  statusLabel: string;
+  statusTone?: 'success' | 'error';
+  statusTooltip?: string;
+};
+
+export function WalletSyncCard({
+  isSyncing,
+  onSync,
+  statusLabel,
+  statusTone = 'success',
+  statusTooltip,
+}: WalletSyncCardProps) {
+  const isError = statusTone === 'error';
+  const syncDescription =
+    'Keeps your contacts backed up and synced across your Qortal account.';
+
+  return (
+    <WalletCard
+      sx={{
+        background:
+          'linear-gradient(180deg, rgba(10, 34, 52, 0.82) 0%, rgba(7, 27, 43, 0.76) 100%)',
+        borderColor: 'rgba(116,158,180,0.14)',
+        boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.04)',
+        overflow: 'hidden',
+        width: '100%',
+      }}
+    >
+      <Box sx={{ display: 'grid', gap: 1.35, px: { xs: 2, md: 2.25 }, py: 2 }}>
+        <Box
+          sx={{
+            alignItems: 'flex-start',
+            display: 'flex',
+            gap: 1,
+            justifyContent: 'space-between',
+          }}
+        >
+          <Box
+            sx={{
+              alignItems: 'center',
+              display: 'flex',
+              gap: 0.9,
+              minWidth: 0,
+            }}
+          >
+            <Box
+              sx={{
+                alignItems: 'center',
+                bgcolor: isError
+                  ? 'rgba(246, 167, 11, 0.08)'
+                  : 'rgba(1, 12, 24, 0.34)',
+                border: '1px solid rgba(116,158,180,0.16)',
+                borderRadius: 1,
+                color: isError
+                  ? 'rgba(246, 196, 78, 0.92)'
+                  : 'rgba(34,227,138,0.72)',
+                display: 'inline-flex',
+                flexShrink: 0,
+                height: 32,
+                justifyContent: 'center',
+                width: 32,
+              }}
+            >
+              <LockOutlined fontSize="small" />
+            </Box>
+            <Box sx={{ minWidth: 0 }}>
+              <Box sx={{ alignItems: 'center', display: 'flex', gap: 0.4 }}>
+                <Typography
+                  sx={{
+                    color: 'text.secondary',
+                    fontWeight: 600,
+                    lineHeight: 1.15,
+                  }}
+                >
+                  Encrypted sync
+                </Typography>
+                <CustomWidthTooltip placement="top" title={syncDescription}>
+                  <InfoOutlined
+                    sx={{
+                      color: 'text.secondary',
+                      cursor: 'help',
+                      fontSize: 15,
+                      opacity: 0.62,
+                    }}
+                  />
+                </CustomWidthTooltip>
+              </Box>
+              <Typography
+                variant="caption"
+                sx={{
+                  color: 'text.secondary',
+                  display: 'block',
+                  mt: 0.45,
+                  opacity: 0.78,
+                }}
+              >
+                Local address book
+              </Typography>
+            </Box>
+          </Box>
+          <Box
+            title={statusTooltip}
+            sx={{
+              alignItems: 'center',
+              bgcolor: isError
+                ? 'rgba(246, 167, 11, 0.08)'
+                : 'rgba(34,227,138,0.055)',
+              border: isError
+                ? '1px solid rgba(246, 196, 78, 0.18)'
+                : '1px solid rgba(34,227,138,0.14)',
+              borderRadius: 999,
+              color: isError
+                ? 'rgba(246, 196, 78, 0.94)'
+                : 'rgba(144, 214, 176, 0.88)',
+              display: 'inline-flex',
+              fontSize: 12,
+              fontWeight: 600,
+              flexShrink: 0,
+              gap: 0.5,
+              px: 1,
+              py: 0.45,
+            }}
+          >
+            {isError ? (
+              <ErrorOutline sx={{ fontSize: 15 }} />
+            ) : (
+              <CheckCircleOutline sx={{ fontSize: 15 }} />
+            )}
+            {statusLabel}
+          </Box>
+        </Box>
+
+        <Button
+          fullWidth
+          loading={isSyncing}
+          loadingPosition="start"
+          onClick={onSync}
+          startIcon={<Sync />}
+          variant="outlined"
+          sx={{
+            bgcolor: 'rgba(13, 48, 72, 0.32)',
+            borderColor: 'rgba(116,158,180,0.16)',
+            color: 'text.secondary',
+            fontWeight: 600,
+            minHeight: 42,
+            '&:hover': {
+              bgcolor: 'rgba(18, 64, 94, 0.42)',
+              borderColor: 'rgba(116,158,180,0.28)',
+              color: 'text.primary',
+            },
+          }}
+        >
+          Sync now
+        </Button>
+      </Box>
+    </WalletCard>
+  );
+}
+
+type WalletWorkspaceProps = {
+  address?: string | null;
+  addressBookRefreshKey?: unknown;
+  balance?: unknown;
+  balanceDecimals?: number;
+  balanceError?: string | null;
+  children?: ReactNode;
+  coin: WalletCoinSymbol;
+  isBalanceLoading?: boolean;
+  noAddressLabel?: string;
+  onAddContact: () => void;
+  onAddressBookChange?: () => void;
+  onSelectAddress: (address: string, name: string) => void;
+  onSend: () => void;
+  onToggleReceive: () => void;
+  receiveOpen: boolean;
+  rightColumnAfter?: ReactNode;
+  transactions: ReactNode;
+};
+
+export function WalletWorkspace({
+  address,
+  addressBookRefreshKey,
+  balance,
+  balanceDecimals,
+  balanceError,
+  children,
+  coin,
+  isBalanceLoading,
+  noAddressLabel,
+  onAddContact,
+  onAddressBookChange,
+  onSelectAddress,
+  onSend,
+  onToggleReceive,
+  receiveOpen,
+  rightColumnAfter,
+  transactions,
+}: WalletWorkspaceProps) {
+  const visual = WALLET_VISUALS[coin];
+  const [receiveQrDialogOpen, setReceiveQrDialogOpen] = useState(false);
+
+  useEffect(() => {
+    if (!receiveOpen) {
+      setReceiveQrDialogOpen(false);
+    }
+  }, [receiveOpen]);
+
+  return (
+    <Box
+      sx={{
+        ...getWalletVars(visual),
+        ...WALLET_GLOW_CSS_VARS,
+        alignItems: 'start',
+        display: 'grid',
+        gap: { xs: 1.8, lg: 2, xl: 3 },
+        gridTemplateColumns: {
+          xs: '1fr',
+          lg: 'minmax(0, 1fr) minmax(320px, 360px)',
+          xl: 'minmax(0, 1fr) minmax(404px, 424px)',
+        },
+        isolation: 'isolate',
+        position: 'relative',
+        width: '100%',
+      }}
+    >
+      <Box
+        sx={{
+          display: 'grid',
+          gap: { xs: 1.8, md: 2 },
+          minWidth: 0,
+          position: 'relative',
+          zIndex: 1,
+        }}
+      >
+        <WalletSummaryCard
+          address={address}
+          balance={balance}
+          balanceDecimals={balanceDecimals}
+          balanceError={balanceError}
+          coin={coin}
+          isBalanceLoading={isBalanceLoading}
+          noAddressLabel={noAddressLabel}
+          onSend={onSend}
+          onToggleReceive={onToggleReceive}
+          receiveOpen={receiveOpen}
+        />
+        {children}
+        <Box sx={{ mt: { xs: 0, md: -0.85 } }}>{transactions}</Box>
+      </Box>
+
+      <Box
+        sx={{
+          display: 'grid',
+          gap: 0,
+          minWidth: 0,
+          position: 'relative',
+          zIndex: 1,
+        }}
+      >
+        <Box
+          sx={{
+            height: { xs: 'auto', lg: RECEIVE_QR_SLOT_HEIGHT },
+            mb: { xs: receiveOpen ? 1.6 : 0, lg: 0 },
+            overflow: 'visible',
+            pointerEvents: receiveOpen ? 'auto' : 'none',
+            transition: {
+              xs: 'margin-bottom 620ms cubic-bezier(0.4, 0, 0.2, 1)',
+              lg: 'none',
+            },
+          }}
+        >
+          <Collapse
+            in={receiveOpen}
+            timeout={620}
+            unmountOnExit
+            easing={{
+              enter: 'cubic-bezier(0.16, 1, 0.3, 1)',
+              exit: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            }}
+            sx={{
+              '& .MuiCollapse-wrapper': {
+                overflow: 'hidden',
+              },
+              '& .MuiCollapse-wrapperInner': {
+                overflow: 'hidden',
+              },
+            }}
+          >
+            <ReceiveQrMotionContent
+              address={address}
+              coin={coin}
+              onQrClick={() => setReceiveQrDialogOpen(true)}
+              open={receiveOpen}
+            />
+          </Collapse>
+        </Box>
+
+        <Box
+          sx={{
+            position: 'relative',
+            transform: {
+              xs: 'none',
+              lg: receiveOpen
+                ? 'translateY(0)'
+                : `translateY(-${RECEIVE_QR_SLOT_HEIGHT}px)`,
+            },
+            transition: 'transform 620ms cubic-bezier(0.4, 0, 0.2, 1)',
+            willChange: 'transform',
+            zIndex: 1,
+          }}
+        >
+          <WalletAddressBookPanel
+            coin={coin}
+            onAddContact={onAddContact}
+            onAddressBookChange={onAddressBookChange}
+            onSelectAddress={onSelectAddress}
+            refreshKey={addressBookRefreshKey}
+          />
+          {rightColumnAfter ? (
+            <Box sx={{ mt: { xs: 1.6, md: 3 } }}>{rightColumnAfter}</Box>
+          ) : null}
+        </Box>
+      </Box>
+      <ReceiveQrDialog
+        address={address}
+        coin={coin}
+        onClose={() => setReceiveQrDialogOpen(false)}
+        open={receiveQrDialogOpen}
+      />
+    </Box>
+  );
+}
diff --git a/src/global.d.ts b/src/global.d.ts
index 993beec..00f6ac0 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -35,6 +35,7 @@ interface QortalRequestOptions {
   name?: string;
   offset?: number;
   port?: number;
+  prefix?: boolean;
   query?: string;
   recipient?: string;
   resources?: any[];
diff --git a/src/hooks/useIframeListener.tsx b/src/hooks/useIframeListener.tsx
index 942632c..9e7f7bf 100644
--- a/src/hooks/useIframeListener.tsx
+++ b/src/hooks/useIframeListener.tsx
@@ -32,12 +32,7 @@ export const useIframe = () => {
 
   const navigate = useNavigate();
   useEffect(() => {
-    const themeColorDefault = customWindow?._qdnTheme;
-    if (themeColorDefault === 'dark') {
-      setTheme(EnumTheme.DARK);
-    } else if (themeColorDefault === 'light') {
-      setTheme(EnumTheme.LIGHT);
-    }
+    setTheme(EnumTheme.DARK);
 
     const languageDefault = customWindow?._qdnLang;
 
@@ -61,13 +56,6 @@ export const useIframe = () => {
           { action: 'NAVIGATION_SUCCESS', path: event.data.path },
           '*'
         );
-      } else if (event.data?.action === 'THEME_CHANGED' && event.data.theme) {
-        const themeColor = event.data.theme;
-        if (themeColor === 'dark') {
-          setTheme(EnumTheme.DARK);
-        } else if (themeColor === 'light') {
-          setTheme(EnumTheme.LIGHT);
-        }
       } else if (
         event.data?.action === 'LANGUAGE_CHANGED' &&
         event.data.language
diff --git a/src/hooks/useRecommendedFees.tsx b/src/hooks/useRecommendedFees.tsx
index e192673..a5267d5 100644
--- a/src/hooks/useRecommendedFees.tsx
+++ b/src/hooks/useRecommendedFees.tsx
@@ -29,6 +29,11 @@ export function isValidFeeEstimate(obj: unknown): obj is FeeEstimate {
 
 export type FeeType = 'low' | 'medium' | 'high' | 'custom';
 
+const LOCAL_QORTAL_NODE_API = 'http://127.0.0.1:12391';
+const HTTPS_LOCAL_QORTAL_NODE_API = 'https://127.0.0.1:12391';
+const PUBLIC_QORTAL_NODE_API = 'https://ext-node.qortal.link';
+const FEE_REQUEST_TIMEOUT_MS = 6000;
+
 type UseRecommendedFeesArgs = {
   selectedCoin?: string | null;
 };
@@ -44,6 +49,68 @@ type UseRecommendedFeesReturn = {
   customFee: number;
 };
 
+const stripTrailingSlash = (value: string) => value.replace(/\/+$/, '');
+
+const getQortalNodeApiCandidates = () => {
+  const candidates = [''];
+
+  if (typeof window !== 'undefined') {
+    const origin = stripTrailingSlash(window.location.origin);
+    if (/^https?:\/\/(127\.0\.0\.1|localhost):12391$/i.test(origin)) {
+      candidates.push(origin);
+    }
+
+    candidates.push(
+      window.location.protocol === 'https:'
+        ? HTTPS_LOCAL_QORTAL_NODE_API
+        : LOCAL_QORTAL_NODE_API
+    );
+  }
+
+  candidates.push(LOCAL_QORTAL_NODE_API, HTTPS_LOCAL_QORTAL_NODE_API);
+  candidates.push(PUBLIC_QORTAL_NODE_API);
+
+  return [...new Set(candidates.map(stripTrailingSlash))];
+};
+
+const getUrlForPath = (baseApi: string, path: string) =>
+  baseApi ? `${baseApi}${path}` : path;
+
+const fetchJsonWithTimeout = async (url: string): Promise<unknown> => {
+  const controller = new AbortController();
+  const timeoutId = window.setTimeout(() => {
+    controller.abort();
+  }, FEE_REQUEST_TIMEOUT_MS);
+
+  try {
+    const response = await fetch(url, {
+      signal: controller.signal,
+    });
+
+    if (!response.ok) {
+      throw new Error(`Fee request failed: ${response.status}`);
+    }
+
+    return response.json();
+  } finally {
+    window.clearTimeout(timeoutId);
+  }
+};
+
+const fetchQortalJson = async (path: string): Promise<unknown> => {
+  let lastError: unknown = null;
+
+  for (const baseApi of getQortalNodeApiCandidates()) {
+    try {
+      return await fetchJsonWithTimeout(getUrlForPath(baseApi, path));
+    } catch (error) {
+      lastError = error;
+    }
+  }
+
+  throw lastError;
+};
+
 export const useRecommendedFees = ({
   selectedCoin,
 }: UseRecommendedFeesArgs): UseRecommendedFeesReturn => {
@@ -62,16 +129,24 @@ export const useRecommendedFees = ({
     try {
       if (!selectedFeePublisher || !coin) return;
       const identifier = `coinInfo-${coin}`;
-      const res = await fetch(
-        `/arbitrary/resources/searchsimple?service=JSON&identifier=${identifier}&name=${selectedFeePublisher}&prefix=true&limit=1&reverse=true`
+      const searchParams = new URLSearchParams({
+        identifier,
+        limit: '1',
+        name: selectedFeePublisher,
+        prefix: 'true',
+        reverse: 'true',
+        service: 'JSON',
+      });
+      const data = await fetchQortalJson(
+        `/arbitrary/resources/searchsimple?${searchParams.toString()}`
       );
-      const data: unknown = await res.json();
       if (Array.isArray(data) && data.length > 0) {
         const location = data[0] as { name: string; identifier: string };
-        const resBridge = await fetch(
-          `/arbitrary/JSON/${location.name}/${location.identifier}`
+        const dataBridge = await fetchQortalJson(
+          `/arbitrary/JSON/${encodeURIComponent(
+            location.name
+          )}/${encodeURIComponent(location.identifier)}`
         );
-        const dataBridge: unknown = await resBridge.json();
         setFeeData(dataBridge);
       }
     } catch (error) {
diff --git a/src/index.css b/src/index.css
index f56af26..96dbabf 100644
--- a/src/index.css
+++ b/src/index.css
@@ -31,3 +31,61 @@
   box-sizing: border-box;
   font-family: 'Inter';
 }
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html {
+  overflow-y: scroll;
+  scrollbar-gutter: stable;
+}
+
+body {
+  margin: 0;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+input,
+textarea,
+[contenteditable='true'],
+.MuiInputBase-input {
+  -webkit-touch-callout: default;
+  -webkit-user-select: text;
+  user-select: text;
+}
+
+img,
+svg {
+  -webkit-user-drag: none;
+  user-drag: none;
+}
+
+* {
+  scrollbar-color: rgba(116, 158, 180, 0.22) transparent;
+  scrollbar-width: thin;
+}
+
+*::-webkit-scrollbar {
+  height: 10px;
+  width: 10px;
+}
+
+*::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: rgba(116, 158, 180, 0.2);
+  background-clip: content-box;
+  border: 3px solid transparent;
+  border-radius: 999px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(24, 189, 242, 0.32);
+}
diff --git a/src/main.tsx b/src/main.tsx
index 8696e84..c841804 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,9 +1,12 @@
-import { StrictMode, useState, type ReactNode } from 'react';
+import { StrictMode, useEffect, useState, type ReactNode } from 'react';
 import { createRoot } from 'react-dom/client';
 import ThemeProviderWrapper from './styles/theme/theme-provider.tsx';
 import './index.css';
 import { Routes } from './routes/Routes.tsx';
 import WalletContext, { defaultState } from './contexts/walletContext.ts';
+import { installQortalRequestBridge } from './utils/qortalRequestBridge.ts';
+
+installQortalRequestBridge();
 
 type WalletProviderProps = { children: ReactNode };
 
@@ -17,12 +20,44 @@ function WalletProvider({ children }: WalletProviderProps) {
   );
 }
 
+function AppInteractionGuards({ children }: WalletProviderProps) {
+  useEffect(() => {
+    const preventImageContextMenu = (event: MouseEvent) => {
+      const target = event.target;
+
+      if (target instanceof HTMLElement && target.closest('img')) {
+        event.preventDefault();
+      }
+    };
+
+    const preventImageDrag = (event: DragEvent) => {
+      const target = event.target;
+
+      if (target instanceof HTMLElement && target.closest('img')) {
+        event.preventDefault();
+      }
+    };
+
+    document.addEventListener('contextmenu', preventImageContextMenu);
+    document.addEventListener('dragstart', preventImageDrag);
+
+    return () => {
+      document.removeEventListener('contextmenu', preventImageContextMenu);
+      document.removeEventListener('dragstart', preventImageDrag);
+    };
+  }, []);
+
+  return children;
+}
+
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <ThemeProviderWrapper>
-      <WalletProvider>
-        <Routes />
-      </WalletProvider>
+      <AppInteractionGuards>
+        <WalletProvider>
+          <Routes />
+        </WalletProvider>
+      </AppInteractionGuards>
     </ThemeProviderWrapper>
   </StrictMode>
 );
diff --git a/src/pages/arrr/index.tsx b/src/pages/arrr/index.tsx
index a6305c2..bd00dfe 100644
--- a/src/pages/arrr/index.tsx
+++ b/src/pages/arrr/index.tsx
@@ -1,55 +1,38 @@
 import WalletContext from '../../contexts/walletContext';
-import {
-  copyToClipboard,
-  cropString,
-  epochToAgo,
-  timeoutDelay,
-} from '../../common/functions';
+import { copyToClipboard, timeoutDelay } from '../../common/functions';
 import { AddressBookDialog } from '../../components/AddressBook/AddressBookDialog';
+import {
+  WalletExternalTransactionsList,
+  WalletTransactionsCard,
+  WalletTransactionsLoader,
+  WalletWorkspace,
+} from '../../components/WalletWorkspace';
 import { useTheme } from '@mui/material/styles';
 import {
   Alert,
-  AppBar,
-  Avatar,
   Box,
   Button,
-  Dialog,
   DialogActions,
   DialogContent,
   DialogTitle,
-  Grid,
   IconButton,
   List,
   ListItemButton,
   ListItemText,
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableFooter,
-  TableHead,
-  TablePagination,
-  TableRow,
   TextField,
-  Toolbar,
+  Tooltip,
   Typography,
 } from '@mui/material';
-import { NumericFormat } from 'react-number-format';
 import Snackbar from '@mui/material/Snackbar';
 type SnackbarCloseReason = 'timeout' | 'clickaway' | 'escapeKeyDown';
 import CircularProgress from '@mui/material/CircularProgress';
 import LinearProgress from '@mui/material/LinearProgress';
-import QRCode from 'react-qr-code';
 import {
-  Close,
-  CopyAllTwoTone,
   FirstPage,
-  ImportContacts,
+  InfoOutlined,
   KeyboardArrowLeft,
   KeyboardArrowRight,
   LastPage,
-  Send,
 } from '@mui/icons-material';
 import coinLogoARRR from '../../assets/arrr.png';
 import {
@@ -62,7 +45,6 @@ import {
   useState,
 } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Refresh } from '@mui/icons-material';
 import {
   ARRR_FEE,
   DECIMAL_ROUND_UP,
@@ -76,18 +58,19 @@ import {
   TIME_SECONDS_5,
 } from '../../common/constants';
 import {
-  CustomWidthTooltip,
   LightwalletDialog,
   SlideTransition,
-  StyledTableCell,
-  StyledTableRow,
   SubmitDialog,
   Transition,
-  WalletButtons,
   WalletCard,
+  WalletSendDialog,
 } from '../../styles/page-styles';
 import { Coin } from 'qapp-core';
 import { validateArrrAddress } from '../../utils/addressValidation';
+import {
+  ExternalSendForm,
+  sendCoinDialogPaperSx,
+} from '../../components/ExternalSendForm';
 
 interface TablePaginationActionsProps {
   count: number;
@@ -169,7 +152,6 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 
 export default function PirateWallet() {
   const { t } = useTranslation(['core']);
-  const theme = useTheme();
   const { isUsingGateway } = useContext(WalletContext);
   const [isSynced, setIsSynced] = useState(false);
   const [syncStatus, setSyncStatus] = useState(EMPTY_STRING);
@@ -189,24 +171,27 @@ export default function PirateWallet() {
   const [isLoadingArrrTransactions, setIsLoadingArrrTransactions] =
     useState<boolean>(true);
   const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(25);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
   const [copyArrrTxHash, setCopyArrrTxHash] = useState(EMPTY_STRING);
   const [openArrrLightwallet, setOpenArrrLightwallet] = useState(false);
   const [openArrrServerChange, setOpenArrrServerChange] = useState(false);
   const [openArrrSend, setOpenArrrSend] = useState(false);
   const [arrrAmount, setArrrAmount] = useState<number>(0);
   const [arrrRecipient, setArrrRecipient] = useState(EMPTY_STRING);
+  const [arrrRecipientDisplayName, setArrrRecipientDisplayName] =
+    useState(EMPTY_STRING);
   const [addressFormatError, setAddressFormatError] = useState(false);
   const [loadingRefreshArrr, setLoadingRefreshArrr] = useState(false);
   const [openTxArrrSubmit, setOpenTxArrrSubmit] = useState(false);
   const [openSendArrrSuccess, setOpenSendArrrSuccess] = useState(false);
   const [openSendArrrError, setOpenSendArrrError] = useState(false);
   const [openArrrAddressBook, setOpenArrrAddressBook] = useState(false);
+  const [receivePanelOpen, setReceivePanelOpen] = useState(false);
   const [_retry, setRetry] = useState(false);
 
   const maxSendableArrrCoin = () => {
     // manage the correct round up
-    const value = (walletBalanceArrr - ARRR_FEE).toString();
+    const value = Math.max(0, walletBalanceArrr - ARRR_FEE).toString();
     const [integer, decimal = ''] = value.split('.');
     const truncated = decimal
       .substring(0, DECIMAL_ROUND_UP)
@@ -216,11 +201,59 @@ export default function PirateWallet() {
     );
     return truncatedMaxSendableArrrCoin;
   };
-
-  const emptyRows =
-    page > 0
-      ? Math.max(0, (1 + page) * rowsPerPage - transactionsArrr.length)
-      : 0;
+  const arrrSendLabelSx = {
+    color: 'rgba(228,238,248,0.9)',
+    fontSize: { xs: 14.5, sm: 15 },
+    fontWeight: 700,
+    lineHeight: 1.2,
+  } as const;
+  const arrrHelperSx = {
+    color: 'text.secondary',
+    fontSize: { xs: 12.5, sm: 13 },
+    fontWeight: 500,
+    lineHeight: 1.45,
+    ml: 1.6,
+    mt: 0.85,
+  } as const;
+  const arrrFieldSx = {
+    '& .MuiFormHelperText-root': arrrHelperSx,
+    '& .MuiOutlinedInput-root': {
+      bgcolor: 'rgba(0,8,16,0.2)',
+      borderRadius: 1.35,
+      minHeight: { xs: 54, sm: 56 },
+      px: { xs: 1.2, sm: 1.35 },
+      transition: 'background-color 160ms ease',
+      '& fieldset': {
+        borderColor: 'rgba(116,158,180,0.16)',
+      },
+      '&:hover fieldset': {
+        borderColor: 'rgba(116,158,180,0.3)',
+      },
+      '&.Mui-focused': {
+        bgcolor: 'rgba(0,8,16,0.2)',
+      },
+      '&.Mui-focused fieldset': {
+        borderColor: 'rgba(24,189,242,0.62)',
+        borderWidth: 1,
+      },
+    },
+    '& .MuiOutlinedInput-input': {
+      color: 'text.primary',
+      fontSize: { xs: 16, sm: 16.5 },
+      fontWeight: 500,
+      py: 0,
+      '&::placeholder': {
+        color: 'text.secondary',
+        fontWeight: 400,
+        opacity: 0.58,
+      },
+    },
+  } as const;
+  const arrrSendInfoIconSx = {
+    color: 'text.secondary',
+    fontSize: { xs: 14.5, sm: 15 },
+    opacity: 0.82,
+  } as const;
 
   const handleCloseArrrLightwallet = () => {
     setOpenArrrLightwallet(false);
@@ -238,10 +271,10 @@ export default function PirateWallet() {
     setOpenArrrAddressBook(false);
   };
 
-  const handleSelectAddress = (address: string, _name: string) => {
+  const handleSelectAddress = (address: string, name: string) => {
     setArrrRecipient(address);
+    setArrrRecipientDisplayName(name || EMPTY_STRING);
     setArrrAmount(0);
-    setArrrMemo(EMPTY_STRING);
     setOpenArrrAddressBook(false);
     setOpenArrrSend(true);
     setAddressFormatError(false);
@@ -251,6 +284,7 @@ export default function PirateWallet() {
   const handleOpenArrrSend = () => {
     setArrrAmount(0);
     setArrrRecipient(EMPTY_STRING);
+    setArrrRecipientDisplayName(EMPTY_STRING);
     setArrrMemo(EMPTY_STRING);
     setOpenArrrSend(true);
     setAddressFormatError(false);
@@ -260,10 +294,13 @@ export default function PirateWallet() {
   const disableCanSendArrr = () =>
     arrrAmount <= 0 || arrrRecipient === EMPTY_STRING || addressFormatError;
 
-  const handleRecipientChange = (e: ChangeEvent<HTMLInputElement>) => {
+  const handleRecipientChange = (
+    e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
     const value = e.target.value.trim();
     setArrrRecipient(value);
-    
+    setArrrRecipientDisplayName(EMPTY_STRING);
+
     if (validateArrrAddress(value) || value === EMPTY_STRING) {
       setAddressFormatError(false);
     } else {
@@ -274,12 +311,20 @@ export default function PirateWallet() {
   const handleCloseArrrSend = () => {
     setArrrAmount(0);
     setArrrRecipient(EMPTY_STRING);
+    setArrrRecipientDisplayName(EMPTY_STRING);
     setArrrMemo(EMPTY_STRING);
     setOpenArrrSend(false);
     setAddressFormatError(false);
     setOpenSendArrrError(false);
   };
 
+  const handleClearArrrRecipient = () => {
+    setArrrRecipient(EMPTY_STRING);
+    setArrrRecipientDisplayName(EMPTY_STRING);
+    setAddressFormatError(false);
+    setOpenSendArrrError(false);
+  };
+
   const changeCopyArrrTxHash = async () => {
     setCopyArrrTxHash('Copied');
     await timeoutDelay(TIME_SECONDS_2);
@@ -341,6 +386,7 @@ export default function PirateWallet() {
       if (!sendRequest?.error) {
         setArrrAmount(0);
         setArrrRecipient(EMPTY_STRING);
+        setArrrRecipientDisplayName(EMPTY_STRING);
         setArrrMemo(EMPTY_STRING);
         setOpenTxArrrSubmit(false);
         setOpenSendArrrSuccess(true);
@@ -351,6 +397,7 @@ export default function PirateWallet() {
     } catch (error) {
       setArrrAmount(0);
       setArrrRecipient(EMPTY_STRING);
+      setArrrRecipientDisplayName(EMPTY_STRING);
       setArrrMemo(EMPTY_STRING);
       setOpenTxArrrSubmit(false);
       setOpenSendArrrError(true);
@@ -630,261 +677,66 @@ export default function PirateWallet() {
 
   const ArrrTableLoader = () => {
     return (
-      <Box sx={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap' }}>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-          }}
-        >
-          <CircularProgress />
-        </Box>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            sx={{ color: 'primary.main', fontStyle: 'italic', fontWeight: 700 }}
-          >
-            {t('core:message.generic.loading_transactions', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Typography>
-        </Box>
-      </Box>
+      <WalletTransactionsLoader
+        label={t('core:message.generic.loading_transactions', {
+          postProcess: 'capitalizeFirstChar',
+        })}
+      />
     );
   };
 
-  const ArrrTransactionsTable = () => {
-    return (
-      <TableContainer component={Paper}>
-        <Table
-          stickyHeader
-          sx={{ width: '100%' }}
-          aria-label="transactions table"
-        >
-          <TableHead>
-            <TableRow>
-              <StyledTableCell align="left">
-                {t('core:sender', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:receiver', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:transaction_hash', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:memo', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:total_amount', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:fee.fee', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:time', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {(rowsPerPage > 0
-              ? transactionsArrr.slice(
-                  page * rowsPerPage,
-                  page * rowsPerPage + rowsPerPage
-                )
-              : transactionsArrr
-            ).map(
-              (
-                row: {
-                  inputs: {
-                    address: any;
-                    addressInWallet: boolean;
-                    amount: number;
-                  }[];
-                  outputs: {
-                    address: any;
-                    addressInWallet: boolean;
-                    amount: number;
-                  }[];
-                  txHash: string;
-                  totalAmount: any;
-                  feeAmount: any;
-                  memo: string;
-                  timestamp: number;
-                },
-                k: Key
-              ) => (
-                <StyledTableRow key={k}>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {row.inputs.map((input, index) => (
-                      <Box
-                        key={index}
-                        style={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          color: input.addressInWallet
-                            ? undefined
-                            : theme.palette.info.main,
-                        }}
-                      >
-                        <span style={{ flex: 1, textAlign: 'left' }}>
-                          {cropString(input.address)}
-                        </span>
-                        <span style={{ flex: 1, textAlign: 'right' }}>
-                          {(Number(input.amount) / 1e8).toFixed(
-                            DECIMAL_ROUND_UP
-                          )}
-                        </span>
-                      </Box>
-                    ))}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {row.outputs.map((output, index) => (
-                      <Box
-                        key={index}
-                        style={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          color: output.addressInWallet
-                            ? undefined
-                            : theme.palette.info.main,
-                        }}
-                      >
-                        <span style={{ flex: 1, textAlign: 'left' }}>
-                          {cropString(output.address)}
-                        </span>
-                        <span style={{ flex: 1, textAlign: 'right' }}>
-                          {(Number(output.amount) / 1e8).toFixed(
-                            DECIMAL_ROUND_UP
-                          )}
-                        </span>
-                      </Box>
-                    ))}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {cropString(row?.txHash)}
-                    <CustomWidthTooltip
-                      placement="top"
-                      title={
-                        copyArrrTxHash
-                          ? copyArrrTxHash
-                          : t('core:action.copy_hash', {
-                              hash: row?.txHash,
-                              postProcess: 'capitalizeFirstChar',
-                            })
-                      }
-                    >
-                      <IconButton
-                        aria-label="copy"
-                        size="small"
-                        onClick={() => {
-                          copyToClipboard(row?.txHash);
-                          changeCopyArrrTxHash();
-                        }}
-                      >
-                        <CopyAllTwoTone fontSize="small" />
-                      </IconButton>
-                    </CustomWidthTooltip>
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {row?.memo ? row?.memo : EMPTY_STRING}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {row?.totalAmount > 0 ? (
-                      <Box style={{ color: theme.palette.success.main }}>
-                        +
-                        {(Number(row?.totalAmount) / 1e8).toFixed(
-                          DECIMAL_ROUND_UP
-                        )}
-                      </Box>
-                    ) : (
-                      <Box style={{ color: theme.palette.error.main }}>
-                        {(Number(row?.totalAmount) / 1e8).toFixed(
-                          DECIMAL_ROUND_UP
-                        )}
-                      </Box>
-                    )}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="right">
-                    {row?.totalAmount <= 0 ? (
-                      <Box style={{ color: theme.palette.error.main }}>
-                        -
-                        {(Number(row?.feeAmount) / 1e8).toFixed(
-                          DECIMAL_ROUND_UP
-                        )}
-                      </Box>
-                    ) : (
-                      <Box></Box>
-                    )}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    <CustomWidthTooltip
-                      placement="top"
-                      title={new Date(row?.timestamp).toLocaleString()}
-                    >
-                      <Box>{epochToAgo(row?.timestamp)}</Box>
-                    </CustomWidthTooltip>
-                  </StyledTableCell>
-                </StyledTableRow>
-              )
-            )}
-            {emptyRows > 0 && (
-              <TableRow style={{ height: 53 * emptyRows }}>
-                <TableCell colSpan={6} />
-              </TableRow>
-            )}
-          </TableBody>
-          <TableFooter sx={{ width: '100%' }}>
-            <TableRow>
-              <TablePagination
-                labelRowsPerPage={t('core:rows_per_page', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-                rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
-                colSpan={6}
-                count={transactionsArrr.length}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                slotProps={{
-                  select: {
-                    inputProps: {
-                      'aria-label': 'rows per page',
-                    },
-                    native: true,
-                  },
-                }}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    );
-  };
+  const ArrrTransactionsTable = () => (
+    <WalletExternalTransactionsList
+      ActionsComponent={TablePaginationActions}
+      coin="ARRR"
+      copyHashLabel={copyArrrTxHash || undefined}
+      labels={{
+        copyHash: (hash) =>
+          t('core:action.copy_hash', {
+            hash,
+            postProcess: 'capitalizeFirstChar',
+          }),
+        fee: t('core:fee.fee', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        memo: t('core:memo', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        noTransactions: 'No transactions.',
+        receiver: t('core:receiver', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        rowsPerPage: t('core:rows_per_page', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        sender: t('core:sender', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        time: t('core:time', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        totalAmount: t('core:total_amount', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        transactionHash: t('core:transaction_hash', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        waitingConfirmation: t('core:message.generic.waiting_confirmation', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+      }}
+      onCopyHash={(hash) => {
+        copyToClipboard(hash);
+        changeCopyArrrTxHash();
+      }}
+      onPageChange={handleChangePage}
+      onRowsPerPageChange={handleChangeRowsPerPage}
+      page={page}
+      rows={transactionsArrr}
+      rowsPerPage={rowsPerPage}
+      showMemo
+    />
+  );
 
   return (
     <Box sx={{ width: '100%', mt: 2 }}>
@@ -964,13 +816,25 @@ export default function PirateWallet() {
         </DialogActions>
       </LightwalletDialog>
 
-      <Dialog
-        fullScreen
+      <WalletSendDialog
         open={openArrrSend}
         onClose={handleCloseArrrSend}
         slots={{ transition: Transition }}
+        maxWidth={false}
+        fullWidth
+        disableScrollLock
+        slotProps={{
+          paper: {
+            sx: sendCoinDialogPaperSx,
+          },
+        }}
       >
-        <SubmitDialog fullWidth={true} maxWidth="xs" open={openTxArrrSubmit}>
+        <SubmitDialog
+          fullWidth={true}
+          maxWidth="xs"
+          open={openTxArrrSubmit}
+          disableScrollLock
+        >
           <DialogContent>
             <Box
               sx={{
@@ -1047,224 +911,98 @@ export default function PirateWallet() {
             })}
           </Alert>
         </Snackbar>
-        <AppBar sx={{ position: 'static' }}>
-          <Toolbar>
-            <IconButton
-              edge="start"
-              color="inherit"
-              onClick={handleCloseArrrSend}
-              aria-label="close"
-            >
-              <Close />
-            </IconButton>
-            <Avatar
-              sx={{ width: 28, height: 28 }}
-              alt="ARRR Logo"
-              src={coinLogoARRR}
-            />
-            <Typography
-              variant="h6"
-              noWrap
-              component="div"
-              sx={{
-                flexGrow: 1,
-                display: {
-                  xs: 'none',
-                  sm: 'block',
-                  paddingLeft: '10px',
-                  paddingTop: '3px',
-                },
-              }}
-            >
-              {t('core:action.transfer_coin', {
-                coin: Coin.ARRR,
-                postProcess: 'capitalizeAll',
-              })}
-            </Typography>
-            <Button
-              disabled={disableCanSendArrr()}
-              variant="contained"
-              startIcon={<Send />}
-              aria-label="send-arrr"
-              onClick={sendArrrRequest}
-              sx={{
-                backgroundcolor: 'action.main',
-                color: 'white',
-                '&:hover': { backgroundcolor: 'action.hover' },
-              }}
-            >
-              {t('core:action.send', {
-                postProcess: 'capitalizeAll',
-              })}
-            </Button>
-          </Toolbar>
-        </AppBar>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            align="center"
-            gutterBottom
-            sx={{ color: 'primary.main', fontWeight: 700 }}
-          >
-            {t('core:balance_available', {
-              postProcess: 'capitalizeAll',
-            })}
-            &nbsp;&nbsp;
-          </Typography>
-          <Typography
-            variant="h5"
-            align="center"
-            gutterBottom
-            sx={{ color: 'text.primary', fontWeight: 700 }}
-          >
-            {isLoadingWalletBalanceArrr ? (
-              <Box sx={{ width: '175px' }}>
-                <LinearProgress />
-              </Box>
-            ) : (
-              walletBalanceArrr + ' ARRR'
-            )}
-          </Typography>
-        </Box>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            align="center"
-            sx={{ color: 'primary.main', fontWeight: 700 }}
-          >
-            {t('core:max_sendable', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            &nbsp;&nbsp;
-          </Typography>
-          <Typography
-            variant="h5"
-            align="center"
-            sx={{ color: 'text.primary', fontWeight: 700 }}
-          >
-            {(walletBalanceArrr - ARRR_FEE).toFixed(DECIMAL_ROUND_UP) + ' ARRR'}
-          </Typography>
-          <Box style={{ marginInlineStart: '15px' }}>
-            <Button
-              variant="outlined"
-              size="small"
-              onClick={handleSendMaxArrr}
-              style={{ borderRadius: 50 }}
-            >
-              {t('core:action.send_max', {
-                postProcess: 'capitalizeAll',
-              })}
-            </Button>
-          </Box>
-        </Box>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'stretch',
-            justifyContent: 'center',
-            gap: 2,
-            mt: 2.5,
-            mx: 'auto',
-            width: '100%',
-            maxWidth: 420,
-            px: { xs: 2, sm: 1 },
-          }}
-        >
-          <NumericFormat
-            decimalScale={8}
-            defaultValue={0}
-            value={arrrAmount}
-            allowNegative={false}
-            customInput={TextField}
-            valueIsNumericString
-            {...({ label: 'Amount (ARRR)' } as any)}
-            fullWidth
-            isAllowed={(values) => {
-              const maxArrrCoin = walletBalanceArrr - ARRR_FEE;
-              const { formattedValue, floatValue } = values;
-              return (
-                formattedValue === EMPTY_STRING ||
-                (floatValue !== undefined && floatValue <= maxArrrCoin)
-              );
-            }}
-            onValueChange={(values) => {
-              setArrrAmount(values.floatValue ?? 0);
-            }}
-            slotProps={{
-              input: {
-                variant: 'outlined',
-              },
-            }}
-            required
-          />
-          <TextField
-            required
-            label={t('core:receiver_address', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            id="arrr-address"
-            margin="normal"
-            value={arrrRecipient}
-            onChange={handleRecipientChange}
-            error={addressFormatError}
-            fullWidth
-            helperText={t('core:message.generic.pirate_chain_address', {
+        <ExternalSendForm
+          addressError={addressFormatError}
+          addressHelperText={
+            t('core:message.generic.pirate_chain_address', {
               postProcess: 'capitalizeFirstChar',
-            })}
-            slotProps={{ htmlInput: { maxLength: 78, minLength: 78 } }}
-          />
-          <TextField
-            label={t('core:memo', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            id="arrr-memo"
-            margin="normal"
-            value={arrrMemo}
-            fullWidth
-            helperText={t('core:message.generic.pirate_chain_max_chars', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            slotProps={{ htmlInput: { maxLength: 40, minLength: 40 } }}
-            onChange={(e: any) => setArrrMemo(e.target.value)}
-          />
-        </Box>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
+            })
+          }
+          addressInputId="arrr-address"
+          afterRecipientContent={
+            <Box sx={{ display: 'grid', gap: 0.85 }}>
+              <Typography sx={arrrSendLabelSx}>Memo</Typography>
+              <TextField
+                id="arrr-memo"
+                value={arrrMemo}
+                fullWidth
+                placeholder="Optional memo"
+                slotProps={{
+                  htmlInput: {
+                    'aria-label': 'ARRR memo',
+                    maxLength: 40,
+                  },
+                }}
+                onChange={(
+                  e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+                ) => setArrrMemo(e.target.value)}
+                sx={arrrFieldSx}
+              />
+            </Box>
+          }
+          amount={arrrAmount}
+          balance={walletBalanceArrr}
+          balanceError={null}
+          coinLogo={coinLogoARRR}
+          feeContent={
+            <Tooltip title="Current network sending fee. This amount is reserved from the maximum sendable balance.">
+              <Box
+                sx={{
+                  alignItems: 'center',
+                  color: 'text.secondary',
+                  display: 'grid',
+                  gap: 0.75,
+                  gridTemplateColumns: 'auto auto minmax(80px, auto)',
+                  justifySelf: 'end',
+                  mt: -0.3,
+                  opacity: 0.78,
+                  px: 0.4,
+                }}
+              >
+                <InfoOutlined sx={arrrSendInfoIconSx} />
+                <Typography
+                  sx={{
+                    fontSize: { xs: 12.5, sm: 13 },
+                    fontWeight: 500,
+                  }}
+                >
+                  Network fee
+                </Typography>
+                <Typography
+                  sx={{
+                    color: 'text.primary',
+                    fontSize: { xs: 14, sm: 14.5 },
+                    fontWeight: 700,
+                    textAlign: 'right',
+                    whiteSpace: 'nowrap',
+                  }}
+                >
+                  {ARRR_FEE} ARRR
+                </Typography>
+              </Box>
+            </Tooltip>
+          }
+          isBalanceLoading={isLoadingWalletBalanceArrr}
+          maxSendable={maxSendableArrrCoin()}
+          onAmountChange={setArrrAmount}
+          onClearRecipient={handleClearArrrRecipient}
+          onClose={handleCloseArrrSend}
+          onOpenAddressBook={handleOpenAddressBook}
+          onRecipientChange={handleRecipientChange}
+          onSend={sendArrrRequest}
+          onSendMax={handleSendMaxArrr}
+          recipient={arrrRecipient}
+          recipientDisplayName={arrrRecipientDisplayName}
+          recipientInputProps={{
+            maxLength: 78,
+            minLength: 78,
           }}
-        >
-          <Typography
-            align="center"
-            sx={{ fontWeight: 600, fontSize: '14px', marginTop: '15px' }}
-          >
-            {t('core:message.generic.sending_fee', {
-              quantity: ARRR_FEE,
-              coin: Coin.ARRR,
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Typography>
-        </Box>
-      </Dialog>
+          recipientSubtitle="ARRR address book contact"
+          sendDisabled={disableCanSendArrr()}
+          showAddressBookButton
+          symbol="ARRR"
+        />
+      </WalletSendDialog>
 
       <LightwalletDialog
         onClose={handleCloseArrrServerChange}
@@ -1335,310 +1073,76 @@ export default function PirateWallet() {
         </DialogActions>
       </LightwalletDialog>
 
-      <WalletCard sx={{ p: { xs: 2, md: 3 }, width: '100%' }}>
-        <Grid container rowSpacing={{ xs: 2, md: 3 }} columnSpacing={2}>
-          <Grid
-            container
-            alignItems="center"
-            columnSpacing={4}
-            rowSpacing={{ xs: 12, md: 0 }}
-          >
-            <Grid
-              container
-              size={12}
-              justifyContent="space-around"
-              alignItems="center"
-              sx={{
-                flexDirection: { xs: 'column', md: 'row' },
-                textAlign: { xs: 'center', md: 'left' },
-                gap: { xs: 3, md: 0 },
-              }}
-            >
-              <Box
-                sx={{
-                  display: 'grid',
-                  alignItems: 'center',
-                  justifyItems: { xs: 'center', md: 'start' },
-                  gap: 1,
-                }}
-              >
-                <Box
-                  component="img"
-                  alt="ARRR Logo"
-                  src={coinLogoARRR}
+      <WalletWorkspace
+        address={walletInfoArrr?.address ?? EMPTY_STRING}
+        addressBookRefreshKey={openArrrAddressBook}
+        balance={walletBalanceArrr}
+        balanceDecimals={8}
+        coin="ARRR"
+        isBalanceLoading={isLoadingWalletBalanceArrr}
+        onAddContact={handleOpenAddressBook}
+        onSelectAddress={handleSelectAddress}
+        onSend={handleOpenArrrSend}
+        onToggleReceive={() => setReceivePanelOpen((prev) => !prev)}
+        receiveOpen={receivePanelOpen}
+        rightColumnAfter={
+          <WalletCard sx={{ overflow: 'hidden', width: '100%' }}>
+            <Box sx={{ display: 'grid', gap: 1.5, p: { xs: 2, md: 2.25 } }}>
+              <Typography sx={{ fontWeight: 600 }}>
+                Lightwallet server
+              </Typography>
+              <Box sx={{ minWidth: 0 }}>
+                <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                  Current server
+                </Typography>
+                <Typography
                   sx={{
-                    width: { xs: 96, sm: 110, md: 120 },
-                    height: { xs: 96, sm: 110, md: 120 },
-                    mr: { md: 1 },
+                    fontWeight: 600,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
                   }}
-                />
-                <Typography
-                  variant="subtitle2"
-                  sx={{ color: 'text.secondary' }}
                 >
-                  {t('core:message.generic.pirate_chain_wallet', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
+                  {currentLightwalletServerArrr[0]?.hostName ? (
+                    currentLightwalletServerArrr[0]?.hostName +
+                    ':' +
+                    currentLightwalletServerArrr[0]?.port
+                  ) : (
+                    <LinearProgress />
+                  )}
                 </Typography>
               </Box>
-
-              <Grid
-                sx={{
-                  display: 'grid',
-                  gap: { xs: 2, md: 1 },
-                  gridTemplateColumns: {
-                    xs: '1fr',
-                    md: 'minmax(0, 1fr) minmax(0, 0.6fr)',
-                  },
-                  gridTemplateRows: { xs: 'repeat(4, auto)', md: '1fr 1fr' },
-                }}
-              >
-                <Grid
-                  sx={{
-                    gridColumn: { xs: '1', md: '1' },
-                    gridRow: { xs: '1', md: '1' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                  display={'flex'}
-                  alignItems={'center'}
-                  justifyContent={{ xs: 'center', md: 'flex-start' }}
-                  gap={1}
-                >
-                  <Typography
-                    variant="h5"
-                    sx={{ color: 'primary.main', fontWeight: 700 }}
-                  >
-                    {t('core:balance', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Typography>
-                  <Typography variant="h5" sx={{ fontWeight: 700 }}>
-                    {walletBalanceArrr ? (
-                      `${walletBalanceArrr} ARRR`
-                    ) : (
-                      <LinearProgress />
-                    )}
-                  </Typography>
-                </Grid>
-
-                <Grid
-                  sx={{
-                    gridColumn: { xs: '1', md: '1' },
-                    gridRow: { xs: '2', md: '2' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                >
-                  <Box display={'flex'} alignItems={'center'} gap={1}>
-                    <Typography
-                      variant="subtitle1"
-                      sx={{ color: 'primary.main', fontWeight: 700 }}
-                    >
-                      {t('core:address', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    </Typography>
-                    <Typography
-                      variant="subtitle1"
-                      sx={{
-                        color: 'text.primary',
-                        fontWeight: 700,
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        width: {
-                          xs: '100%',
-                          sm: '220px',
-                          md: '200px',
-                          lg: '370px',
-                        },
-                      }}
-                    >
-                      {walletInfoArrr?.address}
-                    </Typography>
-
-                    <CustomWidthTooltip
-                      placement="top"
-                      title={t('core:action.copy_address', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    >
-                      <IconButton
-                        size="small"
-                        onClick={() =>
-                          copyToClipboard(
-                            walletInfoArrr?.address ?? EMPTY_STRING
-                          )
-                        }
-                      >
-                        <CopyAllTwoTone fontSize="small" />
-                      </IconButton>
-                    </CustomWidthTooltip>
-                  </Box>
-                </Grid>
-
-                <Grid
-                  sx={{
-                    gridColumn: { xs: '1 / span 2', md: '1 / span 2' },
-                    gridRow: { xs: '3', md: '3' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                >
-                  <Box display={'flex'} alignItems={'center'} gap={1}>
-                    <Typography
-                      variant="subtitle1"
-                      align="center"
-                      sx={{ color: 'primary.main', fontWeight: 700 }}
-                    >
-                      {t('core:message.generic.lightwallet_server', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    </Typography>
-                    <Typography
-                      variant="subtitle1"
-                      align="center"
-                      sx={{ color: 'text.primary', fontWeight: 700 }}
-                    >
-                      {currentLightwalletServerArrr[0]?.hostName ? (
-                        currentLightwalletServerArrr[0]?.hostName +
-                        ':' +
-                        currentLightwalletServerArrr[0]?.port
-                      ) : (
-                        <Box sx={{ width: '175px' }}>
-                          <LinearProgress />
-                        </Box>
-                      )}
-                    </Typography>
-                  </Box>
-                  <Box>
-                    <Typography variant="subtitle1">{syncStatus}</Typography>
-                    {!isSynced && !isLoadingWalletBalanceArrr && (
-                      <Button
-                        variant="contained"
-                        startIcon={<Send style={{ marginBottom: 2 }} />}
-                        aria-label="Change Server"
-                        onClick={handleRetry}
-                      >
-                        {t('core:action.retry', {
-                          postProcess: 'capitalizeFirstChar',
-                        })}
-                      </Button>
-                    )}
-                  </Box>
-                </Grid>
-
-                <Grid
-                  alignContent={'center'}
-                  display={'flex'}
-                  justifyContent={'center'}
-                  sx={{
-                    gridColumn: { xs: '1', md: '2' },
-                    gridRow: { xs: '4', md: '1 / span 2' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                >
-                  <Box
-                    sx={{
-                      alignItems: 'center',
-                      aspectRatio: '1 / 1',
-                      bgcolor: '#fff',
-                      border: (t: any) => `1px solid ${t.palette.divider}`,
-                      borderRadius: 1,
-                      boxShadow: (t: any) => t.shadows[2],
-                      display: 'flex',
-                      height: '100%',
-                      justifyContent: 'center',
-                      maxHeight: { xs: 200, md: 150 },
-                      maxWidth: { xs: 200, md: 150 },
-                      p: 0.5,
-                    }}
-                  >
-                    <QRCode
-                      value={walletInfoArrr?.address ?? EMPTY_STRING}
-                      size={200}
-                      fgColor="#000000"
-                      bgColor="#ffffff"
-                      level="H"
-                      style={{ width: '100%', height: '100%' }}
-                    />
-                  </Box>
-                </Grid>
-              </Grid>
-            </Grid>
-
-            <Grid size={12}>
-              <Box
-                sx={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  gap: 3,
-                  mt: { xs: 1, md: 2 },
-                  flexWrap: 'wrap',
-                }}
+              <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+                {syncStatus}
+              </Typography>
+              <Button
+                fullWidth
+                onClick={handleOpenArrrServerChange}
+                variant="outlined"
               >
-                <WalletButtons
-                  variant="contained"
-                  startIcon={<Send style={{ marginBottom: 2 }} />}
-                  aria-label="Transfer"
-                  onClick={handleOpenArrrSend}
-                >
-                  {t('core:action.transfer_coin', {
-                    coin: Coin.ARRR,
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </WalletButtons>
-                <WalletButtons
-                  variant="contained"
-                  startIcon={<Send style={{ marginBottom: 2 }} />}
-                  aria-label="Change Server"
-                  onClick={handleOpenArrrServerChange}
-                >
-                  {t('core:action.change_server', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </WalletButtons>
-
-                <WalletButtons
-                  variant="contained"
-                  startIcon={<ImportContacts style={{ marginBottom: 2 }} />}
-                  aria-label="AddressBook"
-                  onClick={handleOpenAddressBook}
-                >
-                  {t('core:address_book', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </WalletButtons>
-              </Box>
-            </Grid>
-          </Grid>
-
-          <Grid size={12}>
-            <Box sx={{ width: '100%', mt: 3 }}>
-              <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
-                <Button
-                  size="large"
-                  onClick={handleLoadingRefreshArrr}
-                  loading={loadingRefreshArrr}
-                  loadingPosition="start"
-                  startIcon={<Refresh style={{ marginBottom: 2 }} />}
-                  variant="text"
-                  sx={{ borderRadius: 50 }}
-                >
-                  <span>
-                    {t('core:transactions', { postProcess: 'capitalizeAll' })}
-                  </span>
+                Change server
+              </Button>
+              {!isSynced && !isLoadingWalletBalanceArrr && (
+                <Button fullWidth onClick={handleRetry} variant="contained">
+                  Retry
                 </Button>
-              </Box>
-
-              {isLoadingArrrTransactions ? (
-                <Box sx={{ width: '100%' }}>{ArrrTableLoader()}</Box>
-              ) : (
-                <Box sx={{ width: '100%' }}>{ArrrTransactionsTable()}</Box>
               )}
             </Box>
-          </Grid>
-        </Grid>
-      </WalletCard>
+          </WalletCard>
+        }
+        transactions={
+          <WalletTransactionsCard
+            isRefreshing={loadingRefreshArrr}
+            onRefresh={handleLoadingRefreshArrr}
+          >
+            {isLoadingArrrTransactions || loadingRefreshArrr ? (
+              ArrrTableLoader()
+            ) : (
+              <Box sx={{ width: '100%' }}>{ArrrTransactionsTable()}</Box>
+            )}
+          </WalletTransactionsCard>
+        }
+      />
     </Box>
   );
 }
diff --git a/src/pages/btc/index.tsx b/src/pages/btc/index.tsx
index 64fa583..1849ce8 100644
--- a/src/pages/btc/index.tsx
+++ b/src/pages/btc/index.tsx
@@ -1,58 +1,27 @@
 import {
   ChangeEvent,
-  Key,
   MouseEvent,
   SyntheticEvent,
   useEffect,
   useState,
 } from 'react';
-import {
-  epochToAgo,
-  timeoutDelay,
-  cropString,
-  copyToClipboard,
-} from '../../common/functions';
+import { timeoutDelay, copyToClipboard } from '../../common/functions';
 import { useTheme } from '@mui/material/styles';
 import {
   Alert,
-  AppBar,
-  Avatar,
   Box,
-  Button,
-  Dialog,
   DialogContent,
-  Grid,
   IconButton,
-  Paper,
-  Table,
-  TableBody,
-  TableContainer,
-  TableFooter,
-  TableHead,
-  TablePagination,
-  TableRow,
-  TextField,
-  Toolbar,
   Typography,
 } from '@mui/material';
-import { NumericFormat as _NumericFormat } from 'react-number-format';
-const NumericFormat = _NumericFormat as React.FC<React.ComponentProps<typeof _NumericFormat> & Record<string, unknown>>;
-import TableCell from '@mui/material/TableCell';
 import Snackbar from '@mui/material/Snackbar';
 type SnackbarCloseReason = 'timeout' | 'clickaway' | 'escapeKeyDown';
 import CircularProgress from '@mui/material/CircularProgress';
-import LinearProgress from '@mui/material/LinearProgress';
-import QRCode from 'react-qr-code';
 import {
-  Close,
-  CopyAllTwoTone,
   FirstPage,
-  ImportContacts,
   KeyboardArrowLeft,
   KeyboardArrowRight,
   LastPage,
-  Refresh,
-  Send,
 } from '@mui/icons-material';
 import coinLogoBTC from '../../assets/btc.png';
 import { FeeManager } from '../../components/FeeManager';
@@ -68,18 +37,24 @@ import {
   TIME_SECONDS_4,
 } from '../../common/constants';
 import {
-  CustomWidthTooltip,
   SlideTransition,
-  StyledTableCell,
-  StyledTableRow,
   SubmitDialog,
   Transition,
-  WalletButtons,
-  WalletCard,
+  WalletSendDialog,
 } from '../../styles/page-styles';
 import { Coin } from 'qapp-core';
 import { validateBtcAddress } from '../../utils/addressValidation';
 import { AddressBookDialog } from '../../components/AddressBook/AddressBookDialog';
+import {
+  WalletExternalTransactionsList,
+  WalletTransactionsCard,
+  WalletTransactionsLoader,
+  WalletWorkspace,
+} from '../../components/WalletWorkspace';
+import {
+  ExternalSendForm,
+  sendCoinDialogPaperSx,
+} from '../../components/ExternalSendForm';
 
 interface TablePaginationActionsProps {
   count: number;
@@ -161,8 +136,6 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 
 export default function BitcoinWallet() {
   const { t } = useTranslation(['core']);
-  const theme = useTheme();
-
   const [walletInfoBtc, setWalletInfoBtc] = useState<any>({});
   const [_isLoadingWalletInfoBtc, setIsLoadingWalletInfoBtc] =
     useState<boolean>(false);
@@ -173,17 +146,20 @@ export default function BitcoinWallet() {
   const [_isLoadingBtcTransactions, setIsLoadingBtcTransactions] =
     useState<boolean>(true);
   const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(25);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
   const [copyBtcTxHash, setCopyBtcTxHash] = useState(EMPTY_STRING);
   const [openBtcSend, setOpenBtcSend] = useState(false);
   const [btcAmount, setBtcAmount] = useState<number>(0);
   const [btcRecipient, setBtcRecipient] = useState(EMPTY_STRING);
+  const [btcRecipientDisplayName, setBtcRecipientDisplayName] =
+    useState(EMPTY_STRING);
   const [addressFormatError, setAddressFormatError] = useState(false);
   const [loadingRefreshBtc, setLoadingRefreshBtc] = useState(false);
   const [openTxBtcSubmit, setOpenTxBtcSubmit] = useState(false);
   const [openSendBtcSuccess, setOpenSendBtcSuccess] = useState(false);
   const [openSendBtcError, setOpenSendBtcError] = useState(false);
   const [openBtcAddressBook, setOpenBtcAddressBook] = useState(false);
+  const [receivePanelOpen, setReceivePanelOpen] = useState(false);
   const [inputFee, setInputFee] = useState(0);
   const [_walletInfoError, setWalletInfoError] = useState<string | null>(null);
   const [walletBalanceError, setWalletBalanceError] = useState<string | null>(
@@ -205,11 +181,6 @@ export default function BitcoinWallet() {
     return truncatedMaxSendableBtcCoin;
   };
 
-  const emptyRows =
-    page > 0
-      ? Math.max(0, (1 + page) * rowsPerPage - transactionsBtc.length)
-      : 0;
-
   const handleOpenAddressBook = () => {
     setOpenBtcAddressBook(true);
   };
@@ -218,8 +189,9 @@ export default function BitcoinWallet() {
     setOpenBtcAddressBook(false);
   };
 
-  const handleSelectAddress = (address: string, _name: string) => {
+  const handleSelectAddress = (address: string, name: string) => {
     setBtcRecipient(address);
+    setBtcRecipientDisplayName(name || EMPTY_STRING);
     setBtcAmount(0);
     setOpenBtcAddressBook(false);
     setOpenBtcSend(true);
@@ -231,6 +203,7 @@ export default function BitcoinWallet() {
   const handleOpenBtcSend = () => {
     setBtcAmount(0);
     setBtcRecipient(EMPTY_STRING);
+    setBtcRecipientDisplayName(EMPTY_STRING);
     setOpenBtcSend(true);
     setAddressFormatError(false);
     setOpenSendBtcError(false);
@@ -245,6 +218,7 @@ export default function BitcoinWallet() {
   ) => {
     const value = e.target.value.trim();
     setBtcRecipient(value);
+    setBtcRecipientDisplayName(EMPTY_STRING);
 
     if (validateBtcAddress(value) || value === EMPTY_STRING) {
       setAddressFormatError(false);
@@ -255,12 +229,20 @@ export default function BitcoinWallet() {
 
   const handleCloseBtcSend = () => {
     setBtcAmount(0);
+    setBtcRecipientDisplayName(EMPTY_STRING);
     setOpenBtcSend(false);
     setAddressFormatError(false);
     setOpenSendBtcError(false);
     setWalletBalanceError(null);
   };
 
+  const handleClearBtcRecipient = () => {
+    setBtcRecipient(EMPTY_STRING);
+    setBtcRecipientDisplayName(EMPTY_STRING);
+    setAddressFormatError(false);
+    setOpenSendBtcError(false);
+  };
+
   const changeCopyBtcTxHash = async () => {
     setCopyBtcTxHash('Copied');
     await timeoutDelay(TIME_SECONDS_2);
@@ -407,7 +389,7 @@ export default function BitcoinWallet() {
     setLoadingRefreshBtc(false);
   };
 
-  const handleSendMaxBtc = () => {    
+  const handleSendMaxBtc = () => {
     if (maxSendableBtcCoin() <= 0) {
       setBtcAmount(0);
     } else {
@@ -429,6 +411,7 @@ export default function BitcoinWallet() {
       if (!sendRequest?.error) {
         setBtcAmount(0);
         setBtcRecipient(EMPTY_STRING);
+        setBtcRecipientDisplayName(EMPTY_STRING);
         setOpenTxBtcSubmit(false);
         setOpenSendBtcSuccess(true);
         setIsLoadingWalletBalanceBtc(true);
@@ -438,6 +421,7 @@ export default function BitcoinWallet() {
     } catch (error) {
       setBtcAmount(0);
       setBtcRecipient(EMPTY_STRING);
+      setBtcRecipientDisplayName(EMPTY_STRING);
       setOpenTxBtcSubmit(false);
       setOpenSendBtcError(true);
       setIsLoadingWalletBalanceBtc(true);
@@ -449,279 +433,84 @@ export default function BitcoinWallet() {
 
   const tableLoader = () => {
     return (
-      <Box sx={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap' }}>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-          }}
-        >
-          <CircularProgress />
-        </Box>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            sx={{ color: 'primary.main', fontStyle: 'italic', fontWeight: 700 }}
-          >
-            {t('core:message.generic.loading_transactions', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Typography>
-        </Box>
-      </Box>
+      <WalletTransactionsLoader
+        label={t('core:message.generic.loading_transactions', {
+          postProcess: 'capitalizeFirstChar',
+        })}
+      />
     );
   };
 
-  const transactionsTable = () => {
-    return (
-      <TableContainer component={Paper}>
-        <Table
-          stickyHeader
-          sx={{ width: '100%' }}
-          aria-label="transactions table"
-        >
-          <TableHead>
-            <TableRow>
-              <StyledTableCell align="left">
-                {t('core:sender', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:receiver', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:transaction_hash', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:total_amount', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:fee.fee', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:time', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {(rowsPerPage > 0
-              ? transactionsBtc.slice(
-                  page * rowsPerPage,
-                  page * rowsPerPage + rowsPerPage
-                )
-              : transactionsBtc
-            )?.map(
-              (
-                row: {
-                  inputs: {
-                    address: any;
-                    addressInWallet: boolean;
-                    amount: number;
-                  }[];
-                  outputs: {
-                    address: any;
-                    addressInWallet: boolean;
-                    amount: number;
-                  }[];
-                  txHash: string;
-                  totalAmount: any;
-                  feeAmount: any;
-                  timestamp: number;
-                },
-                k: Key
-              ) => (
-                <StyledTableRow key={k}>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {row.inputs.map((input, index) => (
-                      <Box
-                        key={index}
-                        style={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          color: input.addressInWallet
-                            ? undefined
-                            : theme.palette.info.main,
-                        }}
-                      >
-                        <span style={{ flex: 1, textAlign: 'left' }}>
-                          {input.address}
-                        </span>
-                        <span style={{ flex: 1, textAlign: 'right' }}>
-                          {(Number(input.amount) / 1e8).toFixed(
-                            DECIMAL_ROUND_UP
-                          )}
-                        </span>
-                      </Box>
-                    ))}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {row.outputs.map((output, index) => (
-                      <Box
-                        key={index}
-                        style={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          color: output.addressInWallet
-                            ? undefined
-                            : theme.palette.info.main,
-                        }}
-                      >
-                        <span style={{ flex: 1, textAlign: 'left' }}>
-                          {output.address}
-                        </span>
-                        <span style={{ flex: 1, textAlign: 'right' }}>
-                          {(Number(output.amount) / 1e8).toFixed(
-                            DECIMAL_ROUND_UP
-                          )}
-                        </span>
-                      </Box>
-                    ))}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {cropString(row?.txHash)}
-                    <CustomWidthTooltip
-                      placement="top"
-                      title={
-                        copyBtcTxHash
-                          ? copyBtcTxHash
-                          : t('core:action.copy_hash', {
-                              hash: row?.txHash,
-                              postProcess: 'capitalizeFirstChar',
-                            })
-                      }
-                    >
-                      <IconButton
-                        aria-label="copy"
-                        size="small"
-                        onClick={() => {
-                          copyToClipboard(row?.txHash);
-                          changeCopyBtcTxHash();
-                        }}
-                      >
-                        <CopyAllTwoTone fontSize="small" />
-                      </IconButton>
-                    </CustomWidthTooltip>
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {row?.totalAmount > 0 ? (
-                      <Box sx={{ color: theme.palette.success.main }}>
-                        +
-                        {(Number(row?.totalAmount) / 1e8).toFixed(
-                          DECIMAL_ROUND_UP
-                        )}
-                      </Box>
-                    ) : (
-                      <Box sx={{ color: theme.palette.error.main }}>
-                        {(Number(row?.totalAmount) / 1e8).toFixed(
-                          DECIMAL_ROUND_UP
-                        )}
-                      </Box>
-                    )}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="right">
-                    {row?.totalAmount <= 0 ? (
-                      <Box sx={{ color: theme.palette.error.main }}>
-                        -
-                        {(Number(row?.feeAmount) / 1e8).toFixed(
-                          DECIMAL_ROUND_UP
-                        )}
-                      </Box>
-                    ) : (
-                      <Box style={{ color: 'grey' }}>
-                        -
-                        {(Number(row?.feeAmount) / 1e8).toFixed(
-                          DECIMAL_ROUND_UP
-                        )}
-                      </Box>
-                    )}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    <CustomWidthTooltip
-                      placement="top"
-                      title={
-                        row?.timestamp
-                          ? new Date(row?.timestamp).toLocaleString()
-                          : t('core:message.generic.waiting_confirmation', {
-                              postProcess: 'capitalizeFirstChar',
-                            })
-                      }
-                    >
-                      <Box>
-                        {row?.timestamp
-                          ? epochToAgo(row?.timestamp)
-                          : t('core:message.generic.unconfirmed_transaction', {
-                              postProcess: 'capitalizeFirstChar',
-                            })}
-                      </Box>
-                    </CustomWidthTooltip>
-                  </StyledTableCell>
-                </StyledTableRow>
-              )
-            )}
-            {emptyRows > 0 && (
-              <TableRow style={{ height: 53 * emptyRows }}>
-                <TableCell colSpan={6} />
-              </TableRow>
-            )}
-          </TableBody>
-          <TableFooter sx={{ width: '100%' }}>
-            <TableRow>
-              <TablePagination
-                labelRowsPerPage={t('core:rows_per_page', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-                rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
-                colSpan={6}
-                count={transactionsBtc.length}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                slotProps={{
-                  select: {
-                    inputProps: {
-                      'aria-label': 'rows per page',
-                    },
-                    native: true,
-                  },
-                }}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    );
-  };
+  const transactionsTable = () => (
+    <WalletExternalTransactionsList
+      ActionsComponent={TablePaginationActions}
+      coin="BTC"
+      copyHashLabel={copyBtcTxHash || undefined}
+      labels={{
+        copyHash: (hash) =>
+          t('core:action.copy_hash', {
+            hash,
+            postProcess: 'capitalizeFirstChar',
+          }),
+        fee: t('core:fee.fee', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        noTransactions: 'No transactions.',
+        receiver: t('core:receiver', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        rowsPerPage: t('core:rows_per_page', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        sender: t('core:sender', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        time: t('core:time', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        totalAmount: t('core:total_amount', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        transactionHash: t('core:transaction_hash', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        waitingConfirmation: t('core:message.generic.waiting_confirmation', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+      }}
+      onCopyHash={(hash) => {
+        copyToClipboard(hash);
+        changeCopyBtcTxHash();
+      }}
+      onPageChange={handleChangePage}
+      onRowsPerPageChange={handleChangeRowsPerPage}
+      page={page}
+      rows={transactionsBtc}
+      rowsPerPage={rowsPerPage}
+    />
+  );
 
   return (
     <Box sx={{ width: '100%', mt: 2 }}>
-      <Dialog
-        fullScreen
+      <WalletSendDialog
         open={openBtcSend}
         onClose={handleCloseBtcSend}
         slots={{ transition: Transition }}
+        maxWidth={false}
+        fullWidth
+        disableScrollLock
+        slotProps={{
+          paper: {
+            sx: sendCoinDialogPaperSx,
+          },
+        }}
       >
-        <SubmitDialog fullWidth={true} maxWidth="xs" open={openTxBtcSubmit}>
+        <SubmitDialog
+          fullWidth={true}
+          maxWidth="xs"
+          open={openTxBtcSubmit}
+          disableScrollLock
+        >
           <DialogContent>
             <Box
               sx={{
@@ -798,202 +587,40 @@ export default function BitcoinWallet() {
             })}
           </Alert>
         </Snackbar>
-        <AppBar sx={{ position: 'static' }}>
-          <Toolbar>
-            <IconButton
-              edge="start"
-              color="inherit"
-              onClick={handleCloseBtcSend}
-              aria-label="close"
-            >
-              <Close />
-            </IconButton>
-            <Avatar
-              sx={{ width: 28, height: 28 }}
-              alt="BTC Logo"
-              src={coinLogoBTC}
-            />
-            <Typography
-              variant="h6"
-              noWrap
-              component="div"
-              sx={{
-                flexGrow: 1,
-                display: {
-                  xs: 'none',
-                  sm: 'block',
-                  paddingLeft: '10px',
-                  paddingTop: '3px',
-                },
-              }}
-            >
-              {t('core:action.transfer_coin', {
-                coin: Coin.BTC,
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Typography>
-            <Button
-              disabled={disableCanSendBtc()}
-              variant="contained"
-              startIcon={<Send />}
-              aria-label="send-btc"
-              onClick={sendBtcRequest}
-              sx={{
-                backgroundColor: 'action.main',
-                color: 'white',
-                '&:hover': { backgroundColor: 'action.hover' },
-              }}
-            >
-              {t('core:action.send', {
-                postProcess: 'capitalizeAll',
-              })}
-            </Button>
-          </Toolbar>
-        </AppBar>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            align="center"
-            gutterBottom
-            sx={{ color: 'primary.main', fontWeight: 700 }}
-          >
-            {t('core:balance_available', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            &nbsp;&nbsp;
-          </Typography>
-          <Typography
-            variant="h5"
-            align="center"
-            gutterBottom
-            sx={{ color: 'text.primary', fontWeight: 700 }}
-          >
-            {isLoadingWalletBalanceBtc ? (
-              <Box sx={{ width: '175px' }}>
-                <LinearProgress />
-              </Box>
-            ) : walletBalanceError ? (
-              walletBalanceError
-            ) : (
-              walletBalanceBtc + ' BTC'
-            )}
-          </Typography>
-        </Box>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            align="center"
-            sx={{ color: 'primary.main', fontWeight: 700 }}
-          >
-            {t('core:max_sendable', {
-              postProcess: 'capitalizeAll',
-            })}
-            &nbsp;&nbsp;
-          </Typography>
-          <Typography
-            variant="h5"
-            align="center"
-            sx={{ color: 'text.primary', fontWeight: 700 }}
-          >
-            {(() => {
-              const newMaxBtcAmount =
-                +walletBalanceBtc - estimatedFeeCalculated;
-              if (newMaxBtcAmount < 0) {
-                return Number(0.0) + ' BTC';
-              } else {
-                return newMaxBtcAmount + ' BTC';
-              }
-            })()}
-          </Typography>
-          <Box style={{ marginInlineStart: '15px' }}>
-            <Button
-              variant="outlined"
-              size="small"
-              onClick={handleSendMaxBtc}
-              style={{ borderRadius: 50 }}
-            >
-              {t('core:action.send_max', {
-                postProcess: 'capitalizeAll',
-              })}
-            </Button>
-          </Box>
-        </Box>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'stretch',
-            justifyContent: 'center',
-            gap: 2,
-            mt: 2.5,
-            mx: 'auto',
-            width: '100%',
-            maxWidth: 420,
-            px: { xs: 2, sm: 1 },
-          }}
-        >
-          <NumericFormat
-            decimalScale={8}
-            defaultValue={0}
-            value={btcAmount}
-            allowNegative={false}
-            customInput={TextField as React.ComponentType<any>}
-            valueIsNumericString
-            label="Amount (BTC)"
-            fullWidth
-            isAllowed={(values) => {
-              const maxBtcCoin = +walletBalanceBtc - estimatedFeeCalculated;
-              const { formattedValue, floatValue } = values;
-              return (
-                formattedValue === EMPTY_STRING ||
-                (floatValue ?? 0) <= maxBtcCoin
-              );
-            }}
-            onValueChange={(values) => {
-              setBtcAmount(values.floatValue ?? 0);
-            }}
-            required
-          />
-          <TextField
-            required
-            label={t('core:receiver_address', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            id="btc-address"
-            margin="normal"
-            value={btcRecipient}
-            onChange={handleRecipientChange}
-            error={addressFormatError}
-            fullWidth
-            helperText={
-              addressFormatError
-                ? t('core:message.error.bitcoin_address_invalid', {
-                    postProcess: 'capitalizeFirstChar',
-                  })
-                : t('core:message.generic.bitcoin_address', {
-                    postProcess: 'capitalizeFirstChar',
-                  })
-            }
-          />
-        </Box>
-        <FeeManager coin="BTC" onChange={setInputFee} />
-      </Dialog>
+        <ExternalSendForm
+          addressError={addressFormatError}
+          addressHelperText={
+            addressFormatError
+              ? t('core:message.error.bitcoin_address_invalid', {
+                  postProcess: 'capitalizeFirstChar',
+                })
+              : t('core:message.generic.bitcoin_address', {
+                  postProcess: 'capitalizeFirstChar',
+                })
+          }
+          addressInputId="btc-address"
+          amount={btcAmount}
+          balance={walletBalanceBtc}
+          balanceError={walletBalanceError}
+          coinLogo={coinLogoBTC}
+          feeContent={<FeeManager coin="BTC" onChange={setInputFee} />}
+          isBalanceLoading={isLoadingWalletBalanceBtc}
+          maxSendable={maxSendableBtcCoin()}
+          onAmountChange={setBtcAmount}
+          onClearRecipient={handleClearBtcRecipient}
+          onClose={handleCloseBtcSend}
+          onOpenAddressBook={handleOpenAddressBook}
+          onRecipientChange={handleRecipientChange}
+          onSend={sendBtcRequest}
+          onSendMax={handleSendMaxBtc}
+          recipient={btcRecipient}
+          recipientDisplayName={btcRecipientDisplayName}
+          recipientSubtitle="BTC address book contact"
+          sendDisabled={disableCanSendBtc()}
+          showAddressBookButton
+          symbol="BTC"
+        />
+      </WalletSendDialog>
 
       <AddressBookDialog
         open={openBtcAddressBook}
@@ -1002,239 +629,32 @@ export default function BitcoinWallet() {
         onSelectAddress={handleSelectAddress}
       />
 
-      <WalletCard sx={{ p: { xs: 2, md: 3 }, width: '100%' }}>
-        <Grid container rowSpacing={{ xs: 2, md: 3 }} columnSpacing={2}>
-          <Grid
-            container
-            alignItems="center"
-            columnSpacing={4}
-            rowSpacing={{ xs: 12, md: 0 }}
+      <WalletWorkspace
+        address={walletInfoBtc?.address ?? EMPTY_STRING}
+        addressBookRefreshKey={openBtcAddressBook}
+        balance={walletBalanceBtc}
+        balanceDecimals={8}
+        balanceError={walletBalanceError}
+        coin="BTC"
+        isBalanceLoading={isLoadingWalletBalanceBtc}
+        onAddContact={handleOpenAddressBook}
+        onSelectAddress={handleSelectAddress}
+        onSend={handleOpenBtcSend}
+        onToggleReceive={() => setReceivePanelOpen((prev) => !prev)}
+        receiveOpen={receivePanelOpen}
+        transactions={
+          <WalletTransactionsCard
+            isRefreshing={loadingRefreshBtc}
+            onRefresh={handleLoadingRefreshBtc}
           >
-            <Grid
-              container
-              size={12}
-              justifyContent="space-around"
-              alignItems="center"
-              sx={{
-                flexDirection: { xs: 'column', md: 'row' },
-                textAlign: { xs: 'center', md: 'left' },
-                gap: { xs: 3, md: 0 },
-              }}
-            >
-              <Box sx={{ display: 'grid', alignItems: 'center' }}>
-                <Box
-                  component="img"
-                  alt="BTC Logo"
-                  src={coinLogoBTC}
-                  sx={{
-                    width: { xs: 96, sm: 110, md: 120 },
-                    height: { xs: 96, sm: 110, md: 120 },
-                    mr: { md: 1 },
-                  }}
-                />
-                <Typography
-                  variant="subtitle2"
-                  sx={{ color: 'text.secondary' }}
-                >
-                  {t('core:message.generic.bitcoin_wallet', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </Typography>
-              </Box>
-
-              <Grid
-                sx={{
-                  display: 'grid',
-                  gap: { xs: 2, md: 1 },
-                  gridTemplateColumns: {
-                    xs: '1fr',
-                    md: 'minmax(0, 1fr) minmax(0, 0.6fr)',
-                  },
-                  gridTemplateRows: { xs: 'repeat(3, auto)', md: '1fr 1fr' },
-                }}
-              >
-                <Grid
-                  sx={{
-                    gridColumn: { xs: '1', md: '1' },
-                    gridRow: { xs: '1', md: '1' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                  display={'flex'}
-                  alignItems={'center'}
-                  gap={1}
-                >
-                  <Typography
-                    variant="h5"
-                    sx={{ color: 'primary.main', fontWeight: 700 }}
-                  >
-                    {t('core:balance', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Typography>
-                  <Typography variant="h5" sx={{ fontWeight: 700 }}>
-                    {walletBalanceError
-                      ? walletBalanceError
-                      : walletBalanceBtc + ' BTC'}
-                  </Typography>
-                </Grid>
-
-                <Grid
-                  sx={{
-                    gridColumn: { xs: '1', md: '1' },
-                    gridRow: { xs: '2', md: '2' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                >
-                  <Box display={'flex'} alignItems={'center'} gap={1}>
-                    <Typography
-                      variant="subtitle1"
-                      sx={{ color: 'primary.main', fontWeight: 700 }}
-                    >
-                      {t('core:address', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    </Typography>
-                    <Typography
-                      variant="subtitle1"
-                      sx={{
-                        color: 'text.primary',
-                        fontWeight: 700,
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        width: {
-                          xs: '100%',
-                          sm: '220px',
-                          md: '200px',
-                          lg: '370px',
-                        },
-                      }}
-                    >
-                      {walletInfoBtc?.address}
-                    </Typography>
-                    <CustomWidthTooltip
-                      placement="top"
-                      title={t('core:action.copy_address', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    >
-                      <IconButton
-                        size="small"
-                        onClick={() =>
-                          copyToClipboard(
-                            walletInfoBtc?.address ?? EMPTY_STRING
-                          )
-                        }
-                      >
-                        <CopyAllTwoTone fontSize="small" />
-                      </IconButton>
-                    </CustomWidthTooltip>
-                  </Box>
-                </Grid>
-
-                <Grid
-                  alignContent={'center'}
-                  display={'flex'}
-                  justifyContent={'center'}
-                  sx={{
-                    gridColumn: { xs: '1', md: '2' },
-                    gridRow: { xs: '3', md: '1 / span 2' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                >
-                  <Box
-                    sx={{
-                      alignItems: 'center',
-                      aspectRatio: '1 / 1',
-                      bgcolor: '#fff',
-                      border: (t) => `1px solid ${t.palette.divider}`,
-                      borderRadius: 1,
-                      boxShadow: (t) => t.shadows[2],
-                      display: 'flex',
-                      height: '100%',
-                      justifyContent: 'center',
-                      maxHeight: { xs: 200, md: 150 },
-                      maxWidth: { xs: 200, md: 150 },
-                      p: 0.5,
-                    }}
-                  >
-                    <QRCode
-                      value={walletInfoBtc?.address ?? EMPTY_STRING}
-                      size={200}
-                      fgColor="#000000"
-                      bgColor="#ffffff"
-                      level="H"
-                      style={{ width: '100%', height: '100%' }}
-                    />
-                  </Box>
-                </Grid>
-              </Grid>
-            </Grid>
-
-            <Grid size={12}>
-              <Box
-                sx={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  gap: 3,
-                  mt: { xs: 1, md: 2 },
-                  flexWrap: 'wrap',
-                }}
-              >
-                <WalletButtons
-                  variant="contained"
-                  startIcon={<Send style={{ marginBottom: 2 }} />}
-                  aria-label="Transfer"
-                  onClick={handleOpenBtcSend}
-                >
-                  {t('core:action.transfer_coin', {
-                    coin: Coin.BTC,
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </WalletButtons>
-
-                <WalletButtons
-                  variant="contained"
-                  startIcon={<ImportContacts style={{ marginBottom: 2 }} />}
-                  aria-label="AddressBook"
-                  onClick={handleOpenAddressBook}
-                >
-                  {t('core:address_book', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </WalletButtons>
-              </Box>
-            </Grid>
-          </Grid>
-
-          <Grid size={12}>
-            <Box sx={{ width: '100%', mt: 3 }}>
-              <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
-                <Button
-                  size="large"
-                  onClick={handleLoadingRefreshBtc}
-                  loading={loadingRefreshBtc}
-                  loadingPosition="start"
-                  startIcon={<Refresh style={{ marginBottom: 2 }} />}
-                  variant="text"
-                  sx={{ borderRadius: 50 }}
-                >
-                  <span>
-                    {t('core:transactions', { postProcess: 'capitalizeAll' })}
-                  </span>
-                </Button>
-              </Box>
-
-              {loadingRefreshBtc ? (
-                <Box sx={{ width: '100%' }}>{tableLoader()}</Box>
-              ) : (
-                <Box sx={{ width: '100%' }}>{transactionsTable()}</Box>
-              )}
-            </Box>
-          </Grid>
-        </Grid>
-      </WalletCard>
+            {loadingRefreshBtc ? (
+              tableLoader()
+            ) : (
+              <Box sx={{ width: '100%' }}>{transactionsTable()}</Box>
+            )}
+          </WalletTransactionsCard>
+        }
+      />
     </Box>
   );
 }
diff --git a/src/pages/dgb/index.tsx b/src/pages/dgb/index.tsx
index 91fa60f..75332b5 100644
--- a/src/pages/dgb/index.tsx
+++ b/src/pages/dgb/index.tsx
@@ -1,55 +1,39 @@
 import {
   ChangeEvent,
-  Key,
   MouseEvent,
   SyntheticEvent,
   useEffect,
   useState,
 } from 'react';
-import { epochToAgo, timeoutDelay, cropString, copyToClipboard } from '../../common/functions';
+import { timeoutDelay, copyToClipboard } from '../../common/functions';
 import { AddressBookDialog } from '../../components/AddressBook/AddressBookDialog';
+import {
+  WalletExternalTransactionsList,
+  WalletTransactionsCard,
+  WalletTransactionsLoader,
+  WalletWorkspace,
+} from '../../components/WalletWorkspace';
+import {
+  ExternalFeeSlider,
+  ExternalSendForm,
+  sendCoinDialogPaperSx,
+} from '../../components/ExternalSendForm';
 import { useTheme } from '@mui/material/styles';
 import {
   Alert,
-  AppBar,
-  Avatar,
   Box,
-  Button,
-  Dialog,
   DialogContent,
-  Grid,
   IconButton,
-  Paper,
-  Slider,
-  Table,
-  TableBody,
-  TableContainer,
-  TableFooter,
-  TableHead,
-  TablePagination,
-  TableRow,
-  TextField,
-  Toolbar,
   Typography,
 } from '@mui/material';
-import { NumericFormat as _NumericFormat } from 'react-number-format';
-const NumericFormat = _NumericFormat as React.FC<React.ComponentProps<typeof _NumericFormat> & Record<string, unknown>>;
-import TableCell from '@mui/material/TableCell';
 import Snackbar from '@mui/material/Snackbar';
 type SnackbarCloseReason = 'timeout' | 'clickaway' | 'escapeKeyDown';
 import CircularProgress from '@mui/material/CircularProgress';
-import LinearProgress from '@mui/material/LinearProgress';
-import QRCode from 'react-qr-code';
 import {
-  Close,
-  CopyAllTwoTone,
   FirstPage,
-  ImportContacts,
   KeyboardArrowLeft,
   KeyboardArrowRight,
   LastPage,
-  Refresh,
-  Send,
 } from '@mui/icons-material';
 import coinLogoDGB from '../../assets/dgb.png';
 import { useTranslation } from 'react-i18next';
@@ -64,14 +48,10 @@ import {
   TIME_SECONDS_4,
 } from '../../common/constants';
 import {
-  CustomWidthTooltip,
   SlideTransition,
-  StyledTableCell,
-  StyledTableRow,
   SubmitDialog,
   Transition,
-  WalletButtons,
-  WalletCard,
+  WalletSendDialog,
 } from '../../styles/page-styles';
 import { Coin } from 'qapp-core';
 import { validateDgbAddress } from '../../utils/addressValidation';
@@ -175,8 +155,6 @@ function valueTextDgb(value: number) {
 
 export default function DigibyteWallet() {
   const { t } = useTranslation(['core']);
-  const theme = useTheme();
-
   const [walletInfoDgb, setWalletInfoDgb] = useState<any>({});
   const [walletBalanceDgb, setWalletBalanceDgb] = useState<any>(0);
   const [_isLoadingWalletInfoDgb, setIsLoadingWalletInfoDgb] =
@@ -191,11 +169,13 @@ export default function DigibyteWallet() {
     null
   );
   const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(25);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
   const [copyDgbTxHash, setCopyDgbTxHash] = useState(EMPTY_STRING);
   const [openDgbSend, setOpenDgbSend] = useState(false);
   const [dgbAmount, setDgbAmount] = useState<number>(0);
   const [dgbRecipient, setDgbRecipient] = useState(EMPTY_STRING);
+  const [dgbRecipientDisplayName, setDgbRecipientDisplayName] =
+    useState(EMPTY_STRING);
   const [addressFormatError, setAddressFormatError] = useState(false);
   const [dgbFee, setDgbFee] = useState<number>(0);
   const [loadingRefreshDgb, setLoadingRefreshDgb] = useState(false);
@@ -203,11 +183,13 @@ export default function DigibyteWallet() {
   const [openSendDgbSuccess, setOpenSendDgbSuccess] = useState(false);
   const [openSendDgbError, setOpenSendDgbError] = useState(false);
   const [openDgbAddressBook, setOpenDgbAddressBook] = useState(false);
+  const [receivePanelOpen, setReceivePanelOpen] = useState(false);
 
   const maxSendableDbgCoin = () => {
     // manage the correct round up
-    const value = (walletBalanceDgb - (dgbFee * 1000) / 1e8)
-      .toFixed(DECIMAL_ROUND_UP);
+    const value = (walletBalanceDgb - (dgbFee * 1000) / 1e8).toFixed(
+      DECIMAL_ROUND_UP
+    );
     const [integer, decimal = ''] = value.split('.');
     const truncated = decimal
       .substring(0, DECIMAL_ROUND_UP)
@@ -218,11 +200,6 @@ export default function DigibyteWallet() {
     return truncatedMaxSendableDgbCoin;
   };
 
-  const emptyRows =
-    page > 0
-      ? Math.max(0, (1 + page) * rowsPerPage - transactionsDgb.length)
-      : 0;
-
   const handleOpenAddressBook = () => {
     setOpenDgbAddressBook(true);
   };
@@ -231,8 +208,9 @@ export default function DigibyteWallet() {
     setOpenDgbAddressBook(false);
   };
 
-  const handleSelectAddress = (address: string, _name: string) => {
+  const handleSelectAddress = (address: string, name: string) => {
     setDgbRecipient(address);
+    setDgbRecipientDisplayName(name || EMPTY_STRING);
     setDgbAmount(0);
     setDgbFee(DGB_FEE);
     setOpenDgbAddressBook(false);
@@ -244,6 +222,7 @@ export default function DigibyteWallet() {
   const handleOpenDgbSend = () => {
     setDgbAmount(0);
     setDgbRecipient(EMPTY_STRING);
+    setDgbRecipientDisplayName(EMPTY_STRING);
     setDgbFee(DGB_FEE);
     setOpenDgbSend(true);
     setAddressFormatError(false);
@@ -258,9 +237,10 @@ export default function DigibyteWallet() {
   ) => {
     const value = e.target.value.trim();
     setDgbRecipient(value);
-    
+    setDgbRecipientDisplayName(EMPTY_STRING);
+
     if (validateDgbAddress(value) || value === EMPTY_STRING) {
-      setAddressFormatError(false);      
+      setAddressFormatError(false);
     } else {
       setAddressFormatError(true);
     }
@@ -269,11 +249,19 @@ export default function DigibyteWallet() {
   const handleCloseDgbSend = () => {
     setDgbAmount(0);
     setDgbFee(0);
+    setDgbRecipientDisplayName(EMPTY_STRING);
     setOpenDgbSend(false);
     setAddressFormatError(false);
     setOpenSendDgbError(false);
   };
 
+  const handleClearDgbRecipient = () => {
+    setDgbRecipient(EMPTY_STRING);
+    setDgbRecipientDisplayName(EMPTY_STRING);
+    setAddressFormatError(false);
+    setOpenSendDgbError(false);
+  };
+
   const changeCopyDgbTxHash = async () => {
     setCopyDgbTxHash('Copied');
     await timeoutDelay(TIME_SECONDS_2);
@@ -424,7 +412,7 @@ export default function DigibyteWallet() {
     setLoadingRefreshDgb(false);
   };
 
-  const handleSendMaxDgb = () => {   
+  const handleSendMaxDgb = () => {
     if (maxSendableDbgCoin() <= 0) {
       setDgbAmount(0);
     } else {
@@ -446,6 +434,7 @@ export default function DigibyteWallet() {
       if (!sendRequest?.error) {
         setDgbAmount(0);
         setDgbRecipient(EMPTY_STRING);
+        setDgbRecipientDisplayName(EMPTY_STRING);
         setDgbFee(DGB_FEE);
         setOpenTxDgbSubmit(false);
         setOpenSendDgbSuccess(true);
@@ -456,6 +445,7 @@ export default function DigibyteWallet() {
     } catch (error) {
       setDgbAmount(0);
       setDgbRecipient(EMPTY_STRING);
+      setDgbRecipientDisplayName(EMPTY_STRING);
       setDgbFee(DGB_FEE);
       setOpenTxDgbSubmit(false);
       setOpenSendDgbError(true);
@@ -468,264 +458,84 @@ export default function DigibyteWallet() {
 
   const tableLoader = () => {
     return (
-      <Box sx={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap' }}>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-          }}
-        >
-          <CircularProgress />
-        </Box>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            sx={{ color: 'primary.main', fontStyle: 'italic', fontWeight: 700 }}
-          >
-            {t('core:message.generic.loading_transactions', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Typography>
-        </Box>
-      </Box>
+      <WalletTransactionsLoader
+        label={t('core:message.generic.loading_transactions', {
+          postProcess: 'capitalizeFirstChar',
+        })}
+      />
     );
   };
 
-  const transactionsTable = () => {
-    return (
-      <TableContainer component={Paper}>
-        <Table
-          stickyHeader
-          sx={{ width: '100%' }}
-          aria-label="transactions table"
-        >
-          <TableHead>
-            <TableRow>
-              <StyledTableCell align="left">
-                {t('core:sender', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:receiver', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:transaction_hash', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:total_amount', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:fee.fee', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:time', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {(rowsPerPage > 0
-              ? transactionsDgb.slice(
-                  page * rowsPerPage,
-                  page * rowsPerPage + rowsPerPage
-                )
-              : transactionsDgb
-            ).map(
-              (
-                row: {
-                  inputs: {
-                    address: any;
-                    addressInWallet: boolean;
-                    amount: any;
-                  }[];
-                  outputs: {
-                    address: any;
-                    addressInWallet: boolean;
-                    amount: any;
-                  }[];
-                  txHash: string;
-                  totalAmount: any;
-                  feeAmount: any;
-                  timestamp: number;
-                },
-                k: Key
-              ) => (
-                <StyledTableRow key={k}>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {row.inputs.map((input, index) => (
-                      <Box
-                        key={index}
-                        style={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          color: input.addressInWallet
-                            ? undefined
-                            : theme.palette.info.main,
-                        }}
-                      >
-                        <span style={{ flex: 1, textAlign: 'left' }}>
-                          {input.address}
-                        </span>
-                        <span style={{ flex: 1, textAlign: 'right' }}>
-                          {(Number(input.amount) / 1e8).toFixed(DECIMAL_ROUND_UP)}
-                        </span>
-                      </Box>
-                    ))}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {row.outputs.map((output, index) => (
-                      <Box
-                        key={index}
-                        style={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          color: output.addressInWallet
-                            ? undefined
-                            : theme.palette.info.main,
-                        }}
-                      >
-                        <span style={{ flex: 1, textAlign: 'left' }}>
-                          {output.address}
-                        </span>
-                        <span style={{ flex: 1, textAlign: 'right' }}>
-                          {(Number(output.amount) / 1e8).toFixed(DECIMAL_ROUND_UP)}
-                        </span>
-                      </Box>
-                    ))}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {cropString(row?.txHash)}
-                    <CustomWidthTooltip
-                      placement="top"
-                      title={
-                        copyDgbTxHash
-                          ? copyDgbTxHash
-                          : t('core:action.copy_hash', {
-                              hash: row?.txHash,
-                              postProcess: 'capitalizeFirstChar',
-                            })
-                      }
-                    >
-                      <IconButton
-                        aria-label="copy"
-                        size="small"
-                        onClick={() => {
-                          copyToClipboard(row?.txHash);
-                          changeCopyDgbTxHash();
-                        }}
-                      >
-                        <CopyAllTwoTone fontSize="small" />
-                      </IconButton>
-                    </CustomWidthTooltip>
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {row?.totalAmount > 0 ? (
-                      <Box style={{ color: theme.palette.success.main }}>
-                        +{(Number(row?.totalAmount) / 1e8).toFixed(DECIMAL_ROUND_UP)}
-                      </Box>
-                    ) : (
-                      <Box style={{ color: theme.palette.error.main }}>
-                        {(Number(row?.totalAmount) / 1e8).toFixed(DECIMAL_ROUND_UP)}
-                      </Box>
-                    )}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="right">
-                    {row?.totalAmount <= 0 ? (
-                      <Box style={{ color: theme.palette.error.main }}>
-                        -{(Number(row?.feeAmount) / 1e8).toFixed(DECIMAL_ROUND_UP)}
-                      </Box>
-                    ) : (
-                      <Box style={{ color: 'grey' }}>
-                        -{(Number(row?.feeAmount) / 1e8).toFixed(DECIMAL_ROUND_UP)}
-                      </Box>
-                    )}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    <CustomWidthTooltip
-                      placement="top"
-                      title={
-                        row?.timestamp
-                          ? new Date(row?.timestamp).toLocaleString()
-                          : t('core:message.generic.waiting_confirmation', {
-                              postProcess: 'capitalizeFirstChar',
-                            })
-                      }
-                    >
-                      <Box>
-                        {row?.timestamp
-                          ? epochToAgo(row?.timestamp)
-                          : t('core:message.generic.unconfirmed_transaction', {
-                              postProcess: 'capitalizeFirstChar',
-                            })}
-                      </Box>
-                    </CustomWidthTooltip>
-                  </StyledTableCell>
-                </StyledTableRow>
-              )
-            )}
-            {emptyRows > 0 && (
-              <TableRow style={{ height: 53 * emptyRows }}>
-                <TableCell colSpan={6} />
-              </TableRow>
-            )}
-          </TableBody>
-          <TableFooter sx={{ width: '100%' }}>
-            <TableRow>
-              <TablePagination
-                labelRowsPerPage={t('core:rows_per_page', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-                rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
-                colSpan={6}
-                count={transactionsDgb.length}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                slotProps={{
-                  select: {
-                    inputProps: {
-                      'aria-label': 'rows per page',
-                    },
-                    native: true,
-                  },
-                }}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    );
-  };
+  const transactionsTable = () => (
+    <WalletExternalTransactionsList
+      ActionsComponent={TablePaginationActions}
+      coin="DGB"
+      copyHashLabel={copyDgbTxHash || undefined}
+      labels={{
+        copyHash: (hash) =>
+          t('core:action.copy_hash', {
+            hash,
+            postProcess: 'capitalizeFirstChar',
+          }),
+        fee: t('core:fee.fee', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        noTransactions: 'No transactions.',
+        receiver: t('core:receiver', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        rowsPerPage: t('core:rows_per_page', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        sender: t('core:sender', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        time: t('core:time', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        totalAmount: t('core:total_amount', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        transactionHash: t('core:transaction_hash', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        waitingConfirmation: t('core:message.generic.waiting_confirmation', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+      }}
+      onCopyHash={(hash) => {
+        copyToClipboard(hash);
+        changeCopyDgbTxHash();
+      }}
+      onPageChange={handleChangePage}
+      onRowsPerPageChange={handleChangeRowsPerPage}
+      page={page}
+      rows={transactionsDgb}
+      rowsPerPage={rowsPerPage}
+    />
+  );
 
   return (
     <Box sx={{ width: '100%', mt: 2 }}>
-      <Dialog
-        fullScreen
+      <WalletSendDialog
         open={openDgbSend}
         onClose={handleCloseDgbSend}
         slots={{ transition: Transition }}
+        maxWidth={false}
+        fullWidth
+        disableScrollLock
+        slotProps={{
+          paper: {
+            sx: sendCoinDialogPaperSx,
+          },
+        }}
       >
-        <SubmitDialog fullWidth={true} maxWidth="xs" open={openTxDgbSubmit}>
+        <SubmitDialog
+          fullWidth={true}
+          maxWidth="xs"
+          open={openTxDgbSubmit}
+          disableScrollLock
+        >
           <DialogContent>
             <Box
               sx={{
@@ -802,252 +612,53 @@ export default function DigibyteWallet() {
             })}
           </Alert>
         </Snackbar>
-        <AppBar sx={{ position: 'static' }}>
-          <Toolbar>
-            <IconButton
-              edge="start"
-              color="inherit"
-              onClick={handleCloseDgbSend}
-              aria-label="close"
-            >
-              <Close />
-            </IconButton>
-            <Avatar
-              sx={{ width: 28, height: 28 }}
-              alt="DGB Logo"
-              src={coinLogoDGB}
-            />
-            <Typography
-              variant="h6"
-              noWrap
-              component="div"
-              sx={{
-                flexGrow: 1,
-                display: {
-                  xs: 'none',
-                  sm: 'block',
-                  paddingLeft: '10px',
-                  paddingTop: '3px',
-                },
-              }}
-            >
-              {t('core:action.transfer_coin', {
-                coin: Coin.DGB,
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Typography>
-            <Button
-              disabled={disableCanSendDgb()}
-              variant="contained"
-              startIcon={<Send />}
-              aria-label="send-dgb"
-              onClick={sendDgbRequest}
-              sx={{
-                backgroundcolor: 'action.main',
-                color: 'white',
-                '&:hover': { backgroundcolor: 'action.hover' },
-              }}
-            >
-              {t('core:action.send', {
-                postProcess: 'capitalizeAll',
-              })}
-            </Button>
-          </Toolbar>
-        </AppBar>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            align="center"
-            gutterBottom
-            sx={{ color: 'primary.main', fontWeight: 700 }}
-          >
-            {t('core:balance_available', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            &nbsp;&nbsp;
-          </Typography>
-          <Typography
-            variant="h5"
-            align="center"
-            gutterBottom
-            sx={{ color: 'text.primary', fontWeight: 700 }}
-          >
-            {isLoadingWalletBalanceDgb ? (
-              <Box sx={{ width: '175px' }}>
-                <LinearProgress />
-              </Box>
-            ) : walletBalanceError ? (
-              walletBalanceError
-            ) : (
-              walletBalanceDgb + ' DGB'
-            )}
-          </Typography>
-        </Box>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            align="center"
-            sx={{ color: 'primary.main', fontWeight: 700 }}
-          >
-            {t('core:max_sendable', {
-              postProcess: 'capitalizeAll',
-            })}
-            &nbsp;&nbsp;
-          </Typography>
-          <Typography
-            variant="h5"
-            align="center"
-            sx={{ color: 'text.primary', fontWeight: 700 }}
-          >
-            {(() => {
-              const newMaxDgbAmount = parseFloat(
-                (walletBalanceDgb - (dgbFee * 1000) / 1e8).toFixed(DECIMAL_ROUND_UP)
-              );
-              if (newMaxDgbAmount < 0) {
-                return Number(0.0) + ' DGB';
-              } else {
-                return newMaxDgbAmount + ' DGB';
-              }
-            })()}
-          </Typography>
-          <Box style={{ marginInlineStart: '15px' }}>
-            <Button
-              variant="outlined"
-              size="small"
-              onClick={handleSendMaxDgb}
-              style={{ borderRadius: 50 }}
-            >
-              {t('core:action.send_max', {
-                postProcess: 'capitalizeAll',
-              })}
-            </Button>
-          </Box>
-        </Box>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'stretch',
-            justifyContent: 'center',
-            gap: 2,
-            mt: 2.5,
-            mx: 'auto',
-            width: '100%',
-            maxWidth: 420,
-            px: { xs: 2, sm: 1 },
-          }}
-        >
-          <NumericFormat
-            decimalScale={8}
-            defaultValue={0}
-            value={dgbAmount}
-            allowNegative={false}
-            customInput={TextField as React.ComponentType<any>}
-            valueIsNumericString
-            label="Amount (DGB)"
-            fullWidth
-            isAllowed={(values) => {
-              const maxDgbCoin = walletBalanceDgb - (dgbFee * 1000) / 1e8;
-              const { formattedValue, floatValue } = values;
-              return (
-                formattedValue === EMPTY_STRING ||
-                (typeof floatValue === 'number' && floatValue <= maxDgbCoin)
-              );
-            }}
-            onValueChange={(values) => {
-              setDgbAmount(values.floatValue ?? 0);
-            }}
-            required
-          />
-          <TextField
-            required
-            label={t('core:receiver_address', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            id="dgb-address"
-            margin="normal"
-            value={dgbRecipient}
-            onChange={handleRecipientChange}
-            error={addressFormatError}
-            fullWidth
-            helperText={
-              addressFormatError
-                ? t('core:message.error.digibyte_address_invalid', {
-                    postProcess: 'capitalizeFirstChar',
-                  })
-                : t('core:message.generic.digibyte_address', {
-                    postProcess: 'capitalizeFirstChar',
-                  })
-            }
-          />
-        </Box>
-        <Box
-          sx={{
-            alignItems: 'center',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            mt: 2.5,
-            mx: 'auto',
-            width: '100%',
-            maxWidth: 420,
-            px: { xs: 2, sm: 1 },
-          }}
-        >
-          <Box
-            sx={{
-              alignItems: 'center',
-              display: 'flex',
-              flexDirection: 'column',
-              justifyContent: 'center',
-              width: '100%',
-            }}
-          >
-            <Typography id="dgb-fee-slider" gutterBottom>
-              {t('core:message.generic.current_fee', {
-                fee: dgbFee,
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Typography>
-            <Slider
-              track={false}
-              step={5}
-              min={1}
-              max={100}
-              valueLabelDisplay="auto"
-              aria-labelledby="dgb-fee-slider"
-              getAriaValueText={valueTextDgb}
+        <ExternalSendForm
+          addressError={addressFormatError}
+          addressHelperText={
+            addressFormatError
+              ? t('core:message.error.digibyte_address_invalid', {
+                  postProcess: 'capitalizeFirstChar',
+                })
+              : t('core:message.generic.digibyte_address', {
+                  postProcess: 'capitalizeFirstChar',
+                })
+          }
+          addressInputId="dgb-address"
+          amount={dgbAmount}
+          balance={walletBalanceDgb}
+          balanceError={walletBalanceError}
+          coinLogo={coinLogoDGB}
+          feeContent={
+            <ExternalFeeSlider
               defaultValue={10}
+              fee={dgbFee}
+              getAriaValueText={valueTextDgb}
               marks={dgbMarks}
+              max={100}
+              min={1}
               onChange={handleChangeDgbFee}
+              sliderId="dgb-fee-slider"
+              step={5}
             />
-            <Typography
-              align="center"
-              sx={{ fontWeight: 600, fontSize: '14px', marginTop: '15px' }}
-            >
-              {t('core:message.generic.low_fee_transation', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Typography>
-          </Box>
-        </Box>
-      </Dialog>
+          }
+          isBalanceLoading={isLoadingWalletBalanceDgb}
+          maxSendable={maxSendableDbgCoin()}
+          onAmountChange={setDgbAmount}
+          onClearRecipient={handleClearDgbRecipient}
+          onClose={handleCloseDgbSend}
+          onOpenAddressBook={handleOpenAddressBook}
+          onRecipientChange={handleRecipientChange}
+          onSend={sendDgbRequest}
+          onSendMax={handleSendMaxDgb}
+          recipient={dgbRecipient}
+          recipientDisplayName={dgbRecipientDisplayName}
+          recipientSubtitle="DGB address book contact"
+          sendDisabled={disableCanSendDgb()}
+          showAddressBookButton
+          showBalanceMeter
+          symbol="DGB"
+        />
+      </WalletSendDialog>
 
       <AddressBookDialog
         open={openDgbAddressBook}
@@ -1056,241 +667,32 @@ export default function DigibyteWallet() {
         onSelectAddress={handleSelectAddress}
       />
 
-      <WalletCard sx={{ p: { xs: 2, md: 3 }, width: '100%' }}>
-        <Grid container rowSpacing={{ xs: 2, md: 3 }} columnSpacing={2}>
-          <Grid
-            container
-            alignItems="center"
-            columnSpacing={4}
-            rowSpacing={{ xs: 12, md: 0 }}
+      <WalletWorkspace
+        address={walletInfoDgb?.address ?? EMPTY_STRING}
+        addressBookRefreshKey={openDgbAddressBook}
+        balance={walletBalanceDgb}
+        balanceDecimals={8}
+        balanceError={walletBalanceError}
+        coin="DGB"
+        isBalanceLoading={isLoadingWalletBalanceDgb}
+        onAddContact={handleOpenAddressBook}
+        onSelectAddress={handleSelectAddress}
+        onSend={handleOpenDgbSend}
+        onToggleReceive={() => setReceivePanelOpen((prev) => !prev)}
+        receiveOpen={receivePanelOpen}
+        transactions={
+          <WalletTransactionsCard
+            isRefreshing={loadingRefreshDgb}
+            onRefresh={handleLoadingRefreshDgb}
           >
-            <Grid
-              container
-              size={12}
-              justifyContent="space-around"
-              alignItems="center"
-              sx={{
-                flexDirection: { xs: 'column', md: 'row' },
-                textAlign: { xs: 'center', md: 'left' },
-                gap: { xs: 3, md: 0 },
-              }}
-            >
-              <Box sx={{ display: 'grid', alignItems: 'center' }}>
-                <Box
-                  component="img"
-                  alt="DGB Logo"
-                  src={coinLogoDGB}
-                  sx={{
-                    width: { xs: 96, sm: 110, md: 120 },
-                    height: { xs: 96, sm: 110, md: 120 },
-                    mr: { md: 1 },
-                  }}
-                />
-                <Typography
-                  variant="subtitle2"
-                  sx={{ color: 'text.secondary' }}
-                >
-                  {t('core:message.generic.digibyte_wallet', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </Typography>
-              </Box>
-
-              <Grid
-                sx={{
-                  display: 'grid',
-                  gap: { xs: 2, md: 1 },
-                  gridTemplateColumns: {
-                    xs: '1fr',
-                    md: 'minmax(0, 1fr) minmax(0, 0.6fr)',
-                  },
-                  gridTemplateRows: { xs: 'repeat(3, auto)', md: '1fr 1fr' },
-                }}
-              >
-                <Grid
-                  sx={{
-                    gridColumn: { xs: '1', md: '1' },
-                    gridRow: { xs: '1', md: '1' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                  display={'flex'}
-                  alignItems={'center'}
-                  gap={1}
-                >
-                  <Typography
-                    variant="h5"
-                    sx={{ color: 'primary.main', fontWeight: 700 }}
-                  >
-                    {t('core:balance', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Typography>
-                  <Typography variant="h5" sx={{ fontWeight: 700 }}>
-                    {walletBalanceDgb ? (
-                      `${walletBalanceDgb} DGB`
-                    ) : isLoadingWalletBalanceDgb ? (
-                      <LinearProgress />
-                    ) : undefined}
-                  </Typography>
-                </Grid>
-
-                <Grid
-                  sx={{
-                    gridColumn: { xs: '1', md: '1' },
-                    gridRow: { xs: '2', md: '2' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                >
-                  <Box display={'flex'} alignItems={'center'} gap={1}>
-                    <Typography
-                      variant="subtitle1"
-                      sx={{ color: 'primary.main', fontWeight: 700 }}
-                    >
-                      {t('core:address', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    </Typography>
-                    <Typography
-                      variant="subtitle1"
-                      sx={{
-                        color: 'text.primary',
-                        fontWeight: 700,
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        width: {
-                          xs: '100%',
-                          sm: '220px',
-                          md: '200px',
-                          lg: '370px',
-                        },
-                      }}
-                    >
-                      {walletInfoDgb?.address}
-                    </Typography>
-                    <CustomWidthTooltip
-                      placement="top"
-                      title={t('core:action.copy_address', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    >
-                      <IconButton
-                        size="small"
-                        onClick={() =>
-                          copyToClipboard(
-                            walletInfoDgb?.address ?? EMPTY_STRING
-                          )
-                        }
-                      >
-                        <CopyAllTwoTone fontSize="small" />
-                      </IconButton>
-                    </CustomWidthTooltip>
-                  </Box>
-                </Grid>
-
-                <Grid
-                  alignContent={'center'}
-                  display={'flex'}
-                  justifyContent={'center'}
-                  sx={{
-                    gridColumn: { xs: '1', md: '2' },
-                    gridRow: { xs: '3', md: '1 / span 2' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                >
-                  <Box
-                    sx={{
-                      alignItems: 'center',
-                      aspectRatio: '1 / 1',
-                      bgcolor: '#fff',
-                      border: (t) => `1px solid ${t.palette.divider}`,
-                      borderRadius: 1,
-                      boxShadow: (t) => t.shadows[2],
-                      display: 'flex',
-                      height: '100%',
-                      justifyContent: 'center',
-                      maxHeight: { xs: 200, md: 150 },
-                      maxWidth: { xs: 200, md: 150 },
-                      p: 0.5,
-                    }}
-                  >
-                    <QRCode
-                      value={walletInfoDgb?.address ?? EMPTY_STRING}
-                      size={200}
-                      fgColor="#000000"
-                      bgColor="#ffffff"
-                      level="H"
-                      style={{ width: '100%', height: '100%' }}
-                    />
-                  </Box>
-                </Grid>
-              </Grid>
-            </Grid>
-
-            <Grid size={12}>
-              <Box
-                sx={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  gap: 3,
-                  mt: { xs: 1, md: 2 },
-                  flexWrap: 'wrap',
-                }}
-              >
-                <WalletButtons
-                  variant="contained"
-                  startIcon={<Send style={{ marginBottom: 2 }} />}
-                  aria-label="Transfer"
-                  onClick={handleOpenDgbSend}
-                >
-                  {t('core:action.transfer_coin', {
-                    coin: Coin.DGB,
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </WalletButtons>
-
-                <WalletButtons
-                  variant="contained"
-                  startIcon={<ImportContacts style={{ marginBottom: 2 }} />}
-                  aria-label="AddressBook"
-                  onClick={handleOpenAddressBook}
-                >
-                  {t('core:address_book', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </WalletButtons>
-              </Box>
-            </Grid>
-          </Grid>
-
-          <Grid size={12}>
-            <Box sx={{ width: '100%', mt: 3 }}>
-              <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
-                <Button
-                  size="large"
-                  onClick={handleLoadingRefreshDgb}
-                  loading={loadingRefreshDgb}
-                  loadingPosition="start"
-                  startIcon={<Refresh style={{ marginBottom: 2 }} />}
-                  variant="text"
-                  sx={{ borderRadius: 50 }}
-                >
-                  <span>
-                    {t('core:transactions', { postProcess: 'capitalizeAll' })}
-                  </span>
-                </Button>
-              </Box>
-
-              {isLoadingDgbTransactions ? (
-                <Box sx={{ width: '100%' }}>{tableLoader()}</Box>
-              ) : (
-                <Box sx={{ width: '100%' }}>{transactionsTable()}</Box>
-              )}
-            </Box>
-          </Grid>
-        </Grid>
-      </WalletCard>
+            {isLoadingDgbTransactions || loadingRefreshDgb ? (
+              tableLoader()
+            ) : (
+              <Box sx={{ width: '100%' }}>{transactionsTable()}</Box>
+            )}
+          </WalletTransactionsCard>
+        }
+      />
     </Box>
   );
 }
diff --git a/src/pages/doge/index.tsx b/src/pages/doge/index.tsx
index 1ff6c8c..e61abce 100644
--- a/src/pages/doge/index.tsx
+++ b/src/pages/doge/index.tsx
@@ -1,54 +1,38 @@
 import {
   ChangeEvent,
-  Key,
   MouseEvent,
   SyntheticEvent,
   useEffect,
   useState,
 } from 'react';
-import { epochToAgo, timeoutDelay, cropString, copyToClipboard } from '../../common/functions';
+import { timeoutDelay, copyToClipboard } from '../../common/functions';
 import { AddressBookDialog } from '../../components/AddressBook/AddressBookDialog';
+import {
+  WalletExternalTransactionsList,
+  WalletTransactionsCard,
+  WalletTransactionsLoader,
+  WalletWorkspace,
+} from '../../components/WalletWorkspace';
+import {
+  ExternalSendForm,
+  sendCoinDialogPaperSx,
+} from '../../components/ExternalSendForm';
 import { useTheme } from '@mui/material/styles';
 import {
   Alert,
-  AppBar,
-  Avatar,
   Box,
-  Button,
-  Dialog,
   DialogContent,
-  Grid,
   IconButton,
-  Paper,
-  Table,
-  TableBody,
-  TableContainer,
-  TableFooter,
-  TableHead,
-  TablePagination,
-  TableRow,
-  TextField,
-  Toolbar,
   Typography,
 } from '@mui/material';
-import { NumericFormat as _NumericFormat } from 'react-number-format';
-const NumericFormat = _NumericFormat as React.FC<React.ComponentProps<typeof _NumericFormat> & Record<string, unknown>>;
-import TableCell from '@mui/material/TableCell';
 import Snackbar from '@mui/material/Snackbar';
 type SnackbarCloseReason = 'timeout' | 'clickaway' | 'escapeKeyDown';
 import CircularProgress from '@mui/material/CircularProgress';
-import LinearProgress from '@mui/material/LinearProgress';
-import QRCode from 'react-qr-code';
 import {
-  Close,
-  CopyAllTwoTone,
   FirstPage,
-  ImportContacts,
   KeyboardArrowLeft,
   KeyboardArrowRight,
   LastPage,
-  Refresh,
-  Send,
 } from '@mui/icons-material';
 import coinLogoDOGE from '../../assets/doge.png';
 import { useTranslation } from 'react-i18next';
@@ -63,14 +47,10 @@ import {
   TIME_SECONDS_4,
 } from '../../common/constants';
 import {
-  CustomWidthTooltip,
   SlideTransition,
-  StyledTableCell,
-  StyledTableRow,
   SubmitDialog,
   Transition,
-  WalletButtons,
-  WalletCard,
+  WalletSendDialog,
 } from '../../styles/page-styles';
 import { FeeManager } from '../../components/FeeManager';
 import { Coin } from 'qapp-core';
@@ -156,8 +136,6 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 
 export default function DogecoinWallet() {
   const { t } = useTranslation(['core']);
-  const theme = useTheme();
-
   const [walletInfoDoge, setWalletInfoDoge] = useState<any>({});
   const [walletBalanceDoge, setWalletBalanceDoge] = useState<any>(0);
   const [_isLoadingWalletInfoDoge, setIsLoadingWalletInfoDoge] =
@@ -168,17 +146,20 @@ export default function DogecoinWallet() {
   const [isLoadingDogeTransactions, setIsLoadingDogeTransactions] =
     useState<boolean>(true);
   const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(25);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
   const [copyDogeTxHash, setCopyDogeTxHash] = useState(EMPTY_STRING);
   const [openDogeSend, setOpenDogeSend] = useState(false);
   const [dogeAmount, setDogeAmount] = useState<number>(0);
   const [dogeRecipient, setDogeRecipient] = useState(EMPTY_STRING);
+  const [dogeRecipientDisplayName, setDogeRecipientDisplayName] =
+    useState(EMPTY_STRING);
   const [addressFormatError, setAddressFormatError] = useState(false);
   const [loadingRefreshDoge, setLoadingRefreshDoge] = useState(false);
   const [openTxDogeSubmit, setOpenTxDogeSubmit] = useState(false);
   const [openSendDogeSuccess, setOpenSendDogeSuccess] = useState(false);
   const [openSendDogeError, setOpenSendDogeError] = useState(false);
   const [openDogeAddressBook, setOpenDogeAddressBook] = useState(false);
+  const [receivePanelOpen, setReceivePanelOpen] = useState(false);
 
   const [inputFee, setInputFee] = useState(0);
   const [_walletInfoError, setWalletInfoError] = useState<string | null>(null);
@@ -190,18 +171,17 @@ export default function DogecoinWallet() {
   const estimatedFeeCalculated = +dogeFeeCalculated * DOGE_FEE;
 
   const maxSendableDogeCoin = () => {
-      // manage the correct round up
-      const value = (walletBalanceDoge - estimatedFeeCalculated).toString();
-      const [integer, decimal = ''] = value.split('.');
-      const truncated = decimal.substring(0, DECIMAL_ROUND_UP).padEnd(DECIMAL_ROUND_UP, '0');
-      let truncatedMaxSendableDogeCoin: number = parseFloat(`${integer}.${truncated}`);
-      return truncatedMaxSendableDogeCoin;
-    };
-
-  const emptyRows =
-    page > 0
-      ? Math.max(0, (1 + page) * rowsPerPage - transactionsDoge.length)
-      : 0;
+    // manage the correct round up
+    const value = (walletBalanceDoge - estimatedFeeCalculated).toString();
+    const [integer, decimal = ''] = value.split('.');
+    const truncated = decimal
+      .substring(0, DECIMAL_ROUND_UP)
+      .padEnd(DECIMAL_ROUND_UP, '0');
+    let truncatedMaxSendableDogeCoin: number = parseFloat(
+      `${integer}.${truncated}`
+    );
+    return truncatedMaxSendableDogeCoin;
+  };
 
   const handleOpenAddressBook = () => {
     setOpenDogeAddressBook(true);
@@ -211,8 +191,9 @@ export default function DogecoinWallet() {
     setOpenDogeAddressBook(false);
   };
 
-  const handleSelectAddress = (address: string, _name: string) => {
+  const handleSelectAddress = (address: string, name: string) => {
     setDogeRecipient(address);
+    setDogeRecipientDisplayName(name || EMPTY_STRING);
     setDogeAmount(0);
     setOpenDogeAddressBook(false);
     setOpenDogeSend(true);
@@ -223,6 +204,7 @@ export default function DogecoinWallet() {
   const handleOpenDogeSend = () => {
     setDogeAmount(0);
     setDogeRecipient(EMPTY_STRING);
+    setDogeRecipientDisplayName(EMPTY_STRING);
     setOpenDogeSend(true);
     setAddressFormatError(false);
     setOpenSendDogeError(false);
@@ -236,6 +218,7 @@ export default function DogecoinWallet() {
   ) => {
     const value = e.target.value.trim();
     setDogeRecipient(value);
+    setDogeRecipientDisplayName(EMPTY_STRING);
 
     if (validateDogeAddress(value) || value === EMPTY_STRING) {
       setAddressFormatError(false);
@@ -246,11 +229,19 @@ export default function DogecoinWallet() {
 
   const handleCloseDogeSend = () => {
     setDogeAmount(0);
+    setDogeRecipientDisplayName(EMPTY_STRING);
     setOpenDogeSend(false);
     setAddressFormatError(false);
     setOpenSendDogeError(false);
   };
 
+  const handleClearDogeRecipient = () => {
+    setDogeRecipient(EMPTY_STRING);
+    setDogeRecipientDisplayName(EMPTY_STRING);
+    setAddressFormatError(false);
+    setOpenSendDogeError(false);
+  };
+
   const changeCopyDogeTxHash = async () => {
     setCopyDogeTxHash('Copied');
     await timeoutDelay(TIME_SECONDS_2);
@@ -397,7 +388,7 @@ export default function DogecoinWallet() {
     setLoadingRefreshDoge(false);
   };
 
-  const handleSendMaxDoge = () => {        
+  const handleSendMaxDoge = () => {
     if (maxSendableDogeCoin() <= 0) {
       setDogeAmount(0);
     } else {
@@ -420,6 +411,7 @@ export default function DogecoinWallet() {
       if (!sendRequest?.error) {
         setDogeAmount(0);
         setDogeRecipient(EMPTY_STRING);
+        setDogeRecipientDisplayName(EMPTY_STRING);
         setOpenTxDogeSubmit(false);
         setOpenSendDogeSuccess(true);
         setIsLoadingWalletBalanceDoge(true);
@@ -429,6 +421,7 @@ export default function DogecoinWallet() {
     } catch (error) {
       setDogeAmount(0);
       setDogeRecipient(EMPTY_STRING);
+      setDogeRecipientDisplayName(EMPTY_STRING);
       setOpenTxDogeSubmit(false);
       setOpenSendDogeError(true);
       setIsLoadingWalletBalanceDoge(true);
@@ -440,264 +433,84 @@ export default function DogecoinWallet() {
 
   const tableLoader = () => {
     return (
-      <Box sx={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap' }}>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-          }}
-        >
-          <CircularProgress />
-        </Box>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            sx={{ color: 'primary.main', fontStyle: 'italic', fontWeight: 700 }}
-          >
-            {t('core:message.generic.loading_transactions', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Typography>
-        </Box>
-      </Box>
+      <WalletTransactionsLoader
+        label={t('core:message.generic.loading_transactions', {
+          postProcess: 'capitalizeFirstChar',
+        })}
+      />
     );
   };
 
-  const transactionsTable = () => {
-    return (
-      <TableContainer component={Paper}>
-        <Table
-          stickyHeader
-          sx={{ width: '100%' }}
-          aria-label="transactions table"
-        >
-          <TableHead>
-            <TableRow>
-              <StyledTableCell align="left">
-                {t('core:sender', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:receiver', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:transaction_hash', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:total_amount', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:fee.fee', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:time', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {(rowsPerPage > 0
-              ? transactionsDoge.slice(
-                  page * rowsPerPage,
-                  page * rowsPerPage + rowsPerPage
-                )
-              : transactionsDoge
-            )?.map(
-              (
-                row: {
-                  inputs: {
-                    address: any;
-                    addressInWallet: boolean;
-                    amount: number;
-                  }[];
-                  outputs: {
-                    address: any;
-                    addressInWallet: boolean;
-                    amount: number;
-                  }[];
-                  txHash: string;
-                  totalAmount: any;
-                  feeAmount: any;
-                  timestamp: number;
-                },
-                k: Key
-              ) => (
-                <StyledTableRow key={k}>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {row.inputs.map((input, index) => (
-                      <Box
-                        key={index}
-                        style={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          color: input.addressInWallet
-                            ? undefined
-                            : theme.palette.info.main,
-                        }}
-                      >
-                        <span style={{ flex: 1, textAlign: 'left' }}>
-                          {input.address}
-                        </span>
-                        <span style={{ flex: 1, textAlign: 'right' }}>
-                          {(Number(input.amount) / 1e8).toFixed(DECIMAL_ROUND_UP)}
-                        </span>
-                      </Box>
-                    ))}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {row.outputs.map((output, index) => (
-                      <Box
-                        key={index}
-                        style={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          color: output.addressInWallet
-                            ? undefined
-                            : theme.palette.info.main,
-                        }}
-                      >
-                        <span style={{ flex: 1, textAlign: 'left' }}>
-                          {output.address}
-                        </span>
-                        <span style={{ flex: 1, textAlign: 'right' }}>
-                          {(Number(output.amount) / 1e8).toFixed(DECIMAL_ROUND_UP)}
-                        </span>
-                      </Box>
-                    ))}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {cropString(row?.txHash)}
-                    <CustomWidthTooltip
-                      placement="top"
-                      title={
-                        copyDogeTxHash
-                          ? copyDogeTxHash
-                          : t('core:action.copy_hash', {
-                              hash: row?.txHash,
-                              postProcess: 'capitalizeFirstChar',
-                            })
-                      }
-                    >
-                      <IconButton
-                        aria-label="copy"
-                        size="small"
-                        onClick={() => {
-                          copyToClipboard(row?.txHash);
-                          changeCopyDogeTxHash();
-                        }}
-                      >
-                        <CopyAllTwoTone fontSize="small" />
-                      </IconButton>
-                    </CustomWidthTooltip>
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {row?.totalAmount > 0 ? (
-                      <Box style={{ color: theme.palette.success.main }}>
-                        +{(Number(row?.totalAmount) / 1e8).toFixed(DECIMAL_ROUND_UP)}
-                      </Box>
-                    ) : (
-                      <Box style={{ color: theme.palette.error.main }}>
-                        {(Number(row?.totalAmount) / 1e8).toFixed(DECIMAL_ROUND_UP)}
-                      </Box>
-                    )}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="right">
-                    {row?.totalAmount <= 0 ? (
-                      <Box style={{ color: theme.palette.error.main }}>
-                        -{(Number(row?.feeAmount) / 1e8).toFixed(DECIMAL_ROUND_UP)}
-                      </Box>
-                    ) : (
-                      <Box style={{ color: 'grey' }}>
-                        -{(Number(row?.feeAmount) / 1e8).toFixed(DECIMAL_ROUND_UP)}
-                      </Box>
-                    )}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    <CustomWidthTooltip
-                      placement="top"
-                      title={
-                        row?.timestamp
-                          ? new Date(row?.timestamp).toLocaleString()
-                          : t('core:message.generic.waiting_confirmation', {
-                              postProcess: 'capitalizeFirstChar',
-                            })
-                      }
-                    >
-                      <Box>
-                        {row?.timestamp
-                          ? epochToAgo(row?.timestamp)
-                          : t('core:message.generic.unconfirmed_transaction', {
-                              postProcess: 'capitalizeFirstChar',
-                            })}
-                      </Box>
-                    </CustomWidthTooltip>
-                  </StyledTableCell>
-                </StyledTableRow>
-              )
-            )}
-            {emptyRows > 0 && (
-              <TableRow style={{ height: 53 * emptyRows }}>
-                <TableCell colSpan={6} />
-              </TableRow>
-            )}
-          </TableBody>
-          <TableFooter sx={{ width: '100%' }}>
-            <TableRow>
-              <TablePagination
-                labelRowsPerPage={t('core:rows_per_page', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-                rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
-                colSpan={6}
-                count={transactionsDoge.length}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                slotProps={{
-                  select: {
-                    inputProps: {
-                      'aria-label': 'rows per page',
-                    },
-                    native: true,
-                  },
-                }}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    );
-  };
+  const transactionsTable = () => (
+    <WalletExternalTransactionsList
+      ActionsComponent={TablePaginationActions}
+      coin="DOGE"
+      copyHashLabel={copyDogeTxHash || undefined}
+      labels={{
+        copyHash: (hash) =>
+          t('core:action.copy_hash', {
+            hash,
+            postProcess: 'capitalizeFirstChar',
+          }),
+        fee: t('core:fee.fee', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        noTransactions: 'No transactions.',
+        receiver: t('core:receiver', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        rowsPerPage: t('core:rows_per_page', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        sender: t('core:sender', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        time: t('core:time', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        totalAmount: t('core:total_amount', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        transactionHash: t('core:transaction_hash', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        waitingConfirmation: t('core:message.generic.waiting_confirmation', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+      }}
+      onCopyHash={(hash) => {
+        copyToClipboard(hash);
+        changeCopyDogeTxHash();
+      }}
+      onPageChange={handleChangePage}
+      onRowsPerPageChange={handleChangeRowsPerPage}
+      page={page}
+      rows={transactionsDoge}
+      rowsPerPage={rowsPerPage}
+    />
+  );
 
   return (
     <Box sx={{ width: '100%', mt: 2 }}>
-      <Dialog
-        fullScreen
+      <WalletSendDialog
         open={openDogeSend}
         onClose={handleCloseDogeSend}
         slots={{ transition: Transition }}
+        maxWidth={false}
+        fullWidth
+        disableScrollLock
+        slotProps={{
+          paper: {
+            sx: sendCoinDialogPaperSx,
+          },
+        }}
       >
-        <SubmitDialog fullWidth={true} maxWidth="xs" open={openTxDogeSubmit}>
+        <SubmitDialog
+          fullWidth={true}
+          maxWidth="xs"
+          open={openTxDogeSubmit}
+          disableScrollLock
+        >
           <DialogContent>
             <Box
               sx={{
@@ -774,203 +587,40 @@ export default function DogecoinWallet() {
             })}
           </Alert>
         </Snackbar>
-        <AppBar sx={{ position: 'static' }}>
-          <Toolbar>
-            <IconButton
-              edge="start"
-              color="inherit"
-              onClick={handleCloseDogeSend}
-              aria-label="close"
-            >
-              <Close />
-            </IconButton>
-            <Avatar
-              sx={{ width: 28, height: 28 }}
-              alt="DOGE Logo"
-              src={coinLogoDOGE}
-            />
-            <Typography
-              variant="h6"
-              noWrap
-              component="div"
-              sx={{
-                flexGrow: 1,
-                display: {
-                  xs: 'none',
-                  sm: 'block',
-                  paddingLeft: '10px',
-                  paddingTop: '3px',
-                },
-              }}
-            >
-              {t('core:action.transfer_coin', {
-                coin: Coin.DOGE,
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Typography>
-            <Button
-              disabled={disableCanSendDoge()}
-              variant="contained"
-              startIcon={<Send />}
-              aria-label="send-doge"
-              onClick={sendDogeRequest}
-              sx={{
-                backgroundcolor: 'action.main',
-                color: 'white',
-                '&:hover': { backgroundcolor: 'action.hover' },
-              }}
-            >
-              {t('core:action.send', {
-                postProcess: 'capitalizeAll',
-              })}
-            </Button>
-          </Toolbar>
-        </AppBar>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            align="center"
-            gutterBottom
-            sx={{ color: 'primary.main', fontWeight: 700 }}
-          >
-            {t('core:balance_available', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            &nbsp;&nbsp;
-          </Typography>
-          <Typography
-            variant="h5"
-            align="center"
-            gutterBottom
-            sx={{ color: 'text.primary', fontWeight: 700 }}
-          >
-            {isLoadingWalletBalanceDoge ? (
-              <Box sx={{ width: '175px' }}>
-                <LinearProgress />
-              </Box>
-            ) : walletBalanceError ? (
-              walletBalanceError
-            ) : (
-              walletBalanceDoge + ' DOGE'
-            )}
-          </Typography>
-        </Box>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            align="center"
-            sx={{ color: 'primary.main', fontWeight: 700 }}
-          >
-            {t('core:max_sendable', {
-              postProcess: 'capitalizeAll',
-            })}
-            &nbsp;&nbsp;
-          </Typography>
-          <Typography
-            variant="h5"
-            align="center"
-            sx={{ color: 'text.primary', fontWeight: 700 }}
-          >
-            {(() => {
-              const newMaxDogeAmount =
-                +walletBalanceDoge - estimatedFeeCalculated;
-              if (newMaxDogeAmount < 0) {
-                return Number(0.0) + ' DOGE';
-              } else {
-                return newMaxDogeAmount + ' DOGE';
-              }
-            })()}
-          </Typography>
-          <Box style={{ marginInlineStart: '15px' }}>
-            <Button
-              variant="outlined"
-              size="small"
-              onClick={handleSendMaxDoge}
-              style={{ borderRadius: 50 }}
-            >
-              {t('core:action.send_max', {
-                postProcess: 'capitalizeAll',
-              })}
-            </Button>
-          </Box>
-        </Box>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'stretch',
-            justifyContent: 'center',
-            gap: 2,
-            mt: 2.5,
-            mx: 'auto',
-            width: '100%',
-            maxWidth: 420,
-            px: { xs: 2, sm: 1 },
-          }}
-        >
-          <NumericFormat
-            decimalScale={8}
-            defaultValue={0}
-            value={dogeAmount}
-            allowNegative={false}
-            customInput={TextField as React.ComponentType<any>}
-            valueIsNumericString
-            label="Amount (DOGE)"
-            fullWidth
-            isAllowed={(values) => {
-              const maxDogeCoin = +walletBalanceDoge - estimatedFeeCalculated;
-              const { formattedValue, floatValue } = values;
-              return (
-                formattedValue === EMPTY_STRING ||
-                (floatValue ?? 0) <= maxDogeCoin
-              );
-            }}
-            onValueChange={(values) => {
-              setDogeAmount(values.floatValue ?? 0);
-            }}
-            required
-          />
-
-          <TextField
-            required
-            label={t('core:receiver_address', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            id="doge-address"
-            margin="normal"
-            value={dogeRecipient}
-            onChange={handleRecipientChange}
-            error={addressFormatError}
-            fullWidth
-            helperText={
-              addressFormatError
-                ? t('core:message.error.doge_address_invalid', {
-                    postProcess: 'capitalizeFirstChar',
-                  })
-                : t('core:message.generic.doge_address', {
-                    postProcess: 'capitalizeFirstChar',
-                  })
-            }
-          />
-        </Box>
-        <FeeManager coin="DOGE" onChange={setInputFee} />
-      </Dialog>
+        <ExternalSendForm
+          addressError={addressFormatError}
+          addressHelperText={
+            addressFormatError
+              ? t('core:message.error.doge_address_invalid', {
+                  postProcess: 'capitalizeFirstChar',
+                })
+              : t('core:message.generic.doge_address', {
+                  postProcess: 'capitalizeFirstChar',
+                })
+          }
+          addressInputId="doge-address"
+          amount={dogeAmount}
+          balance={walletBalanceDoge}
+          balanceError={walletBalanceError}
+          coinLogo={coinLogoDOGE}
+          feeContent={<FeeManager coin="DOGE" onChange={setInputFee} />}
+          isBalanceLoading={isLoadingWalletBalanceDoge}
+          maxSendable={maxSendableDogeCoin()}
+          onAmountChange={setDogeAmount}
+          onClearRecipient={handleClearDogeRecipient}
+          onClose={handleCloseDogeSend}
+          onOpenAddressBook={handleOpenAddressBook}
+          onRecipientChange={handleRecipientChange}
+          onSend={sendDogeRequest}
+          onSendMax={handleSendMaxDoge}
+          recipient={dogeRecipient}
+          recipientDisplayName={dogeRecipientDisplayName}
+          recipientSubtitle="DOGE address book contact"
+          sendDisabled={disableCanSendDoge()}
+          showAddressBookButton
+          symbol="DOGE"
+        />
+      </WalletSendDialog>
 
       <AddressBookDialog
         open={openDogeAddressBook}
@@ -979,241 +629,32 @@ export default function DogecoinWallet() {
         onSelectAddress={handleSelectAddress}
       />
 
-      <WalletCard sx={{ p: { xs: 2, md: 3 }, width: '100%' }}>
-        <Grid container rowSpacing={{ xs: 2, md: 3 }} columnSpacing={2}>
-          <Grid
-            container
-            alignItems="center"
-            columnSpacing={4}
-            rowSpacing={{ xs: 12, md: 0 }}
+      <WalletWorkspace
+        address={walletInfoDoge?.address ?? EMPTY_STRING}
+        addressBookRefreshKey={openDogeAddressBook}
+        balance={walletBalanceDoge}
+        balanceDecimals={8}
+        balanceError={walletBalanceError}
+        coin="DOGE"
+        isBalanceLoading={isLoadingWalletBalanceDoge}
+        onAddContact={handleOpenAddressBook}
+        onSelectAddress={handleSelectAddress}
+        onSend={handleOpenDogeSend}
+        onToggleReceive={() => setReceivePanelOpen((prev) => !prev)}
+        receiveOpen={receivePanelOpen}
+        transactions={
+          <WalletTransactionsCard
+            isRefreshing={loadingRefreshDoge}
+            onRefresh={handleLoadingRefreshDoge}
           >
-            <Grid
-              container
-              size={12}
-              justifyContent="space-around"
-              alignItems="center"
-              sx={{
-                flexDirection: { xs: 'column', md: 'row' },
-                textAlign: { xs: 'center', md: 'left' },
-                gap: { xs: 3, md: 0 },
-              }}
-            >
-              <Box sx={{ display: 'grid', alignItems: 'center' }}>
-                <Box
-                  component="img"
-                  alt="DOGE Logo"
-                  src={coinLogoDOGE}
-                  sx={{
-                    width: { xs: 96, sm: 110, md: 120 },
-                    height: { xs: 96, sm: 110, md: 120 },
-                    mr: { md: 1 },
-                  }}
-                />
-                <Typography
-                  variant="subtitle2"
-                  sx={{ color: 'text.secondary' }}
-                >
-                  {t('core:message.generic.dogecoin_wallet', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </Typography>
-              </Box>
-
-              <Grid
-                sx={{
-                  display: 'grid',
-                  gap: { xs: 2, md: 1 },
-                  gridTemplateColumns: {
-                    xs: '1fr',
-                    md: 'minmax(0, 1fr) minmax(0, 0.6fr)',
-                  },
-                  gridTemplateRows: { xs: 'repeat(3, auto)', md: '1fr 1fr' },
-                }}
-              >
-                <Grid
-                  sx={{
-                    gridColumn: { xs: '1', md: '1' },
-                    gridRow: { xs: '1', md: '1' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                  display={'flex'}
-                  alignItems={'center'}
-                  gap={1}
-                >
-                  <Typography
-                    variant="h5"
-                    sx={{ color: 'primary.main', fontWeight: 700 }}
-                  >
-                    {t('core:balance', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Typography>
-                  <Typography variant="h5" sx={{ fontWeight: 700 }}>
-                    {walletBalanceDoge ? (
-                      `${walletBalanceDoge} DOGE`
-                    ) : isLoadingWalletBalanceDoge ? (
-                      <LinearProgress />
-                    ) : undefined}
-                  </Typography>
-                </Grid>
-
-                <Grid
-                  sx={{
-                    gridColumn: { xs: '1', md: '1' },
-                    gridRow: { xs: '2', md: '2' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                >
-                  <Box display={'flex'} alignItems={'center'} gap={1}>
-                    <Typography
-                      variant="subtitle1"
-                      sx={{ color: 'primary.main', fontWeight: 700 }}
-                    >
-                      {t('core:address', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    </Typography>
-                    <Typography
-                      variant="subtitle1"
-                      sx={{
-                        color: 'text.primary',
-                        fontWeight: 700,
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        width: {
-                          xs: '100%',
-                          sm: '220px',
-                          md: '200px',
-                          lg: '370px',
-                        },
-                      }}
-                    >
-                      {walletInfoDoge?.address}
-                    </Typography>
-                    <CustomWidthTooltip
-                      placement="top"
-                      title={t('core:action.copy_address', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    >
-                      <IconButton
-                        size="small"
-                        onClick={() =>
-                          copyToClipboard(
-                            walletInfoDoge?.address ?? EMPTY_STRING
-                          )
-                        }
-                      >
-                        <CopyAllTwoTone fontSize="small" />
-                      </IconButton>
-                    </CustomWidthTooltip>
-                  </Box>
-                </Grid>
-
-                <Grid
-                  alignContent={'center'}
-                  display={'flex'}
-                  justifyContent={'center'}
-                  sx={{
-                    gridColumn: { xs: '1', md: '2' },
-                    gridRow: { xs: '3', md: '1 / span 2' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                >
-                  <Box
-                    sx={{
-                      alignItems: 'center',
-                      aspectRatio: '1 / 1',
-                      bgcolor: '#fff',
-                      border: (t) => `1px solid ${t.palette.divider}`,
-                      borderRadius: 1,
-                      boxShadow: (t) => t.shadows[2],
-                      display: 'flex',
-                      height: '100%',
-                      justifyContent: 'center',
-                      maxHeight: { xs: 200, md: 150 },
-                      maxWidth: { xs: 200, md: 150 },
-                      p: 0.5,
-                    }}
-                  >
-                    <QRCode
-                      value={walletInfoDoge?.address ?? EMPTY_STRING}
-                      size={200}
-                      fgColor="#000000"
-                      bgColor="#ffffff"
-                      level="H"
-                      style={{ width: '100%', height: '100%' }}
-                    />
-                  </Box>
-                </Grid>
-              </Grid>
-            </Grid>
-
-            <Grid size={12}>
-              <Box
-                sx={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  gap: 3,
-                  mt: { xs: 1, md: 2 },
-                  flexWrap: 'wrap',
-                }}
-              >
-                <WalletButtons
-                  variant="contained"
-                  startIcon={<Send style={{ marginBottom: 2 }} />}
-                  aria-label="Transfer"
-                  onClick={handleOpenDogeSend}
-                >
-                  {t('core:action.transfer_coin', {
-                    coin: Coin.DOGE,
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </WalletButtons>
-
-                <WalletButtons
-                  variant="contained"
-                  startIcon={<ImportContacts style={{ marginBottom: 2 }} />}
-                  aria-label="AddressBook"
-                  onClick={handleOpenAddressBook}
-                >
-                  {t('core:address_book', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </WalletButtons>
-              </Box>
-            </Grid>
-          </Grid>
-
-          <Grid size={12}>
-            <Box sx={{ width: '100%', mt: 3 }}>
-              <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
-                <Button
-                  size="large"
-                  onClick={handleLoadingRefreshDoge}
-                  loading={loadingRefreshDoge}
-                  loadingPosition="start"
-                  startIcon={<Refresh style={{ marginBottom: 2 }} />}
-                  variant="text"
-                  sx={{ borderRadius: 50 }}
-                >
-                  <span>
-                    {t('core:transactions', { postProcess: 'capitalizeAll' })}
-                  </span>
-                </Button>
-              </Box>
-
-              {isLoadingDogeTransactions ? (
-                <Box sx={{ width: '100%' }}>{tableLoader()}</Box>
-              ) : (
-                <Box sx={{ width: '100%' }}>{transactionsTable()}</Box>
-              )}
-            </Box>
-          </Grid>
-        </Grid>
-      </WalletCard>
+            {isLoadingDogeTransactions || loadingRefreshDoge ? (
+              tableLoader()
+            ) : (
+              <Box sx={{ width: '100%' }}>{transactionsTable()}</Box>
+            )}
+          </WalletTransactionsCard>
+        }
+      />
     </Box>
   );
 }
diff --git a/src/pages/ltc/index.tsx b/src/pages/ltc/index.tsx
index de2769e..322e3b8 100644
--- a/src/pages/ltc/index.tsx
+++ b/src/pages/ltc/index.tsx
@@ -1,58 +1,27 @@
 import {
   ChangeEvent,
-  Key,
   MouseEvent,
   SyntheticEvent,
   useEffect,
   useState,
 } from 'react';
-import {
-  epochToAgo,
-  timeoutDelay,
-  cropString,
-  copyToClipboard,
-} from '../../common/functions';
+import { timeoutDelay, copyToClipboard } from '../../common/functions';
 import { useTheme } from '@mui/material/styles';
 import {
   Alert,
-  AppBar,
-  Avatar,
   Box,
-  Button,
-  Dialog,
   DialogContent,
-  Grid,
   IconButton,
-  Paper,
-  Table,
-  TableBody,
-  TableContainer,
-  TableFooter,
-  TableHead,
-  TablePagination,
-  TableRow,
-  TextField,
-  Toolbar,
   Typography,
 } from '@mui/material';
-import { NumericFormat as _NumericFormat } from 'react-number-format';
-const NumericFormat = _NumericFormat as React.FC<React.ComponentProps<typeof _NumericFormat> & Record<string, unknown>>;
-import TableCell from '@mui/material/TableCell';
 import Snackbar from '@mui/material/Snackbar';
 type SnackbarCloseReason = 'timeout' | 'clickaway' | 'escapeKeyDown';
 import CircularProgress from '@mui/material/CircularProgress';
-import LinearProgress from '@mui/material/LinearProgress';
-import QRCode from 'react-qr-code';
 import {
-  Close,
-  CopyAllTwoTone,
   FirstPage,
-  ImportContacts,
   KeyboardArrowLeft,
   KeyboardArrowRight,
   LastPage,
-  Refresh,
-  Send,
 } from '@mui/icons-material';
 import coinLogoLTC from '../../assets/ltc.png';
 import { useTranslation } from 'react-i18next';
@@ -67,19 +36,25 @@ import {
   TIME_SECONDS_4,
 } from '../../common/constants';
 import {
-  CustomWidthTooltip,
   SlideTransition,
-  StyledTableCell,
-  StyledTableRow,
   SubmitDialog,
   Transition,
-  WalletButtons,
-  WalletCard,
+  WalletSendDialog,
 } from '../../styles/page-styles';
 import { FeeManager } from '../../components/FeeManager';
 import { Coin } from 'qapp-core';
 import { validateLtcAddress } from '../../utils/addressValidation';
 import { AddressBookDialog } from '../../components/AddressBook/AddressBookDialog';
+import {
+  WalletExternalTransactionsList,
+  WalletTransactionsCard,
+  WalletTransactionsLoader,
+  WalletWorkspace,
+} from '../../components/WalletWorkspace';
+import {
+  ExternalSendForm,
+  sendCoinDialogPaperSx,
+} from '../../components/ExternalSendForm';
 
 interface TablePaginationActionsProps {
   count: number;
@@ -161,8 +136,6 @@ function TablePaginationActions(props: TablePaginationActionsProps) {
 
 export default function LitecoinWallet() {
   const { t } = useTranslation(['core']);
-  const theme = useTheme();
-
   const [walletInfoLtc, setWalletInfoLtc] = useState<any>({});
   const [walletBalanceLtc, setWalletBalanceLtc] = useState<any>(0);
   const [_isLoadingWalletInfoLtc, setIsLoadingWalletInfoLtc] =
@@ -173,17 +146,20 @@ export default function LitecoinWallet() {
   const [isLoadingLtcTransactions, setIsLoadingLtcTransactions] =
     useState<boolean>(true);
   const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(25);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
   const [copyLtcTxHash, setCopyLtcTxHash] = useState(EMPTY_STRING);
   const [openLtcSend, setOpenLtcSend] = useState(false);
   const [ltcAmount, setLtcAmount] = useState<number>(0);
   const [ltcRecipient, setLtcRecipient] = useState(EMPTY_STRING);
+  const [ltcRecipientDisplayName, setLtcRecipientDisplayName] =
+    useState(EMPTY_STRING);
   const [addressFormatError, setAddressFormatError] = useState(false);
   const [loadingRefreshLtc, setLoadingRefreshLtc] = useState(false);
   const [openTxLtcSubmit, setOpenTxLtcSubmit] = useState(false);
   const [openSendLtcSuccess, setOpenSendLtcSuccess] = useState(false);
   const [openSendLtcError, setOpenSendLtcError] = useState(false);
   const [openLtcAddressBook, setOpenLtcAddressBook] = useState(false);
+  const [receivePanelOpen, setReceivePanelOpen] = useState(false);
   const [inputFee, setInputFee] = useState(0);
   const [_walletInfoError, setWalletInfoError] = useState<string | null>(null);
   const [walletBalanceError, setWalletBalanceError] = useState<string | null>(
@@ -206,11 +182,6 @@ export default function LitecoinWallet() {
     return truncatedMaxSendableLtcCoin;
   };
 
-  const emptyRows =
-    page > 0
-      ? Math.max(0, (1 + page) * rowsPerPage - transactionsLtc.length)
-      : 0;
-
   const handleOpenAddressBook = () => {
     setOpenLtcAddressBook(true);
   };
@@ -219,8 +190,9 @@ export default function LitecoinWallet() {
     setOpenLtcAddressBook(false);
   };
 
-  const handleSelectAddress = (address: string, _name: string) => {
+  const handleSelectAddress = (address: string, name: string) => {
     setLtcRecipient(address);
+    setLtcRecipientDisplayName(name || EMPTY_STRING);
     setLtcAmount(0);
     setOpenLtcAddressBook(false);
     setOpenLtcSend(true);
@@ -233,6 +205,7 @@ export default function LitecoinWallet() {
   const handleOpenLtcSend = () => {
     setLtcAmount(0);
     setLtcRecipient(EMPTY_STRING);
+    setLtcRecipientDisplayName(EMPTY_STRING);
     setOpenLtcSend(true);
     setAddressFormatError(false);
     setOpenSendLtcError(false);
@@ -248,6 +221,7 @@ export default function LitecoinWallet() {
   ) => {
     const value: string = e.target.value.trim();
     setLtcRecipient(value);
+    setLtcRecipientDisplayName(EMPTY_STRING);
 
     if (validateLtcAddress(value) || value === EMPTY_STRING) {
       setAddressFormatError(false);
@@ -258,6 +232,7 @@ export default function LitecoinWallet() {
 
   const handleCloseLtcSend = () => {
     setLtcAmount(0);
+    setLtcRecipientDisplayName(EMPTY_STRING);
     setOpenLtcSend(false);
     setAddressFormatError(false);
     setOpenSendLtcError(false);
@@ -265,6 +240,13 @@ export default function LitecoinWallet() {
     setWalletBalanceError(null);
   };
 
+  const handleClearLtcRecipient = () => {
+    setLtcRecipient(EMPTY_STRING);
+    setLtcRecipientDisplayName(EMPTY_STRING);
+    setAddressFormatError(false);
+    setOpenSendLtcError(false);
+  };
+
   const changeCopyLtcTxHash = async () => {
     setCopyLtcTxHash('Copied');
     await timeoutDelay(TIME_SECONDS_2);
@@ -434,6 +416,7 @@ export default function LitecoinWallet() {
       if (!sendRequest?.error) {
         setLtcAmount(0);
         setLtcRecipient(EMPTY_STRING);
+        setLtcRecipientDisplayName(EMPTY_STRING);
         setOpenTxLtcSubmit(false);
         setOpenSendLtcSuccess(true);
         setIsLoadingWalletBalanceLtc(true);
@@ -443,6 +426,7 @@ export default function LitecoinWallet() {
     } catch (error) {
       setLtcAmount(0);
       setLtcRecipient(EMPTY_STRING);
+      setLtcRecipientDisplayName(EMPTY_STRING);
       setOpenTxLtcSubmit(false);
       setOpenSendLtcError(true);
       setIsLoadingWalletBalanceLtc(true);
@@ -454,279 +438,84 @@ export default function LitecoinWallet() {
 
   const tableLoader = () => {
     return (
-      <Box sx={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap' }}>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-          }}
-        >
-          <CircularProgress />
-        </Box>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            sx={{ color: 'primary.main', fontStyle: 'italic', fontWeight: 700 }}
-          >
-            {t('core:message.generic.loading_transactions', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Typography>
-        </Box>
-      </Box>
+      <WalletTransactionsLoader
+        label={t('core:message.generic.loading_transactions', {
+          postProcess: 'capitalizeFirstChar',
+        })}
+      />
     );
   };
 
-  const transactionsTable = () => {
-    return (
-      <TableContainer component={Paper}>
-        <Table
-          stickyHeader
-          sx={{ width: '100%' }}
-          aria-label="transactions table"
-        >
-          <TableHead>
-            <TableRow>
-              <StyledTableCell align="left">
-                {t('core:sender', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:receiver', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:transaction_hash', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:total_amount', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:fee.fee', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:time', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {(rowsPerPage > 0
-              ? transactionsLtc.slice(
-                  page * rowsPerPage,
-                  page * rowsPerPage + rowsPerPage
-                )
-              : transactionsLtc
-            )?.map(
-              (
-                row: {
-                  inputs: {
-                    address: any;
-                    addressInWallet: boolean;
-                    amount: number;
-                  }[];
-                  outputs: {
-                    address: any;
-                    addressInWallet: boolean;
-                    amount: number;
-                  }[];
-                  txHash: string;
-                  totalAmount: any;
-                  feeAmount: any;
-                  timestamp: number;
-                },
-                k: Key
-              ) => (
-                <StyledTableRow key={k}>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {row.inputs.map((input, index) => (
-                      <Box
-                        key={index}
-                        style={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          color: input.addressInWallet
-                            ? undefined
-                            : theme.palette.info.main,
-                        }}
-                      >
-                        <span style={{ flex: 1, textAlign: 'left' }}>
-                          {input.address}
-                        </span>
-                        <span style={{ flex: 1, textAlign: 'right' }}>
-                          {(Number(input.amount) / 1e8).toFixed(
-                            DECIMAL_ROUND_UP
-                          )}
-                        </span>
-                      </Box>
-                    ))}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {row.outputs.map((output, index) => (
-                      <Box
-                        key={index}
-                        style={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          color: output.addressInWallet
-                            ? undefined
-                            : theme.palette.info.main,
-                        }}
-                      >
-                        <span style={{ flex: 1, textAlign: 'left' }}>
-                          {output.address}
-                        </span>
-                        <span style={{ flex: 1, textAlign: 'right' }}>
-                          {(Number(output.amount) / 1e8).toFixed(
-                            DECIMAL_ROUND_UP
-                          )}
-                        </span>
-                      </Box>
-                    ))}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {cropString(row?.txHash)}
-                    <CustomWidthTooltip
-                      placement="top"
-                      title={
-                        copyLtcTxHash
-                          ? copyLtcTxHash
-                          : t('core:action.copy_hash', {
-                              hash: row?.txHash,
-                              postProcess: 'capitalizeFirstChar',
-                            })
-                      }
-                    >
-                      <IconButton
-                        aria-label="copy"
-                        size="small"
-                        onClick={() => {
-                          copyToClipboard(row?.txHash);
-                          changeCopyLtcTxHash();
-                        }}
-                      >
-                        <CopyAllTwoTone fontSize="small" />
-                      </IconButton>
-                    </CustomWidthTooltip>
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {row?.totalAmount > 0 ? (
-                      <Box style={{ color: theme.palette.success.main }}>
-                        +
-                        {(Number(row?.totalAmount) / 1e8).toFixed(
-                          DECIMAL_ROUND_UP
-                        )}
-                      </Box>
-                    ) : (
-                      <Box style={{ color: theme.palette.error.main }}>
-                        {(Number(row?.totalAmount) / 1e8).toFixed(
-                          DECIMAL_ROUND_UP
-                        )}
-                      </Box>
-                    )}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="right">
-                    {row?.totalAmount <= 0 ? (
-                      <Box style={{ color: theme.palette.error.main }}>
-                        -
-                        {(Number(row?.feeAmount) / 1e8).toFixed(
-                          DECIMAL_ROUND_UP
-                        )}
-                      </Box>
-                    ) : (
-                      <Box style={{ color: 'grey' }}>
-                        -
-                        {(Number(row?.feeAmount) / 1e8).toFixed(
-                          DECIMAL_ROUND_UP
-                        )}
-                      </Box>
-                    )}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    <CustomWidthTooltip
-                      placement="top"
-                      title={
-                        row?.timestamp
-                          ? new Date(row?.timestamp).toLocaleString()
-                          : t('core:message.generic.waiting_confirmation', {
-                              postProcess: 'capitalizeFirstChar',
-                            })
-                      }
-                    >
-                      <Box>
-                        {row?.timestamp
-                          ? epochToAgo(row?.timestamp)
-                          : t('core:message.generic.unconfirmed_transaction', {
-                              postProcess: 'capitalizeFirstChar',
-                            })}
-                      </Box>
-                    </CustomWidthTooltip>
-                  </StyledTableCell>
-                </StyledTableRow>
-              )
-            )}
-            {emptyRows > 0 && (
-              <TableRow style={{ height: 53 * emptyRows }}>
-                <TableCell colSpan={6} />
-              </TableRow>
-            )}
-          </TableBody>
-          <TableFooter sx={{ width: '100%' }}>
-            <TableRow>
-              <TablePagination
-                labelRowsPerPage={t('core:rows_per_page', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-                rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
-                colSpan={6}
-                count={transactionsLtc.length}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                slotProps={{
-                  select: {
-                    inputProps: {
-                      'aria-label': 'rows per page',
-                    },
-                    native: true,
-                  },
-                }}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    );
-  };
+  const transactionsTable = () => (
+    <WalletExternalTransactionsList
+      ActionsComponent={TablePaginationActions}
+      coin="LTC"
+      copyHashLabel={copyLtcTxHash || undefined}
+      labels={{
+        copyHash: (hash) =>
+          t('core:action.copy_hash', {
+            hash,
+            postProcess: 'capitalizeFirstChar',
+          }),
+        fee: t('core:fee.fee', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        noTransactions: 'No transactions.',
+        receiver: t('core:receiver', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        rowsPerPage: t('core:rows_per_page', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        sender: t('core:sender', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        time: t('core:time', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        totalAmount: t('core:total_amount', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        transactionHash: t('core:transaction_hash', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        waitingConfirmation: t('core:message.generic.waiting_confirmation', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+      }}
+      onCopyHash={(hash) => {
+        copyToClipboard(hash);
+        changeCopyLtcTxHash();
+      }}
+      onPageChange={handleChangePage}
+      onRowsPerPageChange={handleChangeRowsPerPage}
+      page={page}
+      rows={transactionsLtc}
+      rowsPerPage={rowsPerPage}
+    />
+  );
 
   return (
     <Box sx={{ width: '100%', mt: 2 }}>
-      <Dialog
-        fullScreen
+      <WalletSendDialog
         open={openLtcSend}
         onClose={handleCloseLtcSend}
         slots={{ transition: Transition }}
+        maxWidth={false}
+        fullWidth
+        disableScrollLock
+        slotProps={{
+          paper: {
+            sx: sendCoinDialogPaperSx,
+          },
+        }}
       >
-        <SubmitDialog fullWidth={true} maxWidth="xs" open={openTxLtcSubmit}>
+        <SubmitDialog
+          fullWidth={true}
+          maxWidth="xs"
+          open={openTxLtcSubmit}
+          disableScrollLock
+        >
           <DialogContent>
             <Box
               sx={{
@@ -803,202 +592,40 @@ export default function LitecoinWallet() {
             })}
           </Alert>
         </Snackbar>
-        <AppBar sx={{ position: 'static' }}>
-          <Toolbar>
-            <IconButton
-              edge="start"
-              color="inherit"
-              onClick={handleCloseLtcSend}
-              aria-label="close"
-            >
-              <Close />
-            </IconButton>
-            <Avatar
-              sx={{ width: 28, height: 28 }}
-              alt="LTC Logo"
-              src={coinLogoLTC}
-            />
-            <Typography
-              variant="h6"
-              noWrap
-              component="div"
-              sx={{
-                flexGrow: 1,
-                display: {
-                  xs: 'none',
-                  sm: 'block',
-                  paddingLeft: '10px',
-                  paddingTop: '3px',
-                },
-              }}
-            >
-              {t('core:action.transfer_coin', {
-                coin: Coin.LTC,
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Typography>
-            <Button
-              disabled={disableCanSendLtc()}
-              variant="contained"
-              startIcon={<Send />}
-              aria-label="send-ltc"
-              onClick={sendLtcRequest}
-              sx={{
-                backgroundcolor: 'action.main',
-                color: 'white',
-                '&:hover': { backgroundcolor: 'action.hover' },
-              }}
-            >
-              {t('core:action.send', {
-                postProcess: 'capitalizeAll',
-              })}
-            </Button>
-          </Toolbar>
-        </AppBar>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            align="center"
-            gutterBottom
-            sx={{ color: 'primary.main', fontWeight: 700 }}
-          >
-            {t('core:balance_available', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            &nbsp;&nbsp;
-          </Typography>
-          <Typography
-            variant="h5"
-            align="center"
-            gutterBottom
-            sx={{ color: 'text.primary', fontWeight: 700 }}
-          >
-            {isLoadingWalletBalanceLtc ? (
-              <Box sx={{ width: '175px' }}>
-                <LinearProgress />
-              </Box>
-            ) : walletBalanceError ? (
-              walletBalanceError
-            ) : (
-              walletBalanceLtc + ' LTC'
-            )}
-          </Typography>
-        </Box>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            align="center"
-            sx={{ color: 'primary.main', fontWeight: 700 }}
-          >
-            {t('core:max_sendable', {
-              postProcess: 'capitalizeAll',
-            })}
-            &nbsp;&nbsp;
-          </Typography>
-          <Typography
-            variant="h5"
-            align="center"
-            sx={{ color: 'text.primary', fontWeight: 700 }}
-          >
-            {(() => {
-              const newMaxLtcAmount =
-                +walletBalanceLtc - estimatedFeeCalculated;
-              if (newMaxLtcAmount < 0) {
-                return Number(0.0) + ' LTC';
-              } else {
-                return newMaxLtcAmount + ' LTC';
-              }
-            })()}
-          </Typography>
-          <Box style={{ marginInlineStart: '15px' }}>
-            <Button
-              variant="outlined"
-              size="small"
-              onClick={handleSendMaxLtc}
-              style={{ borderRadius: 50 }}
-            >
-              {t('core:action.send_max', {
-                postProcess: 'capitalizeAll',
-              })}
-            </Button>
-          </Box>
-        </Box>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'stretch',
-            justifyContent: 'center',
-            gap: 2,
-            mt: 2.5,
-            mx: 'auto',
-            width: '100%',
-            maxWidth: 420,
-            px: { xs: 2, sm: 1 },
-          }}
-        >
-          <NumericFormat
-            decimalScale={8}
-            defaultValue={0}
-            value={ltcAmount}
-            allowNegative={false}
-            customInput={TextField as React.ComponentType<any>}
-            valueIsNumericString
-            label="Amount (LTC)"
-            fullWidth
-            isAllowed={(values) => {
-              const maxLtcCoin = +walletBalanceLtc - estimatedFeeCalculated;
-              const { formattedValue, floatValue } = values;
-              return (
-                formattedValue === EMPTY_STRING ||
-                (floatValue ?? 0) <= maxLtcCoin
-              );
-            }}
-            onValueChange={(values) => {
-              setLtcAmount(values.floatValue ?? 0);
-            }}
-            required
-          />
-          <TextField
-            required
-            label={t('core:receiver_address', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            id="ltc-address"
-            margin="normal"
-            value={ltcRecipient}
-            onChange={handleRecipientChange}
-            error={addressFormatError}
-            fullWidth
-            helperText={
-              addressFormatError
-                ? t('core:message.error.litecoin_address_invalid', {
-                    postProcess: 'capitalizeFirstChar',
-                  })
-                : t('core:message.generic.litecoin_address', {
-                    postProcess: 'capitalizeFirstChar',
-                  })
-            }
-          />
-        </Box>
-        <FeeManager coin="LTC" onChange={setInputFee} />
-      </Dialog>
+        <ExternalSendForm
+          addressError={addressFormatError}
+          addressHelperText={
+            addressFormatError
+              ? t('core:message.error.litecoin_address_invalid', {
+                  postProcess: 'capitalizeFirstChar',
+                })
+              : t('core:message.generic.litecoin_address', {
+                  postProcess: 'capitalizeFirstChar',
+                })
+          }
+          addressInputId="ltc-address"
+          amount={ltcAmount}
+          balance={walletBalanceLtc}
+          balanceError={walletBalanceError}
+          coinLogo={coinLogoLTC}
+          feeContent={<FeeManager coin="LTC" onChange={setInputFee} />}
+          isBalanceLoading={isLoadingWalletBalanceLtc}
+          maxSendable={maxSendableLtcCoin()}
+          onAmountChange={setLtcAmount}
+          onClearRecipient={handleClearLtcRecipient}
+          onClose={handleCloseLtcSend}
+          onOpenAddressBook={handleOpenAddressBook}
+          onRecipientChange={handleRecipientChange}
+          onSend={sendLtcRequest}
+          onSendMax={handleSendMaxLtc}
+          recipient={ltcRecipient}
+          recipientDisplayName={ltcRecipientDisplayName}
+          recipientSubtitle="LTC address book contact"
+          sendDisabled={disableCanSendLtc()}
+          showAddressBookButton
+          symbol="LTC"
+        />
+      </WalletSendDialog>
 
       <AddressBookDialog
         open={openLtcAddressBook}
@@ -1007,241 +634,32 @@ export default function LitecoinWallet() {
         onSelectAddress={handleSelectAddress}
       />
 
-      <WalletCard sx={{ p: { xs: 2, md: 3 }, width: '100%' }}>
-        <Grid container rowSpacing={{ xs: 2, md: 3 }} columnSpacing={2}>
-          <Grid
-            container
-            alignItems="center"
-            columnSpacing={4}
-            rowSpacing={{ xs: 12, md: 0 }}
+      <WalletWorkspace
+        address={walletInfoLtc?.address ?? EMPTY_STRING}
+        addressBookRefreshKey={openLtcAddressBook}
+        balance={walletBalanceLtc}
+        balanceDecimals={8}
+        balanceError={walletBalanceError}
+        coin="LTC"
+        isBalanceLoading={isLoadingWalletBalanceLtc}
+        onAddContact={handleOpenAddressBook}
+        onSelectAddress={handleSelectAddress}
+        onSend={handleOpenLtcSend}
+        onToggleReceive={() => setReceivePanelOpen((prev) => !prev)}
+        receiveOpen={receivePanelOpen}
+        transactions={
+          <WalletTransactionsCard
+            isRefreshing={loadingRefreshLtc}
+            onRefresh={handleLoadingRefreshLtc}
           >
-            <Grid
-              container
-              size={12}
-              justifyContent="space-around"
-              alignItems="center"
-              sx={{
-                flexDirection: { xs: 'column', md: 'row' },
-                textAlign: { xs: 'center', md: 'left' },
-                gap: { xs: 3, md: 0 },
-              }}
-            >
-              <Box sx={{ display: 'grid', alignItems: 'center' }}>
-                <Box
-                  component="img"
-                  alt="LTC Logo"
-                  src={coinLogoLTC}
-                  sx={{
-                    width: { xs: 96, sm: 110, md: 120 },
-                    height: { xs: 96, sm: 110, md: 120 },
-                    mr: { md: 1 },
-                  }}
-                />
-                <Typography
-                  variant="subtitle2"
-                  sx={{ color: 'text.secondary' }}
-                >
-                  {t('core:message.generic.litecoin_wallet', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </Typography>
-              </Box>
-
-              <Grid
-                sx={{
-                  display: 'grid',
-                  gap: { xs: 2, md: 1 },
-                  gridTemplateColumns: {
-                    xs: '1fr',
-                    md: 'minmax(0, 1fr) minmax(0, 0.6fr)',
-                  },
-                  gridTemplateRows: { xs: 'repeat(3, auto)', md: '1fr 1fr' },
-                }}
-              >
-                <Grid
-                  sx={{
-                    gridColumn: { xs: '1', md: '1' },
-                    gridRow: { xs: '1', md: '1' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                  display={'flex'}
-                  alignItems={'center'}
-                  gap={1}
-                >
-                  <Typography
-                    variant="h5"
-                    sx={{ color: 'primary.main', fontWeight: 700 }}
-                  >
-                    {t('core:balance', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Typography>
-                  <Typography variant="h5" sx={{ fontWeight: 700 }}>
-                    {walletBalanceLtc ? (
-                      `${walletBalanceLtc} LTC`
-                    ) : isLoadingWalletBalanceLtc ? (
-                      <LinearProgress />
-                    ) : undefined}
-                  </Typography>
-                </Grid>
-
-                <Grid
-                  sx={{
-                    gridColumn: { xs: '1', md: '1' },
-                    gridRow: { xs: '2', md: '2' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                >
-                  <Box display={'flex'} alignItems={'center'} gap={1}>
-                    <Typography
-                      variant="subtitle1"
-                      sx={{ color: 'primary.main', fontWeight: 700 }}
-                    >
-                      {t('core:address', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    </Typography>
-                    <Typography
-                      variant="subtitle1"
-                      sx={{
-                        color: 'text.primary',
-                        fontWeight: 700,
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        width: {
-                          xs: '100%',
-                          sm: '220px',
-                          md: '200px',
-                          lg: '370px',
-                        },
-                      }}
-                    >
-                      {walletInfoLtc?.address}
-                    </Typography>
-                    <CustomWidthTooltip
-                      placement="top"
-                      title={t('core:action.copy_address', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    >
-                      <IconButton
-                        size="small"
-                        onClick={() =>
-                          copyToClipboard(
-                            walletInfoLtc?.address ?? EMPTY_STRING
-                          )
-                        }
-                      >
-                        <CopyAllTwoTone fontSize="small" />
-                      </IconButton>
-                    </CustomWidthTooltip>
-                  </Box>
-                </Grid>
-
-                <Grid
-                  alignContent={'center'}
-                  display={'flex'}
-                  justifyContent={'center'}
-                  sx={{
-                    gridColumn: { xs: '1', md: '2' },
-                    gridRow: { xs: '3', md: '1 / span 2' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                >
-                  <Box
-                    sx={{
-                      alignItems: 'center',
-                      aspectRatio: '1 / 1',
-                      bgcolor: '#fff',
-                      border: (t) => `1px solid ${t.palette.divider}`,
-                      borderRadius: 1,
-                      boxShadow: (t) => t.shadows[2],
-                      display: 'flex',
-                      height: '100%',
-                      justifyContent: 'center',
-                      maxHeight: { xs: 200, md: 150 },
-                      maxWidth: { xs: 200, md: 150 },
-                      p: 0.5,
-                    }}
-                  >
-                    <QRCode
-                      value={walletInfoLtc?.address ?? EMPTY_STRING}
-                      size={200}
-                      fgColor="#000000"
-                      bgColor="#ffffff"
-                      level="H"
-                      style={{ width: '100%', height: '100%' }}
-                    />
-                  </Box>
-                </Grid>
-              </Grid>
-            </Grid>
-
-            <Grid size={12}>
-              <Box
-                sx={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  gap: 3,
-                  mt: { xs: 1, md: 2 },
-                  flexWrap: 'wrap',
-                }}
-              >
-                <WalletButtons
-                  variant="contained"
-                  startIcon={<Send style={{ marginBottom: 2 }} />}
-                  aria-label="Transfer"
-                  onClick={handleOpenLtcSend}
-                >
-                  {t('core:action.transfer_coin', {
-                    coin: Coin.LTC,
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </WalletButtons>
-
-                <WalletButtons
-                  variant="contained"
-                  startIcon={<ImportContacts style={{ marginBottom: 2 }} />}
-                  aria-label="AddressBook"
-                  onClick={handleOpenAddressBook}
-                >
-                  {t('core:address_book', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </WalletButtons>
-              </Box>
-            </Grid>
-          </Grid>
-
-          <Grid size={12}>
-            <Box sx={{ width: '100%', mt: 3 }}>
-              <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
-                <Button
-                  size="large"
-                  onClick={handleLoadingRefreshLtc}
-                  loading={loadingRefreshLtc}
-                  loadingPosition="start"
-                  startIcon={<Refresh style={{ marginBottom: 2 }} />}
-                  variant="text"
-                  sx={{ borderRadius: 50 }}
-                >
-                  <span>
-                    {t('core:transactions', { postProcess: 'capitalizeAll' })}
-                  </span>
-                </Button>
-              </Box>
-
-              {isLoadingLtcTransactions ? (
-                <Box sx={{ width: '100%' }}>{tableLoader()}</Box>
-              ) : (
-                <Box sx={{ width: '100%' }}>{transactionsTable()}</Box>
-              )}
-            </Box>
-          </Grid>
-        </Grid>
-      </WalletCard>
+            {isLoadingLtcTransactions || loadingRefreshLtc ? (
+              tableLoader()
+            ) : (
+              <Box sx={{ width: '100%' }}>{transactionsTable()}</Box>
+            )}
+          </WalletTransactionsCard>
+        }
+      />
     </Box>
   );
 }
diff --git a/src/pages/qort/index.tsx b/src/pages/qort/index.tsx
index f920c7a..5b4e6ac 100644
--- a/src/pages/qort/index.tsx
+++ b/src/pages/qort/index.tsx
@@ -1,30 +1,31 @@
 import {
   CheckCircleOutline,
   Close,
-  CopyAllTwoTone,
+  ExpandMore,
   FirstPage,
   HistoryToggleOff,
-  ImportContacts,
   InfoOutlined,
   KeyboardArrowLeft,
   KeyboardArrowRight,
   LastPage,
-  Refresh,
-  Send,
+  LockOutlined,
+  NorthEast,
+  PersonOutline,
+  ShieldOutlined,
 } from '@mui/icons-material';
-import { TabContext, TabList, TabPanel } from '@mui/lab';
 import {
   Alert,
   AppBar,
   Avatar,
   Box,
   Button,
-  Dialog,
+  Checkbox,
   DialogContent,
-  Grid,
   IconButton,
+  InputAdornment,
+  Menu,
+  MenuItem,
   Paper,
-  Tab,
   Table,
   TableBody,
   TableContainer,
@@ -38,7 +39,6 @@ import {
   Typography,
 } from '@mui/material';
 import CircularProgress from '@mui/material/CircularProgress';
-import LinearProgress from '@mui/material/LinearProgress';
 import Snackbar from '@mui/material/Snackbar';
 type SnackbarCloseReason = 'timeout' | 'clickaway' | 'escapeKeyDown';
 import { useTheme } from '@mui/material/styles';
@@ -56,20 +56,19 @@ import {
 } from 'react';
 import { Trans, useTranslation } from 'react-i18next';
 import { NumericFormat as _NumericFormat } from 'react-number-format';
-const NumericFormat = _NumericFormat as React.FC<React.ComponentProps<typeof _NumericFormat> & Record<string, unknown>>;
-import QRCode from 'react-qr-code';
+const NumericFormat = _NumericFormat as React.FC<
+  React.ComponentProps<typeof _NumericFormat> & Record<string, unknown>
+>;
 import coinLogoQORT from '../../assets/qort.png';
 import {
   DECIMAL_ROUND_UP,
   EMPTY_STRING,
   QORT_1_UNIT,
   TIME_MINUTES_1,
-  
   TIME_SECONDS_3,
   TIME_SECONDS_4,
 } from '../../common/constants';
 import {
-  copyToClipboard,
   cropString,
   epochToAgo,
   humanFileSize,
@@ -83,11 +82,33 @@ import {
   StyledTableRow,
   SubmitDialog,
   Transition,
-  WalletButtons,
-  WalletCard,
+  WalletSendDialog,
 } from '../../styles/page-styles';
-import { SearchTransactionsResponse } from '../../utils/Types.tsx';
 import { AddressBookDialog } from '../../components/AddressBook/AddressBookDialog';
+import {
+  WalletSyncCard,
+  WalletTransactionsCard,
+  WalletTransactionsLoader,
+  WalletWorkspace,
+} from '../../components/WalletWorkspace';
+import {
+  AddressBookEntry,
+  SearchTransactionsResponse,
+} from '../../utils/Types';
+import {
+  ADDRESS_BOOK_STORAGE_EVENT,
+  createAddressBookSyncSignature,
+  getAddressBook,
+  getAddressBookSyncBaselineKey,
+  getAddressBookSyncRequiredKey,
+  saveAddressBookSnapshot,
+} from '../../utils/addressBookStorage';
+import { publishToQDN } from '../../utils/addressBookQDN';
+import {
+  getAddressBookAvatarColor,
+  getAddressBookAvatarSx,
+} from '../../components/AddressBook/avatarPalette';
+import { getQortalNameData } from '../../utils/qortalNodeApi';
 
 interface TablePaginationActionsProps {
   count: number;
@@ -96,6 +117,11 @@ interface TablePaginationActionsProps {
   onPageChange: (event: MouseEvent<HTMLButtonElement>, newPage: number) => void;
 }
 
+type QortAddressBookSyncStatus = 'idle' | 'success' | 'dirty' | 'error';
+
+const QORT_ADDRESS_PATTERN = /^Q[1-9A-HJ-NP-Za-km-z]{33}$/;
+const QORT_BALANCE_REFRESH_INTERVAL_MS = 2.5 * TIME_MINUTES_1;
+
 const addressToPrimaryName: any = {};
 const requestQueueGetPrimaryName = new RequestQueueWithPromise(10);
 
@@ -157,6 +183,13 @@ export const replaceAddressesWithNames = async (
   });
 };
 
+const saveQortAddressBookSyncBaseline = (entries: AddressBookEntry[]) => {
+  localStorage.setItem(
+    getAddressBookSyncBaselineKey(Coin.QORT),
+    createAddressBookSyncSignature(entries)
+  );
+};
+
 function TablePaginationActions(props: TablePaginationActionsProps) {
   const { t } = useTranslation(['core']);
   const theme = useTheme();
@@ -240,7 +273,7 @@ export default function QortalWallet() {
   const [isLoadingWalletBalanceQort, setIsLoadingWalletBalanceQort] =
     useState<boolean>(true);
   const [paymentInfo, setPaymentInfo] = useState<any>([]);
-  const [qortTxFee, setQortTxFee] = useState<number>(0);
+  const [qortTxFee, setQortTxFee] = useState<number>(0.01);
   const [arbitraryInfo, setArbitraryInfo] = useState<any>([]);
   const [atInfo, setAtInfo] = useState<any>([]);
   const [groupInfo, setGroupInfo] = useState<any>([]);
@@ -249,11 +282,28 @@ export default function QortalWallet() {
   const [pollInfo, setPollInfo] = useState<any>([]);
   const [rewardshareInfo, setRewardshareInfo] = useState<any>([]);
   const [allInfo, setAllInfo] = useState<any>([]);
-  const [value, setValue] = useState('One');
+  const [selectedTransactionFilters, setSelectedTransactionFilters] = useState<
+    string[]
+  >(['all']);
+  const [advancedFilterAnchor, setAdvancedFilterAnchor] =
+    useState<null | HTMLElement>(null);
   const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(25);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
   const [openQortAddressBook, setOpenQortAddressBook] = useState(false);
-  const [addressBookPrefill, setAddressBookPrefill] = useState<{name: string, address: string} | null>(null);
+  const [receivePanelOpen, setReceivePanelOpen] = useState(false);
+  const [qortAddressBookEntries, setQortAddressBookEntries] = useState<
+    AddressBookEntry[]
+  >([]);
+  const [qortAddressBookSyncing, setQortAddressBookSyncing] = useState(false);
+  const [qortAddressBookSyncStatus, setQortAddressBookSyncStatus] =
+    useState<QortAddressBookSyncStatus>('idle');
+  const [qortAddressBookLastSync, setQortAddressBookLastSync] = useState<
+    number | null
+  >(null);
+  const [addressBookPrefill, setAddressBookPrefill] = useState<{
+    name: string;
+    address: string;
+  } | null>(null);
   const [loadingRefreshQort, setLoadingRefreshQort] = useState(false);
   const [openQortSend, setOpenQortSend] = useState(false);
   const [openTxQortSubmit, setOpenTxQortSubmit] = useState(false);
@@ -261,6 +311,8 @@ export default function QortalWallet() {
   const [openSendQortError, setOpenSendQortError] = useState(false);
   const [qortAmount, setQortAmount] = useState<number | undefined>(undefined);
   const [qortRecipient, setQortRecipient] = useState<string>(EMPTY_STRING);
+  const [qortRecipientDisplayName, setQortRecipientDisplayName] =
+    useState<string>(EMPTY_STRING);
   const [sendDisabled, setSendDisabled] = useState<boolean>(true);
   const [amountError, setAmountError] = useState<string | null>(null);
   const [recipientError, setRecipientError] = useState<string | null>(null);
@@ -268,16 +320,43 @@ export default function QortalWallet() {
   const [amountTouched, setAmountTouched] = useState(false);
   const [recipientTouched, setRecipientTouched] = useState(false);
   const userName = useGlobal().auth.name;
-  
+
   const maxSendableQortCoin = () => {
     // manage the correct round up
-    const value = (walletBalanceQort - qortTxFee).toString();
+    const value = Math.max(
+      0,
+      toFiniteNumber(walletBalanceQort) - toFiniteNumber(qortTxFee)
+    ).toString();
     const [integer, decimal = EMPTY_STRING] = value.split('.');
-    const truncated = decimal.substring(0, DECIMAL_ROUND_UP).padEnd(DECIMAL_ROUND_UP, '0');
-    let truncatedMaxSendableQortCoin: number = parseFloat(`${integer}.${truncated}`);
+    const truncated = decimal
+      .substring(0, DECIMAL_ROUND_UP)
+      .padEnd(DECIMAL_ROUND_UP, '0');
+    let truncatedMaxSendableQortCoin: number = parseFloat(
+      `${integer}.${truncated}`
+    );
     return truncatedMaxSendableQortCoin;
   };
-  
+
+  const toFiniteNumber = (value: unknown) => {
+    const parsed =
+      typeof value === 'number' ? value : Number.parseFloat(String(value ?? 0));
+    return Number.isFinite(parsed) ? parsed : 0;
+  };
+
+  const formatDecimal = (
+    value: unknown,
+    minimumFractionDigits = 2,
+    maximumFractionDigits = 2
+  ) => {
+    return toFiniteNumber(value).toLocaleString(undefined, {
+      minimumFractionDigits,
+      maximumFractionDigits,
+    });
+  };
+
+  const formatQortAmount = (value: unknown) => formatDecimal(value, 2, 2);
+  const formatQortFee = (value: unknown) => formatDecimal(value, 2, 4);
+
   const emptyRowsPayment =
     page > 0
       ? Math.max(0, (1 + page) * rowsPerPage - paymentInfo?.length || 0)
@@ -315,7 +394,41 @@ export default function QortalWallet() {
     setOpenQortAddressBook(true);
   };
 
-  const handleOpenAddressBookWithData = (name: string, addressValue: string) => {
+  const loadQortAddressBookEntries = useCallback(() => {
+    const entries = getAddressBook(Coin.QORT);
+    setQortAddressBookEntries(entries);
+    return entries;
+  }, []);
+
+  const refreshQortAddressBookSyncState = useCallback(
+    (entries: AddressBookEntry[]) => {
+      const cleanBaseline = localStorage.getItem(
+        getAddressBookSyncBaselineKey(Coin.QORT)
+      );
+
+      if (
+        cleanBaseline &&
+        createAddressBookSyncSignature(entries) === cleanBaseline
+      ) {
+        localStorage.removeItem(getAddressBookSyncRequiredKey(Coin.QORT));
+        setQortAddressBookSyncStatus('success');
+        return;
+      }
+
+      localStorage.setItem(getAddressBookSyncRequiredKey(Coin.QORT), 'true');
+      setQortAddressBookSyncStatus('dirty');
+    },
+    []
+  );
+
+  const handleToggleReceivePanel = () => {
+    setReceivePanelOpen((prev) => !prev);
+  };
+
+  const handleOpenAddressBookWithData = (
+    name: string,
+    addressValue: string
+  ) => {
     setAddressBookPrefill({ name, address: addressValue });
     setOpenQortAddressBook(true);
   };
@@ -323,24 +436,156 @@ export default function QortalWallet() {
   const handleCloseAddressBook = () => {
     setOpenQortAddressBook(false);
     setAddressBookPrefill(null);
+    loadQortAddressBookEntries();
+  };
+
+  const handleQortAddressBookChange = useCallback(() => {
+    const entries = loadQortAddressBookEntries();
+    refreshQortAddressBookSyncState(entries);
+  }, [loadQortAddressBookEntries, refreshQortAddressBookSyncState]);
+
+  const refreshQortAddressBookFromStorage = useCallback(() => {
+    const entries = loadQortAddressBookEntries();
+    if (
+      localStorage.getItem(getAddressBookSyncRequiredKey(Coin.QORT)) === 'true'
+    ) {
+      refreshQortAddressBookSyncState(entries);
+      return;
+    }
+
+    saveQortAddressBookSyncBaseline(entries);
+    setQortAddressBookSyncStatus('success');
+  }, [loadQortAddressBookEntries, refreshQortAddressBookSyncState]);
+
+  const handleSyncQortAddressBook = async () => {
+    const hadRequiredSync =
+      qortAddressBookSyncStatus === 'dirty' ||
+      localStorage.getItem(getAddressBookSyncRequiredKey(Coin.QORT)) === 'true';
+
+    setQortAddressBookSyncing(true);
+    try {
+      const entries = getAddressBook(Coin.QORT);
+      const publishedAt = await publishToQDN(
+        Coin.QORT,
+        entries,
+        userName || undefined
+      );
+      if (publishedAt) {
+        saveAddressBookSnapshot(Coin.QORT, entries, publishedAt);
+        saveQortAddressBookSyncBaseline(entries);
+        localStorage.removeItem(getAddressBookSyncRequiredKey(Coin.QORT));
+        setQortAddressBookLastSync(publishedAt);
+        setQortAddressBookSyncStatus('success');
+      } else {
+        setQortAddressBookSyncStatus(hadRequiredSync ? 'dirty' : 'error');
+      }
+    } catch (error) {
+      console.error('Failed to sync QORT address book:', error);
+      setQortAddressBookSyncStatus(hadRequiredSync ? 'dirty' : 'error');
+    } finally {
+      setQortAddressBookSyncing(false);
+      loadQortAddressBookEntries();
+    }
   };
 
-  const handleSelectAddress = (address: string, _name: string) => {
+  useEffect(() => {
+    refreshQortAddressBookFromStorage();
+  }, [address, openQortAddressBook, refreshQortAddressBookFromStorage]);
+
+  useEffect(() => {
+    const handleAddressBookStorage = () => {
+      refreshQortAddressBookFromStorage();
+    };
+
+    window.addEventListener(
+      ADDRESS_BOOK_STORAGE_EVENT,
+      handleAddressBookStorage
+    );
+    return () => {
+      window.removeEventListener(
+        ADDRESS_BOOK_STORAGE_EVENT,
+        handleAddressBookStorage
+      );
+    };
+  }, [refreshQortAddressBookFromStorage]);
+
+  const handleSelectAddress = (address: string, name: string) => {
     setQortRecipient(address);
-    setQortAmount(0);
+    setQortRecipientDisplayName(name || EMPTY_STRING);
     setOpenQortAddressBook(false);
     setOpenQortSend(true);
-    setAmountError(null);
-    setAmountTouched(false);
     setRecipientError(null);
     setRecipientTouched(true); // Trigger validation for QORT addresses
   };
 
-  const handleChange = (_event: SyntheticEvent, newValue: string) => {
-    setValue(newValue);
+  const handleClearQortRecipient = () => {
+    setQortRecipient(EMPTY_STRING);
+    setQortRecipientDisplayName(EMPTY_STRING);
+    setRecipientError(null);
+    setRecipientTouched(false);
+  };
+
+  const openUserLookup = (addressOrName: string) => {
+    const value = addressOrName?.trim();
+    if (!value || value === '-') return;
+
+    window.parent?.postMessage(
+      {
+        action: 'OPEN_USER_LOOKUP',
+        addressOrName: value,
+      },
+      '*'
+    );
+  };
+
+  const handleTransactionFiltersChange = (newValues: string[]) => {
+    setSelectedTransactionFilters(newValues);
     setPage(0);
   };
 
+  const handleAdvancedFilterClick = (event: MouseEvent<HTMLElement>) => {
+    setAdvancedFilterAnchor(event.currentTarget);
+  };
+
+  const handleAdvancedFilterClose = () => {
+    setAdvancedFilterAnchor(null);
+  };
+
+  const handleAdvancedFilterSelect = (newValue: string) => {
+    const nonAllFilterValues = [
+      'payments',
+      'rewards',
+      'activity',
+      'arbitrary',
+      'at',
+      'group',
+      'name',
+      'asset',
+      'poll',
+    ];
+
+    if (newValue === 'all') {
+      const allFiltersAreActive =
+        selectedTransactionFilters.includes('all') ||
+        nonAllFilterValues.every((filterValue) =>
+          selectedTransactionFilters.includes(filterValue)
+        );
+      handleTransactionFiltersChange(allFiltersAreActive ? [] : ['all']);
+      return;
+    }
+
+    const activeValues = selectedTransactionFilters.includes('all')
+      ? nonAllFilterValues
+      : selectedTransactionFilters;
+    const nextValues = activeValues.includes(newValue)
+      ? activeValues.filter((filterValue) => filterValue !== newValue)
+      : [...activeValues, newValue];
+
+    handleTransactionFiltersChange(
+      nextValues.length === nonAllFilterValues.length ? ['all'] : nextValues
+    );
+  };
+
   const handleChangePage = (
     _event: MouseEvent<HTMLButtonElement> | null,
     newPage: number
@@ -358,6 +603,7 @@ export default function QortalWallet() {
   const handleOpenQortSend = () => {
     setQortAmount(0);
     setQortRecipient(EMPTY_STRING);
+    setQortRecipientDisplayName(EMPTY_STRING);
     setOpenQortSend(true);
     setAmountError(null);
     setAmountTouched(false);
@@ -368,6 +614,7 @@ export default function QortalWallet() {
   const handleCloseQortSend = () => {
     setQortAmount(0);
     setQortRecipient(EMPTY_STRING);
+    setQortRecipientDisplayName(EMPTY_STRING);
     setOpenQortSend(false);
     setAmountError(null);
     setAmountTouched(false);
@@ -433,6 +680,8 @@ export default function QortalWallet() {
 
   // address lookup with debounce + cancel
   useEffect(() => {
+    const recipientValue = qortRecipient.trim();
+
     // Early exit: if recipient not touched, no validation needed
     if (!recipientTouched) {
       setRecipientError(null);
@@ -441,47 +690,39 @@ export default function QortalWallet() {
     }
 
     // Synchronous validations
-    if (qortRecipient === EMPTY_STRING) {
+    if (recipientValue === EMPTY_STRING) {
       setRecipientError(t('core:message.error.recipient_required'));
       setAddressValidating(false);
       return;
     }
 
-    if (qortRecipient.length < ADDRESS_MIN_LENGTH) {
+    if (recipientValue.length < ADDRESS_MIN_LENGTH) {
       setRecipientError(t('core:message.error.recipient_too_short'));
       setAddressValidating(false);
       return;
     }
 
-    // Perform debounced network lookup
+    if (QORT_ADDRESS_PATTERN.test(recipientValue)) {
+      setRecipientError(null);
+      setAddressValidating(false);
+      return;
+    }
+
+    // Perform debounced registered-name lookup and resolve it to its owner address.
     setAddressValidating(true);
     setRecipientError(null);
 
     const controller = new AbortController();
     const timeout = setTimeout(async () => {
       try {
-        const [addrRes, nameRes] = await Promise.all([
-          fetch(`/addresses/validate/${encodeURIComponent(qortRecipient)}`, {
-            signal: controller.signal,
-          }).then(async (r) => {
-            const json = await r.json();
-            if (!json) {
-              console.warn(`Invalid address format: ${qortRecipient}`);
-              return { error: 'Invalid address' };
-            }
-            return json;
-          }),
-          fetch(`/names/${encodeURIComponent(qortRecipient)}`, {
-            signal: controller.signal,
-          }).then(async (r) => {
-            if (!r.ok) {
-              console.warn(`No name found: ${qortRecipient}`);
-              return { error: 'Name not found' };
-            }
-            return r.json();
-          }),
-        ]);
-        if (!addrRes?.error || !nameRes?.error) {
+        const nameData = await getQortalNameData(
+          recipientValue,
+          controller.signal
+        );
+
+        if (nameData?.owner && QORT_ADDRESS_PATTERN.test(nameData.owner)) {
+          setQortRecipient(nameData.owner);
+          setQortRecipientDisplayName(nameData.name || recipientValue);
           setRecipientError(null);
         } else {
           setRecipientError(t('core:message.error.recipient_not_found'));
@@ -773,7 +1014,7 @@ export default function QortalWallet() {
     const controller = new AbortController();
     const intervalGetWalletBalance = setInterval(() => {
       getWalletBalanceQort();
-    }, TIME_MINUTES_1);
+    }, QORT_BALANCE_REFRESH_INTERVAL_MS);
     getWalletBalanceQort(controller.signal);
 
     return () => {
@@ -791,7 +1032,7 @@ export default function QortalWallet() {
         const rawFee = await res.json();
 
         if (!cancelled && typeof rawFee === 'number' && rawFee > 0) {
-          setQortTxFee(rawFee / QORT_1_UNIT);
+          setQortTxFee(Math.max(rawFee / QORT_1_UNIT, 0.01));
         }
       } catch (err) {
         console.error('Failed to fetch QORT tx fee', err);
@@ -832,6 +1073,7 @@ export default function QortalWallet() {
 
         setQortAmount(0);
         setQortRecipient(EMPTY_STRING);
+        setQortRecipientDisplayName(EMPTY_STRING);
         setOpenTxQortSubmit(false);
         setOpenSendQortSuccess(true);
 
@@ -842,6 +1084,7 @@ export default function QortalWallet() {
     } catch (error) {
       setQortAmount(0);
       setQortRecipient(EMPTY_STRING);
+      setQortRecipientDisplayName(EMPTY_STRING);
       setOpenTxQortSubmit(false);
       setOpenSendQortError(true);
       await timeoutDelay(TIME_SECONDS_3);
@@ -982,8 +1225,18 @@ export default function QortalWallet() {
                       <StyledTableCell
                         style={{ width: 'auto', cursor: 'pointer' }}
                         align="left"
-                        title={t('core:action.double_click_addressbook', { address: row?.creatorAddressOriginal || row?.creatorAddress })}
-                        onDoubleClick={() => handleOpenAddressBookWithData(row?.creatorAddress || EMPTY_STRING, row?.creatorAddressOriginal || row?.creatorAddress || EMPTY_STRING)}
+                        title={t('core:action.double_click_addressbook', {
+                          address:
+                            row?.creatorAddressOriginal || row?.creatorAddress,
+                        })}
+                        onDoubleClick={() =>
+                          handleOpenAddressBookWithData(
+                            row?.creatorAddress || EMPTY_STRING,
+                            row?.creatorAddressOriginal ||
+                              row?.creatorAddress ||
+                              EMPTY_STRING
+                          )
+                        }
                       >
                         {row?.creatorAddress === address ||
                         row?.creatorAddress === userName ? (
@@ -997,8 +1250,17 @@ export default function QortalWallet() {
                       <StyledTableCell
                         style={{ width: 'auto', cursor: 'pointer' }}
                         align="left"
-                        title={t('core:action.double_click_addressbook', { address: row?.recipientOriginal || row?.recipient })}
-                        onDoubleClick={() => handleOpenAddressBookWithData(row?.recipient || EMPTY_STRING, row?.recipientOriginal || row?.recipient || EMPTY_STRING)}
+                        title={t('core:action.double_click_addressbook', {
+                          address: row?.recipientOriginal || row?.recipient,
+                        })}
+                        onDoubleClick={() =>
+                          handleOpenAddressBookWithData(
+                            row?.recipient || EMPTY_STRING,
+                            row?.recipientOriginal ||
+                              row?.recipient ||
+                              EMPTY_STRING
+                          )
+                        }
                       >
                         {row?.recipient === address ||
                         row?.recipient === userName ? (
@@ -1048,7 +1310,7 @@ export default function QortalWallet() {
             labelRowsPerPage={t('core:rows_per_page', {
               postProcess: 'capitalizeFirstChar',
             })}
-            rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+            rowsPerPageOptions={[5, 10, 25]}
             count={paymentInfo.length}
             rowsPerPage={rowsPerPage}
             page={page}
@@ -1196,8 +1458,18 @@ export default function QortalWallet() {
                     <StyledTableCell
                       style={{ width: 'auto', cursor: 'pointer' }}
                       align="left"
-                      title={t('core:action.double_click_addressbook', { address: row?.creatorAddressOriginal || row?.creatorAddress })}
-                      onDoubleClick={() => handleOpenAddressBookWithData(row?.creatorAddress || EMPTY_STRING, row?.creatorAddressOriginal || row?.creatorAddress || EMPTY_STRING)}
+                      title={t('core:action.double_click_addressbook', {
+                        address:
+                          row?.creatorAddressOriginal || row?.creatorAddress,
+                      })}
+                      onDoubleClick={() =>
+                        handleOpenAddressBookWithData(
+                          row?.creatorAddress || EMPTY_STRING,
+                          row?.creatorAddressOriginal ||
+                            row?.creatorAddress ||
+                            EMPTY_STRING
+                        )
+                      }
                     >
                       {row?.creatorAddress === address ||
                       row?.creatorAddress === userName ? (
@@ -1242,7 +1514,7 @@ export default function QortalWallet() {
                   labelRowsPerPage={t('core:rows_per_page', {
                     postProcess: 'capitalizeFirstChar',
                   })}
-                  rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+                  rowsPerPageOptions={[5, 10, 25]}
                   colSpan={7}
                   count={arbitraryInfo.length}
                   rowsPerPage={rowsPerPage}
@@ -1400,8 +1672,18 @@ export default function QortalWallet() {
                     <StyledTableCell
                       style={{ width: 'auto', cursor: 'pointer' }}
                       align="left"
-                      title={t('core:action.double_click_addressbook', { address: row?.creatorAddressOriginal || row?.creatorAddress })}
-                      onDoubleClick={() => handleOpenAddressBookWithData(row?.creatorAddress || EMPTY_STRING, row?.creatorAddressOriginal || row?.creatorAddress || EMPTY_STRING)}
+                      title={t('core:action.double_click_addressbook', {
+                        address:
+                          row?.creatorAddressOriginal || row?.creatorAddress,
+                      })}
+                      onDoubleClick={() =>
+                        handleOpenAddressBookWithData(
+                          row?.creatorAddress || EMPTY_STRING,
+                          row?.creatorAddressOriginal ||
+                            row?.creatorAddress ||
+                            EMPTY_STRING
+                        )
+                      }
                     >
                       {row?.creatorAddress === address ||
                       row?.creatorAddress === userName ? (
@@ -1413,10 +1695,30 @@ export default function QortalWallet() {
                       )}
                     </StyledTableCell>
                     <StyledTableCell
-                      style={{ width: 'auto', cursor: row?.recipientOriginal || row?.recipient ? 'pointer' : 'default' }}
+                      style={{
+                        width: 'auto',
+                        cursor:
+                          row?.recipientOriginal || row?.recipient
+                            ? 'pointer'
+                            : 'default',
+                      }}
                       align="left"
-                      title={(row?.recipientOriginal || row?.recipient) ? t('core:action.double_click_addressbook', { address: row?.recipientOriginal || row?.recipient }) : undefined}
-                      onDoubleClick={() => (row?.recipientOriginal || row?.recipient) && handleOpenAddressBookWithData(row?.recipient || EMPTY_STRING, row?.recipientOriginal || row?.recipient || EMPTY_STRING)}
+                      title={
+                        row?.recipientOriginal || row?.recipient
+                          ? t('core:action.double_click_addressbook', {
+                              address: row?.recipientOriginal || row?.recipient,
+                            })
+                          : undefined
+                      }
+                      onDoubleClick={() =>
+                        (row?.recipientOriginal || row?.recipient) &&
+                        handleOpenAddressBookWithData(
+                          row?.recipient || EMPTY_STRING,
+                          row?.recipientOriginal ||
+                            row?.recipient ||
+                            EMPTY_STRING
+                        )
+                      }
                     >
                       {(() => {
                         if (row?.recipient) {
@@ -1477,7 +1779,7 @@ export default function QortalWallet() {
                   labelRowsPerPage={t('core:rows_per_page', {
                     postProcess: 'capitalizeFirstChar',
                   })}
-                  rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+                  rowsPerPageOptions={[5, 10, 25]}
                   colSpan={7}
                   count={atInfo.length}
                   rowsPerPage={rowsPerPage}
@@ -1634,8 +1936,18 @@ export default function QortalWallet() {
                     <StyledTableCell
                       style={{ width: 'auto', cursor: 'pointer' }}
                       align="left"
-                      title={t('core:action.double_click_addressbook', { address: row?.creatorAddressOriginal || row?.creatorAddress })}
-                      onDoubleClick={() => handleOpenAddressBookWithData(row?.creatorAddress || EMPTY_STRING, row?.creatorAddressOriginal || row?.creatorAddress || EMPTY_STRING)}
+                      title={t('core:action.double_click_addressbook', {
+                        address:
+                          row?.creatorAddressOriginal || row?.creatorAddress,
+                      })}
+                      onDoubleClick={() =>
+                        handleOpenAddressBookWithData(
+                          row?.creatorAddress || EMPTY_STRING,
+                          row?.creatorAddressOriginal ||
+                            row?.creatorAddress ||
+                            EMPTY_STRING
+                        )
+                      }
                     >
                       {row?.creatorAddress === address ||
                       row?.creatorAddress === userName ? (
@@ -1782,7 +2094,7 @@ export default function QortalWallet() {
                   labelRowsPerPage={t('core:rows_per_page', {
                     postProcess: 'capitalizeFirstChar',
                   })}
-                  rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+                  rowsPerPageOptions={[5, 10, 25]}
                   colSpan={6}
                   count={groupInfo.length}
                   rowsPerPage={rowsPerPage}
@@ -2000,7 +2312,7 @@ export default function QortalWallet() {
                   labelRowsPerPage={t('core:rows_per_page', {
                     postProcess: 'capitalizeFirstChar',
                   })}
-                  rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+                  rowsPerPageOptions={[5, 10, 25]}
                   colSpan={6}
                   count={nameInfo.length}
                   rowsPerPage={rowsPerPage}
@@ -2213,7 +2525,7 @@ export default function QortalWallet() {
                   labelRowsPerPage={t('core:rows_per_page', {
                     postProcess: 'capitalizeFirstChar',
                   })}
-                  rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+                  rowsPerPageOptions={[5, 10, 25]}
                   colSpan={7}
                   count={assetInfo.length}
                   rowsPerPage={rowsPerPage}
@@ -2398,7 +2710,7 @@ export default function QortalWallet() {
                   labelRowsPerPage={t('core:rows_per_page', {
                     postProcess: 'capitalizeFirstChar',
                   })}
-                  rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+                  rowsPerPageOptions={[5, 10, 25]}
                   colSpan={6}
                   count={pollInfo.length}
                   rowsPerPage={rowsPerPage}
@@ -2661,7 +2973,7 @@ export default function QortalWallet() {
                   labelRowsPerPage={t('core:rows_per_page', {
                     postProcess: 'capitalizeFirstChar',
                   })}
-                  rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+                  rowsPerPageOptions={[5, 10, 25]}
                   colSpan={7}
                   count={rewardshareInfo.length}
                   rowsPerPage={rowsPerPage}
@@ -3030,7 +3342,7 @@ export default function QortalWallet() {
             labelRowsPerPage={t('core:rows_per_page', {
               postProcess: 'capitalizeFirstChar',
             })}
-            rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
+            rowsPerPageOptions={[5, 10, 25]}
             count={allInfo.length}
             rowsPerPage={rowsPerPage}
             page={page}
@@ -3056,152 +3368,717 @@ export default function QortalWallet() {
     }
   };
 
+  // Retain the legacy per-type renderers while the unified table handles the visible UX.
+  void tablePayment;
+  void tableArbitrary;
+  void tableAt;
+  void tableGroup;
+  void tableName;
+  void tableAsset;
+  void tablePoll;
+  void tableRewardshare;
+  void tableAll;
+
   const qortalTables = () => {
-    return (
-      <Box sx={{ width: '100%' }}>
-        <TabContext value={value}>
-          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-            <TabList
-              onChange={handleChange}
-              variant="scrollable"
-              scrollButtons="auto"
-              aria-label="Qortal Transactions"
-            >
-              <Tab
-                label={<span style={{ fontSize: '14px' }}>ALL</span>}
-                value="Nine"
-              />
-              <Tab
-                label={<span style={{ fontSize: '14px' }}>PAYMENT</span>}
-                value="One"
-              />
-              <Tab
-                label={<span style={{ fontSize: '14px' }}>ARBITRARY</span>}
-                value="Two"
-              />
-              <Tab
-                label={<span style={{ fontSize: '14px' }}>AT</span>}
-                value="Three"
-              />
-              <Tab
-                label={<span style={{ fontSize: '14px' }}>GROUP</span>}
-                value="Four"
-              />
-              <Tab
-                label={<span style={{ fontSize: '14px' }}>NAME</span>}
-                value="Five"
-              />
-              <Tab
-                label={<span style={{ fontSize: '14px' }}>ASSET</span>}
-                value="Six"
-              />
-              <Tab
-                label={<span style={{ fontSize: '14px' }}>POLL</span>}
-                value="Seven"
-              />
-              <Tab
-                label={<span style={{ fontSize: '14px' }}>REWARDSHARE</span>}
-                value="Eight"
-              />
-            </TabList>
-          </Box>
-          <TabPanel value="Nine">{tableAll()}</TabPanel>
-          <TabPanel value="One">{tablePayment()}</TabPanel>
-          <TabPanel value="Two">{tableArbitrary()}</TabPanel>
-          <TabPanel value="Three">{tableAt()}</TabPanel>
-          <TabPanel value="Four">{tableGroup()}</TabPanel>
-          <TabPanel value="Five">{tableName()}</TabPanel>
-          <TabPanel value="Six">{tableAsset()}</TabPanel>
-          <TabPanel value="Seven">{tablePoll()}</TabPanel>
-          <TabPanel value="Eight">{tableRewardshare()}</TabPanel>
-        </TabContext>
-      </Box>
+    const rewardTypes = ['REWARD_SHARE', 'TRANSFER_PRIVS', 'PRESENCE'];
+    const safeAllInfo = Array.isArray(allInfo) ? allInfo : [];
+    const activityInfo = safeAllInfo.filter(
+      (row: any) =>
+        row?.type && row.type !== 'PAYMENT' && !rewardTypes.includes(row.type)
     );
-  };
+    const filters = [
+      { label: 'All', rows: safeAllInfo, value: 'all' },
+      { label: 'Payments', rows: paymentInfo, value: 'payments' },
+      { label: 'Rewards', rows: rewardshareInfo, value: 'rewards' },
+      { label: 'Activity', rows: activityInfo, value: 'activity' },
+      { label: 'Arbitrary', rows: arbitraryInfo, value: 'arbitrary' },
+      { label: 'AT', rows: atInfo, value: 'at' },
+      { label: 'Group', rows: groupInfo, value: 'group' },
+      { label: 'Name', rows: nameInfo, value: 'name' },
+      { label: 'Asset', rows: assetInfo, value: 'asset' },
+      { label: 'Poll', rows: pollInfo, value: 'poll' },
+    ];
+    const nonAllFilters = filters.filter((filter) => filter.value !== 'all');
+    const isAllFiltersSelected =
+      selectedTransactionFilters.includes('all') ||
+      selectedTransactionFilters.length === nonAllFilters.length;
+    const activeFilterValues = isAllFiltersSelected
+      ? nonAllFilters.map((filter) => filter.value)
+      : selectedTransactionFilters;
+    const selectedFilterLabel = isAllFiltersSelected
+      ? 'All'
+      : activeFilterValues.length === 0
+        ? 'No filters'
+        : activeFilterValues.length === 1
+          ? (filters.find((filter) => filter.value === activeFilterValues[0])
+              ?.label ?? 'Filtered')
+          : `${activeFilterValues.length} filters`;
+    const advancedFilterOpen = Boolean(advancedFilterAnchor);
+    const transactionGridColumns = {
+      xs: '42px minmax(82px, 0.55fr) minmax(120px, 1fr) minmax(120px, 1fr) minmax(95px, 0.72fr) minmax(76px, 0.55fr) minmax(88px, 0.58fr)',
+      xl: '54px minmax(110px, 0.7fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(118px, 0.78fr) minmax(92px, 0.62fr) minmax(112px, 0.66fr)',
+    } as const;
+    const transactionAmountFeeShiftSx = {
+      transform: { xs: 'translateX(-34px)', xl: 'translateX(-44px)' },
+    } as const;
+    const transactionHeaderSx = {
+      color: 'text.secondary',
+      fontSize: 11,
+      fontWeight: 700,
+      letterSpacing: 0,
+      lineHeight: 1,
+      minWidth: 0,
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      textTransform: 'uppercase',
+      whiteSpace: 'nowrap',
+    } as const;
+    const transactionRowHoverSx = {
+      overflow: 'hidden',
+      position: 'relative',
+      '&::before': {
+        background:
+          'linear-gradient(90deg, rgba(24,189,242,0.07), rgba(24,189,242,0.025))',
+        content: '""',
+        inset: 0,
+        opacity: 0,
+        pointerEvents: 'none',
+        position: 'absolute',
+        transition: 'opacity 520ms ease-out',
+        zIndex: 0,
+      },
+      '&:hover::before': {
+        opacity: 1,
+        transitionDuration: '90ms',
+      },
+      '& > *': {
+        position: 'relative',
+        zIndex: 1,
+      },
+    } as const;
 
-  const tableLoader = () => {
-    return (
-      <Box sx={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap' }}>
-        <Box
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            width: '100%',
+    const formatTransactionType = (type?: string) => {
+      if (!type) return '-';
+      return type
+        .toLowerCase()
+        .split('_')
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join(' ');
+    };
+
+    const getTransactionKey = (row: any) =>
+      row?.signature ||
+      [
+        row?.type,
+        row?.timestamp,
+        row?.creatorAddress,
+        row?.recipient,
+        row?.amount,
+        row?.fee,
+      ].join(':');
+    const getFilterRows = (rows: unknown) => (Array.isArray(rows) ? rows : []);
+
+    const selectedRowKeys = new Set<string>();
+    const inactiveRowKeys = new Set<string>();
+
+    filters.forEach((filter) => {
+      if (filter.value === 'all') return;
+      const targetSet = activeFilterValues.includes(filter.value)
+        ? selectedRowKeys
+        : inactiveRowKeys;
+      getFilterRows(filter.rows).forEach((row: any) =>
+        targetSet.add(getTransactionKey(row))
+      );
+    });
+
+    const selectedRows = isAllFiltersSelected
+      ? safeAllInfo
+      : safeAllInfo.filter((row: any) => {
+          const key = getTransactionKey(row);
+          return selectedRowKeys.has(key) && !inactiveRowKeys.has(key);
+        });
+
+    const getDisplayAddress = (row: any, field: 'creator' | 'recipient') => {
+      if (field === 'creator') {
+        return row?.creatorAddress || row?.sender || row?.owner || '-';
+      }
+
+      return row?.recipient || row?.recipientAddress || row?.atAddress || '-';
+    };
+
+    const getRawAddress = (row: any, field: 'creator' | 'recipient') => {
+      if (field === 'creator') {
+        return row?.creatorAddressOriginal || row?.creatorAddress || '';
+      }
+
+      return (
+        row?.recipientOriginal || row?.recipientAddress || row?.recipient || ''
+      );
+    };
+
+    const renderAddressCell = (row: any, field: 'creator' | 'recipient') => {
+      const displayAddress = getDisplayAddress(row, field);
+      const rawAddress = getRawAddress(row, field);
+      const lookupValue = rawAddress || displayAddress;
+      const canLookup = lookupValue && lookupValue !== '-';
+      const isCurrentUser =
+        displayAddress === address ||
+        displayAddress === userName ||
+        rawAddress === address;
+
+      return (
+        <Typography
+          component="span"
+          role={canLookup ? 'button' : undefined}
+          tabIndex={canLookup ? 0 : undefined}
+          title={canLookup ? 'Open in User Search' : undefined}
+          onClick={() => openUserLookup(lookupValue)}
+          onKeyDown={(event) => {
+            if (!canLookup) return;
+            if (event.key === 'Enter' || event.key === ' ') {
+              event.preventDefault();
+              openUserLookup(lookupValue);
+            }
           }}
-        >
-          <CircularProgress />
-        </Box>
-        <Box
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            marginTop: '20px',
-            width: '100%',
+          sx={{
+            color: isCurrentUser ? 'info.main' : 'text.primary',
+            cursor: canLookup ? 'pointer' : 'default',
+            display: 'block',
+            fontSize: 13,
+            fontWeight: isCurrentUser ? 600 : 400,
+            maxWidth: 156,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+            '&:hover': canLookup
+              ? {
+                  color: 'primary.main',
+                  textDecoration: 'underline',
+                  textUnderlineOffset: '3px',
+                }
+              : undefined,
           }}
         >
+          {displayAddress}
+        </Typography>
+      );
+    };
+
+    const renderStatusIcon = (row: any) => {
+      const confirmations =
+        typeof row?.blockHeight === 'number' &&
+        typeof nodeInfo?.height === 'number'
+          ? nodeInfo.height - row.blockHeight
+          : null;
+      const isPending = confirmations == null || confirmations < 3;
+
+      return (
+        <Tooltip
+          placement="top"
+          title={
+            confirmations == null
+              ? 'Pending confirmation'
+              : isPending
+                ? `Pending, ${confirmations} of 3 confirmations`
+                : 'Confirmed'
+          }
+        >
+          {isPending ? (
+            <HistoryToggleOff sx={{ color: 'error.main', fontSize: 16 }} />
+          ) : (
+            <CheckCircleOutline sx={{ color: 'success.main', fontSize: 16 }} />
+          )}
+        </Tooltip>
+      );
+    };
+
+    const renderAmountCell = (row: any) => {
+      const hasAmount = row?.amount !== undefined && row?.amount !== null;
+      if (!hasAmount) {
+        return (
           <Typography
-            variant="h5"
-            sx={{ color: 'primary.main', fontStyle: 'italic', fontWeight: 700 }}
+            sx={{ color: 'text.secondary', fontSize: 13, fontWeight: 400 }}
           >
-            {t('core:message.generic.loading_transactions', {
-              postProcess: 'capitalizeFirstChar',
-            })}
+            -
           </Typography>
-        </Box>
-      </Box>
-    );
-  };
+        );
+      }
 
-  return (
-    <Box sx={{ width: '100%', mt: 2 }}>
-      <Dialog
-        fullScreen
-        open={openQortSend}
-        onClose={handleCloseQortSend}
-        slots={{ transition: Transition }}
-      >
-        <SubmitDialog fullWidth={true} maxWidth="xs" open={openTxQortSubmit}>
-          <DialogContent>
-            <Box
-              sx={{
-                display: 'flex',
-                justifyContent: 'center',
-                flexWrap: 'wrap',
-              }}
-            >
-              <Box
-                style={{
-                  width: '100%',
-                  display: 'flex',
-                  justifyContent: 'center',
-                }}
-              >
-                <CircularProgress color="success" size={64} />
-              </Box>
+      const amount = Math.abs(toFiniteNumber(row.amount));
+      const rawRecipient = getRawAddress(row, 'recipient');
+      const displayRecipient = getDisplayAddress(row, 'recipient');
+      const isIncoming =
+        rawRecipient === address ||
+        displayRecipient === address ||
+        displayRecipient === userName;
+
+      return (
+        <Typography
+          sx={{
+            color: isIncoming ? 'success.main' : 'error.main',
+            fontSize: 13,
+            fontWeight: 500,
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {isIncoming ? '+' : '-'}
+          {formatQortAmount(amount)} QORT
+        </Typography>
+      );
+    };
+
+    const renderTransactionRows = (rows: any[]) => {
+      if (!rows || rows.length === 0) {
+        return (
+          <Box
+            sx={{
+              bgcolor: 'transparent',
+              borderRadius: 1,
+              color: 'text.secondary',
+              px: 2,
+              py: 4,
+              textAlign: 'center',
+            }}
+          >
+            <Typography sx={{ fontWeight: 600 }}>No transactions.</Typography>
+          </Box>
+        );
+      }
+
+      const pagedRows =
+        rowsPerPage > 0
+          ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+          : rows;
+
+      return (
+        <>
+          <Box sx={{ overflowX: { xs: 'auto', lg: 'hidden' } }}>
+            <Box sx={{ minWidth: { xs: 680, lg: 0 }, width: '100%' }}>
               <Box
-                style={{
-                  width: '100%',
-                  display: 'flex',
-                  justifyContent: 'center',
-                  marginTop: '20px',
+                aria-hidden
+                sx={{
+                  alignItems: 'center',
+                  borderBottom: (t) =>
+                    `1px solid ${
+                      t.palette.mode === 'dark'
+                        ? 'rgba(116,158,180,0.15)'
+                        : 'rgba(17,24,39,0.08)'
+                    }`,
+                  display: 'grid',
+                  gap: 1,
+                  gridTemplateColumns: transactionGridColumns,
+                  px: { xs: 1.25, md: 2 },
+                  py: 1.15,
                 }}
               >
                 <Typography
-                  variant="h6"
+                  sx={{ ...transactionHeaderSx, textAlign: 'center' }}
+                >
+                  Status
+                </Typography>
+                <Typography sx={transactionHeaderSx}>Type</Typography>
+                <Typography sx={transactionHeaderSx}>Creator</Typography>
+                <Typography sx={transactionHeaderSx}>Recipient</Typography>
+                <Typography
                   sx={{
-                    color: 'primary.main',
-                    fontStyle: 'italic',
-                    fontWeight: 700,
+                    ...transactionHeaderSx,
+                    ...transactionAmountFeeShiftSx,
+                    textAlign: 'right',
                   }}
                 >
-                  {t('core:message.generic.processing_transaction', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
+                  Amount
+                </Typography>
+                <Typography
+                  sx={{
+                    ...transactionHeaderSx,
+                    ...transactionAmountFeeShiftSx,
+                    textAlign: 'right',
+                  }}
+                >
+                  Fee
                 </Typography>
+                <Typography sx={transactionHeaderSx}>Time</Typography>
+              </Box>
+
+              <Box sx={{ display: 'grid', gap: 0, px: { md: 0.4 }, py: 0.35 }}>
+                {pagedRows.map((row: any, index: Key) => (
+                  <Box
+                    key={row?.signature || index}
+                    sx={{
+                      ...transactionRowHoverSx,
+                      alignItems: 'center',
+                      bgcolor: 'rgba(4, 22, 38, 0.16)',
+                      borderBottom: (t) =>
+                        `1px solid ${
+                          t.palette.mode === 'dark'
+                            ? 'rgba(116,158,180,0.06)'
+                            : 'rgba(17,24,39,0.06)'
+                        }`,
+                      borderRadius: 0.65,
+                      display: 'grid',
+                      gap: 1,
+                      gridTemplateColumns: transactionGridColumns,
+                      minHeight: 46,
+                      px: { xs: 1.25, md: 1.6 },
+                      py: 0.85,
+                      transition:
+                        'background-color 150ms ease, border-color 150ms ease',
+                    }}
+                  >
+                    <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+                      {renderStatusIcon(row)}
+                    </Box>
+                    <Typography
+                      sx={{
+                        color: 'text.secondary',
+                        fontSize: 13,
+                        fontWeight: 400,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {formatTransactionType(row?.type)}
+                    </Typography>
+                    {renderAddressCell(row, 'creator')}
+                    {renderAddressCell(row, 'recipient')}
+                    <Box
+                      sx={{
+                        ...transactionAmountFeeShiftSx,
+                        textAlign: 'right',
+                      }}
+                    >
+                      {renderAmountCell(row)}
+                    </Box>
+                    <Typography
+                      sx={{
+                        ...transactionAmountFeeShiftSx,
+                        color: 'text.secondary',
+                        fontSize: 13,
+                        fontWeight: 400,
+                        textAlign: 'right',
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {row?.fee !== undefined && row?.fee !== null
+                        ? `${formatQortFee(row.fee)} QORT`
+                        : '-'}
+                    </Typography>
+                    <CustomWidthTooltip
+                      placement="top"
+                      title={new Date(row?.timestamp).toLocaleString()}
+                    >
+                      <Typography
+                        sx={{
+                          color: 'text.secondary',
+                          fontSize: 13,
+                          fontWeight: 400,
+                          whiteSpace: 'nowrap',
+                        }}
+                      >
+                        {row?.timestamp ? epochToAgo(row.timestamp) : '-'}
+                      </Typography>
+                    </CustomWidthTooltip>
+                  </Box>
+                ))}
               </Box>
             </Box>
-          </DialogContent>
-        </SubmitDialog>
+          </Box>
+          <TablePagination
+            component="div"
+            labelRowsPerPage={t('core:rows_per_page', {
+              postProcess: 'capitalizeFirstChar',
+            })}
+            rowsPerPageOptions={[5, 10, 25]}
+            count={rows.length}
+            rowsPerPage={rowsPerPage}
+            page={page}
+            slotProps={{
+              select: {
+                MenuProps: {
+                  disableScrollLock: true,
+                },
+              },
+            }}
+            onPageChange={handleChangePage}
+            onRowsPerPageChange={handleChangeRowsPerPage}
+            ActionsComponent={TablePaginationActions}
+            sx={{
+              color: 'text.secondary',
+              mt: 0.5,
+              '& .MuiTablePagination-toolbar': {
+                minHeight: 44,
+                px: 0,
+              },
+              '& .MuiTablePagination-selectLabel, & .MuiTablePagination-displayedRows':
+                {
+                  color: 'text.secondary',
+                  fontSize: 13,
+                },
+            }}
+          />
+        </>
+      );
+    };
+
+    const filterActions = (
+      <>
+        <Button
+          aria-controls={
+            advancedFilterOpen ? 'advanced-filter-menu' : undefined
+          }
+          aria-haspopup="true"
+          aria-expanded={advancedFilterOpen ? 'true' : undefined}
+          endIcon={<ExpandMore sx={{ fontSize: 18 }} />}
+          onClick={handleAdvancedFilterClick}
+          size="small"
+          variant={isAllFiltersSelected ? 'text' : 'outlined'}
+          sx={{
+            borderRadius: 1,
+            color: isAllFiltersSelected ? 'text.secondary' : 'primary.main',
+            fontSize: 13,
+            fontWeight: 700,
+            minHeight: 34,
+            px: 1,
+            whiteSpace: 'nowrap',
+            '& .MuiButton-endIcon': {
+              ml: 0.65,
+            },
+          }}
+        >
+          {isAllFiltersSelected ? 'Advanced filters' : selectedFilterLabel}
+        </Button>
+        <Menu
+          id="advanced-filter-menu"
+          anchorEl={advancedFilterAnchor}
+          anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+          open={advancedFilterOpen}
+          onClose={handleAdvancedFilterClose}
+          transformOrigin={{ horizontal: 'right', vertical: 'top' }}
+          disableScrollLock
+          slotProps={{
+            paper: {
+              sx: {
+                maxWidth: 'calc(100vw - 32px)',
+                mt: 0.5,
+                minWidth: 180,
+                overflowX: 'hidden',
+              },
+            },
+          }}
+        >
+          {filters.map((filter) => (
+            <MenuItem
+              key={filter.value}
+              onClick={() => handleAdvancedFilterSelect(filter.value)}
+              sx={{
+                gap: 2,
+                justifyContent: 'space-between',
+                minWidth: 220,
+              }}
+            >
+              <Typography sx={{ fontWeight: 600 }}>{filter.label}</Typography>
+              <Checkbox
+                checked={
+                  filter.value === 'all'
+                    ? isAllFiltersSelected
+                    : activeFilterValues.includes(filter.value)
+                }
+                edge="end"
+                size="small"
+                tabIndex={-1}
+                sx={{ ml: 'auto', p: 0.25 }}
+              />
+            </MenuItem>
+          ))}
+        </Menu>
+      </>
+    );
+
+    return {
+      actions: filterActions,
+      content: (
+        <Box sx={{ pt: 0.75, width: '100%' }}>
+          {renderTransactionRows(selectedRows)}
+        </Box>
+      ),
+    };
+  };
+
+  const tableLoader = () => {
+    return (
+      <WalletTransactionsLoader
+        label={t('core:message.generic.loading_transactions', {
+          postProcess: 'capitalizeFirstChar',
+        })}
+      />
+    );
+  };
+
+  const qortAddress = address ?? EMPTY_STRING;
+  const qortAddressBookNeedsSync = qortAddressBookSyncStatus === 'dirty';
+  const qortAddressBookNeedsAttention =
+    qortAddressBookNeedsSync || qortAddressBookSyncStatus === 'error';
+  const syncStatusLabel = qortAddressBookSyncing
+    ? 'Syncing...'
+    : qortAddressBookNeedsSync
+      ? 'Sync required'
+      : qortAddressBookSyncStatus === 'error'
+        ? 'Sync failed'
+        : 'Up to date';
+  const syncStatusTooltip = qortAddressBookNeedsSync
+    ? 'Local contacts changed. Sync to publish the latest encrypted address book backup.'
+    : qortAddressBookSyncStatus === 'error'
+      ? 'The last sync did not complete.'
+      : qortAddressBookSyncStatus === 'success' && qortAddressBookLastSync
+        ? `Last sync: ${new Intl.DateTimeFormat(undefined, {
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            month: 'short',
+            year: 'numeric',
+          }).format(new Date(qortAddressBookLastSync))}`
+        : syncStatusLabel;
+  const qortalTableView = qortalTables();
+  const qortSendLabelSx = {
+    color: 'rgba(228,238,248,0.9)',
+    fontSize: { xs: 14.5, md: 15 },
+    fontWeight: 700,
+    lineHeight: 1.2,
+  } as const;
+  const qortSendHelperSx = {
+    color: 'text.secondary',
+    fontSize: { xs: 12.5, md: 13 },
+    fontWeight: 500,
+    lineHeight: 1.45,
+    ml: 1.6,
+    mt: 0.85,
+  } as const;
+  const qortSendFieldSx = {
+    '& .MuiFormHelperText-root': qortSendHelperSx,
+    '& .MuiOutlinedInput-root': {
+      bgcolor: 'rgba(0,8,16,0.2)',
+      borderRadius: 1.35,
+      minHeight: { xs: 54, md: 56 },
+      px: { xs: 1.2, md: 1.35 },
+      transition: 'background-color 160ms ease',
+      '& fieldset': {
+        borderColor: 'rgba(116,158,180,0.15)',
+      },
+      '&:hover fieldset': {
+        borderColor: 'rgba(116,158,180,0.3)',
+      },
+      '&.Mui-focused': {
+        bgcolor: 'rgba(0,8,16,0.2)',
+      },
+      '&.Mui-focused fieldset': {
+        borderColor: 'rgba(24,189,242,0.62)',
+        borderWidth: 1,
+      },
+    },
+    '& .MuiOutlinedInput-input': {
+      color: 'text.primary',
+      fontSize: { xs: 15.5, md: 16 },
+      fontWeight: 500,
+      py: 0,
+      '&::placeholder': {
+        color: 'text.secondary',
+        fontWeight: 400,
+        opacity: 0.58,
+      },
+    },
+  } as const;
+  const qortSendInfoIconSx = {
+    color: 'text.secondary',
+    fontSize: { xs: 14.5, md: 15 },
+    opacity: 0.82,
+  } as const;
+  const qortRecipientInitials =
+    qortRecipientDisplayName
+      .split(' ')
+      .filter(Boolean)
+      .map((part) => part[0])
+      .join('')
+      .slice(0, 2)
+      .toUpperCase() || Coin.QORT[0];
+  const qortRecipientAvatarColor = getAddressBookAvatarColor(
+    `${qortRecipientDisplayName}-${qortRecipient}`
+  );
+  const qortSendConfirming =
+    addressValidating && recipientTouched && qortRecipient !== EMPTY_STRING;
+
+  return (
+    <Box sx={{ width: '100%', mt: 2 }}>
+      <WalletSendDialog
+        open={openQortSend}
+        onClose={handleCloseQortSend}
+        slots={{ transition: Transition }}
+        maxWidth={false}
+        fullWidth
+        disableScrollLock
+        slotProps={{
+          paper: {
+            sx: {
+              backgroundColor: 'rgba(3, 17, 29, 0.985)',
+              backgroundImage:
+                'radial-gradient(circle at 13% 6%, rgba(24,189,242,0.13), transparent 30%), linear-gradient(180deg, rgba(5,24,39,0.99) 0%, rgba(3,13,23,0.995) 100%)',
+              border: '1px solid rgba(91,132,158,0.28)',
+              borderRadius: 2,
+              boxShadow:
+                '0 28px 72px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04)',
+              minHeight: 'min(590px, calc(100dvh - 32px))',
+              width: 'min(592px, calc(100vw - 24px))',
+            },
+          },
+        }}
+      >
+        <SubmitDialog
+          fullWidth={true}
+          maxWidth="xs"
+          open={openTxQortSubmit}
+          disableScrollLock
+        >
+          <DialogContent>
+            <Box
+              sx={{
+                display: 'flex',
+                justifyContent: 'center',
+                flexWrap: 'wrap',
+              }}
+            >
+              <Box
+                style={{
+                  width: '100%',
+                  display: 'flex',
+                  justifyContent: 'center',
+                }}
+              >
+                <CircularProgress color="success" size={64} />
+              </Box>
+              <Box
+                style={{
+                  width: '100%',
+                  display: 'flex',
+                  justifyContent: 'center',
+                  marginTop: '20px',
+                }}
+              >
+                <Typography
+                  variant="h6"
+                  sx={{
+                    color: 'primary.main',
+                    fontStyle: 'italic',
+                    fontWeight: 700,
+                  }}
+                >
+                  {t('core:message.generic.processing_transaction', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
+                </Typography>
+              </Box>
+            </Box>
+          </DialogContent>
+        </SubmitDialog>
         <Snackbar
           anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
           open={openSendQortSuccess}
@@ -3237,18 +4114,48 @@ export default function QortalWallet() {
             })}
           </Alert>
         </Snackbar>
-        <AppBar sx={{ position: 'static' }}>
-          <Toolbar>
+        <AppBar
+          sx={{
+            bgcolor: 'transparent',
+            backgroundColor: 'transparent',
+            backgroundImage: 'none',
+            borderBottom: 'none',
+            boxShadow: 'none',
+            color: 'text.primary',
+            position: 'static',
+          }}
+        >
+          <Toolbar
+            sx={{
+              minHeight: '78px !important',
+              px: { xs: 2.35, md: 2.55 },
+            }}
+          >
             <IconButton
-              edge="start"
               color="inherit"
               onClick={handleCloseQortSend}
               aria-label="close"
+              sx={{
+                color: 'text.secondary',
+                mr: { xs: 1.25, md: 1.45 },
+                p: 0.35,
+                '& svg': { fontSize: 28 },
+                '&:hover': {
+                  bgcolor: 'rgba(116,158,180,0.08)',
+                  color: 'text.primary',
+                },
+              }}
             >
               <Close />
             </IconButton>
             <Avatar
-              sx={{ width: 28, height: 28 }}
+              sx={{
+                bgcolor: 'primary.main',
+                boxShadow: '0 0 20px rgba(24,189,242,0.24)',
+                height: { xs: 34, md: 36 },
+                mr: { xs: 1.65, md: 1.8 },
+                width: { xs: 34, md: 36 },
+              }}
               alt="QORT Logo"
               src={coinLogoQORT}
             />
@@ -3257,13 +4164,12 @@ export default function QortalWallet() {
               noWrap
               component="div"
               sx={{
+                color: 'text.primary',
                 flexGrow: 1,
-                display: {
-                  xs: 'none',
-                  sm: 'block',
-                  paddingLeft: '10px',
-                  paddingTop: '3px',
-                },
+                fontSize: { xs: 18, md: 19 },
+                fontWeight: 700,
+                letterSpacing: 0,
+                lineHeight: 1,
               }}
             >
               {t('core:action.transfer_coin', {
@@ -3274,432 +4180,625 @@ export default function QortalWallet() {
             <Button
               disabled={sendDisabled}
               variant="contained"
-              startIcon={<Send />}
+              startIcon={
+                qortSendConfirming ? (
+                  <CircularProgress color="inherit" size={16} thickness={4.2} />
+                ) : (
+                  <NorthEast />
+                )
+              }
               aria-label="send-qort"
               onClick={sendQortRequest}
               sx={{
-                backgroundcolor: theme.palette.info.main,
+                bgcolor: '#0a9eff',
+                backgroundImage:
+                  'linear-gradient(180deg, rgba(24,174,255,0.98), rgba(4,126,220,0.98))',
+                border: '1px solid rgba(85,205,255,0.32)',
+                borderRadius: 1.4,
+                boxShadow:
+                  '0 10px 26px rgba(3,139,236,0.34), inset 0 1px 0 rgba(255,255,255,0.18)',
                 color: 'white',
-                '&:hover': { backgroundcolor: 'action.hover' },
+                fontSize: { xs: 14, md: 14.5 },
+                fontWeight: 700,
+                justifySelf: 'end',
+                minHeight: { xs: 38, md: 40 },
+                minWidth: qortSendConfirming
+                  ? { xs: 126, md: 134 }
+                  : { xs: 92, md: 98 },
+                px: { xs: 1.65, md: 1.9 },
+                transition:
+                  'min-width 180ms ease, background-color 160ms ease, box-shadow 160ms ease',
+                '& .MuiButton-startIcon svg': {
+                  fontSize: 19,
+                },
+                '&:hover': {
+                  bgcolor: '#16baf2',
+                  boxShadow: '0 18px 44px rgba(24,189,242,0.38)',
+                },
+                '&:disabled': {
+                  bgcolor: qortSendConfirming
+                    ? 'rgba(24,158,255,0.56)'
+                    : 'rgba(116,158,180,0.18)',
+                  backgroundImage: qortSendConfirming
+                    ? 'linear-gradient(180deg, rgba(24,174,255,0.72), rgba(4,126,220,0.72))'
+                    : 'none',
+                  borderColor: qortSendConfirming
+                    ? 'rgba(85,205,255,0.22)'
+                    : 'rgba(116,158,180,0.1)',
+                  boxShadow: qortSendConfirming
+                    ? '0 10px 24px rgba(3,139,236,0.16), inset 0 1px 0 rgba(255,255,255,0.08)'
+                    : 'none',
+                  color: qortSendConfirming
+                    ? 'rgba(255,255,255,0.78)'
+                    : 'rgba(255,255,255,0.44)',
+                },
               }}
             >
-              {t('core:action.send', {
-                postProcess: 'capitalizeAll',
-              })}
+              {qortSendConfirming
+                ? 'Confirming'
+                : t('core:action.send', {
+                    postProcess: 'capitalizeFirstChar',
+                  })}
             </Button>
           </Toolbar>
         </AppBar>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            align="center"
-            gutterBottom
-            sx={{ color: 'primary.main', fontWeight: 700 }}
-          >
-            {t('core:balance_available', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            &nbsp;&nbsp;
-          </Typography>
-          <Typography
-            variant="h5"
-            align="center"
-            gutterBottom
-            sx={{ color: 'text.primary', fontWeight: 700 }}
-          >
-            {isLoadingWalletBalanceQort ? (
-              <Box sx={{ width: '175px' }}>
-                <LinearProgress />
-              </Box>
-            ) : (
-              walletBalanceQort + ' QORT'
-            )}
-          </Typography>
-        </Box>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            align="center"
-            sx={{ color: 'primary.main', fontWeight: 700 }}
-          >
-            {t('core:max_sendable', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            &nbsp;&nbsp;
-          </Typography>
-          <Typography
-            variant="h5"
-            align="center"
-            sx={{ color: 'text.primary', fontWeight: 700 }}
-          >
-            {(walletBalanceQort - qortTxFee).toFixed(DECIMAL_ROUND_UP) + ' QORT'}
-          </Typography>
-          <Box style={{ marginInlineStart: '15px' }}>
-            <Button
-              variant="outlined"
-              size="small"
-              onClick={handleSendMaxQort}
-              style={{ borderRadius: 50 }}
-            >
-              {t('core:action.send_max', {
-                postProcess: 'capitalizeAll',
-              })}
-            </Button>
-          </Box>
-        </Box>
         <Box
           sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'stretch',
-            justifyContent: 'center',
-            gap: 2,
-            mt: 2.5,
-            mx: 'auto',
-            width: '100%',
-            maxWidth: 420,
-            px: { xs: 0, sm: 1 },
-          }}
-        >
-          <NumericFormat
-            decimalScale={8}
-            defaultValue={0}
-            value={qortAmount ?? EMPTY_STRING}
-            allowNegative={false}
-            customInput={TextField as React.ComponentType<any>}
-            valueIsNumericString
-            label={
-              t('core:amount', { postProcess: 'capitalizeAll' }) + '(QORT)'
-            }
-            fullWidth
-            isAllowed={(values) => {
-              const max = maxSendableQortCoin();
-              const { formattedValue, floatValue } = values;
-              return (
-                formattedValue === EMPTY_STRING || (floatValue ?? 0) <= max
-              );
-            }}
-            onValueChange={onAmountChange}
-            onBlur={onAmountBlur}
-            required
-            helperText={
-              amountTouched ? amountError || EMPTY_STRING : EMPTY_STRING
-            } // show only when touched
-            error={amountTouched && !!amountError}
-          />
-
-          <TextField
-            required
-            label={t('core:receiver_address_name', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            id="qort-address"
-            margin="normal"
-            value={qortRecipient}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
-              setQortRecipient(e.target.value.trim());
-              setRecipientTouched(true);
-            }}
-            onBlur={onRecipientBlur}
-            slotProps={{ htmlInput: { maxLength: 34, minLength: 3 } }}
-            fullWidth
-            helperText={
-              recipientTouched
-                ? addressValidating
-                  ? t('core:message.generic.validating', {
-                      postProcess: 'capitalizeFirstChar',
-                    })
-                  : recipientError || EMPTY_STRING
-                : t('core:message.generic.qortal_address', {
-                    postProcess: 'capitalizeFirstChar',
-                  })
-            }
-            error={recipientTouched && !!recipientError}
-          />
-        </Box>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
+            display: 'grid',
+            gap: { xs: 2.85, md: 3.05 },
+            minHeight: { xs: 472, md: 484 },
+            px: { xs: 2.75, md: 3 },
+            pb: { xs: 2.85, md: 3 },
+            pt: { xs: 0.4, md: 0.55 },
           }}
         >
-          <Typography
-            align="center"
-            sx={{ fontWeight: 600, fontSize: '14px', marginTop: '15px' }}
-          >
-            {t('core:message.generic.sending_fee', {
-              quantity: 0.01,
-              coin: Coin.QORT,
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Typography>
-        </Box>
-      </Dialog>
-
-      <AddressBookDialog
-        open={openQortAddressBook}
-        onClose={handleCloseAddressBook}
-        coinType={Coin.QORT}
-        onSelectAddress={handleSelectAddress}
-        prefillData={addressBookPrefill}
-      />
-
-      <WalletCard sx={{ p: { xs: 2, md: 3 }, width: '100%' }}>
-        <Grid container rowSpacing={{ xs: 2, md: 3 }} columnSpacing={2}>
-          <Grid
-            container
-            alignItems="center"
-            columnSpacing={4}
-            rowSpacing={{ xs: 12, md: 0 }}
-          >
-            <Grid
-              container
-              size={12}
-              justifyContent="space-around"
-              alignItems="center"
-              sx={{
-                flexDirection: { xs: 'column', md: 'row' },
-                textAlign: { xs: 'center', md: 'left' },
-                gap: { xs: 3, md: 0 },
-              }}
-            >
-              <Box
-                sx={{
-                  display: 'grid',
-                  alignItems: 'center',
-                  justifyItems: { xs: 'center', md: 'start' },
-                  gap: 1,
-                }}
-              >
+          <Box sx={{ display: 'grid', gap: 0.85 }}>
+            <Typography sx={qortSendLabelSx}>To</Typography>
+            {qortRecipientDisplayName ? (
+              <>
                 <Box
-                  component="img"
-                  alt="QORT Logo"
-                  src={coinLogoQORT}
                   sx={{
-                    width: { xs: 96, sm: 110, md: 120 },
-                    height: { xs: 96, sm: 110, md: 120 },
-                    mr: { md: 1 },
+                    bgcolor: 'rgba(0,8,16,0.18)',
+                    border: '1px solid rgba(116,158,180,0.15)',
+                    borderRadius: 1.55,
+                    display: 'grid',
+                    overflow: 'hidden',
                   }}
-                />
-                <Typography
-                  variant="subtitle2"
-                  sx={{ color: 'text.secondary' }}
-                >
-                  {t('core:message.generic.qortal_wallet', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </Typography>
-              </Box>
-
-              <Grid
-                sx={{
-                  display: 'grid',
-                  gap: { xs: 2, md: 1 },
-                  gridTemplateColumns: {
-                    xs: '1fr',
-                    md: 'minmax(0, 1fr) minmax(0, 0.6fr)',
-                  },
-                  gridTemplateRows: { xs: 'repeat(3, auto)', md: '1fr 1fr' },
-                }}
-              >
-                <Grid
-                  sx={{
-                    gridColumn: { xs: '1', md: '1' },
-                    gridRow: { xs: '1', md: '1' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                  display={'flex'}
-                  alignItems={'center'}
-                  gap={1}
                 >
-                  <Typography
-                    variant="h5"
-                    sx={{ color: 'primary.main', fontWeight: 700 }}
+                  <Box
+                    sx={{
+                      alignItems: 'center',
+                      display: 'grid',
+                      gap: 1.25,
+                      gridTemplateColumns: 'auto minmax(0, 1fr) auto auto',
+                      minHeight: { xs: 70, md: 72 },
+                      px: { xs: 1.65, md: 1.75 },
+                      py: { xs: 0.85, md: 0.95 },
+                    }}
                   >
-                    {t('core:balance', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Typography>
-                  <Typography variant="h5" sx={{ fontWeight: 700 }}>
-                    {isLoadingWalletBalanceQort ? (
-                      <LinearProgress />
-                    ) : (
-                      `${walletBalanceQort} QORT`
-                    )}
-                  </Typography>
-                </Grid>
-
-                <Grid
-                  sx={{
-                    gridColumn: { xs: '1', md: '1' },
-                    gridRow: { xs: '2', md: '2' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                >
-                  <Box alignItems={'center'} display={'flex'} gap={1}>
-                    <Typography
-                      variant="subtitle1"
-                      sx={{ color: 'primary.main', fontWeight: 700 }}
-                    >
-                      {t('core:address', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    </Typography>
-                    <Typography
-                      variant="subtitle1"
+                    <Avatar
                       sx={{
-                        color: 'text.primary',
+                        ...getAddressBookAvatarSx(qortRecipientAvatarColor),
+                        fontSize: { xs: 13, md: 13.5 },
                         fontWeight: 700,
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        width: {
-                          xs: '100%',
-                          sm: '220px',
-                          md: '200px',
-                          lg: '370px',
+                        height: { xs: 42, md: 44 },
+                        width: { xs: 42, md: 44 },
+                      }}
+                    >
+                      {qortRecipientInitials}
+                    </Avatar>
+                    <Box sx={{ display: 'grid', gap: 0.35, minWidth: 0 }}>
+                      <Typography
+                        noWrap
+                        sx={{
+                          color: 'text.primary',
+                          fontSize: { xs: 18, md: 18.5 },
+                          fontWeight: 700,
+                          lineHeight: 1.05,
+                        }}
+                      >
+                        {qortRecipientDisplayName}
+                      </Typography>
+                      <Typography
+                        noWrap
+                        sx={{
+                          color: 'text.secondary',
+                          fontSize: { xs: 13.2, md: 13.6 },
+                          fontWeight: 500,
+                          lineHeight: 1,
+                        }}
+                      >
+                        Qortal user
+                      </Typography>
+                    </Box>
+                    <IconButton
+                      aria-label="Clear recipient"
+                      onClick={handleClearQortRecipient}
+                      sx={{
+                        color: 'text.secondary',
+                        height: { xs: 32, md: 34 },
+                        width: { xs: 32, md: 34 },
+                        '& svg': { fontSize: { xs: 20, md: 21 } },
+                        '&:hover': {
+                          bgcolor: 'rgba(116,158,180,0.08)',
+                          color: 'text.primary',
                         },
                       }}
                     >
-                      {address}
-                    </Typography>
-                    <CustomWidthTooltip
-                      placement="top"
-                      title={t('core:action.copy_address', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
+                      <Close />
+                    </IconButton>
+                    <IconButton
+                      aria-label="Open address book"
+                      onClick={handleOpenAddressBook}
+                      sx={{
+                        border: '1px solid rgba(116,158,180,0.12)',
+                        borderRadius: 1.2,
+                        color: 'primary.main',
+                        height: { xs: 34, md: 36 },
+                        width: { xs: 34, md: 36 },
+                        '&:hover': {
+                          bgcolor: 'rgba(24,189,242,0.08)',
+                          borderColor: 'rgba(24,189,242,0.34)',
+                          color: '#37d0ff',
+                        },
+                      }}
                     >
-                      <IconButton
-                        size="small"
-                        onClick={() => copyToClipboard(address ?? EMPTY_STRING)}
-                      >
-                        <CopyAllTwoTone fontSize="small" />
-                      </IconButton>
-                    </CustomWidthTooltip>
+                      <PersonOutline sx={{ fontSize: { xs: 19, md: 20 } }} />
+                    </IconButton>
                   </Box>
-                </Grid>
-
-                <Grid
-                  alignContent={'center'}
-                  display={'flex'}
-                  justifyContent={'center'}
-                  sx={{
-                    gridColumn: { xs: '1', md: '2' },
-                    gridRow: { xs: '3', md: '1 / span 2' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                >
                   <Box
                     sx={{
                       alignItems: 'center',
-                      aspectRatio: '1 / 1',
-                      bgcolor: '#fff',
-                      border: (t) => `1px solid ${t.palette.divider}`,
-                      borderRadius: 1,
-                      boxShadow: (t) => t.shadows[2],
+                      borderTop: '1px solid rgba(116,158,180,0.115)',
                       display: 'flex',
-                      justifyContent: 'center',
-                      height: '100%',
-                      maxHeight: { xs: 200, md: 150 },
-                      maxWidth: { xs: 200, md: 150 },
-                      p: 0.5,
+                      gap: 0.85,
+                      minHeight: { xs: 40, md: 42 },
+                      minWidth: 0,
+                      px: { xs: 1.65, md: 1.75 },
+                      py: 0.65,
                     }}
                   >
-                    <QRCode
-                      value={address ?? EMPTY_STRING}
-                      size={200}
-                      fgColor="#000000"
-                      bgColor="#ffffff"
-                      level="H"
-                      style={{ width: '100%', height: '100%' }}
-                    />
+                    <Typography
+                      sx={{
+                        color: 'text.secondary',
+                        flexShrink: 0,
+                        fontSize: { xs: 13, md: 13.5 },
+                        fontWeight: 600,
+                      }}
+                    >
+                      Address:
+                    </Typography>
+                    <Typography
+                      noWrap
+                      sx={{
+                        color: 'text.secondary',
+                        fontSize: { xs: 13, md: 13.5 },
+                        fontWeight: 500,
+                        minWidth: 0,
+                      }}
+                    >
+                      {qortRecipient}
+                    </Typography>
                   </Box>
-                </Grid>
-              </Grid>
-            </Grid>
+                </Box>
+                {recipientTouched && recipientError ? (
+                  <Typography
+                    sx={{
+                      ...qortSendHelperSx,
+                      color: 'error.main',
+                    }}
+                  >
+                    {recipientError}
+                  </Typography>
+                ) : null}
+              </>
+            ) : (
+              <TextField
+                required
+                autoComplete="new-password"
+                id="qort-recipient-manual"
+                placeholder="QORT address or name"
+                value={qortRecipient}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                  const input = e.currentTarget;
+                  setQortRecipientDisplayName(EMPTY_STRING);
+                  setQortRecipient(e.target.value.trim());
+                  setRecipientTouched(true);
+                  window.requestAnimationFrame(() => {
+                    if (document.activeElement === input) {
+                      const end = input.value.length;
+                      input.setSelectionRange(end, end);
+                    }
+                  });
+                }}
+                onBlur={onRecipientBlur}
+                onFocus={(e: React.FocusEvent<HTMLInputElement>) => {
+                  const input = e.currentTarget;
+                  window.requestAnimationFrame(() => {
+                    const end = input.value.length;
+                    input.setSelectionRange(end, end);
+                  });
+                }}
+                slotProps={{
+                  htmlInput: {
+                    'aria-label': 'Receiver address or name',
+                    autoCapitalize: 'none',
+                    autoComplete: 'new-password',
+                    autoCorrect: 'off',
+                    minLength: 3,
+                    name: 'qort-recipient-manual-no-autofill',
+                    spellCheck: false,
+                  },
+                  input: {
+                    endAdornment: (
+                      <InputAdornment position="end">
+                        <IconButton
+                          aria-label="Open address book"
+                          onClick={handleOpenAddressBook}
+                          sx={{
+                            border: '1px solid rgba(116,158,180,0.12)',
+                            borderRadius: 1,
+                            color: 'primary.main',
+                            height: { xs: 31, md: 32 },
+                            ml: { xs: 0.8, md: 1 },
+                            width: { xs: 31, md: 32 },
+                            '&:hover': {
+                              bgcolor: 'rgba(24,189,242,0.08)',
+                              borderColor: 'rgba(24,189,242,0.34)',
+                              color: '#37d0ff',
+                            },
+                          }}
+                        >
+                          <PersonOutline
+                            sx={{ fontSize: { xs: 18, md: 19 } }}
+                          />
+                        </IconButton>
+                      </InputAdornment>
+                    ),
+                  },
+                }}
+                fullWidth
+                helperText={
+                  recipientTouched && recipientError
+                    ? recipientError
+                    : undefined
+                }
+                error={recipientTouched && !!recipientError}
+                sx={{
+                  ...qortSendFieldSx,
+                  '& .MuiFormHelperText-root': {
+                    ...qortSendHelperSx,
+                    color:
+                      recipientTouched && recipientError
+                        ? 'error.main'
+                        : 'text.secondary',
+                  },
+                }}
+              />
+            )}
+          </Box>
 
-            <Grid size={12}>
+          <Box sx={{ display: 'grid', gap: 1.05 }}>
+            <Box
+              sx={{
+                alignItems: 'center',
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: 0.9,
+                justifyContent: 'space-between',
+              }}
+            >
+              <Typography sx={qortSendLabelSx}>Amount</Typography>
               <Box
                 sx={{
-                  display: 'flex',
-                  justifyContent: 'center',
                   alignItems: 'center',
-                  gap: 3,
-                  mt: { xs: 1, md: 2 },
-                  flexWrap: 'wrap',
+                  display: 'inline-flex',
+                  gap: 0.75,
+                  minHeight: 26,
                 }}
               >
-                <WalletButtons
-                  variant="contained"
-                  startIcon={<Send style={{ marginBottom: 2 }} />}
-                  aria-label="Transfer"
-                  onClick={handleOpenQortSend}
-                >
-                  {t('core:action.transfer_coin', {
-                    coin: Coin.QORT,
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </WalletButtons>
-
-                <WalletButtons
-                  variant="contained"
-                  startIcon={<ImportContacts style={{ marginBottom: 2 }} />}
-                  aria-label="AddressBook"
-                  onClick={handleOpenAddressBook}
-                >
-                  {t('core:address_book', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </WalletButtons>
-              </Box>
-            </Grid>
-          </Grid>
-
-          <Grid size={12}>
-            <Box sx={{ width: '100%', mt: 3 }}>
-              <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
+                <Tooltip title="Maximum amount available after network fee">
+                  <Box
+                    sx={{
+                      alignItems: 'center',
+                      color: 'text.secondary',
+                      display: 'inline-flex',
+                      gap: 0.45,
+                    }}
+                  >
+                    <InfoOutlined sx={qortSendInfoIconSx} />
+                    <Typography
+                      sx={{
+                        color: 'text.secondary',
+                        fontSize: { xs: 13.2, md: 13.6 },
+                        fontWeight: 500,
+                        lineHeight: 1.2,
+                        whiteSpace: 'nowrap',
+                      }}
+                    >
+                      {isLoadingWalletBalanceQort
+                        ? 'Max sendable loading'
+                        : `Max sendable ${formatQortAmount(maxSendableQortCoin())} QORT`}
+                    </Typography>
+                  </Box>
+                </Tooltip>
                 <Button
-                  size="large"
-                  onClick={handleLoadingRefreshQort}
-                  loading={loadingRefreshQort}
-                  loadingPosition="start"
-                  startIcon={<Refresh style={{ marginBottom: 2 }} />}
                   variant="text"
-                  sx={{ borderRadius: 50 }}
+                  onClick={handleSendMaxQort}
+                  sx={{
+                    color: 'primary.main',
+                    fontSize: { xs: 13.8, md: 14.2 },
+                    fontWeight: 700,
+                    lineHeight: 1,
+                    minHeight: 24,
+                    minWidth: 0,
+                    px: 0.35,
+                    py: 0,
+                    '&:hover': {
+                      bgcolor: 'transparent',
+                      color: '#37d0ff',
+                    },
+                  }}
                 >
-                  <span>
-                    {t('core:transactions', { postProcess: 'capitalizeAll' })}
-                  </span>
+                  Max
                 </Button>
               </Box>
+            </Box>
+            <NumericFormat
+              decimalScale={8}
+              defaultValue={0}
+              value={
+                qortAmount === 0 ? EMPTY_STRING : (qortAmount ?? EMPTY_STRING)
+              }
+              allowNegative={false}
+              customInput={TextField as React.ComponentType<any>}
+              valueIsNumericString
+              placeholder="0.00"
+              fullWidth
+              isAllowed={(values) => {
+                const max = maxSendableQortCoin();
+                const { formattedValue, floatValue } = values;
+                return (
+                  formattedValue === EMPTY_STRING || (floatValue ?? 0) <= max
+                );
+              }}
+              onValueChange={onAmountChange}
+              onBlur={onAmountBlur}
+              required
+              helperText={
+                amountTouched && amountError ? amountError : undefined
+              }
+              error={amountTouched && !!amountError}
+              slotProps={{
+                htmlInput: {
+                  'aria-label': 'QORT amount',
+                },
+                input: {
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <Typography
+                        sx={{
+                          color: 'text.secondary',
+                          fontSize: { xs: 14.5, md: 15 },
+                          fontWeight: 700,
+                          letterSpacing: 0,
+                          lineHeight: 1,
+                        }}
+                      >
+                        QORT
+                      </Typography>
+                    </InputAdornment>
+                  ),
+                },
+              }}
+              sx={{
+                ...qortSendFieldSx,
+                '& .MuiFormHelperText-root': {
+                  ...qortSendHelperSx,
+                  color:
+                    amountTouched && amountError
+                      ? 'error.main'
+                      : 'text.secondary',
+                },
+                '& .MuiOutlinedInput-root': {
+                  ...qortSendFieldSx['& .MuiOutlinedInput-root'],
+                  bgcolor: 'rgba(0,8,16,0.2)',
+                  borderRadius: 1.55,
+                  minHeight: { xs: 54, md: 56 },
+                  px: { xs: 1.45, md: 1.6 },
+                  '& fieldset': {
+                    borderColor:
+                      amountTouched && amountError
+                        ? 'error.main'
+                        : 'rgba(24,158,255,0.9)',
+                    boxShadow:
+                      amountTouched && amountError
+                        ? 'none'
+                        : '0 0 18px rgba(24,158,255,0.18)',
+                  },
+                  '&:hover fieldset': {
+                    borderColor:
+                      amountTouched && amountError
+                        ? 'error.main'
+                        : 'rgba(24,174,255,0.96)',
+                  },
+                },
+                '& .MuiOutlinedInput-input': {
+                  color: 'text.primary',
+                  fontSize: { xs: 23, md: 24 },
+                  fontWeight: 400,
+                  py: 0,
+                  textAlign: 'left',
+                  '&::placeholder': {
+                    color: 'text.secondary',
+                    fontWeight: 400,
+                    opacity: 0.86,
+                  },
+                },
+              }}
+            />
+          </Box>
 
-              {loadingRefreshQort ? (
-                <Box sx={{ width: '100%' }}>{tableLoader()}</Box>
-              ) : (
-                <Box sx={{ width: '100%' }}>{qortalTables()}</Box>
-              )}
+          <Tooltip title="Network fee deducted from the maximum sendable amount">
+            <Box
+              sx={{
+                alignItems: 'center',
+                color: 'text.secondary',
+                display: 'grid',
+                gap: 0.75,
+                gridTemplateColumns: 'auto auto minmax(80px, auto)',
+                justifySelf: 'end',
+                mt: -0.3,
+                opacity: 0.78,
+                px: 0.4,
+              }}
+            >
+              <InfoOutlined sx={qortSendInfoIconSx} />
+              <Typography
+                sx={{
+                  fontSize: { xs: 12.5, md: 13 },
+                  fontWeight: 500,
+                }}
+              >
+                Network fee
+              </Typography>
+              <Typography
+                sx={{
+                  color: 'text.primary',
+                  fontSize: { xs: 14, md: 14.5 },
+                  fontWeight: 700,
+                  textAlign: 'right',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                {formatQortAmount(qortTxFee)} QORT
+              </Typography>
+            </Box>
+          </Tooltip>
+
+          <Box
+            sx={{
+              alignItems: 'flex-start',
+              bgcolor: 'rgba(8, 57, 52, 0.34)',
+              border: '1px solid rgba(34, 227, 138, 0.11)',
+              borderRadius: 1.55,
+              display: 'flex',
+              gap: 1.6,
+              mt: 0.1,
+              px: { xs: 1.7, md: 1.85 },
+              py: { xs: 2.05, md: 2.2 },
+            }}
+          >
+            <ShieldOutlined
+              sx={{ color: 'success.main', fontSize: { xs: 29, md: 31 } }}
+            />
+            <Box sx={{ display: 'grid', gap: 0.35 }}>
+              <Typography
+                sx={{
+                  color: 'text.primary',
+                  fontSize: { xs: 13.5, md: 14 },
+                  fontWeight: 700,
+                  lineHeight: 1.25,
+                }}
+              >
+                Always double-check the address before sending.
+              </Typography>
+              <Typography
+                sx={{
+                  color: 'text.secondary',
+                  fontSize: { xs: 12.8, md: 13.2 },
+                  fontWeight: 400,
+                  lineHeight: 1.35,
+                }}
+              >
+                Transactions on the Qortal network are irreversible.
+              </Typography>
+            </Box>
+          </Box>
+
+          <Box
+            sx={{
+              alignItems: 'center',
+              bgcolor: 'rgba(0,8,16,0.12)',
+              border: '1px solid rgba(116,158,180,0.09)',
+              borderRadius: 1.35,
+              color: 'text.secondary',
+              display: 'flex',
+              gap: 0.75,
+              justifyContent: 'center',
+              minHeight: { xs: 40, md: 42 },
+              mt: -0.1,
+              px: 1.4,
+            }}
+          >
+            <LockOutlined sx={{ fontSize: { xs: 14, md: 15 } }} />
+            <Typography
+              sx={{
+                color: 'text.secondary',
+                fontSize: { xs: 12.5, md: 13 },
+                fontWeight: 600,
+                lineHeight: 1,
+                textAlign: 'center',
+              }}
+            >
+              Secure &bull; Decentralized
+            </Typography>
+          </Box>
+        </Box>
+      </WalletSendDialog>
+
+      <AddressBookDialog
+        open={openQortAddressBook}
+        onClose={handleCloseAddressBook}
+        coinType={Coin.QORT}
+        onSelectAddress={handleSelectAddress}
+        onAddressBookChange={handleQortAddressBookChange}
+        prefillData={addressBookPrefill}
+      />
+
+      <WalletWorkspace
+        address={qortAddress}
+        addressBookRefreshKey={`${openQortAddressBook}-${qortAddressBookEntries.length}-${qortAddressBookSyncStatus}`}
+        balance={walletBalanceQort}
+        balanceDecimals={2}
+        coin="QORT"
+        isBalanceLoading={isLoadingWalletBalanceQort}
+        noAddressLabel={t('core:message.generic.no_address', {
+          postProcess: 'capitalizeFirstChar',
+        })}
+        onAddContact={handleOpenAddressBook}
+        onAddressBookChange={handleQortAddressBookChange}
+        onSelectAddress={handleSelectAddress}
+        onSend={handleOpenQortSend}
+        onToggleReceive={handleToggleReceivePanel}
+        receiveOpen={receivePanelOpen}
+        rightColumnAfter={
+          <WalletSyncCard
+            isSyncing={qortAddressBookSyncing}
+            onSync={handleSyncQortAddressBook}
+            statusLabel={syncStatusLabel}
+            statusTone={qortAddressBookNeedsAttention ? 'error' : 'success'}
+            statusTooltip={syncStatusTooltip}
+          />
+        }
+        transactions={
+          <WalletTransactionsCard
+            actions={qortalTableView.actions}
+            isRefreshing={loadingRefreshQort}
+            onRefresh={handleLoadingRefreshQort}
+          >
+            <Box
+              sx={{
+                alignItems: loadingRefreshQort ? 'center' : undefined,
+                display: loadingRefreshQort ? 'grid' : 'block',
+                minHeight: rowsPerPage === 10 ? { md: 548 } : undefined,
+              }}
+            >
+              {loadingRefreshQort ? tableLoader() : qortalTableView.content}
             </Box>
-          </Grid>
-        </Grid>
-      </WalletCard>
+          </WalletTransactionsCard>
+        }
+      />
     </Box>
   );
 }
diff --git a/src/pages/rvn/index.tsx b/src/pages/rvn/index.tsx
index 470891d..2da4fff 100644
--- a/src/pages/rvn/index.tsx
+++ b/src/pages/rvn/index.tsx
@@ -1,59 +1,27 @@
 import {
   ChangeEvent,
-  Key,
   MouseEvent,
   SyntheticEvent,
   useEffect,
   useState,
 } from 'react';
-import {
-  epochToAgo,
-  timeoutDelay,
-  cropString,
-  copyToClipboard,
-} from '../../common/functions';
+import { timeoutDelay, copyToClipboard } from '../../common/functions';
 import { useTheme } from '@mui/material/styles';
 import {
   Alert,
-  AppBar,
-  Avatar,
   Box,
-  Button,
-  Dialog,
   DialogContent,
-  Grid,
   IconButton,
-  Paper,
-  Slider,
-  Table,
-  TableBody,
-  TableContainer,
-  TableFooter,
-  TableHead,
-  TablePagination,
-  TableRow,
-  TextField,
-  Toolbar,
   Typography,
 } from '@mui/material';
-import { NumericFormat as _NumericFormat } from 'react-number-format';
-const NumericFormat = _NumericFormat as React.FC<React.ComponentProps<typeof _NumericFormat> & Record<string, unknown>>;
-import TableCell from '@mui/material/TableCell';
 import Snackbar from '@mui/material/Snackbar';
 type SnackbarCloseReason = 'timeout' | 'clickaway' | 'escapeKeyDown';
 import CircularProgress from '@mui/material/CircularProgress';
-import LinearProgress from '@mui/material/LinearProgress';
-import QRCode from 'react-qr-code';
 import {
-  Close,
-  CopyAllTwoTone,
   FirstPage,
-  ImportContacts,
   KeyboardArrowLeft,
   KeyboardArrowRight,
   LastPage,
-  Refresh,
-  Send,
 } from '@mui/icons-material';
 import coinLogoRVN from '../../assets/rvn.png';
 import { useTranslation } from 'react-i18next';
@@ -68,17 +36,24 @@ import {
   TIME_SECONDS_4,
 } from '../../common/constants';
 import {
-  CustomWidthTooltip,
   SlideTransition,
-  StyledTableCell,
-  StyledTableRow,
   SubmitDialog,
   Transition,
-  WalletButtons,
-  WalletCard,
+  WalletSendDialog,
 } from '../../styles/page-styles';
 import { Coin } from 'qapp-core';
 import { AddressBookDialog } from '../../components/AddressBook/AddressBookDialog';
+import {
+  WalletExternalTransactionsList,
+  WalletTransactionsLoader,
+  WalletTransactionsCard,
+  WalletWorkspace,
+} from '../../components/WalletWorkspace';
+import {
+  ExternalFeeSlider,
+  ExternalSendForm,
+  sendCoinDialogPaperSx,
+} from '../../components/ExternalSendForm';
 
 interface TablePaginationActionsProps {
   count: number;
@@ -179,8 +154,6 @@ function valueTextRvn(value: number) {
 
 export default function RavencoinWallet() {
   const { t } = useTranslation(['core']);
-  const theme = useTheme();
-
   const [walletInfoRvn, setWalletInfoRvn] = useState<any>({});
   const [walletBalanceRvn, setWalletBalanceRvn] = useState<any>(0);
   const [_isLoadingWalletInfoRvn, setIsLoadingWalletInfoRvn] =
@@ -191,11 +164,13 @@ export default function RavencoinWallet() {
   const [isLoadingRvnTransactions, setIsLoadingRvnTransactions] =
     useState<boolean>(true);
   const [page, setPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(25);
+  const [rowsPerPage, setRowsPerPage] = useState(10);
   const [copyRvnTxHash, setCopyRvnTxHash] = useState(EMPTY_STRING);
   const [openRvnSend, setOpenRvnSend] = useState(false);
   const [rvnAmount, setRvnAmount] = useState<number>(0);
   const [rvnRecipient, setRvnRecipient] = useState(EMPTY_STRING);
+  const [rvnRecipientDisplayName, setRvnRecipientDisplayName] =
+    useState(EMPTY_STRING);
   const [addressFormatError, setAddressFormatError] = useState(false);
   const [rvnFee, setRvnFee] = useState<number>(0);
   const [_walletInfoError, setWalletInfoError] = useState<string | null>(null);
@@ -207,11 +182,13 @@ export default function RavencoinWallet() {
   const [openSendRvnSuccess, setOpenSendRvnSuccess] = useState(false);
   const [openSendRvnError, setOpenSendRvnError] = useState(false);
   const [openRvnAddressBook, setOpenRvnAddressBook] = useState(false);
+  const [receivePanelOpen, setReceivePanelOpen] = useState(false);
 
   const maxSendableRvnCoin = () => {
     // manage the correct round up
-    const value = (walletBalanceRvn - (rvnFee * 1000) / 1e8)
-      .toFixed(DECIMAL_ROUND_UP);
+    const value = (walletBalanceRvn - (rvnFee * 1000) / 1e8).toFixed(
+      DECIMAL_ROUND_UP
+    );
     const [integer, decimal = ''] = value.split('.');
     const truncated = decimal
       .substring(0, DECIMAL_ROUND_UP)
@@ -222,11 +199,6 @@ export default function RavencoinWallet() {
     return truncatedMaxSendableRvnCoin;
   };
 
-  const emptyRows =
-    page > 0
-      ? Math.max(0, (1 + page) * rowsPerPage - transactionsRvn.length)
-      : 0;
-
   const handleOpenAddressBook = () => {
     setOpenRvnAddressBook(true);
   };
@@ -235,8 +207,9 @@ export default function RavencoinWallet() {
     setOpenRvnAddressBook(false);
   };
 
-  const handleSelectAddress = (address: string, _name: string) => {
+  const handleSelectAddress = (address: string, name: string) => {
     setRvnRecipient(address);
+    setRvnRecipientDisplayName(name || EMPTY_STRING);
     setRvnAmount(0);
     setRvnFee(RVN_FEE);
     setOpenRvnAddressBook(false);
@@ -250,6 +223,7 @@ export default function RavencoinWallet() {
   const handleOpenRvnSend = () => {
     setRvnAmount(0);
     setRvnRecipient(EMPTY_STRING);
+    setRvnRecipientDisplayName(EMPTY_STRING);
     setRvnFee(RVN_FEE);
     setOpenRvnSend(true);
     setAddressFormatError(false);
@@ -268,6 +242,7 @@ export default function RavencoinWallet() {
     const pattern = /^(R[1-9A-HJ-NP-Za-km-z]{33})$/;
 
     setRvnRecipient(value);
+    setRvnRecipientDisplayName(EMPTY_STRING);
 
     if (pattern.test(value) || value === EMPTY_STRING) {
       setAddressFormatError(false);
@@ -279,6 +254,7 @@ export default function RavencoinWallet() {
   const handleCloseRvnSend = () => {
     setRvnAmount(0);
     setRvnFee(0);
+    setRvnRecipientDisplayName(EMPTY_STRING);
     setOpenRvnSend(false);
     setAddressFormatError(false);
     setWalletInfoError(null);
@@ -286,6 +262,15 @@ export default function RavencoinWallet() {
     setOpenSendRvnError(false);
   };
 
+  const handleClearRvnRecipient = () => {
+    setRvnRecipient(EMPTY_STRING);
+    setRvnRecipientDisplayName(EMPTY_STRING);
+    setAddressFormatError(false);
+    setWalletInfoError(null);
+    setWalletBalanceError(null);
+    setOpenSendRvnError(false);
+  };
+
   const changeCopyRvnTxHash = async () => {
     setCopyRvnTxHash('Copied');
     await timeoutDelay(TIME_SECONDS_2);
@@ -458,6 +443,7 @@ export default function RavencoinWallet() {
       if (!sendRequest?.error) {
         setRvnAmount(0);
         setRvnRecipient(EMPTY_STRING);
+        setRvnRecipientDisplayName(EMPTY_STRING);
         setRvnFee(RVN_FEE);
         setOpenTxRvnSubmit(false);
         setOpenSendRvnSuccess(true);
@@ -468,6 +454,7 @@ export default function RavencoinWallet() {
     } catch (error) {
       setRvnAmount(0);
       setRvnRecipient(EMPTY_STRING);
+      setRvnRecipientDisplayName(EMPTY_STRING);
       setRvnFee(RVN_FEE);
       setOpenTxRvnSubmit(false);
       setOpenSendRvnError(true);
@@ -480,279 +467,84 @@ export default function RavencoinWallet() {
 
   const tableLoader = () => {
     return (
-      <Box sx={{ display: 'flex', justifyContent: 'center', flexWrap: 'wrap' }}>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-          }}
-        >
-          <CircularProgress />
-        </Box>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            sx={{ color: 'primary.main', fontStyle: 'italic', fontWeight: 700 }}
-          >
-            {t('core:message.generic.loading_transactions', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Typography>
-        </Box>
-      </Box>
+      <WalletTransactionsLoader
+        label={t('core:message.generic.loading_transactions', {
+          postProcess: 'capitalizeFirstChar',
+        })}
+      />
     );
   };
 
-  const transactionsTable = () => {
-    return (
-      <TableContainer component={Paper}>
-        <Table
-          stickyHeader
-          sx={{ width: '100%' }}
-          aria-label="transactions table"
-        >
-          <TableHead>
-            <TableRow>
-              <StyledTableCell align="left">
-                {t('core:sender', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:receiver', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:transaction_hash', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:total_amount', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:fee.fee', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-              <StyledTableCell align="left">
-                {t('core:time', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-              </StyledTableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {(rowsPerPage > 0
-              ? transactionsRvn.slice(
-                  page * rowsPerPage,
-                  page * rowsPerPage + rowsPerPage
-                )
-              : transactionsRvn
-            ).map(
-              (
-                row: {
-                  inputs: {
-                    address: any;
-                    addressInWallet: boolean;
-                    amount: number;
-                  }[];
-                  outputs: {
-                    address: any;
-                    addressInWallet: boolean;
-                    amount: number;
-                  }[];
-                  txHash: string;
-                  totalAmount: any;
-                  feeAmount: any;
-                  timestamp: number;
-                },
-                k: Key
-              ) => (
-                <StyledTableRow key={k}>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {row.inputs.map((input, index) => (
-                      <Box
-                        key={index}
-                        style={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          color: input.addressInWallet
-                            ? undefined
-                            : theme.palette.info.main,
-                        }}
-                      >
-                        <span style={{ flex: 1, textAlign: 'left' }}>
-                          {input.address}
-                        </span>
-                        <span style={{ flex: 1, textAlign: 'right' }}>
-                          {(Number(input.amount) / 1e8).toFixed(
-                            DECIMAL_ROUND_UP
-                          )}
-                        </span>
-                      </Box>
-                    ))}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {row.outputs.map((output, index) => (
-                      <Box
-                        key={index}
-                        style={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          color: output.addressInWallet
-                            ? undefined
-                            : theme.palette.info.main,
-                        }}
-                      >
-                        <span style={{ flex: 1, textAlign: 'left' }}>
-                          {output.address}
-                        </span>
-                        <span style={{ flex: 1, textAlign: 'right' }}>
-                          {(Number(output.amount) / 1e8).toFixed(
-                            DECIMAL_ROUND_UP
-                          )}
-                        </span>
-                      </Box>
-                    ))}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {cropString(row?.txHash)}
-                    <CustomWidthTooltip
-                      placement="top"
-                      title={
-                        copyRvnTxHash
-                          ? copyRvnTxHash
-                          : t('core:action.copy_hash', {
-                              hash: row?.txHash,
-                              postProcess: 'capitalizeFirstChar',
-                            })
-                      }
-                    >
-                      <IconButton
-                        aria-label="copy"
-                        size="small"
-                        onClick={() => {
-                          copyToClipboard(row?.txHash);
-                          changeCopyRvnTxHash();
-                        }}
-                      >
-                        <CopyAllTwoTone fontSize="small" />
-                      </IconButton>
-                    </CustomWidthTooltip>
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    {row?.totalAmount > 0 ? (
-                      <Box style={{ color: theme.palette.success.main }}>
-                        +
-                        {(Number(row?.totalAmount) / 1e8).toFixed(
-                          DECIMAL_ROUND_UP
-                        )}
-                      </Box>
-                    ) : (
-                      <Box style={{ color: theme.palette.error.main }}>
-                        {(Number(row?.totalAmount) / 1e8).toFixed(
-                          DECIMAL_ROUND_UP
-                        )}
-                      </Box>
-                    )}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="right">
-                    {row?.totalAmount <= 0 ? (
-                      <Box style={{ color: theme.palette.error.main }}>
-                        -
-                        {(Number(row?.feeAmount) / 1e8).toFixed(
-                          DECIMAL_ROUND_UP
-                        )}
-                      </Box>
-                    ) : (
-                      <Box style={{ color: 'grey' }}>
-                        -
-                        {(Number(row?.feeAmount) / 1e8).toFixed(
-                          DECIMAL_ROUND_UP
-                        )}
-                      </Box>
-                    )}
-                  </StyledTableCell>
-                  <StyledTableCell style={{ width: 'auto' }} align="left">
-                    <CustomWidthTooltip
-                      placement="top"
-                      title={
-                        row?.timestamp
-                          ? new Date(row?.timestamp).toLocaleString()
-                          : t('core:message.generic.waiting_confirmation', {
-                              postProcess: 'capitalizeFirstChar',
-                            })
-                      }
-                    >
-                      <Box>
-                        {row?.timestamp
-                          ? epochToAgo(row?.timestamp)
-                          : t('core:message.generic.unconfirmed_transaction', {
-                              postProcess: 'capitalizeFirstChar',
-                            })}
-                      </Box>
-                    </CustomWidthTooltip>
-                  </StyledTableCell>
-                </StyledTableRow>
-              )
-            )}
-            {emptyRows > 0 && (
-              <TableRow style={{ height: 53 * emptyRows }}>
-                <TableCell colSpan={6} />
-              </TableRow>
-            )}
-          </TableBody>
-          <TableFooter sx={{ width: '100%' }}>
-            <TableRow>
-              <TablePagination
-                labelRowsPerPage={t('core:rows_per_page', {
-                  postProcess: 'capitalizeFirstChar',
-                })}
-                rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
-                colSpan={6}
-                count={transactionsRvn.length}
-                rowsPerPage={rowsPerPage}
-                page={page}
-                slotProps={{
-                  select: {
-                    inputProps: {
-                      'aria-label': 'rows per page',
-                    },
-                    native: true,
-                  },
-                }}
-                onPageChange={handleChangePage}
-                onRowsPerPageChange={handleChangeRowsPerPage}
-                ActionsComponent={TablePaginationActions}
-              />
-            </TableRow>
-          </TableFooter>
-        </Table>
-      </TableContainer>
-    );
-  };
+  const transactionsTable = () => (
+    <WalletExternalTransactionsList
+      ActionsComponent={TablePaginationActions}
+      coin="RVN"
+      copyHashLabel={copyRvnTxHash || undefined}
+      labels={{
+        copyHash: (hash) =>
+          t('core:action.copy_hash', {
+            hash,
+            postProcess: 'capitalizeFirstChar',
+          }),
+        fee: t('core:fee.fee', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        noTransactions: 'No transactions.',
+        receiver: t('core:receiver', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        rowsPerPage: t('core:rows_per_page', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        sender: t('core:sender', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        time: t('core:time', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        totalAmount: t('core:total_amount', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        transactionHash: t('core:transaction_hash', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+        waitingConfirmation: t('core:message.generic.waiting_confirmation', {
+          postProcess: 'capitalizeFirstChar',
+        }),
+      }}
+      onCopyHash={(hash) => {
+        copyToClipboard(hash);
+        changeCopyRvnTxHash();
+      }}
+      onPageChange={handleChangePage}
+      onRowsPerPageChange={handleChangeRowsPerPage}
+      page={page}
+      rows={transactionsRvn}
+      rowsPerPage={rowsPerPage}
+    />
+  );
 
   return (
     <Box sx={{ width: '100%', mt: 2 }}>
-      <Dialog
-        fullScreen
+      <WalletSendDialog
         open={openRvnSend}
         onClose={handleCloseRvnSend}
         slots={{ transition: Transition }}
+        maxWidth={false}
+        fullWidth
+        disableScrollLock
+        slotProps={{
+          paper: {
+            sx: sendCoinDialogPaperSx,
+          },
+        }}
       >
-        <SubmitDialog fullWidth={true} maxWidth="xs" open={openTxRvnSubmit}>
+        <SubmitDialog
+          fullWidth={true}
+          maxWidth="xs"
+          open={openTxRvnSubmit}
+          disableScrollLock
+        >
           <DialogContent>
             <Box
               sx={{
@@ -829,253 +621,53 @@ export default function RavencoinWallet() {
             })}
           </Alert>
         </Snackbar>
-        <AppBar sx={{ position: 'static' }}>
-          <Toolbar>
-            <IconButton
-              edge="start"
-              color="inherit"
-              onClick={handleCloseRvnSend}
-              aria-label="close"
-            >
-              <Close />
-            </IconButton>
-            <Avatar
-              sx={{ width: 28, height: 28 }}
-              alt="RVN Logo"
-              src={coinLogoRVN}
-            />
-            <Typography
-              variant="h6"
-              noWrap
-              component="div"
-              sx={{
-                flexGrow: 1,
-                display: {
-                  xs: 'none',
-                  sm: 'block',
-                  paddingLeft: '10px',
-                  paddingTop: '3px',
-                },
-              }}
-            >
-              {t('core:action.transfer_coin', {
-                coin: Coin.RVN,
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Typography>
-            <Button
-              disabled={disableCanSendRvn()}
-              variant="contained"
-              startIcon={<Send />}
-              aria-label="send-rvn"
-              onClick={sendRvnRequest}
-              sx={{
-                backgroundcolor: 'action.main',
-                color: 'white',
-                '&:hover': { backgroundcolor: 'action.hover' },
-              }}
-            >
-              {t('core:action.send', {
-                postProcess: 'capitalizeAll',
-              })}
-            </Button>
-          </Toolbar>
-        </AppBar>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            align="center"
-            gutterBottom
-            sx={{ color: 'primary.main', fontWeight: 700 }}
-          >
-            {t('core:balance_available', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-          </Typography>
-          <Typography
-            variant="h5"
-            align="center"
-            gutterBottom
-            sx={{ color: 'text.primary', fontWeight: 700 }}
-          >
-            {isLoadingWalletBalanceRvn ? (
-              <Box sx={{ width: '175px' }}>
-                <LinearProgress />
-              </Box>
-            ) : walletBalanceError ? (
-              walletBalanceError
-            ) : (
-              walletBalanceRvn + ' RVN'
-            )}
-          </Typography>
-        </Box>
-        <Box
-          style={{
-            width: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            marginTop: '20px',
-          }}
-        >
-          <Typography
-            variant="h5"
-            align="center"
-            sx={{ color: 'primary.main', fontWeight: 700 }}
-          >
-            {t('core:max_sendable', {
-              postProcess: 'capitalizeAll',
-            })}
-            &nbsp;&nbsp;
-          </Typography>
-          <Typography
-            variant="h5"
-            align="center"
-            sx={{ color: 'text.primary', fontWeight: 700 }}
-          >
-            {(() => {
-              const newMaxRvnAmount = parseFloat(
-                (walletBalanceRvn - (rvnFee * 1000) / 1e8).toFixed(
-                  DECIMAL_ROUND_UP
-                )
-              );
-              if (newMaxRvnAmount < 0) {
-                return Number(0.0) + ' RVN';
-              } else {
-                return newMaxRvnAmount + ' RVN';
-              }
-            })()}
-          </Typography>
-          <Box style={{ marginInlineStart: '15px' }}>
-            <Button
-              variant="outlined"
-              size="small"
-              onClick={handleSendMaxRvn}
-              style={{ borderRadius: 50 }}
-            >
-              {t('core:action.send_max', {
-                postProcess: 'capitalizeAll',
-              })}
-            </Button>
-          </Box>
-        </Box>
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: 'column',
-            alignItems: 'stretch',
-            justifyContent: 'center',
-            gap: 2,
-            mt: 2.5,
-            mx: 'auto',
-            width: '100%',
-            maxWidth: 420,
-            px: { xs: 2, sm: 1 },
-          }}
-        >
-          <NumericFormat
-            decimalScale={8}
-            defaultValue={0}
-            value={rvnAmount}
-            allowNegative={false}
-            customInput={TextField as React.ComponentType<any>}
-            valueIsNumericString
-            label="Amount (RVN)"
-            fullWidth
-            isAllowed={(values) => {
-              const maxRvnCoin = walletBalanceRvn - (rvnFee * 1000) / 1e8;
-              const { formattedValue, floatValue } = values;
-              return (
-                formattedValue === EMPTY_STRING ||
-                (floatValue ?? 0) <= maxRvnCoin
-              );
-            }}
-            onValueChange={(values) => {
-              setRvnAmount(values.floatValue ?? 0);
-            }}
-            required
-          />
-          <TextField
-            required
-            label={t('core:receiver_address', {
-              postProcess: 'capitalizeFirstChar',
-            })}
-            id="rvn-address"
-            margin="normal"
-            value={rvnRecipient}
-            onChange={handleRecipientChange}
-            error={addressFormatError}
-            fullWidth
-            helperText={
-              addressFormatError
-                ? t('core:message.error.ravencoin_address_invalid', {
-                    postProcess: 'capitalizeFirstChar',
-                  })
-                : t('core:message.generic.ravencoin_address', {
-                    postProcess: 'capitalizeFirstChar',
-                  })
-            }
-          />
-        </Box>
-        <Box
-          sx={{
-            alignItems: 'center',
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            mt: 2.5,
-            mx: 'auto',
-            width: '100%',
-            maxWidth: 420,
-            px: { xs: 2, sm: 1 },
-          }}
-        >
-          <Box
-            sx={{
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              flexDirection: 'column',
-              width: '100%',
-            }}
-          >
-            <Typography id="rvn-fee-slider" gutterBottom>
-              {t('core:message.generic.current_fee', {
-                fee: rvnFee,
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Typography>
-            <Slider
-              track={false}
-              step={100}
-              min={1000}
-              max={10000}
-              valueLabelDisplay="auto"
-              aria-labelledby="rvn-fee-slider"
-              getAriaValueText={valueTextRvn}
+        <ExternalSendForm
+          addressError={addressFormatError}
+          addressHelperText={
+            addressFormatError
+              ? t('core:message.error.ravencoin_address_invalid', {
+                  postProcess: 'capitalizeFirstChar',
+                })
+              : t('core:message.generic.ravencoin_address', {
+                  postProcess: 'capitalizeFirstChar',
+                })
+          }
+          addressInputId="rvn-address"
+          amount={rvnAmount}
+          balance={walletBalanceRvn}
+          balanceError={walletBalanceError}
+          coinLogo={coinLogoRVN}
+          feeContent={
+            <ExternalFeeSlider
               defaultValue={1500}
+              fee={rvnFee}
+              getAriaValueText={valueTextRvn}
               marks={rvnMarks}
+              max={10000}
+              min={1000}
               onChange={handleChangeRvnFee}
+              sliderId="rvn-fee-slider"
+              step={100}
             />
-            <Typography
-              align="center"
-              sx={{ fontWeight: 600, fontSize: '14px', marginTop: '15px' }}
-            >
-              {t('core:message.generic.low_fee_transation', {
-                postProcess: 'capitalizeFirstChar',
-              })}
-            </Typography>
-          </Box>
-        </Box>
-      </Dialog>
+          }
+          isBalanceLoading={isLoadingWalletBalanceRvn}
+          maxSendable={maxSendableRvnCoin()}
+          onAmountChange={setRvnAmount}
+          onClearRecipient={handleClearRvnRecipient}
+          onClose={handleCloseRvnSend}
+          onOpenAddressBook={handleOpenAddressBook}
+          onRecipientChange={handleRecipientChange}
+          onSend={sendRvnRequest}
+          onSendMax={handleSendMaxRvn}
+          recipient={rvnRecipient}
+          recipientDisplayName={rvnRecipientDisplayName}
+          recipientSubtitle="RVN address book contact"
+          sendDisabled={disableCanSendRvn()}
+          showAddressBookButton
+          showBalanceMeter
+          symbol="RVN"
+        />
+      </WalletSendDialog>
 
       <AddressBookDialog
         open={openRvnAddressBook}
@@ -1084,241 +676,32 @@ export default function RavencoinWallet() {
         onSelectAddress={handleSelectAddress}
       />
 
-      <WalletCard sx={{ p: { xs: 2, md: 3 }, width: '100%' }}>
-        <Grid container rowSpacing={{ xs: 2, md: 3 }} columnSpacing={2}>
-          <Grid
-            container
-            alignItems="center"
-            columnSpacing={4}
-            rowSpacing={{ xs: 12, md: 0 }}
+      <WalletWorkspace
+        address={walletInfoRvn?.address ?? EMPTY_STRING}
+        addressBookRefreshKey={openRvnAddressBook}
+        balance={walletBalanceRvn}
+        balanceDecimals={8}
+        balanceError={walletBalanceError}
+        coin="RVN"
+        isBalanceLoading={isLoadingWalletBalanceRvn}
+        onAddContact={handleOpenAddressBook}
+        onSelectAddress={handleSelectAddress}
+        onSend={handleOpenRvnSend}
+        onToggleReceive={() => setReceivePanelOpen((prev) => !prev)}
+        receiveOpen={receivePanelOpen}
+        transactions={
+          <WalletTransactionsCard
+            isRefreshing={loadingRefreshRvn}
+            onRefresh={handleLoadingRefreshRvn}
           >
-            <Grid
-              container
-              size={12}
-              justifyContent="space-around"
-              alignItems="center"
-              sx={{
-                flexDirection: { xs: 'column', md: 'row' },
-                textAlign: { xs: 'center', md: 'left' },
-                gap: { xs: 3, md: 0 },
-              }}
-            >
-              <Box sx={{ display: 'grid', alignItems: 'center' }}>
-                <Box
-                  component="img"
-                  alt="RVN Logo"
-                  src={coinLogoRVN}
-                  sx={{
-                    width: { xs: 96, sm: 110, md: 120 },
-                    height: { xs: 96, sm: 110, md: 120 },
-                    mr: { md: 1 },
-                  }}
-                />
-                <Typography
-                  variant="subtitle2"
-                  sx={{ color: 'text.secondary' }}
-                >
-                  {t('core:message.generic.ravencoin_wallet', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </Typography>
-              </Box>
-
-              <Grid
-                sx={{
-                  display: 'grid',
-                  gap: { xs: 2, md: 1 },
-                  gridTemplateColumns: {
-                    xs: '1fr',
-                    md: 'minmax(0, 1fr) minmax(0, 0.6fr)',
-                  },
-                  gridTemplateRows: { xs: 'repeat(3, auto)', md: '1fr 1fr' },
-                }}
-              >
-                <Grid
-                  sx={{
-                    gridColumn: { xs: '1', md: '1' },
-                    gridRow: { xs: '1', md: '1' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                  display={'flex'}
-                  alignItems={'center'}
-                  gap={1}
-                >
-                  <Typography
-                    variant="h5"
-                    sx={{ color: 'primary.main', fontWeight: 700 }}
-                  >
-                    {t('core:balance', {
-                      postProcess: 'capitalizeFirstChar',
-                    })}
-                  </Typography>
-                  <Typography variant="h5" sx={{ fontWeight: 700 }}>
-                    {walletBalanceRvn ? (
-                      `${walletBalanceRvn} RVN`
-                    ) : isLoadingWalletBalanceRvn ? (
-                      <LinearProgress />
-                    ) : undefined}
-                  </Typography>
-                </Grid>
-
-                <Grid
-                  sx={{
-                    gridColumn: { xs: '1', md: '1' },
-                    gridRow: { xs: '2', md: '2' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                >
-                  <Box display={'flex'} alignItems={'center'} gap={1}>
-                    <Typography
-                      variant="subtitle1"
-                      sx={{ color: 'primary.main', fontWeight: 700 }}
-                    >
-                      {t('core:address', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    </Typography>
-                    <Typography
-                      variant="subtitle1"
-                      sx={{
-                        color: 'text.primary',
-                        fontWeight: 700,
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                        width: {
-                          xs: '100%',
-                          sm: '220px',
-                          md: '200px',
-                          lg: '370px',
-                        },
-                      }}
-                    >
-                      {walletInfoRvn?.address}
-                    </Typography>
-                    <CustomWidthTooltip
-                      placement="top"
-                      title={t('core:action.copy_address', {
-                        postProcess: 'capitalizeFirstChar',
-                      })}
-                    >
-                      <IconButton
-                        size="small"
-                        onClick={() =>
-                          copyToClipboard(
-                            walletInfoRvn?.address ?? EMPTY_STRING
-                          )
-                        }
-                      >
-                        <CopyAllTwoTone fontSize="small" />
-                      </IconButton>
-                    </CustomWidthTooltip>
-                  </Box>
-                </Grid>
-
-                <Grid
-                  alignContent={'center'}
-                  display={'flex'}
-                  justifyContent={'center'}
-                  sx={{
-                    gridColumn: { xs: '1', md: '2' },
-                    gridRow: { xs: '3', md: '1 / span 2' },
-                    p: { xs: 1.5, md: 2 },
-                  }}
-                >
-                  <Box
-                    sx={{
-                      alignItems: 'center',
-                      aspectRatio: '1 / 1',
-                      bgcolor: '#fff',
-                      border: (t) => `1px solid ${t.palette.divider}`,
-                      borderRadius: 1,
-                      boxShadow: (t) => t.shadows[2],
-                      display: 'flex',
-                      height: '100%',
-                      justifyContent: 'center',
-                      maxHeight: { xs: 200, md: 150 },
-                      maxWidth: { xs: 200, md: 150 },
-                      p: 0.5,
-                    }}
-                  >
-                    <QRCode
-                      value={walletInfoRvn?.address ?? EMPTY_STRING}
-                      size={200}
-                      fgColor="#000000"
-                      bgColor="#ffffff"
-                      level="H"
-                      style={{ width: '100%', height: '100%' }}
-                    />
-                  </Box>
-                </Grid>
-              </Grid>
-            </Grid>
-
-            <Grid size={12}>
-              <Box
-                sx={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'center',
-                  gap: 3,
-                  mt: { xs: 1, md: 2 },
-                  flexWrap: 'wrap',
-                }}
-              >
-                <WalletButtons
-                  variant="contained"
-                  startIcon={<Send style={{ marginBottom: 2 }} />}
-                  aria-label="Transfer"
-                  onClick={handleOpenRvnSend}
-                >
-                  {t('core:action.transfer_coin', {
-                    coin: Coin.RVN,
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </WalletButtons>
-
-                <WalletButtons
-                  variant="contained"
-                  startIcon={<ImportContacts style={{ marginBottom: 2 }} />}
-                  aria-label="AddressBook"
-                  onClick={handleOpenAddressBook}
-                >
-                  {t('core:address_book', {
-                    postProcess: 'capitalizeFirstChar',
-                  })}
-                </WalletButtons>
-              </Box>
-            </Grid>
-          </Grid>
-
-          <Grid size={12}>
-            <Box sx={{ width: '100%', mt: 3 }}>
-              <Box sx={{ display: 'flex', justifyContent: 'center', mb: 2 }}>
-                <Button
-                  size="large"
-                  onClick={handleLoadingRefreshRvn}
-                  loading={loadingRefreshRvn}
-                  loadingPosition="start"
-                  startIcon={<Refresh style={{ marginBottom: 2 }} />}
-                  variant="text"
-                  sx={{ borderRadius: 50 }}
-                >
-                  <span>
-                    {t('core:transactions', { postProcess: 'capitalizeAll' })}
-                  </span>
-                </Button>
-              </Box>
-
-              {isLoadingRvnTransactions ? (
-                <Box sx={{ width: '100%' }}>{tableLoader()}</Box>
-              ) : (
-                <Box sx={{ width: '100%' }}>{transactionsTable()}</Box>
-              )}
-            </Box>
-          </Grid>
-        </Grid>
-      </WalletCard>
+            {isLoadingRvnTransactions || loadingRefreshRvn ? (
+              tableLoader()
+            ) : (
+              <Box sx={{ width: '100%' }}>{transactionsTable()}</Box>
+            )}
+          </WalletTransactionsCard>
+        }
+      />
     </Box>
   );
 }
diff --git a/src/styles/page-styles.tsx b/src/styles/page-styles.tsx
index 15d88ba..a923e3d 100644
--- a/src/styles/page-styles.tsx
+++ b/src/styles/page-styles.tsx
@@ -13,30 +13,42 @@ import {
 import type { Theme } from '@mui/material/styles';
 import { ComponentProps, forwardRef, Ref } from 'react';
 
+export const FAST_DIALOG_TRANSITION_MS = {
+  enter: 150,
+  exit: 90,
+} as const;
+
 export const Transition = forwardRef(function Transition(
   props: ComponentProps<typeof Slide>,
   ref: Ref<unknown>
 ) {
-  return <Slide direction="up" ref={ref} {...props} />;
+  const { timeout = FAST_DIALOG_TRANSITION_MS, ...slideProps } = props;
+  return (
+    <Slide
+      ref={ref}
+      timeout={timeout}
+      {...slideProps}
+      direction="up"
+    />
+  );
 });
 
 export function SlideTransition(props: ComponentProps<typeof Slide>) {
-  return <Slide {...props} direction="up" />;
+  const { timeout = FAST_DIALOG_TRANSITION_MS, ...slideProps } = props;
+  return (
+    <Slide
+      timeout={timeout}
+      {...slideProps}
+      direction="up"
+    />
+  );
 }
 
 export const DialogGeneral = styled(Dialog)(({ theme }: { theme: Theme }) => ({
-  '& .MuiDialogContent-root': {
-    padding: theme.spacing(2),
-  },
-  '& .MuiDialogActions-root': {
-    padding: theme.spacing(1),
-  },
-  '& .MuiDialog-paper': {
-    borderRadius: '15px',
+  '& .MuiBackdrop-root': {
+    backdropFilter: 'blur(8px)',
+    backgroundColor: 'rgba(0, 7, 12, 0.68)',
   },
-}));
-
-export const LightwalletDialog = styled(Dialog)(({ theme }: { theme: Theme }) => ({
   '& .MuiDialogContent-root': {
     padding: theme.spacing(2),
   },
@@ -44,10 +56,76 @@ export const LightwalletDialog = styled(Dialog)(({ theme }: { theme: Theme }) =>
     padding: theme.spacing(1),
   },
   '& .MuiDialog-paper': {
-    borderRadius: '15px',
+    backgroundColor:
+      theme.palette.mode === 'dark'
+        ? 'rgba(4, 18, 31, 0.98)'
+        : theme.palette.background.paper,
+    border:
+      theme.palette.mode === 'dark'
+        ? `1px solid ${theme.palette.divider}`
+        : undefined,
+    borderRadius: 8,
+    boxShadow:
+      theme.palette.mode === 'dark'
+        ? '0 28px 72px rgba(0, 0, 0, 0.46)'
+        : undefined,
   },
 }));
 
+export const WalletSendDialog = styled(Dialog)(
+  ({ theme }: { theme: Theme }) => ({
+    '& .MuiBackdrop-root': {
+      backdropFilter: 'blur(8px)',
+      backgroundColor: 'rgba(0, 7, 12, 0.68)',
+    },
+    '& .MuiDialog-paper': {
+      backgroundColor: 'rgba(4, 18, 31, 0.98)',
+      backgroundImage:
+        'radial-gradient(circle at 18% 0%, rgba(24, 189, 242, 0.1), transparent 36%), linear-gradient(180deg, rgba(7, 27, 42, 0.98) 0%, rgba(4, 13, 23, 0.99) 100%)',
+      border: `1px solid ${theme.palette.divider}`,
+      borderRadius: 8,
+      boxShadow:
+        '0 28px 72px rgba(0, 0, 0, 0.46), inset 0 1px 0 rgba(255,255,255,0.04)',
+      maxHeight: 'calc(100dvh - 48px)',
+      overflowX: 'hidden',
+    },
+    '& .MuiAppBar-root': {
+      backgroundColor: 'transparent',
+      backgroundImage: 'none',
+      borderBottom: 'none',
+      boxShadow: 'none',
+    },
+    '& .MuiToolbar-root': {
+      gap: theme.spacing(1),
+      minHeight: 56,
+    },
+    '& .MuiButton-outlined': {
+      backgroundColor: 'rgba(116, 158, 180, 0.055)',
+      borderColor: 'rgba(116, 158, 180, 0.2)',
+      color: theme.palette.text.secondary,
+      '&:hover': {
+        backgroundColor: 'rgba(116, 158, 180, 0.1)',
+        borderColor: 'rgba(116, 158, 180, 0.36)',
+        color: theme.palette.text.primary,
+      },
+    },
+  })
+);
+
+export const LightwalletDialog = styled(Dialog)(
+  ({ theme }: { theme: Theme }) => ({
+    '& .MuiDialogContent-root': {
+      padding: theme.spacing(2),
+    },
+    '& .MuiDialogActions-root': {
+      padding: theme.spacing(1),
+    },
+    '& .MuiDialog-paper': {
+      borderRadius: 8,
+    },
+  })
+);
+
 export const SubmitDialog = styled(Dialog)(({ theme }: { theme: Theme }) => ({
   '& .MuiDialogContent-root': {
     padding: theme.spacing(2),
@@ -56,7 +134,7 @@ export const SubmitDialog = styled(Dialog)(({ theme }: { theme: Theme }) => ({
     padding: theme.spacing(1),
   },
   '& .MuiDialog-paper': {
-    borderRadius: '15px',
+    borderRadius: 8,
   },
 }));
 
@@ -70,49 +148,91 @@ export const CustomWidthTooltip = styled(
   },
 });
 
-export const WalletCard = styled(Card)({
+export const WalletCard = styled(Card)(({ theme }: { theme: Theme }) => ({
+  backgroundColor:
+    theme.palette.mode === 'dark' ? '#0E2431' : 'rgba(255,255,255,0.96)',
+  backgroundImage:
+    theme.palette.mode === 'dark'
+      ? 'none'
+      : 'linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(248,250,252,0.98) 100%)',
+  border: `1px solid ${
+    theme.palette.mode === 'dark'
+      ? 'rgba(116, 158, 180, 0.16)'
+      : 'rgba(17,24,39,0.08)'
+  }`,
+  borderRadius: 8,
+  boxShadow:
+    theme.palette.mode === 'dark'
+      ? 'inset 0 1px 0 rgba(255,255,255,0.025)'
+      : '0 14px 38px rgba(16, 24, 40, 0.06)',
+  margin: '0 auto',
   maxWidth: '100%',
-  margin: '20px, auto',
-  padding: '24px',
-  borderRadius: 16,
-  boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)',
-});
+}));
 
 export const WalletButtons = styled(Button)(({ theme }: { theme: Theme }) => ({
+  background:
+    theme.palette.mode === 'dark'
+      ? 'linear-gradient(180deg, #1baeed 0%, #0876d3 100%)'
+      : undefined,
+  borderRadius: 8,
+  boxShadow:
+    theme.palette.mode === 'dark'
+      ? '0 12px 28px rgba(5, 139, 211, 0.22)'
+      : undefined,
+  color: theme.palette.primary.contrastText,
+  minHeight: 42,
+  paddingInline: theme.spacing(2),
   width: 'auto',
-  backgroundColor: '#05a2e4',
-  color: 'white',
-  padding: 'auto',
   '&:hover': {
-    backgroundColor: '#02648d',
+    background:
+      theme.palette.mode === 'dark'
+        ? 'linear-gradient(180deg, #2ec4ff 0%, #0d86e2 100%)'
+        : undefined,
+    backgroundColor: theme.palette.primary.dark,
   },
   [theme.breakpoints.down('sm')]: {
     width: '100%',
   },
 }));
 
-export const StyledTableCell = styled(TableCell)(({ theme }: { theme: Theme }) => ({
-  [`&.${tableCellClasses.head}`]: {
-    backgroundColor: '#02648d',
-    color: theme.palette.common.white,
-    fontSize: 14,
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-  },
-  [`&.${tableCellClasses.body}`]: {
-    fontSize: 13,
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-  },
-}));
+export const StyledTableCell = styled(TableCell)(
+  ({ theme }: { theme: Theme }) => ({
+    [`&.${tableCellClasses.head}`]: {
+      backgroundColor:
+        theme.palette.mode === 'dark'
+          ? 'rgba(255,255,255,0.025)'
+          : 'rgba(17,24,39,0.035)',
+      color: theme.palette.text.secondary,
+      fontSize: 12,
+      fontWeight: 700,
+      borderBottom: `1px solid ${theme.palette.divider}`,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      textTransform: 'uppercase',
+    },
+    [`&.${tableCellClasses.body}`]: {
+      borderBottom: `1px solid ${theme.palette.divider}`,
+      fontSize: 13,
+      fontWeight: 500,
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    },
+  })
+);
 
-export const StyledTableRow = styled(TableRow)(({ theme }: { theme: Theme }) => ({
-  '&:nth-of-type(odd)': {
-    backgroundColor: theme.palette.action.hover,
-  },
-  '&:last-child td, &:last-child th': {
-    border: 0,
-  },
-}));
+export const StyledTableRow = styled(TableRow)(
+  ({ theme }: { theme: Theme }) => ({
+    backgroundColor: 'transparent',
+    '&:hover': {
+      backgroundColor:
+        theme.palette.mode === 'dark'
+          ? 'rgba(255,255,255,0.025)'
+          : 'rgba(17,24,39,0.025)',
+    },
+    '&:last-child td, &:last-child th': {
+      border: 0,
+    },
+  })
+);
diff --git a/src/styles/theme/theme.ts b/src/styles/theme/theme.ts
index d99a0ac..262bddf 100644
--- a/src/styles/theme/theme.ts
+++ b/src/styles/theme/theme.ts
@@ -31,14 +31,14 @@ const commonThemeOptions = {
       fontSize: '1rem',
       fontWeight: 400,
       lineHeight: 1.5,
-      letterSpacing: '0.5px',
+      letterSpacing: 0,
     },
 
     body2: {
       fontSize: '0.875rem',
       fontWeight: 400,
       lineHeight: 1.4,
-      letterSpacing: '0.2px',
+      letterSpacing: 0,
     },
   },
   spacing: 8,
@@ -56,27 +56,73 @@ const commonThemeOptions = {
   },
   palette: {
     info: {
-      main: '#05a2e4',
-      hover: '#02648d',
+      main: '#1bb7f0',
     },
     success: {
-      main: '#66bb6a',
+      main: '#27e18a',
     },
     error: {
-      main: '#f44336',
+      main: '#ff5f66',
     },
   },
-  MuiDialog: {
-    styleOverrides: {
-      paper: {
-        backgroundImage: 'none',
+  components: {
+    MuiButton: {
+      defaultProps: {
+        disableElevation: true,
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          fontWeight: 600,
+          letterSpacing: 0,
+          textTransform: 'none' as const,
+        },
       },
     },
-  },
-  MuiPopover: {
-    styleOverrides: {
-      paper: {
-        backgroundImage: 'none',
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          borderRadius: 6,
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          backgroundImage: 'none',
+        },
+      },
+    },
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          backgroundImage: 'none',
+          borderRadius: 8,
+        },
+      },
+    },
+    MuiDrawer: {
+      styleOverrides: {
+        paper: {
+          backgroundImage: 'none',
+        },
+      },
+    },
+    MuiPopover: {
+      styleOverrides: {
+        paper: {
+          backgroundImage: 'none',
+        },
+      },
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          fontWeight: 600,
+          letterSpacing: 0,
+          minHeight: 44,
+          textTransform: 'none' as const,
+        },
       },
     },
   },
@@ -87,20 +133,30 @@ const lightTheme = createTheme({
   palette: {
     mode: 'light',
     primary: {
-      main: 'rgb(63, 81, 181)',
-      dark: 'rgb(113, 198, 212)',
-      light: 'rgb(180, 200, 235)',
+      main: '#0b8fd3',
+      dark: '#0871af',
+      light: '#d8f4ff',
+      contrastText: '#ffffff',
     },
     secondary: {
-      main: 'rgba(194, 222, 236, 1)',
+      main: '#f2b84b',
+    },
+    info: {
+      main: '#0b8fd3',
+    },
+    success: {
+      main: '#2f9e44',
+    },
+    error: {
+      main: '#dc2626',
     },
     background: {
-      default: 'rgba(250, 250, 250, 1)',
-      paper: 'rgb(220, 220, 220)', // darker card background
+      default: '#f5f7f8',
+      paper: '#ffffff',
     },
     text: {
-      primary: 'rgba(0, 0, 0, 0.87)', // 87% black (slightly softened)
-      secondary: 'rgba(0, 0, 0, 0.6)', // 60% black
+      primary: '#111827',
+      secondary: '#667085',
     },
   },
 });
@@ -110,20 +166,30 @@ const darkTheme = createTheme({
   palette: {
     mode: 'dark',
     primary: {
-      main: 'rgb(100, 155, 240)',
-      dark: 'rgb(45, 92, 201)',
-      light: 'rgb(130, 185, 255)',
+      main: '#18bdf2',
+      dark: '#0e82d8',
+      light: '#7adfff',
+      contrastText: '#ffffff',
     },
     secondary: {
-      main: 'rgb(69, 173, 255)',
+      main: '#f4c76b',
+    },
+    info: {
+      main: '#18bdf2',
+    },
+    success: {
+      main: '#22e38a',
+    },
+    error: {
+      main: '#ff5f66',
     },
     background: {
-      default: 'rgb(49, 51, 56)',
-      paper: 'rgb(62, 64, 68)',
+      default: '#07141C',
+      paper: '#0e1622',
     },
     text: {
-      primary: 'rgb(255, 255, 255)',
-      secondary: 'rgb(179, 179, 179)',
+      primary: '#f4f8fb',
+      secondary: '#9dafba',
     },
   },
 });
diff --git a/src/utils/Types.tsx b/src/utils/Types.tsx
index caeb53f..3aa577a 100644
--- a/src/utils/Types.tsx
+++ b/src/utils/Types.tsx
@@ -68,4 +68,7 @@ export interface AddressBookEntry {
     coinType: Coin;                // e.g., 'BTC', 'DOGE', 'LTC'
     createdAt: number;             // Unix timestamp
     updatedAt?: number;            // Unix timestamp (optional)
+    favorite?: boolean;
+    favoriteAt?: number;
+    sortOrder?: number;
 }
diff --git a/src/utils/__tests__/addressBookQDN.test.ts b/src/utils/__tests__/addressBookQDN.test.ts
index 98788a5..0edd78c 100644
--- a/src/utils/__tests__/addressBookQDN.test.ts
+++ b/src/utils/__tests__/addressBookQDN.test.ts
@@ -1,5 +1,9 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import { syncAllAddressBooksOnStartup } from '../addressBookQDN';
+import { publishToQDN, syncAllAddressBooksOnStartup } from '../addressBookQDN';
+import {
+  createAddressBookSyncSignature,
+  setAddressBookAccountScope,
+} from '../addressBookStorage';
 import type { AddressBookEntry } from '../Types';
 
 // Override the global qapp-core mock (from setup.ts) to include the functions
@@ -56,6 +60,9 @@ const ENTRY_DGB: AddressBookEntry = {
 // ---------------------------------------------------------------------------
 
 const STORAGE_KEY = 'q-wallets-addressbook-QORT';
+const SYNC_REQUIRED_KEY = 'q-wallets-addressbook-sync-required-QORT';
+const SYNC_BASELINE_KEY = 'q-wallets-addressbook-sync-baseline-QORT';
+const PUBLISHED_HASH_KEY = 'q-wallets-addressbook-published-QORT';
 
 function setLocalStorage(
   entries: AddressBookEntry[],
@@ -73,6 +80,8 @@ function getStoredData(coinType = 'QORT') {
   return raw ? JSON.parse(raw) : null;
 }
 
+const isSyncRequired = () => localStorage.getItem(SYNC_REQUIRED_KEY) === 'true';
+
 // ---------------------------------------------------------------------------
 // Test suite
 // ---------------------------------------------------------------------------
@@ -85,6 +94,7 @@ describe('syncAllAddressBooksOnStartup', () => {
 
   beforeEach(() => {
     localStorage.clear();
+    setAddressBookAccountScope(null);
     vi.clearAllMocks();
     qdnDataForQort = null;
 
@@ -96,10 +106,7 @@ describe('syncAllAddressBooksOnStartup', () => {
 
         case 'FETCH_QDN_RESOURCE':
           // Return mock encrypted data only when QDN data has been set for QORT.
-          if (
-            request.identifier === STORAGE_KEY &&
-            qdnDataForQort !== null
-          ) {
+          if (request.identifier === STORAGE_KEY && qdnDataForQort !== null) {
             return 'mock-encrypted-data';
           }
           // Simulate "resource not found" for every other coin / unset QORT.
@@ -132,10 +139,27 @@ describe('syncAllAddressBooksOnStartup', () => {
   const wasQortPublished = () =>
     mockQortalRequest.mock.calls.some(
       ([req]) =>
-        req.action === 'PUBLISH_QDN_RESOURCE' &&
-        req.identifier === STORAGE_KEY
+        req.action === 'PUBLISH_QDN_RESOURCE' && req.identifier === STORAGE_KEY
     );
 
+  describe('publishToQDN', () => {
+    it('publishes only when explicitly called', async () => {
+      const publishedAt = await publishToQDN('QORT', [ENTRY_ALICE], 'TestUser');
+
+      expect(publishedAt).toEqual(expect.any(Number));
+      expect(wasQortPublished()).toBe(true);
+    });
+
+    it('records the published hash and clears the sync-required marker', async () => {
+      localStorage.setItem(SYNC_REQUIRED_KEY, 'true');
+
+      await publishToQDN('QORT', [ENTRY_ALICE], 'TestUser');
+
+      expect(localStorage.getItem(PUBLISHED_HASH_KEY)).toBeTruthy();
+      expect(isSyncRequired()).toBe(false);
+    });
+  });
+
   // -------------------------------------------------------------------------
   // BUG FIX: skip publish when timestamps diverge but content is unchanged
   // -------------------------------------------------------------------------
@@ -186,32 +210,47 @@ describe('syncAllAddressBooksOnStartup', () => {
   });
 
   // -------------------------------------------------------------------------
-  // BUG FIX: publish AND sync local timestamp when content genuinely differs
+  // BUG FIX: startup never publishes when content genuinely differs
   // -------------------------------------------------------------------------
 
-  describe('BUG FIX — local timestamp newer than QDN, different content → publish', () => {
-    it('publishes when local has entries that are not present in QDN', async () => {
+  describe('BUG FIX — local timestamp newer than QDN, different content → manual sync required', () => {
+    it('does not publish when local has entries that are not present in QDN', async () => {
       setLocalStorage([ENTRY_BOB], 3000);
       qdnDataForQort = { entries: [ENTRY_ALICE], lastUpdated: 1000 };
 
       await syncAllAddressBooksOnStartup('TestUser');
 
-      expect(wasQortPublished()).toBe(true);
+      expect(wasQortPublished()).toBe(false);
     });
 
-    it('updates the local timestamp after a startup-triggered publish', async () => {
+    it('keeps the newer local snapshot and marks sync-required state', async () => {
       setLocalStorage([ENTRY_BOB], 3000);
+      localStorage.setItem(SYNC_BASELINE_KEY, 'stale-clean-baseline');
       qdnDataForQort = { entries: [ENTRY_ALICE], lastUpdated: 1000 };
 
-      const before = Date.now();
       await syncAllAddressBooksOnStartup('TestUser');
-      const after = Date.now();
 
-      // The local timestamp must be advanced to ~publishedAt so the next login
-      // sees equal timestamps and goes straight to the hash-comparison path.
-      const newTimestamp = getStoredData().lastUpdated;
-      expect(newTimestamp).toBeGreaterThanOrEqual(before);
-      expect(newTimestamp).toBeLessThanOrEqual(after);
+      const stored = getStoredData();
+      expect(isSyncRequired()).toBe(true);
+      expect(localStorage.getItem(SYNC_BASELINE_KEY)).toBe(
+        createAddressBookSyncSignature([ENTRY_ALICE])
+      );
+      expect(stored.lastUpdated).toBe(3000);
+      expect(stored.entries[0].id).toBe(ENTRY_BOB.id);
+    });
+
+    it('keeps a just-published local snapshot while QDN is still propagating', async () => {
+      const publishedAt = await publishToQDN('QORT', [ENTRY_BOB], 'TestUser');
+      setLocalStorage([ENTRY_BOB], publishedAt!);
+      qdnDataForQort = { entries: [ENTRY_ALICE], lastUpdated: 1000 };
+      mockQortalRequest.mockClear();
+
+      await syncAllAddressBooksOnStartup('TestUser');
+
+      const stored = getStoredData();
+      expect(wasQortPublished()).toBe(false);
+      expect(isSyncRequired()).toBe(false);
+      expect(stored.entries[0].id).toBe(ENTRY_BOB.id);
     });
   });
 
@@ -288,13 +327,13 @@ describe('syncAllAddressBooksOnStartup', () => {
   // -------------------------------------------------------------------------
 
   describe('No QDN data exists', () => {
-    it('publishes local entries so they are backed up to QDN', async () => {
+    it('does not publish local entries on startup', async () => {
       setLocalStorage([ENTRY_ALICE], 1000);
       // qdnDataForQort stays null → FETCH_QDN_RESOURCE throws 404.
 
       await syncAllAddressBooksOnStartup('TestUser');
 
-      expect(wasQortPublished()).toBe(true);
+      expect(wasQortPublished()).toBe(false);
     });
 
     it('does not publish when there are no local entries either', async () => {
@@ -304,29 +343,21 @@ describe('syncAllAddressBooksOnStartup', () => {
       expect(wasQortPublished()).toBe(false);
     });
 
-    it('aligns the local timestamp with QDN after publishing', async () => {
-      // Root cause 1 fix: the timestamp stored locally must equal the timestamp
-      // that was written into QDN so the next startup sees equal timestamps.
+    it('marks local entries as requiring manual sync', async () => {
       setLocalStorage([ENTRY_ALICE], 1000);
 
-      const before = Date.now();
       await syncAllAddressBooksOnStartup('TestUser');
-      const after = Date.now();
 
-      const stored = getStoredData();
-      expect(stored.lastUpdated).toBeGreaterThanOrEqual(before);
-      expect(stored.lastUpdated).toBeLessThanOrEqual(after);
+      expect(isSyncRequired()).toBe(true);
+      expect(getStoredData().lastUpdated).toBe(1000);
     });
 
-    it('records the published hash after a successful publish', async () => {
-      // Root cause 2 fix: publishToQDN must write the published-hash sentinel
-      // so future startups can detect a propagation-delay scenario.
+    it('does not record a published hash from startup sync', async () => {
       setLocalStorage([ENTRY_ALICE], 1000);
 
       await syncAllAddressBooksOnStartup('TestUser');
 
-      const hash = localStorage.getItem('q-wallets-addressbook-published-QORT');
-      expect(hash).toBeTruthy();
+      expect(localStorage.getItem(PUBLISHED_HASH_KEY)).toBeNull();
     });
   });
 
@@ -336,14 +367,15 @@ describe('syncAllAddressBooksOnStartup', () => {
 
   describe('Steady-state — QDN and local are already in sync', () => {
     it('does not publish when QDN carries the exact same entries and equal timestamp (hash field present)', async () => {
-      // Run a first startup to capture the real hash that publishToQDN generates.
-      setLocalStorage([ENTRY_ALICE], 1000);
-      await syncAllAddressBooksOnStartup('TestUser');
+      // Run an explicit publish to capture the real hash that publishToQDN generates.
+      const alignedTimestamp = await publishToQDN(
+        'QORT',
+        [ENTRY_ALICE],
+        'TestUser'
+      );
+      setLocalStorage([ENTRY_ALICE], alignedTimestamp!);
 
-      const publishedHash = localStorage.getItem(
-        'q-wallets-addressbook-published-QORT'
-      )!;
-      const alignedTimestamp = getStoredData().lastUpdated;
+      const publishedHash = localStorage.getItem(PUBLISHED_HASH_KEY)!;
 
       // QDN now has the published data (propagation complete).
       qdnDataForQort = {
@@ -360,13 +392,14 @@ describe('syncAllAddressBooksOnStartup', () => {
     });
 
     it('does not modify localStorage when already in sync', async () => {
-      setLocalStorage([ENTRY_ALICE], 1000);
-      await syncAllAddressBooksOnStartup('TestUser');
+      const alignedTimestamp = await publishToQDN(
+        'QORT',
+        [ENTRY_ALICE],
+        'TestUser'
+      );
+      setLocalStorage([ENTRY_ALICE], alignedTimestamp!);
 
-      const publishedHash = localStorage.getItem(
-        'q-wallets-addressbook-published-QORT'
-      )!;
-      const alignedTimestamp = getStoredData().lastUpdated;
+      const publishedHash = localStorage.getItem(PUBLISHED_HASH_KEY)!;
 
       qdnDataForQort = {
         entries: [ENTRY_ALICE],
@@ -436,18 +469,18 @@ describe('syncAllAddressBooksOnStartup', () => {
   });
 
   // -------------------------------------------------------------------------
-  // BUG: optional `updatedAt` field causes hash divergence → spurious publish
-  // even though the user-visible content is unchanged.
+  // BUG FIX: optional `updatedAt` field must not cause hash divergence
+  // when the user-visible content is unchanged.
   //
   // Scenario: the user calls updateAddress (which stamps updatedAt on the
   // entry and advances localLastUpdated). QDN was published before updatedAt
   // existed, so the stored QDN hash was computed without that field.
   // At the next startup: localLastUpdated > qdnLastUpdated (Path B), hashes
-  // differ only because of updatedAt → the code publishes unnecessarily.
+  // differ only because of updatedAt → the code used to publish unnecessarily.
   // -------------------------------------------------------------------------
 
-  describe('BUG — updatedAt field in local entry causes hash mismatch with QDN', () => {
-    it('publishes even though only the internal updatedAt field differs (bug: should NOT publish)', async () => {
+  describe('BUG FIX — updatedAt field in local entry does not affect QDN hash', () => {
+    it('does not publish or require sync when only the internal updatedAt field differs', async () => {
       // Simulate updateAddress having been called: entry now has updatedAt and
       // local timestamp is newer than QDN.
       const entryWithUpdatedAt = { ...ENTRY_ALICE, updatedAt: 99999 };
@@ -458,30 +491,27 @@ describe('syncAllAddressBooksOnStartup', () => {
       // We simulate that by computing what the QDN hash *would* have been
       // (we use the sentinel approach: publish the old entry once to capture
       // its real hash, then set QDN accordingly).
-      setLocalStorage([ENTRY_ALICE], 1000);
-      await syncAllAddressBooksOnStartup('TestUser'); // publishes ENTRY_ALICE
-      const qdnHash = localStorage.getItem(
-        'q-wallets-addressbook-published-QORT'
-      )!;
-      const qdnTimestamp = getStoredData().lastUpdated;
+      const qdnTimestamp = await publishToQDN(
+        'QORT',
+        [ENTRY_ALICE],
+        'TestUser'
+      );
+      const qdnHash = localStorage.getItem(PUBLISHED_HASH_KEY)!;
       mockQortalRequest.mockClear();
       localStorage.clear();
 
       // Now restore the "post-updateAddress" local state.
-      setLocalStorage([entryWithUpdatedAt], qdnTimestamp + 1000); // local > QDN
+      setLocalStorage([entryWithUpdatedAt], qdnTimestamp! + 1000); // local > QDN
       qdnDataForQort = {
         entries: [ENTRY_ALICE],
-        lastUpdated: qdnTimestamp,
+        lastUpdated: qdnTimestamp!,
         hash: qdnHash,
       };
 
       await syncAllAddressBooksOnStartup('TestUser');
 
-      // BUG: the code currently DOES publish because generateHash(localEntries)
-      // includes updatedAt while qdnHash was computed without it.
-      // Once the bug is fixed (e.g. by excluding updatedAt from the hash),
-      // change this expectation to toBe(false).
-      expect(wasQortPublished()).toBe(true); // documents current (buggy) behaviour
+      expect(wasQortPublished()).toBe(false);
+      expect(isSyncRequired()).toBe(false);
     });
   });
 
@@ -492,9 +522,9 @@ describe('syncAllAddressBooksOnStartup', () => {
 
   describe('BUG FIX — QDN unavailable but content matches last publish → no publish', () => {
     it('does NOT publish on the second startup when content is unchanged', async () => {
-      // First startup: QDN is null, local has entries → publishes and records hash.
-      setLocalStorage([ENTRY_ALICE], 1000);
-      await syncAllAddressBooksOnStartup('TestUser');
+      // An explicit sync records the hash before the propagation-delay check.
+      const publishedAt = await publishToQDN('QORT', [ENTRY_ALICE], 'TestUser');
+      setLocalStorage([ENTRY_ALICE], publishedAt!);
       expect(wasQortPublished()).toBe(true);
 
       // Reset call recorder.
@@ -504,12 +534,12 @@ describe('syncAllAddressBooksOnStartup', () => {
       await syncAllAddressBooksOnStartup('TestUser');
 
       expect(wasQortPublished()).toBe(false);
+      expect(isSyncRequired()).toBe(false);
     });
 
-    it('DOES publish when content has changed since the last publish', async () => {
+    it('marks sync required when content has changed since the last publish', async () => {
       // Simulate a prior publish of ENTRY_ALICE.
-      setLocalStorage([ENTRY_ALICE], 1000);
-      await syncAllAddressBooksOnStartup('TestUser');
+      await publishToQDN('QORT', [ENTRY_ALICE], 'TestUser');
       mockQortalRequest.mockClear();
 
       // User adds ENTRY_BOB locally; QDN is still null.
@@ -517,17 +547,19 @@ describe('syncAllAddressBooksOnStartup', () => {
 
       await syncAllAddressBooksOnStartup('TestUser');
 
-      expect(wasQortPublished()).toBe(true);
+      expect(wasQortPublished()).toBe(false);
+      expect(isSyncRequired()).toBe(true);
     });
 
-    it('publishes on first startup when the published-hash sentinel is absent', async () => {
+    it('marks sync required on first startup when the published-hash sentinel is absent', async () => {
       // No prior publish recorded.
       setLocalStorage([ENTRY_ALICE], 1000);
       // qdnDataForQort remains null.
 
       await syncAllAddressBooksOnStartup('TestUser');
 
-      expect(wasQortPublished()).toBe(true);
+      expect(wasQortPublished()).toBe(false);
+      expect(isSyncRequired()).toBe(true);
     });
   });
 
@@ -544,7 +576,11 @@ describe('syncAllAddressBooksOnStartup', () => {
   describe('BUG FIX — QDN returns resource with mismatched coinType → discard', () => {
     it('does not store entries from a mismatched top-level coinType into local storage', async () => {
       // QORT local storage is empty. QDN returns DGB data for the QORT identifier.
-      qdnDataForQort = { coinType: 'DGB', entries: [ENTRY_DGB], lastUpdated: 5000 };
+      qdnDataForQort = {
+        coinType: 'DGB',
+        entries: [ENTRY_DGB],
+        lastUpdated: 5000,
+      };
 
       await syncAllAddressBooksOnStartup('TestUser');
 
@@ -556,7 +592,11 @@ describe('syncAllAddressBooksOnStartup', () => {
       setLocalStorage([ENTRY_ALICE], 1000);
       // QDN returns DGB data with a newer timestamp — without the fix this
       // would overwrite ENTRY_ALICE with ENTRY_DGB under the QORT key.
-      qdnDataForQort = { coinType: 'DGB', entries: [ENTRY_DGB], lastUpdated: 5000 };
+      qdnDataForQort = {
+        coinType: 'DGB',
+        entries: [ENTRY_DGB],
+        lastUpdated: 5000,
+      };
 
       await syncAllAddressBooksOnStartup('TestUser');
 
diff --git a/src/utils/__tests__/addressBookStorage.test.ts b/src/utils/__tests__/addressBookStorage.test.ts
index 2141576..e7785a8 100644
--- a/src/utils/__tests__/addressBookStorage.test.ts
+++ b/src/utils/__tests__/addressBookStorage.test.ts
@@ -2,21 +2,19 @@ import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { Coin } from 'qapp-core';
 import {
   getAddressBook,
+  getAddressBookStorageKey,
   addAddress,
   updateAddress,
   deleteAddress,
   searchAddresses,
+  setAddressBookAccountScope,
 } from '../addressBookStorage';
 import type { AddressBookEntry } from '../Types';
 
-// Mock the QDN module to prevent actual syncing during tests
-vi.mock('../addressBookQDN', () => ({
-  debouncedPublishToQDN: vi.fn(),
-}));
-
 describe('addressBookStorage', () => {
   beforeEach(() => {
     localStorage.clear();
+    setAddressBookAccountScope(null);
     vi.clearAllMocks();
   });
 
@@ -96,7 +94,10 @@ describe('addressBookStorage', () => {
           createdAt: Date.now(),
         },
       ];
-      localStorage.setItem('q-wallets-addressbook-BTC', JSON.stringify(oldFormatData));
+      localStorage.setItem(
+        'q-wallets-addressbook-BTC',
+        JSON.stringify(oldFormatData)
+      );
 
       const result = getAddressBook(Coin.BTC);
       expect(result).toHaveLength(1);
@@ -112,7 +113,7 @@ describe('addressBookStorage', () => {
     it('migration sets lastUpdated to 0 so QDN is always treated as newer', () => {
       // Root cause 3 fix: old-format data must migrate with lastUpdated:0 so
       // that any valid QDN timestamp (> 0) takes precedence on startup sync,
-      // avoiding a spurious "local is newer" publish proposal.
+      // avoiding a spurious "local is newer" manual sync prompt.
       const oldFormatData = [
         {
           id: 'test-1',
@@ -123,7 +124,10 @@ describe('addressBookStorage', () => {
           createdAt: 1000,
         },
       ];
-      localStorage.setItem('q-wallets-addressbook-BTC', JSON.stringify(oldFormatData));
+      localStorage.setItem(
+        'q-wallets-addressbook-BTC',
+        JSON.stringify(oldFormatData)
+      );
 
       getAddressBook(Coin.BTC);
 
@@ -131,6 +135,61 @@ describe('addressBookStorage', () => {
       const parsed = JSON.parse(stored!);
       expect(parsed.lastUpdated).toBe(0);
     });
+
+    it('keeps address books isolated by account scope', () => {
+      setAddressBookAccountScope('Qaccount111111111111111111111111111111');
+      addAddress({
+        name: 'Alice',
+        address: '1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa',
+        note: '',
+        coinType: Coin.BTC,
+      });
+
+      setAddressBookAccountScope('Qaccount222222222222222222222222222222');
+      expect(getAddressBook(Coin.BTC)).toEqual([]);
+
+      addAddress({
+        name: 'Bob',
+        address: '1BvBMSEYstWetqTFn5Au4m4GFg7xJaNVN2',
+        note: '',
+        coinType: Coin.BTC,
+      });
+
+      expect(getAddressBook(Coin.BTC)[0].name).toBe('Bob');
+
+      setAddressBookAccountScope('Qaccount111111111111111111111111111111');
+      expect(getAddressBook(Coin.BTC)[0].name).toBe('Alice');
+    });
+
+    it('migrates legacy unscoped storage into the current account only once', () => {
+      const legacyData = {
+        entries: [
+          {
+            id: 'test-1',
+            name: 'Alice',
+            address: '1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa',
+            note: '',
+            coinType: Coin.BTC,
+            createdAt: 1000,
+          },
+        ],
+        lastUpdated: 1000,
+      };
+      localStorage.setItem(
+        'q-wallets-addressbook-BTC',
+        JSON.stringify(legacyData)
+      );
+
+      setAddressBookAccountScope('Qaccount111111111111111111111111111111');
+      expect(getAddressBook(Coin.BTC)).toHaveLength(1);
+      expect(
+        localStorage.getItem(getAddressBookStorageKey(Coin.BTC))
+      ).not.toBeNull();
+      expect(localStorage.getItem('q-wallets-addressbook-BTC')).toBeNull();
+
+      setAddressBookAccountScope('Qaccount222222222222222222222222222222');
+      expect(getAddressBook(Coin.BTC)).toEqual([]);
+    });
   });
 
   describe('addAddress()', () => {
diff --git a/src/utils/addressBookQDN.ts b/src/utils/addressBookQDN.ts
index 48b3298..289a6c2 100644
--- a/src/utils/addressBookQDN.ts
+++ b/src/utils/addressBookQDN.ts
@@ -1,6 +1,15 @@
 import { base64ToObject, Coin, objectToBase64 } from 'qapp-core';
 import { AddressBookEntry } from './Types';
-import { getAddressBook } from './addressBookStorage';
+import type { AddressBookLocalStorage } from './addressBookStorage';
+import {
+  createAddressBookSyncSignature,
+  getAddressBook,
+  getAddressBookPublishedHashKey,
+  getAddressBookSyncBaselineKey,
+  getAddressBookStorageKey,
+  getAddressBookSyncRequiredKey,
+  saveAddressBookSnapshot,
+} from './addressBookStorage';
 
 /**
  * Get all available coin types from the Coin enum
@@ -36,26 +45,34 @@ export interface AddressBookQDNData {
   hash?: string; // Optional: hash of entries for quick comparison
 }
 
-/**
- * Interface for localStorage structure with metadata
- */
-interface AddressBookLocalStorage {
-  entries: AddressBookEntry[];
-  lastUpdated: number;
-}
-
 /**
  * Debounce timeouts for each coin type
  */
 let publishTimeouts: { [coinType: string]: NodeJS.Timeout } = {};
 
+const isFiniteNumber = (value: unknown): value is number =>
+  typeof value === 'number' && Number.isFinite(value);
+
+const normalizeEntryForHash = (entry: AddressBookEntry) => ({
+  address: entry.address.trim(),
+  coinType: entry.coinType,
+  favorite: Boolean(entry.favorite),
+  favoriteAt: isFiniteNumber(entry.favoriteAt) ? entry.favoriteAt : undefined,
+  id: entry.id,
+  name: entry.name.trim(),
+  note: (entry.note || '').trim(),
+  sortOrder: isFiniteNumber(entry.sortOrder) ? entry.sortOrder : undefined,
+});
+
 /**
- * Generates a hash of the entries for quick comparison
- * Sorts entries by ID before hashing to ensure order-independence
+ * Generates a hash of the entries for quick comparison.
+ * Sorts entries by ID for stable hashing and ignores internal timestamps.
  */
 function generateHash(entries: AddressBookEntry[]): string {
-  // Sort entries by ID to ensure consistent hash regardless of order
-  const sortedEntries = [...entries].sort((a, b) => a.id.localeCompare(b.id));
+  // Sort entries by ID so hashes are stable when the same entries are loaded.
+  const sortedEntries = [...entries]
+    .map(normalizeEntryForHash)
+    .sort((a, b) => a.id.localeCompare(b.id));
   const dataString = JSON.stringify(sortedEntries);
 
   // Simple hash function (djb2 algorithm variant)
@@ -75,13 +92,24 @@ function generateHash(entries: AddressBookEntry[]): string {
  * @param entries - The address book entries to publish
  * @param userName - Optional username (if not provided, will attempt to fetch)
  */
-/**
- * Key that records the hash of the last successfully published snapshot.
- * Used to skip re-publishing when QDN is temporarily unavailable (propagation
- * delay) but the local content has not changed since the last publish.
- */
-function publishedHashKey(coinType: string): string {
-  return `q-wallets-addressbook-published-${coinType}`;
+function markSyncRequired(
+  coinType: string,
+  cleanBaselineEntries?: AddressBookEntry[]
+): void {
+  localStorage.setItem(getAddressBookSyncRequiredKey(coinType), 'true');
+  if (cleanBaselineEntries) {
+    localStorage.setItem(
+      getAddressBookSyncBaselineKey(coinType),
+      createAddressBookSyncSignature(cleanBaselineEntries)
+    );
+    return;
+  }
+
+  localStorage.removeItem(getAddressBookSyncBaselineKey(coinType));
+}
+
+function clearSyncRequired(coinType: string): void {
+  localStorage.removeItem(getAddressBookSyncRequiredKey(coinType));
 }
 
 async function publishToQDN(
@@ -131,7 +159,8 @@ async function publishToQDN(
 
     // Record the published hash so future startup syncs can detect when QDN
     // is temporarily unavailable vs genuinely missing.
-    localStorage.setItem(publishedHashKey(coinType), hash);
+    localStorage.setItem(getAddressBookPublishedHashKey(coinType), hash);
+    clearSyncRequired(coinType);
 
     console.log(
       `QDN Sync: Published ${coinType} address book for user ${actualUserName}`
@@ -282,9 +311,10 @@ async function fetchFromQDN(
 }
 
 /**
- * Syncs a single address book on startup
- * Compares timestamps to determine which version is newer
- * Uses hash comparison when timestamps are equal
+ * Syncs a single address book on startup.
+ * This startup path is read-only for QDN: it can fetch newer remote data or
+ * mark local data as needing a user-initiated sync, but it must not publish
+ * because publishing opens a fee-bearing Qortal permission dialog.
  * @param coinType - The coin type to sync
  * @param userName - Optional username (if not provided, will attempt to fetch)
  */
@@ -297,39 +327,31 @@ async function syncAddressBookOnStartup(
     const localEntries = getAddressBook(coinType as Coin);
     const qdnData = await fetchFromQDN(coinType, userName);
 
-    // If no QDN data exists, publish local data if any
+    // If no QDN data exists, leave local data alone and wait for an
+    // explicit user sync instead of opening a publish permission dialog.
     if (!qdnData) {
       if (localEntries.length > 0) {
-        // Root cause 2 fix: skip re-publishing when QDN is temporarily
-        // unavailable (propagation delay) but content hasn't changed since the
-        // last successful publish — prevents a repeated permission dialog.
+        // Last successful publish sentinel prevents a repeated permission dialog.
         const lastPublishedHash = localStorage.getItem(
-          publishedHashKey(coinType)
+          getAddressBookPublishedHashKey(coinType)
         );
         if (lastPublishedHash === generateHash(localEntries)) {
+          clearSyncRequired(coinType);
           console.log(
             `QDN Sync: ${coinType} QDN unavailable but content matches last publish, skipping`
           );
           return;
         }
-        console.log(`QDN Sync: No QDN data, publishing local ${coinType} data`);
-        const publishedAt = await publishToQDN(coinType, localEntries, userName);
-        if (publishedAt !== null) {
-          // Align local timestamp with QDN so next startup goes to the
-          // equal-timestamp path rather than re-entering the "local is newer" path.
-          const localStorageKey = `q-wallets-addressbook-${coinType}`;
-          const dataToStore: AddressBookLocalStorage = {
-            entries: localEntries,
-            lastUpdated: publishedAt,
-          };
-          localStorage.setItem(localStorageKey, JSON.stringify(dataToStore));
-        }
+        console.log(
+          `QDN Sync: No QDN data for ${coinType}; manual sync required`
+        );
+        markSyncRequired(coinType);
       }
       return;
     }
 
     // Get local last updated timestamp from localStorage metadata
-    const localStorageKey = `q-wallets-addressbook-${coinType}`;
+    const localStorageKey = getAddressBookStorageKey(coinType);
     const localData = localStorage.getItem(localStorageKey);
     let localLastUpdated = 0;
 
@@ -351,44 +373,35 @@ async function syncAddressBookOnStartup(
         `QDN Sync: QDN data is newer for ${coinType}, updating localStorage`
       );
 
-      // Save to localStorage with metadata
-      const dataToStore: AddressBookLocalStorage = {
-        entries: qdnData.entries,
-        lastUpdated: qdnData.lastUpdated,
-      };
-      localStorage.setItem(localStorageKey, JSON.stringify(dataToStore));
+      saveAddressBookSnapshot(coinType, qdnData.entries, qdnData.lastUpdated);
+      clearSyncRequired(coinType);
     } else if (localLastUpdated > qdnLastUpdated) {
-      // Local timestamp is newer, but check content before publishing to avoid
-      // unnecessary fees when timestamps diverge without actual data changes
-      // (e.g. debounce timing gap, old-format migration, clock skew)
+      // Local timestamp is newer, mirroring master's decision tree without
+      // auto-publishing. If content differs, keep local and ask the user to
+      // sync manually instead of opening a publish permission dialog.
       const localHash = generateHash(localEntries);
       const qdnHash = qdnData.hash ?? generateHash(qdnData.entries);
       if (localHash === qdnHash) {
+        clearSyncRequired(coinType);
         console.log(
           `QDN Sync: ${coinType} timestamps differ but content is identical, skipping publish`
         );
         // Re-align local timestamp to QDN so future startups go straight to the
         // hash-comparison path instead of re-evaluating timestamps
-        const dataToStore: AddressBookLocalStorage = {
-          entries: localEntries,
-          lastUpdated: qdnData.lastUpdated,
-        };
-        localStorage.setItem(localStorageKey, JSON.stringify(dataToStore));
+        saveAddressBookSnapshot(coinType, localEntries, qdnData.lastUpdated);
+      } else if (
+        localHash ===
+        localStorage.getItem(getAddressBookPublishedHashKey(coinType))
+      ) {
+        clearSyncRequired(coinType);
+        console.log(
+          `QDN Sync: ${coinType} local snapshot matches last publish; waiting for QDN propagation`
+        );
       } else {
         console.log(
-          `QDN Sync: Local data is newer for ${coinType}, publishing to QDN`
+          `QDN Sync: Local ${coinType} data is newer and differs from QDN; manual sync required`
         );
-        // Root cause 1 fix: use the timestamp actually stored inside QDN so
-        // local and QDN are identical after publish — next startup goes
-        // straight to the equal-timestamp path, no hash comparison needed.
-        const publishedAt = await publishToQDN(coinType, localEntries, userName);
-        if (publishedAt !== null) {
-          const dataToStore: AddressBookLocalStorage = {
-            entries: localEntries,
-            lastUpdated: publishedAt,
-          };
-          localStorage.setItem(localStorageKey, JSON.stringify(dataToStore));
-        }
+        markSyncRequired(coinType, qdnData.entries);
       }
     } else {
       // Same timestamp - use hash comparison if available
@@ -398,13 +411,14 @@ async function syncAddressBookOnStartup(
           console.log(
             `QDN Sync: Hash mismatch for ${coinType}, using QDN data`
           );
-          const dataToStore: AddressBookLocalStorage = {
-            entries: qdnData.entries,
-            lastUpdated: qdnData.lastUpdated,
-          };
-          localStorage.setItem(localStorageKey, JSON.stringify(dataToStore));
+          saveAddressBookSnapshot(
+            coinType,
+            qdnData.entries,
+            qdnData.lastUpdated
+          );
         }
       }
+      clearSyncRequired(coinType);
       console.log(`QDN Sync: ${coinType} data is in sync`);
     }
   } catch (error) {
diff --git a/src/utils/addressBookStorage.ts b/src/utils/addressBookStorage.ts
index 9be631f..7ddde83 100644
--- a/src/utils/addressBookStorage.ts
+++ b/src/utils/addressBookStorage.ts
@@ -1,33 +1,190 @@
 import { Coin } from 'qapp-core';
 import { AddressBookEntry } from './Types';
-import { ADDRESSBOOK_NAME_LENGTH, ADDRESSBOOK_NOTE_LENGTH } from '../common/constants';
-import { debouncedPublishToQDN } from './addressBookQDN';
+import {
+  ADDRESSBOOK_NAME_LENGTH,
+  ADDRESSBOOK_NOTE_LENGTH,
+} from '../common/constants';
 
 const STORAGE_KEY_PREFIX = 'q-wallets-addressbook';
+const SYNC_REQUIRED_KEY_PREFIX = 'q-wallets-addressbook-sync-required';
+const SYNC_BASELINE_KEY_PREFIX = 'q-wallets-addressbook-sync-baseline';
+const PUBLISHED_HASH_KEY_PREFIX = 'q-wallets-addressbook-published';
+export const ADDRESS_BOOK_STORAGE_EVENT = 'q-wallets-addressbook-storage';
+
+let addressBookAccountScope: string | null = null;
 
 /**
  * Interface for localStorage structure with metadata
  */
-interface AddressBookLocalStorage {
+export interface AddressBookLocalStorage {
   entries: AddressBookEntry[];
   lastUpdated: number;
 }
 
+const normalizeAccountScope = (accountId?: string | null): string | null => {
+  const trimmed = String(accountId ?? '').trim();
+  return trimmed ? encodeURIComponent(trimmed) : null;
+};
+
+export const setAddressBookAccountScope = (accountId?: string | null): void => {
+  addressBookAccountScope = normalizeAccountScope(accountId);
+};
+
+export const getAddressBookAccountScope = (): string | null =>
+  addressBookAccountScope;
+
+const getLegacyScopedKey = (prefix: string, coinType: Coin | string): string =>
+  `${prefix}-${coinType}`;
+
+const getScopedKey = (prefix: string, coinType: Coin | string): string =>
+  addressBookAccountScope
+    ? `${prefix}-${addressBookAccountScope}-${coinType}`
+    : getLegacyScopedKey(prefix, coinType);
+
 /**
  * Get the localStorage key for a specific coin type
  */
-const getStorageKey = (coinType: Coin): string => {
-  return `${STORAGE_KEY_PREFIX}-${coinType}`;
+export const getAddressBookStorageKey = (coinType: Coin | string): string => {
+  return getScopedKey(STORAGE_KEY_PREFIX, coinType);
+};
+
+export const getAddressBookSyncRequiredKey = (
+  coinType: Coin | string
+): string => {
+  return getScopedKey(SYNC_REQUIRED_KEY_PREFIX, coinType);
+};
+
+export const getAddressBookSyncBaselineKey = (
+  coinType: Coin | string
+): string => {
+  return getScopedKey(SYNC_BASELINE_KEY_PREFIX, coinType);
+};
+
+export const getAddressBookPublishedHashKey = (
+  coinType: Coin | string
+): string => {
+  return getScopedKey(PUBLISHED_HASH_KEY_PREFIX, coinType);
+};
+
+const migrateLegacyKeyToCurrentScope = (
+  legacyKey: string,
+  scopedKey: string
+): void => {
+  if (!addressBookAccountScope || legacyKey === scopedKey) return;
+  if (localStorage.getItem(scopedKey) !== null) return;
+
+  const legacyValue = localStorage.getItem(legacyKey);
+  if (legacyValue === null) return;
+
+  localStorage.setItem(scopedKey, legacyValue);
+  localStorage.removeItem(legacyKey);
+};
+
+const migrateLegacyAddressBookKeys = (coinType: Coin | string): void => {
+  migrateLegacyKeyToCurrentScope(
+    getLegacyScopedKey(STORAGE_KEY_PREFIX, coinType),
+    getAddressBookStorageKey(coinType)
+  );
+  migrateLegacyKeyToCurrentScope(
+    getLegacyScopedKey(SYNC_REQUIRED_KEY_PREFIX, coinType),
+    getAddressBookSyncRequiredKey(coinType)
+  );
+  migrateLegacyKeyToCurrentScope(
+    getLegacyScopedKey(SYNC_BASELINE_KEY_PREFIX, coinType),
+    getAddressBookSyncBaselineKey(coinType)
+  );
+  migrateLegacyKeyToCurrentScope(
+    getLegacyScopedKey(PUBLISHED_HASH_KEY_PREFIX, coinType),
+    getAddressBookPublishedHashKey(coinType)
+  );
+};
+
+const hasNumber = (value: unknown): value is number =>
+  typeof value === 'number' && Number.isFinite(value);
+
+const compareByName = (a: AddressBookEntry, b: AddressBookEntry) =>
+  a.name.toLowerCase().localeCompare(b.name.toLowerCase()) ||
+  a.address.localeCompare(b.address);
+
+const compareByManualOrder = (a: AddressBookEntry, b: AddressBookEntry) => {
+  const aHasOrder = hasNumber(a.sortOrder);
+  const bHasOrder = hasNumber(b.sortOrder);
+
+  if (aHasOrder || bHasOrder) {
+    const aOrder = aHasOrder
+      ? (a.sortOrder ?? Number.MAX_SAFE_INTEGER)
+      : Number.MAX_SAFE_INTEGER;
+    const bOrder = bHasOrder
+      ? (b.sortOrder ?? Number.MAX_SAFE_INTEGER)
+      : Number.MAX_SAFE_INTEGER;
+    return aOrder - bOrder || compareByName(a, b);
+  }
+
+  return compareByName(a, b);
+};
+
+export const sortAddressBookEntries = (
+  entries: AddressBookEntry[]
+): AddressBookEntry[] =>
+  [...entries].sort((a, b) => {
+    const favoriteDelta =
+      Number(Boolean(b.favorite)) - Number(Boolean(a.favorite));
+    if (favoriteDelta !== 0) return favoriteDelta;
+
+    if (a.favorite && b.favorite) {
+      const favoriteOrder =
+        (b.favoriteAt ?? 0) - (a.favoriteAt ?? 0) || compareByManualOrder(a, b);
+      return favoriteOrder;
+    }
+
+    return compareByManualOrder(a, b);
+  });
+
+export const createAddressBookSyncSignature = (
+  entries: AddressBookEntry[]
+): string =>
+  JSON.stringify(
+    sortAddressBookEntries(entries).map((entry) => ({
+      address: entry.address.trim(),
+      coinType: entry.coinType,
+      favorite: Boolean(entry.favorite),
+      name: entry.name.trim(),
+      note: (entry.note || '').trim(),
+      sortKey: entry.id,
+    }))
+  );
+
+export const saveAddressBookSnapshot = (
+  coinType: Coin | string,
+  entries: AddressBookEntry[],
+  lastUpdated: number
+) => {
+  migrateLegacyAddressBookKeys(coinType);
+  const key = getAddressBookStorageKey(coinType);
+  const storageData: AddressBookLocalStorage = {
+    entries,
+    lastUpdated,
+  };
+
+  localStorage.setItem(key, JSON.stringify(storageData));
+};
+
+const saveAddressBookEntries = (
+  coinType: Coin,
+  entries: AddressBookEntry[]
+) => {
+  saveAddressBookSnapshot(coinType, entries, Date.now());
 };
 
 /**
  * Retrieve all addresses for a specific coin type
- * Returns addresses sorted alphabetically by name
+ * Returns addresses sorted by favorite state, manual order, then name
  * Handles both old format (array) and new format (object with metadata)
  */
 export const getAddressBook = (coinType: Coin): AddressBookEntry[] => {
   try {
-    const key = getStorageKey(coinType);
+    migrateLegacyAddressBookKeys(coinType);
+    const key = getAddressBookStorageKey(coinType);
     const data = localStorage.getItem(key);
 
     if (!data) {
@@ -53,19 +210,19 @@ export const getAddressBook = (coinType: Coin): AddressBookEntry[] => {
       entries = parsed.entries || [];
     }
 
-    // Sort by name alphabetically (case-insensitive)
-    return entries.sort((a, b) =>
-      a.name.toLowerCase().localeCompare(b.name.toLowerCase())
-    );
+    return sortAddressBookEntries(entries);
   } catch (error) {
-    console.error(`Address Book: Error loading addresses for ${coinType}`, error);
+    console.error(
+      `Address Book: Error loading addresses for ${coinType}`,
+      error
+    );
     return [];
   }
 };
 
 /**
  * Add a new address to the address book
- * Stores with metadata and triggers QDN sync
+ * Stores with metadata. QDN publishing is user-initiated.
  */
 export const addAddress = (
   entry: Omit<AddressBookEntry, 'id' | 'createdAt'>
@@ -73,12 +230,16 @@ export const addAddress = (
   try {
     // Validate name length
     if (entry.name.length > ADDRESSBOOK_NAME_LENGTH) {
-      throw new Error(`Name must be ${ADDRESSBOOK_NAME_LENGTH} characters or less`);
+      throw new Error(
+        `Name must be ${ADDRESSBOOK_NAME_LENGTH} characters or less`
+      );
     }
 
     // Validate note length
     if (entry.note.length > ADDRESSBOOK_NOTE_LENGTH) {
-      throw new Error(`Note must be ${ADDRESSBOOK_NOTE_LENGTH} characters or less`);
+      throw new Error(
+        `Note must be ${ADDRESSBOOK_NOTE_LENGTH} characters or less`
+      );
     }
 
     // Get existing addresses
@@ -86,7 +247,7 @@ export const addAddress = (
 
     // Check for duplicate address
     const duplicateAddress = existingAddresses.find(
-      existing => existing.address === entry.address
+      (existing) => existing.address === entry.address
     );
 
     if (duplicateAddress) {
@@ -101,21 +262,14 @@ export const addAddress = (
     };
 
     // Add new entry
-    const updatedAddresses = [...existingAddresses, newEntry];
-
-    // Save to localStorage with metadata
-    const key = getStorageKey(entry.coinType);
-    const storageData: AddressBookLocalStorage = {
-      entries: updatedAddresses,
-      lastUpdated: Date.now(),
-    };
-    localStorage.setItem(key, JSON.stringify(storageData));
+    const updatedAddresses = sortAddressBookEntries([
+      ...existingAddresses,
+      newEntry,
+    ]);
+    saveAddressBookEntries(entry.coinType, updatedAddresses);
 
     console.log(`Address Book: Added ${entry.name} for ${entry.coinType}`);
 
-    // Trigger QDN sync (debounced, async, don't wait)
-    debouncedPublishToQDN(entry.coinType, updatedAddresses);
-
     return newEntry;
   } catch (error) {
     console.error('Address Book: Error adding address', error);
@@ -126,7 +280,7 @@ export const addAddress = (
 /**
  * Update an existing address in the address book
  * Returns the updated entry or null if not found
- * Stores with metadata and triggers QDN sync
+ * Stores with metadata. QDN publishing is user-initiated.
  */
 export const updateAddress = (
   id: string,
@@ -136,22 +290,28 @@ export const updateAddress = (
   try {
     // Validate name length if provided
     if (updates.name && updates.name.length > ADDRESSBOOK_NAME_LENGTH) {
-      throw new Error(`Name must be ${ADDRESSBOOK_NAME_LENGTH} characters or less`);
+      throw new Error(
+        `Name must be ${ADDRESSBOOK_NAME_LENGTH} characters or less`
+      );
     }
 
     // Validate note length if provided
     if (updates.note && updates.note.length > ADDRESSBOOK_NOTE_LENGTH) {
-      throw new Error(`Note must be ${ADDRESSBOOK_NOTE_LENGTH} characters or less`);
+      throw new Error(
+        `Note must be ${ADDRESSBOOK_NOTE_LENGTH} characters or less`
+      );
     }
 
     // Get existing addresses
     const addresses = getAddressBook(coinType);
 
     // Find the entry to update
-    const index = addresses.findIndex(entry => entry.id === id);
+    const index = addresses.findIndex((entry) => entry.id === id);
 
     if (index === -1) {
-      console.warn(`Address Book: Entry with ID ${id} not found for ${coinType}`);
+      console.warn(
+        `Address Book: Entry with ID ${id} not found for ${coinType}`
+      );
       return null;
     }
 
@@ -164,19 +324,11 @@ export const updateAddress = (
 
     addresses[index] = updatedEntry;
 
-    // Save to localStorage with metadata
-    const key = getStorageKey(coinType);
-    const storageData: AddressBookLocalStorage = {
-      entries: addresses,
-      lastUpdated: Date.now(),
-    };
-    localStorage.setItem(key, JSON.stringify(storageData));
+    const updatedAddresses = sortAddressBookEntries(addresses);
+    saveAddressBookEntries(coinType, updatedAddresses);
 
     console.log(`Address Book: Updated ${updatedEntry.name} for ${coinType}`);
 
-    // Trigger QDN sync (debounced, async, don't wait)
-    debouncedPublishToQDN(coinType, addresses);
-
     return updatedEntry;
   } catch (error) {
     console.error('Address Book: Error updating address', error);
@@ -187,7 +339,7 @@ export const updateAddress = (
 /**
  * Delete an address from the address book
  * Returns true if deleted, false if not found
- * Stores with metadata and triggers QDN sync
+ * Stores with metadata. QDN publishing is user-initiated.
  */
 export const deleteAddress = (id: string, coinType: Coin): boolean => {
   try {
@@ -195,30 +347,22 @@ export const deleteAddress = (id: string, coinType: Coin): boolean => {
     const addresses = getAddressBook(coinType);
 
     // Find the entry to delete
-    const index = addresses.findIndex(entry => entry.id === id);
+    const index = addresses.findIndex((entry) => entry.id === id);
 
     if (index === -1) {
-      console.warn(`Address Book: Entry with ID ${id} not found for ${coinType}`);
+      console.warn(
+        `Address Book: Entry with ID ${id} not found for ${coinType}`
+      );
       return false;
     }
 
     // Remove the entry
     addresses.splice(index, 1);
 
-    // Save to localStorage with metadata
-    const key = getStorageKey(coinType);
-    const storageData: AddressBookLocalStorage = {
-      entries: addresses,
-      lastUpdated: Date.now(),
-    };
-
-    localStorage.setItem(key, JSON.stringify(storageData));
+    saveAddressBookEntries(coinType, addresses);
 
     console.log(`Address Book: Deleted entry for ${coinType}`);
 
-    // Trigger QDN sync (debounced, async, don't wait)
-    debouncedPublishToQDN(coinType, addresses);
-
     return true;
   } catch (error) {
     console.error('Address Book: Error deleting address', error);
@@ -244,10 +388,11 @@ export const searchAddresses = (
     const lowerQuery = query.toLowerCase();
 
     // Filter by name, address or note (case-insensitive, partial match)
-    const filtered = addresses.filter(entry =>
-      entry.name.toLowerCase().includes(lowerQuery) ||
-      entry.address.toLowerCase().includes(lowerQuery) ||
-      entry.note.toLowerCase().includes(lowerQuery)
+    const filtered = addresses.filter(
+      (entry) =>
+        entry.name.toLowerCase().includes(lowerQuery) ||
+        entry.address.toLowerCase().includes(lowerQuery) ||
+        entry.note.toLowerCase().includes(lowerQuery)
     );
 
     return filtered;
@@ -256,3 +401,72 @@ export const searchAddresses = (
     return [];
   }
 };
+
+export const toggleAddressBookFavorite = (
+  id: string,
+  coinType: Coin
+): AddressBookEntry[] | null => {
+  try {
+    const addresses = getAddressBook(coinType);
+    const index = addresses.findIndex((entry) => entry.id === id);
+
+    if (index === -1) {
+      console.warn(
+        `Address Book: Entry with ID ${id} not found for ${coinType}`
+      );
+      return null;
+    }
+
+    const entry = addresses[index];
+    addresses[index] = {
+      ...entry,
+      favorite: !entry.favorite,
+      favoriteAt: entry.favorite ? undefined : Date.now(),
+      updatedAt: Date.now(),
+    };
+
+    const updatedAddresses = sortAddressBookEntries(addresses);
+    saveAddressBookEntries(coinType, updatedAddresses);
+    return updatedAddresses;
+  } catch (error) {
+    console.error('Address Book: Error toggling favorite', error);
+    throw error;
+  }
+};
+
+export const moveAddressBookEntry = (
+  coinType: Coin,
+  sourceId: string,
+  targetId: string
+): AddressBookEntry[] | null => {
+  try {
+    if (sourceId === targetId) return getAddressBook(coinType);
+
+    const addresses = getAddressBook(coinType);
+    const sourceIndex = addresses.findIndex((entry) => entry.id === sourceId);
+    const targetIndex = addresses.findIndex((entry) => entry.id === targetId);
+
+    if (sourceIndex === -1 || targetIndex === -1) {
+      console.warn(`Address Book: Unable to reorder entries for ${coinType}`);
+      return null;
+    }
+
+    const reordered = [...addresses];
+    const [movedEntry] = reordered.splice(sourceIndex, 1);
+    reordered.splice(targetIndex, 0, movedEntry);
+
+    const favoriteTimestampBase = Date.now() + reordered.length;
+    const updatedAddresses = reordered.map((entry, index) => ({
+      ...entry,
+      favoriteAt: entry.favorite ? favoriteTimestampBase - index : undefined,
+      sortOrder: index,
+      updatedAt: Date.now(),
+    }));
+
+    saveAddressBookEntries(coinType, updatedAddresses);
+    return sortAddressBookEntries(updatedAddresses);
+  } catch (error) {
+    console.error('Address Book: Error reordering entries', error);
+    throw error;
+  }
+};
diff --git a/src/utils/qortalNodeApi.ts b/src/utils/qortalNodeApi.ts
new file mode 100644
index 0000000..bbf6cd8
--- /dev/null
+++ b/src/utils/qortalNodeApi.ts
@@ -0,0 +1,179 @@
+const LOCAL_QORTAL_NODE_API = 'http://127.0.0.1:12391';
+const HTTPS_LOCAL_QORTAL_NODE_API = 'https://127.0.0.1:12391';
+const PUBLIC_QORTAL_NODE_API = 'https://ext-node.qortal.link';
+const QORTAL_API_TIMEOUT_MS = 5000;
+
+export type QortalNameSearchResult = {
+  name: string;
+  owner: string;
+};
+
+export type QortalNameData = {
+  name: string;
+  owner: string;
+};
+
+const stripTrailingSlash = (value: string) => value.replace(/\/+$/, '');
+
+const getQortalNodeApiCandidates = () => {
+  const candidates: string[] = [];
+
+  if (typeof window !== 'undefined') {
+    const origin = stripTrailingSlash(window.location.origin);
+    if (/^https?:\/\/(127\.0\.0\.1|localhost):12391$/i.test(origin)) {
+      candidates.push(origin);
+    }
+
+    candidates.push(
+      window.location.protocol === 'https:'
+        ? HTTPS_LOCAL_QORTAL_NODE_API
+        : LOCAL_QORTAL_NODE_API
+    );
+  }
+
+  candidates.push(LOCAL_QORTAL_NODE_API, PUBLIC_QORTAL_NODE_API);
+
+  return [...new Set(candidates.map(stripTrailingSlash))];
+};
+
+const fetchJsonWithTimeout = async (url: string, signal?: AbortSignal) => {
+  const controller = new AbortController();
+  const timeoutId = window.setTimeout(() => {
+    controller.abort();
+  }, QORTAL_API_TIMEOUT_MS);
+  const abortRequest = () => controller.abort();
+
+  signal?.addEventListener('abort', abortRequest, { once: true });
+
+  try {
+    const response = await fetch(url, {
+      signal: controller.signal,
+    });
+
+    if (!response.ok) {
+      throw new Error(`Qortal API request failed: ${response.status}`);
+    }
+
+    return response.json();
+  } finally {
+    window.clearTimeout(timeoutId);
+    signal?.removeEventListener('abort', abortRequest);
+  }
+};
+
+const toNameSearchResults = (payload: unknown): QortalNameSearchResult[] => {
+  if (!Array.isArray(payload)) return [];
+
+  return payload
+    .map((item) => {
+      if (!item || typeof item !== 'object') return null;
+
+      const record = item as { name?: unknown; owner?: unknown };
+      if (typeof record.name !== 'string' || typeof record.owner !== 'string') {
+        return null;
+      }
+
+      return {
+        name: record.name,
+        owner: record.owner,
+      };
+    })
+    .filter((item): item is QortalNameSearchResult => Boolean(item));
+};
+
+const toNameData = (payload: unknown): QortalNameData | null => {
+  if (!payload || typeof payload !== 'object') return null;
+
+  const record = payload as { name?: unknown; owner?: unknown };
+  if (typeof record.name !== 'string' || typeof record.owner !== 'string') {
+    return null;
+  }
+
+  return {
+    name: record.name,
+    owner: record.owner,
+  };
+};
+
+export const getQortalNameData = async (
+  name: string,
+  signal?: AbortSignal
+): Promise<QortalNameData | null> => {
+  const trimmedName = name.trim();
+  if (!trimmedName) return null;
+
+  let lastError: unknown = null;
+
+  for (const baseApi of getQortalNodeApiCandidates()) {
+    if (signal?.aborted) return null;
+
+    try {
+      const payload = await fetchJsonWithTimeout(
+        `${baseApi}/names/${encodeURIComponent(trimmedName)}`,
+        signal
+      );
+      const result = toNameData(payload);
+
+      if (result) {
+        return result;
+      }
+    } catch (error) {
+      lastError = error;
+    }
+  }
+
+  const searchResults = await searchQortalNames(trimmedName, 10, signal);
+  const exactMatch = searchResults.find(
+    (result) => result.name.toLowerCase() === trimmedName.toLowerCase()
+  );
+
+  if (exactMatch) {
+    return exactMatch;
+  }
+
+  if (lastError) {
+    console.warn('QORT name lookup failed:', lastError);
+  }
+
+  return null;
+};
+
+export const searchQortalNames = async (
+  query: string,
+  limit = 10,
+  signal?: AbortSignal
+) => {
+  const trimmedQuery = query.trim();
+  if (!trimmedQuery) return [];
+
+  const params = new URLSearchParams({
+    limit: String(limit),
+    prefix: 'true',
+    query: trimmedQuery,
+  });
+  let lastError: unknown = null;
+
+  for (const baseApi of getQortalNodeApiCandidates()) {
+    if (signal?.aborted) return [];
+
+    try {
+      const payload = await fetchJsonWithTimeout(
+        `${baseApi}/names/search?${params.toString()}`,
+        signal
+      );
+      const results = toNameSearchResults(payload);
+
+      if (results.length > 0 || baseApi === PUBLIC_QORTAL_NODE_API) {
+        return results;
+      }
+    } catch (error) {
+      lastError = error;
+    }
+  }
+
+  if (lastError) {
+    console.warn('QORT name search failed:', lastError);
+  }
+
+  return [];
+};
diff --git a/src/utils/qortalRequestBridge.ts b/src/utils/qortalRequestBridge.ts
new file mode 100644
index 0000000..d7d0750
--- /dev/null
+++ b/src/utils/qortalRequestBridge.ts
@@ -0,0 +1,215 @@
+type QortalBridgeWindow = Window & {
+  qortalRequest?: (options: QortalRequestOptions) => Promise<any>;
+  qortalRequestWithTimeout?: (
+    options: QortalRequestOptions,
+    time: number
+  ) => Promise<any>;
+  __qWalletFetchBridgeInstalled?: boolean;
+};
+
+const DEFAULT_REQUEST_TIMEOUT = 120_000;
+const BRIDGE_FETCH_TIMEOUT = 8_000;
+const QORT_PAYMENT_UNIT_FEE = 100_000;
+const QORT_ADDRESS_PATTERN = /^Q[1-9A-HJ-NP-Za-km-z]{33}$/;
+
+const getErrorMessage = (error: unknown) => {
+  if (!error) return 'Qortal request failed';
+  if (typeof error === 'string') return error;
+  if (error instanceof Error) return error.message;
+  if (typeof error === 'object' && 'message' in error) {
+    return String((error as { message?: unknown }).message);
+  }
+  return 'Qortal request failed';
+};
+
+const createQortalRequest = (timeoutMs = DEFAULT_REQUEST_TIMEOUT) => {
+  return (options: QortalRequestOptions) =>
+    new Promise((resolve, reject) => {
+      if (!window.parent || window.parent === window) {
+        reject(new Error('Qortal request bridge is unavailable'));
+        return;
+      }
+
+      const channel = new MessageChannel();
+      const timeoutId = window.setTimeout(() => {
+        channel.port1.close();
+        reject(new Error(`Qortal request timed out: ${options.action}`));
+      }, timeoutMs);
+
+      channel.port1.onmessage = (event) => {
+        window.clearTimeout(timeoutId);
+        channel.port1.close();
+
+        if (event.data?.error) {
+          reject(new Error(getErrorMessage(event.data.error)));
+          return;
+        }
+
+        resolve(event.data?.result);
+      };
+
+      window.parent.postMessage(
+        {
+          ...options,
+          requestedHandler: 'UI',
+        },
+        '*',
+        [channel.port2]
+      );
+    });
+};
+
+const requestThroughBridge = (
+  bridgeWindow: QortalBridgeWindow,
+  options: QortalRequestOptions,
+  timeoutMs = BRIDGE_FETCH_TIMEOUT
+) => {
+  if (typeof bridgeWindow.qortalRequestWithTimeout === 'function') {
+    return bridgeWindow.qortalRequestWithTimeout(options, timeoutMs);
+  }
+
+  return bridgeWindow.qortalRequest?.(options);
+};
+
+const createJsonResponse = (data: unknown, init?: ResponseInit) =>
+  new Response(JSON.stringify(data), {
+    ...init,
+    headers: {
+      'Content-Type': 'application/json',
+      ...init?.headers,
+    },
+    status: init?.status ?? 200,
+  });
+
+const parseNumberParam = (value: string | null) => {
+  if (value === null || value === '') return undefined;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : undefined;
+};
+
+const parseBooleanParam = (value: string | null) => {
+  if (value === null) return undefined;
+  return value === 'true';
+};
+
+const installQortalApiFetchBridge = (bridgeWindow: QortalBridgeWindow) => {
+  if (bridgeWindow.__qWalletFetchBridgeInstalled) return;
+
+  const originalFetch = window.fetch.bind(window);
+
+  window.fetch = async (input, init) => {
+    const method =
+      init?.method ||
+      (input instanceof Request ? input.method : undefined) ||
+      'GET';
+
+    if (method.toUpperCase() !== 'GET') {
+      return originalFetch(input, init);
+    }
+
+    const rawUrl =
+      typeof input === 'string'
+        ? input
+        : input instanceof URL
+          ? input.toString()
+          : input.url;
+
+    const url = new URL(rawUrl, window.location.origin);
+    const isLocalRelativeRequest =
+      rawUrl.startsWith('/') || url.origin === window.location.origin;
+
+    if (!isLocalRelativeRequest) {
+      return originalFetch(input, init);
+    }
+
+    const balanceAddress = url.pathname.match(
+      /^\/addresses\/balance\/([^/]+)$/
+    )?.[1];
+
+    if (balanceAddress) {
+      const result = await bridgeWindow.qortalRequest?.({
+        action: 'GET_BALANCE',
+        address: decodeURIComponent(balanceAddress),
+      });
+      return createJsonResponse(result);
+    }
+
+    const addressToValidate = url.pathname.match(
+      /^\/addresses\/validate\/([^/]+)$/
+    )?.[1];
+
+    if (addressToValidate) {
+      return createJsonResponse(
+        QORT_ADDRESS_PATTERN.test(decodeURIComponent(addressToValidate))
+      );
+    }
+
+    const nameToLookup = url.pathname.match(/^\/names\/([^/]+)$/)?.[1];
+
+    if (nameToLookup) {
+      try {
+        const result = await requestThroughBridge(bridgeWindow, {
+          action: 'GET_NAME_DATA',
+          name: decodeURIComponent(nameToLookup),
+        });
+        if (!result) {
+          return createJsonResponse({ error: 'Name not found' }, { status: 404 });
+        }
+
+        return createJsonResponse(result);
+      } catch (error) {
+        return createJsonResponse(
+          { error: getErrorMessage(error) },
+          { status: 404 }
+        );
+      }
+    }
+
+    if (
+      url.pathname === '/transactions/unitfee' &&
+      url.searchParams.get('txType') === 'PAYMENT'
+    ) {
+      return createJsonResponse(QORT_PAYMENT_UNIT_FEE);
+    }
+
+    if (
+      url.pathname === '/transactions/search' ||
+      url.pathname === '/transactions/unconfirmed'
+    ) {
+      const searchParams = url.searchParams;
+      const result = await bridgeWindow.qortalRequest?.({
+        action: 'SEARCH_TRANSACTIONS',
+        txType: searchParams.getAll('txType') as any,
+        address: searchParams.get('address') ?? undefined,
+        confirmationStatus:
+          url.pathname === '/transactions/unconfirmed'
+            ? 'UNCONFIRMED'
+            : (searchParams.get('confirmationStatus') as any) ?? undefined,
+        creator: searchParams.get('creator') ?? undefined,
+        limit: parseNumberParam(searchParams.get('limit')),
+        offset: parseNumberParam(searchParams.get('offset')),
+        reverse: parseBooleanParam(searchParams.get('reverse')),
+        unconfirmed: url.pathname === '/transactions/unconfirmed',
+      } as QortalRequestOptions);
+      return createJsonResponse(result);
+    }
+
+    return originalFetch(input, init);
+  };
+
+  bridgeWindow.__qWalletFetchBridgeInstalled = true;
+};
+
+export const installQortalRequestBridge = () => {
+  const bridgeWindow = window as QortalBridgeWindow;
+
+  if (typeof bridgeWindow.qortalRequest !== 'function') {
+    bridgeWindow.qortalRequest = createQortalRequest();
+    bridgeWindow.qortalRequestWithTimeout = (options, time) =>
+      createQortalRequest(time)(options);
+  }
+
+  if (!bridgeWindow._qdnBase) {
+    installQortalApiFetchBridge(bridgeWindow);
+  }
+};