diff --git a/frontend/src/components/layout/RightSidebar.tsx b/frontend/src/components/layout/RightSidebar.tsx
index f6d115b..8b7c4d5 100644
--- a/frontend/src/components/layout/RightSidebar.tsx
+++ b/frontend/src/components/layout/RightSidebar.tsx
@@ -150,8 +150,8 @@ export function RightSidebar() {
     const id = activePhotoId ?? selectedPhotos[0]
     return (
       <div className="flex h-full flex-col bg-surface">
-        <div className="flex h-12 flex-shrink-0 items-center justify-between border-b border-border px-4">
-          <h2 className="text-sm font-semibold text-text">Photo Details</h2>
+        <div className="flex h-11 flex-shrink-0 items-center justify-between border-b border-border px-4">
+          <h2 className="text-sm font-semibold text-text">Metadata</h2>
           <button
             onClick={clearSelection}
             className="rounded p-1 text-text-muted hover:bg-surface-2 hover:text-text"
diff --git a/frontend/src/components/preview/PreviewView.tsx b/frontend/src/components/preview/PreviewView.tsx
index 2552b74..90e7ed2 100644
--- a/frontend/src/components/preview/PreviewView.tsx
+++ b/frontend/src/components/preview/PreviewView.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useHotkeys } from 'react-hotkeys-hook'
 import { X, Info } from 'lucide-react'
 import { usePhotoStore } from '../../store/photoStore'
@@ -13,6 +13,7 @@ export function PreviewView() {
   const activePhotoId = usePhotoStore((s) => s.activePhotoId)
   const setActivePhoto = usePhotoStore((s) => s.setActivePhoto)
   const closePreview = usePhotoStore((s) => s.closePreview)
+  const visiblePhotoIds = usePhotoStore((s) => s.visiblePhotoIds)
 
   const containerRef = useRef<HTMLDivElement>(null)
   const previouslyFocusedRef = useRef<HTMLElement | null>(null)
@@ -20,7 +21,23 @@ export function PreviewView() {
 
   // Same hook Timeline uses, so we share one cache entry rather than looking
   // it up by key (which broke when the key gained the filter params).
-  const { data: photos = [] } = usePhotosQuery()
+  const { data: rawPhotos = [] } = usePhotosQuery()
+
+  // Walk the timeline's visible-order sequence (published by Timeline
+  // into the photo store), which respects tag-grouping and any other
+  // grid-layout rearrangement. Falls back to the raw photos list when
+  // the sequence isn't populated yet — relevant on a fresh page load
+  // where the user opened preview before the timeline mounted.
+  const photos: Photo[] = useMemo(() => {
+    if (visiblePhotoIds.length === 0) return rawPhotos
+    const byId = new Map(rawPhotos.map((p) => [p.id, p]))
+    const out: Photo[] = []
+    for (const id of visiblePhotoIds) {
+      const p = byId.get(id)
+      if (p) out.push(p)
+    }
+    return out
+  }, [visiblePhotoIds, rawPhotos])
 
   const currentIndex = activePhotoId
     ? photos.findIndex((p) => p.id === activePhotoId)
diff --git a/frontend/src/components/timeline/Timeline.tsx b/frontend/src/components/timeline/Timeline.tsx
index fee1824..318d87d 100644
--- a/frontend/src/components/timeline/Timeline.tsx
+++ b/frontend/src/components/timeline/Timeline.tsx
@@ -172,6 +172,7 @@ export function Timeline() {
     togglePhotoSelection,
     clearSelection,
     openPreview,
+    setVisiblePhotoIds,
   } = usePhotoStore()
 
   const sortBy = useFilterStore((s) => s.sortBy)
@@ -294,6 +295,21 @@ export function Timeline() {
     [items]
   )
 
+  // Publish the flat visible-order id sequence to the photo store so
+  // PreviewView arrow nav (and the filmstrip) walks the same order the
+  // user sees in the grid. Includes duplicates from tag grouping —
+  // landing on the same photo's "second" appearance in the next tag
+  // bucket is the right behavior in tag mode.
+  useEffect(() => {
+    const ids: string[] = []
+    for (const row of photoRows) {
+      for (const cell of row.cells) {
+        ids.push(cell.photo.id)
+      }
+    }
+    setVisiblePhotoIds(ids)
+  }, [photoRows, setVisiblePhotoIds])
+
   // Locate the active photo in the visual grid. Returns the FIRST
   // (rowIndex, colIndex) where its id appears, since a tag-grouped view
   // can repeat a photo across groups. Returns null when there's no
diff --git a/frontend/src/hooks/usePhotosQuery.ts b/frontend/src/hooks/usePhotosQuery.ts
index d9c2ce1..2142310 100644
--- a/frontend/src/hooks/usePhotosQuery.ts
+++ b/frontend/src/hooks/usePhotosQuery.ts
@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 import { useQuery } from '@tanstack/react-query'
-import axios from 'axios'
 import { useFilterStore, filtersToParams } from '../store/filterStore'
+import api from '../services/api'
 import type { Photo } from '../types/photo'
 
 /**
@@ -50,8 +50,11 @@ export function usePhotosQuery() {
   return useQuery({
     queryKey: ['photos', filterParams],
     queryFn: async () => {
-      const response = await axios.get<{ photos: Photo[]; total: number }>(
-        'http://localhost:8001/api/v1/photos',
+      // Goes through the shared axios instance so it inherits the
+      // relative /api/v1 baseURL — same-origin behind the nginx / vite
+      // proxy, no CORS dance required from another machine.
+      const response = await api.get<{ photos: Photo[]; total: number }>(
+        '/photos',
         {
           params: {
             page: 1,
diff --git a/frontend/src/store/photoStore.ts b/frontend/src/store/photoStore.ts
index 40d7496..5fd3e6f 100644
--- a/frontend/src/store/photoStore.ts
+++ b/frontend/src/store/photoStore.ts
@@ -10,6 +10,12 @@ interface PhotoStore {
   lastSelectedIndex: number | null
   rangeStartIndex: number | null
   viewMode: ViewMode
+  /** Flat sequence of photo ids in the order they currently appear in
+   *  the timeline grid (including duplicates from tag-grouping). The
+   *  preview view walks this sequence so arrow nav matches the order
+   *  the user actually sees. Owned by the Timeline component, which
+   *  rewrites it whenever its layout items change. */
+  visiblePhotoIds: string[]
 
   setPhotos: (photos: Photo[]) => void
   selectPhoto: (id: string, index: number) => void
@@ -19,6 +25,7 @@ interface PhotoStore {
   clearSelection: () => void
   setActivePhoto: (id: string | null) => void
   setViewMode: (mode: ViewMode) => void
+  setVisiblePhotoIds: (ids: string[]) => void
   openPreview: (id: string) => void
   closePreview: () => void
 }
@@ -30,6 +37,7 @@ export const usePhotoStore = create<PhotoStore>((set) => ({
   lastSelectedIndex: null,
   rangeStartIndex: null,
   viewMode: 'grid',
+  visiblePhotoIds: [],
 
   setPhotos: (photos) => set({ photos }),
   
@@ -73,6 +81,8 @@ export const usePhotoStore = create<PhotoStore>((set) => ({
 
   setViewMode: (mode) => set({ viewMode: mode }),
 
+  setVisiblePhotoIds: (visiblePhotoIds) => set({ visiblePhotoIds }),
+
   openPreview: (id) => set({ viewMode: 'preview', activePhotoId: id }),
 
   closePreview: () => set({ viewMode: 'grid' }),