diff --git a/.changeset/happy-pianos-appear.md b/.changeset/happy-pianos-appear.md
new file mode 100644
index 00000000..d2edea15
--- /dev/null
+++ b/.changeset/happy-pianos-appear.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': patch
+---
+
+UX improvement for the `QRLoader` component - the QR loader shows amount and redirect button before the QR code image.
diff --git a/packages/lib/src/components/internal/QRLoader/QRLoader.scss b/packages/lib/src/components/internal/QRLoader/QRLoader.scss
index fec149bf..85d7c176 100644
--- a/packages/lib/src/components/internal/QRLoader/QRLoader.scss
+++ b/packages/lib/src/components/internal/QRLoader/QRLoader.scss
@@ -79,7 +79,6 @@
 }
 
 .adyen-checkout__qr-loader__app-link {
-    margin-top: 16px;
     display: none;
 }
 
diff --git a/packages/lib/src/components/internal/QRLoader/QRLoader.tsx b/packages/lib/src/components/internal/QRLoader/QRLoader.tsx
index 537f3152..41beadb9 100644
--- a/packages/lib/src/components/internal/QRLoader/QRLoader.tsx
+++ b/packages/lib/src/components/internal/QRLoader/QRLoader.tsx
@@ -191,6 +191,17 @@ class QRLoader extends Component<QRLoaderProps, QRLoaderState> {
             >
                 {brandLogo && <img src={brandLogo} alt={brandName} className="adyen-checkout__qr-loader__brand-logo" />}
 
+                {amount && amount.value && amount.currency && (
+                    <div className="adyen-checkout__qr-loader__payment_amount">{i18n.amount(amount.value, amount.currency)}</div>
+                )}
+
+                {url && (
+                    <div className="adyen-checkout__qr-loader__app-link">
+                        <Button classNameModifiers={['qr-loader']} onClick={() => this.redirectToApp(url)} label={i18n.get('openApp')} />
+                        <ContentSeparator />
+                    </div>
+                )}
+
                 {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
                 <div ref={qrSubtitleRef} tabIndex={0} className="adyen-checkout__qr-loader__subtitle">
                     {i18n.get(this.props.introduction)}
@@ -204,10 +215,6 @@ class QRLoader extends Component<QRLoaderProps, QRLoaderState> {
                     }}
                 />
 
-                {amount && amount.value && amount.currency && (
-                    <div className="adyen-checkout__qr-loader__payment_amount">{i18n.amount(amount.value, amount.currency)}</div>
-                )}
-
                 <div className="adyen-checkout__qr-loader__progress">
                     <span className="adyen-checkout__qr-loader__percentage" style={{ width: `${this.state.percentage}%` }} />
                 </div>
@@ -234,12 +241,6 @@ class QRLoader extends Component<QRLoaderProps, QRLoaderState> {
                         />
                     </div>
                 )}
-                {url && (
-                    <div className="adyen-checkout__qr-loader__app-link">
-                        <ContentSeparator />
-                        <Button classNameModifiers={['qr-loader']} onClick={() => this.redirectToApp(url)} label={i18n.get('openApp')} />
-                    </div>
-                )}
             </div>
         );
     }