diff --git a/BTCPayServer/Views/Stores/PayButton.cshtml b/BTCPayServer/Views/Stores/PayButton.cshtml
index 1ee8af870..5f2c2375b 100644
--- a/BTCPayServer/Views/Stores/PayButton.cshtml
+++ b/BTCPayServer/Views/Stores/PayButton.cshtml
@@ -35,9 +35,8 @@
         }
     </template>
     <script>
-        var srvModel = @Safe.Json(Model);
-
-        var payButtonCtrl = new Vue({
+        const srvModel = @Safe.Json(Model);
+        const payButtonCtrl = new Vue({
             el: '#payButtonCtrl',
             data: {
                 srvModel: srvModel,
@@ -45,28 +44,27 @@
                 buttonInlineTextMode: false
             },
             computed: {
-                imageUrlRequired: function(){
+                imageUrlRequired() {
                     return !this.buttonInlineTextMode;
                 }
             },
             methods: {
-                inputChanges: function (event, buttonSize) {
+                inputChanges(event, buttonSize) {
                     inputChanges(event, buttonSize);
                 }
-                
             },
             watch: {
-                buttonInlineTextMode: function (checked) {
-                  if(!checked){
-                      this.srvModel.payButtonText = "";
-                      this.srvModel.payButtonImageUrl = this.originalButtonImageUrl;
-                  }else {
-                      this.srvModel.payButtonText = "Pay with";
-                      this.srvModel.payButtonImageUrl = this.srvModel.urlRoot + "img/logo.svg";
-                  }
-                  this.inputChanges();
+                buttonInlineTextMode(checked) {
+                    if (!checked) {
+                        this.srvModel.payButtonText = '';
+                        this.srvModel.payButtonImageUrl = this.originalButtonImageUrl;
+                    } else {
+                        this.srvModel.payButtonText = 'Pay with';
+                        this.srvModel.payButtonImageUrl = `${this.srvModel.urlRoot}img/logo.svg`;
+                    }
+                    this.inputChanges();
                 }
-              }
+            }
         });
     </script>
 }
@@ -74,44 +72,38 @@
 <div id="payButtonCtrl">
     <div class="row">
         <div class="col-lg-7">
-            <h4 class="mb-3">@ViewData["PageTitle"]</h4>
+            <h3 class="mb-3">@ViewData["PageTitle"]</h3>
             <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">Price</label>
-                    <input name="price" type="text" class="form-control" placeholder="(optional)"
+                    <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">&nbsp;</label>
-                    <input name="currency" type="text" class="form-control"
+                <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>
             <div class="form-group" v-if="!srvModel.appIdEndpoint">
-                <label class="form-label">Checkout Description</label>
-                <input name="checkoutDesc" type="text" class="form-control" placeholder="(optional)"
+                <label class="form-label" for="description">Checkout Description</label>
+                <input name="checkoutDesc" type="text" class="form-control" id="description"
                        v-model="srvModel.checkoutDesc" v-on:change="inputChanges">
             </div>
             <div class="form-group">
-                <label class="form-label">Order Id</label>
-                <input name="orderId" type="text" class="form-control" id="inputAddress" placeholder="(optional)"
+                <label class="form-label" for="order-id">Order ID</label>
+                <input name="orderId" type="text" class="form-control" id="order-id"
                        v-model="srvModel.orderId" v-on:change="inputChanges">
             </div>
         </div>
-        <div class="col-lg-5">
-            <br />
-            Set parameters that define the purchase: price, currency and an optional description of purchase.
-            <br /><br />
-            Generated HTML will be displayed at the bottom of this page and all you need is to paste that HTML into your final page.
-            Clicking on the button will redirect customer to checkout.
-        </div>
     </div>
 
-    <h4 class="mt-5 mb-3">Pay button display options</h4>
-
+    <h4 class="mt-5 mb-3">Display Options</h4>
     <div class="row">
         <div class="col-lg-7">
             <div class="form-group">
@@ -121,38 +113,32 @@
                 </div>
                 <div class="form-check">
                     <input id="buttonInlineTextMode" type="checkbox" v-model="buttonInlineTextMode" v-on:change="inputChanges" class="form-check-input"/>
-                    <label for="buttonInlineTextMode" class="form-check-label">Customize text in button</label>
+                    <label for="buttonInlineTextMode" class="form-check-label">Customize Pay Button Text</label>
                 </div>
             </div>
             
             <div class="form-group" v-show="buttonInlineTextMode">
-                <label class="form-label">Pay Button Text</label>
-                <input name="payButtonText" type="text" class="form-control" id="inputAddress"
+                <label class="form-label" for="pb-text">Pay Button Text</label>
+                <input name="payButtonText" type="text" class="form-control" id="pb-text"
                        v-model="srvModel.payButtonText" v-on:change="inputChanges">
             </div>
-            <div class="form-group">
-                <label class="form-label">Pay Button Image Url</label>
-                <input name="payButtonImageUrl" type="text" class="form-control" id="inputAddress"
+            <div class="form-group mb-4">
+                <label class="form-label" for="pb-image-url">Pay Button Image Url</label>
+                <input name="payButtonImageUrl" type="text" class="form-control" id="pb-image-url"
                        v-model="srvModel.payButtonImageUrl" v-on:change="inputChanges"
                        v-validate="{ required: this.imageUrlRequired, url: {require_tld:false} }"
                        :class="{'is-invalid': errors.has('payButtonImageUrl') }">
                 <small class="text-danger">{{ errors.first('payButtonImageUrl') }}</small>
             </div>
-            <div class="form-group">
+            <div class="form-group mb-4">
                 <label class="form-label">Image Size</label>
-                <div style="vertical-align:top; font-size:12px; display:flex;">
-                    <button class="btn text-nowrap" style="width:146px;height:40px;margin-right:40px;"
-                            v-on:click="inputChanges($event, 0)" v-bind:class="{'btn-primary': (srvModel.buttonSize == 0) }">
-                        146 x 40 px
-                    </button>
-                    <button class="btn text-nowrap btn-default" style="width:168px;height:46px;margin-right:40px;"
-                            v-on:click="inputChanges($event, 1)" v-bind:class="{'btn-primary': (srvModel.buttonSize == 1) }">
-                        168 x 46 px
-                    </button>
-                    <button class="btn text-nowrap btn-default" style="width:209px;height:57px;"
-                            v-on:click="inputChanges($event, 2)" v-bind:class="{'btn-primary': (srvModel.buttonSize == 2) }">
-                        209 x 57 px
-                    </button>
+                <div class="btn-group d-flex" role="group">
+                    <button type="button" class="btn btn-outline-secondary" 
+                            v-on:click="inputChanges($event, 0)">146 x 40 px</button>
+                    <button type="button" class="btn btn-outline-secondary"
+                            v-on:click="inputChanges($event, 1)">168 x 46 px</button>
+                    <button type="button" class="btn btn-outline-secondary"
+                            v-on:click="inputChanges($event, 2)">209 x 57 px</button>
                 </div>
             </div>
             <div class="form-group">
@@ -170,30 +156,30 @@
                     <label for="btn-slider" class="form-check-label">Slider</label>
                 </div>
             </div>
-            <div class="row" v-if="srvModel.buttonType == 1 ||srvModel.buttonType == 2">
+            <div class="row" v-if="srvModel.buttonType === 1 ||srvModel.buttonType === 2">
                 <div class="form-group col-md-4">
-                    <label class="form-label">Min</label>
-                    <input name="min" type="text" class="form-control"
+                    <label class="form-label" for="pb-min">Min</label>
+                    <input name="min" type="text" class="form-control" id="pb-min"
                            v-model="srvModel.min" v-on:change="inputChanges"
                            v-validate="'required|decimal|min_value:0'" :class="{'is-invalid': errors.has('min') }">
                     <small class="text-danger">{{ errors.first('min') }}</small>
                 </div>
                 <div class="form-group col-md-4">
-                    <label class="form-label">Max</label>
-                    <input name="max" type="text" class="form-control"
+                    <label class="form-label" for="pb-max">Max</label>
+                    <input name="max" type="text" class="form-control" id="pb-max"
                            v-model="srvModel.max" v-on:change="inputChanges"
                            v-validate="'required|decimal'" :class="{'is-invalid': errors.has('max') }">
                     <small class="text-danger">{{ errors.first('max') }}</small>
                 </div>
                 <div class="form-group col-md-4">
-                    <label class="form-label">Step</label>
-                    <input name="step" type="text" class="form-control"
+                    <label class="form-label" for="pb-step">Step</label>
+                    <input name="step" type="text" class="form-control" id="pb-step"
                            v-model="srvModel.step" v-on:change="inputChanges"
                            v-validate="'required'" :class="{'is-invalid': errors.has('step') }">
                     <small class="text-danger">{{ errors.first('step') }}</small>
                 </div>
             </div>
-            <template v-if="srvModel.buttonType == 1">
+            <template v-if="srvModel.buttonType === 1">
                 <div class="form-check">
                     <input name="simpleInput"
                            id="simpleInput"
@@ -218,98 +204,92 @@
                 </div>
             </template>
         </div>
-        <div class="col-lg-5">
+        <div class="col-lg-4 mt-4 mt-lg-0">
             <h5 class="mb-3">Preview</h5>
             <div id="preview"></div>
-
             <div v-show="!srvModel.appIdEndpoint">
                 <h5 class="mt-4 mb-3">Link</h5>
-                <span>Alternatively, you can share this link or encode it in a QR code</span>
-                <div id="preview-link"></div>
+                <span>Alternatively, you can share <a id="preview-link" href="#">this link</a> or encode it in a QR code.</span>
             </div>
         </div>
     </div>
 
     <h4 class="mt-5 mb-3">Payment Notifications</h4>
-
     <div class="row">
         <div class="col-lg-7">
             <div class="form-group">
-                <label class="form-label">Server IPN</label>
-                <input name="serverIpn" type="text" class="form-control" placeholder="(optional)"
+                <label class="form-label" for="server-ipn">Server IPN</label>
+                <input name="serverIpn" type="text" class="form-control" id="server-ipn"
                        v-model="srvModel.serverIpn" v-on:change="inputChanges"
                        v-validate="'url'" :class="{'is-invalid': errors.has('serverIpn') }">
                 <small class="text-danger">{{ errors.first('serverIpn') }}</small>
+                <p class="form-text text-muted">
+                    The URL to post purchase data.
+                </p>
             </div>
-            <div class="form-group"  v-if="!srvModel.appIdEndpoint">
-                <label class="form-label">Send Email Notifications to</label>
-                <input name="notifyEmail" type="text" class="form-control" placeholder="(optional)"
+            <div class="form-group" v-if="!srvModel.appIdEndpoint">
+                <label class="form-label" for="email-notifications">Email Notifications</label>
+                <input name="notifyEmail" type="text" class="form-control" id="email-notifications"
+                       placeholder="name@domain.com"
                        v-model="srvModel.notifyEmail" v-on:change="inputChanges"
                        v-validate="'email'" :class="{'is-invalid': errors.has('notifyEmail') }">
                 <small class="text-danger">{{ errors.first('notifyEmail') }}</small>
-
+                <p class="form-text text-muted">
+                    Receive email notification updates.
+                </p>
             </div>
             <div class="form-group">
-                <label class="form-label">Browser Redirect</label>
-                <input name="browserRedirect" type="text" class="form-control" placeholder="(optional)"
+                <label class="form-label" for="browser-redirect">Browser Redirect</label>
+                <input name="browserRedirect" type="text" class="form-control" id="browser-redirect"
                        v-model="srvModel.browserRedirect" v-on:change="inputChanges"
                        v-validate="'url'" :class="{'is-invalid': errors.has('browserRedirect') }">
                 <small class="text-danger">{{ errors.first('browserRedirect') }}</small>
+                <p class="form-text text-muted">
+                    Where to redirect the customer after payment is complete.
+                </p>
             </div>
         </div>
-        <div class="col-lg-5">
-            <br />
-            These parameters allow you to influence the process after purchase. <i>Server IPN</i> is the URL to which we'll post purchase data.
-            We can also deliver an email notification to a specified address.
-            <br /><br />
-            Finally, <i>Browser Redirect</i> defines where BTCPayServer will redirect the customer after purchase is completed.
-        </div>
     </div>
 
-    <h4 class="mt-5 mb-3">Advanced options</h4>
-
+    <h4 class="mt-5 mb-3">Advanced Options</h4>
     <div class="row" v-if="!srvModel.appIdEndpoint">
         <div class="col-lg-7">
+            <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.
+            </p>
             <div class="form-group">
-                <label class="form-label">Checkout Additional Query String</label>
-                <input name="checkoutQueryString" type="text" class="form-control" placeholder="(optional)"
+                <label class="form-label" for="query-string">Checkout Additional Query String</label>
+                <input name="checkoutQueryString" type="text" class="form-control" id="query-string"
                        v-model="srvModel.checkoutQueryString" v-on:change="inputChanges"
                        :class="{'is-invalid': errors.has('checkoutQueryString') }">
                 <small class="text-danger">{{ errors.first('checkoutQueryString') }}</small>
             </div>
         </div>
-        <div class="col-lg-5">
-            <br />
-            This parameter allows you to 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.
-        </div>
     </div>
 
     <div class="row">
         <div class="col-lg-7">
+            <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">Use App as endpoint</label>
-                <select v-model="srvModel.appIdEndpoint" v-on:change="inputChanges" class="form-select">
+                <label class="form-label" for="app-as-endpoint">Use App As Endpoint</label>
+                <select v-model="srvModel.appIdEndpoint" v-on:change="inputChanges" class="form-select" id="app-as-endpoint">
                     <option value="">Use default pay button endpoint</option>
                     <option  v-for="app in srvModel.apps" v-bind:value="app.id" >{{app.appName}} ({{app.appType}})</option>
                 </select>
                 <small class="text-danger">{{ errors.first('appIdEndpoint') }}</small>
             </div>
             <div class="form-group" v-if="srvModel.appIdEndpoint">
-                <label>App Item/Perk</label>
-                <input name="appChoiceKey" type="text" class="form-control" placeholder="(optional)"
+                <label class="form-label" for="app-item">App Item/Perk</label>
+                <input name="appChoiceKey" type="text" class="form-control" id="app-item"
                        v-model="srvModel.appChoiceKey" v-on:change="inputChanges"
                        :class="{'is-invalid': errors.has('appChoiceKey') }">
                 <small class="text-danger">{{ errors.first('appChoiceKey') }}</small>
             </div>
         </div>
-        <div class="col-lg-5">
-            <br />
-            This allows you to 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.
-        </div>
     </div>
 
-    <h4 class="mt-5 mb-3">Generated code</h4>
+    <h4 class="mt-5 mb-3">Generated Code</h4>
 
     <div class="row" v-show="!errors.any()">
         <div class="col-lg-12">
diff --git a/BTCPayServer/wwwroot/paybutton/paybutton.js b/BTCPayServer/wwwroot/paybutton/paybutton.js
index 6f6a9adf1..6f5535118 100644
--- a/BTCPayServer/wwwroot/paybutton/paybutton.js
+++ b/BTCPayServer/wwwroot/paybutton/paybutton.js
@@ -191,7 +191,7 @@ function inputChanges(event, buttonSize) {
     });
     url = url.href;
     
-    $("#preview-link").empty().append($('<a></a>').text(url).attr('href', url));
+    $("#preview-link").attr('href', url);
     
     $('pre code').each(function (i, block) {
         hljs.highlightBlock(block);