diff --git a/src/template/style.ejs b/src/template/style.ejs
index 105c562..a627516 100644
--- a/src/template/style.ejs
+++ b/src/template/style.ejs
@@ -59,6 +59,10 @@ input {
     border-radius: 4px;
     font-family: monospace;
 }
+input:read-only {
+    cursor: default;
+    background-color: var(--c-dark);
+}
 input:focus,
 input:focus-visible {
     border-color: transparent;
diff --git a/src/views/form.ejs b/src/views/form.ejs
index b73817f..115a12f 100644
--- a/src/views/form.ejs
+++ b/src/views/form.ejs
@@ -8,13 +8,128 @@
 </head>
 <%- include('../template/style.ejs') -%>
 <style>
+
+div {
+    display: grid;
+}
+.title {
+    display: grid;
+    grid-template-columns: auto auto 1fr;
+    align-content: center;
+    justify-content: center;
+    padding: 1rem;
+    column-gap: 1rem;
+}
+.title > * {
+    margin: auto;
+}
+
+.form {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    row-gap: .5rem;
+    column-gap: .5rem;
+}
+.form > div:last-child {
+    grid-column-end: -1;
+}
+.code {
+    background-size: contain;
+    background-position: center center;
+    background-repeat: no-repeat;
+}
+.card {
+    grid-template-columns: auto auto;
+    grid-template-rows: auto auto;
+}
+.title { grid-row: 1; grid-column: span 2; }
+.code { grid-row: 2; grid-column: 1; }
+.form { grid-row: 2; grid-column: 2; }
 </style>
 <body>
-    <div>
-
+    <div class="card">
+        <div class="title">
+            <h1>Form: <%= query["form-title"] %></h1>
+            <span>Create your form here: <a href="/#maker">/#maker</a></span>
+        </div>
+        <!-- <pre><%= query ? JSON.stringify(query, null, 2) : "query: None" %></pre> -->
+        <div class="code" id="qrcode">
+        </div>
+        <div class="form">
+            <div>
+                <label for="form-client-name">Client name</label>
+                <input value="<%= query["form-client-name"] %>" <%= query["form-client-name"] ? "readonly" : "" %> type="text" placeholder="Peter Novak" name="form-client-name">
+            </div>
+            <div>
+                <label for="form-client-address">Client address</label>
+                <input value="<%= query["form-client-address"] %>" <%= query["form-client-address"] ? "readonly" : "" %> type="text" placeholder="Ravna ulica 13 a" name="form-client-address">
+            </div>
+            <div>
+                <label for="form-client-city">Client city</label>
+                <input value="<%= query["form-client-city"] %>" <%= query["form-client-city"] ? "readonly" : "" %> type="text" placeholder="1000 Ljubljana" name="form-client-city">
+            </div>
+            <div>
+                <label for="form-amount">Amount</label>
+                <input value="<%= query["form-amount"] %>" <%= query["form-amount"] ? "readonly" : "" %> type="number" placeholder="00000001132" name="form-amount">
+            </div>
+            <div>
+                <label for="form-code">Purpose code</label>
+                <input value="<%= query["form-code"] %>" <%= query["form-code"] ? "readonly" : "" %> type="text" placeholder="OTHR" name="form-code">
+            </div>
+            <div>
+                <label for="form-purpose">Payment purpose</label>
+                <input value="<%= query["form-purpose"] %>" <%= query["form-purpose"] ? "readonly" : "" %> type="text" placeholder="moutain bike first half" name="form-purpose">
+            </div>
+            <div>
+                <label for="form-iban">IBAN</label>
+                <input value="<%= query["form-iban"] %>" <%= query["form-iban"] ? "readonly" : "" %> type="text" placeholder="SI56047500000280672" name="form-iban">
+            </div>
+            <div>
+                <label for="form-reference">Reference</label>
+                <input value="<%= query["form-reference"] %>" <%= query["form-reference"] ? "readonly" : "" %> type="text" placeholder="SI121234567890120" name="form-reference">
+            </div>
+            <div>
+                <label for="form-issuer-name">Issuer name</label>
+                <input value="<%= query["form-issuer-name"] %>" <%= query["form-issuer-name"] ? "readonly" : "" %> type="text" placeholder="Spletne strani na 123" name="form-issuer-name">
+            </div>
+            <div>
+                <label for="form-issuer-address">Issuer address</label>
+                <input value="<%= query["form-issuer-address"] %>" <%= query["form-issuer-address"] ? "readonly" : "" %> type="text" placeholder="Za deveto smreko 15 k" name="form-issuer-address">
+            </div>
+            <div>
+                <label for="form-issuer-city">Issuer city</label>
+                <input value="<%= query["form-issuer-city"] %>" <%= query["form-issuer-city"] ? "readonly" : "" %> type="text" placeholder="1000 Ljubljana" name="form-issuer-city">
+            </div>
+            <div>
+                <input type="submit" value="Update details" id="update-details">
+            </div>
+        </div>
     </div>
 </body>
 <script>
+const btn = document.getElementById("update-details")
+const qrcode = document.getElementById("qrcode")
+function val (name) {
+    return document.getElementsByName(name)?.[0]?.value || ""
+}
+function updateQR (e) {
+    const querystring = [
+        ["client_name", val("form-client-name")],
+        ["client_address", val("form-client-address")],
+        ["client_city", val("form-client-city")],
+        ["amount", val("form-amount")],
+        ["purpose_code", val("form-code")],
+        ["payment_purpose", val("form-purpose")],
+        ["iban", val("form-iban")],
+        ["reference", val("form-reference")],
+        ["issuer_name", val("form-issuer-name")],
+        ["issuer_address", val("form-issuer-address")],
+        ["issuer_city", val("form-issuer-city")],
+    ].map(v => `${v[0]}=${v[1]}`).join("&")
+    qrcode.style.setProperty('background-image', `url("/api/qrcode?${querystring}")`)
+}
+btn.addEventListener("click", updateQR)
 
+updateQR()
 </script>
 </html>
\ No newline at end of file
diff --git a/src/views/index.ejs b/src/views/index.ejs
index 29d3982..67fa519 100644
--- a/src/views/index.ejs
+++ b/src/views/index.ejs
@@ -76,7 +76,7 @@ section div {
             </div>
             <div>
                 <label for="form-iban">IBAN</label>
-                <input type="number" placeholder="SI56047500000280672" name="form-iban">
+                <input type="text" placeholder="SI56047500000280672" name="form-iban">
             </div>
             <div>
                 <label for="form-reference">Reference</label>
