From cbf8b23385eafd82e0fbb2718eb06981473210a5 Mon Sep 17 00:00:00 2001
From: d11n <mail@dennisreimann.de>
Date: Thu, 27 Jan 2022 03:56:46 +0100
Subject: [PATCH] Adapt desktop breakpoints in views (#3358)

* Add XXL breakpoint

* Unify setup guide display

* Adapt desktop breakpoints in views

* Fix POS code display

* Fix syntax in home view

* store settings + constrain update

* account settings

Co-authored-by: dstrukt <gfxdsign@gmail.com>
Co-authored-by: Nicolas Dorier <nicolas.dorier@gmail.com>
---
 BTCPayServer/Views/Shared/EmailsBody.cshtml   |   6 +-
 BTCPayServer/Views/UIApps/CreateApp.cshtml    |   2 +-
 .../Views/UIApps/UpdateCrowdfund.cshtml       |  10 +-
 .../Views/UIApps/UpdatePointOfSale.cshtml     |  18 +-
 BTCPayServer/Views/UIFido2/Create.cshtml      |   2 +-
 BTCPayServer/Views/UIHome/Home.cshtml         |  45 +-
 .../Views/UIInvoice/CreateInvoice.cshtml      |   2 +-
 BTCPayServer/Views/UIInvoice/Invoice.cshtml   |   4 +-
 BTCPayServer/Views/UIManage/APIKeys.cshtml    | 147 ++--
 BTCPayServer/Views/UIManage/AddApiKey.cshtml  | 205 ++---
 .../Views/UIManage/ChangePassword.cshtml      |   2 +-
 .../Views/UIManage/EnableAuthenticator.cshtml |  28 +-
 BTCPayServer/Views/UIManage/Index.cshtml      |  71 +-
 .../UIManage/NotificationSettings.cshtml      |  72 +-
 .../UIManage/TwoFactorAuthentication.cshtml   |   2 +-
 .../EditPaymentRequest.cshtml                 |   7 +-
 .../UIServer/CreateTemporaryFileUrl.cshtml    |   2 +-
 BTCPayServer/Views/UIServer/CreateUser.cshtml |   2 +-
 .../EditAmazonS3StorageProvider.cshtml        |   2 +-
 ...EditAzureBlobStorageStorageProvider.cshtml |   2 +-
 .../EditFileSystemStorageProvider.cshtml      |   2 +-
 ...itGoogleCloudStorageStorageProvider.cshtml |   2 +-
 .../Views/UIServer/ListPlugins.cshtml         |   8 +-
 .../Views/UIServer/Maintenance.cshtml         |   2 +-
 BTCPayServer/Views/UIServer/Storage.cshtml    |  18 +-
 BTCPayServer/Views/UIServer/Theme.cshtml      |   2 +-
 .../UIStorePullPayments/NewPullPayment.cshtml |   2 +-
 .../Views/UIStores/CheckoutAppearance.cshtml  |   2 +-
 .../Views/UIStores/CreateToken.cshtml         |   2 +-
 BTCPayServer/Views/UIStores/Dashboard.cshtml  | 165 ++--
 .../Views/UIStores/GeneralSettings.cshtml     |   4 +-
 .../Views/UIStores/Integrations.cshtml        |   2 +-
 BTCPayServer/Views/UIStores/ListTokens.cshtml |   2 +-
 .../Views/UIStores/ModifyWebhook.cshtml       |   2 +-
 BTCPayServer/Views/UIStores/PayButton.cshtml  |  68 +-
 BTCPayServer/Views/UIStores/Rates.cshtml      |   2 +-
 BTCPayServer/Views/UIStores/StoreUsers.cshtml |   2 +-
 BTCPayServer/Views/UIStores/Webhooks.cshtml   |   2 +-
 .../Views/UIUserStores/CreateStore.cshtml     |   2 +-
 .../wwwroot/main/bootstrap/bootstrap.css      | 816 +++++++++++++++++-
 BTCPayServer/wwwroot/main/site.css            |  22 +
 41 files changed, 1272 insertions(+), 488 deletions(-)

diff --git a/BTCPayServer/Views/Shared/EmailsBody.cshtml b/BTCPayServer/Views/Shared/EmailsBody.cshtml
index ebad35de0..937f9f35a 100644
--- a/BTCPayServer/Views/Shared/EmailsBody.cshtml
+++ b/BTCPayServer/Views/Shared/EmailsBody.cshtml
@@ -1,7 +1,7 @@
 @model BTCPayServer.Models.ServerViewModels.EmailsViewModel
 
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <div class="d-flex align-items-center justify-content-between mb-4">
             <h3 class="mb-0">@ViewData["Title"]</h3>
             <div class="dropdown only-for-js" id="quick-fill">
@@ -22,7 +22,7 @@
 
 <form method="post" autocomplete="off">
     <div class="row">
-        <div class="col-lg-6">
+        <div class="col-xl-8 col-xxl-constrain">
             @if (!ViewContext.ModelState.IsValid)
             {
                 <div asp-validation-summary="All" class="text-danger"></div>
@@ -80,7 +80,7 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-md-6">
+        <div class="col-xl-8 col-xxl-constrain">
             <div class="form-group">
                 <h3 class="mt-5 mb-3">Testing</h3>
                 <p>
diff --git a/BTCPayServer/Views/UIApps/CreateApp.cshtml b/BTCPayServer/Views/UIApps/CreateApp.cshtml
index 331ed106d..7175a2b23 100644
--- a/BTCPayServer/Views/UIApps/CreateApp.cshtml
+++ b/BTCPayServer/Views/UIApps/CreateApp.cshtml
@@ -12,7 +12,7 @@
 <h2 class="mt-1 mb-4">@ViewData["Title"]</h2>
 
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <form asp-action="CreateApp">
             <div asp-validation-summary="ModelOnly" class="text-danger"></div>
             <div class="form-group">
diff --git a/BTCPayServer/Views/UIApps/UpdateCrowdfund.cshtml b/BTCPayServer/Views/UIApps/UpdateCrowdfund.cshtml
index bdabc6c10..b9bf40e6c 100644
--- a/BTCPayServer/Views/UIApps/UpdateCrowdfund.cshtml
+++ b/BTCPayServer/Views/UIApps/UpdateCrowdfund.cshtml
@@ -23,7 +23,7 @@
     <div asp-validation-summary="ModelOnly" class="text-danger"></div>
 
     <div class="row">
-        <div class="col-lg-6">
+        <div class="col-xl-8 col-xxl-constrain">
             <div class="form-group">
                 <label asp-for="AppName" class="form-label" data-required></label>
                 <input asp-for="AppName" class="form-control" required />
@@ -40,14 +40,14 @@
                 <span asp-validation-for="Tagline" class="text-danger"></span>
             </div>
         </div>
-        <div class="col-lg-9">
+        <div class="col-xl-10 col-xxl-constrain">
             <div class="form-group">
                 <label asp-for="Description" class="form-label" data-required></label>
                 <textarea asp-for="Description" rows="20" cols="40" class="form-control richtext"></textarea>
                 <span asp-validation-for="Description" class="text-danger"></span>
             </div>
         </div>
-        <div class="col-lg-6">
+        <div class="col-xl-8 col-xxl-constrain">
             <div class="form-group">
                 <label asp-for="TargetCurrency" class="form-label"></label>
                 <input asp-for="TargetCurrency" class="form-control" placeholder="Use store's default settings" />
@@ -106,10 +106,10 @@
                 <div class="text-muted" hidden="@(!Model.Enabled)">The crowdfund is visible to anyone. To make it only visible to you, disable this.</div>
             </div>
         </div>
-        <div class="col-lg-12">
+        <div class="col-xxl-constrain">
             <partial name="TemplateEditor" model="@(nameof(Model.PerksTemplate), "Perks")" />
         </div>
-        <div class="col-lg-6">
+        <div class="col-xl-8 col-xxl-constrain">
             <div class="form-group">
                 <label asp-for="PerksTemplate" class="form-label"></label>
                 <textarea asp-for="PerksTemplate" rows="10" cols="40" class="js-product-template form-control"></textarea>
diff --git a/BTCPayServer/Views/UIApps/UpdatePointOfSale.cshtml b/BTCPayServer/Views/UIApps/UpdatePointOfSale.cshtml
index b310ed0bf..69f5f5fe9 100644
--- a/BTCPayServer/Views/UIApps/UpdatePointOfSale.cshtml
+++ b/BTCPayServer/Views/UIApps/UpdatePointOfSale.cshtml
@@ -14,7 +14,7 @@
     <div asp-validation-summary="ModelOnly" class="text-danger"></div>
 
     <div class="row">
-        <div class="col-lg-6">
+        <div class="col-xl-8 col-xxl-constrain">
             <div class="form-group">
                 <label asp-for="AppName" class="form-label" data-required></label>
                 <input asp-for="AppName" class="form-control" required />
@@ -31,14 +31,14 @@
                 <span asp-validation-for="Currency" class="text-danger"></span>
             </div>
         </div>
-        <div class="col-lg-9">
+        <div class="col-xl-10 col-xxl-constrain">
             <div class="form-group">
                 <label asp-for="Description" class="form-label"></label>
                 <textarea asp-for="Description" rows="10" cols="40" class="form-control richtext"></textarea>
                 <span asp-validation-for="Description" class="text-danger"></span>
             </div>
         </div>
-        <div class="col-lg-12">
+        <div class="col-xxl-constrain">
             <partial name="TemplateEditor" model="@(nameof(Model.Template), "Products")" />
             <div class="form-group">
                 <label asp-for="Template" class="form-label"></label>
@@ -46,7 +46,7 @@
                 <span asp-validation-for="Template" class="text-danger"></span>
             </div>
         </div>
-        <div class="col-lg-6">
+        <div class="col-xl-8 col-xxl-constrain">
             <h3 class="mt-5 mb-4">Appearance</h3>
             <div class="form-group">
                 <label asp-for="DefaultView" class="form-label" data-required></label>
@@ -113,7 +113,7 @@
                 </div>
             </section>
         </div>
-        <div class="col-lg-9">
+        <div class="col-xl-8 col-xxl-constrain">
             <h3 class="mt-5 mb-2">Additional Options</h3>
             <div class="form-group">
                 <div class="accordion" id="additional">
@@ -130,12 +130,12 @@
                                 @if (Model.Example1 != null)
                                 {
                                     <span>For anything with a custom amount</span>
-                                    <pre><code class="html">@Model.Example1</code></pre>
+                                    <pre class="p-3">@Model.Example1</pre>
                                 }
                                 @if (Model.Example2 != null)
                                 {
                                     <span>For a specific item of your template</span>
-                                    <pre><code class="html">@Model.Example2</code></pre>
+                                    <pre class="p-3">@Model.Example2</pre>
                                 }
                             </div>
                         </div>
@@ -153,7 +153,7 @@
                                 @{
                                     var iframe = $"<iframe src='{(Url.Action("ViewPointOfSale", "UIAppsPublic", new { appId = Model.Id }, Context.Request.Scheme))}' style='max-width: 100%; border: 0;'></iframe>";
                                 }
-                                <pre><code class="html">@iframe</code></pre>
+                                <pre class="p-3">@iframe</pre>
                             </div>
                         </div>
                     </div>
@@ -194,7 +194,7 @@
                                     <span asp-validation-for="NotificationUrl" class="text-danger"></span>
                                 </div>
                                 <p>A <code>POST</code> callback will be sent to notification with the following form will be sent to <code>notificationUrl</code> once the enough is paid and once again once there is enough confirmations to the payment:</p>
-                                <pre><code class="json">@Model.ExampleCallback</code></pre>
+                                <pre class="p-3">@Model.ExampleCallback</pre>
                                 <p><strong>Never</strong> trust anything but <code>id</code>, <strong>ignore</strong> the other fields completely, an attacker can spoof those, they are present only for backward compatibility reason:</p>
                                 <p>
                                     <ul>
diff --git a/BTCPayServer/Views/UIFido2/Create.cshtml b/BTCPayServer/Views/UIFido2/Create.cshtml
index 4f72712ba..5ef5c113e 100644
--- a/BTCPayServer/Views/UIFido2/Create.cshtml
+++ b/BTCPayServer/Views/UIFido2/Create.cshtml
@@ -12,7 +12,7 @@
     <input type="hidden" name="name" id="name" value="@(ViewData.ContainsKey("CredentialName") ? ViewData["CredentialName"] : string.Empty)"/>
 </form>
 <div class="row">
-    <div class="col-lg-8">
+    <div class="col-xl-8">
         <div id="info-message" class="alert alert-info mb-3 d-none">
             <div class="d-flex align-items-center">
                 <span id="spinner" class="fa fa-spinner fa-spin me-3 fido-running" style="font-size:1.5rem"></span>
diff --git a/BTCPayServer/Views/UIHome/Home.cshtml b/BTCPayServer/Views/UIHome/Home.cshtml
index 95eeffff2..4c7b89e97 100644
--- a/BTCPayServer/Views/UIHome/Home.cshtml
+++ b/BTCPayServer/Views/UIHome/Home.cshtml
@@ -3,48 +3,21 @@
     ViewData["Title"] = "BTCPay Server";
 }
 
-@section PageHeadContent
-{
-    <style>
-        .list-group-item .image {
-            display: flex;
-            flex: 0 0 1rem;
-            align-items: center;
-            justify-content: center;
-        }
-        
-        .list-group-item .icon {
-            width: 1.5rem;
-            height: 1.5rem;
-            margin: 1rem;
-        }
-        
-        .list-group-item .content {
-            flex: 1;
-            padding: 1rem 0;
-        }
-    </style>
-}
-
 <partial name="_StatusMessage" />
 
 <h2>Welcome to your BTCPay Server</h2>
 
 @if (!Model.HasStore)
 {
-    <div class="row">
-        <div class="col-lg-9 col-xl-6">
-            <p class="lead text-secondary">To start accepting payments, set up a store.</p>
-        
-            <div class="list-group mt-4" id="SetupGuide">
-                <a asp-controller="UIUserStores" asp-action="CreateStore" id="SetupGuide-Store" class="list-group-item list-group-item-action d-flex align-items-center">
-                    <vc:icon symbol="new-store"/>
-                    <div class="content">
-                        <h5 class="mb-0">Create your store</h5>
-                    </div>
-                    <vc:icon symbol="caret-right"/>
-                </a>
+    <p class="lead text-secondary">To start accepting payments, set up a store.</p>
+
+    <div class="list-group mt-4" id="SetupGuide">
+        <a asp-controller="UIUserStores" asp-action="CreateStore" id="SetupGuide-Store" class="list-group-item list-group-item-action d-flex align-items-center">
+            <vc:icon symbol="new-store"/>
+            <div class="content">
+                <h5 class="mb-0">Create your store</h5>
             </div>
-        </div>
+            <vc:icon symbol="caret-right"/>
+        </a>
     </div>
 }
diff --git a/BTCPayServer/Views/UIInvoice/CreateInvoice.cshtml b/BTCPayServer/Views/UIInvoice/CreateInvoice.cshtml
index 47977f99d..d871a013f 100644
--- a/BTCPayServer/Views/UIInvoice/CreateInvoice.cshtml
+++ b/BTCPayServer/Views/UIInvoice/CreateInvoice.cshtml
@@ -30,7 +30,7 @@
 <h2 class="mt-1 mb-4">@ViewData["Title"]</h2>
 
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <form asp-action="CreateInvoice" method="post" id="create-invoice-form">
             <div asp-validation-summary="ModelOnly" class="text-danger"></div>
             @if (Model.StoreId != null)
diff --git a/BTCPayServer/Views/UIInvoice/Invoice.cshtml b/BTCPayServer/Views/UIInvoice/Invoice.cshtml
index eb7f570f7..c199dbb34 100644
--- a/BTCPayServer/Views/UIInvoice/Invoice.cshtml
+++ b/BTCPayServer/Views/UIInvoice/Invoice.cshtml
@@ -43,8 +43,8 @@
 <div class="invoice-details">
     <partial name="_StatusMessage" />
     <div class="row mb-5">
-        <h2 class="col-xs-12 col-lg-6 mb-4 mb-lg-0">@ViewData["Title"]</h2>
-        <div class="col-xs-12 col-lg-6 mb-2 mb-lg-0 text-lg-end">
+        <h2 class="col col-xl-6 mb-4 mb-xl-0">@ViewData["Title"]</h2>
+        <div class="col col-xl-6 mb-2 mb-xl-0 text-xl-end">
             <div class="d-inline-flex">
                 @if (Model.ShowCheckout)
                 {
diff --git a/BTCPayServer/Views/UIManage/APIKeys.cshtml b/BTCPayServer/Views/UIManage/APIKeys.cshtml
index 787b5158b..548b788fb 100644
--- a/BTCPayServer/Views/UIManage/APIKeys.cshtml
+++ b/BTCPayServer/Views/UIManage/APIKeys.cshtml
@@ -3,79 +3,84 @@
 @{
     ViewData.SetActivePage(ManageNavPages.APIKeys, "API Keys");
 }
-<div class="d-flex align-items-center justify-content-between mb-3">
-    <h3 class="mb-0">@ViewData["Title"]</h3>
-    <a class="btn btn-primary" asp-action="AddApiKey" id="AddApiKey">
-        <span class="fa fa-plus"></span>
-        Generate Key
-    </a>
-</div>
-<p>
-    The <a asp-controller="UIHome" asp-action="SwaggerDocs" target="_blank">BTCPay Server Greenfield API</a> offers programmatic access to your instance. You can manage your BTCPay
-    Server (e.g. stores, invoices, users) as well as automate workflows and integrations (see <a href="https://docs.btcpayserver.org/Development/GreenFieldExample/" rel="noreferrer noopener">use case examples</a>).
-    For that you need the API keys, which can be generated here. Find more information in the <a href="@Url.Action("SwaggerDocs", "UIHome")#section/Authentication" target="_blank" rel="noreferrer noopener">API authentication docs</a>.
-</p>
 
-@if (Model.ApiKeyDatas.Any())
-{
-    <table class="table table-lg">
-        <thead>
-            <tr>
-                <th>Label</th>
-                <th class="w-125px">Key</th>
-                <th>Permissions</th>
-                <th class="text-end">Actions</th>
-            </tr>
-        </thead>
-        <tbody>
-            @{
-                var index = 0;
-            }
-            @foreach (var keyData in Model.ApiKeyDatas)
-            {
-                <tr>
-                    <td>@keyData.Label</td>
-                    <td>
-                        <code class="hide-when-js">@keyData.Id</code>
-                        <a class="only-for-js" data-reveal-btn>Click to reveal</a>
-                        <div hidden>
-                            <code data-api-key>@keyData.Id</code>
-                            <a class="mt-2" data-clipboard-confirm>
-                                Copy to clipboard
-                            </a>
-                        </div>
-                    </td>
-                    <td>
-                        @{
-                            var permissions = keyData.GetBlob().Permissions;
-                        }
-                        @if (!permissions.Any())
-                        {
-                            <span class="text-warning">No permissions</span>
-                        }
-                        else
-                        {
-                            <ul>
-                                @foreach (var permission in Permission.ToPermissions(permissions).Select(c => c.ToString()).Distinct().ToArray())
-                                {
-                                    <li>
-                                        <code class="text-break">@permission</code>
-                                    </li>
+<div class="row">
+    <div class="col-xl-8 col-xxl-constrain">
+        <div class="d-flex align-items-center justify-content-between mb-3">
+            <h3 class="mb-0">@ViewData["Title"]</h3>
+            <a class="btn btn-primary" asp-action="AddApiKey" id="AddApiKey">
+                <span class="fa fa-plus"></span>
+                Generate Key
+            </a>
+        </div>
+        <p>
+            The <a asp-controller="UIHome" asp-action="SwaggerDocs" target="_blank">BTCPay Server Greenfield API</a> offers programmatic access to your instance. You can manage your BTCPay
+            Server (e.g. stores, invoices, users) as well as automate workflows and integrations (see <a href="https://docs.btcpayserver.org/Development/GreenFieldExample/" rel="noreferrer noopener">use case examples</a>).
+            For that you need the API keys, which can be generated here. Find more information in the <a href="@Url.Action("SwaggerDocs", "UIHome")#section/Authentication" target="_blank" rel="noreferrer noopener">API authentication docs</a>.
+        </p>
+
+        @if (Model.ApiKeyDatas.Any())
+        {
+            <table class="table table-lg">
+                <thead>
+                    <tr>
+                        <th>Label</th>
+                        <th class="w-125px">Key</th>
+                        <th>Permissions</th>
+                        <th class="text-end">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @{
+                        var index = 0;
+                    }
+                    @foreach (var keyData in Model.ApiKeyDatas)
+                    {
+                        <tr>
+                            <td>@keyData.Label</td>
+                            <td>
+                                <code class="hide-when-js">@keyData.Id</code>
+                                <a class="only-for-js" data-reveal-btn>Click to reveal</a>
+                                <div hidden>
+                                    <code data-api-key>@keyData.Id</code>
+                                    <a class="mt-2" data-clipboard-confirm>
+                                        Copy to clipboard
+                                    </a>
+                                </div>
+                            </td>
+                            <td>
+                                @{
+                                    var permissions = keyData.GetBlob().Permissions;
                                 }
-                            </ul>
-                        }
-                    </td>
-                    <td class="text-end">
-                        <a asp-action="DeleteAPIKey" asp-route-id="@keyData.Id" asp-controller="UIManage" data-bs-toggle="modal" data-bs-target="#ConfirmModal" data-description="Any application using the API key <strong>@(keyData.Label ?? keyData.Id)<strong> will immediately lose access." data-confirm-input="DELETE">Delete</a>
-                        <span>-</span>
-                        <button type="button" class="btn btn-link only-for-js p-0" data-qr="@index">Show QR</button>
-                    </td>
-                </tr>
-                index++;
-            }
-        </tbody>
-    </table>
-}
+                                @if (!permissions.Any())
+                                {
+                                    <span class="text-warning">No permissions</span>
+                                }
+                                else
+                                {
+                                    <ul>
+                                        @foreach (var permission in Permission.ToPermissions(permissions).Select(c => c.ToString()).Distinct().ToArray())
+                                        {
+                                            <li>
+                                                <code class="text-break">@permission</code>
+                                            </li>
+                                        }
+                                    </ul>
+                                }
+                            </td>
+                            <td class="text-end">
+                                <a asp-action="DeleteAPIKey" asp-route-id="@keyData.Id" asp-controller="UIManage" data-bs-toggle="modal" data-bs-target="#ConfirmModal" data-description="Any application using the API key <strong>@(keyData.Label ?? keyData.Id)<strong> will immediately lose access." data-confirm-input="DELETE">Delete</a>
+                                <span>-</span>
+                                <button type="button" class="btn btn-link only-for-js p-0" data-qr="@index">Show QR</button>
+                            </td>
+                        </tr>
+                        index++;
+                    }
+                </tbody>
+            </table>
+        }
+    </div>
+</div>
 
 <partial name="_Confirm" model="@(new ConfirmModel("Delete API key", "Any application using the API key will immediately lose access.", "Delete"))" />
 
diff --git a/BTCPayServer/Views/UIManage/AddApiKey.cshtml b/BTCPayServer/Views/UIManage/AddApiKey.cshtml
index 35e7e2c9c..8faa9222c 100644
--- a/BTCPayServer/Views/UIManage/AddApiKey.cshtml
+++ b/BTCPayServer/Views/UIManage/AddApiKey.cshtml
@@ -1,6 +1,5 @@
 @using BTCPayServer.Client
 @using BTCPayServer.Controllers
-@using BTCPayServer.Security.Greenfield
 @model UIManageController.AddApiKeyViewModel
 
 @{
@@ -28,109 +27,113 @@
 
 <h3 class="mb-3">@ViewData["Title"]</h3>
 
-<p>Generate a new api key to use BTCPay through its API.</p>
-
-<form method="post" asp-action="AddApiKey">
-    <div asp-validation-summary="All" class="text-danger"></div>
-
-    <div class="form-group">
-        <label asp-for="Label" class="form-label"></label>
-        <input asp-for="Label" class="form-control"/>
-        <span asp-validation-for="Label" class="text-danger"></span>
-    </div>
-
-    <h5 class="mt-4 mb-3">Permissions</h5>
-    <div class="list-group mb-4">
-        @for (int i = 0; i < Model.PermissionValues.Count; i++)
-        {
-            @if (Model.PermissionValues[i].Forbidden)
-            {
-                <input type="hidden" asp-for="PermissionValues[i].Value" value="false" />
-            }
-            else
-            {
-                <div class="list-group-item py-3">
-                    <input type="hidden" asp-for="PermissionValues[i].Permission" />
-                    @if (Policies.IsStorePolicy(Model.PermissionValues[i].Permission))
+<div class="row">
+    <div class="col-xl-8 col-xxl-constrain">
+        <p>Generate a new api key to use BTCPay through its API.</p>
+        
+        <form method="post" asp-action="AddApiKey">
+            <div asp-validation-summary="All" class="text-danger"></div>
+        
+            <div class="form-group">
+                <label asp-for="Label" class="form-label"></label>
+                <input asp-for="Label" class="form-control"/>
+                <span asp-validation-for="Label" class="text-danger"></span>
+            </div>
+        
+            <h5 class="mt-4 mb-3">Permissions</h5>
+            <div class="list-group mb-4">
+                @for (int i = 0; i < Model.PermissionValues.Count; i++)
+                {
+                    @if (Model.PermissionValues[i].Forbidden)
                     {
-                        <input type="hidden" asp-for="PermissionValues[i].StoreMode" value="@Model.PermissionValues[i].StoreMode" />
-                        @if (Model.PermissionValues[i].StoreMode == UIManageController.AddApiKeyViewModel.ApiKeyStoreMode.AllStores)
-                        {
-                            <div class="form-check">
-                                <input id="@Model.PermissionValues[i].Permission" type="checkbox" asp-for="PermissionValues[i].Value" class="form-check-input ms-n4"/>
-                                <label for="@Model.PermissionValues[i].Permission" class="h5 form-check-label me-2 mb-1">
-                                    <span class="me-lg-1">@Model.PermissionValues[i].Title</span>
-                                    <small class="text-muted text-break d-block my-2 d-lg-inline-block my-lg-0">@Model.PermissionValues[i].Permission</small>
-                                </label>
-                                <div>
-                                    <span asp-validation-for="PermissionValues[i].Value" class="text-danger"></span>
-                                    <div class="text-muted">@Model.PermissionValues[i].Description</div>
-                                    @if (Model.Stores.Any())
-                                    {
-                                        <button type="submit" class="btn btn-link p-0" name="command" value="@($"{Model.PermissionValues[i].Permission}:change-store-mode")">Select specific stores</button>
-                                    }
-                                </div>
-                            </div>
-                        }
-                        else
-                        {
-                            <h5 class="mb-1" id="@Model.PermissionValues[i].Permission">
-                                <span class="me-lg-1">@Model.PermissionValues[i].Title</span>
-                                <small class="text-muted text-break d-block my-2 d-lg-inline-block my-lg-0">@Model.PermissionValues[i].Permission</small>
-                            </h5>
-                            <div class="text-muted">@Model.PermissionValues[i].Description</div>
-                            <button type="submit" class="btn btn-link p-0" name="command" value="@($"{Model.PermissionValues[i].Permission}:change-store-mode")">Give permission to all stores instead</button>
-
-                            @if (!Model.Stores.Any())
-                            {
-                                <p class="text-warning mt-2 mb-0">
-                                    You currently have no stores configured.
-                                </p>
-                            }
-                            @for (var index = 0; index < Model.PermissionValues[i].SpecificStores.Count; index++)
-                            {
-                                <div class="input-group my-3">
-                                    @if (Model.PermissionValues[i].SpecificStores[index] == null)
-                                    {
-                                        <select asp-for="PermissionValues[i].SpecificStores[index]" class="form-select w-auto flex-grow-0" asp-items="@(new SelectList(Model.Stores.Where(data => !Model.PermissionValues[i].SpecificStores.Contains(data.Id)), nameof(StoreData.Id), nameof(StoreData.StoreName)))"></select>
-                                    }
-                                    else
-                                    {
-                                        var store = Model.Stores.SingleOrDefault(data => data.Id == Model.PermissionValues[i].SpecificStores[index]);
-                                        <select asp-for="PermissionValues[i].SpecificStores[index]" class="form-select w-auto flex-grow-0" asp-items="@(new SelectList(new[] {store}, nameof(StoreData.Id), nameof(StoreData.StoreName), store.Id))"></select>
-                                    }
-                                    <span asp-validation-for="PermissionValues[i].SpecificStores[index]" class="text-danger"></span>
-                                    <button type="submit" title="Remove Store Permission" name="command" value="@($"{Model.PermissionValues[i].Permission}:remove-store:{index}")" class="btn btn-danger">
-                                        Remove
-                                    </button>
-                                </div>
-                            }
-                            @if (Model.PermissionValues[i].SpecificStores.Count < Model.Stores.Length)
-                            {
-                                <div class="mt-3 mb-2">
-                                    <button type="submit" name="command" value="@($"{Model.PermissionValues[i].Permission}:add-store")" class="btn btn-secondary">Add another store</button>
-                                </div>
-                            }
-                        }
+                        <input type="hidden" asp-for="PermissionValues[i].Value" value="false" />
                     }
                     else
                     {
-                        <div class="form-check">
-                            <input id="@Model.PermissionValues[i].Permission" type="checkbox" asp-for="PermissionValues[i].Value" class="form-check-input ms-n4" />
-                            <label for="@Model.PermissionValues[i].Permission" class="h5 form-check-label me-2 mb-1">
-                                <span class="me-lg-1">@Model.PermissionValues[i].Title</span>
-                                <small class="text-muted text-break d-block my-2 d-lg-inline-block my-lg-0">@Model.PermissionValues[i].Permission</small>
-                            </label>
-                            <div>
-                                <span asp-validation-for="PermissionValues[i].Value" class="text-danger"></span>
-                                <span class="text-muted">@Model.PermissionValues[i].Description</span>
-                            </div>
-                        </div>  
+                        <div class="list-group-item py-3">
+                            <input type="hidden" asp-for="PermissionValues[i].Permission" />
+                            @if (Policies.IsStorePolicy(Model.PermissionValues[i].Permission))
+                            {
+                                <input type="hidden" asp-for="PermissionValues[i].StoreMode" value="@Model.PermissionValues[i].StoreMode" />
+                                @if (Model.PermissionValues[i].StoreMode == UIManageController.AddApiKeyViewModel.ApiKeyStoreMode.AllStores)
+                                {
+                                    <div class="form-check">
+                                        <input id="@Model.PermissionValues[i].Permission" type="checkbox" asp-for="PermissionValues[i].Value" class="form-check-input ms-n4"/>
+                                        <label for="@Model.PermissionValues[i].Permission" class="h5 form-check-label me-2 mb-1">
+                                            <span class="me-lg-1">@Model.PermissionValues[i].Title</span>
+                                            <small class="text-muted text-break d-block my-2 d-lg-inline-block my-lg-0">@Model.PermissionValues[i].Permission</small>
+                                        </label>
+                                        <div>
+                                            <span asp-validation-for="PermissionValues[i].Value" class="text-danger"></span>
+                                            <div class="text-muted">@Model.PermissionValues[i].Description</div>
+                                            @if (Model.Stores.Any())
+                                            {
+                                                <button type="submit" class="btn btn-link p-0" name="command" value="@($"{Model.PermissionValues[i].Permission}:change-store-mode")">Select specific stores</button>
+                                            }
+                                        </div>
+                                    </div>
+                                }
+                                else
+                                {
+                                    <h5 class="mb-1" id="@Model.PermissionValues[i].Permission">
+                                        <span class="me-lg-1">@Model.PermissionValues[i].Title</span>
+                                        <small class="text-muted text-break d-block my-2 d-lg-inline-block my-lg-0">@Model.PermissionValues[i].Permission</small>
+                                    </h5>
+                                    <div class="text-muted">@Model.PermissionValues[i].Description</div>
+                                    <button type="submit" class="btn btn-link p-0" name="command" value="@($"{Model.PermissionValues[i].Permission}:change-store-mode")">Give permission to all stores instead</button>
+        
+                                    @if (!Model.Stores.Any())
+                                    {
+                                        <p class="text-warning mt-2 mb-0">
+                                            You currently have no stores configured.
+                                        </p>
+                                    }
+                                    @for (var index = 0; index < Model.PermissionValues[i].SpecificStores.Count; index++)
+                                    {
+                                        <div class="input-group my-3">
+                                            @if (Model.PermissionValues[i].SpecificStores[index] == null)
+                                            {
+                                                <select asp-for="PermissionValues[i].SpecificStores[index]" class="form-select w-auto flex-grow-0" asp-items="@(new SelectList(Model.Stores.Where(data => !Model.PermissionValues[i].SpecificStores.Contains(data.Id)), nameof(StoreData.Id), nameof(StoreData.StoreName)))"></select>
+                                            }
+                                            else
+                                            {
+                                                var store = Model.Stores.SingleOrDefault(data => data.Id == Model.PermissionValues[i].SpecificStores[index]);
+                                                <select asp-for="PermissionValues[i].SpecificStores[index]" class="form-select w-auto flex-grow-0" asp-items="@(new SelectList(new[] {store}, nameof(StoreData.Id), nameof(StoreData.StoreName), store.Id))"></select>
+                                            }
+                                            <span asp-validation-for="PermissionValues[i].SpecificStores[index]" class="text-danger"></span>
+                                            <button type="submit" title="Remove Store Permission" name="command" value="@($"{Model.PermissionValues[i].Permission}:remove-store:{index}")" class="btn btn-danger">
+                                                Remove
+                                            </button>
+                                        </div>
+                                    }
+                                    @if (Model.PermissionValues[i].SpecificStores.Count < Model.Stores.Length)
+                                    {
+                                        <div class="mt-3 mb-2">
+                                            <button type="submit" name="command" value="@($"{Model.PermissionValues[i].Permission}:add-store")" class="btn btn-secondary">Add another store</button>
+                                        </div>
+                                    }
+                                }
+                            }
+                            else
+                            {
+                                <div class="form-check">
+                                    <input id="@Model.PermissionValues[i].Permission" type="checkbox" asp-for="PermissionValues[i].Value" class="form-check-input ms-n4" />
+                                    <label for="@Model.PermissionValues[i].Permission" class="h5 form-check-label me-2 mb-1">
+                                        <span class="me-lg-1">@Model.PermissionValues[i].Title</span>
+                                        <small class="text-muted text-break d-block my-2 d-lg-inline-block my-lg-0">@Model.PermissionValues[i].Permission</small>
+                                    </label>
+                                    <div>
+                                        <span asp-validation-for="PermissionValues[i].Value" class="text-danger"></span>
+                                        <span class="text-muted">@Model.PermissionValues[i].Description</span>
+                                    </div>
+                                </div>  
+                            }
+                        </div>
                     }
-                </div>
-            }
-        }
+                }
+            </div>
+        
+            <button type="submit" class="btn btn-primary" id="Generate">Generate API Key</button>
+        </form>
     </div>
-
-    <button type="submit" class="btn btn-primary" id="Generate">Generate API Key</button>
-</form>
+</div>
diff --git a/BTCPayServer/Views/UIManage/ChangePassword.cshtml b/BTCPayServer/Views/UIManage/ChangePassword.cshtml
index 4ff64ea55..db592f711 100644
--- a/BTCPayServer/Views/UIManage/ChangePassword.cshtml
+++ b/BTCPayServer/Views/UIManage/ChangePassword.cshtml
@@ -4,7 +4,7 @@
 }
 <h3 class="mb-4">@ViewData["Title"]</h3>
 <div class="row">
-    <div class="col-md-6">
+    <div class="col-xl-8 col-xxl-constrain">
         @if (!ViewContext.ModelState.IsValid)
         {
             <div asp-validation-summary="All" class="text-danger"></div>
diff --git a/BTCPayServer/Views/UIManage/EnableAuthenticator.cshtml b/BTCPayServer/Views/UIManage/EnableAuthenticator.cshtml
index b47324350..01fc6d7b0 100644
--- a/BTCPayServer/Views/UIManage/EnableAuthenticator.cshtml
+++ b/BTCPayServer/Views/UIManage/EnableAuthenticator.cshtml
@@ -3,7 +3,7 @@
     ViewData.SetActivePage(ManageNavPages.TwoFactorAuthentication, "Enable authenticator app");
 }
 
-<div>
+<div class="col-xl-8 col-xxl-constrain">
     <h3>Enable Authenticator</h3>
     <p class="my-3">To use an authenticator app go through the following steps:</p>
     <ol class="list">
@@ -36,22 +36,18 @@
                 Your two-factor authenticator app will provide you with a unique code.
                 <br/>
                 Enter the code in the confirmation box below.
-            </p>
-            <div class="row">
-                <div class="col-md-6">
-                    <form method="post">
-                        <input asp-for="AuthenticatorUri" type="hidden" />
-                        <input asp-for="SharedKey" type="hidden" />
-                        <div class="form-group">
-                            <label asp-for="Code" class="form-label">Verification Code</label>
-                            <input asp-for="Code" class="form-control" autocomplete="off" />
-                            <span asp-validation-for="Code" class="text-danger"></span>
-                        </div>
-                        <button type="submit" class="btn btn-primary mt-2">Verify</button>
-                        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
-                    </form>
+            </p>    
+            <form method="post">
+                <input asp-for="AuthenticatorUri" type="hidden" />
+                <input asp-for="SharedKey" type="hidden" />
+                <div class="form-group">
+                    <label asp-for="Code" class="form-label">Verification Code</label>
+                    <input asp-for="Code" class="form-control" autocomplete="off" />
+                    <span asp-validation-for="Code" class="text-danger"></span>
                 </div>
-            </div>
+                <button type="submit" class="btn btn-primary mt-2">Verify</button>
+                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
+            </form>
         </li>
     </ol>
 </div>
diff --git a/BTCPayServer/Views/UIManage/Index.cshtml b/BTCPayServer/Views/UIManage/Index.cshtml
index 8b3774278..1052ac57f 100644
--- a/BTCPayServer/Views/UIManage/Index.cshtml
+++ b/BTCPayServer/Views/UIManage/Index.cshtml
@@ -3,43 +3,46 @@
     ViewData.SetActivePage(ManageNavPages.Index, "Update your account");
 }
 <h3 class="mb-4">@ViewData["Title"]</h3>
-<form method="post">
-    @if (!ViewContext.ModelState.IsValid)
-    {
-        <div asp-validation-summary="All" class="text-danger"></div>
-    }
-    <div class="form-group row">
-        <div class="col-md-6 mb-3">
-            <label asp-for="Username" class="form-label"></label>
-            <input asp-for="Username" class="form-control" disabled/>
+
+<div class="col-xxl-constrain col-xl-8">
+    <form method="post">
+        @if (!ViewContext.ModelState.IsValid)
+        {
+            <div asp-validation-summary="All" class="text-danger"></div>
+        }
+        <div class="form-group row">
+            <div class="col-md-6 mb-3">
+                <label asp-for="Username" class="form-label"></label>
+                <input asp-for="Username" class="form-control" disabled />
+            </div>
         </div>
-    </div>
-    <div class="form-group row">
-        <div class="col-md-6 mb-3">
-            <label asp-for="Email" class="form-label"></label>
-            <input asp-for="Email" class="form-control"/>
-            <span asp-validation-for="Email" class="text-danger"></span>
+        <div class="form-group row">
+            <div class="col-md-6 mb-3">
+                <label asp-for="Email" class="form-label"></label>
+                <input asp-for="Email" class="form-control" />
+                <span asp-validation-for="Email" class="text-danger"></span>
+            </div>
+            <div class="col-md-6 mb-3 d-flex align-items-end">
+                @if (Model.IsEmailConfirmed)
+                {
+                    <span class="badge bg-success p-2 my-1">
+                        <span class="fa fa-check"></span>
+                        confirmed
+                    </span>
+                }
+                else
+                {
+                    <button asp-action="SendVerificationEmail" class="btn btn-secondary">Send verification email</button>
+                }
+            </div>
         </div>
-        <div class="col-md-6 mb-3 d-flex align-items-end">
-            @if (Model.IsEmailConfirmed)
-            {
-                <span class="badge bg-success p-2 my-1">
-                    <span class="fa fa-check"></span>
-                    confirmed
-                </span>
-            }
-            else
-            {
-                <button asp-action="SendVerificationEmail" class="btn btn-secondary">Send verification email</button>
-            }
+        <button type="submit" id="save" class="btn btn-primary">Save</button>
+        <h3 class="mt-5 mb-4">Delete Account</h3>
+        <div id="danger-zone">
+            <a id="delete-user" class="btn btn-outline-danger mb-5" data-confirm-input="DELETE" data-bs-toggle="modal" data-bs-target="#ConfirmModal" asp-action="DeleteUserPost" data-description="This action will also delete all stores, invoices, apps and data associated with the user.">Delete Account</a>
         </div>
-    </div>
-    <button type="submit" id="save" class="btn btn-primary">Save</button>
-    <h3 class="mt-5 mb-4">Delete Account</h3>
-    <div id="danger-zone">
-        <a id="delete-user" class="btn btn-outline-danger mb-5" data-confirm-input="DELETE" data-bs-toggle="modal" data-bs-target="#ConfirmModal" asp-action="DeleteUserPost" data-description="This action will also delete all stores, invoices, apps and data associated with the user.">Delete Account</a>
-    </div>
-</form>
+    </form>
+</div>
 
 <partial name="_Confirm"
          model="@(new ConfirmModel("Delete user", "The user will be permanently deleted. This action will also delete all stores, invoices, apps and data associated with your user.", "Delete", actionName: nameof(BTCPayServer.Controllers.UIManageController.DeleteUserPost)))"/>
diff --git a/BTCPayServer/Views/UIManage/NotificationSettings.cshtml b/BTCPayServer/Views/UIManage/NotificationSettings.cshtml
index 6ef22ff8b..2af2a3d2e 100644
--- a/BTCPayServer/Views/UIManage/NotificationSettings.cshtml
+++ b/BTCPayServer/Views/UIManage/NotificationSettings.cshtml
@@ -6,37 +6,41 @@
 }
 <h3 class="mb-3">@ViewData["Title"]</h3>
 
-<form method="post" asp-action="NotificationSettings">
-    @if (Model.All)
-    {
-        <div>
-            All notifications are disabled.
-            <button type="submit" class="btn btn-primary" name="command" value="enable-all">Enable</button>
-        </div>
-    }
-    else
-    {
-        <div class="form-group">
-            <p>Do not receive notifications for</p>
-            <div class="card">
-                <ul class="list-group list-group-flush">
-                    @for (var index = 0; index < Model.DisabledNotifications.Count; index++)
-                    {
-                        var item = Model.DisabledNotifications[index];
-                        <li class="list-group-item">
-                            <input type="hidden"  asp-for="DisabledNotifications[index].Value"/> 
-                            <input type="checkbox" asp-for="DisabledNotifications[index].Selected" class="form-check-input form-check-inline"/>
-                            <label class="mb-0 cursor-pointer" asp-for="DisabledNotifications[index].Selected">
-                                @item.Text
-                            </label>
-                        </li>
-                    }
-                </ul>
-            </div>
-        </div>
-        <div class="form-group mt-4">
-            <button type="submit" class="btn btn-primary" name="command" value="update">Save</button>
-            <button type="submit" class="btn btn-secondary ms-3" name="command" value="disable-all">Disable all</button>
-        </div>
-    }
-</form>
\ No newline at end of file
+<div class="row">
+    <div class="col-xl-8 col-xxl-constrain">
+        <form method="post" asp-action="NotificationSettings">
+            @if (Model.All)
+            {
+                <div>
+                    All notifications are disabled.
+                    <button type="submit" class="btn btn-primary" name="command" value="enable-all">Enable</button>
+                </div>
+            }
+            else
+            {
+                <div class="form-group">
+                    <p>Do not receive notifications for</p>
+                    <div class="card">
+                        <ul class="list-group list-group-flush">
+                            @for (var index = 0; index < Model.DisabledNotifications.Count; index++)
+                            {
+                                var item = Model.DisabledNotifications[index];
+                                <li class="list-group-item">
+                                    <input type="hidden"  asp-for="DisabledNotifications[index].Value"/> 
+                                    <input type="checkbox" asp-for="DisabledNotifications[index].Selected" class="form-check-input form-check-inline"/>
+                                    <label class="mb-0 cursor-pointer" asp-for="DisabledNotifications[index].Selected">
+                                        @item.Text
+                                    </label>
+                                </li>
+                            }
+                        </ul>
+                    </div>
+                </div>
+                <div class="form-group mt-4">
+                    <button type="submit" class="btn btn-primary" name="command" value="update">Save</button>
+                    <button type="submit" class="btn btn-secondary ms-3" name="command" value="disable-all">Disable all</button>
+                </div>
+            }
+        </form>
+    </div>
+</div>
diff --git a/BTCPayServer/Views/UIManage/TwoFactorAuthentication.cshtml b/BTCPayServer/Views/UIManage/TwoFactorAuthentication.cshtml
index fe7fad97c..5315e547e 100644
--- a/BTCPayServer/Views/UIManage/TwoFactorAuthentication.cshtml
+++ b/BTCPayServer/Views/UIManage/TwoFactorAuthentication.cshtml
@@ -6,7 +6,7 @@
 <h3 class="mb-3">@ViewData["Title"]</h3>
 
 <div class="row">
-    <div class="col-lg-10 col-xl-8">
+    <div class="col-xl-8 col-xxl-constrain">
         <p>
             Two-Factor Authentication (2FA) is an additional measure to protect your account.
             In addition to your password you will be asked for a second proof on login.
diff --git a/BTCPayServer/Views/UIPaymentRequest/EditPaymentRequest.cshtml b/BTCPayServer/Views/UIPaymentRequest/EditPaymentRequest.cshtml
index 427f8616b..ba881897f 100644
--- a/BTCPayServer/Views/UIPaymentRequest/EditPaymentRequest.cshtml
+++ b/BTCPayServer/Views/UIPaymentRequest/EditPaymentRequest.cshtml
@@ -21,7 +21,7 @@
 
 <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">
+        <div class="col-xl-8 col-xxl-constrain">
             <div asp-validation-summary="ModelOnly" class="text-danger"></div>
             <div class="form-group">
                 <label asp-for="Title" class="form-label" data-required></label>
@@ -66,13 +66,14 @@
                 </p>
             </div>
         </div>
-        <div class="col-lg-9">
+        <div class="col-xl-10 col-xxl-constrain">
             <div class="form-group">
                 <label asp-for="Description" class="form-label"></label>
                 <textarea asp-for="Description" class="form-control richtext"></textarea>
                 <span asp-validation-for="Description" class="text-danger"></span>
             </div>
-            
+        </div>
+        <div class="col-xl-8 col-xxl-constrain">
             <h4 class="mt-5 mb-2">Additional Options</h4>
             <div class="form-group">
                 <div class="accordion" id="additional">
diff --git a/BTCPayServer/Views/UIServer/CreateTemporaryFileUrl.cshtml b/BTCPayServer/Views/UIServer/CreateTemporaryFileUrl.cshtml
index 78711c970..f32c5c804 100644
--- a/BTCPayServer/Views/UIServer/CreateTemporaryFileUrl.cshtml
+++ b/BTCPayServer/Views/UIServer/CreateTemporaryFileUrl.cshtml
@@ -7,7 +7,7 @@
 <h3 class="mb-4">@ViewData["Title"]</h3>
 
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         @if (!ViewContext.ModelState.IsValid)
         {
             <div asp-validation-summary="All" class="text-danger"></div>
diff --git a/BTCPayServer/Views/UIServer/CreateUser.cshtml b/BTCPayServer/Views/UIServer/CreateUser.cshtml
index be5cb1290..f856d35ea 100644
--- a/BTCPayServer/Views/UIServer/CreateUser.cshtml
+++ b/BTCPayServer/Views/UIServer/CreateUser.cshtml
@@ -6,7 +6,7 @@
 <h3 class="mb-4">@ViewData["Title"]</h3>
 
 <div class="row">
-    <div class="col-md-6">
+    <div class="col-xl-6 col-xxl-constrain">
         <form method="post" asp-action="CreateUser">
             <div asp-validation-summary="ModelOnly" class="text-danger"></div>
 
diff --git a/BTCPayServer/Views/UIServer/EditAmazonS3StorageProvider.cshtml b/BTCPayServer/Views/UIServer/EditAmazonS3StorageProvider.cshtml
index f8341b2a8..2d6cd0d3d 100644
--- a/BTCPayServer/Views/UIServer/EditAmazonS3StorageProvider.cshtml
+++ b/BTCPayServer/Views/UIServer/EditAmazonS3StorageProvider.cshtml
@@ -6,7 +6,7 @@
 <h3 class="mb-4">@ViewData["Title"]</h3>
 
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <form method="post">
             <div class="form-group">
                 <label asp-for="ContainerName" class="form-label"></label>
diff --git a/BTCPayServer/Views/UIServer/EditAzureBlobStorageStorageProvider.cshtml b/BTCPayServer/Views/UIServer/EditAzureBlobStorageStorageProvider.cshtml
index 67ca486cf..e896d7a36 100644
--- a/BTCPayServer/Views/UIServer/EditAzureBlobStorageStorageProvider.cshtml
+++ b/BTCPayServer/Views/UIServer/EditAzureBlobStorageStorageProvider.cshtml
@@ -6,7 +6,7 @@
 <h3 class="mb-4">@ViewData["Title"]</h3>
 
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <form method="post">
             <div class="form-group">
                 <label asp-for="ContainerName" class="form-label">Container Name</label>
diff --git a/BTCPayServer/Views/UIServer/EditFileSystemStorageProvider.cshtml b/BTCPayServer/Views/UIServer/EditFileSystemStorageProvider.cshtml
index 32f5ac72f..f0dd4acda 100644
--- a/BTCPayServer/Views/UIServer/EditFileSystemStorageProvider.cshtml
+++ b/BTCPayServer/Views/UIServer/EditFileSystemStorageProvider.cshtml
@@ -7,7 +7,7 @@
 
 <p>Any uploaded files are being saved on the same machine that hosts BTCPay; please pay attention to your storage space.</p>
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <a asp-action="Storage" asp-route-forceChoice="true">Change Storage provider</a>
     </div>
 </div>
diff --git a/BTCPayServer/Views/UIServer/EditGoogleCloudStorageStorageProvider.cshtml b/BTCPayServer/Views/UIServer/EditGoogleCloudStorageStorageProvider.cshtml
index 74ab5bce0..d9ff7cecc 100644
--- a/BTCPayServer/Views/UIServer/EditGoogleCloudStorageStorageProvider.cshtml
+++ b/BTCPayServer/Views/UIServer/EditGoogleCloudStorageStorageProvider.cshtml
@@ -6,7 +6,7 @@
 <h3 class="mb-4">@ViewData["Title"]</h3>
 
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <form method="post">
             <div class="form-group">
                 <label asp-for="ContainerName" class="form-label">Container Name</label>
diff --git a/BTCPayServer/Views/UIServer/ListPlugins.cshtml b/BTCPayServer/Views/UIServer/ListPlugins.cshtml
index 1728f4190..e7da13569 100644
--- a/BTCPayServer/Views/UIServer/ListPlugins.cshtml
+++ b/BTCPayServer/Views/UIServer/ListPlugins.cshtml
@@ -136,11 +136,10 @@
         @foreach (var plugin in Model.Installed)
         {
             var matchedAvailable = Model.Available.Where(availablePlugin => availablePlugin.Identifier == plugin.Identifier && availablePlugin.Version > plugin.Version).OrderByDescending(availablePlugin => availablePlugin.Version).ToArray();
-           
             var x = matchedAvailable.FirstOrDefault(availablePlugin => DependenciesMet(availablePlugin.Dependencies)) ?? matchedAvailable.FirstOrDefault();
             var updateAvailable = !plugin.SystemPlugin && matchedAvailable.Any();
             var tabId = plugin.Identifier.ToLowerInvariant().Replace(".", "_");
-            <div class="col col-12 col-lg-6 mb-4">
+            <div class="col col-12 col-md-6 col-lg-12 col-xl-6 col-xxl-4 mb-4">
                 <div class="card h-100">
                     <div class="card-body">
                         <h4 class="card-title d-inline-block" title="@plugin.Identifier" data-bs-toggle="tooltip">@plugin.Name</h4>
@@ -257,11 +256,10 @@
     <div class="row mb-4">
         @foreach (var plugin in availableAndNotInstalled)
         {
-            
             var recommended = BTCPayServerOptions.RecommendedPlugins.Contains(plugin.Identifier.ToLowerInvariant());
             var disabled = Model.Disabled?.Contains(plugin.Identifier) ?? false;
             
-            <div class="col col-12 col-lg-6 mb-4">
+            <div class="col col-12 col-md-6 col-lg-12 col-xl-6 col-xxl-4 mb-4">
                 <div class="card h-100">
                     <div class="card-body">
                         <h4 class="card-title d-inline-block" data-bs-toggle="tooltip" title="@plugin.Identifier">@plugin.Name</h4>
@@ -338,7 +336,7 @@
         Upload Plugin
     </button>
     <div class="row collapse" id="manual-upload">
-        <div class="col col-12 col-lg-6 mb-4">
+        <div class="col col-xl-6 mb-4">
             <div class="card">
                 <div class="card-body">
                     <h4 class="card-title">Add plugin manually</h4>
diff --git a/BTCPayServer/Views/UIServer/Maintenance.cshtml b/BTCPayServer/Views/UIServer/Maintenance.cshtml
index e123c3b02..88c140d23 100644
--- a/BTCPayServer/Views/UIServer/Maintenance.cshtml
+++ b/BTCPayServer/Views/UIServer/Maintenance.cshtml
@@ -7,7 +7,7 @@
 
 <form method="post">
     <div class="row mb-5">
-        <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
             <h4 class="mb-2">Domain name</h4>
             <p>You can change the domain name of your server by following <a href="https://docs.btcpayserver.org/Deployment/ChangeDomain/" target="_blank" rel="noreferrer noopener">this guide</a>.</p>
 
diff --git a/BTCPayServer/Views/UIServer/Storage.cshtml b/BTCPayServer/Views/UIServer/Storage.cshtml
index 0c14ea7de..65c68151b 100644
--- a/BTCPayServer/Views/UIServer/Storage.cshtml
+++ b/BTCPayServer/Views/UIServer/Storage.cshtml
@@ -1,4 +1,3 @@
-@using BTCPayServer.Storage.Models
 @model BTCPayServer.Storage.ViewModels.ChooseStorageViewModel
 @{
     ViewData.SetActivePage(ServerNavPages.Services, "Storage");
@@ -6,15 +5,14 @@
 
 <h3 class="mb-4">@ViewData["Title"]</h3>
 
-@if (Model.ShowChangeWarning)
-{
-    <div class="alert alert-danger mb-4">
-        If you change your configured storage provider, your current files will become inaccessible. 
-    </div>
-}
-
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
+        @if (Model.ShowChangeWarning)
+        {
+            <div class="alert alert-danger mb-4">
+                If you change your configured storage provider, your current files will become inaccessible. 
+            </div>
+        }
         <form method="post">
             @if (!ViewContext.ModelState.IsValid)
             {
@@ -22,7 +20,7 @@
             }
             <div class="form-group">
                 <label asp-for="Provider" class="form-label"></label>
-                <select asp-for="Provider" asp-items="@Model.ProvidersList" class="form-select"></select>
+                <select asp-for="Provider" asp-items="@Model.ProvidersList" class="form-select w-auto"></select>
             </div>
             <button type="submit" class="btn btn-primary mt-2" name="command" value="Save">Next</button>
         </form>
diff --git a/BTCPayServer/Views/UIServer/Theme.cshtml b/BTCPayServer/Views/UIServer/Theme.cshtml
index f7638b348..383c1e7ca 100644
--- a/BTCPayServer/Views/UIServer/Theme.cshtml
+++ b/BTCPayServer/Views/UIServer/Theme.cshtml
@@ -10,7 +10,7 @@
 <h3 class="mb-4">@ViewData["Title"]</h3>
 
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <form method="post">
             <h4 class="mb-3">Custom theme</h4>
             <p>Use the default Light or Dark Themes, or provide a CSS theme file below.</p>
diff --git a/BTCPayServer/Views/UIStorePullPayments/NewPullPayment.cshtml b/BTCPayServer/Views/UIStorePullPayments/NewPullPayment.cshtml
index ffcb41971..a96644ccf 100644
--- a/BTCPayServer/Views/UIStorePullPayments/NewPullPayment.cshtml
+++ b/BTCPayServer/Views/UIStorePullPayments/NewPullPayment.cshtml
@@ -10,7 +10,7 @@
 <h2 class="mt-1 mb-4">@ViewData["Title"]</h2>
 
 <div class="row">
-    <div class="col-md-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <form method="post"
               asp-route-walletId="@Context.GetRouteValue("walletId")"
               asp-action="NewPullPayment">
diff --git a/BTCPayServer/Views/UIStores/CheckoutAppearance.cshtml b/BTCPayServer/Views/UIStores/CheckoutAppearance.cshtml
index fbc85fcd2..b53a307de 100644
--- a/BTCPayServer/Views/UIStores/CheckoutAppearance.cshtml
+++ b/BTCPayServer/Views/UIStores/CheckoutAppearance.cshtml
@@ -6,7 +6,7 @@
 }
 
 <div class="row">
-    <div class="col-lg-8">
+    <div class="col-xxl-constrain col-xl-8">
         <form method="post">
             @if (!ViewContext.ModelState.IsValid)
             {
diff --git a/BTCPayServer/Views/UIStores/CreateToken.cshtml b/BTCPayServer/Views/UIStores/CreateToken.cshtml
index 77b121ea0..1721406f7 100644
--- a/BTCPayServer/Views/UIStores/CreateToken.cshtml
+++ b/BTCPayServer/Views/UIStores/CreateToken.cshtml
@@ -6,7 +6,7 @@
     ViewBag.ShowStores = ViewBag.ShowStores ?? false;
 }
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xxl-constrain col-xl-8">
         <h3 class="mb-4">@ViewData["Title"]</h3>
         <form method="post">
             <div class="form-group">
diff --git a/BTCPayServer/Views/UIStores/Dashboard.cshtml b/BTCPayServer/Views/UIStores/Dashboard.cshtml
index 64d96b997..c31e5ddbc 100644
--- a/BTCPayServer/Views/UIStores/Dashboard.cshtml
+++ b/BTCPayServer/Views/UIStores/Dashboard.cshtml
@@ -4,29 +4,6 @@
     var isReady = Model.WalletEnabled || Model.LightningEnabled;
 }
 
-@section PageHeadContent
-{
-    <style>
-        .list-group-item .image {
-            display: flex;
-            flex: 0 0 1rem;
-            align-items: center;
-            justify-content: center;
-        }
-        
-        .list-group-item .icon {
-            width: 1.5rem;
-            height: 1.5rem;
-            margin: 1rem;
-        }
-        
-        .list-group-item .content {
-            flex: 1;
-            padding: 1rem 0;
-        }
-    </style>
-}
-
 <partial name="_StatusMessage" />
 
 <h2 class="mt-1 mb-3">@ViewData["Title"]</h2>
@@ -40,79 +17,75 @@ else
     <p class="lead text-secondary">To start accepting payments, set up a wallet or a Lightning node.</p>
 }
 
-<div class="row">
-    <div class="col-md-7 col-xl-5">
-        <div class="list-group" id="SetupGuide">
-            <div class="list-group-item d-flex align-items-center" id="SetupGuide-StoreDone">
-                <vc:icon symbol="done"/>
-                <div class="content">
-                    <h5 class="mb-0 text-success">Create your store</h5>
-                </div>
-            </div>
-            @if (!Model.WalletEnabled)
-            {
-                if (!Model.AltcoinsBuild)
-                {
-                    <a asp-controller="UIStores" asp-action="SetupWallet" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="BTC" id="SetupGuide-Wallet" class="list-group-item list-group-item-action d-flex align-items-center order-1">
-                        <vc:icon symbol="new-wallet"/>
-                        <div class="content">
-                            <h5 class="mb-0">Set up a wallet</h5>
-                        </div>
-                        <vc:icon symbol="caret-right"/>
-                    </a>
-                }
-                else
-                {
-                    <a asp-controller="UIStores" asp-action="GeneralSettings" asp-route-storeId="@Model.StoreId" id="SetupGuide-Wallet" class="list-group-item list-group-item-action d-flex align-items-center order-1">
-                        <vc:icon symbol="new-wallet"/>
-                        <div class="content">
-                            <h5 class="mb-0">Set up a wallet</h5>
-                        </div>
-                        <vc:icon symbol="caret-right"/>
-                    </a>
-                }
-            }
-            else
-            {
-                <div class="list-group-item d-flex align-items-center" id="SetupGuide-WalletDone">
-                    <vc:icon symbol="done"/>
-                    <div class="content">
-                        <h5 class="mb-0 text-success">Set up a wallet</h5>
-                    </div>
-                </div>
-            }
-            @if (!Model.LightningEnabled)
-            {
-                if (!Model.AltcoinsBuild)
-                {
-                    <a asp-controller="UIStores" asp-action="SetupLightningNode" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="BTC" id="SetupGuide-Lightning" class="list-group-item list-group-item-action d-flex align-items-center order-1">
-                        <vc:icon symbol="new-wallet"/>
-                        <div class="content">
-                            <h5 class="mb-0">Set up a Lightning node</h5>
-                        </div>
-                        <vc:icon symbol="caret-right"/>
-                    </a>
-                }
-                else
-                {
-                    <a asp-controller="UIStores" asp-action="GeneralSettings" asp-route-storeId="@Model.StoreId" id="SetupGuide-Lightning" class="list-group-item list-group-item-action d-flex align-items-center order-1">
-                        <vc:icon symbol="new-wallet"/>
-                        <div class="content">
-                            <h5 class="mb-0">Set up a Lightning node</h5>
-                        </div>
-                        <vc:icon symbol="caret-right"/>
-                    </a>
-                }
-            }
-            else
-            {
-                <div class="list-group-item d-flex align-items-center" id="SetupGuide-LightningDone">
-                    <vc:icon symbol="done"/>
-                    <div class="content">
-                        <h5 class="mb-0 text-success">Set up a Lightning node</h5>
-                    </div>
-                </div>
-            }
+<div class="list-group" id="SetupGuide">
+    <div class="list-group-item d-flex align-items-center" id="SetupGuide-StoreDone">
+        <vc:icon symbol="done"/>
+        <div class="content">
+            <h5 class="mb-0 text-success">Create your store</h5>
         </div>
     </div>
+    @if (!Model.WalletEnabled)
+    {
+        if (!Model.AltcoinsBuild)
+        {
+            <a asp-controller="UIStores" asp-action="SetupWallet" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="BTC" id="SetupGuide-Wallet" class="list-group-item list-group-item-action d-flex align-items-center order-1">
+                <vc:icon symbol="new-wallet"/>
+                <div class="content">
+                    <h5 class="mb-0">Set up a wallet</h5>
+                </div>
+                <vc:icon symbol="caret-right"/>
+            </a>
+        }
+        else
+        {
+            <a asp-controller="UIStores" asp-action="GeneralSettings" asp-route-storeId="@Model.StoreId" id="SetupGuide-Wallet" class="list-group-item list-group-item-action d-flex align-items-center order-1">
+                <vc:icon symbol="new-wallet"/>
+                <div class="content">
+                    <h5 class="mb-0">Set up a wallet</h5>
+                </div>
+                <vc:icon symbol="caret-right"/>
+            </a>
+        }
+    }
+    else
+    {
+        <div class="list-group-item d-flex align-items-center" id="SetupGuide-WalletDone">
+            <vc:icon symbol="done"/>
+            <div class="content">
+                <h5 class="mb-0 text-success">Set up a wallet</h5>
+            </div>
+        </div>
+    }
+    @if (!Model.LightningEnabled)
+    {
+        if (!Model.AltcoinsBuild)
+        {
+            <a asp-controller="UIStores" asp-action="SetupLightningNode" asp-route-storeId="@Model.StoreId" asp-route-cryptoCode="BTC" id="SetupGuide-Lightning" class="list-group-item list-group-item-action d-flex align-items-center order-1">
+                <vc:icon symbol="new-wallet"/>
+                <div class="content">
+                    <h5 class="mb-0">Set up a Lightning node</h5>
+                </div>
+                <vc:icon symbol="caret-right"/>
+            </a>
+        }
+        else
+        {
+            <a asp-controller="UIStores" asp-action="GeneralSettings" asp-route-storeId="@Model.StoreId" id="SetupGuide-Lightning" class="list-group-item list-group-item-action d-flex align-items-center order-1">
+                <vc:icon symbol="new-wallet"/>
+                <div class="content">
+                    <h5 class="mb-0">Set up a Lightning node</h5>
+                </div>
+                <vc:icon symbol="caret-right"/>
+            </a>
+        }
+    }
+    else
+    {
+        <div class="list-group-item d-flex align-items-center" id="SetupGuide-LightningDone">
+            <vc:icon symbol="done"/>
+            <div class="content">
+                <h5 class="mb-0 text-success">Set up a Lightning node</h5>
+            </div>
+        </div>
+    }
 </div>
diff --git a/BTCPayServer/Views/UIStores/GeneralSettings.cshtml b/BTCPayServer/Views/UIStores/GeneralSettings.cshtml
index b5d480dd9..c45aea054 100644
--- a/BTCPayServer/Views/UIStores/GeneralSettings.cshtml
+++ b/BTCPayServer/Views/UIStores/GeneralSettings.cshtml
@@ -5,7 +5,7 @@
 }
 
 <div class="row">
-    <div class="col-lg-10 col-xl-8">
+    <div class="col-xxl-constrain col-xl-8">
         @if (!ViewContext.ModelState.IsValid)
         {
             <div asp-validation-summary="All" class="text-danger"></div>
@@ -45,7 +45,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>
diff --git a/BTCPayServer/Views/UIStores/Integrations.cshtml b/BTCPayServer/Views/UIStores/Integrations.cshtml
index 19ed4a18f..208acc965 100644
--- a/BTCPayServer/Views/UIStores/Integrations.cshtml
+++ b/BTCPayServer/Views/UIStores/Integrations.cshtml
@@ -5,7 +5,7 @@
 }
 
 <div class="row">
-    <div class="col-lg-8">
+    <div class="col-xl-8 col-xxl-constrain">
         <h3 class="mb-0 mb-4">@ViewData["Title"]</h3>
         @if (!ViewContext.ModelState.IsValid)
         {
diff --git a/BTCPayServer/Views/UIStores/ListTokens.cshtml b/BTCPayServer/Views/UIStores/ListTokens.cshtml
index 602d8a155..2967f8da4 100644
--- a/BTCPayServer/Views/UIStores/ListTokens.cshtml
+++ b/BTCPayServer/Views/UIStores/ListTokens.cshtml
@@ -16,7 +16,7 @@
 }
 
 <div class="row">
-    <div class="col-lg-8">
+    <div class="col-xxl-constrain col-xl-8">
         <div class="d-flex align-items-center justify-content-between mb-3">
             <h3 class="mb-0">@ViewData["Title"]</h3>
             <a id="CreateNewToken" asp-action="CreateToken" class="btn btn-primary" role="button" asp-route-storeId="@Context.GetRouteValue("storeId")">
diff --git a/BTCPayServer/Views/UIStores/ModifyWebhook.cshtml b/BTCPayServer/Views/UIStores/ModifyWebhook.cshtml
index 993e4972d..314bb581a 100644
--- a/BTCPayServer/Views/UIStores/ModifyWebhook.cshtml
+++ b/BTCPayServer/Views/UIStores/ModifyWebhook.cshtml
@@ -13,7 +13,7 @@
 }
 
 <div class="row">
