diff --git a/beta/style.css b/beta/style.css
index 505032e7..06878113 100644
--- a/beta/style.css
+++ b/beta/style.css
@@ -771,6 +771,7 @@ footer {
 
 /* UI Gallery */
 .ui-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: 2rem; }
+.ui-phone-gallery { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
 .ui-shot {
     border: 1px solid var(--border-color);
     border-radius: var(--radius);
diff --git a/beta/ui.html b/beta/ui.html
index ae7f41be..9adc7da9 100644
--- a/beta/ui.html
+++ b/beta/ui.html
@@ -132,7 +132,7 @@
             </div>
         </div>
 
-        <h2 style="margin-top: 4rem;">UI Gallery</h2>
+        <h2 style="margin-top: 4rem;">Desktop UI Gallery</h2>
         <div class="ui-gallery">
             <div class="ui-shot" data-large="desk-disks.png">
                 <img src="desk-disks.png" alt="Dashboard">
@@ -159,6 +159,35 @@
                 <div class="ui-shot-caption">Settings</div>
             </div>
         </div>
+               
+        <h2 style="margin-top: 4rem;">Mobile UI Gallery</h2>
+        <div class="ui-gallery ui-phone-gallery">
+            <div class="ui-shot" data-large="phone-dashboard.png">
+                <img src="phone-dashboard.png" alt="Dashboard">
+                <div class="ui-shot-caption">Dashboard</div>
+            </div>
+            <div class="ui-shot" data-large="phone-disks.png">
+                <img src="phone-disks.png" alt="Disk Health">
+                <div class="ui-shot-caption">Disk Health</div>
+            </div>
+            <div class="ui-shot" data-large="phone-tasks.png">
+                <img src="phone-tasks.png" alt="Task Manager">
+                <div class="ui-shot-caption">Task Manager</div>
+            </div>
+            <div class="ui-shot" data-large="phone-differences.png">
+                <img src="phone-differences.png" alt="Differences">
+                <div class="ui-shot-caption">Differences</div>
+            </div>
+            <div class="ui-shot" data-large="phone-recovery.png">
+                <img src="phone-recovery.png" alt="File Recovery">
+                <div class="ui-shot-caption">File Recovery</div>
+            </div>
+            <div class="ui-shot" data-large="phone-settings.png">
+                <img src="phone-settings.png" alt="Settings">
+                <div class="ui-shot-caption">Settings</div>
+            </div>
+        </div>
+
     </div>
 
     <!-- Preview Overlay -->