diff --git a/src/shared/Angor.Shared.Tests/Services/NetworkServiceTests.cs b/src/shared/Angor.Shared.Tests/Services/NetworkServiceTests.cs
new file mode 100644
index 000000000..2b397b0f2
--- /dev/null
+++ b/src/shared/Angor.Shared.Tests/Services/NetworkServiceTests.cs
@@ -0,0 +1,75 @@
+using System.Net;
+using System.Text.Json;
+using Angor.Shared;
+using Angor.Shared.Models;
+using Angor.Shared.Services;
+using Microsoft.Extensions.Logging.Abstractions;
+using Moq;
+
+namespace Angor.Test.Services;
+
+public class NetworkServiceTests
+{
+    [Theory]
+    [InlineData(false)]
+    [InlineData(true)]
+    public async Task CheckServices_WhenSettingsChangeDuringRequest_PreservesCurrentNetworkAndIndexer(bool switchNetwork)
+    {
+        string network = "Main";
+        SettingsInfo stored = new()
+        {
+            Indexers = new List<SettingsUrl>
+            {
+                new() { Url = "https://old.example", IsPrimary = true }
+            }
+        };
+        Mock<INetworkStorage> storage = new();
+        storage.Setup(value => value.GetNetwork()).Returns(() => network);
+        // Local storage returns snapshots, not a shared in-memory object.
+        storage.Setup(value => value.GetSettings()).Returns(() =>
+            JsonSerializer.Deserialize<SettingsInfo>(JsonSerializer.Serialize(stored))!);
+        storage.Setup(value => value.SetSettings(It.IsAny<SettingsInfo>()))
+            .Callback<SettingsInfo>(value => stored = value);
+        DelayedHandler handler = new();
+        using HttpClient client = new(handler);
+        Mock<IHttpClientFactory> factory = new();
+        factory.Setup(value => value.CreateClient(It.IsAny<string>())).Returns(client);
+        NetworkService service = new(storage.Object, factory.Object,
+            NullLogger<NetworkService>.Instance, Mock.Of<INetworkConfiguration>());
+
+        Task checking = service.CheckServices(true);
+        await handler.Started.Task;
+        network = switchNetwork ? "Angornet" : "Main";
+        stored = new SettingsInfo
+        {
+            Indexers = new List<SettingsUrl>
+            {
+                new() { Url = "https://selected.example", IsPrimary = true },
+                new() { Url = "https://old.example", IsPrimary = false }
+            }
+        };
+        handler.Response.SetResult(new HttpResponseMessage(HttpStatusCode.OK));
+        await checking;
+
+        Assert.Equal(switchNetwork ? "Angornet" : "Main", network);
+        Assert.Equal("https://selected.example", service.GetPrimaryIndexer().Url);
+        Assert.Equal(2, stored.Indexers.Count);
+        if (switchNetwork)
+            storage.Verify(value => value.SetSettings(It.IsAny<SettingsInfo>()), Times.Never);
+        else
+            Assert.Equal(UrlStatus.Online, stored.Indexers[1].Status);
+    }
+
+    private sealed class DelayedHandler : HttpMessageHandler
+    {
+        public TaskCompletionSource Started { get; } = new(TaskCreationOptions.RunContinuationsAsynchronously);
+        public TaskCompletionSource<HttpResponseMessage> Response { get; } =
+            new(TaskCreationOptions.RunContinuationsAsynchronously);
+
+        protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
+        {
+            Started.TrySetResult();
+            return Response.Task;
+        }
+    }
+}
diff --git a/src/shared/Angor.Shared.Tests/WalletWordsAsyncTests.cs b/src/shared/Angor.Shared.Tests/WalletWordsAsyncTests.cs
new file mode 100644
index 000000000..e3dc75c74
--- /dev/null
+++ b/src/shared/Angor.Shared.Tests/WalletWordsAsyncTests.cs
@@ -0,0 +1,55 @@
+using System.Security.Cryptography;
+using System.Text;
+using Angor.Shared;
+using Angor.Shared.Models;
+using Moq;
+using NBitcoin;
+
+namespace Angor.Test;
+
+public class WalletWordsAsyncTests
+{
+    private const string MnemonicWords = "abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon abandon about";
+
+    [Theory]
+    [InlineData("")]
+    [InlineData("TREZOR")]
+    [InlineData("é㍍ガバヴァぱばぐゞちぢ十人十色")]
+    public async Task AsyncDerivation_MatchesNBitcoinAndPrimesSigningCache(string passphrase)
+    {
+        using WalletWords words = new() { Words = MnemonicWords, Passphrase = passphrase };
+        ExtKey expected = new HdOperations().GetExtendedKey(MnemonicWords, passphrase);
+        ExtKey actual = await words.GetOrDeriveExtKeyAsync((mnemonic, password) =>
+        {
+            byte[] seed = Rfc2898DeriveBytes.Pbkdf2(
+                Encoding.UTF8.GetBytes(mnemonic.Normalize(NormalizationForm.FormKD)),
+                Encoding.UTF8.GetBytes(("mnemonic" + password).Normalize(NormalizationForm.FormKD)),
+                2048, HashAlgorithmName.SHA512, 64);
+            try
+            {
+                return Task.FromResult(ExtKey.CreateFromSeed(seed));
+            }
+            finally
+            {
+                CryptographicOperations.ZeroMemory(seed);
+            }
+        });
+
+        Assert.Equal(expected.GetWif(Network.Main).ToString(), actual.GetWif(Network.Main).ToString());
+        Assert.Same(actual, words.GetOrDeriveExtKey(Mock.Of<IHdOperations>()));
+        Assert.Same(actual, await words.GetOrDeriveExtKeyAsync((_, _) => throw new Exception("Cache was not used")));
+        Assert.DoesNotContain(actual.GetWif(Network.Main).ToString(), words.ConvertToString());
+    }
+
+    [Fact]
+    public async Task AsyncDerivation_WhenDisposedWhileWaiting_DoesNotRetainKey()
+    {
+        WalletWords words = new() { Words = MnemonicWords };
+        TaskCompletionSource<ExtKey> completion = new(TaskCreationOptions.RunContinuationsAsynchronously);
+        Task<ExtKey> pending = words.GetOrDeriveExtKeyAsync((_, _) => completion.Task);
+        words.Dispose();
+        completion.SetResult(new HdOperations().GetExtendedKey(MnemonicWords));
+        await Assert.ThrowsAsync<ObjectDisposedException>(() => pending);
+        Assert.Null(words.CachedExtKey);
+    }
+}
diff --git a/src/shared/Angor.Shared/Models/WalletWords.cs b/src/shared/Angor.Shared/Models/WalletWords.cs
index 5b23a6fff..872a1ffca 100644
--- a/src/shared/Angor.Shared/Models/WalletWords.cs
+++ b/src/shared/Angor.Shared/Models/WalletWords.cs
@@ -101,6 +101,22 @@ public ExtKey GetOrDeriveExtKey(IHdOperations hdOperations)
         return cachedExtKey;
     }
 
+    /// <summary>
+    /// Prime the same master-key cache using a platform's asynchronous BIP-39 derivation.
+    /// Browser callers use Web Crypto so PBKDF2 does not block the UI thread.
+    /// </summary>
+    public async Task<ExtKey> GetOrDeriveExtKeyAsync(Func<string, string?, Task<ExtKey>> derive)
+    {
+        ObjectDisposedException.ThrowIf(disposed, this);
+        if (cachedExtKey != null)
+            return cachedExtKey;
+
+        ExtKey key = await derive(Words, Passphrase);
+        ObjectDisposedException.ThrowIf(disposed, this);
+        cachedExtKey ??= key;
+        return cachedExtKey;
+    }
+
     public string ConvertToString()
     {
         return JsonSerializer.Serialize(this);
diff --git a/src/shared/Angor.Shared/Services/NetworkService.cs b/src/shared/Angor.Shared/Services/NetworkService.cs
index 205f222ca..09abd000c 100644
--- a/src/shared/Angor.Shared/Services/NetworkService.cs
+++ b/src/shared/Angor.Shared/Services/NetworkService.cs
@@ -99,6 +99,7 @@ public void AddSettingsIfNotExist()
 
         public async Task CheckServices(bool force = false)
         {
+            string checkedNetwork = _networkStorage.GetNetwork();
             var settings = _networkStorage.GetSettings();
 
             foreach (var indexerUrl  in settings.Indexers)
@@ -173,7 +174,32 @@ public async Task CheckServices(bool force = false)
             }
 
             client.DefaultRequestHeaders.Accept.Remove(nostrHeaderMediaType);
-            _networkStorage.SetSettings(settings);
+            // Connection checks can outlive a network switch or a Hub handoff.
+            // Merge only status information into the latest settings, never the
+            // old primary selections or lists captured before the HTTP requests.
+            if (_networkStorage.GetNetwork() != checkedNetwork)
+                return;
+
+            SettingsInfo currentSettings = _networkStorage.GetSettings();
+            MergeConnectionStatuses(currentSettings.Indexers, settings.Indexers);
+            MergeConnectionStatuses(currentSettings.Relays, settings.Relays);
+            _networkStorage.SetSettings(currentSettings);
+            OnStatusChanged?.Invoke();
+        }
+
+        private static void MergeConnectionStatuses(List<SettingsUrl> current, List<SettingsUrl> checkedUrls)
+        {
+            foreach (SettingsUrl entry in current)
+            {
+                SettingsUrl? result = checkedUrls.FirstOrDefault(candidate => candidate.Url == entry.Url);
+                if (result == null || result.LastCheck < entry.LastCheck)
+                    continue;
+
+                entry.LastCheck = result.LastCheck;
+                entry.Status = result.Status;
+                if (string.IsNullOrEmpty(entry.Name))
+                    entry.Name = result.Name;
+            }
         }
 
         public SettingsUrl GetPrimaryIndexer()
diff --git a/src/shared/Angor.Shared/Services/NostrCommunicationFactory.cs b/src/shared/Angor.Shared/Services/NostrCommunicationFactory.cs
index 28f9ebf7e..48e007d2e 100644
--- a/src/shared/Angor.Shared/Services/NostrCommunicationFactory.cs
+++ b/src/shared/Angor.Shared/Services/NostrCommunicationFactory.cs
@@ -15,6 +15,7 @@ public class NostrCommunicationFactory : IDisposable , INostrCommunicationFactor
     private NostrMultiWebsocketClient? _nostrMultiWebsocketClient;
     private NostrMultiWebsocketClient? _nostrMultiWebsocketClientDiscovery;
     private readonly List<IDisposable> _serviceSubscriptions;
+    private readonly ConcurrentDictionary<string, byte> _connectingRelays = new();
 
     private ConcurrentDictionary<string, ConcurrentDictionary<string, byte>> _eoseCalledOnSubscriptionClients;
     private ConcurrentDictionary<string, ConcurrentDictionary<string, byte>> _okCalledOnSubscriptionClients;
@@ -30,7 +31,7 @@ public NostrCommunicationFactory(ILogger<NostrWebsocketClient> clientLogger, ILo
         _okCalledOnSubscriptionClients = new();
     }
 
-    private ConcurrentDictionary<string, byte> GetAllConnectedRelayNames(bool includeDiscoveryRelays = false)
+    private ConcurrentDictionary<string, byte> GetAllConnectedRelayNames(bool includeDiscoveryRelays = false, bool includeConnectingRelays = false)
     {
         var allRelays = new ConcurrentDictionary<string, byte>();
 
@@ -38,11 +39,10 @@ private ConcurrentDictionary<string, byte> GetAllConnectedRelayNames(bool includ
         {
             foreach (var client in _nostrMultiWebsocketClient.Clients)
             {
-                // Only track relays whose websocket is actually running. A relay that never
-                // completed the WS upgrade will never send EOSE, and its DisconnectionHappened
-                // already fired before any subscription was monitored — so including it here
-                // would block the "all relays sent EOSE" completion check forever.
-                if (client.Communicator.IsRunning)
+                // A connecting relay may hold the only copy of a requested event.
+                // Wait for its initial attempt, but exclude relays that already failed.
+                if (client.Communicator.IsRunning ||
+                    (includeConnectingRelays && _connectingRelays.ContainsKey(client.Communicator.Name)))
                     allRelays.TryAdd(client.Communicator.Name, 0);
             }
         }
@@ -51,7 +51,8 @@ private ConcurrentDictionary<string, byte> GetAllConnectedRelayNames(bool includ
         {
             foreach (var client in _nostrMultiWebsocketClientDiscovery.Clients)
             {
-                if (client.Communicator.IsRunning)
+                if (client.Communicator.IsRunning ||
+                    (includeConnectingRelays && _connectingRelays.ContainsKey(client.Communicator.Name)))
                     allRelays.TryAdd(client.Communicator.Name, 0);
             }
         }
@@ -99,7 +100,7 @@ public INostrClient GetOrCreateDiscoveryClients(INetworkService networkService)
 
             _nostrMultiWebsocketClientDiscovery!.RegisterClient(client);
 
-            communicator.StartOrFail();
+            _ = StartRelayAsync(communicator);
         }
 
         return _nostrMultiWebsocketClientDiscovery;
@@ -173,7 +174,24 @@ private void ConnectToAllRelaysInTheSettings(INetworkService networkService)
             
             _nostrMultiWebsocketClient!.RegisterClient(client);
             
-            communicator.StartOrFail();
+            _ = StartRelayAsync(communicator);
+        }
+    }
+
+    private async Task StartRelayAsync(INostrCommunicator communicator)
+    {
+        _connectingRelays.TryAdd(communicator.Name, 0);
+        try
+        {
+            await communicator.StartOrFail();
+        }
+        catch (Exception ex)
+        {
+            _logger.LogDebug(ex, "Initial connection failed for relay {RelayName}", communicator.Name);
+        }
+        finally
+        {
+            _connectingRelays.TryRemove(communicator.Name, out _);
         }
     }
 
