diff --git a/src/assets/profile.png b/src/assets/profile.png
new file mode 100644
index 0000000..b577a04
Binary files /dev/null and b/src/assets/profile.png differ
diff --git a/src/lib/timeline/detail/EditForm.svelte b/src/lib/timeline/detail/EditForm.svelte
index 6b68705..65591dd 100644
--- a/src/lib/timeline/detail/EditForm.svelte
+++ b/src/lib/timeline/detail/EditForm.svelte
@@ -5,6 +5,12 @@
   import { getCitiesForCountry, ALL_CITIES } from '../../shared/cities.js';
   import SearchInput from '../../shared/SearchInput.svelte';
   import PhotoEditor from './PhotoEditor.svelte';
+  import airplaneImg from '../../../assets/airplane.png';
+  import trainImg    from '../../../assets/train.png';
+  import busImg      from '../../../assets/bus.png';
+  import carImg      from '../../../assets/car.png';
+  import shipImg     from '../../../assets/ship.png';
+  import walkImg     from '../../../assets/walk.png';
 
   /**
    * entry = null  →  "new entry" mode
@@ -25,6 +31,8 @@
   let memo       = $state(entry?.memo ?? '');
   let transport  = $state(entry?.transport ?? '');
 
+  let step = $state(1); // 1 | 2 | 3
+
   let errors = $state({
     country: '', cities: '', date: '', days: '', tripType: '', transport: ''
   });
@@ -34,12 +42,12 @@
   }
 
   const transportOptions = [
-    { value: 'flight', label: '✈ Flight' },
-    { value: 'train',  label: '🚂 Train'  },
-    { value: 'bus',    label: '🚌 Bus'    },
-    { value: 'car',    label: '🚗 Car'    },
-    { value: 'ship',   label: '🚢 Ship'   },
-    { value: 'walk',   label: '🚶 Walk'   },
+    { value: 'flight', label: 'Flight', img: airplaneImg },
+    { value: 'train',  label: 'Train',  img: trainImg    },
+    { value: 'bus',    label: 'Bus',    img: busImg      },
+    { value: 'car',    label: 'Car',    img: carImg      },
+    { value: 'ship',   label: 'Ship',   img: shipImg     },
+    { value: 'walk',   label: 'Walk',   img: walkImg     },
   ];
 
   const MEMO_MAX = 100;
@@ -50,7 +58,6 @@
     const raw = e.currentTarget.value;
     const words = raw.trim() === '' ? [] : raw.trim().split(/\s+/);
     if (words.length > MEMO_MAX) {
-      // keep first 100 words, preserve trailing space if user is mid-word
       memo = words.slice(0, MEMO_MAX).join(' ');
       e.currentTarget.value = memo;
     } else {
@@ -58,7 +65,6 @@
     }
   }
 
-  // Suggest cities — when a country is selected show only cities from that country.
   let allEntries = $derived(getEntries());
   let cityOptions = $derived(
     country.trim()
@@ -78,17 +84,27 @@
     cities = cities.filter(x => x !== c);
   }
 
-  async function save() {
-    clearErrors();
-    let hasError = false;
-    if (!country.trim())           { errors.country   = 'Country is required.';          hasError = true; }
-    if (cities.length === 0)       { errors.cities    = 'Add at least one city.';        hasError = true; }
-    if (!date)                     { errors.date      = 'Date is required.';             hasError = true; }
-    if (!days || Number(days) < 1) { errors.days      = 'Enter a valid number of days.'; hasError = true; }
-    if (!tripType)                 { errors.tripType  = 'Select a trip type.';           hasError = true; }
-    if (!transport)                { errors.transport = 'Select how you got there.';     hasError = true; }
-    if (hasError) return;
+  function nextStep() {
+    if (step === 1) {
+      clearErrors();
+      let hasError = false;
+      if (!country.trim())           { errors.country   = 'Country is required.';          hasError = true; }
+      if (cities.length === 0)       { errors.cities    = 'Add at least one city.';        hasError = true; }
+      if (!date)                     { errors.date      = 'Date is required.';             hasError = true; }
+      if (!days || Number(days) < 1) { errors.days      = 'Enter a valid number of days.'; hasError = true; }
+      if (!tripType)                 { errors.tripType  = 'Select a trip type.';           hasError = true; }
+      if (!transport)                { errors.transport = 'Select how you got there.';     hasError = true; }
+      if (hasError) return;
+    }
+    step++;
+  }
 
+  function prevStep() {
+    if (step === 1) onBack();
+    else step--;
+  }
+
+  async function save() {
     try {
       if (isNew) {
         await addEntry({
@@ -119,149 +135,162 @@
   }
 </script>
 
-<div class="edit-layout">
+<div class="layout">
 
-  <header class="edit-topbar">
+  <header class="topbar">
     <div class="topbar-left">
-      <button class="topbar-btn" onclick={onBack}>
-        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
-          <path d="M19 12H5M12 5l-7 7 7 7"/>
-        </svg>
-        Back
+      <button class="ghost-btn" onclick={prevStep}>
+        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M19 12H5M12 5l-7 7 7 7"/></svg>
+        {step === 1 ? 'Back' : 'Previous'}
       </button>
     </div>
-    <span class="topbar-title">{isNew ? 'New trip' : 'Edit'}</span>
+
+    <div class="steps">
+      {#each [1,2,3] as s}
+        <div class="step-dot" class:active={step === s} class:done={step > s}></div>
+      {/each}
+    </div>
+
     <div class="topbar-right">
-      <button class="topbar-btn topbar-btn--save" onclick={save}>Save changes</button>
+      {#if step < 3}
+        <button class="save-btn" onclick={nextStep}>Next</button>
+      {:else}
+        <button class="save-btn" onclick={save}>Save changes</button>
+      {/if}
     </div>
   </header>
 
-  <div class="edit-scroll">
-    <form class="form" onsubmit={(e) => { e.preventDefault(); save(); }}>
+  <div class="scroll">
+    <div class="form">
 
-      <div class="row">
-        <div class="field">
-          <label class="label" for="edit-country">Country <span class="req">*</span></label>
-          <SearchInput id="edit-country" bind:value={country} options={countryNames} required />
-          {#if errors.country}<span class="field-error">{errors.country}</span>{/if}
-        </div>
-        <div class="field">
-          <label class="label" for="edit-city">Cities <span class="req">*</span></label>
-          <div class="city-input-row">
-            <SearchInput id="edit-city" bind:value={cityInput} options={cityOptions} onselect={addCity} />
+      {#if step === 1}
+        <h1 class="page-headline">
+          {isNew ? 'Journal your trip!' : 'Edit your trip'}
+        </h1>
+
+        <div class="row">
+          <div class="field">
+            <label class="label" for="edit-country">Which <span class="kw">country</span> did you visit? <span class="req">*</span></label>
+            <SearchInput id="edit-country" bind:value={country} options={countryNames} required />
+            {#if errors.country}<span class="ferr">{errors.country}</span>{/if}
+          </div>
+          <div class="field">
+            <label class="label" for="edit-city">Which <span class="kw">cities</span> did you visit? <span class="req">*</span></label>
+            <SearchInput id="edit-city" bind:value={cityInput} options={cityOptions} onselect={addCity} />
+            {#if errors.cities}<span class="ferr">{errors.cities}</span>{/if}
+            {#if cities.length > 0}
+              <div class="tags">
+                {#each cities as c}
+                  <span class="tag">{c}<button type="button" class="tag-rm" onclick={() => removeCity(c)}>×</button></span>
+                {/each}
+              </div>
+            {/if}
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="field">
+            <label class="label" for="edit-date">When did you <span class="kw">arrive</span>? <span class="req">*</span></label>
+            <input id="edit-date" class="input" type="date" bind:value={date} required />
+            {#if errors.date}<span class="ferr">{errors.date}</span>{/if}
+          </div>
+          <div class="field">
+            <label class="label" for="edit-days">How many <span class="kw">days</span> did you stay? <span class="req">*</span></label>
+            <input id="edit-days" class="input" type="number" min="1" bind:value={days} required />
+            {#if errors.days}<span class="ferr">{errors.days}</span>{/if}
           </div>
-          {#if errors.cities}<span class="field-error">{errors.cities}</span>{/if}
-          {#if cities.length > 0}
-            <div class="city-tags">
-              {#each cities as c}
-                <span class="city-tag">
-                  {c}
-                  <button type="button" class="city-tag-remove" onclick={() => removeCity(c)}>×</button>
-                </span>
-              {/each}
-            </div>
-          {/if}
         </div>
-      </div>
 
-      <div class="row">
         <div class="field">
-          <label class="label" for="edit-date">Date <span class="req">*</span></label>
-          <input id="edit-date" class="input" type="date" bind:value={date} required />
-          {#if errors.date}<span class="field-error">{errors.date}</span>{/if}
+          <label class="label"><span class="kw">Who</span> did you go <span class="kw">with</span>? <span class="req">*</span></label>
+          <div class="toggle-row">
+            {#each ['solo','friends','family'] as t}
+              <label class="toggle-opt" class:active={tripType === t}>
+                <input type="radio" name="edit-tripType" value={t} bind:group={tripType} />
+                {t === 'solo' ? '🧑 Solo' : t === 'friends' ? '👥 With friends' : '👨‍👩‍👧‍👦 With family'}
+              </label>
+            {/each}
+          </div>
+          {#if errors.tripType}<span class="ferr">{errors.tripType}</span>{/if}
         </div>
+
         <div class="field">
-          <label class="label" for="edit-days">Days <span class="req">*</span></label>
-          <input id="edit-days" class="input" type="number" min="1" bind:value={days} required />
-          {#if errors.days}<span class="field-error">{errors.days}</span>{/if}
+          <label class="label">How did you <span class="kw">get</span> there? <span class="req">*</span></label>
+          <div class="transport-grid">
+            {#each transportOptions as opt}
+              <label class="toggle-opt transport-opt" class:active={transport === opt.value}>
+                <input type="radio" name="edit-transport" value={opt.value} bind:group={transport} />
+                <img src={opt.img} alt={opt.label} class="transport-img" />
+                {opt.label}
+              </label>
+            {/each}
+          </div>
+          {#if errors.transport}<span class="ferr">{errors.transport}</span>{/if}
         </div>
-      </div>
 
-      <div class="field">
-        <label class="label">Trip type</label>
-        <div class="toggle-row">
-          <label class="toggle-opt" class:active={tripType === 'solo'}>
-            <input type="radio" name="tripType" value="solo" bind:group={tripType} /> Solo
-          </label>
-          <label class="toggle-opt" class:active={tripType === 'friends'}>
-            <input type="radio" name="tripType" value="friends" bind:group={tripType} /> With friends
-          </label>
-          <label class="toggle-opt" class:active={tripType === 'family'}>
-            <input type="radio" name="tripType" value="family" bind:group={tripType} /> With family
-          </label>
+      {:else if step === 2}
+        <h2 class="step-title">Photos</h2>
+        <p class="step-sub">Optional — add or update photos from your trip</p>
+        <PhotoEditor {photos} onchange={(p) => (photos = p)} />
+
+      {:else}
+        <h2 class="step-title">How was it?</h2>
+        <p class="step-sub">Optional — write a note about your trip</p>
+        <div class="field">
+          <div class="label-row">
+            <label class="label" for="edit-memo">Your notes</label>
+            <span class="char-count" class:over={memoOverLimit}>{wordCount} / {MEMO_MAX} words</span>
+          </div>
+          <textarea id="edit-memo" class="input textarea" class:input-over={memoOverLimit} rows="8" value={memo} oninput={onMemoInput}></textarea>
         </div>
-        {#if errors.tripType}<span class="field-error">{errors.tripType}</span>{/if}
-      </div>
+      {/if}
 
-      <div class="field">
-        <label class="label">How did you get there?</label>
-        <div class="transport-grid">
-          {#each transportOptions as opt}
-            <label class="transport-opt" class:active={transport === opt.value}>
-              <input type="radio" name="transport" value={opt.value} bind:group={transport} />
-              {opt.label}
-            </label>
-          {/each}
-        </div>
-        {#if errors.transport}<span class="field-error">{errors.transport}</span>{/if}
-      </div>
-
-      <PhotoEditor {photos} onchange={(p) => (photos = p)} />
-
-      <div class="field">
-        <div class="label-row">
-          <label class="label" for="edit-memo">How was it?</label>
-          <span class="char-count" class:over={memoOverLimit}>{wordCount} / {MEMO_MAX} words</span>
-        </div>
-        <textarea id="edit-memo" class="input textarea" class:input-over={memoOverLimit} rows="4" value={memo} oninput={onMemoInput}></textarea>
-      </div>
-
-
-    </form>
+    </div>
   </div>
 </div>
 
 <style>
-  .field-error {
-    font-size: 11px;
-    color: #dc2626;
-    margin-top: 2px;
-  }
-
-  .edit-layout {
+  .layout {
     display: flex;
     flex-direction: column;
     height: 100%;
-    overflow: hidden;
     background: var(--bg);
+    font-family: var(--sans);
   }
 
-  .edit-topbar {
+  .topbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 20px;
-    height: 60px;
+    height: 52px;
     flex-shrink: 0;
     border-bottom: 1px solid var(--border);
     background: var(--bg);
   }
-
   .topbar-left, .topbar-right {
     display: flex;
     align-items: center;
-    gap: 4px;
-    min-width: 120px;
+    min-width: 110px;
   }
   .topbar-right { justify-content: flex-end; }
 
-  .topbar-title {
-    font-size: 16px;
-    font-weight: 500;
-    color: var(--text-h);
+  .steps {
+    display: flex;
+    gap: 8px;
+    align-items: center;
   }
+  .step-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--border);
+    transition: background 0.2s, transform 0.2s;
+  }
+  .step-dot.active { background: var(--accent); transform: scale(1.25); }
+  .step-dot.done   { background: var(--accent); opacity: 0.35; }
 
-  .topbar-btn {
+  .ghost-btn {
     display: inline-flex;
     align-items: center;
     gap: 6px;
@@ -275,50 +304,59 @@
     padding: 8px 14px;
     cursor: pointer;
     transition: background 0.15s, color 0.15s, border-color 0.15s;
+  }
+  .ghost-btn:hover { background: var(--bg-subtle); border-color: var(--border); color: var(--text-h); }
+
+  .save-btn {
+    font-family: var(--sans);
+    font-size: 15px;
+    font-weight: 400;
+    color: #fff;
+    background: var(--accent);
+    border: 1px solid var(--accent);
+    border-radius: 10px;
+    padding: 8px 18px;
+    cursor: pointer;
+    transition: background 0.15s;
     white-space: nowrap;
   }
-  .topbar-btn:hover {
-    background: var(--bg-subtle);
-    border-color: var(--border);
-    color: var(--text-h);
-  }
-  .topbar-btn--save {
-    background: var(--accent);
-    color: #fff;
-    border-color: var(--accent);
-  }
-  .topbar-btn--save:hover {
-    background: var(--accent-dark);
-    border-color: var(--accent-dark);
-    color: #fff;
-  }
+  .save-btn:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
 
-  .edit-scroll {
-    flex: 1;
-    overflow-y: auto;
-  }
+  .scroll { flex: 1; overflow-y: auto; }
 
   .form {
-    display: flex;
-    flex-direction: column;
-    gap: 18px;
     max-width: 560px;
     margin: 0 auto;
     padding: 36px 48px 80px;
-  }
-
-  .row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 14px;
-  }
-
-  .field {
     display: flex;
     flex-direction: column;
-    gap: 6px;
+    gap: 18px;
   }
 
+  .page-headline {
+    font-size: 28px;
+    font-weight: 500;
+    color: var(--text-h);
+    letter-spacing: -0.5px;
+    margin: 0 0 4px;
+  }
+  .step-title {
+    font-size: 20px;
+    font-weight: 400;
+    color: var(--text-h);
+    letter-spacing: -0.3px;
+    margin: 0 0 2px;
+  }
+  .step-sub {
+    font-size: 13px;
+    font-weight: 300;
+    color: var(--text-sub);
+    margin: -10px 0 4px;
+  }
+
+  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+  .field { display: flex; flex-direction: column; gap: 6px; }
+
   .label-row {
     display: flex;
     align-items: baseline;
@@ -330,23 +368,16 @@
     font-weight: 400;
     letter-spacing: 0.08em;
     text-transform: uppercase;
-    color: var(--text-sub);
+    color: var(--text-h);
   }
+  .req { color: var(--accent); font-size: 11px; }
+  .kw  { color: var(--accent); }
+  .ferr { font-size: 13px; font-weight: 500; color: #dc2626; }
 
-  .char-count {
-    font-size: 11px;
-    font-weight: 300;
-    color: var(--text-sub);
-    transition: color 0.15s;
-  }
+  .char-count { font-size: 11px; font-weight: 300; color: var(--text-sub); transition: color 0.15s; }
   .char-count.over { color: #dc2626; }
   .input-over { border-color: #fca5a5; }
 
-  .req {
-    color: var(--accent);
-    font-size: 11px;
-  }
-
   .input {
     font-family: var(--sans);
     font-size: 14px;
@@ -359,101 +390,40 @@
     outline: none;
     transition: border-color 0.15s;
     width: 100%;
+    box-sizing: border-box;
   }
   .input:focus { border-color: var(--accent-border); }
 
-  .textarea {
-    resize: vertical;
-    line-height: 1.6;
-  }
-
-  .toggle-row {
-    display: flex;
-    gap: 8px;
-  }
+  .textarea { resize: vertical; line-height: 1.6; }
 
+  .toggle-row { display: flex; gap: 10px; flex-wrap: wrap; }
   .toggle-opt {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    font-size: 13px;
-    font-weight: 300;
-    color: var(--text);
-    padding: 7px 14px;
-    border-radius: 8px;
+    display: flex; align-items: center; justify-content: center; gap: 8px;
+    font-size: 14px; font-weight: 400; color: var(--text);
+    padding: 12px 14px; border-radius: 10px;
     border: 1px solid var(--border);
-    cursor: pointer;
-    transition: border-color 0.15s, background 0.15s, color 0.15s;
-    background: var(--bg-subtle);
-  }
-  .toggle-opt input { display: none; }
-  .toggle-opt.active {
-    border-color: var(--accent-border);
-    background: var(--accent-bg);
-    color: var(--accent);
-  }
-
-  .transport-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 8px;
-  }
-  .transport-opt {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    font-size: 13px;
-    font-weight: 300;
-    color: var(--text);
-    padding: 8px 10px;
-    border-radius: 8px;
-    border: 1px solid var(--border);
-    cursor: pointer;
-    transition: border-color 0.15s, background 0.15s, color 0.15s;
+    cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
     background: var(--bg-subtle);
     white-space: nowrap;
   }
-  .transport-opt input { display: none; }
-  .transport-opt.active {
-    border-color: var(--accent-border);
-    background: var(--accent-bg);
-    color: var(--accent);
-  }
+  .toggle-opt input { display: none; }
+  .toggle-opt.active { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
+  .toggle-opt.active img { filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(1169%) hue-rotate(239deg) brightness(80%) contrast(92%); }
 
-  .city-input-row {
-    display: flex;
-  }
+  .transport-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
+  .transport-opt { flex-direction: column; gap: 6px; padding: 16px 10px; }
+  .transport-img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
 
-  .city-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-    margin-top: 4px;
+  .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
+  .tag {
+    display: inline-flex; align-items: center; gap: 4px;
+    font-size: 12px; font-weight: 300; color: var(--accent);
+    background: var(--accent-bg); border: 1px solid var(--accent-border);
+    border-radius: 20px; padding: 3px 10px 3px 12px;
   }
-  .city-tag {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    font-size: 12px;
-    font-weight: 300;
-    color: var(--accent);
-    background: var(--accent-bg);
-    border: 1px solid var(--accent-border);
-    border-radius: 20px;
-    padding: 3px 10px 3px 12px;
+  .tag-rm {
+    background: none; border: none; color: var(--accent);
+    font-size: 15px; line-height: 1; cursor: pointer; padding: 0; opacity: 0.6;
   }
-  .city-tag-remove {
-    background: none;
-    border: none;
-    color: var(--accent);
-    font-size: 15px;
-    line-height: 1;
-    cursor: pointer;
-    padding: 0;
-    opacity: 0.6;
-    transition: opacity 0.15s;
-  }
-  .city-tag-remove:hover { opacity: 1; }
-
+  .tag-rm:hover { opacity: 1; }
 </style>
diff --git a/src/lib/timeline/view/ShareCard.svelte b/src/lib/timeline/view/ShareCard.svelte
index 985c2ce..958566a 100644
--- a/src/lib/timeline/view/ShareCard.svelte
+++ b/src/lib/timeline/view/ShareCard.svelte
@@ -1,5 +1,7 @@
 <script>
   import { toPng } from 'html-to-image';
+  import { getTotalCount } from '../../layout/selection.svelte.js';
+  import profileImg from '../../../assets/profile.png';
 
   /** @type {{ entries: import('../shared/types.js').JournalEntry[], onClose: () => void }} */
   let { entries, onClose } = $props();