-    <div class="col-lg-8">
+    <div class="col-xxl-constrain col-xl-8">
         <form method="post">
             <h3 class="mb-3">@ViewData["Title"]</h3>
             <div class="form-group">
diff --git a/BTCPayServer/Views/UIStores/PayButton.cshtml b/BTCPayServer/Views/UIStores/PayButton.cshtml
index eb312f3a6..c61617190 100644
--- a/BTCPayServer/Views/UIStores/PayButton.cshtml
+++ b/BTCPayServer/Views/UIStores/PayButton.cshtml
@@ -130,36 +130,34 @@
 <partial name="_StatusMessage" />
 
 <h2 class="mt-1 mb-4">@ViewData["Title"]</h2>
-<div class="alert alert-warning alert-dismissible mb-4" role="alert">
-    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
-        <vc:icon symbol="close" />
-    </button>
-    <p><strong>Warning:</strong> This feature should not be activated on a BTCPay Server store processing commercial transactions.</p>
-    <p>By activating this feature, a malicious user can trick you into thinking an order has been processed by creating a new invoice, reusing the same Order Id of another valid order but different amount or currency.</p>
-	<p>If this store process commercial transactions, we advise you to <a asp-controller="UIUserStores" asp-action="CreateStore">create a separate store</a> before using the payment button.</p>
-    <form asp-action="DisableAnyoneCanCreateInvoice" asp-route-storeId="@Context.GetRouteValue("storeId")" method="post">
-        <button name="command" id="disable-pay-button" type="submit" class="btn btn-danger mt-0" value="Save">Disable payment button</button>
-    </form>
-</div>
 <div id="payButtonCtrl">
     <div class="row">
