diff --git a/apps/web/public/app.js b/apps/web/public/app.js
index 39238bf..c551f74 100644
--- a/apps/web/public/app.js
+++ b/apps/web/public/app.js
@@ -926,9 +926,9 @@ function updateLeafletMarker(location) {
   const icon = L.divIcon({
     className: `leaflet-truck-marker truck-marker ${status.key} ${vehicleType.className} ${selectedClass}`,
     html: createTruckMarkerHtml(location, vehicleType, markerHeading),
-    iconSize: [106, 82],
-    iconAnchor: [53, 78],
-    popupAnchor: [0, -66]
+    iconSize: [96, 78],
+    iconAnchor: [48, 74],
+    popupAnchor: [0, -58]
   });
 
   let marker = existingMarker;
@@ -970,10 +970,13 @@ function createTruckMarkerHtml(location, vehicleType = getVehicleType(location),
   const label = location.vehicleNo ? location.vehicleNo.slice(-4) : location.driverId.slice(0, 4);
   const rotation = normalizeMarkerRotation(heading);
   return `
-    <span class="truck-marker__halo" aria-hidden="true"></span>
-    <span class="truck-marker__vehicle" style="--truck-heading: ${rotation}deg">
-      <span class="truck-marker__body"></span>
-      <span class="truck-marker__cab"></span>
+    <span class="truck-marker__direction" style="--truck-heading: ${rotation}deg" aria-hidden="true">
+      <svg class="truck-marker__direction-icon" viewBox="0 0 28 28" focusable="false" aria-hidden="true">
+        <path d="M14 2 23 24 14 19 5 24z"></path>
+      </svg>
+    </span>
+    <span class="truck-marker__vehicle" aria-hidden="true">
+      ${createVehicleMarkerSvg(vehicleType.className)}
     </span>
     <span class="truck-marker__label">
       <span class="truck-marker__type">${escapeHtml(vehicleType.shortLabel)}</span>
@@ -982,6 +985,99 @@ function createTruckMarkerHtml(location, vehicleType = getVehicleType(location),
   `;
 }
 
+function createVehicleMarkerSvg(typeClass) {
+  if (typeClass === "type-trailer") {
+    return `
+      <svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
+        <rect class="vehicle-trailer" x="8" y="18" width="54" height="18" rx="4"></rect>
+        <path class="vehicle-cab" d="M64 24h12l8 8v10H64z"></path>
+        <path class="vehicle-window" d="M74 26l5 6h-8v-6z"></path>
+        <path class="vehicle-hitch" d="M61 34h6"></path>
+        <circle class="vehicle-wheel" cx="21" cy="42" r="5"></circle>
+        <circle class="vehicle-wheel" cx="52" cy="42" r="5"></circle>
+        <circle class="vehicle-wheel" cx="76" cy="42" r="5"></circle>
+      </svg>
+    `;
+  }
+
+  if (typeClass === "type-container") {
+    return `
+      <svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
+        <rect class="vehicle-body" x="10" y="16" width="54" height="22" rx="3"></rect>
+        <path class="vehicle-cab" d="M65 24h12l8 8v10H65z"></path>
+        <path class="vehicle-window" d="M75 26l5 6h-8v-6z"></path>
+        <path class="vehicle-container-lines" d="M19 18v19M28 18v19M37 18v19M46 18v19M55 18v19"></path>
+        <circle class="vehicle-wheel" cx="22" cy="43" r="5"></circle>
+        <circle class="vehicle-wheel" cx="53" cy="43" r="5"></circle>
+        <circle class="vehicle-wheel" cx="77" cy="43" r="5"></circle>
+      </svg>
+    `;
+  }
+
+  if (typeClass === "type-box") {
+    return `
+      <svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
+        <rect class="vehicle-body" x="17" y="12" width="43" height="29" rx="4"></rect>
+        <path class="vehicle-cab" d="M61 24h13l8 8v10H61z"></path>
+        <path class="vehicle-window" d="M72 26l5 6h-8v-6z"></path>
+        <path class="vehicle-detail" d="M25 20h26M25 28h20"></path>
+        <circle class="vehicle-wheel" cx="28" cy="44" r="5"></circle>
+        <circle class="vehicle-wheel" cx="71" cy="44" r="5"></circle>
+      </svg>
+    `;
+  }
+
+  if (typeClass === "type-van") {
+    return `
+      <svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
+        <path class="vehicle-body" d="M17 34c0-10 6-18 16-18h24c9 0 17 8 18 18l5 2v7H15v-7z"></path>
+        <path class="vehicle-window" d="M33 20h14v11H27c1-5 3-8 6-11zM50 20h9c4 2 7 6 9 11H50z"></path>
+        <path class="vehicle-detail" d="M25 35h44"></path>
+        <circle class="vehicle-wheel" cx="30" cy="44" r="5"></circle>
+        <circle class="vehicle-wheel" cx="66" cy="44" r="5"></circle>
+      </svg>
+    `;
+  }
+
+  if (typeClass === "type-cold") {
+    return `
+      <svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
+        <rect class="vehicle-body" x="15" y="14" width="45" height="27" rx="4"></rect>
+        <path class="vehicle-cab" d="M61 24h13l8 8v10H61z"></path>
+        <path class="vehicle-window" d="M72 26l5 6h-8v-6z"></path>
+        <path class="vehicle-snow" d="M37 19v16M29 23l16 8M45 23l-16 8"></path>
+        <circle class="vehicle-wheel" cx="28" cy="44" r="5"></circle>
+        <circle class="vehicle-wheel" cx="71" cy="44" r="5"></circle>
+      </svg>
+    `;
+  }
+
+  if (typeClass === "type-wing") {
+    return `
+      <svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
+        <path class="vehicle-wing" d="M18 18h46l-10 16H8z"></path>
+        <rect class="vehicle-body" x="18" y="22" width="42" height="19" rx="4"></rect>
+        <path class="vehicle-cab" d="M61 24h13l8 8v10H61z"></path>
+        <path class="vehicle-window" d="M72 26l5 6h-8v-6z"></path>
+        <path class="vehicle-detail" d="M24 30h28"></path>
+        <circle class="vehicle-wheel" cx="28" cy="44" r="5"></circle>
+        <circle class="vehicle-wheel" cx="71" cy="44" r="5"></circle>
+      </svg>
+    `;
+  }
+
+  return `
+    <svg class="truck-marker__svg" viewBox="0 0 96 52" focusable="false" aria-hidden="true">
+      <rect class="vehicle-body" x="15" y="17" width="45" height="23" rx="4"></rect>
+      <path class="vehicle-cab" d="M61 24h13l8 8v10H61z"></path>
+      <path class="vehicle-window" d="M72 26l5 6h-8v-6z"></path>
+      <path class="vehicle-detail" d="M23 24h31M23 31h26"></path>
+      <circle class="vehicle-wheel" cx="28" cy="43" r="5"></circle>
+      <circle class="vehicle-wheel" cx="71" cy="43" r="5"></circle>
+    </svg>
+  `;
+}
+
 function resolveMarkerHeading(location, fromPosition, targetPosition) {
   const routeHeading = getRouteStartHeading(location);
   if (routeHeading !== null) return routeHeading;
diff --git a/apps/web/public/styles.css b/apps/web/public/styles.css
index 2c3a7d2..198def8 100644
--- a/apps/web/public/styles.css
+++ b/apps/web/public/styles.css
@@ -1052,27 +1052,22 @@ button:hover {
 .truck-marker {
   --truck-color: var(--blue);
   --truck-cab: #1556b8;
-  --truck-accent: rgba(255, 255, 255, 0.2);
+  --truck-secondary: #93c5fd;
   --marker-status: var(--green);
-  --marker-outline: #ffffff;
+  --marker-arrow: #111827;
   --truck-heading: 0deg;
-  --body-width: 50px;
-  --body-height: 28px;
-  --cab-width: 22px;
   position: relative;
   display: grid;
   place-items: center;
-  width: 106px;
-  min-width: 106px;
-  height: 82px;
-  min-height: 82px;
+  width: 96px;
+  min-width: 96px;
+  height: 78px;
+  min-height: 78px;
   border: 0;
   padding: 0;
   background: transparent;
   color: #ffffff;
-  filter:
-    drop-shadow(0 2px 0 rgba(255, 255, 255, 0.92))
-    drop-shadow(0 10px 16px rgba(16, 32, 48, 0.34));
+  filter: drop-shadow(0 7px 11px rgba(15, 23, 42, 0.28));
   font-family: inherit;
   cursor: pointer;
   transition: filter 0.18s ease, transform 0.18s ease;
@@ -1081,189 +1076,206 @@ button:hover {
 .truck-marker:hover,
 .truck-marker.is-selected {
   z-index: 8;
-  filter:
-    drop-shadow(0 2px 0 rgba(255, 255, 255, 0.96))
-    drop-shadow(0 13px 20px rgba(16, 32, 48, 0.44));
+  filter: drop-shadow(0 10px 15px rgba(15, 23, 42, 0.38));
   transform: translateY(-1px);
 }
 
 .truck-marker.stale {
-  --truck-color: var(--amber);
-  --truck-cab: #8f4307;
   --marker-status: var(--amber);
 }
 
 .truck-marker.offline {
-  --truck-color: var(--red);
-  --truck-cab: #8f1d15;
   --marker-status: var(--red);
+  opacity: 0.9;
 }
 
 .truck-marker.type-trailer {
   --truck-color: #7c3aed;
   --truck-cab: #4c1d95;
-  --body-width: 70px;
-  --body-height: 27px;
+  --truck-secondary: #c4b5fd;
 }
 
 .truck-marker.type-container {
   --truck-color: #f97316;
   --truck-cab: #c2410c;
-  --body-width: 66px;
-  --body-height: 27px;
-  --truck-accent: repeating-linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0.32) 0 2px,
-    transparent 2px 9px
-  );
+  --truck-secondary: #fed7aa;
 }
 
-.truck-marker.type-box,
-.truck-marker.type-wing {
+.truck-marker.type-box {
   --truck-color: #059669;
   --truck-cab: #047857;
-  --body-width: 56px;
-  --body-height: 28px;
+  --truck-secondary: #a7f3d0;
 }
 
 .truck-marker.type-van {
   --truck-color: #0ea5e9;
   --truck-cab: #0369a1;
-  --body-width: 40px;
-  --body-height: 24px;
-  --cab-width: 25px;
+  --truck-secondary: #bae6fd;
 }
 
 .truck-marker.type-cold {
   --truck-color: #0891b2;
   --truck-cab: #155e75;
-  --body-width: 55px;
-  --body-height: 28px;
-  --truck-accent: linear-gradient(135deg, rgba(255, 255, 255, 0.28), transparent 45%);
+  --truck-secondary: #cffafe;
 }
 
-.truck-marker.stale {
-  --truck-color: var(--amber);
-  --truck-cab: #8f4307;
-  --marker-status: var(--amber);
-}
-
-.truck-marker.offline {
-  --truck-color: var(--red);
-  --truck-cab: #8f1d15;
-  --marker-status: var(--red);
+.truck-marker.type-wing {
+  --truck-color: #16a34a;
+  --truck-cab: #15803d;
+  --truck-secondary: #bbf7d0;
 }
 
 .truck-marker::after {
   content: "";
   position: absolute;
-  top: 6px;
-  right: 14px;
+  top: 25px;
+  right: 7px;
   z-index: 4;
-  width: 12px;
-  height: 12px;
+  width: 10px;
+  height: 10px;
   border: 2px solid #ffffff;
   border-radius: 50%;
   background: var(--marker-status);
-  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.32);
+  box-shadow: 0 2px 7px rgba(15, 23, 42, 0.34);
   pointer-events: none;
 }
 
-.truck-marker__halo {
+.truck-marker__direction {
   position: absolute;
-  top: 5px;
+  top: 4px;
   left: 50%;
-  z-index: 0;
-  width: 98px;
-  height: 50px;
-  border: 2px solid rgba(15, 23, 42, 0.12);
-  border-radius: 999px;
-  background:
-    radial-gradient(circle at 48% 46%, rgba(255, 255, 255, 0.98) 0 54%, rgba(255, 255, 255, 0.82) 55% 100%);
-  box-shadow:
-    0 0 0 2px rgba(255, 255, 255, 0.72),
-    0 8px 18px rgba(15, 23, 42, 0.24);
-  transform: translateX(-50%);
+  z-index: 4;
+  width: 24px;
+  height: 24px;
+  transform: translateX(-50%) rotate(var(--truck-heading));
+  transform-origin: 50% 50%;
+  transition: transform 0.35s ease;
   pointer-events: none;
 }
 
-.truck-marker.is-selected .truck-marker__halo {
-  border-color: rgba(31, 111, 235, 0.78);
-  box-shadow:
-    0 0 0 3px rgba(255, 255, 255, 0.86),
-    0 0 0 6px rgba(31, 111, 235, 0.22),
-    0 10px 22px rgba(15, 23, 42, 0.28);
+.truck-marker__direction-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  filter: drop-shadow(0 2px 4px rgba(15, 23, 42, 0.35));
+}
+
+.truck-marker__direction-icon path {
+  fill: var(--marker-arrow);
+  stroke: #ffffff;
+  stroke-linejoin: round;
+  stroke-width: 3.2;
+}
+
+.truck-marker.is-selected .truck-marker__direction {
+  --marker-arrow: var(--blue);
 }
 
 .truck-marker__vehicle {
-  position: relative;
-  z-index: 2;
-  display: inline-flex;
-  align-items: flex-end;
-  justify-content: center;
-  margin-bottom: 12px;
-  padding-bottom: 8px;
-  transform: rotate(var(--truck-heading));
-  transform-origin: 50% 44%;
-  transition: transform 0.35s ease;
-}
-
-.truck-marker__vehicle::before,
-.truck-marker__vehicle::after {
-  content: "";
   position: absolute;
-  bottom: 1px;
-  width: 8px;
-  height: 8px;
-  border: 2px solid var(--marker-outline);
-  border-radius: 50%;
-  background: #17212b;
-  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.14);
+  top: 18px;
+  left: 50%;
+  z-index: 2;
+  display: block;
+  width: 86px;
+  height: 46px;
+  transform: translateX(-50%);
 }
 
 .truck-marker__vehicle::before {
-  left: 12px;
+  content: "";
+  position: absolute;
+  inset: 5px 2px 0;
+  z-index: -1;
+  border: 1px solid rgba(15, 23, 42, 0.11);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow:
+    0 0 0 2px rgba(255, 255, 255, 0.86),
+    0 6px 13px rgba(15, 23, 42, 0.22);
 }
 
-.truck-marker__vehicle::after {
-  right: 13px;
+.truck-marker.is-selected .truck-marker__vehicle::before {
+  border-color: rgba(31, 111, 235, 0.72);
+  box-shadow:
+    0 0 0 3px rgba(255, 255, 255, 0.92),
+    0 0 0 6px rgba(31, 111, 235, 0.2),
+    0 8px 17px rgba(15, 23, 42, 0.27);
 }
 
-.truck-marker__body {
-  position: relative;
+.truck-marker__svg {
   display: block;
-  width: var(--body-width);
-  height: var(--body-height);
-  border: 3px solid var(--marker-outline);
-  border-right: 0;
-  border-radius: 7px 0 0 6px;
-  background:
-    var(--truck-accent),
-    var(--truck-color);
-  box-shadow: inset 0 -5px 0 rgba(15, 23, 42, 0.13);
+  width: 100%;
+  height: 100%;
+  overflow: visible;
 }
 
-.truck-marker.type-van .truck-marker__body {
-  border-radius: 9px 0 0 7px;
+.truck-marker__svg .vehicle-body,
+.truck-marker__svg .vehicle-cab,
+.truck-marker__svg .vehicle-trailer,
+.truck-marker__svg .vehicle-wing {
+  fill: var(--truck-color);
+  stroke: #ffffff;
+  stroke-linejoin: round;
+  stroke-width: 3;
+}
+
+.truck-marker__svg .vehicle-cab {
+  fill: var(--truck-cab);
+}
+
+.truck-marker__svg .vehicle-wing {
+  fill: var(--truck-secondary);
+  stroke: #ffffff;
+}
+
+.truck-marker__svg .vehicle-window {
+  fill: #e0f2fe;
+  stroke: #ffffff;
+  stroke-linejoin: round;
+  stroke-width: 2;
+}
+
+.truck-marker__svg .vehicle-wheel {
+  fill: #111827;
+  stroke: #ffffff;
+  stroke-width: 3;
+}
+
+.truck-marker__svg .vehicle-detail,
+.truck-marker__svg .vehicle-container-lines,
+.truck-marker__svg .vehicle-hitch,
+.truck-marker__svg .vehicle-snow {
+  fill: none;
+  stroke: rgba(255, 255, 255, 0.78);
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2.4;
+}
+
+.truck-marker__svg .vehicle-snow {
+  stroke: #ffffff;
+  stroke-width: 2.2;
 }
 
 .truck-marker__label {
   position: absolute;
   left: 50%;
-  bottom: 2px;
+  bottom: 0;
   z-index: 3;
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  max-width: 98px;
-  min-height: 21px;
-  padding: 2px 7px;
-  border: 2px solid rgba(255, 255, 255, 0.9);
+  max-width: 88px;
+  min-height: 19px;
+  padding: 2px 7px 3px;
+  border: 1px solid rgba(255, 255, 255, 0.9);
   border-radius: 999px;
   background: rgba(15, 23, 42, 0.94);
-  box-shadow: 0 5px 12px rgba(15, 23, 42, 0.3);
+  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.28);
   color: #ffffff;
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 900;
   line-height: 1.1;
   transform: translateX(-50%);
@@ -1281,27 +1293,6 @@ button:hover {
   text-overflow: ellipsis;
 }
 
-.truck-marker__cab {
-  position: relative;
-  width: var(--cab-width);
-  height: calc(var(--body-height) - 3px);
-  border: 3px solid var(--marker-outline);
-  border-radius: 0 8px 6px 0;
-  background: var(--truck-cab);
-  box-shadow: inset 0 -4px 0 rgba(15, 23, 42, 0.14);
-}
-
-.truck-marker__cab::before {
-  content: "";
-  position: absolute;
-  top: 3px;
-  right: 3px;
-  width: 7px;
-  height: 5px;
-  border-radius: 1px;
-  background: rgba(255, 255, 255, 0.72);
-}
-
 .leaflet-truck-marker {
   border: 0;
   background: transparent;