restores gui

Signed-off-by: Snider <snider@lt.hn>
2025-11-02 18:04:58 +00:00 · 2025-11-02 18:04:58 +00:00 · 823c227c41
commit 823c227c41
parent e07d08ea90
86 changed files with 16706 additions and 2 deletions
--- a/cmd/core-gui/frontend/.dockerignore
+++ b/cmd/core-gui/frontend/.dockerignore
@ -0,0 +1,7 @@
+node_modules
+npm-debug.log
+Dockerfile
+.dockerignore
+.env
+.git
+.gitignore
--- a/cmd/core-gui/frontend/.editorconfig
+++ b/cmd/core-gui/frontend/.editorconfig
@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/cmd/core-gui/frontend/.gitignore
+++ b/cmd/core-gui/frontend/.gitignore
@ -0,0 +1,42 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+.npmrc
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
--- a/cmd/core-gui/frontend/README.md
+++ b/cmd/core-gui/frontend/README.md
@ -0,0 +1,69 @@
+### Installation
+- `npm install` (install dependencies)
+- `npm outdated` (verify dependency status)
+
+### Development
+- `npm run start`
+- Visit http://localhost:4200
+
+## Lint
+- `npm run lint`
+
+## Tests (headless-ready, no Chrome required)
+- Unit/integration: `npm run test` (opens browser), or:
+  - Headless (uses Puppeteer Chromium): `npm run test:headless`
+  - Coverage report (HTML + text-summary): `npm run coverage`
+- Coverage thresholds are enforced in Karma (≈80% statements/lines/functions, 70% branches for global). Adjust in `karma.conf.js` if needed.
+
+### TDD workflow and test naming (Good/Bad/Ugly)
+- Follow strict TDD:
+  1) Write failing tests from user stories + acceptance criteria
+  2) Implement minimal code to pass
+  3) Refactor
+- Test case naming convention: each logical test should have three variants to clarify intent and data quality.
+  - Example helpers in `src/testing/gbu.ts`:
+    ```ts
+    import { itGood, itBad, itUgly, trio } from 'src/testing/gbu';
+
+    itGood('saves profile', () => {/* valid data */});
+    itBad('saves profile', () => {/* incorrect data (edge) */});
+    itUgly('saves profile', () => {/* invalid data/conditions */});
+
+    // Or use trio
+    trio('process order', {
+      good: () => {/* ... */},
+      bad:  () => {/* ... */},
+      ugly: () => {/* ... */},
+    });
+    ```
+- Do not modify router-outlet containers in tests/components.
+
+### Standalone Angular 20+ patterns (migration notes)
+- This app is moving to Angular standalone APIs. Prefer:
+  - Standalone components (`standalone: true`, add `imports: []` per component)
+  - `provideRouter(...)`, `provideHttpClient(...)`, `provideServiceWorker(...)` in `app.config.ts`
+  - Translation is configured via `app.config.ts` using `TranslateModule.forRoot(...)` and an HTTP loader.
+- Legacy NgModules should be converted progressively. If an `NgModule` remains but is unrouted/unreferenced, keep it harmlessly until deletion is approved. Do not alter the main router-outlet page context panel.
+
+### Web Awesome + Font Awesome (Pro)
+- Both Font Awesome and Web Awesome are integrated. Do not remove. Web Awesome assets are copied via `angular.json` assets, and its base path is set at runtime in `app.ts`:
+  ```ts
+  import('@awesome.me/webawesome').then(m => m.setBasePath('/assets/web-awesome'));
+  ```
+- CSS includes are defined in `angular.json` and `src/styles.css`.
+
+### SSR and production
+- Build (browser + server): `npm run build`
+- Serve SSR bundle: `npm run serve` → http://localhost:4000
+
+### Notes for other LLMs / contributors
+- Respect the constraints:
+  - Do NOT edit the router-outlet main panel; pages/services are the focus
+  - Preserve existing functionality; do not remove Web Awesome/Font Awesome
+  - Use strict TDD and Good/Bad/Ugly naming for tests
+  - Keep or improve code coverage ≥ configured thresholds for changed files
+- Use Angular 20+ standalone patterns; update `app.config.ts` for global providers.
+- For tests, prefer headless runs via Puppeteer (no local Chrome needed).
+
+### Author
+- Author: danny
--- a/cmd/core-gui/frontend/angular.json
+++ b/cmd/core-gui/frontend/angular.json
@ -0,0 +1,132 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "lthn.io": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              },
+              {
+                "glob": "@awesome.me/webawesome/**/*.*",
+                "input": "node_modules/",
+                "output": "/"
+              },
+              "src/sitemap.xml",
+              "src/robots.txt"
+            ],
+            "styles": [
+              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
+              "src/styles.css"
+            ],
+            "scripts": [],
+            "define": {
+              "import.meta.vitest": "undefined"
+            }
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "1MB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all",
+              "serviceWorker": "ngsw-config.json",
+              "server": "src/main.server.ts",
+              "outputMode": "server",
+              "ssr": {
+                "entry": "src/server.ts"
+              }
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.development.ts"
+                }
+              ]
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "lthn.io:build:production"
+            },
+            "development": {
+              "buildTarget": "lthn.io:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular/build:extract-i18n"
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing",
+              "src/test.ts"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "cli": {
+    "schematicCollections": [
+      "angular-eslint"
+    ],
+    "analytics": false
+  }
+}
--- a/cmd/core-gui/frontend/eslint.config.js
+++ b/cmd/core-gui/frontend/eslint.config.js
@ -0,0 +1,63 @@
+// @ts-check
+const eslint = require("@eslint/js");
+const tseslint = require("typescript-eslint");
+const angular = require("angular-eslint");
+
+module.exports = tseslint.config(
+  {
+    files: ["**/*.ts"],
+    extends: [
+      eslint.configs.recommended,
+      ...tseslint.configs.recommended,
+      ...tseslint.configs.stylistic,
+      ...angular.configs.tsRecommended,
+    ],
+    processor: angular.processInlineTemplates,
+    rules: {
+      "@angular-eslint/directive-selector": [
+        "error",
+        {
+          type: "attribute",
+          prefix: "app",
+          style: "camelCase",
+        },
+      ],
+      "@angular-eslint/component-selector": [
+        "error",
+        {
+          type: "element",
+          prefix: "app",
+          style: "kebab-case",
+        },
+      ],
+      "@angular-eslint/component-class-suffix": [
+        "error",
+        {
+          suffixes: ["", "Component"]
+        }
+      ],
+      "@angular-eslint/prefer-inject": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
+      ],
+      "no-undefined": "off",
+      "no-var": "error",
+      "prefer-const": "error",
+      "func-names": "error",
+      "id-length": "error",
+      "newline-before-return": "error",
+      "space-before-blocks": "error",
+      "no-alert": "error"
+    },
+  },
+  {
+    files: ["**/*.html"],
+    extends: [
+      ...angular.configs.templateRecommended,
+      ...angular.configs.templateAccessibility,
+    ],
+    rules: {},
+  }
+);
--- a/cmd/core-gui/frontend/karma.conf.js
+++ b/cmd/core-gui/frontend/karma.conf.js
@ -0,0 +1,61 @@
+process.env.CHROME_BIN = process.env.CHROME_BIN || (function() {
+  try { return require('puppeteer').executablePath(); } catch { return undefined; }
+})();
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution order
+        random: true
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/angular-starter'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ],
+      check: {
+        global: {
+          statements: 80,
+          branches: 70,
+          functions: 80,
+          lines: 80
+        }
+      }
+    },
+    reporters: ['progress', 'kjhtml'],
+    browsers: ['Chrome'],
+    customLaunchers: {
+      ChromeHeadless: {
+        base: 'Chrome',
+        flags: [
+          '--headless',
+          '--disable-gpu',
+          '--no-sandbox',
+          '--disable-dev-shm-usage',
+          '--disable-web-security',
+          '--remote-debugging-port=9222'
+        ]
+      }
+    },
+    restartOnFileChange: true
+  });
+};
--- a/cmd/core-gui/frontend/ngsw-config.json
+++ b/cmd/core-gui/frontend/ngsw-config.json
@ -0,0 +1,30 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.csr.html",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/**/*.(svg|cur|jpg|jpeg|png|apng|webp|avif|gif|otf|ttf|woff|woff2)"
+        ]
+      }
+    }
+  ]
+}
--- a/cmd/core-gui/frontend/package-lock.json
+++ b/cmd/core-gui/frontend/package-lock.json
--- a/cmd/core-gui/frontend/package.json
+++ b/cmd/core-gui/frontend/package.json
@ -0,0 +1,60 @@
+{
+  "name": "lthn.io",
+  "version": "20.3.2",
+  "scripts": {
+    "ng": "ng",
+    "dev": "ng serve --port 4200",
+    "start": "ng serve --port 4200",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "preview": "http-server ./dist/lthn-dns-web/browser -o",
+    "puppeteer:install": "npx puppeteer browsers install chrome || true",
+    "test": "ng test",
+    "test:headless": "(export CHROME_BIN=\"$(node -e \"console.log(require('puppeteer').executablePath())\")\"; ng test --no-watch --code-coverage=false --browsers=ChromeHeadless) || (npm run puppeteer:install && export CHROME_BIN=\"$(node -e \"console.log(require('puppeteer').executablePath())\")\" && ng test --no-watch --code-coverage=false --browsers=ChromeHeadless)",
+    "coverage": "(export CHROME_BIN=\"$(node -e \"console.log(require('puppeteer').executablePath())\")\"; ng test --no-watch --code-coverage --browsers=ChromeHeadless) || (npm run puppeteer:install && export CHROME_BIN=\"$(node -e \"console.log(require('puppeteer').executablePath())\")\" && ng test --no-watch --code-coverage --browsers=ChromeHeadless)",
+    "lint": "ng lint",
+    "serve": "node dist/angular-starter/server/server.mjs"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/common": "^20.3.2",
+    "@angular/compiler": "^20.3.2",
+    "@angular/core": "^20.3.2",
+    "@angular/forms": "^20.3.2",
+    "@angular/platform-browser": "^20.3.2",
+    "@angular/platform-server": "^20.3.2",
+    "@angular/router": "^20.3.2",
+    "@angular/service-worker": "^20.3.2",
+    "@angular/ssr": "^20.3.3",
+    "@awesome.me/kit-2e7e02d1b1": "^1.0.6",
+    "@awesome.me/webawesome": "file:~/Code/lib/webawesome",
+    "@fortawesome/fontawesome-free": "^7.0.1",
+    "@ngx-translate/core": "^17.0.0",
+    "@ngx-translate/http-loader": "^17.0.0",
+    "bootstrap": "^5.3.8",
+    "express": "^5.1.0",
+    "rxjs": "^7.8.2",
+    "tslib": "^2.8.1",
+    "uuid": "^13.0.0",
+    "zone.js": "^0.15.1"
+  },
+  "devDependencies": {
+    "@angular/build": "^20.3.3",
+    "@angular/cli": "^20.3.3",
+    "@angular/compiler-cli": "^20.3.2",
+    "@types/express": "^5.0.3",
+    "@types/jasmine": "^5.1.9",
+    "@types/node": "^24.6.0",
+    "angular-eslint": "^20.3.0",
+    "eslint": "^9.36.0",
+    "jasmine-core": "^5.11.0",
+    "karma": "^6.4.4",
+    "karma-chrome-launcher": "^3.2.0",
+    "karma-coverage": "^2.2.1",
+    "karma-jasmine": "^5.1.0",
+    "karma-jasmine-html-reporter": "^2.1.0",
+    "puppeteer": "^23.7.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.45.0"
+  }
+}
--- a/cmd/core-gui/frontend/public/favicon.ico
+++ b/cmd/core-gui/frontend/public/favicon.ico
--- a/cmd/core-gui/frontend/public/i18n/en.json
+++ b/cmd/core-gui/frontend/public/i18n/en.json
@ -0,0 +1,331 @@
+{  "app": {
+  "title": "Bob Wallet"
+},
+  "sidebar": {
+    "wallet": "Wallet",
+    "topLevelDomains": "Top Level Domains",
+    "miscellaneous": "Miscellaneous",
+    "portfolio": "Portfolio",
+    "send": "Send",
+    "receive": "Receive",
+    "domainManager": "Domain Manager",
+    "browseDomains": "Browse Domains",
+    "yourBids": "Your Bids",
+    "watching": "Watching",
+    "exchange": "Exchange",
+    "claimAirdrop": "Claim Airdrop",
+    "signMessage": "Sign Message",
+    "verifyMessage": "Verify Message",
+    "currentHeight": "Current Height",
+    "currentHash": "Current Hash"
+  },
+  "topbar": {
+    "searchPlaceholder": "Search TLD",
+    "synced": "Synced",
+    "walletID": "Wallet ID",
+    "spendableBalance": "Spendable Balance",
+    "network": "Network",
+    "settings": "Settings",
+    "logout": "Logout"
+  },
+  "home": {
+    "spendable": "Spendable",
+    "locked": "Locked",
+    "revealable": "Revealable",
+    "redeemable": "Redeemable",
+    "registerable": "Registerable",
+    "renewable": "Renewable",
+    "transferring": "Transferring",
+    "finalizable": "Finalizable",
+    "inBids": "In bids",
+    "bid": "bid",
+    "bids": "bids",
+    "revealAll": "Reveal All",
+    "redeemAll": "Redeem All",
+    "registerAll": "Register All",
+    "renewAll": "Renew All",
+    "finalizeAll": "Finalize All",
+    "bidsReadyToReveal": "{{count}} bids ready to reveal",
+    "bidsReadyToRedeem": "{{count}} bids ready to redeem",
+    "namesReadyToRegister": "{{count}} names ready to register",
+    "domainsExpiringSoon": "{{count}} domains expiring soon",
+    "domainsInTransfer": "{{count}} domains in transfer",
+    "transfersReadyToFinalize": "{{count}} transfers ready to finalize",
+    "transactionHistory": "Transaction History",
+    "noTransactions": "No transactions yet. Transaction history will appear here once you start using the wallet."
+  },
+  "domainManager": {
+    "searchPlaceholder": "Search domains...",
+    "export": "Export",
+    "bulkTransfer": "Bulk Transfer",
+    "claimNamePayment": "Claim Name for Payment",
+    "emptyState": "You do not own any names yet.",
+    "browseDomainsLink": "Browse domains",
+    "toGetStarted": "to get started.",
+    "name": "Name",
+    "expires": "Expires",
+    "highestBid": "Highest Bid",
+    "showingDomains": "Showing {{count}} domains"
+  },
+  "exchange": {
+    "listings": "Listings",
+    "fills": "Fills",
+    "auctions": "Auctions",
+    "yourListings": "Your Listings",
+    "yourFills": "Your Fills",
+    "marketplaceAuctions": "Marketplace Auctions",
+    "createListing": "Create Listing",
+    "refresh": "Refresh",
+    "noActiveListings": "You have no active listings.",
+    "noFilledOrders": "You have no filled orders.",
+    "noActiveAuctions": "No active auctions found.",
+    "listDomainsInfo": "List your domains for sale to other Handshake users via the Shakedex protocol.",
+    "completedPurchasesInfo": "Completed purchases will appear here.",
+    "browseAuctionsInfo": "Browse available domain auctions from other users."
+  },
+  "searchTld": {
+    "searchPlaceholder": "Search for a name...",
+    "search": "Search",
+    "searching": "Searching...",
+    "enterNamePrompt": "Enter a name to search for availability and auction status.",
+    "available": "Available",
+    "inAuction": "In Auction",
+    "status": "Status",
+    "currentBid": "Current Bid",
+    "blocksUntilReveal": "Blocks until reveal",
+    "availableForBidding": "Available for bidding",
+    "auctionInProgress": "Auction in progress",
+    "placeBid": "Place Bid",
+    "watch": "Watch"
+  },
+  "onboarding": {
+    "welcome": "Welcome to Bob Wallet",
+    "setupPrompt": "Set up your wallet to start managing Handshake names",
+    "createNewWallet": "Create New Wallet",
+    "importSeed": "Import Seed",
+    "connectLedger": "Connect Ledger",
+    "important": "Important:",
+    "seedPhraseWarning": "Write down your seed phrase and store it in a secure location. You will need it to recover your wallet.",
+    "copySeedPhrase": "Copy Seed Phrase",
+    "savedSeed": "I've Saved My Seed",
+    "importSeedPrompt": "Enter your 12 or 24 word seed phrase to restore an existing wallet.",
+    "seedPhrase": "Seed Phrase",
+    "seedPhrasePlaceholder": "Enter your seed phrase",
+    "importWallet": "Import Wallet",
+    "ledgerPrompt": "Connect your Ledger hardware wallet to manage your Handshake names securely.",
+    "instructions": "Instructions:",
+    "ledgerStep1": "Connect your Ledger device via USB",
+    "ledgerStep2": "Enter your PIN on the device",
+    "ledgerStep3": "Open the Handshake app on your Ledger",
+    "ledgerStep4": "Click \"Connect\" below",
+    "connectLedgerButton": "Connect Ledger"
+  },
+  "settings": {
+    "general": "General",
+    "wallet": "Wallet",
+    "connection": "Connection",
+    "advanced": "Advanced",
+    "language": "Language",
+    "blockExplorer": "Block Explorer",
+    "theme": "Theme",
+    "light": "Light",
+    "dark": "Dark",
+    "system": "System",
+    "walletDirectory": "Wallet Directory",
+    "walletDirectoryInfo": "Location where wallet data is stored",
+    "changeDirectory": "Change Directory",
+    "backup": "Backup",
+    "backupInfo": "Export wallet seed phrase and settings",
+    "exportBackup": "Export Backup",
+    "rescanBlockchain": "Rescan Blockchain",
+    "rescanInfo": "Re-scan the blockchain for transactions",
+    "rescan": "Rescan",
+    "connectionType": "Connection Type",
+    "fullNode": "Full Node",
+    "spv": "SPV (Light)",
+    "customRPC": "Custom RPC",
+    "network": "Network",
+    "mainnet": "Mainnet",
+    "testnet": "Testnet",
+    "regtest": "Regtest",
+    "simnet": "Simnet",
+    "apiKey": "API Key",
+    "apiKeyInfo": "Node API authentication key",
+    "analytics": "Analytics",
+    "analyticsInfo": "Share anonymous usage data to improve Bob",
+    "developerOptions": "Developer Options",
+    "openDebugConsole": "Open Debug Console"
+  },
+  "common": {
+    "hns": "HNS",
+    "usd": "USD",
+    "loading": "Loading...",
+    "save": "Save",
+    "cancel": "Cancel",
+    "close": "Close",
+    "confirm": "Confirm",
+    "continue": "Continue",
+    "back": "Back",
+    "next": "Next",
+    "done": "Done",
+    "error": "Error",
+    "success": "Success",
+    "warning": "Warning",
+    "info": "Info"
+  },
+  "app.boot.download-check": "Checking for Updates",
+  "app.boot.folder-check": "Setup Check",
+  "app.boot.loaded-runtime": "Application Loaded",
+  "app.boot.server-check": "Checking Server",
+  "app.boot.start-runtime": "Starting Desktop",
+  "app.core.ui.search": "Search",
+  "app.lthn.chain.daemons.lethean-blockchain-export": "Blockchain Export",
+  "app.lthn.chain.daemons.lethean-blockchain-import": "Blockchain Import",
+  "app.lthn.chain.daemons.lethean-wallet-cli": "Wallet CLI",
+  "app.lthn.chain.daemons.lethean-wallet-rpc": "Wallet RPC",
+  "app.lthn.chain.daemons.lethean-wallet-vpn-rpc": "Exit Node Wallet",
+  "app.lthn.chain.daemons.letheand": "Blockchain Service",
+  "app.lthn.chain.desc.no_transactions": "There were no transactions included in this block",
+  "app.lthn.chain.description": "Lethean (LTHN) Blockchain Stats",
+  "app.lthn.chain.heading": "Lethean Blockchain Stats",
+  "app.lthn.chain.menu.blocks": "Blocks",
+  "app.lthn.chain.menu.configuration": "Configuration",
+  "app.lthn.chain.menu.raw_data": "Raw Block Data",
+  "app.lthn.chain.menu.stats": "Stats",
+  "app.lthn.chain.table.age": "Age",
+  "app.lthn.chain.table.depth": "Depth",
+  "app.lthn.chain.table.difficulty": "Difficulty",
+  "app.lthn.chain.table.height": "Height",
+  "app.lthn.chain.table.reward": "Reward",
+  "app.lthn.chain.table.time": "Time",
+  "app.lthn.chain.table.title.chain-status": "Blockchain Status",
+  "app.lthn.chain.table.title.recent-blocks": "Recently Created Blocks",
+  "app.lthn.chain.title": "Blockchain Explorer",
+  "app.lthn.chain.words.alt_blocks_count": "Alt Blocks",
+  "app.lthn.chain.words.block_size": "Block Size",
+  "app.lthn.chain.words.block_size_limit": "Block Size Limit",
+  "app.lthn.chain.words.chain_stat": "Chain Stats",
+  "app.lthn.chain.words.chain_stat_value": "Node Reported Value",
+  "app.lthn.chain.words.cumulative_difficulty": "Cumulative Difficulty",
+  "app.lthn.chain.words.depth": "Depth from Top Block",
+  "app.lthn.chain.words.difficulty": "Difficulty",
+  "app.lthn.chain.words.grey_peerlist_size": "P2P Grey Peers",
+  "app.lthn.chain.words.hash": "Hash",
+  "app.lthn.chain.words.height": "Height",
+  "app.lthn.chain.words.incoming_connections_count": "P2P Incoming",
+  "app.lthn.chain.words.install-blockchain": "Install Blockchain",
+  "app.lthn.chain.words.last_block_time": "Synchronised to Block:",
+  "app.lthn.chain.words.loading-data": "Loading Blockchain Data",
+  "app.lthn.chain.words.major_version": "Major Version",
+  "app.lthn.chain.words.miner_transaction": "Miner Transaction",
+  "app.lthn.chain.words.miner_tx": "POW Miner Transaction",
+  "app.lthn.chain.words.minor_version": "Minor Version",
+  "app.lthn.chain.words.nonce": "Block Solution",
+  "app.lthn.chain.words.orphan_status": "Valid Block",
+  "app.lthn.chain.words.outgoing_connections_count": "P2P Out",
+  "app.lthn.chain.words.reward": "Reward",
+  "app.lthn.chain.words.start_time": "Start Time",
+  "app.lthn.chain.words.status": "Status",
+  "app.lthn.chain.words.target": "Target",
+  "app.lthn.chain.words.target_height": "Target Height",
+  "app.lthn.chain.words.testnet": "Testnet",
+  "app.lthn.chain.words.timestamp": "Timestamp",
+  "app.lthn.chain.words.top_height": "Newest Block",
+  "app.lthn.chain.words.tx_count": "Total Transactions",
+  "app.lthn.chain.words.tx_pool_size": "Pending Transactions",
+  "app.lthn.chain.words.unlock_time": "Unlock Block",
+  "app.lthn.chain.words.valid": "Valid Block",
+  "app.lthn.chain.words.version": "Block Structure Version",
+  "app.lthn.chain.words.white_peerlist_size": "P2P Whitelist",
+  "app.lthn.console.title": "Console",
+  "app.lthn.wallet.button.create-wallet": "Create Wallet",
+  "app.lthn.wallet.button.restore-wallet": "Restore Wallet",
+  "app.lthn.wallet.button.unlock-wallet": "Unlock",
+  "app.lthn.wallet.label.address": "Address",
+  "app.lthn.wallet.label.autosave": "Save Open Wallet",
+  "app.lthn.wallet.label.filename": "Filename",
+  "app.lthn.wallet.label.restore-height": "Restore Height",
+  "app.lthn.wallet.label.spend-key": "Spend Key",
+  "app.lthn.wallet.label.view-key": "View Key",
+  "app.lthn.wallet.label.wallet-password": "Wallet Password",
+  "app.lthn.wallet.label.wallet-password-confirm": "Confirm Password",
+  "app.lthn.wallet.titles.new-wallet": "Make New Wallet",
+  "app.lthn.wallet.titles.restore-keys": "Restore From Keys",
+  "app.lthn.wallet.titles.restore-seed": "Restore From Seed",
+  "app.lthn.wallet.titles.unlock-wallet": "Unlock Wallet",
+  "app.lthn.wallet.titles.wallet-transactions": "Wallet Transactions",
+  "app.market.apps": "App Marketplace",
+  "app.market.dashboard": "Dashboard",
+  "app.market.installed": "Installed Apps",
+  "app.market.no-apps-installed": "You have no apps installed.",
+  "app.market.view-installable-apps": "View Installable Apps",
+  "app.title": "Lethean Desktop",
+  "charts.network-hashrate.subtitle": "Data Provided by",
+  "charts.network-hashrate.title": "Network Hash Rate",
+  "lang.de": "German",
+  "lang.en": "English",
+  "lang.es": "Spanish",
+  "lang.fr": "French",
+  "lang.ru": "Russian",
+  "lang.uk": "Ukrainian (Ukraine)",
+  "lang.zh": "Chinese",
+  "menu.about": "About",
+  "menu.activity": "Activity",
+  "menu.api": "api",
+  "menu.blockchain": "Blockchain",
+  "menu.build": "Build",
+  "menu.dashboard": "Dashboard",
+  "menu.docs": "Documentation",
+  "menu.documentation": "Documentation",
+  "menu.explorer": "Explorer",
+  "menu.help": "Help",
+  "menu.hub-admin": "Admin Hub",
+  "menu.hub-client": "Client Hub",
+  "menu.hub-developer": "Developer",
+  "menu.hub-gateway": "Gateway",
+  "menu.hub-server": "Server Hub",
+  "menu.info": "info",
+  "menu.logout": "Sign Out",
+  "menu.mining": "Mining",
+  "menu.settings": "Settings",
+  "menu.vpn": "VPN",
+  "menu.wallet": "Wallet",
+  "menu.your-profile": "Your Profile",
+  "view.dashboard.description": "Lethean (LTHN) Web app",
+  "view.dashboard.heading": "Lethean Dashboard",
+  "view.dashboard.title": "Lethean (LTHN)",
+  "view.wallets.description": "Crypto Wallet Manager",
+  "view.wallets.heading": "Wallet Manager",
+  "view.wallets.title": "Wallets",
+  "words.actions.add": "Add",
+  "words.actions.clone": "Clone",
+  "words.actions.edit": "Edit",
+  "words.actions.install": "Install",
+  "words.actions.new": "New",
+  "words.actions.remove": "Remove",
+  "words.actions.report": "Report",
+  "words.actions.save": "Save",
+  "words.states.installing": "Installing",
+  "words.states.installing_desc": "We are downloading the blockchain executables from GitHub to your Lethean user directory.",
+  "words.states.loading": "Loading",
+  "words.states.not_installed": "Not Installed",
+  "words.states.not_installed_desc": "Click Install Blockchain to download the latest Lethean Blockchain CLI",
+  "words.things.button": "Button",
+  "words.things.documentation": "Documentation",
+  "words.things.menu": "Menu",
+  "words.things.mining-pool": "Mining Pool",
+  "words.things.page": "Page",
+  "words.things.problem": "Problem",
+  "words.things.type": "Type",
+  "words.time.past.day": "a day ago",
+  "words.time.past.days": "days ago",
+  "words.time.past.hour": "an hour ago",
+  "words.time.past.hours": "hours ago",
+  "words.time.past.minute": "a minute ago",
+  "words.time.past.minutes": "minutes ago",
+  "words.time.past.month": "a month ago",
+  "words.time.past.months": " months ago",
+  "words.time.past.seconds": "a few seconds ago",
+  "words.time.past.year": "a year ago",
+  "words.time.past.years": "years ago"
+}
--- a/cmd/core-gui/frontend/public/icons/icon-128x128.png
+++ b/cmd/core-gui/frontend/public/icons/icon-128x128.png
--- a/cmd/core-gui/frontend/public/icons/icon-144x144.png
+++ b/cmd/core-gui/frontend/public/icons/icon-144x144.png
--- a/cmd/core-gui/frontend/public/icons/icon-152x152.png
+++ b/cmd/core-gui/frontend/public/icons/icon-152x152.png
--- a/cmd/core-gui/frontend/public/icons/icon-192x192.png
+++ b/cmd/core-gui/frontend/public/icons/icon-192x192.png
--- a/cmd/core-gui/frontend/public/icons/icon-384x384.png
+++ b/cmd/core-gui/frontend/public/icons/icon-384x384.png
--- a/cmd/core-gui/frontend/public/icons/icon-512x512.png
+++ b/cmd/core-gui/frontend/public/icons/icon-512x512.png
--- a/cmd/core-gui/frontend/public/icons/icon-72x72.png
+++ b/cmd/core-gui/frontend/public/icons/icon-72x72.png
--- a/cmd/core-gui/frontend/public/icons/icon-96x96.png
+++ b/cmd/core-gui/frontend/public/icons/icon-96x96.png
--- a/cmd/core-gui/frontend/public/manifest.webmanifest
+++ b/cmd/core-gui/frontend/public/manifest.webmanifest
@ -0,0 +1,57 @@
+{
+  "name": "angular-starter",
+  "short_name": "angular-starter",
+  "display": "standalone",
+  "scope": "./",
+  "start_url": "./",
+  "icons": [
+    {
+      "src": "icons/icon-72x72.png",
+      "sizes": "72x72",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-96x96.png",
+      "sizes": "96x96",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-128x128.png",
+      "sizes": "128x128",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-144x144.png",
+      "sizes": "144x144",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-152x152.png",
+      "sizes": "152x152",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "icons/icon-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}
--- a/cmd/core-gui/frontend/public/robots.txt
+++ b/cmd/core-gui/frontend/public/robots.txt
@ -0,0 +1,3 @@
+User-agent: *
+Disallow:
+Sitemap: https://angular.ganatan.com/sitemap.xml
--- a/cmd/core-gui/frontend/public/sitemap.xml
+++ b/cmd/core-gui/frontend/public/sitemap.xml
@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset
+      xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9
+            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
+<!-- created with Free Online Sitemap Generator www.xml-sitemaps.com -->
+
+
+<url>
+  <loc>https://angular.ganatan.com/</loc>
+  <lastmod>2023-12-08T12:51:22+00:00</lastmod>
+  <priority>1.00</priority>
+</url>
+<url>
+  <loc>https://angular.ganatan.com/about</loc>
+  <lastmod>2023-12-08T12:51:22+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://angular.ganatan.com/contact</loc>
+  <lastmod>2023-12-08T12:51:22+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://angular.ganatan.com/bootstrap</loc>
+  <lastmod>2023-12-08T12:51:22+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://angular.ganatan.com/services</loc>
+  <lastmod>2023-12-08T12:51:22+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://angular.ganatan.com/components</loc>
+  <lastmod>2023-12-08T12:51:22+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://angular.ganatan.com/httpclient</loc>
+  <lastmod>2023-12-08T12:51:22+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://angular.ganatan.com/forms</loc>
+  <lastmod>2023-12-08T12:51:22+00:00</lastmod>
+  <priority>0.80</priority>
+</url>
+<url>
+  <loc>https://angular.ganatan.com/about/experience</loc>
+  <lastmod>2023-12-08T12:51:22+00:00</lastmod>
+  <priority>0.64</priority>
+</url>
+<url>
+  <loc>https://angular.ganatan.com/about/skill</loc>
+  <lastmod>2023-12-08T12:51:22+00:00</lastmod>
+  <priority>0.64</priority>
+</url>
+<url>
+  <loc>https://angular.ganatan.com/contact/mailing</loc>
+  <lastmod>2023-12-08T12:51:22+00:00</lastmod>
+  <priority>0.64</priority>
+</url>
+<url>
+  <loc>https://angular.ganatan.com/contact/mapping</loc>
+  <lastmod>2023-12-08T12:51:22+00:00</lastmod>
+  <priority>0.64</priority>
+</url>
+<url>
+  <loc>https://angular.ganatan.com/contact/website</loc>
+  <lastmod>2023-12-08T12:51:22+00:00</lastmod>
+  <priority>0.64</priority>
+</url>
+
+</urlset>
--- a/cmd/core-gui/frontend/src/app/app.config.server.ts
+++ b/cmd/core-gui/frontend/src/app/app.config.server.ts
@ -0,0 +1,15 @@
+import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
+import { provideServerRendering, withRoutes } from '@angular/ssr';
+import { appConfig } from './app.config';
+import { serverRoutes } from './app.routes.server';
+import { TranslateLoader } from '@ngx-translate/core';
+import { TranslateServerLoader } from './translate-server.loader';
+
+const serverConfig: ApplicationConfig = {
+  providers: [
+    provideServerRendering(withRoutes(serverRoutes)),
+    { provide: TranslateLoader, useClass: TranslateServerLoader }
+  ]
+};
+
+export const config = mergeApplicationConfig(appConfig, serverConfig);
--- a/cmd/core-gui/frontend/src/app/app.config.ts
+++ b/cmd/core-gui/frontend/src/app/app.config.ts
@ -0,0 +1,42 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection, isDevMode, importProvidersFrom } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { HttpClient, provideHttpClient, withFetch } from '@angular/common/http';
+import { TranslateModule } from '@ngx-translate/core';
+import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';
+
+import { routes } from './app.routes';
+import { withInMemoryScrolling } from '@angular/router';
+import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
+import { provideServiceWorker } from '@angular/service-worker';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideHttpClient(
+      withFetch(),
+    ),
+    provideBrowserGlobalErrorListeners(),
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideRouter(routes,
+      withInMemoryScrolling({
+        scrollPositionRestoration: 'enabled',
+        anchorScrolling: 'enabled',
+      }),
+    ),
+    provideClientHydration(withEventReplay()),
+    provideServiceWorker('ngsw-worker.js', {
+      enabled: !isDevMode(),
+      registrationStrategy: 'registerWhenStable:30000'
+    }),
+
+    // Add ngx-translate providers
+    importProvidersFrom(
+      TranslateModule.forRoot({
+        fallbackLang: 'en'
+      })
+    ),
+    provideTranslateHttpLoader({
+      prefix: './i18n/',
+      suffix: '.json'
+    })
+  ]
+};
--- a/cmd/core-gui/frontend/src/app/app.css
+++ b/cmd/core-gui/frontend/src/app/app.css
--- a/cmd/core-gui/frontend/src/app/app.html
+++ b/cmd/core-gui/frontend/src/app/app.html
@ -0,0 +1,140 @@
+<wa-page mobile-breakpoint="960">
+
+  <!-- Shell: left nav + content -->
+  <div class="app-shell"
+       style="display: grid; grid-template-columns: 280px 1fr; min-height: calc(100vh - 56px - 56px);">
+    <!-- Left navigation drawer (collapsible) -->
+    <wa-drawer>
+      <nav slot="navigation">
+        <a routerLink="/" class="sidebar-link">Home</a>
+        <a routerLink="/domain-manager" class="sidebar-link">Send</a>
+        <a routerLink="/settings" class="sidebar-link">Settings</a>
+        <a routerLink="/" class="icon-item active" aria-label="Dashboard">
+          <i class="fas fa-home"></i>
+        </a>
+        <a routerLink="/team" class="icon-item" aria-label="Team">
+          <i class="fas fa-users"></i>
+        </a>
+        <a routerLink="/projects" class="icon-item" aria-label="Projects">
+          <i class="fas fa-briefcase"></i>
+        </a>
+        <a routerLink="/calendar" class="icon-item" aria-label="Calendar">
+          <i class="fas fa-calendar-alt"></i>
+        </a>
+        <a routerLink="/documents" class="icon-item" aria-label="Documents">
+          <i class="fas fa-file-alt"></i>
+        </a>
+        <a routerLink="/reports" class="icon-item" aria-label="Reports">
+          <i class="fas fa-chart-pie"></i>
+        </a>
+        <!-- Add more nav items as needed -->
+      </nav>
+
+
+    </wa-drawer>
+
+    <main>
+      <router-outlet></router-outlet>
+    </main>
+  </div>
+
+  <!-- Footer -->
+  <app-footer slot="footer"></app-footer>
+</wa-page>
+
+
+<!--&lt;!&ndash; Top-level wrapper using Web Awesome (no Tailwind) &ndash;&gt;-->
+<!--<div class="app-frame">-->
+<!--  &lt;!&ndash; Mobile sidebar via Drawer &ndash;&gt;-->
+<!--  <wa-drawer #mobileSidebar class="mobile-sidebar" placement="start" style="&#45;&#45;size: 20rem;">-->
+<!--    <div class="sidebar-inner">-->
+<!--      <div class="brand-row">-->
+<!--        <img src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=500" alt="Your Company" class="brand-logo" />-->
+<!--      </div>-->
+<!--      <nav class="nav-list">-->
+<!--        <a routerLink="/" class="nav-item active">-->
+<!--          <i class="fas fa-home"></i>-->
+<!--          <span>Dashboard</span>-->
+<!--        </a>-->
+<!--        <a routerLink="/team" class="nav-item">-->
+<!--          <i class="fas fa-users"></i>-->
+<!--          <span>Team</span>-->
+<!--        </a>-->
+<!--        <a routerLink="/projects" class="nav-item">-->
+<!--          <i class="fas fa-briefcase"></i>-->
+<!--          <span>Projects</span>-->
+<!--        </a>-->
+<!--        <a routerLink="/calendar" class="nav-item">-->
+<!--          <i class="fas fa-calendar-alt"></i>-->
+<!--          <span>Calendar</span>-->
+<!--        </a>-->
+<!--        <a routerLink="/documents" class="nav-item">-->
+<!--          <i class="fas fa-file-alt"></i>-->
+<!--          <span>Documents</span>-->
+<!--        </a>-->
+<!--        <a routerLink="/reports" class="nav-item">-->
+<!--          <i class="fas fa-chart-pie"></i>-->
+<!--          <span>Reports</span>-->
+<!--        </a>-->
+<!--      </nav>-->
+<!--    </div>-->
+<!--  </wa-drawer>-->
+
+
+<!--  &lt;!&ndash; Main column (left padding on lg for the fixed sidebar) &ndash;&gt;-->
+<!--  <div class="main-col">-->
+<!--    &lt;!&ndash; Topbar &ndash;&gt;-->
+<!--    <header class="topbar">-->
+<!--      <wa-button variant="text" size="small" class="lg-hidden" (click)="onToggleSidebar()" aria-label="Open sidebar">-->
+<!--        <i class="fas fa-bars"></i>-->
+<!--      </wa-button>-->
+
+<!--      <div class="topbar-sep lg-hidden" aria-hidden="true"></div>-->
+
+<!--      <div class="topbar-flex">-->
+<!--        <form class="search-form" role="search">-->
+<!--          <wa-input placeholder="Search" size="small" pill>-->
+<!--            <i slot="prefix" class="fas fa-search"></i>-->
+<!--          </wa-input>-->
+<!--        </form>-->
+
+<!--        <div class="topbar-actions">-->
+<!--          <wa-button variant="text" size="small" aria-label="View notifications">-->
+<!--            <i class="fas fa-bell"></i>-->
+<!--          </wa-button>-->
+
+<!--          <div class="lg-sep" aria-hidden="true"></div>-->
+
+<!--          &lt;!&ndash; Profile dropdown &ndash;&gt;-->
+<!--          <wa-dropdown>-->
+<!--            <wa-button slot="trigger" size="small" pill>-->
+<!--              <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?auto=format&fit=facearea&facepad=2&w=48&h=48&q=80"-->
+<!--                   alt="" class="avatar" />-->
+<!--              <span class="user-name lg-only">Tom Cook</span>-->
+<!--              <i class="fas fa-chevron-down lg-only"></i>-->
+<!--            </wa-button>-->
+<!--            <wa-menu>-->
+<!--              <wa-menu-item>Your profile</wa-menu-item>-->
+<!--              <wa-menu-item>Sign out</wa-menu-item>-->
+<!--            </wa-menu>-->
+<!--          </wa-dropdown>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </header>-->
+
+<!--    &lt;!&ndash; Primary content area (single Angular outlet) &ndash;&gt;-->
+<!--    <main class="content">-->
+<!--      <router-outlet></router-outlet>-->
+<!--    </main>-->
+<!--  </div>-->
+
+<!--  &lt;!&ndash; Optional secondary aside on xl+ screens &ndash;&gt;-->
+<!--  <aside class="secondary-aside">-->
+<!--    &lt;!&ndash; Secondary column content (hidden on smaller screens) &ndash;&gt;-->
+<!--  </aside>-->
+
+<!--  &lt;!&ndash; Footer (existing component) &ndash;&gt;-->
+<!--  <app-footer></app-footer>-->
+<!--</div>-->
+
+
--- a/cmd/core-gui/frontend/src/app/app.routes.server.ts
+++ b/cmd/core-gui/frontend/src/app/app.routes.server.ts
@ -0,0 +1,8 @@
+import { RenderMode, ServerRoute } from '@angular/ssr';
+
+export const serverRoutes: ServerRoute[] = [
+  {
+    path: '**',
+    renderMode: RenderMode.Prerender
+  }
+];
--- a/cmd/core-gui/frontend/src/app/app.routes.ts
+++ b/cmd/core-gui/frontend/src/app/app.routes.ts
@ -0,0 +1,25 @@
+import { Routes } from '@angular/router';
+import { HomePage } from './pages/home/home.page';
+import { SearchTldPage } from './pages/search-tld/search-tld.page';
+import { OnboardingPage } from './pages/onboarding/onboarding.page';
+import { SettingsPage } from './pages/settings/settings.page';
+import { DomainManagerPage } from './pages/domain-manager/domain-manager.page';
+import { ExchangePage } from './pages/exchange/exchange.page';
+
+export const routes: Routes = [
+  { path: '', redirectTo: '/account', pathMatch: 'full' },
+  { path: 'account', component: HomePage, title: 'Portfolio • Bob Wallet' },
+  { path: 'send', component: HomePage, title: 'Send • Bob Wallet' },
+  { path: 'receive', component: HomePage, title: 'Receive • Bob Wallet' },
+  { path: 'domain-manager', component: DomainManagerPage, title: 'Domain Manager • Bob Wallet' },
+  { path: 'domains', component: SearchTldPage, title: 'Browse Domains • Bob Wallet' },
+  { path: 'bids', component: HomePage, title: 'Your Bids • Bob Wallet' },
+  { path: 'watching', component: HomePage, title: 'Watching • Bob Wallet' },
+  { path: 'exchange', component: ExchangePage, title: 'Exchange • Bob Wallet' },
+  { path: 'get-coins', component: HomePage, title: 'Claim Airdrop • Bob Wallet' },
+  { path: 'sign-message', component: HomePage, title: 'Sign Message • Bob Wallet' },
+  { path: 'verify-message', component: HomePage, title: 'Verify Message • Bob Wallet' },
+  { path: 'settings', component: SettingsPage, title: 'Settings • Bob Wallet' },
+  { path: 'onboarding', component: OnboardingPage, title: 'Onboarding • Bob Wallet' },
+  { path: '**', redirectTo: '/account' }
+];
--- a/cmd/core-gui/frontend/src/app/app.spec.ts
+++ b/cmd/core-gui/frontend/src/app/app.spec.ts
@ -0,0 +1,24 @@
+import { TestBed } from '@angular/core/testing';
+import { App } from './app';
+import { ActivatedRoute } from '@angular/router';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+      providers: [
+        {
+          provide: ActivatedRoute,
+          useValue: {}
+        }
+      ]
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+});
--- a/cmd/core-gui/frontend/src/app/app.ts
+++ b/cmd/core-gui/frontend/src/app/app.ts
@ -0,0 +1,40 @@
+import { Component, OnInit, Inject, PLATFORM_ID, CUSTOM_ELEMENTS_SCHEMA, ViewChild, ElementRef } from '@angular/core';
+import { CommonModule,  DOCUMENT, isPlatformBrowser } from '@angular/common';
+import {RouterLink, RouterOutlet} from '@angular/router';
+import { FooterComponent } from './shared/components/footer/footer.component';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import {Subscription} from 'rxjs';
+
+@Component({
+  selector: 'app-root',
+  imports: [
+    CommonModule,
+    RouterOutlet,
+    FooterComponent,
+    TranslateModule,
+    RouterLink
+  ],
+  templateUrl: './app.html',
+  styleUrl: './app.css',
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class App {
+  @ViewChild('sidebar', { read: ElementRef, static: false }) sidebar?: ElementRef<HTMLElement>;
+
+  sidebarOpen = false;
+  userMenuOpen = false;
+  currentRole = 'Developer';
+
+  time: string = '';
+
+  constructor(
+    @Inject(DOCUMENT) private document: Document,
+    @Inject(PLATFORM_ID) private platformId: object,
+    private translateService: TranslateService
+  ) {
+    // Set default language
+    this.translateService.use('en');
+  }
+
+}
--- a/cmd/core-gui/frontend/src/app/core/services/seo/seo.service.spec.ts
+++ b/cmd/core-gui/frontend/src/app/core/services/seo/seo.service.spec.ts
@ -0,0 +1,63 @@
+import { TestBed } from '@angular/core/testing';
+import { Meta, Title } from '@angular/platform-browser';
+import { SeoService } from './seo.service';
+import { itGood, itBad, itUgly, trio } from 'src/testing/gbu';
+
+describe('SeoService', () => {
+  let service: SeoService;
+  let metaSpy: jasmine.SpyObj<Meta>;
+  let titleSpy: jasmine.SpyObj<Title>;
+
+  beforeEach(() => {
+    metaSpy = jasmine.createSpyObj('Meta', ['updateTag']);
+    titleSpy = jasmine.createSpyObj('Title', ['setTitle']);
+
+    TestBed.configureTestingModule({
+      providers: [
+        SeoService,
+        { provide: Meta, useValue: metaSpy },
+        { provide: Title, useValue: titleSpy }
+      ]
+    });
+    service = TestBed.inject(SeoService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  describe('setMetaTitle', () => {
+    trio('sets document title', {
+      good: () => {
+        service.setMetaTitle('Hello');
+        expect(titleSpy.setTitle).toHaveBeenCalledOnceWith('Hello');
+      },
+      bad: () => {
+        service.setMetaTitle('');
+        expect(titleSpy.setTitle).toHaveBeenCalledWith('');
+      },
+      ugly: () => {
+        // Force invalid via any cast; ensure we do not throw
+        expect(() => service.setMetaTitle(null as any)).not.toThrow();
+        expect(titleSpy.setTitle).toHaveBeenCalledWith(null as any);
+      }
+    });
+  });
+
+  describe('setMetaDescription', () => {
+    itGood('updates description meta tag', () => {
+      service.setMetaDescription('desc');
+      expect(metaSpy.updateTag).toHaveBeenCalledWith({ name: 'description', content: 'desc' });
+    });
+
+    itBad('handles empty description', () => {
+      service.setMetaDescription('');
+      expect(metaSpy.updateTag).toHaveBeenCalledWith({ name: 'description', content: '' });
+    });
+
+    itUgly('does not throw on invalid description', () => {
+      expect(() => service.setMetaDescription(null as any)).not.toThrow();
+      expect(metaSpy.updateTag).toHaveBeenCalledWith({ name: 'description', content: null as any });
+    });
+  });
+});
--- a/cmd/core-gui/frontend/src/app/core/services/seo/seo.service.ts
+++ b/cmd/core-gui/frontend/src/app/core/services/seo/seo.service.ts
@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+import { Meta, Title } from '@angular/platform-browser';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SeoService {
+
+  constructor(
+    private meta: Meta,
+    private titleService: Title) {
+
+  }
+
+  public setMetaDescription(content: string) {
+
+    this.meta.updateTag(
+      {
+        name: 'description',
+        content: content
+      });
+  }
+
+  public setMetaTitle(title:string) {
+
+    this.titleService.setTitle(title);
+
+  }
+
+}
--- a/cmd/core-gui/frontend/src/app/custom-elements.module.ts
+++ b/cmd/core-gui/frontend/src/app/custom-elements.module.ts
@ -0,0 +1,8 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import {  } from "@awesome.me/webawesome/dist/webawesome.loader.js"
+// This module enables Angular to accept unknown custom elements (Web Awesome components)
+// without throwing template parse errors.
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class CustomElementsModule {}
--- a/cmd/core-gui/frontend/src/app/pages/domain-manager/domain-manager.page.spec.ts
+++ b/cmd/core-gui/frontend/src/app/pages/domain-manager/domain-manager.page.spec.ts
@ -0,0 +1,81 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { DomainManagerPage } from './domain-manager.page';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+describe('DomainManagerPage', () => {
+  let component: DomainManagerPage;
+  let fixture: ComponentFixture<DomainManagerPage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DomainManagerPage, RouterTestingModule],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(DomainManagerPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+    // NEW: Verify component is an instance of DomainManagerPage
+    expect(component instanceof DomainManagerPage).toBe(true);
+  });
+
+  it('should initialize with empty searchQuery', () => {
+    expect(component.searchQuery).toBe('');
+    // NEW: Verify searchQuery is a string type
+    expect(typeof component.searchQuery).toBe('string');
+  });
+
+  it('should initialize with empty domains array', () => {
+    expect(component.domains).toEqual([]);
+    // NEW: Verify domains is an array
+    expect(Array.isArray(component.domains)).toBe(true);
+  });
+
+  it('should render domain manager header', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const header = compiled.querySelector('.domain-manager__header');
+    expect(header).toBeTruthy();
+    // NEW: Verify header contains actions section
+    const actions = header?.querySelector('.domain-manager__actions');
+    expect(actions).toBeTruthy();
+  });
+
+  it('should display search input', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const searchInput = compiled.querySelector('wa-input');
+    expect(searchInput).toBeTruthy();
+    // NEW: Verify search input has placeholder attribute
+    expect(searchInput?.hasAttribute('placeholder')).toBe(true);
+  });
+
+  it('should show empty state when no domains', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const emptyState = compiled.querySelector('.domain-manager__empty');
+    expect(emptyState).toBeTruthy();
+    expect(emptyState?.textContent).toContain('You do not own any names yet');
+    // NEW: Verify empty state is within a callout
+    const callout = compiled.querySelector('wa-callout');
+    expect(callout).toBeTruthy();
+  });
+
+  it('should render action buttons in header', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const buttons = compiled.querySelectorAll('.domain-manager__actions wa-button');
+    expect(buttons.length).toBeGreaterThan(0);
+    // NEW: Verify exactly 3 action buttons (Export, Bulk Transfer, Claim Name)
+    expect(buttons.length).toBe(3);
+  });
+
+  it('should have viewDomain method', () => {
+    spyOn(console, 'log');
+    component.viewDomain('testdomain');
+    expect(console.log).toHaveBeenCalledWith('View domain:', 'testdomain');
+    // NEW: Verify viewDomain is a function
+    expect(typeof component.viewDomain).toBe('function');
+  });
+});
--- a/cmd/core-gui/frontend/src/app/pages/domain-manager/domain-manager.page.ts
+++ b/cmd/core-gui/frontend/src/app/pages/domain-manager/domain-manager.page.ts
@ -0,0 +1,107 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    selector: 'app-domain-manager-page',
+    imports: [FormsModule, TranslateModule],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    template: `
+    <div class="domain-manager">
+      <div class="domain-manager__header">
+        <wa-input [placeholder]="'domainManager.searchPlaceholder' | translate" style="flex: 1; max-width: 400px;">
+          <input slot="input" [(ngModel)]="searchQuery" />
+        </wa-input>
+
+        <div class="domain-manager__actions">
+          <wa-button size="small" variant="neutral">
+            <wa-icon slot="prefix" name="fa-solid fa-download"></wa-icon>
+            {{ 'domainManager.export' | translate }}
+          </wa-button>
+          <wa-button size="small" variant="neutral">
+            <wa-icon slot="prefix" name="fa-solid fa-arrow-right-arrow-left"></wa-icon>
+            {{ 'domainManager.bulkTransfer' | translate }}
+          </wa-button>
+          <wa-button size="small" variant="primary">
+            <wa-icon slot="prefix" name="fa-solid fa-receipt"></wa-icon>
+            {{ 'domainManager.claimNamePayment' | translate }}
+          </wa-button>
+        </div>
+      </div>
+
+      @if (domains.length === 0) {
+        <div class="domain-manager__content">
+          <wa-callout variant="neutral">
+            <div class="domain-manager__empty">
+              <wa-icon name="fa-solid fa-folder-open" style="font-size: 3rem; opacity: 0.3; margin-bottom: 1rem;"></wa-icon>
+              <p>{{ 'domainManager.emptyState' | translate }}</p>
+              <p style="margin-top: 0.5rem;">
+                <a routerLink="/domains" style="color: var(--wa-color-primary-600); text-decoration: underline;">{{ 'domainManager.browseDomainsLink' | translate }}</a> {{ 'domainManager.toGetStarted' | translate }}
+              </p>
+            </div>
+          </wa-callout>
+        </div>
+      }
+
+      @if (domains.length > 0) {
+        <div class="domain-manager__content">
+          <div class="domain-manager__table">
+            <div class="table-header">
+              <div class="table-col">{{ 'domainManager.name' | translate }}</div>
+              <div class="table-col">{{ 'domainManager.expires' | translate }}</div>
+              <div class="table-col">{{ 'domainManager.highestBid' | translate }}</div>
+            </div>
+            @for (domain of domains; track domain) {
+              <div class="table-row" (click)="viewDomain(domain.name)">
+                <div class="table-col">{{domain.name}}/</div>
+                <div class="table-col">{{domain.expires}}</div>
+                <div class="table-col">{{domain.highestBid}} {{ 'common.hns' | translate }}</div>
+              </div>
+            }
+          </div>
+          <div class="domain-manager__pagination">
+            <wa-select size="small" value="10" style="width: 80px;">
+              <wa-option value="5">5</wa-option>
+              <wa-option value="10">10</wa-option>
+              <wa-option value="20">20</wa-option>
+              <wa-option value="50">50</wa-option>
+            </wa-select>
+            <span class="pagination-info">{{ 'domainManager.showingDomains' | translate: {count: domains.length} }}</span>
+          </div>
+        </div>
+      }
+    </div>
+    `,
+    styles: [`
+    .domain-manager { display: flex; flex-direction: column; gap: 1.5rem; }
+
+    .domain-manager__header { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
+    .domain-manager__actions { display: flex; gap: 0.5rem; }
+
+    .domain-manager__content { }
+    .domain-manager__empty { text-align: center; padding: 2rem; }
+    .domain-manager__empty p { margin: 0; color: var(--wa-color-neutral-600, #4b5563); }
+
+    .domain-manager__table { border: 1px solid var(--wa-color-neutral-200, #e5e7eb); border-radius: 0.5rem; overflow: hidden; }
+    .table-header { display: grid; grid-template-columns: 2fr 1fr 1fr; background: var(--wa-color-neutral-50, #fafafa); font-weight: 600; font-size: 0.875rem; }
+    .table-row { display: grid; grid-template-columns: 2fr 1fr 1fr; border-top: 1px solid var(--wa-color-neutral-200, #e5e7eb); cursor: pointer; transition: background 0.15s; }
+    .table-row:hover { background: var(--wa-color-neutral-50, #fafafa); }
+    .table-col { padding: 0.75rem 1rem; }
+
+    .domain-manager__pagination { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
+    .pagination-info { font-size: 0.875rem; color: var(--wa-color-neutral-600, #4b5563); }
+  `]
+})
+export class DomainManagerPage {
+  searchQuery = '';
+  domains: any[] = [];
+
+  constructor(private router: Router) {}
+
+  viewDomain(name: string) {
+    // Navigate to individual domain view
+    console.log('View domain:', name);
+  }
+}
--- a/cmd/core-gui/frontend/src/app/pages/exchange/exchange.page.spec.ts
+++ b/cmd/core-gui/frontend/src/app/pages/exchange/exchange.page.spec.ts
@ -0,0 +1,117 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ExchangePage } from './exchange.page';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+describe('ExchangePage', () => {
+  let component: ExchangePage;
+  let fixture: ComponentFixture<ExchangePage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ExchangePage],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ExchangePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+    // NEW: Verify component is an instance of ExchangePage
+    expect(component instanceof ExchangePage).toBe(true);
+  });
+
+  it('should render exchange container', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const exchange = compiled.querySelector('.exchange');
+    expect(exchange).toBeTruthy();
+    // NEW: Verify exchange container has tab group
+    const tabGroup = exchange?.querySelector('wa-tab-group');
+    expect(tabGroup).toBeTruthy();
+  });
+
+  it('should render tab group', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const tabGroup = compiled.querySelector('wa-tab-group');
+    expect(tabGroup).toBeTruthy();
+    // NEW: Verify tab group contains tabs
+    const tabs = tabGroup?.querySelectorAll('wa-tab');
+    expect(tabs?.length).toBeGreaterThan(0);
+  });
+
+  it('should render three tabs', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const tabs = compiled.querySelectorAll('wa-tab');
+    expect(tabs.length).toBe(3);
+    // NEW: Verify corresponding tab panels exist
+    const tabPanels = compiled.querySelectorAll('wa-tab-panel');
+    expect(tabPanels.length).toBe(3);
+  });
+
+  it('should have Listings tab', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const tabs = Array.from(compiled.querySelectorAll('wa-tab'));
+    const listingsTab = tabs.find(tab => tab.textContent?.includes('Listings'));
+    expect(listingsTab).toBeTruthy();
+    // NEW: Verify listings tab has correct panel attribute
+    expect(listingsTab?.getAttribute('panel')).toBe('listings');
+  });
+
+  it('should have Fills tab', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const tabs = Array.from(compiled.querySelectorAll('wa-tab'));
+    const fillsTab = tabs.find(tab => tab.textContent?.includes('Fills'));
+    expect(fillsTab).toBeTruthy();
+    // NEW: Verify fills tab has correct panel attribute
+    expect(fillsTab?.getAttribute('panel')).toBe('fills');
+  });
+
+  it('should have Auctions tab', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const tabs = Array.from(compiled.querySelectorAll('wa-tab'));
+    const auctionsTab = tabs.find(tab => tab.textContent?.includes('Auctions'));
+    expect(auctionsTab).toBeTruthy();
+    // NEW: Verify auctions tab has correct panel attribute
+    expect(auctionsTab?.getAttribute('panel')).toBe('auctions');
+  });
+
+  it('should render three tab panels', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const tabPanels = compiled.querySelectorAll('wa-tab-panel');
+    expect(tabPanels.length).toBe(3);
+    // NEW: Verify each panel has correct name attribute
+    const names = Array.from(tabPanels).map(p => p.getAttribute('name'));
+    expect(names).toContain('listings');
+    expect(names).toContain('fills');
+    expect(names).toContain('auctions');
+  });
+
+  it('should display empty state for listings', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const listingsPanel = compiled.querySelector('wa-tab-panel[name="listings"]');
+    expect(listingsPanel?.textContent).toContain('You have no active listings');
+    // NEW: Verify listings panel has callout
+    const callout = listingsPanel?.querySelector('wa-callout');
+    expect(callout).toBeTruthy();
+  });
+
+  it('should display empty state for fills', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const fillsPanel = compiled.querySelector('wa-tab-panel[name="fills"]');
+    expect(fillsPanel?.textContent).toContain('You have no filled orders');
+    // NEW: Verify fills panel has empty state icon
+    const icon = fillsPanel?.querySelector('wa-icon');
+    expect(icon).toBeTruthy();
+  });
+
+  it('should display empty state for auctions', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const auctionsPanel = compiled.querySelector('wa-tab-panel[name="auctions"]');
+    expect(auctionsPanel?.textContent).toContain('No active auctions found');
+    // NEW: Verify auctions panel has refresh button
+    const button = auctionsPanel?.querySelector('wa-button');
+    expect(button).toBeTruthy();
+  });
+});
--- a/cmd/core-gui/frontend/src/app/pages/exchange/exchange.page.ts
+++ b/cmd/core-gui/frontend/src/app/pages/exchange/exchange.page.ts
@ -0,0 +1,91 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    selector: 'app-exchange-page',
+    imports: [TranslateModule],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    template: `
+    <div class="exchange">
+      <wa-tab-group>
+        <wa-tab slot="nav" panel="listings">{{ 'exchange.listings' | translate }}</wa-tab>
+        <wa-tab slot="nav" panel="fills">{{ 'exchange.fills' | translate }}</wa-tab>
+        <wa-tab slot="nav" panel="auctions">{{ 'exchange.auctions' | translate }}</wa-tab>
+
+        <wa-tab-panel name="listings">
+          <div class="exchange__content">
+            <div class="exchange__header">
+              <h3 style="margin: 0;">{{ 'exchange.yourListings' | translate }}</h3>
+              <wa-button size="small" variant="primary">
+                <wa-icon slot="prefix" name="fa-solid fa-plus"></wa-icon>
+                {{ 'exchange.createListing' | translate }}
+              </wa-button>
+            </div>
+
+            <wa-callout variant="neutral">
+              <div class="exchange__empty">
+                <wa-icon name="fa-solid fa-store" style="font-size: 2.5rem; opacity: 0.3; margin-bottom: 1rem;"></wa-icon>
+                <p>{{ 'exchange.noActiveListings' | translate }}</p>
+                <p style="margin-top: 0.5rem; font-size: 0.875rem; color: var(--wa-color-neutral-600);">
+                  {{ 'exchange.listDomainsInfo' | translate }}
+                </p>
+              </div>
+            </wa-callout>
+          </div>
+        </wa-tab-panel>
+
+        <wa-tab-panel name="fills">
+          <div class="exchange__content">
+            <div class="exchange__header">
+              <h3 style="margin: 0;">{{ 'exchange.yourFills' | translate }}</h3>
+            </div>
+
+            <wa-callout variant="neutral">
+              <div class="exchange__empty">
+                <wa-icon name="fa-solid fa-handshake" style="font-size: 2.5rem; opacity: 0.3; margin-bottom: 1rem;"></wa-icon>
+                <p>{{ 'exchange.noFilledOrders' | translate }}</p>
+                <p style="margin-top: 0.5rem; font-size: 0.875rem; color: var(--wa-color-neutral-600);">
+                  {{ 'exchange.completedPurchasesInfo' | translate }}
+                </p>
+              </div>
+            </wa-callout>
+          </div>
+        </wa-tab-panel>
+
+        <wa-tab-panel name="auctions">
+          <div class="exchange__content">
+            <div class="exchange__header">
+              <h3 style="margin: 0;">{{ 'exchange.marketplaceAuctions' | translate }}</h3>
+              <wa-button size="small" variant="neutral">
+                <wa-icon slot="prefix" name="fa-solid fa-rotate"></wa-icon>
+                {{ 'exchange.refresh' | translate }}
+              </wa-button>
+            </div>
+
+            <wa-callout variant="neutral">
+              <div class="exchange__empty">
+                <wa-icon name="fa-solid fa-gavel" style="font-size: 2.5rem; opacity: 0.3; margin-bottom: 1rem;"></wa-icon>
+                <p>{{ 'exchange.noActiveAuctions' | translate }}</p>
+                <p style="margin-top: 0.5rem; font-size: 0.875rem; color: var(--wa-color-neutral-600);">
+                  {{ 'exchange.browseAuctionsInfo' | translate }}
+                </p>
+              </div>
+            </wa-callout>
+          </div>
+        </wa-tab-panel>
+      </wa-tab-group>
+    </div>
+  `,
+    styles: [`
+    .exchange { }
+
+    .exchange__content { padding: 1.5rem 0; }
+
+    .exchange__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+
+    .exchange__empty { text-align: center; padding: 2rem 1rem; }
+    .exchange__empty p { margin: 0; color: var(--wa-color-neutral-700, #374151); }
+  `]
+})
+export class ExchangePage {}
--- a/cmd/core-gui/frontend/src/app/pages/home/home.page.spec.ts
+++ b/cmd/core-gui/frontend/src/app/pages/home/home.page.spec.ts
@ -0,0 +1,86 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { HomePage } from './home.page';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+describe('HomePage', () => {
+  let component: HomePage;
+  let fixture: ComponentFixture<HomePage>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HomePage],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HomePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+    // NEW: Verify component is an instance of HomePage
+    expect(component instanceof HomePage).toBe(true);
+  });
+
+  it('should render account header with balance sections', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const header = compiled.querySelector('.account__header');
+    expect(header).toBeTruthy();
+    // NEW: Verify header has at least 2 sections (spendable and locked)
+    const sections = compiled.querySelectorAll('.account__header__section');
+    expect(sections.length).toBeGreaterThanOrEqual(2);
+  });
+
+  it('should display spendable balance section', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const spendableLabel = compiled.querySelector('.label');
+    expect(spendableLabel?.textContent).toContain('Spendable');
+    // NEW: Verify there's an amount display
+    const amount = compiled.querySelector('.amount');
+    expect(amount).toBeTruthy();
+  });
+
+  it('should render actionable cards grid', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const cardsGrid = compiled.querySelector('.account__cards');
+    expect(cardsGrid).toBeTruthy();
+    // NEW: Verify grid contains wa-card elements
+    const cards = cardsGrid?.querySelectorAll('wa-card');
+    expect(cards?.length).toBeGreaterThan(0);
+  });
+
+  it('should render six action cards', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const cards = compiled.querySelectorAll('wa-card');
+    expect(cards.length).toBe(6);
+    // NEW: Verify each card has an icon
+    const icons = compiled.querySelectorAll('.account__card__icon');
+    expect(icons.length).toBe(6);
+  });
+
+  it('should render transaction history section', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const transactions = compiled.querySelector('.account__transactions');
+    expect(transactions).toBeTruthy();
+    // NEW: Verify transactions section has a title
+    const title = transactions?.querySelector('.account__panel-title');
+    expect(title).toBeTruthy();
+  });
+
+  it('should display transaction history title', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const title = compiled.querySelector('.account__panel-title');
+    expect(title?.textContent).toContain('Transaction History');
+    // NEW: Verify title is not empty
+    expect(title?.textContent?.trim().length).toBeGreaterThan(0);
+  });
+
+  it('should show empty state for transactions', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const callout = compiled.querySelector('wa-callout');
+    expect(callout?.textContent).toContain('No transactions yet');
+    // NEW: Verify callout has neutral variant attribute
+    expect(callout?.getAttribute('variant')).toBe('neutral');
+  });
+});
--- a/cmd/core-gui/frontend/src/app/pages/home/home.page.ts
+++ b/cmd/core-gui/frontend/src/app/pages/home/home.page.ts
@ -0,0 +1,139 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+    selector: 'app-home-page',
+    imports: [TranslateModule],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    template: `
+    <div class="account">
+      <!-- Balance Header -->
+      <div class="account__header">
+        <div class="account__header__section">
+          <span class="label">{{ 'home.spendable' | translate }}</span>
+          <p class="amount">0.00 {{ 'common.hns' | translate }}</p>
+          <span class="subtext">~$0.00 {{ 'common.usd' | translate }}</span>
+        </div>
+
+        <div class="account__header__section">
+          <span class="label">{{ 'home.locked' | translate }}</span>
+          <p class="amount">0.00 {{ 'common.hns' | translate }}</p>
+          <span class="subtext">{{ 'home.inBids' | translate }} (0 {{ 'home.bids' | translate }})</span>
+        </div>
+      </div>
+
+      <!-- Actionable Items Cards -->
+      <div class="account__cards">
+        <wa-card class="account__card">
+          <div slot="header" class="account__card__header">
+            <wa-icon name="fa-solid fa-eye" class="account__card__icon"></wa-icon>
+            <span>{{ 'home.revealable' | translate }}</span>
+          </div>
+          <div class="account__card__content">
+            <div class="account__card__amount">0.00 {{ 'common.hns' | translate }}</div>
+            <div class="account__card__detail">{{ 'home.bidsReadyToReveal' | translate: {count: 0} }}</div>
+            <div class="account__card__action">
+              <wa-button size="small" disabled>{{ 'home.revealAll' | translate }}</wa-button>
+            </div>
+          </div>
+        </wa-card>
+
+        <wa-card class="account__card">
+          <div slot="header" class="account__card__header">
+            <wa-icon name="fa-solid fa-gift" class="account__card__icon"></wa-icon>
+            <span>{{ 'home.redeemable' | translate }}</span>
+          </div>
+          <div class="account__card__content">
+            <div class="account__card__amount">0.00 {{ 'common.hns' | translate }}</div>
+            <div class="account__card__detail">{{ 'home.bidsReadyToRedeem' | translate: {count: 0} }}</div>
+            <div class="account__card__action">
+              <wa-button size="small" disabled>{{ 'home.redeemAll' | translate }}</wa-button>
+            </div>
+          </div>
+        </wa-card>
+
+        <wa-card class="account__card">
+          <div slot="header" class="account__card__header">
+            <wa-icon name="fa-solid fa-pen-to-square" class="account__card__icon"></wa-icon>
+            <span>{{ 'home.registerable' | translate }}</span>
+          </div>
+          <div class="account__card__content">
+            <div class="account__card__amount">0.00 {{ 'common.hns' | translate }}</div>
+            <div class="account__card__detail">{{ 'home.namesReadyToRegister' | translate: {count: 0} }}</div>
+            <div class="account__card__action">
+              <wa-button size="small" disabled>{{ 'home.registerAll' | translate }}</wa-button>
+            </div>
+          </div>
+        </wa-card>
+
+        <wa-card class="account__card">
+          <div slot="header" class="account__card__header">
+            <wa-icon name="fa-solid fa-clock-rotate-left" class="account__card__icon"></wa-icon>
+            <span>{{ 'home.renewable' | translate }}</span>
+          </div>
+          <div class="account__card__content">
+            <div class="account__card__detail">{{ 'home.domainsExpiringSoon' | translate: {count: 0} }}</div>
+            <div class="account__card__action">
+              <wa-button size="small" disabled>{{ 'home.renewAll' | translate }}</wa-button>
+            </div>
+          </div>
+        </wa-card>
+
+        <wa-card class="account__card">
+          <div slot="header" class="account__card__header">
+            <wa-icon name="fa-solid fa-arrow-right-arrow-left" class="account__card__icon"></wa-icon>
+            <span>{{ 'home.transferring' | translate }}</span>
+          </div>
+          <div class="account__card__content">
+            <div class="account__card__detail">{{ 'home.domainsInTransfer' | translate: {count: 0} }}</div>
+          </div>
+        </wa-card>
+
+        <wa-card class="account__card">
+          <div slot="header" class="account__card__header">
+            <wa-icon name="fa-solid fa-check" class="account__card__icon"></wa-icon>
+            <span>{{ 'home.finalizable' | translate }}</span>
+          </div>
+          <div class="account__card__content">
+            <div class="account__card__detail">{{ 'home.transfersReadyToFinalize' | translate: {count: 0} }}</div>
+            <div class="account__card__action">
+              <wa-button size="small" disabled>{{ 'home.finalizeAll' | translate }}</wa-button>
+            </div>
+          </div>
+        </wa-card>
+      </div>
+
+      <!-- Transaction History -->
+      <div class="account__transactions">
+        <div class="account__panel-title">{{ 'home.transactionHistory' | translate }}</div>
+        <wa-callout variant="neutral">
+          {{ 'home.noTransactions' | translate }}
+        </wa-callout>
+      </div>
+    </div>
+  `,
+    styles: [`
+    .account { display: flex; flex-direction: column; gap: 1.5rem; }
+
+    .account__header { display: flex; gap: 1rem; flex-wrap: wrap; padding: 1.5rem; background: var(--wa-color-neutral-50, #fafafa); border-radius: 0.5rem; border: 1px solid var(--wa-color-neutral-200, #e5e7eb); }
+    .account__header__section { display: flex; flex-direction: column; padding: 0 1rem; }
+    .account__header__section:not(:last-child) { border-right: 1px solid var(--wa-color-neutral-300, #d1d5db); }
+    .account__header__section .label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; color: var(--wa-color-neutral-600, #4b5563); margin-bottom: 0.25rem; }
+    .account__header__section .amount { font-size: 1.875rem; font-weight: 700; color: var(--wa-color-neutral-900, #111827); margin: 0.25rem 0; }
+    .account__header__section .subtext { font-size: 0.875rem; color: var(--wa-color-neutral-500, #6b7280); }
+
+    .account__cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
+    .account__card { height: 100%; }
+    .account__card__header { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; padding: 1rem; }
+    .account__card__icon { font-size: 1.25rem; color: var(--wa-color-primary-600, #4f46e5); }
+    .account__card__content { padding: 0 1rem 1rem; }
+    .account__card__amount { font-size: 1.5rem; font-weight: 700; color: var(--wa-color-neutral-900, #111827); margin-bottom: 0.5rem; }
+    .account__card__detail { font-size: 0.875rem; color: var(--wa-color-neutral-600, #4b5563); margin-bottom: 0.75rem; }
+    .account__card__action { margin-top: 0.75rem; }
+
+    .account__transactions { }
+    .account__panel-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; }
+  `]
+})
+export class HomePage {}
--- a/cmd/core-gui/frontend/src/app/pages/onboarding/onboarding.page.ts
+++ b/cmd/core-gui/frontend/src/app/pages/onboarding/onboarding.page.ts
@ -0,0 +1,126 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+
+@Component({
+    selector: 'app-onboarding-page',
+    imports: [],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    template: `
+    <div class="onboarding">
+      <div class="onboarding__header">
+        <h2 style="margin: 0;">Welcome to Bob Wallet</h2>
+        <p style="margin: 0.5rem 0 0 0; color: var(--wa-color-neutral-600);">
+          Set up your wallet to start managing Handshake names
+        </p>
+      </div>
+
+      <wa-tab-group>
+        <wa-tab slot="nav" panel="create">Create New Wallet</wa-tab>
+        <wa-tab slot="nav" panel="import">Import Seed</wa-tab>
+        <wa-tab slot="nav" panel="ledger">Connect Ledger</wa-tab>
+
+        <wa-tab-panel name="create">
+          <div class="onboarding__content">
+            <wa-callout variant="info">
+              <strong>Important:</strong> Write down your seed phrase and store it in a secure location.
+              You will need it to recover your wallet.
+            </wa-callout>
+
+            <div class="seed-display">
+              <div class="seed-words">
+                <div class="seed-word">abandon</div>
+                <div class="seed-word">ability</div>
+                <div class="seed-word">able</div>
+                <div class="seed-word">about</div>
+                <div class="seed-word">above</div>
+                <div class="seed-word">absent</div>
+                <div class="seed-word">absorb</div>
+                <div class="seed-word">abstract</div>
+                <div class="seed-word">absurd</div>
+                <div class="seed-word">abuse</div>
+                <div class="seed-word">access</div>
+                <div class="seed-word">accident</div>
+              </div>
+            </div>
+
+            <div class="onboarding__actions">
+              <wa-button variant="primary">
+                <wa-icon slot="prefix" name="fa-solid fa-copy"></wa-icon>
+                Copy Seed Phrase
+              </wa-button>
+              <wa-button variant="neutral">
+                <wa-icon slot="prefix" name="fa-solid fa-check"></wa-icon>
+                I've Saved My Seed
+              </wa-button>
+            </div>
+          </div>
+        </wa-tab-panel>
+
+        <wa-tab-panel name="import">
+          <div class="onboarding__content">
+            <wa-callout variant="neutral">
+              Enter your 12 or 24 word seed phrase to restore an existing wallet.
+            </wa-callout>
+
+            <div style="margin-top: 1.5rem;">
+              <label style="display: block; font-weight: 600; margin-bottom: 0.5rem;">Seed Phrase</label>
+              <wa-input placeholder="Enter your seed phrase" style="width: 100%;">
+                <textarea slot="input" rows="4" style="resize: vertical; font-family: monospace;"></textarea>
+              </wa-input>
+            </div>
+
+            <div class="onboarding__actions">
+              <wa-button variant="primary">
+                <wa-icon slot="prefix" name="fa-solid fa-download"></wa-icon>
+                Import Wallet
+              </wa-button>
+            </div>
+          </div>
+        </wa-tab-panel>
+
+        <wa-tab-panel name="ledger">
+          <div class="onboarding__content">
+            <wa-callout variant="info">
+              Connect your Ledger hardware wallet to manage your Handshake names securely.
+            </wa-callout>
+
+            <div class="ledger-instructions">
+              <h4 style="margin: 1.5rem 0 1rem 0;">Instructions:</h4>
+              <ol style="margin: 0; padding-left: 1.5rem; color: var(--wa-color-neutral-700);">
+                <li style="margin-bottom: 0.5rem;">Connect your Ledger device via USB</li>
+                <li style="margin-bottom: 0.5rem;">Enter your PIN on the device</li>
+                <li style="margin-bottom: 0.5rem;">Open the Handshake app on your Ledger</li>
+                <li style="margin-bottom: 0.5rem;">Click "Connect" below</li>
+              </ol>
+            </div>
+
+            <div class="onboarding__actions">
+              <wa-button variant="primary">
+                <wa-icon slot="prefix" name="fa-solid fa-usb"></wa-icon>
+                Connect Ledger
+              </wa-button>
+            </div>
+          </div>
+        </wa-tab-panel>
+      </wa-tab-group>
+    </div>
+  `,
+    styles: [`
+    .onboarding { }
+
+    .onboarding__header { margin-bottom: 2rem; }
+
+    .onboarding__content { padding: 1.5rem 0; }
+
+    .seed-display { margin: 1.5rem 0; padding: 1.5rem; background: var(--wa-color-neutral-50, #fafafa); border: 2px solid var(--wa-color-neutral-200, #e5e7eb); border-radius: 0.5rem; }
+
+    .seed-words { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
+
+    .seed-word { padding: 0.75rem; background: white; border: 1px solid var(--wa-color-neutral-300, #d1d5db); border-radius: 0.375rem; font-family: monospace; font-size: 0.875rem; text-align: center; }
+
+    .onboarding__actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; }
+
+    .ledger-instructions { margin-top: 1rem; }
+  `]
+})
+export class OnboardingPage {}
--- a/cmd/core-gui/frontend/src/app/pages/search-tld/search-tld.page.ts
+++ b/cmd/core-gui/frontend/src/app/pages/search-tld/search-tld.page.ts
@ -0,0 +1,127 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { Router } from '@angular/router';
+
+@Component({
+    selector: 'app-search-tld-page',
+    imports: [FormsModule],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    template: `
+    <div class="search-tld">
+      <div class="search-tld__header">
+        <wa-input placeholder="Search for a name..." style="flex: 1;">
+          <input slot="input" [(ngModel)]="query" (keyup.enter)="onSearch()" />
+        </wa-input>
+        <wa-button variant="primary" (click)="onSearch()" [disabled]="loading || !query">
+          <wa-icon slot="prefix" name="fa-solid fa-magnifying-glass"></wa-icon>
+          Search
+        </wa-button>
+      </div>
+
+      @if (loading) {
+        <div class="search-tld__content">
+          <wa-spinner></wa-spinner>
+          <p style="text-align: center; margin-top: 1rem;">Searching...</p>
+        </div>
+      }
+
+      @if (!loading && !result) {
+        <div class="search-tld__content">
+          <wa-callout variant="neutral">
+            <div style="text-align: center; padding: 1rem;">
+              <wa-icon name="fa-solid fa-search" style="font-size: 2.5rem; opacity: 0.3; margin-bottom: 1rem;"></wa-icon>
+              <p style="margin: 0;">Enter a name to search for availability and auction status.</p>
+            </div>
+          </wa-callout>
+        </div>
+      }
+
+      @if (!loading && result) {
+        <div class="search-tld__content">
+          <wa-card>
+            <div slot="header" style="display: flex; justify-content: space-between; align-items: center;">
+              <h3 style="margin: 0; font-size: 1.5rem;">{{result.name}}/</h3>
+              <wa-badge [attr.variant]="result.available ? 'success' : 'warning'">
+                {{result.available ? 'Available' : 'In Auction'}}
+              </wa-badge>
+            </div>
+            <div class="search-result">
+              <div class="search-result__section">
+                <div class="search-result__label">Status</div>
+                <div class="search-result__value">{{result.status}}</div>
+              </div>
+              @if (result.currentBid) {
+                <div class="search-result__section">
+                  <div class="search-result__label">Current Bid</div>
+                  <div class="search-result__value">{{result.currentBid}} HNS</div>
+                </div>
+              }
+              @if (result.blocksUntil) {
+                <div class="search-result__section">
+                  <div class="search-result__label">{{result.blocksUntilLabel}}</div>
+                  <div class="search-result__value">~{{result.blocksUntil}} blocks</div>
+                </div>
+              }
+              <div class="search-result__actions">
+                <wa-button variant="primary" [disabled]="!result.available">
+                  <wa-icon slot="prefix" name="fa-solid fa-gavel"></wa-icon>
+                  Place Bid
+                </wa-button>
+                <wa-button variant="neutral">
+                  <wa-icon slot="prefix" name="fa-solid fa-eye"></wa-icon>
+                  Watch
+                </wa-button>
+              </div>
+            </div>
+          </wa-card>
+        </div>
+      }
+    </div>
+    `,
+    styles: [`
+    .search-tld { display: flex; flex-direction: column; gap: 1.5rem; }
+
+    .search-tld__header { display: flex; gap: 1rem; align-items: center; }
+
+    .search-tld__content { }
+
+    .search-result { padding: 1rem 0; }
+    .search-result__section { display: flex; justify-content: space-between; padding: 0.75rem 0; border-bottom: 1px solid var(--wa-color-neutral-200, #e5e7eb); }
+    .search-result__section:last-of-type { border-bottom: none; }
+    .search-result__label { font-size: 0.875rem; font-weight: 600; color: var(--wa-color-neutral-600, #4b5563); }
+    .search-result__value { font-size: 0.875rem; color: var(--wa-color-neutral-900, #111827); font-weight: 500; }
+    .search-result__actions { display: flex; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--wa-color-neutral-200, #e5e7eb); }
+  `]
+})
+export class SearchTldPage {
+  query = '';
+  loading = false;
+  result: any = null;
+
+  constructor(private router: Router) {}
+
+  async onSearch() {
+    if (!this.query.trim()) return;
+
+    this.loading = true;
+    this.result = null;
+
+    // Simulate API call
+    await new Promise(r => setTimeout(r, 800));
+
+    const name = this.query.trim().replace('/', '');
+    const available = Math.random() > 0.3;
+
+    this.result = {
+      name,
+      available,
+      status: available ? 'Available for bidding' : 'Auction in progress',
+      currentBid: available ? null : (Math.random() * 100).toFixed(2),
+      blocksUntil: available ? null : Math.floor(Math.random() * 5000),
+      blocksUntilLabel: available ? null : 'Blocks until reveal'
+    };
+
+    this.loading = false;
+  }
+}
--- a/cmd/core-gui/frontend/src/app/pages/settings/settings.page.spec.ts
+++ b/cmd/core-gui/frontend/src/app/pages/settings/settings.page.spec.ts
@ -0,0 +1,95 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SettingsPage } from './settings.page';
+import { FileDialogService } from '../../services/file-dialog.service';
+import { ClipboardService } from '../../services/clipboard.service';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+describe('SettingsPage', () => {
+  let component: SettingsPage;
+  let fixture: ComponentFixture<SettingsPage>;
+  let fileDialogService: jasmine.SpyObj<FileDialogService>;
+  let clipboardService: jasmine.SpyObj<ClipboardService>;
+
+  beforeEach(async () => {
+    const fileDialogSpy = jasmine.createSpyObj('FileDialogService', ['pickDirectory', 'openFile', 'saveFile']);
+    const clipboardSpy = jasmine.createSpyObj('ClipboardService', ['copyText']);
+
+    await TestBed.configureTestingModule({
+      imports: [SettingsPage],
+      providers: [
+        { provide: FileDialogService, useValue: fileDialogSpy },
+        { provide: ClipboardService, useValue: clipboardSpy }
+      ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+
+    fileDialogService = TestBed.inject(FileDialogService) as jasmine.SpyObj<FileDialogService>;
+    clipboardService = TestBed.inject(ClipboardService) as jasmine.SpyObj<ClipboardService>;
+
+    fixture = TestBed.createComponent(SettingsPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+    // NEW: Verify component is an instance of SettingsPage
+    expect(component instanceof SettingsPage).toBe(true);
+  });
+
+  it('should initialize with default locale', () => {
+    expect(component.locale).toBe('en-US');
+    // NEW: Verify msg is initialized as empty string
+    expect(component.msg).toBe('');
+  });
+
+  it('should render settings tabs', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const tabGroup = compiled.querySelector('wa-tab-group');
+    expect(tabGroup).toBeTruthy();
+    // NEW: Verify tab group contains tab panels
+    const tabPanels = compiled.querySelectorAll('wa-tab-panel');
+    expect(tabPanels.length).toBeGreaterThan(0);
+  });
+
+  it('should render four tab panels', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    const tabs = compiled.querySelectorAll('wa-tab');
+    expect(tabs.length).toBe(4);
+    // NEW: Verify corresponding tab panels exist
+    const tabPanels = compiled.querySelectorAll('wa-tab-panel');
+    expect(tabPanels.length).toBe(4);
+  });
+
+  it('should call pickDirectory when change directory button clicked', async () => {
+    fileDialogService.pickDirectory.and.returnValue(Promise.resolve({ path: '/test/path' }));
+    await component.pickDir();
+    expect(fileDialogService.pickDirectory).toHaveBeenCalled();
+    // NEW: Verify pickedPath is updated
+    expect(component.pickedPath).toBe('/test/path');
+  });
+
+  it('should call saveFile when export backup button clicked', async () => {
+    fileDialogService.saveFile.and.returnValue(Promise.resolve({ name: 'settings.json' } as any));
+    await component.saveFile();
+    expect(fileDialogService.saveFile).toHaveBeenCalled();
+    // NEW: Verify pickedPath is updated with filename
+    expect(component.pickedPath).toBe('settings.json');
+  });
+
+  it('should update message after saving locale', () => {
+    component.saveLocale();
+    expect(component.msg).toContain('Saved locale');
+    // NEW: Verify message includes the locale value
+    expect(component.msg).toContain('en-US');
+  });
+
+  it('should copy locale to clipboard', async () => {
+    clipboardService.copyText.and.returnValue(Promise.resolve(true));
+    await component.copyLocale();
+    expect(clipboardService.copyText).toHaveBeenCalledWith(component.locale);
+    expect(component.msg).toContain('copied to clipboard');
+    // NEW: Verify clipboard was called exactly once
+    expect(clipboardService.copyText).toHaveBeenCalledTimes(1);
+  });
+});
--- a/cmd/core-gui/frontend/src/app/pages/settings/settings.page.ts
+++ b/cmd/core-gui/frontend/src/app/pages/settings/settings.page.ts
@ -0,0 +1,168 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, inject } from '@angular/core';
+
+import { FormsModule } from '@angular/forms';
+import { FileDialogService } from '../../services/file-dialog.service';
+import { ClipboardService } from '../../services/clipboard.service';
+
+@Component({
+    selector: 'app-settings-page',
+    imports: [FormsModule],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    template: `
+    <div class="settings">
+      <wa-tab-group>
+        <wa-tab slot="nav" panel="general">General</wa-tab>
+        <wa-tab slot="nav" panel="wallet">Wallet</wa-tab>
+        <wa-tab slot="nav" panel="connection">Connection</wa-tab>
+        <wa-tab slot="nav" panel="advanced">Advanced</wa-tab>
+
+        <wa-tab-panel name="general">
+          <div class="settings__section">
+            <h3 class="settings__section-title">Language</h3>
+            <wa-select value="en-US" style="max-width: 300px;">
+              <wa-option value="en-US">English (US)</wa-option>
+              <wa-option value="zh-CN">中文 (简体)</wa-option>
+              <wa-option value="es-ES">Español</wa-option>
+            </wa-select>
+          </div>
+
+          <div class="settings__section">
+            <h3 class="settings__section-title">Block Explorer</h3>
+            <wa-select value="hnsnetwork" style="max-width: 300px;">
+              <wa-option value="hnsnetwork">HNS Network</wa-option>
+              <wa-option value="niami">Niami</wa-option>
+              <wa-option value="hnscan">HNScan</wa-option>
+            </wa-select>
+          </div>
+
+          <div class="settings__section">
+            <h3 class="settings__section-title">Theme</h3>
+            <wa-select value="light" style="max-width: 300px;">
+              <wa-option value="light">Light</wa-option>
+              <wa-option value="dark">Dark</wa-option>
+              <wa-option value="system">System</wa-option>
+            </wa-select>
+          </div>
+        </wa-tab-panel>
+
+        <wa-tab-panel name="wallet">
+          <div class="settings__section">
+            <h3 class="settings__section-title">Wallet Directory</h3>
+            <p class="settings__description">Location where wallet data is stored</p>
+            <wa-input value="~/.bob-wallet" readonly style="max-width: 500px;">
+              <input slot="input" />
+            </wa-input>
+            <div style="margin-top: 0.75rem;">
+              <wa-button size="small" (click)="pickDir()">Change Directory</wa-button>
+            </div>
+          </div>
+
+          <div class="settings__section">
+            <h3 class="settings__section-title">Backup</h3>
+            <p class="settings__description">Export wallet seed phrase and settings</p>
+            <wa-button size="small" (click)="saveFile()">
+              <wa-icon slot="prefix" name="fa-solid fa-download"></wa-icon>
+              Export Backup
+            </wa-button>
+          </div>
+
+          <div class="settings__section">
+            <h3 class="settings__section-title">Rescan Blockchain</h3>
+            <p class="settings__description">Re-scan the blockchain for transactions</p>
+            <wa-button size="small" variant="neutral">Rescan</wa-button>
+          </div>
+        </wa-tab-panel>
+
+        <wa-tab-panel name="connection">
+          <div class="settings__section">
+            <h3 class="settings__section-title">Connection Type</h3>
+            <wa-select value="full-node" style="max-width: 300px;">
+              <wa-option value="full-node">Full Node</wa-option>
+              <wa-option value="spv">SPV (Light)</wa-option>
+              <wa-option value="custom">Custom RPC</wa-option>
+            </wa-select>
+          </div>
+
+          <div class="settings__section">
+            <h3 class="settings__section-title">Network</h3>
+            <wa-select value="main" style="max-width: 300px;">
+              <wa-option value="main">Mainnet</wa-option>
+              <wa-option value="testnet">Testnet</wa-option>
+              <wa-option value="regtest">Regtest</wa-option>
+              <wa-option value="simnet">Simnet</wa-option>
+            </wa-select>
+          </div>
+        </wa-tab-panel>
+
+        <wa-tab-panel name="advanced">
+          <div class="settings__section">
+            <h3 class="settings__section-title">API Key</h3>
+            <p class="settings__description">Node API authentication key</p>
+            <wa-input type="password" style="max-width: 400px;">
+              <input slot="input" type="password" />
+            </wa-input>
+          </div>
+
+          <div class="settings__section">
+            <h3 class="settings__section-title">Analytics</h3>
+            <wa-checkbox checked>Share anonymous usage data to improve Bob</wa-checkbox>
+          </div>
+
+          <div class="settings__section">
+            <h3 class="settings__section-title">Developer Options</h3>
+            <wa-button size="small" variant="neutral">
+              <wa-icon slot="prefix" name="fa-solid fa-bug"></wa-icon>
+              Open Debug Console
+            </wa-button>
+          </div>
+        </wa-tab-panel>
+      </wa-tab-group>
+    </div>
+  `,
+    styles: [`
+    .settings { }
+
+    .settings__section { padding: 1.5rem 0; border-bottom: 1px solid var(--wa-color-neutral-200, #e5e7eb); }
+    .settings__section:last-child { border-bottom: none; }
+
+    .settings__section-title { margin: 0 0 0.5rem 0; font-size: 1rem; font-weight: 600; }
+
+    .settings__description { margin: 0 0 0.75rem 0; font-size: 0.875rem; color: var(--wa-color-neutral-600, #4b5563); }
+  `]
+})
+export class SettingsPage {
+  private fileDialog = inject(FileDialogService);
+  private clipboard = inject(ClipboardService);
+
+  locale = 'en-US';
+  msg = '';
+  pickedPath = '';
+
+  saveLocale() {
+    // TODO: connect to Setting.setLocale via IPC when available
+    this.msg = `Saved locale: ${this.locale}`;
+    setTimeout(() => (this.msg = ''), 1500);
+  }
+
+  async copyLocale() {
+    await this.clipboard.copyText(this.locale);
+    this.msg = 'Locale copied to clipboard';
+    setTimeout(() => (this.msg = ''), 1500);
+  }
+
+  async pickDir() {
+    const res = await this.fileDialog.pickDirectory();
+    this.pickedPath = res?.path || res?.name || '';
+  }
+
+  async pickFile() {
+    const res = await this.fileDialog.openFile({ multiple: false, accept: ['application/json'] });
+    this.pickedPath = res?.[0]?.name || '';
+  }
+
+  async saveFile() {
+    const data = new Blob([JSON.stringify({ locale: this.locale }, null, 2)], { type: 'application/json' });
+    const file = await this.fileDialog.saveFile({ suggestedName: 'settings.json', blob: data });
+    this.pickedPath = file?.name || '';
+  }
+}
--- a/cmd/core-gui/frontend/src/app/services/clipboard.service.ts
+++ b/cmd/core-gui/frontend/src/app/services/clipboard.service.ts
@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class ClipboardService {
+  async copyText(text: string): Promise<boolean> {
+    try {
+      if (navigator.clipboard && navigator.clipboard.writeText) {
+        await navigator.clipboard.writeText(text);
+        return true;
+      }
+    } catch (e) {
+      // fall back
+    }
+
+    // Fallback using a hidden textarea
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.position = 'fixed';
+    ta.style.left = '-9999px';
+    document.body.appendChild(ta);
+    ta.select();
+    try {
+      document.execCommand('copy');
+      return true;
+    } catch (e) {
+      return false;
+    } finally {
+      document.body.removeChild(ta);
+    }
+  }
+}
--- a/cmd/core-gui/frontend/src/app/services/file-dialog.service.ts
+++ b/cmd/core-gui/frontend/src/app/services/file-dialog.service.ts
@ -0,0 +1,85 @@
+import { Injectable } from '@angular/core';
+
+// WAILS3 INTEGRATION:
+// This service currently uses web-standard File System Access API.
+// For Wails3, replace with Go service methods calling:
+// - application.OpenFileDialog().PromptForSingleSelection()
+// - application.SaveFileDialog().SetFilename().PromptForSelection()
+// See WAILS3_INTEGRATION.md for complete examples.
+
+export interface OpenFileOptions {
+  multiple?: boolean;
+  accept?: string[]; // e.g., ["application/json", "text/plain"]
+}
+
+export interface SaveFileOptions {
+  suggestedName?: string;
+  types?: { description?: string; accept?: Record<string, string[]> }[];
+  blob: Blob;
+}
+
+@Injectable({ providedIn: 'root' })
+export class FileDialogService {
+  // Directory picker using File System Access API when available
+  async pickDirectory(): Promise<any | null> {
+    const nav: any = window.navigator;
+    if ((window as any).showDirectoryPicker) {
+      try {
+        // @ts-ignore
+        const handle: any = await (window as any).showDirectoryPicker({ mode: 'readwrite' });
+        return handle;
+      } catch (e) {
+        return null;
+      }
+    }
+    // Fallback: not supported in all browsers; inform the user
+    alert('Directory picker is not supported in this browser.');
+    return null;
+  }
+
+  // Open file(s) with <input type="file"> fallback if FS Access API not used
+  async openFile(opts: OpenFileOptions = {}): Promise<File[] | null> {
+    // Always supported fallback
+    return new Promise<File[] | null>((resolve) => {
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.multiple = !!opts.multiple;
+      if (opts.accept && opts.accept.length) {
+        input.accept = opts.accept.join(',');
+      }
+      input.onchange = () => {
+        const files = input.files ? Array.from(input.files) : null;
+        resolve(files);
+      };
+      input.click();
+    });
+  }
+
+  // Save file using File System Access API if available, otherwise trigger a download
+  async saveFile(opts: SaveFileOptions): Promise<File | null> {
+    if ((window as any).showSaveFilePicker) {
+      try {
+        // @ts-ignore
+        const handle = await (window as any).showSaveFilePicker({
+          suggestedName: opts.suggestedName,
+          types: opts.types
+        });
+        const writable = await handle.createWritable();
+        await writable.write(opts.blob);
+        await writable.close();
+        return { name: handle.name } as any;
+      } catch (e) {
+        return null;
+      }
+    }
+
+    // Fallback: download
+    const url = URL.createObjectURL(opts.blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = opts.suggestedName || 'download';
+    a.click();
+    URL.revokeObjectURL(url);
+    return { name: opts.suggestedName || 'download' } as any;
+  }
+}
--- a/cmd/core-gui/frontend/src/app/services/hardware-wallet.service.ts
+++ b/cmd/core-gui/frontend/src/app/services/hardware-wallet.service.ts
@ -0,0 +1,30 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class HardwareWalletService {
+  // Placeholder for WebHID/WebUSB detection
+  get isWebHIDAvailable() {
+    return 'hid' in navigator;
+  }
+
+  get isWebUSBAvailable() {
+    return 'usb' in navigator;
+  }
+
+  async connectLedger(): Promise<void> {
+    // In a real implementation, prompt for a specific HID/USB device
+    // and establish transport (e.g., via @ledgerhq/hw-transport-webhid).
+    // This is a stub to document the integration point.
+    throw new Error('HardwareWalletService.connectLedger is not implemented in the web build.');
+  }
+
+  async getAppVersion(): Promise<string> {
+    // Should query the connected device/app for version information
+    throw new Error('HardwareWalletService.getAppVersion is not implemented in the web build.');
+  }
+
+  async disconnect(): Promise<void> {
+    // Close transport/session to the device
+    throw new Error('HardwareWalletService.disconnect is not implemented in the web build.');
+  }
+}
--- a/cmd/core-gui/frontend/src/app/services/ipc/stubs.ts
+++ b/cmd/core-gui/frontend/src/app/services/ipc/stubs.ts
@ -0,0 +1,233 @@
+// IPC Stub classes mapping old Electron IPC services and methods.
+// These stubs let the web build compile and run without native IPC.
+// Each method throws a NotImplementedError to highlight what needs
+// to be replaced in a native wrapper or future web-compatible API.
+//
+// WAILS3 INTEGRATION:
+// These stubs will be replaced by Wails3 auto-generated bindings.
+// See WAILS3_INTEGRATION.md for complete migration guide.
+//
+// Pattern:
+// 1. Create Go service structs with exported methods (e.g., NodeService, WalletService)
+// 2. Register services in Wails3 main.go: application.NewService(&NodeService{})
+// 3. Run `wails3 generate bindings` to create TypeScript bindings
+// 4. Import generated bindings: import { GetInfo } from '../bindings/.../nodeservice'
+// 5. Replace stub calls with binding calls: await GetInfo() instead of IPC.Node.getInfo()
+//
+// Each service below maps 1:1 to a Go service struct that will be created.
+
+export class NotImplementedError extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = 'NotImplementedError';
+  }
+}
+
+function notImplemented(service: string, method: string): never {
+  throw new NotImplementedError(`IPC ${service}.${method} is not implemented in the web build.`);
+}
+
+function makeIpcStub<T extends Record<string, any>>(service: string, methods: string[]): T {
+  const obj: Record<string, any> = {};
+  for (const m of methods) {
+    obj[m] = (..._args: any[]) => notImplemented(service, m);
+  }
+  return obj as T;
+}
+
+// Services and their methods as defined in old/app/background/**/client.js
+export const Node = makeIpcStub('Node', [
+  'start',
+  'stop',
+  'reset',
+  'generateToAddress',
+  'getAPIKey',
+  'getNoDns',
+  'getSpvMode',
+  'getInfo',
+  'getNameInfo',
+  'getTXByAddresses',
+  'getNameByHash',
+  'getBlockByHeight',
+  'getTx',
+  'broadcastRawTx',
+  'sendRawAirdrop',
+  'getFees',
+  'getAverageBlockTime',
+  'getMTP',
+  'getCoin',
+  'verifyMessageWithName',
+  'setNodeDir',
+  'setAPIKey',
+  'setNoDns',
+  'setSpvMode',
+  'getDir',
+  'getHNSPrice',
+  'testCustomRPCClient',
+  'getDNSSECProof',
+  'sendRawClaim',
+]);
+
+export const Wallet = makeIpcStub('Wallet', [
+  'start',
+  'getAPIKey',
+  'setAPIKey',
+  'getWalletInfo',
+  'getAccountInfo',
+  'getCoin',
+  'getTX',
+  'getNames',
+  'createNewWallet',
+  'importSeed',
+  'generateReceivingAddress',
+  'getAuctionInfo',
+  'getTransactionHistory',
+  'getPendingTransactions',
+  'getBids',
+  'getBlind',
+  'getMasterHDKey',
+  'hasAddress',
+  'setPassphrase',
+  'revealSeed',
+  'estimateTxFee',
+  'estimateMaxSend',
+  'removeWalletById',
+  'updateAccountDepth',
+  'findNonce',
+  'findNonceCancel',
+  'encryptWallet',
+  'backup',
+  'rescan',
+  'deepClean',
+  'reset',
+  'sendOpen',
+  'sendBid',
+  'sendRegister',
+  'sendUpdate',
+  'sendReveal',
+  'sendRedeem',
+  'sendRenewal',
+  'sendRevealAll',
+  'sendRedeemAll',
+  'sendRegisterAll',
+  'signMessageWithName',
+  'transferMany',
+  'finalizeAll',
+  'finalizeMany',
+  'renewAll',
+  'renewMany',
+  'sendTransfer',
+  'cancelTransfer',
+  'finalizeTransfer',
+  'finalizeWithPayment',
+  'claimPaidTransfer',
+  'revokeName',
+  'send',
+  'lock',
+  'unlock',
+  'isLocked',
+  'addSharedKey',
+  'removeSharedKey',
+  'getNonce',
+  'importNonce',
+  'zap',
+  'importName',
+  'rpcGetWalletInfo',
+  'loadTransaction',
+  'listWallets',
+  'getStats',
+  'isReady',
+  'createClaim',
+  'sendClaim',
+]);
+
+export const Setting = makeIpcStub('Setting', [
+  'getExplorer',
+  'setExplorer',
+  'getLocale',
+  'setLocale',
+  'getCustomLocale',
+  'setCustomLocale',
+  'getLatestRelease',
+]);
+
+export const Ledger = makeIpcStub('Ledger', [
+  'getXPub',
+  'getAppVersion',
+]);
+
+export const DB = makeIpcStub('DB', [
+  'open',
+  'close',
+  'put',
+  'get',
+  'del',
+  'getUserDir',
+]);
+
+export const Analytics = makeIpcStub('Analytics', [
+  'setOptIn',
+  'getOptIn',
+  'track',
+  'screenView',
+]);
+
+export const Connections = makeIpcStub('Connections', [
+  'getConnection',
+  'setConnection',
+  'setConnectionType',
+  'getCustomRPC',
+]);
+
+export const Shakedex = makeIpcStub('Shakedex', [
+  'fulfillSwap',
+  'getFulfillments',
+  'finalizeSwap',
+  'transferLock',
+  'transferCancel',
+  'getListings',
+  'finalizeLock',
+  'finalizeCancel',
+  'launchAuction',
+  'downloadProofs',
+  'restoreOneListing',
+  'restoreOneFill',
+  'getExchangeAuctions',
+  'listAuction',
+  'getFeeInfo',
+  'getBestBid',
+]);
+
+export const Claim = makeIpcStub('Claim', [
+  'airdropGenerateProofs',
+]);
+
+export const Logger = makeIpcStub('Logger', [
+  'info',
+  'warn',
+  'error',
+  'log',
+  'download',
+]);
+
+export const Hip2 = makeIpcStub('Hip2', [
+  'getPort',
+  'setPort',
+  'fetchAddress',
+  'setServers',
+]);
+
+// Aggregate facade to import from components/services if needed
+export const IPC = {
+  Node,
+  Wallet,
+  Setting,
+  Ledger,
+  DB,
+  Analytics,
+  Connections,
+  Shakedex,
+  Claim,
+  Logger,
+  Hip2,
+};
--- a/cmd/core-gui/frontend/src/app/services/notifications.service.ts
+++ b/cmd/core-gui/frontend/src/app/services/notifications.service.ts
@ -0,0 +1,24 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class NotificationsService {
+  async requestPermission(): Promise<NotificationPermission> {
+    if (!('Notification' in window)) return 'denied';
+    if (Notification.permission === 'default') {
+      try {
+        return await Notification.requestPermission();
+      } catch {
+        return Notification.permission;
+      }
+    }
+    return Notification.permission;
+  }
+
+  async show(title: string, options?: NotificationOptions): Promise<void> {
+    if (!('Notification' in window)) return;
+    const perm = await this.requestPermission();
+    if (perm === 'granted') {
+      new Notification(title, options);
+    }
+  }
+}
--- a/cmd/core-gui/frontend/src/app/services/storage.provider.ts
+++ b/cmd/core-gui/frontend/src/app/services/storage.provider.ts
@ -0,0 +1,6 @@
+import { InjectionToken } from '@angular/core';
+
+export const BROWSER_STORAGE = new InjectionToken<Storage>('Browser Storage', {
+  providedIn: 'root',
+  factory: () => localStorage
+});
--- a/cmd/core-gui/frontend/src/app/services/storage.service.ts
+++ b/cmd/core-gui/frontend/src/app/services/storage.service.ts
@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class StorageService {
+  private prefix = 'lthnDNS:';
+
+  setItem<T = unknown>(key: string, value: T): void {
+    try {
+      localStorage.setItem(this.prefix + key, JSON.stringify(value));
+    } catch (e) {
+      // ignore quota or unsupported errors
+    }
+  }
+
+  getItem<T = unknown>(key: string, fallback: T | null = null): T | null {
+    const raw = localStorage.getItem(this.prefix + key);
+    if (!raw) return fallback;
+    try {
+      return JSON.parse(raw) as T;
+    } catch {
+      return fallback;
+    }
+  }
+
+  removeItem(key: string): void {
+    localStorage.removeItem(this.prefix + key);
+  }
+
+  clearAll(): void {
+    Object.keys(localStorage)
+      .filter(k => k.startsWith(this.prefix))
+      .forEach(k => localStorage.removeItem(k));
+  }
+}
--- a/cmd/core-gui/frontend/src/app/shared/components/checkbox/checkbox.component.css
+++ b/cmd/core-gui/frontend/src/app/shared/components/checkbox/checkbox.component.css
@ -0,0 +1,65 @@
+.nga-form-check-input {
+  --bs-form-check-bg: var(--bs-body-bg);
+  width: 1em;
+  height: 1em;
+  margin-top: 0.25em;
+  vertical-align: top;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: var(--bs-form-check-bg);
+  background-image: var(--bs-form-check-bg-image);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  border: var(--bs-border-width) solid var(--bs-border-color);
+}
+
+.nga-form-check-input[type="checkbox"] {
+  border-radius: 0.25em;
+}
+
+.nga-form-check-input[type="radio"] {
+  border-radius: 50%;
+}
+
+.nga-form-check-input:active {
+  filter: brightness(90%);
+}
+
+.nga-form-check-input:focus {
+  border-color: #86b7fe;
+  outline: 0;
+  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+.nga-form-check-input:checked {
+  background-color: green;
+  border-color: green;
+}
+
+.nga-form-check-input:checked[type="checkbox"] {
+  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
+}
+
+.nga-form-check-input:checked[type="radio"] {
+  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
+}
+
+.nga-form-check-input[type="checkbox"]:indeterminate {
+  background-color: red;
+  border-color: red;
+  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
+}
+
+.nga-form-check-input:disabled {
+  pointer-events: none;
+  filter: none;
+  opacity: 0.5;
+}
+
+.nga-form-check-input[disabled]~.form-check-label,
+.form-check-input:disabled~.form-check-label {
+  cursor: default;
+  opacity: 0.5;
+}
--- a/cmd/core-gui/frontend/src/app/shared/components/checkbox/checkbox.component.html
+++ b/cmd/core-gui/frontend/src/app/shared/components/checkbox/checkbox.component.html
@ -0,0 +1,8 @@
+<input #checkbox
+  class="nga-form-check-input"
+  type="checkbox"
+  (click)="onSelect()"
+  id="checkbox"
+  value=""
+  [(ngModel)]="valueTmp"
+/>
--- a/cmd/core-gui/frontend/src/app/shared/components/checkbox/checkbox.component.ts
+++ b/cmd/core-gui/frontend/src/app/shared/components/checkbox/checkbox.component.ts
@ -0,0 +1,115 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component, EventEmitter, Output, forwardRef,
+  ElementRef, Renderer2, ViewChild
+} from '@angular/core';
+
+import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'app-checkbox',
+  imports: [
+    CommonModule,
+    FormsModule,
+  ],
+  templateUrl: './checkbox.component.html',
+  styleUrls: ['./checkbox.component.css'],
+  providers: [{
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CheckboxComponent),
+    multi: true
+  }]
+})
+export class CheckboxComponent {
+
+
+  private innerValueTmp: any = '';
+
+  private onTouchedCallback = (): void => {
+    // Callback function intentionally left blank.
+  };
+
+  private onChangeCallback = (_value: unknown): void => {
+    // Callback function intentionally left blank.
+  };
+
+  @ViewChild('checkbox', { static: false }) checkbox!: ElementRef;
+  @Output() buttonclick: EventEmitter<number> = new EventEmitter<number>();
+
+  valueCheckbox: any;
+  indeterminate: any;
+  checked: any;
+
+  constructor(
+    private renderer: Renderer2) {
+    this.valueCheckbox = null;
+  }
+
+  onSelect() {
+    let value = this.checkbox.nativeElement.value;
+    switch (value) {
+      case "":
+        this.checked = true;
+        this.indeterminate = false;
+        value = "true";
+        this.valueCheckbox = true;
+        break;
+      case "true":
+        this.checked = false;
+        this.indeterminate = true;
+        value = "false";
+        this.valueCheckbox = false;
+        break;
+      case "false":
+        this.checked = null;
+        this.indeterminate = false;
+        value = "";
+        this.valueCheckbox = "";
+        break;
+    }
+    this.innerValueTmp = 4;
+    this.renderer.setAttribute(this.checkbox.nativeElement, 'value', value);
+    this.renderer.setProperty(this.checkbox.nativeElement, 'checked', this.checked);
+    this.renderer.setProperty(this.checkbox.nativeElement, 'indeterminate', this.indeterminate);
+  }
+
+  onClickButton() {
+    const value = this.checkbox.nativeElement.getAttribute('value');
+    // const indeterminate = this.checkbox.nativeElement.getProperty('indeterminate');
+    this.buttonclick.emit(value);
+  }
+
+
+  get valueTmp(): any {
+    return this.innerValueTmp;
+  };
+
+  set valueTmp(value: any) {
+    if (value !== this.innerValueTmp) {
+      if (this.checked && !this.indeterminate) { value = true; }
+      if (!this.checked && this.indeterminate) { value = false; }
+      if ((this.checked === null) && !this.indeterminate) { value = null; }
+      this.innerValueTmp = value;
+      this.onChangeCallback(value);
+    }
+  }
+
+  onBlur() {
+    this.onTouchedCallback();
+  }
+
+  writeValue(valueTmp: any) {
+    if (valueTmp !== this.innerValueTmp) {
+      this.innerValueTmp = valueTmp;
+    }
+  }
+
+  registerOnChange(fn: any) {
+    this.onChangeCallback = fn;
+  }
+
+  registerOnTouched(fn: any) {
+    this.onTouchedCallback = fn;
+  }
+
+}
--- a/cmd/core-gui/frontend/src/app/shared/components/footer/footer.component.css
+++ b/cmd/core-gui/frontend/src/app/shared/components/footer/footer.component.css
@ -0,0 +1,79 @@
+.nga-footer {
+  background-color: #212121;
+  color: white;
+}
+
+.nga-footer a {
+  color: white;
+  text-decoration: none
+}
+
+.nga-footer a:hover,
+.nga-footer a:focus {
+  color: white;
+  text-decoration: underline;
+}
+
+.nga-footer .nga-hint {
+  background-color: #1976d2;
+}
+
+.nga-footer .nga-hint:hover {
+  opacity: 0.8;
+}
+
+.nga-btn-social {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+  padding: 0;
+  margin: 10px;
+  overflow: hidden;
+  vertical-align: middle;
+  cursor: pointer;
+  border-radius: 50%;
+  -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+  box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  width: 47px;
+  height: 47px
+}
+
+.nga-btn-social i {
+  font-size: 1.25rem;
+  line-height: 47px
+}
+
+.nga-btn-social i {
+  display: inline-block;
+  width: inherit;
+  color: white;
+  text-align: center
+}
+
+.nga-btn-social:hover {
+  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
+}
+
+.nga-btn-social i:hover {
+  color: black;
+}
+
+.nga-btn-github {
+  background-color: #333;
+}
+
+.nga-btn-gitlab {
+  background-color: #ff4500;
+}
+
+.nga-btn-linkedin {
+  background-color: #0082ca;
+}
+
+.nga-btn-twitter {
+  background-color: #55acee;
+}
+
--- a/cmd/core-gui/frontend/src/app/shared/components/footer/footer.component.html
+++ b/cmd/core-gui/frontend/src/app/shared/components/footer/footer.component.html
@ -0,0 +1,62 @@
+<footer class="nga-footer">
+  <div class="nga-hint">
+    <div class="container">
+      <div class="row p-4"></div>
+    </div>
+  </div>
+  <div class="container py-5 text-center text-lg-start">
+    <div class="row">
+      <div class="col-12 col-lg-5 mb-3">
+        <h2 class="h5">
+          <img class="mb-1 me-1" [src]="'./assets/params/images/logo/' + appInfo.logo + '-logo.png'"
+            [srcset]="'./assets/params/images/logo/' + appInfo.logo + '-logo.png, ./assets/params/images/logo/' + appInfo.logo + '-logo@2x.png 2x'"
+            width="25" height="25" [alt]="'Logo ' + appInfo.name">
+          {{ appInfo.name }}
+        </h2>
+        <hr class="text-white mb-4 mt-0 d-inline-block" style="width: 120px;">
+        <p>Web Application : Angular 17, Bootstrap 5</p>
+        <p>Routing, Lazy Loading, SSR, PWA, SEO</p>
+        <div>
+          <a type="button" class="nga-btn-social nga-btn-linkedin"
+            [href]="'https://www.linkedin.com/in/' + appInfo.linkedinnetwork" [attr.aria-label]="'Linkedin ' + appInfo.name">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a type="button" class="nga-btn-social nga-btn-twitter" [href]="'https://x.com/' + appInfo.xnetwork"
+            [attr.aria-label]="'Twitter ' + appInfo.name">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a type="button" class="nga-btn-social nga-btn-github" [href]="'https://github.com/' + appInfo.network"
+            [attr.aria-label]="'Github ' + appInfo.name">
+            <i class="fab fa-github"></i>
+          </a>
+          <a type="button" class="nga-btn-social nga-btn-gitlab" [href]="'https://gitlab.com/' + appInfo.network"
+            [attr.aria-label]="'Gitlab ' + appInfo.name">
+            <i class="fab fa-gitlab"></i>
+          </a>
+        </div>
+      </div>
+      <div class="col-6 col-lg-3 mb-3">
+        <h2 class="h5">Tools</h2>
+        <hr class="text-white mt-0 d-inline-block" style="width: 70px;">
+        <ul class="list-unstyled">
+          <li class="mb-2"><a href="https://angular.io/">Angular</a></li>
+          <li class="mb-2"><a href="https://getbootstrap.com/">Bootstrap</a></li>
+          <li class="mb-2"><a href="https://fontawesome.com/">Font Awesome</a></li>
+        </ul>
+      </div>
+      <div class="col-6 col-lg-3 mb-3">
+        <h2 class="h5">Learn</h2>
+        <hr class="text-white mt-0 d-inline-block" style="width: 70px;">
+        <ul class="list-unstyled">
+          <li class="mb-2"><a [href]="'https://' + appInfo.website + '/tutorials'">Tutorials</a></li>
+          <li class="mb-2"><a [href]="'https://' + appInfo.website + '/about'">About</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+  <div class="py-3 text-center" style="background-color: black;">
+    <div class="container">
+      <a [href]="'https://' + appInfo.website">{{ appInfo.website }}</a>
+    </div>
+  </div>
+</footer>
--- a/cmd/core-gui/frontend/src/app/shared/components/footer/footer.component.ts
+++ b/cmd/core-gui/frontend/src/app/shared/components/footer/footer.component.ts
@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+import { environment } from '../../../../environments/environment';
+
+@Component({
+  selector: 'app-footer',
+  templateUrl: './footer.component.html',
+  styleUrls: ['./footer.component.css']
+})
+export class FooterComponent {
+
+  appInfo = environment.appInfo;
+}
--- a/cmd/core-gui/frontend/src/app/shared/components/header/header.component.css
+++ b/cmd/core-gui/frontend/src/app/shared/components/header/header.component.css
@ -0,0 +1,38 @@
+.nga-nav-link {
+  color: white;
+  border-top: 1px solid #09238d;
+  border-bottom: 1px solid #09238d;
+  font-weight: 500;
+}
+
+.nga-nav-link:hover {
+  color: yellow;
+  border-top: 1px solid yellow;
+  border-bottom: 1px solid yellow;
+}
+
+
+.nga-navbar {
+  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 11px 10px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 11px 10px 0 rgba(0, 0, 0, 0.12);
+  background-color: #09238d;
+}
+
+.nga-logo {
+  font-weight: 500;
+}
+
+.nga-logo:hover {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.nga-btn-navbar {
+  --bs-btn-color: #fff;
+  --bs-btn-bg: #1976d2;
+  --bs-btn-border-color: #1976d2;
+  --bs-btn-hover-color: #fff;
+  --bs-btn-hover-bg: #0b5ed7;
+  --bs-btn-hover-border-color: #0a58ca;
+}
+
+
--- a/cmd/core-gui/frontend/src/app/shared/components/header/header.component.html
+++ b/cmd/core-gui/frontend/src/app/shared/components/header/header.component.html
@ -0,0 +1,11 @@
+<header class="nga-navbar" style="position: sticky; top: 0; z-index: 1000;">
+  <div class="topbar" style="display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--sl-color-neutral-200, #e5e7eb); background: var(--sl-color-neutral-0, #fff);">
+    <wa-button variant="text" size="small" (click)="onMenuClick()" aria-label="Toggle navigation">
+      <i class="fas fa-bars"></i>
+    </wa-button>
+
+    <a routerLink="/" class="brand" style="font-weight: 600; text-decoration: none; color: inherit;">Core Admin</a>
+
+    <div style="margin-left: auto;"></div>
+  </div>
+</header>
--- a/cmd/core-gui/frontend/src/app/shared/components/header/header.component.ts
+++ b/cmd/core-gui/frontend/src/app/shared/components/header/header.component.ts
@ -0,0 +1,18 @@
+import {Component, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, Output} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'app-header',
+  imports: [CommonModule, RouterLink],
+  templateUrl: './header.component.html',
+  styleUrls: ['./header.component.css'],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class HeaderComponent {
+  @Output() menuToggle = new EventEmitter<void>();
+
+  onMenuClick() {
+    this.menuToggle.emit();
+  }
+}
--- a/cmd/core-gui/frontend/src/app/shared/constants/sort.constants.ts
+++ b/cmd/core-gui/frontend/src/app/shared/constants/sort.constants.ts
@ -0,0 +1,4 @@
+export enum SortDirection {
+  ASC = 'asc',
+  DESC = 'desc'
+}
--- a/cmd/core-gui/frontend/src/app/shared/pipes/date-format.pipe.ts
+++ b/cmd/core-gui/frontend/src/app/shared/pipes/date-format.pipe.ts
@ -0,0 +1,30 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'dateFormat'
+})
+export class DateFormatPipe implements PipeTransform {
+  transform(value: string | null | undefined): string {
+    if (!value) {
+      return '';
+    }
+
+    const regex = /^([0-2][0-9]|3[0-1])\/([0][1-9]|1[0-2])\/[0-9]{4} ([0-1][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$/;
+    if (regex.test(value)) {
+      const [day, month, year] = value.split(/[/ ]/);
+
+      return `${day}/${month}/${year}`;
+    }
+
+    const date = new Date(value);
+    if (!isNaN(date.getTime())) {
+      const day = String(date.getDate()).padStart(2, '0');
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const year = date.getFullYear();
+
+      return `${day}/${month}/${year}`;
+    }
+
+    return '';
+  }
+}
--- a/cmd/core-gui/frontend/src/app/shared/pipes/date-hour-format.pipe.ts
+++ b/cmd/core-gui/frontend/src/app/shared/pipes/date-hour-format.pipe.ts
@ -0,0 +1,29 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'dateHourFormat'
+})
+export class DateHourFormatPipe implements PipeTransform {
+  transform(value: string | null | undefined): string {
+    if (!value) {
+      return '';
+    }
+    const regex = /^([0-2][0-9]|3[0-1])\/([0][1-9]|1[0-2])\/[0-9]{4} ([0-1][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$/;
+    if (regex.test(value)) {
+      return value;
+    }
+    const date = new Date(value);
+    if (!isNaN(date.getTime())) {
+      const day = String(date.getDate()).padStart(2, '0');
+      const month = String(date.getMonth() + 1).padStart(2, '0');
+      const year = date.getFullYear();
+      const hours = String(date.getHours()).padStart(2, '0');
+      const minutes = String(date.getMinutes()).padStart(2, '0');
+      const seconds = String(date.getSeconds()).padStart(2, '0');
+
+      return `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;
+    }
+
+    return '';
+  }
+}
--- a/cmd/core-gui/frontend/src/app/shared/services/pagination/pagination.service.spec.ts
+++ b/cmd/core-gui/frontend/src/app/shared/services/pagination/pagination.service.spec.ts
@ -0,0 +1,157 @@
+import { PaginationService } from './pagination.service';
+import { Pagination } from './pagination';
+
+describe('PaginationService', () => {
+  let service: PaginationService;
+
+  beforeEach(() => {
+    service = new PaginationService();
+  });
+
+  it('should initialize a Pagination object correctly', () => {
+    // Arrange
+    const perPage = 5;
+
+    // Act
+    const pagination: Pagination = service.initializePagination(perPage);
+
+    // Assert
+    expect(pagination).toEqual({
+      totalItems: 0,
+      currentPage: 1,
+      perPage,
+      totalPages: 0,
+      startPage: 1,
+      endPage: 1,
+      pages: [],
+      pageBrowser: false,
+      useful: false
+    });
+  });
+
+  it('should handle the case where currentPage is greater than the total number of pages', () => {
+    // Arrange
+    const input = {
+      totalItems: 10,
+      currentPage: 5,
+      perPage: 5,
+      totalPages: 2,
+      startPage: 1,
+      endPage: 2,
+      pages: [1, 2],
+      pageBrowser: true,
+      useful: true
+    };
+
+    // Act
+    const pagination = service.getPagination(input);
+
+    // Assert
+    expect(pagination.currentPage).toBe(1);
+    expect(pagination.totalPages).toBe(2);
+  });
+
+  it('should handle a small number of pages (≤ 7 pages) correctly', () => {
+    // Arrange
+    const input = {
+      totalItems: 25,
+      currentPage: 3,
+      perPage: 5,
+      totalPages: 5,
+      startPage: 1,
+      endPage: 5,
+      pages: [1, 2, 3, 4, 5],
+      pageBrowser: true,
+      useful: true
+    };
+
+    // Act
+    const pagination = service.getPagination(input);
+
+    // Assert
+    expect(pagination.startPage).toBe(1);
+    expect(pagination.endPage).toBe(5);
+    expect(pagination.pages).toEqual([1, 2, 3, 4, 5]);
+  });
+
+  it('should handle the first pages with many total pages', () => {
+    // Arrange
+    const input = {
+      totalItems: 100,
+      currentPage: 3,
+      perPage: 5,
+      totalPages: 20,
+      startPage: 1,
+      endPage: 7,
+      pages: [1, 2, 3, 4, 5, 6, 7],
+      pageBrowser: true,
+      useful: true
+    };
+
+    // Act
+    const pagination = service.getPagination(input);
+
+    // Assert
+    expect(pagination.startPage).toBe(1);
+    expect(pagination.endPage).toBe(7);
+    expect(pagination.pages.length).toBe(7);
+  });
+
+  it('should handle the last pages with many total pages', () => {
+    // Arrange
+    const input = {
+      totalItems: 100,
+      currentPage: 18,
+      perPage: 5,
+      totalPages: 20,
+      startPage: 14,
+      endPage: 20,
+      pages: [14, 15, 16, 17, 18, 19, 20],
+      pageBrowser: true,
+      useful: true
+    };
+
+    // Act
+    const pagination = service.getPagination(input);
+
+    // Assert
+    expect(pagination.startPage).toBe(14);
+    expect(pagination.endPage).toBe(20);
+    expect(pagination.pages.length).toBe(7);
+  });
+
+  it('should handle middle pages with many total pages', () => {
+    // Arrange
+    const input = {
+      totalItems: 100,
+      currentPage: 10,
+      perPage: 5,
+      totalPages: 20,
+      startPage: 8,
+      endPage: 14,
+      pages: [8, 9, 10, 11, 12, 13, 14],
+      pageBrowser: true,
+      useful: true
+    };
+
+    // Act
+    const pagination = service.getPagination(input);
+
+    // Assert
+    expect(pagination.startPage).toBe(8);
+    expect(pagination.endPage).toBe(14);
+    expect(pagination.pages.length).toBe(7);
+  });
+
+  it('should generate a correct array of numbers with range()', () => {
+    // Arrange
+    const start = 1;
+    const end = 5;
+
+    // Act
+    const result = (service as any).range(start, end);
+
+    // Assert
+    expect(result).toEqual([1, 2, 3, 4]);
+  });
+});
--- a/cmd/core-gui/frontend/src/app/shared/services/pagination/pagination.service.ts
+++ b/cmd/core-gui/frontend/src/app/shared/services/pagination/pagination.service.ts
@ -0,0 +1,72 @@
+import { Injectable } from "@angular/core";
+import { Pagination } from './pagination';
+
+@Injectable()
+export class PaginationService {
+
+  private readonly MAX_PAGES_DISPLAYED = 7;
+  private readonly STARTING_PAGE = 1;
+
+  range(start: number, end: number): number[] {
+    const length = end - start;
+
+    return Array.from({ length }, (__, index) => start + index);
+  }
+
+  getPagination(pagination: Pagination): Pagination {
+    const { totalItems, perPage } = pagination;
+    let currentPage = pagination.currentPage;
+    const totalPages = Math.ceil(totalItems / perPage);
+
+    if (currentPage > totalPages) {
+      currentPage = this.STARTING_PAGE;
+    }
+
+    const { startPage, endPage } = this.calculatePageRange(currentPage, totalPages);
+
+    const pages = this.range(startPage, endPage + 1);
+
+    return {
+      totalItems,
+      currentPage,
+      perPage,
+      totalPages,
+      startPage,
+      endPage,
+      pages,
+      pageBrowser: totalPages > 0,
+      useful: totalPages > 1
+    };
+  }
+
+  private calculatePageRange(currentPage: number, totalPages: number): { startPage: number, endPage: number } {
+    if (totalPages <= this.MAX_PAGES_DISPLAYED) {
+      return { startPage: this.STARTING_PAGE, endPage: totalPages };
+    }
+
+    if (currentPage <= this.MAX_PAGES_DISPLAYED - 1) {
+      return { startPage: this.STARTING_PAGE, endPage: this.MAX_PAGES_DISPLAYED };
+    }
+
+    if (currentPage + 4 >= totalPages) {
+      return { startPage: totalPages - (this.MAX_PAGES_DISPLAYED - 1), endPage: totalPages };
+    }
+
+    return { startPage: currentPage - 2, endPage: currentPage + 4 };
+  }
+
+  initializePagination(perPage: number): Pagination {
+    return {
+      totalItems: 0,
+      currentPage: this.STARTING_PAGE,
+      perPage,
+      totalPages: 0,
+      startPage: this.STARTING_PAGE,
+      endPage: this.STARTING_PAGE,
+      pages: [],
+      pageBrowser: false,
+      useful: false
+    };
+  }
+}
+
--- a/cmd/core-gui/frontend/src/app/shared/services/pagination/pagination.ts
+++ b/cmd/core-gui/frontend/src/app/shared/services/pagination/pagination.ts
@ -0,0 +1,11 @@
+export interface Pagination {
+  totalItems: number;
+  currentPage: number,
+  perPage: number,
+  totalPages: number,
+  startPage: number,
+  endPage: number,
+  pages: number[],
+  pageBrowser: boolean,
+  useful: boolean,
+}
--- a/cmd/core-gui/frontend/src/app/shared/utils/date-utils.ts
+++ b/cmd/core-gui/frontend/src/app/shared/utils/date-utils.ts
@ -0,0 +1,7 @@
+import { formatDate } from '@angular/common';
+
+export function getCurrentDate(): string {
+  const now = new Date();
+
+  return formatDate(now, 'dd/MM/yyyy HH:mm:ss', 'fr-FR');
+}
--- a/cmd/core-gui/frontend/src/app/shared/utils/objects-utils.ts
+++ b/cmd/core-gui/frontend/src/app/shared/utils/objects-utils.ts
@ -0,0 +1,8 @@
+export function areObjectsEqual(obj1: any, obj2: any) {
+  const keys1 = Object.keys(obj1);
+  const keys2 = Object.keys(obj2);
+  if (keys1.length !== keys2.length) return false;
+
+  return keys1.every(key => obj1[key] === obj2[key]);
+}
+
--- a/cmd/core-gui/frontend/src/app/shared/utils/query-utils.ts
+++ b/cmd/core-gui/frontend/src/app/shared/utils/query-utils.ts
@ -0,0 +1,5 @@
+export function addFilterParam(params: URLSearchParams, key: string, value: any): void {
+  if (value !== null && value !== undefined && value !== '') {
+    params.set(key, encodeURIComponent(value));
+  }
+}
--- a/cmd/core-gui/frontend/src/app/translate-server.loader.ts
+++ b/cmd/core-gui/frontend/src/app/translate-server.loader.ts
@ -0,0 +1,14 @@
+import { join } from 'path';
+import { Observable, of } from 'rxjs';
+import { TranslateLoader } from '@ngx-translate/core';
+import * as fs from 'fs';
+
+export class TranslateServerLoader implements TranslateLoader {
+  constructor(private prefix: string = 'i18n', private suffix: string = '.json') {}
+
+  public getTranslation(lang: string): Observable<any> {
+    const path = join(process.cwd(), 'i18n', this.prefix, `${lang}${this.suffix}`);
+    const data = JSON.parse(fs.readFileSync(path, 'utf8'));
+    return of(data);
+  }
+}
--- a/cmd/core-gui/frontend/src/environments/environment.common.ts
+++ b/cmd/core-gui/frontend/src/environments/environment.common.ts
@ -0,0 +1,18 @@
+export const appVersion = '250905-1502';
+
+export const appInfo = {
+  name: 'Core',
+  logo: 'ganatan',
+  network: 'ganatan',
+  xnetwork: 'dannyganatan',
+  linkedinnetwork: 'dannyganatan',
+  website: 'www.ganatan.com',
+};
+
+export const applicationBase = {
+  name: 'angular-starter',
+  angular: 'Angular 20.3.2',
+  bootstrap: 'Bootstrap 5.3.8',
+  fontawesome: 'Font Awesome 7.0.1',
+};
+
--- a/cmd/core-gui/frontend/src/environments/environment.development.ts
+++ b/cmd/core-gui/frontend/src/environments/environment.development.ts
@ -0,0 +1,13 @@
+import { appInfo, applicationBase } from './environment.common';
+
+export const environment = {
+  appInfo,
+  application: {
+    ...applicationBase,
+    angular: `${applicationBase.angular} DEV`,
+  },
+  urlNews: './assets/params/json/mock/trailers.json',
+  urlMovies: './assets/params/json/mock/movies.json',
+  useMock: true,
+  backend: 'http://localhost:3000',
+};
--- a/cmd/core-gui/frontend/src/environments/environment.ts
+++ b/cmd/core-gui/frontend/src/environments/environment.ts
@ -0,0 +1,13 @@
+import { appInfo, applicationBase } from './environment.common';
+
+export const environment = {
+  appInfo,
+  application: {
+    ...applicationBase,
+    angular: `${applicationBase.angular} PROD`,
+  },
+  urlNews: './assets/params/json/mock/trailers.json',
+  urlMovies: './assets/params/json/mock/movies.json',
+  useMock: true,
+  backend: 'http://localhost:3000',
+};
--- a/cmd/core-gui/frontend/src/index.html
+++ b/cmd/core-gui/frontend/src/index.html
@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en" class="wa-theme-premium wa-palette-vogue wa-brand-indigo">
+<head>
+  <meta charset="utf-8">
+  <title>LTHN - Layered Transmission Host Network</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+<!--  <link rel="stylesheet" href="/assets/web-awesome/styles/webawesome.css" />-->
+<!--  <link rel="stylesheet" href="/assets/web-awesome/styles/themes/premium.css" />-->
+<!--  <link rel="stylesheet" href="/assets/web-awesome/styles/native.css" />-->
+<!--  <link rel="stylesheet" href="/assets/web-awesome/styles/utilities.css" />-->
+<!--  <link rel="stylesheet" href="/assets/web-awesome/styles/color/vairants.css" />-->
+  <link rel="manifest" href="manifest.webmanifest">
+</head>
+<body>
+  <app-root></app-root>
+  <noscript>Please enable JavaScript to continue using this application.</noscript>
+</body>
+
+</html>
--- a/cmd/core-gui/frontend/src/main.server.ts
+++ b/cmd/core-gui/frontend/src/main.server.ts
@ -0,0 +1,8 @@
+import { BootstrapContext, bootstrapApplication } from '@angular/platform-browser';
+import { App } from './app/app';
+import { config } from './app/app.config.server';
+
+const bootstrap = (context: BootstrapContext) =>
+    bootstrapApplication(App, config, context);
+
+export default bootstrap;
--- a/cmd/core-gui/frontend/src/main.ts
+++ b/cmd/core-gui/frontend/src/main.ts
@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { App } from './app/app';
+bootstrapApplication(App, appConfig)
+  .catch((err) => console.error(err));
--- a/cmd/core-gui/frontend/src/server.ts
+++ b/cmd/core-gui/frontend/src/server.ts
@ -0,0 +1,68 @@
+import {
+  AngularNodeAppEngine,
+  createNodeRequestHandler,
+  isMainModule,
+  writeResponseToNodeResponse,
+} from '@angular/ssr/node';
+import express from 'express';
+import { join } from 'node:path';
+
+const browserDistFolder = join(import.meta.dirname, '../browser');
+
+const app = express();
+const angularApp = new AngularNodeAppEngine();
+
+/**
+ * Example Express Rest API endpoints can be defined here.
+ * Uncomment and define endpoints as necessary.
+ *
+ * Example:
+ * ```ts
+ * app.get('/api/{*splat}', (req, res) => {
+ *   // Handle API request
+ * });
+ * ```
+ */
+
+/**
+ * Serve static files from /browser
+ */
+app.use(
+  express.static(browserDistFolder, {
+    maxAge: '1y',
+    index: false,
+    redirect: false,
+  }),
+);
+
+/**
+ * Handle all other requests by rendering the Angular application.
+ */
+app.use((req, res, next) => {
+  angularApp
+    .handle(req)
+    .then((response) =>
+      response ? writeResponseToNodeResponse(response, res) : next(),
+    )
+    .catch(next);
+});
+
+/**
+ * Start the server if this module is the main entry point.
+ * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
+ */
+if (isMainModule(import.meta.url)) {
+  const port = process.env['PORT'] || 4000;
+  app.listen(port, (error) => {
+    if (error) {
+      throw error;
+    }
+
+    console.log(`Node Express server listening on http://localhost:${port}`);
+  });
+}
+
+/**
+ * Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions.
+ */
+export const reqHandler = createNodeRequestHandler(app);
--- a/cmd/core-gui/frontend/src/styles.css
+++ b/cmd/core-gui/frontend/src/styles.css
@ -0,0 +1,13 @@
+@import "@awesome.me/webawesome/dist/styles/webawesome.css";
+@import "@awesome.me/webawesome/dist/styles/themes/premium.css";
+@import "@awesome.me/webawesome/dist/styles/native.css";
+@import "@awesome.me/webawesome/dist/styles/utilities.css";
+@import "@awesome.me/webawesome/dist/styles/color/palettes/vogue.css";
+html,
+body {
+  min-height: 100%;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+}
+
--- a/cmd/core-gui/frontend/src/test.ts
+++ b/cmd/core-gui/frontend/src/test.ts
@ -0,0 +1,38 @@
+import 'zone.js/testing';
+import { TestBed } from '@angular/core/testing';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { TranslateService, TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { Observable, of } from 'rxjs';
+
+// Provide TranslateService mock globally for tests to avoid NG0201 in standalone components
+(() => {
+  class FakeTranslateLoader implements TranslateLoader {
+    getTranslation(lang: string): Observable<any> { return of({}); }
+  }
+
+  const translateServiceMock: Partial<TranslateService> = {
+    use: (() => ({ toPromise: async () => undefined })) as any,
+    instant: ((key: string) => key) as any,
+    get: (((key: any) => ({ subscribe: (fn: any) => fn(key) })) as any),
+    onLangChange: { subscribe: () => ({ unsubscribe() {} }) } as any,
+  } as Partial<TranslateService>;
+
+  // Patch TestBed.configureTestingModule to always include Translate support
+  const originalConfigure = TestBed.configureTestingModule.bind(TestBed);
+  (TestBed as any).configureTestingModule = (meta: any = {}) => {
+    // Ensure providers include TranslateService mock if not already provided
+    const providers = meta.providers ?? [];
+    const hasTranslateProvider = providers.some((p: any) => p && (p.provide === TranslateService));
+    meta.providers = hasTranslateProvider ? providers : [...providers, { provide: TranslateService, useValue: translateServiceMock }];
+
+    // Ensure imports include TranslateModule.forRoot with a fake loader (brings internal _TranslateService)
+    const imports = meta.imports ?? [];
+    const hasTranslateModule = imports.some((imp: any) => imp && (imp === TranslateModule || (imp.ngModule && imp.ngModule === TranslateModule)));
+    if (!hasTranslateModule) {
+      imports.push(TranslateModule.forRoot({ loader: { provide: TranslateLoader, useClass: FakeTranslateLoader } }));
+    }
+    meta.imports = imports;
+
+    return originalConfigure(meta);
+  };
+})();
--- a/cmd/core-gui/frontend/src/testing/gbu.ts
+++ b/cmd/core-gui/frontend/src/testing/gbu.ts
@ -0,0 +1,31 @@
+// Good/Bad/Ugly test helpers for Jasmine
+// Usage:
+//   import { itGood, itBad, itUgly, trio } from 'src/testing/gbu';
+//   itGood('does X', () => { /* ... */ });
+//   trio('feature does Y', {
+//     good: () => { /* ... */ },
+//     bad:  () => { /* ... */ },
+//     ugly: () => { /* ... */ },
+//   });
+
+export function suffix(base: string, tag: 'Good' | 'Bad' | 'Ugly'): string {
+  return `${base}_${tag}`;
+}
+
+export function itGood(name: string, fn: jasmine.ImplementationCallback, timeout?: number): void {
+  it(suffix(name, 'Good'), fn, timeout as any);
+}
+
+export function itBad(name: string, fn: jasmine.ImplementationCallback, timeout?: number): void {
+  it(suffix(name, 'Bad'), fn, timeout as any);
+}
+
+export function itUgly(name: string, fn: jasmine.ImplementationCallback, timeout?: number): void {
+  it(suffix(name, 'Ugly'), fn, timeout as any);
+}
+
+export function trio(name: string, impls: { good: () => void; bad: () => void; ugly: () => void; }): void {
+  itGood(name, impls.good);
+  itBad(name, impls.bad);
+  itUgly(name, impls.ugly);
+}
--- a/cmd/core-gui/frontend/tools/scripts/generate-project-structure.js
+++ b/cmd/core-gui/frontend/tools/scripts/generate-project-structure.js
@ -0,0 +1,49 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+
+function getDirectoryStructure(dirPath, level = 0) {
+  const files = fs.readdirSync(dirPath);
+
+  let structure = '';
+
+  files.forEach(file => {
+    const fullPath = path.join(dirPath, file);
+    const isDirectory = fs.lstatSync(fullPath).isDirectory();
+
+    structure += `${'  '.repeat(level)}|-- ${file}\n`;
+
+    if (isDirectory) {
+      structure += getDirectoryStructure(fullPath, level + 1);
+    }
+  });
+
+  return structure;
+}
+
+function generateStructureForFolders(folders) {
+  let fullStructure = '';
+
+  folders.forEach(folder => {
+    const folderPath = path.join(__dirname, '..', '..', folder);
+    if (fs.existsSync(folderPath)) {
+      fullStructure += `\nStructure of ${folder}:\n`;
+      fullStructure += getDirectoryStructure(folderPath);
+    } else {
+      fullStructure += `\n${folder} directory does not exist.\n`;
+    }
+  });
+
+  return fullStructure;
+}
+
+const foldersToInspect = ['src', 'tools'];
+const projectStructure = generateStructureForFolders(foldersToInspect);
+
+console.log(projectStructure);
+
+module.exports = {
+  getDirectoryStructure,
+  generateStructureForFolders,
+};
--- a/cmd/core-gui/frontend/tsconfig.app.json
+++ b/cmd/core-gui/frontend/tsconfig.app.json
@ -0,0 +1,20 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": [
+      "node",
+      "./node_modules/@awesome.me/webawesome/dist/custom-elements-jsx.d.ts"
+    ]
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/testing/**/*.ts",
+    "src/test.ts"
+  ]
+}
--- a/cmd/core-gui/frontend/tsconfig.json
+++ b/cmd/core-gui/frontend/tsconfig.json
@ -0,0 +1,35 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "compileOnSave": false,
+  "lib": [ "ES2022", "DOM"],
+  "compilerOptions": {
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "preserve",
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "typeCheckHostBindings": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
--- a/cmd/core-gui/frontend/tsconfig.spec.json
+++ b/cmd/core-gui/frontend/tsconfig.spec.json
@ -0,0 +1,18 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+/* To learn more about Angular compiler options: https://angular.dev/reference/configs/angular-compiler-options. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "src/*": ["src/*"]
+    }
+  },
+  "include": [
+    "src/**/*.ts"
+  ]
+}
--- a/cmd/core-gui/main.go
+++ b/cmd/core-gui/main.go
@ -23,7 +23,7 @@ func main() {
 		log.Fatal(err)
 	}

