diff --git a/src/components/map/index.spec.tsx b/src/components/map/index.spec.tsx
index 0cfe82d..50b425a 100644
--- a/src/components/map/index.spec.tsx
+++ b/src/components/map/index.spec.tsx
@@ -198,6 +198,18 @@ vi.mock('./parts/route-lines', () => ({
   RouteLines: vi.fn(() => <div data-testid="route-lines">Route Lines</div>),
 }));
 
+vi.mock('./parts/trace-input-line', () => ({
+  TraceRouteInputLine: vi.fn(() => (
+    <div data-testid="trace-input-line">Trace Input Line</div>
+  )),
+}));
+
+vi.mock('./parts/trace-route-markers', () => ({
+  TraceRouteMarkers: vi.fn(() => (
+    <div data-testid="trace-route-markers">Trace Route Markers</div>
+  )),
+}));
+
 vi.mock('./parts/highlight-segment', () => ({
   HighlightSegment: vi.fn(() => (
     <div data-testid="highlight-segment">Highlight</div>
@@ -345,6 +357,12 @@ describe('MapComponent', () => {
     expect(screen.getByTestId('route-lines')).toBeInTheDocument();
   });
 
+  it('should render trace-route input and marker layers', () => {
+    render(<MapComponent />);
+    expect(screen.getByTestId('trace-input-line')).toBeInTheDocument();
+    expect(screen.getByTestId('trace-route-markers')).toBeInTheDocument();
+  });
+
   it('should render highlight segment component', () => {
     render(<MapComponent />);
     expect(screen.getByTestId('highlight-segment')).toBeInTheDocument();
diff --git a/src/components/map/index.tsx b/src/components/map/index.tsx
index 2816eb4..f46bf2a 100644
--- a/src/components/map/index.tsx
+++ b/src/components/map/index.tsx
@@ -67,6 +67,8 @@ import {
   useReverseGeocodeIsochrones,
 } from '@/hooks/use-isochrones-queries';
 import { toast } from 'sonner';
+import { TraceRouteMarkers } from './parts/trace-route-markers';
+import { TraceRouteInputLine } from './parts/trace-input-line';
 
 const { center, zoom: zoom_initial } = getInitialMapPosition();
 
@@ -835,7 +837,9 @@ export const MapComponent = () => {
           onStyleChange={handleStyleChange}
           onCustomStyleLoaded={handleCustomStyleLoaded}
         />
+        <TraceRouteInputLine />
         <RouteLines />
+        <TraceRouteMarkers />
         <HighlightSegment />
         <IsochronePolygons />
         <IsochroneLocations />
diff --git a/src/components/map/parts/route-lines.spec.tsx b/src/components/map/parts/route-lines.spec.tsx
index 03e9db5..b8b3311 100644
--- a/src/components/map/parts/route-lines.spec.tsx
+++ b/src/components/map/parts/route-lines.spec.tsx
@@ -17,13 +17,48 @@ vi.mock('react-map-gl/maplibre', () => ({
 }));
 
 const mockUseDirectionsStore = vi.fn();
+const mockUseTraceRouteStore = vi.fn();
+const mockUseParams = vi.hoisted(() =>
+  vi.fn(() => ({ activeTab: 'directions' }))
+);
+
+vi.mock('@tanstack/react-router', () => ({
+  useParams: mockUseParams,
+}));
 
 vi.mock('@/stores/directions-store', () => ({
   useDirectionsStore: (selector: (state: unknown) => unknown) =>
     mockUseDirectionsStore(selector),
 }));
 
-const createMockState = (overrides = {}) => ({
+vi.mock('@/stores/trace-route-store', () => ({
+  useTraceRouteStore: (selector: (state: unknown) => unknown) =>
+    mockUseTraceRouteStore(selector),
+}));
+
+interface MockRouteGeometry {
+  decodedGeometry: number[][];
+  trip: {
+    summary: {
+      length: number;
+      time: number;
+    };
+  };
+  alternates: MockRouteGeometry[];
+}
+
+interface MockRouteState {
+  results: {
+    data: MockRouteGeometry | null;
+    show: Record<number, boolean>;
+  };
+  successful: boolean;
+  activeRouteIndex: number;
+}
+
+const createMockState = (
+  overrides: Partial<MockRouteState> = {}
+): MockRouteState => ({
   results: {
     data: {
       decodedGeometry: [
@@ -40,17 +75,38 @@ const createMockState = (overrides = {}) => ({
   ...overrides,
 });
 
+const setupStores = ({
+  activeTab = 'directions',
+  directionState = createMockState(),
+  traceState = createMockState(),
+}: {
+  activeTab?: string;
+  directionState?: MockRouteState;
+  traceState?: MockRouteState;
+} = {}) => {
+  mockUseParams.mockReturnValue({ activeTab });
+  mockUseDirectionsStore.mockImplementation((selector) =>
+    selector(directionState)
+  );
+  mockUseTraceRouteStore.mockImplementation((selector) => selector(traceState));
+};
+
 describe('RouteLines', () => {
   beforeEach(() => {
     mockSource.mockClear();
     mockLayer.mockClear();
     mockUseDirectionsStore.mockClear();
+    mockUseTraceRouteStore.mockClear();
+    mockUseParams.mockReturnValue({ activeTab: 'directions' });
   });
 
   it('should render nothing when results data is null', () => {
-    mockUseDirectionsStore.mockImplementation((selector) => {
-      const state = { results: { data: null, show: {} }, successful: false };
-      return selector(state);
+    setupStores({
+      directionState: {
+        results: { data: null, show: {} },
+        successful: false,
+        activeRouteIndex: -1,
+      },
     });
 
     const { container } = render(<RouteLines />);
@@ -59,10 +115,7 @@ describe('RouteLines', () => {
   });
 
   it('should render nothing when not successful', () => {
-    mockUseDirectionsStore.mockImplementation((selector) => {
-      const state = createMockState({ successful: false });
-      return selector(state);
-    });
+    setupStores({ directionState: createMockState({ successful: false }) });
 
     const { container } = render(<RouteLines />);
 
@@ -70,10 +123,7 @@ describe('RouteLines', () => {
   });
 
   it('should render Source when data is valid', () => {
-    mockUseDirectionsStore.mockImplementation((selector) => {
-      const state = createMockState();
-      return selector(state);
-    });
+    setupStores();
 
     render(<RouteLines />);
 
@@ -83,10 +133,7 @@ describe('RouteLines', () => {
   });
 
   it('should render two layers (outline and line)', () => {
-    mockUseDirectionsStore.mockImplementation((selector) => {
-      const state = createMockState();
-      return selector(state);
-    });
+    setupStores();
 
     render(<RouteLines />);
 
@@ -94,10 +141,7 @@ describe('RouteLines', () => {
   });
 
   it('should render outline layer with white color', () => {
-    mockUseDirectionsStore.mockImplementation((selector) => {
-      const state = createMockState();
-      return selector(state);
-    });
+    setupStores();
 
     render(<RouteLines />);
 
@@ -111,10 +155,7 @@ describe('RouteLines', () => {
   });
 
   it('should render line layer with dynamic color', () => {
-    mockUseDirectionsStore.mockImplementation((selector) => {
-      const state = createMockState();
-      return selector(state);
-    });
+    setupStores();
 
     render(<RouteLines />);
 
@@ -132,10 +173,7 @@ describe('RouteLines', () => {
   });
 
   it('should convert lat/lng to lng/lat format', () => {
-    mockUseDirectionsStore.mockImplementation((selector) => {
-      const state = createMockState();
-      return selector(state);
-    });
+    setupStores();
 
     render(<RouteLines />);
 
@@ -144,4 +182,38 @@ describe('RouteLines', () => {
     expect(coords[0]).toEqual([10, 50]);
     expect(coords[1]).toEqual([11, 51]);
   });
+
+  it('should use trace-route results when active tab is trace-route', () => {
+    setupStores({
+      activeTab: 'trace-route',
+      directionState: {
+        results: { data: null, show: {} },
+        successful: false,
+        activeRouteIndex: -1,
+      },
+      traceState: createMockState({
+        activeRouteIndex: 0,
+        results: {
+          data: {
+            decodedGeometry: [
+              [1, 2],
+              [3, 4],
+            ],
+            trip: { summary: { length: 2, time: 60 } },
+            alternates: [],
+          },
+          show: { 0: true },
+        },
+      }),
+    });
+
+    render(<RouteLines />);
+
+    const sourceCall = mockSource.mock.calls[0]?.[0];
+    const coords = sourceCall?.data.features[0].geometry.coordinates;
+    expect(coords).toEqual([
+      [2, 1],
+      [4, 3],
+    ]);
+  });
 });
diff --git a/src/components/map/parts/route-lines.tsx b/src/components/map/parts/route-lines.tsx
index 8a76cfa..a47a3a4 100644
--- a/src/components/map/parts/route-lines.tsx
+++ b/src/components/map/parts/route-lines.tsx
@@ -4,22 +4,39 @@ import { useDirectionsStore } from '@/stores/directions-store';
 import { routeObjects } from '../constants';
 import type { Feature, FeatureCollection, LineString } from 'geojson';
 import type { ParsedDirectionsGeometry } from '@/components/types';
+import { useParams } from '@tanstack/react-router';
+import { useTraceRouteStore } from '@/stores/trace-route-store';
 
 export function RouteLines() {
+  const { activeTab } = useParams({ from: '/$activeTab' });
+  const isTraceRoute = activeTab === 'trace-route';
+
   const directionResults = useDirectionsStore((state) => state.results);
   const directionsSuccessful = useDirectionsStore((state) => state.successful);
-  const activeRouteIndex = useDirectionsStore(
+  const activeDirectionRouteIndex = useDirectionsStore(
     (state) => state.activeRouteIndex
   );
 
+  const traceRouteResults = useTraceRouteStore((state) => state.results);
+  const traceRouteSuccessful = useTraceRouteStore((state) => state.successful);
+  const traceRouteActiveIndex = useTraceRouteStore(
+    (state) => state.activeRouteIndex
+  );
+
+  const results = isTraceRoute ? traceRouteResults : directionResults;
+  const successful = isTraceRoute ? traceRouteSuccessful : directionsSuccessful;
+  const activeRouteIndex = isTraceRoute
+    ? traceRouteActiveIndex
+    : activeDirectionRouteIndex;
+
   const data = useMemo(() => {
-    if (!directionResults.data || !directionsSuccessful) return null;
+    if (!results.data || !successful) return null;
 
-    const hasNoData = Object.keys(directionResults.data).length === 0;
+    const hasNoData = Object.keys(results.data).length === 0;
     if (hasNoData) return null;
 
-    const response = directionResults.data;
-    const showRoutes = directionResults.show || {};
+    const response = results.data;
+    const showRoutes = results.show || {};
     const features: Feature<LineString>[] = [];
 
     if (response.alternates) {
@@ -77,7 +94,7 @@ export function RouteLines() {
       type: 'FeatureCollection',
       features,
     } as FeatureCollection;
-  }, [directionResults, directionsSuccessful, activeRouteIndex]);
+  }, [results, successful, activeRouteIndex]);
 
   if (!data) return null;
 
diff --git a/src/components/map/parts/trace-input-line.spec.tsx b/src/components/map/parts/trace-input-line.spec.tsx
new file mode 100644
index 0000000..456667d
--- /dev/null
+++ b/src/components/map/parts/trace-input-line.spec.tsx
@@ -0,0 +1,96 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render } from '@testing-library/react';
+import { TraceRouteInputLine } from './trace-input-line';
+
+const mockSource = vi.fn();
+const mockLayer = vi.fn();
+const mockUseParams = vi.hoisted(() =>
+  vi.fn(() => ({ activeTab: 'trace-route' }))
+);
+const mockUseTraceRouteStore = vi.fn();
+
+vi.mock('@tanstack/react-router', () => ({
+  useParams: mockUseParams,
+}));
+
+vi.mock('react-map-gl/maplibre', () => ({
+  Source: (props: Record<string, unknown>) => {
+    mockSource(props);
+    return <div data-testid="source">{props.children as React.ReactNode}</div>;
+  },
+  Layer: (props: Record<string, unknown>) => {
+    mockLayer(props);
+    return <div data-testid="layer" />;
+  },
+}));
+
+vi.mock('@/stores/trace-route-store', () => ({
+  useTraceRouteStore: (selector: (state: unknown) => unknown) =>
+    mockUseTraceRouteStore(selector),
+}));
+
+const setupStore = (inputGeometry: number[][] | null) => {
+  mockUseTraceRouteStore.mockImplementation((selector) =>
+    selector({ inputGeometry })
+  );
+};
+
+describe('TraceRouteInputLine', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseParams.mockReturnValue({ activeTab: 'trace-route' });
+  });
+
+  it('should render nothing when not on trace-route tab', () => {
+    mockUseParams.mockReturnValue({ activeTab: 'directions' });
+    setupStore([
+      [10, 20],
+      [11, 21],
+    ]);
+
+    const { container } = render(<TraceRouteInputLine />);
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render nothing when input geometry has less than 2 points', () => {
+    setupStore([[10, 20]]);
+
+    const { container } = render(<TraceRouteInputLine />);
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render source and layer for valid trace input geometry', () => {
+    setupStore([
+      [10, 20],
+      [11, 21],
+    ]);
+
+    render(<TraceRouteInputLine />);
+
+    expect(mockSource).toHaveBeenCalledWith(
+      expect.objectContaining({ id: 'trace-input', type: 'geojson' })
+    );
+    expect(mockLayer).toHaveBeenCalledWith(
+      expect.objectContaining({ id: 'trace-input-line', type: 'line' })
+    );
+
+    const sourceCall = mockSource.mock.calls[0]?.[0];
+    expect(sourceCall?.data.features[0].geometry.coordinates).toEqual([
+      [20, 10],
+      [21, 11],
+    ]);
+  });
+
+  it('should filter invalid points and return null if fewer than 2 valid remain', () => {
+    setupStore([
+      [10, 20],
+      [Number.NaN, 21],
+    ]);
+
+    const { container } = render(<TraceRouteInputLine />);
+
+    expect(container.firstChild).toBeNull();
+  });
+});
diff --git a/src/components/map/parts/trace-input-line.tsx b/src/components/map/parts/trace-input-line.tsx
new file mode 100644
index 0000000..8254cae
--- /dev/null
+++ b/src/components/map/parts/trace-input-line.tsx
@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import { Source, Layer } from 'react-map-gl/maplibre';
+import { useParams } from '@tanstack/react-router';
+import { useTraceRouteStore } from '@/stores/trace-route-store';
+import type { FeatureCollection, LineString, Position } from 'geojson';
+
+export function TraceRouteInputLine() {
+  const { activeTab } = useParams({ from: '/$activeTab' });
+  const coords = useTraceRouteStore((s) => s.inputGeometry);
+
+  const isTraceRoute = activeTab === 'trace-route';
+
+  const data = useMemo(() => {
+    if (!isTraceRoute || !coords || coords.length < 2) return null;
+
+    const positions: Position[] = coords
+      .map((p) => {
+        const lat = p[0];
+        const lng = p[1];
+        if (!Number.isFinite(lat) || !Number.isFinite(lng)) return null;
+        return [lng, lat] as Position;
+      })
+      .filter((p): p is Position => p !== null);
+
+    if (positions.length < 2) return null;
+
+    const geojson: FeatureCollection<LineString> = {
+      type: 'FeatureCollection',
+      features: [
+        {
+          type: 'Feature',
+          properties: {},
+          geometry: {
+            type: 'LineString',
+            coordinates: positions,
+          },
+        },
+      ],
+    };
+
+    return geojson;
+  }, [isTraceRoute, coords]);
+
+  if (!data) return null;
+
+  return (
+    <Source id="trace-input" type="geojson" data={data}>
+      <Layer
+        id="trace-input-line"
+        type="line"
+        paint={{
+          'line-color': '#6B7280',
+          'line-width': 3,
+          'line-opacity': 0.6,
+        }}
+      />
+    </Source>
+  );
+}
diff --git a/src/components/map/parts/trace-route-markers.spec.tsx b/src/components/map/parts/trace-route-markers.spec.tsx
new file mode 100644
index 0000000..84e852a
--- /dev/null
+++ b/src/components/map/parts/trace-route-markers.spec.tsx
@@ -0,0 +1,91 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { TraceRouteMarkers } from './trace-route-markers';
+
+const mockUseParams = vi.hoisted(() =>
+  vi.fn(() => ({ activeTab: 'trace-route' }))
+);
+const mockUseTraceRouteStore = vi.fn();
+const mockMarker = vi.fn();
+
+vi.mock('@tanstack/react-router', () => ({
+  useParams: mockUseParams,
+}));
+
+vi.mock('react-map-gl/maplibre', () => ({
+  Marker: (props: Record<string, unknown>) => {
+    mockMarker(props);
+    return <div data-testid="marker">{props.children as React.ReactNode}</div>;
+  },
+}));
+
+vi.mock('@/stores/trace-route-store', () => ({
+  useTraceRouteStore: (selector: (state: unknown) => unknown) =>
+    mockUseTraceRouteStore(selector),
+}));
+
+const setupStore = ({
+  inputShape = [] as Array<{ lat: number; lon: number; type?: string }>,
+} = {}) => {
+  mockUseTraceRouteStore.mockImplementation((selector) =>
+    selector({
+      inputShape,
+    })
+  );
+};
+
+describe('TraceRouteMarkers', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseParams.mockReturnValue({ activeTab: 'trace-route' });
+  });
+
+  it('should render nothing outside trace-route tab', () => {
+    mockUseParams.mockReturnValue({ activeTab: 'directions' });
+    setupStore({
+      inputShape: [
+        { lat: 52.5, lon: 13.4, type: 'break' },
+        { lat: 52.6, lon: 13.5, type: 'break' },
+      ],
+    });
+
+    const { container } = render(<TraceRouteMarkers />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render nothing when there are no break points', () => {
+    setupStore({
+      inputShape: [
+        { lat: 52.5, lon: 13.4, type: 'via' },
+        { lat: 52.6, lon: 13.5, type: 'through' },
+      ],
+    });
+
+    const { container } = render(<TraceRouteMarkers />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render numbered markers for break points', () => {
+    setupStore({
+      inputShape: [
+        { lat: 52.5, lon: 13.4, type: 'break' },
+        { lat: 52.55, lon: 13.45, type: 'via' },
+        { lat: 52.6, lon: 13.5, type: 'break' },
+      ],
+    });
+
+    render(<TraceRouteMarkers />);
+
+    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(mockMarker).toHaveBeenCalledTimes(2);
+    expect(mockMarker).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({ longitude: 13.4, latitude: 52.5 })
+    );
+    expect(mockMarker).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({ longitude: 13.5, latitude: 52.6 })
+    );
+  });
+});
diff --git a/src/components/map/parts/trace-route-markers.tsx b/src/components/map/parts/trace-route-markers.tsx
new file mode 100644
index 0000000..3bc9790
--- /dev/null
+++ b/src/components/map/parts/trace-route-markers.tsx
@@ -0,0 +1,31 @@
+import { Marker } from 'react-map-gl/maplibre';
+import { useTraceRouteStore } from '@/stores/trace-route-store';
+import { useParams } from '@tanstack/react-router';
+
+export function TraceRouteMarkers() {
+  const { activeTab } = useParams({ from: '/$activeTab' });
+
+  const inputShape = useTraceRouteStore((s) => s.inputShape);
+
+  if (activeTab !== 'trace-route') return null;
+
+  const breakPoints = inputShape?.filter((p) => p.type === 'break') ?? [];
+  if (breakPoints.length === 0) return null;
+
+  return (
+    <>
+      {breakPoints.map((p, idx) => (
+        <Marker
+          key={`break-${idx}-${p.lat}-${p.lon}`}
+          longitude={p.lon}
+          latitude={p.lat}
+          anchor="bottom"
+        >
+          <div className="bg-blue-600 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs font-bold">
+            {idx + 1}
+          </div>
+        </Marker>
+      ))}
+    </>
+  );
+}
diff --git a/src/components/route-planner.spec.tsx b/src/components/route-planner.spec.tsx
index 06a104a..532065b 100644
--- a/src/components/route-planner.spec.tsx
+++ b/src/components/route-planner.spec.tsx
@@ -7,6 +7,9 @@ const mockToggleDirections = vi.fn();
 const mockRefetchDirections = vi.fn();
 const mockRefetchIsochrones = vi.fn();
 const mockNavigate = vi.fn();
+const mockClearRoutes = vi.fn();
+const mockClearWaypoints = vi.fn();
+const mockClearTraceRoute = vi.fn();
 
 vi.mock('@tanstack/react-router', () => ({
   useParams: vi.fn(() => ({ activeTab: 'directions' })),
@@ -61,6 +64,29 @@ vi.mock('./tiles/tiles', () => ({
   )),
 }));
 
+vi.mock('./trace-route/trace-route', () => ({
+  TraceRouteControl: vi.fn(() => (
+    <div data-testid="mock-trace-route-control">Trace Route Control</div>
+  )),
+}));
+
+vi.mock('@/stores/directions-store', () => ({
+  useDirectionsStore: {
+    getState: vi.fn(() => ({
+      clearRoutes: mockClearRoutes,
+      clearWaypoints: mockClearWaypoints,
+    })),
+  },
+}));
+
+vi.mock('@/stores/trace-route-store', () => ({
+  useTraceRouteStore: {
+    getState: vi.fn(() => ({
+      clearTraceRoute: mockClearTraceRoute,
+    })),
+  },
+}));
+
 vi.mock('./profile-picker', () => ({
   ProfilePicker: vi.fn(({ onProfileChange }) => (
     <div data-testid="mock-profile-picker">
@@ -94,6 +120,7 @@ describe('RoutePlanner', () => {
     expect(screen.getByTestId('directions-tab-button')).toBeInTheDocument();
     expect(screen.getByTestId('isochrones-tab-button')).toBeInTheDocument();
     expect(screen.getByTestId('tiles-tab-button')).toBeInTheDocument();
+    expect(screen.getByTestId('trace-route-tab-button')).toBeInTheDocument();
   });
 
   it('should render close button', () => {
@@ -181,6 +208,40 @@ describe('RoutePlanner', () => {
     });
   });
 
+  it('should render TraceRouteControl when on trace-route tab', async () => {
+    const router = await import('@tanstack/react-router');
+    vi.mocked(router.useParams).mockReturnValue({ activeTab: 'trace-route' });
+
+    render(<RoutePlanner />);
+
+    expect(screen.getByTestId('mock-trace-route-control')).toBeInTheDocument();
+  });
+
+  it('should clear directions state when switching to trace-route tab', async () => {
+    const router = await import('@tanstack/react-router');
+    vi.mocked(router.useParams).mockReturnValue({ activeTab: 'directions' });
+
+    const { rerender } = render(<RoutePlanner />);
+
+    vi.mocked(router.useParams).mockReturnValue({ activeTab: 'trace-route' });
+    rerender(<RoutePlanner />);
+
+    expect(mockClearWaypoints).toHaveBeenCalled();
+    expect(mockClearRoutes).toHaveBeenCalled();
+  });
+
+  it('should clear trace-route state when switching back to directions tab', async () => {
+    const router = await import('@tanstack/react-router');
+    vi.mocked(router.useParams).mockReturnValue({ activeTab: 'trace-route' });
+
+    const { rerender } = render(<RoutePlanner />);
+
+    vi.mocked(router.useParams).mockReturnValue({ activeTab: 'directions' });
+    rerender(<RoutePlanner />);
+
+    expect(mockClearTraceRoute).toHaveBeenCalled();
+  });
+
   describe('when on tiles tab', () => {
     beforeEach(async () => {
       const router = await import('@tanstack/react-router');
diff --git a/src/components/route-planner.tsx b/src/components/route-planner.tsx
index a492fa4..ac863d2 100644
--- a/src/components/route-planner.tsx
+++ b/src/components/route-planner.tsx
@@ -1,4 +1,4 @@
-import { lazy, Suspense } from 'react';
+import { lazy, Suspense, useEffect, useRef } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { format } from 'date-fns';
 import { DirectionsControl } from './directions/directions';
@@ -25,6 +25,9 @@ import { SettingsButton } from './settings-button';
 import type { Profile } from '@/stores/common-store';
 import { useDirectionsQuery } from '@/hooks/use-directions-queries';
 import { useIsochronesQuery } from '@/hooks/use-isochrones-queries';
+import { TraceRouteControl } from './trace-route/trace-route';
+import { useDirectionsStore } from '@/stores/directions-store';
+import { useTraceRouteStore } from '@/stores/trace-route-store';
 
 const TAB_CONFIG = {
   directions: {
@@ -39,6 +42,10 @@ const TAB_CONFIG = {
     title: 'Tiles',
     description: 'View and manage map tiles',
   },
+  'trace-route': {
+    title: 'Trace Route',
+    description: 'Trace a route from a GPS trace',
+  },
 } as const;
 
 export const RoutePlanner = () => {
@@ -51,9 +58,26 @@ export const RoutePlanner = () => {
   const { refetch: refetchIsochrones } = useIsochronesQuery();
   const loading = useCommonStore((state) => state.loading);
   const toggleDirections = useCommonStore((state) => state.toggleDirections);
+  const prevTab = useRef<string | null>(null);
 
   const tabConfig = TAB_CONFIG[activeTab as keyof typeof TAB_CONFIG];
 
+  useEffect(() => {
+    const prev = prevTab.current;
+    prevTab.current = activeTab;
+
+    if (!prev || prev === activeTab) return;
+    if (activeTab === 'trace-route') {
+      const { clearRoutes, clearWaypoints } = useDirectionsStore.getState();
+      clearWaypoints();
+      clearRoutes();
+    }
+    if (activeTab === 'directions' && prev === 'trace-route') {
+      const { clearTraceRoute } = useTraceRouteStore.getState();
+      clearTraceRoute();
+    }
+  }, [activeTab]);
+
   const {
     data: lastUpdate,
     isLoading: isLoadingLastUpdate,
@@ -120,6 +144,12 @@ export const RoutePlanner = () => {
               <TabsTrigger value="tiles" data-testid="tiles-tab-button">
                 Tiles
               </TabsTrigger>
+              <TabsTrigger
+                value="trace-route"
+                data-testid="trace-route-tab-button"
+              >
+                Trace Route
+              </TabsTrigger>
             </TabsList>
             <Button
               variant="ghost"
@@ -159,6 +189,14 @@ export const RoutePlanner = () => {
               <TilesControl />
             </Suspense>
           </TabsContent>
+          <TabsContent
+            value="trace-route"
+            className="flex flex-col gap-3 px-2 flex-1 overflow-hidden min-h-0"
+          >
+            <Suspense fallback={<div>Loading...</div>}>
+              <TraceRouteControl />
+            </Suspense>
+          </TabsContent>
 
           {activeTab !== 'tiles' && (
             <div className="flex p-2 text-sm">
diff --git a/src/components/trace-route/maneuvers.tsx b/src/components/trace-route/maneuvers.tsx
new file mode 100644
index 0000000..8ae43a2
--- /dev/null
+++ b/src/components/trace-route/maneuvers.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+
+import type { Leg } from '@/components/types';
+import { Clock, MoveHorizontal, DollarSign, Ship } from 'lucide-react';
+import { MetricItem } from '@/components/ui/metric-item';
+import { RouteAttributes } from '@/components/ui/route-attributes';
+import { formatDuration } from '@/utils/date-time';
+import { getManeuverIcon } from '@/utils/get-maneuver-icon';
+
+const getLength = (length: number) => {
+  const visibleLength = length * 1000;
+  if (visibleLength < 1000) {
+    return visibleLength + 'm';
+  }
+  return (visibleLength / 1000).toFixed(2) + 'km';
+};
+
+interface ManeuversProps {
+  legs: Leg[];
+}
+
+export const Maneuvers = ({ legs }: ManeuversProps) => {
+  return (
+    <div className="flex flex-col gap-2">
+      {legs?.map((leg) =>
+        leg.maneuvers.map((mnv, j) => (
+          <React.Fragment key={j}>
+            <div className="flex border justify-between rounded-md p-2 bg-background items-center">
+              <div className="flex items-start gap-3">
+                {React.createElement(getManeuverIcon(mnv.type), {
+                  size: 20,
+                  className: 'mt-1 shrink-0 text-muted-foreground',
+                })}
+                <div>
+                  <p>{mnv.instruction}</p>
+                  {mnv.type !== 4 && mnv.type !== 5 && mnv.type !== 6 && (
+                    <div className="flex items-center gap-2">
+                      <MetricItem
+                        icon={MoveHorizontal}
+                        label="Length"
+                        value={getLength(mnv.length)}
+                        variant="outline"
+                      />
+                      <MetricItem
+                        icon={Clock}
+                        label="Time"
+                        value={formatDuration(mnv.time)}
+                        variant="outline"
+                      />
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div>
+                <RouteAttributes
+                  attributes={[
+                    { icon: DollarSign, label: 'Toll', flag: mnv.toll },
+                    { icon: Ship, label: 'Ferry', flag: mnv.ferry },
+                  ]}
+                  variant="outline-destructive"
+                />
+              </div>
+            </div>
+          </React.Fragment>
+        ))
+      )}
+    </div>
+  );
+};
diff --git a/src/components/trace-route/route-card.tsx b/src/components/trace-route/route-card.tsx
new file mode 100644
index 0000000..42fc97a
--- /dev/null
+++ b/src/components/trace-route/route-card.tsx
@@ -0,0 +1,125 @@
+import { useCallback, useState } from 'react';
+
+import { downloadFile } from '@/utils/download-file';
+import { Summary } from './summary';
+import { Maneuvers } from './maneuvers';
+import { Button } from '@/components/ui/button';
+import type { ParsedDirectionsGeometry } from '@/components/types';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Download } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { Separator } from '@/components/ui/separator';
+import { exportDataAsJson } from '@/utils/export';
+import { getDateTimeString } from '@/utils/date-time';
+
+interface RouteCardProps {
+  data: ParsedDirectionsGeometry;
+  index: number;
+  isActive: boolean;
+  onSelect: () => void;
+}
+
+export const RouteCard = ({
+  data,
+  index,
+  isActive,
+  onSelect,
+}: RouteCardProps) => {
+  const [showManeuvers, setShowManeuvers] = useState(false);
+
+  const exportToGeoJson = useCallback(() => {
+    const coordinates = data?.decodedGeometry;
+    if (!coordinates) return;
+
+    const geoJsonCoordinates = coordinates.map(([lat, lng]) => [lng, lat]);
+
+    const geoJson = {
+      type: 'Feature',
+      geometry: {
+        type: 'LineString',
+        coordinates: geoJsonCoordinates,
+      },
+      properties: {},
+    };
+
+    const formattedData = JSON.stringify(geoJson, null, 2);
+    downloadFile({
+      data: formattedData,
+      fileName: 'valhalla-directions_' + getDateTimeString() + '.geojson',
+      fileType: 'text/json',
+    });
+  }, [data]);
+
+  if (!data.trip) {
+    return null;
+  }
+
+  return (
+    <>
+      <div
+        className={cn(
+          'flex flex-col gap-2.5 border rounded-md p-2 cursor-pointer transition-colors',
+          'focus-within:bg-muted/50 hover:bg-muted/50',
+          showManeuvers ? 'bg-muted/50' : 'bg-background',
+          isActive && 'border-l-4 border-l-primary'
+        )}
+        onClick={onSelect}
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onSelect();
+          }
+        }}
+      >
+        <Summary
+          title={`${index === 0 ? 'Main Route' : 'Alternate Route #' + index}`}
+          summary={data.trip.summary}
+          index={index}
+          routeCoordinates={data.decodedGeometry ?? []}
+        />
+        <Collapsible open={showManeuvers} onOpenChange={setShowManeuvers}>
+          <div className="flex justify-between">
+            <CollapsibleTrigger asChild>
+              <Button variant="outline" size="sm">
+                {showManeuvers ? 'Hide Maneuvers' : 'Show Maneuvers'}
+              </Button>
+            </CollapsibleTrigger>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  <Download className="size-4" />
+                  Export
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuItem
+                  onClick={() => exportDataAsJson(data, 'valhalla-directions')}
+                >
+                  JSON
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={exportToGeoJson}>
+                  GeoJSON
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+          <CollapsibleContent>
+            <Separator className="my-2" />
+            <Maneuvers legs={data.trip.legs} />
+          </CollapsibleContent>
+        </Collapsible>
+      </div>
+    </>
+  );
+};
diff --git a/src/components/trace-route/summary.spec.tsx b/src/components/trace-route/summary.spec.tsx
new file mode 100644
index 0000000..12cf56a
--- /dev/null
+++ b/src/components/trace-route/summary.spec.tsx
@@ -0,0 +1,120 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Summary } from './summary';
+import type { Summary as SummaryType } from '@/components/types';
+
+const mockFitBounds = vi.fn();
+const mockToggleShowOnMap = vi.fn();
+
+const mockTraceRouteStore = {
+  results: { show: { 0: true } },
+  toggleShowOnMap: mockToggleShowOnMap,
+  successful: true,
+};
+
+vi.mock('@/stores/trace-route-store', () => ({
+  useTraceRouteStore: vi.fn(
+    (selector: (state: typeof mockTraceRouteStore) => unknown) =>
+      selector(mockTraceRouteStore)
+  ),
+}));
+
+vi.mock('@/stores/common-store', () => ({
+  useCommonStore: vi.fn((selector) =>
+    selector({
+      settingsPanelOpen: false,
+    })
+  ),
+}));
+
+vi.mock('react-map-gl/maplibre', () => ({
+  useMap: vi.fn(() => ({
+    mainMap: {
+      fitBounds: mockFitBounds,
+    },
+  })),
+}));
+
+const createMockSummary = (
+  overrides: Partial<SummaryType> = {}
+): SummaryType => ({
+  has_time_restrictions: false,
+  has_toll: false,
+  has_highway: false,
+  has_ferry: false,
+  min_lat: 0,
+  min_lon: 0,
+  max_lat: 1,
+  max_lon: 2,
+  time: 120,
+  length: 1.2,
+  cost: 1,
+  ...overrides,
+});
+
+describe('TraceRoute Summary', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should recenter correctly when coordinates include zero values', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Summary
+        summary={createMockSummary()}
+        title="Main Route"
+        index={0}
+        routeCoordinates={[
+          [0, 0],
+          [1, 2],
+        ]}
+      />
+    );
+
+    await user.click(screen.getByRole('button', { name: /zoom to route/i }));
+
+    expect(mockFitBounds).toHaveBeenCalledWith(
+      [
+        [0, 0],
+        [2, 1],
+      ],
+      expect.objectContaining({
+        padding: expect.objectContaining({
+          left: 420,
+          right: 50,
+          top: 50,
+          bottom: 50,
+        }),
+      })
+    );
+  });
+
+  it('should ignore invalid coordinates and still fit to valid route points', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Summary
+        summary={createMockSummary()}
+        title="Main Route"
+        index={0}
+        routeCoordinates={[
+          [Number.NaN, 4],
+          [5, 6],
+          [0, 3],
+        ]}
+      />
+    );
+
+    await user.click(screen.getByRole('button', { name: /zoom to route/i }));
+
+    expect(mockFitBounds).toHaveBeenCalledWith(
+      [
+        [3, 0],
+        [6, 5],
+      ],
+      expect.any(Object)
+    );
+  });
+});
diff --git a/src/components/trace-route/summary.tsx b/src/components/trace-route/summary.tsx
new file mode 100644
index 0000000..4d4026b
--- /dev/null
+++ b/src/components/trace-route/summary.tsx
@@ -0,0 +1,165 @@
+import React from 'react';
+
+import { formatDuration } from '@/utils/date-time';
+import type { Summary as SummaryType } from '@/components/types';
+import {
+  Clock,
+  Search,
+  DollarSign,
+  Milestone,
+  MoveHorizontal,
+  Ship,
+} from 'lucide-react';
+import { Switch } from '@/components/ui/switch';
+import { Button } from '@/components/ui/button';
+import { MetricItem } from '@/components/ui/metric-item';
+import { RouteAttributes } from '@/components/ui/route-attributes';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { useTraceRouteStore } from '@/stores/trace-route-store';
+import { useCommonStore } from '@/stores/common-store';
+import { useMap } from 'react-map-gl/maplibre';
+
+export const Summary = ({
+  summary,
+  title,
+  index,
+  routeCoordinates,
+}: {
+  summary: SummaryType;
+  title: string;
+  index: number;
+  routeCoordinates: number[][];
+}) => {
+  const results = useTraceRouteStore((state) => state.results);
+  const toggleShowOnMap = useTraceRouteStore((state) => state.toggleShowOnMap);
+  const successful = useTraceRouteStore((state) => state.successful);
+  const isSettingsPanelOpen = useCommonStore(
+    (state) => state.settingsPanelOpen
+  );
+
+  const { mainMap } = useMap();
+
+  const isFiniteLatLon = (
+    coord: number[] | undefined
+  ): coord is [number, number] =>
+    Array.isArray(coord) &&
+    coord.length >= 2 &&
+    Number.isFinite(coord[0]) &&
+    Number.isFinite(coord[1]);
+
+  const handleChange = (checked: boolean) => {
+    toggleShowOnMap({ show: checked, idx: index });
+  };
+
+  const handleRecenter = () => {
+    if (!mainMap || routeCoordinates.length === 0) return;
+
+    const validCoords = routeCoordinates.filter(isFiniteLatLon);
+
+    const firstCoord = validCoords[0];
+    if (!firstCoord) return;
+
+    const bounds: [[number, number], [number, number]] = validCoords.reduce<
+      [[number, number], [number, number]]
+    >(
+      (acc, coord) => {
+        return [
+          [Math.min(acc[0][0], coord[1]), Math.min(acc[0][1], coord[0])],
+          [Math.max(acc[1][0], coord[1]), Math.max(acc[1][1], coord[0])],
+        ];
+      },
+      [
+        [firstCoord[1], firstCoord[0]],
+        [firstCoord[1], firstCoord[0]],
+      ]
+    );
+
+    mainMap.fitBounds(bounds, {
+      padding: {
+        top: 50,
+        bottom: 50,
+        left: 420,
+        right: isSettingsPanelOpen ? 420 : 50,
+      },
+      maxZoom: routeCoordinates.length === 1 ? 11 : 18,
+      duration: 800,
+    });
+  };
+
+  if (!summary) {
+    return <div>No route found</div>;
+  }
+
+  const routeAttributes = [
+    {
+      flag: summary.has_highway,
+      label: 'Route includes highway',
+      icon: Milestone,
+    },
+    {
+      flag: summary.has_ferry,
+      label: 'Route includes ferry',
+      icon: Ship,
+    },
+    {
+      flag: summary.has_toll,
+      label: 'Route includes toll',
+      icon: DollarSign,
+    },
+  ].filter(({ flag }) => Boolean(flag));
+
+  const metrics = [
+    {
+      icon: MoveHorizontal,
+      label: 'Route length',
+      value: `${summary.length.toFixed(summary.length > 1000 ? 0 : 1)} km`,
+    },
+    {
+      icon: Clock,
+      label: 'Route duration',
+      value: formatDuration(summary.time),
+    },
+  ];
+
+  return (
+    <React.Fragment>
+      <div className="flex items-center justify-between">
+        <span className="font-bold">{title}</span>
+        <RouteAttributes attributes={routeAttributes} />
+      </div>
+      <div className="grid grid-cols-5 items-start gap-2">
+        <div className="col-span-3 flex flex-wrap gap-2">
+          {metrics.map((metric) => (
+            <MetricItem key={metric.label} variant="outline" {...metric} />
+          ))}
+        </div>
+        <div className="col-span-2 flex items-center justify-end gap-1">
+          <Switch
+            id="show-on-map"
+            checked={results.show[index]}
+            onCheckedChange={handleChange}
+          />
+          {successful && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Button
+                  variant="outline"
+                  size="icon-sm"
+                  onClick={handleRecenter}
+                  aria-label="Zoom to route"
+                >
+                  <Search className="size-4" />
+                </Button>
+              </TooltipTrigger>
+              <TooltipContent>Zoom to route</TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+      </div>
+    </React.Fragment>
+  );
+};
diff --git a/src/components/trace-route/trace-route.spec.tsx b/src/components/trace-route/trace-route.spec.tsx
new file mode 100644
index 0000000..723aee9
--- /dev/null
+++ b/src/components/trace-route/trace-route.spec.tsx
@@ -0,0 +1,289 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { TraceRouteControl } from './trace-route';
+import { useTraceRouteQuery } from '@/hooks/use-trace-route-query';
+import type { ParsedDirectionsGeometry } from '@/components/types';
+import { parseGpxToLatLng } from '@/utils/parse-gpx';
+
+const mockTraceRoute = vi.fn();
+const mockShowLoading = vi.fn();
+const mockZoomTo = vi.fn();
+const mockReceiveTraceRouteResults = vi.fn();
+const mockClearTraceRoute = vi.fn();
+const mockSetInputGeometry = vi.fn();
+const mockSetInputShape = vi.fn();
+const mockSetActiveRouteIndex = vi.fn();
+const mockToastWarning = vi.fn();
+const mockDecode = vi.fn(() => [
+  [52.5, 13.4],
+  [52.6, 13.5],
+]);
+
+interface MockTraceRouteStoreState {
+  receiveTraceRouteResults: typeof mockReceiveTraceRouteResults;
+  clearTraceRoute: typeof mockClearTraceRoute;
+  setInputGeometry: typeof mockSetInputGeometry;
+  setInputShape: typeof mockSetInputShape;
+  results: {
+    data: ParsedDirectionsGeometry | null;
+    show: Record<number, boolean>;
+  };
+  successful: boolean;
+  activeRouteIndex: number;
+  setActiveRouteIndex: typeof mockSetActiveRouteIndex;
+}
+
+const mockTraceRouteStoreState: MockTraceRouteStoreState = {
+  receiveTraceRouteResults: mockReceiveTraceRouteResults,
+  clearTraceRoute: mockClearTraceRoute,
+  setInputGeometry: mockSetInputGeometry,
+  setInputShape: mockSetInputShape,
+  results: { data: null, show: { 0: true } },
+  successful: false,
+  activeRouteIndex: 0,
+  setActiveRouteIndex: mockSetActiveRouteIndex,
+};
+
+vi.mock('@/hooks/use-trace-route-query', () => ({
+  useTraceRouteQuery: vi.fn(() => ({ traceRoute: mockTraceRoute })),
+}));
+
+vi.mock('@/stores/common-store', () => ({
+  useCommonStore: vi.fn((selector) =>
+    selector({
+      showLoading: mockShowLoading,
+      zoomTo: mockZoomTo,
+    })
+  ),
+}));
+
+vi.mock('@/stores/trace-route-store', () => ({
+  useTraceRouteStore: vi.fn((selector) => selector(mockTraceRouteStoreState)),
+}));
+
+vi.mock('@/utils/polyline', () => ({
+  decode: () => mockDecode(),
+}));
+
+vi.mock('@/utils/parse-gpx', () => ({
+  parseGpxToLatLng: vi.fn(() => []),
+}));
+
+vi.mock('sonner', () => ({
+  toast: {
+    warning: (...args: unknown[]) => mockToastWarning(...args),
+  },
+}));
+
+vi.mock('@tanstack/react-router', () => ({
+  useSearch: vi.fn(() => ({ profile: 'auto' })),
+}));
+
+vi.mock('react-map-gl/maplibre', () => ({
+  useMap: vi.fn(() => ({ mainMap: null })),
+}));
+
+describe('TraceRouteControl', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockTraceRouteStoreState.results = { data: null, show: { 0: true } };
+    mockTraceRouteStoreState.successful = false;
+    mockTraceRouteStoreState.activeRouteIndex = 0;
+  });
+
+  it('should render controls and keep Trace Route button disabled initially', () => {
+    render(<TraceRouteControl />);
+
+    expect(
+      screen.getByPlaceholderText('Enter encoded polyline')
+    ).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Trace Route' })).toBeDisabled();
+    expect(screen.getByText(/Calculations by/i)).toBeInTheDocument();
+  });
+
+  it('should decode polyline and set input geometry on textarea change', async () => {
+    const user = userEvent.setup();
+    render(<TraceRouteControl />);
+
+    await user.type(
+      screen.getByPlaceholderText('Enter encoded polyline'),
+      'abc'
+    );
+
+    expect(mockDecode).toHaveBeenCalled();
+    expect(mockSetInputGeometry).toHaveBeenCalledWith([
+      [52.5, 13.4],
+      [52.6, 13.5],
+    ]);
+    expect(screen.getByRole('button', { name: 'Trace Route' })).toBeEnabled();
+  });
+
+  it('should trace route and store results on successful request', async () => {
+    const user = userEvent.setup();
+
+    const response = {
+      decodedGeometry: [
+        [52.5, 13.4],
+        [52.6, 13.5],
+      ],
+    };
+    mockTraceRoute.mockResolvedValue(response);
+
+    render(<TraceRouteControl />);
+
+    await user.type(
+      screen.getByPlaceholderText('Enter encoded polyline'),
+      'abc'
+    );
+    await user.click(screen.getByRole('button', { name: 'Trace Route' }));
+
+    await waitFor(() => {
+      expect(mockTraceRoute).toHaveBeenCalled();
+      expect(mockReceiveTraceRouteResults).toHaveBeenCalledWith({
+        data: response,
+      });
+      expect(mockZoomTo).toHaveBeenCalledWith(response.decodedGeometry);
+      expect(mockShowLoading).toHaveBeenCalledWith(true);
+    });
+
+    await waitFor(() => {
+      expect(mockShowLoading).toHaveBeenCalledWith(false);
+    });
+  });
+
+  it('should pass all advanced trace options to trace query hook', () => {
+    render(<TraceRouteControl />);
+
+    expect(vi.mocked(useTraceRouteQuery)).toHaveBeenCalledWith(
+      expect.objectContaining({
+        trace_options: {
+          accuracy: 5,
+          radius: 50,
+          breakage_distance: 50,
+          interpolation_distance: 10,
+        },
+      })
+    );
+  });
+
+  it('should clear route when polyline input is cleared', async () => {
+    const user = userEvent.setup();
+    render(<TraceRouteControl />);
+
+    const input = screen.getByPlaceholderText('Enter encoded polyline');
+    await user.type(input, 'abc');
+    await user.clear(input);
+
+    expect(mockClearTraceRoute).toHaveBeenCalled();
+  });
+
+  it('should keep Trace Route disabled while GPX file is still being read', async () => {
+    const user = userEvent.setup();
+
+    vi.mocked(parseGpxToLatLng).mockReturnValue([
+      [52.5, 13.4],
+      [52.6, 13.5],
+    ]);
+
+    const deferredFileText: { resolve?: (value: string) => void } = {};
+    const file = new File(['<gpx></gpx>'], 'route.gpx', {
+      type: 'application/gpx+xml',
+    });
+    Object.defineProperty(file, 'text', {
+      value: () =>
+        new Promise<string>((resolve) => {
+          deferredFileText.resolve = resolve;
+        }),
+    });
+
+    render(<TraceRouteControl />);
+
+    const traceButton = screen.getByRole('button', { name: 'Trace Route' });
+    const fileInput = screen.getByLabelText('Upload GPX file');
+
+    await user.upload(fileInput, file);
+    expect(traceButton).toBeDisabled();
+
+    if (!deferredFileText.resolve) {
+      throw new Error('Expected file text resolver to be initialized');
+    }
+
+    deferredFileText.resolve(
+      '<gpx><trk><trkseg><trkpt lat="52.5" lon="13.4" /><trkpt lat="52.6" lon="13.5" /></trkseg></trk></gpx>'
+    );
+
+    await waitFor(() => {
+      expect(traceButton).toBeEnabled();
+    });
+  });
+
+  it('should reject oversized GPX files and show warning toast', async () => {
+    const user = userEvent.setup();
+    render(<TraceRouteControl />);
+
+    const oversizedFile = new File(
+      ['x'.repeat(2 * 1024 * 1024 + 1)],
+      'too-big.gpx',
+      {
+        type: 'application/gpx+xml',
+      }
+    );
+
+    await user.upload(screen.getByLabelText('Upload GPX file'), oversizedFile);
+
+    expect(mockToastWarning).toHaveBeenCalledWith(
+      'File too large',
+      expect.objectContaining({
+        description: expect.stringContaining('Max GPX size is 2 MB'),
+      })
+    );
+    expect(mockClearTraceRoute).toHaveBeenCalled();
+    expect(screen.getByRole('button', { name: 'Trace Route' })).toBeDisabled();
+  });
+
+  it('should keep maneuvers hidden by default and show them on click', async () => {
+    const user = userEvent.setup();
+
+    mockTraceRouteStoreState.successful = true;
+    mockTraceRouteStoreState.results = {
+      data: {
+        decodedGeometry: [
+          [52.5, 13.4],
+          [52.6, 13.5],
+        ],
+        trip: {
+          summary: {
+            has_highway: false,
+            has_ferry: false,
+            has_toll: false,
+            length: 12.3,
+            time: 900,
+          },
+          legs: [
+            {
+              maneuvers: [
+                {
+                  type: 1,
+                  instruction: 'Head north on Main St',
+                  length: 0.4,
+                  time: 60,
+                },
+              ],
+            },
+          ],
+        },
+        alternates: [],
+      } as unknown as ParsedDirectionsGeometry,
+      show: { 0: true },
+    };
+
+    render(<TraceRouteControl />);
+
+    expect(screen.queryByText('Head north on Main St')).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Show Maneuvers' }));
+
+    expect(screen.getByText('Head north on Main St')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/trace-route/trace-route.tsx b/src/components/trace-route/trace-route.tsx
new file mode 100644
index 0000000..da1512a
--- /dev/null
+++ b/src/components/trace-route/trace-route.tsx
@@ -0,0 +1,433 @@
+import { useTraceRouteQuery } from '@/hooks/use-trace-route-query';
+import { useCommonStore, type Profile } from '@/stores/common-store';
+import { useTraceRouteStore } from '@/stores/trace-route-store';
+import { useEffect, useRef, useState } from 'react';
+import { toast } from 'sonner';
+
+import { Button } from '@/components/ui/button';
+import { SettingsFooter } from '@/components/settings-footer';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/components/ui/collapsible';
+import { Separator } from '@/components/ui/separator';
+import { AccessibleIcon } from '@radix-ui/react-accessible-icon';
+import { ChevronDown, Settings } from 'lucide-react';
+import { decode } from '@/utils/polyline';
+import { parseGpxToLatLng } from '@/utils/parse-gpx';
+import { useSearch } from '@tanstack/react-router';
+import type { ParsedDirectionsGeometry } from '@/components/types';
+import { Summary } from './summary';
+import { Maneuvers } from './maneuvers';
+
+type TraceRouteErrorPayload = {
+  status?: string;
+  error?: string;
+  error_code?: number;
+};
+
+export const TraceRouteControl = () => {
+  const [encodedPolyline, setEncodedPolyline] = useState('');
+  const [fileText, setFileText] = useState('');
+  const [isProcessing, setIsProcessing] = useState(false);
+  const { profile } = useSearch({ from: '/$activeTab' }) as {
+    profile: Profile;
+  };
+  const [shapeMatch, setShapeMatch] = useState<
+    'walk_or_snap' | 'map_snap' | 'edge_walk'
+  >('map_snap');
+  const [accuracy, setAccuracy] = useState<number>(5);
+  const [radius, setRadius] = useState<number>(50);
+  const [breakageDistance, setBreakageDistance] = useState<number>(50);
+  const [interpolationDistance, setInterpolationDistance] =
+    useState<number>(10);
+  const [showManeuvers, setShowManeuvers] = useState(false);
+  const isMountedRef = useRef(true);
+  const loadingTimeoutRef = useRef<number | null>(null);
+  const fileReadSeqRef = useRef(0);
+  const showLoading = useCommonStore((state) => state.showLoading);
+  const zoomTo = useCommonStore((state) => state.zoomTo);
+  const [fileName, setFileName] = useState<string>('');
+
+  const receiveTraceRouteResults = useTraceRouteStore(
+    (state) => state.receiveTraceRouteResults
+  );
+  const clearTraceRoute = useTraceRouteStore((state) => state.clearTraceRoute);
+  const traceRouteResults = useTraceRouteStore((state) => state.results);
+  const traceRouteSuccessful = useTraceRouteStore((state) => state.successful);
+  const activeRouteIndex = useTraceRouteStore(
+    (state) => state.activeRouteIndex
+  );
+  const setActiveRouteIndex = useTraceRouteStore(
+    (state) => state.setActiveRouteIndex
+  );
+
+  const decodePolylineSafely = (value: string) => {
+    try {
+      const decoded = decode(value, 6) as [number, number][];
+      return decoded.filter(
+        (coord) => Number.isFinite(coord[0]) && Number.isFinite(coord[1])
+      );
+    } catch {
+      return [] as [number, number][];
+    }
+  };
+
+  const shapeBuilder = (coords: [number, number][]) => {
+    const shape = coords.map(([lat, lon]) => ({ lat, lon })) as {
+      lat: number;
+      lon: number;
+      type?: 'break' | 'via' | 'through';
+    }[];
+
+    if (shape.length >= 2) {
+      shape[0]!.type = 'break';
+      shape[shape.length - 1]!.type = 'break';
+    }
+    return shape;
+  };
+
+  const MAX_GPX_BYTES = 2 * 1024 * 1024; // 2 MB
+
+  const { traceRoute } = useTraceRouteQuery({
+    polyline: encodedPolyline || undefined,
+    fileText: fileText || undefined,
+    costing: profile,
+    shape_match: shapeMatch,
+    trace_options: {
+      accuracy,
+      radius,
+      breakage_distance: breakageDistance,
+      interpolation_distance: interpolationDistance,
+    },
+  });
+  const setInputGeometry = useTraceRouteStore(
+    (state) => state.setInputGeometry
+  );
+  const setInputShape = useTraceRouteStore((state) => state.setInputShape);
+
+  const routeOptions = traceRouteResults.data
+    ? [
+        {
+          index: 0,
+          title: 'Main Route',
+          data: traceRouteResults.data as ParsedDirectionsGeometry,
+        },
+        ...((traceRouteResults.data.alternates ?? []).map((alternate, i) => ({
+          index: i + 1,
+          title: `Alternate Route #${i + 1}`,
+          data: alternate as ParsedDirectionsGeometry,
+        })) ?? []),
+      ]
+    : [];
+
+  const selectedRoute =
+    routeOptions.find((route) => route.index === activeRouteIndex) ??
+    routeOptions[0];
+  const hasTraceInput =
+    encodedPolyline.trim().length > 0 || fileText.trim().length > 0;
+
+  useEffect(() => {
+    setShowManeuvers(false);
+  }, [activeRouteIndex, traceRouteResults.data]);
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      if (loadingTimeoutRef.current !== null) {
+        window.clearTimeout(loadingTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const onPolylineChange = (value: string) => {
+    setEncodedPolyline(value);
+    const v = value.trim();
+    if (!v) {
+      setInputGeometry(null);
+      setInputShape(null);
+      clearTraceRoute();
+
+      return;
+    }
+    const coords = decodePolylineSafely(v);
+
+    if (coords.length === 0) {
+      setInputGeometry(null);
+      setInputShape(null);
+      clearTraceRoute();
+      return;
+    }
+
+    zoomTo(coords);
+    setInputGeometry(coords.length >= 2 ? coords : null);
+
+    if (coords.length >= 2) {
+      const shape = shapeBuilder(coords);
+      setInputShape(shape);
+    }
+  };
+
+  const onFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const readSeq = ++fileReadSeqRef.current;
+    const file = e.target.files?.[0];
+    if (!file) {
+      setFileName('');
+      setFileText('');
+      setInputGeometry(null);
+      setInputShape(null);
+      clearTraceRoute();
+      return;
+    }
+
+    if (file.size > MAX_GPX_BYTES) {
+      e.target.value = '';
+
+      setFileName('');
+      setFileText('');
+      setInputGeometry(null);
+      setInputShape(null);
+      clearTraceRoute();
+
+      toast.warning('File too large', {
+        description: `Max GPX size is ${(MAX_GPX_BYTES / (1024 * 1024)).toFixed(0)} MB.`,
+        position: 'bottom-center',
+        duration: 5000,
+        closeButton: true,
+      });
+      return;
+    }
+
+    setFileName(file.name);
+
+    const text = await file.text();
+    if (!isMountedRef.current || readSeq !== fileReadSeqRef.current) {
+      return;
+    }
+    setFileText(text);
+    const coords = parseGpxToLatLng(text);
+    zoomTo(coords);
+    setInputGeometry(coords.length >= 2 ? coords : null);
+    const shape = shapeBuilder(coords);
+    setInputShape(shape.length >= 2 ? shape : null);
+  };
+
+  const handleTraceRoute = async () => {
+    try {
+      setIsProcessing(true);
+      showLoading(true);
+      const data = await traceRoute();
+      if (isMountedRef.current && data) {
+        receiveTraceRouteResults({ data });
+        zoomTo(data.decodedGeometry);
+      }
+      return data;
+    } catch (error) {
+      if (!isMountedRef.current) {
+        return;
+      }
+      clearTraceRoute();
+      const payload =
+        typeof error === 'object' && error !== null && 'payload' in error
+          ? ((error as { payload?: TraceRouteErrorPayload }).payload ?? {})
+          : null;
+
+      if (payload) {
+        const statusText = payload.status ?? 'Trace route failed';
+        let errorMsg =
+          payload.error ??
+          (error instanceof Error ? error.message : 'Unknown error');
+        if (payload.error_code === 154 && !errorMsg.endsWith('for route.')) {
+          errorMsg += ' for route.';
+        }
+
+        toast.warning(statusText, {
+          description: errorMsg,
+          position: 'bottom-center',
+          duration: 5000,
+          closeButton: true,
+        });
+      } else {
+        toast.warning('Trace route failed', {
+          description: error instanceof Error ? error.message : 'Unknown error',
+          position: 'bottom-center',
+          duration: 5000,
+          closeButton: true,
+        });
+      }
+    } finally {
+      if (!isMountedRef.current) {
+        return;
+      }
+      setIsProcessing(false);
+      if (loadingTimeoutRef.current !== null) {
+        window.clearTimeout(loadingTimeoutRef.current);
+      }
+      loadingTimeoutRef.current = window.setTimeout(() => {
+        if (isMountedRef.current) {
+          showLoading(false);
+        }
+      }, 500);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-2">
+      <textarea
+        value={encodedPolyline}
+        onChange={(e) => onPolylineChange(e.target.value)}
+        placeholder="Enter encoded polyline"
+        className="w-full p-2 border rounded"
+      />
+
+      <input
+        type="file"
+        accept=".gpx"
+        className="sr-only"
+        onChange={onFileChange}
+        id="file-upload"
+        aria-describedby="gpx-file-help"
+        aria-label="Upload GPX file"
+      />
+      <label
+        htmlFor="file-upload"
+        className={`w-full p-2 border rounded cursor-pointer block ${fileName ? 'text-blue-700' : 'text-gray-500'}`}
+        title={fileName || 'Upload GPX file'}
+      >
+        <span className="block truncate">{fileName || 'Upload GPX file'}</span>
+      </label>
+      <p id="gpx-file-help" className="text-xs text-muted-foreground">
+        Max file size: {(MAX_GPX_BYTES / (1024 * 1024)).toFixed(0)} MB
+      </p>
+
+      <Button
+        className="w-full"
+        disabled={isProcessing || !hasTraceInput}
+        onClick={handleTraceRoute}
+      >
+        {isProcessing ? 'Loading...' : 'Trace Route'}
+      </Button>
+
+      <Collapsible>
+        <CollapsibleTrigger asChild>
+          <Button variant="outline" className="w-full justify-between">
+            <div className="flex items-center gap-2">
+              <Settings className="size-3" />
+              Advanced settings
+            </div>
+            <AccessibleIcon label="Toggle advanced settings">
+              <ChevronDown className="size-3" />
+            </AccessibleIcon>
+          </Button>
+        </CollapsibleTrigger>
+
+        <CollapsibleContent className="p-3 mt-1 rounded-md border flex flex-col gap-3">
+          <label className="flex flex-col gap-1 text-sm">
+            Shape match
+            <select
+              className="border rounded p-2"
+              value={shapeMatch}
+              onChange={(e) =>
+                setShapeMatch(e.target.value as typeof shapeMatch)
+              }
+            >
+              <option value="walk_or_snap">walk or snap</option>
+              <option value="map_snap">map snap</option>
+              <option value="edge_walk">edge walk</option>
+            </select>
+          </label>
+
+          <label className="flex flex-col gap-1 text-sm">
+            Accuracy (m)
+            <input
+              type="number"
+              className="border rounded p-2"
+              value={accuracy}
+              min={0}
+              onChange={(e) => setAccuracy(Number(e.target.value))}
+            />
+          </label>
+
+          <label className="flex flex-col gap-1 text-sm">
+            Radius (m)
+            <input
+              type="number"
+              className="border rounded p-2"
+              value={radius}
+              min={0}
+              max={100}
+              onChange={(e) => setRadius(Number(e.target.value))}
+            />
+          </label>
+
+          <label className="flex flex-col gap-1 text-sm">
+            Breakage distance (m)
+            <input
+              type="number"
+              className="border rounded p-2"
+              value={breakageDistance}
+              min={0}
+              onChange={(e) => setBreakageDistance(Number(e.target.value))}
+            />
+          </label>
+
+          <label className="flex flex-col gap-1 text-sm">
+            Interpolation distance (m)
+            <input
+              type="number"
+              className="border rounded p-2"
+              value={interpolationDistance}
+              min={0}
+              onChange={(e) => setInterpolationDistance(Number(e.target.value))}
+            />
+          </label>
+        </CollapsibleContent>
+      </Collapsible>
+
+      <Separator />
+      <SettingsFooter />
+
+      {traceRouteSuccessful && selectedRoute?.data?.trip && (
+        <div className="mt-2 flex flex-col gap-2.5 border rounded-md p-2 bg-background">
+          {routeOptions.length > 1 && (
+            <div className="flex flex-wrap gap-2">
+              {routeOptions.map((route) => (
+                <Button
+                  key={route.index}
+                  type="button"
+                  variant={
+                    route.index === activeRouteIndex ? 'default' : 'outline'
+                  }
+                  size="sm"
+                  onClick={() => setActiveRouteIndex(route.index)}
+                >
+                  {route.title}
+                </Button>
+              ))}
+            </div>
+          )}
+
+          <Summary
+            title={selectedRoute.title}
+            summary={selectedRoute.data.trip.summary}
+            index={selectedRoute.index}
+            routeCoordinates={selectedRoute.data.decodedGeometry ?? []}
+          />
+
+          <Collapsible open={showManeuvers} onOpenChange={setShowManeuvers}>
+            <CollapsibleTrigger asChild>
+              <Button variant="outline" size="sm" className="w-fit">
+                {showManeuvers ? 'Hide Maneuvers' : 'Show Maneuvers'}
+              </Button>
+            </CollapsibleTrigger>
+            <CollapsibleContent className="mt-2">
+              <Maneuvers legs={selectedRoute.data.trip.legs} />
+            </CollapsibleContent>
+          </Collapsible>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/hooks/use-trace-route-query.spec.ts b/src/hooks/use-trace-route-query.spec.ts
new file mode 100644
index 0000000..6bb632b
--- /dev/null
+++ b/src/hooks/use-trace-route-query.spec.ts
@@ -0,0 +1,290 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useTraceRouteQuery } from './use-trace-route-query';
+import { parseGpxToLatLng } from '@/utils/parse-gpx';
+import {
+  getValhallaUrl,
+  parseDirectionsGeometry,
+  showValhallaWarnings,
+} from '@/utils/valhalla';
+
+vi.mock('@/utils/parse-gpx', () => ({
+  parseGpxToLatLng: vi.fn(),
+}));
+
+vi.mock('@/utils/valhalla', () => ({
+  getValhallaUrl: vi.fn(() => 'http://mock-valhalla'),
+  parseDirectionsGeometry: vi.fn(() => [
+    [50, 10],
+    [51, 11],
+  ]),
+  showValhallaWarnings: vi.fn(),
+}));
+
+const createRouteResponse = () => ({
+  id: 'valhalla_directions' as const,
+  trip: {
+    locations: [
+      {
+        type: 'break',
+        lat: 52.5,
+        lon: 13.4,
+        side_of_street: 'none',
+        original_index: 0,
+      },
+      {
+        type: 'break',
+        lat: 52.6,
+        lon: 13.5,
+        side_of_street: 'none',
+        original_index: 1,
+      },
+    ],
+    legs: [{ shape: 'encoded-shape' }],
+    summary: {
+      has_time_restrictions: false,
+      has_toll: false,
+      has_highway: false,
+      has_ferry: false,
+      min_lat: 0,
+      min_lon: 0,
+      max_lat: 1,
+      max_lon: 1,
+      time: 1,
+      length: 1,
+      cost: 1,
+    },
+    status_message: 'ok',
+    status: 0,
+    units: 'kilometers',
+    language: 'en-US',
+    warnings: [{ code: 101, text: 'Heads up' }],
+  },
+  alternates: [
+    {
+      id: 'valhalla_directions' as const,
+      trip: {
+        locations: [],
+        legs: [{ shape: 'alternate-shape' }],
+        summary: {
+          has_time_restrictions: false,
+          has_toll: false,
+          has_highway: false,
+          has_ferry: false,
+          min_lat: 0,
+          min_lon: 0,
+          max_lat: 1,
+          max_lon: 1,
+          time: 1,
+          length: 1,
+          cost: 1,
+        },
+        status_message: 'ok',
+        status: 0,
+        units: 'kilometers',
+        language: 'en-US',
+      },
+    },
+  ],
+});
+
+const getLastFetchBody = () => {
+  const call = vi.mocked(fetch).mock.calls.at(-1);
+  const init = call?.[1] as RequestInit | undefined;
+  return JSON.parse((init?.body as string) ?? '{}');
+};
+
+describe('useTraceRouteQuery', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(getValhallaUrl).mockReturnValue('http://mock-valhalla');
+    vi.stubGlobal('fetch', vi.fn());
+  });
+
+  it('should throw when both polyline and file are missing', async () => {
+    const { traceRoute } = useTraceRouteQuery({});
+
+    await expect(traceRoute()).rejects.toThrow(
+      'Provide an encoded polyline or a GPX file.'
+    );
+  });
+
+  it('should post encoded polyline request and parse geometry', async () => {
+    const response = createRouteResponse();
+    vi.mocked(fetch).mockResolvedValue({
+      ok: true,
+      json: vi.fn().mockResolvedValue(response),
+    } as unknown as Response);
+
+    const { traceRoute } = useTraceRouteQuery({
+      polyline: '  abc\n123  ',
+    });
+
+    const result = await traceRoute();
+
+    expect(fetch).toHaveBeenCalledWith('http://mock-valhalla/trace_route', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        encoded_polyline: 'abc123',
+        shape_match: 'map_snap',
+        costing: 'auto',
+        trace_options: {
+          gps_accuracy: 5,
+          search_radius: 50,
+          interpolation_distance: 10,
+          breakage_distance: 50,
+        },
+      }),
+    });
+
+    expect(parseDirectionsGeometry).toHaveBeenCalledTimes(2);
+    expect(showValhallaWarnings).toHaveBeenCalledWith(response.trip.warnings);
+    expect(result.decodedGeometry).toEqual([
+      [50, 10],
+      [51, 11],
+    ]);
+  });
+
+  it('should build shape request from GPX file text', async () => {
+    vi.mocked(parseGpxToLatLng).mockReturnValue([
+      [52.5, 13.4],
+      [52.6, 13.5],
+      [52.7, 13.6],
+    ]);
+
+    const response = createRouteResponse();
+    vi.mocked(fetch).mockResolvedValue({
+      ok: true,
+      json: vi.fn().mockResolvedValue(response),
+    } as unknown as Response);
+
+    const { traceRoute } = useTraceRouteQuery({ fileText: '<gpx>...</gpx>' });
+    await traceRoute();
+
+    expect(fetch).toHaveBeenCalledWith('http://mock-valhalla/trace_route', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        shape: [
+          { lat: 52.5, lon: 13.4, type: 'break' },
+          { lat: 52.6, lon: 13.5 },
+          { lat: 52.7, lon: 13.6, type: 'break' },
+        ],
+        shape_match: 'map_snap',
+        costing: 'auto',
+        trace_options: {
+          gps_accuracy: 5,
+          search_radius: 50,
+          interpolation_distance: 10,
+          breakage_distance: 50,
+        },
+      }),
+    });
+  });
+
+  it('should map accuracy and radius to valhalla trace options', async () => {
+    const response = createRouteResponse();
+    vi.mocked(fetch).mockResolvedValue({
+      ok: true,
+      json: vi.fn().mockResolvedValue(response),
+    } as unknown as Response);
+
+    const { traceRoute } = useTraceRouteQuery({
+      polyline: 'abc123',
+      trace_options: {
+        accuracy: 7,
+        radius: 60,
+        breakage_distance: 75,
+        interpolation_distance: 15,
+      },
+    });
+
+    await traceRoute();
+
+    expect(getLastFetchBody().trace_options).toEqual({
+      gps_accuracy: 7,
+      search_radius: 60,
+      interpolation_distance: 15,
+      breakage_distance: 75,
+    });
+  });
+
+  it('should prefer explicit gps_accuracy/search_radius over aliases', async () => {
+    const response = createRouteResponse();
+    vi.mocked(fetch).mockResolvedValue({
+      ok: true,
+      json: vi.fn().mockResolvedValue(response),
+    } as unknown as Response);
+
+    const { traceRoute } = useTraceRouteQuery({
+      polyline: 'abc123',
+      trace_options: {
+        accuracy: 9,
+        radius: 70,
+        gps_accuracy: 4,
+        search_radius: 25,
+      },
+    });
+
+    await traceRoute();
+
+    expect(getLastFetchBody().trace_options).toMatchObject({
+      gps_accuracy: 4,
+      search_radius: 25,
+    });
+  });
+
+  it('should fallback to defaults for invalid numeric trace options', async () => {
+    const response = createRouteResponse();
+    vi.mocked(fetch).mockResolvedValue({
+      ok: true,
+      json: vi.fn().mockResolvedValue(response),
+    } as unknown as Response);
+
+    const { traceRoute } = useTraceRouteQuery({
+      polyline: 'abc123',
+      trace_options: {
+        gps_accuracy: Number.NaN,
+        search_radius: Number.POSITIVE_INFINITY,
+        interpolation_distance: -1,
+        breakage_distance: Number.NaN,
+      },
+    });
+
+    await traceRoute();
+
+    expect(getLastFetchBody().trace_options).toEqual({
+      gps_accuracy: 5,
+      search_radius: 50,
+      interpolation_distance: 10,
+      breakage_distance: 50,
+    });
+  });
+
+  it("should map 'car' costing to valhalla 'auto'", async () => {
+    const response = createRouteResponse();
+    vi.mocked(fetch).mockResolvedValue({
+      ok: true,
+      json: vi.fn().mockResolvedValue(response),
+    } as unknown as Response);
+
+    const { traceRoute } = useTraceRouteQuery({
+      polyline: 'abc123',
+      costing: 'car',
+    });
+
+    await traceRoute();
+
+    expect(getLastFetchBody().costing).toBe('auto');
+  });
+
+  it('should throw when GPX file has fewer than 2 points', async () => {
+    vi.mocked(parseGpxToLatLng).mockReturnValue([[52.5, 13.4]]);
+
+    const { traceRoute } = useTraceRouteQuery({ fileText: '<gpx>...</gpx>' });
+
+    await expect(traceRoute()).rejects.toThrow(
+      'GPX must contain at least 2 points.'
+    );
+  });
+});
diff --git a/src/hooks/use-trace-route-query.ts b/src/hooks/use-trace-route-query.ts
new file mode 100644
index 0000000..8480e96
--- /dev/null
+++ b/src/hooks/use-trace-route-query.ts
@@ -0,0 +1,151 @@
+import type {
+  ParsedDirectionsGeometry,
+  ValhallaRouteResponse,
+} from '@/components/types';
+import type { Profile } from '@/stores/common-store';
+import { parseGpxToLatLng } from '@/utils/parse-gpx';
+import {
+  getValhallaUrl,
+  parseDirectionsGeometry,
+  showValhallaWarnings,
+} from '@/utils/valhalla';
+
+type Shape = {
+  lat: number;
+  lon: number;
+  type?: 'break' | 'via' | 'through';
+  time?: number;
+};
+
+const normalizePolyline = (input: string) => input.trim().replace(/\r?\n/g, '');
+const withDefaultNonNegative = (value: number | undefined, fallback: number) =>
+  typeof value === 'number' && Number.isFinite(value) && value >= 0
+    ? value
+    : fallback;
+
+type ShapeMatch = 'map_snap' | 'edge_walk' | 'walk_or_snap';
+
+interface TraceOptions {
+  accuracy?: number;
+  radius?: number;
+  gps_accuracy?: number;
+  breakage_distance?: number;
+  search_radius?: number;
+  interpolation_distance?: number;
+}
+
+type TraceRouteErrorPayload = {
+  status?: string;
+  error?: string;
+  error_code?: number;
+};
+
+export const useTraceRouteQuery = ({
+  polyline,
+  fileText,
+  costing = 'auto',
+  shape_match = 'map_snap',
+  trace_options,
+}: {
+  polyline?: string;
+  fileText?: string;
+  costing?: Profile;
+  shape_match?: ShapeMatch;
+  trace_options?: TraceOptions;
+}) => {
+  const valhallaCosting = costing === 'car' ? 'auto' : costing;
+
+  const hasPolyline = !!polyline?.trim();
+  const hasFile = !!fileText?.trim();
+
+  let shape: Shape[] = [];
+  if (!hasPolyline && hasFile) {
+    const coords = parseGpxToLatLng(fileText!);
+    shape = coords.map(([lat, lon]) => ({ lat, lon }));
+
+    if (shape.length >= 2) {
+      shape[0]!.type = 'break';
+      shape[shape.length - 1]!.type = 'break';
+    }
+  }
+
+  const resolvedTraceOptions = {
+    gps_accuracy: withDefaultNonNegative(
+      trace_options?.gps_accuracy ?? trace_options?.accuracy,
+      5
+    ),
+    search_radius: withDefaultNonNegative(
+      trace_options?.search_radius ?? trace_options?.radius,
+      50
+    ),
+    interpolation_distance: withDefaultNonNegative(
+      trace_options?.interpolation_distance,
+      10
+    ),
+    breakage_distance: withDefaultNonNegative(
+      trace_options?.breakage_distance,
+      50
+    ),
+  };
+
+  const valhallaRequest = {
+    json: {
+      ...(hasPolyline
+        ? {
+            encoded_polyline: normalizePolyline(polyline!),
+            shape_match: shape_match ?? 'map_snap',
+          }
+        : {
+            shape,
+            shape_match: shape_match ?? 'map_snap',
+          }),
+      costing: valhallaCosting,
+      trace_options: resolvedTraceOptions,
+    },
+  };
+
+  const traceRoute = async () => {
+    if (!hasPolyline && !hasFile) {
+      throw new Error('Provide an encoded polyline or a GPX file.');
+    }
+    if (!hasPolyline && hasFile && shape.length < 2) {
+      throw new Error('GPX must contain at least 2 points.');
+    }
+
+    const response = await fetch(`${getValhallaUrl()}/trace_route`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(valhallaRequest.json),
+    });
+
+    if (!response.ok) {
+      const errorData =
+        ((await response.json().catch(() => ({}))) as TraceRouteErrorPayload) ??
+        {};
+      const error = new Error(
+        errorData.error || `Trace route failed (${response.status})`
+      ) as Error & { payload?: TraceRouteErrorPayload; status?: number };
+      error.payload = errorData;
+      error.status = response.status;
+      throw error;
+    }
+
+    const data: ValhallaRouteResponse = await response.json();
+
+    (data as ParsedDirectionsGeometry).decodedGeometry =
+      parseDirectionsGeometry(data);
+
+    data.alternates?.forEach((alternate, i) => {
+      if (alternate) {
+        (data.alternates![i] as ParsedDirectionsGeometry).decodedGeometry =
+          parseDirectionsGeometry(alternate);
+      }
+    });
+
+    showValhallaWarnings(data.trip.warnings);
+
+    return data as ParsedDirectionsGeometry;
+  };
+
+  return { traceRoute };
+};
diff --git a/src/stores/trace-route-store.ts b/src/stores/trace-route-store.ts
new file mode 100644
index 0000000..fc19e3b
--- /dev/null
+++ b/src/stores/trace-route-store.ts
@@ -0,0 +1,219 @@
+import type {
+  ActiveWaypoint,
+  ParsedDirectionsGeometry,
+} from '@/components/types';
+import { create } from 'zustand';
+import { devtools } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+
+export interface TraceRouteWaypoint {
+  id: 'start' | 'end';
+  geocodeResults: ActiveWaypoint[];
+  userInput: string;
+}
+
+interface TraceRouteResult {
+  data: ParsedDirectionsGeometry | null;
+  show: Record<string, boolean>;
+}
+
+type Shape = {
+  lat: number;
+  lon: number;
+  type?: 'break' | 'via' | 'through';
+  time?: number;
+};
+
+const createEmptyWaypoint = (id: 'start' | 'end'): TraceRouteWaypoint => ({
+  id,
+  geocodeResults: [],
+  userInput: '',
+});
+
+const createDefaultWaypoints = (): [TraceRouteWaypoint, TraceRouteWaypoint] => [
+  createEmptyWaypoint('start'),
+  createEmptyWaypoint('end'),
+];
+
+const createWaypointFromLatLng = (
+  id: 'start' | 'end',
+  lng: number,
+  lat: number,
+  key: number
+): TraceRouteWaypoint => ({
+  id,
+  geocodeResults: [
+    {
+      title: '',
+      displaylnglat: [lng, lat],
+      sourcelnglat: [lng, lat],
+      key,
+      addressindex: key,
+      selected: true,
+    },
+  ],
+  userInput: `${lng.toFixed(6)}, ${lat.toFixed(6)}`,
+});
+
+const normalizeTwoWaypoints = (
+  waypoints: TraceRouteWaypoint[]
+): [TraceRouteWaypoint, TraceRouteWaypoint] => {
+  const start = waypoints[0]
+    ? { ...waypoints[0], id: 'start' as const }
+    : createEmptyWaypoint('start');
+  const end = waypoints[1]
+    ? { ...waypoints[1], id: 'end' as const }
+    : createEmptyWaypoint('end');
+
+  return [start, end];
+};
+
+export interface TraceRouteState {
+  successful: boolean;
+  results: TraceRouteResult;
+  activeRouteIndex: number;
+  waypoints: [TraceRouteWaypoint, TraceRouteWaypoint];
+  inputGeometry: number[][] | null;
+
+  inputShape: Shape[] | null;
+}
+
+interface TraceRouteActions {
+  clearTraceRoute: () => void;
+  receiveTraceRouteResults: (params: {
+    data: ParsedDirectionsGeometry;
+  }) => void;
+
+  setInputGeometry: (coords: number[][] | null) => void;
+
+  setInputShape: (shape: Shape[] | null) => void;
+
+  setWaypoints: (waypoints: TraceRouteWaypoint[]) => void;
+  clearWaypoints: () => void;
+  setActiveRouteIndex: (index: number) => void;
+  toggleShowOnMap: (params: { show: boolean; idx: number }) => void;
+}
+
+type TraceRouteStore = TraceRouteState & TraceRouteActions;
+
+export const useTraceRouteStore = create<TraceRouteStore>()(
+  devtools(
+    immer((set) => ({
+      successful: false,
+      results: { data: null, show: { '0': true } },
+      activeRouteIndex: 0,
+      waypoints: createDefaultWaypoints(),
+
+      inputGeometry: null,
+      inputShape: null,
+
+      clearTraceRoute: () =>
+        set(
+          (state) => {
+            state.successful = false;
+            state.results.data = null;
+            state.results.show = { '0': true };
+            state.activeRouteIndex = 0;
+            state.waypoints = createDefaultWaypoints();
+
+            state.inputGeometry = null;
+            state.inputShape = null;
+          },
+          undefined,
+          'clearTraceRoute'
+        ),
+
+      receiveTraceRouteResults: ({ data }) =>
+        set(
+          (state) => {
+            const show: Record<string, boolean> = { '0': true };
+            data.alternates?.forEach((_, i) => (show[i + 1] = true));
+
+            const locations = data.trip.locations ?? [];
+            const startLocation = locations[0];
+            const endLocation = locations[locations.length - 1];
+
+            state.successful = true;
+            state.results = { data, show };
+            state.activeRouteIndex = 0;
+
+            state.waypoints = [
+              startLocation
+                ? createWaypointFromLatLng(
+                    'start',
+                    startLocation.lon,
+                    startLocation.lat,
+                    0
+                  )
+                : createEmptyWaypoint('start'),
+              endLocation
+                ? createWaypointFromLatLng(
+                    'end',
+                    endLocation.lon,
+                    endLocation.lat,
+                    1
+                  )
+                : createEmptyWaypoint('end'),
+            ];
+          },
+          undefined,
+          'receiveTraceRouteResults'
+        ),
+
+      setInputGeometry: (coords) =>
+        set(
+          (state) => {
+            state.inputGeometry = coords;
+          },
+          undefined,
+          'setInputGeometry'
+        ),
+
+      setInputShape: (shape) =>
+        set(
+          (state) => {
+            state.inputShape = shape;
+          },
+          undefined,
+          'setInputShape'
+        ),
+
+      setWaypoints: (waypoints) =>
+        set(
+          (state) => {
+            state.waypoints = normalizeTwoWaypoints(waypoints);
+          },
+          undefined,
+          'setWaypoints'
+        ),
+
+      clearWaypoints: () =>
+        set(
+          (state) => {
+            state.waypoints = createDefaultWaypoints();
+          },
+          undefined,
+          'clearWaypoints'
+        ),
+
+      setActiveRouteIndex: (index) =>
+        set(
+          (state) => {
+            state.activeRouteIndex = index;
+          },
+          undefined,
+          'setActiveRouteIndex'
+        ),
+
+      toggleShowOnMap: ({ idx, show }) =>
+        set(
+          (state) => {
+            state.results.show[idx] = show;
+          },
+          undefined,
+          'toggleShowOnMap'
+        ),
+    })),
+    { name: 'trace-route-store' }
+  )
+);
diff --git a/src/utils/parse-gpx.spec.ts b/src/utils/parse-gpx.spec.ts
new file mode 100644
index 0000000..b64ee36
--- /dev/null
+++ b/src/utils/parse-gpx.spec.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest';
+import { parseGpxToLatLng } from './parse-gpx';
+
+describe('parseGpxToLatLng', () => {
+  it('should parse track points from GPX', () => {
+    const gpx = `
+      <gpx>
+        <trk><trkseg>
+          <trkpt lat="52.500000" lon="13.400000" />
+          <trkpt lat="52.510000" lon="13.410000" />
+        </trkseg></trk>
+      </gpx>
+    `;
+
+    expect(parseGpxToLatLng(gpx)).toEqual([
+      [52.5, 13.4],
+      [52.51, 13.41],
+    ]);
+  });
+
+  it('should parse route points from GPX', () => {
+    const gpx = `
+      <gpx>
+        <rte>
+          <rtept lat="40.000000" lon="-3.000000" />
+          <rtept lat="41.000000" lon="-4.000000" />
+        </rte>
+      </gpx>
+    `;
+
+    expect(parseGpxToLatLng(gpx)).toEqual([
+      [40, -3],
+      [41, -4],
+    ]);
+  });
+
+  it('should return empty array for invalid xml', () => {
+    const invalid = '<gpx><trkpt lat="1" lon="2"></gpx';
+    expect(parseGpxToLatLng(invalid)).toEqual([]);
+  });
+
+  it('should skip invalid points and keep valid ones', () => {
+    const gpx = `
+      <gpx>
+        <trk><trkseg>
+          <trkpt lat="52.500000" lon="13.400000" />
+          <trkpt lat="abc" lon="13.410000" />
+          <trkpt lat="52.520000" lon="13.420000" />
+        </trkseg></trk>
+      </gpx>
+    `;
+
+    expect(parseGpxToLatLng(gpx)).toEqual([
+      [52.5, 13.4],
+      [52.52, 13.42],
+    ]);
+  });
+});
diff --git a/src/utils/parse-gpx.ts b/src/utils/parse-gpx.ts
new file mode 100644
index 0000000..2f9f6b4
--- /dev/null
+++ b/src/utils/parse-gpx.ts
@@ -0,0 +1,21 @@
+export function parseGpxToLatLng(xmlText: string): [number, number][] {
+  const doc = new DOMParser().parseFromString(xmlText, 'application/xml');
+
+  // basic error handling
+  const parserError = doc.querySelector('parsererror');
+  if (parserError) return [];
+
+  const pts = Array.from(doc.querySelectorAll('trkpt, rtept'));
+  const coords: [number, number][] = [];
+
+  for (const pt of pts) {
+    const latStr = pt.getAttribute('lat');
+    const lonStr = pt.getAttribute('lon');
+    const lat = latStr ? Number(latStr) : NaN;
+    const lon = lonStr ? Number(lonStr) : NaN;
+    if (!Number.isFinite(lat) || !Number.isFinite(lon)) continue;
+    coords.push([lat, lon]);
+  }
+
+  return coords;
+}
diff --git a/src/utils/route-schemas.spec.ts b/src/utils/route-schemas.spec.ts
index c9d45bf..7b702b0 100644
--- a/src/utils/route-schemas.spec.ts
+++ b/src/utils/route-schemas.spec.ts
@@ -116,6 +116,10 @@ describe('route-schemas', () => {
       expect(isValidTab('tiles')).toBe(true);
     });
 
+    it('should return true for trace-route', () => {
+      expect(isValidTab('trace-route')).toBe(true);
+    });
+
     it('should return false for invalid tab names', () => {
       expect(isValidTab('invalid')).toBe(false);
       expect(isValidTab('settings')).toBe(false);
diff --git a/src/utils/route-schemas.ts b/src/utils/route-schemas.ts
index dd26ded..05bb4af 100644
--- a/src/utils/route-schemas.ts
+++ b/src/utils/route-schemas.ts
@@ -15,7 +15,12 @@ export const searchParamsSchema = z.object({
 
 export type SearchParamsSchema = z.infer<typeof searchParamsSchema>;
 
-export const VALID_TABS = ['directions', 'isochrones', 'tiles'] as const;
+export const VALID_TABS = [
+  'directions',
+  'isochrones',
+  'tiles',
+  'trace-route',
+] as const;
 export type ValidTab = (typeof VALID_TABS)[number];
 
 export function isValidTab(tab: string): tab is ValidTab {