diff --git a/src/data/fleet/f-metro~losangeles~rail~rt.json b/src/data/fleet/f-metro~losangeles~rail~rt.json
new file mode 100644
index 00000000..8c60395c
--- /dev/null
+++ b/src/data/fleet/f-metro~losangeles~rail~rt.json
@@ -0,0 +1,38 @@
+[
+    {
+        "type": "Heavy Rail Vehicle",
+        "manufacturer": "Breda",
+        "model": "A650",
+        "year": 1991,
+        "regex": "^5[0-9]{2}|^6[0-9]{2}",
+        "image": "/vehicles/metro/A650.jpeg",
+        "credit": "Metro photo"
+    },
+    {
+        "type": "Light Rail Vehicle",
+        "manufacturer": "Siemens",
+        "model": "P2000",
+        "year": 1996,
+        "regex": "^2[0-9]{2}|^3[0-9]{2}",
+        "image": "/vehicles/metro/P2000.jpeg",
+        "credit": "Metro photo"
+    },
+    {
+        "type": "Light Rail Vehicle",
+        "manufacturer": "Ansaldobreda",
+        "model": "P2550",
+        "year": 2006,
+        "regex": "^7[0-9]{2}",
+        "image": "/vehicles/metro/P2550.jpeg",
+        "credit": "Metro photo"
+    },
+    {
+        "type": "Light Rail Vehicle",
+        "manufacturer": "Kinkisharyo",
+        "model": "P3010",
+        "year": 2014,
+        "regex": "^1[0-9]{3}",
+        "image": "/vehicles/metro/P3010.jpeg",
+        "credit": "Metro photo"
+    }
+]
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d10e251d..6ede8e61 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -40,6 +40,12 @@
 	import Artwork from '../components/artwork.svelte';
 
 	import mtsFleetData from '../data/fleet/f-mts~rt~onebusaway.json'
+	import metroFleetData from '../data/fleet/f-metro~losangeles~rail~rt.json'
+
+	let fleetData = {
+		"f-mts~rt~onebusaway": mtsFleetData,
+		"f-metro~losangeles~rail~rt": metroFleetData
+	}
 
 	let enabledlayerstyle =
 		'text-black dark:text-white bg-blue-200 dark:bg-gray-700 border border-blue-800 dark:border-blue-200 text-sm md:text-sm';
