diff --git a/frontend/src/lib/components/MapListToggle.svelte b/frontend/src/lib/components/MapListToggle.svelte
index 607397b0..d9a6394c 100644
--- a/frontend/src/lib/components/MapListToggle.svelte
+++ b/frontend/src/lib/components/MapListToggle.svelte
@@ -1,18 +1,30 @@
-<script>
-	import { page } from '$app/stores';
-	import { useLibre311Context } from '$lib/context/Libre311Context';
+<script lang="ts">
+	import { createEventDispatcher } from 'svelte';
+	import { MapOrList, type MapOrListToggle } from './map_or_list_toggle';
 
-	const linkResolver = useLibre311Context().linkResolver;
+	export let toggled: MapOrListToggle = MapOrList.Map;
+
+	const dispatch = createEventDispatcher<{
+		change: MapOrListToggle;
+	}>();
+
+	function set(value: MapOrListToggle) {
+		toggled = value;
+		dispatch('change', value);
+	}
 </script>
 
 <div class="toggle">
-	<a href={linkResolver.issuesMap($page.url)}>
-		<button class="rounded-l-lg" class:selected={$page.route.id == '/issues/map'}> Map </button>
-	</a>
-
-	<a href={linkResolver.issuesList($page.url)}>
-		<button class="rounded-r-lg" class:selected={$page.route.id == '/issues/list'}>List </button>
-	</a>
+	<button
+		class="rounded-l-lg"
+		class:selected={toggled === MapOrList.List}
+		on:click={() => set(MapOrList.List)}>List</button
+	>
+	<button
+		class="rounded-r-lg"
+		class:selected={toggled === MapOrList.Map}
+		on:click={() => set(MapOrList.Map)}>Map</button
+	>
 </div>
 
 <style>
