1.4.0 Final Polish (#3335)

* adds pay button icon adds more update icons * reduces update app titles * capitalize PP * more icons notification icon update adds more * Truncate long titles in nav * Adjust "off" color state for the wallet/lightning * Theme switch alignment * Update store selector * adds more space in store selector span * Prevent form zoom on mobile Safari * updates lightning + settings view * updates store icon * adjusts notification icon * removes notifications setting button icon * Update status colors * Fix Lightning nav markup * Prevent icons from shrinking * Move main menu styles to css * Remove max-width container for content area * Update headlines * Use fixed header on mobile * Extract custom pills component * Form field update Co-authored-by: Dennis Reimann <mail@dennisreimann.de>
2026-02-19 13:14:21 +01:00 · 2022-01-24 18:07:52 -08:00
parent 06f2d4425c
commit c62018f984
35 changed files with 254 additions and 140 deletions
--- a/BTCPayServer/Components/MainNav/Default.cshtml
+++ b/BTCPayServer/Components/MainNav/Default.cshtml
@@ -59,14 +59,14 @@
                                        @if (isSetUp && scheme.WalletSupported)
                                        {
                                            <a asp-area="" asp-controller="UIWallets" asp-action="WalletTransactions" asp-route-walletId="@scheme.WalletId" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(WalletsNavPages), scheme.WalletId.ToString()) @ViewData.IsActivePage(StoreNavPages.OnchainSettings)" id="@($"StoreNav-Wallet{scheme.Crypto}")">
-                                                <span class="me-2 btcpay-status btcpay-status--@(scheme.Enabled ? "enabled" : "disabled")"></span>
+                                                <span class="me-2 btcpay-status btcpay-status--@(scheme.Enabled ? "enabled" : "pending")"></span>
                                                <span>@(Model.AltcoinsBuild ? $"{scheme.Crypto} " : "")Wallet</span>
                                            </a>
                                        }
                                        else
                                        {
                                            <a asp-area="" asp-controller="UIStores" asp-action="SetupWallet" asp-route-cryptoCode="@scheme.Crypto" asp-route-storeId="@Model.Store.Id" class="nav-link @ViewData.IsActivePage(StoreNavPages.OnchainSettings)" id="@($"StoreNav-Wallet{scheme.Crypto}")">
-                                                <span class="me-2 btcpay-status btcpay-status--@(scheme.Enabled ? "enabled" : "disabled")"></span>
+                                                <span class="me-2 btcpay-status btcpay-status--@(scheme.Enabled ? "enabled" : "pending")"></span>
                                                <span>@(Model.AltcoinsBuild ? $"{scheme.Crypto} " : "")Wallet</span>
                                            </a>
                                        }
@@ -79,14 +79,14 @@
                                        @if (isSetUp)
                                        {
                                            <a asp-area="" asp-controller="UIStores" asp-action="Lightning" asp-route-cryptoCode="@scheme.CryptoCode" asp-route-storeId="@Model.Store.Id" class="nav-link @ViewData.IsActivePage(StoreNavPages.Lightning) @ViewData.IsActivePage(StoreNavPages.LightningSettings)" id="@($"StoreNav-Lightning{scheme.CryptoCode}")">
-                                                <span class="me-2 btcpay-status btcpay-status--@(scheme.Enabled ? "enabled" : "disabled")"></span>
+                                                <span class="me-2 btcpay-status btcpay-status--@(scheme.Enabled ? "enabled" : "pending")"></span>
                                                <span>@(Model.AltcoinsBuild ? $"{scheme.CryptoCode} " : "")Lightning</span>
                                            </a>
                                        }
                                        else
                                        {
                                            <a asp-area="" asp-controller="UIStores" asp-action="SetupLightningNode" asp-route-cryptoCode="@scheme.CryptoCode" asp-route-storeId="@Model.Store.Id" class="nav-link @ViewData.IsActivePage(StoreNavPages.LightningSettings)" id="@($"StoreNav-Lightning{scheme.CryptoCode}")">
-                                                <span class="me-2 btcpay-status btcpay-status--disabled"></span>
+                                                <span class="me-2 btcpay-status btcpay-status--@(scheme.Enabled ? "enabled" : "pending")"></span>
                                                <span>@(Model.AltcoinsBuild ? $"{scheme.CryptoCode} " : "")Lightning</span>
                                            </a>
                                        }
@@ -114,25 +114,25 @@
                                    </li>
                                    <li class="nav-item" permission="@Policies.CanModifyStoreSettings">
                                        <a asp-area="" asp-controller="UIPaymentRequest" asp-action="GetPaymentRequests" asp-route-storeId="@Model.Store.Id" class="nav-link js-scroll-trigger @ViewData.IsActiveCategory(typeof(PaymentRequestsNavPages))" id="StoreNav-PaymentRequests">
-                                            <vc:icon symbol="payment-1"/>
+                                            <vc:icon symbol="payment-requests"/>
                                            <span>Requests</span>
                                        </a>
                                    </li>
                                    <li class="nav-item" permission="@Policies.CanViewStoreSettings">
                                        <a asp-area="" asp-controller="UIStorePullPayments" asp-action="PullPayments" asp-route-storeId="@Model.Store.Id" class="nav-link @ViewData.IsActivePage(StoreNavPages.PullPayments)" id="StoreNav-PullPayments">
-                                            <vc:icon symbol="payment-2"/>
+                                            <vc:icon symbol="pull-payments"/>
                                            <span>Pull Payments</span>
                                        </a>
                                    </li>
                                    <li class="nav-item" permission="@Policies.CanViewStoreSettings">
                                        <a asp-area="" asp-controller="UIStorePullPayments" asp-action="Payouts" asp-route-storeId="@Model.Store.Id" class="nav-link @ViewData.IsActivePage(StoreNavPages.Payouts)" id="StoreNav-Payouts">
-                                            <vc:icon symbol="payment-2"/>
+                                            <vc:icon symbol="payouts"/>
                                            <span>Payouts</span>
                                        </a>
                                    </li>
                                    <li class="nav-item" permission="@Policies.CanModifyStoreSettings">
                                        <a asp-area="" asp-controller="UIStores" asp-action="PayButton" asp-route-storeId="@Model.Store.Id" class="nav-link @ViewData.IsActivePage(StoreNavPages.PayButton)" id="StoreNav-PayButton">
-                                            <vc:icon symbol="payment-2"/>
+                                            <vc:icon symbol="pay-button"/>
                                            <span>Pay Button</span>
                                        </a>
                                    </li>
@@ -252,13 +252,11 @@
                    }
                    <li class="border-top py-1 px-3">
                        <a asp-area="" asp-controller="UIManage" asp-action="Index" class="nav-link @ViewData.IsActiveCategory(typeof(ManageNavPages))" id="Nav-ManageAccount">
-                            <vc:icon symbol="account"/>
-                            <span class="text-truncate" style="max-width:195px">Manage Account</span>
+                            <span>Manage Account</span>
                        </a>
                    </li>
                    <li class="border-top py-1 px-3">
                        <a asp-area="" asp-controller="UIAccount" asp-action="Logout" class="nav-link text-danger" id="Nav-Logout">
-                            <i class="fa fa-sign-out"></i>
                            <span>Logout</span>
                        </a>
                    </li>