-        <div class="col-lg-7">
-            <div class="row">
-                <p>Configure your Pay Button, and the generated code will be displayed at the bottom of the page to copy into your project.</p>
-                <h4 class="mt-3 mb-3">General Settings</h4>
-                <div class="form-group col-md-8">
-                    <label class="form-label" for="price">Price</label>
-                    <input name="price" type="text" class="form-control" id="price"
-                           v-model="srvModel.price" v-on:change="inputChanges"
-                           v-validate="'decimal|min_value:0'" :class="{'is-invalid': errors.has('price') }">
-                    <small class="text-danger">{{ errors.first('price') }}</small>
-                </div>
-                <div class="form-group col-md-4" v-if="!srvModel.appIdEndpoint">
-                    <label class="form-label" for="currency">Currency</label>
-                    <input name="currency" type="text" class="form-control" id="currency"
-                           v-model="srvModel.currency" v-on:change="inputChanges"
-                           :class="{'is-invalid': errors.has('currency') }">
-                </div>
+        <div class="col-xl-8">
+            <div class="alert alert-warning alert-dismissible mb-4" role="alert">
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
+                    <vc:icon symbol="close" />
+                </button>
+                <p><strong>Warning:</strong> This feature should not be activated on a BTCPay Server store processing commercial transactions.</p>
+                <p>By activating this feature, a malicious user can trick you into thinking an order has been processed by creating a new invoice, reusing the same Order Id of another valid order but different amount or currency.</p>
+                <p>If this store process commercial transactions, we advise you to <a asp-controller="UIUserStores" asp-action="CreateStore">create a separate store</a> before using the payment button.</p>
+                <form asp-action="DisableAnyoneCanCreateInvoice" asp-route-storeId="@Context.GetRouteValue("storeId")" method="post">
+                    <button name="command" id="disable-pay-button" type="submit" class="btn btn-danger mt-0" value="Save">Disable payment button</button>
+                </form>
+            </div>
+            <p>Configure your Pay Button, and the generated code will be displayed at the bottom of the page to copy into your project.</p>
+            <h4 class="mt-3 mb-3">General Settings</h4>
+            <div class="form-group col-md-8">
+                <label class="form-label" for="price">Price</label>
+                <input name="price" type="text" class="form-control" id="price"
+                       v-model="srvModel.price" v-on:change="inputChanges"
+                       v-validate="'decimal|min_value:0'" :class="{'is-invalid': errors.has('price') }">
+                <small class="text-danger">{{ errors.first('price') }}</small>
+            </div>
+            <div class="form-group col-md-4" v-if="!srvModel.appIdEndpoint">
+                <label class="form-label" for="currency">Currency</label>
+                <input name="currency" type="text" class="form-control" id="currency"
+                       v-model="srvModel.currency" v-on:change="inputChanges"
+                       :class="{'is-invalid': errors.has('currency') }">
             </div>
             <div class="form-group" v-if="!srvModel.appIdEndpoint">
                 <label class="form-label" for="description">Checkout Description</label>
