diff --git a/lnbits/core/templates/core/extensions.html b/lnbits/core/templates/core/extensions.html
index 68263749e..588482138 100644
--- a/lnbits/core/templates/core/extensions.html
+++ b/lnbits/core/templates/core/extensions.html
@@ -659,11 +659,9 @@
           <a
             :href="'lightning:' + selectedExtension.payToEnable.paymentRequest"
           >
-            <q-responsive :ratio="1" class="q-mx-xl">
-              <lnbits-qrcode
-                :value="'lightning:' + selectedExtension.payToEnable.paymentRequest.toUpperCase()"
-              ></lnbits-qrcode>
-            </q-responsive>
+            <lnbits-qrcode
+              :value="'lightning:' + selectedExtension.payToEnable.paymentRequest.toUpperCase()"
+            ></lnbits-qrcode>
           </a>
         </div>
         <div v-else class="col">
diff --git a/lnbits/core/templates/core/wallet.html b/lnbits/core/templates/core/wallet.html
index 30d1807f3..795f923d9 100644
--- a/lnbits/core/templates/core/wallet.html
+++ b/lnbits/core/templates/core/wallet.html
@@ -153,10 +153,7 @@
                   <q-card>
                     <q-card-section class="text-center">
                       <p v-text="$t('export_to_phone_desc')"></p>
-                      <qrcode-vue
-                        :value="'{{request.base_url}}wallet?usr={{user.id}}&wal={{wallet.id}}'"
-                        :options="{ width: 256 }"
-                      ></qrcode-vue>
+                      <lnbits-qrcode :value="exportUrl"></lnbits-qrcode>
                     </q-card-section>
                     <q-card-actions class="flex-center q-pb-md">
                       <q-btn
@@ -369,11 +366,9 @@
         >
           <div class="text-center q-mb-lg">
             <a :href="'lightning:' + receive.paymentReq">
-              <q-responsive :ratio="1" class="q-mx-xl">
-                <lnbits-qrcode
-                  :value="'lightning:' + receive.paymentReq.toUpperCase()"
-                ></lnbits-qrcode>
-              </q-responsive>
+              <lnbits-qrcode
+                :value="'lightning:' + receive.paymentReq.toUpperCase()"
+              ></lnbits-qrcode>
             </a>
           </div>
           <div class="row q-mt-lg">
diff --git a/lnbits/static/css/base.css b/lnbits/static/css/base.css
index c5c92f227..4eebe45dd 100644
--- a/lnbits/static/css/base.css
+++ b/lnbits/static/css/base.css
@@ -530,23 +530,26 @@ video {
   overflow-wrap: break-word;
 }
 
-.qrcode__wrapper canvas {
+.qrcode__wrapper {
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.qrcode__wrapper canvas {
   width: 100% !important;
-  max-width: 100%;
-  max-height: 100%;
+  height: 100% !important;
+  max-width: 350px;
 }
 
 .qrcode__image {
+  position: absolute;
+  max-width: 52px;
   width: 15%;
-  height: 15%;
   overflow: hidden;
   background: #fff;
-  left: 50%;
   overflow: hidden;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
   padding: 0.2rem;
   border-radius: 0.2rem;
 }
diff --git a/lnbits/static/js/wallet.js b/lnbits/static/js/wallet.js
index 08e0e474b..5f794c21c 100644
--- a/lnbits/static/js/wallet.js
+++ b/lnbits/static/js/wallet.js
@@ -7,6 +7,7 @@ window.app = Vue.createApp({
       origin: window.location.origin,
       wallet: LNbits.map.wallet(window.wallet),
       user: LNbits.map.user(window.user),
+      exportUrl: `${window.location.origin}/wallet?usr=${window.user.id}&wal=${window.wallet.id}`,
       receive: {
         show: false,
         status: 'pending',
diff --git a/lnbits/static/scss/base.scss b/lnbits/static/scss/base.scss
index fe4ac7ed8..3c89bf95f 100644
--- a/lnbits/static/scss/base.scss
+++ b/lnbits/static/scss/base.scss
@@ -207,23 +207,24 @@ video {
 }
 
 // qrcode
-.qrcode__wrapper canvas {
+.qrcode__wrapper {
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.qrcode__wrapper canvas {
   width: 100% !important; // important to override qrcode inline width
-  max-width: 100%;
-  max-height: 100%;
+  height: 100% !important;
+  max-width: 350px; // default width of <lnbits-qrcode> component
 }
-
 .qrcode__image {
+  position: absolute;
+  max-width: 52px;
   width: 15%;
-  height: 15%;
   overflow: hidden;
   background: #fff;
-  left: 50%;
   overflow: hidden;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
   padding: 0.2rem;
   border-radius: 0.2rem;
 }
diff --git a/lnbits/templates/components.vue b/lnbits/templates/components.vue
index cf98d2b7e..ac9301df1 100644
--- a/lnbits/templates/components.vue
+++ b/lnbits/templates/components.vue
@@ -699,13 +699,9 @@
                     ></lnbits-payment-details>
                     <div v-if="props.row.bolt11" class="text-center q-mb-lg">
                       <a :href="'lightning:' + props.row.bolt11">
-                        <q-responsive :ratio="1" class="q-mx-xl">
-                          <lnbits-qrcode
-                            :value="
-                              'lightning:' + props.row.bolt11.toUpperCase()
-                            "
-                          ></lnbits-qrcode>
-                        </q-responsive>
+                        <lnbits-qrcode
+                          :value="'lightning:' + props.row.bolt11.toUpperCase()"
+                        ></lnbits-qrcode>
                       </a>
                     </div>
                     <div class="row q-mt-lg">