--- a/BTCPayServer/Components/StoreSelector/Default.cshtml
+++ b/BTCPayServer/Components/StoreSelector/Default.cshtml
@@ -38,7 +38,11 @@ else
    @if (Model.Options.Count > 0)
    {
        <div id="StoreSelectorDropdown" class="dropdown only-for-js">
-            <button id="StoreSelectorToggle" class="btn btn-secondary dropdown-toggle rounded-pill @(Model.CurrentStoreId == null ? "text-secondary" : "")" type="button" data-bs-toggle="dropdown" aria-expanded="false">@(Model.CurrentStoreId == null ? "Select Store" : Model.CurrentDisplayName)</button>
+            <button id="StoreSelectorToggle" class="btn btn-secondary dropdown-toggle rounded-pill px-3 @(Model.CurrentStoreId == null ? "text-secondary" : "")" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+                <vc:icon symbol="store"/>
+                <span>@(Model.CurrentStoreId == null ? "Select Store" : Model.CurrentDisplayName)</span>
+                <vc:icon symbol="caret-down"/>
+            </button>
            <ul id="StoreSelectorMenu" class="dropdown-menu" aria-labelledby="StoreSelectorToggle">
                @foreach (var option in Model.Options)
                {
--- a/BTCPayServer/Components/ThemeSwitch/Default.cshtml
+++ b/BTCPayServer/Components/ThemeSwitch/Default.cshtml
@@ -5,5 +5,5 @@
        <path class="btcpay-theme-switch-dark" transform="translate(3 3)" d="M2.72 0A3.988 3.988 0 000 3.78c0 2.21 1.79 4 4 4 1.76 0 3.25-1.14 3.78-2.72-.4.13-.83.22-1.28.22-2.21 0-4-1.79-4-4 0-.45.08-.88.22-1.28z"/>
        <path class="btcpay-theme-switch-light" transform="translate(3 3)" d="M4 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 0 4 0zM1.5 1c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM.5 3.5c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm7 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM1.5 6c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zm5 0c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5-.22-.5-.5-.5zM4 7c-.28 0-.5.22-.5.5s.22.5.5.5.5-.22.5-.5S4.28 7 4 7z"/>
    </svg>
-    <span class="d-inline-block"><span class="btcpay-theme-switch-dark">Dark theme</span><span class="btcpay-theme-switch-light">Light theme</span></span>
+    <span class="btcpay-theme-switch-dark">Dark theme</span><span class="btcpay-theme-switch-light">Light theme</span>
 </button>
--- a/BTCPayServer/Views/LNURLAuth/Create.cshtml
+++ b/BTCPayServer/Views/LNURLAuth/Create.cshtml
@@ -14,12 +14,12 @@
 <p>Scan the QR code with your Lightning wallet to link it to your user account.</p>

 <div id="info-message" class="d-inline-block">
-    <ul class="nav nav-pills justify-content-center my-2">
+    <ul class="nav justify-content-center my-2">
        @for (int i = 0; i < formats.Count; i++)
        {
            var mode = formats.ElementAt(i);
            <li class="nav-item">
-                <a class="nav-link @(i == 0 ? "active" : "")"
+                <a class="btcpay-pill @(i == 0 ? "active" : "")"
                   data-bs-toggle="tab" data-bs-target="#@mode.Key" role="tab"
                   href="#">
                    @mode.Key
--- a/BTCPayServer/Views/Shared/_Layout.cshtml
+++ b/BTCPayServer/Views/Shared/_Layout.cshtml
@@ -22,7 +22,7 @@
 </head>
 <body class="d-flex flex-column flex-lg-row min-vh-100">
 <header id="mainMenu" class="btcpay-header d-flex flex-column">
-    <div id="mainMenuHead" class="d-flex flex-lg-wrap align-items-center justify-content-between py-2 px-3 py-lg-3 px-lg-4">
+    <div id="mainMenuHead">
        <vc:store-selector />
        @if (_signInManager.IsSignedIn(User))
        {
@@ -61,9 +61,7 @@
        </div>
    }
    <section>
-        <div class="container">
-            @RenderBody()
-        </div>
+        @RenderBody()
    </section>
    
    <partial name="_Footer"/>
--- a/BTCPayServer/Views/UIAccount/LoginWithLNURLAuth.cshtml
+++ b/BTCPayServer/Views/UIAccount/LoginWithLNURLAuth.cshtml
@@ -13,12 +13,12 @@
            <div class="col-lg-12 section-heading">
                <h2>LNURL Auth</h2>
                <div class="align-items-center">
-                    <ul class="nav nav-pills justify-content-center my-2">
+                    <ul class="nav justify-content-center my-2">
                        @for (int i = 0; i < formats.Count; i++)
                        {
                            var mode = formats.ElementAt(i);
                            <li class="nav-item">
-                                <a class="nav-link @(i == 0 ? "active" : "")"
+                                <a class="btcpay-pill @(i == 0 ? "active" : "")"
                                   data-bs-toggle="tab" data-bs-target="#@mode.Key" role="tab"
                                   href="#">
                                    @mode.Key
--- a/BTCPayServer/Views/UIApps/CreateApp.cshtml
+++ b/BTCPayServer/Views/UIApps/CreateApp.cshtml
@@ -9,7 +9,7 @@

 <partial name="_StatusMessage" />

-<h2 class="mb-4">@ViewData["Title"]</h2>
+<h2 class="mt-1 mb-4">@ViewData["Title"]</h2>

 <div class="row">
    <div class="col-lg-6">
--- a/BTCPayServer/Views/UIApps/UpdateCrowdfund.cshtml
+++ b/BTCPayServer/Views/UIApps/UpdateCrowdfund.cshtml
@@ -2,7 +2,7 @@
@using System.Globalization
@model UpdateCrowdfundViewModel
@{
-    ViewData.SetActivePage(AppsNavPages.Update, $"Update Crowdfund: {Model.AppName}", Model.AppId);
+    ViewData.SetActivePage(AppsNavPages.Update, "Update Crowdfund", Model.AppId);
 }

@section PageHeadContent {
@@ -16,7 +16,7 @@

 <partial name="_StatusMessage" />

-<h2 class="mb-4">@ViewData["Title"]</h2>
+<h2 class="mt-1 mb-4">@ViewData["Title"]</h2>

 <form method="post">
    <input type="hidden" asp-for="StoreId" />
--- a/BTCPayServer/Views/UIApps/UpdatePointOfSale.cshtml
+++ b/BTCPayServer/Views/UIApps/UpdatePointOfSale.cshtml
@@ -2,12 +2,12 @@
@addTagHelper *, BundlerMinifier.TagHelpers
@model UpdatePointOfSaleViewModel
@{
-    ViewData.SetActivePage(AppsNavPages.Update, $"Update Point of Sale: {Model.AppName}", Model.Id);
+    ViewData.SetActivePage(AppsNavPages.Update, "Update Point of Sale", Model.Id);
 }

 <partial name="_StatusMessage" />

-<h2 class="mb-4">@ViewData["Title"]</h2>
+<h2 class="mt-1 mb-4">@ViewData["Title"]</h2>

 <form method="post">
    <input type="hidden" asp-for="StoreId" />
--- a/BTCPayServer/Views/UIInvoice/CreateInvoice.cshtml
+++ b/BTCPayServer/Views/UIInvoice/CreateInvoice.cshtml
@@ -27,7 +27,7 @@

 <partial name="_StatusMessage" />

-<h2 class="mb-4">@ViewData["Title"]</h2>
+<h2 class="mt-1 mb-4">@ViewData["Title"]</h2>

 <div class="row">
    <div class="col-lg-6">
--- a/BTCPayServer/Views/UILightning/_Nav.cshtml
+++ b/BTCPayServer/Views/UILightning/_Nav.cshtml
@@ -1,8 +1,10 @@
@using BTCPayServer.Client
@using BTCPayServer.Views.Stores
@using BTCPayServer.Abstractions.Extensions
-<nav id="SectionNav" class="nav">
-    <a class="nav-link @ViewData.IsActivePage(StoreNavPages.Lightning)" asp-controller="UIStores" asp-action="Lightning" asp-route-storeId="@Context.GetRouteValue("storeId")" asp-route-cryptoCode="@Context.GetRouteValue("cryptoCode")" id="SectionNav-Lightning" permission="@Policies.CanModifyStoreSettings">Lightning</a>
-    <a class="nav-link @ViewData.IsActivePage(StoreNavPages.LightningSettings)" asp-controller="UIStores" asp-action="LightningSettings" asp-route-storeId="@Context.GetRouteValue("storeId")" asp-route-cryptoCode="@Context.GetRouteValue("cryptoCode")" id="SectionNav-LightningSettings" permission="@Policies.CanModifyStoreSettings">Settings</a>
-    <vc:ui-extension-point location="lightning-nav" model="@Model"/>
+<nav id="SectionNav">
+    <div class="nav">
+        <a class="nav-link @ViewData.IsActivePage(StoreNavPages.Lightning)" asp-controller="UIStores" asp-action="Lightning" asp-route-storeId="@Context.GetRouteValue("storeId")" asp-route-cryptoCode="@Context.GetRouteValue("cryptoCode")" id="SectionNav-Lightning" permission="@Policies.CanModifyStoreSettings">Lightning</a>
+        <a class="nav-link @ViewData.IsActivePage(StoreNavPages.LightningSettings)" asp-controller="UIStores" asp-action="LightningSettings" asp-route-storeId="@Context.GetRouteValue("storeId")" asp-route-cryptoCode="@Context.GetRouteValue("cryptoCode")" id="SectionNav-LightningSettings" permission="@Policies.CanModifyStoreSettings">Settings</a>
+        <vc:ui-extension-point location="lightning-nav" model="@Model"/>
+    </div>
 </nav>
--- a/BTCPayServer/Views/UILightningLikePayout/ConfirmLightningPayout.cshtml
+++ b/BTCPayServer/Views/UILightningLikePayout/ConfirmLightningPayout.cshtml
@@ -5,7 +5,7 @@
    var cryptoCode = Context.GetRouteValue("cryptoCode");
 }

-<h2 class="mb-4">@ViewData["Title"]</h2>
+<h2 class="mt-1 mb-4">@ViewData["Title"]</h2>
 <div class="row">
    <div class="col-md-12">
        <ul class="list-group">
--- a/BTCPayServer/Views/UILightningLikePayout/LightningPayoutResult.cshtml
+++ b/BTCPayServer/Views/UILightningLikePayout/LightningPayoutResult.cshtml
@@ -5,7 +5,7 @@
    ViewData["Title"] = "Lightning Payout Result";
 }

-<h2 class="mb-4">@ViewData["Title"]</h2>
+<h2 class="mt-1 mb-4">@ViewData["Title"]</h2>
@foreach (var item in Model)
 {
    <div class="alert alert-@(item.Result == PayResult.Ok ? "success" : "danger") d-flex justify-content-between align-items-center mb-3" role="alert">
--- a/BTCPayServer/Views/UIManage/_Nav.cshtml
+++ b/BTCPayServer/Views/UIManage/_Nav.cshtml
@@ -1,4 +1,5 @@
@inject SignInManager<ApplicationUser> SignInManager
+<h2 class="mt-1 mb-4">Account Settings</h2>
 <nav id="SectionNav">
    <div class="nav">
        <a id="SectionNav-@ManageNavPages.Index.ToString()" class="nav-link @ViewData.IsActivePage(ManageNavPages.Index)" asp-controller="UIManage" asp-action="Index">Account</a>
--- a/BTCPayServer/Views/UINotifications/Index.cshtml
+++ b/BTCPayServer/Views/UINotifications/Index.cshtml
@@ -8,7 +8,6 @@
 <div class="d-flex flex-wrap align-items-center justify-content-between mb-2">
    <h2>@ViewData["Title"]</h2>
    <a id="NotificationSettings" asp-controller="UIManage" asp-action="NotificationSettings" class="btn btn-secondary">
-        <span class="fa fa-cog"></span>
        Settings                
    </a>
 </div>
--- a/BTCPayServer/Views/UIPaymentRequest/EditPaymentRequest.cshtml
+++ b/BTCPayServer/Views/UIPaymentRequest/EditPaymentRequest.cshtml
@@ -14,8 +14,11 @@
    <partial name="_ValidationScriptsPartial" />
    <bundle name="wwwroot/bundles/payment-request-admin-bundle.min.js" asp-append-version="true"></bundle>
 }
+
 <partial name="_StatusMessage" />
-<h2 class="mb-4">@ViewData["Title"]</h2>
+
+<h2 class="mt-1 mb-4">@ViewData["Title"]</h2>
+
 <form method="post" action="@Url.Action("EditPaymentRequest", "UIPaymentRequest", new { storeId = Model.StoreId, payReqId = Model.Id }, Context.Request.Scheme)">
    <div class="row">
        <div class="col-lg-6">
--- a/BTCPayServer/Views/UIPublicLightningNodeInfo/ShowLightningNodeInfo.cshtml
+++ b/BTCPayServer/Views/UIPublicLightningNodeInfo/ShowLightningNodeInfo.cshtml
@@ -43,14 +43,17 @@
                        </h3>
                        @if (Model.Available)
                        {
-                            @if (Model.NodeInfo.Length > 1)
+                            @if (Model.NodeInfo.Length > 0)
                            {
-                                <ul class="nav nav-pills justify-content-center mt-4" id="nodeInfo-tab" role="tablist">
+                                <ul class="nav justify-content-center mt-4" id="nodeInfo-tab" role="tablist">
                                    @for (int i = 0; i < Model.NodeInfo.Length; i++)
                                    {
                                        var nodeInfo = Model.NodeInfo[i];
                                        <li class="nav-item" role="presentation">
-                                            <button class="nav-link w-100px @(i == 0 ? "active" : "")" id="nodeInfo-tab-@nodeInfo.Id" data-bs-toggle="pill" data-bs-target="#nodeInfo-@nodeInfo.Id" type="button" role="tab" aria-controls="nodeInfo-@nodeInfo.Id" aria-selected="true">@(Model.NodeInfo[i].IsTor ? "Tor" : "Clearnet")</button>
+                                            <button class="btcpay-pill @(i == 0 ? "active" : "")" id="nodeInfo-tab-@nodeInfo.Id" data-bs-toggle="pill" data-bs-target="#nodeInfo-@nodeInfo.Id" type="button" role="tab" aria-controls="nodeInfo-@nodeInfo.Id" aria-selected="true">@(Model.NodeInfo[i].IsTor ? "Tor" : "Clearnet")</button>
+                                        </li>
+                                        <li class="nav-item" role="presentation">
+                                            <button class="btcpay-pill @(i == 0 ? "" : "")" id="nodeInfo-tab-@nodeInfo.Id" data-bs-toggle="pill" data-bs-target="#nodeInfo-@nodeInfo.Id" type="button" role="tab" aria-controls="nodeInfo-@nodeInfo.Id" aria-selected="true">@(Model.NodeInfo[i].IsTor ? "Tor" : "Clearnet")</button>
                                        </li>
                                    }
                                </ul>
--- a/BTCPayServer/Views/UIServer/CLightningRestServices.cshtml
+++ b/BTCPayServer/Views/UIServer/CLightningRestServices.cshtml
@@ -3,7 +3,7 @@
    ViewData.SetActivePage(ServerNavPages.Services, $"C-Lightning {Model.ConnectionType}");
 }

-<h2 class="mb-4">@ViewData["Title"]</h2>
+<h2 class="mt-1 mb-4">@ViewData["Title"]</h2>

@if (!ViewContext.ModelState.IsValid)
 {
--- a/BTCPayServer/Views/UIServer/_Nav.cshtml
+++ b/BTCPayServer/Views/UIServer/_Nav.cshtml
@@ -1,6 +1,6 @@
@using BTCPayServer.Configuration
-@inject BTCPayServerOptions BTCPayServerOptions
-
+@inject BTCPayServerOptions _btcPayServerOptions
+<h2 class="mt-1 mb-4">Server Settings</h2>
 <nav id="SectionNav">
    <div class="nav">
        <a asp-controller="UIServer" id="SectionNav-@ServerNavPages.Users" class="nav-link @ViewData.IsActivePage(ServerNavPages.Users)" asp-action="ListUsers">Users</a>
@@ -8,7 +8,7 @@
        <a asp-controller="UIServer" id="SectionNav-@ServerNavPages.Policies" class="nav-link @ViewData.IsActivePage(ServerNavPages.Policies)" asp-action="Policies">Policies</a>
        <a asp-controller="UIServer" id="SectionNav-@ServerNavPages.Services" class="nav-link @ViewData.IsActivePage(ServerNavPages.Services)" asp-action="Services">Services</a>
        <a asp-controller="UIServer" id="SectionNav-@ServerNavPages.Theme" class="nav-link @ViewData.IsActivePage(ServerNavPages.Theme)" asp-action="Theme">Theme</a>
-        @if (BTCPayServerOptions.DockerDeployment)
+        @if (_btcPayServerOptions.DockerDeployment)
        {
            <a asp-controller="UIServer" id="SectionNav-@ServerNavPages.Maintenance" class="nav-link @ViewData.IsActivePage(ServerNavPages.Maintenance)" asp-action="Maintenance">Maintenance</a>
        }
--- a/BTCPayServer/Views/UIStorePullPayments/NewPullPayment.cshtml
+++ b/BTCPayServer/Views/UIStorePullPayments/NewPullPayment.cshtml
@@ -7,10 +7,10 @@

 <partial name="_StatusMessage" />

+<h2 class="mt-1 mb-4">@ViewData["Title"]</h2>
+
 <div class="row">
    <div class="col-md-6">
-        <h2 class="mb-3">@ViewData["Title"]</h2>
-
        <form method="post"
              asp-route-walletId="@Context.GetRouteValue("walletId")"
              asp-action="NewPullPayment">
--- a/BTCPayServer/Views/UIStorePullPayments/Payouts.cshtml
+++ b/BTCPayServer/Views/UIStorePullPayments/Payouts.cshtml
@@ -55,7 +55,7 @@
    <input type="hidden" asp-for="PaymentMethodId" />
    <input type="hidden" asp-for="PayoutState" />
    <div class="d-flex justify-content-between mb-4">
-        <ul class="nav nav-pills mb-1">
+        <ul class="nav mb-1">
            @foreach (var state in Model.PaymentMethods)
            {
                <li class="nav-item py-0">
@@ -63,7 +63,7 @@
                       asp-route-payoutState="@Model.PayoutState"
                       asp-route-paymentMethodId="@state.ToString()"
                       asp-route-pullPaymentId="@Model.PullPaymentId"
-                       class="nav-link me-1 @(state.ToString() == Model.PaymentMethodId ? "active" : "")"
+                       class="btcpay-pill @(state.ToString() == Model.PaymentMethodId ? "active" : "")"
                       id="@state.ToString()-view"
                       role="tab">@state.ToPrettyString()</a>
                </li>
--- a/BTCPayServer/Views/UIStorePullPayments/PullPayments.cshtml
+++ b/BTCPayServer/Views/UIStorePullPayments/PullPayments.cshtml
@@ -3,7 +3,7 @@
@using BTCPayServer.Client
@model BTCPayServer.Models.WalletViewModels.PullPaymentsModel
@{
-    ViewData.SetActivePage(StoreNavPages.PullPayments, "Pull payments", Context.GetStoreData().Id);
+    ViewData.SetActivePage(StoreNavPages.PullPayments, "Pull Payments", Context.GetStoreData().Id);
    var nextStartDateSortOrder = (string)ViewData["NextStartSortOrder"];
    string startDateSortOrder = null;
    switch (nextStartDateSortOrder)
--- a/BTCPayServer/Views/UIStores/Dashboard.cshtml
+++ b/BTCPayServer/Views/UIStores/Dashboard.cshtml
@@ -29,7 +29,7 @@

 <partial name="_StatusMessage" />

-<h2>@ViewData["Title"]</h2>
+<h2 class="mt-1 mb-3">@ViewData["Title"]</h2>

@if (isReady)
 {
--- a/BTCPayServer/Views/UIStores/Lightning.cshtml
+++ b/BTCPayServer/Views/UIStores/Lightning.cshtml
@@ -8,13 +8,13 @@
 }

 <div class="mb-5">
-    <h4 class="mb-3">@ViewData["Title"]</h4>
+    <h3 class="mb-3">@ViewData["Title"]</h3>
    <div class="mb-3">
-        <span class="me-2">@Model.LightningNodeType Node</span>
+        <span class="me-3">@Model.LightningNodeType Node</span>
        
        @if (Model.LightningNodeType != LightningNodeType.Internal)
        {
-            <span class="me-2">
+            <span class="me-3">
                @if (LightningConnectionString.TryParse(Model.ConnectionString, out var cs))
                {
                    @typeof(LightningConnectionType).DisplayName(cs.ConnectionType.ToString())
@@ -27,7 +27,7 @@
            </span>
        }

-        <a class="text-secondary"
+        <a
           asp-controller="UIPublicLightningNodeInfo"
           asp-action="ShowLightningNodeInfo"
           asp-route-cryptoCode="@Model.CryptoCode"
@@ -40,7 +40,7 @@
    @if (Model.Services != null && Model.Services.Any())
    {
        <div permission="@Policies.CanModifyServerSettings" class="mt-4">
-            <h5 class="mb-3">Services</h5>
+            <h3 class="mb-3">Services</h3>
            <div id="Services" class="services-list">
                @foreach (var service in Model.Services)
                {
--- a/BTCPayServer/Views/UIStores/LightningSettings.cshtml
+++ b/BTCPayServer/Views/UIStores/LightningSettings.cshtml
@@ -9,12 +9,12 @@
 <div class="row">
    <div class="col-lg-10 col-xl-9">
        <div class="mb-5">
-            <h4 class="mb-3">@ViewData["Title"]</h4>
+            <h3 class="mb-3">@ViewData["Title"]</h3>
            <div class="text-break mb-3">
-                <span class="me-2">@Model.LightningNodeType Node</span>
+                <span class="me-3">@Model.LightningNodeType Node</span>
                @if (Model.LightningNodeType != LightningNodeType.Internal)
                {
-                    <span class="me-2">
+                    <span class="me-3">
                        @if (LightningConnectionString.TryParse(Model.ConnectionString, out var cs))
                        {
                            @typeof(LightningConnectionType).DisplayName(cs.ConnectionType.ToString())
@@ -27,7 +27,7 @@
                    </span>
                }

-                <a class="text-secondary me-2"
+                <a class="me-3"
                   asp-controller="UIPublicLightningNodeInfo"
                   asp-action="ShowLightningNodeInfo"
                   asp-route-cryptoCode="@Model.CryptoCode"
@@ -35,7 +35,7 @@
                   target="_blank">
                    Public Node Info
                </a>
-                <a asp-controller="UIStores" asp-action="SetupLightningNode" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" id="SetupLightningNodeLink" class="text-secondary">
+                <a asp-controller="UIStores" asp-action="SetupLightningNode" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="@Model.CryptoCode" id="SetupLightningNodeLink">
                    Change connection
                </a>
            </div>
@@ -44,7 +44,7 @@
                  asp-action="SetLightningNodeEnabled"
                  asp-route-cryptoCode="@Model.CryptoCode"
                  asp-route-storeId="@Model.StoreId"
-                  class="d-flex align-items-center"
+                  class="d-flex align-items-center mt-4"
                  style="min-width:7rem">
                <button type="submit" class="btcpay-toggle me-2 @if (Model.Enabled) { @("btcpay-toggle--active") }" name="Enabled" value="@(Model.Enabled ? "false" : "true")" id="@($"{Model.CryptoCode}LightningEnabled")">@(Model.Enabled ? "Disable" : "Enable")</button>
                <span>
@@ -54,7 +54,7 @@
            
            <form method="post" class="mt-n2 text-center">
                <div class="text-start">
-                    <h4 class="mt-5 mb-3">Payment</h4>
+                    <h3 class="mt-5 mb-3">Payment</h3>
                    <div class="form-check my-1">
                        <input asp-for="LightningAmountInSatoshi" type="checkbox" class="form-check-input"/>
                        <label asp-for="LightningAmountInSatoshi" class="form-check-label"></label>
@@ -77,7 +77,7 @@
                        </p>
                    </div>
                    
-                    <h4 class="mt-5 mb-3" id="ln-url">LNURL</h4>
+                    <h3 class="mt-5 mb-3" id="ln-url">LNURL</h3>
                    <div class="d-flex align-items-center">
                        <input asp-for="LNURLEnabled" type="checkbox" class="btcpay-toggle me-2" data-bs-toggle="collapse" data-bs-target="#LNURLSettings" aria-expanded="@Model.LNURLEnabled" aria-controls="LNURLSettings"/>
                        <label asp-for="LNURLEnabled" class="form-label mb-0 me-1"></label>
--- a/BTCPayServer/Views/UIStores/Payment.cshtml
+++ b/BTCPayServer/Views/UIStores/Payment.cshtml
@@ -29,7 +29,7 @@
                <a href="https://docs.btcpayserver.org/FAQ/Stores/#add-network-fee-to-invoice-vary-with-mining-fees" target="_blank" rel="noreferrer noopener">
                    <span class="fa fa-question-circle-o text-secondary" title="More information..."></span>
                </a>
-                <select asp-for="NetworkFeeMode" class="form-select">
+                <select asp-for="NetworkFeeMode" class="form-select w-auto">
                    <option value="MultiplePaymentsOnly">... only if the customer makes more than one payment for the invoice</option>
                    <option value="Always">... on every payment</option>
                    <option value="Never">Never add network fee</option>
--- a/BTCPayServer/Views/UIStores/SetupLightningNode.cshtml
+++ b/BTCPayServer/Views/UIStores/SetupLightningNode.cshtml
@@ -26,34 +26,6 @@
            color: var(--btcpay-warning);
        }
        #save { min-width: 7rem; }
-        #LightningNodeTypeTablist input { display: none; }
-        #LightningNodeTypeTablist input:checked + label {
-            color: var(--btcpay-body-text-active);
-            background: var(--btcpay-body-bg-active);
-            border-color: var(--btcpay-body-bg-active);
-        }
-        #LightningNodeTypeTablist label {
-            display: inline-block;
-            padding: .75rem 2rem;
-            color: var(--btcpay-body-link);
-            font-weight: var(--btcpay-font-weight-semibold);
-            border-radius: 1.5rem;
-            border: 1px solid var(--btcpay-secondary-border);
-            cursor: pointer;
-            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-        }
-        #LightningNodeTypeTablist input:not(:checked):not([disabled]) + label:hover {
-            border-color: var(--btcpay-secondary-border-hover);
-        }
-        #LightningNodeTypeTablist input[disabled] + label {
-            color: var(--btcpay-body-text-muted);
-            border-color: var(--btcpay-secondary-border);
-            background: transparent;
-            opacity: .5;
-        }
-        #LightningNodeTypeTablist label + input + label {
-            margin-left: var(--btcpay-space-m);
-        }
        #LightningNodeTypeTabs ul {
            list-style: none;
            padding-left: 0;
@@ -71,7 +43,7 @@
 }

 <form method="post" class="mt-n2 text-center">
-    <div id="LightningNodeTypeTablist" class="nav nav-pills align-items-center justify-content-center mb-3" role="tablist">
+    <div id="LightningNodeTypeTablist" class="nav btcpay-pills align-items-center justify-content-center mb-3" role="tablist">
        <input asp-for="LightningNodeType" value="@LightningNodeType.Internal" type="radio" id="LightningNodeType-@LightningNodeType.Internal" data-bs-toggle="pill" data-bs-target="#InternalSetup" role="tab" aria-controls="InternalSetup" aria-selected="@(Model.LightningNodeType == LightningNodeType.Internal ? "true" : "false")" disabled="@(!Model.CanUseInternalNode)">
        <label asp-for="LightningNodeType" for="@($"LightningNodeType-{LightningNodeType.Internal}")">Use internal node</label>
        
--- a/BTCPayServer/Views/UIStores/_Nav.cshtml
+++ b/BTCPayServer/Views/UIStores/_Nav.cshtml
@@ -1,4 +1,5 @@
@using BTCPayServer.Client
+<h2 class="mt-1 mb-4">Store Settings</h2>
 <nav id="SectionNav">
    <div class="nav">
        <a permission="@Policies.CanModifyStoreSettings" id="SectionNav-@(nameof(StoreNavPages.General))" class="nav-link @ViewData.IsActivePage(StoreNavPages.General)" asp-controller="UIStores" asp-action="GeneralSettings" asp-route-storeId="@Context.GetRouteValue("storeId")">General</a>
--- a/BTCPayServer/Views/UIUserStores/CreateStore.cshtml
+++ b/BTCPayServer/Views/UIUserStores/CreateStore.cshtml
@@ -9,7 +9,7 @@

 <partial name="_StatusMessage" />

-<h2 class="mb-4">@ViewData["Title"]</h2>
+<h2 class="mt-1 mb-4">@ViewData["Title"]</h2>
 <div class="row">
    <div class="col-lg-6">
        <form asp-action="CreateStore">
--- a/BTCPayServer/Views/UIWallets/WalletPSBTDecoded.cshtml
+++ b/BTCPayServer/Views/UIWallets/WalletPSBTDecoded.cshtml
@@ -109,15 +109,15 @@ else
                </form>
                <div id="ExportOptions" class="collapse">
                    <div class="pt-4">
-                        <ul class="nav nav-pills mb-3" id="export-tab" role="tablist">
+                        <ul class="nav mb-3" id="export-tab" role="tablist">
                            <li class="nav-item" role="presentation">
-                                <button class="nav-link btn btn-link active" id="export-base64-tab" data-bs-toggle="pill" data-bs-target="#export-base64" type="button" role="tab" aria-controls="export-base64" aria-selected="true">Base64</button>
+                                <button class="btcpay-pill active" id="export-base64-tab" data-bs-toggle="pill" data-bs-target="#export-base64" type="button" role="tab" aria-controls="export-base64" aria-selected="true">Base64</button>
                            </li>
                            <li class="nav-item" role="presentation">
-                                <button class="nav-link btn btn-link" id="export-hex-tab" data-bs-toggle="pill" data-bs-target="#export-hex" type="button" role="tab" aria-controls="export-hex" aria-selected="false">HEX</button>
+                                <button class="btcpay-pill" id="export-hex-tab" data-bs-toggle="pill" data-bs-target="#export-hex" type="button" role="tab" aria-controls="export-hex" aria-selected="false">HEX</button>
                            </li>
                            <li class="nav-item" role="presentation">
-                                <button class="nav-link btn btn-link" id="export-json-tab" data-bs-toggle="pill" data-bs-target="#export-json" type="button" role="tab" aria-controls="export-json" aria-selected="false">JSON</button>
+                                <button class="btcpay-pill" id="export-json-tab" data-bs-toggle="pill" data-bs-target="#export-json" type="button" role="tab" aria-controls="export-json" aria-selected="false">JSON</button>
                            </li>
                        </ul>
                        <div class="tab-content" id="export-tabContent">
--- a/BTCPayServer/Views/UIWallets/WalletReceive.cshtml
+++ b/BTCPayServer/Views/UIWallets/WalletReceive.cshtml
@@ -51,9 +51,9 @@
                                <vc:qr-code data="@Model.Address"/>
                            </div>
                        </div>
-                        <div class="nav nav-pills justify-content-center">
-                            <a class="nav-link active" data-bs-toggle="tab" href="#link-tab">Link</a>
-                            <a class="nav-link" data-bs-toggle="tab" href="#address-tab">Address</a>
+                        <div class="nav justify-content-center">
+                            <a class="btcpay-pill active" data-bs-toggle="tab" href="#link-tab">Link</a>
+                            <a class="btcpay-pill" data-bs-toggle="tab" href="#address-tab">Address</a>
                        </div>
                    </div>
                    <div class="form-group">
--- a/BTCPayServer/wwwroot/img/icon-sprite.svg
+++ b/BTCPayServer/wwwroot/img/icon-sprite.svg
@@ -19,21 +19,24 @@
 <symbol id="github" viewBox="0 0 25 24"><path clip-rule="evenodd" d="M12.75.3c-6.6 0-12 5.4-12 12 0 5.325 3.45 9.825 8.175 11.4.6.075.825-.225.825-.6v-2.025C6.375 21.825 5.7 19.5 5.7 19.5c-.525-1.35-1.35-1.725-1.35-1.725-1.125-.75.075-.75.075-.75 1.2.075 1.875 1.2 1.875 1.2 1.05 1.8 2.775 1.275 3.525.975a2.59 2.59 0 0 1 .75-1.575c-2.7-.3-5.475-1.35-5.475-5.925 0-1.275.45-2.4 1.2-3.225-.15-.3-.525-1.5.15-3.15 0 0 .975-.3 3.3 1.2.975-.3 1.95-.375 3-.375s2.025.15 3 .375c2.325-1.575 3.3-1.275 3.3-1.275.675 1.65.225 2.85.15 3.15.75.825 1.2 1.875 1.2 3.225 0 4.575-2.775 5.625-5.475 5.925.45.375.825 1.125.825 2.25v3.3c0 .3.225.675.825.6a12.015 12.015 0 0 0 8.175-11.4c0-6.6-5.4-12-12-12z" fill="currentColor" fill-rule="evenodd"/></symbol>
 <symbol id="twitter" viewBox="0 0 37 37"><path d="M36 18c0 9.945-8.055 18-18 18S0 27.945 0 18 8.055 0 18 0s18 8.055 18 18zm-21.294 9.495c7.983 0 12.348-6.615 12.348-12.348 0-.189 0-.378-.009-.558a8.891 8.891 0 0 0 2.169-2.25 8.808 8.808 0 0 1-2.493.684 4.337 4.337 0 0 0 1.908-2.403 8.788 8.788 0 0 1-2.754 1.053 4.319 4.319 0 0 0-3.168-1.368 4.34 4.34 0 0 0-4.338 4.338c0 .342.036.675.117.99a12.311 12.311 0 0 1-8.946-4.536 4.353 4.353 0 0 0-.585 2.178 4.32 4.32 0 0 0 1.935 3.609 4.263 4.263 0 0 1-1.962-.54v.054a4.345 4.345 0 0 0 3.483 4.257 4.326 4.326 0 0 1-1.962.072 4.333 4.333 0 0 0 4.05 3.015 8.724 8.724 0 0 1-6.426 1.791 12.091 12.091 0 0 0 6.633 1.962z" fill="currentColor"/></symbol>
 <symbol id="mattermost" viewBox="0 0 206 206"><path fill="currentColor" d="m163.012 19.596 1.082 21.794c17.667 19.519 24.641 47.161 15.846 73.14-13.129 38.782-56.419 59.169-96.693 45.535-40.272-13.633-62.278-56.124-49.15-94.905 8.825-26.066 31.275-43.822 57.276-48.524L105.422.038C61.592-1.15 20.242 26.056 5.448 69.76c-18.178 53.697 10.616 111.963 64.314 130.142 53.698 18.178 111.964-10.617 130.143-64.315 14.77-43.633-1.474-90.283-36.893-115.99"/><path fill="currentColor" d="m137.097 53.436-.596-17.531-.404-15.189s.084-7.322-.17-9.043a2.776 2.776 0 0 0-.305-.914l-.05-.109-.06-.094a2.378 2.378 0 0 0-1.293-1.07 2.382 2.382 0 0 0-1.714.078l-.033.014-.18.092a2.821 2.821 0 0 0-.75.518c-1.25 1.212-5.63 7.08-5.63 7.08l-9.547 11.82-11.123 13.563-19.098 23.75s-8.763 10.938-6.827 24.4c1.937 13.464 11.946 20.022 19.71 22.65 7.765 2.63 19.7 3.5 29.417-6.019 9.716-9.518 9.397-23.53 9.397-23.53l-.744-30.466z"/></symbol>
-<symbol id="notifications" viewBox="0 0 20 20"><path d="M2.78 17.046h-.578c-.867 0-1.618-.455-1.964-1.137-.462-.852-.231-1.932.52-2.557a3.126 3.126 0 0 0 1.155-2.216V7.67C1.913 3.466 5.553 0 10 0c4.448 0 8.087 3.466 8.087 7.67v3.694c.116.795.52 1.477 1.155 1.988.751.625.982 1.648.52 2.557-.346.682-1.155 1.136-1.964 1.136H2.78Zm.057-1.705H17.74c.174 0 .405-.114.463-.227.115-.228 0-.398-.116-.455-.924-.795-1.56-1.875-1.733-3.125V7.67c0-3.295-2.83-5.965-6.354-5.965S3.646 4.375 3.646 7.67v3.523a4.879 4.879 0 0 1-1.79 3.41c-.116.113-.174.283-.116.454.115.17.289.284.462.284h.635Zm9.878 2.84C12.31 19.262 11.27 20 10 20c-1.27 0-2.31-.739-2.715-1.818h5.43Z" fill="currentColor"/></symbol>
-<symbol id="crowdfund" viewBox="0 0 24 24"><path d="M8 13.854a.4.4 0 1 0 .4.692l-.4-.692Zm8-3.708a.4.4 0 1 0-.4-.692l.4.692Zm-.4 4.4a.4.4 0 1 0 .4-.692l-.4.692ZM8.4 9.454a.4.4 0 1 0-.4.692l.4-.692ZM11.6 7.6v8.8h.8V7.6h-.8ZM13.2 6A1.2 1.2 0 0 1 12 7.2V8a2 2 0 0 0 2-2h-.8ZM12 7.2A1.2 1.2 0 0 1 10.8 6H10a2 2 0 0 0 2 2v-.8ZM10.8 6A1.2 1.2 0 0 1 12 4.8V4a2 2 0 0 0-2 2h.8ZM12 4.8A1.2 1.2 0 0 1 13.2 6h.8a2 2 0 0 0-2-2v.8ZM13.2 18a1.2 1.2 0 0 1-1.2 1.2v.8a2 2 0 0 0 2-2h-.8ZM12 19.2a1.2 1.2 0 0 1-1.2-1.2H10a2 2 0 0 0 2 2v-.8ZM10.8 18a1.2 1.2 0 0 1 1.2-1.2V16a2 2 0 0 0-2 2h.8Zm1.2-1.2a1.2 1.2 0 0 1 1.2 1.2h.8a2 2 0 0 0-2-2v.8Zm-3.6-2.254 7.6-4.4-.4-.692-7.6 4.4.4.692ZM8 15a1.2 1.2 0 0 1-1.2 1.2v.8a2 2 0 0 0 2-2H8Zm-1.2 1.2A1.2 1.2 0 0 1 5.6 15h-.8a2 2 0 0 0 2 2v-.8ZM5.6 15a1.2 1.2 0 0 1 1.2-1.2V13a2 2 0 0 0-2 2h.8Zm1.2-1.2A1.2 1.2 0 0 1 8 15h.8a2 2 0 0 0-2-2v.8ZM18.4 9a1.2 1.2 0 0 1-1.2 1.2v.8a2 2 0 0 0 2-2h-.8Zm-1.2 1.2A1.2 1.2 0 0 1 16 9h-.8a2 2 0 0 0 2 2v-.8ZM16 9a1.2 1.2 0 0 1 1.2-1.2V7a2 2 0 0 0-2 2h.8Zm1.2-1.2A1.2 1.2 0 0 1 18.4 9h.8a2 2 0 0 0-2-2v.8ZM16 13.854l-7.6-4.4-.4.692 7.6 4.4.4-.692ZM18.4 15a1.2 1.2 0 0 1-1.2 1.2v.8a2 2 0 0 0 2-2h-.8Zm-1.2 1.2A1.2 1.2 0 0 1 16 15h-.8a2 2 0 0 0 2 2v-.8ZM16 15a1.2 1.2 0 0 1 1.2-1.2V13a2 2 0 0 0-2 2h.8Zm1.2-1.2a1.2 1.2 0 0 1 1.2 1.2h.8a2 2 0 0 0-2-2v.8ZM8 9a1.2 1.2 0 0 1-1.2 1.2v.8a2 2 0 0 0 2-2H8Zm-1.2 1.2A1.2 1.2 0 0 1 5.6 9h-.8a2 2 0 0 0 2 2v-.8ZM5.6 9a1.2 1.2 0 0 1 1.2-1.2V7a2 2 0 0 0-2 2h.8Zm1.2-1.2A1.2 1.2 0 0 1 8 9h.8a2 2 0 0 0-2-2v.8Z" fill="#343A40"/><path d="M8 13.854a.4.4 0 1 0 .4.692l-.4-.692Zm8-3.708a.4.4 0 1 0-.4-.692l.4.692Zm-.4 4.4a.4.4 0 1 0 .4-.692l-.4.692ZM8.4 9.454a.4.4 0 1 0-.4.692l.4-.692ZM11.6 7.6v8.8h.8V7.6h-.8ZM13.2 6A1.2 1.2 0 0 1 12 7.2V8a2 2 0 0 0 2-2h-.8ZM12 7.2A1.2 1.2 0 0 1 10.8 6H10a2 2 0 0 0 2 2v-.8ZM10.8 6A1.2 1.2 0 0 1 12 4.8V4a2 2 0 0 0-2 2h.8ZM12 4.8A1.2 1.2 0 0 1 13.2 6h.8a2 2 0 0 0-2-2v.8ZM13.2 18a1.2 1.2 0 0 1-1.2 1.2v.8a2 2 0 0 0 2-2h-.8ZM12 19.2a1.2 1.2 0 0 1-1.2-1.2H10a2 2 0 0 0 2 2v-.8ZM10.8 18a1.2 1.2 0 0 1 1.2-1.2V16a2 2 0 0 0-2 2h.8Zm1.2-1.2a1.2 1.2 0 0 1 1.2 1.2h.8a2 2 0 0 0-2-2v.8Zm-3.6-2.254 7.6-4.4-.4-.692-7.6 4.4.4.692ZM8 15a1.2 1.2 0 0 1-1.2 1.2v.8a2 2 0 0 0 2-2H8Zm-1.2 1.2A1.2 1.2 0 0 1 5.6 15h-.8a2 2 0 0 0 2 2v-.8ZM5.6 15a1.2 1.2 0 0 1 1.2-1.2V13a2 2 0 0 0-2 2h.8Zm1.2-1.2A1.2 1.2 0 0 1 8 15h.8a2 2 0 0 0-2-2v.8ZM18.4 9a1.2 1.2 0 0 1-1.2 1.2v.8a2 2 0 0 0 2-2h-.8Zm-1.2 1.2A1.2 1.2 0 0 1 16 9h-.8a2 2 0 0 0 2 2v-.8ZM16 9a1.2 1.2 0 0 1 1.2-1.2V7a2 2 0 0 0-2 2h.8Zm1.2-1.2A1.2 1.2 0 0 1 18.4 9h.8a2 2 0 0 0-2-2v.8ZM16 13.854l-7.6-4.4-.4.692 7.6 4.4.4-.692ZM18.4 15a1.2 1.2 0 0 1-1.2 1.2v.8a2 2 0 0 0 2-2h-.8Zm-1.2 1.2A1.2 1.2 0 0 1 16 15h-.8a2 2 0 0 0 2 2v-.8ZM16 15a1.2 1.2 0 0 1 1.2-1.2V13a2 2 0 0 0-2 2h.8Zm1.2-1.2a1.2 1.2 0 0 1 1.2 1.2h.8a2 2 0 0 0-2-2v.8ZM8 9a1.2 1.2 0 0 1-1.2 1.2v.8a2 2 0 0 0 2-2H8Zm-1.2 1.2A1.2 1.2 0 0 1 5.6 9h-.8a2 2 0 0 0 2 2v-.8ZM5.6 9a1.2 1.2 0 0 1 1.2-1.2V7a2 2 0 0 0-2 2h.8Zm1.2-1.2A1.2 1.2 0 0 1 8 9h.8a2 2 0 0 0-2-2v.8Z" stroke="currentColor" stroke-width=".4" /></symbol>
-<symbol id="pointofsale" viewBox="0 0 24 24"><path d="M18.475 12v-.075h-.008V7.024a.64.64 0 0 0-.267-.497.995.995 0 0 0-.608-.202H6.4a.995.995 0 0 0-.608.202.64.64 0 0 0-.267.497v9.952a.64.64 0 0 0 .267.497c.16.125.376.202.608.202h11.2a.995.995 0 0 0 .608-.202.64.64 0 0 0 .267-.497V12Zm-6.4-.725h4.65v1.45h-4.65v-1.45Zm4.65 3.2v1.45h-9.45v-1.45h9.45Zm-6.4-6.4v4.65h-3.05v-4.65h3.05Zm9.6-1.051v9.952c0 1.185-1.033 2.149-2.325 2.149H6.4c-1.276 0-2.325-.972-2.325-2.15V7.025c0-1.17 1.049-2.15 2.325-2.15h11.2c1.276 0 2.325.973 2.325 2.15Zm-3.2 2.5h-4.65v-1.45h4.65v1.45Z" fill="currentColor" /></symbol>
-<symbol id="account" viewBox="0 0 24 24"><path d="M6.5 16.74a7.83 7.83 0 0 0 11 0 4.16 4.16 0 0 0-3.58-4.17c-.55.37-1.22.59-1.9.59-.68 0-1.35-.22-1.9-.59-2.03.2-3.6 2-3.62 4.17ZM12 5c1.8 0 3.26 1.55 3.26 3.46 0 1.92-1.46 3.49-3.26 3.49-1.8 0-3.26-1.55-3.26-3.47C8.74 6.58 10.2 5 12 5Z" fill="currentColor"/></symbol>
-<symbol id="settings" viewBox="0 0 24 24"><path fill="none" d="M19.2 13.37a.62.62 0 0 0 .43-.6v-1.6c0-.27-.18-.5-.43-.59l-1.67-.55-.24-.57.76-1.6a.63.63 0 0 0-.12-.7L16.8 6.01a.62.62 0 0 0-.72-.12l-1.56.79-.57-.24-.6-1.66a.62.62 0 0 0-.58-.42h-1.6a.63.63 0 0 0-.6.44l-.53 1.66-.59.24-1.59-.76a.63.63 0 0 0-.71.12L6.02 7.2a.63.63 0 0 0-.12.73l.78 1.56-.23.57-1.66.58a.62.62 0 0 0-.42.6v1.59c0 .27.18.5.43.59l1.67.55.24.57-.76 1.6a.63.63 0 0 0 .12.7l1.13 1.14c.19.19.48.24.72.11l1.56-.78.57.24.6 1.66c.08.25.32.41.58.41h1.59c.27 0 .51-.17.6-.43l.53-1.66.59-.24 1.59.76c.24.12.52.07.71-.12l1.13-1.13c.2-.2.24-.49.12-.73l-.79-1.55.25-.57 1.66-.58ZM12 14.39A2.37 2.37 0 0 1 9.62 12a2.37 2.37 0 1 1 4.76 0A2.37 2.37 0 0 1 12 14.39Z" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/></symbol>
+<symbol id="notifications" viewBox="0 0 24 24"><path d="M12.1933 0.992188C17.152 0.992188 19.2346 5.35582 19.7305 7.04178C20.3255 9.12442 19.8297 10.017 20.3255 12.893C20.6231 14.7773 21.6148 16.3641 22.4082 17.2567C22.7057 17.5542 22.4082 18.05 22.0115 18.05H13.2842H12.1933H2.07762C1.68092 18.05 1.3834 17.5542 1.68092 17.2567C2.37514 16.3641 3.46605 14.7773 3.76357 12.893C4.16026 10.017 3.76357 9.12442 4.35861 7.04178C4.85448 5.35582 7.03629 0.992188 12.1933 0.992188Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" /><path d="M16.2595 18.0488C16.2595 18.2472 16.3586 18.5447 16.3586 18.743C16.3586 21.1232 14.4743 23.0075 12.0942 23.0075C9.71401 23.0075 7.82971 21.1232 7.82971 18.743C7.82971 18.5447 7.82971 18.3463 7.82971 18.148" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" /></symbol>
+<symbol id="crowdfund" viewBox="0 0 24 24"><path d="M9.1638 12.4922C11.339 12.4922 13.1023 10.7288 13.1023 8.5537C13.1023 6.37854 11.339 4.61523 9.1638 4.61523C6.98865 4.61523 5.22534 6.37854 5.22534 8.5537C5.22534 10.7288 6.98865 12.4922 9.1638 12.4922Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /><path d="M15.9331 18.0307C17.4965 18.0307 18.7638 16.7633 18.7638 15.1999C18.7638 13.6365 17.4965 12.3691 15.9331 12.3691C14.3697 12.3691 13.1023 13.6365 13.1023 15.1999C13.1023 16.7633 14.3697 18.0307 15.9331 18.0307Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /><path d="M8.24067 19.3839C9.49818 19.3839 10.5176 18.3645 10.5176 17.107C10.5176 15.8495 9.49818 14.8301 8.24067 14.8301C6.98316 14.8301 5.96375 15.8495 5.96375 17.107C5.96375 18.3645 6.98316 19.3839 8.24067 19.3839Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></symbol>
+<symbol id="pointofsale" viewBox="0 0 24 24"><path d="M16.88 19.4303H7.12002C6.79748 19.4322 6.47817 19.3659 6.18309 19.2356C5.88802 19.1054 5.62385 18.9141 5.40795 18.6745C5.19206 18.4349 5.02933 18.1522 4.93046 17.8452C4.83159 17.5382 4.79882 17.2137 4.83431 16.8931L5.60002 10.1617C5.6311 9.88087 5.76509 9.62152 5.97615 9.43368C6.1872 9.24584 6.46035 9.14284 6.74288 9.14455H17.2572C17.5397 9.14284 17.8129 9.24584 18.0239 9.43368C18.235 9.62152 18.369 9.88087 18.4 10.1617L19.1429 16.8931C19.1782 17.2118 19.146 17.5343 19.0485 17.8398C18.951 18.1452 18.7903 18.4267 18.5769 18.666C18.3634 18.9053 18.1021 19.097 17.8097 19.2286C17.5174 19.3603 17.2006 19.429 16.88 19.4303Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /><path d="M7.42859 9.14369C7.42859 7.93128 7.91022 6.76852 8.76753 5.91121C9.62484 5.0539 10.7876 4.57227 12 4.57227C13.2124 4.57227 14.3752 5.0539 15.2325 5.91121C16.0898 6.76852 16.5714 7.93128 16.5714 9.14369" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /><path d="M9.14282 12.5723H14.8571" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></symbol>
+<symbol id="account" viewBox="0 0 24 24"><path d="M11.9336 12.777C14.1707 12.777 15.9843 10.9635 15.9843 8.72641C15.9843 6.48931 14.1707 4.67578 11.9336 4.67578C9.69653 4.67578 7.883 6.48931 7.883 8.72641C7.883 10.9635 9.69653 12.777 11.9336 12.777Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" /><path d="M5.38513 19.3247C5.38513 17.4345 6.87036 15.9492 8.76066 15.9492H15.2417C17.0645 15.9492 18.6172 17.4345 18.6172 19.3247" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" /></symbol>
+<symbol id="settings" viewBox="0 0 24 24"><path d="M9.81672 6.15385L10.3459 4.78769C10.4352 4.55639 10.5922 4.35743 10.7965 4.21688C11.0007 4.07632 11.2426 4.00073 11.4906 4H12.4998C12.7477 4.00073 12.9896 4.07632 13.1939 4.21688C13.3981 4.35743 13.5552 4.55639 13.6444 4.78769L14.1736 6.15385L15.9706 7.18769L17.4229 6.96615C17.6647 6.93333 17.9108 6.97314 18.13 7.08052C18.3491 7.1879 18.5314 7.35801 18.6536 7.56923L19.1459 8.43077C19.2721 8.64535 19.3302 8.89314 19.3126 9.14144C19.2951 9.38974 19.2026 9.62687 19.0475 9.82154L18.149 10.9662V13.0338L19.0721 14.1785C19.2272 14.3731 19.3197 14.6103 19.3373 14.8586C19.3548 15.1069 19.2967 15.3546 19.1706 15.5692L18.6783 16.4308C18.556 16.642 18.3737 16.8121 18.1546 16.9195C17.9354 17.0269 17.6893 17.0667 17.4475 17.0338L15.9952 16.8123L14.1983 17.8462L13.669 19.2123C13.5798 19.4436 13.4227 19.6426 13.2185 19.7831C13.0143 19.9237 12.7723 19.9993 12.5244 20H11.4906C11.2426 19.9993 11.0007 19.9237 10.7965 19.7831C10.5922 19.6426 10.4352 19.4436 10.3459 19.2123L9.81672 17.8462L8.01979 16.8123L6.56749 17.0338C6.32566 17.0667 6.07954 17.0269 5.86039 16.9195C5.64124 16.8121 5.45896 16.642 5.33672 16.4308L4.84441 15.5692C4.71826 15.3546 4.66013 15.1069 4.67771 14.8586C4.69529 14.6103 4.78774 14.3731 4.94287 14.1785L5.84133 13.0338V10.9662L4.91826 9.82154C4.76313 9.62687 4.67068 9.38974 4.6531 9.14144C4.63552 8.89314 4.69364 8.64535 4.81979 8.43077L5.3121 7.56923C5.43435 7.35801 5.61662 7.1879 5.83577 7.08052C6.05492 6.97314 6.30105 6.93333 6.54287 6.96615L7.99518 7.18769L9.81672 6.15385ZM9.53364 12C9.53364 12.4868 9.67801 12.9628 9.94848 13.3676C10.219 13.7724 10.6034 14.0879 11.0532 14.2742C11.503 14.4605 11.9979 14.5092 12.4754 14.4142C12.9529 14.3193 13.3915 14.0848 13.7357 13.7406C14.08 13.3963 14.3144 12.9577 14.4094 12.4802C14.5044 12.0027 14.4557 11.5078 14.2693 11.058C14.083 10.6082 13.7675 10.2238 13.3627 9.95331C12.9579 9.68283 12.482 9.53846 11.9952 9.53846C11.3423 9.53846 10.7162 9.7978 10.2546 10.2594C9.79298 10.7211 9.53364 11.3472 9.53364 12V12Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" /></symbol>
 <symbol id="server-settings" viewBox="0 0 24 24"><rect x="4.75" y="4.75" width="14.5" height="14.5" rx="3.25" stroke="currentColor" stroke-width="1.5" fill="none"/><path d="m8 8 1.6 1.6L8 11.2" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></symbol>
 <symbol id="new" viewBox="0 0 24 24"><path d="M17 11H13V7C13 6.45 12.55 6 12 6C11.45 6 11 6.45 11 7V11H7C6.45 11 6 11.45 6 12C6 12.55 6.45 13 7 13H11V17C11 17.55 11.45 18 12 18C12.55 18 13 17.55 13 17V13H17C17.55 13 18 12.55 18 12C18 11.45 17.55 11 17 11Z" fill="currentColor"/></symbol>
 <symbol id="wallet-onchain" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="m16.05 12.26 1.08-1.08a3.05 3.05 0 0 0-4.31-4.32l-2.7 2.7a2.28 2.28 0 0 0 0 3.23l.54.54 1.08-1.07a1.52 1.52 0 0 1 0-2.15l2.15-2.16a1.52 1.52 0 0 1 2.6 1.08 1.52 1.52 0 0 1-.44 1.07l-1.08 1.08 1.08 1.08Z" fill="currentColor"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7.97 11.72 6.89 12.8a3.05 3.05 0 0 0 4.3 4.31l2.7-2.7a2.28 2.28 0 0 0 0-3.23l-.54-.54-1.07 1.08a1.52 1.52 0 0 1 0 2.15l-2.16 2.16a1.52 1.52 0 0 1-2.6-1.08 1.52 1.52 0 0 1 .45-1.08l1.08-1.08-1.08-1.07Z" fill="currentColor"/></symbol>
 <symbol id="wallet-lightning" viewBox="0 0 24 24"><path d="M17.57 10.7c-.1-.23-.27-.34-.5-.34h-4.3l.5-3.76a.48.48 0 0 0-.33-.55.52.52 0 0 0-.66.17l-5.45 6.54a.59.59 0 0 0-.05.6c.1.17.27.28.49.28h4.3l-.49 3.76c-.05.22.11.5.33.55.06.05.17.05.22.05a.5.5 0 0 0 .44-.22l5.45-6.54c.1-.17.16-.39.05-.55Z" fill="currentColor"/></symbol>
-<symbol id="payment-1" viewBox="0 0 24 24"><path d="M7.2 11.2h9.6v1.6H7.2v-1.6Zm0 4.8h5.6v-1.6H7.2V16ZM20 7.02v9.96c0 1.23-1.07 2.22-2.4 2.22H6.4c-1.31 0-2.4-1-2.4-2.22V7.02C4 5.81 5.09 4.8 6.4 4.8h11.2c1.31 0 2.4 1 2.4 2.22ZM18.4 12V7.02c0-.33-.38-.62-.8-.62H6.4c-.43 0-.8.29-.8.62v9.96c0 .33.37.62.8.62h11.2c.43 0 .8-.29.8-.62V12ZM7.2 9.6h9.6V8H7.2v1.6Z" fill="currentColor"/></symbol>
-<symbol id="payment-2" viewBox="0 0 24 24"><path d="M12 20a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-15.19a7.2 7.2 0 0 0 0 14.38A7.2 7.2 0 0 0 12 4.8Z" fill="currentColor" stroke="currentColor" stroke-width=".6"/><path d="M9.48 14.85a.44.44 0 0 1-.3-.14c-.14-.16-.14-.43.05-.57l5.02-4.31c.16-.14.43-.14.57.05.14.17.14.44-.05.57l-5.05 4.29c-.05.08-.16.1-.24.1Z" fill="currentColor" stroke="currentColor" stroke-width=".6"/><path d="M14.39 14.28a.4.4 0 0 1-.41-.4l.1-3.42-3.08-.17a.4.4 0 0 1-.38-.43c0-.22.19-.4.43-.38l3.47.19c.22 0 .38.19.38.4l-.13 3.83c.02.19-.17.38-.38.38Z" fill="currentColor" stroke="currentColor" stroke-width=".6"/></symbol>
-<symbol id="invoice" viewBox="0 0 24 24"><path d="M17.1 20H6.9c-.83 0-1.53-.7-1.53-1.52V5.52c0-.82.7-1.52 1.52-1.52h10.22c.83 0 1.52.7 1.52 1.52v12.96c0 .82-.7 1.52-1.52 1.52ZM6.9 5.3c-.14 0-.23.1-.23.22v12.96c0 .13.1.22.22.22h10.22c.13 0 .22-.1.22-.22V5.52c0-.13-.09-.22-.22-.22H6.89Z" fill="currentColor"/><path d="M12.24 7.95H8.11c-.09 0-.13-.05-.13-.15v-1c0-.05.04-.1.09-.1h4.13c.04 0 .08.05.08.1v1c.05.1 0 .15-.04.15ZM16.2 17.6H8.1c-.08 0-.12-.08-.12-.12V9.87a.1.1 0 0 1 .09-.09h8.08a.1.1 0 0 1 .09.09v7.44c0 .11.06.3-.04.3Z" fill="currentColor"/></symbol>
+<symbol id="payment-requests" viewBox="0 0 24 24"><path d="M12 19.3845C16.0784 19.3845 19.3846 16.0783 19.3846 11.9999C19.3846 7.92144 16.0784 4.61523 12 4.61523C7.92156 4.61523 4.61536 7.92144 4.61536 11.9999C4.61536 16.0783 7.92156 19.3845 12 19.3845Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" /><path d="M9.53845 14.216L14.2769 9.41602" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" /><path d="M9.53845 10.707V14.2147H13.2308" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" /></symbol>
+<symbol id="pull-payments" viewBox="0 0 24 24"><path d="M12 20a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm0-15.19a7.2 7.2 0 0 0 0 14.38A7.2 7.2 0 0 0 12 4.8Z" fill="currentColor" stroke="currentColor" stroke-width=".6"/><path d="M9.48 14.85a.44.44 0 0 1-.3-.14c-.14-.16-.14-.43.05-.57l5.02-4.31c.16-.14.43-.14.57.05.14.17.14.44-.05.57l-5.05 4.29c-.05.08-.16.1-.24.1Z" fill="currentColor" stroke="currentColor" stroke-width=".6"/><path d="M14.39 14.28a.4.4 0 0 1-.41-.4l.1-3.42-3.08-.17a.4.4 0 0 1-.38-.43c0-.22.19-.4.43-.38l3.47.19c.22 0 .38.19.38.4l-.13 3.83c.02.19-.17.38-.38.38Z" fill="currentColor" stroke="currentColor" stroke-width=".6"/></symbol>
+<symbol id="payouts" viewBox="0 0 24 24"><path d="M8.30766 4.61523H15.6923C17.723 4.61523 19.3846 6.27677 19.3846 8.30754V15.6922C19.3846 17.7229 17.723 19.3845 15.6923 19.3845H8.30766C6.27689 19.3845 4.61536 17.7229 4.61536 15.6922V8.30754C4.61536 6.27677 6.27689 4.61523 8.30766 4.61523Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" /><path d="M8.30774 8.92383H15.6924" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" /><path d="M8.30774 12H15.6924" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" /><path d="M8.30774 15.0156H12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" /></symbol>
+<symbol id="pay-button" viewBox="0 0 24 24"><path d="M8.30766 4.61523H15.6923C17.723 4.61523 19.3846 6.27677 19.3846 8.30754V15.6922C19.3846 17.7229 17.723 19.3845 15.6923 19.3845H8.30766C6.27689 19.3845 4.61536 17.7229 4.61536 15.6922V8.30754C4.61536 6.27677 6.27689 4.61523 8.30766 4.61523Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" /><path d="M12 15.0777C13.6994 15.0777 15.0769 13.7001 15.0769 12.0008C15.0769 10.3014 13.6994 8.92383 12 8.92383C10.3007 8.92383 8.9231 10.3014 8.9231 12.0008C8.9231 13.7001 10.3007 15.0777 12 15.0777Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" /></symbol>
+<symbol id="invoice" viewBox="0 0 24 24"><path d="M8.30766 4.61523H15.6923C17.723 4.61523 19.3846 6.27677 19.3846 8.30754V15.6922C19.3846 17.7229 17.723 19.3845 15.6923 19.3845H8.30766C6.27689 19.3845 4.61536 17.7229 4.61536 15.6922V8.30754C4.61536 6.27677 6.27689 4.61523 8.30766 4.61523Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" /><path d="M8.30774 8.92383H15.6924" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" /><path d="M8.30774 12H15.6924" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" /><path d="M8.30774 15.0156H12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" /></symbol>
 <symbol id="shopify" viewBox="0 0 32 32"><path transform="scale(.7) translate(5, 5)" d="m20.45 31.97 9.62-2.08-3.5-23.64c-.03-.16-.15-.26-.28-.26l-2.57-.18s-1.7-1.7-1.92-1.88a.41.41 0 0 0-.16-.1l-1.22 28.14zm-4.83-16.9s-1.09-.56-2.37-.56c-1.93 0-2 1.2-2 1.52 0 1.64 4.31 2.29 4.31 6.17 0 3.06-1.92 5.01-4.54 5.01-3.14 0-4.72-1.95-4.72-1.95l.86-2.78s1.66 1.42 3.04 1.42c.9 0 1.3-.72 1.3-1.24 0-2.16-3.54-2.26-3.54-5.81-.04-2.98 2.1-5.9 6.44-5.9 1.68 0 2.5.49 2.5.49l-1.26 3.62zM14.9 1.1c.17 0 .36.06.53.19-1.31.62-2.75 2.18-3.34 5.32-.88.28-1.73.54-2.52.77.69-2.38 2.36-6.26 5.33-6.26zm1.64 3.94v.18l-3.2.98c.63-2.37 1.79-3.53 2.79-3.96.26.67.41 1.57.41 2.8zm.72-2.98c.92.1 1.52 1.15 1.9 2.34-.46.15-.98.3-1.54.49v-.34c0-1-.13-1.82-.36-2.5zm3.99 1.72-.1.03c-.03 0-.39.1-.96.28-.56-1.65-1.56-3.16-3.34-3.16h-.16C16.2.28 15.56 0 15.02 0 10.88 0 8.9 5.17 8.28 7.8c-1.6.48-2.75.84-2.88.9-.9.28-.93.3-1.03 1.15-.1.62-2.44 18.75-2.44 18.75L20.01 32z" fill="currentColor"/></symbol>
 <symbol id="done" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="12" fill="#51B13E"/><path d="m7 12.14 3.55 3.54L17.5 9" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></symbol>
-<symbol id="home" viewBox="0 0 24 24" fill="none"><path d="M19.9257 9.5143L19.0854 6.01717C18.9094 5.29694 18.2852 4.80078 17.557 4.80078H6.44138C5.72114 4.80078 5.08894 5.30494 4.92089 6.01717L4.08062 9.5143C3.88855 10.3306 4.06461 11.1628 4.57678 11.819C4.6408 11.9071 4.72882 11.9711 4.80085 12.0511V17.6049C4.80085 18.4852 5.52108 19.2054 6.40136 19.2054H17.605C18.4853 19.2054 19.2055 18.4852 19.2055 17.6049V12.0511C19.2775 11.9791 19.3655 11.9071 19.4296 11.827C19.9417 11.1708 20.1258 10.3306 19.9257 9.5143ZM17.5329 6.39329L18.3732 9.89042C18.4532 10.2265 18.3812 10.5626 18.1732 10.8267C18.0611 10.9708 17.821 11.2028 17.4209 11.2028C16.9328 11.2028 16.5086 10.8107 16.4526 10.2905L15.9884 6.4013L17.5329 6.39329ZM12.8034 6.4013H14.3719L14.8041 10.0185C14.8441 10.3306 14.748 10.6427 14.54 10.8747C14.3639 11.0828 14.1078 11.2028 13.7797 11.2028C13.2436 11.2028 12.8034 10.7307 12.8034 10.1545V6.4013ZM9.19426 10.0185L9.6344 6.4013H11.2029V10.1545C11.2029 10.7307 10.7628 11.2028 10.1706 11.2028C9.89849 11.2028 9.65041 11.0828 9.45835 10.8747C9.25828 10.6427 9.16225 10.3306 9.19426 10.0185ZM5.63312 9.89042L6.44138 6.4013H8.01788L7.55373 10.2905C7.48971 10.8107 7.07358 11.2028 6.58542 11.2028C6.1933 11.2028 5.94522 10.9708 5.84118 10.8267C5.62511 10.5706 5.55309 10.2265 5.63312 9.89042ZM6.40136 17.6049V12.7793C6.46538 12.7874 6.5214 12.8034 6.58542 12.8034C7.28165 12.8034 7.91385 12.5153 8.378 12.0431C8.85815 12.5233 9.49836 12.8034 10.2266 12.8034C10.9228 12.8034 11.547 12.5153 12.0112 12.0591C12.4833 12.5153 13.1235 12.8034 13.8438 12.8034C14.516 12.8034 15.1562 12.5233 15.6363 12.0431C16.1005 12.5153 16.7327 12.8034 17.4289 12.8034C17.4929 12.8034 17.549 12.7874 17.613 12.7793V17.6049H6.40136Z" fill="currentColor"/></symbol>
+<symbol id="store" viewBox="0 0 24 24" fill="none"><path d="M19.049 10.2637V16.5294C19.049 17.7602 18.042 18.7672 16.8112 18.7672H7.24478C6.01401 18.7672 5.00702 17.7602 5.00702 16.5294V10.2637" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" /><path d="M9.45456 5.25649V9.08866C9.45456 10.2635 8.50351 11.2425 7.32868 11.2425H6.9091C5.00701 11.2425 3.74826 9.31243 4.50351 7.57817L5.06295 6.26348C5.34267 5.62012 5.95805 5.22852 6.62938 5.22852L9.45456 5.25649Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" /><path d="M14.5455 5.25781V9.08998C14.5455 10.2648 15.4965 11.2438 16.6713 11.2438H17.0909C18.993 11.2438 20.2518 9.31376 19.4965 7.57949L18.9371 6.26481C18.6574 5.64942 18.042 5.25781 17.3706 5.25781H14.5455Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" /><path d="M12 11.4949C10.6014 11.4949 9.48254 10.3481 9.48254 8.97746V5.28516H14.5455V8.97746C14.5455 10.3761 13.3986 11.4949 12 11.4949Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" /></symbol>
+<symbol id="home" viewBox="0 0 24 24" fill="none"><path d="M15.6923 19.3845H8.30766C6.27689 19.3845 4.61536 17.7229 4.61536 15.6922V8.30754C4.61536 6.27677 6.27689 4.61523 8.30766 4.61523H15.6923C17.723 4.61523 19.3846 6.27677 19.3846 8.30754V15.6922C19.3846 17.7229 17.723 19.3845 15.6923 19.3845Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" /><path d="M7.56921 11.938H9.04614L10.5846 14.1534L13.3538 9.72266L14.8923 11.938H16.2461" fill="none" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" /></symbol>
 <symbol id="spark" viewBox="0 0 24 24"><path d="M17.57 10.7c-.1-.23-.27-.34-.5-.34h-4.3l.5-3.76a.48.48 0 0 0-.33-.55.52.52 0 0 0-.66.17l-5.45 6.54a.59.59 0 0 0-.05.6c.1.17.27.28.49.28h4.3l-.49 3.76c-.05.22.11.5.33.55.06.05.17.05.22.05a.5.5 0 0 0 .44-.22l5.45-6.54c.1-.17.16-.39.05-.55Z" fill="currentColor"/></symbol>
 <symbol id="rtl" viewBox="0 0 610 524"><defs><path id="a" d="M.45.26h52.23V52H.45z"/></defs><g fill="none" fill-rule="evenodd"><path d="M418.62 107.6c1.95 4.6 2.73 8.24 2.63 10.24-7.56-4.56-18.93-8.43-25.14-9.54-4.03-.72 9.18-3.93 22.51-.7m10.99 169.33a476.42 476.42 0 0 1 14.43-2.8 447.25 447.25 0 0 0-5.98-3.71c-25.45-15.5-52.58-28.64-79.4-41.37-16.91-8.03-34.15-16.02-51.7-23.22 15.31-20.19 34.91-37.32 55.86-52 .02 0 .1-.07.23-.16 4.59 6.26 10.38 10.51 13.29 12.11 5.68 3.13 12.84 6.06 19.41 6.95a110.45 110.45 0 0 0 35.44-.55c1.06-.18 2.14-.3 3.2-.49a105.01 105.01 0 0 1 16.87-1.54c5.88-.1 8.79 1.14 9.48 1.32 2.1.54 3.89 1.44 4.88 2.64a39.71 39.71 0 0 0 3.7 4.13c3.96 3.93 7.89 6.11 13.58 6.74 7.34.8 12.53-2.07 16.2-6.83 1.74-2.25.9-5.78.71-6.47-.96-3.55-3.18-8.7-4.8-13.5a27.3 27.3 0 0 0-4.86-7.64l-2.42-2.56c-3.78-4-7.59-7.96-11.36-11.95-15.06-15.92-31.38-30.58-48.21-44.59l-5.24-4.36-3.82-3.16a1032.74 1032.74 0 0 0-6.06-4.96l-1.63-1.31c-.86-.7-2.81-2.34-4.46-3.66 5.46-5.44 9.86-8.83 17.68-13.95 1.12-.74 7.16-3.96 6.95-4.78-.13-.49-10.05-.38-21.4 1.09-4 .51-26.38 3.81-41.74 7.16-16.35 3.56-33.62 8.55-49.53 13.55-45.94 14.47-89.81 34.07-129.99 60.7-23.09 15.32-44.7 32.21-65.56 50.42a1066.8 1066.8 0 0 0-28.81 25.95 696.64 696.64 0 0 0-4.41 4.19c2 .37 4.01.76 6.02 1.18 16.6 3.4 33.04 7.97 49.02 12.53 19.53 5.59 39.3 11.6 58.41 19a583.18 583.18 0 0 0-31.63 32.21 765.5 765.5 0 0 0-53.37 66.63c-21.6 30.15-40.02 62.67-56.09 96.17a765.04 765.04 0 0 0-4.5 9.54c2.97-2.38 5.96-4.74 8.97-7.08 26.01-20.17 53.44-38.82 80.82-56.84 38.53-25.35 79.88-46.3 122.78-63.16 51.73-20.32 104.56-40.03 159.04-51.57" fill="currentColor"/></g></symbol>
 <symbol id="thunderhub" viewBox="0 0 32 32" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g transform="translate(4, 4)"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"/><path d="M9 9h6v6H9zM9 1v3M15 1v3M9 20v3M15 20v3M20 9h3M20 14h3M1 9h3M1 14h3"/></g></symbol>
--- a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css
+++ b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css
@@ -10003,6 +10003,15 @@ textarea.w-auto {
  flex-grow: 0 !important;
 }

+/* Prevent form zoom on mobile Safari */
+@supports (-webkit-overflow-scrolling: touch) {
+    input.form-control,
+    textarea.form-control,
+    select.form-select {
+        font-size: var(--btcpay-root-font-size);
+    }
+}
+
 /* Fix for small table showing unnecessary scrollbars */
 .table-responsive .table-sm {
  width: 100% !important;
@@ -10223,6 +10232,45 @@ input[type=number].hide-number-spin {
    margin-left: -3rem !important;
  }
 }
+
+.btcpay-pills input {
+    display: none;
+}
+.btcpay-pills label,
+.btcpay-pill {
+    display: inline-block;
+    padding: .75rem 2rem;
+    color: var(--btcpay-body-link);
+    background: transparent;
+    font-weight: var(--btcpay-font-weight-semibold);
+    margin-right: var(--btcpay-space-m);
+    border: 1px solid var(--btcpay-secondary-border);
+    cursor: pointer;
+    border-radius: 5rem;
+    text-decoration: none;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+.btcpay-pills input:not(:checked):not([disabled]) + label:hover,
+.btcpay-pill:hover {
+    border-color: var(--btcpay-secondary-border-hover);
+    text-decoration: none;
+}
+.btcpay-pills input {
+    display: none;
+}
+.btcpay-pills input:checked + label,
+.btcpay-pill.active {
+    color: var(--btcpay-body-text-active);
+    background: var(--btcpay-body-bg-active);
+    border-color: var(--btcpay-body-bg-active);
+}
+.btcpay-pills input[disabled] + label,
+.btcpay-pill.disabled {
+    color: var(--btcpay-body-text-muted) !important;
+    border-color: var(--btcpay-secondary-border) !important;
+    opacity: .5 !important;
+}
+
 .btcpay-status {
  display: inline-flex;
  flex-shrink: 0;
@@ -10240,17 +10288,24 @@ input[type=number].hide-number-spin {
  height: 9px;
 }
 .btcpay-status--enabled {
-  background-color: rgba(0, 182, 52, .3);
+  background-color: rgba(0, 182, 52, .25);
 }
 .btcpay-status--enabled:before {
  background-color: #00B634;
 }
+.btcpay-status--pending {
+  background-color: rgba(143, 151, 158, .25);
+}
+.btcpay-status--pending:before {
+  background-color: var(--btcpay-neutral-500);
+}
 .btcpay-status--disabled {
-  background-color: rgba(251, 56, 61, .3);
+  background-color: rgba(251, 56, 61, .25);
 }
 .btcpay-status--disabled:before {
  background-color: #FB383D;
 }
+
 .btcpay-toggle {
  --border-size: 2px;
  --toggle-width: 40px;
@@ -10311,6 +10366,7 @@ label + input.btcpay-toggle {
  filter: none;
  opacity: 0.5;
 }
+
 /* Bootstrap Responsive Helper */
 html[data-devenv]:before {
    display: inline-block;
--- a/BTCPayServer/wwwroot/main/layout.css
+++ b/BTCPayServer/wwwroot/main/layout.css
@@ -16,12 +16,19 @@
    --button-width: 40px;
    --button-height: 40px;
    --button-padding: 7px;
+    --icon-size: 1.5rem;
    
    height: var(--header-height);
    z-index: 1;
 }

-#mainMenuHead .mainMenuButton  {
+#mainMenuHead  {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+#mainMenuHead .mainMenuButton {
    position: relative;
    display: inline-flex;
    align-items: center;
@@ -43,18 +50,12 @@
    padding-top: var(--btcpay-space-m);
 }

-#mainNav .nav-item i.fa,
 #mainNav .nav-item svg.icon {
-    font-size: 1.125rem;
-    width: 1.5rem;
-    height: 1.5rem;
+    width: var(--icon-size);
+    height: var(--icon-size);
    margin-right: var(--btcpay-space-xs);
 }

-#mainNav .nav-item i.fa {
-    padding: .15rem 0 0 var(--btcpay-space-xs);
-}
-
 #mainNav .accordion-button {
    padding: var(--btcpay-space-s) 0;
    text-transform: uppercase;
@@ -75,6 +76,17 @@
    transition-duration: var(--btcpay-transition-duration-fast);
 }

+#mainNav .navbar-nav > li.nav-item .nav-link .icon {
+    flex-shrink: 0;
+}
+
+#mainNav .navbar-nav > li.nav-item .nav-link span {
+    max-width: 200px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
 #mainNav .navbar-nav > li.nav-item .nav-link:focus,
 #mainNav .navbar-nav > li.nav-item .nav-link:hover {
    color: var(--btcpay-header-link-accent);
@@ -128,8 +140,36 @@
 }

 #StoreSelectorToggle {
+    display: flex;
+    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
+    color: var(--btcpay-header-link);
+}
+
+#StoreSelectorToggle::after {
+    content: none;
+}
+
+#StoreSelectorToggle .icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    transition: color 0.15s ease-in-out;
+}
+
+#StoreSelectorToggle .icon.icon-caret-down {
+    color: var(--btcpay-body-text-muted);
+}
+
+#StoreSelectorToggle span {
+    margin: 0 auto 0 var(--btcpay-space-s);
+}
+
+#StoreSelectorToggle:hover,
+#StoreSelectorToggle:focus,
+#StoreSelectorToggle:hover .icon,
+#StoreSelectorToggle:focus .icon {
+    color: var(--btcpay-header-link-accent);
 }

 #StoreSelectorMenu {