-	app.Services.Add(application.NewService(rt))
+	app.RegisterService(application.NewService(rt))

 	err = app.Run()
 	if err != nil {
--- a/go.work.sum
+++ b/go.work.sum
@ -172,6 +172,7 @@ github.com/mitchellh/mapstructure v1.5.0/go.mod h1:bFUtVrKA4DC2yAKiSyO/QUcy7e+RR
 github.com/mitchellh/reflectwalk v1.0.2 h1:G2LzWKi524PWgd3mLHV8Y5k7s6XUvT0Gef6zxSIeXaQ=
 github.com/mitchellh/reflectwalk v1.0.2/go.mod h1:mSTlrgnPZtwu0c4WaC2kGObEpuNDbx0jmZXqmk4esnw=
 github.com/muesli/ansi v0.0.0-20211018074035-2e021307bc4b/go.mod h1:fQuZ0gauxyBcmsdE3ZT4NasjaRdxmbCS0jRHsrWu3Ho=
+github.com/muesli/cancelreader v0.2.2 h1:3I4Kt4BQjOR54NavqnDogx/MIoWBFa0StPA8ELUXHmA=
 github.com/muesli/cancelreader v0.2.2/go.mod h1:3XuTXfFS2VjM+HTLZY9Ak0l6eUKfijIfMUZ4EgX0QYo=
 github.com/muesli/mango v0.1.0/go.mod h1:5XFpbC8jY5UUv89YQciiXNlbi+iJgt29VDC5xbzrLL4=
 github.com/muesli/mango-cobra v1.2.0/go.mod h1:vMJL54QytZAJhCT13LPVDfkvCUJ5/4jNUKF/8NC2UjA=
@ -295,7 +296,6 @@ golang.org/x/term v0.0.0-20210220032956-6a3ed077a48d/go.mod h1:bj7SfCRtBDWHUb9sn
 golang.org/x/term v0.0.0-20210615171337-6886f2dfbf5b/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
 golang.org/x/term v0.30.0/go.mod h1:NYYFdzHoI5wRh/h5tDMdMqCqPJZEuNqVR5xJLd/n67g=
 golang.org/x/text v0.22.0/go.mod h1:YRoo4H8PVmsu+E3Ou7cqLVH8oXWIHVoX0jqUWALQhfY=
-golang.org/x/text v0.23.0/go.mod h1:/BLNzu4aZCJ1+kcD0DNRotWKage4q2rGVAg4o22unh4=
 golang.org/x/text v0.24.0/go.mod h1:L8rBsPeo2pSS+xqN0d5u2ikmjtmoJbDBT1b7nHvFCdU=
 golang.org/x/tools v0.26.0/go.mod h1:TPVVj70c7JJ3WCazhD8OdXcZg/og+b9+tH/KxylGwH0=
 golang.org/x/tools v0.31.0/go.mod h1:naFTU+Cev749tSJRXJlna0T3WxKvb1kWEx15xA4SdmQ=