diff --git a/cmd/web/templates/base.layout.gohtml b/cmd/web/templates/base.layout.gohtml
index 08918e7..74f3e94 100644
--- a/cmd/web/templates/base.layout.gohtml
+++ b/cmd/web/templates/base.layout.gohtml
@@ -4,7 +4,7 @@
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Bootstrap demo</title>
+        <title>Buy Widgets</title>
         <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
               rel="stylesheet"
               integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
@@ -15,6 +15,45 @@
         </title>
     </head>
     <body>
+        <nav class="navbar navbar-expand-lg bg-body-tertiary">
+            <div class="container-fluid">
+                <a class="navbar-brand" href="#">&nbsp;</a>
+                <button class="navbar-toggler"
+                        type="button"
+                        data-bs-toggle="collapse"
+                        data-bs-target="#navbarSupportedContent"
+                        aria-controls="navbarSupportedContent"
+                        aria-expanded="false"
+                        aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+                <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                        <li class="nav-item">
+                            <a class="nav-link active" aria-current="page" href="/">Home</a>
+                        </li>
+                        <li class="nav-item">
+                            <a class="nav-link" href="/virtual-terminal">Virtual Terminal</a>
+                        </li>
+                        <li class="nav-item dropdown">
+                            <a class="nav-link dropdown-toggle"
+                               href="#"
+                               role="button"
+                               data-bs-toggle="dropdown"
+                               aria-expanded="false">Products</a>
+                            <ul class="dropdown-menu">
+                                <li>
+                                    <a class="dropdown-item" href="/charge-once">Buy one widget</a>
+                                </li>
+                                <li>
+                                    <a class="dropdown-item" href="#">Subscription</a>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </nav>
         <div class="container">
             <div class="row">
                 <div class="col">{{ block "content" . }} {{ end }}</div>
diff --git a/cmd/web/templates/buy-once.page.gohtml b/cmd/web/templates/buy-once.page.gohtml
index 58e1395..fc7ca4d 100644
--- a/cmd/web/templates/buy-once.page.gohtml
+++ b/cmd/web/templates/buy-once.page.gohtml
@@ -8,4 +8,74 @@ Buy one widget
 <img src="/static/widget.jpeg"
      alt="widget"
      class="image-fluid rounded mx-auto d-block">
+
+<div class="alert alert-danger text-center d-none" id="card-messages"></div>
+<form action="/payment-succeeded"
+      method="post"
+      name="charge_form"
+      id="charge_form"
+      class="d-blick needs-validation charge-form"
+      autocomplete="off"
+      novalidate="">
+    <div class="mb-3">
+        <label for="amount" class="form-label">Amount</label>
+        <input type="text"
+               id="amount"
+               name="amount"
+               autocomplete="amount-new"
+               required=""
+               class="form-control">
+    </div>
+    <div class="mb-3">
+        <label for="cardholder-name" class="form-label">Cardholder Name</label>
+        <input type="text"
+               id="cardholder-name"
+               name="cardholder_name"
+               autocomplete="cardholder-name-new"
+               required=""
+               class="form-control">
+    </div>
+    <div class="mb-3">
+        <label for="cardholder-email" class="form-label">Cardholder Email</label>
+        <input type="text"
+               id="cardholder-email"
+               name="cardholder_email"
+               autocomplete="cardholder-email-new"
+               required=""
+               class="form-control">
+    </div>
+    <!-- card number will be built by stripe -->
+    <div class="mb-3">
+        <label for="card-element" class="form-label">Credit Card</label>
+        <div class="form-control" id="card-element"></div>
+        <div class="alert-danger text-center" id="card-errors" role="alert"></div>
+        <div class="alert-success text-center" id="card-success" role="alert"></div>
+    </div>
+    <hr>
+    <a href="javascript:void(0)"
+       id="pay-button"
+       class="btn btn-primary"
+       onclick="val()">Charge Card</a>
+    <div class="text-center d-none" id="processing-payment">
+        <div class="spinner-border text-primary" role="status">
+            <span class="visually-hidden">Loading...</span>
+        </div>
+    </div>
+    <input id="payment_intent"
+           type="hidden"
+           name="payment_intent"
+           value="payment_intent">
+    <input id="payment_method"
+           type="hidden"
+           name="payment_method"
+           value="payment_method">
+    <input id="payment_amount"
+           type="hidden"
+           name="payment_amount"
+           value="payment_amount">
+    <input id="payment_currency"
+           type="hidden"
+           name="payment_currency"
+           value="payment_currency">
+</form>
 {{ end }}