@@ -85,11 +87,59 @@
     };
   });
 
+  async function getFontDataUrl() {
+    // Get the actual woff2 URL the browser resolved for Bricolage Grotesque
+    for (const font of document.fonts) {
+      if (font.family.includes('Bricolage')) {
+        // font.status === 'loaded' means the browser has it
+        await font.load();
+      }
+    }
+    // Fetch the Google Fonts CSS to extract the real woff2 URL
+    const cssRes = await fetch(
+      'https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500&display=swap',
+      { headers: { 'User-Agent': 'Mozilla/5.0' } }
+    );
+    const css = await cssRes.text();
+    const match = css.match(/url\((https:\/\/fonts\.gstatic\.com[^)]+\.woff2)\)/);
+    if (!match) return null;
+    const fontRes = await fetch(match[1]);
+    const blob = await fontRes.blob();
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result);
+      reader.readAsDataURL(blob);
+    });
+  }
+
   async function download() {
     if (!cardEl) return;
     downloading = true;
     try {
-      const dataUrl = await toPng(cardEl, { pixelRatio: 3 });
+      await document.fonts.ready;
+
+      let fontFaceRule = '';
+      try {
+        const fontData = await getFontDataUrl();
+        if (fontData) {
+          fontFaceRule = `@font-face { font-family: 'Bricolage Grotesque'; src: url('${fontData}') format('woff2'); font-weight: 100 900; font-style: normal; }`;
+        }
+      } catch {}
+
+      // Inject font as a real <style> inside the card so html-to-image clones it
+      let injected = null;
+      if (fontFaceRule) {
+        injected = document.createElement('style');
+        injected.textContent = fontFaceRule;
+        cardEl.prepend(injected);
+      }
+
+      const opts = { pixelRatio: 3 };
+      await toPng(cardEl, opts); // first pass loads resources
+      const dataUrl = await toPng(cardEl, opts);
+
+      if (injected) injected.remove();
+
       const a = document.createElement('a');
       a.download = 'my-journey.png';
       a.href = dataUrl;
@@ -135,35 +185,22 @@
 
         <!-- Header -->
         <div class="card-header">
-          <span class="card-brand">MAP JOURNAL</span>
+          <span class="card-brand">JOURNI</span>
           <span class="card-year">{fmtYear(stats.yearStart, stats.yearEnd)}</span>
         </div>
 
+        <!-- Profile -->
+        <div class="profile-wrap">
+          <img class="profile-img" src={profileImg} alt="profile" />
+        </div>
+
         <!-- Hero stat -->
         <div class="hero">
-          <p class="hero-num">{stats.totalDays}</p>
-          <p class="hero-label">days of travel</p>
+          <p class="hero-pre">You've colored</p>
+          <p class="big-num">{getTotalCount() > 0 ? Math.round((stats.countries.length / getTotalCount()) * 100) : 0}%</p>
+          <p class="hero-post">of the world map.</p>
         </div>
 
-        <!-- Stat grid -->
-        <div class="stat-grid">
-          <div class="stat-box">
-            <p class="stat-num">{stats.countries.length}</p>
-            <p class="stat-desc">countries</p>
-          </div>
-          <div class="stat-box">
-            <p class="stat-num">{stats.cities.length}</p>
-            <p class="stat-desc">cities</p>
-          </div>
-          <div class="stat-box">
-            <p class="stat-num">{stats.flightHrs}h</p>
-            <p class="stat-desc">in the air</p>
-          </div>
-          <div class="stat-box">
-            <p class="stat-num">{Object.keys(stats.contDays).length}</p>
-            <p class="stat-desc">continents</p>
-          </div>
-        </div>
 
         <!-- Fun facts -->
         <div class="facts">
@@ -197,29 +234,10 @@
           </div>
         </div>
 
-        <!-- Continent bar -->
-        {#if Object.keys(stats.contDays).length > 0}
-          <div class="cont-section">
-            <div class="cont-bar">
-              {#each Object.entries(stats.contDays).sort((a,b)=>b[1]-a[1]) as [cont, days]}
-                <div class="cont-seg" style="flex:{days}; background: var(--cont-{cont.replace('. ','').toLowerCase().replace(' ','-')}, #818cf8)"
-                  title="{cont}: {days}d"></div>
-              {/each}
-            </div>
-            <div class="cont-legend">
-              {#each Object.entries(stats.contDays).sort((a,b)=>b[1]-a[1]) as [cont, days]}
-                <span class="cont-item">
-                  <span class="cont-dot" style="background: var(--cont-{cont.replace('. ','').toLowerCase().replace(' ','-')}, #818cf8)"></span>
-                  {cont} {days}d
-                </span>
-              {/each}
-            </div>
-          </div>
-        {/if}
 
         <!-- Footer -->
         <div class="card-footer">
-          <span>mapjournal.app</span>
+          <span>journi</span>
         </div>
 
       </div>
@@ -352,25 +370,41 @@
     letter-spacing: 0.06em;
   }
 
+  /* Profile */
+  .profile-wrap {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 16px;
+  }
+  .profile-img {
+    width: 192px;
+    height: 192px;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+
   /* Hero */
   .hero {
     position: relative;
     z-index: 1;
     margin-bottom: 28px;
   }
-  .hero-num {
-    font-size: 88px;
-    font-weight: 400;
-    line-height: 1;
-    letter-spacing: -4px;
-    color: #fff;
-  }
-  .hero-label {
+  .hero-pre, .hero-post {
     font-size: 16px;
     font-weight: 300;
-    color: #a5b4fc;
+    color: rgba(255,255,255,0.6);
     letter-spacing: 0.04em;
-    margin-top: 4px;
+    margin: 0;
+  }
+  .big-num {
+    font-size: 88px;
+    font-weight: 500;
+    color: #fff;
+    letter-spacing: -4px;
+    line-height: 1;
+    margin: 8px 0;
   }
 
   /* Stat grid */
@@ -388,6 +422,10 @@
     border-radius: 10px;
     padding: 10px 8px;
     text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
   }
   .stat-num {
     font-size: 22px;
diff --git a/src/lib/world-map/JourneyView.svelte b/src/lib/world-map/JourneyView.svelte
index 51949a2..56ba5ef 100644
--- a/src/lib/world-map/JourneyView.svelte
+++ b/src/lib/world-map/JourneyView.svelte
@@ -322,6 +322,7 @@
     if (!isCancelled && myId === animId) {
       isFinished = true; isPlaying = false;
       if (onprogress) onprogress({ index: trips.length, total: trips.length, label: 'Journey complete!' });
+      setTimeout(() => close(), 2500);
     } else if (myId === animId) { isPlaying = false; }
   }
 
diff --git a/src/lib/world-map/WorldMap.svelte b/src/lib/world-map/WorldMap.svelte
index 9e9ff1c..855954b 100644
--- a/src/lib/world-map/WorldMap.svelte
+++ b/src/lib/world-map/WorldMap.svelte
@@ -5,7 +5,6 @@
   import worldData from 'world-atlas/countries-50m.json';
   import { getSelected, setTotalCount, getFlashing } from '../layout/selection.svelte.js';
   import { getUserProfile } from '../auth/userStore.svelte.js';
-  import homeIconUrl from '../../assets/home.png';
   import { nameToId } from '../shared/countries.js';
   import crayonCursorUrl from '../../assets/logo-cursor.png';
 
@@ -82,29 +81,6 @@
   let _pathFn = null;
   let _countries = null;
 
-  function updateHomeMarker(homeCountryName) {
-    if (!_g || !_pathFn || !_countries) return;
-    _g.selectAll('.home-marker').remove();
-    if (!homeCountryName) return;
-    const found = _countries.find(f => f.properties.name === homeCountryName);
-    if (!found) return;
-    const [cx, cy] = _pathFn.centroid(found);
-    if (isNaN(cx) || isNaN(cy)) return;
-    const SIZE = 18;
-    _g.append('image')
-      .attr('class', 'home-marker')
-      .attr('href', homeIconUrl)
-      .attr('x', cx - SIZE / 2)
-      .attr('y', cy - SIZE / 2)
-      .attr('width', SIZE)
-      .attr('height', SIZE)
-      .style('pointer-events', 'none');
-  }
-
-  $effect(() => {
-    const homeCountry = getUserProfile()?.homeCountry ?? null;
-    updateHomeMarker(homeCountry);
-  });
 
   function fitProjection(proj, w, h) {
     proj.fitSize([w, h], { type: 'Sphere' });
@@ -231,7 +207,6 @@
     }
 
     renderMicrostates();
-    updateHomeMarker(getUserProfile()?.homeCountry ?? null);
 
     const zoom = d3.zoom()
       .scaleExtent([1, 32])
@@ -257,7 +232,6 @@
         countryPaths.attr('d', path);
         updateFill(countryPaths);
         renderMicrostates();
-        updateHomeMarker(getUserProfile()?.homeCountry ?? null);
       }
     });