diff --git a/starpilot/system/the_galaxy/assets/components/recordings/dashcam_routes.js b/starpilot/system/the_galaxy/assets/components/recordings/dashcam_routes.js
index 142dd616a..7ac402262 100644
--- a/starpilot/system/the_galaxy/assets/components/recordings/dashcam_routes.js
+++ b/starpilot/system/the_galaxy/assets/components/recordings/dashcam_routes.js
@@ -12,6 +12,7 @@ import {
   groupRoutesForView,
   MAX_RENDERED_ROUTES,
   normalizeRoute,
+  routeViewRenderKey,
 } from "/assets/components/recordings/dashcam_routes_helpers.js"
 
 const state = reactive({
@@ -114,8 +115,6 @@ function changeSortOrder(event) {
   const sortOrder = String(event.target.value || "")
   if (!["newest", "oldest", "longest", "shortest"].includes(sortOrder)) return
   state.sortOrder = sortOrder
-  // Replacing the array forces the keyed route templates to move immediately.
-  state.routes = [...state.routes]
 }
 
 if (!isGalaxyTunnel()) refresh()
@@ -853,6 +852,7 @@ export function RouteRecordings() {
         ${() => {
           const view = buildRouteView(state.routes, { preservedOnly: state.showPreservedOnly, searchQuery: state.searchQuery, sortOrder: state.sortOrder })
           const groups = groupRoutesForView(view.visible, state.sortOrder)
+          const renderKey = routeViewRenderKey(view.visible, state.sortOrder, state.viewMode)
 
           return html`
             <div class="dashcam-results-summary" aria-live="polite">
@@ -863,7 +863,7 @@ export function RouteRecordings() {
             ${state.isDeletingAll ? html`<p class="screen-recordings-message">Deleting routes&hellip;</p>` : ""}
             ${!view.visible.length && state.loading ? html`<div class="dashcam-loading"><span></span><p>Finding local routes&hellip;</p></div>` : ""}
             ${!view.visible.length && !state.loading && !state.isDeletingAll ? html`<div class="dashcam-empty-state"><i class="bi bi-camera-reels"></i><p>${state.routes.length ? "No routes match these filters." : "No routes found."}</p></div>` : ""}
-            <div class="dashcam-date-groups">
+            <div class="dashcam-date-groups" data-view-key="${renderKey}">
               ${groups.map(group => html`
                 <section class="dashcam-date-group">
                   <div class="dashcam-date-group-header">
diff --git a/starpilot/system/the_galaxy/assets/components/recordings/dashcam_routes_helpers.js b/starpilot/system/the_galaxy/assets/components/recordings/dashcam_routes_helpers.js
index e4aa5b1ad..fc8600882 100644
--- a/starpilot/system/the_galaxy/assets/components/recordings/dashcam_routes_helpers.js
+++ b/starpilot/system/the_galaxy/assets/components/recordings/dashcam_routes_helpers.js
@@ -177,6 +177,11 @@ export function buildRouteView(routes, options = {}) {
   }
 }
 
+export function routeViewRenderKey(routes, sortOrder = "newest", viewMode = "list") {
+  const routeNames = Array.isArray(routes) ? routes.map(route => String(route?.name || "")).join(",") : ""
+  return `${viewMode}:${sortOrder}:${routeNames}`
+}
+
 function localDayKey(date) {
   return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}`
 }
diff --git a/starpilot/system/the_galaxy/tests/test_dashcam_routes_helpers.py b/starpilot/system/the_galaxy/tests/test_dashcam_routes_helpers.py
index 897aac37a..1e1a5c4c9 100644
--- a/starpilot/system/the_galaxy/tests/test_dashcam_routes_helpers.py
+++ b/starpilot/system/the_galaxy/tests/test_dashcam_routes_helpers.py
@@ -83,7 +83,7 @@ def test_sort_order_select_and_route_items_are_keyed_and_reactive():
   source = COMPONENT_PATH.read_text(encoding="utf-8")
 
   assert '<select value="${() => state.sortOrder}" @input="${changeSortOrder}" @change="${changeSortOrder}">' in source
-  assert "state.routes = [...state.routes]" in source
+  assert 'data-view-key="${renderKey}"' in source
   assert ".key(group.key)" in source
   assert ".key(route.name)" in source
 
@@ -264,6 +264,19 @@ def test_date_sorts_still_group_by_day():
   assert labels == ["August 22, 2026", "August 20, 2026"]
 
 
+def test_route_view_render_key_changes_with_displayed_order_and_mode():
+  result = evaluate('''
+    const routes = [{ name: "a" }, { name: "b" }]
+    return [
+      routeViewRenderKey(routes, "newest", "list"),
+      routeViewRenderKey([...routes].reverse(), "oldest", "list"),
+      routeViewRenderKey(routes, "newest", "grid"),
+    ]
+  ''')
+
+  assert result == ["list:newest:a,b", "list:oldest:b,a", "grid:newest:a,b"]
+
+
 def test_grouping_an_empty_list_yields_no_groups():
   assert evaluate("""
     return [