@@ -2374,19 +2380,15 @@ on:keydown={() => {
 				{/if}
 			{/if}
 			{#if selectedVehicle.properties.agency == 'f-metro~losangeles~rail~rt'}
-				{#if selectedVehicle.properties.maptag == 'A'}
-					<img src="/lines/metro-a.svg" style:height="50px" />	
-				{:else if selectedVehicle.properties.maptag == 'B'}
-					<img src="/lines/metro-b.svg" style:height="50px" />
-				{:else if selectedVehicle.properties.maptag == 'C'}
-					<img src="/lines/metro-c.svg" style:height="50px" />
-				{:else if selectedVehicle.properties.maptag == 'D'}
-					<img src="/lines/metro-d.svg" style:height="50px" />
-				{:else if selectedVehicle.properties.maptag == 'E'}
-					<img src="/lines/metro-e.svg" style:height="50px" />
-				{:else if selectedVehicle.properties.maptag == 'K'}
-					<img src="/lines/metro-k.svg" style:height="50px" />
-				{/if}
+				<img src="/lines/metro.svg" style:height="50px" style:float="left" style:vertical-align="bottom" style:padding-right="10px" />
+				<img src="/lines/metro-{selectedVehicle.properties.maptag.toLowerCase()}.svg" style:height="50px" style:vertical-align="bottom" />
+			{/if}
+			{#if selectedVehicle.properties.agency == 'f-metro~losangeles~bus~rt'}
+				<h1 style:color={darkMode ? selectedVehicle.properties.contrastdarkmode : selectedVehicle.properties.color} class="text-3xl">
+					<img src={`/lines/metro.svg`} style:height="35px" style:float="left" style:vertical-align="middle" />
+					&nbsp;
+					{selectedVehicle.properties.maptag}
+				</h1>
 			{/if}
 			{#if selectedVehicle.properties.agency == 'f-metrolinktrains~rt'}
 				<img src="https://metrolinktrains.com/Static/img/dist/metrolink-text-logo.svg" style:width="100%" />
@@ -2395,11 +2397,20 @@ on:keydown={() => {
 				<img src="https://www.octa.net/dist/images/octa-logo.svg" style:height="60px" />
 				<br />
 			{/if}
+			{#if selectedVehicle.properties.agency == 'f-metra~rt'}
+				<img src="https://metra.com/themes/custom/metrarail/images/logo.svg" style:height="40px">
+				<br />
+				<h1 style:color={darkMode ? selectedVehicle.properties.contrastdarkmode : selectedVehicle.properties.color} class="text-3xl">
+					<img src={`https://ridertools.metrarail.com/sites/default/files/assets/maps-schedules/train-lines/trainline_${(selectedVehicle.properties.maptag == 'ME' || selectedVehicle.properties.maptag == 'RI') ? (selectedVehicle.properties.maptag == 'ME' ? 'med' : 'rid') : selectedVehicle.properties.maptag.replace('-', '').toLowerCase()}.png`} style:height="35px" style:float="left" />
+					&nbsp;
+					{selectedVehicle.properties.maptag}
+				</h1>
+			{/if}
 			{#if selectedVehicle.properties.agency == 'f-amtrak~rt'}
 				<img src="https://www.amtrak.com/content/dam/projects/dotcom/english/public/images/logos/amtrak-logo__white.svg" style:width="100%" />
 				<br />
 			{/if}
-			{#if (selectedVehicle.properties.agency != 'f-metro~losangeles~rail~rt')}
+			{#if (selectedVehicle.properties.agency != 'f-metro~losangeles~rail~rt' && selectedVehicle.properties.agency != 'f-metra~rt' && selectedVehicle.properties.agency != 'f-metro~losangeles~bus~rt')}
 				<h1 style:color={darkMode ? selectedVehicle.properties.contrastdarkmode : selectedVehicle.properties.color} class="text-3xl">{selectedVehicle.properties.maptag}</h1>
 			{/if}
 			<br />
@@ -2419,15 +2430,18 @@ on:keydown={() => {
 				<b>Bearing</b> {selectedVehicle.properties.bearing.toFixed(3)}
 				<br />
 			{/if}
-			{#if selectedVehicle.properties.agency == 'f-mts~rt~onebusaway'}
-				{#each mtsFleetData as { type, manufacturer, model, year, regex, home, image, credit }}
+			{#if selectedVehicle.properties.agency == 'f-mts~rt~onebusaway' || selectedVehicle.properties.agency == 'f-metro~losangeles~rail~rt'}
+				{#each fleetData[selectedVehicle.properties.agency] as { type, manufacturer, model, year, regex, home, image, credit }}
 					{#if (new RegExp(regex)).test(selectedVehicle.properties.vehicleIdLabel || '')}
 						<b>Type</b> {type}
 						<br />
 						<b>Vehicle</b> {year || ''} {manufacturer} {model}
 						<br />
-						<b>Home</b> {home}
-						<br /><br />
+						{#if home}
+							<b>Home</b> {home}
+							<br />
+						{/if}
+						<br />
 						{#if image}
 							<img src={image} alt={model} style:width="100%">
 							<i>{credit}</i>
diff --git a/static/lines/metro.svg b/static/lines/metro.svg
new file mode 100644
index 00000000..245f1fb3
--- /dev/null
+++ b/static/lines/metro.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="75" height="75" enable-background="new 0 0 199.999 90" overflow="visible" version="1.1" viewBox="0 0 75 75" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+<title>Los Angeles Metro M logo</title>
+<path d="m1.12 38.1c0-20.2 16.4-36.6 36.6-36.6 20.2 0 36.6 16.4 36.6 36.6 0 20.2-16.4 36.6-36.6 36.6-20.2 0-36.6-16.4-36.6-36.6"/>
+
+<path d="m59.9 16.3v43.9h-9.23v-24.8c-0.357 0.974-5.37 15.4-7.03 20.3l-4.12-12.3 9.07-27.2h11.3zm-32.6 0h-11.3v43.9h9.2v-24.8c0.459 1.26 8.66 24.8 8.66 24.8h8.23l-14.8-43.9z" style="fill:#fff"/>
+<rect y="-15" width="200" height="90" style="fill:none"/>
+</svg>
diff --git a/static/vehicles/metro/A650.jpeg b/static/vehicles/metro/A650.jpeg
new file mode 100644
index 00000000..d0facd8a
Binary files /dev/null and b/static/vehicles/metro/A650.jpeg differ
diff --git a/static/vehicles/metro/P2000.jpeg b/static/vehicles/metro/P2000.jpeg
new file mode 100644
index 00000000..ea0c76b7
Binary files /dev/null and b/static/vehicles/metro/P2000.jpeg differ
diff --git a/static/vehicles/metro/P2550.jpeg b/static/vehicles/metro/P2550.jpeg
new file mode 100644
index 00000000..2732e23b
Binary files /dev/null and b/static/vehicles/metro/P2550.jpeg differ
diff --git a/static/vehicles/metro/P3010.jpeg b/static/vehicles/metro/P3010.jpeg
new file mode 100644
index 00000000..867fbd9f
Binary files /dev/null and b/static/vehicles/metro/P3010.jpeg differ