diff --git a/src/Shoebox.Web/Data/AppDbContext.cs b/src/Shoebox.Web/Data/AppDbContext.cs
index f18d313..01bba49 100644
--- a/src/Shoebox.Web/Data/AppDbContext.cs
+++ b/src/Shoebox.Web/Data/AppDbContext.cs
@@ -25,6 +25,9 @@ protected override void OnModelCreating(ModelBuilder modelBuilder)
         modelBuilder.Entity<Media>(media =>
         {
             media.HasIndex(m => new { m.PoolId, m.ContentHash });
+            // The gallery's live feed asks each box for what landed after a moment in time,
+            // over and over; without this every ask reads and sorts the whole box.
+            media.HasIndex(m => new { m.PoolId, m.UploadedAt });
             media.Property(m => m.OriginalFileName).HasMaxLength(260);
             media.Property(m => m.UploaderName).HasMaxLength(80);
         });
diff --git a/src/Shoebox.Web/Migrations/20260818231015_MediaUploadedAtIndex.Designer.cs b/src/Shoebox.Web/Migrations/20260818231015_MediaUploadedAtIndex.Designer.cs
new file mode 100644
index 0000000..d683c1a
--- /dev/null
+++ b/src/Shoebox.Web/Migrations/20260818231015_MediaUploadedAtIndex.Designer.cs
@@ -0,0 +1,175 @@
+// <auto-generated />
+using System;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using Shoebox.Web.Data;
+
+#nullable disable
+
+namespace Shoebox.Web.Migrations
+{
+    [DbContext(typeof(AppDbContext))]
+    [Migration("20260818231015_MediaUploadedAtIndex")]
+    partial class MediaUploadedAtIndex
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder.HasAnnotation("ProductVersion", "10.0.10");
+
+            modelBuilder.Entity("Shoebox.Web.Data.Media", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ContentHash")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("ContentType")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Extension")
+                        .IsRequired()
+                        .HasColumnType("TEXT");
+
+                    b.Property<bool>("HasAnimation")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<bool>("HasThumbnail")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("Height")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<int>("Kind")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<string>("OriginalFileName")
+                        .IsRequired()
+                        .HasMaxLength(260)
+                        .HasColumnType("TEXT");
+
+                    b.Property<Guid>("PoolId")
+                        .HasColumnType("TEXT");
+
+                    b.Property<long>("SizeBytes")
+                        .HasColumnType("INTEGER");
+
+                    b.Property<DateTime?>("TakenAt")
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("UploadedAt")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("UploaderName")
+                        .IsRequired()
+                        .HasMaxLength(80)
+                        .HasColumnType("TEXT");
+
+                    b.Property<Guid>("UploaderUid")
+                        .HasColumnType("TEXT");
+
+                    b.Property<int>("Width")
+                        .HasColumnType("INTEGER");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("PoolId", "ContentHash");
+
+                    b.HasIndex("PoolId", "UploadedAt");
+
+                    b.ToTable("Media");
+                });
+
+            modelBuilder.Entity("Shoebox.Web.Data.MediaLike", b =>
+                {
+                    b.Property<Guid>("MediaId")
+                        .HasColumnType("TEXT");
+
+                    b.Property<Guid>("UploaderUid")
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("MediaId", "UploaderUid");
+
+                    b.ToTable("Likes");
+                });
+
+            modelBuilder.Entity("Shoebox.Web.Data.Pool", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("TEXT");
+
+                    b.Property<Guid>("AdminKey")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Code")
+                        .IsRequired()
+                        .HasMaxLength(16)
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime>("CreatedAt")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Description")
+                        .HasMaxLength(2000)
+                        .HasColumnType("TEXT");
+
+                    b.Property<DateTime?>("ExpiresAt")
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("Name")
+                        .IsRequired()
+                        .HasMaxLength(120)
+                        .HasColumnType("TEXT");
+
+                    b.Property<string>("PasswordHash")
+                        .HasColumnType("TEXT");
+
+                    b.HasKey("Id");
+
+                    b.HasIndex("Code")
+                        .IsUnique();
+
+                    b.ToTable("Pools");
+                });
+
+            modelBuilder.Entity("Shoebox.Web.Data.Media", b =>
+                {
+                    b.HasOne("Shoebox.Web.Data.Pool", "Pool")
+                        .WithMany("Media")
+                        .HasForeignKey("PoolId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Pool");
+                });
+
+            modelBuilder.Entity("Shoebox.Web.Data.MediaLike", b =>
+                {
+                    b.HasOne("Shoebox.Web.Data.Media", "Media")
+                        .WithMany()
+                        .HasForeignKey("MediaId")
+                        .OnDelete(DeleteBehavior.Cascade)
+                        .IsRequired();
+
+                    b.Navigation("Media");
+                });
+
+            modelBuilder.Entity("Shoebox.Web.Data.Pool", b =>
+                {
+                    b.Navigation("Media");
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}
diff --git a/src/Shoebox.Web/Migrations/20260818231015_MediaUploadedAtIndex.cs b/src/Shoebox.Web/Migrations/20260818231015_MediaUploadedAtIndex.cs
new file mode 100644
index 0000000..4c998db
--- /dev/null
+++ b/src/Shoebox.Web/Migrations/20260818231015_MediaUploadedAtIndex.cs
@@ -0,0 +1,27 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace Shoebox.Web.Migrations
+{
+    /// <inheritdoc />
+    public partial class MediaUploadedAtIndex : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.CreateIndex(
+                name: "IX_Media_PoolId_UploadedAt",
+                table: "Media",
+                columns: new[] { "PoolId", "UploadedAt" });
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropIndex(
+                name: "IX_Media_PoolId_UploadedAt",
+                table: "Media");
+        }
+    }
+}
diff --git a/src/Shoebox.Web/Migrations/AppDbContextModelSnapshot.cs b/src/Shoebox.Web/Migrations/AppDbContextModelSnapshot.cs
index 6fe8a42..63ef367 100644
--- a/src/Shoebox.Web/Migrations/AppDbContextModelSnapshot.cs
+++ b/src/Shoebox.Web/Migrations/AppDbContextModelSnapshot.cs
@@ -79,6 +79,8 @@ protected override void BuildModel(ModelBuilder modelBuilder)
 
                     b.HasIndex("PoolId", "ContentHash");
 
