diff --git a/resources/js/assets/app.scss b/resources/js/assets/app.scss
index 480e4f3f..6d8609e4 100644
--- a/resources/js/assets/app.scss
+++ b/resources/js/assets/app.scss
@@ -195,6 +195,15 @@ a:hover {
   background-color: $grey-darker !important;
 }
 
+img.qrcode {
+  max-width: 320px;
+}
+@media screen and (max-height: 500px) {
+  img.qrcode {
+    max-height: 50vh;
+  }
+}
+
 .tfa-grid {
   border-radius: 6px;
   text-align: center;
diff --git a/resources/js/views/twofaccounts/QRcode.vue b/resources/js/views/twofaccounts/QRcode.vue
index c0025fe8..e0c811a6 100644
--- a/resources/js/views/twofaccounts/QRcode.vue
+++ b/resources/js/views/twofaccounts/QRcode.vue
@@ -22,9 +22,9 @@
 <template>
     <div class="modal modal-otp is-active">
         <div class="modal-background"></div>
-        <div class="modal-content">
+        <div class="modal-content modal-with-footer">
             <p class="has-text-centered m-5">
-                <img v-if="qrcode" :src="qrcode" class="has-background-light" :alt="$t('commons.image_of_qrcode_to_scan')">
+                <img v-if="qrcode" :src="qrcode" class="qrcode has-background-light" :alt="$t('commons.image_of_qrcode_to_scan')">
                 <Spinner :isVisible="!qrcode" :type="'raw'" class="is-size-1" />
             </p>
         </div>