diff --git a/resources/css/app.css b/resources/css/app.css
index a5dbfe6..3286558 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -136,12 +136,18 @@ html.qr-mobile-page body {
 }
 
 .mobile-stats-card {
-    width: calc(66.666667% - 0.5rem);
+    width: max-content;
+    min-width: 9rem;
+    max-width: none;
+    box-sizing: border-box;
 }
 
 @media (min-width: 640px) {
     .mobile-stats-card {
-        width: auto;
+        width: max-content;
+        min-width: 9rem;
+        max-width: none;
+        flex: 1 1 auto;
     }
 }
 
diff --git a/resources/views/qr-codes/index.blade.php b/resources/views/qr-codes/index.blade.php
index 34feb37..d849faf 100644
--- a/resources/views/qr-codes/index.blade.php
+++ b/resources/views/qr-codes/index.blade.php
@@ -38,16 +38,16 @@
                         </div>
                     </div>
 
-                    <div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:grid sm:grid-cols-3 sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
-                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                    <div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:flex sm:flex-wrap sm:justify-end sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
+                        <div class="mobile-stats-card w-max min-w-[9rem] shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
                             <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">GHS {{ number_format($wallet->spendableBalance(), 2) }}</p>
                             <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Account balance</p>
                         </div>
-                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                        <div class="mobile-stats-card w-max min-w-[9rem] shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
                             <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ $qrCodes->count() }}</p>
                             <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Events</p>
                         </div>
-                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                        <div class="mobile-stats-card w-max min-w-[9rem] shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
                             <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ number_format($totalRegistrations) }}</p>
                             <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Registrations</p>
                         </div>
diff --git a/resources/views/transfer/files/index.blade.php b/resources/views/transfer/files/index.blade.php
index 3eae132..fc2ebaf 100644
--- a/resources/views/transfer/files/index.blade.php
+++ b/resources/views/transfer/files/index.blade.php
@@ -101,16 +101,16 @@
                         </div>
                     </div>
 
-                    <div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:grid sm:grid-cols-3 sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
-                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                    <div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:flex sm:flex-wrap sm:justify-end sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
+                        <div class="mobile-stats-card w-max min-w-[9rem] shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
                             <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">GHS {{ number_format($balanceMinor / 100, 2) }}</p>
                             <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Account balance</p>
                         </div>
-                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                        <div class="mobile-stats-card w-max min-w-[9rem] shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
                             <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ $fmtBytes($storageBytes) }}</p>
                             <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Storage used</p>
                         </div>
-                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                        <div class="mobile-stats-card w-max min-w-[9rem] shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
                             <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ number_format($fileCount) }}</p>
                             <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Files</p>
                         </div>
diff --git a/resources/views/transfer/transfers/index.blade.php b/resources/views/transfer/transfers/index.blade.php
index a90e11a..0879e66 100644
--- a/resources/views/transfer/transfers/index.blade.php
+++ b/resources/views/transfer/transfers/index.blade.php
@@ -19,16 +19,16 @@
                         </div>
                     </div>
 
-                    <div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:grid sm:grid-cols-3 sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
-                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                    <div class="scrollbar-hide flex snap-x snap-mandatory gap-3 overflow-x-auto pb-2 sm:flex sm:flex-wrap sm:justify-end sm:overflow-visible sm:pb-0 lg:gap-4" style="-ms-overflow-style:none;scrollbar-width:none;">
+                        <div class="mobile-stats-card w-max min-w-[9rem] shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
                             <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">GHS {{ number_format($balanceMinor / 100, 2) }}</p>
                             <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Account balance</p>
                         </div>
-                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                        <div class="mobile-stats-card w-max min-w-[9rem] shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
                             <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ number_format($transferCount) }}</p>
                             <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Transfers</p>
                         </div>
-                        <div class="mobile-stats-card shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
+                        <div class="mobile-stats-card w-max min-w-[9rem] shrink-0 snap-start rounded-xl border border-slate-200 bg-white/90 px-4 py-3 text-center backdrop-blur-sm">
                             <p class="whitespace-nowrap text-xl font-bold text-slate-900 sm:text-2xl">{{ number_format($activeCount) }}</p>
                             <p class="mt-0.5 whitespace-nowrap text-[11px] font-medium text-slate-500">Active</p>
                         </div>