+                    b.HasIndex("PoolId", "UploadedAt");
+
                     b.ToTable("Media");
                 });
 
diff --git a/src/Shoebox.Web/Pages/Pool/Gallery.cshtml b/src/Shoebox.Web/Pages/Pool/Gallery.cshtml
index e79ccb9..e7d314d 100644
--- a/src/Shoebox.Web/Pages/Pool/Gallery.cshtml
+++ b/src/Shoebox.Web/Pages/Pool/Gallery.cshtml
@@ -22,11 +22,8 @@
     }
     <p class="pool-meta">
         Box code: <strong class="code">@Model.Pool.Code</strong>
-        · @Model.Items.Count photo@(Model.Items.Count == 1 ? "" : "s")
-        @if (Model.Uploaders.Count > 0)
-        {
-            <text>· from @Model.Uploaders.Count @(Model.Uploaders.Count == 1 ? "person" : "people")</text>
-        }
+        · <span id="photo-count">@Model.Items.Count photo@(Model.Items.Count == 1 ? "" : "s")</span>
+        <span id="people-count" hidden="@(Model.Uploaders.Count == 0)">· from @Model.Uploaders.Count @(Model.Uploaders.Count == 1 ? "person" : "people")</span>
     </p>
     @if (Model.Pool.ExpiresAt.HasValue)
     {
@@ -77,83 +74,28 @@
         </select>
     </label>
     <div class="download-buttons">
-        @if (Model.Items.Count > 0)
-        {
-            <a class="btn btn-ghost" href="/api/p/@Model.Pool.Code/zip?mode=all">Download all photos</a>
-            @* Phone-only: revealed by gallery.js on touch devices whose browser can
-               hand image files to the OS share sheet (mobile Safari / Chrome). *@
-            <button type="button" class="btn btn-ghost" id="save-gallery-btn" hidden>Save to gallery</button>
-        }
-        else
-        {
-            <span class="btn btn-ghost" aria-disabled="true">Download all photos</span>
-        }
-        @if (Model.HasOthers)
-        {
-            <a class="btn btn-ghost" href="/api/p/@Model.Pool.Code/zip?mode=others"
-               title="Downloads every photo added by other people — everything except your own uploads">Download everyone else's</a>
-        }
-        else
-        {
-            <span class="btn btn-ghost" aria-disabled="true"
-                  title="Nothing to download yet — no one else has added photos">Download everyone else's</span>
-        }
+        <a class="btn btn-ghost" id="download-all" href="/api/p/@Model.Pool.Code/zip?mode=all"
+           hidden="@(Model.Items.Count == 0)">Download all photos</a>
+        <span class="btn btn-ghost" id="download-all-empty" aria-disabled="true"
+              hidden="@(Model.Items.Count > 0)">Download all photos</span>
+        @* Phone-only: revealed by gallery.js on touch devices whose browser can
+           hand image files to the OS share sheet (mobile Safari / Chrome). *@
+        <button type="button" class="btn btn-ghost" id="save-gallery-btn" hidden>Save to gallery</button>
+        <a class="btn btn-ghost" id="download-others" href="/api/p/@Model.Pool.Code/zip?mode=others"
+           title="Downloads every photo added by other people — everything except your own uploads"
+           hidden="@(!Model.HasOthers)">Download everyone else's</a>
+        <span class="btn btn-ghost" id="download-others-empty" aria-disabled="true"
+              title="Nothing to download yet — no one else has added photos"
+              hidden="@(Model.HasOthers)">Download everyone else's</span>
     </div>
 </section>
 
-@if (Model.Items.Count == 0)
-{
-    <div class="empty-state">
-        <p><span class="big">Nothing here yet.</span> You were there. Prove it.</p>
-    </div>
-}
+<div class="empty-state" id="empty-state" hidden="@(Model.Items.Count > 0)">
+    <p><span class="big">Nothing here yet.</span> You were there. Prove it.</p>
+</div>
 
 <div class="gallery" id="gallery">
-    @for (var i = 0; i < Model.Items.Count; i++)
-    {
-        var item = Model.Items[i];
-        <figure class="tile @(item.Mine ? "mine" : "") @(item.IsVideo ? "video" : "") @(item.IsAnimated ? "animated" : "")" style="--i: @Math.Min(i, 12)"
-                data-id="@item.Id" data-uploader="@item.UploaderName"
-                data-original="/api/media/@item.Id/original" data-filename="@item.FileName">
-            @if (item.HasThumbnail)
-            {
-                <img src="/api/media/@item.Id/thumb" loading="lazy" alt="@item.FileName" />
-            }
-            else
-            {
-                <div class="no-thumb" title="Preview not available for this file"><span>@item.FileName</span></div>
-            }
-            @if (item.IsVideo)
-            {
-                @* Videos aren't played here: the tile shows a still frame, the file downloads. *@
-                <span class="media-badge">▶ Video</span>
-            }
-            else if (item.IsAnimated)
-            {
-                @* The grid holds still; hovering a tile or opening it plays the animation. *@
-                <span class="media-badge">@(item.FileName.EndsWith(".gif", StringComparison.OrdinalIgnoreCase) ? "GIF" : "Animated")</span>
-            }
-            <figcaption>
-                <span class="uploader">@item.UploaderName</span>
-                <span class="tile-actions">
-                    <button type="button" class="like-btn @(item.LikedByMe ? "liked" : "")"
-                            aria-pressed="@(item.LikedByMe ? "true" : "false")"
-                            title="@(item.LikedByMe ? "Unlike" : "Like") this photo">
-                        <span class="heart" aria-hidden="true">@(item.LikedByMe ? "❤" : "♡")</span>
-                        <span class="like-count">@item.LikeCount</span>
-                    </button>
-                    @if (item.Mine)
-                    {
-                        <span class="badge-you">you</span>
-                    }
-                    @if (item.Mine || Model.IsAdmin)
-                    {
-                        <button type="button" class="delete-btn" title="Delete photo">&times;</button>
-                    }
-                </span>
-            </figcaption>
-        </figure>
-    }
+    <partial name="_Tiles" model="new TileList(Model.Items, Model.IsAdmin)" />
 </div>
 
 <div class="lightbox" id="lightbox" hidden>
diff --git a/src/Shoebox.Web/Pages/Pool/Gallery.cshtml.cs b/src/Shoebox.Web/Pages/Pool/Gallery.cshtml.cs
index bc24ac7..eb807c4 100644
--- a/src/Shoebox.Web/Pages/Pool/Gallery.cshtml.cs
+++ b/src/Shoebox.Web/Pages/Pool/Gallery.cshtml.cs
@@ -8,7 +8,9 @@ namespace Shoebox.Web.Pages.Pool;
 
 public record MediaTile(
     Guid Id, string UploaderName, string FileName, bool Mine, bool HasThumbnail,
-    int LikeCount, bool LikedByMe, bool IsVideo, bool IsAnimated);
+    int LikeCount, bool LikedByMe, bool IsVideo, bool IsAnimated,
+    long SortAt, long UploadedAt);
+public record TileList(IReadOnlyList<MediaTile> Items, bool IsAdmin);
 public record UploaderSummary(string Name, int Count);
 
 public class GalleryModel(
@@ -18,6 +20,16 @@ public class GalleryModel(
     UploaderIdentity identity,
     ShareLinkService links) : PageModel
 {
+    /// <summary>
+    /// How far back of the browser's cursor the live feed looks. Two uploads landing together
+    /// can commit a hair out of order, so it re-offers a moment's worth of prints and the page
+    /// drops the ids it already has.
+    /// </summary>
+    private static readonly TimeSpan CursorOverlap = TimeSpan.FromSeconds(30);
+
+    private const int LiveBatchLimit = 200;
+    private const long MaxCursorMilliseconds = 253_402_300_799_000; // the end of year 9999
+
     public Data.Pool Pool { get; set; } = null!;
     public List<MediaTile> Items { get; set; } = [];
     public List<UploaderSummary> Uploaders { get; set; } = [];
@@ -45,30 +57,13 @@ public async Task<IActionResult> OnGetAsync(string code)
             return RedirectToPage("/Pool/Unlock", new { code = pool.Code });
         }
 
-        var uid = identity.GetOrCreateUid(HttpContext);
         var items = await db.Media
             .Where(m => m.PoolId == pool.Id)
             .OrderBy(m => m.TakenAt ?? m.UploadedAt)
             .ToListAsync();
 
-        var itemIds = items.Select(m => m.Id).ToList();
-        var likeCounts = await db.Likes
-            .Where(l => itemIds.Contains(l.MediaId))
-            .GroupBy(l => l.MediaId)
-            .Select(g => new { MediaId = g.Key, Count = g.Count() })
-            .ToDictionaryAsync(x => x.MediaId, x => x.Count);
-        var myLikes = (await db.Likes
-            .Where(l => l.UploaderUid == uid && itemIds.Contains(l.MediaId))
-            .Select(l => l.MediaId)
-            .ToListAsync()).ToHashSet();
-
         Pool = pool;
-        Items = items
-            .Select(m => new MediaTile(
-                m.Id, m.UploaderName, m.OriginalFileName, m.UploaderUid == uid, m.HasThumbnail,
-                likeCounts.GetValueOrDefault(m.Id), myLikes.Contains(m.Id),
-                m.Kind == MediaKind.Video, m.HasAnimation))
-            .ToList();
+        Items = await ToTilesAsync(items);
         HasOthers = Items.Any(m => !m.Mine);
         Uploaders = items
             .GroupBy(m => m.UploaderName)
@@ -87,6 +82,70 @@ public async Task<IActionResult> OnGetAsync(string code)
         return Page();
     }
 
