diff --git a/client/src/App.tsx b/client/src/App.tsx
index 922cfb1..cf31d54 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,87 +1,12 @@
-import { useState } from 'react'
 import './App.css'
-import { FeaturedPlace } from './components/FeaturedPlace'
-import { PlaceList } from './components/PlaceList'
-import { SiteHeader } from './components/SiteHeader'
-import { useNow } from './hooks/useNow'
-import { PAGE_SIZE, usePlaces } from './hooks/usePlaces'
-import type { Place } from './types/place'
+import { useRoute } from './hooks/useRoute'
+import { HomePage } from './pages/HomePage'
+import { MapPage } from './pages/MapPage'
 
 function App() {
-  const now = useNow()
-  const {
-    places,
-    totalCount,
-    status,
-    hasMore,
-    canShowLess,
-    loadMore,
-    showLess,
-  } = usePlaces()
+  const route = useRoute()
 
-  // Trekkes én gang per sidelasting, slik at det fremhevede stedet er tilfeldig.
-  const [startFraction] = useState(Math.random)
-  // Lagrer hele stedet, så det blir stående selv om «Vis mindre» fjerner det
-  // fra listen.
-  const [selected, setSelected] = useState<Place | null>(null)
-
-  const featured: Place | undefined =
-    selected ??
-    places[Math.floor(startFraction * Math.min(places.length, PAGE_SIZE))]
-
-  /** Blar til forrige (-1) eller neste (1) sted, og starter om i endene. */
-  const step = (direction: -1 | 1) => {
-    if (!featured) return
-    const index = places.findIndex((place) => place.id === featured.id)
-
-    // Er stedet skjult av «Vis mindre», starter vi i enden av listen.
-    const next =
-      index === -1
-        ? direction === 1
-          ? 0
-          : places.length - 1
-        : (index + direction + places.length) % places.length
-
-    setSelected(places[next])
-  }
-
-  return (
-    <>
-      <SiteHeader />
-      <main className="page">
-        {status === 'loading' && <p role="status">Laster steder …</p>}
-        {status === 'error' && (
-          <p role="alert">
-            Kunne ikke hente steder. Prøv å laste siden på nytt.
-          </p>
-        )}
-
-        {featured && (
-          <>
-            <FeaturedPlace
-              place={featured}
-              now={now}
-              onPrevious={() => step(-1)}
-              onNext={() => step(1)}
-            />
-            <PlaceList
-              places={places}
-              now={now}
-              featuredId={featured.id}
-              loadedCount={places.length}
-              totalCount={totalCount}
-              hasMore={hasMore}
-              canShowLess={canShowLess}
-              isLoadingMore={status === 'loadingMore'}
-              onSelect={setSelected}
-              onLoadMore={loadMore}
-              onShowLess={showLess}
-            />
-          </>
-        )}
-      </main>
-    </>
-  )
+  return route === 'map' ? <MapPage /> : <HomePage />
 }
 
 export default App
diff --git a/client/src/components/HelpButton.tsx b/client/src/components/HelpButton.tsx
new file mode 100644
index 0000000..8602e03
--- /dev/null
+++ b/client/src/components/HelpButton.tsx
@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react'
+
+type HelpButtonProps = {
+  id: string
+  title: string
+  children: ReactNode
+}
+
+/** «?»-knappen øverst til høyre, som åpner en forklaring i en tekstboble. */
+export function HelpButton({ id, title, children }: HelpButtonProps) {
+  return (
+    <>
+      <button
+        type="button"
+        className="icon-button help-button"
+        popoverTarget={id}
+        aria-label="Om nettsiden"
+      >
+        <span aria-hidden="true">?</span>
+      </button>
+
+      {/* Åpnes og lukkes av nettleserens innebygde popover-støtte. */}
+      <aside
+        id={id}
+        className="help-popover"
+        popover="auto"
+        aria-labelledby={`${id}-title`}
+      >
+        <h2 id={`${id}-title`}>{title}</h2>
+        <p>{children}</p>
+      </aside>
+    </>
+  )
+}
diff --git a/client/src/components/MainNav.tsx b/client/src/components/MainNav.tsx
index 5194486..5db9044 100644
--- a/client/src/components/MainNav.tsx
+++ b/client/src/components/MainNav.tsx
@@ -20,9 +20,15 @@ function Icon({ children }: { children: ReactNode }) {
 }
 
 /** Foreløpige lenker. «Hjem» er siden vi står på. */
