diff --git a/frontend/src/components/invite/InvitePage.tsx b/frontend/src/components/invite/InvitePage.tsx
index f046f93..51561f9 100644
--- a/frontend/src/components/invite/InvitePage.tsx
+++ b/frontend/src/components/invite/InvitePage.tsx
@@ -166,16 +166,16 @@ export default function InvitePage({
     const isValid = invite?.valid && !invite.used;
     return (
       <div className="h-screen w-screen flex items-center justify-center bg-gradient-to-b from-navy-950 via-navy-900 to-navy-900">
-        <div className="w-[85%] bg-white dark:bg-warm-800 rounded-2xl border border-warm-200 dark:border-warm-700 shadow-xl overflow-hidden">
-          <div className="bg-gradient-to-br from-navy-950 to-teal-900 px-12 py-14 text-center">
-            <h2 className="text-4xl font-bold text-white mb-4">
+        <div className="w-[90%] bg-white dark:bg-warm-800 rounded-3xl border border-warm-200 dark:border-warm-700 shadow-xl overflow-hidden">
+          <div className="bg-gradient-to-br from-navy-950 to-teal-900 px-20 py-16 text-center">
+            <h2 className="text-[144px] leading-tight font-bold text-white mb-6">
               {isValid
                 ? isAdminInvite
                   ? "You\u2019re invited!"
                   : 'Special offer!'
                 : 'Perfect Postcode'}
             </h2>
-            <p className="text-warm-300 text-lg">
+            <p className="text-warm-300 text-6xl leading-snug">
               {isValid && invite.invited_by
                 ? isAdminInvite
                   ? `${invite.invited_by} has invited you to get free lifetime access.`
@@ -187,19 +187,19 @@ export default function InvitePage({
                   : 'Explore every neighbourhood in England'}
             </p>
           </div>
-          <div className="px-12 py-10 text-center">
+          <div className="px-20 py-14 text-center">
             {isValid && !isAdminInvite && pricePence !== null && pricePence > 0 && (
-              <div className="mb-6">
-                <span className="text-warm-400 dark:text-warm-500 line-through text-2xl mr-3">
+              <div className="mb-8">
+                <span className="text-warm-400 dark:text-warm-500 line-through text-8xl mr-6">
                   {`\u00A3${pricePence / 100}`}
                 </span>
-                <span className="text-5xl font-extrabold text-teal-600 dark:text-teal-400">
+                <span className="text-[192px] leading-none font-extrabold text-teal-600 dark:text-teal-400">
                   {`\u00A3${(Math.round(pricePence * 0.7) / 100).toFixed(2)}`}
                 </span>
-                <span className="text-warm-500 dark:text-warm-400 ml-2 text-xl">/once</span>
+                <span className="text-warm-500 dark:text-warm-400 ml-4 text-6xl">/once</span>
               </div>
             )}
-            <p className="text-warm-600 dark:text-warm-400 text-lg">
+            <p className="text-warm-600 dark:text-warm-400 text-6xl">
               Property prices, energy ratings, crime stats, school ratings &amp; more
             </p>
           </div>
diff --git a/frontend/src/components/map/Map.tsx b/frontend/src/components/map/Map.tsx
index 9eccc9a..46e7885 100644
--- a/frontend/src/components/map/Map.tsx
+++ b/frontend/src/components/map/Map.tsx
@@ -18,6 +18,7 @@ import { INITIAL_VIEW_STATE, MAP_MIN_ZOOM, MAP_BOUNDS, POI_GROUP_COLORS, POI_DEF
 import LocationSearch, { type SearchedLocation } from './LocationSearch';
 import MapLegend from './MapLegend';
 import HoverCard from './HoverCard';
+import { LogoIcon } from '../ui/icons/LogoIcon';
 import type { FeatureFilters } from '../../types';
 import { useDeckLayers } from '../../hooks/useDeckLayers';
 import { MODE_LABELS, type TravelTimeEntry } from '../../hooks/useTravelTime';
@@ -207,13 +208,50 @@ export default memo(function Map({
       </MapGL>
       {screenshotMode ? (
         ogMode ? (
-          <div className="absolute inset-0 flex items-center justify-center z-20 pointer-events-none">
-            <h1
-              className="text-5xl font-bold text-white drop-shadow-lg"
-              style={{ textShadow: '0 2px 8px rgba(0,0,0,0.6)' }}
-            >
-              Your perfect postcode
-            </h1>
+          <div className="absolute inset-0 z-20 pointer-events-none flex flex-col">
+            {/* Center: Logo card with hero text */}
+            <div className="flex-1 flex items-center justify-center">
+              <div className="flex items-center gap-8 bg-navy-900/90 rounded-3xl px-14 py-10">
+                <LogoIcon className="w-24 h-24 text-teal-400" />
+                <span
+                  className="font-bold text-white"
+                  style={{ fontSize: '5.5rem', letterSpacing: '-0.03em' }}
+                >
+                  Your perfect postcode
+                </span>
+              </div>
+            </div>
+
+            {/* Bottom bar */}
+            <div className="absolute bottom-0 left-0 right-0 flex items-center justify-between px-10 py-4 bg-white">
+              <div className="flex items-center gap-6">
+                <span className="text-warm-500 font-medium" style={{ fontSize: '0.95rem' }}>
+                  Property prices
+                </span>
+                <span className="text-warm-300">|</span>
+                <span className="text-warm-500 font-medium" style={{ fontSize: '0.95rem' }}>
+                  Energy ratings
+                </span>
+                <span className="text-warm-300">|</span>
+                <span className="text-warm-500 font-medium" style={{ fontSize: '0.95rem' }}>
+                  Schools
+                </span>
+                <span className="text-warm-300">|</span>
+                <span className="text-warm-500 font-medium" style={{ fontSize: '0.95rem' }}>
+                  Crime stats
+                </span>
+                <span className="text-warm-300">|</span>
+                <span className="text-warm-500 font-medium" style={{ fontSize: '0.95rem' }}>
+                  Transport
+                </span>
+              </div>
+              <span
+                className="text-teal-600 font-semibold"
+                style={{ fontSize: '1rem' }}
+              >
+                perfect-postcode.co.uk
+              </span>
+            </div>
           </div>
         ) : null
       ) : (
diff --git a/frontend/src/lib/consts.ts b/frontend/src/lib/consts.ts
index 13ac998..74701cf 100644
--- a/frontend/src/lib/consts.ts
+++ b/frontend/src/lib/consts.ts
@@ -19,7 +19,7 @@ export const FREE_ZONE_BOUNDS = { south: 51.44, west: -0.31, north: 51.59, east:
 export const INITIAL_VIEW_STATE: ViewState = {
   longitude: (FREE_ZONE_BOUNDS.west + FREE_ZONE_BOUNDS.east) / 2,
   latitude: (FREE_ZONE_BOUNDS.south + FREE_ZONE_BOUNDS.north) / 2,
-  zoom: 14.5,
+  zoom: 14,
   pitch: 0,
 };
 
@@ -35,7 +35,7 @@ export const ZOOM_TO_RESOLUTION_THRESHOLDS = [
   { maxZoom: 13, resolution: 9 },
 ] as const;
 
-export const POSTCODE_ZOOM_THRESHOLD = 14.5;
+export const POSTCODE_ZOOM_THRESHOLD = 15;
 
 export const FEATURE_GRADIENT: { t: number; color: [number, number, number] }[] = [
   { t: 0, color: [46, 204, 113] },