diff --git a/app/components/qr-scanner/qr-scanner.tsx b/app/components/qr-scanner/qr-scanner.tsx
index b65706925..adcf0b656 100644
--- a/app/components/qr-scanner/qr-scanner.tsx
+++ b/app/components/qr-scanner/qr-scanner.tsx
@@ -8,6 +8,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useToast } from '~/hooks/use-toast';
 import { useAnimatedQRDecoder } from '~/lib/cashu/animated-qr-code';
 import { useThrottle } from '~/lib/use-throttle';
+import { cn } from '~/lib/utils';
 
 declare global {
   interface Window {
@@ -44,6 +45,7 @@ const AnimatedScanProgress = ({ progress }: { progress: number }) => {
 
 type QRScannerProps = {
   onDecode: (decoded: string) => void | Promise<void>;
+  className?: string;
 };
 
 /**
@@ -56,7 +58,7 @@ type QRScannerProps = {
  * spam) and toasts any errors that occur during decoding. To stop scanning,
  * unmount the component (e.g. by navigating away).
  */
-export const QRScanner = ({ onDecode }: QRScannerProps) => {
+export const QRScanner = ({ onDecode, className }: QRScannerProps) => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const [currentFragment, setCurrentFragment] = useState('');
   const [cameraError, setCameraError] = useState<string | null>(null);
@@ -144,7 +146,12 @@ export const QRScanner = ({ onDecode }: QRScannerProps) => {
   }, [throttledDecode]);
 
   return (
-    <section className="fixed inset-0 h-screen w-screen sm:relative sm:aspect-square sm:h-[400px] sm:w-[400px] sm:overflow-hidden">
+    <section
+      className={cn(
+        'fixed inset-0 h-screen w-screen sm:relative sm:aspect-square sm:h-[400px] sm:w-[400px] sm:overflow-hidden',
+        className,
+      )}
+    >
       <div className="relative h-full w-full">
         {cameraError ? (
           <div className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-black p-6 text-center">
diff --git a/app/routes/_protected.scan.tsx b/app/routes/_protected.scan.tsx
index 31805eccd..becaa5166 100644
--- a/app/routes/_protected.scan.tsx
+++ b/app/routes/_protected.scan.tsx
@@ -80,7 +80,10 @@ export default function ScanPage() {
         <PageHeaderTitle>Scan</PageHeaderTitle>
       </PageHeader>
       <PageContent className="relative flex items-center justify-center">
-        <QRScanner onDecode={handleInput} />
+        <QRScanner
+          onDecode={handleInput}
+          className="relative inset-auto aspect-square h-auto w-full"
+        />
       </PageContent>
       <PageFooter className="pb-14">
         <Button type="button" onClick={handlePaste}>