diff --git a/_includes/layouts/where.njk b/_includes/layouts/where.njk
new file mode 100644
index 0000000..bb67132
--- /dev/null
+++ b/_includes/layouts/where.njk
@@ -0,0 +1,134 @@
+---
+layout: layouts/base.njk
+withSidebar: true
+---
+{% set checkins = whereCheckins.checkins or [] %}
+
+<div class="where-page">
+  <header class="mb-6 sm:mb-8">
+    <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">{{ title or "Where" }}</h1>
+    <p class="text-surface-600 dark:text-surface-400">
+      Recent check-ins from Swarm via OwnYourSwarm, rendered from check-in metadata.
+    </p>
+    {% if content %}
+    <div class="prose prose-surface dark:prose-invert max-w-none mt-3">
+      {{ content | safe }}
+    </div>
+    {% endif %}
+    {% if whereCheckins.available %}
+    <p class="text-xs text-surface-600 dark:text-surface-400 mt-2">
+      Loaded {{ whereCheckins.stats.total }} check-ins{% if whereCheckins.stats.withCoordinates %} ({{ whereCheckins.stats.withCoordinates }} with coordinates){% endif %}.
+    </p>
+    {% endif %}
+  </header>
+
+  {% if checkins.length %}
+  <section class="space-y-4" aria-label="Recent check-ins">
+    {% for checkin in checkins %}
+    <article class="p-4 sm:p-5 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
+      <div class="flex items-start gap-3 sm:gap-4">
+        <div class="w-10 h-10 rounded-full bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center flex-shrink-0 mt-0.5">
+          <svg class="w-5 h-5 text-emerald-700 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"/>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+          </svg>
+        </div>
+
+        <div class="flex-1 min-w-0">
+          <h2 class="text-lg sm:text-xl font-semibold text-surface-900 dark:text-surface-100">
+            {% if checkin.venueUrl %}
+            <a href="{{ checkin.venueUrl }}" class="hover:text-emerald-600 dark:hover:text-emerald-400" target="_blank" rel="noopener">{{ checkin.name }}</a>
+            {% else %}
+            {{ checkin.name }}
+            {% endif %}
+          </h2>
+
+          {% if checkin.locationText or checkin.postalCode %}
+          <p class="text-sm text-surface-600 dark:text-surface-400 mt-1">
+            {{ checkin.locationText }}{% if checkin.locationText and checkin.postalCode %}, {% endif %}{{ checkin.postalCode }}
+          </p>
+          {% endif %}
+
+          <div class="text-xs text-surface-600 dark:text-surface-400 mt-2 flex flex-wrap items-center gap-2">
+            {% if checkin.published %}
+            <time class="font-mono" datetime="{{ checkin.published }}">{{ checkin.published | date("MMM d, yyyy") }}</time>
+            {% endif %}
+            {% if checkin.coordinatesText %}
+            <span class="px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-700">{{ checkin.coordinatesText }}</span>
+            {% endif %}
+            {% if checkin.isPrivate %}
+            <span class="px-2 py-0.5 rounded-full bg-amber-100 dark:bg-amber-900/40 text-amber-800 dark:text-amber-300">Private</span>
+            {% endif %}
+            {% if checkin.checkedInBy and (checkin.checkedInBy.name or checkin.checkedInBy.url) %}
+            <span class="px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-700">
+              Checked in by {% if checkin.checkedInBy.url %}<a href="{{ checkin.checkedInBy.url }}" class="hover:text-emerald-600 dark:hover:text-emerald-400" target="_blank" rel="noopener">{{ checkin.checkedInBy.name or checkin.checkedInBy.url }}</a>{% else %}{{ checkin.checkedInBy.name }}{% endif %}
+            </span>
+            {% endif %}
+          </div>
+
+          {% if checkin.tags and checkin.tags.length %}
+          <div class="mt-3 flex flex-wrap gap-2 text-xs">
+            {% for tag in checkin.tags | head(8) %}
+            <span class="inline-flex items-center px-2.5 py-1 rounded-full bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300">#{{ tag }}</span>
+            {% endfor %}
+          </div>
+          {% endif %}
+
+          {% if checkin.taggedPeople and checkin.taggedPeople.length %}
+          <div class="mt-2 flex flex-wrap gap-2 text-xs">
+            {% for person in checkin.taggedPeople | head(6) %}
+            {% if person.url %}
+            <a href="{{ person.url }}" class="inline-flex items-center px-2.5 py-1 rounded-full bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-600" target="_blank" rel="noopener">{{ person.name or person.url }}</a>
+            {% else %}
+            <span class="inline-flex items-center px-2.5 py-1 rounded-full bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300">{{ person.name }}</span>
+            {% endif %}
+            {% endfor %}
+          </div>
+          {% endif %}
+
+          <div class="mt-3 flex flex-wrap gap-2 text-xs">
+            {% if checkin.syndication %}
+            <a href="{{ checkin.syndication }}" class="inline-flex items-center px-2.5 py-1 rounded-full bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-600" target="_blank" rel="noopener">Swarm</a>
+            {% endif %}
+            {% if checkin.mapUrl %}
+            <a href="{{ checkin.mapUrl }}" class="inline-flex items-center px-2.5 py-1 rounded-full bg-emerald-100/70 dark:bg-emerald-900/30 text-emerald-800 dark:text-emerald-300 hover:bg-emerald-200/70 dark:hover:bg-emerald-900/50" target="_blank" rel="noopener">Map</a>
+            {% endif %}
+            {% if checkin.venueWebsiteUrl %}
+            <a href="{{ checkin.venueWebsiteUrl }}" class="inline-flex items-center px-2.5 py-1 rounded-full bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-600" target="_blank" rel="noopener">Website</a>
+            {% endif %}
+            {% if checkin.venueSocialUrl %}
+            <a href="{{ checkin.venueSocialUrl }}" class="inline-flex items-center px-2.5 py-1 rounded-full bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-600" target="_blank" rel="noopener">Social</a>
+            {% endif %}
+          </div>
+
+          {% if checkin.photos and checkin.photos.length %}
+          <div class="mt-3 flex flex-wrap gap-2">
+            {% for photo in checkin.photos | head(3) %}
+            <a href="{{ photo }}" target="_blank" rel="noopener" class="block">
+              <img src="{{ photo }}" alt="Check-in photo" class="w-16 h-16 sm:w-20 sm:h-20 rounded-lg object-cover border border-surface-200 dark:border-surface-700" loading="lazy" eleventy:ignore>
+            </a>
+            {% endfor %}
+          </div>
+          {% endif %}
+        </div>
+      </div>
+    </article>
+    {% endfor %}
+  </section>
+  {% else %}
+  <section class="p-4 sm:p-5 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm" aria-live="polite">
+    <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">No check-ins available yet</h2>
+    <p class="text-sm text-surface-600 dark:text-surface-400 mb-2">
+      This page expects an endpoint that returns MF2 JSON h-entry checkins with properties like <code>published</code>, <code>checkin</code>, <code>location</code>, <code>category</code>, and <code>checked-in-by</code>.
+    </p>
+    {% if whereCheckins.feedUrl %}
+    <p class="text-sm text-surface-600 dark:text-surface-400 mb-2">
+      Current feed URL: <code>{{ whereCheckins.feedUrl }}</code>
+    </p>
+    {% endif %}
+    <p class="text-sm text-surface-600 dark:text-surface-400">
+      Configure <code>OWNYOURSWARM_FEED_URL</code> (and optionally <code>OWNYOURSWARM_FEED_TOKEN</code>) in your environment or deploy secrets.
+    </p>
+  </section>
+  {% endif %}
+</div>
\ No newline at end of file
diff --git a/content/pages/where.md b/content/pages/where.md
index 4f68117..5218a0f 100644
--- a/content/pages/where.md
+++ b/content/pages/where.md
@@ -1,4 +1,5 @@
 ---