@@ -160,6 +200,21 @@
 }

 /* Theme Switch */
+#mainNav .btcpay-theme-switch {
+    width: 100%;
+    justify-content: space-between;
+}
+
+#mainNav .btcpay-theme-switch svg {
+    order: 1;
+    margin: 0 !important;
+}
+
+#mainNav .btcpay-theme-switch span {
+    order: 0;
+    margin: 0;
+}
+
 .btcpay-theme-switch {
    display: inline-flex;
    align-items: center;
@@ -173,7 +228,7 @@
    width: 1rem;
 }

-.btcpay-theme-switch svg[class="d-inline-block"] + span {
+.btcpay-theme-switch svg ~ span {
    margin-left: var(--btcpay-space-xs);
 }

@@ -228,13 +283,13 @@
 }

 #NotificationsHandle svg {
-    width: 1.4rem;
-    height: 1.4rem;
-    color: var(--btcpay-body-text-muted);
+    width: 1.25rem;
+    height: 1.25rem;
+    color: var(--btcpay-header-link);
 }

 #NotificationsHandle:hover svg {
-    color: var(--btcpay-header-text);
+    color: var(--btcpay-header-link-accent);
 }

 #NotificationsDropdown {
@@ -300,9 +355,20 @@
 }

@media (max-width: 991px) {
-    #mainMenu {
+    :root {
        --header-height: var(--mobile-header-height);
    }
+    
+    #mainMenu {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+    }
+
+    #mainMenuHead  {
+        padding: var(--btcpay-space-s) var(--btcpay-space-m);
+    }

    #mainNav {
        position: fixed;
