diff --git a/web/src/lib/components/trail/map_with_elevation.svelte b/web/src/lib/components/trail/map_with_elevation.svelte
index 65c731a2..f391e222 100644
--- a/web/src/lib/components/trail/map_with_elevation.svelte
+++ b/web/src/lib/components/trail/map_with_elevation.svelte
@@ -139,7 +139,7 @@
             closeBtn: false,
             followMarker: true,
             autofitBounds: true,
-            imperial: $page.data.settings?.unit == "imperial" ?? false,
+            imperial: $page.data.settings.unit == "imperial",
             reverseCoords: false,
             acceleration: false,
             slope: true,
diff --git a/web/src/lib/components/trail/trail_info_panel.svelte b/web/src/lib/components/trail/trail_info_panel.svelte
index 8c635ff2..669d6308 100644
--- a/web/src/lib/components/trail/trail_info_panel.svelte
+++ b/web/src/lib/components/trail/trail_info_panel.svelte
@@ -21,7 +21,7 @@
         formatElevation,
         formatTimeHHMM,
     } from "$lib/util/format_util";
-    import { createMarkerFromWaypoint } from "$lib/util/leaflet_util";
+    import { createMarkerFromWaypoint, endIcon, startIcon } from "$lib/util/leaflet_util";
     import "$lib/vendor/leaflet-elevation/src/index.css";
     import type { Icon, Map, Marker } from "leaflet";
     import "leaflet.awesome-markers/dist/leaflet.awesome-markers.css";
@@ -92,13 +92,9 @@
                     parseElements: ["track", "route"] as any,
                 },
                 marker_options: {
-                    startIcon: L.AwesomeMarkers.icon({
-                        icon: "circle-half-stroke",
-                        prefix: "fa",
-                        markerColor: "cadetblue",
-                        iconColor: "white",
-                    }) as Icon,
+                    startIcon: startIcon() as any,
                     startIconUrl: "",
+                    endIcon: endIcon() as any,
                     endIconUrl: "",
                     shadowUrl: "",
                 },
diff --git a/web/src/lib/util/leaflet_util.ts b/web/src/lib/util/leaflet_util.ts
index 5d61eb8f..ad80b3c4 100644
--- a/web/src/lib/util/leaflet_util.ts
+++ b/web/src/lib/util/leaflet_util.ts
@@ -2,11 +2,11 @@ import type { Waypoint } from "$lib/models/waypoint";
 import type { LeafletEvent, Map, Marker } from "leaflet";
 
 export const startIcon = () => L.divIcon({
-    html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-bullseye -translate-x-1/2"></i>',
+    html: '<i class="p-2 text-white bg-gray-500 rounded-full fa fa-bullseye -translate-x-1/2 -translate-y-1/3"></i>',
     className: 'start-icon'
 });
 export const endIcon = () => L.divIcon({
-    html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-flag-checkered -translate-x-1/2"></i>',
+    html: '<i class="p-2 text-white bg-gray-500 rounded-full fa fa-flag-checkered -translate-x-1/2 -translate-y-1/3"></i>',
     className: 'end-icon'
 });
 
diff --git a/web/src/lib/vendor/leaflet-elevation/libs/leaflet-gpxgroup.js b/web/src/lib/vendor/leaflet-elevation/libs/leaflet-gpxgroup.js
index 296e6f21..a38430a7 100644
--- a/web/src/lib/vendor/leaflet-elevation/libs/leaflet-gpxgroup.js
+++ b/web/src/lib/vendor/leaflet-elevation/libs/leaflet-gpxgroup.js
@@ -248,11 +248,11 @@ export const GpxGroup = L.GpxGroup = L.Class.extend({
     polyline.on('click', L.bind(this._onRouteClick, this, route, polyline));
 
     const startIcon = L.divIcon({
-      html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-bullseye -translate-x-1/2"></i>',
+      html: '<i class="p-2 text-white bg-gray-500 rounded-full fa fa-bullseye -translate-x-1/2"></i>',
       className: 'start-icon'
     });
     const endIcon = L.divIcon({
-      html: '<i class="px-2 py-2 text-white bg-gray-500 rounded-lg fa fa-flag-checkered -translate-x-1/2"></i>',
+      html: '<i class="p-2 text-white bg-gray-500 rounded-full fa fa-flag-checkered -translate-x-1/2"></i>',
       className: 'end-icon'
     });
     const latlngs = polyline.getLatLngs().flat(1);