@@ -199,7 +217,7 @@ public bool EoseEventReceivedOnAllRelays(string subscription)
     public bool MonitoringEoseReceivedOnSubscription(string subscription, bool includeDiscoveryRelays = false)
     {
         _logger.LogDebug($"Started monitoring subscription {subscription}");
-        var relayNames = GetAllConnectedRelayNames(includeDiscoveryRelays);
+        var relayNames = GetAllConnectedRelayNames(includeDiscoveryRelays, includeConnectingRelays: true);
         if (_eoseCalledOnSubscriptionClients.TryAdd(subscription, relayNames))
             return true;
         
@@ -264,6 +282,7 @@ public INostrCommunicator CreateCommunicator(string uri, string relayName)
 
         _serviceSubscriptions.Add(nostrCommunicator.DisconnectionHappened.Subscribe(e =>
         {
+            _connectingRelays.TryRemove(relayName, out _);
             if (e.Exception != null)
                 _logger.LogWarning(
                     "Relay {relayName} disconnected, type: {Type}, reason: {Reason}",
@@ -322,6 +341,7 @@ public void Dispose()
     {
         _serviceSubscriptions.ForEach(subscription => subscription.Dispose());
         _serviceSubscriptions.Clear();
+        _connectingRelays.Clear();
         _nostrMultiWebsocketClient?.Dispose();
         _nostrMultiWebsocketClient = null;
         _eoseCalledOnSubscriptionClients = new();
diff --git a/src/shared/Angor.Shared/WalletOperations.cs b/src/shared/Angor.Shared/WalletOperations.cs
index f62e9de63..596885ccb 100644
--- a/src/shared/Angor.Shared/WalletOperations.cs
+++ b/src/shared/Angor.Shared/WalletOperations.cs
@@ -647,9 +647,15 @@ public async Task UpdateAccountInfoWithNewAddressesAsync(AccountInfo accountInfo
         {
             _logger.LogInformation($"fetching balance for account = {accountExtPubKey.ToString(network.BitcoinNetwork)} start index = {scanIndex} isChange = {isChange} gap = {gap}");
 
-            var newAddressesToCheck = Enumerable.Range(0, gap)
-                .Select(_ => GenerateAddressFromPubKey(scanIndex + _, network, isChange, accountExtPubKey))
-            .ToList();
+            var newAddressesToCheck = new List<AddressInfo>(gap);
+            for (int offset = 0; offset < gap; offset++)
+            {
+                newAddressesToCheck.Add(GenerateAddressFromPubKey(scanIndex + offset, network, isChange, accountExtPubKey));
+                // Browser WASM shares the UI thread. Let input and painting run
+                // between address derivations instead of blocking for a full batch.
+                if (OperatingSystem.IsBrowser())
+                    await Task.Delay(1);
+            }
 
             //check all new addresses for balance or a history
             addressesNotEmpty = await _indexerService.GetAdressBalancesAsync(newAddressesToCheck, true);
diff --git a/src/webapp/Angor.Client/Pages/InvestView.razor b/src/webapp/Angor.Client/Pages/InvestView.razor
index 712ffc549..c6c2740ff 100644
--- a/src/webapp/Angor.Client/Pages/InvestView.razor
+++ b/src/webapp/Angor.Client/Pages/InvestView.razor
@@ -38,6 +38,7 @@
 @inject NostrConversionHelper NostrHelper
 @inject IInvestorTransactionActions _InvestorTransactionActions
 @inject ISerializer serializer
+@inject WalletKeyService walletKeyService
 @inject IEncryptionService encryption
 @inject IAddressPollingService _addressPollingService
 @inject IWalletStorage _walletStorage
@@ -49,28 +50,87 @@
 <NotificationComponent @ref="notificationComponent" />
 <PasswordComponent @ref="passwordComponent" />
 
-<!-- Standalone header (no app navigation) -->
-<header class="hub-header">
-    <a class="hub-brand" href="https://angor.io" target="_blank" rel="noopener">
-        <img src="/assets/img/angor-logo.svg" alt="Angor" />
-        <span>Angor Invest</span>
-    </a>
-    <span class="d-flex align-items-center gap-3">
-        <span class="hub-network-badge @(network.IsMainnet ? "" : "testnet")">@network.Name</span>
-        <a class="hub-link" href="/settings" title="Relay and indexer settings">
-            <Icon IconName="settings" Width="18" Height="18" />
-            <span class="d-none d-sm-inline ms-1">Settings</span>
-        </a>
-    </span>
-</header>
+<HubPaymentHeader IsMainnet="@network.IsMainnet" NetworkName="@network.Name" OnSettingsRequested="OpenConnectionModal" OnHelpRequested="() => showHelpModal = true" HelpAvailable="@(project != null && !founder)" />
+
+<!-- Connection Settings Modal (indexers + relays) -->
+@if (showConnectionModal && connectionSettings != null)
+{
+    <div class="modal fade show d-block" role="dialog" aria-modal="true" tabindex="-1" style="background: rgba(0,0,0,0.7);">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title d-flex align-items-center gap-2">
+                        <Icon IconName="settings" Width="24" Height="24" />
+                        Connection Settings
+                    </h5>
+                    <button type="button" class="btn-close" aria-label="Close" @onclick="() => showConnectionModal = false"></button>
+                </div>
+                <div class="modal-body">
+
+                    <h6 class="mb-2">Indexers</h6>
+                    <p class="text-muted small mb-2">The indexer used to look up projects and broadcast transactions.</p>
+                    @foreach (var indexer in connectionSettings.Indexers)
+                    {
+                        <div class="d-flex align-items-center gap-2 bg-light rounded p-2 mb-2">
+                            <input type="radio" name="primary-indexer" checked="@indexer.IsPrimary"
+                                   @onchange="() => SetPrimaryIndexerUrl(indexer)" />
+                            <span class="badge @(indexer.Status == UrlStatus.Online ? "bg-success" : "bg-secondary")">
+                                @(indexer.Status == UrlStatus.Online ? "online" : indexer.Status == UrlStatus.Offline ? "offline" : "?")
+                            </span>
+                            <span class="text-break small flex-grow-1" style="word-break: break-all;">@indexer.Url</span>
+                            <button class="btn btn-sm btn-outline-danger flex-shrink-0" title="Remove"
+                                    @onclick="() => RemoveIndexerUrl(indexer)" disabled="@(connectionSettings.Indexers.Count <= 1)">
+                                <Icon IconName="delete" Width="14" Height="14" />
+                            </button>
+                        </div>
+                    }
+                    <div class="input-group mb-4">
+                        <input type="text" class="form-control" placeholder="https://indexer.example.com"
+                               @bind="newIndexerUrl" />
+                        <button class="btn btn-outline-success" @onclick="AddIndexerUrl"
+                                disabled="@string.IsNullOrWhiteSpace(newIndexerUrl)">Add</button>
+                    </div>
+
+                    <h6 class="mb-2">Nostr Relays</h6>
+                    <p class="text-muted small mb-2">Relays used to fetch project data and exchange messages with the founder.</p>
+                    @foreach (var relay in connectionSettings.Relays)
+                    {
+                        <div class="d-flex align-items-center gap-2 bg-light rounded p-2 mb-2">
+                            <span class="badge @(relay.Status == UrlStatus.Online ? "bg-success" : "bg-secondary")">
+                                @(relay.Status == UrlStatus.Online ? "online" : relay.Status == UrlStatus.Offline ? "offline" : "?")
+                            </span>
+                            <span class="text-break small flex-grow-1" style="word-break: break-all;">@relay.Url</span>
+                            <button class="btn btn-sm btn-outline-danger flex-shrink-0" title="Remove"
+                                    @onclick="() => RemoveRelayUrl(relay)" disabled="@(connectionSettings.Relays.Count <= 1)">
+                                <Icon IconName="delete" Width="14" Height="14" />
+                            </button>
+                        </div>
+                    }
+                    <div class="input-group">
+                        <input type="text" class="form-control" placeholder="wss://relay.example.com"
+                               @bind="newRelayUrl" />
+                        <button class="btn btn-outline-success" @onclick="AddRelayUrl"
+                                disabled="@string.IsNullOrWhiteSpace(newRelayUrl)">Add</button>
+                    </div>
+
+                </div>
+                <div class="modal-footer">
+                    <button class="btn btn-success btn-sm" @onclick="() => showConnectionModal = false">Done</button>
+                </div>
+            </div>
+        </div>
+    </div>
+}
+
 
 @if (loadingProject)
 {
-    <div class="container mt-5 text-center">
-        <div class="spinner-border text-success" role="status"></div>
-        <p class="mt-3" style="color: var(--text-secondary);">Loading project...</p>
+    <div class="hub-loading-state" role="status" aria-live="polite">
+        <div class="hub-loading-mark"><img src="/assets/img/app-icon.png" alt="" /><span class="hub-loading-ring"></span></div>
+        <h1>Loading your project</h1>
+        <p>Preparing your payment details...</p>
         <p class="small text-muted">
-            Taking too long? Check your <a class="hub-link" href="/settings">relay and indexer settings</a>.
+            Taking too long? Check your <button type="button" class="hub-inline-link" @onclick="OpenConnectionModal">relay and indexer settings</button>.
         </p>
     </div>
     return;
@@ -84,8 +144,8 @@
             <span>@(loadError ?? "The project was not found.")</span>
         </div>
         <div class="text-center mt-3 d-flex justify-content-center gap-3 flex-wrap">
-            <a class="hub-link" href="https://angor.io" target="_blank" rel="noopener">Browse projects on angor.io</a>
-            <a class="hub-link" href="/settings">Check relay &amp; indexer settings</a>
+            <a class="hub-link" href="@HubBaseUrl">Browse projects</a>
+            <button type="button" class="hub-inline-link" @onclick="OpenConnectionModal">Check relay &amp; indexer settings</button>
         </div>
     </div>
     return;
@@ -102,84 +162,50 @@
     return;
 }
 
-<div class="container mt-4 invest-view-page" style="max-width: 1000px;">
+<div class="container mt-4 invest-view-page @(invested ? "hub-completed-page" : "")" >
 
-    <!-- Project summary card -->
-    <div class="card hub-project-hero mb-4">
-        @if (!string.IsNullOrEmpty(project.Metadata?.Banner))
-        {
-            <img class="hub-project-banner" src="@project.Metadata.Banner" alt="" />
-        }
-        <div class="card-body">
-            <div class="d-flex align-items-start gap-3">
-                @if (!string.IsNullOrEmpty(project.Metadata?.Picture))
-                {
-                    <img class="hub-project-logo" src="@project.Metadata.Picture" alt="" />
-                }
-                <div class="flex-grow-1">
-                    <h4 class="mb-1">@(project.Metadata?.Name ?? project.ProjectInfo.ProjectIdentifier)</h4>
-                    @if (!string.IsNullOrEmpty(project.Metadata?.About))
-                    {
-                        <p class="text-muted mb-2">@TruncateAbout(project.Metadata.About)</p>
-                    }
-                    <a class="hub-link" href="https://angor.io/project/@ProjectId" target="_blank" rel="noopener">
-                        View full project details on angor.io
-                        <Icon IconName="link" Width="14" Height="14" />
-                    </a>
-                </div>
+    <div class="hub-invest-navigation">
+        <div class="hub-invest-navigation-inner">
+            <div class="hub-invest-navigation-left">
+                <a class="hub-back-button" href="@(HubBaseUrl + "/project/" + ProjectId)"><span aria-hidden="true">←</span> Back</a>
+                <span class="hub-project-label">@(project.Metadata?.Name ?? project.ProjectInfo.ProjectIdentifier)</span>
             </div>
-
-            <!-- Funding progress -->
-            <div class="mt-4">
-                <div class="d-flex justify-content-between mb-1">
-                    <span class="text-muted small">Raised</span>
-                    <span class="fw-bold" style="color: var(--accent);">@fundingProgressPercent%</span>
-                </div>
-                <div class="hub-progress-track">
-                    <div class="hub-progress-fill" style="width: @(Math.Min(fundingProgressPercent, 100))%"></div>
-                </div>
-                <div class="d-flex justify-content-between mt-2">
-                    <span class="small">
-                        <span class="fw-bold">@Money.Satoshis(totalRaisedSats).ToUnit(MoneyUnit.BTC)</span>
-                        <span class="text-muted">of @Money.Satoshis(project.ProjectInfo.TargetAmount).ToUnit(MoneyUnit.BTC) @network.CoinTicker</span>
-                    </span>
-                    <span class="small text-muted">@totalInvestors investors</span>
-                </div>
+            <div class="hub-invest-navigation-actions">
+            <div class="hub-invest-navigation-stats">
+                <span>Total Raised <strong>@Money.Satoshis(totalRaisedSats).ToUnit(MoneyUnit.BTC) @network.CoinTicker</strong></span>
+                <span>Progress <strong>@fundingProgressPercent%</strong></span>
             </div>
-
-            <div class="d-flex flex-wrap gap-3 mt-3 small text-muted">
-                <span>Starts: <span class="fw-bold" style="color: var(--text);">@project.ProjectInfo.StartDate.ToString("dd MMM yyyy")</span></span>
-                <span>Expires: <span class="fw-bold" style="color: var(--text);">@project.ProjectInfo.ExpiryDate.ToString("dd MMM yyyy")</span></span>
-                <span>Stages: <span class="fw-bold" style="color: var(--text);">@((project.ProjectInfo.AllowDynamicStages ? SelectedPattern?.StageCount : project.ProjectInfo.Stages?.Count) ?? 0)</span></span>
-                <span>Penalty: <span class="fw-bold" style="color: var(--text);">@project.ProjectInfo.PenaltyDays days</span></span>
+            <button type="button" class="hub-help-button" @onclick="() => showHelpModal = true">Help</button>
             </div>
         </div>
     </div>
 
     @if (invested)
     {
-        <div class="hub-opportunity mb-4">
-            <div class="mb-3">
-                <Icon IconName="circle-check" Width="48" Height="48" />
-            </div>
-            <h4 class="text-white mb-2">Investment Confirmed</h4>
-            <p class="mb-3" style="color: rgba(255,255,255,.9);">
-                Your investment was published to the Bitcoin network.
-                To manage or recover your funds later, import your recovery phrase into the Angor desktop app.
-            </p>
-            @if (!string.IsNullOrEmpty(investedTransactionId))
-            {
-                <a class="btn btn-white mb-2" href="@(_networkService.GetPrimaryExplorer().Url + $"/tx/{investedTransactionId}")" target="_blank" rel="noopener">
-                    View Transaction
-                </a>
-            }
-            <button class="btn btn-white" @onclick="ShowRecoveryPhraseAsync">Show Recovery Phrase</button>
-            <div class="mt-3">
-                <a href="#" class="small" style="color: rgba(255,255,255,.75);"
-                   @onclick="OpenDeleteWalletModal" @onclick:preventDefault>
-                    Using a shared computer? Delete the wallet from this browser
-                </a>
-            </div>
+        <div class="hub-confirmation-region">
+            <section class="hub-confirmation" aria-labelledby="confirmation-title">
+                <div class="hub-confirmation-icon" aria-hidden="true">
+                    <Icon IconName="circle-check" Width="32" Height="32" />
+                </div>
+                <h1 id="confirmation-title">@PaymentNoun Confirmed</h1>
+                <p class="hub-confirmation-description">Your @PaymentNoun.ToLowerInvariant() was published to the Bitcoin network.</p>
+                <div class="hub-confirmation-actions">
+                    @if (!string.IsNullOrEmpty(investedTransactionId))
+                    {
+                        <a class="btn btn-hub-primary" href="@(_networkService.GetPrimaryExplorer().Url + $"/tx/{investedTransactionId}")" target="_blank" rel="noopener">
+                            View Transaction
+                        </a>
+                    }
+                    <button class="btn btn-outline-secondary" @onclick="ShowRecoveryPhraseAsync">Show Recovery Phrase</button>
+                </div>
+                <div class="hub-confirmation-recovery">
+                    <p>Keep your recovery phrase safe</p>
+                    <span>Import it into the Angor desktop app to manage or recover your funds later.</span>
+                </div>
+                <button type="button" class="hub-confirmation-delete" @onclick="OpenDeleteWalletModal">
+                    Using a shared computer? Delete this wallet
+                </button>
+            </section>
         </div>
     }
     else if (project is InvestorProject pendingProject && pendingProject.WaitingForFounderResponse())
@@ -243,41 +269,50 @@
     }
     else
     {
-        <div class="row g-4">
+        <div class="hub-mobile-stats">
+            @if (project.ProjectInfo.ProjectType != ProjectType.Subscribe)
+            {
+                <div><span>Target Amount</span><strong>@Money.Satoshis(project.ProjectInfo.TargetAmount).ToUnit(MoneyUnit.BTC) @network.CoinTicker</strong></div>
+            }
+            @if (!project.ProjectInfo.AllowDynamicStages)
+            {
+                <div><span>Total Raised</span><strong>@Money.Satoshis(totalRaisedSats).ToUnit(MoneyUnit.BTC) @network.CoinTicker</strong></div>
+                <div><span>Progress</span><strong>@fundingProgressPercent%</strong></div>
+            }
+        </div>
+        <div class="hub-invest-grid">
 
             <!-- Investment Amount Card -->
-            <div class="col-md-6">
-                <div class="card h-100">
-                    <div class="card-header bg-transparent d-flex align-items-center gap-2">
-                        <Icon IconName="bitcoin" Width="20" Height="20" />
-                        <h5 class="mb-0">Investment Amount</h5>
+            <div class="hub-amount-column">
+                <div class="invest-card invest-amount-card">
+                    <div class="card-header amount-card-header">
+                        <span class="bitcoin-icon-circle">₿</span>
+                        <h3 class="card-title amount-card-title">@PaymentNoun Amount</h3>
                     </div>
-                    <div class="card-body">
-                        <div class="mb-3">
-                            <label class="form-label fw-semibold">Amount (@network.CoinTicker)</label>
-                            <div class="input-group">
-                                <input type="number"
-                                       class="form-control"
+                    <div class="hub-form-body">
+                        <div class="form-group">
+                            <label for="payment-amount" class="form-label">Amount (@network.CoinTicker)</label>
+                            <div class="input-with-icon">
+                                <input id="payment-amount" type="number"
+                                       class="form-input"
                                        step="0.00000001"
                                        min="0.001"
                                        placeholder="0.00"
                                        value="@Investment.InvestmentAmountBtc"
                                        @oninput="OnAmountChanged" />
-                                <span class="input-group-text fw-bold">@network.CoinTicker</span>
+                                <span class="input-suffix">@network.CoinTicker</span>
                             </div>
-                            <small class="text-muted">Minimum investment: 0.001 @network.CoinTicker</small>
+                            <p class="helper-text">Minimum investment: 0.001 @network.CoinTicker</p>
                         </div>
 
-                        <div class="d-flex flex-wrap gap-2 justify-content-end">
+                        <div class="quick-amounts">
                             @foreach (var preset in AmountPresets)
                             {
                                 <button type="button"
-                                        class="btn btn-sm @(Investment.InvestmentAmountBtc == preset ? "btn-warning" : "btn-outline-warning")"
+                                        class="quick-amount-btn @(Investment.InvestmentAmountBtc == preset ? "selected" : "")"
                                         @onclick="() => SelectPreset(preset)">
-                                    <div class="text-center">
-                                        <div class="fw-bold">@preset</div>
-                                        <div class="small">@network.CoinTicker</div>
-                                    </div>
+                                    <span class="amount-value">@preset</span>
+                                    <span class="amount-label">@network.CoinTicker</span>
                                 </button>
                             }
                         </div>
@@ -309,87 +344,119 @@
                         }
                     </div>
                 </div>
-            </div>
-
-            <!-- Funding Pattern Card (conditionally shown) -->
-            @if (ShowPatternSelector && AvailablePatterns?.Any() == true)
-            {
-                <div class="col-md-6">
-                    <div class="card h-100">
-                        <div class="card-header bg-transparent">
-                            <h5 class="mb-0">Funding Pattern</h5>
+                @if (ShowPatternSelector && AvailablePatterns?.Any() == true)
+                {
+                    <div class="invest-card invest-amount-card hub-pattern-card">
+                        <div class="card-header amount-card-header">
+                            <span class="bitcoin-icon-circle"><Icon IconName="calendar" Width="24" Height="24" /></span>
+                            <h3 class="card-title amount-card-title">Funding Pattern</h3>
                         </div>
-                        <div class="card-body">
-                            <p class="text-muted mb-3">Choose a funding pattern for your investment:</p>
-                            <div class="list-group">
-                                @foreach (var pattern in AvailablePatterns)
-                                {
-                                    <button type="button"
-                                            class="list-group-item list-group-item-action @(SelectedPattern == pattern ? "active" : "")"
-                                            @onclick="() => SelectPattern(pattern)">
-                                        <div class="d-flex justify-content-between align-items-start">
-                                            <div>
-                                                <h6 class="mb-1 fw-bold">@pattern.Name</h6>
-                                                <small class="@(SelectedPattern == pattern ? "text-white-50" : "text-muted")">@pattern.Description</small>
-                                            </div>
-                                            <span class="badge bg-success rounded-pill">@pattern.StageCount stages</span>
-                                        </div>
-                                        <small class="@(SelectedPattern == pattern ? "text-white-50" : "text-muted")">
-                                            Frequency: @pattern.Frequency
-                                        </small>
-                                    </button>
-                                }
-                            </div>
+                        <p class="helper-text">Select which installment schedule to use:</p>
+                        @if (handoffPlanNeedsSelection)
+                        {
+                            <p class="alert alert-warning small" role="status">The selected plan is not offered by this project. Choose an available funding pattern below.</p>
+                        }
+                        <div class="hub-plan-options">
+                            @foreach (var pattern in AvailablePatterns)
+                            {
+                                <button type="button" class="hub-plan-option @(SelectedPattern == pattern ? "active" : "")"
+                                        aria-pressed="@(SelectedPattern == pattern ? "true" : "false")" @onclick="() => SelectPattern(pattern)">
+                                    <span class="hub-plan-heading">
+                                        <strong>@pattern.Name</strong>
+                                        <span class="hub-plan-count">@pattern.StageCount stages</span>
+                                        <span class="hub-plan-frequency">@pattern.Frequency</span>
+                                    </span>
+                                    <span class="hub-plan-description">@pattern.Description</span>
+                                </button>
+                            }
                         </div>
                     </div>
-                </div>
-            }
+                }
+            </div>
 
-            <!-- Release Schedule Card -->
-            <div class="col-md-6">
-                <div class="card h-100">
-                    <div class="card-header bg-transparent">
-                        <h5 class="mb-0">Release Schedule</h5>
-                    </div>
-                    <div class="card-body" style="max-height: 400px; overflow-y: auto;">
-                        <p class="text-muted mb-3">Your investment will be released in stages:</p>
-                        @if (StagesBreakdown?.Any() == true)
+            <div class="invest-card stages-card">
+                <h3 class="summary-title">@(project.ProjectInfo.AllowDynamicStages ? "Payment Schedule" : "Release Schedule")</h3>
+                <p class="stages-description">Your @(project.ProjectInfo.AllowDynamicStages ? "payments" : "investment will be released in stages"):</p>
+                <div class="stages-breakdown">
+                    @if (StagesBreakdown?.Any() == true)
+                    {
+                        int stageIndex = 0;
+                        @foreach (var stage in StagesBreakdown)
                         {
-                            int stageIndex = 0;
-                            @foreach (var stage in StagesBreakdown)
-                            {
-                                stageIndex++;
-                                <div class="card mb-2 border-0 invest-stage-card">
-                                    <div class="card-body p-3">
-                                        <div class="d-flex justify-content-between align-items-center mb-1">
-                                            <span class="fw-bold small">Stage @stageIndex</span>
-                                            <span class="badge bg-success">
-                                                @(project?.ProjectInfo?.Stages?.ElementAtOrDefault(stageIndex - 1)?.AmountToRelease.ToString("F1"))%
-                                            </span>
-                                        </div>
-                                        <div class="d-flex justify-content-between align-items-center">
-                                            <small class="text-muted">@stage.StageDateTime.FormatDate()</small>
-                                            <span class="fw-bold small">@stage.AmountBtc.ToString("0.00000000") @network.CoinTicker</span>
-                                        </div>
-                                    </div>
+                            stageIndex++;
+                            <div class="stage-breakdown-row">
+                                <div class="stage-breakdown-info">
+                                    <span class="stage-breakdown-number">@(project.ProjectInfo.AllowDynamicStages ? "Payment" : "Stage") @stageIndex</span>
+                                    <span class="stage-breakdown-date">@stage.StageDateTime.FormatDate()</span>
                                 </div>
-                            }
-                        }
-                        else
-                        {
-                            <p class="text-muted text-center">Enter an amount to see the stage breakdown.</p>
+                                <div class="stage-breakdown-amount">
+                                    @if (!project.ProjectInfo.AllowDynamicStages)
+                                    {
+                                        <span class="stage-breakdown-percentage">@(project.ProjectInfo.Stages?.ElementAtOrDefault(stageIndex - 1)?.AmountToRelease.ToString("F1"))%</span>
+                                    }
+                                    <span class="stage-breakdown-value">@stage.AmountBtc.ToString("0.00000000") @network.CoinTicker</span>
+                                </div>
+                            </div>
                         }
-                    </div>
+                    }
+                    else
+                    {
+                        <p class="stages-description">Enter an amount to see the stage breakdown.</p>
+                    }
                 </div>
             </div>
 
+            <div class="invest-card transaction-details-card">
+                <h3 class="summary-title">Transaction Details</h3>
+                <div class="hub-form-body">
+                    <div class="transaction-detail-row"><span class="transaction-label">Project ID</span><div class="transaction-value-container"><code class="transaction-value transaction-value-code">@ProjectId</code><button type="button" class="transaction-copy-button" @onclick="() => CopyToClipboard(ProjectId)" aria-label="Copy Project ID"><Icon IconName="copy" Width="16" Height="16" /></button></div></div>
+                    <div class="transaction-detail-row"><span class="transaction-label">Amount to @PaymentAction</span><span class="transaction-value transaction-value-amount">@Investment.InvestmentAmountBtc @network.CoinTicker</span></div>
+                    <div class="transaction-detail-row"><span class="transaction-label">Miner Fee</span><span class="transaction-value">Calculated with invoice</span></div>
+                    <div class="transaction-detail-row"><span class="transaction-label">Angor Fee</span><span class="transaction-value">Included in invoice total</span></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Action Button -->
+        <div class="hub-payment-footer">
+            <div class="hub-payment-footer-inner">
+                <a class="hub-mobile-back" href="@(HubBaseUrl + "/project/" + ProjectId)">Back</a>
+                <div class="hub-payment-footer-summary"><span>Amount to @PaymentAction</span><strong>@Investment.InvestmentAmountBtc @network.CoinTicker</strong></div>
+                <button @ref="paymentButton" type="button" class="btn btn-success w-100 btn-lg" @onclick="HandleInvestClick" disabled="@(buildSpinner || handoffPlanNeedsSelection)">
+                    @if (buildSpinner)
+                    {
+                        <span class="spinner-border spinner-border-sm me-2" role="status"></span>
+                        <span>Preparing...</span>
+                    }
+                    else
+                    {
+                        <Icon IconName="shield-star" Width="18" Height="18" class="me-1" />
+                        <span>@PaymentAction @Investment.InvestmentAmountBtc @network.CoinTicker</span>
+                    }
+                </button>
+            </div>
+        </div>
+    }
+
+    <div class="hub-footer">
+        Powered by <a href="@HubBaseUrl">Angor</a> — a decentralized crowdfunding protocol on Bitcoin
+        <span class="mx-2">·</span>
+        <a href="#" @onclick="OpenConnectionModal" @onclick:preventDefault>Connection settings</a>
+    </div>
+
+</div>
+
+@if (showHelpModal)
+{
             <!-- How it works / wallet info card -->
-            <div class="col-md-6">
-                <div class="card h-100">
-                    <div class="card-header bg-transparent">
-                        <h5 class="mb-0">How It Works</h5>
+            <div class="modal fade show d-block" role="dialog" aria-modal="true" aria-labelledby="hub-help-title" tabindex="-1" style="background: rgba(0,0,0,0.7);">
+                <div class="modal-dialog modal-dialog-centered">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 id="hub-help-title" class="modal-title">How It Works</h5>
+                        <button type="button" class="btn-close" aria-label="Close help" @onclick="() => showHelpModal = false"></button>
                     </div>
-                    <div class="card-body">
+                    <div class="modal-body">
                         @if (!walletAvailable)
                         {
                             <ol class="text-muted small ps-3 mb-3">
@@ -400,7 +467,7 @@
                             </ol>
                             <div class="alert alert-warning small mb-0">
                                 <strong>Keep your recovery phrase.</strong> You can import it into the
-                                <a class="hub-link" href="https://angor.io" target="_blank" rel="noopener">Angor desktop app</a>
+                                <a class="hub-link" href="@HubBaseUrl">Angor desktop app</a>
                                 at any time to manage or recover your funds.
                             </div>
                         }
@@ -447,39 +514,20 @@
                 </div>
             </div>
 
-        </div>
-
-        <!-- Action Button -->
-        <div class="row mt-4 mb-4">
-            <div class="col-12">
-                <button type="button" class="btn btn-success w-100 btn-lg" @onclick="HandleInvestClick" disabled="@buildSpinner">
-                    @if (buildSpinner)
-                    {
-                        <span class="spinner-border spinner-border-sm me-2" role="status"></span>
-                        <span>Preparing...</span>
-                    }
-                    else
-                    {
-                        <Icon IconName="shield-star" Width="18" Height="18" class="me-1" />
-                        <span>Invest @Investment.InvestmentAmountBtc @network.CoinTicker</span>
-                    }
-                </button>
-            </div>
-        </div>
-    }
-
-    <div class="hub-footer">
-        Powered by <a href="https://angor.io" target="_blank" rel="noopener">Angor</a> — a decentralized crowdfunding protocol on Bitcoin
-        <span class="mx-2">·</span>
-        <a href="#" @onclick="OpenConnectionModal" @onclick:preventDefault>Connection settings</a>
     </div>
+}
 
-</div>
+@if (showAppDownloadModal)
+{
+    <AppDownloadModal DownloadUrl="@(HubBaseUrl + "/app")"
+                      OnClose="CloseAppDownloadModal"
+                      OnContinue="ContinueWithWeb" />
+}
 
 <!-- Use Available Funds Modal — shown when the browser wallet already covers the amount -->
 @if (showUseFundsModal)
 {
-    <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.7);">
+    <div class="modal fade show d-block" role="dialog" aria-modal="true" tabindex="-1" style="background: rgba(0,0,0,0.7);">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
@@ -487,7 +535,7 @@
                         <Icon IconName="wallet" Width="24" Height="24" />
                         You Already Have Funds
                     </h5>
-                    <button type="button" class="btn-close" @onclick="() => showUseFundsModal = false"></button>
+                    <button type="button" class="btn-close" aria-label="Close" @onclick="() => showUseFundsModal = false"></button>
                 </div>
                 <div class="modal-body">
                     <p class="text-muted">
@@ -533,47 +581,26 @@
 <!-- Payment Method Choice Modal -->
 @if (showPaymentMethodModal)
 {
-    <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.7);">
+    <div class="modal fade show d-block" role="dialog" aria-modal="true" tabindex="-1" style="background: rgba(0,0,0,0.7);">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title d-flex align-items-center gap-2">
                         <Icon IconName="wallet" Width="24" Height="24" />
-                        Choose Payment Method
+                        Pay Invoice to @PaymentAction
                     </h5>
-                    <button type="button" class="btn-close" @onclick="() => showPaymentMethodModal = false"></button>
+                    <button type="button" class="btn-close" aria-label="Close" @onclick="() => showPaymentMethodModal = false"></button>
                 </div>
                 <div class="modal-body">
                     <div class="bg-light rounded p-3 mb-3">
-                        <small class="text-muted">Amount to Invest</small>
+                        <small class="text-muted">Amount to @PaymentAction</small>
                         <div class="fw-bold text-success fs-5">@Investment.InvestmentAmountBtc @network.CoinTicker</div>
                     </div>
-                    <div class="d-grid gap-3">
-                        <button class="btn btn-outline-success btn-lg" @onclick="PayWithAddress">
-                            <div class="d-flex align-items-center justify-content-between w-100">
-                                <div class="d-flex align-items-center gap-2">
-                                    <Icon IconName="qr-code" Width="24" Height="24" />
-                                    <div class="text-start">
-                                        <div class="fw-bold">Send to Address</div>
-                                        <small class="opacity-75">Send from an external wallet</small>
-                                    </div>
-                                </div>
-                                <Icon IconName="arrow-right" Width="18" Height="18" />
-                            </div>
-                        </button>
-                        <button class="btn btn-outline-warning btn-lg" @onclick="PayWithLightning">
-                            <div class="d-flex align-items-center justify-content-between w-100">
-                                <div class="d-flex align-items-center gap-2">
-                                    <Icon IconName="bitcoin" Width="24" Height="24" />
-                                    <div class="text-start">
-                                        <div class="fw-bold">Pay with Lightning</div>
-                                        <small class="opacity-75">Pay via Lightning Network</small>
-                                    </div>
-                                </div>
-                                <Icon IconName="arrow-right" Width="18" Height="18" />
-                            </div>
-                        </button>
+                    <div class="hub-payment-tabs" role="group" aria-label="Payment method">
+                        <button type="button" @onclick="PayWithAddress">Bitcoin</button>
+                        <button type="button" @onclick="PayWithLightning">Lightning</button>
                     </div>
+                    <p class="hub-payment-choice-hint">Choose Bitcoin to send from an external wallet, or Lightning to pay an invoice.</p>
                 </div>
             </div>
         </div>
@@ -583,17 +610,19 @@
 <!-- On-Chain Invoice Modal -->
 @if (showInvoiceModal)
 {
-    <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.7);">
+    <div class="modal fade show d-block" role="dialog" aria-modal="true" tabindex="-1" style="background: rgba(0,0,0,0.7);">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title d-flex align-items-center gap-2">
                         <Icon IconName="receive" Width="24" Height="24" />
-                        Fund Investment
+                        Pay Invoice to @PaymentAction
                     </h5>
-                    <button type="button" class="btn-close" @onclick="CloseInvoiceModal"></button>
+                    <button type="button" class="btn-close" aria-label="Close" @onclick="CloseInvoiceModal"></button>
                 </div>
                 <div class="modal-body text-center">
+                    <div class="hub-payment-tabs" role="group" aria-label="Payment method"><button type="button" class="active" aria-pressed="true" disabled>Bitcoin</button><button type="button" @onclick="ChangeToLightningPayment" disabled="@(onChainRequiredSats == 0 || invoiceProcessing || paymentReceived)">Lightning</button></div>
+
                     <div class="bg-light rounded p-3 mb-3">
                         <small class="text-muted">Amount Required</small>
                         <div class="fw-bold text-success fs-4">@((onChainRequiredSats > 0 ? onChainRequiredSats.ToUnitBtc() : Investment.InvestmentAmountBtc)) @network.CoinTicker</div>
@@ -616,9 +645,8 @@
                         <small class="text-muted d-block mb-1">On-Chain Address</small>
                         <div class="d-flex align-items-center justify-content-center gap-2">
                             <span class="text-break fw-bold small" style="word-break: break-all;">@invoiceAddress</span>
-                            <button class="btn btn-sm btn-outline-secondary flex-shrink-0" @onclick="() => CopyToClipboard(invoiceAddress)">
-                                <Icon IconName="copy" Width="16" Height="16" />
-                            </button>
+                            <CopyButton @key="invoiceAddress" Value="@invoiceAddress" Label="Copy Bitcoin address"
+                                        CssClass="btn btn-sm btn-outline-secondary flex-shrink-0" IconOnly="true" />
                         </div>
                     </div>
 
@@ -656,17 +684,19 @@
 <!-- Lightning Invoice Modal -->
 @if (showLightningInvoiceModal)
 {
-    <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.7);">
+    <div class="modal fade show d-block" role="dialog" aria-modal="true" tabindex="-1" style="background: rgba(0,0,0,0.7);">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title d-flex align-items-center gap-2">
                         <Icon IconName="bitcoin" Width="24" Height="24" />
-                        Lightning Invoice
+                        Pay Invoice to @PaymentAction
                     </h5>
-                    <button type="button" class="btn-close" @onclick="CloseLightningModal"></button>
+                    <button type="button" class="btn-close" aria-label="Close" @onclick="CloseLightningModal"></button>
                 </div>
                 <div class="modal-body text-center">
+                    <div class="hub-payment-tabs" role="group" aria-label="Payment method"><button type="button" @onclick="ChangeToBitcoinPayment" disabled="@(lightningLoading || invoiceProcessing || paymentReceived)">Bitcoin</button><button type="button" class="active" aria-pressed="true" disabled>Lightning</button></div>
+
                     <div class="bg-light rounded p-3 mb-3">
                         <small class="text-muted">Amount Required</small>
                         <div class="fw-bold text-success fs-4">@Investment.InvestmentAmountBtc @network.CoinTicker</div>
@@ -693,9 +723,8 @@
                                 <span class="text-break small" style="word-break: break-all; max-height: 80px; overflow-y: auto;">
                                     @lightningInvoiceString
                                 </span>
-                                <button class="btn btn-sm btn-outline-secondary flex-shrink-0" @onclick="() => CopyToClipboard(lightningInvoiceString!)">
-                                    <Icon IconName="copy" Width="16" Height="16" />
-                                </button>
+                                <CopyButton @key="lightningInvoiceString" Value="@lightningInvoiceString" Label="Copy Lightning invoice"
+                                            CssClass="btn btn-sm btn-outline-secondary flex-shrink-0" IconOnly="true" />
                             </div>
                         </div>
 
@@ -734,7 +763,7 @@
 <!-- Wallet Backup Modal — shown BEFORE any payment is requested -->
 @if (showBackupModal && !string.IsNullOrEmpty(autoCreatedSeedWords))
 {
-    <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.7);">
+    <div class="modal fade show d-block" role="dialog" aria-modal="true" tabindex="-1" style="background: rgba(0,0,0,0.7);">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
@@ -763,10 +792,7 @@
                         </div>
                     </div>
                     <div class="d-flex gap-2 mb-2">
-                        <button class="btn btn-outline-secondary flex-grow-1" @onclick="CopyBackupSeed">
-                            <Icon IconName="copy" Width="16" Height="16" class="me-1" />
-                            Copy
-                        </button>
+                        <SeedPhraseCopyButton Phrase="@autoCreatedSeedWords" />
                         <button class="btn btn-outline-secondary flex-grow-1" @onclick="DownloadBackupSeed">
                             <Icon IconName="receive" Width="16" Height="16" class="me-1" />
                             Download
@@ -781,80 +807,10 @@
     </div>
 }
 
-<!-- Connection Settings Modal (indexers + relays) -->
-@if (showConnectionModal && connectionSettings != null)
-{
-    <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.7);">
-        <div class="modal-dialog modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title d-flex align-items-center gap-2">
-                        <Icon IconName="settings" Width="24" Height="24" />
-                        Connection Settings
-                    </h5>
-                    <button type="button" class="btn-close" @onclick="() => showConnectionModal = false"></button>
-                </div>
-                <div class="modal-body">
-
-                    <h6 class="mb-2">Indexers</h6>
-                    <p class="text-muted small mb-2">The indexer used to look up projects and broadcast transactions.</p>
-                    @foreach (var indexer in connectionSettings.Indexers)
-                    {
-                        <div class="d-flex align-items-center gap-2 bg-light rounded p-2 mb-2">
-                            <input type="radio" name="primary-indexer" checked="@indexer.IsPrimary"
-                                   @onchange="() => SetPrimaryIndexerUrl(indexer)" />
-                            <span class="badge @(indexer.Status == UrlStatus.Online ? "bg-success" : "bg-secondary")">
-                                @(indexer.Status == UrlStatus.Online ? "online" : indexer.Status == UrlStatus.Offline ? "offline" : "?")
-                            </span>
-                            <span class="text-break small flex-grow-1" style="word-break: break-all;">@indexer.Url</span>
-                            <button class="btn btn-sm btn-outline-danger flex-shrink-0" title="Remove"
-                                    @onclick="() => RemoveIndexerUrl(indexer)" disabled="@(connectionSettings.Indexers.Count <= 1)">
-                                <Icon IconName="delete" Width="14" Height="14" />
-                            </button>
-                        </div>
-                    }
-                    <div class="input-group mb-4">
-                        <input type="text" class="form-control" placeholder="https://indexer.example.com"
-                               @bind="newIndexerUrl" />
-                        <button class="btn btn-outline-success" @onclick="AddIndexerUrl"
-                                disabled="@string.IsNullOrWhiteSpace(newIndexerUrl)">Add</button>
-                    </div>
-
-                    <h6 class="mb-2">Nostr Relays</h6>
-                    <p class="text-muted small mb-2">Relays used to fetch project data and exchange messages with the founder.</p>
-                    @foreach (var relay in connectionSettings.Relays)
-                    {
-                        <div class="d-flex align-items-center gap-2 bg-light rounded p-2 mb-2">
-                            <span class="badge @(relay.Status == UrlStatus.Online ? "bg-success" : "bg-secondary")">
-                                @(relay.Status == UrlStatus.Online ? "online" : relay.Status == UrlStatus.Offline ? "offline" : "?")
-                            </span>
-                            <span class="text-break small flex-grow-1" style="word-break: break-all;">@relay.Url</span>
-                            <button class="btn btn-sm btn-outline-danger flex-shrink-0" title="Remove"
-                                    @onclick="() => RemoveRelayUrl(relay)" disabled="@(connectionSettings.Relays.Count <= 1)">
-                                <Icon IconName="delete" Width="14" Height="14" />
-                            </button>
-                        </div>
-                    }
-                    <div class="input-group">
-                        <input type="text" class="form-control" placeholder="wss://relay.example.com"
-                               @bind="newRelayUrl" />
-                        <button class="btn btn-outline-success" @onclick="AddRelayUrl"
-                                disabled="@string.IsNullOrWhiteSpace(newRelayUrl)">Add</button>
-                    </div>
-
-                </div>
-                <div class="modal-footer">
-                    <button class="btn btn-success btn-sm" @onclick="() => showConnectionModal = false">Done</button>
-                </div>
-            </div>
-        </div>
-    </div>
-}
-
 <!-- Delete Wallet Modal — shows the seed one last time, requires explicit confirmation -->
 @if (showDeleteWalletModal)
 {
-    <div class="modal fade show d-block" tabindex="-1" style="background: rgba(0,0,0,0.7);">
+    <div class="modal fade show d-block" role="dialog" aria-modal="true" tabindex="-1" style="background: rgba(0,0,0,0.7);">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
                 <div class="modal-header">
@@ -862,7 +818,7 @@
                         <Icon IconName="delete" Width="24" Height="24" />
                         Delete Wallet From This Browser
                     </h5>
-                    <button type="button" class="btn-close" @onclick="CloseDeleteWalletModal"></button>
+                    <button type="button" class="btn-close" aria-label="Close" @onclick="CloseDeleteWalletModal"></button>
                 </div>
                 <div class="modal-body">
                     <div class="alert alert-danger mb-3">
@@ -886,10 +842,7 @@
                             </div>
                         </div>
                         <div class="d-flex gap-2 mb-3">
-                            <button class="btn btn-outline-secondary flex-grow-1" @onclick="CopyDeleteWalletSeed">
-                                <Icon IconName="copy" Width="16" Height="16" class="me-1" />
-                                Copy
-                            </button>
+                            <SeedPhraseCopyButton Phrase="@deleteWalletSeedWords" />
                             <button class="btn btn-outline-secondary flex-grow-1" @onclick="DownloadDeleteWalletSeed">
                                 <Icon IconName="receive" Width="16" Height="16" class="me-1" />
                                 Download
@@ -920,10 +873,35 @@
 }
 
 @code {
+    private string HubBaseUrl => new Uri(NavigationManager.BaseUri).IsLoopback
+        ? "http://localhost:4200" : "https://angor.io";
+
 
     [Parameter]
     public string ProjectId { get; set; }
 
+    [SupplyParameterFromQuery(Name = "amount")]
+    public string? RequestedAmount { get; set; }
+    [SupplyParameterFromQuery(Name = "installments")]
+    public string? RequestedInstallments { get; set; }
+    [SupplyParameterFromQuery(Name = "frequency")]
+    public string? RequestedFrequency { get; set; }
+    private bool amountFromHubApplied;
+    private bool handoffPlanNeedsSelection;
+
+    private string PaymentAction => project?.ProjectInfo.ProjectType switch
+    {
+        ProjectType.Fund => "Fund",
+        ProjectType.Subscribe => "Subscribe",
+        _ => "Invest"
+    };
+    private string PaymentNoun => project?.ProjectInfo.ProjectType switch
+    {
+        ProjectType.Fund => "Funding",
+        ProjectType.Subscribe => "Subscription",
+        _ => "Investment"
+    };
+
     private const string EphemeralKeyStorageKey = "angor-ephemeral-wallet-key";
 
     private Project? project;
@@ -934,6 +912,9 @@
     private bool investSpinner;
     private bool publishSpinner;
     private bool refreshSpinner;
+    private const long AppThresholdSats = 1_000_000; // Same 0.01 BTC threshold as the Hub.
+    private bool showAppDownloadModal;
+    private ElementReference paymentButton;
     private bool showUseFundsModal;
     private bool founder;
     private bool invested;
@@ -995,7 +976,7 @@
     public InvestmentModel Investment { get; set; } = new() { InvestmentAmountBtc = 0.01m };
     private List<StageBreakdown> StagesBreakdown { get; set; } = new();
 
-    private decimal[] AmountPresets = { 0.001m, 0.005m, 0.01m, 0.05m, 0.1m };
+    private decimal[] AmountPresets = { 0.005m, 0.01m, 0.05m, 0.1m };
 
     /// <summary>
     /// Whether the current amount will need the founder to sign before publishing.
@@ -1027,6 +1008,7 @@
     private string? newRelayUrl;
 
     // Delete-wallet flow
+    private bool showHelpModal;
     private bool showDeleteWalletModal;
     private bool deleteWalletConfirmed;
     private string? deleteWalletSeedWords;
@@ -1034,6 +1016,10 @@
     protected override async Task OnInitializedAsync()
     {
         // Network/settings initialization is done by EmptyLayout before this runs.
+        // A returning visitor may still have the other network stored locally.
+        // Resolve that before applying the network-specific indexer from the Hub.
+        if (!ApplyNetworkFromQueryString())
+            return;
 
         // Allow the linking site (e.g. angor hub) to hand over a known-good indexer:
         // /invest/{id}?indexer=https://indexer.example.com — added as primary and persisted.
@@ -1342,6 +1328,22 @@
         }
 
         LoadAvailablePatterns();
+        if (!amountFromHubApplied && project.ProjectInfo.AllowDynamicStages
+            && int.TryParse(RequestedInstallments, out int requestedCount) && RequestedFrequency != null)
+        {
+            var requestedPattern = AvailablePatterns?.FirstOrDefault(p => p.StageCount == requestedCount
+                && p.Frequency.ToString().Equals(RequestedFrequency, StringComparison.OrdinalIgnoreCase));
+            if (requestedPattern != null) SelectPattern(requestedPattern);
+            else handoffPlanNeedsSelection = true;
+        }
+        if (!amountFromHubApplied && SelectedPattern?.HasFixedAmount != true
+            && decimal.TryParse(RequestedAmount, System.Globalization.NumberStyles.AllowDecimalPoint,
+                System.Globalization.CultureInfo.InvariantCulture, out decimal requestedAmount)
+            && requestedAmount > 0)
+        {
+            Investment.InvestmentAmountBtc = requestedAmount;
+        }
+        amountFromHubApplied = true;
         UpdateStagesBreakdown();
         _ = LoadProjectStats();
 
@@ -1466,6 +1468,7 @@
 
     private void SelectPattern(DynamicStagePattern pattern)
     {
+        handoffPlanNeedsSelection = false;
         SelectedPattern = pattern;
 
         // Subscribe patterns may fix the investment amount.
@@ -1615,6 +1618,26 @@
     {
         if (!ValidateInvestmentAmount()) return;
 
+        if (Investment.InvestmentAmountBtc.ToUnitSatoshi() >= AppThresholdSats)
+        {
+            showAppDownloadModal = true;
+            return;
+        }
+
+        await ContinueWithWeb();
+    }
+
+    private async Task CloseAppDownloadModal()
+    {
+        showAppDownloadModal = false;
+        await paymentButton.FocusAsync();
+    }
+
+    private async Task ContinueWithWeb()
+    {
+        showAppDownloadModal = false;
+        if (!ValidateInvestmentAmount()) return;
+
         if (!walletAvailable)
         {
             await AutoCreateWallet();
@@ -1740,17 +1763,24 @@
             // Random throwaway encryption key instead of a user password
             var ephemeralKey = Convert.ToHexString(RandomNumberGenerator.GetBytes(32));
 
-            var walletWords = new WalletWords { Words = seedWords };
+            using var walletWords = new WalletWords { Words = seedWords };
+            await walletKeyService.PrepareAsync(walletWords);
+            // Yield between CPU-bound key/address batches so the spinner can repaint.
+            await Task.Delay(1);
             var accountInfo = _WalletOperations.BuildAccountInfoForWalletWords(walletWords);
+            await Task.Delay(1);
             await _WalletOperations.UpdateAccountInfoWithNewAddressesAsync(accountInfo);
 
             var encrypted = await encryption.EncryptData(walletWords.ConvertToString(), ephemeralKey);
-            _walletStorage.SaveWalletWords(new Angor.Shared.Models.Wallet { EncryptedData = encrypted });
+            // This temporary wallet only invests. Founder keys are derived by the
+            // full app when the recovery phrase is imported for project creation.
+            _walletStorage.SaveWalletWords(new Angor.Shared.Models.Wallet
+            {
+                EncryptedData = encrypted,
+                FounderKeys = new FounderKeyCollection()
+            });
             storage.SetAccountInfo(network.Name, accountInfo);
 
-            var founderKeyCollection = _derivationOperations.DeriveProjectKeys(walletWords, _networkConfiguration.GetAngorKey());
-            _walletStorage.SetFounderKeys(founderKeyCollection);
-
             // Persist the key alongside the wallet and prime the password cache
             await JS.InvokeVoidAsync("localStorage.setItem", EphemeralKeyStorageKey, ephemeralKey);
             _PasswordCacheService.Data = ephemeralKey;
@@ -1791,6 +1821,18 @@
         StateHasChanged();
     }
 
+    private async Task ChangeToBitcoinPayment()
+    {
+        CloseLightningModal();
+        await PayWithAddress();
+    }
+
+    private async Task ChangeToLightningPayment()
+    {
+        CloseInvoiceModal();
+        await PayWithLightning();
+    }
+
     private async Task PayWithAddress()
     {
         showPaymentMethodModal = false;
@@ -2828,6 +2870,25 @@
 
     // --- Connection settings (indexers/relays) ---
 
+    private bool ApplyNetworkFromQueryString()
+    {
+        var query = System.Web.HttpUtility.ParseQueryString(new Uri(NavigationManager.Uri).Query);
+        string? requestedNetwork = query["network"] is "Main" or "Angornet" ? query["network"] : null;
+        if (requestedNetwork == null || requestedNetwork == network.Name)
+            return true;
+
+        if (hasWallet)
+        {
+            loadError = $"This link is for {requestedNetwork}, but this browser has a wallet on {network.Name}. " +
+                        "Open this link in a different browser profile, or change the network in the Angor app settings.";
+            loadingProject = false;
+            return false;
+        }
+
+        SwitchNetwork(requestedNetwork);
+        return true;
+    }
+
     /// <summary>
     /// If the URL carries an ?indexer= parameter (e.g. passed by angor hub, which already
     /// knows a working indexer for this project), add it as the primary indexer and persist it.
@@ -3097,15 +3158,6 @@
         StateHasChanged();
     }
 
-    private async Task CopyDeleteWalletSeed()
-    {
-        if (!string.IsNullOrEmpty(deleteWalletSeedWords))
-        {
-            await JS.InvokeVoidAsync("navigator.clipboard.writeText", deleteWalletSeedWords);
-            notificationComponent.ShowNotificationMessage("Recovery phrase copied to clipboard", 3);
-        }
-    }
-
     private async Task DownloadDeleteWalletSeed()
     {
         if (!string.IsNullOrEmpty(deleteWalletSeedWords))
@@ -3168,15 +3220,6 @@
         }
     }
 
-    private async Task CopyBackupSeed()
-    {
-        if (!string.IsNullOrEmpty(autoCreatedSeedWords))
-        {
-            await JS.InvokeVoidAsync("navigator.clipboard.writeText", autoCreatedSeedWords);
-            notificationComponent.ShowNotificationMessage("Recovery phrase copied to clipboard", 3);
-        }
-    }
-
     private async Task DownloadBackupSeed()
     {
         if (!string.IsNullOrEmpty(autoCreatedSeedWords))
diff --git a/src/webapp/Angor.Client/Program.cs b/src/webapp/Angor.Client/Program.cs
index 9ee1db96d..60b76fa2f 100644
--- a/src/webapp/Angor.Client/Program.cs
+++ b/src/webapp/Angor.Client/Program.cs
@@ -29,6 +29,7 @@
 builder.Services.AddSingleton<ISerializer, Serializer>();
 builder.Services.AddSingleton<INetworkConfiguration, NetworkConfiguration>();
 builder.Services.AddTransient<IHdOperations, HdOperations>();
+builder.Services.AddScoped<WalletKeyService>();
 builder.Services.AddTransient<IClientStorage, ClientStorage>();
 builder.Services.AddTransient<INetworkStorage, ClientStorage>();
 builder.Services.AddTransient<IWalletStorage, WalletStorage>();
diff --git a/src/webapp/Angor.Client/Services/WalletKeyService.cs b/src/webapp/Angor.Client/Services/WalletKeyService.cs
new file mode 100644
index 000000000..cd7fe7cd6
--- /dev/null
+++ b/src/webapp/Angor.Client/Services/WalletKeyService.cs
@@ -0,0 +1,38 @@
+using System.Security.Cryptography;
+using Angor.Shared.Models;
+using Microsoft.JSInterop;
+using NBitcoin;
+
+namespace Angor.Client.Services;
+
+public class WalletKeyService(IJSRuntime js)
+{
+    public async Task PrepareAsync(WalletWords words)
+    {
+        await words.GetOrDeriveExtKeyAsync(async (mnemonic, passphrase) =>
+        {
+            // Preserve NBitcoin's mnemonic parsing and canonical word spacing.
+            string normalized;
+            try
+            {
+                // Wallets created here use English. Avoid loading every language's
+                // word list during automatic detection on the browser UI thread.
+                normalized = new Mnemonic(mnemonic, Wordlist.English).ToString();
+            }
+            catch (FormatException)
+            {
+                normalized = new Mnemonic(mnemonic).ToString();
+            }
+            byte[] seed = await js.InvokeAsync<byte[]>("deriveWalletSeed", normalized, passphrase);
+            try
+            {
+                var key = ExtKey.CreateFromSeed(seed);
+                return key;
+            }
+            finally
+            {
+                CryptographicOperations.ZeroMemory(seed);
+            }
+        });
+    }
+}
diff --git a/src/webapp/Angor.Client/Shared/AppDownloadModal.razor b/src/webapp/Angor.Client/Shared/AppDownloadModal.razor
new file mode 100644
index 000000000..0acf5a87e
--- /dev/null
+++ b/src/webapp/Angor.Client/Shared/AppDownloadModal.razor
@@ -0,0 +1,44 @@
+<div class="app-offer-overlay" @onclick="OnClose" @onkeydown="HandleKeyDown">
+    <section class="app-offer-panel" role="dialog" aria-modal="true" aria-labelledby="app-offer-title"
+             aria-describedby="app-offer-description" @onclick:stopPropagation="true">
+        <span class="app-offer-focus-guard" tabindex="0" @onfocus="() => webButton.FocusAsync().AsTask()"></span>
+        <div class="app-offer-header">
+            <h2 id="app-offer-title">Use The App</h2>
+            <button @ref="closeButton" type="button" class="app-offer-close" aria-label="Close" @onclick="OnClose">
+                <svg width="24" height="24" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
+        </div>
+        <p id="app-offer-description">For enhanced security of your funds please download and use the app to make this payment</p>
+        <div class="app-offer-actions">
+            <a class="app-offer-download" href="@DownloadUrl">
+                <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+                </svg>
+                Download Now
+            </a>
+            <button @ref="webButton" type="button" class="app-offer-web" @onclick="OnContinue">Continue with web</button>
+        </div>
+        <span class="app-offer-focus-guard" tabindex="0" @onfocus="() => closeButton.FocusAsync().AsTask()"></span>
+    </section>
+</div>
+
+@code {
+    [Parameter] public string DownloadUrl { get; set; } = string.Empty;
+    [Parameter] public EventCallback OnClose { get; set; }
+    [Parameter] public EventCallback OnContinue { get; set; }
+
+    private ElementReference closeButton;
+    private ElementReference webButton;
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender) await closeButton.FocusAsync();
+    }
+
+    private async Task HandleKeyDown(KeyboardEventArgs args)
+    {
+        if (args.Key == "Escape") await OnClose.InvokeAsync();
+    }
+}
diff --git a/src/webapp/Angor.Client/Shared/AppDownloadModal.razor.css b/src/webapp/Angor.Client/Shared/AppDownloadModal.razor.css
new file mode 100644
index 000000000..52991ea52
--- /dev/null
+++ b/src/webapp/Angor.Client/Shared/AppDownloadModal.razor.css
@@ -0,0 +1,44 @@
+.app-offer-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 99999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+    background: rgba(0, 0, 0, .5);
+}
+.app-offer-panel {
+    width: 100%;
+    max-width: 448px;
+    max-height: calc(100dvh - 32px);
+    overflow-y: auto;
+    padding: 24px;
+    background: var(--surface-card);
+    color: var(--text);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
+}
+.app-offer-header { position: relative; margin-bottom: 24px; }
+.app-offer-header h2 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; text-align: center; }
+.app-offer-close { position: absolute; top: 0; right: 0; padding: 0; border: 0; background: transparent; color: var(--text-secondary); }
+.app-offer-panel p { margin: 0 0 32px; text-align: center; color: var(--text-secondary); }
+.app-offer-actions { display: flex; flex-direction: column; gap: 12px; }
+.app-offer-download, .app-offer-web {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    width: 100%;
+    padding: 12px 24px;
+    border-radius: 8px;
+    font-weight: 600;
+    text-decoration: none;
+}
+.app-offer-download { background: linear-gradient(to right, #4B7C5A, #3d6a4d); color: white !important; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1); }
+.app-offer-download:hover { background: linear-gradient(to right, #3d6a4d, #4d7a5d); color: white !important; }
+.app-offer-web { border: 2px solid var(--border); background: var(--surface-card); color: var(--text); }
+.app-offer-web:hover { border-color: #4B7C5A; background: var(--surface-hover); }
+
+.app-offer-focus-guard { position: absolute; width: 1px; height: 1px; overflow: hidden; }
diff --git a/src/webapp/Angor.Client/Shared/CopyButton.razor b/src/webapp/Angor.Client/Shared/CopyButton.razor
new file mode 100644
index 000000000..761930355
--- /dev/null
+++ b/src/webapp/Angor.Client/Shared/CopyButton.razor
@@ -0,0 +1,57 @@
+@implements IDisposable
+@inject IJSRuntime JS
+
+<button type="button" class="@CssClass" aria-label="@(copied ? "Copied" : copyFailed ? "Copy failed — retry" : Label)" @onclick="CopyValue"
+        disabled="@(copying || copied || string.IsNullOrEmpty(Value))" aria-live="polite">
+    <Icon IconName="@(copied ? "circle-check" : "copy")" Width="16" Height="16" class="@(IconOnly ? string.Empty : "me-1")" />
+    @if (!IconOnly)
+    {
+        @(copied ? "Copied" : copyFailed ? "Copy failed — retry" : "Copy")
+    }
+</button>
+
+@code {
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public string Label { get; set; } = "Copy";
+    [Parameter] public string CssClass { get; set; } = "btn btn-outline-secondary flex-grow-1";
+    [Parameter] public bool IconOnly { get; set; }
+
+    private bool copying;
+    private bool copied;
+    private bool copyFailed;
+    private readonly CancellationTokenSource lifetime = new();
+
+    private async Task CopyValue()
+    {
+        if (copying || copied || string.IsNullOrEmpty(Value))
+            return;
+
+        copying = true;
+        copyFailed = false;
+        try
+        {
+            await JS.InvokeVoidAsync("navigator.clipboard.writeText", Value);
+            copied = true;
+            StateHasChanged();
+            await Task.Delay(2000, lifetime.Token);
+            copied = false;
+        }
+        catch (OperationCanceledException) when (lifetime.IsCancellationRequested)
+        {
+        }
+        catch (JSException)
+        {
+            copyFailed = true;
+        }
+        finally
+        {
+            copying = false;
+        }
+    }
+
+    public void Dispose()
+    {
+        lifetime.Cancel();
+        lifetime.Dispose();
+    }
+}
diff --git a/src/webapp/Angor.Client/Shared/EmptyLayout.razor b/src/webapp/Angor.Client/Shared/EmptyLayout.razor
index 3906d7d22..eab41d3dc 100644
--- a/src/webapp/Angor.Client/Shared/EmptyLayout.razor
+++ b/src/webapp/Angor.Client/Shared/EmptyLayout.razor
@@ -2,17 +2,33 @@
 @using Angor.Shared.Services
 @inject INetworkService _networkService
 @inject NavigationManager _navManager
+@inject IJSRuntime JS
 
-<div class="hub-page">
-    @Body
+<div class="hub-page" data-theme="@HubTheme">
+    <CascadingValue Value="this">
+        @Body
+    </CascadingValue>
 </div>
 
 @code {
+    private string HubTheme = "dark";
+    public bool IsLight => HubTheme == "light";
+
+    public async Task ToggleThemeAsync()
+    {
+        HubTheme = IsLight ? "dark" : "light";
+        await JS.InvokeVoidAsync("angorPayment.setTheme", HubTheme);
+        StateHasChanged();
+    }
+
     protected override void OnInitialized()
     {
         // Standalone layout — perform the network/settings initialization
         // MainLayout normally does, before any child component renders.
-        _networkService.CheckAndSetNetwork(_navManager.Uri.ToLower());
+        var query = System.Web.HttpUtility.ParseQueryString(new Uri(_navManager.Uri).Query);
+        HubTheme = query["theme"] == "light" ? "light" : "dark";
+        string? requestedNetwork = query["network"] is "Main" or "Angornet" ? query["network"] : null;
+        _networkService.CheckAndSetNetwork(_navManager.Uri.ToLower(), requestedNetwork);
         _networkService.AddSettingsIfNotExist();
         _ = _networkService.CheckServices(true);
     }
diff --git a/src/webapp/Angor.Client/Shared/HubPaymentHeader.razor b/src/webapp/Angor.Client/Shared/HubPaymentHeader.razor
new file mode 100644
index 000000000..a395388bd
--- /dev/null
+++ b/src/webapp/Angor.Client/Shared/HubPaymentHeader.razor
@@ -0,0 +1,75 @@
+@using Microsoft.AspNetCore.Components.Web
+@inject NavigationManager Navigation
+@inject IJSRuntime JS
+
+<header class="hub-header">
+    <div class="hub-header-inner">
+        <div class="hub-header-left">
+            <a class="hub-brand" href="@HubBaseUrl" title="Angor Home">
+                <img src="/assets/img/app-icon.png" alt="" width="32" height="32" />
+                <span>Angor</span>
+            </a>
+            <span class="hub-network-status @(IsMainnet ? "" : "testnet")" title="Payment network: @NetworkName">
+                <span class="hub-network-dot"></span>@(IsMainnet ? "Mainnet" : "Testnet")
+            </span>
+        </div>
+        <div class="hub-desktop-navigation">
+            <nav aria-label="Main navigation">@NavigationLinks</nav>
+            <button type="button" class="hub-icon-button" @onclick="OnSettingsRequested" aria-label="Settings">
+                <Icon IconName="settings" Width="20" Height="20" />
+            </button>
+            <button type="button" class="hub-icon-button" @onclick="ToggleTheme" aria-label="Toggle theme">
+                @ThemeIcon
+            </button>
+        </div>
+        <div class="hub-mobile-header-actions">
+        @if (HelpAvailable)
+        {
+            <button type="button" class="hub-help-button hub-mobile-help" @onclick="OnHelpRequested">Help</button>
+        }
+        <button type="button" class="hub-icon-button hub-menu-toggle" @onclick="OpenMenu" aria-label="Toggle mobile menu" aria-haspopup="dialog">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M4 12h16M4 18h16" /></svg>
+        </button>
+        </div>
+    </div>
+</header>
+<dialog @ref="mobileMenu" class="hub-mobile-menu" aria-label="Menu">
+    <div class="hub-mobile-menu-heading"><strong>Menu</strong><button type="button" class="hub-icon-button" @onclick="CloseMenu" aria-label="Close mobile menu"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="m6 6 12 12M18 6 6 18" /></svg></button></div>
+    <div class="hub-mobile-menu-body">
+        <nav aria-label="Mobile navigation">@NavigationLinks</nav>
+        <section><h2>Network</h2><span class="hub-network-status @(IsMainnet ? "" : "testnet")"><span class="hub-network-dot"></span>@(IsMainnet ? "Mainnet" : "Testnet")</span></section>
+        <section><h2>Settings</h2><button type="button" class="hub-menu-action" @onclick="OpenSettings"><Icon IconName="settings" Width="20" Height="20" />Settings</button></section>
+        <section><h2>Theme</h2><button type="button" class="hub-menu-action" @onclick="ToggleTheme">@ThemeIcon @(Layout.IsLight ? "Light Mode" : "Dark Mode")</button></section>
+    </div>
+</dialog>
+
+@code {
+    [CascadingParameter] public EmptyLayout Layout { get; set; } = default!;
+    [Parameter] public bool IsMainnet { get; set; }
+    [Parameter] public string NetworkName { get; set; } = string.Empty;
+    [Parameter] public EventCallback OnSettingsRequested { get; set; }
+    [Parameter] public EventCallback OnHelpRequested { get; set; }
+    [Parameter] public bool HelpAvailable { get; set; }
+    private ElementReference mobileMenu;
+    private string HubBaseUrl => new Uri(Navigation.BaseUri).IsLoopback ? "http://localhost:4200" : "https://angor.io";
+    private string ProfileUrl => new Uri(Navigation.BaseUri).IsLoopback ? "http://localhost:4201/" : "https://profile.angor.io/angor-profile/";
+    private RenderFragment NavigationLinks => @<text>
+        <a href="@(HubBaseUrl + "/explore")">Projects</a>
+        <a href="@(HubBaseUrl + "/launch")">Launch</a>
+        <a href="@(HubBaseUrl + "/app")">App</a>
+        <a href="@ProfileUrl" target="_blank" rel="noopener noreferrer">Profile</a>
+        <a href="https://docs.angor.io" target="_blank" rel="noopener noreferrer">Docs</a>
+    </text>;
+    private RenderFragment ThemeIcon => @<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        @if (Layout.IsLight) { <circle cx="12" cy="12" r="4" /><path d="M12 2v2m0 16v2M2 12h2m16 0h2M5 5l2 2m10 10l2 2M5 19l2-2M17 7l2-2" /> }
+        else { <path d="M20.5 13A9 9 0 0 1 11 3.5 9 9 0 1 0 20.5 13Z" /> }
+    </svg>;
+    private async Task ToggleTheme() => await Layout.ToggleThemeAsync();
+    private async Task OpenMenu() => await JS.InvokeVoidAsync("angorPayment.openMenu", mobileMenu);
+    private async Task CloseMenu() => await JS.InvokeVoidAsync("angorPayment.closeMenu", mobileMenu);
+    private async Task OpenSettings()
+    {
+        await CloseMenu();
+        await OnSettingsRequested.InvokeAsync();
+    }
+}
diff --git a/src/webapp/Angor.Client/Shared/PasswordComponent.razor b/src/webapp/Angor.Client/Shared/PasswordComponent.razor
index c6af56fae..d3de0d812 100644
--- a/src/webapp/Angor.Client/Shared/PasswordComponent.razor
+++ b/src/webapp/Angor.Client/Shared/PasswordComponent.razor
@@ -6,6 +6,7 @@
 @inject ILogger<PasswordComponent> Logger;
 @inject INetworkService networkService;
 @inject IEncryptionService _encryptionService;
+@inject WalletKeyService walletKeyService;
 @inject IWalletStorage _walletStorage;
 @inject IPasswordCacheService _passwordCacheService;
 
@@ -20,7 +21,7 @@
                             <Icon IconName="lock" Height="32" Width="32" class="me-2" />
                             <h5 class="modal-title">Confirm Wallet Password</h5>
                         </div>
-                        <button class="btn-close-custom" @onclick="HidePassword">
+                        <button class="btn-close-custom" @onclick="HidePassword" aria-label="Close password dialog">
                             <Icon IconName="close-circle" Height="24" Width="24" />
                         </button>
                     </div>
@@ -240,6 +241,7 @@
         var wallet = _walletStorage.GetWallet();
         var walletData = await _encryptionService.DecryptData(wallet.EncryptedData, _passwordCacheService.Data);
         var words = WalletWords.ConvertFromString(walletData);
+        await walletKeyService.PrepareAsync(words);
         return words;
     }
 }
diff --git a/src/webapp/Angor.Client/Shared/SeedPhraseCopyButton.razor b/src/webapp/Angor.Client/Shared/SeedPhraseCopyButton.razor
new file mode 100644
index 000000000..4236c89ec
--- /dev/null
+++ b/src/webapp/Angor.Client/Shared/SeedPhraseCopyButton.razor
@@ -0,0 +1,5 @@
+<CopyButton Value="@Phrase" />
+
+@code {
+    [Parameter] public string? Phrase { get; set; }
+}
diff --git a/src/webapp/Angor.Client/wwwroot/assets/css/hub-invest-controls.css b/src/webapp/Angor.Client/wwwroot/assets/css/hub-invest-controls.css
new file mode 100644
index 000000000..e4b805722
--- /dev/null
+++ b/src/webapp/Angor.Client/wwwroot/assets/css/hub-invest-controls.css
@@ -0,0 +1,613 @@
+/* Shared investment controls copied from angor-hub/src/app/pages/invest/invest.component.css.
+   Scoped to the payment form so Bootstrap dialogs retain their functional layout. */
+@media (max-width: 1240px) {
+
+  .hub-page .hub-invest-grid .transaction-details-card {
+    grid-column: 1 / -1;
+  }
+}
+.hub-page .hub-invest-grid .invest-card {
+  background: white;
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border: 1px solid #e5e7eb;
+}
+.hub-page .hub-invest-grid .invest-amount-card {
+  background: linear-gradient(to bottom right, #fff7ed, #fef3c7);
+  border: 1px solid #fed7aa;
+}
+
+.hub-page .hub-invest-grid .bitcoin-icon-circle {
+  width: 40px;
+  height: 40px;
+  background: #f97316;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.hub-page .hub-invest-grid .amount-card-title {
+  color: #7c2d12 !important;
+}
+
+.hub-page .hub-invest-grid .invest-amount-card .form-label {
+  color: #92400e;
+  font-weight: 600;
+}
+
+.hub-page .hub-invest-grid .card-header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 24px;
+  color: #4a4a4a;
+}
+
+.hub-page .hub-invest-grid .card-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 0;
+}
+.hub-page .hub-invest-grid .form-group {
+  margin-bottom: 4px;
+}
+
+.hub-page .hub-invest-grid .form-label {
+  display: block;
+  font-size: 14px;
+  font-weight: 600;
+  color: #4a4a4a;
+  margin-bottom: 8px;
+}
+
+.hub-page .hub-invest-grid .form-input {
+  width: 100%;
+  padding: 12px 16px;
+  padding-right: 60px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  font-size: 16px;
+  color: #1a1a1a;
+  transition: all 0.2s;
+  box-sizing: border-box;
+}
+
+.hub-page .hub-invest-grid .form-input:focus {
+  outline: none;
+  border-color: #2d5a3d;
+  box-shadow: 0 0 0 3px rgba(45, 90, 61, 0.1);
+}
+
+.hub-page .hub-invest-grid .form-input.error {
+  border-color: #dc2626;
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+}
+
+.hub-page .hub-invest-grid .input-with-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.hub-page .hub-invest-grid .form-input.with-icon {
+  padding-left: 44px;
+}
+
+.hub-page .hub-invest-grid .input-suffix {
+  position: absolute;
+  right: 16px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #666;
+  pointer-events: none;
+}
+
+.hub-page .hub-invest-grid .helper-text {
+  font-size: 13px;
+  color: #6b7280;
+  margin-top: 6px;
+  margin-bottom: 0;
+}
+.hub-page .hub-invest-grid .fund-options-section {
+  margin-top: 20px;
+}
+
+.hub-page .hub-invest-grid .fund-frequency-options {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.hub-page .hub-invest-grid .fund-installments-options {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.hub-page .hub-invest-grid .fund-option-btn {
+  padding: 12px 16px;
+  background: white;
+  border: 2px solid #e5e7eb;
+  border-radius: 8px;
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.hub-page .hub-invest-grid .fund-option-btn:hover {
+  border-color: #2d5a3d;
+  background: #f9fafb;
+}
+
+.hub-page .hub-invest-grid .fund-option-btn.selected {
+  border-color: #2d5a3d;
+  background: #2d5a3d;
+  color: white;
+}
+
+.hub-page .hub-invest-grid .fund-option-btn.error-border {
+  border-color: #dc2626;
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
+}
+
+.hub-page .hub-invest-grid .option-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.hub-page .hub-invest-grid .fund-option-btn.selected .option-label {
+  color: white;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .fund-option-btn {
+  background: var(--surface-card);
+  border-color: #404040;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .fund-option-btn:hover {
+  border-color: #2d5a3d;
+  background: #2a2a2a;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .fund-option-btn.selected {
+  border-color: #2d5a3d;
+  background: #2d5a3d;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .fund-option-btn.error-border {
+  border-color: #dc2626;
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .option-label {
+  color: #fafafa;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .fund-option-btn.selected .option-label {
+  color: white;
+}
+
+.hub-page .hub-invest-grid .fund-card .form-label {
+  color: #92400e;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .fund-card .form-label {
+  color: #fdba74;
+}
+.hub-page .hub-invest-grid .quick-amounts {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.hub-page .hub-invest-grid .quick-amount-btn {
+  padding: 10px 12px;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #4a4a4a;
+  cursor: pointer;
+  transition: all 0.2s;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+}
+
+.hub-page .hub-invest-grid .quick-amount-btn .amount-value {
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.hub-page .hub-invest-grid .quick-amount-btn .amount-label {
+  font-size: 11px;
+  font-weight: 500;
+  opacity: 0.7;
+}
+
+.hub-page .hub-invest-grid .quick-amount-btn:hover {
+  background: #2d5a3d;
+  border-color: #2d5a3d;
+  color: white;
+}
+
+.hub-page .hub-invest-grid .quick-amount-btn.selected {
+  background: #2d5a3d;
+  border-color: #2d5a3d;
+  color: white;
+}
+.hub-page .hub-invest-grid .summary-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1a1a1a;
+  margin: 0 0 20px 0;
+}
+.hub-page .hub-invest-grid .transaction-details-card {
+  display: block;
+}
+
+.hub-page .hub-invest-grid .transaction-detail-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px 0;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.hub-page .hub-invest-grid .transaction-detail-row:last-child {
+  border-bottom: none;
+}
+
+.hub-page .hub-invest-grid .transaction-label {
+  font-size: 13px;
+  color: #6b7280;
+  font-weight: 600;
+}
+
+.hub-page .hub-invest-grid .transaction-value {
+  font-size: 14px;
+  color: #1a1a1a;
+  font-weight: 600;
+}
+
+.hub-page .hub-invest-grid .transaction-value-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 10px 14px;
+}
+
+.hub-page .hub-invest-grid .transaction-copy-button {
+  background: transparent;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  color: #9ca3af;
+  transition: color 0.2s;
+  flex-shrink: 0;
+}
+
+.hub-page .hub-invest-grid .transaction-copy-button:hover {
+  color: #4b5563;
+}
+.hub-page .hub-invest-grid .stages-card {
+  background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
+}
+
+.hub-page .hub-invest-grid .stages-description {
+  font-size: 13px;
+  color: #6b7280;
+  margin: 0 0 16px 0;
+  line-height: 1.5;
+}
+
+.hub-page .hub-invest-grid .stages-breakdown {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.hub-page .hub-invest-grid .stage-breakdown-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px;
+  background: white;
+  border-radius: 10px;
+  border: 1px solid #e5e7eb;
+  transition: all 0.2s;
+}
+
+.hub-page .hub-invest-grid .stage-breakdown-row:hover {
+  border-color: #2d5a3d;
+  box-shadow: 0 2px 8px rgba(45, 90, 61, 0.1);
+}
+
+.hub-page .hub-invest-grid .stage-breakdown-info {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.hub-page .hub-invest-grid .stage-breakdown-number {
+  font-size: 14px;
+  font-weight: 600;
+  color: #1a1a1a;
+}
+
+.hub-page .hub-invest-grid .stage-breakdown-date {
+  font-size: 12px;
+  color: #6b7280;
+}
+
+.hub-page .hub-invest-grid .stage-breakdown-amount {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.hub-page .hub-invest-grid .stage-breakdown-percentage {
+  font-size: 12px;
+  font-weight: 600;
+  color: #2d5a3d;
+  background: #d4edda;
+  padding: 2px 8px;
+  border-radius: 4px;
+}
+
+.hub-page .hub-invest-grid .stage-breakdown-value {
+  font-size: 14px;
+  font-weight: 700;
+  color: #1a1a1a;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .invest-card {
+  background: var(--surface-card);
+  border-color: #333;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .invest-amount-card {
+  background: linear-gradient(to bottom right, rgba(234, 88, 12, 0.15), rgba(251, 191, 36, 0.15));
+  border-color: rgba(234, 88, 12, 0.3);
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .amount-card-title {
+  color: #fb923c !important;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .invest-amount-card .form-label {
+  color: #fdba74;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .card-header {
+  color: #a0a0a0;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .card-title {
+  color: #fafafa;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .form-label {
+  color: #fafafa;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .form-input {
+  background: #2a2a2a;
+  border-color: #333;
+  color: #fafafa;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .form-input:focus {
+  border-color: #5FAF78;
+  box-shadow: 0 0 0 3px rgba(95, 175, 120, 0.2);
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .form-input.error {
+  border-color: #dc2626;
+  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .input-suffix {
+  color: #a0a0a0;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .helper-text {
+  color: #9ca3af;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .quick-amount-btn {
+  background: #2a2a2a;
+  border-color: #333;
+  color: #fafafa;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .quick-amount-btn:hover {
+  background: #2d5a3d;
+  border-color: #2d5a3d;
+  color: white;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .quick-amount-btn.selected {
+  background: #2d5a3d;
+  border-color: #2d5a3d;
+  color: white;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .summary-title {
+  color: #fafafa;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .transaction-detail-row {
+  border-bottom-color: #333;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .transaction-label {
+  color: #9ca3af;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .transaction-value {
+  color: #fafafa;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .transaction-value-container {
+  background: #0A0A0A;
+  border-color: #404040;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .transaction-copy-button {
+  color: #6b7280;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .transaction-copy-button:hover {
+  color: #9ca3af;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .stages-card {
+  background: var(--surface-card);
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .stages-description {
+  color: #9ca3af;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .stage-breakdown-row {
+  background: var(--surface-card);
+  border-color: #333;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .stage-breakdown-row:hover {
+  border-color: #2d5a3d;
+  box-shadow: 0 2px 8px rgba(45, 90, 61, 0.3);
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .stage-breakdown-number {
+  color: #fafafa;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .stage-breakdown-date {
+  color: #9ca3af;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .stage-breakdown-percentage {
+  background: #2d5a3d;
+  color: #a8e6b4;
+}
+
+.hub-page[data-theme="dark"] .hub-invest-grid .stage-breakdown-value {
+  color: #fafafa;
+}
+@media (max-width: 768px) {
+  .hub-page .hub-invest-grid .invest-amount-card {
+    order: 1;
+  }
+
+  .hub-page .hub-invest-grid .stages-card {
+    order: 2;
+  }
+
+  .hub-page .hub-invest-grid .transaction-details-card {
+    order: 3;
+  }
+
+  .hub-page .hub-invest-grid .invest-card {
+    padding: 16px;
+  }
+
+  .hub-page .hub-invest-grid .card-title {
+    font-size: 16px;
+  }
+
+  .hub-page .hub-invest-grid .quick-amounts {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .hub-page .hub-invest-grid .fund-frequency-options {
+    grid-template-columns: 1fr 1fr;
+    gap: 12px;
+  }
+
+  .hub-page .hub-invest-grid .fund-installments-options {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 12px;
+  }
+
+  .hub-page .hub-invest-grid .fund-option-btn {
+    padding: 10px 8px;
+  }
+
+  .hub-page .hub-invest-grid .option-label {
+    font-size: 12px;
+  }
+
+  .hub-page .hub-invest-grid .stage-breakdown-row {
+    padding: 12px;
+  }
+
+  .hub-page .hub-invest-grid .stage-breakdown-number {
+    font-size: 13px;
+  }
+
+  .hub-page .hub-invest-grid .stage-breakdown-date {
+    font-size: 11px;
+  }
+
+  .hub-page .hub-invest-grid .stage-breakdown-percentage {
+    font-size: 11px;
+    padding: 2px 6px;
+  }
+
+  .hub-page .hub-invest-grid .stage-breakdown-value {
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 480px) {
+  .hub-page .hub-invest-grid .card-header {
+    gap: 8px;
+  }
+
+  .hub-page .hub-invest-grid .card-header svg {
+    width: 20px;
+    height: 20px;
+  }
+
+  .hub-page .hub-invest-grid .stage-breakdown-row {
+    padding: 10px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+  }
+
+  .hub-page .hub-invest-grid .stage-breakdown-amount {
+    align-items: flex-start;
+    width: 100%;
+  }
+
+  .hub-page .hub-invest-grid .stages-description {
+    font-size: 12px;
+  }
+}
+
+/* Neutralize legacy card chrome around the reused Hub controls. */
+.hub-page .hub-invest-grid .card-header { padding: 0; min-height: 0; border: 0; background: transparent; }
+.hub-page .hub-invest-grid .hub-form-body { display: contents; }
+.hub-page .hub-invest-grid .bitcoin-icon-circle { color: white; font-size: 26px; }
+.hub-page .hub-invest-grid #payment-amount { padding: 12px 60px 12px 16px; border-radius: 8px; }
+.hub-page .hub-invest-grid .input-suffix { background: transparent; border: 0; padding: 0; }
+.hub-page .hub-invest-grid .quick-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
+.hub-page .hub-invest-grid .quick-amount-btn { min-width: 0; width: auto; padding-left: 4px; padding-right: 4px; }
+.hub-page .hub-invest-grid .fund-installments-options { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
diff --git a/src/webapp/Angor.Client/wwwroot/assets/css/invest.css b/src/webapp/Angor.Client/wwwroot/assets/css/invest.css
index c1aa3d2c1..51fd59fab 100644
--- a/src/webapp/Angor.Client/wwwroot/assets/css/invest.css
+++ b/src/webapp/Angor.Client/wwwroot/assets/css/invest.css
@@ -1,3 +1,16 @@
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('/assets/fonts/proxima-nova/proximanova_light.otf') format('opentype');
+    font-weight: 300;
+    font-display: swap;
+}
+@font-face {
+    font-family: 'Proxima Nova';
+    src: url('/assets/fonts/proxima-nova/proximanova_bold.otf') format('opentype');
+    font-weight: 600 700;
+    font-display: swap;
+}
+
 /* Angor Hub look-and-feel for the standalone invest page.
    Tokens copied from angor-hub (src/styles.css). Scoped under .hub-page. */
 
@@ -8,7 +21,7 @@
     --accent-dark: #4d9a6a;
     --text: #fafafa;
     --text-secondary: #a3a3a3;
-    --surface-card: #1a1a1a;
+    --surface-card: #101010;
     --surface-ground: #0a0a0a;
     --surface-hover: #2a2a2a;
     --border: #2a2a2a;
@@ -20,7 +33,7 @@
     min-height: 100vh;
     background: var(--surface-ground);
     color: var(--text);
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    font-family: 'Proxima Nova', system-ui, -apple-system, sans-serif;
 }
 
 .hub-page * {
@@ -266,28 +279,6 @@
     transition: width .7s ease;
 }
 
-/* opportunity CTA card (hub .opportunity-card) */
-.hub-opportunity {
-    background-image: linear-gradient(135deg, #2d5a3d 0%, #4a8f5f 100%);
-    color: #fff;
-    border-radius: 16px;
-    padding: 24px;
-    text-align: center;
-}
-
-.hub-opportunity .btn-white {
-    background: #fff;
-    color: #2d5a3d;
-    border-radius: 8px;
-    padding: .875rem 1.5rem;
-    font-weight: 600;
-    width: 100%;
-    border: none;
-    transition: all .2s ease;
-}
-
-.hub-opportunity .btn-white:hover { background: #f5f5f5; transform: translateY(-1px); }
-
 .hub-link { color: var(--accent); text-decoration: none; font-weight: 600; }
 .hub-link:hover { color: var(--accent-light); text-decoration: underline; }
 
@@ -320,3 +311,446 @@
     font-size: .85rem;
 }
 .hub-footer a { color: var(--accent); text-decoration: none; }
+
+/* Shared Hub surfaces carry through payment selection, invoices and recovery dialogs. */
+.hub-page {
+    position: relative;
+    isolation: isolate;
+    --bs-body-color: var(--text);
+    --bs-body-bg: var(--surface-ground);
+    --bs-border-color: var(--border);
+}
+.hub-page::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    pointer-events: none;
+    background: var(--accent);
+    mask: url('/assets/img/hero-bg-pattern.svg') center / 120px 120px repeat;
+    opacity: .1;
+}
+.hub-page[data-theme="light"] {
+    --accent: #2d5a3d;
+    --accent-light: #3d6448;
+    --accent-dark: #254a32;
+    --text: #0a0a0a;
+    --text-secondary: #6b7280;
+    --surface-card: #fff;
+    --surface-ground: #fafafa;
+    --surface-hover: #f3f4f6;
+    --border: #e5e7eb;
+}
+.hub-page[data-theme="light"]::before { opacity: .07; }
+.hub-page[data-theme="light"] .btn-close { filter: none; }
+.hub-page :is(button, input, select, textarea) { font-family: inherit; }
+.hub-page :is(.card-body, .modal-body) { padding: 24px; }
+.hub-page :is(.card-header, .modal-header, .modal-footer) { padding: 16px 24px; }
+.hub-page .bg-light,
+.hub-page .invest-stage-card,
+.hub-page .invest-project-id-box {
+    background: var(--surface-ground) !important;
+    border: 1px solid var(--border);
+    border-radius: 12px !important;
+}
+.hub-page .form-control,
+.hub-page .form-select,
+.hub-page .input-group-text {
+    background: var(--surface-ground) !important;
+    color: var(--text) !important;
+    border-color: var(--border) !important;
+    min-height: 44px;
+}
+.hub-page .btn { min-height: 44px; letter-spacing: normal; border-radius: 8px !important; }
+.hub-page .btn-sm { min-height: 36px; }
+.hub-page .text-success { color: var(--accent) !important; }
+.hub-page .modal { backdrop-filter: blur(6px); overflow-y: auto; padding: 16px; }
+.hub-page .modal-dialog { width: 100%; max-width: 480px; margin: 0 auto; min-height: calc(100% - 0px); }
+.hub-page .modal-dialog.modal-lg { max-width: 720px; }
+.hub-page .modal-content { max-height: calc(100dvh - 32px); overflow: hidden; box-shadow: 0 24px 80px #0006; }
+.hub-page .modal-body { overflow-y: auto; min-height: 0; }
+.hub-page .modal-header, .hub-page .modal-footer { flex-shrink: 0; }
+.hub-page .modal-title { font-size: 22px; line-height: 1.25; }
+.hub-page .modal-body img[alt="QR Code"] { background: white; padding: 12px; border-radius: 12px; }
+.hub-page .modal-body .text-break { overflow-wrap: anywhere; }
+.hub-page .btn-close { min-width: 32px; min-height: 32px; opacity: .8; }
+.hub-page :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+.hub-page[data-theme="light"] .alert-success { color: #166534 !important; }
+.hub-page[data-theme="light"] .alert-info { color: #1e40af !important; }
+.hub-page[data-theme="light"] .alert-warning { color: #92400e !important; }
+.hub-page[data-theme="light"] .alert-danger { color: #991b1b !important; }
+.hub-header { height: 80px; padding: 0 24px; }
+.hub-header .hub-brand { font-size: 18px; font-weight: 600; }
+.hub-header .hub-brand img { width: 32px; height: 32px; }
+.hub-page .invest-view-page { max-width: 1280px; }
+@media (max-width: 640px) {
+    .hub-header { padding: 0 16px; }
+    .hub-page :is(.card-body, .modal-body) { padding: 20px; }
+    .hub-page :is(.card-header, .modal-header, .modal-footer) { padding: 16px 20px; }
+    .hub-page .modal { padding: 12px; }
+    .hub-page .modal-content { max-height: calc(100dvh - 24px); }
+    .hub-page .modal-title { font-size: 20px; }
+}
+
+.hub-page .hub-payment-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.hub-page .hub-payment-options .btn { padding: 20px 12px; border-width: 2px !important; }
+.hub-page .hub-payment-options .btn > div { flex-direction: column; gap: 12px; }
+.hub-page .hub-payment-options .btn > div > div { flex-direction: column; }
+.hub-page .hub-payment-options .text-start { text-align: center !important; }
+.hub-page .hub-payment-options small { display: block; font-size: 12px; margin-top: 6px; }
+.hub-page .modal-header { position: relative; justify-content: center; gap: 12px; }
+.hub-page .modal-title { padding-right: 24px; }
+.hub-page .modal-header .btn-close { position: absolute; right: 16px; top: 12px; margin: 0; }
+.hub-page .modal-body img[alt*="QR Code"] { background: white; padding: 12px; border-radius: 12px; }
+.hub-page .form-check-input { border-color: var(--border); background-color: var(--surface-ground); }
+.hub-page .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
+.hub-page .btn-primary, .hub-page .btn-border { font-family: inherit; }
+@media (prefers-reduced-motion: reduce) {
+    .hub-page * { transition: none !important; }
+}
+
+/* Bridge legacy Bootstrap variables to the Hub palette, including nested controls. */
+.hub-page {
+    --angor-primary: var(--text);
+    --angor-secondary: var(--accent);
+    --angor-link: var(--accent);
+    --angor-accent: var(--border);
+    --angor-font-sans-serif: 'Proxima Nova', system-ui, -apple-system, sans-serif;
+    --angor-btn-font-family: var(--angor-font-sans-serif);
+    --form-label: var(--text-secondary);
+    --form-text: var(--text);
+    --form-bg: var(--surface-ground);
+    --form-border: var(--border);
+    --btn-border: var(--border);
+}
+.hub-page :is(h1, h2, h3, h4, h5, h6, p, span, label, small, strong, a, .btn) { font-family: inherit; }
+.hub-page .fw-bold { color: inherit !important; }
+.hub-page .hub-brand { color: var(--text) !important; }
+.hub-page .hub-link, .hub-page .hub-footer a { color: var(--accent) !important; }
+.hub-page .form-label { color: var(--text-secondary) !important; }
+.hub-header { height: 64px; padding: 0; background: color-mix(in srgb, var(--surface-ground) 85%, transparent); backdrop-filter: blur(12px); }
+.hub-header-inner { width: 100%; max-width: 1280px; margin: auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+.hub-header-settings { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px; color: var(--text); background: transparent; border: 0; border-radius: 8px; }
+.hub-header-settings:hover { background: var(--surface-hover); }
+.hub-page .invest-view-page { padding-bottom: 100px; }
+.hub-payment-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; border-top: 1px solid var(--border); background: var(--surface-card); padding: 16px; }
+.hub-payment-footer-inner { max-width: 1248px; margin: auto; display: flex; justify-content: flex-end; align-items: center; gap: 24px; }
+.hub-payment-footer .btn { width: auto !important; min-width: 220px; padding: 12px 24px; }
+.hub-payment-footer-summary { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
+.hub-payment-footer-summary span { color: var(--text-secondary); }
+.hub-payment-footer-summary strong { color: var(--text); font-size: 18px; }
+.hub-page .btn-primary { background: #2d5a3d !important; color: white !important; border-color: transparent !important; }
+.hub-page .btn-border { background: var(--surface-card) !important; color: var(--text) !important; border-color: var(--border) !important; }
+.hub-page .btn-close-custom { color: var(--text); background: transparent; }
+.hub-page .modern-modal { background: var(--surface-card) !important; }
+.hub-page .modal-header .modal-title { margin: 0; }
+.hub-page .modal-content { border-radius: 16px !important; }
+.hub-page .modal-body img[alt*="QR Code"] { max-width: 100%; height: auto; }
+.hub-page .modal-body :is(.input-group, .text-break) { min-width: 0; }
+.hub-page .seed-word { margin: 0; padding: 8px; font-size: 14px; }
+.hub-page .word-box-container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
+
+/* Payment startup and project-loading states use the same theme from first paint. */
+.hub-boot-content { display: none; }
+html.hub-payment-page { color-scheme: dark; background: #0a0a0a; }
+html.hub-payment-page[data-payment-theme="light"] { color-scheme: light; background: #fafafa; }
+.hub-payment-page .loader-wrapper { background: #0a0a0a !important; color: #fafafa; }
+.hub-payment-page[data-payment-theme="light"] .loader-wrapper { background: #fafafa !important; color: #0a0a0a; }
+.hub-payment-page .loader-wrapper > .loader { display: none; }
+.hub-payment-page .hub-boot-content, .hub-loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 20px; font-family: 'Proxima Nova', system-ui, sans-serif; }
+.hub-loading-state { min-height: calc(100dvh - 64px); }
+.hub-loading-mark { position: relative; width: 80px; height: 80px; display: grid; place-items: center; margin-bottom: 24px; }
+.hub-loading-mark img { width: 36px; height: 36px; }
+.hub-loading-ring { position: absolute; inset: 0; border: 2px solid #5faf7833; border-top-color: #5faf78; border-radius: 50%; animation: hub-loading-spin 1s linear infinite; }
+.hub-boot-content h1, .hub-loading-state h1 { color: inherit; font: 600 24px/1.3 'Proxima Nova', system-ui, sans-serif; margin: 0 0 8px; }
+.hub-boot-content p, .hub-loading-state p { color: #a3a3a3; font-size: 16px; margin: 0 0 12px; }
+[data-payment-theme="light"] .hub-boot-content p, [data-theme="light"] .hub-loading-state p { color: #6b7280; }
+.hub-payment-page #blazor-error-ui { background: #101010; color: #fafafa; border: 1px solid #ef4444; border-radius: 16px; font-family: 'Proxima Nova', system-ui, sans-serif; }
+.hub-payment-page #blazor-error-ui :is(strong, a) { color: inherit; }
+.hub-payment-page[data-payment-theme="light"] #blazor-error-ui { background: #fff; color: #0a0a0a; }
+@keyframes hub-loading-spin { to { transform: rotate(360deg); } }
+@media (max-width: 640px) {
+    .hub-explore-link { display: none; }
+    .hub-payment-footer { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }
+    .hub-payment-footer-inner { gap: 12px; }
+    .hub-payment-footer .btn { min-width: 0; flex: 1; padding: 12px; }
+    .hub-page .invest-view-page { padding-bottom: 120px; }
+}
+@media (prefers-reduced-motion: reduce) { .hub-loading-ring { animation: none; } }
+
+/* Match Hub navigation on desktop and its right-hand menu below 1024px. */
+.hub-header-left, .hub-desktop-navigation, .hub-desktop-navigation nav { display: flex; align-items: center; gap: 8px; }
+.hub-header-left { gap: 24px; }
+.hub-desktop-navigation nav a, .hub-mobile-menu nav a { color: var(--text) !important; font-weight: 500; padding: 8px 16px; border-radius: 8px; font-size: 14px; }
+.hub-desktop-navigation nav a:hover, .hub-mobile-menu nav a:hover, .hub-menu-action:hover, .hub-icon-button:hover { background: var(--surface-hover); }
+.hub-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 0; background: transparent; color: var(--text); }
+.hub-network-status { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #f7931a; }
+.hub-network-status.testnet { color: #28c025; }
+.hub-network-dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
+.hub-menu-toggle { display: none; }
+.hub-mobile-menu { position: fixed; inset: 0 0 0 auto; width: min(320px, 100%); height: 100dvh; max-height: 100dvh; max-width: 100%; margin: 0; padding: 0; color: var(--text); background: var(--surface-ground); border: 0; box-shadow: -16px 0 50px #0004; }
+.hub-mobile-menu::backdrop { background: #0009; backdrop-filter: blur(6px); }
+.hub-mobile-menu-heading { height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 16px; border-bottom: 1px solid var(--border); font-size: 18px; }
+.hub-mobile-menu-body { padding: 16px; }
+.hub-mobile-menu nav { display: flex; flex-direction: column; gap: 8px; }
+.hub-mobile-menu nav a { padding: 12px 16px; font-size: 16px; }
+.hub-mobile-menu section { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
+.hub-mobile-menu h2 { color: var(--text-secondary); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 0 16px; margin: 0 0 8px; }
+.hub-mobile-menu .hub-network-status { padding: 12px 16px; }
+.hub-menu-action { width: 100%; display: flex; align-items: center; gap: 12px; border: 0; padding: 12px 16px; color: var(--text); background: transparent; border-radius: 8px; font-size: 16px; }
+@media (max-width: 1023px) {
+    .hub-desktop-navigation { display: none; }
+    .hub-menu-toggle { display: inline-flex; }
+    .hub-header-left > .hub-network-status { display: none; }
+}
+.hub-page .btn { font-size: 16px; font-weight: 600; }
+.hub-page .btn-sm { font-size: 14px; }
+.hub-inline-link { display: inline; padding: 0; border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 600; }
+.hub-inline-link:hover { text-decoration: underline; }
+.hub-page .modal-body img[alt*="QR Code"] { border: 3px solid #f7931a; padding: 12px; max-width: 224px !important; }
+.hub-page .hub-payment-options .btn { min-width: 0; white-space: normal; }
+.hub-page .hub-payment-options svg { flex-shrink: 0; }
+
+/* Investment composition mirrors Hub; wallet and protocol details remain available below. */
+.hub-page .invest-view-page { margin-top: 0 !important; padding-top: 92px; }
+.hub-invest-navigation { position: fixed; top: 64px; left: 0; right: 0; z-index: 40; padding: 24px 16px 8px; pointer-events: none; }
+.hub-invest-navigation-inner { max-width: 1248px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+.hub-invest-navigation-left { display: flex; align-items: center; gap: 16px; min-width: 0; }
+.hub-back-button, .hub-project-label, .hub-invest-navigation-stats > span { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 12px 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-card); color: var(--text) !important; font-size: 15px; font-weight: 600; box-shadow: 0 2px 8px #0001; }
+.hub-back-button { flex-shrink: 0; }
+.hub-project-label { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.hub-invest-navigation-stats { display: flex; flex-shrink: 0; gap: 16px; }
+.hub-invest-navigation-stats > span { color: var(--text-secondary) !important; font-size: 13px; font-weight: 500; }
+.hub-invest-navigation-stats strong { color: var(--text); }
+.hub-invest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; margin-bottom: 24px; }
+.hub-invest-grid > * { min-width: 0; }
+.hub-page .hub-invest-grid .card { border-radius: 12px !important; box-shadow: 0 2px 8px #0001 !important; }
+.hub-page .hub-invest-grid .card-header { border-bottom: 0 !important; padding: 24px 24px 0; margin-bottom: 0; min-height: 48px; }
+.hub-page .hub-invest-grid .card-header h5 { font-size: 18px; margin: 0; }
+.hub-page .hub-invest-grid .card-body { padding: 24px; }
+.hub-page .hub-amount-card { background: linear-gradient(to bottom right, #fff7ed, #fef3c7) !important; border-color: #fed7aa !important; }
+.hub-page[data-theme="dark"] .hub-amount-card { background: linear-gradient(to bottom right, #ea580c26, #fbbf2426) !important; border-color: #ea580c4d !important; }
+.hub-page .hub-amount-card h5 { color: #7c2d12; }
+.hub-page[data-theme="dark"] .hub-amount-card h5 { color: #fb923c; }
+.hub-bitcoin-icon { width: 40px; height: 40px; display: grid; place-items: center; background: #f97316; color: white; border-radius: 8px; font-size: 26px; flex-shrink: 0; }
+.hub-page #payment-amount { padding: 12px 16px; border-radius: 8px 0 0 8px; }
+.hub-quick-amounts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
+.hub-quick-amounts .btn { padding: 10px 2px; font-size: 14px; }
+.hub-quick-amounts .small { font-size: 11px; }
+.hub-pattern-section { margin-top: 16px; }
+.hub-page .list-group-item { color: var(--text); background: var(--surface-ground); border-color: var(--border); border-radius: 8px; margin-bottom: 8px; }
+.hub-page .list-group-item.active { background: color-mix(in srgb, var(--accent) 15%, var(--surface-ground)); border-color: var(--accent); }
+.hub-page .list-group-item.active .text-white-50 { color: var(--text-secondary) !important; }
+.hub-transaction-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
+.hub-transaction-row:first-child { padding-top: 0; }
+.hub-transaction-row:last-child { border-bottom: 0; }
+.hub-transaction-row > span:first-child { color: var(--text-secondary); }
+.hub-transaction-row > :last-child { text-align: right; }
+.hub-project-id { display: flex; align-items: center; min-width: 0; max-width: 65%; }
+.hub-project-id code { overflow-wrap: anywhere; color: var(--text); font-size: 12px; }
+.hub-project-id button { flex-shrink: 0; }
+.hub-wallet-section { margin: 24px 0; }
+.hub-page .hub-project-details { margin-top: 24px; }
+.hub-project-details summary { padding: 20px 24px; cursor: pointer; color: var(--text); font-weight: 600; }
+@media (max-width: 1240px) {
+    .hub-invest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .hub-transaction-card { grid-column: 1 / -1; }
+}
+@media (max-width: 768px) {
+    .hub-invest-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
+    .hub-invest-navigation-stats { display: none; }
+    .hub-invest-navigation-left { width: 100%; gap: 8px; }
+    .hub-project-label { flex: 1; }
+    .hub-back-button, .hub-project-label { padding: 12px; }
+    .hub-page .hub-invest-grid .card-header { padding: 20px 20px 0; }
+    .hub-page .hub-invest-grid .card-body { padding: 20px; }
+}
+.hub-page .card { --angor-card-color: var(--text); }
+.hub-page .hub-amount-card .input-group-text { color: var(--text-secondary) !important; padding: 0 12px; }
+.hub-page[data-theme="dark"] .hub-amount-card .form-label { color: #fdba74 !important; }
+.hub-page[data-theme="dark"] #payment-amount { background: #2a2a2a !important; border-color: #333 !important; }
+.hub-page .hub-transaction-row > strong { color: #f7931a; }
+.hub-page .hub-mobile-back { display: none; }
+@media (max-width: 768px) {
+    .hub-payment-footer { background: transparent; border: 0; pointer-events: none; }
+    .hub-payment-footer-inner { max-width: 480px; pointer-events: auto; gap: 10px; }
+    .hub-payment-footer-summary { display: none; }
+    .hub-page .hub-mobile-back { display: inline-flex; height: 52px; align-items: center; justify-content: center; padding: 0 24px; background: var(--surface-card); color: var(--text) !important; border: 1px solid var(--border); border-radius: 16px; font-weight: 600; }
+    .hub-page .hub-payment-footer .btn { height: 52px; border-radius: 16px !important; background: linear-gradient(135deg, #4b7c5a, #3d6448) !important; font-size: 15px; }
+}
+.hub-invest-navigation-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
+.hub-help-button { pointer-events: auto; height: 44px; padding: 12px 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-card); color: var(--text); font-size: 15px; font-weight: 600; }
+.hub-help-button:hover { background: var(--surface-hover); }
+@media (max-width: 768px) {
+    .hub-invest-navigation-inner { gap: 8px; }
+    .hub-invest-navigation-left { width: auto; flex: 1; }
+    .hub-invest-navigation-actions { gap: 0; }
+    .hub-help-button { padding: 12px; }
+}
+.hub-payment-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 24px; }
+.hub-payment-tabs button { padding: 10px 12px; min-height: 44px; border: 2px solid var(--border); border-radius: 12px; color: var(--text); background: var(--surface-ground); font-size: 14px; font-weight: 600; }
+.hub-payment-tabs button:hover:not(:disabled), .hub-payment-tabs button.active { border-color: #4b7c5a; background: color-mix(in srgb, #4b7c5a 20%, var(--surface-ground)); }
+.hub-payment-tabs button:disabled:not(.active) { opacity: .5; }
+.hub-payment-choice-hint { color: var(--text-secondary); font-size: 14px; text-align: center; margin: 0; }
+.hub-plan-options { display: grid; gap: 8px; }
+.hub-plan-option { width: 100%; padding: 16px; background: var(--surface-ground); color: var(--text); border: 2px solid var(--border); border-radius: 8px; text-align: left; }
+.hub-plan-option.active { border-color: #f97316; background: color-mix(in srgb, #f97316 10%, var(--surface-ground)); }
+.hub-page .hub-plan-option .text-white-50 { color: var(--text-secondary) !important; }
+
+/* One theme-aware close treatment for payment, help, errors and password dialogs. */
+.hub-page .btn-close, .hub-page .btn-close-custom {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+    min-height: 32px;
+    padding: 4px;
+    color: var(--text-secondary) !important;
+    background: transparent !important;
+    border: 0 !important;
+    border-radius: 8px;
+    box-shadow: none;
+    filter: none !important;
+    opacity: 1;
+}
+.hub-page .btn-close::before, .hub-page .btn-close-custom::before {
+    content: '';
+    width: 24px;
+    height: 24px;
+    background: currentColor;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 6 12 12M18 6 6 18' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+.hub-page .btn-close-custom svg { display: none; }
+.hub-page .btn-close:hover, .hub-page .btn-close-custom:hover { color: var(--text) !important; background: var(--surface-hover) !important; }
+.hub-page .modal-header .btn-close, .hub-page .modal-header .btn-close-custom { position: absolute; right: 16px; top: 12px; margin: 0; }
+.hub-page .modal-header > div { padding-right: 24px; }
+.hub-page .modal-title { padding-left: 24px; padding-right: 24px; text-align: center; }
+
+/* Exact Tailwind container breakpoints used by Hub's header, form and footer. */
+.hub-page { --hub-container-width: 100%; }
+html.hub-payment-page { scrollbar-gutter: stable; }
+.hub-page .invest-view-page, .hub-header-inner, .hub-invest-navigation-inner, .hub-payment-footer-inner {
+    box-sizing: border-box; width: 100%; max-width: var(--hub-container-width); margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px;
+}
+.hub-invest-navigation { padding-left: 0; padding-right: 0; }
+.hub-payment-footer { padding-left: 0; padding-right: 0; }
+.hub-page .invest-view-page { padding-top: 76px; }
+.hub-invest-grid { padding-top: 8px; }
+@media (min-width: 640px) { .hub-page { --hub-container-width: 640px; } }
+@media (min-width: 768px) { .hub-page { --hub-container-width: 768px; } }
+@media (min-width: 1024px) { .hub-page { --hub-container-width: 1024px; } }
+@media (min-width: 1280px) { .hub-page { --hub-container-width: 1280px; } }
+@media (min-width: 1536px) { .hub-page { --hub-container-width: 1536px; } }
+@media (min-width: 769px) {
+    .hub-payment-footer { height: 80px; padding-top: 0; padding-bottom: 0; }
+    .hub-payment-footer-inner { height: 100%; padding-top: 20px; padding-bottom: 20px; }
+    .hub-payment-footer-summary { flex-direction: row; align-items: center; gap: 8px; }
+    .hub-payment-footer-summary strong { font-size: 16px; }
+    .hub-page .hub-payment-footer .btn { min-width: 0; padding: 14px 32px; background: linear-gradient(135deg, #4b7c5a, #3d6448) !important; border: 0 !important; }
+}
+@media (max-width: 768px) {
+    .hub-page .invest-view-page { padding-top: 16px; }
+    .hub-invest-navigation { position: static; padding: 0 0 16px; }
+    .hub-invest-navigation-inner { padding: 0; }
+    .hub-invest-navigation-left { visibility: hidden; }
+    .hub-payment-footer-inner { max-width: 512px; }
+}
+.hub-mobile-stats, .hub-mobile-header-actions { display: none; }
+@media (max-width: 1023px) {
+    .hub-mobile-header-actions { display: flex; align-items: center; gap: 8px; }
+    .hub-mobile-help { display: none; }
+}
+@media (max-width: 768px) {
+    .hub-invest-navigation { display: none; }
+    .hub-mobile-help { display: block; height: 36px; padding: 8px 12px; }
+    .hub-mobile-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 24px; }
+    .hub-mobile-stats:has(> div:only-child) { grid-template-columns: 1fr; }
+    .hub-mobile-stats:empty { display: none; }
+    .hub-mobile-stats > div { display: flex; flex-direction: column; gap: 8px; padding: 12px 8px; text-align: center; background: var(--surface-card); border: 1px solid var(--border); border-radius: 12px; }
+    .hub-mobile-stats span { color: var(--text-secondary); text-transform: uppercase; font-size: 10px; font-weight: 600; letter-spacing: .5px; }
+    .hub-mobile-stats strong { color: var(--text); font-size: 16px; }
+    .hub-invest-grid { padding-top: 0; }
+}
+.hub-invest-grid { align-items: stretch; }
+.hub-amount-column { display: flex; flex-direction: column; gap: 24px; }
+.hub-amount-column > .invest-card { width: 100%; }
+html.hub-payment-page::-webkit-scrollbar, .hub-payment-page body::-webkit-scrollbar { width: 10px !important; height: 10px !important; }
+html.hub-payment-page::-webkit-scrollbar-track { background: transparent; }
+html.hub-payment-page::-webkit-scrollbar-thumb { background: #ffffff4d; border-radius: 5px; }
+html.hub-payment-page[data-payment-theme="light"]::-webkit-scrollbar-thumb { background: #0003; }
+.hub-header { border-bottom: 0; }
+.hub-header-inner { height: 64px; }
+@media (min-width: 769px) {
+    .hub-invest-grid { min-height: calc(100dvh - 268px); padding-bottom: 24px; }
+}
+.hub-page .btn-close, .hub-page .btn-close-custom { box-sizing: border-box !important; }
+.hub-mobile-menu-heading .hub-icon-button { color: var(--text-secondary); }
+.hub-plan-option > span { display: block; color: var(--text-secondary); font-size: 13px; margin-top: 4px; }
+
+.hub-plan-option .hub-plan-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--text); margin-top: 0; font-size: 16px; }
+.hub-plan-count { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, #f97316 20%, transparent); color: #f97316; font-size: 12px; font-weight: 600; }
+.hub-plan-frequency { margin-left: auto; color: var(--text-secondary); font-size: 14px; }
+.hub-plan-option:focus-visible { outline: 2px solid #f97316; outline-offset: 3px; }
+@media (max-width: 767px) { .hub-amount-column { gap: 16px; } }
+
+.hub-page .transaction-value-code { min-width: 0; overflow-wrap: anywhere; }
+
+/* Completion uses the same surfaces and controls as the payment form. */
+.hub-page .invest-view-page.hub-completed-page {
+    min-height: calc(100dvh - 64px);
+    margin-top: 0 !important;
+    padding-top: 96px;
+    padding-bottom: 0;
+    display: flex;
+    flex-direction: column;
+}
+.hub-confirmation-region {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 32px 0;
+}
+.hub-confirmation {
+    width: 100%;
+    max-width: 560px;
+    padding: 36px;
+    border: 1px solid var(--border);
+    border-radius: 20px;
+    background: var(--surface-card);
+    text-align: center;
+    box-shadow: 0 12px 40px #0000000a;
+}
+.hub-confirmation-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    margin: 0 auto 24px;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--accent) 14%, transparent);
+    color: var(--accent);
+}
+.hub-confirmation h1 { margin: 0 0 12px; font-size: 28px; font-weight: 600; line-height: 1.25; color: var(--text); }
+/* Blazor focuses the page heading on navigation; reserve outlines for controls. */
+.hub-page .hub-confirmation h1:focus { outline: none; }
+.hub-confirmation-description { margin: 0 auto 28px; max-width: 360px; color: var(--text-secondary); font-size: 16px; line-height: 1.6; }
+.hub-confirmation-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
+.hub-page .hub-confirmation-actions .btn { width: auto; min-height: 44px; padding: 12px 18px; font-size: 14px; }
+.hub-confirmation-recovery { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.6; }
+.hub-confirmation-recovery p { margin: 0 0 6px; color: var(--text); font-weight: 600; }
+.hub-confirmation-recovery span { color: var(--text-secondary); }
+.hub-confirmation-delete { display: inline-block; margin-top: 20px; padding: 8px 0; border: 0; background: none; color: var(--text-secondary); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
+.hub-confirmation-delete:hover { color: var(--text); }
+.hub-completed-page .hub-footer { margin-top: 0; padding: 20px 0; }
+@media (max-width: 768px) {
+    .hub-page .invest-view-page.hub-completed-page { padding-top: 0; }
+    .hub-confirmation { padding: 28px 20px; }
+    .hub-confirmation h1 { font-size: 24px; }
+    .hub-confirmation-actions { flex-direction: column; }
+    .hub-page .hub-confirmation-actions .btn { width: 100%; }
+}
diff --git a/src/webapp/Angor.Client/wwwroot/assets/fonts/proxima-nova/proximanova_bold.otf b/src/webapp/Angor.Client/wwwroot/assets/fonts/proxima-nova/proximanova_bold.otf
new file mode 100644
index 000000000..1ea77534a
Binary files /dev/null and b/src/webapp/Angor.Client/wwwroot/assets/fonts/proxima-nova/proximanova_bold.otf differ
diff --git a/src/webapp/Angor.Client/wwwroot/assets/fonts/proxima-nova/proximanova_light.otf b/src/webapp/Angor.Client/wwwroot/assets/fonts/proxima-nova/proximanova_light.otf
new file mode 100644
index 000000000..09479b1e0
Binary files /dev/null and b/src/webapp/Angor.Client/wwwroot/assets/fonts/proxima-nova/proximanova_light.otf differ
diff --git a/src/webapp/Angor.Client/wwwroot/assets/img/app-icon.png b/src/webapp/Angor.Client/wwwroot/assets/img/app-icon.png
new file mode 100644
index 000000000..2e8e53de4
Binary files /dev/null and b/src/webapp/Angor.Client/wwwroot/assets/img/app-icon.png differ
diff --git a/src/webapp/Angor.Client/wwwroot/assets/img/favicon.png b/src/webapp/Angor.Client/wwwroot/assets/img/favicon.png
index effdad4ef..784eadf7c 100644
Binary files a/src/webapp/Angor.Client/wwwroot/assets/img/favicon.png and b/src/webapp/Angor.Client/wwwroot/assets/img/favicon.png differ
diff --git a/src/webapp/Angor.Client/wwwroot/assets/img/hero-bg-pattern.svg b/src/webapp/Angor.Client/wwwroot/assets/img/hero-bg-pattern.svg
new file mode 100644
index 000000000..31aedf62e
--- /dev/null
+++ b/src/webapp/Angor.Client/wwwroot/assets/img/hero-bg-pattern.svg
@@ -0,0 +1,8 @@
+<svg width="164" height="164" viewBox="0 0 164 164" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g transform="rotate(-45 82 82)">
+<mask id="path-1-inside-1_102_2491" fill="white">
+<path d="M34.3723 113.738C36.0203 111.145 38.5557 110.422 41.1857 111.768C43.7528 113.114 46.2888 114.494 48.6975 116.103C51.1376 117.744 52.0574 120.142 50.8527 123.098C49.7756 125.757 48.4439 128.285 47.1447 130.847C46.3209 132.455 45.4646 133.999 44.5139 135.51C43.1196 137.71 41.0907 138.892 38.6506 139.089C36.8437 139.253 35.0688 139.286 32.8186 139.385C31.234 139.286 29.1743 139.221 27.1779 138.958C25.8151 138.761 24.5787 138.104 24.135 136.561C23.9448 135.838 23.976 135.017 24.1027 134.262C24.388 132.489 25.3075 130.978 26.0998 129.402C27.7162 126.151 29.3644 122.9 31.0441 119.682C32.09 117.679 33.1363 115.643 34.3723 113.738ZM122.913 111.479C125.31 110.626 127.233 111.217 128.747 113.384C129.851 114.959 130.766 116.699 131.649 118.406C132.879 120.704 134.045 123.035 135.212 125.399C136.473 127.927 137.735 130.487 138.934 133.081C139.218 133.705 139.343 134.493 139.374 135.183C139.501 137.021 138.429 138.433 136.6 138.827C135.56 139.057 134.455 139.155 133.383 139.221C132.279 139.287 131.144 139.254 130.04 139.254V139.385C128.085 139.254 126.098 139.188 124.174 138.958C121.588 138.695 119.665 137.185 118.404 134.854C116.417 131.309 114.587 127.665 112.789 124.02C112.348 123.102 112.127 122.018 112.032 121C111.812 118.735 112.947 117.158 114.618 116.042C116.321 114.893 118.088 113.876 119.854 112.858C120.831 112.333 121.841 111.84 122.913 111.479ZM79.382 25.1211C80.4893 23.965 81.7237 23.6679 82.926 24.3945C83.5586 24.7908 84.1917 25.352 84.5715 25.9795C85.5522 27.5648 86.4692 29.1835 87.3234 30.8349C88.5889 33.2459 89.791 35.7233 91.0246 38.167C92.8915 41.8994 94.7583 45.6322 96.6252 49.3642C98.0804 52.2709 99.5675 55.1445 101.023 58.0508C102.309 60.6271 103.607 63.2039 104.914 65.7802C106.243 68.4555 107.603 71.0976 108.932 73.7724C110.229 76.316 111.495 78.892 112.792 81.4355C114.437 84.7383 116.113 87.9755 117.696 91.3115C118.17 92.2364 118.486 93.26 118.771 94.2841C119.34 96.5632 118.581 98.4784 116.904 99.7998C115.386 100.989 113.773 101.946 112.159 102.904C109.312 104.588 106.433 106.207 103.585 107.825C100.58 109.543 97.5741 111.227 94.5686 112.945C91.816 114.531 89.0635 116.116 86.2795 117.636C84.761 118.494 83.1783 119.022 82.3244 119.022C79.572 118.99 77.8637 118.23 76.2502 117.305C73.1183 115.554 70.0177 113.771 66.9172 111.987C61.7499 109.037 56.593 106.075 51.4465 103.103C50.0864 102.343 48.7256 101.583 47.4602 100.691C46.6378 100.13 45.878 99.3705 45.2453 98.5781C44.043 97.0587 43.9478 95.2418 44.6438 93.4912C45.6245 91.0474 46.7956 88.6692 47.966 86.3242C49.706 82.7571 51.5091 79.256 53.3127 75.7216C55.4321 71.494 57.5843 67.2663 59.7356 63.0058C61.8868 58.7449 64.0383 54.4177 66.2209 50.124C68.056 46.4248 69.9541 42.7255 71.8205 39.0263C73.3076 36.0869 74.7626 33.0811 76.2814 30.1416C77.1671 28.3911 77.9897 26.5413 79.382 25.1211ZM81.4709 63.0713C77.0097 71.8899 72.5489 80.7423 68.0881 89.6269C69.2902 90.3205 70.4287 91.014 71.5676 91.6416C74.6682 93.425 77.7692 95.1756 80.8693 96.959C81.3755 97.2561 81.8182 97.256 82.3244 96.9922C85.1398 95.3735 87.9562 93.7553 90.8039 92.1367C92.2165 91.3222 93.6402 90.4968 95.0744 89.6601C94.2202 87.4146 81.9483 63.3412 81.4709 63.0713Z"/>
+</mask>
+<path d="M34.3723 113.738L35.2112 114.283L35.2163 114.275L34.3723 113.738ZM41.1857 111.768L41.6503 110.882L41.6413 110.877L41.1857 111.768ZM48.6975 116.103L49.2557 115.273L49.2529 115.271L48.6975 116.103ZM50.8527 123.098L49.9267 122.72L49.9259 122.722L50.8527 123.098ZM47.1447 130.847L48.0348 131.302L48.0366 131.299L47.1447 130.847ZM44.5139 135.51L45.3585 136.045L45.3602 136.042L44.5139 135.51ZM38.6506 139.089L38.5701 138.092L38.5603 138.093L38.6506 139.089ZM32.8186 139.385L32.7566 140.383L32.8094 140.386L32.8622 140.384L32.8186 139.385ZM27.1779 138.958L27.0348 139.948L27.0476 139.949L27.1779 138.958ZM24.135 136.561L23.1679 136.815L23.1708 136.826L23.1739 136.837L24.135 136.561ZM24.1027 134.262L25.089 134.427L25.09 134.421L24.1027 134.262ZM26.0998 129.402L26.9933 129.851L26.9952 129.848L26.0998 129.402ZM31.0441 119.682L30.1577 119.219L30.1576 119.219L31.0441 119.682ZM122.913 111.479L123.232 112.427L123.241 112.424L123.249 112.422L122.913 111.479ZM128.747 113.384L127.928 113.956L127.928 113.957L128.747 113.384ZM131.649 118.406L130.76 118.866L130.764 118.872L130.767 118.878L131.649 118.406ZM135.212 125.399L134.315 125.842L134.317 125.846L135.212 125.399ZM138.934 133.081L139.844 132.667L139.842 132.662L138.934 133.081ZM139.374 135.183L138.375 135.228L138.376 135.24L138.377 135.251L139.374 135.183ZM136.6 138.827L136.389 137.85L136.384 137.851L136.6 138.827ZM133.383 139.221L133.443 140.219L133.444 140.219L133.383 139.221ZM130.04 139.254L130.04 138.254L129.04 138.254V139.254H130.04ZM130.04 139.385L129.973 140.382L131.04 140.454V139.385H130.04ZM124.174 138.958L124.293 137.965L124.284 137.964L124.275 137.963L124.174 138.958ZM118.404 134.854L119.283 134.378L119.279 134.372L119.276 134.366L118.404 134.854ZM112.789 124.02L111.888 124.453L111.892 124.463L112.789 124.02ZM112.032 121L113.028 120.907L113.028 120.903L112.032 121ZM114.618 116.042L115.174 116.873L115.178 116.871L114.618 116.042ZM119.854 112.858L119.38 111.978L119.367 111.985L119.354 111.992L119.854 112.858ZM79.382 25.1211L80.0962 25.8212L80.1042 25.8128L79.382 25.1211ZM82.926 24.3945L83.4568 23.547L83.4501 23.5428L83.4432 23.5387L82.926 24.3945ZM84.5715 25.9795L83.716 26.4973L83.7211 26.5056L84.5715 25.9795ZM87.3234 30.8349L86.4352 31.2944L86.438 31.2997L87.3234 30.8349ZM91.0246 38.167L91.919 37.7196L91.9173 37.7163L91.0246 38.167ZM96.6252 49.3642L95.7309 49.8116L95.731 49.8119L96.6252 49.3642ZM101.023 58.0508L101.917 57.604L101.917 57.603L101.023 58.0508ZM104.914 65.7802L105.81 65.3354L105.806 65.3277L104.914 65.7802ZM108.932 73.7724L108.036 74.2173L108.041 74.2267L108.932 73.7724ZM112.792 81.4355L113.687 80.9897L113.683 80.9811L112.792 81.4355ZM117.696 91.3115L116.792 91.74L116.799 91.7541L116.806 91.7679L117.696 91.3115ZM118.771 94.2841L119.741 94.0417L119.738 94.0291L119.734 94.0167L118.771 94.2841ZM116.904 99.7998L117.521 100.587L117.523 100.585L116.904 99.7998ZM112.159 102.904L112.668 103.765L112.67 103.764L112.159 102.904ZM103.585 107.825L103.091 106.956L103.089 106.957L103.585 107.825ZM94.5686 112.945L94.0723 112.077L94.0695 112.079L94.5686 112.945ZM86.2795 117.636L85.8004 116.758L85.7939 116.762L85.7874 116.765L86.2795 117.636ZM82.3244 119.022L82.3125 120.022H82.3244V119.022ZM76.2502 117.305L76.7475 116.437L76.7381 116.432L76.2502 117.305ZM66.9172 111.987L67.4159 111.12L67.4131 111.119L66.9172 111.987ZM51.4465 103.103L51.9467 102.237L51.9404 102.233L51.9341 102.229L51.4465 103.103ZM47.4602 100.691L48.0361 99.8739L48.0302 99.8697L48.0241 99.8656L47.4602 100.691ZM45.2453 98.5781L44.4611 99.1986L44.4639 99.2021L45.2453 98.5781ZM44.6438 93.4912L43.7157 93.1187L43.7145 93.1217L44.6438 93.4912ZM47.966 86.3242L48.8608 86.7708L48.8648 86.7626L47.966 86.3242ZM53.3127 75.7216L54.2034 76.1762L54.2067 76.1698L53.3127 75.7216ZM59.7356 63.0058L60.6282 63.4566L60.6282 63.4565L59.7356 63.0058ZM66.2209 50.124L67.1124 50.5772L67.1167 50.5684L66.2209 50.124ZM71.8205 39.0263L70.9282 38.5749L70.9277 38.5759L71.8205 39.0263ZM76.2814 30.1416L77.1699 30.6006L77.1737 30.593L76.2814 30.1416ZM81.4709 63.0713L81.9631 62.2008L81.0514 61.6852L80.5786 62.6198L81.4709 63.0713ZM68.0881 89.6269L67.1944 89.1782L66.771 90.0215L67.5883 90.4931L68.0881 89.6269ZM71.5676 91.6416L72.0662 90.7747L72.0582 90.7702L72.0502 90.7657L71.5676 91.6416ZM80.8693 96.959L81.3756 96.0965L81.368 96.0921L80.8693 96.959ZM82.3244 96.9922L82.7867 97.8789L82.805 97.8694L82.8228 97.8591L82.3244 96.9922ZM90.8039 92.1367L91.2981 93.0061L91.3034 93.003L90.8039 92.1367ZM95.0744 89.6601L95.5783 90.5239L96.3104 90.0968L96.0091 89.3046L95.0744 89.6601ZM34.3723 113.738L35.2163 114.275C35.938 113.139 36.8002 112.492 37.6876 112.236C38.571 111.982 39.6004 112.08 40.7302 112.658L41.1857 111.768L41.6413 110.877C40.141 110.11 38.5876 109.896 37.1339 110.315C35.6841 110.732 34.4546 111.744 33.5283 113.202L34.3723 113.738ZM41.1857 111.768L40.7212 112.653C43.2833 113.997 45.7799 115.356 48.142 116.934L48.6975 116.103L49.2529 115.271C46.7976 113.631 44.2222 112.231 41.6503 110.882L41.1857 111.768ZM48.6975 116.103L48.1393 116.932C49.2217 117.66 49.8923 118.504 50.1915 119.418C50.4886 120.326 50.4576 121.418 49.9267 122.72L50.8527 123.098L51.7788 123.475C52.4525 121.822 52.564 120.237 52.0923 118.796C51.6227 117.362 50.6134 116.186 49.2557 115.273L48.6975 116.103ZM50.8527 123.098L49.9259 122.722C48.8688 125.332 47.5626 127.812 46.2529 130.394L47.1447 130.847L48.0366 131.299C49.3251 128.758 50.6823 126.182 51.7796 123.473L50.8527 123.098ZM47.1447 130.847L46.2546 130.391C45.4407 131.981 44.5988 133.497 43.6675 134.977L44.5139 135.51L45.3602 136.042C46.3304 134.501 47.2012 132.93 48.0348 131.302L47.1447 130.847ZM44.5139 135.51L43.6692 134.974C42.4434 136.909 40.6979 137.92 38.5701 138.092L38.6506 139.089L38.7311 140.086C41.4836 139.863 43.7957 138.511 45.3585 136.045L44.5139 135.51ZM38.6506 139.089L38.5603 138.093C36.7845 138.254 35.0572 138.286 32.7749 138.386L32.8186 139.385L32.8622 140.384C35.0803 140.287 36.903 140.251 38.7409 140.085L38.6506 139.089ZM32.8186 139.385L32.8805 138.387C31.2553 138.286 29.2593 138.223 27.3083 137.967L27.1779 138.958L27.0476 139.949C29.0894 140.218 31.2128 140.287 32.7566 140.383L32.8186 139.385ZM27.1779 138.958L27.3211 137.968C26.1833 137.804 25.3917 137.313 25.096 136.284L24.135 136.561L23.1739 136.837C23.7657 138.895 25.4469 139.718 27.0348 139.948L27.1779 138.958ZM24.135 136.561L25.102 136.306C24.962 135.774 24.9744 135.11 25.0889 134.427L24.1027 134.262L23.1165 134.096C22.9776 134.924 22.9276 135.902 23.1679 136.815L24.135 136.561ZM24.1027 134.262L25.09 134.421C25.3435 132.845 26.1496 131.53 26.9933 129.851L26.0998 129.402L25.2064 128.953C24.4654 130.427 23.4325 132.132 23.1154 134.103L24.1027 134.262ZM26.0998 129.402L26.9952 129.848C28.6093 126.601 30.2545 123.356 31.9307 120.144L31.0441 119.682L30.1576 119.219C28.4742 122.444 26.823 125.701 25.2044 128.957L26.0998 129.402ZM31.0441 119.682L31.9306 120.144C32.9832 118.128 34.0063 116.139 35.2111 114.283L34.3723 113.738L33.5334 113.194C32.2663 115.147 31.1967 117.229 30.1577 119.219L31.0441 119.682ZM122.913 111.479L123.249 112.422C124.298 112.048 125.147 112.023 125.855 112.251C126.564 112.479 127.26 113.001 127.928 113.956L128.747 113.384L129.567 112.811C128.721 111.6 127.698 110.743 126.468 110.347C125.237 109.951 123.925 110.058 122.578 110.537L122.913 111.479ZM128.747 113.384L127.928 113.957C128.988 115.471 129.875 117.154 130.76 118.866L131.649 118.406L132.537 117.947C131.656 116.244 130.713 114.448 129.566 112.81L128.747 113.384ZM131.649 118.406L130.767 118.878C131.989 121.161 133.15 123.48 134.315 125.842L135.212 125.399L136.109 124.957C134.941 122.591 133.768 120.247 132.53 117.934L131.649 118.406ZM135.212 125.399L134.317 125.846C135.578 128.372 136.834 130.921 138.026 133.501L138.934 133.081L139.842 132.662C138.636 130.054 137.369 127.483 136.107 124.953L135.212 125.399ZM138.934 133.081L138.024 133.495C138.233 133.955 138.347 134.601 138.375 135.228L139.374 135.183L140.373 135.137C140.339 134.385 140.202 133.454 139.844 132.667L138.934 133.081ZM139.374 135.183L138.377 135.251C138.425 135.954 138.244 136.521 137.924 136.941C137.605 137.362 137.099 137.697 136.389 137.85L136.6 138.827L136.81 139.805C137.93 139.563 138.875 138.995 139.516 138.152C140.159 137.308 140.45 136.249 140.372 135.114L139.374 135.183ZM136.6 138.827L136.384 137.851C135.423 138.063 134.382 138.158 133.322 138.223L133.383 139.221L133.444 140.219C134.528 140.153 135.696 140.051 136.816 139.804L136.6 138.827ZM133.383 139.221L133.323 138.222C132.259 138.286 131.184 138.254 130.04 138.254L130.04 139.254L130.04 140.254C131.105 140.254 132.299 140.287 133.443 140.219L133.383 139.221ZM130.04 139.254H129.04V139.385H130.04H131.04V139.254H130.04ZM130.04 139.385L130.107 138.387C128.106 138.253 126.182 138.191 124.293 137.965L124.174 138.958L124.055 139.951C126.013 140.185 128.065 140.255 129.973 140.382L130.04 139.385ZM124.174 138.958L124.275 137.963C122.08 137.74 120.418 136.476 119.283 134.378L118.404 134.854L117.524 135.33C118.911 137.894 121.097 139.651 124.073 139.953L124.174 138.958ZM118.404 134.854L119.276 134.366C117.303 130.845 115.483 127.22 113.686 123.578L112.789 124.02L111.892 124.463C113.691 128.109 115.531 131.773 117.531 135.343L118.404 134.854ZM112.789 124.02L113.691 123.588C113.32 122.816 113.117 121.861 113.028 120.907L112.032 121L111.037 121.093C111.137 122.174 111.376 123.388 111.888 124.453L112.789 124.02ZM112.032 121L113.028 120.903C112.853 119.114 113.706 117.854 115.174 116.873L114.618 116.042L114.063 115.21C112.188 116.463 110.77 118.356 111.037 121.097L112.032 121ZM114.618 116.042L115.178 116.871C116.846 115.745 118.582 114.745 120.353 113.725L119.854 112.858L119.354 111.992C117.594 113.007 115.796 114.041 114.059 115.213L114.618 116.042ZM119.854 112.858L120.327 113.739C121.285 113.224 122.238 112.762 123.232 112.427L122.913 111.479L122.594 110.532C121.445 110.919 120.378 111.441 119.38 111.978L119.854 112.858ZM79.382 25.1211L80.1042 25.8128C80.5647 25.332 80.9817 25.1037 81.3278 25.0296C81.6518 24.9602 82.0031 25.0052 82.4087 25.2503L82.926 24.3945L83.4432 23.5387C82.6466 23.0572 81.7795 22.8874 80.9089 23.074C80.0604 23.2558 79.3066 23.7541 78.6599 24.4294L79.382 25.1211ZM82.926 24.3945L82.3951 25.242C82.9423 25.5847 83.4417 26.0441 83.716 26.4973L84.5715 25.9795L85.427 25.4616C84.9417 24.6599 84.175 23.9969 83.4568 23.547L82.926 24.3945ZM84.5715 25.9795L83.7211 26.5056C84.6883 28.069 85.5926 29.6655 86.4352 31.2944L87.3234 30.8349L88.2116 30.3755C87.3457 28.7015 86.4162 27.0606 85.4219 25.4534L84.5715 25.9795ZM87.3234 30.8349L86.438 31.2997C87.6992 33.7024 88.8882 36.1539 90.1319 38.6176L91.0246 38.167L91.9173 37.7163C90.6938 35.2927 89.4786 32.7893 88.2089 30.3702L87.3234 30.8349ZM91.0246 38.167L90.1303 38.6143C91.9971 42.3466 93.8639 46.0796 95.7309 49.8116L96.6252 49.3642L97.5195 48.9168C95.6526 45.1849 93.7859 41.4522 91.919 37.7196L91.0246 38.167ZM96.6252 49.3642L95.731 49.8119C96.4604 51.2687 97.1974 52.7168 97.9327 54.1613C98.6686 55.6068 99.4026 57.0488 100.128 58.4985L101.023 58.0508L101.917 57.603C101.187 56.1464 100.45 54.6985 99.7151 53.254C98.9793 51.8085 98.2453 50.3664 97.5194 48.9166L96.6252 49.3642ZM101.023 58.0508L100.128 58.4975C101.415 61.0758 102.714 63.6547 104.023 66.2328L104.914 65.7802L105.806 65.3277C104.499 62.7532 103.203 60.1783 101.917 57.604L101.023 58.0508ZM104.914 65.7802L104.019 66.225C104.685 67.5665 105.359 68.899 106.031 70.2278C106.703 71.5576 107.374 72.8837 108.036 74.2173L108.932 73.7724L109.827 73.3276C109.161 71.9864 108.487 70.654 107.815 69.3252C107.143 67.9954 106.472 66.6693 105.81 65.3354L104.914 65.7802ZM108.932 73.7724L108.041 74.2267C108.687 75.4946 109.327 76.7712 109.968 78.0517C110.608 79.331 111.251 80.6142 111.901 81.8899L112.792 81.4355L113.683 80.9811C113.036 79.7133 112.397 78.4367 111.756 77.1563C111.116 75.877 110.473 74.5938 109.823 73.3182L108.932 73.7724ZM112.792 81.4355L111.897 81.8813C113.551 85.2032 115.215 88.415 116.792 91.74L117.696 91.3115L118.599 90.883C117.012 87.5359 115.323 84.2734 113.687 80.9897L112.792 81.4355ZM117.696 91.3115L116.806 91.7679C117.231 92.5962 117.525 93.5359 117.807 94.5516L118.771 94.2841L119.734 94.0167C119.448 92.9841 119.109 91.8766 118.585 90.8551L117.696 91.3115ZM118.771 94.2841L117.801 94.5266C118.271 96.408 117.666 97.9264 116.286 99.0144L116.904 99.7998L117.523 100.585C119.496 99.0304 120.41 96.7185 119.741 94.0417L118.771 94.2841ZM116.904 99.7998L116.288 99.0124C114.828 100.155 113.271 101.081 111.649 102.044L112.159 102.904L112.67 103.764C114.275 102.811 115.944 101.822 117.521 100.587L116.904 99.7998ZM112.159 102.904L111.65 102.044C108.812 103.722 105.944 105.334 103.091 106.956L103.585 107.825L104.079 108.695C106.921 107.08 109.811 105.455 112.668 103.765L112.159 102.904ZM103.585 107.825L103.089 106.957C101.588 107.815 100.087 108.664 98.5843 109.515C97.0818 110.365 95.5772 111.217 94.0723 112.077L94.5686 112.945L95.0648 113.813C96.5654 112.956 98.0664 112.106 99.5694 111.255C101.072 110.405 102.577 109.553 104.081 108.693L103.585 107.825ZM94.5686 112.945L94.0695 112.079C91.3151 113.665 88.5726 115.245 85.8004 116.758L86.2795 117.636L86.7586 118.513C89.5543 116.988 92.3168 115.396 95.0677 113.812L94.5686 112.945ZM86.2795 117.636L85.7874 116.765C85.0783 117.166 84.3582 117.487 83.7259 117.706C83.0725 117.932 82.5867 118.022 82.3244 118.022V119.022V120.022C82.9159 120.022 83.6485 119.849 84.3795 119.596C85.1317 119.336 85.9622 118.964 86.7716 118.506L86.2795 117.636ZM82.3244 119.022L82.3363 118.022C79.8076 117.992 78.2674 117.308 76.7475 116.437L76.2502 117.305L75.7529 118.172C77.46 119.151 79.3365 119.987 82.3125 120.022L82.3244 119.022ZM76.2502 117.305L76.7381 116.432C73.6125 114.685 70.5171 112.905 67.4159 111.12L66.9172 111.987L66.4185 112.854C69.5183 114.637 72.6242 116.424 75.7623 118.178L76.2502 117.305ZM66.9172 111.987L67.4131 111.119C62.2472 108.169 57.0917 105.208 51.9467 102.237L51.4465 103.103L50.9463 103.968C56.0943 106.942 61.2526 109.904 66.4213 112.856L66.9172 111.987ZM51.4465 103.103L51.9341 102.229C50.5661 101.465 49.2517 100.73 48.0361 99.8739L47.4602 100.691L46.8842 101.509C48.1996 102.436 49.6068 103.22 50.9589 103.976L51.4465 103.103ZM47.4602 100.691L48.0241 99.8656C47.3045 99.3741 46.6153 98.6911 46.0267 97.9541L45.2453 98.5781L44.4639 99.2021C45.1408 100.05 45.971 100.885 46.8962 101.517L47.4602 100.691ZM45.2453 98.5781L46.0295 97.9576C45.0903 96.7707 44.9826 95.3458 45.573 93.8606L44.6438 93.4912L43.7145 93.1217C42.913 95.1378 42.9958 97.3468 44.4611 99.1986L45.2453 98.5781ZM44.6438 93.4912L45.5718 93.8636C46.5356 91.4622 47.6896 89.1172 48.8608 86.7708L47.966 86.3242L47.0713 85.8776C45.9016 88.2212 44.7134 90.6327 43.7157 93.1187L44.6438 93.4912ZM47.966 86.3242L48.8648 86.7626C50.5997 83.2058 52.3973 79.7154 54.2034 76.1762L53.3127 75.7216L52.422 75.2671C50.6208 78.7966 48.8122 82.3083 47.0672 85.8858L47.966 86.3242ZM53.3127 75.7216L54.2067 76.1698C56.3253 71.9435 58.4748 67.7213 60.6282 63.4566L59.7356 63.0058L58.8429 62.5551C56.6938 66.8112 54.5388 71.0445 52.4187 75.2735L53.3127 75.7216ZM59.7356 63.0058L60.6282 63.4565C62.7844 59.1858 64.9293 54.8717 67.1123 50.5771L66.2209 50.124L65.3295 49.6708C63.1473 53.9637 60.9892 58.304 58.8429 62.5551L59.7356 63.0058ZM66.2209 50.124L67.1167 50.5684C68.95 46.8727 70.8425 43.1846 72.7133 39.4768L71.8205 39.0263L70.9277 38.5759C69.0656 42.2664 67.1619 45.9769 65.3251 49.6796L66.2209 50.124ZM71.8205 39.0263L72.7128 39.4777C74.2136 36.5111 75.6504 33.5412 77.1699 30.6006L76.2814 30.1416L75.393 29.6825C73.8747 32.621 72.4015 35.6626 70.9282 38.5749L71.8205 39.0263ZM76.2814 30.1416L77.1737 30.593C78.0967 28.7689 78.8404 27.102 80.0961 25.8211L79.382 25.1211L78.668 24.421C77.139 25.9806 76.2375 28.0134 75.3892 29.6901L76.2814 30.1416ZM81.4709 63.0713L80.5786 62.6198C76.1169 71.4394 71.6556 80.2927 67.1944 89.1782L68.0881 89.6269L68.9818 90.0756C73.4421 81.1919 77.9025 72.3403 82.3632 63.5227L81.4709 63.0713ZM68.0881 89.6269L67.5883 90.4931C68.7598 91.169 69.9375 91.8851 71.085 92.5174L71.5676 91.6416L72.0502 90.7657C70.9198 90.1428 69.8205 89.472 68.5878 88.7608L68.0881 89.6269ZM71.5676 91.6416L71.069 92.5084C72.6213 93.4013 74.1735 94.2858 75.7235 95.1691C77.2741 96.0527 78.8227 96.9352 80.3707 97.8258L80.8693 96.959L81.368 96.0921C79.8159 95.1993 78.2638 94.3148 76.7138 93.4314C75.1631 92.5478 73.6145 91.6653 72.0662 90.7747L71.5676 91.6416ZM80.8693 96.959L80.3631 97.8214C80.7289 98.036 81.133 98.178 81.5794 98.1858C82.0241 98.1935 82.4264 98.0667 82.7867 97.8789L82.3244 96.9922L81.8622 96.1054C81.7163 96.1815 81.6441 96.1866 81.6143 96.1861C81.5863 96.1856 81.516 96.179 81.3756 96.0965L80.8693 96.959ZM82.3244 96.9922L82.8228 97.8591C85.6383 96.2404 88.4528 94.6233 91.2981 93.0061L90.8039 92.1367L90.3098 91.2673C87.4597 92.8873 84.6413 94.5067 81.826 96.1252L82.3244 96.9922ZM90.8039 92.1367L91.3034 93.003C92.7174 92.1877 94.1425 91.3614 95.5783 90.5239L95.0744 89.6601L94.5706 88.7963C93.1378 89.6321 91.7156 90.4567 90.3044 91.2704L90.8039 92.1367ZM95.0744 89.6601L96.0091 89.3046C95.7735 88.6853 94.8162 86.7018 93.5515 84.1519C92.2712 81.5706 90.6404 78.3388 89.0219 75.17C87.4036 72.0014 85.7959 68.8923 84.5619 66.5567C83.9454 65.3898 83.4196 64.411 83.0314 63.7131C82.838 63.3655 82.6741 63.0789 82.5479 62.8709C82.4858 62.7686 82.4252 62.6726 82.3704 62.5938C82.3437 62.5555 82.3086 62.507 82.2683 62.4589C82.2571 62.4455 82.1451 62.3037 81.9631 62.2008L81.4709 63.0713L80.9787 63.9417C80.8751 63.8832 80.809 63.82 80.7887 63.8004C80.7608 63.7734 80.7424 63.7519 80.7354 63.7435C80.7213 63.7267 80.718 63.7208 80.7286 63.736C80.7483 63.7643 80.7838 63.8191 80.838 63.9084C80.9445 64.0838 81.0939 64.3443 81.2835 64.6852C81.6612 65.3642 82.1791 66.328 82.7935 67.491C84.0215 69.8153 85.6247 72.9154 87.2408 76.0797C88.8568 79.2436 90.4839 82.4681 91.7598 85.0406C93.0512 87.6444 93.9482 89.5122 94.1398 90.0157L95.0744 89.6601Z" fill="#606060" mask="url(#path-1-inside-1_102_2491)"/>
+</g>
+</svg>
diff --git a/src/webapp/Angor.Client/wwwroot/assets/js/hub-payment.js b/src/webapp/Angor.Client/wwwroot/assets/js/hub-payment.js
new file mode 100644
index 000000000..b78c31a3a
--- /dev/null
+++ b/src/webapp/Angor.Client/wwwroot/assets/js/hub-payment.js
@@ -0,0 +1,19 @@
+window.angorPayment = {
+    setTheme(theme) {
+        document.documentElement.dataset.paymentTheme = theme;
+        const url = new URL(location.href);
+        url.searchParams.set('theme', theme);
+        history.replaceState(history.state, '', url);
+    },
+    openMenu(dialog) {
+        if (!dialog.dataset.dismissBound) {
+            dialog.addEventListener('click', event => {
+                const bounds = dialog.getBoundingClientRect();
+                if (event.target === dialog && (event.clientX < bounds.left || event.clientX > bounds.right || event.clientY < bounds.top || event.clientY > bounds.bottom)) dialog.close();
+            });
+            dialog.dataset.dismissBound = 'true';
+        }
+        dialog.showModal();
+    },
+    closeMenu(dialog) { dialog.close(); }
+};
diff --git a/src/webapp/Angor.Client/wwwroot/index.html b/src/webapp/Angor.Client/wwwroot/index.html
index 78f0608e9..f51e26fd2 100644
--- a/src/webapp/Angor.Client/wwwroot/index.html
+++ b/src/webapp/Angor.Client/wwwroot/index.html
@@ -6,14 +6,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Angor</title>
     <base href="/" />
-    <link rel="icon" type="image/svg+xml" href="/assets/img/angor-icon.svg" />
-    <link rel="icon" type="image/png" href="/assets/img/favicon.png" />
-    <link rel="apple-touch-icon" sizes="512x512" href="/assets/img/icon-512.png" />
-    <link rel="apple-touch-icon" sizes="192x192" href="/assets/img/icon-192.png" />
+    <link rel="icon" type="image/png" href="/assets/img/favicon.png?v=hub" />
+    <link rel="apple-touch-icon" href="/assets/img/favicon.png?v=hub" />
     <link href="Angor.Client.styles.css" rel="stylesheet" />
     <link href="/assets/css/dashboard.css" rel="stylesheet" />
     <link href="/assets/css/app.css" rel="stylesheet" />
     <link href="/assets/css/invest.css" rel="stylesheet" />
+    <link href="/assets/css/hub-invest-controls.css" rel="stylesheet" />
+    <script>
+        // Apply the payment theme before the first frame and before WASM starts.
+        if (/^\/invest(?:view)?\//i.test(location.pathname)) {
+            document.documentElement.classList.add('hub-payment-page');
+            document.documentElement.dataset.paymentTheme = new URLSearchParams(location.search).get('theme') === 'light' ? 'light' : 'dark';
+        }
+    </script>
     <meta name="description" content="A P2P funding protocol built on Bitcoin and Nostr">
     <meta name="keywords" content="Angor, blockchain, crowdfunding, smart contracts, blockchain technology, bitcoin, nostr, decentralized applications, dApps, development, easy to use, secure">
     <meta name="author" content="Angor Team">
@@ -23,7 +29,7 @@
     <meta name="apple-mobile-web-app-title" content="Angor">
     <meta name="application-name" content="Angor">
     <meta name="msapplication-TileColor" content="#ffffff">
-    <meta name="msapplication-TileImage" content="/assets/img/icon-512.png">
+    <meta name="msapplication-TileImage" content="/assets/img/favicon.png?v=hub">
     <meta name="msapplication-config" content="/manifest.json">
     <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
     <meta http-equiv="Pragma" content="no-cache">
@@ -35,6 +41,11 @@
     <div id="app">
         <div class="loader-wrapper">
             <div class="loader"></div>
+            <div class="hub-boot-content" role="status" aria-live="polite">
+                <div class="hub-loading-mark"><img src="/assets/img/app-icon.png" alt="" /><span class="hub-loading-ring"></span></div>
+                <h1>Getting your payment ready</h1>
+                <p>Loading Angor...</p>
+            </div>
             <script>
                 (function() {
                     const theme = localStorage.getItem('theme');
@@ -60,6 +71,7 @@
     <script src="nostr-tools-methods.js?v=1" type="module"></script>
     <script src="/assets/js/appUpdate.js?v=1"></script>
     <script src="/assets/js/app.js?v=1"></script>
+    <script src="/assets/js/hub-payment.js?v=1"></script>
     <script src="_framework/blazor.webassembly.js?v=1"></script>
 </body>
 
diff --git a/src/webapp/Angor.Client/wwwroot/service-crypto.js b/src/webapp/Angor.Client/wwwroot/service-crypto.js
index 6dbd9e580..74521bad3 100644
--- a/src/webapp/Angor.Client/wwwroot/service-crypto.js
+++ b/src/webapp/Angor.Client/wwwroot/service-crypto.js
@@ -80,4 +80,19 @@ const dec = new TextDecoder();
 
 
 window.encryptData = encryptData;
-window.decryptData = decryptData;
\ No newline at end of file
+window.decryptData = decryptData;
+// BIP-39 uses PBKDF2-HMAC-SHA512 with 2048 iterations and NFKD text.
+// Web Crypto runs this asynchronously instead of blocking the WASM UI thread.
+window.deriveWalletSeed = async function (mnemonic, passphrase = '') {
+    const password = enc.encode(mnemonic.normalize('NFKD'));
+    const salt = enc.encode(('mnemonic' + (passphrase || '')).normalize('NFKD'));
+    try {
+        const key = await crypto.subtle.importKey('raw', password, 'PBKDF2', false, ['deriveBits']);
+        return new Uint8Array(await crypto.subtle.deriveBits({
+            name: 'PBKDF2', hash: 'SHA-512', iterations: 2048, salt
+        }, key, 512));
+    } finally {
+        password.fill(0);
+        salt.fill(0);
+    }
+};