diff --git a/lnbits/templates/components/lnbits-qrcode-scanner.vue b/lnbits/templates/components/lnbits-qrcode-scanner.vue
index e3fe7141f..29af5f96c 100644
--- a/lnbits/templates/components/lnbits-qrcode-scanner.vue
+++ b/lnbits/templates/components/lnbits-qrcode-scanner.vue
@@ -1,22 +1,16 @@
 <template id="lnbits-qrcode-scanner">
-  <q-dialog v-model="showScanner" position="top">
-    <q-card class="q-pa-lg q-pt-xl">
-      <div class="text-center q-mb-lg">
-        <qrcode-stream
-          @detect="detect"
-          @camera-on="onInitQR"
-          class="rounded-borders"
-        ></qrcode-stream>
-      </div>
-      <div class="row q-mt-lg">
-        <q-btn
-          @click="reset"
-          flat
-          color="grey"
-          class="q-ml-auto"
-          :label="$t('cancel')"
-        ></q-btn>
-      </div>
-    </q-card>
-  </q-dialog>
+  <lnbits-dialog
+    :show="showScanner"
+    :cancel-label="$t('cancel')"
+    @update:show="showScanner = $event"
+    @cancel="reset"
+  >
+    <div class="text-center q-mb-lg">
+      <qrcode-stream
+        @detect="detect"
+        @camera-on="onInitQR"
+        class="rounded-borders"
+      ></qrcode-stream>
+    </div>
+  </lnbits-dialog>
 </template>