+layout: layouts/where.njk
 date: 2026-03-08T13:55:46.901Z
 title: where
 category:
diff --git a/where.njk b/theme/_includes/layouts/where.njk
similarity index 97%
rename from where.njk
rename to theme/_includes/layouts/where.njk
index 1bf9c6d..4a49680 100644
--- a/where.njk
+++ b/theme/_includes/layouts/where.njk
@@ -1,17 +1,20 @@
 ---
 layout: layouts/base.njk
-title: Where
-permalink: /where/
 withSidebar: true
 ---
 {% set checkins = whereCheckins.checkins or [] %}
 
 <div class="where-page">
   <header class="mb-6 sm:mb-8">
-    <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">Where</h1>
+    <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">{{ title or "Where" }}</h1>
     <p class="text-surface-600 dark:text-surface-400">
       Recent check-ins from Swarm via OwnYourSwarm, rendered from check-in metadata.
     </p>
+    {% if content %}
+    <div class="prose prose-surface dark:prose-invert max-w-none mt-3">
+      {{ content | safe }}
+    </div>
+    {% endif %}
     {% if whereCheckins.available %}
     <p class="text-xs text-surface-600 dark:text-surface-400 mt-2">
       Loaded {{ whereCheckins.stats.total }} check-ins{% if whereCheckins.stats.withCoordinates %} ({{ whereCheckins.stats.withCoordinates }} with coordinates){% endif %}.