@@ -402,7 +468,8 @@
    }

    #mainContent > section {
-        padding: var(--btcpay-space-m) 0 var(--btcpay-space-xl);
+        margin-top: var(--header-height);
+        padding: var(--btcpay-space-m) var(--btcpay-space-m) var(--btcpay-space-xl);
    }

    #SectionNav {
@@ -453,9 +520,11 @@
 }

@media (min-width: 992px) {
-    #mainMenu {
+    :root {
        --header-height: var(--desktop-header-height);
-
+    }
+    
+    #mainMenu {
        position: fixed;
        top: 0;
        bottom: 0;
@@ -464,6 +533,11 @@
        height: 100vh;
    }

+    #mainMenuHead {
+        flex-wrap: wrap;
+        padding: var(--btcpay-space-m) 1.5rem;
+    }
+
    #mainNav {
        visibility: visible !important;
    }
@@ -493,14 +567,18 @@
        margin-left: var(--sidebar-width);
    }

-    #mainContent > section {
-        padding: 4.5rem var(--btcpay-space-xl);
+    #mainContent pre {
+        max-width: calc(100vw - var(--sidebar-width) - (2 * var(--btcpay-space-xl)) - 1rem); /* 1rem for scrollbar */
    }

-    #mainContent > section > .container,
+    #mainContent > section {
+        padding: 5rem var(--btcpay-space-xl);
+    }
+
+    #mainContent > section,
    .btcpay-footer > .container {
        margin: 0;
-        max-width: min(1140px, calc(100vw - var(--sidebar-width) - (2 * var(--btcpay-space-xl)) - 1rem)); /* 1rem for scrollbar */
+        max-width: none;
    }
    
    .btcpay-footer {
@@ -517,7 +595,7 @@
    }

    #SectionNav .nav-link {
-        margin-top: var(--btcpay-space-m);
+        margin-top: var(--btcpay-space-s);
        margin-right: var(--btcpay-space-l);
        margin-bottom: calc(var(--border-size) * -1);
    }
--- a/BTCPayServer/wwwroot/main/site.css
+++ b/BTCPayServer/wwwroot/main/site.css
@@ -1,8 +1,3 @@
-/* Set scroll padding so that anchors don't disappear underneath the fixed navbar */ 
-html {
-    scroll-padding-top: 5rem;
-}
-
 /* General and site-wide Bootstrap modifications */
 h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 600;
@@ -176,8 +171,9 @@ h2 small .fa-question-circle-o {

 svg.icon {
    display: inline-block;
-    width: 16px;
-    height: 16px;
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0 !important;
 }

 svg.icon-note {