diff --git a/frontend/src/lib/components/RequestListMap.svelte b/frontend/src/lib/components/RequestListMap.svelte
new file mode 100644
index 00000000..ea7c02e0
--- /dev/null
+++ b/frontend/src/lib/components/RequestListMap.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	export let listHidden = false;
+	export let mapHidden = false;
+
+	$: layoutContainerClass = listHidden ? 'map-only' : mapHidden ? 'list-only' : 'list-and-map';
+</script>
+
+<div class="top-level {layoutContainerClass}">
+	<div class="list-view h-full">
+		<slot name="list-slot" />
+	</div>
+	<div class="map-view">
+		<slot name="map-slot" />
+	</div>
+</div>
+
+<style>
+	.top-level {
+		height: 100%;
+	}
+
+	.list-and-map {
+		display: grid;
+		grid-template-columns: 400px auto;
+	}
+
+	.list-only {
+		display: grid;
+		grid-template-columns: auto;
+	}
+
+	.map-only {
+		display: grid;
+		grid-template-columns: auto;
+	}
+
+	.map-only .list-view {
+		display: none;
+	}
+
+	.list-only .map-view {
+		display: none;
+	}
+
+	.list-view {
+		overflow-y: auto;
+	}
+</style>
diff --git a/frontend/src/lib/components/SideBarMainContentLayout.svelte b/frontend/src/lib/components/SideBarMainContentLayout.svelte
deleted file mode 100644
index 8978c884..00000000
--- a/frontend/src/lib/components/SideBarMainContentLayout.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script lang="ts">
-	export let sideBarBreakpointActive = true;
-</script>
-
-<div class="layout-container">
-	<aside class="side-bar h-full" class:collapsable-side-bar={sideBarBreakpointActive}>
-		<slot name="side-bar" />
-	</aside>
-	<div class="main-content"><slot name="main-content" /></div>
-</div>
-
-<style>
-	.layout-container {
-		grid-template-columns: 100%;
-		height: 100%;
-	}
-	.main-content {
-		flex-grow: 1;
-		height: 100%;
-	}
-
-	.collapsable-side-bar {
-		display: none;
-	}
-
-	.side-bar {
-		position: relative;
-		width: 400px;
-	}
-
-	aside {
-		overflow-y: auto;
-	}
-
-	@media (min-width: 769px) {
-		.layout-container {
-			display: grid;
-			grid-template-columns: 400px auto;
-		}
-		.collapsable-side-bar {
-			display: unset;
-		}
-	}
-</style>
diff --git a/frontend/src/lib/components/map_or_list_toggle.ts b/frontend/src/lib/components/map_or_list_toggle.ts
new file mode 100644
index 00000000..9dddd4f2
--- /dev/null
+++ b/frontend/src/lib/components/map_or_list_toggle.ts
@@ -0,0 +1,6 @@
+export const MapOrList = {
+	Map: 'Map',
+	List: 'List'
+} as const;
+
+export type MapOrListToggle = (typeof MapOrList)[keyof typeof MapOrList];
diff --git a/frontend/src/lib/components/media.ts b/frontend/src/lib/components/media.ts
new file mode 100644
index 00000000..867b46a3
--- /dev/null
+++ b/frontend/src/lib/components/media.ts
@@ -0,0 +1,16 @@
+// media.ts
+import { readable } from 'svelte/store';
+
+export function mediaQuery(query: string) {
+	return readable(false, (set) => {
+		if (typeof window === 'undefined') return;
+
+		const mql = window.matchMedia(query);
+		set(mql.matches);
+
+		const handler = (e: MediaQueryListEvent) => set(e.matches);
+		mql.addEventListener('change', handler);
+
+		return () => mql.removeEventListener('change', handler);
+	});
+}
diff --git a/frontend/src/routes/issues/list/+page.svelte b/frontend/src/routes/issues/list/+page.svelte
deleted file mode 100644
index e5aee33d..00000000
--- a/frontend/src/routes/issues/list/+page.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-<script lang="ts">
-	import messages from '$media/messages.json';
-	import ServiceRequestPreview from '$lib/components/ServiceRequestPreview.svelte';
-	import Pagination from '$lib/components/Pagination.svelte';
-	import { page } from '$app/stores';
-	import { useServiceRequestsContext } from '$lib/context/ServiceRequestsContext';
-	import { useLibre311Context } from '$lib/context/Libre311Context';
-	import MapListToggle from '$lib/components/MapListToggle.svelte';
-
-	const ctx = useServiceRequestsContext();
-	const serviceRequestsRes = ctx.serviceRequestsResponse;
-
-	const linkResolver = useLibre311Context().linkResolver;
-
-	let listElement: HTMLElement;
-
-	function scrollToTop() {
-		listElement.scrollIntoView();
-	}
-</script>
-
-<div class="flex items-center justify-center">
-	<div class="w-full max-w-lg">
-		<div class="my-4 flex justify-center">
-			<MapListToggle />
-		</div>
-
-		{#if $serviceRequestsRes.type === 'success'}
-			<div bind:this={listElement}>
-				<div class="sticky top-0 border-b-2 bg-white">
-					<div class="m-3 flex items-center justify-between">
-						<div>
-							<p class="text-base">{messages['sidebar']['title']}</p>
-						</div>
-
-						<div>
-							<Pagination
-								pagination={$serviceRequestsRes.value.metadata.pagination}
-								nextPage={linkResolver.nextIssuesPage(
-									$serviceRequestsRes.value.metadata.pagination,
-									$page.url
-								)}
-								prevPage={linkResolver.prevIssuesPage(
-									$serviceRequestsRes.value.metadata.pagination,
-									$page.url
-								)}
-								on:pageChange={scrollToTop}
-							/>
-						</div>
-					</div>
-				</div>
-
-				<ul>
-					{#each $serviceRequestsRes.value.serviceRequests as serviceRequest}
-						<li class="m-3">
-							<ServiceRequestPreview
-								{serviceRequest}
-								detailsLink={linkResolver.issueDetailsMobile(
-									$page.url,
-									serviceRequest.service_request_id
-								)}
-							/>
-						</li>
-					{/each}
-				</ul>
-			</div>
-		{/if}
-	</div>
-</div>
diff --git a/frontend/src/routes/issues/map/+layout.svelte b/frontend/src/routes/issues/map/+layout.svelte
index 2c5283d7..536030e3 100644
--- a/frontend/src/routes/issues/map/+layout.svelte
+++ b/frontend/src/routes/issues/map/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import SideBarMainContentLayout from '$lib/components/SideBarMainContentLayout.svelte';
+	import RequestListMap from '$lib/components/RequestListMap.svelte';
 	import {
 		useSelectedServiceRequestStore,
 		useServiceRequestsResponseStore
@@ -10,7 +10,6 @@
 	import MapComponent from '$lib/components/MapComponent.svelte';
 	import MapMarkerCircle from '$lib/components/MapMarkerCircle.svelte';
 	import MapMarkerWaypoint from '$lib/components/MapMarkerWaypoint.svelte';
-	import Breakpoint from '$lib/components/Breakpoint.svelte';
 	import MapListToggle from '$lib/components/MapListToggle.svelte';
 
 	// Type imports
@@ -28,11 +27,16 @@
 	import { mapStatusLegendControlFactory } from '$lib/components/MapStatusLegendControl';
 	import { KEYBOARD_PAN_DELTA_COARSE, SELECTION_ZOOM_LEVEL } from '$lib/constants/map';
 
+	import { MapOrList, type MapOrListToggle } from '$lib/components/map_or_list_toggle';
+
 	const linkResolver = useLibre311Context().linkResolver;
 	const libre311 = useLibre311Context().service;
 	const serviceRequestsResponseStore = useServiceRequestsResponseStore();
 	const selectedServiceRequestStore = useSelectedServiceRequestStore();
 
+	import Breakpoint from '$lib/components/Breakpoint.svelte';
+	import { mediaQuery } from '$lib/components/media';
+
 	$: mapBounds = createMapBounds($serviceRequestsResponseStore);
 
 	// Compute flyTo target when a service request is selected
@@ -76,14 +80,47 @@
 			goto(linkResolver.issueDetailsMobile($page.url, serviceRequest.service_request_id));
 		}
 	}
+
+	let listHidden = false;
+	let mapHidden = false;
+
+	export let toggleState: MapOrListToggle = MapOrList.Map;
+
+	function handleToggle(toggled: MapOrListToggle) {
+		toggleState = toggled;
+
+		listHidden = toggled === MapOrList.Map;
+		mapHidden = toggled === MapOrList.List;
+	}
+
+	const isNarrow = mediaQuery('(max-width: 768px)');
+
+	$: {
+		// callback-like behavior
+		if ($isNarrow) {
+			listHidden = true;
+			mapHidden = false;
+		} else {
+			listHidden = false;
+			mapHidden = false;
+			toggleState = MapOrList.Map;
+		}
+	}
 </script>
 
-<SideBarMainContentLayout>
-	<slot slot="side-bar" />
-	<div slot="main-content" class="relative flex h-full">
+<RequestListMap {listHidden} {mapHidden}>
+	<div slot="list-slot">
+		<Breakpoint>
+			<div slot="is-mobile-or-tablet" class="my-4 flex justify-center">
+				<MapListToggle toggled={toggleState} on:change={(e) => handleToggle(e.detail)} />
+			</div>
+		</Breakpoint>
+		<slot />
+	</div>
+	<div slot="map-slot" class="relative flex h-full">
 		<Breakpoint>
 			<div slot="is-mobile-or-tablet" class="absolute left-1/2 top-5 z-[1] -translate-x-1/2">
-				<MapListToggle />
+				<MapListToggle toggled={toggleState} on:change={(e) => handleToggle(e.detail)} />
 			</div>
 		</Breakpoint>
 		<MapComponent
@@ -105,4 +142,4 @@
 		</MapComponent>
 		<CreateServiceRequestButton />
 	</div>
-</SideBarMainContentLayout>
+</RequestListMap>