diff --git a/distribution_fe/app/(dashboard)/stores/[id]/page.tsx b/distribution_fe/app/(dashboard)/stores/[id]/page.tsx
index 40b04a9..ff610e7 100644
--- a/distribution_fe/app/(dashboard)/stores/[id]/page.tsx
+++ b/distribution_fe/app/(dashboard)/stores/[id]/page.tsx
@@ -8,8 +8,8 @@ import { ArrowLeft01Icon, PencilEdit01Icon } from '@hugeicons/core-free-icons'
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { toast } from '@/components/ui/toast'
-import { stores as storesApi, getApiError } from '@/lib/api/index'
-import type { StoreResponse, KycStatus } from '@/types/api'
+import { stores as storesApi, routes as routesApi, getApiError, getPaginatedItems } from '@/lib/api/index'
+import type { StoreResponse, KycStatus, RouteResponse } from '@/types/api'
 
 const LocationPicker = dynamic(
   () => import('../_components/location-picker').then((m) => m.LocationPicker),
@@ -53,6 +53,7 @@ export default function StoreViewPage() {
 
   const [store, setStore] = useState<StoreResponse | null>(null)
   const [loading, setLoading] = useState(true)
+  const [routesList, setRoutesList] = useState<RouteResponse[]>([])
 
   useEffect(() => {
     storesApi.get(id)
@@ -63,6 +64,14 @@ export default function StoreViewPage() {
       .finally(() => setLoading(false))
   }, [id])
 
+  useEffect(() => {
+    routesApi.list({ pageSize: 200 })
+      .then((res) => setRoutesList(getPaginatedItems(res)))
+      .catch((err) => toast.add({ title: 'Failed to load routes', description: getApiError(err), type: 'error' }))
+  }, [])
+
+  const routeName = store ? routesList.find((r) => r.id === store.routeId)?.routeName : undefined
+
   const availableCredit = store ? store.creditLimit - store.outstandingBalance : 0
 
   return (
@@ -129,8 +138,8 @@ export default function StoreViewPage() {
             <div className="rounded-2xl border px-4">
               <DetailRow label="Owner">{store.ownerName}</DetailRow>
               <DetailRow label="Address">{store.storeAddress}</DetailRow>
-              <DetailRow label="Route ID">
-                <span className="font-mono text-xs">{store.routeId}</span>
+              <DetailRow label="Route">
+                {routeName ?? <span className="font-mono text-xs">{store.routeId}</span>}
               </DetailRow>
               {store.segment && (
                 <DetailRow label="Segment">{store.segment}</DetailRow>
diff --git a/distribution_fe/next.config.ts b/distribution_fe/next.config.ts
index f62ca42..3b32baf 100644
--- a/distribution_fe/next.config.ts
+++ b/distribution_fe/next.config.ts
@@ -1,5 +1,11 @@
 import type { NextConfig } from "next"
 
-const nextConfig: NextConfig = {}
+const nextConfig: NextConfig = {
+  // react-leaflet's MapContainer doesn't support Strict Mode's dev-only double-invoke of
+  // mount effects — Leaflet's own map cleanup isn't synchronous, so the second init crashes
+  // with "Cannot read properties of undefined (reading 'appendChild')" on any page using
+  // LocationPicker. Production builds never double-invoke, so this only affects local dev.
+  reactStrictMode: false,
+}
 
 export default nextConfig