-const links: { label: string; icon: ReactNode; current?: boolean }[] = [
+const links: {
+  label: string
+  icon: ReactNode
+  href?: string
+  current?: boolean
+}[] = [
   {
     label: 'Utforsk',
+    href: '#/kart',
     // Kompass
     icon: (
       <Icon>
@@ -44,6 +50,7 @@ const links: { label: string; icon: ReactNode; current?: boolean }[] = [
   },
   {
     label: 'Hjem',
+    href: '#/',
     current: true,
     // Anker
     icon: (
@@ -78,9 +85,9 @@ export function MainNav() {
   return (
     <nav className="main-nav" aria-label="Hovednavigasjon">
       <ul>
-        {links.map(({ label, icon, current }) => (
+        {links.map(({ label, icon, href, current }) => (
           <li key={label}>
-            <a href="#" aria-current={current ? 'page' : undefined}>
+            <a href={href ?? '#'} aria-current={current ? 'page' : undefined}>
               {icon}
               {label}
             </a>
diff --git a/client/src/components/MenuButton.tsx b/client/src/components/MenuButton.tsx
new file mode 100644
index 0000000..f99f5f0
--- /dev/null
+++ b/client/src/components/MenuButton.tsx
@@ -0,0 +1,16 @@
+/** Menyknappen øverst til venstre. Funksjonen kommer senere. */
+export function MenuButton() {
+  return (
+    <button type="button" className="icon-button menu-button" aria-label="Meny">
+      <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
+        <path
+          d="M4 6h16M4 12h16M4 18h16"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+        />
+      </svg>
+    </button>
+  )
+}
diff --git a/client/src/components/SiteHeader.tsx b/client/src/components/SiteHeader.tsx
index cddcc61..13acb0a 100644
--- a/client/src/components/SiteHeader.tsx
+++ b/client/src/components/SiteHeader.tsx
@@ -1,58 +1,21 @@
+import { HelpButton } from './HelpButton'
 import { MainNav } from './MainNav'
+import { MenuButton } from './MenuButton'
 import { ShipIcon } from './ShipIcon'
 
-function MenuIcon() {
-  return (
-    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
-      <path
-        d="M4 6h16M4 12h16M4 18h16"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
-    </svg>
-  )
-}
-
 export function SiteHeader() {
   return (
     <header className="site-header">
-      {/* Funksjonen til menyen kommer senere. */}
-      <button
-        type="button"
-        className="icon-button menu-button"
-        aria-label="Meny"
-      >
-        <MenuIcon />
-      </button>
-
-      <button
-        type="button"
-        className="icon-button help-button"
-        popoverTarget="help-popover"
-        aria-label="Om nettsiden"
-      >
-        <span aria-hidden="true">?</span>
-      </button>
+      <MenuButton />
 
-      {/* Åpnes og lukkes av nettleserens innebygde popover-støtte. */}
-      <aside
-        id="help-popover"
-        className="help-popover"
-        popover="auto"
-        aria-labelledby="help-title"
-      >
-        <h2 id="help-title">Slik fungerer Tapsailor</h2>
-        <p>
-          Tapsailor hjelper deg å finne barer, puber og andre utesteder i
-          Trondheim. Stedet til venstre er et tilfeldig forslag som endres hver
-          gang du laster inn siden. Bruk «Forrige» og «Neste» for å bla gjennom
-          stedene, eller trykk på et sted i listen til høyre for å fremheve det.
-          Trykk «Vis mer» nederst for å laste flere forslag, og «Vis mindre» for
-          å skjule dem igjen. Menyen og de andre sidene kommer snart.
-        </p>
-      </aside>
+      <HelpButton id="help-popover" title="Slik fungerer Tapsailor">
+        Tapsailor hjelper deg å finne barer, puber og andre utesteder i
+        Trondheim. Stedet til venstre er et tilfeldig forslag som endres hver
+        gang du laster inn siden. Bruk «Forrige» og «Neste» for å bla gjennom
+        stedene, eller trykk på et sted i listen til høyre for å fremheve det.
+        Trykk «Vis mer» nederst for å laste flere forslag, og «Vis mindre» for å
+        skjule dem igjen. Under «Utforsk» ser du stedene på et kart.
+      </HelpButton>
 
       {/* Dekor: noen måker over havet, én gruppe på hver side av tittelen. */}
       <svg
diff --git a/client/src/components/map/MapPanel.tsx b/client/src/components/map/MapPanel.tsx
new file mode 100644
index 0000000..8ec5f11
--- /dev/null
+++ b/client/src/components/map/MapPanel.tsx
@@ -0,0 +1,62 @@
+import type { KeyboardEvent, Ref } from 'react'
+import type { Place } from '../../types/place'
+import { PlaceDetails } from './PlaceDetails'
+import { PlaceSearch } from './PlaceSearch'
+
+type MapPanelProps = {
+  ref?: Ref<HTMLElement>
+  places: Place[]
+  selected: Place | null
+  query: string
+  now: Date
+  isLoading: boolean
+  onQueryChange: (query: string) => void
+  onSelect: (id: string) => void
+  onBack: () => void
+  onHover: (id: string | null) => void
+}
+
+/**
+ * Ruten til venstre. Den har fast størrelse og viser enten søk og forslag
+ * eller informasjon om det valgte stedet.
+ */
+export function MapPanel({
+  ref,
+  places,
+  selected,
+  query,
+  now,
+  isLoading,
+  onQueryChange,
+  onSelect,
+  onBack,
+  onHover,
+}: MapPanelProps) {
+  // Escape går tilbake til søket, som pilen øverst i ruten.
+  const handleKeyDown = (event: KeyboardEvent<HTMLElement>) => {
+    if (event.key === 'Escape' && selected) onBack()
+  }
+
+  return (
+    <aside
+      ref={ref}
+      className="map-panel"
+      aria-label="Søk og steder"
+      onKeyDown={handleKeyDown}
+    >
+      {selected ? (
+        <PlaceDetails place={selected} now={now} onBack={onBack} />
+      ) : (
+        <PlaceSearch
+          places={places}
+          query={query}
+          now={now}
+          isLoading={isLoading}
+          onQueryChange={onQueryChange}
+          onSelect={onSelect}
+          onHover={onHover}
+        />
+      )}
+    </aside>
+  )
+}
diff --git a/client/src/components/map/MapViewport.tsx b/client/src/components/map/MapViewport.tsx
new file mode 100644
index 0000000..d036d1a
--- /dev/null
+++ b/client/src/components/map/MapViewport.tsx
@@ -0,0 +1,411 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { KeyboardEvent, PointerEvent } from 'react'
+import type { Place } from '../../types/place'
+import { MAP_HEIGHT, MAP_WIDTH, toMapPoint } from '../../utils/mapProjection'
+import { PlacePin } from './PlacePin'
+import { StylizedMap } from './StylizedMap'
+
+/** Kartets plassering på skjermen: forskyvning i piksler og zoomnivå. */
+type View = { x: number; y: number; k: number }
+type Size = { width: number; height: number }
+/** Plass som er dekket av ruten, så kartet ikke skjules bak den. */
+export type Inset = { left: number; bottom: number }
+
+type MapViewportProps = {
+  places: Place[]
+  selectedId: string | null
+  hoveredId: string | null
+  inset: Inset
+  onSelect: (id: string) => void
+}
+
+const MAX_ZOOM_FACTOR = 8
+const BUTTON_ZOOM = 1.5
+const DRAG_THRESHOLD = 4
+const KEY_PAN = 80
+const FLY_MS = 400
+
+/** Minste zoom: kartet skal alltid fylle det synlige området. */
+const minScale = (size: Size, inset: Inset) =>
+  Math.max((size.width - inset.left) / MAP_WIDTH, size.height / MAP_HEIGHT)
+
+/** Holder kartet innenfor kantene og zoomen innenfor grensene. */
+function clampView(view: View, size: Size, inset: Inset): View {
+  const min = minScale(size, inset)
+  const k = Math.min(Math.max(view.k, min), min * MAX_ZOOM_FACTOR)
+
+  return {
+    k,
+    x: Math.min(inset.left, Math.max(size.width - MAP_WIDTH * k, view.x)),
+    y: Math.min(0, Math.max(size.height - MAP_HEIGHT * k, view.y)),
+  }
+}
+
+/** Zoomer med punktet (px, py) som fast punkt. */
+function zoomView(
+  view: View,
+  factor: number,
+  px: number,
+  py: number,
+  size: Size,
+  inset: Inset,
+): View {
+  const min = minScale(size, inset)
+  const k = Math.min(Math.max(view.k * factor, min), min * MAX_ZOOM_FACTOR)
+  const ratio = k / view.k
+
+  return clampView(
+    { k, x: px - (px - view.x) * ratio, y: py - (py - view.y) * ratio },
+    size,
+    inset,
+  )
+}
+
+const prefersReducedMotion = () =>
+  window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+/** Kartflaten med dra, zoom og merker for hvert sted. */
+export function MapViewport({
+  places,
+  selectedId,
+  hoveredId,
+  inset,
+  onSelect,
+}: MapViewportProps) {
+  const sectionRef = useRef<HTMLElement>(null)
+  const [size, setSize] = useState<Size | null>(null)
+  const [view, setView] = useState<View | null>(null)
+
+  const viewRef = useRef<View | null>(null)
+  const animationRef = useRef(0)
+  const pointersRef = useRef(new Map<number, { x: number; y: number }>())
+  const gestureRef = useRef({
+    originX: 0,
+    originY: 0,
+    isDragging: false,
+    pinchDistance: 0,
+  })
+
+  useEffect(() => {
+    viewRef.current = view
+  }, [view])
+
+  useEffect(() => {
+    const section = sectionRef.current
+    if (!section) return
+
+    const update = () =>
+      setSize({ width: section.clientWidth, height: section.clientHeight })
+    update()
+
+    const observer = new ResizeObserver(update)
+    observer.observe(section)
+    return () => observer.disconnect()
+  }, [])
+
+  // Viser hele kartet første gang, og holder det innenfor kantene senere.
+  useEffect(() => {
+    if (!size) return
+
+    setView((previous) => {
+      if (previous) return clampView(previous, size, inset)
+
+      const k = minScale(size, inset)
+      return clampView(
+        {
+          k,
+          x: inset.left + (size.width - inset.left - MAP_WIDTH * k) / 2,
+          y: (size.height - MAP_HEIGHT * k) / 2,
+        },
+        size,
+        inset,
+      )
+    })
+  }, [size, inset])
+
+  const stopFlying = useCallback(
+    () => cancelAnimationFrame(animationRef.current),
+    [],
+  )
+
+  /** Glir mykt til en ny visning. */
+  const flyTo = useCallback(
+    (target: View) => {
+      stopFlying()
+      const from = viewRef.current
+
+      if (!from || prefersReducedMotion()) {
+        setView(target)
+        return
+      }
+
+      const start = performance.now()
+      const step = (now: number) => {
+        const t = Math.min(1, (now - start) / FLY_MS)
+        const eased = 1 - (1 - t) ** 3
+
+        setView({
+          k: from.k + (target.k - from.k) * eased,
+          x: from.x + (target.x - from.x) * eased,
+          y: from.y + (target.y - from.y) * eased,
+        })
+        if (t < 1) animationRef.current = requestAnimationFrame(step)
+      }
+      animationRef.current = requestAnimationFrame(step)
+    },
+    [stopFlying],
+  )
+
+  useEffect(() => stopFlying, [stopFlying])
+
+  // Sentrerer kartet på det valgte stedet, midt i det området ruten ikke dekker.
+  useEffect(() => {
+    const current = viewRef.current
+    const place = places.find(({ id }) => id === selectedId)
+    if (!current || !size || !place) return
+
+    const { x, y } = toMapPoint(place.latitude, place.longitude)
+    const k = Math.max(current.k, minScale(size, inset) * 2.5)
+    const centerX = inset.left + (size.width - inset.left) / 2
+    // Merkets spiss er under sentrum; løft kartet litt så hele merket synes.
+    const centerY = (size.height - inset.bottom) / 2 + 24
+
+    flyTo(clampView({ k, x: centerX - x * k, y: centerY - y * k }, size, inset))
+    // Skal bare sentrere når et nytt sted velges, ikke når størrelsen endres.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedId])
+
+  const zoomBy = useCallback(
+    (factor: number, px: number, py: number) => {
+      if (!size) return
+      stopFlying()
+      setView((previous) =>
+        previous ? zoomView(previous, factor, px, py, size, inset) : previous,
+      )
+    },
+    [size, inset, stopFlying],
+  )
+
+  // Må registreres direkte for å kunne hindre at hele siden ruller.
+  useEffect(() => {
+    const section = sectionRef.current
+    if (!section) return
+
+    const handleWheel = (event: WheelEvent) => {
+      event.preventDefault()
+      const rect = section.getBoundingClientRect()
+      const delta = event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY
+      zoomBy(
+        Math.exp(-delta * 0.002),
+        event.clientX - rect.left,
+        event.clientY - rect.top,
+      )
+    }
+
+    section.addEventListener('wheel', handleWheel, { passive: false })
+    return () => section.removeEventListener('wheel', handleWheel)
+  }, [zoomBy])
+
+  const handlePointerDown = (event: PointerEvent<SVGSVGElement>) => {
+    stopFlying()
+    pointersRef.current.set(event.pointerId, {
+      x: event.clientX,
+      y: event.clientY,
+    })
+    gestureRef.current = {
+      originX: event.clientX,
+      originY: event.clientY,
+      isDragging: false,
+      pinchDistance: 0,
+    }
+  }
+
+  const handlePointerMove = (event: PointerEvent<SVGSVGElement>) => {
+    const pointers = pointersRef.current
+    const previous = pointers.get(event.pointerId)
+    if (!previous || !size) return
+
+    const gesture = gestureRef.current
+    const point = { x: event.clientX, y: event.clientY }
+    const target = event.currentTarget
+
+    if (pointers.size === 1) {
+      // Små bevegelser regnes som et trykk, slik at merkene kan trykkes på.
+      if (
+        !gesture.isDragging &&
+        Math.hypot(point.x - gesture.originX, point.y - gesture.originY) <
+          DRAG_THRESHOLD
+      ) {
+        return
+      }
+
+      gesture.isDragging = true
+      if (!target.hasPointerCapture(event.pointerId)) {
+        target.setPointerCapture(event.pointerId)
+      }
+      pointers.set(event.pointerId, point)
+
+      const dx = point.x - previous.x
+      const dy = point.y - previous.y
+      setView((current) =>
+        current
+          ? clampView(
+              { ...current, x: current.x + dx, y: current.y + dy },
+              size,
+              inset,
+            )
+          : current,
+      )
+      return
+    }
+
+    // To fingre: zoom etter hvor langt de er fra hverandre.
+    pointers.set(event.pointerId, point)
+    const [a, b] = [...pointers.values()]
+    const distance = Math.hypot(a.x - b.x, a.y - b.y)
+    const rect = target.getBoundingClientRect()
+
+    gesture.isDragging = true
+    if (!target.hasPointerCapture(event.pointerId)) {
+      target.setPointerCapture(event.pointerId)
+    }
+    if (gesture.pinchDistance > 0) {
+      zoomBy(
+        distance / gesture.pinchDistance,
+        (a.x + b.x) / 2 - rect.left,
+        (a.y + b.y) / 2 - rect.top,
+      )
+    }
+    gesture.pinchDistance = distance
+  }
+
+  const handlePointerEnd = (event: PointerEvent<SVGSVGElement>) => {
+    pointersRef.current.delete(event.pointerId)
+    gestureRef.current.pinchDistance = 0
+  }
+
+  const zoomFromCenter = (factor: number) => {
+    if (size) zoomBy(factor, size.width / 2, size.height / 2)
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<SVGSVGElement>) => {
+    // Merkene håndterer sine egne taster.
+    if (event.target !== event.currentTarget || !size) return
+
+    const pan = (dx: number, dy: number) => {
+      event.preventDefault()
+      stopFlying()
+      setView((current) =>
+        current
+          ? clampView(
+              { ...current, x: current.x + dx, y: current.y + dy },
+              size,
+              inset,
+            )
+          : current,
+      )
+    }
+
+    switch (event.key) {
+      case 'ArrowLeft':
+        return pan(KEY_PAN, 0)
+      case 'ArrowRight':
+        return pan(-KEY_PAN, 0)
+      case 'ArrowUp':
+        return pan(0, KEY_PAN)
+      case 'ArrowDown':
+        return pan(0, -KEY_PAN)
+      case '+':
+      case '=':
+        event.preventDefault()
+        return zoomFromCenter(BUTTON_ZOOM)
+      case '-':
+        event.preventDefault()
+        return zoomFromCenter(1 / BUTTON_ZOOM)
+    }
+  }
+
+  // Det valgte og det utpekte merket tegnes sist, så de ligger øverst.
+  const orderedPlaces = useMemo(() => {
+    const rank = (id: string) =>
+      id === selectedId ? 2 : id === hoveredId ? 1 : 0
+    return [...places].sort((a, b) => rank(a.id) - rank(b.id))
+  }, [places, selectedId, hoveredId])
+
+  return (
+    <section ref={sectionRef} className="map-viewport" aria-label="Kart">
+      <svg
+        className="map-canvas"
+        role="group"
+        aria-label="Kart over utesteder. Dra for å flytte kartet. Bruk piltastene for å flytte og pluss og minus for å zoome."
+        tabIndex={0}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        onPointerUp={handlePointerEnd}
+        onPointerCancel={handlePointerEnd}
+        onKeyDown={handleKeyDown}
+      >
+        {view && (
+          <>
+            <g transform={`translate(${view.x} ${view.y}) scale(${view.k})`}>
+              <StylizedMap />
+            </g>
+            {orderedPlaces.map((place) => {
+              const point = toMapPoint(place.latitude, place.longitude)
+              return (
+                <PlacePin
+                  key={place.id}
+                  place={place}
+                  x={view.x + point.x * view.k}
+                  y={view.y + point.y * view.k}
+                  isSelected={place.id === selectedId}
+                  isHovered={place.id === hoveredId}
+                  onSelect={() => onSelect(place.id)}
+                />
+              )
+            })}
+          </>
+        )}
+      </svg>
+
+      <svg
+        className="map-compass"
+        viewBox="-32 -40 64 72"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <circle r="24" className="compass-ring" />
+        <path d="M0-22 5 0 0 22-5 0Z" className="compass-ns" />
+        <path d="M-22 0 0-5 22 0 0 5Z" className="compass-ew" />
+        <text y="-28" textAnchor="middle">
+          N
+        </text>
+      </svg>
+
+      <menu className="zoom-controls" aria-label="Zoom">
+        <li>
+          <button
+            type="button"
+            className="map-control"
+            aria-label="Zoom inn"
+            title="Zoom inn"
+            onClick={() => zoomFromCenter(BUTTON_ZOOM)}
+          >
+            +
+          </button>
+        </li>
+        <li>
+          <button
+            type="button"
+            className="map-control"
+            aria-label="Zoom ut"
+            title="Zoom ut"
+            onClick={() => zoomFromCenter(1 / BUTTON_ZOOM)}
+          >
+            −
+          </button>
+        </li>
+      </menu>
+    </section>
+  )
+}
diff --git a/client/src/components/map/PlaceDetails.tsx b/client/src/components/map/PlaceDetails.tsx
new file mode 100644
index 0000000..d024c82
--- /dev/null
+++ b/client/src/components/map/PlaceDetails.tsx
@@ -0,0 +1,89 @@
+import { useEffect, useRef } from 'react'
+import type { Place } from '../../types/place'
+import { OpeningStatus } from '../OpeningStatus'
+import { PlaceImage } from '../PlaceImage'
+
+type PlaceDetailsProps = {
+  place: Place
+  now: Date
+  onBack: () => void
+}
+
+/** Alt om ett sted, med en pil som går tilbake til søket. */
+export function PlaceDetails({ place, now, onBack }: PlaceDetailsProps) {
+  const headingRef = useRef<HTMLHeadingElement>(null)
+
+  // Flytter fokus hit, så skjermlesere får lest opp stedet som ble valgt.
+  useEffect(() => {
+    headingRef.current?.focus()
+  }, [place.id])
+
+  return (
+    <article className="map-details" aria-labelledby="map-details-name">
+      <header className="map-details-header">
+        <button
+          type="button"
+          className="map-control back-button"
+          aria-label="Tilbake til søk"
+          title="Tilbake til søk"
+          onClick={onBack}
+        >
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2.2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path d="M19 12H5M11 6l-6 6 6 6" />
+          </svg>
+        </button>
+        <h2 id="map-details-name" ref={headingRef} tabIndex={-1}>
+          {place.name}
+        </h2>
+        <p className="rating">
+          <span className="visually-hidden">Vurdering: </span>
+          <span aria-hidden="true">★</span> {place.rating.toFixed(1)}{' '}
+          <small>({place.reviewCount})</small>
+        </p>
+      </header>
+
+      <figure className="featured-figure">
+        <PlaceImage place={place} />
+        <figcaption className="type-badge">{place.type}</figcaption>
+      </figure>
+
+      <p>{place.description}</p>
+
+      <dl className="facts">
+        <dt>Åpningstid</dt>
+        <dd>
+          <OpeningStatus openingHours={place.openingHours} now={now} />
+        </dd>
+        <dt>Område</dt>
+        <dd>{place.area}</dd>
+        <dt>Adresse</dt>
+        <dd>{place.address}</dd>
+      </dl>
+
+      <ul className="tags" aria-label="Egenskaper">
+        {place.tags.map((tag) => (
+          <li key={tag}>{tag}</li>
+        ))}
+      </ul>
+
+      <a
+        className="button button-outline"
+        href={place.websiteUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Besøk nettside
+        <span className="visually-hidden"> (åpnes i ny fane)</span>
+      </a>
+    </article>
+  )
+}
diff --git a/client/src/components/map/PlacePin.tsx b/client/src/components/map/PlacePin.tsx
new file mode 100644
index 0000000..8f31d93
--- /dev/null
+++ b/client/src/components/map/PlacePin.tsx
@@ -0,0 +1,63 @@
+import type { KeyboardEvent } from 'react'
+import type { Place } from '../../types/place'
+
+type PlacePinProps = {
+  place: Place
+  /** Plassering i skjermpiksler, der spissen på merket peker. */
+  x: number
+  y: number
+  isSelected: boolean
+  isHovered: boolean
+  onSelect: () => void
+}
+
+/** Et «X marks the spot»-merke som markerer ett utested på kartet. */
+export function PlacePin({
+  place,
+  x,
+  y,
+  isSelected,
+  isHovered,
+  onSelect,
+}: PlacePinProps) {
+  const className = [
+    'map-pin',
+    isSelected && 'map-pin-selected',
+    isHovered && 'map-pin-hover',
+  ]
+    .filter(Boolean)
+    .join(' ')
+
+  const handleKeyDown = (event: KeyboardEvent<SVGGElement>) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      onSelect()
+    }
+  }
+
+  return (
+    <g
+      className={className}
+      transform={`translate(${x} ${y})`}
+      role="button"
+      tabIndex={0}
+      aria-label={place.name}
+      aria-pressed={isSelected}
+      onClick={onSelect}
+      onKeyDown={handleKeyDown}
+    >
+      <title>{place.name}</title>
+      <g className="map-pin-body">
+        <circle className="map-pin-halo" cy="-26" r="23" />
+        <path
+          className="map-pin-shape"
+          d="M0 0C-4-8-14-16-14-26a14 14 0 1 1 28 0C14-16 4-8 0 0Z"
+        />
+        <path className="map-pin-mark" d="M-5-31 5-21M5-31-5-21" />
+      </g>
+      <text className="map-pin-label" y="-52" textAnchor="middle">
+        {place.name}
+      </text>
+    </g>
+  )
+}
diff --git a/client/src/components/map/PlaceSearch.tsx b/client/src/components/map/PlaceSearch.tsx
new file mode 100644
index 0000000..b111189
--- /dev/null
+++ b/client/src/components/map/PlaceSearch.tsx
@@ -0,0 +1,82 @@
+import type { Place } from '../../types/place'
+import { OpeningStatus } from '../OpeningStatus'
+
+type PlaceSearchProps = {
+  places: Place[]
+  query: string
+  now: Date
+  isLoading: boolean
+  onQueryChange: (query: string) => void
+  onSelect: (id: string) => void
+  onHover: (id: string | null) => void
+}
+
+/** Søkefeltet og listen med steder i panelet. */
+export function PlaceSearch({
+  places,
+  query,
+  now,
+  isLoading,
+  onQueryChange,
+  onSelect,
+  onHover,
+}: PlaceSearchProps) {
+  const summary = isLoading ? 'Laster steder …' : `${places.length} steder`
+
+  return (
+    <>
+      <form
+        role="search"
+        className="map-search"
+        onSubmit={(event) => event.preventDefault()}
+      >
+        <label className="visually-hidden" htmlFor="map-search-input">
+          Søk etter utesteder
+        </label>
+        <input
+          id="map-search-input"
+          type="search"
+          placeholder="Søk …"
+          autoComplete="off"
+          value={query}
+          onChange={(event) => onQueryChange(event.target.value)}
+        />
+      </form>
+
+      <p role="status" className="visually-hidden">
+        {summary}
+      </p>
+
+      {places.length === 0 ? (
+        <p className="map-empty">
+          {isLoading ? 'Laster steder …' : 'Ingen steder passer søket.'}
+        </p>
+      ) : (
+        <ul className="map-results">
+          {places.map((place) => (
+            <li key={place.id}>
+              <button
+                type="button"
+                id={`map-result-${place.id}`}
+                className="map-result"
+                onClick={() => onSelect(place.id)}
+                onMouseEnter={() => onHover(place.id)}
+                onMouseLeave={() => onHover(null)}
+                onFocus={() => onHover(place.id)}
+                onBlur={() => onHover(null)}
+              >
+                <span className="map-result-name">{place.name}</span>
+                <span className="map-result-meta">
+                  {place.type} · {place.area}
+                </span>
+                <span className="map-result-meta">
+                  <OpeningStatus openingHours={place.openingHours} now={now} />
+                </span>
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </>
+  )
+}
diff --git a/client/src/components/map/StylizedMap.tsx b/client/src/components/map/StylizedMap.tsx
new file mode 100644
index 0000000..e0f6a42
--- /dev/null
+++ b/client/src/components/map/StylizedMap.tsx
@@ -0,0 +1,132 @@
+import { memo } from 'react'
+import { MAP_HEIGHT, MAP_WIDTH } from '../../utils/mapProjection'
+
+/** Elva og fjorden er tegnet for hånd; alt annet er enkle former. */
+const COAST =
+  'M-700-500H1700V110C1500 140 1350 90 1100 120S800 150 650 150 450 120 330 145 100 110-100 140-500 130-700 150Z'
+const RIVER =
+  'M790 920 760 800C740 640 690 560 600 520S470 400 520 330 640 250 650 150'
+
+const ROADS = [
+  'M-100 330C150 300 300 360 520 330S850 280 1100 300',
+  'M330 160C340 300 300 480 360 640S420 800 440 900',
+  'M700 160C760 300 820 420 900 520S960 700 1000 900',
+  'M-100 560C200 560 400 620 600 520M600 600C700 590 800 620 1100 560',
+  'M150 150C180 300 200 420 150 520S120 700 100 900',
+  'M520 330C560 400 640 380 700 440S760 600 770 800',
+]
+
+/** Små hus: x, y, bredde, høyde. */
+const BUILDINGS = [
+  [250, 260, 22, 16],
+  [285, 262, 16, 22],
+  [400, 340, 24, 18],
+  [430, 370, 18, 24],
+  [630, 300, 22, 16],
+  [660, 330, 16, 20],
+  [720, 380, 24, 18],
+  [800, 300, 18, 22],
+  [870, 380, 22, 16],
+  [230, 470, 24, 18],
+  [260, 500, 18, 22],
+  [330, 560, 22, 16],
+  [420, 660, 24, 18],
+  [540, 640, 18, 22],
+  [620, 700, 22, 16],
+  [790, 680, 24, 18],
+  [860, 590, 18, 22],
+  [940, 470, 22, 16],
+  [150, 420, 22, 16],
+  [310, 230, 20, 14],
+]
+
+const WAVES = [
+  [120, 70],
+  [260, 40],
+  [420, 85],
+  [560, 50],
+  [760, 75],
+  [900, 40],
+  [40, 100],
+  [690, 30],
+]
+
+/** Rutenett som i et sjøkart, med en strek for hver 200. enhet. */
+const GRID = Array.from({ length: 4 }, (_, index) => {
+  const offset = (index + 1) * 200
+  return `M${offset} -500V1300M-700 ${offset}H1700`
+}).join('')
+
+/** Tegner et stilisert kart over Trondheim. Det er ikke et ekte kart. */
+export const StylizedMap = memo(function StylizedMap() {
+  return (
+    <>
+      <defs>
+        <path id="map-coast" d={COAST} />
+      </defs>
+
+      <rect className="map-land" x="-700" y="-500" width="2400" height="1800" />
+      <path className="map-grid" d={GRID} />
+
+      <ellipse className="map-park" cx="160" cy="300" rx="70" ry="40" />
+      <ellipse className="map-park" cx="800" cy="600" rx="90" ry="50" />
+      <ellipse className="map-park" cx="380" cy="440" rx="50" ry="34" />
+      <ellipse className="map-water" cx="190" cy="610" rx="60" ry="34" />
+
+      <use href="#map-coast" className="map-water" />
+      <use
+        href="#map-coast"
+        className="map-depth"
+        transform="translate(0 -35)"
+      />
+      <use
+        href="#map-coast"
+        className="map-depth"
+        transform="translate(0 -70)"
+      />
+      {WAVES.map(([x, y]) => (
+        <path
+          key={`${x}-${y}`}
+          className="map-wave"
+          d="M0 0q4-4 8 0t8 0 8 0"
+          transform={`translate(${x} ${y})`}
+        />
+      ))}
+
+      <path className="map-river-edge" d={RIVER} />
+      <path className="map-river" d={RIVER} />
+
+      {ROADS.map((road) => (
+        <g key={road}>
+          <path className="map-road-edge" d={road} />
+          <path className="map-road" d={road} />
+        </g>
+      ))}
+
+      {BUILDINGS.map(([x, y, width, height]) => (
+        <rect
+          key={`${x}-${y}`}
+          className="map-building"
+          x={x}
+          y={y}
+          width={width}
+          height={height}
+          rx="2"
+        />
+      ))}
+
+      <text className="map-label" x="190" y="60">
+        TRONDHEIMSFJORDEN
+      </text>
+      <text
+        className="map-label map-label-small"
+        transform="translate(722 600) rotate(-62)"
+      >
+        Nidelva
+      </text>
+      <text className="map-label map-label-small" x="20" y={MAP_HEIGHT - 20}>
+        Stilisert kart · {MAP_WIDTH} × {MAP_HEIGHT}
+      </text>
+    </>
+  )
+})
diff --git a/client/src/data/mockPlaces.ts b/client/src/data/mockPlaces.ts
index 4410e36..014fc27 100644
--- a/client/src/data/mockPlaces.ts
+++ b/client/src/data/mockPlaces.ts
@@ -1,6 +1,10 @@
 import type { Place } from '../types/place'
+import { toCoordinates } from '../utils/mapProjection'
 
-type PlaceSeed = Omit<Place, 'id' | 'websiteUrl' | 'imageUrl'>
+type PlaceSeed = Omit<
+  Place,
+  'id' | 'latitude' | 'longitude' | 'websiteUrl' | 'imageUrl'
+>
 
 /**
  * Mockdata til utvikling. Stedene er oppdiktet og skal ikke forveksles med
@@ -284,6 +288,35 @@ const seeds: PlaceSeed[] = [
   },
 ]
 
+/** Plassering på det stiliserte kartet (x, y), i samme rekkefølge som stedene. */
+const mapPoints: [number, number][] = [
+  [250, 230],
+  [360, 300],
+  [430, 230],
+  [440, 410],
+  [590, 420],
+  [610, 330],
+  [700, 260],
+  [780, 210],
+  [830, 330],
+  [890, 260],
+  [680, 440],
+  [770, 520],
+  [860, 450],
+  [900, 560],
+  [830, 630],
+  [640, 640],
+  [560, 610],
+  [470, 560],
+  [380, 500],
+  [300, 420],
+  [190, 360],
+  [160, 520],
+  [270, 590],
+  [390, 620],
+  [920, 380],
+]
+
 /** Lager en URL-vennlig id fra navnet. */
 const toId = (name: string) =>
   name
@@ -291,8 +324,9 @@ const toId = (name: string) =>
     .replaceAll(/[^a-z0-9æøå]+/g, '-')
     .replaceAll(/^-|-$/g, '')
 
-export const mockPlaces: Place[] = seeds.map((seed) => ({
+export const mockPlaces: Place[] = seeds.map((seed, index) => ({
   ...seed,
+  ...toCoordinates(...mapPoints[index]),
   id: toId(seed.name),
   websiteUrl: 'https://example.com',
   imageUrl: null,
diff --git a/client/src/hooks/useRoute.ts b/client/src/hooks/useRoute.ts
new file mode 100644
index 0000000..acd49a1
--- /dev/null
+++ b/client/src/hooks/useRoute.ts
@@ -0,0 +1,20 @@
+import { useSyncExternalStore } from 'react'
+
+export type Route = 'home' | 'map'
+
+/** Adressene i nettleseren. Hash-adresser trenger ingen serverkonfigurasjon. */
+export const HOME_HREF = '#/'
+export const MAP_HREF = '#/kart'
+
+function subscribe(onChange: () => void) {
+  window.addEventListener('hashchange', onChange)
+  return () => window.removeEventListener('hashchange', onChange)
+}
+
+const getRoute = (): Route =>
+  window.location.hash === MAP_HREF ? 'map' : 'home'
+
+/** Hvilken side som vises, styrt av adressen. */
+export function useRoute(): Route {
+  return useSyncExternalStore(subscribe, getRoute)
+}
diff --git a/client/src/pages/HomePage.tsx b/client/src/pages/HomePage.tsx
new file mode 100644
index 0000000..c41a0c1
--- /dev/null
+++ b/client/src/pages/HomePage.tsx
@@ -0,0 +1,84 @@
+import { useState } from 'react'
+import { FeaturedPlace } from '../components/FeaturedPlace'
+import { PlaceList } from '../components/PlaceList'
+import { SiteHeader } from '../components/SiteHeader'
+import { useNow } from '../hooks/useNow'
+import { PAGE_SIZE, usePlaces } from '../hooks/usePlaces'
+import type { Place } from '../types/place'
+
+export function HomePage() {
+  const now = useNow()
+  const {
+    places,
+    totalCount,
+    status,
+    hasMore,
+    canShowLess,
+    loadMore,
+    showLess,
+  } = usePlaces()
+
+  // Trekkes én gang per sidelasting, slik at det fremhevede stedet er tilfeldig.
+  const [startFraction] = useState(Math.random)
+  // Lagrer hele stedet, så det blir stående selv om «Vis mindre» fjerner det
+  // fra listen.
+  const [selected, setSelected] = useState<Place | null>(null)
+
+  const featured: Place | undefined =
+    selected ??
+    places[Math.floor(startFraction * Math.min(places.length, PAGE_SIZE))]
+
+  /** Blar til forrige (-1) eller neste (1) sted, og starter om i endene. */
+  const step = (direction: -1 | 1) => {
+    if (!featured) return
+    const index = places.findIndex((place) => place.id === featured.id)
+
+    // Er stedet skjult av «Vis mindre», starter vi i enden av listen.
+    const next =
+      index === -1
+        ? direction === 1
+          ? 0
+          : places.length - 1
+        : (index + direction + places.length) % places.length
+
+    setSelected(places[next])
+  }
+
+  return (
+    <>
+      <SiteHeader />
+      <main className="page">
+        {status === 'loading' && <p role="status">Laster steder …</p>}
+        {status === 'error' && (
+          <p role="alert">
+            Kunne ikke hente steder. Prøv å laste siden på nytt.
+          </p>
+        )}
+
+        {featured && (
+          <>
+            <FeaturedPlace
+              place={featured}
+              now={now}
+              onPrevious={() => step(-1)}
+              onNext={() => step(1)}
+            />
+            <PlaceList
+              places={places}
+              now={now}
+              featuredId={featured.id}
+              loadedCount={places.length}
+              totalCount={totalCount}
+              hasMore={hasMore}
+              canShowLess={canShowLess}
+              isLoadingMore={status === 'loadingMore'}
+              onSelect={setSelected}
+              onLoadMore={loadMore}
+              onShowLess={showLess}
+            />
+          </>
+        )}
+      </main>
+    </>
+  )
+}
diff --git a/client/src/pages/MapPage.css b/client/src/pages/MapPage.css
new file mode 100644
index 0000000..e5e2e80
--- /dev/null
+++ b/client/src/pages/MapPage.css
@@ -0,0 +1,485 @@
+/* ---------- Kartside ---------- */
+
+.map-page {
+  --gold: #c9972b;
+  --sheet-height: 42dvh;
+
+  position: relative;
+  height: 100dvh;
+  overflow: hidden;
+  background: var(--blue-100);
+}
+
+/* Knappene i hjørnene er mørke, siden bakgrunnen her er et lyst kart. */
+.map-page .icon-button {
+  z-index: 3;
+  background: var(--navy-900);
+}
+
+.map-page .icon-button:hover {
+  background: var(--blue-300);
+}
+
+/* Felles utseende for runde og avlange knapper over kartet. */
+.map-control {
+  display: inline-grid;
+  place-items: center;
+  border: 2px solid var(--navy-900);
+  background: var(--surface);
+  color: var(--navy-900);
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s,
+    transform 0.15s,
+    box-shadow 0.15s;
+}
+
+.map-control:hover {
+  background: var(--navy-900);
+  color: var(--eggshell);
+  transform: translateY(-2px);
+  box-shadow: 0 0.35rem 0.75rem rgb(10 34 64 / 0.25);
+}
+
+.map-control:active {
+  transform: translateY(0);
+  box-shadow: none;
+}
+
+.home-link {
+  position: absolute;
+  top: 0.5rem;
+  left: 3.75rem;
+  z-index: 3;
+  grid-auto-flow: column;
+  gap: 0.5rem;
+  height: 2.75rem;
+  padding-inline: 1rem;
+  border-radius: 999px;
+  text-decoration: none;
+}
+
+.home-link svg {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+/* ---------- Kartflaten ---------- */
+
+.map-viewport {
+  position: absolute;
+  inset: 0;
+}
+
+.map-canvas {
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+
+.map-canvas:active {
+  cursor: grabbing;
+}
+
+.map-canvas:focus-visible {
+  outline-offset: -6px;
+}
+
+.map-land {
+  fill: #efe6cc;
+}
+
+.map-grid {
+  fill: none;
+  stroke: var(--navy-500);
+  stroke-dasharray: 4 8;
+  opacity: 0.15;
+}
+
+.map-park {
+  fill: #d9e5c8;
+}
+
+.map-water {
+  fill: var(--blue-100);
+  stroke: var(--navy-500);
+  stroke-width: 2;
+}
+
+.map-depth {
+  fill: none;
+  stroke: var(--blue-300);
+  stroke-width: 1.5;
+  stroke-dasharray: 2 7;
+  stroke-linecap: round;
+}
+
+.map-wave {
+  fill: none;
+  stroke: var(--blue-300);
+  stroke-width: 1.5;
+  stroke-linecap: round;
+}
+
+.map-river-edge,
+.map-river,
+.map-road-edge,
+.map-road {
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.map-river-edge {
+  stroke: var(--navy-500);
+  stroke-width: 26;
+}
+
+.map-river {
+  stroke: var(--blue-100);
+  stroke-width: 22;
+}
+
+.map-road-edge {
+  stroke: #d8ccab;
+  stroke-width: 9;
+}
+
+.map-road {
+  stroke: var(--surface);
+  stroke-width: 6;
+}
+
+.map-building {
+  fill: #ddd1b0;
+  stroke: #bfb28c;
+}
+
+.map-label {
+  fill: var(--navy-500);
+  font-size: 20px;
+  font-style: italic;
+  letter-spacing: 0.25em;
+  opacity: 0.8;
+  pointer-events: none;
+}
+
+.map-label-small {
+  font-size: 15px;
+  letter-spacing: 0.1em;
+}
+
+/* ---------- Merker ---------- */
+
+.map-pin {
+  cursor: pointer;
+  outline: none;
+}
+
+.map-pin-body {
+  transition: transform 0.15s;
+}
+
+.map-pin-halo {
+  fill: var(--blue-300);
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+
+.map-pin-shape {
+  fill: var(--navy-700);
+  stroke: var(--surface);
+  stroke-width: 2.5;
+  transition: fill 0.15s;
+}
+
+.map-pin-mark {
+  fill: none;
+  stroke: var(--surface);
+  stroke-width: 3;
+  stroke-linecap: round;
+}
+
+.map-pin-label {
+  fill: var(--navy-900);
+  font-size: 14px;
+  font-weight: 700;
+  opacity: 0;
+  paint-order: stroke;
+  pointer-events: none;
+  stroke: var(--surface);
+  stroke-linejoin: round;
+  stroke-width: 4px;
+  transition: opacity 0.15s;
+}
+
+.map-pin:hover .map-pin-body,
+.map-pin:focus-visible .map-pin-body,
+.map-pin-hover .map-pin-body {
+  transform: scale(1.25);
+}
+
+.map-pin:hover .map-pin-shape,
+.map-pin:focus-visible .map-pin-shape,
+.map-pin-hover .map-pin-shape {
+  fill: var(--navy-500);
+}
+
+.map-pin:hover .map-pin-halo,
+.map-pin:focus-visible .map-pin-halo,
+.map-pin-hover .map-pin-halo,
+.map-pin-selected .map-pin-halo {
+  opacity: 0.85;
+}
+
+.map-pin:hover .map-pin-label,
+.map-pin:focus-visible .map-pin-label,
+.map-pin-hover .map-pin-label,
+.map-pin-selected .map-pin-label {
+  opacity: 1;
+}
+
+.map-pin-selected .map-pin-body {
+  transform: scale(1.4);
+}
+
+.map-pin-selected .map-pin-shape {
+  fill: var(--gold);
+  stroke: var(--navy-900);
+}
+
+.map-pin-selected .map-pin-mark {
+  stroke: var(--navy-900);
+}
+
+/* ---------- Kompass og zoom ---------- */
+
+.map-compass {
+  position: absolute;
+  top: 3.75rem;
+  right: 0.75rem;
+  width: 3.5rem;
+  pointer-events: none;
+}
+
+.compass-ring {
+  fill: var(--surface);
+  fill-opacity: 0.85;
+  stroke: var(--navy-900);
+  stroke-width: 1.5;
+}
+
+.compass-ns {
+  fill: var(--navy-900);
+}
+
+.compass-ew {
+  fill: var(--blue-300);
+}
+
+.map-compass text {
+  fill: var(--navy-900);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.zoom-controls {
+  position: absolute;
+  right: 0.75rem;
+  bottom: calc(var(--sheet-height) + 1rem);
+  display: grid;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.zoom-controls .map-control {
+  width: 2.75rem;
+  height: 2.75rem;
+  padding: 0;
+  border-radius: 50%;
+  font-size: 1.5rem;
+  line-height: 1;
+}
+
+/* ---------- Ruten til venstre ---------- */
+
+.map-panel {
+  position: absolute;
+  right: 0.5rem;
+  bottom: 0.5rem;
+  left: 0.5rem;
+  z-index: 2;
+  display: flex;
+  flex-direction: column;
+  height: var(--sheet-height);
+  overflow: hidden;
+  border: 2px solid var(--navy-900);
+  border-radius: 1rem;
+  background: var(--surface);
+  box-shadow: 0 0.75rem 2rem rgb(10 34 64 / 0.3);
+}
+
+.map-search {
+  flex: none;
+  padding: 0.75rem;
+}
+
+.map-search input {
+  width: 100%;
+  padding: 0.6rem 1rem;
+  border: 2px solid var(--navy-900);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--text);
+  font: inherit;
+  transition: box-shadow 0.15s;
+}
+
+.map-search input:hover {
+  box-shadow: 0 0 0 3px var(--blue-300);
+}
+
+.map-results {
+  flex: 1;
+  min-height: 0;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  border-top: 2px solid var(--navy-900);
+  list-style: none;
+}
+
+.map-result {
+  display: grid;
+  width: 100%;
+  padding: 0.65rem 1rem 0.65rem 0.75rem;
+  border: 0;
+  border-bottom: 1px solid var(--blue-100);
+  border-left: 0.3rem solid transparent;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    border-color 0.15s;
+}
+
+.map-result:hover,
+.map-result:focus-visible {
+  border-left-color: var(--navy-700);
+  background: var(--blue-100);
+}
+
+.map-result-name {
+  font-weight: 700;
+}
+
+.map-result-meta {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.map-empty {
+  margin: 0;
+  padding: 1rem;
+  color: var(--muted);
+}
+
+.map-error {
+  position: absolute;
+  top: 4rem;
+  left: 50%;
+  z-index: 3;
+  margin: 0;
+  padding: 0.5rem 1rem;
+  border-radius: 0.6rem;
+  background: var(--surface);
+  color: var(--closed);
+  font-weight: 600;
+  transform: translateX(-50%);
+}
+
+/* ---------- Detaljer i ruten ---------- */
+
+.map-details {
+  display: grid;
+  align-content: start;
+  gap: 0.6rem;
+  padding: 0.75rem;
+  overflow-y: auto;
+}
+
+.map-details p {
+  margin: 0;
+}
+
+.map-details-header {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 2px solid var(--blue-100);
+}
+
+.map-details-header h2 {
+  margin: 0 auto 0 0;
+  font-size: 1.3rem;
+  line-height: 1.2;
+}
+
+.map-details-header h2:focus {
+  outline: none;
+}
+
+.back-button {
+  flex: none;
+  width: 2.5rem;
+  height: 2.5rem;
+  padding: 0;
+  border-radius: 50%;
+}
+
+.back-button svg {
+  width: 1.3rem;
+  height: 1.3rem;
+}
+
+.map-details .rating {
+  flex: none;
+  padding: 0.25rem 0.7rem;
+  border-radius: 999px;
+  background: var(--blue-100);
+  font-weight: 700;
+}
+
+.map-details .rating small {
+  color: var(--muted);
+  font-weight: 400;
+}
+
+@media (min-width: 56rem) {
+  .map-page {
+    --sheet-height: 0px;
+  }
+
+  .map-panel {
+    top: 3.75rem;
+    right: auto;
+    width: 23rem;
+    height: auto;
+  }
+
+  .zoom-controls {
+    bottom: 1rem;
+  }
+}
diff --git a/client/src/pages/MapPage.tsx b/client/src/pages/MapPage.tsx
new file mode 100644
index 0000000..b28d1db
--- /dev/null
+++ b/client/src/pages/MapPage.tsx
@@ -0,0 +1,169 @@
+import { useEffect, useMemo, useRef, useState } from 'react'
+import { fetchPlaces } from '../api/places'
+import { HelpButton } from '../components/HelpButton'
+import { MapPanel } from '../components/map/MapPanel'
+import { MapViewport } from '../components/map/MapViewport'
+import type { Inset } from '../components/map/MapViewport'
+import { MenuButton } from '../components/MenuButton'
+import { HOME_HREF } from '../hooks/useRoute'
+import { useNow } from '../hooks/useNow'
+import type { Place } from '../types/place'
+import './MapPage.css'
+
+/**
+ * Kartet viser alle steder. Når backenden er klar, byttes dette ut med en
+ * egen kartspørring (for eksempel steder innenfor utsnittet).
+ */
+const MAP_LIMIT = 500
+
+type Status = 'loading' | 'ready' | 'error'
+
+const matches = (place: Place, query: string) =>
+  [place.name, place.type, place.area, ...place.tags].some((text) =>
+    text.toLocaleLowerCase('nb-NO').includes(query),
+  )
+
+export function MapPage() {
+  const now = useNow()
+  const [places, setPlaces] = useState<Place[]>([])
+  const [status, setStatus] = useState<Status>('loading')
+  const [query, setQuery] = useState('')
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [hoveredId, setHoveredId] = useState<string | null>(null)
+  const [inset, setInset] = useState<Inset>({ left: 0, bottom: 0 })
+
+  const panelRef = useRef<HTMLElement>(null)
+  const lastSelectedId = useRef<string | null>(null)
+
+  useEffect(() => {
+    let isCurrent = true
+
+    fetchPlaces(0, MAP_LIMIT)
+      .then((page) => {
+        if (!isCurrent) return
+        setPlaces(page.items)
+        setStatus('ready')
+      })
+      .catch(() => {
+        if (isCurrent) setStatus('error')
+      })
+
+    return () => {
+      isCurrent = false
+    }
+  }, [])
+
+  // Måler ruten, så kartet vet hvor mye av det som er dekket.
+  useEffect(() => {
+    const panel = panelRef.current
+    if (!panel) return
+
+    const update = () => {
+      const rect = panel.getBoundingClientRect()
+      const isDesktop = window.matchMedia('(min-width: 56rem)').matches
+      const next = isDesktop
+        ? { left: rect.right, bottom: 0 }
+        : { left: 0, bottom: window.innerHeight - rect.top }
+
+      setInset((previous) =>
+        previous.left === next.left && previous.bottom === next.bottom
+          ? previous
+          : next,
+      )
+    }
+    update()
+
+    const observer = new ResizeObserver(update)
+    observer.observe(panel)
+    window.addEventListener('resize', update)
+    return () => {
+      observer.disconnect()
+      window.removeEventListener('resize', update)
+    }
+  }, [])
+
+  // Setter fokus tilbake på stedet i listen når man går tilbake fra detaljene.
+  useEffect(() => {
+    if (selectedId === null && lastSelectedId.current) {
+      document.getElementById(`map-result-${lastSelectedId.current}`)?.focus()
+    }
+    lastSelectedId.current = selectedId
+  }, [selectedId])
+
+  const results = useMemo(() => {
+    const needle = query.trim().toLocaleLowerCase('nb-NO')
+    return needle ? places.filter((place) => matches(place, needle)) : places
+  }, [places, query])
+
+  const selected = places.find(({ id }) => id === selectedId) ?? null
+
+  // Kartet viser de samme stedene som søkelisten. Det valgte stedet vises
+  // alltid, selv om søket endres etter at det ble valgt.
+  const pins = useMemo(
+    () =>
+      selected && !results.includes(selected)
+        ? [...results, selected]
+        : results,
+    [results, selected],
+  )
+
+  return (
+    <main className="map-page">
+      <MenuButton />
+
+      <a className="map-control home-link" href={HOME_HREF}>
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <circle cx="12" cy="5" r="2" />
+          <path d="M12 7v13M8 11h8M5 14c0 3.500 3 6 7 6s7-2.500 7-6" />
+        </svg>
+        Hovedside
+      </a>
+
+      <MapPanel
+        ref={panelRef}
+        places={results}
+        selected={selected}
+        query={query}
+        now={now}
+        isLoading={status === 'loading'}
+        onQueryChange={setQuery}
+        onSelect={setSelectedId}
+        onBack={() => setSelectedId(null)}
+        onHover={setHoveredId}
+      />
+
+      {status === 'error' && (
+        <p role="alert" className="map-error">
+          Kunne ikke hente steder. Prøv å laste siden på nytt.
+        </p>
+      )}
+
+      <MapViewport
+        places={pins}
+        selectedId={selectedId}
+        hoveredId={hoveredId}
+        inset={inset}
+        onSelect={setSelectedId}
+      />
+
+      <HelpButton id="map-help" title="Slik bruker du kartet">
+        Kartet viser utestedene i Trondheim som små skattemerker. Dra i kartet
+        for å flytte deg, og bruk rulling, knappene nederst til høyre eller to
+        fingre for å zoome. Søk etter et sted i feltet til venstre, så vises
+        bare de stedene på kartet. Trykk på et sted i listen eller et merke på
+        kartet for å se informasjon om stedet i ruten. Trykk på pilen øverst i
+        ruten for å gå tilbake til søket. Foreløpig er dette et stilisert
+        prøvekart, ikke et ekte kart.
+      </HelpButton>
+    </main>
+  )
+}
diff --git a/client/src/types/place.ts b/client/src/types/place.ts
index 615f988..83b4603 100644
--- a/client/src/types/place.ts
+++ b/client/src/types/place.ts
@@ -6,6 +6,8 @@ export type Place = {
   type: VenueType
   area: string
   address: string
+  latitude: number
+  longitude: number
   /** Visningstekst, for eksempel «16:00–23:00». */
   openingHours: string
   rating: number
diff --git a/client/src/utils/mapProjection.ts b/client/src/utils/mapProjection.ts
new file mode 100644
index 0000000..c86b6eb
--- /dev/null
+++ b/client/src/utils/mapProjection.ts
@@ -0,0 +1,27 @@
+/** Størrelsen på det stiliserte kartet, i kartets egne enheter. */
+export const MAP_WIDTH = 1000
+export const MAP_HEIGHT = 800
+
+// Utsnittet av Trondheim som kartet dekker (omtrent 5 × 5 km).
+const WEST = 10.34
+const LONGITUDE_SPAN = 0.12
+const NORTH = 63.455
+const LATITUDE_SPAN = 0.048
+
+export type MapPoint = { x: number; y: number }
+
+/** Gjør breddegrad og lengdegrad om til et punkt på kartet. */
+export function toMapPoint(latitude: number, longitude: number): MapPoint {
+  return {
+    x: ((longitude - WEST) / LONGITUDE_SPAN) * MAP_WIDTH,
+    y: ((NORTH - latitude) / LATITUDE_SPAN) * MAP_HEIGHT,
+  }
+}
+
+/** Det omvendte: et punkt på kartet blir til koordinater. */
+export function toCoordinates(x: number, y: number) {
+  return {
+    latitude: Number((NORTH - (y / MAP_HEIGHT) * LATITUDE_SPAN).toFixed(5)),
+    longitude: Number((WEST + (x / MAP_WIDTH) * LONGITUDE_SPAN).toFixed(5)),
+  }
+}