diff --git a/src/App.tsx b/src/App.tsx
index f3c47eb7..a7e3b92c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -219,7 +219,10 @@ function LargeScreenLayout({ query, route, map, error, mapOptions, encodedValues
                 <LocationButton queryPoints={query.queryPoints} />
             </div>
             <div className={styles.map}>
-                <MapComponent map={map} />
+                <MapComponent map={map} paths={route.routingResult.paths}
+                                            selectedPath={route.selectedPath}
+                                            queryPoints={query.queryPoints}
+                                            smallScreenRoutingResultVisible={false}/>
             </div>
 
             <div className={styles.pathDetails}>
@@ -243,7 +246,10 @@ function SmallScreenLayout({ query, route, map, error, mapOptions, encodedValues
                 />
             </div>
             <div className={styles.smallScreenMap}>
-                <MapComponent map={map} />
+                <MapComponent map={map} paths={route.routingResult.paths}
+                                           selectedPath={route.selectedPath}
+                                           queryPoints={query.queryPoints}
+                                           smallScreenRoutingResultVisible={true}/>
             </div>
             <div className={styles.smallScreenMapOptions}>
                 <div className={styles.onMapRightSide}>
diff --git a/src/layers/UsePathsLayer.tsx b/src/layers/UsePathsLayer.tsx
index c502c48c..f6634362 100644
--- a/src/layers/UsePathsLayer.tsx
+++ b/src/layers/UsePathsLayer.tsx
@@ -35,14 +35,14 @@ export default function usePathsLayer(map: Map, paths: Path[], selectedPath: Pat
     }, [map, paths, selectedPath])
 }
 
-function removeCurrentPathLayers(map: Map) {
+export function removeCurrentPathLayers(map: Map) {
     map.getLayers()
         .getArray()
         .filter(l => l.get(pathsLayerKey) || l.get(selectedPathLayerKey) || l.get(accessNetworkLayerKey))
         .forEach(l => map.removeLayer(l))
 }
 
-function addUnselectedPathsLayer(map: Map, paths: Path[]) {
+export function addUnselectedPathsLayer(map: Map, paths: Path[]) {
     const styleArray = [
         new Style({
             stroke: new Stroke({
@@ -118,7 +118,7 @@ function createBezierLineString(start: number[], end: number[]): LineString {
     return new LineString(bezierPoints)
 }
 
-function addAccessNetworkLayer(map: Map, selectedPath: Path, queryPoints: QueryPoint[]) {
+export function addAccessNetworkLayer(map: Map, selectedPath: Path, queryPoints: QueryPoint[]) {
     const style = new Style({
         stroke: new Stroke({
             color: 'rgba(143,183,241,0.9)',
@@ -143,7 +143,7 @@ function addAccessNetworkLayer(map: Map, selectedPath: Path, queryPoints: QueryP
     map.addLayer(layer)
 }
 
-function addSelectedPathsLayer(map: Map, selectedPath: Path) {
+export function addSelectedPathsLayer(map: Map, selectedPath: Path) {
     const styleArray = [
         new Style({
             stroke: new Stroke({
diff --git a/src/map/Map.module.css b/src/map/Map.module.css
index 074f894e..b32030eb 100644
--- a/src/map/Map.module.css
+++ b/src/map/Map.module.css
@@ -41,3 +41,27 @@
 .customAttribution button {
     display: none;
 }
+
+.topBar {
+    position: absolute;
+    left: 0;
+    bottom: -0.3rem;
+    width: 100%;
+    z-index: 1;
+    padding: 1px 180px;
+}
+
+.hidePathsButton {
+    display: inline-block;
+    background: none;
+    border: none;
+    font-size: 13px;
+    padding: 8px 16px;
+    margin: 0;
+}
+
+@media (max-width: 44rem) {
+    .smallScreenRoutingResultVisible .topBar {
+        bottom: 8.25rem;
+    }
+}
diff --git a/src/map/MapComponent.tsx b/src/map/MapComponent.tsx
index ac2d39b3..6f0c5e95 100644
--- a/src/map/MapComponent.tsx
+++ b/src/map/MapComponent.tsx
@@ -1,24 +1,78 @@
 import 'ol/ol.css'
 import styles from '@/map/Map.module.css'
-import { useEffect, useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Map } from 'ol'
 import { Bbox } from '@/api/graphhopper'
 import Dispatcher from '@/stores/Dispatcher'
 import { ErrorAction } from '@/actions/Actions'
 import { tr } from '@/translation/Translation'
 import { Coordinate, getBBoxFromCoord } from '@/utils'
+import { addUnselectedPathsLayer, addSelectedPathsLayer, addAccessNetworkLayer, removeCurrentPathLayers } from '@/layers/UsePathsLayer'
+import { Path } from '@/api/graphhopper'
+import { QueryPoint } from '@/stores/QueryStore'
+import VisibilityOnIcon  from '@/sidebar/visibility_on.svg'
+import VisibilityOffIcon  from '@/sidebar/visibility_off.svg'
 
 type MapComponentProps = {
-    map: Map
+    map: Map,
+    paths: Path[],
+    selectedPath: Path,
+    queryPoints: QueryPoint[]
 }
 
 /** A small react component that simply attaches our map instance to a div to show the map **/
-export default function ({ map }: MapComponentProps) {
+export default function ({
+    map, paths, selectedPath, queryPoints, smallScreenRoutingResultVisible
+}: MapComponentProps & { smallScreenRoutingResultVisible?: boolean }) {
     const mapElement = useRef<HTMLDivElement | null>(null)
     useEffect(() => {
         map.setTarget(mapElement.current!)
     }, [map])
-    return <div ref={mapElement} className={styles.mapContainer} />
+    const [showPaths, setShowPaths] = useState(true)
+    useEffect(() => {
+      const handleKeyDown = (e: KeyboardEvent) => {
+          if (e.key === 'h') setShowPaths(false)
+      }
+      const handleKeyUp = (e: KeyboardEvent) => {
+          if (e.key === 'h') setShowPaths(true)
+      }
+      window.addEventListener('keydown', handleKeyDown)
+      window.addEventListener('keyup', handleKeyUp)
+      return () => {
+          window.removeEventListener('keydown', handleKeyDown)
+          window.removeEventListener('keyup', handleKeyUp)
+      }
+    }, [])
+    useEffect(() => {
+        removeCurrentPathLayers(map)
+        if (showPaths) {
+            addUnselectedPathsLayer(map, paths.filter(p => p != selectedPath))
+            addSelectedPathsLayer(map, selectedPath)
+            addAccessNetworkLayer(map, selectedPath, queryPoints)
+        }
+        return () => {
+            removeCurrentPathLayers(map)
+        }
+    }, [map, paths, selectedPath, showPaths])
+    return (
+        <div
+            ref={mapElement}
+            className={
+                styles.mapContainer +
+                (smallScreenRoutingResultVisible ? ' ' + styles.smallScreenRoutingResultVisible : '')
+            }
+        >
+            <div className={styles.topBar}>
+                <button
+                  className={styles.hidePathsButton}
+                  onClick={() => setShowPaths(v => !v)}
+                  title={showPaths ? tr('hide_route') : tr('show_route')}
+                >
+                  {showPaths ? <VisibilityOffIcon width={20} height={20} /> : <VisibilityOnIcon width={20} height={20} />}
+                </button>
+            </div>
+        </div>
+    )
 }
 
 export function onCurrentLocationSelected(
diff --git a/src/sidebar/visibility_off.svg b/src/sidebar/visibility_off.svg
new file mode 100644
index 00000000..d4a6ec45
--- /dev/null
+++ b/src/sidebar/visibility_off.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#434343"><path d="m644-428-58-58q9-47-27-88t-93-32l-58-58q17-8 34.5-12t37.5-4q75 0 127.5 52.5T660-500q0 20-4 37.5T644-428Zm128 126-58-56q38-29 67.5-63.5T832-500q-50-101-143.5-160.5T480-720q-29 0-57 4t-55 12l-62-62q41-17 84-25.5t90-8.5q151 0 269 83.5T920-500q-23 59-60.5 109.5T772-302Zm20 246L624-222q-35 11-70.5 16.5T480-200q-151 0-269-83.5T40-500q21-53 53-98.5t73-81.5L56-792l56-56 736 736-56 56ZM222-624q-29 26-53 57t-41 67q50 101 143.5 160.5T480-280q20 0 39-2.5t39-5.5l-36-38q-11 3-21 4.5t-21 1.5q-75 0-127.5-52.5T300-500q0-11 1.5-21t4.5-21l-84-82Zm319 93Zm-151 75Z"/></svg>
\ No newline at end of file
diff --git a/src/sidebar/visibility_on.svg b/src/sidebar/visibility_on.svg
new file mode 100644
index 00000000..d1366578
--- /dev/null
+++ b/src/sidebar/visibility_on.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#434343"><path d="M480-320q75 0 127.5-52.5T660-500q0-75-52.5-127.5T480-680q-75 0-127.5 52.5T300-500q0 75 52.5 127.5T480-320Zm0-72q-45 0-76.5-31.5T372-500q0-45 31.5-76.5T480-608q45 0 76.5 31.5T588-500q0 45-31.5 76.5T480-392Zm0 192q-146 0-266-81.5T40-500q54-137 174-218.5T480-800q146 0 266 81.5T920-500q-54 137-174 218.5T480-200Zm0-300Zm0 220q113 0 207.5-59.5T832-500q-50-101-144.5-160.5T480-720q-113 0-207.5 59.5T128-500q50 101 144.5 160.5T480-280Z"/></svg>
\ No newline at end of file