diff --git a/lnbits/__init__.py b/lnbits/__init__.py
index f92d050..8edaa4b 100644
--- a/lnbits/__init__.py
+++ b/lnbits/__init__.py
@@ -30,6 +30,7 @@ Talisman(
             "cdnjs.cloudflare.com",
             "code.ionicframework.com",
             "code.jquery.com",
+            "api.opennode.co",
             "fonts.googleapis.com",
             "fonts.gstatic.com",
             "maxcdn.bootstrapcdn.com",
diff --git a/lnbits/extensions/tpos/config.json b/lnbits/extensions/tpos/config.json
index cdbd8f4..c5789af 100644
--- a/lnbits/extensions/tpos/config.json
+++ b/lnbits/extensions/tpos/config.json
@@ -1,6 +1,6 @@
 {
-    "name": "TPOS",
-    "short_description": "A shareable POS!",
-    "icon": "dialpad",
-    "contributors": ["talvasconcelos", "arcbtc"]
+  "name": "TPoS",
+  "short_description": "A shareable PoS terminal!",
+  "icon": "dialpad",
+  "contributors": ["talvasconcelos", "arcbtc"]
 }
diff --git a/lnbits/extensions/tpos/migrations.py b/lnbits/extensions/tpos/migrations.py
index d01e029..f7b1a17 100644
--- a/lnbits/extensions/tpos/migrations.py
+++ b/lnbits/extensions/tpos/migrations.py
@@ -5,14 +5,16 @@ def m001_initial(db):
     """
     Initial tposs table.
     """
-    db.execute("""
+    db.execute(
+        """
         CREATE TABLE IF NOT EXISTS tposs (
             id TEXT PRIMARY KEY,
             wallet TEXT NOT NULL,
             name TEXT NOT NULL,
             currency TEXT NOT NULL
         );
-    """)
+    """
+    )
 
 
 def migrate():
diff --git a/lnbits/extensions/tpos/templates/tpos/index.html b/lnbits/extensions/tpos/templates/tpos/index.html
index 05b99f2..cebcd8f 100644
--- a/lnbits/extensions/tpos/templates/tpos/index.html
+++ b/lnbits/extensions/tpos/templates/tpos/index.html
@@ -8,7 +8,7 @@
     <div class="col-12 col-md-8 col-lg-7 q-gutter-y-md">
       <q-card>
         <q-card-section>
-          <q-btn unelevated color="deep-purple" @click="tposDialog.show = true">New TPoS</q-btn>
+          <q-btn unelevated color="deep-purple" @click="formDialog.show = true">New TPoS</q-btn>
         </q-card-section>
       </q-card>
 
@@ -31,7 +31,6 @@
             <template v-slot:header="props">
               <q-tr :props="props">
                 <q-th auto-width></q-th>
-
                 <q-th
                   v-for="col in props.cols"
                   :key="col.name"
@@ -39,17 +38,15 @@
                 >
                   {{ col.label }}
                 </q-th>
-
                 <q-th auto-width></q-th>
-
               </q-tr>
             </template>
 
             <template v-slot:body="props">
               <q-tr :props="props">
                 <q-td auto-width>
-                  <q-btn unelevated dense size="xs" icon="vpn_lock" :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'" type="a" :href="props.row.tpos" target="_blank"></q-btn>
-                 </q-td>
+                  <q-btn unelevated dense size="xs" icon="launch" :color="($q.dark.isActive) ? 'grey-7' : 'grey-5'" type="a" :href="props.row.tpos" target="_blank"></q-btn>
+                </q-td>
                 <q-td
                   v-for="col in props.cols"
                   :key="col.name"
@@ -77,47 +74,43 @@
           <q-separator></q-separator>
           <q-list>
             <q-expansion-item
-                  group="extras"
-                  icon="swap_vertical_circle"
-                  label="Info"
-                  :content-inset-level="0.5"
-                >
-                <q-card>
-      <q-card-section>
-       <h5 class="text-subtitle1 q-my-none">Tiago's Point of Sale</h5>
-                <p>Is an instant and secure point of sale terminal. A merchant can use the PoS to accept payments to their LNbits wallet, without having to expose the wallet itself, which means it can even be shared with others. <br/>For example, a merchant could setup multiple TPoSs for each one of their colleagues, and use TPoS to track which colleague has taken sales. The terminal is optimized for mobile use, and is easily shared as a QR code, via the # share function on the TPoS. <br/>
-                  <small> Created by,  <a href="https://github.com/talvasconcelos">Tiago Vasconcelos</a></small></p> 
+              group="extras"
+              icon="info"
+              label="Info">
+              <q-card>
+                <q-card-section>
+                  <h5 class="text-subtitle1 q-mt-none q-mb-sm">Tiago's Point of Sale</h5>
+                  <p>Is an instant and secure point of sale terminal. A merchant can use the PoS to accept payments to their LNbits wallet, without having to expose the wallet itself, which means it can even be shared with others.</p>
+                  <p>For example, a merchant could setup multiple TPoSs for each one of their colleagues, and use TPoS to track which colleague has taken sales. The terminal is optimized for mobile use, and is easily shared as a QR code, via the "#" share function on the TPoS.</p>
+                  <small>Created by <a href="https://github.com/talvasconcelos" target="_blank">Tiago Vasconcelos</a>.</small>
+                </q-card-section>
               </q-card>
-      </q-card-section>
-
-                </q-expansion-item>
+            </q-expansion-item>
           </q-list>
         </q-card-section>
       </q-card>
     </div>
 
-    <q-dialog v-model="tposDialog.show" position="top">
+    <q-dialog v-model="formDialog.show" position="top" @hide="closeFormDialog">
       <q-card class="q-pa-lg q-pt-xl" style="width: 500px">
         <q-form class="q-gutter-md">
-
             <q-input filled dense
-            v-model.trim="tposDialog.data.name"
-            label="Name"
-            placeholder="Tiago's PoS"></q-input>
-
-           <q-select filled dense emit-value v-model="tposDialog.data.wallet" :options="g.user.walletOptions" label="Wallet *">
-          </q-select>
-
-           <q-select filled dense emit-value v-model="tposDialog.data.currency" :options="currencyOptions" label="Currency *">
-          </q-select>
-
-
-          <q-btn unelevated
-            color="deep-purple"
-            :disable="tposDialog.data.currency == null || tposDialog.data.name == null"
-            @click="createTPoS">Create TPoS</q-btn>
-
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+              v-model.trim="formDialog.data.name"
+              label="Name"
+              placeholder="Tiago's PoS"></q-input>
+            <q-select filled dense
+              emit-value v-model="formDialog.data.wallet"
+              :options="g.user.walletOptions"
+              label="Wallet *"></q-select>
+            <q-select filled dense
+              emit-value v-model="formDialog.data.currency"
+              :options="currencyOptions"
+              label="Currency *"></q-select>
+            <q-btn unelevated
+              color="deep-purple"
+              :disable="formDialog.data.currency == null || formDialog.data.name == null"
+              @click="createTPoS">Create TPoS</q-btn>
+            <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
         </q-form>
       </q-card>
     </q-dialog>
@@ -141,9 +134,13 @@
         return {
           tposs: [],
           currencyOptions: [
-        'USD',  'EUR',  'GBP',  'DZD',  'ARP',  'AUD',  'ATS',  'BSD',  'BBD',  'BEF',  'BMD',  'BRL',  'BGL',  'CAD',  'CLP',  'CNY',  'CYP',  'CSK',  'DKK',  'NLG',  'XCD',  'EGP',  'FJD',  'FIM',  'FRF',  'DEM',  'XAU',  'GRD',  'HKD',  'HUF',  'ISK',  'INR',  'IDR',  'IEP',  'ILS',  'ITL',  'JMD',  'JPY',  'JOD',  'KRW',  'LBP',  'LUF',  'MYR',  'MXP',  'NLG',  'NZD',  'NOK',  'PKR',  'XPD',  'PHP',  'XPT',  'PLZ',  'PTE',  'ROL',  'RUR',  'SAR',  'XAG',  'SGD',  'SKK',  'ZAR',  'KRW',  'ESP',  'XDR',  'SDD',  'SEK',  'CHF',  'TWD',  'THB',  'TTD',  'TRL',  'VEB',  'ZMK',  'EUR',  'XCD',  'XDR',  'XAG',  'XAU',  'XPD',  'XPT',
-         ],
-
+            'USD', 'EUR', 'GBP', 'DZD', 'ARP', 'AUD', 'ATS', 'BSD', 'BBD', 'BEF', 'BMD', 'BRL', 'BGL', 'CAD', 'CLP',
+            'CNY', 'CYP', 'CSK', 'DKK', 'NLG', 'XCD', 'EGP', 'FJD', 'FIM', 'FRF', 'DEM', 'XAU', 'GRD', 'HKD', 'HUF',
+            'ISK', 'INR', 'IDR', 'IEP', 'ILS', 'ITL', 'JMD', 'JPY', 'JOD', 'KRW', 'LBP', 'LUF', 'MYR', 'MXP', 'NLG',
+            'NZD', 'NOK', 'PKR', 'XPD', 'PHP', 'XPT', 'PLZ', 'PTE', 'ROL', 'RUR', 'SAR', 'XAG', 'SGD', 'SKK', 'ZAR',
+            'KRW', 'ESP', 'XDR', 'SDD', 'SEK', 'CHF', 'TWD', 'THB', 'TTD', 'TRL', 'VEB', 'ZMK', 'EUR', 'XCD', 'XDR',
+            'XAG', 'XAU', 'XPD', 'XPT'
+          ],
           tpossTable: {
             columns: [
               {name: 'id', align: 'left', label: 'ID', field: 'id'},
@@ -154,13 +151,16 @@
               rowsPerPage: 10
             }
           },
-          tposDialog: {
+          formDialog: {
             show: false,
             data: {}
           }
         };
       },
       methods: {
+        closeFormDialog: function () {
+          this.formDialog.data = {};
+        },
         getTPoSs: function () {
           var self = this;
 
@@ -170,29 +170,25 @@
             this.g.user.wallets[0].inkey
           ).then(function (response) {
             self.tposs = response.data.map(function (obj) {
-              console.log(obj)
               return mapTPoS(obj);
             });
           });
         },
         createTPoS: function () {
           var data = {
-            name: this.tposDialog.data.name,
-            currency: this.tposDialog.data.currency
+            name: this.formDialog.data.name,
+            currency: this.formDialog.data.currency
           };
           var self = this;
 
-          console.log(this.tposDialog.data.wallet);
-
           LNbits.api.request(
             'POST',
             '/tpos/api/v1/tposs',
-            _.findWhere(this.g.user.wallets, {id: this.tposDialog.data.wallet}).inkey,
+            _.findWhere(this.g.user.wallets, {id: this.formDialog.data.wallet}).inkey,
             data
           ).then(function (response) {
             self.tposs.push(mapTPoS(response.data));
-            self.tposDialog.show = false;
-            self.tposDialog.data = {};
+            self.formDialog.show = false;
           }).catch(function (error) {
             LNbits.utils.notifyApiError(error);
           });
@@ -202,7 +198,7 @@
           var tpos = _.findWhere(this.tposs, {id: tposId});
 
           this.$q.dialog({
-            message: 'Are you sure you want to delete this TPoS link?',
+            message: 'Are you sure you want to delete this TPoS?',
             ok: {
               flat: true,
               color: 'orange'
@@ -235,5 +231,3 @@
     });
   </script>
 {% endblock %}
-
-
diff --git a/lnbits/extensions/tpos/templates/tpos/tpos.html b/lnbits/extensions/tpos/templates/tpos/tpos.html
index 1f5716e..5111069 100644
--- a/lnbits/extensions/tpos/templates/tpos/tpos.html
+++ b/lnbits/extensions/tpos/templates/tpos/tpos.html
@@ -1,241 +1,225 @@
-<!DOCTYPE html>
-<html lang="en">
+{% extends "public.html" %}
 
-<head>
 
-    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
-    <meta charset="utf-8">
-    <title>TPoS</title>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <meta name="mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="theme-color" content="#363636">
-    <script
-      src="{{ url_for('static', filename='plugins/jscam/qrcode.min.js') }}"
-      type="text/javascript"
-    ></script>
-    <style>
-        @import url(https://fonts.googleapis.com/css?family=Muli:400,700&display=swap);
-        * {
-            box-sizing: border-box
-        }
-        
-        body {
-            margin: 0;
-            min-height: 100vh;
-            scroll-behavior: smooth;
-            text-rendering: optimizeSpeed;
-            line-height: 1.5
-        }
-        
-        @media (prefers-reduced-motion:reduce) {
-            * {
-                -webkit-animation-duration: .01ms!important;
-                animation-duration: .01ms!important;
-                -webkit-animation-iteration-count: 1!important;
-                animation-iteration-count: 1!important;
-                -webkit-transition-duration: .01ms!important;
-                transition-duration: .01ms!important;
-                scroll-behavior: auto!important
-            }
-        }
-        
-        :root {
-            --primary-color: #ff533d;
-            --primary-bg-color: #363636;
-            --primary-text-color: #f1f1f1;
-            --dimmed-text-color: #818181;
-            --max-width: 460px
-        }
-        
-        body,
-        html {
-            font: 16px/1.21 Muli, sans-serif;
-            font-weight: 400;
-            color: var(--primary-text-color);
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale
-        }
-    </style>
-    <link href="sparkpos_files/bundle.css" rel="preload" as="style">
-</head>
+{% block toolbar_title %}{{ tpos.name }}{% endblock %}
 
-<body>
-    <div id="app">
-        <div class="display">
-  <div id="qrcode" style="position: absolute;">
-  <div id="field1" style="position: absolute;margin-top: 125px;"></div>
+{% block footer %}{% endblock %}
 
-  <div id="field2"></div>
-  
-  </div>
+{% block page_container %}
+  <q-page-container>
+    <q-page>
+      <q-page-sticky v-if="exchangeRate" expand position="top">
+        <div class="row justify-center full-width">
+          <div class="col-12 col-sm-8 col-md-6 col-lg-4 text-center">
+            <h3 class="q-mb-md">{% raw %}{{ famount }}{% endraw %}</h3>
+            <h5 class="q-mt-none">
+              {% raw %}{{ fsat }}{% endraw %} <small>sat</small>
+            </h5>
+          </div>
         </div>
-        <div class="keypad">
-            <button onclick="keys(1)" class="btn-numpad">1</button>
-            <button onclick="keys(2)" class="btn-numpad">2</button>
-            <button onclick="keys(3)" class="btn-numpad">3</button>
-            <button onclick="keys('C')" class="btn-cancel">C</button>
-            <button onclick="keys(4)" class="btn-numpad">4</button>
-            <button onclick="keys(5)" class="btn-numpad">5</button>
-            <button onclick="keys(6)" class="btn-numpad">6</button>
-            <button onclick="keys(7)" class="btn-numpad">7</button>
-            <button onclick="keys(8)" class="btn-numpad">8</button>
-            <button onclick="keys(9)" class="btn-numpad">9</button>
-            <button data-target=".sends" data-toggle="modal" onclick="keys('OK')" class="btn-confirm">OK</button>
-            <button onclick="keys('DEL')" class="btn-numpad">DEL</button>
-            <button onclick="keys(0)" class="btn-numpad">0</button>
-            <button onclick="keys('#')" class="btn-numpad">#</button>
+      </q-page-sticky>
+      <q-page-sticky expand position="bottom">
+        <div class="row justify-center full-width">
+          <div class="col-12 col-sm-8 col-md-6 col-lg-4">
+            <div class="keypad q-pa-sm">
+              <q-btn unelevated
+                @click="stack.push(1)"
+                size="xl" color="grey-8">1</q-btn>
+              <q-btn unelevated
+                @click="stack.push(2)"
+                size="xl" color="grey-8">2</q-btn>
+              <q-btn unelevated
+                @click="stack.push(3)"
+                size="xl" color="grey-8">3</q-btn>
+              <q-btn unelevated
+                @click="stack = []"
+                size="xl" color="pink" class="btn-cancel">C</q-btn>
+              <q-btn unelevated
+                @click="stack.push(4)"
+                size="xl" color="grey-8">4</q-btn>
+              <q-btn unelevated
+                @click="stack.push(5)"
+                size="xl" color="grey-8">5</q-btn>
+              <q-btn unelevated
+                @click="stack.push(6)"
+                size="xl" color="grey-8">6</q-btn>
+              <q-btn unelevated
+                @click="stack.push(7)"
+                size="xl" color="grey-8">7</q-btn>
+              <q-btn unelevated
+                @click="stack.push(8)"
+                size="xl" color="grey-8">8</q-btn>
+              <q-btn unelevated
+                @click="stack.push(9)"
+                size="xl" color="grey-8">9</q-btn>
+              <q-btn unelevated
+                :disabled="amount == 0"
+                @click="showInvoice()"
+                size="xl" color="green" class="btn-confirm">OK</q-btn>
+              <q-btn unelevated
+                @click="stack.splice(-1, 1)"
+                size="xl" color="grey-7">DEL</q-btn>
+              <q-btn unelevated
+                @click="stack.push(0)"
+                size="xl" color="grey-8">0</q-btn>
+              <q-btn unelevated
+                @click="urlDialog.show = true"
+                size="xl" color="grey-7">#</q-btn>
+            </div>
+          </div>
         </div>
-    </div>
-
-</body>
-</center>
-
-<script>
-
-	function postAjax(url, data, thekey, success) {
-  var params =
-    typeof data == 'string'
-      ? data
-      : Object.keys(data)
-          .map(function(k) {
-            return encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
-          })
-          .join('&')
-  var xhr = window.XMLHttpRequest
-    ? new XMLHttpRequest()
-    : new ActiveXObject('Microsoft.XMLHTTP')
-  xhr.open('POST', url)
-  xhr.onreadystatechange = function() {
-    if (xhr.readyState > 3 && xhr.status == 200) {
-      success(xhr.responseText)
+      </q-page-sticky>
+      <q-dialog v-model="invoiceDialog.show" position="top" @hide="closeInvoiceDialog">
+        <q-card v-if="invoiceDialog.data" class="q-pa-lg q-pt-xl lnbits__dialog-card">
+          <q-responsive :ratio="1" class="q-mx-xl q-mb-md">
+            <qrcode :value="invoiceDialog.data.payment_request" :options="{width: 800}" class="rounded-borders"></qrcode>
+          </q-responsive>
+          <div class="text-center">
+            <h3 class="q-my-md">{% raw %}{{ famount }}{% endraw %}</h3>
+            <h5 class="q-mt-none">
+              {% raw %}{{ fsat }}{% endraw %} <small>sat</small>
+            </h5>
+          </div>
+          <div class="row q-mt-md">
+            <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
+          </div>
+        </q-card>
+      </q-dialog>
+      <q-dialog v-model="urlDialog.show" position="top">
+        <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+          <q-responsive :ratio="1" class="q-mx-xl q-mb-md">
+            <qrcode value="{{ request.url }}" :options="{width: 800}" class="rounded-borders"></qrcode>
+          </q-responsive>
+          <div class="text-center q-mb-xl">
+            <p style="word-break: break-all"><strong>{{ tpos.name }}</strong><br>{{ request.url }}</p>
+          </div>
+          <div class="row q-mt-md">
+            <q-btn flat color="grey" @click="copyText('{{ request.url }}', 'TPoS URL copied to clipboard!')" >Copy URL</q-btn>
+            <q-btn v-close-popup flat color="grey" class="q-ml-auto">Close</q-btn>
+          </div>
+        </q-card>
+      </q-dialog>
+    </q-page>
+  </q-page-container>
+{% endblock %}
+
+{% block styles %}
+  <style>
+    .keypad {
+      display: grid;
+      grid-gap: 8px;
+      grid-template-columns: repeat(4, 1fr);
+      grid-template-rows: repeat(4, 1fr);
     }
-  }
-  xhr.setRequestHeader('Grpc-Metadata-macaroon', thekey)
-  xhr.setRequestHeader('Content-Type', 'application/json')
-  xhr.send(params)
-  return xhr
-}
-
-    function getAjax(url, thekey, success) {
-  var xhr = window.XMLHttpRequest
-    ? new XMLHttpRequest()
-    : new ActiveXObject('Microsoft.XMLHTTP')
-  xhr.open('GET', url, true)
-  xhr.onreadystatechange = function() {
-    if (xhr.readyState > 3 && xhr.status == 200) {
-      success(xhr.responseText)
+    .keypad .btn {
+      height: 100%;
     }
-  }
-  xhr.setRequestHeader('Grpc-Metadata-macaroon', thekey)
-  xhr.setRequestHeader('Content-Type', 'application/json')
-
-  xhr.send()
-  return xhr
-}
-
-var total = "";
-  field1 = "field1"
-  field2 = "field2"
-  document.getElementById(field1).innerHTML = "<p style='font-size: 30px;' id=sats></p>"
-  document.getElementById(field2).innerHTML = "<p style='font-size: 50px;' id=fiat></p>"
-
-
-  function keys(num){
-  if(Number.isInteger(num)){
-      total = total + String(num)
-      document.getElementById("fiat").innerHTML = String(parseInt(total)/100) + " " + " {{ curr }}"
-
-      document.getElementById("sats").innerHTML = parseInt( (parseInt(total)/100) *  "{{ rate }}") + " Sats"
-
-  }
-  
-  else if(num == "DEL"){
-      total = "0";
-  }
-  else if(num == "C"){
-     location.reload();
-  }
-  else if(num == "#"){
-
-      new QRCode(document.getElementById('qrcode'), {
-            text: window.location.href,
-            width: 300,
-            height: 300,
-            colorDark: '#000000',
-            colorLight: '#ffffff',
-            correctLevel: QRCode.CorrectLevel.M
-          })
-      document.getElementById("sats").innerHTML = ""
-      document.getElementById("fiat").innerHTML = ""
-
-
-          document.getElementById("qrcode").style.backgroundColor = "white";
-          document.getElementById("qrcode").style.padding = "20px";
-
-  }
-
-  else if(num == "OK"){
-    satz = document.getElementById("sats").innerHTML
-    console.log(satz)
-    stax = satz.replace("Sats", "")
-    submitforticket(parseInt(stax))
-  }
-}
-
-function submitforticket(sats){
-console.log(sats)
-
-  postAjax(
-    "/tpos/api/v1/tposs/invoice/"  + "{{ tpos }}",
-    JSON.stringify({"amount":  parseInt(sats)}),
-    "lorem",
-
-    function(data) {
-
-      theinvoice = JSON.parse(data).payment_request
-      thehash = JSON.parse(data).checking_id
-      
-     new QRCode(document.getElementById('qrcode'), {
-        text: theinvoice,
-        width: 300,
-        height: 300,
-        colorDark: '#000000',
-        colorLight: '#ffffff',
-        correctLevel: QRCode.CorrectLevel.M
-      })
-  document.getElementById("sats").innerHTML = ""
-  document.getElementById("fiat").innerHTML = ""
-
-
-      document.getElementById("qrcode").style.backgroundColor = "white";
-      document.getElementById("qrcode").style.padding = "20px";
-
-
-      var refreshId = setInterval(function(){
-
-      getAjax('/tpos/api/v1/tposs/invoice/' + thehash, "lorem", function(datab) {
-        console.log(JSON.parse(datab))
-        if (JSON.parse(datab).PAID == true) {
-           
-            document.getElementById("qrcode").innerHTML = ""
-            document.getElementById("qrcode").style.padding = "0px";
-            document.getElementById("qrcode").style.backgroundColor = "#363636";
-               document.getElementById("qrcode").innerHTML = "<h1 style='color:green;font-size: 100px;'>PAID!</h1>"
-               console.log("theinvoice");
-
-          setTimeout(function(){
-                
-                 
-               location.reload();
-           }, 4000);
-          
+    .btn-cancel, .btn-confirm {
+      grid-row: auto/span 2;
+    }
+  </style>
+{% endblock %}
+
+{% block scripts %}
+  <script src="{{ url_for('static', filename='vendor/vue-qrcode@1.0.2/vue-qrcode.min.js') }}"></script>
+  <script>
+    Vue.component(VueQrcode.name, VueQrcode);
+
+    new Vue({
+      el: '#vue',
+      mixins: [windowMixin],
+      data: function () {
+        return {
+          tposId: '{{ tpos.id }}',
+          currency: '{{ tpos.currency }}',
+          exchangeRate: null,
+          stack: [],
+          invoiceDialog: {
+            show: false,
+            data: null,
+            dismissMsg: null,
+            paymentChecker: null
+          },
+          urlDialog: {
+            show: false
+          }
+        };
+      },
+      computed: {
+        amount: function () {
+          if (!this.stack.length) return 0.00;
+          return (Number(this.stack.join('')) / 100).toFixed(2);
+        },
+        famount: function () {
+          return LNbits.utils.formatCurrency(this.amount, this.currency);
+        },
+        sat: function () {
+          if (!this.exchangeRate) return 0;
+          return Math.ceil((this.amount / this.exchangeRate) * 100000000);
+        },
+        fsat: function () {
+          return LNbits.utils.formatSat(this.sat);
+        }
+      },
+      methods: {
+        closeInvoiceDialog: function () {
+          this.stack = [];
+          var dialog = this.invoiceDialog;
+          setTimeout(function () {
+            clearInterval(dialog.paymentChecker);
+            dialog.dismissMsg();
+          }, 3000);
+        },
+        showInvoice: function () {
+          var self = this;
+          var dialog = this.invoiceDialog;
+
+          axios.post(
+            '/tpos/api/v1/tposs/' + this.tposId + '/invoices/',
+            {amount: this.sat}
+          ).then(function (response) {
+            dialog.data = response.data;
+            dialog.show = true;
+
+            dialog.dismissMsg = self.$q.notify({
+              timeout: 0,
+              message: 'Waiting for payment...'
+            });
+
+            dialog.paymentChecker = setInterval(function () {
+              axios.get(
+                '/tpos/api/v1/tposs/' + self.tposId + '/invoices/' + response.data.checking_id
+              ).then(function (res) {
+                if (res.data.paid) {
+                  clearInterval(dialog.paymentChecker);
+                  dialog.dismissMsg();
+                  dialog.show = false;
+
+                  self.$q.notify({
+                    type: 'positive',
+                    message: self.fsat + ' sat received!',
+                    icon: null
+                  });
+                }
+              });
+            }, 2000);
+
+          }).catch(function (error) {
+            LNbits.utils.notifyApiError(error);
+          });
+        },
+        getRates: function () {
+          var self = this;
+          axios.get("https://api.opennode.co/v1/rates").then(function (response) {
+            self.exchangeRate = response.data.data['BTC' + self.currency][self.currency];
+          });
+        }
+      },
+      created: function () {
+        var getRates = this.getRates;
+        getRates();
+        setInterval(function () { getRates(); }, 20000);
       }
-      })}, 3000);
-});
-}
-</script>
-<style>
-@import url(https://fonts.googleapis.com/css?family=Muli:400,700&display=swap);*,:after,:before{box-sizing:border-box}ol[class],ul[class]{padding:0}blockquote,body,dd,dl,figcaption,figure,h1,h2,h3,h4,li,ol[class],p,ul[class]{margin:0}body{min-height:100vh;scroll-behavior:smooth;text-rendering:optimizeSpeed;line-height:1.5}ol[class],ul[class]{list-style:none}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img{max-width:100%;display:block}article>*+*{margin-top:1em}button,input,select,textarea{font:inherit}@media (prefers-reduced-motion:reduce){*{-webkit-animation-duration:.01ms!important;animation-duration:.01ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important;-webkit-transition-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--primary-color:#ff533d;--primary-bg-color:#363636;--primary-text-color:#f1f1f1;--dimmed-text-color:#818181;--max-width:460px}body,html{font:16px/1.21 Muli,sans-serif;font-weight:400;color:var(--primary-text-color);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{position:relative;min-height:100vh;display:grid;grid-template-rows:1fr 1fr;width:100%;max-width:var(--max-width);margin:0 auto;background:var(--primary-bg-color)}input,select,textarea{display:block;margin-bottom:1.25em;padding:.5em .6em;border:1px solid transparent;box-sizing:border-box;outline:none}input:active{border:1px solid var(--primary-color)}input:focus,select:focus,textarea:focus{outline:none}select{height:2.5em}label{display:block;margin:.5em 0;font-size:90%}button,select{text-transform:none}.btn{background-color:transparent;border-color:var(--primary-text-color);border-width:1px;color:var(--primary-text-color);border-radius:4px;cursor:pointer;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:calc(.375em - 1px) .75em;text-align:center;white-space:nowrap;height:2.5em}.btn.btn-primary{background-color:var(--primary-color);border-color:transparent}.btn.btn-submit{background-color:var(--submit-color);border-color:transparent}.menu-toggle{position:absolute;top:20px;right:25px;font-size:1.5rem;cursor:pointer;padding:5px;width:40px;height:40px;z-index:2;fill:var(--dimmed-text-color);will-change:fill}.menu-toggle:focus,.menu-toggle:hover{fill:var(--primary-text-color);-webkit-transition:all .3s ease;transition:all .3s ease}.img-responsive{width:100%;height:auto}.main-menu{height:100%;width:0;position:absolute;z-index:1;top:0;left:0;background-color:var(--primary-bg-color);overflow-x:hidden;padding-top:60px;-webkit-transition:.5s;transition:.5s}.main-menu a{padding:8px 8px 8px 32px;text-decoration:none;font-size:25px;color:var(--dimmed-text-color);display:block;-webkit-transition:.3s;transition:.3s}.main-menu a:hover{color:var(--primary-text-color)}.main-menu .closebtn{position:absolute;display:block;cursor:pointer;top:0;right:25px;font-size:36px;margin-left:50px}.accordion{width:100%;text-align:left;border:none;outline:none}.title{cursor:pointer;font-weight:700;padding:1rem}.panel{padding:1rem;width:80%;display:none;overflow:hidden}.panel.active{display:block}footer.menu-footer{position:absolute;padding:1rem;bottom:0}footer.menu-footer>a{font-size:80%;padding:0}.display{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;padding:0 10px;text-shadow:2px 4px 15px rgba(0,0,0,.15);color:var(--primary-text-color)}.display .symbol{font-size:1rem}.display .sats{position:absolute;font-size:1.25rem;bottom:10px;left:10px}.display p{margin:0 5px}.keypad{max-height:500px;display:grid;grid-gap:7px;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-items:center;padding:5px}.keypad *{all:unset;width:100%;height:100%;color:var(--primary-text-color)}.btn-cancel,.btn-confirm,.btn-numpad{border:2px solid var(--primary-text-color);border-radius:10px;background:none;text-align:center;font-size:1.7em}.btn-cancel:active,.btn-confirm:active,.btn-numpad:active{background:var(--primary-color)}@media (hover:hover){.btn-cancel:hover,.btn-confirm:hover,.btn-numpad:hover{background:var(--primary-color)}}.btn-cancel,.btn-confirm{grid-row:auto/span 2}.btn-confirm{background:#6b8e23}.btn-cancel{background:tomato}.modal{position:fixed;top:0;left:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:0;background-color:transparent;overflow:hidden;-webkit-transition:background-color .25s ease;transition:background-color .25s ease;z-index:9998}.modal.open{position:fixed;width:100%;height:100vh;background-color:rgba(0,0,0,.5);-webkit-transition:background-color .25s;transition:background-color .25s}.modal.open>.content-wrapper{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}.modal .content-wrapper{position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;width:90%;max-width:calc(var(--max-width)*0.95);margin:0;padding:2.5rem;background-color:#fff;border-radius:.3125rem;box-shadow:0 0 2.5rem rgba(0,0,0,.5);-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transition:-webkit-transform .25s;transition:-webkit-transform .25s;transition:transform .25s;transition:transform .25s,-webkit-transform .25s;-webkit-transition-delay:.15s;transition-delay:.15s;color:#444}.modal .content-wrapper,.modal .content-wrapper .close,.modal.open.settled .content-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.modal .content-wrapper .close,.modal.open.settled .content-wrapper{-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:.25s linear;transition:.25s linear}.modal .content-wrapper .close{position:absolute;top:.5rem;right:.5rem;width:2.5rem;height:2.5rem;border:none;background-color:transparent;font-size:1.5rem}.modal .content-wrapper .close:after,.modal .content-wrapper .close:before{position:absolute;content:"";width:1.25rem;height:.125rem;background-color:var(--primary-bg-color)}.modal .content-wrapper .close:before{-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}.modal .content-wrapper .close:after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}.modal .content-wrapper .close:hover:after,.modal .content-wrapper .close:hover:before{background-color:var(--dimmed-text-color)}.modal .content-wrapper .modal-header{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:100%;margin:0;padding:0 0 1.25rem}.modal .content-wrapper .modal-header h2{font-size:1.5rem;font-weight:700}.modal .content-wrapper .content{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column nowrap;flex-flow:column nowrap;max-width:100%}.modal .content-wrapper .content p{font-size:.875rem;line-height:1.75}.modal .content-wrapper .content p,.modal .content-wrapper .content small{text-align:center;word-wrap:break-word}.modal .content-wrapper .modal-footer{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;width:100%;margin:0;padding:1.875rem 0 0}.modal .content-wrapper .modal-footer .action{position:relative;margin-left:.625rem;padding:.625rem 1.25rem;border:none;background-color:#708090;border-radius:.25rem;color:#fff;font-size:.87rem;font-weight:300;overflow:hidden;z-index:1}.modal .content-wrapper .modal-footer .action:before{position:absolute;content:"";top:0;left:0;width:0;height:100%;background-color:hsla(0,0%,100%,.2);-webkit-transition:width .25s;transition:width .25s;z-index:0}.modal .content-wrapper .modal-footer .action.green{background-color:#6b8e23}.modal .content-wrapper .modal-footer .action.red{background-color:tomato}.modal .content-wrapper .modal-footer .action:hover:before{width:100%}.checkmark{width:56px;height:56px;margin:5rem auto;border-radius:50%;display:block;stroke-width:2;stroke:#fff;stroke-miterlimit:10;box-shadow:inset 0 0 0 #7ac142;-webkit-animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#7ac142;fill:none;-webkit-animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;-webkit-animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards;animation:stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@-webkit-keyframes stroke{to{stroke-dashoffset:0}}@keyframes stroke{to{stroke-dashoffset:0}}@-webkit-keyframes scale{0%,to{-webkit-transform:none;transform:none}50%{-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}}@keyframes scale{0%,to{-webkit-transform:none;transform:none}50%{-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}}@-webkit-keyframes fill{to{box-shadow:inset 0 0 0 30px #7ac142}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #7ac142}}.loader{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;background-color:var(--primary-bg-color);width:100%;height:100vh;z-index:9999;stroke:var(--primary-color)}.loader svg{height:100px;width:100px;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.loader circle{stroke-dasharray:156;stroke-dashoffset:156;-webkit-animation:load 2.3s infinite;animation:load 2.3s infinite}@-webkit-keyframes load{50%{stroke-dashoffset:0}to{stroke-dashoffset:-156}}@keyframes load{50%{stroke-dashoffset:0}to{stroke-dashoffset:-156}}
-</style>
-</html>
+    });
+  </script>
+{% endblock %}
diff --git a/lnbits/extensions/tpos/views.py b/lnbits/extensions/tpos/views.py
index 98b473b..5edf1d3 100644
--- a/lnbits/extensions/tpos/views.py
+++ b/lnbits/extensions/tpos/views.py
@@ -1,8 +1,5 @@
-import requests
-
 from flask import g, abort, render_template
 
-from lnbits.core.crud import get_wallet
 from lnbits.decorators import check_user_exists, validate_uuids
 from lnbits.helpers import Status
 
@@ -19,8 +16,6 @@ def index():
 
 @tpos_ext.route("/<tpos_id>")
 def tpos(tpos_id):
-    tpos = get_tpos(tpos_id) or abort(Status.NOT_FOUND, "tpos does not exist.")
-    r = requests.get("https://api.opennode.co/v1/rates")
-    r_json = r.json()
-    rr = get_wallet(tpos.wallet)
-    return render_template("tpos/tpos.html", tpos=tpos.id, inkey=rr.inkey, rate=r_json["data"]["BTC" + tpos.currency][tpos.currency], curr=tpos.currency)
+    tpos = get_tpos(tpos_id) or abort(Status.NOT_FOUND, "TPoS does not exist.")
+
+    return render_template("tpos/tpos.html", tpos=tpos)
diff --git a/lnbits/extensions/tpos/views_api.py b/lnbits/extensions/tpos/views_api.py
index 3f7cb0c..c756c66 100644
--- a/lnbits/extensions/tpos/views_api.py
+++ b/lnbits/extensions/tpos/views_api.py
@@ -1,6 +1,6 @@
 from flask import g, jsonify, request
 
-from lnbits.core.crud import get_user
+from lnbits.core.crud import get_user, get_wallet
 from lnbits.core.services import create_invoice
 from lnbits.decorators import api_check_wallet_key, api_validate_post_request
 from lnbits.helpers import Status
@@ -30,9 +30,7 @@ def api_tposs():
     }
 )
 def api_tpos_create():
-    print("poo")
-
-    tpos = create_tpos(wallet_id=g.wallet.id, name=g.data["name"], currency=g.data["currency"])
+    tpos = create_tpos(wallet_id=g.wallet.id, **g.data)
 
     return jsonify(tpos._asdict()), Status.CREATED
 
@@ -50,31 +48,44 @@ def api_tpos_delete(tpos_id):
 
     delete_tpos(tpos_id)
 
-    return '', Status.NO_CONTENT
+    return "", Status.NO_CONTENT
 
 
-@tpos_ext.route("/api/v1/tposs/invoice/<tpos_id>", methods=["POST"])
+@tpos_ext.route("/api/v1/tposs/<tpos_id>/invoices/", methods=["POST"])
 @api_validate_post_request(schema={"amount": {"type": "integer", "min": 1, "required": True}})
 def api_tpos_create_invoice(tpos_id):
-
     tpos = get_tpos(tpos_id)
 
     if not tpos:
         return jsonify({"message": "TPoS does not exist."}), Status.NOT_FOUND
-    try:
-        memo = f"TPoS {tpos_id}"
-        checking_id, payment_request = create_invoice(wallet_id=tpos.wallet, amount=g.data["amount"], memo=memo)
 
+    try:
+        checking_id, payment_request = create_invoice(
+            wallet_id=tpos.wallet, amount=g.data["amount"], memo=f"#tpos {tpos.name}"
+        )
     except Exception as e:
         return jsonify({"message": str(e)}), Status.INTERNAL_SERVER_ERROR
 
-    return jsonify({"checking_id": checking_id, "payment_request": payment_request}), Status.OK
+    return jsonify({"checking_id": checking_id, "payment_request": payment_request}), Status.CREATED
+
+
+@tpos_ext.route("/api/v1/tposs/<tpos_id>/invoices/<checking_id>", methods=["GET"])
+def api_tpos_check_invoice(tpos_id, checking_id):
+    tpos = get_tpos(tpos_id)
+
+    if not tpos:
+        return jsonify({"message": "TPoS does not exist."}), Status.NOT_FOUND
+
+    try:
+        is_paid = not WALLET.get_invoice_status(checking_id).pending
+    except Exception:
+        return jsonify({"paid": False}), Status.OK
+
+    if is_paid:
+        wallet = get_wallet(tpos.wallet)
+        payment = wallet.get_payment(checking_id)
+        payment.set_pending(False)
 
-@tpos_ext.route("/api/v1/tposs/invoice/<checking_id>", methods=["GET"])
-def api_tpos_check_invoice(checking_id):
-    print(checking_id)
-    PAID = WALLET.get_invoice_status(checking_id).paid
+        return jsonify({"paid": True}), Status.OK
 
-    if PAID == True:
-        return jsonify({"PAID": True}), Status.OK
-    return jsonify({"PAID": False}), Status.OK
+    return jsonify({"paid": False}), Status.OK
diff --git a/lnbits/templates/base.html b/lnbits/templates/base.html
index 9951df0..fbe16f3 100644
--- a/lnbits/templates/base.html
+++ b/lnbits/templates/base.html
@@ -26,11 +26,15 @@
           {% block drawer_toggle %}
             <q-btn dense flat round icon="menu" @click="g.visibleDrawer = !g.visibleDrawer"></q-btn>
           {% endblock %}
-          {% if SITE_TITLE != 'LNbits' %}
-            <q-toolbar-title>{{ SITE_TITLE }}</q-toolbar-title>
-          {% else %}
-            <q-toolbar-title><strong>LN</strong>bits</q-toolbar-title>
-          {% endif %}
+          <q-toolbar-title>
+            {% block toolbar_title %}
+              {% if SITE_TITLE != 'LNbits' %}
+                {{ SITE_TITLE }}
+              {% else %}
+                <strong>LN</strong>bits
+              {% endif %}
+            {% endblock %}
+          </q-toolbar-title>
           {% block beta %}
             <q-badge color="yellow" text-color="black">
               <span><span v-show="$q.screen.gt.sm">USE WITH CAUTION - LNbits wallet is still in </span>BETA</span>
@@ -49,23 +53,27 @@
         </q-drawer>
       {% endblock %}
 
-      <q-page-container>
-        <q-page class="q-px-md q-py-lg" :class="{'q-px-lg': $q.screen.gt.xs}">
-          {% block page %}{% endblock %}
-        </q-page>
-      </q-page-container>
+      {% block page_container %}
+        <q-page-container>
+          <q-page class="q-px-md q-py-lg" :class="{'q-px-lg': $q.screen.gt.xs}">
+            {% block page %}{% endblock %}
+          </q-page>
+        </q-page-container>
+      {% endblock %}
 
-      <q-footer class="bg-transparent q-px-lg q-py-md" :class="{'text-dark': !$q.dark.isActive}">
-        <q-toolbar>
-          <q-toolbar-title class="text-caption">
-            <strong>LN</strong>bits, free and open-source lightning wallet
-          </q-toolbar-title>
-          <q-space></q-space>
-          <q-btn flat dense :color="($q.dark.isActive) ? 'white' : 'deep-purple'" icon="code" type="a" href="https://github.com/arcbtc/lnbits" target="_blank" rel="noopener">
-            <q-tooltip>View project in GitHub</q-tooltip>
-          </q-btn>
-        </q-toolbar>
-      </q-footer>
+      {% block footer %}
+        <q-footer class="bg-transparent q-px-lg q-py-md" :class="{'text-dark': !$q.dark.isActive}">
+          <q-toolbar>
+            <q-toolbar-title class="text-caption">
+              <strong>LN</strong>bits, free and open-source lightning wallet
+            </q-toolbar-title>
+            <q-space></q-space>
+            <q-btn flat dense :color="($q.dark.isActive) ? 'white' : 'deep-purple'" icon="code" type="a" href="https://github.com/arcbtc/lnbits" target="_blank" rel="noopener">
+              <q-tooltip>View project in GitHub</q-tooltip>
+            </q-btn>
+          </q-toolbar>
+        </q-footer>
+      {% endblock %}
 
     </q-layout>