@@ -176,7 +174,7 @@
 
     <h4 class="mt-5 mb-3">Display Options</h4>
     <div class="row">
-        <div class="col-lg-7">
+        <div class="col-xl-8 col-xxl-constrain">
             <div class="form-group">
                 <div class="form-check" v-if="!srvModel.appIdEndpoint">
                     <input id="useModal" type="checkbox" v-model="srvModel.useModal" v-on:change="inputChanges" class="form-check-input"/>
@@ -275,7 +273,7 @@
                 </div>
             </template>
         </div>
-        <div class="col-lg-4 mt-4 mt-lg-0">
+        <div class="col-xl-4 mt-4 mt-xl-0">
             <h5 class="mb-3">Preview</h5>
             <div id="preview"></div>
             <div v-show="!srvModel.appIdEndpoint">
@@ -287,7 +285,7 @@
 
     <h4 class="mt-5 mb-3">Payment Notifications</h4>
     <div class="row">
-        <div class="col-lg-7">
+        <div class="col-xl-8 col-xxl-constrain">
             <div class="form-group">
                 <label class="form-label" for="server-ipn">Server IPN</label>
                 <input name="serverIpn" type="text" class="form-control" id="server-ipn"
@@ -324,7 +322,7 @@
 
     <h4 class="mt-5 mb-3">Advanced Options</h4>
     <div class="row" v-if="!srvModel.appIdEndpoint">
