diff --git a/src/components/Carpool/Carpool.tsx b/src/components/Carpool/Carpool.tsx
index 93d953c..ff9ee22 100644
--- a/src/components/Carpool/Carpool.tsx
+++ b/src/components/Carpool/Carpool.tsx
@@ -203,11 +203,11 @@ export default function Carpool({ id }: { id: number }) {
 				<CarpoolTopButtons />
 				<CarpoolDetails />
 				<Members>
-					<CarpoolRouteEstimator />
-					<MemberList />
-					<h2>Map</h2>
+					<h2 style={{ marginBlockEnd: 0 }}>Map</h2>
 					<CarpoolMapLegend />
 					<CarpoolMap />
+					<CarpoolRouteEstimator />
+					<MemberList />
 				</Members>
 			</UISecondaryBox>
 		</CarpoolContext.Provider>
diff --git a/src/components/Carpool/CarpoolMapLegend.tsx b/src/components/Carpool/CarpoolMapLegend.tsx
index 26d38a1..413e503 100644
--- a/src/components/Carpool/CarpoolMapLegend.tsx
+++ b/src/components/Carpool/CarpoolMapLegend.tsx
@@ -1,26 +1,9 @@
 export default function CarpoolMapLegend() {
 	return (
-		<div
-			style={{
-				display: 'flex',
-				flexDirection: 'column',
-				margin: '0.5rem',
-				backgroundColor: '#fcfcfc',
-				borderRadius: '0.5rem',
-				padding: '0.5rem',
-			}}
-		>
-			<b style={{ textAlign: 'center' }}>Legend</b>
-			<div style={{ display: 'flex', alignItems: 'center' }}>
-				<img src="/markers/red.png" alt="Red marker"></img> My location
-			</div>
-			<div style={{ display: 'flex', alignItems: 'center' }}>
-				<img src="/markers/blue.png" alt="Blue marker"></img> Other member
-				location
-			</div>
-			<div style={{ display: 'flex', alignItems: 'center' }}>
-				<img src="/markers/green.png" alt="Green marker"></img> Event location
-			</div>
+		<div style={{ display: 'flex', alignItems: 'center', margin: '1rem' }}>
+			<img src="/markers/red.png" alt="Red marker"></img> Me
+			<img src="/markers/blue.png" alt="Blue marker"></img> Other
+			<img src="/markers/green.png" alt="Green marker"></img> Event
 		</div>
 	);
 }