diff --git a/components/frontend/src/lib/components/dashboard/DashboardView.svelte b/components/frontend/src/lib/components/dashboard/DashboardView.svelte
index 09934437..8bfa33d2 100644
--- a/components/frontend/src/lib/components/dashboard/DashboardView.svelte
+++ b/components/frontend/src/lib/components/dashboard/DashboardView.svelte
@@ -23,6 +23,8 @@
     interface HackathonEntry {
         id: string;
         name: string;
+        /** The hackathon's logo, drawn in the row's thumbnail when it loads. */
+        logo?: string;
         startsAt?: Date;
         endsAt?: Date;
         status: number;
@@ -89,22 +91,6 @@
     // the section vanish entirely for everyone else.
     const adminItems = $derived(platformNav({ isGlobalAdmin }));
 
-    // Decorative thumbnails for hackathons with no image of their own. Each
-    // stop is derived from a theme token and darkened rather than naming a
-    // palette step, so the set retunes with the theme instead of drifting from
-    // it — and so it survives the secondary/tertiary palettes being removed.
-    const GRADIENTS = [
-        { from: 'var(--color-accent)', to: 'color-mix(in oklab, var(--color-accent) 35%, black)' },
-        { from: 'var(--color-info)', to: 'color-mix(in oklab, var(--color-info) 35%, black)' },
-        {
-            from: 'var(--color-success)',
-            to: 'color-mix(in oklab, var(--color-success) 35%, black)',
-        },
-    ];
-
-    function gradient(i: number) {
-        return GRADIENTS[i % GRADIENTS.length]!;
-    }
 
     function formatMeta(h: HackathonEntry): string {
         const fmt = (d: Date) =>
@@ -190,7 +176,7 @@
                 <p class="text-sm text-ink-3">You are not connected to any hackathons yet.</p>
             {:else}
                 <div class="card overflow-hidden">
-                    {#each myHackathons as h, i (h.id)}
+                    {#each myHackathons as h (h.id)}
                         {@const mem = h.viewerMembership}
                         <!-- Two questions, not one: whether the row is a link at
                              all, and which page it opens. Someone who runs this
@@ -229,11 +215,10 @@
                                 <HackathonRow
                                     {href}
                                     name={h.name}
+                                    imageUrl={h.logo}
                                     meta={formatMeta(h)}
                                     badge={statusLabel(h.status)}
                                     badgeVariant={statusBadgeVariant(h.status)}
-                                    gradFrom={gradient(i).from}
-                                    gradTo={gradient(i).to}
                                 />
                             </div>
                             <!-- The row's only trailing element. Editing a
@@ -276,7 +261,7 @@
                 <p class="text-sm text-ink-3">No other hackathons available.</p>
             {:else}
                 <div class="card overflow-hidden">
-                    {#each otherHackathons as h, i (h.id)}
+                    {#each otherHackathons as h (h.id)}
                         <div class="flex items-center border-b border-line last:border-0">
                             <div class="flex-1">
                                 <!-- No href: a non-member holds no `hackathon:read`
@@ -285,11 +270,10 @@
                                      403. Joining is the only thing offered here. -->
                                 <HackathonRow
                                     name={h.name}
+                                    imageUrl={h.logo}
                                     meta={formatMeta(h)}
                                     badge={statusLabel(h.status)}
                                     badgeVariant={statusBadgeVariant(h.status)}
-                                    gradFrom={gradient(i).from}
-                                    gradTo={gradient(i).to}
                                 />
                             </div>
                             <!-- A finished hackathon gets no button and no label:
diff --git a/components/frontend/src/lib/components/forms/ImageUrlField.svelte b/components/frontend/src/lib/components/forms/ImageUrlField.svelte
new file mode 100644
index 00000000..d01393a1
--- /dev/null
+++ b/components/frontend/src/lib/components/forms/ImageUrlField.svelte
@@ -0,0 +1,158 @@
+<script lang="ts">
+    import { adviseImageUrl, usableImage } from '$lib/utils/imageUrl';
+    import { isHttpUrl } from '$lib/utils/url';
+    import StoredImage from '$lib/components/hackathon/StoredImage.svelte';
+
+    let {
+        name,
+        label,
+        value = $bindable(''),
+        placeholder = 'https://…',
+        fieldClass = 'field',
+        labelClass = 'field-label',
+        class: wrapperClass = '',
+    }: {
+        name: string;
+        /** The caption above the input, e.g. "Logo URL (optional)". */
+        label: string;
+        value?: string;
+        placeholder?: string;
+        /** The host form's input and label classes — two of the four forms using
+         *  this still carry their own pair rather than the `field`/`field-label`
+         *  utilities, and a field ignoring them would be the one odd control on
+         *  the page. */
+        fieldClass?: string;
+        labelClass?: string;
+        class?: string;
+    } = $props();
+
+    // A wrapping <label> would have to contain the button below, and a label
+    // holding interactive content is a trap for anyone reaching it by keyboard.
+    // Explicit `for` instead — the same shape the markdown fields already use.
+    const fieldId = `image-url-${name}`;
+
+    // There is no upload anywhere on the platform: the picture is whatever URL
+    // this field ends up holding. So the field has to be where a bad link is
+    // caught — after the save there is nothing left but a broken image on
+    // somebody else's page, with no hint of which link did it.
+    //
+    // `value` is that text and it is bindable, so a page previewing what it is
+    // about to save reads the address from the field itself rather than keeping
+    // a second copy of it that can drift.
+
+    // The address the preview is currently trying. A beat behind the field, so a
+    // half-typed host is not requested character by character and the verdict
+    // below does not contradict itself mid-word.
+    let probed = $state(value.trim());
+    $effect(() => {
+        const next = value.trim();
+        const timer = setTimeout(() => (probed = next), 500);
+        return () => clearTimeout(timer);
+    });
+
+    // Loading it is the only honest test. Pattern-matching names the share links
+    // people actually paste, but it cannot tell a direct URL that 404s from one
+    // that works, and those are half the failures. An `<img>` is also the one
+    // probe with no CORS to satisfy and no server of ours in the middle: exactly
+    // what the real page will do, done early enough to fix.
+    //
+    // Both recorded as *which* address settled rather than as a boolean, so
+    // correcting the field leaves the verdict behind on its own.
+    let loaded = $state('');
+    let failed = $state('');
+
+    const advice = $derived(adviseImageUrl(probed));
+    const previewable = $derived(probed !== '' && isHttpUrl(probed));
+    const showImage = $derived(previewable && usableImage(probed, failed));
+    const checking = $derived(showImage && loaded !== probed);
+</script>
+
+<div class="{labelClass} {wrapperClass}">
+    <label for={fieldId}>{label}</label>
+    <input
+        id={fieldId}
+        type="url"
+        {name}
+        {placeholder}
+        bind:value={value}
+        class={fieldClass}
+    />
+
+    <!-- The instruction, not just the rule. "A link to the image file itself"
+         describes the destination without saying how to get one, and the way to
+         get one is a menu item most people have never had a reason to notice. -->
+    <span class="font-normal text-ink-3">
+        A link to the image file itself — a share or page link will not render. In
+        most browsers: right-click the picture and choose
+        <span class="text-ink-2">Copy image address</span>
+        (Firefox calls it <span class="text-ink-2">Copy Image Link</span>).
+    </span>
+
+    {#if probed !== ''}
+        <!-- Deliberately not `aria-live`: this settles a beat after typing stops
+             and would interrupt somebody still filling the form in. It sits
+             beside the field they are already looking at. -->
+        <div class="flex flex-col items-start gap-2 pt-1 font-normal">
+            {#if showImage}
+                <!-- The same component the public page and About draw with, at a
+                     smaller height cap. A 64px square box stood here saying "this
+                     is what will be shown", which was true of no shape but a
+                     square: a wide banner was boxed and a poster shrunk to a
+                     stamp, and neither looked like the page it was previewing.
+                     Kept in the tree while it loads rather than swapped in on
+                     success — the load *is* the check, so something has to be
+                     doing it, which is what the opacity is for. -->
+                <StoredImage
+                    src={probed}
+                    maxHeight="max-h-40"
+                    class="max-w-sm {checking ? 'opacity-0' : ''}"
+                    onload={() => (loaded = probed)}
+                    onerror={() => (failed = probed)}
+                />
+            {/if}
+
+            <span class="flex min-w-0 flex-col items-start gap-1">
+                {#if checking}
+                    <span class="text-ink-3">Checking the link…</span>
+                {:else if showImage}
+                    <!-- What this field can honestly claim: the address loads, and
+                         this is the picture it loads. Not "this is what will be
+                         shown" — that is a promise about a page, and it only held
+                         where the page draws with `StoredImage` too. A project's
+                         image is still cropped to a round thumbnail, so the
+                         sentence was false there. The page-level claim belongs to
+                         the preview on Manage Public Page, which is an actual
+                         rendering of the page. -->
+                    <span class="text-ink-2">The link works — this is the picture.</span>
+                {:else}
+                    <!-- Two separate claims, so two lines: the first is
+                         demonstrated, the second is a guess at the cause and is
+                         only offered for an address whose shape we recognise. -->
+                    <span class="text-danger-ink">
+                        {previewable
+                            ? 'This link does not load as an image.'
+                            : 'This is not a link a browser can open.'}
+                    </span>
+                {/if}
+
+                {#if advice.problem}
+                    <span class="text-ink-3">{advice.problem}</span>
+                {/if}
+
+                {#if advice.direct}
+                    <!-- Offered, not applied. Rewriting the field under someone
+                         mid-form takes the address away from them; a button they
+                         press leaves them holding the decision, with the preview
+                         beside it showing what pressing it gets. -->
+                    <button
+                        type="button"
+                        class="btn btn-sm btn-outline"
+                        onclick={() => (value = advice.direct ?? value)}
+                    >
+                        Use the direct link
+                    </button>
+                {/if}
+            </span>
+        </div>
+    {/if}
+</div>
diff --git a/components/frontend/src/lib/components/forms/ImageUrlField.test.ts b/components/frontend/src/lib/components/forms/ImageUrlField.test.ts
new file mode 100644
index 00000000..9368b70d
--- /dev/null
+++ b/components/frontend/src/lib/components/forms/ImageUrlField.test.ts
@@ -0,0 +1,153 @@
+import { fireEvent, render, screen } from "@testing-library/svelte"
+import { tick } from "svelte"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+
+import ImageUrlField from "./ImageUrlField.svelte"
+
+/*
+ * The advice itself is covered in utils/imageUrl.test.ts. What is left to prove
+ * here is the part that cannot be a pure function: that the preview is what
+ * decides, that its verdict follows the field rather than sticking to the first
+ * address typed, and that the field warns without ever blocking the submit.
+ *
+ * jsdom loads nothing, so neither `load` nor `error` ever fires on its own. The
+ * events are dispatched by hand, which is what a real browser does a moment
+ * later; the component cannot tell the difference.
+ */
+
+beforeEach(() => vi.useFakeTimers())
+afterEach(() => vi.useRealTimers())
+
+/** Renders, types `value`, and lets the debounce elapse. */
+async function typing(value: string, initial = "") {
+  const { container } = render(ImageUrlField, {
+    props: { name: "logo", label: "Logo URL (optional)", value: initial },
+  })
+  const input = container.querySelector("input")!
+
+  if (value !== initial) await fireEvent.input(input, { target: { value } })
+  await vi.advanceTimersByTimeAsync(600)
+  await tick()
+
+  return { input, container }
+}
+
+const preview = (container: HTMLElement) =>
+  container.querySelector<HTMLImageElement>("img")
+
+describe("ImageUrlField", () => {
+  it("posts the typed address under the given name", async () => {
+    const { input } = await typing("https://example.org/logo.png")
+
+    expect(input.name).toBe("logo")
+    expect(input.value).toBe("https://example.org/logo.png")
+  })
+
+  it("says nothing at all while the field is empty", async () => {
+    const { container } = await typing("")
+
+    expect(preview(container)).toBeNull()
+    expect(screen.queryByText(/does not load/)).toBeNull()
+  })
+
+  it("tries to load what was typed", async () => {
+    const { container } = await typing("https://example.org/logo.png")
+
+    expect(preview(container)?.src).toBe("https://example.org/logo.png")
+    expect(screen.getByText(/Checking the link/)).toBeTruthy()
+  })
+
+  it("waits for typing to stop before requesting anything", async () => {
+    const { container } = render(ImageUrlField, {
+      props: { name: "logo", label: "Logo URL" },
+    })
+    const input = container.querySelector("input")!
+
+    await fireEvent.input(input, { target: { value: "https://exa" } })
+    await vi.advanceTimersByTimeAsync(200)
+    await tick()
+
+    expect(preview(container)).toBeNull()
+  })
+
+  it("shows the picture once it loads", async () => {
+    const { container } = await typing("https://example.org/logo.png")
+
+    await fireEvent.load(preview(container)!)
+    await tick()
+
+    // The wording is deliberately about the link and the picture rather than
+    // about the page: the field cannot promise how a given page draws it, and
+    // a project still crops its image to a round thumbnail.
+    expect(screen.getByText(/this is the picture/i)).toBeTruthy()
+    expect(preview(container)).not.toBeNull()
+  })
+
+  it("reports an address that will not load, and drops the preview", async () => {
+    const { container } = await typing("https://example.org/not-an-image")
+
+    await fireEvent.error(preview(container)!)
+    await tick()
+
+    expect(screen.getByText(/does not load as an image/)).toBeTruthy()
+    expect(preview(container)).toBeNull()
+  })
+
+  it("explains a share link once the preview has failed", async () => {
+    const { container } = await typing(
+      "https://drive.google.com/file/d/1AbC/view",
+    )
+
+    await fireEvent.error(preview(container)!)
+    await tick()
+
+    expect(screen.getByText(/Google Drive share link/)).toBeTruthy()
+  })
+
+  it("tries again when the address is corrected", async () => {
+    const { input, container } = await typing("https://example.org/bad.png")
+
+    await fireEvent.error(preview(container)!)
+    await tick()
+    expect(preview(container)).toBeNull()
+
+    await fireEvent.input(input, {
+      target: { value: "https://example.org/good.png" },
+    })
+    await vi.advanceTimersByTimeAsync(600)
+    await tick()
+
+    expect(preview(container)?.src).toBe("https://example.org/good.png")
+  })
+
+  it("swaps in the direct link when offered one, and only when pressed", async () => {
+    const { input } = await typing(
+      "https://github.com/acme/site/blob/main/logo.png",
+    )
+
+    expect(input.value).toBe("https://github.com/acme/site/blob/main/logo.png")
+
+    await fireEvent.click(screen.getByText(/Use the direct link/))
+    await tick()
+
+    expect(input.value).toBe(
+      "https://raw.githubusercontent.com/acme/site/main/logo.png",
+    )
+  })
+
+  it("refuses to preview something that is not a web address", async () => {
+    const { container } = await typing("logo.png")
+
+    expect(preview(container)).toBeNull()
+    expect(screen.getByText(/not a link a browser can open/)).toBeTruthy()
+  })
+
+  it("previews an address it was given, without waiting to be typed into", async () => {
+    const { container } = await typing(
+      "https://example.org/saved.png",
+      "https://example.org/saved.png",
+    )
+
+    expect(preview(container)?.src).toBe("https://example.org/saved.png")
+  })
+})
diff --git a/components/frontend/src/lib/components/forms/MarkdownEditor.svelte b/components/frontend/src/lib/components/forms/MarkdownEditor.svelte
index bea451e1..f895f70e 100644
--- a/components/frontend/src/lib/components/forms/MarkdownEditor.svelte
+++ b/components/frontend/src/lib/components/forms/MarkdownEditor.svelte
@@ -28,7 +28,7 @@
     let {
         id,
         name,
-        value = '',
+        value = $bindable(''),
         rows = 8,
         placeholder = '',
         required = false,
@@ -46,7 +46,6 @@
         maxlength?: number;
     } = $props();
 
-    let text = $state(value);
     let mode: 'write' | 'preview' = $state('write');
     let area: HTMLTextAreaElement | undefined = $state();
 
@@ -98,10 +97,10 @@
     async function apply(transform: (edit: Edit) => Edit | null) {
         if (!area) return;
 
-        const next = transform({ value: text, start: area.selectionStart, end: area.selectionEnd });
+        const next = transform({ value, start: area.selectionStart, end: area.selectionEnd });
         if (!next) return;
 
-        const { from, to, text: inserted } = diffRange(text, next.value);
+        const { from, to, text: inserted } = diffRange(value, next.value);
         // No transform currently returns its input unchanged, but if one ever
         // does, `execCommand('delete')` on a collapsed selection below would eat
         // the character before the caret instead of doing nothing.
@@ -116,7 +115,7 @@
                 ? document.execCommand('insertText', false, inserted)
                 : document.execCommand('delete'));
 
-        if (!undoable) text = next.value;
+        if (!undoable) value = next.value;
 
         await tick();
         area.setSelectionRange(next.start, next.end);
@@ -132,7 +131,7 @@
             // the decision and the edit cannot disagree.
             if (!area) return;
             const next = continueList({
-                value: text,
+                value,
                 start: area.selectionStart,
                 end: area.selectionEnd,
             });
@@ -151,7 +150,7 @@
         void apply(run);
     }
 
-    const remaining = $derived(maxlength ? maxlength - text.length : 0);
+    const remaining = $derived(maxlength ? maxlength - value.length : 0);
 </script>
 
 <div class="flex flex-col gap-2">
@@ -220,7 +219,7 @@
         {id}
         {name}
         bind:this={area}
-        bind:value={text}
+        bind:value={value}
         {rows}
         {placeholder}
         {required}
@@ -246,8 +245,8 @@
              markup behind `display: none`. On the 10,000-character
              descriptions four of these forms allow, that is not free. -->
         {#if mode === 'preview'}
-            {#if text.trim()}
-                <MarkdownContent content={text} />
+            {#if value.trim()}
+                <MarkdownContent content={value} />
             {:else}
                 <p class="m-0 text-ink-3">Nothing to preview yet.</p>
             {/if}
diff --git a/components/frontend/src/lib/components/hackathon/HackathonRow.svelte b/components/frontend/src/lib/components/hackathon/HackathonRow.svelte
index 027b7bdc..5c27fb3f 100644
--- a/components/frontend/src/lib/components/hackathon/HackathonRow.svelte
+++ b/components/frontend/src/lib/components/hackathon/HackathonRow.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
     import { resolve } from '$app/paths';
     import { Users } from 'lucide-svelte';
+    import { usableImage } from '$lib/utils/imageUrl';
 
     let {
         href,
         name,
         org,
         meta,
+        imageUrl,
         badge,
         badgeVariant = 'badge-accent',
         count,
-        gradFrom,
-        gradTo,
         size = 'default',
     }: {
         /**
@@ -23,14 +23,23 @@
         name: string;
         org?: string;
         meta: string;
+        /**
+         * The hackathon's logo — the picture an organiser chose, and the only
+         * picture this row ever shows. A hackathon without one gets an empty
+         * ground of the same size rather than a generated stand-in.
+         */
+        imageUrl?: string;
         badge?: string;
         badgeVariant?: string;
         count?: string;
-        gradFrom: string;
-        gradTo: string;
         size?: 'default' | 'compact';
     } = $props();
 
+    // A logo is typed in, never uploaded, so a link that serves a web page is
+    // the ordinary mistake rather than the rare one; the empty ground absorbs it.
+    let failedSrc: string | undefined = $state(undefined);
+    const hasImage = $derived(usableImage(imageUrl, failedSrc));
+
     const thumbSize = size === 'compact' ? 'h-9 w-9' : 'h-12 w-12';
     // A floor rather than a fixed height: with `org` set the row carries three
     // stacked lines, which a fixed height would clip.
@@ -51,10 +60,28 @@
 {/if}
 
 {#snippet row()}
-    <div
-        class="{thumbSize} shrink-0 rounded-field"
-        style="background: linear-gradient(135deg, {gradFrom}, {gradTo})"
-    ></div>
+    {#if hasImage}
+        <!-- `contain` on a plain ground, not `cover`: a hackathon logo is
+             usually wide and often has its own background, and cropping it to a
+             square would cut the wordmark in half. -->
+        <div
+            class="{thumbSize} shrink-0 overflow-hidden rounded-field border border-line bg-raised"
+        >
+            <img
+                src={imageUrl}
+                alt=""
+                onerror={() => (failedSrc = imageUrl)}
+                class="h-full w-full object-contain"
+            />
+        </div>
+    {:else}
+        <!-- An empty ground, not a generated picture. The colour used to be
+             picked by the row's position in the list, so a hackathon's tile
+             changed colour whenever the backend returned the list in another
+             order — a picture nobody chose, and a different one each visit. The
+             box stays so rows with and without a logo keep one left edge. -->
+        <div class="{thumbSize} shrink-0 rounded-field border border-line bg-overlay"></div>
+    {/if}
     <div class="flex min-w-0 flex-1 flex-col gap-0.5">
         <!-- The organisation is an eyebrow above the name rather than sharing a
              line behind a slash, so the hackathon's own name gets the line to
diff --git a/components/frontend/src/lib/components/hackathon/HeroCompact.svelte b/components/frontend/src/lib/components/hackathon/HeroCompact.svelte
index 0cb32561..f3aa5e4b 100644
--- a/components/frontend/src/lib/components/hackathon/HeroCompact.svelte
+++ b/components/frontend/src/lib/components/hackathon/HeroCompact.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import StoredImage from './StoredImage.svelte';
+
     let {
         title,
         dates,
@@ -35,14 +37,12 @@
     class="flex flex-col gap-4 bg-raised px-4 py-4 sm:px-10 sm:py-6 md:flex-row md:items-center
            md:gap-8 md:px-20 md:py-4 min-h-0 md:min-h-44"
 >
-    {#if imageUrl}
-        <div
-            class="aspect-[4/3] w-full max-w-md shrink-0 overflow-hidden border
-                   border-line sm:aspect-auto sm:max-w-none sm:h-36 sm:w-56"
-        >
-            <img src={imageUrl} alt={title} class="h-full w-full object-cover" />
-        </div>
-    {/if}
+    <!-- The same picture, drawn the same way, as the public page and About. It
+         used to be `object-cover` in a fixed 224x144 box, which cropped whatever
+         was pasted to that shape — a square wordmark lost its top and bottom.
+         The height cap keeps this hero's height where it was; the width now
+         follows the image instead of the other way round. -->
+    <StoredImage src={imageUrl} alt={title} maxHeight="max-h-36" class="shrink-0" />
 
     <div class="flex min-w-0 flex-1 flex-col gap-1.5">
         <span class="text-xs font-semibold text-accent-ink">{dates}</span>
diff --git a/components/frontend/src/lib/components/hackathon/HeroSection.svelte b/components/frontend/src/lib/components/hackathon/HeroSection.svelte
index 8dad008d..14c411b5 100644
--- a/components/frontend/src/lib/components/hackathon/HeroSection.svelte
+++ b/components/frontend/src/lib/components/hackathon/HeroSection.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { resolve } from '$app/paths';
     import { Calendar, MapPin, Users } from 'lucide-svelte';
+    import StoredImage from './StoredImage.svelte';
 
     // Only the name and the breadcrumbs are required. Everything else is
     // optional because a hackathon may genuinely not have it: dates are
@@ -33,72 +34,75 @@
     const hasMeta = $derived(Boolean(dates) || Boolean(venue) || hasCounts);
 </script>
 
-<!-- The tall variant is for the image: 24rem of canvas is what gives a banner
-     room to read as one. With no image there is nothing filling it, so the
-     section falls back to its content's own height. -->
+<!--
+  The hackathon's picture is shown, not used as wallpaper.
+
+  It used to be an `<img>` stretched behind this whole section at 30% opacity
+  under a 70% scrim — 9% of the picture, which is a tint rather than an image and
+  read as something failing to load. Being `object-cover` across a 24rem band, it
+  also cropped whatever was pasted to the band's shape: a square wordmark lost its
+  top and bottom.
+
+  Now it is drawn by `StoredImage`, at its own proportions, exactly as the
+  member's About page and the organiser's preview draw it. One field, one
+  appearance, wherever the reader meets it.
+
+  Centred as a block — breadcrumbs, picture, status, title and dates on one
+  axis — which is the landing page's hero treatment too. Left-aligned it hung off
+  the edge of a picture whose width now varies with whatever was pasted, so the
+  column's edge moved from hackathon to hackathon.
+-->
 <section
-    class="relative flex flex-col justify-end gap-4 overflow-hidden px-4 pt-8 pb-12
-           sm:px-10 md:px-20"
-    class:min-h-96={imageUrl}
+    class="flex flex-col items-center gap-4 px-4 pt-8 pb-12 text-center sm:px-10
+           md:px-20"
 >
-    {#if imageUrl}
-        <img
-            src={imageUrl}
-            alt=""
-            class="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-30 dark:opacity-20"
-        />
-    {/if}
-    <!-- One scrim, not a light/dark pair: `canvas` already flips with the mode,
-         so the two variants collapse into a single token. -->
-    <div class="pointer-events-none absolute inset-0 bg-canvas/70"></div>
+    <nav class="flex items-center gap-1.5 text-xs text-ink-2">
+        {#each breadcrumbs as crumb, i (i)}
+            {#if i > 0}
+                <span>/</span>
+            {/if}
+            <a href={resolve(crumb.href)} class="no-underline hover:text-accent-ink"
+                >{crumb.label}</a
+            >
+        {/each}
+    </nav>
 
-    <div class="relative z-10 flex flex-col gap-4">
-        <nav class="flex items-center gap-1.5 text-xs text-ink-2">
-            {#each breadcrumbs as crumb, i (i)}
-                {#if i > 0}
-                    <span>/</span>
-                {/if}
-                <a href={resolve(crumb.href)} class="no-underline hover:text-accent-ink">{crumb.label}</a>
-            {/each}
-        </nav>
+    <StoredImage src={imageUrl} maxHeight="max-h-64" class="max-w-3xl" />
 
-        {#if status}
-            <span class="badge badge-outline-accent w-fit">
-                <span class="h-1.5 w-1.5 rounded-full bg-accent"></span>
-                <span>{status}</span>
-            </span>
-        {/if}
+    {#if status}
+        <span class="badge badge-outline-accent w-fit">
+            <span class="h-1.5 w-1.5 rounded-full bg-accent"></span>
+            <span>{status}</span>
+        </span>
+    {/if}
 
-        <h1
-            class="max-w-2xl text-3xl font-bold leading-tight whitespace-pre-line sm:text-4xl"
-        >
-            {title}
-        </h1>
+    <h1 class="max-w-2xl text-3xl font-bold leading-tight whitespace-pre-line sm:text-4xl">
+        {title}
+    </h1>
 
-        {#if hasMeta}
-            <div
-                class="flex flex-col gap-3 text-sm text-ink-2 sm:flex-row sm:flex-wrap
-                       sm:items-center sm:gap-6"
-            >
-                {#if dates}
-                    <span class="flex min-w-0 items-center gap-2">
-                        <Calendar class="h-4 w-4 shrink-0 text-accent-ink" />
-                        {dates}
-                    </span>
-                {/if}
-                {#if venue}
-                    <span class="flex min-w-0 items-center gap-2">
-                        <MapPin class="h-4 w-4 shrink-0 text-accent-ink" />
-                        {venue}
-                    </span>
-                {/if}
-                {#if hasCounts}
-                    <span class="flex min-w-0 items-center gap-2">
-                        <Users class="h-4 w-4 shrink-0 text-accent-ink" />
-                        {registered} / {capacity} registered
-                    </span>
-                {/if}
-            </div>
-        {/if}
-    </div>
+    {#if hasMeta}
+        <div
+            class="flex flex-col items-center gap-3 text-sm text-ink-2 sm:flex-row
+                   sm:flex-wrap sm:items-center sm:justify-center sm:gap-6"
+        >
+            {#if dates}
+                <span class="flex min-w-0 items-center gap-2">
+                    <Calendar class="h-4 w-4 shrink-0 text-accent-ink" />
+                    {dates}
+                </span>
+            {/if}
+            {#if venue}
+                <span class="flex min-w-0 items-center gap-2">
+                    <MapPin class="h-4 w-4 shrink-0 text-accent-ink" />
+                    {venue}
+                </span>
+            {/if}
+            {#if hasCounts}
+                <span class="flex min-w-0 items-center gap-2">
+                    <Users class="h-4 w-4 shrink-0 text-accent-ink" />
+                    {registered} / {capacity} registered
+                </span>
+            {/if}
+        </div>
+    {/if}
 </section>
diff --git a/components/frontend/src/lib/components/hackathon/ProjectEditForm.svelte b/components/frontend/src/lib/components/hackathon/ProjectEditForm.svelte
index 4006252a..74ad525a 100644
--- a/components/frontend/src/lib/components/hackathon/ProjectEditForm.svelte
+++ b/components/frontend/src/lib/components/hackathon/ProjectEditForm.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { resolve } from '$app/paths';
+    import ImageUrlField from '$lib/components/forms/ImageUrlField.svelte';
     import MarkdownEditor from '$lib/components/forms/MarkdownEditor.svelte';
 
     let {
@@ -81,19 +82,12 @@
             </label>
         {/if}
 
-        <label class="field-label {tracks.length > 0 ? '' : 'sm:col-span-2'}">
-            Image URL (optional)
-            <input
-                type="url"
-                name="image"
-                placeholder="https://…"
-                value={project.image ?? ''}
-                class="field"
-            />
-            <span class="font-normal text-ink-3">
-                A link to the image file itself — a share or page link will not render.
-            </span>
-        </label>
+        <ImageUrlField
+            name="image"
+            label="Project image URL (optional)"
+            value={project.image ?? ''}
+            class={tracks.length > 0 ? '' : 'sm:col-span-2'}
+        />
     </div>
 
     <!-- Last and full width: the only field with no natural size, and the one
diff --git a/components/frontend/src/lib/components/hackathon/PublicHackathonView.svelte b/components/frontend/src/lib/components/hackathon/PublicHackathonView.svelte
new file mode 100644
index 00000000..3612a740
--- /dev/null
+++ b/components/frontend/src/lib/components/hackathon/PublicHackathonView.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+    import MarkdownContent from '$lib/components/forms/MarkdownContent.svelte';
+    import HeroSection from './HeroSection.svelte';
+    import JoinCta from './JoinCta.svelte';
+    import { formatDateRange } from '$lib/utils/hackathonDates';
+    import { statusLabel } from '$lib/utils/hackathonStatus';
+
+    let {
+        id,
+        name,
+        description,
+        logo,
+        startsAt,
+        endsAt,
+        status,
+        signedIn,
+        preview = false,
+    }: {
+        id: string;
+        name: string;
+        description: string;
+        logo?: string;
+        startsAt?: Date;
+        endsAt?: Date;
+        /** Raw HackathonStatus number, as the loader returns it. */
+        status: number;
+        /** Unused when `preview` is set — the preview draws no Join block. */
+        signedIn?: boolean;
+        /**
+         * Drawn for an organiser checking their own page rather than for a
+         * visitor. Everything is rendered the same; only the interaction is
+         * withdrawn, because a Join button that works inside the editor would
+         * enrol the organiser in their own hackathon by accident.
+         */
+        preview?: boolean;
+    } = $props();
+
+    // Derived here, not passed in, for the same reason the whole view is one
+    // component: a preview that formats its own dates or labels its own status
+    // is a second implementation, and second implementations drift.
+    const dates = $derived(formatDateRange({ startsAt, endsAt }));
+</script>
+
+<!--
+  What a visitor sees at /hackathon/<id>, defined once.
+
+  The public route renders this, and so does the organiser's Public page editor.
+  That is the whole point: a preview built from its own markup looks right on the
+  day it is written and lies by the end of the month, and the lie is worst
+  exactly where it matters — the picture, whose shape nobody can predict from the
+  URL they pasted.
+-->
+<div inert={preview}>
+    <HeroSection
+        title={name}
+        {dates}
+        imageUrl={logo}
+        status={statusLabel(status)}
+        breadcrumbs={[
+            { label: 'Hackathons', href: '/' },
+            { label: name, href: `/hackathon/${id}` },
+        ]}
+    />
+
+    <div class="mx-auto w-full max-w-7xl">
+        <section class="px-4 py-12 sm:px-10 md:px-20">
+            {#if description}
+                <!-- The organizer's own markdown, through the same component the
+                     editor previews with, so what they wrote is what shows. -->
+                <div class="max-w-3xl">
+                    <MarkdownContent content={description} />
+                </div>
+            {:else}
+                <!-- Said plainly rather than filled with something inviting: this
+                     page has one job, and an empty description means the organizer
+                     has not done it yet. -->
+                <p class="m-0 text-sm text-ink-3">
+                    The organizers have not written a description for this hackathon yet.
+                </p>
+            {/if}
+        </section>
+
+        <!-- The way in, at the foot of the page: everything above is what the
+             hackathon is, and this is what to do about it. One `btn-solid` on the
+             page, which is the theme's rule — the hero above carries no action.
+
+             Left out of the preview: it is the same block for every hackathon and
+             nothing on the form beside it changes what it says, so in the editor
+             it is a fixed footer taking the room the organiser wants for their
+             own content. -->
+        {#if !preview}
+            <JoinCta hackathonId={id} {name} {status} signedIn={signedIn ?? false} />
+        {/if}
+    </div>
+</div>
diff --git a/components/frontend/src/lib/components/hackathon/RoundMedia.svelte b/components/frontend/src/lib/components/hackathon/RoundMedia.svelte
index 267fcfd1..e9daf820 100644
--- a/components/frontend/src/lib/components/hackathon/RoundMedia.svelte
+++ b/components/frontend/src/lib/components/hackathon/RoundMedia.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    import { usableImage } from '$lib/utils/imageUrl';
+
     let {
         src,
         initials,
@@ -16,12 +18,10 @@
     // otherwise leave the browser's broken-image glyph in the circle — which
     // looks like a bug in the app rather than a bad link. `image` is free text
     // the proposer types, so this is the ordinary case, not the edge one.
-    //
-    // Recorded as *which* src failed rather than a boolean, so a new src is tried
-    // afresh: a component reused across rows (or an image corrected by an edit)
-    // must not stay failed because an earlier URL was.
+    // `usableImage` is where the rule lives; every surface drawing a stored
+    // address shares it.
     let failedSrc: string | undefined = $state(undefined);
-    const usable = $derived(src !== undefined && src !== '' && failedSrc !== src);
+    const usable = $derived(usableImage(src, failedSrc));
 </script>
 
 <!--
diff --git a/components/frontend/src/lib/components/hackathon/StoredImage.svelte b/components/frontend/src/lib/components/hackathon/StoredImage.svelte
new file mode 100644
index 00000000..fba0181f
--- /dev/null
+++ b/components/frontend/src/lib/components/hackathon/StoredImage.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+    import { usableImage } from '$lib/utils/imageUrl';
+
+    let {
+        src,
+        alt = '',
+        maxHeight = 'max-h-56',
+        class: extra = '',
+        onload,
+        onerror,
+    }: {
+        src?: string;
+        alt?: string;
+        /**
+         * The one dimension a caller gets to choose. A Tailwind `max-h-*` class
+         * rather than a number, so it goes through the same scale as everything
+         * else on the page.
+         */
+        maxHeight?: string;
+        /**
+         * Classes for the *wrapper*, which is where a width cap belongs. Putting
+         * one on the image would collide with its own `max-w-full` — two
+         * `max-width` utilities on one element, resolved by stylesheet order
+         * rather than by intent, which is how a picture meant to stop at 48rem
+         * ends up spanning the window.
+         */
+        class?: string;
+        /** For a caller using the load itself as a check — see `ImageUrlField`. */
+        onload?: () => void;
+        onerror?: () => void;
+    } = $props();
+
+    // The shared rule for an address somebody typed: show nothing rather than
+    // the browser's broken-image glyph, and record *which* address failed so a
+    // corrected one is tried afresh.
+    let failedSrc: string | undefined = $state(undefined);
+    const usable = $derived(usableImage(src, failedSrc));
+</script>
+
+<!--
+  A picture stored as a URL somebody typed — a hackathon's logo, a project's
+  image — drawn the same way everywhere it appears, including in the form where
+  the address is entered.
+
+  There is one field per picture and no way to know what shape it holds.
+  Organisers paste wide event banners, square wordmarks with transparent
+  backgrounds, 16:9 photographs and the occasional portrait poster. Any fixed
+  aspect box crops at least two of those badly with `cover`, or strands them in
+  bars with `contain`. There is no ratio that serves all four.
+
+  So no ratio is imposed. The image keeps its own proportions, bounded by the
+  wrapper's width and one max-height, and the browser scales it down to fit both.
+  A banner comes out wide and short, a wordmark square, a poster tall and narrow
+  — each of them whole, none of them cropped, and the rule fits in a sentence
+  somebody can predict from: *your picture, at most this tall, at most this
+  wide.* That is also what makes the form's preview honest — it is this
+  component, not an impression of it.
+
+  The ground behind it is not decoration: a wordmark saved as a transparent PNG
+  has to land on something, and on the bare canvas it would appear to float. The
+  hairline gives a photograph an edge for the same reason.
+
+  Not used for the row thumbnails in a list — those need a fixed square footprint
+  to keep the rows aligned, which is a different problem. `HackathonRow` solves
+  it with the same `object-contain` rule inside a fixed box.
+-->
+{#if usable}
+    <div class={extra}>
+        <img
+            {src}
+            {alt}
+            onload={() => onload?.()}
+            onerror={() => {
+                failedSrc = src;
+                onerror?.();
+            }}
+            class="block h-auto w-auto max-w-full rounded-card border border-line
+                   bg-raised {maxHeight}"
+        />
+    </div>
+{/if}
diff --git a/components/frontend/src/lib/navigation/items.test.ts b/components/frontend/src/lib/navigation/items.test.ts
index d040fffa..f0e605e4 100644
--- a/components/frontend/src/lib/navigation/items.test.ts
+++ b/components/frontend/src/lib/navigation/items.test.ts
@@ -498,10 +498,19 @@ describe("manageNav", () => {
 
   // Mirrors the backend, which does not consult isWaiting for track:write or
   // phase:write either.
-  it("does not withhold management from a waitlisted owner", () => {
-    expect(
-      idsOf(manageNav("hack-1", { role: ROLE_OWNER, isWaiting: true }, false)),
-    ).toEqual(idsOf(manageNav("hack-1", owner, false)))
+  // Manage Public Page is the one entry a waitlisted owner does not get, because
+  // its page answers anyone unconfirmed with a 403 (`canEditHackathon`, enforced
+  // in that route's load). Withholding it is the nav keeping its stronger
+  // promise — never offer a link that then refuses. Every other entry is offered
+  // to a waitlisted owner exactly as to a confirmed one.
+  it("withholds only the public-page entry from a waitlisted owner", () => {
+    const waiting = idsOf(
+      manageNav("hack-1", { role: ROLE_OWNER, isWaiting: true }, false),
+    )
+    const confirmed = idsOf(manageNav("hack-1", owner, false))
+
+    expect(confirmed).toContain("manage:public")
+    expect(waiting).toEqual(confirmed.filter((id) => id !== "manage:public"))
   })
 
   // The exact paths are the compiler's job — `resolve()` takes SvelteKit's
@@ -558,11 +567,11 @@ describe("manageNav", () => {
         "manage:participants",
       ],
       ["/my/hackathon/hack-1/teams/manage", "manage:teams"],
-      // The hackathon's own edit form, for the same reason as the phase forms
-      // below: it is reached from Settings and nests under it, so that entry
-      // stays lit rather than nothing being lit at all.
       ["/my/hackathon/hack-1/manage", "manage:settings"],
-      ["/my/hackathon/hack-1/manage/edit", "manage:settings"],
+      // The public page editor has an entry of its own now, so it lights that
+      // rather than leaving Settings lit beneath it. It still nests under
+      // `/manage`, which is what longest-match has to resolve correctly.
+      ["/my/hackathon/hack-1/manage/edit", "manage:public"],
       // Nested under Settings too, but with an entry of its own — longest match
       // is what keeps Settings from swallowing it.
       ["/my/hackathon/hack-1/manage/forms", "manage:forms"],
diff --git a/components/frontend/src/lib/navigation/items.ts b/components/frontend/src/lib/navigation/items.ts
index ffdd3bfb..8428d640 100644
--- a/components/frontend/src/lib/navigation/items.ts
+++ b/components/frontend/src/lib/navigation/items.ts
@@ -13,6 +13,7 @@
 import type { ComponentType } from "svelte"
 import { resolve } from "$app/paths"
 import {
+  canEditHackathon,
   canManageHackathon,
   type ViewerMembership,
 } from "$lib/utils/hackathonRole"
@@ -28,6 +29,7 @@ import UserRoundCog from "lucide-svelte/icons/user-round-cog"
 import Send from "lucide-svelte/icons/send"
 import Ticket from "lucide-svelte/icons/ticket"
 import CalendarClock from "lucide-svelte/icons/calendar-clock"
+import Globe from "lucide-svelte/icons/globe"
 import CalendarCog from "lucide-svelte/icons/calendar-cog"
 import FileText from "lucide-svelte/icons/file-text"
 import Info from "lucide-svelte/icons/info"
@@ -307,13 +309,14 @@ export function platformNav(roles: { isGlobalAdmin: boolean }): NavItem[] {
  * management route's own load, all reduce to owner-or-admin — casbin grants
  * `hackathon:write` / `phase:write` / `page:write` / `track:write` to `Owner`
  * outright and to an admin through the global escape hatch, with no capability
- * gating any of them. So this never offers a link that then refuses. Add a
- * per-entry gate the day an entry needs a narrower one rather than widening this
- * one: `/edit` would be the first, since `canEditHackathon` also requires the
- * owner be confirmed — which is why it is offered on the Settings page itself,
- * behind that check of its own, rather than listed here. It nests under
- * `/manage` like every other single-record form, so Settings stays lit while it
- * is open. `isWaiting` is deliberately not consulted; nor does the backend.
+ * gating any of them. So this never offers a link that then refuses. Where an
+ * entry needs a narrower gate it carries its own rather than widening this one:
+ * Manage Public Page is the one such entry, because `canEditHackathon` also
+ * requires the owner be confirmed. It nests under `/manage` like every other
+ * single-record form, but it is a destination of its own, so it is listed here
+ * rather than reached from a control on the Settings page. `isWaiting` is not
+ * consulted for any other entry, and nor does the backend consult it for the
+ * capabilities behind them.
  *
  * Entries follow the order of the participant entries they extend, and most are
  * nested under that entry's route (`/teams/manage` under `/teams`) so
@@ -388,6 +391,25 @@ export function manageNav(
         ? { badge: "!", badgeVariant: "badge-warning" as const }
         : {}),
     },
+    // The hackathon as everyone outside it sees it: the name, dates, picture and
+    // description on the public page, with that page previewed beside the fields
+    // as they are typed. A tab of its own rather than a pencil tucked into
+    // Settings — it is a destination an organiser returns to, not a one-off
+    // correction to the row it sat on.
+    // Gated on its own rather than on the section gate above, which is the
+    // per-entry check the note on `manageNav` anticipated: `canEditHackathon`
+    // additionally requires the owner be confirmed, so listing it unconditionally
+    // would offer a manager a form the backend then refuses.
+    ...(canEditHackathon(membership, isGlobalAdmin)
+      ? [
+          {
+            id: "manage:public",
+            label: "Manage Public Page",
+            icon: Globe,
+            href: resolve(`/my/hackathon/${hackathonId}/manage/edit`),
+          },
+        ]
+      : []),
     // Both halves of the roster: the confirmed people, and the queue waiting to
     // be let in, as two tabs of the one destination. The participant page lists
     // the same confirmed people and offers nothing to act on — every decision
diff --git a/components/frontend/src/lib/utils/imageUrl.test.ts b/components/frontend/src/lib/utils/imageUrl.test.ts
new file mode 100644
index 00000000..aa9846c0
--- /dev/null
+++ b/components/frontend/src/lib/utils/imageUrl.test.ts
@@ -0,0 +1,126 @@
+import { describe, it, expect } from "vitest"
+import { adviseImageUrl, usableImage } from "./imageUrl"
+
+describe("adviseImageUrl", () => {
+  it("says nothing about an empty field", () => {
+    expect(adviseImageUrl("")).toEqual({})
+    expect(adviseImageUrl("   ")).toEqual({})
+  })
+
+  it("says nothing about an ordinary image address", () => {
+    expect(adviseImageUrl("https://example.org/logo.png")).toEqual({})
+  })
+
+  it("ignores surrounding whitespace from a paste", () => {
+    expect(adviseImageUrl("  https://example.org/logo.png  ")).toEqual({})
+  })
+
+  it("rejects what is not a web address", () => {
+    expect(adviseImageUrl("logo.png").problem).toMatch(/https:\/\//)
+    expect(adviseImageUrl("/images/logos/psi.png").problem).toMatch(
+      /https:\/\//,
+    )
+  })
+
+  it("rejects a non-http scheme", () => {
+    expect(adviseImageUrl("javascript:alert(1)").problem).toBeDefined()
+    expect(adviseImageUrl("data:image/png;base64,AAAA").problem).toBeDefined()
+  })
+
+  it("turns a GitHub blob page into its raw address", () => {
+    expect(
+      adviseImageUrl("https://github.com/acme/site/blob/main/docs/logo.png"),
+    ).toEqual({
+      problem: expect.stringContaining("GitHub"),
+      direct: "https://raw.githubusercontent.com/acme/site/main/docs/logo.png",
+    })
+  })
+
+  it("leaves a raw.githubusercontent address alone", () => {
+    expect(
+      adviseImageUrl(
+        "https://raw.githubusercontent.com/acme/site/main/logo.png",
+      ),
+    ).toEqual({})
+  })
+
+  it("leaves a GitHub address that is not a blob page alone", () => {
+    expect(adviseImageUrl("https://github.com/acme/site")).toEqual({})
+  })
+
+  it("turns a Dropbox share link into the inline form", () => {
+    const advice = adviseImageUrl("https://www.dropbox.com/s/abc/logo.png?dl=0")
+    expect(advice.problem).toContain("Dropbox")
+    expect(advice.direct).toBe("https://www.dropbox.com/s/abc/logo.png?raw=1")
+  })
+
+  it("leaves a Dropbox link that already asks for raw alone", () => {
+    expect(
+      adviseImageUrl("https://www.dropbox.com/s/abc/logo.png?raw=1"),
+    ).toEqual({})
+  })
+
+  it("refuses Google Drive without offering a rewrite", () => {
+    const advice = adviseImageUrl(
+      "https://drive.google.com/file/d/1AbC/view?usp=sharing",
+    )
+    expect(advice.problem).toContain("Drive")
+    expect(advice.direct).toBeUndefined()
+  })
+
+  it("names the other share-link hosts", () => {
+    expect(
+      adviseImageUrl("https://photos.app.goo.gl/abc").problem,
+    ).toBeDefined()
+    expect(adviseImageUrl("https://1drv.ms/i/s!abc").problem).toBeDefined()
+    expect(
+      adviseImageUrl("https://acme.sharepoint.com/sites/x/logo.png").problem,
+    ).toBeDefined()
+    expect(adviseImageUrl("https://imgur.com/a/abc").problem).toBeDefined()
+    expect(
+      adviseImageUrl("https://www.flickr.com/photos/someone/123").problem,
+    ).toBeDefined()
+    expect(
+      adviseImageUrl("https://unsplash.com/photos/a-cat-abc123").problem,
+    ).toBeDefined()
+  })
+
+  it("leaves the image hosts of those services alone", () => {
+    expect(adviseImageUrl("https://i.imgur.com/abc.png")).toEqual({})
+    expect(adviseImageUrl("https://live.staticflickr.com/1/2_b.jpg")).toEqual(
+      {},
+    )
+    expect(adviseImageUrl("https://images.unsplash.com/photo-123")).toEqual({})
+  })
+
+  it("does not mistake a lookalike domain for the real host", () => {
+    // `endsWith('.github.com')` rather than `includes('github.com')`: a host
+    // ending in `notgithub.com` is somebody else's site entirely.
+    expect(
+      adviseImageUrl("https://notgithub.com/acme/site/blob/main/logo.png"),
+    ).toEqual({})
+  })
+})
+
+describe("usableImage", () => {
+  it("refuses an absent or empty address", () => {
+    expect(usableImage(undefined, undefined)).toBe(false)
+    expect(usableImage("", undefined)).toBe(false)
+  })
+
+  it("accepts an address that has not failed", () => {
+    expect(usableImage("https://example.org/a.png", undefined)).toBe(true)
+  })
+
+  it("refuses the exact address that failed", () => {
+    expect(
+      usableImage("https://example.org/a.png", "https://example.org/a.png"),
+    ).toBe(false)
+  })
+
+  it("tries a corrected address even though the previous one failed", () => {
+    expect(
+      usableImage("https://example.org/b.png", "https://example.org/a.png"),
+    ).toBe(true)
+  })
+})
diff --git a/components/frontend/src/lib/utils/imageUrl.ts b/components/frontend/src/lib/utils/imageUrl.ts
new file mode 100644
index 00000000..22b8f4cc
--- /dev/null
+++ b/components/frontend/src/lib/utils/imageUrl.ts
@@ -0,0 +1,148 @@
+// Nobody can upload a picture: `Project.image` and `Hackathon.logo` are single
+// string columns, and there is no file storage behind them. So every image on
+// the platform is a URL somebody typed, and the commonest thing they type is a
+// *share* link — the page their cloud drive showed them after pressing Share.
+//
+// A share link serves HTML, not bytes. Dropped into an `<img>` it fails, and
+// the only sign of it is a broken-image glyph on the page the picture was meant
+// for, long after the form was submitted. These helpers move that discovery back
+// into the form: `adviseImageUrl` names the mistake before the save, and
+// `usableImage` keeps the failure from ever reaching a reader.
+
+import { isHttpUrl } from "./url"
+
+export interface ImageUrlAdvice {
+  /**
+   * Why this address will not load as an image, in our words — absent when
+   * nothing is known to be wrong with it. Knowing nothing is not the same as
+   * approval: only the preview can actually tell whether a URL serves an image.
+   */
+  problem?: string
+  /**
+   * The same picture as bytes, when it can be derived from what was typed.
+   * Offered as a one-press correction, never applied silently — the address in
+   * the field should stay the one the person put there until they say so.
+   */
+  direct?: string
+}
+
+/** Whether `host` is `domain` itself or a subdomain of it. */
+function isHost(host: string, domain: string): boolean {
+  return host === domain || host.endsWith(`.${domain}`)
+}
+
+/**
+ * What is wrong with `value` as an image address, as far as can be told without
+ * fetching it.
+ *
+ * Only reports what is *certain*: every case below is a URL whose server is
+ * known to answer with a web page. A URL that passes still has to prove itself
+ * by loading — see `ImageUrlField`, where this advice explains a failure the
+ * preview has already demonstrated.
+ */
+export function adviseImageUrl(value: string): ImageUrlAdvice {
+  const trimmed = value.trim()
+  if (trimmed === "") return {}
+
+  if (!isHttpUrl(trimmed)) {
+    return {
+      problem: "This is not a web address — it has to start with https://",
+    }
+  }
+
+  const url = new URL(trimmed)
+  const host = url.hostname.toLowerCase()
+  const path = url.pathname
+
+  // GitHub's `blob` URL is the file *viewer*. The same path under
+  // raw.githubusercontent.com is the file, which is a documented, stable
+  // rewrite — hence the only two corrections offered here are this and Dropbox.
+  if (isHost(host, "github.com")) {
+    const blob = path.match(/^\/([^/]+)\/([^/]+)\/blob\/(.+)$/)
+    if (blob) {
+      return {
+        problem:
+          "A GitHub file page shows the picture inside GitHub's own page.",
+        direct: `https://raw.githubusercontent.com/${blob[1]}/${blob[2]}/${blob[3]}`,
+      }
+    }
+  }
+
+  if (isHost(host, "dropbox.com")) {
+    // `?dl=0` is the preview page and `?dl=1` forces a download; `raw=1` is the
+    // file served inline, which is the one an `<img>` can use.
+    if (url.searchParams.get("raw") !== "1") {
+      const direct = new URL(trimmed)
+      direct.searchParams.delete("dl")
+      direct.searchParams.set("raw", "1")
+      return {
+        problem: "A Dropbox share link opens Dropbox's preview page.",
+        direct: direct.toString(),
+      }
+    }
+    return {}
+  }
+
+  // No correction for the rest. Google Drive's old `uc?export=view` trick is
+  // rate-limited and increasingly refused, and the others have no documented
+  // direct form at all — offering a rewrite that works today and breaks next
+  // month is worse than saying plainly that this kind of link cannot be used.
+  if (isHost(host, "drive.google.com") || isHost(host, "docs.google.com")) {
+    return {
+      problem:
+        "A Google Drive share link opens Drive, and Drive will not serve the " +
+        "file to another site. Put the picture somewhere it is published on its own.",
+    }
+  }
+  if (isHost(host, "photos.google.com") || isHost(host, "photos.app.goo.gl")) {
+    return {
+      problem:
+        "A Google Photos link opens the Photos viewer, not the picture itself.",
+    }
+  }
+  if (
+    isHost(host, "onedrive.live.com") ||
+    isHost(host, "1drv.ms") ||
+    isHost(host, "sharepoint.com")
+  ) {
+    return {
+      problem: "A OneDrive or SharePoint share link opens their viewer page.",
+    }
+  }
+  // i.imgur.com is the image host; imgur.com itself serves album and gallery
+  // pages, and a bare post page too.
+  if (isHost(host, "imgur.com") && host !== "i.imgur.com") {
+    return {
+      problem:
+        "This is an Imgur page rather than the image file on i.imgur.com.",
+    }
+  }
+  if (isHost(host, "flickr.com") && path.startsWith("/photos/")) {
+    return { problem: "A Flickr photo page is a web page, not the image file." }
+  }
+  if (isHost(host, "unsplash.com") && path.startsWith("/photos/")) {
+    return {
+      problem:
+        "An Unsplash photo page is a web page — the Download button gives the image address.",
+    }
+  }
+
+  return {}
+}
+
+/**
+ * Whether `src` should be put in front of a reader.
+ *
+ * `failedSrc` is the address whose `<img>` last raised `error`, recorded by the
+ * component drawing it. Comparing against it — rather than keeping a boolean —
+ * is what lets a corrected address be tried afresh: a component reused down a
+ * list of rows, or re-rendered after an edit, must not stay failed because some
+ * earlier URL was.
+ *
+ * Every surface showing a stored image address goes through this, because the
+ * alternative is the browser's broken-image glyph, which reads as a bug in the
+ * app rather than as a bad link somebody typed.
+ */
+export function usableImage(src?: string, failedSrc?: string): boolean {
+  return src !== undefined && src !== "" && failedSrc !== src
+}
diff --git a/components/frontend/src/routes/(app)/hackathons/create/+page.svelte b/components/frontend/src/routes/(app)/hackathons/create/+page.svelte
index bf088500..d01b1810 100644
--- a/components/frontend/src/routes/(app)/hackathons/create/+page.svelte
+++ b/components/frontend/src/routes/(app)/hackathons/create/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { resolve } from '$app/paths';
+    import ImageUrlField from '$lib/components/forms/ImageUrlField.svelte';
     import MarkdownEditor from '$lib/components/forms/MarkdownEditor.svelte';
     import type { ActionData } from './$types';
 
@@ -68,10 +69,7 @@
                 <input type="date" name="endsAt" class="field" />
             </label>
 
-            <label class="field-label sm:col-span-2">
-                Logo URL (optional)
-                <input type="url" name="logo" placeholder="https://…" class="field" />
-            </label>
+            <ImageUrlField name="logo" label="Logo URL (optional)" class="sm:col-span-2" />
         </div>
 
         <!-- Last and full width: the only field with no natural size, and the one
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.server.ts b/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.server.ts
index bf169409..e5a97192 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.server.ts
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.server.ts
@@ -15,5 +15,9 @@ export const load: PageServerLoad = async (event) => {
   return {
     name: hackathon.name,
     description: hackathon.description,
+    // The same address the overview's hero draws. Carried here because About is
+    // the one member page whose subject *is* the hackathon — everywhere else the
+    // picture would be decoration above someone's real errand.
+    logo: hackathon.logo,
   }
 }
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.svelte b/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.svelte
index 35bee41c..f4e98506 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.svelte
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/about/+page.svelte
@@ -1,11 +1,30 @@
 <script lang="ts">
     import MarkdownContent from '$lib/components/forms/MarkdownContent.svelte';
+    import StoredImage from '$lib/components/hackathon/StoredImage.svelte';
     import type { PageData } from './$types';
 
     let { data }: { data: PageData } = $props();
 </script>
 
+<!--
+  The hackathon's picture is shown here and, among the member pages, only here.
+  The layout draws its hero on /overview alone (see `showHero`), deliberately:
+  repeating the hackathon's identity above Participants or Teams pushes someone's
+  actual errand down the screen. About is the exception that rule was always
+  going to need — it is the one member page whose subject *is* the hackathon.
+
+  Drawn by `StoredImage`, which is also what the public page and the
+  organiser's preview of it use. An organiser pastes one URL and sees one
+  picture, whatever shape it turned out to be.
+
+  Capped at max-w-3xl to share the description's measure below it, so the two
+  line up on one left edge rather than the picture overhanging the prose.
+-->
 <div class="flex flex-col gap-6 px-4 py-6 sm:px-10 md:px-20">
+    <!-- Decorative: the hackathon's name is the very next element, so alt text
+         here would have a screen reader say it twice. -->
+    <StoredImage src={data.logo} maxHeight="max-h-64" class="max-w-3xl" />
+
     <h1 class="text-title">About {data.name}</h1>
 
     {#if data.description}
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/+page.svelte b/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/+page.svelte
index d41bb8e5..f41d477d 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/+page.svelte
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
-    import { ArrowRight, Pencil, Plus } from 'lucide-svelte';
+    import { ArrowRight, Plus } from 'lucide-svelte';
     import { resolve } from '$app/paths';
     import CapabilitiesPanel from '$lib/components/hackathon/CapabilitiesPanel.svelte';
     import { manageNav } from '$lib/navigation/items';
-    import { canEditHackathon } from '$lib/utils/hackathonRole';
     import { isPrivate } from '$lib/utils/hackathonStatus';
     import { formatPhaseRange } from '$lib/utils/phase';
     import type { ActionData, PageData } from './$types';
@@ -16,7 +15,6 @@
     // owner-or-admin: `hackathon:write` also wants the owner confirmed, so a
     // waitlisted owner reaches this page and would land on a 403 in the form.
     // The backend decides either way; this only decides whether to offer it.
-    const mayEdit = $derived(canEditHackathon(data.myMembership ?? undefined, data.isGlobalAdmin));
 
     // The other organiser destinations, minus this page. Read from `manageNav`
     // rather than listed again here, so an entry added to the sidebar reaches
@@ -102,10 +100,10 @@
 -->
 <div class="flex flex-col gap-6 px-4 py-8 sm:px-10 md:px-20">
     <!-- Editing the hackathon's own record — name, dates, visibility, logo,
-         description — rides in the heading rather than among the tiles below:
-         those lead to the things *inside* a hackathon, this one changes the
-         hackathon itself, which is what this page is named after. Outline, not
-         solid: advancing the phase below is this view's one solid action. -->
+         description — is Manage Public Page in the sidebar, not a control up
+         here. It stopped being one the moment it grew a preview: a pencil beside
+         a heading reads as a correction to that heading, and this is a page an
+         organiser goes back to. -->
     <div class="flex flex-wrap items-start justify-between gap-3">
         <div class="flex min-w-0 flex-col gap-1">
             <h2 class="m-0 text-title text-ink">Settings</h2>
@@ -114,15 +112,6 @@
                 projects are grouped.
             </span>
         </div>
-        {#if mayEdit}
-            <a
-                href={resolve(`/my/hackathon/${data.hackathonId}/manage/edit`)}
-                class="btn btn-sm btn-outline no-underline"
-            >
-                <Pencil class="h-3 w-3 shrink-0" aria-hidden="true" />
-                Edit details
-            </a>
-        {/if}
     </div>
 
     <!-- The phase marker. Its own box above the switches, because the two are
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/edit/+page.svelte b/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/edit/+page.svelte
index 5f68ba2b..8536120e 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/edit/+page.svelte
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/manage/edit/+page.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
     import { resolve } from '$app/paths';
+    import ImageUrlField from '$lib/components/forms/ImageUrlField.svelte';
     import MarkdownEditor from '$lib/components/forms/MarkdownEditor.svelte';
+    import PublicHackathonView from '$lib/components/hackathon/PublicHackathonView.svelte';
     import type { ActionData, PageData } from './$types';
 
     let { data, form }: { data: PageData; form: ActionData } = $props();
@@ -16,129 +18,184 @@
         return new Date(date.getTime() - offset * 60_000).toISOString().slice(0, 10);
     }
 
+    // Built as a local date rather than through `new Date('2026-10-24')`, which
+    // parses as UTC midnight and can render as the day before in a western
+    // timezone. The preview would then show a date the form does not.
+    function fromDateInputValue(v: string): Date | undefined {
+        const m = v.match(/^(\d{4})-(\d{2})-(\d{2})$/);
+        if (!m) return undefined;
+        return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+    }
+
     // TODO(backend: hackathon-edit-clear-dates): once a hackathon has dates,
     // emptying both fields is silently ignored rather than clearing them — see
     // the matching TODO in +page.server.ts. Naming the limitation here beats
     // letting someone clear the fields and believe it worked.
     const hasDates = $derived(Boolean(hackathon.startsAt || hackathon.endsAt));
 
-    const FIELD_CLASS =
-        'h-9 w-full rounded-none border border-surface-200-800 bg-surface-50-950 px-3 text-xs ' +
-        'text-surface-950-50 placeholder:text-surface-700-300 focus:border-primary-500 ' +
-        'focus:outline-none';
-    const LABEL_CLASS = 'flex flex-col gap-1 text-xs font-semibold text-surface-500';
+    // Every field the public page reads, held here so the preview beside the
+    // form can be driven by what is typed rather than by what was last saved.
+    // The inputs keep their `name` attributes and the form still posts normally
+    // — this is a second reader of the same controls, not a replacement for
+    // them.
+    let draft = $state({
+        name: hackathon.name,
+        visibility: hackathon.visibility === PRIVATE ? 'private' : 'public',
+        startsAt: toDateInputValue(hackathon.startsAt),
+        endsAt: toDateInputValue(hackathon.endsAt),
+        logo: hackathon.logo ?? '',
+        description: hackathon.description ?? '',
+    });
+
+    const isPublic = $derived(draft.visibility === 'public');
 </script>
 
+<!--
+  The organiser's view of their own public page: the fields on the left, and on
+  the right the page itself, rendered from what is currently typed.
+
+  The preview is `PublicHackathonView` — the same component the public route
+  renders, not a mock-up of it. That is the point of the screen. A picture whose
+  shape nobody can predict from the URL they pasted is exactly the thing a
+  hand-built preview gets wrong, and it would get it wrong quietly.
+
+  Side by side from xl up, where there is room for both; stacked below it. The
+  preview is `inert`, so nothing in it can be clicked from here — a working Join
+  button would enrol the organiser in their own hackathon.
+-->
 <div class="flex w-full flex-col gap-6 px-4 py-8 sm:px-10 md:px-20">
     <div class="flex flex-col gap-1">
         <!-- Back where the form is reached from, which is Settings —
              /overview is the member's page and offers no way in here. -->
         <a
             href={resolve(`/my/hackathon/${hackathon.id}/manage`)}
-            class="w-fit text-xs font-semibold text-primary-700-300 no-underline hover:underline"
+            class="w-fit text-xs font-semibold text-accent-ink no-underline hover:underline"
         >
             &larr; Back to Settings
         </a>
-        <h1 class="m-0 text-lg font-bold text-surface-950-50">Edit Hackathon</h1>
+        <h1 class="m-0 text-title text-ink">Public page</h1>
+        <p class="m-0 text-xs text-ink-3">
+            The name, dates, picture and description everyone sees — visitors on the
+            hackathon's public page, and members on About.
+        </p>
     </div>
 
-    <!-- Server-side validation only: every rule here is one the action repeats,
-         and the action is what the backend actually sees. -->
-    <form method="POST" action="?/edit" class="flex w-full flex-col gap-6">
-        {#if form?.message}
-            <p class="m-0 text-xs text-error-500" role="alert">{form.message}</p>
-        {/if}
-
-        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-            <label class="{LABEL_CLASS} sm:col-span-2">
-                Name
-                <input
-                    type="text"
-                    name="name"
-                    required
-                    minlength="3"
-                    maxlength="255"
-                    value={hackathon.name}
-                    class={FIELD_CLASS}
-                />
-            </label>
+    <div class="grid gap-8 xl:grid-cols-[minmax(0,24rem)_minmax(0,1fr)] xl:items-start">
+        <!-- Server-side validation only: every rule here is one the action repeats,
+             and the action is what the backend actually sees. -->
+        <form method="POST" action="?/edit" class="flex w-full flex-col gap-6">
+            {#if form?.message}
+                <p class="m-0 text-xs text-danger-ink" role="alert">{form.message}</p>
+            {/if}
 
-            <fieldset class="m-0 flex flex-col gap-1 border-0 p-0 sm:col-span-2">
-                <legend class="mb-1 p-0 text-xs font-semibold text-surface-500">Visibility</legend>
-                <label class="flex items-center gap-2 text-xs text-surface-950-50">
+            <div class="grid gap-4 sm:grid-cols-2">
+                <label class="field-label sm:col-span-2">
+                    Name
                     <input
-                        type="radio"
-                        name="visibility"
-                        value="public"
-                        checked={hackathon.visibility !== PRIVATE}
+                        type="text"
+                        name="name"
+                        required
+                        minlength="3"
+                        maxlength="255"
+                        bind:value={draft.name}
+                        class="field"
                     />
-                    Public — anyone can see it and ask to join
                 </label>
-                <label class="flex items-center gap-2 text-xs text-surface-950-50">
-                    <input
-                        type="radio"
-                        name="visibility"
-                        value="private"
-                        checked={hackathon.visibility === PRIVATE}
-                    />
-                    Private — only people you give access to
+
+                <fieldset class="m-0 flex flex-col gap-1 border-0 p-0 sm:col-span-2">
+                    <legend class="mb-1 p-0 text-xs font-semibold text-ink-3">Visibility</legend>
+                    <label class="flex items-center gap-2 text-xs text-ink">
+                        <input
+                            type="radio"
+                            name="visibility"
+                            value="public"
+                            bind:group={draft.visibility}
+                        />
+                        Public — anyone can see it and ask to join
+                    </label>
+                    <label class="flex items-center gap-2 text-xs text-ink">
+                        <input
+                            type="radio"
+                            name="visibility"
+                            value="private"
+                            bind:group={draft.visibility}
+                        />
+                        Private — only people you give access to
+                    </label>
+                </fieldset>
+
+                <label class="field-label">
+                    Starts at (optional)
+                    <input type="date" name="startsAt" bind:value={draft.startsAt} class="field" />
                 </label>
-            </fieldset>
-
-            <label class={LABEL_CLASS}>
-                Starts at (optional)
-                <input
-                    type="date"
-                    name="startsAt"
-                    value={toDateInputValue(hackathon.startsAt)}
-                    class={FIELD_CLASS}
-                />
-            </label>
-
-            <label class={LABEL_CLASS}>
-                Ends at (optional)
-                <input
-                    type="date"
-                    name="endsAt"
-                    value={toDateInputValue(hackathon.endsAt)}
-                    class={FIELD_CLASS}
-                />
-            </label>
 
-            {#if hasDates}
-                <p class="m-0 text-xs text-surface-500 sm:col-span-2">
-                    Dates can be changed but not removed.
-                </p>
-            {/if}
+                <label class="field-label">
+                    Ends at (optional)
+                    <input type="date" name="endsAt" bind:value={draft.endsAt} class="field" />
+                </label>
+
+                {#if hasDates}
+                    <p class="m-0 text-xs text-ink-3 sm:col-span-2">
+                        Dates can be changed but not removed.
+                    </p>
+                {/if}
 
-            <label class="{LABEL_CLASS} sm:col-span-2">
-                Logo URL (optional)
-                <input
-                    type="url"
+                <ImageUrlField
                     name="logo"
-                    placeholder="https://…"
-                    value={hackathon.logo ?? ''}
-                    class={FIELD_CLASS}
+                    label="Logo URL (optional)"
+                    bind:value={draft.logo}
+                    class="sm:col-span-2"
                 />
-            </label>
-        </div>
+            </div>
 
-        <!-- Last and full width: the only field with no natural size, and the one
-             where the room is worth having for the source and its preview both. -->
-        <div class="{LABEL_CLASS} w-full">
-            <label for="hackathon-description">Description (optional)</label>
-            <MarkdownEditor
-                id="hackathon-description"
-                name="description"
-                value={hackathon.description ?? ''}
-                rows={16}
-                maxlength={10000}
-                placeholder="What is this hackathon about?"
-            />
-        </div>
+            <!-- Last and full width: the only field with no natural size, and the one
+                 where the room is worth having for the source and its preview both. -->
+            <div class="field-label w-full">
+                <label for="hackathon-description">Description (optional)</label>
+                <MarkdownEditor
+                    id="hackathon-description"
+                    name="description"
+                    bind:value={draft.description}
+                    rows={12}
+                    maxlength={10000}
+                    placeholder="What is this hackathon about?"
+                />
+            </div>
 
-        <button type="submit" class="btn btn-sm preset-filled-primary-500 self-start">
-            Save changes
-        </button>
-    </form>
+            <button type="submit" class="btn btn-sm btn-solid self-start">Save changes</button>
+        </form>
+
+        <div class="flex min-w-0 flex-col gap-2 xl:sticky xl:top-6">
+            <!-- No link out to the live page: this *is* the live page, drawn by
+                 the component the public route renders. A link beside it would
+                 offer a second look at what is already on the screen. -->
+            <h2 class="m-0 text-section text-ink">What visitors see</h2>
+
+            <!-- Said here rather than left to be discovered: everything below is
+                 drawn exactly as a visitor would see it, and for a private
+                 hackathon no visitor can reach it at all. -->
+            <p class="m-0 text-xs text-ink-3">
+                {#if isPublic}
+                    Updates as you type. Nothing here is saved until you press Save
+                    changes.
+                {:else}
+                    This hackathon is private, so nobody can reach this page yet — it
+                    is how it would look once you make it public.
+                {/if}
+            </p>
+
+            <div class="card overflow-hidden">
+                <PublicHackathonView
+                    id={hackathon.id}
+                    name={draft.name}
+                    description={draft.description}
+                    logo={draft.logo}
+                    startsAt={fromDateInputValue(draft.startsAt)}
+                    endsAt={fromDateInputValue(draft.endsAt)}
+                    status={hackathon.status}
+                    preview
+                />
+            </div>
+        </div>
+    </div>
 </div>
diff --git a/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/propose/+page.svelte b/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/propose/+page.svelte
index 92669945..856342f0 100644
--- a/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/propose/+page.svelte
+++ b/components/frontend/src/routes/(app)/my/hackathon/[id]/projects/propose/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { resolve } from '$app/paths';
+    import ImageUrlField from '$lib/components/forms/ImageUrlField.svelte';
     import MarkdownEditor from '$lib/components/forms/MarkdownEditor.svelte';
     import type { ActionData, PageData } from './$types';
 
@@ -63,13 +64,11 @@
                     </label>
                 {/if}
 
-                <label class="field-label {data.tracks.length > 0 ? '' : 'sm:col-span-2'}">
-                    Image URL (optional)
-                    <input type="url" name="image" placeholder="https://…" class="field" />
-                    <span class="font-normal text-ink-3">
-                        A link to the image file itself — a share or page link will not render.
-                    </span>
-                </label>
+                <ImageUrlField
+                    name="image"
+                    label="Project image URL (optional)"
+                    class={data.tracks.length > 0 ? '' : 'sm:col-span-2'}
+                />
             </div>
 
             <!-- Last and full width: the only field with no natural size, and the one
diff --git a/components/frontend/src/routes/(public)/+page.svelte b/components/frontend/src/routes/(public)/+page.svelte
index c0bfe748..13985bdb 100644
--- a/components/frontend/src/routes/(public)/+page.svelte
+++ b/components/frontend/src/routes/(public)/+page.svelte
@@ -49,20 +49,6 @@
             ),
     );
 
-    // See DashboardView for why these are token-derived rather than palette steps.
-    const GRADIENTS = [
-        { from: 'var(--color-accent)', to: 'color-mix(in oklab, var(--color-accent) 35%, black)' },
-        { from: 'var(--color-info)', to: 'color-mix(in oklab, var(--color-info) 35%, black)' },
-        {
-            from: 'var(--color-success)',
-            to: 'color-mix(in oklab, var(--color-success) 35%, black)',
-        },
-    ];
-
-    function gradient(i: number) {
-        return GRADIENTS[i % GRADIENTS.length]!;
-    }
-
 </script>
 
 <!-- Hero (full-bleed width) -->
@@ -70,12 +56,15 @@
     class="relative flex min-h-[30rem] flex-col items-center justify-center gap-6 overflow-hidden
            px-4 pt-8 pb-12 text-center sm:px-10 md:px-20"
 >
+    <!-- Image opacity and scrim multiply out to ~25% of the picture (18% dark),
+         matching HeroSection — see the arithmetic there. Change the two
+         together. -->
     <img
         src="/images/hackathon-ord-2024/ambiance/ambiance_1.webp"
         alt=""
-        class="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-40 dark:opacity-25"
+        class="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-55 dark:opacity-40"
     />
-    <div class="pointer-events-none absolute inset-0 bg-canvas/65"></div>
+    <div class="pointer-events-none absolute inset-0 bg-canvas/55"></div>
 
     <div class="relative z-10 flex flex-col items-center gap-6">
         <h1 class="max-w-2xl text-5xl font-bold leading-tight">
@@ -154,15 +143,14 @@
 
 {#snippet rows(items: Hackathon[])}
     <div class="mt-6 divide-y divide-line">
-        {#each items as h, i (h.id)}
+        {#each items as h (h.id)}
             <HackathonRow
                 href="/hackathon/{h.id}"
                 name={h.name}
+                imageUrl={h.logo}
                 meta={formatDateRange(h)}
                 badge={statusLabel(h.status)}
                 badgeVariant={statusBadgeVariant(h.status)}
-                gradFrom={gradient(i).from}
-                gradTo={gradient(i).to}
             />
         {/each}
     </div>
diff --git a/components/frontend/src/routes/(public)/hackathon/[id]/+page.server.ts b/components/frontend/src/routes/(public)/hackathon/[id]/+page.server.ts
index 157816bc..a656247c 100644
--- a/components/frontend/src/routes/(public)/hackathon/[id]/+page.server.ts
+++ b/components/frontend/src/routes/(public)/hackathon/[id]/+page.server.ts
@@ -102,6 +102,7 @@ export const load: PageServerLoad = async (event) => {
       id: hackathon.id,
       name: hackathon.name,
       description: hackathon.description ?? "",
+      logo: hackathon.logo,
       startsAt: hackathon.startsAt,
       endsAt: hackathon.endsAt,
       status: hackathon.status,
diff --git a/components/frontend/src/routes/(public)/hackathon/[id]/+page.svelte b/components/frontend/src/routes/(public)/hackathon/[id]/+page.svelte
index 4f1c28ba..2a114b06 100644
--- a/components/frontend/src/routes/(public)/hackathon/[id]/+page.svelte
+++ b/components/frontend/src/routes/(public)/hackathon/[id]/+page.svelte
@@ -1,9 +1,5 @@
 <script lang="ts">
-    import HeroSection from '$lib/components/hackathon/HeroSection.svelte';
-    import JoinCta from '$lib/components/hackathon/JoinCta.svelte';
-    import MarkdownContent from '$lib/components/forms/MarkdownContent.svelte';
-    import { formatDateRange } from '$lib/utils/hackathonDates';
-    import { statusLabel } from '$lib/utils/hackathonStatus';
+    import PublicHackathonView from '$lib/components/hackathon/PublicHackathonView.svelte';
     import type { PageData } from './$types';
 
     let { data }: { data: PageData } = $props();
@@ -11,41 +7,15 @@
     const hackathon = $derived(data.hackathon);
 </script>
 
-<HeroSection
-    title={hackathon.name}
-    dates={formatDateRange(hackathon)}
-    status={statusLabel(hackathon.status)}
-    breadcrumbs={[
-        { label: 'Hackathons', href: '/' },
-        { label: hackathon.name, href: `/hackathon/${hackathon.id}` },
-    ]}
+<!-- The page itself is the component, so the organiser's preview of it cannot
+     be showing something else. See PublicHackathonView. -->
+<PublicHackathonView
+    id={hackathon.id}
+    name={hackathon.name}
+    description={hackathon.description}
+    logo={hackathon.logo}
+    startsAt={hackathon.startsAt}
+    endsAt={hackathon.endsAt}
+    status={hackathon.status}
+    signedIn={data.signedIn}
 />
-
-<div class="mx-auto w-full max-w-7xl">
-    <section class="px-4 py-12 sm:px-10 md:px-20">
-        {#if hackathon.description}
-            <!-- The organizer's own markdown, through the same component the
-                 editor previews with, so what they wrote is what shows. -->
-            <div class="max-w-3xl">
-                <MarkdownContent content={hackathon.description} />
-            </div>
-        {:else}
-            <!-- Said plainly rather than filled with something inviting: this
-                 page has one job, and an empty description means the organizer
-                 has not done it yet. -->
-            <p class="text-sm text-ink-3">
-                The organizers have not written a description for this hackathon yet.
-            </p>
-        {/if}
-    </section>
-
-    <!-- The way in, at the foot of the page: everything above is what the
-         hackathon is, and this is what to do about it. One `btn-solid` on the
-         page, which is the theme's rule — the hero above carries no action. -->
-    <JoinCta
-        hackathonId={hackathon.id}
-        name={hackathon.name}
-        status={hackathon.status}
-        signedIn={data.signedIn}
-    />
-</div>