-        <div class="col-lg-7">
+        <div class="col-xl-8 col-xxl-constrain">
             <p>
                 Specify additional query string parameters that should be appended to the checkout page once the invoice is created.
                 For example, <code>lang=da-DK</code> would load the checkout page in Danish by default.
@@ -340,7 +338,7 @@
     </div>
 
     <div class="row">
-        <div class="col-lg-7">
+        <div class="col-xl-8 col-xxl-constrain">
             <p>Link this Pay Button to an app instead. Some features are disabled due to the different endpoint capabilities. You can set which perk/item this button should be targeting.</p>
             <div class="form-group">
                 <label class="form-label" for="app-as-endpoint">Use App As Endpoint</label>
@@ -363,7 +361,7 @@
     <h4 class="mt-5 mb-3">Generated Code</h4>
 
     <div class="row" v-show="!errors.any()">
-        <div class="col-lg-12">
+        <div class="col-xxl-8">
             <pre><code id="mainCode" class="html"></code></pre>
             <button class="btn btn-primary" data-clipboard-target="#mainCode">
                 <i class="fa fa-copy"></i> Copy Code
@@ -371,7 +369,7 @@
         </div>
     </div>
     <div class="row" v-show="errors.any()">
-        <div class="col-lg-12 text-danger">
+        <div class="col-xl-8 col-xxl-constrain text-danger">
             Please fix errors shown in order for code generation to successfully execute.
         </div>
     </div>