+    /// <summary>
+    /// The prints that landed after the browser's cursor, drawn as tiles for the page to hang.
+    /// A print is only committed once its thumbnail and proxy are written, so anything offered
+    /// here can already be looked at.
+    /// </summary>
+    public async Task<IActionResult> OnGetSinceAsync(string code, long since = 0)
+    {
+        var pool = await pools.FindByCodeAsync(code);
+        if (pool is null)
+        {
+            return NotFound();
+        }
+
+        if (!access.CanView(HttpContext, pool))
+        {
+            // The box locked itself (or the cookie expired) while the page sat open.
+            return Unauthorized();
+        }
+
+        // Cursors are Unix milliseconds: exact in a browser's numbers, where ticks would not be.
+        var floor = DateTime.UnixEpoch.AddMilliseconds(
+            Math.Clamp(since, 0, MaxCursorMilliseconds) - CursorOverlap.TotalMilliseconds);
+        var items = await db.Media
+            .Where(m => m.PoolId == pool.Id && m.UploadedAt > floor)
+            .OrderBy(m => m.UploadedAt)
+            .ThenBy(m => m.Id)
+            .Take(LiveBatchLimit)
+            .ToListAsync();
+
+        Response.Headers.CacheControl = "no-store";
+        return Partial("_Tiles", new TileList(await ToTilesAsync(items), access.IsAdmin(HttpContext, pool.Id)));
+    }
+
+    private async Task<List<MediaTile>> ToTilesAsync(List<Media> items)
+    {
+        var uid = identity.GetOrCreateUid(HttpContext);
+        if (items.Count == 0)
+        {
+            return [];
+        }
+
+        var itemIds = items.Select(m => m.Id).ToList();
+        var likeCounts = await db.Likes
+            .Where(l => itemIds.Contains(l.MediaId))
+            .GroupBy(l => l.MediaId)
+            .Select(g => new { MediaId = g.Key, Count = g.Count() })
+            .ToDictionaryAsync(x => x.MediaId, x => x.Count);
+        var myLikes = (await db.Likes
+            .Where(l => l.UploaderUid == uid && itemIds.Contains(l.MediaId))
+            .Select(l => l.MediaId)
+            .ToListAsync()).ToHashSet();
+
+        return items
+            .Select(m => new MediaTile(
+                m.Id, m.UploaderName, m.OriginalFileName, m.UploaderUid == uid, m.HasThumbnail,
+                likeCounts.GetValueOrDefault(m.Id), myLikes.Contains(m.Id),
+                m.Kind == MediaKind.Video, m.HasAnimation,
+                UnixMilliseconds(m.SortDate), UnixMilliseconds(m.UploadedAt)))
+            .ToList();
+    }
+
+    private static long UnixMilliseconds(DateTime value) =>
+        (long)(value - DateTime.UnixEpoch).TotalMilliseconds;
+
     private static string BuildExpiryLabel(DateTime expiresAt)
     {
         var diff = expiresAt - DateTime.UtcNow;
diff --git a/src/Shoebox.Web/Pages/Pool/_Tiles.cshtml b/src/Shoebox.Web/Pages/Pool/_Tiles.cshtml
new file mode 100644
index 0000000..cf9ac31
--- /dev/null
+++ b/src/Shoebox.Web/Pages/Pool/_Tiles.cshtml
@@ -0,0 +1,49 @@
+@model Shoebox.Web.Pages.Pool.TileList
+@* Both the first render and the live feed draw prints through here, so an appended
+   tile is the tile a reload would have produced. *@
+@for (var i = 0; i < Model.Items.Count; i++)
+{
+    var item = Model.Items[i];
+    <figure class="tile @(item.Mine ? "mine" : "") @(item.IsVideo ? "video" : "") @(item.IsAnimated ? "animated" : "")" style="--i: @Math.Min(i, 12)"
+            data-id="@item.Id" data-uploader="@item.UploaderName"
+            data-original="/api/media/@item.Id/original" data-filename="@item.FileName"
+            data-sort="@item.SortAt" data-uploaded="@item.UploadedAt">
+        @if (item.HasThumbnail)
+        {
+            <img src="/api/media/@item.Id/thumb" loading="lazy" alt="@item.FileName" />
+        }
+        else
+        {
+            <div class="no-thumb" title="Preview not available for this file"><span>@item.FileName</span></div>
+        }
+        @if (item.IsVideo)
+        {
+            @* Videos aren't played here: the tile shows a still frame, the file downloads. *@
+            <span class="media-badge">▶ Video</span>
+        }
+        else if (item.IsAnimated)
+        {
+            @* The grid holds still; hovering a tile or opening it plays the animation. *@
+            <span class="media-badge">@(item.FileName.EndsWith(".gif", StringComparison.OrdinalIgnoreCase) ? "GIF" : "Animated")</span>
+        }
+        <figcaption>
+            <span class="uploader">@item.UploaderName</span>
+            <span class="tile-actions">
+                <button type="button" class="like-btn @(item.LikedByMe ? "liked" : "")"
+                        aria-pressed="@(item.LikedByMe ? "true" : "false")"
+                        title="@(item.LikedByMe ? "Unlike" : "Like") this photo">
+                    <span class="heart" aria-hidden="true">@(item.LikedByMe ? "❤" : "♡")</span>
+                    <span class="like-count">@item.LikeCount</span>
+                </button>
+                @if (item.Mine)
+                {
+                    <span class="badge-you">you</span>
+                }
+                @if (item.Mine || Model.IsAdmin)
+                {
+                    <button type="button" class="delete-btn" title="Delete photo">&times;</button>
+                }
+            </span>
+        </figcaption>
+    </figure>
+}
diff --git a/src/Shoebox.Web/Services/MediaService.cs b/src/Shoebox.Web/Services/MediaService.cs
index efe0e1c..ef581a5 100644
--- a/src/Shoebox.Web/Services/MediaService.cs
+++ b/src/Shoebox.Web/Services/MediaService.cs
@@ -89,7 +89,6 @@ public async Task<UploadResult> SaveAsync(Pool pool, IFormFile file, string uplo
             ContentHash = hash,
             UploaderName = uploaderName.Trim(),
             UploaderUid = uploaderUid,
-            UploadedAt = DateTime.UtcNow,
         };
 
         var originalPath = paths.OriginalFile(pool.Id, media.Id, media.Extension);
@@ -125,6 +124,10 @@ public async Task<UploadResult> SaveAsync(Pool pool, IFormFile file, string uplo
             media.HasAnimation = info.IsAnimated;
         }
 
+        // Stamped here rather than when the upload started: rendering a big photo takes a
+        // while, and the gallery's live feed follows this to decide what is new, so it has to
+        // say when the file actually landed in the box, not when it began arriving.
+        media.UploadedAt = DateTime.UtcNow;
         db.Media.Add(media);
         await db.SaveChangesAsync(ct);
         return UploadResult.Added(fileName, media.Id);
diff --git a/src/Shoebox.Web/wwwroot/css/site.css b/src/Shoebox.Web/wwwroot/css/site.css
index 3eee90e..a0e12cb 100644
--- a/src/Shoebox.Web/wwwroot/css/site.css
+++ b/src/Shoebox.Web/wwwroot/css/site.css
@@ -61,6 +61,10 @@
 
 * { box-sizing: border-box; }
 
+/* `hidden` has to beat the display rules below (buttons are inline-flex, the lightbox a
+   flex overlay), which would otherwise leave a hidden element on screen. */
+[hidden] { display: none !important; }
+
 ::selection { background: #f9e28d; color: #191817; }
 
 html {
@@ -729,8 +733,6 @@ input[type="checkbox"] { accent-color: var(--ink); }
   justify-content: center;
 }
 
-.lightbox[hidden] { display: none; }
-
 .lightbox img {
   max-width: 92vw;
   max-height: 82vh;
diff --git a/src/Shoebox.Web/wwwroot/js/gallery.js b/src/Shoebox.Web/wwwroot/js/gallery.js
index 3e2a5a4..24fa4f7 100644
--- a/src/Shoebox.Web/wwwroot/js/gallery.js
+++ b/src/Shoebox.Web/wwwroot/js/gallery.js
@@ -9,6 +9,9 @@
   const dropzone = document.getElementById("dropzone");
   const progressList = document.getElementById("upload-progress");
   const filterSelect = document.getElementById("uploader-filter");
+  const emptyState = document.getElementById("empty-state");
+  const photoCount = document.getElementById("photo-count");
+  const peopleCount = document.getElementById("people-count");
 
   // ---------- Upload ----------
 
@@ -56,7 +59,6 @@
   }
 
   async function uploadFiles(files) {
-    let anyAdded = false;
     for (const file of files) {
       const item = document.createElement("li");
       item.innerHTML = `<span>${escapeHtml(file.name)}</span><span class="status">0%</span>`;
@@ -69,10 +71,14 @@
         if (r && r.status === "added") {
           status.textContent = "uploaded";
           status.className = "status ok";
-          anyAdded = true;
+          item.classList.add("settled");
+          // The photo is rendered and in the box by the time this returns, so ask the
+          // live feed for it now: it drops into the gallery while the rest upload.
+          refreshSoon(400);
         } else if (r && r.status === "duplicate") {
           status.textContent = "already in box";
           status.className = "status";
+          item.classList.add("settled");
         } else {
           status.textContent = (r && r.reason) || "failed";
           status.className = "status fail";
@@ -82,9 +88,10 @@
         status.className = "status fail";
       }
     }
-    if (anyAdded) {
-      location.reload();
-    }
+
+    // Nothing reloads this list away any more. What landed is in the gallery to look at;
+    // only what went wrong is worth keeping on screen.
+    setTimeout(() => progressList.querySelectorAll("li.settled").forEach((li) => li.remove()), 4000);
   }
 
   function uploadOne(file, onProgress) {
@@ -119,12 +126,14 @@
 
   // ---------- Filter ----------
 
-  filterSelect?.addEventListener("change", () => {
+  filterSelect?.addEventListener("change", applyFilter);
+
+  function applyFilter() {
     const who = filterSelect.value;
     for (const tile of gallery.querySelectorAll(".tile")) {
       tile.style.display = !who || tile.dataset.uploader === who ? "" : "none";
     }
-  });
+  }
 
   // ---------- Save to gallery (mobile share sheet) ----------
 
@@ -150,8 +159,10 @@
     return !!(window.matchMedia && window.matchMedia("(pointer: coarse)").matches);
   }
 
-  if (saveGalleryBtn && isTouchDevice() && canShareFiles()) {
-    saveGalleryBtn.hidden = false;
+  // Whether to offer it at all; whether to show it right now also depends on the box
+  // holding something, which the live feed can change under the visitor's feet.
+  const canSaveToGallery = !!saveGalleryBtn && isTouchDevice() && canShareFiles();
+  if (canSaveToGallery) {
     saveGalleryBtn.addEventListener("click", saveToGallery);
   }
 
@@ -208,15 +219,20 @@
   // The grid holds still so a box full of GIFs doesn't flicker at everyone. On a device
   // with a real pointer, hovering a tile swaps its still for the animated display proxy;
   // on touch there's no hover, and tapping opens the lightbox, which always plays.
-  if (!window.matchMedia || window.matchMedia("(hover: hover)").matches) {
-    for (const tile of gallery.querySelectorAll(".tile.animated")) {
-      const img = tile.querySelector("img");
-      if (!img) continue;
-      const still = img.src;
-      const moving = tile.dataset.original.replace(/\/original$/, "/display");
-      tile.addEventListener("mouseenter", () => (img.src = moving));
-      tile.addEventListener("mouseleave", () => (img.src = still));
-    }
+  const hoverPlays = !window.matchMedia || window.matchMedia("(hover: hover)").matches;
+
+  function bindAnimation(tile) {
+    if (!hoverPlays || !tile.classList.contains("animated")) return;
+    const img = tile.querySelector("img");
+    if (!img) return;
+    const still = img.src;
+    const moving = tile.dataset.original.replace(/\/original$/, "/display");
+    tile.addEventListener("mouseenter", () => (img.src = moving));
+    tile.addEventListener("mouseleave", () => (img.src = still));
+  }
+
+  for (const tile of gallery.querySelectorAll(".tile.animated")) {
+    bindAnimation(tile);
   }
 
   // ---------- Like ----------
@@ -267,6 +283,7 @@
     const res = await fetch(`/api/media/${tile.dataset.id}`, { method: "DELETE" });
     if (res.ok) {
       tile.remove();
+      refreshChrome();
     } else {
       alert("Could not delete this photo.");
     }
@@ -278,17 +295,25 @@
   const lbImg = document.getElementById("lightbox-img");
   const lbCaption = document.getElementById("lightbox-caption");
   const lbDownload = document.getElementById("lightbox-download");
-  let currentIndex = -1;
+  // The open photo is held as the tile itself, not its index: photos arriving live can
+  // slot in ahead of it, and an index would quietly start pointing at someone else's.
+  let currentTile = null;
 
   function visibleTiles() {
     return [...gallery.querySelectorAll(".tile")].filter((t) => t.style.display !== "none");
   }
 
-  function showAt(index) {
+  function step(delta) {
     const tiles = visibleTiles();
     if (!tiles.length) return;
-    currentIndex = (index + tiles.length) % tiles.length;
-    const tile = tiles[currentIndex];
+    const at = currentTile ? tiles.indexOf(currentTile) : -1;
+    // The open photo just left the gallery (deleted, or filtered out): start over.
+    showTile(at === -1 ? tiles[0] : tiles[(at + delta + tiles.length) % tiles.length]);
+  }
+
+  function showTile(tile) {
+    if (!tile) return;
+    currentTile = tile;
     // The lightbox shows the web-safe "display" proxy: full-screen sharp but far smaller
     // than a 50MB phone original, and viewable in every browser (including HEIC). The
     // Download button always fetches the true original.
@@ -308,26 +333,27 @@
   function closeLightbox() {
     lightbox.hidden = true;
     lbImg.src = "";
+    currentTile = null;
     document.body.style.overflow = "";
   }
 
   gallery.addEventListener("click", (e) => {
     const tile = e.target.closest(".tile");
     if (!tile || e.target.closest(".delete-btn") || e.target.closest(".like-btn")) return;
-    showAt(visibleTiles().indexOf(tile));
+    showTile(tile);
   });
 
   lightbox.querySelector(".lb-close").addEventListener("click", closeLightbox);
-  lightbox.querySelector(".lb-prev").addEventListener("click", () => showAt(currentIndex - 1));
-  lightbox.querySelector(".lb-next").addEventListener("click", () => showAt(currentIndex + 1));
+  lightbox.querySelector(".lb-prev").addEventListener("click", () => step(-1));
+  lightbox.querySelector(".lb-next").addEventListener("click", () => step(1));
   lightbox.addEventListener("click", (e) => {
     if (e.target === lightbox) closeLightbox();
   });
   document.addEventListener("keydown", (e) => {
     if (lightbox.hidden) return;
     if (e.key === "Escape") closeLightbox();
-    if (e.key === "ArrowLeft") showAt(currentIndex - 1);
-    if (e.key === "ArrowRight") showAt(currentIndex + 1);
+    if (e.key === "ArrowLeft") step(-1);
+    if (e.key === "ArrowRight") step(1);
   });
 
   // Touch: swipe left/right to move between photos, quick tap to close.
@@ -344,7 +370,7 @@
     const dx = e.changedTouches[0].clientX - touchX;
     const dy = e.changedTouches[0].clientY - touchY;
     if (Math.abs(dx) > 45 && Math.abs(dx) > Math.abs(dy) * 1.4) {
-      showAt(currentIndex + (dx < 0 ? 1 : -1));
+      step(dx < 0 ? 1 : -1);
     } else if (!touchMoved && e.target === lbImg) {
       closeLightbox();
     }
@@ -366,6 +392,221 @@
     }
   });
 
+  // ---------- Live refresh ----------
+  //
+  // A box fills while people are looking at it, so the page asks every ten seconds for the
+  // prints that landed since the ones it drew and slots them in, rather than reloading and
+  // losing the visitor's place. Polling, not a held-open socket per viewer: a box is a
+  // handful of people for an afternoon. A backgrounded tab asks for nothing.
+
+  const POLL_MS = 10000;
+  const QUIET_POLL_MS = 30000;
+  const QUIET_AFTER_MS = 300000;
+  const POLL_MAX_MS = 120000;
+
+  let lastArrival = Date.now();
+  let cursor = Math.max(0, ...[...gallery.children].map((tile) => Number(tile.dataset.uploaded) || 0));
+  let pollTimer = null;
+  let polling = false;
+  let askAgain = false;
+  let failures = 0;
+  let liveStopped = false;
+
+  function refreshSoon(delay) {
+    if (liveStopped) return;
+    clearTimeout(pollTimer);
+    pollTimer = setTimeout(refresh, delay);
+  }
+
+  function scheduleNext() {
+    if (failures) {
+      refreshSoon(Math.min(POLL_MS * 2 ** failures, POLL_MAX_MS));
+      return;
+    }
+
+    // A box nobody has added to for a while is asked after less often. Anything arriving,
+    // or the visitor turning back to the tab, puts it on the fast cadence again.
+    const quiet = Date.now() - lastArrival > QUIET_AFTER_MS;
+    // A little jitter, so a table full of phones doesn't ask all at the same instant.
+    refreshSoon((quiet ? QUIET_POLL_MS : POLL_MS) + Math.random() * 2000);
+  }
+
+  async function refresh() {
+    if (liveStopped || document.hidden) return;
+    if (polling) {
+      // An upload finished while a poll was already on its way out, so it can't know about it.
+      askAgain = true;
+      return;
+    }
+
+    polling = true;
+    try {
+      const res = await fetch(`/p/${poolCode}?handler=since&since=${cursor}`);
+      if (res.status === 401 || res.status === 404) {
+        // The box locked itself again, or is gone: nothing left worth asking for.
+        liveStopped = true;
+        return;
+      }
+      if (!res.ok) throw new Error("live refresh failed");
+      addTiles(await res.text());
+      failures = 0;
+    } catch {
+      failures = Math.min(failures + 1, 4);
+    } finally {
+      polling = false;
+      if (askAgain) {
+        askAgain = false;
+        refreshSoon(400);
+      } else {
+        scheduleNext();
+      }
+    }
+  }
+
+  function addTiles(html) {
+    const parsed = document.createElement("template");
+    parsed.innerHTML = html;
+    const incoming = [...parsed.content.querySelectorAll(".tile")];
+    if (!incoming.length) return;
+
+    // The feed re-offers the last moment's prints so none can slip between two polls;
+    // whatever is already hanging here is dropped.
+    for (const tile of incoming) {
+      cursor = Math.max(cursor, Number(tile.dataset.uploaded) || 0);
+    }
+    const known = new Set([...gallery.children].map((tile) => tile.dataset.id));
+    const fresh = incoming.filter((tile) => !known.has(tile.dataset.id));
+    if (!fresh.length) return;
+    lastArrival = Date.now();
+
+    const who = filterSelect ? filterSelect.value : "";
+    keepingPlace(() => {
+      for (const tile of fresh) {
+        if (who && tile.dataset.uploader !== who) {
+          tile.style.display = "none";
+        }
+        insertInOrder(tile);
+        bindAnimation(tile);
+      }
+      refreshChrome();
+    });
+  }
+
+  // Prints hang by when they were taken, so one from earlier in the day goes back into its
+  // place in the afternoon rather than landing at the end.
+  function insertInOrder(tile) {
+    for (const existing of gallery.children) {
+      if (compareTiles(tile, existing) < 0) {
+        gallery.insertBefore(tile, existing);
+        return;
+      }
+    }
+    gallery.appendChild(tile);
+  }
+
+  function compareTiles(a, b) {
+    return (
+      (Number(a.dataset.sort) || 0) - (Number(b.dataset.sort) || 0) ||
+      (Number(a.dataset.uploaded) || 0) - (Number(b.dataset.uploaded) || 0) ||
+      (a.dataset.id < b.dataset.id ? -1 : a.dataset.id > b.dataset.id ? 1 : 0)
+    );
+  }
+
+  // Photos arriving must not shove the page around under whoever is reading it: measure a
+  // print they can see, let the new ones in, then take back however far it moved.
+  function keepingPlace(insert) {
+    const measure = anchorMeasure();
+    const before = measure();
+    insert();
+    const shift = measure() - before;
+    if (shift && window.scrollY > 0) {
+      window.scrollBy(0, shift);
+    }
+  }
+
+  function anchorMeasure() {
+    for (const tile of gallery.children) {
+      if (tile.getBoundingClientRect().bottom > 0) {
+        return () => tile.getBoundingClientRect().top;
+      }
+    }
+    return () => gallery.getBoundingClientRect().bottom;
+  }
+
+  // Everything around the grid that counts prints, on arrivals and deletes alike.
+  function refreshChrome() {
+    const tiles = [...gallery.querySelectorAll(".tile")];
+    const total = tiles.length;
+    const mine = tiles.filter((tile) => tile.classList.contains("mine")).length;
+
+    const counts = new Map();
+    for (const tile of tiles) {
+      counts.set(tile.dataset.uploader, (counts.get(tile.dataset.uploader) || 0) + 1);
+    }
+
+    emptyState.hidden = total > 0;
+    photoCount.textContent = `${total} photo${total === 1 ? "" : "s"}`;
+    peopleCount.hidden = counts.size === 0;
+    peopleCount.textContent = `· from ${counts.size} ${counts.size === 1 ? "person" : "people"}`;
+
+    show("download-all", total > 0);
+    show("download-all-empty", total === 0);
+    show("download-others", total > mine);
+    show("download-others-empty", total <= mine);
+    if (saveGalleryBtn) saveGalleryBtn.hidden = !canSaveToGallery || total === 0;
+
+    refreshFilter(total, counts);
+  }
+
+  function show(id, shown) {
+    document.getElementById(id).hidden = !shown;
+  }
+
+  function refreshFilter(total, counts) {
+    if (!filterSelect) return;
+    const names = [...counts.keys()].sort((a, b) => a.localeCompare(b));
+    const signature = [total, ...names.map((name) => `${name}=${counts.get(name)}`)].join("\u0000");
+    // Rebuilding this under an open dropdown would be exactly the interruption the live
+    // refresh exists to avoid, so it is only touched when it really changed.
+    if (filterSelect.dataset.signature === signature) return;
+    filterSelect.dataset.signature = signature;
+
+    const chosen = filterSelect.value;
+    filterSelect.replaceChildren(makeOption("", `Everyone (${total})`));
+    for (const name of names) {
+      filterSelect.appendChild(makeOption(name, `${name} (${counts.get(name)})`));
+    }
+
+    filterSelect.value = chosen;
+    if (filterSelect.selectedIndex < 0) {
+      // The person being filtered on has no photos left: fall back to showing everyone.
+      filterSelect.selectedIndex = 0;
+      applyFilter();
+    }
+  }
+
+  function makeOption(value, label) {
+    const option = document.createElement("option");
+    option.value = value;
+    option.textContent = label;
+    return option;
+  }
+
+  document.addEventListener("visibilitychange", () => {
+    if (document.hidden) {
+      clearTimeout(pollTimer);
+    } else {
+      lastArrival = Date.now();
+      refreshSoon(300);
+    }
+  });
+
+  // Back on the network after a dropout, rather than sitting out the backoff.
+  window.addEventListener("online", () => refreshSoon(300));
+
+  refreshChrome();
+  scheduleNext();
+
   function escapeHtml(s) {
     const div = document.createElement("div");
     div.textContent = s;
diff --git a/tests/Shoebox.Tests.Web/CoreFlowTests.cs b/tests/Shoebox.Tests.Web/CoreFlowTests.cs
index 73d6dcd..e06ae55 100644
--- a/tests/Shoebox.Tests.Web/CoreFlowTests.cs
+++ b/tests/Shoebox.Tests.Web/CoreFlowTests.cs
@@ -287,6 +287,58 @@ public async Task Corrupt_image_is_rejected_and_not_left_on_disk()
             path => Path.GetFileName(path).StartsWith("upload_", StringComparison.Ordinal));
     }
 
+    [Fact]
+    public async Task Live_feed_hands_over_the_prints_the_page_has_not_drawn()
+    {
+        using var factory = new ShoeboxWebApplicationFactory();
+        using var owner = CreateClient(factory);
+        var code = await CreateBoxAsync(owner);
+
+        var first = await UploadAsync(owner, code, "Alice", "one.png", MakePng(MagickColors.Red));
+        var page = await owner.GetStringAsync($"/p/{code}");
+        var cursor = Regex.Match(page, "data-uploaded=\"(\\d+)\"");
+        Assert.True(cursor.Success, $"No tile to pick the live-refresh cursor up from: {first.MediaId}");
+
+        var second = await UploadAsync(owner, code, "Bob", "two.png", MakePng(MagickColors.Blue));
+        var fresh = await owner.GetStringAsync($"/p/{code}?handler=since&since={cursor.Groups[1].Value}");
+        Assert.Contains($"data-id=\"{second.MediaId}\"", fresh);
+
+        // Nothing has landed since a cursor from the future, so nothing is offered.
+        var later = DateTimeOffset.UtcNow.AddMinutes(5).ToUnixTimeMilliseconds();
+        Assert.DoesNotContain("class=\"tile", await owner.GetStringAsync($"/p/{code}?handler=since&since={later}"));
+    }
+
+    [Fact]
+    public async Task Live_feed_is_shut_to_anyone_who_has_not_unlocked_the_box()
+    {
+        using var factory = new ShoeboxWebApplicationFactory();
+        using var owner = CreateClient(factory);
+        var code = await CreateBoxAsync(owner, password: "festival-secret");
+        await UploadAsync(owner, code, "Alice", "one.png", MakePng(MagickColors.Red));
+
+        // A guest holding a signed cookie of their own — for their box, not this one.
+        using var guest = CreateClient(factory);
+        await CreateBoxAsync(guest, password: "their-own-secret");
+        Assert.Equal(
+            HttpStatusCode.Unauthorized,
+            (await guest.GetAsync($"/p/{code}?handler=since&since=0")).StatusCode);
+        Assert.Equal(
+            HttpStatusCode.NotFound,
+            (await guest.GetAsync("/p/nosuchbox?handler=since&since=0")).StatusCode);
+
+        await PostRazorFormAsync(
+            guest,
+            $"/p/{code}/unlock",
+            new Dictionary<string, string> { ["password"] = "festival-secret" });
+        Assert.Contains("class=\"tile", await guest.GetStringAsync($"/p/{code}?handler=since&since=0"));
+    }
+
+    private static byte[] MakePng(MagickColor color)
+    {
+        using var image = new MagickImage(color, 40, 40);
+        return image.ToByteArray(MagickFormat.Png);
+    }
+
     private static HttpClient CreateClient(ShoeboxWebApplicationFactory factory) =>
         factory.CreateClient(new WebApplicationFactoryClientOptions
         {