diff --git a/client/src/mobile/screens/trip/places/MPlacesBrowser.tsx b/client/src/mobile/screens/trip/places/MPlacesBrowser.tsx
index 02301be56..394d46549 100644
--- a/client/src/mobile/screens/trip/places/MPlacesBrowser.tsx
+++ b/client/src/mobile/screens/trip/places/MPlacesBrowser.tsx
@@ -8,6 +8,7 @@ import { useTripStore } from '../../../../store/tripStore'
 import { useAddonStore } from '../../../../store/addonStore'
 import PlaceAvatar from '../../../../components/shared/PlaceAvatar'
 import { getCategoryIcon } from '../../../../components/shared/categoryIcons'
+import { resolveTrackColor } from '../../../../components/Map/trackColors'
 import MConfirmSheet from '../../settings/MConfirmSheet'
 import type { MPlacesBrowserProps } from '../MTripShell'
 import type { Place } from '../../../../types'
@@ -290,6 +291,15 @@ export default function MPlacesBrowser({ planner, shell }: MPlacesBrowserProps)
                   <PlaceAvatar place={place} category={cat} size={40} />
                   <span className="min-w-0 flex-1">
                     <span className="flex items-center gap-[6px]">
+                      {/* Stroke in the track's colour — the mobile map is full-bleed
+                          with no sidebar, so this is the only thing tying a line to
+                          a row (#776). */}
+                      {place.route_geometry && (
+                        <span
+                          className="h-[3px] w-[14px] flex-none rounded-full"
+                          style={{ background: resolveTrackColor(place) }}
+                        />
+                      )}
                       <CatIcon size={12} strokeWidth={2.2} className="flex-none" style={{ color: cat?.color || 'var(--m-muted)' }} />
                       <span className="truncate text-[0.8125rem] font-semibold text-m-ink">{place.name}</span>
                     </span>
diff --git a/client/src/mobile/screens/trip/sheets/MPlaceSheet.tsx b/client/src/mobile/screens/trip/sheets/MPlaceSheet.tsx
index f0053d8bf..001e63fa5 100644
--- a/client/src/mobile/screens/trip/sheets/MPlaceSheet.tsx
+++ b/client/src/mobile/screens/trip/sheets/MPlaceSheet.tsx
@@ -1,7 +1,7 @@
 import { useMemo, useRef, useState } from 'react'
 import {
   Bookmark, Camera, ExternalLink, Loader2, Map as MapIcon, Navigation, Paperclip,
-  Pencil, Phone, Plus, Trash2, Upload, X,
+  Pencil, Phone, Plus, Route, Trash2, Upload, X,
 } from 'lucide-react'
 import MSheet from '../../../components/MSheet'
 import type { MTripSheetsProps } from '../MTripShell'
@@ -14,6 +14,8 @@ import { useSaveToCollectionStore } from '../../../../store/saveToCollectionStor
 import { collectionTargetFromPlace } from '../lib/collectionTarget'
 import { getCategoryIcon } from '../../../../components/shared/categoryIcons'
 import PlaceRating from '../../../../components/shared/StarRating'
+import TrackColorPicker from '../../../../components/shared/TrackColorPicker'
+import { resolveTrackColor, inheritedTrackColor } from '../../../../components/Map/trackColors'
 import { avatarSrc } from '../../../../utils/avatarSrc'
 import { openFile } from '../../../../utils/fileDownload'
 import { getGoogleMapsUrlForPlace } from '../../../../components/Planner/placeGoogleMaps'
@@ -42,6 +44,7 @@ export default function MPlaceSheet({ planner, shell }: MTripSheetsProps) {
   const [participantPickerOpen, setParticipantPickerOpen] = useState(false)
   const [uploading, setUploading] = useState(false)
   const [imgBusy, setImgBusy] = useState(false)
+  const [colorPickerOpen, setColorPickerOpen] = useState(false)
   const fileInputRef = useRef<HTMLInputElement | null>(null)
   const imageInputRef = useRef<HTMLInputElement | null>(null)
 
@@ -132,6 +135,15 @@ export default function MPlaceSheet({ planner, shell }: MTripSheetsProps) {
     }
   }
 
+  const handleTrackColor = async (color: string | null) => {
+    if (!place) return
+    try {
+      await planner.tripActions.updatePlace(planner.tripId, place.id, { route_color: color })
+    } catch (err: unknown) {
+      planner.toast.error(translateApiError(t, err, 'common.unknownError'))
+    }
+  }
+
   const handleImageRemove = async () => {
     if (!place) return
     setImgBusy(true)
@@ -290,6 +302,43 @@ export default function MPlaceSheet({ planner, shell }: MTripSheetsProps) {
               </>
             )}
 
+            {/* ── Track colour (#776) ── */}
+            {place.route_geometry && (
+              <>
+                <Eyebrow className="mb-[6px] mt-3">{t('inspector.trackColor')}</Eyebrow>
+                <div className={`rounded-[14px] px-3 py-[10px] ${INNER_CLS}`}>
+                  <button
+                    type="button"
+                    onClick={() => setColorPickerOpen(v => !v)}
+                    aria-expanded={colorPickerOpen}
+                    className="flex w-full items-center justify-between gap-3"
+                  >
+                    {/* The eyebrow above already names the section — this row says
+                        which colour is in effect, not the same word again. */}
+                    <span className="flex min-w-0 items-center gap-2">
+                      <Route size={14} className="shrink-0 text-m-muted" />
+                      <span className="truncate font-geist text-[0.75rem] font-medium">
+                        {place.route_color ?? t('inspector.trackColorAuto')}
+                      </span>
+                    </span>
+                    <span
+                      className="h-6 w-6 shrink-0 rounded-full ring-1 ring-inset ring-black/10 dark:ring-white/15"
+                      style={{ background: resolveTrackColor(place) }}
+                    />
+                  </button>
+                  {colorPickerOpen && (
+                    <div className="mt-[10px] border-t border-[color:var(--m-faint)] pt-[10px]">
+                      <TrackColorPicker
+                        value={place.route_color ?? null}
+                        inheritedColor={inheritedTrackColor(place)}
+                        onChange={handleTrackColor}
+                      />
+                    </div>
+                  )}
+                </div>
+              </>
+            )}
+
             {/* ── Day assignments ── */}
             <Eyebrow className="mb-[6px] mt-3">{t('mobileTrip.assignedDays')}</Eyebrow>
             <div className="flex flex-wrap items-center gap-[6px]">