diff --git a/BTCPayServer/Views/UIStores/Rates.cshtml b/BTCPayServer/Views/UIStores/Rates.cshtml
index 656310441..f840590a7 100644
--- a/BTCPayServer/Views/UIStores/Rates.cshtml
+++ b/BTCPayServer/Views/UIStores/Rates.cshtml
@@ -5,7 +5,7 @@
 }
 
 <div class="row">
-    <div class="col-lg-8">
+    <div class="col-xxl-constrain col-xl-8">
         <h3 class="mb-3">@ViewData["Title"]</h3>
         @if (!ViewContext.ModelState.IsValid)
         {
diff --git a/BTCPayServer/Views/UIStores/StoreUsers.cshtml b/BTCPayServer/Views/UIStores/StoreUsers.cshtml
index e912e4016..052fba9d9 100644
--- a/BTCPayServer/Views/UIStores/StoreUsers.cshtml
+++ b/BTCPayServer/Views/UIStores/StoreUsers.cshtml
@@ -5,7 +5,7 @@
 }
 
 <div class="row">
-    <div class="col-lg-8">
+    <div class="col-xxl-constrain col-xl-8">
         <h3 class="mb-3">@ViewData["Title"]</h3>
         <p>
             Give other registered BTCPay Server users access to your store.<br />
diff --git a/BTCPayServer/Views/UIStores/Webhooks.cshtml b/BTCPayServer/Views/UIStores/Webhooks.cshtml
index bbdb9fbd1..7c0b46747 100644
--- a/BTCPayServer/Views/UIStores/Webhooks.cshtml
+++ b/BTCPayServer/Views/UIStores/Webhooks.cshtml
@@ -4,7 +4,7 @@
     ViewData.SetActivePage(StoreNavPages.Webhooks, "Webhooks", Context.GetStoreData().Id);
 }
 <div class="row">
-    <div class="col-lg-8">
+    <div class="col-xl-8 col-xxl-constrain">
         <div class="d-flex align-items-center justify-content-between mb-3">
             <h3 class="mb-0">@ViewData["Title"]</h3>
             <a id="CreateWebhook" asp-action="NewWebhook" class="btn btn-primary" role="button" asp-route-storeId="@Context.GetRouteValue("storeId")">
diff --git a/BTCPayServer/Views/UIUserStores/CreateStore.cshtml b/BTCPayServer/Views/UIUserStores/CreateStore.cshtml
index 2a57cabeb..de396c903 100644
--- a/BTCPayServer/Views/UIUserStores/CreateStore.cshtml
+++ b/BTCPayServer/Views/UIUserStores/CreateStore.cshtml
@@ -11,7 +11,7 @@
 
 <h2 class="mt-1 mb-4">@ViewData["Title"]</h2>
 <div class="row">
-    <div class="col-lg-6">
+    <div class="col-xl-8 col-xxl-constrain">
         <form asp-action="CreateStore">
             <div asp-validation-summary="ModelOnly" class="text-danger"></div>
             <div class="form-group">
diff --git a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css
index f5a2b5837..5904045ff 100644
--- a/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css
+++ b/BTCPayServer/wwwroot/main/bootstrap/bootstrap.css
@@ -606,7 +606,8 @@ progress {
 .container-sm,
 .container-md,
 .container-lg,
-.container-xl {
+.container-xl,
+.container-xxl {
   width: 100%;
   padding-right: var(--btcpay-gutter-x, 0.75rem);
   padding-left: var(--btcpay-gutter-x, 0.75rem);
@@ -638,6 +639,12 @@ progress {
   }
 }
 
+@media (min-width: 1400px) {
+  .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
+    max-width: 1320px;
+  }
+}
+
 .row {
   --btcpay-gutter-x: 1.5rem;
   --btcpay-gutter-y: 0;
@@ -1545,6 +1552,176 @@ progress {
   }
 }
 
+@media (min-width: 1400px) {
+  .col-xxl {
+    flex: 1 0 0%;
+  }
+  .row-cols-xxl-auto > * {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .row-cols-xxl-1 > * {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .row-cols-xxl-2 > * {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .row-cols-xxl-3 > * {
+    flex: 0 0 auto;
+    width: 33.33333%;
+  }
+  .row-cols-xxl-4 > * {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .row-cols-xxl-5 > * {
+    flex: 0 0 auto;
+    width: 20%;
+  }
+  .row-cols-xxl-6 > * {
+    flex: 0 0 auto;
+    width: 16.66667%;
+  }
+  .col-xxl-auto {
+    flex: 0 0 auto;
+    width: auto;
+  }
+  .col-xxl-1 {
+    flex: 0 0 auto;
+    width: 8.33333%;
+  }
+  .col-xxl-2 {
+    flex: 0 0 auto;
+    width: 16.66667%;
+  }
+  .col-xxl-3 {
+    flex: 0 0 auto;
+    width: 25%;
+  }
+  .col-xxl-4 {
+    flex: 0 0 auto;
+    width: 33.33333%;
+  }
+  .col-xxl-5 {
+    flex: 0 0 auto;
+    width: 41.66667%;
+  }
+  .col-xxl-6 {
+    flex: 0 0 auto;
+    width: 50%;
+  }
+  .col-xxl-7 {
+    flex: 0 0 auto;
+    width: 58.33333%;
+  }
+  .col-xxl-8 {
+    flex: 0 0 auto;
+    width: 66.66667%;
+  }
+  .col-xxl-9 {
+    flex: 0 0 auto;
+    width: 75%;
+  }
+  .col-xxl-10 {
+    flex: 0 0 auto;
+    width: 83.33333%;
+  }
+  .col-xxl-11 {
+    flex: 0 0 auto;
+    width: 91.66667%;
+  }
+  .col-xxl-12 {
+    flex: 0 0 auto;
+    width: 100%;
+  }
+  .offset-xxl-0 {
+    margin-left: 0;
+  }
+  .offset-xxl-1 {
+    margin-left: 8.33333%;
+  }
+  .offset-xxl-2 {
+    margin-left: 16.66667%;
+  }
+  .offset-xxl-3 {
+    margin-left: 25%;
+  }
+  .offset-xxl-4 {
+    margin-left: 33.33333%;
+  }
+  .offset-xxl-5 {
+    margin-left: 41.66667%;
+  }
+  .offset-xxl-6 {
+    margin-left: 50%;
+  }
+  .offset-xxl-7 {
+    margin-left: 58.33333%;
+  }
+  .offset-xxl-8 {
+    margin-left: 66.66667%;
+  }
+  .offset-xxl-9 {
+    margin-left: 75%;
+  }
+  .offset-xxl-10 {
+    margin-left: 83.33333%;
+  }
+  .offset-xxl-11 {
+    margin-left: 91.66667%;
+  }
+  .g-xxl-0,
+  .gx-xxl-0 {
+    --btcpay-gutter-x: 0;
+  }
+  .g-xxl-0,
+  .gy-xxl-0 {
+    --btcpay-gutter-y: 0;
+  }
+  .g-xxl-1,
+  .gx-xxl-1 {
+    --btcpay-gutter-x: 0.25rem;
+  }
+  .g-xxl-1,
+  .gy-xxl-1 {
+    --btcpay-gutter-y: 0.25rem;
+  }
+  .g-xxl-2,
+  .gx-xxl-2 {
+    --btcpay-gutter-x: 0.5rem;
+  }
+  .g-xxl-2,
+  .gy-xxl-2 {
+    --btcpay-gutter-y: 0.5rem;
+  }
+  .g-xxl-3,
+  .gx-xxl-3 {
+    --btcpay-gutter-x: 1rem;
+  }
+  .g-xxl-3,
+  .gy-xxl-3 {
+    --btcpay-gutter-y: 1rem;
+  }
+  .g-xxl-4,
+  .gx-xxl-4 {
+    --btcpay-gutter-x: 1.5rem;
+  }
+  .g-xxl-4,
+  .gy-xxl-4 {
+    --btcpay-gutter-y: 1.5rem;
+  }
+  .g-xxl-5,
+  .gx-xxl-5 {
+    --btcpay-gutter-x: 3rem;
+  }
+  .g-xxl-5,
+  .gy-xxl-5 {
+    --btcpay-gutter-y: 3rem;
+  }
+}
+
 .table {
   --btcpay-table-bg: transparent;
   --btcpay-table-accent-bg: transparent;
@@ -1748,6 +1925,13 @@ progress {
   }
 }
 
+@media (max-width: 1399.98px) {
+  .table-responsive-xxl {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
 .form-label {
   margin-bottom: 0.5rem;
   color: var(--btcpay-form-text-label);
@@ -3408,6 +3592,23 @@ fieldset:disabled .btn {
   }
 }
 
+@media (min-width: 1400px) {
+  .dropdown-menu-xxl-start {
+    --bs-position: start;
+  }
+  .dropdown-menu-xxl-start[data-bs-popper] {
+    right: auto;
+    left: 0;
+  }
+  .dropdown-menu-xxl-end {
+    --bs-position: end;
+  }
+  .dropdown-menu-xxl-end[data-bs-popper] {
+    right: 0;
+    left: auto;
+  }
+}
+
 .dropup .dropdown-menu[data-bs-popper] {
   top: auto;
   bottom: 100%;
@@ -3807,7 +4008,7 @@ fieldset:disabled .btn {
 }
 
 .navbar > .container,
-.navbar > .container-fluid, .navbar > .container-sm, .navbar > .container-md, .navbar > .container-lg, .navbar > .container-xl {
+.navbar > .container-fluid, .navbar > .container-sm, .navbar > .container-md, .navbar > .container-lg, .navbar > .container-xl, .navbar > .container-xxl {
   display: flex;
   flex-wrap: inherit;
   align-items: center;
@@ -4105,6 +4306,60 @@ fieldset:disabled .btn {
   }
 }
 
+@media (min-width: 1400px) {
+  .navbar-expand-xxl {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+  }
+  .navbar-expand-xxl .navbar-nav {
+    flex-direction: row;
+  }
+  .navbar-expand-xxl .navbar-nav .dropdown-menu {
+    position: absolute;
+  }
+  .navbar-expand-xxl .navbar-nav .nav-link {
+    padding-right: 0.5rem;
+    padding-left: 0.5rem;
+  }
+  .navbar-expand-xxl .navbar-nav-scroll {
+    overflow: visible;
+  }
+  .navbar-expand-xxl .navbar-collapse {
+    display: flex !important;
+    flex-basis: auto;
+  }
+  .navbar-expand-xxl .navbar-toggler {
+    display: none;
+  }
+  .navbar-expand-xxl .offcanvas-header {
+    display: none;
+  }
+  .navbar-expand-xxl .offcanvas {
+    position: inherit;
+    bottom: 0;
+    z-index: 1000;
+    flex-grow: 1;
+    visibility: visible !important;
+    background-color: transparent;
+    border-right: 0;
+    border-left: 0;
+    transition: none;
+    transform: none;
+  }
+  .navbar-expand-xxl .offcanvas-top,
+  .navbar-expand-xxl .offcanvas-bottom {
+    height: auto;
+    border-top: 0;
+    border-bottom: 0;
+  }
+  .navbar-expand-xxl .offcanvas-body {
+    display: flex;
+    flex-grow: 0;
+    padding: 0;
+    overflow-y: visible;
+  }
+}
+
 .navbar-expand {
   flex-wrap: nowrap;
   justify-content: flex-start;
@@ -5040,6 +5295,31 @@ fieldset:disabled .btn {
   }
 }
 
+@media (min-width: 1400px) {
+  .list-group-horizontal-xxl {
+    flex-direction: row;
+  }
+  .list-group-horizontal-xxl > .list-group-item:first-child {
+    border-bottom-left-radius: var(--btcpay-border-radius);
+    border-top-right-radius: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item:last-child {
+    border-top-right-radius: var(--btcpay-border-radius);
+    border-bottom-left-radius: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item.active {
+    margin-top: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item + .list-group-item {
+    border-top-width: 1px;
+    border-left-width: 0;
+  }
+  .list-group-horizontal-xxl > .list-group-item + .list-group-item.active {
+    margin-left: -1px;
+    border-left-width: 1px;
+  }
+}
+
 .list-group-flush {
   border-radius: 0;
 }
@@ -5544,6 +5824,29 @@ fieldset:disabled .btn {
   }
 }
 
+@media (max-width: 1399.98px) {
+  .modal-fullscreen-xxl-down {
+    width: 100vw;
+    max-width: none;
+    height: 100%;
+    margin: 0;
+  }
+  .modal-fullscreen-xxl-down .modal-content {
+    height: 100%;
+    border: 0;
+    border-radius: 0;
+  }
+  .modal-fullscreen-xxl-down .modal-header {
+    border-radius: 0;
+  }
+  .modal-fullscreen-xxl-down .modal-body {
+    overflow-y: auto;
+  }
+  .modal-fullscreen-xxl-down .modal-footer {
+    border-radius: 0;
+  }
+}
+
 .tooltip {
   position: absolute;
   z-index: 1080;
@@ -6384,6 +6687,15 @@ fieldset:disabled .btn {
   }
 }
 
+@media (min-width: 1400px) {
+  .sticky-xxl-top {
+    position: -webkit-sticky;
+    position: sticky;
+    top: 0;
+    z-index: 1020;
+  }
+}
+
 .hstack {
   display: flex;
   flex-direction: row;
@@ -9759,6 +10071,503 @@ fieldset:disabled .btn {
   }
 }
 
+@media (min-width: 1400px) {
+  .float-xxl-start {
+    float: left !important;
+  }
+  .float-xxl-end {
+    float: right !important;
+  }
+  .float-xxl-none {
+    float: none !important;
+  }
+  .d-xxl-inline {
+    display: inline !important;
+  }
+  .d-xxl-inline-block {
+    display: inline-block !important;
+  }
+  .d-xxl-block {
+    display: block !important;
+  }
+  .d-xxl-grid {
+    display: grid !important;
+  }
+  .d-xxl-table {
+    display: table !important;
+  }
+  .d-xxl-table-row {
+    display: table-row !important;
+  }
+  .d-xxl-table-cell {
+    display: table-cell !important;
+  }
+  .d-xxl-flex {
+    display: flex !important;
+  }
+  .d-xxl-inline-flex {
+    display: inline-flex !important;
+  }
+  .d-xxl-none {
+    display: none !important;
+  }
+  .flex-xxl-fill {
+    flex: 1 1 auto !important;
+  }
+  .flex-xxl-row {
+    flex-direction: row !important;
+  }
+  .flex-xxl-column {
+    flex-direction: column !important;
+  }
+  .flex-xxl-row-reverse {
+    flex-direction: row-reverse !important;
+  }
+  .flex-xxl-column-reverse {
+    flex-direction: column-reverse !important;
+  }
+  .flex-xxl-grow-0 {
+    flex-grow: 0 !important;
+  }
+  .flex-xxl-grow-1 {
+    flex-grow: 1 !important;
+  }
+  .flex-xxl-shrink-0 {
+    flex-shrink: 0 !important;
+  }
+  .flex-xxl-shrink-1 {
+    flex-shrink: 1 !important;
+  }
+  .flex-xxl-wrap {
+    flex-wrap: wrap !important;
+  }
+  .flex-xxl-nowrap {
+    flex-wrap: nowrap !important;
+  }
+  .flex-xxl-wrap-reverse {
+    flex-wrap: wrap-reverse !important;
+  }
+  .gap-xxl-0 {
+    gap: 0 !important;
+  }
+  .gap-xxl-1 {
+    gap: 0.25rem !important;
+  }
+  .gap-xxl-2 {
+    gap: 0.5rem !important;
+  }
+  .gap-xxl-3 {
+    gap: 1rem !important;
+  }
+  .gap-xxl-4 {
+    gap: 1.5rem !important;
+  }
+  .gap-xxl-5 {
+    gap: 3rem !important;
+  }
+  .justify-content-xxl-start {
+    justify-content: flex-start !important;
+  }
+  .justify-content-xxl-end {
+    justify-content: flex-end !important;
+  }
+  .justify-content-xxl-center {
+    justify-content: center !important;
+  }
+  .justify-content-xxl-between {
+    justify-content: space-between !important;
+  }
+  .justify-content-xxl-around {
+    justify-content: space-around !important;
+  }
+  .justify-content-xxl-evenly {
+    justify-content: space-evenly !important;
+  }
+  .align-items-xxl-start {
+    align-items: flex-start !important;
+  }
+  .align-items-xxl-end {
+    align-items: flex-end !important;
+  }
+  .align-items-xxl-center {
+    align-items: center !important;
+  }
+  .align-items-xxl-baseline {
+    align-items: baseline !important;
+  }
+  .align-items-xxl-stretch {
+    align-items: stretch !important;
+  }
+  .align-content-xxl-start {
+    align-content: flex-start !important;
+  }
+  .align-content-xxl-end {
+    align-content: flex-end !important;
+  }
+  .align-content-xxl-center {
+    align-content: center !important;
+  }
+  .align-content-xxl-between {
+    align-content: space-between !important;
+  }
+  .align-content-xxl-around {
+    align-content: space-around !important;
+  }
+  .align-content-xxl-stretch {
+    align-content: stretch !important;
+  }
+  .align-self-xxl-auto {
+    align-self: auto !important;
+  }
+  .align-self-xxl-start {
+    align-self: flex-start !important;
+  }
+  .align-self-xxl-end {
+    align-self: flex-end !important;
+  }
+  .align-self-xxl-center {
+    align-self: center !important;
+  }
+  .align-self-xxl-baseline {
+    align-self: baseline !important;
+  }
+  .align-self-xxl-stretch {
+    align-self: stretch !important;
+  }
+  .order-xxl-first {
+    order: -1 !important;
+  }
+  .order-xxl-0 {
+    order: 0 !important;
+  }
+  .order-xxl-1 {
+    order: 1 !important;
+  }
+  .order-xxl-2 {
+    order: 2 !important;
+  }
+  .order-xxl-3 {
+    order: 3 !important;
+  }
+  .order-xxl-4 {
+    order: 4 !important;
+  }
+  .order-xxl-5 {
+    order: 5 !important;
+  }
+  .order-xxl-last {
+    order: 6 !important;
+  }
+  .m-xxl-0 {
+    margin: 0 !important;
+  }
+  .m-xxl-1 {
+    margin: 0.25rem !important;
+  }
+  .m-xxl-2 {
+    margin: 0.5rem !important;
+  }
+  .m-xxl-3 {
+    margin: 1rem !important;
+  }
+  .m-xxl-4 {
+    margin: 1.5rem !important;
+  }
+  .m-xxl-5 {
+    margin: 3rem !important;
+  }
+  .m-xxl-auto {
+    margin: auto !important;
+  }
+  .mx-xxl-0 {
+    margin-right: 0 !important;
+    margin-left: 0 !important;
+  }
+  .mx-xxl-1 {
+    margin-right: 0.25rem !important;
+    margin-left: 0.25rem !important;
+  }
+  .mx-xxl-2 {
+    margin-right: 0.5rem !important;
+    margin-left: 0.5rem !important;
+  }
+  .mx-xxl-3 {
+    margin-right: 1rem !important;
+    margin-left: 1rem !important;
+  }
+  .mx-xxl-4 {
+    margin-right: 1.5rem !important;
+    margin-left: 1.5rem !important;
+  }
+  .mx-xxl-5 {
+    margin-right: 3rem !important;
+    margin-left: 3rem !important;
+  }
+  .mx-xxl-auto {
+    margin-right: auto !important;
+    margin-left: auto !important;
+  }
+  .my-xxl-0 {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+  .my-xxl-1 {
+    margin-top: 0.25rem !important;
+    margin-bottom: 0.25rem !important;
+  }
+  .my-xxl-2 {
+    margin-top: 0.5rem !important;
+    margin-bottom: 0.5rem !important;
+  }
+  .my-xxl-3 {
+    margin-top: 1rem !important;
+    margin-bottom: 1rem !important;
+  }
+  .my-xxl-4 {
+    margin-top: 1.5rem !important;
+    margin-bottom: 1.5rem !important;
+  }
+  .my-xxl-5 {
+    margin-top: 3rem !important;
+    margin-bottom: 3rem !important;
+  }
+  .my-xxl-auto {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+  }
+  .mt-xxl-0 {
+    margin-top: 0 !important;
+  }
+  .mt-xxl-1 {
+    margin-top: 0.25rem !important;
+  }
+  .mt-xxl-2 {
+    margin-top: 0.5rem !important;
+  }
+  .mt-xxl-3 {
+    margin-top: 1rem !important;
+  }
+  .mt-xxl-4 {
+    margin-top: 1.5rem !important;
+  }
+  .mt-xxl-5 {
+    margin-top: 3rem !important;
+  }
+  .mt-xxl-auto {
+    margin-top: auto !important;
+  }
+  .me-xxl-0 {
+    margin-right: 0 !important;
+  }
+  .me-xxl-1 {
+    margin-right: 0.25rem !important;
+  }
+  .me-xxl-2 {
+    margin-right: 0.5rem !important;
+  }
+  .me-xxl-3 {
+    margin-right: 1rem !important;
+  }
+  .me-xxl-4 {
+    margin-right: 1.5rem !important;
+  }
+  .me-xxl-5 {
+    margin-right: 3rem !important;
+  }
+  .me-xxl-auto {
+    margin-right: auto !important;
+  }
+  .mb-xxl-0 {
+    margin-bottom: 0 !important;
+  }
+  .mb-xxl-1 {
+    margin-bottom: 0.25rem !important;
+  }
+  .mb-xxl-2 {
+    margin-bottom: 0.5rem !important;
+  }
+  .mb-xxl-3 {
+    margin-bottom: 1rem !important;
+  }
+  .mb-xxl-4 {
+    margin-bottom: 1.5rem !important;
+  }
+  .mb-xxl-5 {
+    margin-bottom: 3rem !important;
+  }
+  .mb-xxl-auto {
+    margin-bottom: auto !important;
+  }
+  .ms-xxl-0 {
+    margin-left: 0 !important;
+  }
+  .ms-xxl-1 {
+    margin-left: 0.25rem !important;
+  }
+  .ms-xxl-2 {
+    margin-left: 0.5rem !important;
+  }
+  .ms-xxl-3 {
+    margin-left: 1rem !important;
+  }
+  .ms-xxl-4 {
+    margin-left: 1.5rem !important;
+  }
+  .ms-xxl-5 {
+    margin-left: 3rem !important;
+  }
+  .ms-xxl-auto {
+    margin-left: auto !important;
+  }
+  .p-xxl-0 {
+    padding: 0 !important;
+  }
+  .p-xxl-1 {
+    padding: 0.25rem !important;
+  }
+  .p-xxl-2 {
+    padding: 0.5rem !important;
+  }
+  .p-xxl-3 {
+    padding: 1rem !important;
+  }
+  .p-xxl-4 {
+    padding: 1.5rem !important;
+  }
+  .p-xxl-5 {
+    padding: 3rem !important;
+  }
+  .px-xxl-0 {
+    padding-right: 0 !important;
+    padding-left: 0 !important;
+  }
+  .px-xxl-1 {
+    padding-right: 0.25rem !important;
+    padding-left: 0.25rem !important;
+  }
+  .px-xxl-2 {
+    padding-right: 0.5rem !important;
+    padding-left: 0.5rem !important;
+  }
+  .px-xxl-3 {
+    padding-right: 1rem !important;
+    padding-left: 1rem !important;
+  }
+  .px-xxl-4 {
+    padding-right: 1.5rem !important;
+    padding-left: 1.5rem !important;
+  }
+  .px-xxl-5 {
+    padding-right: 3rem !important;
+    padding-left: 3rem !important;
+  }
+  .py-xxl-0 {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+  .py-xxl-1 {
+    padding-top: 0.25rem !important;
+    padding-bottom: 0.25rem !important;
+  }
+  .py-xxl-2 {
+    padding-top: 0.5rem !important;
+    padding-bottom: 0.5rem !important;
+  }
+  .py-xxl-3 {
+    padding-top: 1rem !important;
+    padding-bottom: 1rem !important;
+  }
+  .py-xxl-4 {
+    padding-top: 1.5rem !important;
+    padding-bottom: 1.5rem !important;
+  }
+  .py-xxl-5 {
+    padding-top: 3rem !important;
+    padding-bottom: 3rem !important;
+  }
+  .pt-xxl-0 {
+    padding-top: 0 !important;
+  }
+  .pt-xxl-1 {
+    padding-top: 0.25rem !important;
+  }
+  .pt-xxl-2 {
+    padding-top: 0.5rem !important;
+  }
+  .pt-xxl-3 {
+    padding-top: 1rem !important;
+  }
+  .pt-xxl-4 {
+    padding-top: 1.5rem !important;
+  }
+  .pt-xxl-5 {
+    padding-top: 3rem !important;
+  }
+  .pe-xxl-0 {
+    padding-right: 0 !important;
+  }
+  .pe-xxl-1 {
+    padding-right: 0.25rem !important;
+  }
+  .pe-xxl-2 {
+    padding-right: 0.5rem !important;
+  }
+  .pe-xxl-3 {
+    padding-right: 1rem !important;
+  }
+  .pe-xxl-4 {
+    padding-right: 1.5rem !important;
+  }
+  .pe-xxl-5 {
+    padding-right: 3rem !important;
+  }
+  .pb-xxl-0 {
+    padding-bottom: 0 !important;
+  }
+  .pb-xxl-1 {
+    padding-bottom: 0.25rem !important;
+  }
+  .pb-xxl-2 {
+    padding-bottom: 0.5rem !important;
+  }
+  .pb-xxl-3 {
+    padding-bottom: 1rem !important;
+  }
+  .pb-xxl-4 {
+    padding-bottom: 1.5rem !important;
+  }
+  .pb-xxl-5 {
+    padding-bottom: 3rem !important;
+  }
+  .ps-xxl-0 {
+    padding-left: 0 !important;
+  }
+  .ps-xxl-1 {
+    padding-left: 0.25rem !important;
+  }
+  .ps-xxl-2 {
+    padding-left: 0.5rem !important;
+  }
+  .ps-xxl-3 {
+    padding-left: 1rem !important;
+  }
+  .ps-xxl-4 {
+    padding-left: 1.5rem !important;
+  }
+  .ps-xxl-5 {
+    padding-left: 3rem !important;
+  }
+  .text-xxl-start {
+    text-align: left !important;
+  }
+  .text-xxl-end {
+    text-align: right !important;
+  }
+  .text-xxl-center {
+    text-align: center !important;
+  }
+}
+
 @media (min-width: 1200px) {
   .fs-1 {
     font-size: 2.1875rem !important;
@@ -10386,5 +11195,6 @@ html[data-devenv]:before {
 @media (min-width: 576px) and (max-width: 767px) { html[data-devenv]:before { content: 'SM'; } }
 @media (min-width: 768px) and (max-width: 991px) { html[data-devenv]:before { content: 'MD'; } }
 @media (min-width: 992px) and (max-width: 1199px) { html[data-devenv]:before { content: 'LG'; } }
-@media (min-width: 1200px) { html[data-devenv]:before { content: 'XL'; } }
+@media (min-width: 1200px) and (max-width: 1399px) { html[data-devenv]:before { content: 'XL'; } }
+@media (min-width: 1400px) { html[data-devenv]:before { content: 'XXL'; } }
 @media print { html[data-devenv]:before { content: none; } }
diff --git a/BTCPayServer/wwwroot/main/site.css b/BTCPayServer/wwwroot/main/site.css
index ade50e6ee..fa6c7f7ff 100644
--- a/BTCPayServer/wwwroot/main/site.css
+++ b/BTCPayServer/wwwroot/main/site.css
@@ -59,6 +59,12 @@ hr.primary {
     }
 }
 
+@media (min-width: 1400px) {
+    .col-xxl-constrain {
+        max-width: 800px;
+    }
+}
+
 /* Info icons in main headline */
 h2 small .fa-question-circle-o {
     position: relative;
@@ -200,3 +206,19 @@ svg.icon-note {
 .services-list .service h6 {
     margin: var(--btcpay-space-m) 0 0 0;
 }
+
+/* Setup Guide */
+#SetupGuide {
+    max-width: 30em;
+}
+
+#SetupGuide .list-group-item .icon {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: 1rem;
+}
+
+#SetupGuide .list-group-item .content {
+    flex: 1;
+    padding: 1rem 0;
+}