diff --git a/package-lock.json b/package-lock.json
index b73f3d39..7adef53f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
 				"leaflet": "^1.9.4",
 				"luxon": "^3.7.2",
 				"mapbox-gl": "^3.12.0",
+				"milsymbol": "^3.0.4",
 				"ol": "^6.2.1",
 				"ol-layerswitcher": "^3.8.1",
 				"osh-js": "git+ssh://git@github.com/Botts-Innovative-Research/osh-js.git",
@@ -4743,6 +4744,12 @@
 			"integrity": "sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g==",
 			"license": "MIT"
 		},
+		"node_modules/milsymbol": {
+			"version": "3.0.4",
+			"resolved": "https://registry.npmjs.org/milsymbol/-/milsymbol-3.0.4.tgz",
+			"integrity": "sha512-Jrs1RBCag2IzyEJwI476i2+pNHdi8WMwAp2mDD23g3TR48ERdHmdQgPXZUosRKyhPMr58/eOPyyLE53lMPPAgw==",
+			"license": "MIT"
+		},
 		"node_modules/mime-db": {
 			"version": "1.54.0",
 			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz",
@@ -5109,7 +5116,7 @@
 		"node_modules/osh-js": {
 			"name": "@osh/osh-js",
 			"version": "3.1.5",
-			"resolved": "git+ssh://git@github.com/Botts-Innovative-Research/osh-js.git#7e6a72fe3cb5a0ff3eaf8f53a09ab15106ba745b",
+			"resolved": "git+ssh://git@github.com/Botts-Innovative-Research/osh-js.git#168ac66100516bacbb8eb8bf4feeb7e728e1f10e",
 			"license": "ISC"
 		},
 		"node_modules/p-map": {
diff --git a/package.json b/package.json
index 5a91c036..9c3ed61e 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
 		"leaflet": "^1.9.4",
 		"luxon": "^3.7.2",
 		"mapbox-gl": "^3.12.0",
+		"milsymbol": "^3.0.4",
 		"ol": "^6.2.1",
 		"ol-layerswitcher": "^3.8.1",
 		"osh-js": "git+ssh://git@github.com/Botts-Innovative-Research/osh-js.git",
diff --git a/public/icons/foi/domain.png b/public/icons/foi/domain.png
new file mode 100644
index 00000000..74a78667
Binary files /dev/null and b/public/icons/foi/domain.png differ
diff --git a/public/icons/map/round-pin.png b/public/icons/waypoint/round-pin.png
similarity index 100%
rename from public/icons/map/round-pin.png
rename to public/icons/waypoint/round-pin.png
diff --git a/src/components/icons/mil.svg b/src/components/icons/mil.svg
new file mode 100644
index 00000000..4f598f49
--- /dev/null
+++ b/src/components/icons/mil.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="9" viewBox="0 0 20 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M-0.241477 0H2.03409L4.4375 5.86364H4.53977L6.94318 0H9.21875V8.72727H7.42898V3.04688H7.35653L5.09801 8.68466H3.87926L1.62074 3.02557H1.5483V8.72727H-0.241477V0ZM12.5842 0V8.72727H10.739V0H12.5842ZM14.1023 8.72727V0H15.9474V7.20597H19.6889V8.72727H14.1023Z" fill="currentColor"/>
+</svg>
diff --git a/src/lib/icons.ts b/src/lib/icons.ts
index e62a38f5..fadcdb0f 100644
--- a/src/lib/icons.ts
+++ b/src/lib/icons.ts
@@ -40,7 +40,7 @@ export const ICON_OPTIONS: IconItem[] = [
 	// Waypoint
 	{ id: 14, label: 'Round Pin', icon: 'round-pin', category: 'waypoint' }, // Not an mdi icon
 	// FOI
-	// { id: 15, label: 'Building', icon: 'domain', category: ['foi'] },
+	{ id: 15, label: 'Building', icon: 'domain', category: 'foi' },
 ];
 
 /**
diff --git a/src/modules/map/components/MapToolStatus.vue b/src/modules/map/components/MapToolStatus.vue
index 985552ba..a3151f36 100644
--- a/src/modules/map/components/MapToolStatus.vue
+++ b/src/modules/map/components/MapToolStatus.vue
@@ -1,74 +1,79 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, ref, watchEffect } from 'vue';
 import { useMapStore } from '@/stores/mapstore';
+import { useSettingsStore } from '@/stores/settingsstore';
+import { ICON_BASE, ICON_OPTIONS, iconPathBuilder } from '@/lib/icons';
+import { getColoredIconUrl } from '../services/colorId.service';
 
 const mapStore = useMapStore();
+const settingsStore = useSettingsStore();
+
+const isActive = computed(() => {
+	return !!mapStore.isGeoPTZSelected || !!mapStore.selectedWaypoints;
+});
 
 const isHovered = ref(false);
 </script>
 
 <template>
-	<v-card
-		class="pa-2 elevation-10"
-		:style="{
-			position: 'absolute',
-			zIndex: 2000,
-			marginTop: '1%',
-			marginLeft: '1%',
-		}"
-		@mouseenter="isHovered = true"
-		@mouseleave="isHovered = false"
-	>
-		<v-card-text class="d-flex flex-column ga-2">
-			<!-- GeoPTZ -->
-			<div class="d-flex align-center ga-2">
+	<v-fade-transition>
+		<v-card
+			class="ma-0 elevation-10"
+			:style="{
+				position: 'absolute',
+				zIndex: 2000,
+				marginTop: '1%',
+				marginLeft: '1%',
+			}"
+			@mouseenter="isHovered = true"
+			@mouseleave="isHovered = false"
+			v-show="isActive"
+		>
+			<v-card-text class="d-flex flex-column ga-2 pa-2">
+				<!-- GeoPTZ -->
 				<div
-					class="status-dot"
-					:class="mapStore.isGeoPTZSelected ? 'bg-green' : 'bg-grey'"
-				/>
-
-				<span>GeoPTZ</span>
-
-				<transition name="fade-slide-x">
-					<span
-						v-if="isHovered"
-						class="ml-1 text-grey"
-					>
-						{{ mapStore.isGeoPTZSelected ? 'selected' : 'not selected' }}
-					</span>
-				</transition>
-			</div>
-
-			<!-- Mission Builder -->
-			<div class="d-flex align-center ga-2">
+					class="d-flex align-center ga-2"
+					v-show="mapStore.isGeoPTZSelected"
+				>
+					<v-icon
+						icon="mdi-crosshairs-gps"
+						color="green"
+					/>
+					<span>GeoPTZ</span>
+					<transition name="fade-slide-x">
+						<span
+							v-if="isHovered"
+							class="ml-1 text-grey"
+						>
+							cursor active
+						</span>
+					</transition>
+				</div>
+				<!-- Mission Builder -->
 				<div
-					class="status-dot"
-					:class="mapStore.selectedWaypoints ? 'bg-green' : 'bg-grey'"
-				/>
-
-				<span>Mission Builder</span>
-
-				<transition name="fade-slide-x">
-					<span
-						v-if="isHovered"
-						class="ml-1 text-grey"
-					>
-						{{ mapStore.selectedWaypoints ? 'selected' : 'not selected' }}
-					</span>
-				</transition>
-			</div>
-		</v-card-text>
-	</v-card>
+					class="d-flex align-center ga-2"
+					v-show="!!mapStore.selectedWaypoints"
+				>
+					<v-icon
+						icon="mdi-crosshairs-gps"
+						color="green"
+					/>
+					<span>Mission Builder</span>
+					<transition name="fade-slide-x">
+						<span
+							v-if="isHovered"
+							class="ml-1 text-grey"
+						>
+							cursor active
+						</span>
+					</transition>
+				</div>
+			</v-card-text>
+		</v-card>
+	</v-fade-transition>
 </template>
 
 <style scoped>
-.status-dot {
-	width: 10px;
-	height: 10px;
-	border-radius: 50%;
-	flex-shrink: 0;
-}
-
 .fade-slide-x-enter-active,
 .fade-slide-x-leave-active {
 	transition: all 0.2s ease;
diff --git a/src/modules/map/composables/useMap.ts b/src/modules/map/composables/useMap.ts
index efd80dc6..b054a37b 100644
--- a/src/modules/map/composables/useMap.ts
+++ b/src/modules/map/composables/useMap.ts
@@ -13,7 +13,7 @@ import { Geometry, OSHVisualization } from '@/lib/OSHConnectDataStructs';
 import ConSysApi from 'osh-js/source/core/datasource/consysapi/ConSysApi.datasource.js';
 import { createCesiumAdapter } from '../adapters/cesium.adapter';
 import { taskGeoPTZ } from '../services/geoPTZ.service';
-import { MapAdapter } from '../adapters/types';
+import { MapAdapter, MapPoint } from '../adapters/types';
 import { createLeafletAdapter } from '../adapters/leaflet.adapter';
 import { useSettingsStore } from '@/stores/settingsstore';
 import { isMapLayerCompatible, SupportedMapLayer } from '../supportedMapLayers';
@@ -108,6 +108,15 @@ export function useMap() {
 			mapAdapter.value?.addLayer(foi.layer);
 			mapAdapter.value?.updateMarker(foi.props);
 		});
+
+		// Rebuild all waypoints
+		waypointLayers.value = [];
+		await Promise.all(
+			mapStore.missionWaypoints.map(async (waypoint: MapPoint, index: number) => {
+				await addWaypointLayer(waypoint, index);
+			})
+		);
+		drawMissionPath(mapStore.missionWaypoints);
 	}
 	watch(mapType, async () => {
 		await switchMap();
@@ -359,20 +368,30 @@ export function useMap() {
 
 			// Add waypoints
 			for (const [index, waypoint] of waypoints.entries()) {
-				const result = await createWaypointLayer(waypoint, index.toString());
-				if (result) {
-					mapAdapter.value?.addLayer(result.layer);
-					waypointLayers.value.push(result.layer);
-					if (result.props) mapAdapter.value?.updateMarker(result.props);
-				}
-			}
-
-			// Handle polyline if waypoints >= 2
-			if (waypoints.length >= 2) {
-				mapAdapter.value.drawMissionPath(waypoints);
+				await addWaypointLayer(waypoint, index);
 			}
+			// Draw mission path
+			drawMissionPath(waypoints);
 		}
 	);
+	async function addWaypointLayer(waypoint: MapPoint, index: number) {
+		if (!mapAdapter.value) return;
+
+		const result = await createWaypointLayer(waypoint, index.toString());
+		if (result) {
+			mapAdapter.value?.addLayer(result.layer);
+			waypointLayers.value.push(result.layer);
+			if (result.props) mapAdapter.value?.updateMarker(result.props);
+		}
+	}
+	function drawMissionPath(waypoints: MapPoint[]) {
+		if (!mapAdapter.value) return;
+
+		// Handle polyline if waypoints >= 2
+		if (waypoints.length >= 2) {
+			mapAdapter.value.drawMissionPath(waypoints);
+		}
+	}
 	function clearMission() {
 		for (const layer of waypointLayers.value) {
 			mapAdapter.value?.removeLayer(layer);
diff --git a/src/modules/map/mapVisualizations.ts b/src/modules/map/mapVisualizations.ts
index a45925f7..e19d58dc 100644
--- a/src/modules/map/mapVisualizations.ts
+++ b/src/modules/map/mapVisualizations.ts
@@ -1,5 +1,5 @@
 import { createDatasource } from '@/modules/visualization/services/datasource.service';
-import { Geometry, OSHVisualization } from '@/lib/OSHConnectDataStructs';
+import { OSHVisualization } from '@/lib/OSHConnectDataStructs';
 import ConSysApi from 'osh-js/source/core/datasource/consysapi/ConSysApi.datasource.js';
 import PointMarkerLayer from 'osh-js/source/core/ui/layer/PointMarkerLayer';
 import LoBLayer from 'osh-js/source/core/ui/layer/viewer/LoB.js';
@@ -10,13 +10,14 @@ import { setWaypointData } from './services/missionBuilder.service';
 import { useSettingsStore } from '@/stores/settingsstore';
 import { randomUUID } from 'osh-js/source/core/utils/Utils.js';
 import { getLayerId } from './services/layerId.service';
-import { colorHash } from './services/colorId.service';
+import { colorHash, getColoredIconUrl, getColoredSvgUrl } from './services/colorId.service';
 import { SupportedMapLayer } from './supportedMapLayers';
 import { getGroundAltitude } from './services/altitude.service';
 import { IConSysApiDataSourceProperties } from '../visualization/types/datasource';
 import { setLayerData } from './services/foi.service';
 import { ICON_BASE } from '@/lib/icons';
 import { FoiLayer } from '@/stores/visualizationstore';
+import { getMilSymbol } from './services/milIcon.service';
 
 export interface ICreateMapVisualizationResult {
 	vizLayer: SupportedMapLayer;
@@ -27,7 +28,7 @@ export async function createMapVisualizations(
 	viz: OSHVisualization
 ): Promise<ICreateMapVisualizationResult | null> {
 	if (viz.type === 'pointmarker') {
-		return createPointMarkerLayer(viz, viz.visualizationComponents.dataSource);
+		return await createPointMarkerLayer(viz, viz.visualizationComponents.dataSource);
 	} else if (viz.type === 'lob') {
 		return createLoBLayer(viz, viz.visualizationComponents.dataSource);
 	} else if (viz.type === 'ellipse') {
@@ -40,10 +41,10 @@ export async function createMapVisualizations(
 	}
 }
 
-export function createPointMarkerLayer(
+export async function createPointMarkerLayer(
 	viz: OSHVisualization,
 	dsArray: IConSysApiDataSourceProperties[]
-): ICreateMapVisualizationResult {
+): Promise<ICreateMapVisualizationResult> {
 	// Ds instances created
 	let dsInstances: (typeof ConSysApi)[] = [];
 
@@ -53,6 +54,7 @@ export function createPointMarkerLayer(
 	let getMarkerId: any;
 	let getIconColor: any;
 	let getLabel: any;
+	let getIcon: any;
 
 	for (const dsProps of dsArray) {
 		const dsInstance = createDatasource(dsProps);
@@ -80,7 +82,7 @@ export function createPointMarkerLayer(
 				dataSourceIds: [dsInstance.id],
 				handler: (rec: any) => {
 					return {
-						heading: rec[dsProps.properties.orientation.property].heading,
+						heading: rec[dsProps.properties.orientation.property].heading ?? rec[dsProps.properties.orientation.property].qx,
 					};
 				},
 			};
@@ -117,16 +119,34 @@ export function createPointMarkerLayer(
 				},
 			};
 		}
+		// Check for milsymbol property
+		if (dsProps.properties.milSymbol) {
+			getIcon = {
+				dataSourceIds: [dsInstance.id],
+				handler: (rec: any) => {
+					return getMilSymbol(rec[dsProps.properties.milSymbol.property]);
+				},
+			};
+		}
 
 		dsInstance.connect();
 		dsInstances.push(dsInstance);
 	}
 
+	// Color the initial icon if not milsymbol
+	let icon: string = '';
+	if (!getIcon) {
+		icon = await getColoredIconUrl(
+			`${ICON_BASE}${viz.visualizationComponents.dataLayer.icon}`,
+			viz.visualizationComponents.dataLayer.iconColor
+		);
+	}
+
 	const pmLayer = new PointMarkerLayer({
 		...viz.visualizationComponents.dataLayer,
 		name: viz.name,
 		id: viz.id,
-		icon: `${ICON_BASE}${viz.visualizationComponents.dataLayer.icon}`,
+		...(icon ? { icon } : {}),
 		defaultToTerrainElevation: true,
 		dataSourceIds: dsInstances.map((ds) => ds.id),
 		...(getLocation ? { getLocation } : {}),
@@ -134,7 +154,11 @@ export function createPointMarkerLayer(
 		...(getMarkerId ? { getMarkerId } : {}),
 		...(getIconColor ? { getIconColor } : {}),
 		...(getLabel ? { getLabel } : {}),
+		...(getIcon ? { getIcon } : {}),
 	});
+
+	const props = setLayerData(pmLayer);
+
 	return { vizLayer: pmLayer, dsInstances };
 }
 export function createLoBLayer(
@@ -148,7 +172,6 @@ export function createLoBLayer(
 	let getOrigin: any;
 	let getBearing: any;
 	let getLobId: any;
-	let getIconColor: any;
 	let getColor: any;
 
 	for (const dsProps of dsArray) {
@@ -191,16 +214,6 @@ export function createLoBLayer(
 				},
 			};
 		}
-		// Check for iconColor property
-		if (dsProps.properties.lobIconColor) {
-			getIconColor = {
-				dataSourceIds: [dsInstance.id],
-				handler: (rec: any) => {
-					return colorHash(getLayerId(rec, dsProps.properties.lobIconColor.property))
-						.rgba;
-				},
-			};
-		}
 		// Check for line color property
 		if (dsProps.properties.lobLineColor) {
 			getColor = {
@@ -220,12 +233,10 @@ export function createLoBLayer(
 		...viz.visualizationComponents.dataLayer,
 		name: viz.name,
 		id: viz.id,
-		icon: `${ICON_BASE}${viz.visualizationComponents.dataLayer.icon}`,
 		dataSourceIds: dsInstances.map((ds) => ds.id),
 		...(getOrigin ? { getOrigin } : {}),
 		...(getBearing ? { getBearing } : {}),
 		...(getLobId ? { getLobId } : {}),
-		...(getIconColor ? { getIconColor } : {}),
 		...(getColor ? { getColor } : {}),
 	});
 
@@ -395,11 +406,17 @@ export async function createGeoPTZLayer(
 ) {
 	const vizId = `geoptz-${randomUUID()}`;
 
+	// Color the geoptz icon
+	const icon = await getColoredIconUrl(
+		`${ICON_BASE}${useSettingsStore().geoPtzIcon}`,
+		useSettingsStore().geoPtzIconColor
+	);
+
 	const geoPtzLayer = new PointMarkerLayer({
 		name: 'GeoPTZ',
 		label: 'GeoPTZ',
 		id: vizId,
-		icon: `${ICON_BASE}${useSettingsStore().geoPtzIcon}`,
+		icon,
 		iconColor: useSettingsStore().geoPtzIconColor,
 		iconSize: [32, 32],
 		iconAnchor: [16, 16],
@@ -436,6 +453,9 @@ export async function createWaypointLayer(
 	layer: typeof PointMarkerLayer;
 	props: any;
 }> {
+	// Color the waypoint icon, default yellow
+	const icon = await getColoredIconUrl(`${ICON_BASE}/icons/waypoint/round-pin.png`, '#FFFF00');
+
 	const waypointLayer = new PointMarkerLayer({
 		id: `waypoint-${index}`,
 		name: `Waypoint ${index + 1}`,
@@ -444,7 +464,7 @@ export async function createWaypointLayer(
 			y: waypoint.lat,
 			z: waypoint.alt || (await getGroundAltitude(waypoint.lon, waypoint.lat)),
 		},
-		icon: `${ICON_BASE}/icons/map/round-pin.png`,
+		icon,
 		iconSize: [32, 32],
 		iconAnchor: [16, 32],
 		label: `WP ${index + 1}`,
@@ -472,6 +492,9 @@ export async function createFOILayer(foiLayer: FoiLayer) {
 			? foiLayer.geometry.coordinates[2][0]
 			: foiLayer.geometry.coordinates[2];
 
+	// Color the foi icon
+	const icon = await getColoredIconUrl(`${ICON_BASE}${foiLayer.icon}`, foiLayer.color);
+
 	const pmLayer = new PointMarkerLayer({
 		id: foiLayer.geometry.id,
 		location: {
@@ -479,7 +502,7 @@ export async function createFOILayer(foiLayer: FoiLayer) {
 			y: lat,
 			z: alt,
 		},
-		icon: `${ICON_BASE}${foiLayer.icon}`,
+		icon,
 		iconColor: foiLayer.color,
 		iconSize: [32, 32],
 		iconAnchor: [16, 32],
diff --git a/src/modules/map/services/colorId.service.ts b/src/modules/map/services/colorId.service.ts
index 7bce1bf8..f8d5f436 100644
--- a/src/modules/map/services/colorId.service.ts
+++ b/src/modules/map/services/colorId.service.ts
@@ -1,4 +1,9 @@
-// Modified to add an alpha channel applied
+/**
+ * Generate a color based on given input string and alpha number
+ * @param inputString
+ * @param alpha
+ * @returns
+ */
 export function colorHash(inputString: string, alpha: number = 1.0): any {
 	let sum: number = 0;
 
@@ -81,3 +86,53 @@ function hsl2rgb(h: number, s: number, l: number): any {
 	};
 	return rgb;
 }
+
+/** COLOR FOR LEAFLET */
+const iconCache = new Map<string, string>();
+
+function loadImage(src: string): Promise<HTMLImageElement> {
+	return new Promise((resolve, reject) => {
+		const img = new Image();
+
+		// Only needed if loading from another domain
+		// img.crossOrigin = 'anonymous';
+
+		img.onload = () => resolve(img);
+		img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
+
+		img.src = src;
+	});
+}
+
+export async function getColoredIconUrl(src: string, color: string): Promise<string> {
+	const key = `${src}:${color}`;
+
+	const cached = iconCache.get(key);
+	if (cached) return cached;
+
+	const img = await loadImage(src);
+
+	const canvas = document.createElement('canvas');
+	canvas.width = img.width;
+	canvas.height = img.height;
+
+	const ctx = canvas.getContext('2d');
+
+	if (!ctx) {
+		throw new Error('Could not create canvas context.');
+	}
+
+	// Draw the original image
+	ctx.imageSmoothingEnabled = false;
+	ctx.drawImage(img, 0, 0);
+
+	// Replace the color while preserving transparency
+	ctx.globalCompositeOperation = 'source-in';
+	ctx.fillStyle = color;
+	ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+	const dataUrl = canvas.toDataURL('image/png');
+
+	iconCache.set(key, dataUrl);
+	return dataUrl;
+}
diff --git a/src/modules/map/services/milIcon.service.ts b/src/modules/map/services/milIcon.service.ts
new file mode 100644
index 00000000..c926107b
--- /dev/null
+++ b/src/modules/map/services/milIcon.service.ts
@@ -0,0 +1,12 @@
+import { getLatestObservation } from '@/modules/visualization/services/datasource.service';
+import ms from 'milsymbol';
+import { IConSysApiDataSourceProperties } from '@/modules/visualization/types/datasource';
+
+/**
+ * Based on a property ID, return GUCI milsymbol
+ * @param id
+ * @returns
+ */
+export function getMilSymbol(id: string) {
+	return new ms.Symbol(id, {}).toDataURL();
+}
diff --git a/src/modules/visualization/services/visualization.serialization.ts b/src/modules/visualization/services/visualization.serialization.ts
index 89858f35..f887c377 100644
--- a/src/modules/visualization/services/visualization.serialization.ts
+++ b/src/modules/visualization/services/visualization.serialization.ts
@@ -45,7 +45,7 @@ export function rehydrateVisualization(serialized: SerializedVisualization): OSH
 	);
 	viz.visualizationComponents = serialized.visualizationComponents;
 	viz.wizardConfig = serialized.wizardConfig;
-	viz.children = serialized.children.map(rehydrateVisualization);
+	viz.children = (serialized.children ?? []).map(rehydrateVisualization);
 	return viz;
 }
 
diff --git a/src/modules/visualization/sidebar/components/GeoPtzWrapper.vue b/src/modules/visualization/sidebar/components/GeoPtzWrapper.vue
index d6d6a44e..7ae04ccc 100644
--- a/src/modules/visualization/sidebar/components/GeoPtzWrapper.vue
+++ b/src/modules/visualization/sidebar/components/GeoPtzWrapper.vue
@@ -26,8 +26,8 @@ const emit = defineEmits<{
 		hide-details
 		clearable
 	>
-		<template v-slot:item="{ props, item }">
-			<v-list-item v-bind="props">
+		<template v-slot:item="{item, props: itemProps }">
+			<v-list-item v-bind="itemProps">
 				<template v-slot:prepend="{ isSelected }">
 					<v-checkbox-btn :model-value="isSelected"></v-checkbox-btn>
 				</template>
@@ -37,21 +37,21 @@ const emit = defineEmits<{
 						text="Edit Visualization"
 						location="bottom"
 					>
-						<template v-slot:activator="{ props }">
+						<template v-slot:activator="{ props: tooltipProps }">
 							<IconButton
-								v-bind="props"
+								v-bind="tooltipProps"
 								aria-label="Edit Visualization"
 								size="x-small"
 								variant="plain"
 								icon="mdi-pencil"
-								@click.stop="openEditViz(item.raw.id!)"
+								@click.stop="openEditViz(item.id!)"
 							>
 							</IconButton>
 						</template>
 					</v-tooltip>
 					<DeleteButton
 						label="Remove"
-						@delete="removeGeoPTZ(item.raw)"
+						@delete="removeGeoPTZ(item)"
 					></DeleteButton>
 				</template>
 			</v-list-item>
diff --git a/src/modules/visualization/sidebar/components/MapVisualizationWrapper.vue b/src/modules/visualization/sidebar/components/MapVisualizationWrapper.vue
index 447ae044..fd183bdc 100644
--- a/src/modules/visualization/sidebar/components/MapVisualizationWrapper.vue
+++ b/src/modules/visualization/sidebar/components/MapVisualizationWrapper.vue
@@ -5,6 +5,7 @@ import DeleteButton from '@/components/ui/DeleteButton.vue';
 import { computed, ref, watch } from 'vue';
 import { useMapStore } from '@/stores/mapstore';
 import { isMapLayerCompatible } from '@/modules/map/supportedMapLayers';
+import MilIcon from '@/components/icons/mil.svg';
 
 const {
 	viz,
@@ -41,15 +42,11 @@ function getIcon(viz: OSHVisualization) {
 	// Use iconName from dataLayer
 	const iconName = viz.visualizationComponents.dataLayer.iconName;
 	if (iconName) {
-		if (viz.visualizationComponents.dataLayer.iconOpacity === 0) {
-			return VisualizationRegistry[viz.type].icon ?? 'mdi-shape';
-		}
-		return `mdi-${iconName}`;
+		if (iconName === 'mil-symbol') return MilIcon;
+		else return `mdi-${iconName}`;
 	}
 	// Otherwise, use viz type icon
-	else {
-		return VisualizationRegistry[viz.type].icon ?? 'mdi-shape';
-	}
+	else return VisualizationRegistry[viz.type].icon ?? 'mdi-shape';
 }
 function getIconColor(viz: OSHVisualization) {
 	if (viz.isParentVisualization()) {
@@ -145,7 +142,7 @@ watch(
 							<v-icon
 								:icon="getIcon(viz)"
 								:color="getIconColor(viz)"
-								size="16"
+								size="24"
 							></v-icon>
 						</v-badge>
 					</template>
@@ -233,7 +230,7 @@ watch(
 								<v-icon
 									:icon="getIcon(viz)"
 									:color="getIconColor(viz)"
-									size="16"
+									size="24"
 								></v-icon>
 							</v-badge>
 						</template>
@@ -319,7 +316,7 @@ watch(
 										<v-icon
 											:icon="getIcon(childViz)"
 											:color="getIconColor(childViz)"
-											size="16"
+											size="24"
 										></v-icon>
 									</v-badge>
 								</template>
@@ -380,4 +377,7 @@ watch(
 	max-width: 120px;
 	opacity: 1;
 }
+:deep(.v-list-item__spacer) {
+	width: 16px;
+}
 </style>
diff --git a/src/modules/visualization/sidebar/components/MissionWrapper.vue b/src/modules/visualization/sidebar/components/MissionWrapper.vue
index 68d7877b..2777f837 100644
--- a/src/modules/visualization/sidebar/components/MissionWrapper.vue
+++ b/src/modules/visualization/sidebar/components/MissionWrapper.vue
@@ -57,4 +57,4 @@ const emit = defineEmits<{
 			</v-list-item>
 		</template>
 	</v-select>
-</template>
+</template>
\ No newline at end of file
diff --git a/src/modules/visualization/types/layers.ts b/src/modules/visualization/types/layers.ts
index 717d09eb..41b655df 100644
--- a/src/modules/visualization/types/layers.ts
+++ b/src/modules/visualization/types/layers.ts
@@ -37,11 +37,7 @@ export interface ILineOfBearingLayerProperties extends DataLayerProperties {
 	weight: number;
 	opacity: number;
 	length: number;
-	icon: string | null; // Allow null for optional icon
-	iconColor: string;
-	iconName: string;
-	iconSize: number[];
-	iconOpacity: number;
+	iconName: string; // Used for display in map visualizations list
 	label: string;
 }
 
diff --git a/src/modules/visualization/visualizations/lob/Builder.ts b/src/modules/visualization/visualizations/lob/Builder.ts
index 3027cfd8..f83fc527 100644
--- a/src/modules/visualization/visualizations/lob/Builder.ts
+++ b/src/modules/visualization/visualizations/lob/Builder.ts
@@ -61,11 +61,7 @@ export function CreateLobVizProps(
 		weight: visOptions.lobWeight,
 		opacity: visOptions.lobOpacity,
 		length: visOptions.lobDistanceKm * 1000, // Convert km to m
-		icon: visOptions.showIcon ? visOptions.icon : null,
-		iconColor: visOptions.iconColor,
-		iconName: visOptions.iconName,
-		iconOpacity: visOptions.showIcon ? 1 : 0, // Set opacity to 0 if no icon, otherwise use default opacity
-		iconSize: [32, 32],
+		iconName: 'ray-start',
 		label: visOptions.name,
 		name: visOptions.name,
 	};
diff --git a/src/modules/visualization/visualizations/lob/Customize.vue b/src/modules/visualization/visualizations/lob/Customize.vue
index d8c078c8..ee09a79c 100644
--- a/src/modules/visualization/visualizations/lob/Customize.vue
+++ b/src/modules/visualization/visualizations/lob/Customize.vue
@@ -1,18 +1,13 @@
 <script setup lang="ts">
-import IconControl from '@/modules/visualization/wizard/customizations/IconControl.vue';
 import SliderValueControl from '../../wizard/customizations/SliderValueControl.vue';
 import NameControl from '@/modules/visualization/wizard/customizations/NameControl.vue';
 import ColorControl from '../../wizard/customizations/ColorControl.vue';
 import { VisualizationComponentEmits } from '../../registry/VisualizationRegistry';
 import { computed, ref } from 'vue';
 import { useComponentValidation } from '../../wizard/composables/useComponentValidation';
-import IconVisibilityControl from '@/modules/visualization/wizard/customizations/IconVisibilityControl.vue';
 import { useVizWizStore } from '@/stores/vizwizstore';
 
 const vizwizStore = useVizWizStore();
-const showIcon = computed(() => vizwizStore.visualizationCustomizationOptions.showIcon ?? true);
-// If lobIconColor selected in Config, don't show icon color select
-const showIconColor = computed(() => (vizwizStore.dsConfig.lobIconColor ? false : true));
 // If lobLineColor selected in Config, don't show line color select
 const showLineColor = computed(() => (vizwizStore.dsConfig.lobLineColor ? false : true));
 
@@ -58,48 +53,6 @@ useComponentValidation(valid, emit);
 				></name-control>
 			</v-expansion-panel-text>
 		</v-expansion-panel>
-		<v-expansion-panel
-			eager
-			title="Icon"
-			value="icon"
-		>
-			<v-expansion-panel-text>
-				<icon-visibility-control
-					roleName="showIcon"
-					label="Show Icon"
-				></icon-visibility-control>
-				<v-expand-transition>
-					<div v-if="showIcon">
-						<icon-control roleName="icon"></icon-control>
-						<v-expand-transition>
-							<div v-if="showIconColor">
-								<color-control
-									roleName="iconColor"
-									label="Icon Color"
-								></color-control>
-							</div>
-							<div
-								v-else
-								class="pb-4"
-							>
-								<v-alert variant="outlined"
-									>Icon color will be dynamically generated based on the selected
-									properties from the previous step.</v-alert
-								>
-							</div>
-						</v-expand-transition>
-					</div>
-					<div
-						v-else
-						class="pb-4"
-					>
-						<v-alert variant="outlined"
-							>Icon is hidden. Enable "Show Icon" to customize.</v-alert
-						>
-					</div>
-				</v-expand-transition>
-			</v-expansion-panel-text>
-		</v-expansion-panel>
 		<v-expansion-panel
 			eager
 			title="Line"
diff --git a/src/modules/visualization/visualizations/lob/Descriptor.ts b/src/modules/visualization/visualizations/lob/Descriptor.ts
index 2255ed2f..610586f4 100644
--- a/src/modules/visualization/visualizations/lob/Descriptor.ts
+++ b/src/modules/visualization/visualizations/lob/Descriptor.ts
@@ -27,13 +27,6 @@ export const LobConfigRoles: VisualizationConfigRole[] = [
 		type: 'ds',
 		multiple: true,
 	},
-	{
-		role: 'lobIconColor',
-		label: 'Icon Color',
-		description: 'Icon color will be generated dynamically based on the selected properties.',
-		type: 'ds',
-		multiple: true,
-	},
 	{
 		role: 'lobLineColor',
 		label: 'Line Color',
diff --git a/src/modules/visualization/visualizations/minimap/Builder.ts b/src/modules/visualization/visualizations/minimap/Builder.ts
index 92e0b028..f0fea1bf 100644
--- a/src/modules/visualization/visualizations/minimap/Builder.ts
+++ b/src/modules/visualization/visualizations/minimap/Builder.ts
@@ -20,7 +20,13 @@ export default function build() {
 	const vizwizStore = useVizWizStore();
 	const visualizationStore = useVisualizationStore();
 
-	const datastreams = AggregateDatastreams(vizwizStore.dsConfig);
+	const dsConfig = { ...vizwizStore.dsConfig };
+	for (const [role, entry] of Object.entries(dsConfig)) {
+		if ((entry as any).dsId && !(entry as any).selected) {
+			(dsConfig as any)[role] = { ...entry as any, selected: true };
+		}
+	}
+	const datastreams = AggregateDatastreams(dsConfig);
 
 	const minimapResult = CreateMiniMapVizProps(datastreams);
 
@@ -55,13 +61,15 @@ export function CreateMiniMapVizProps(datastreams: { [key: string]: any }
 
 		const currentOSHDatastream = datastreamStore.getDataStreamsById([dsId]);
 
+		const hasVideoRole = properties.video !== undefined;
+
 		const currentDatastream: ISweApiDataSourceProperties = {
 			endpointUrl: currentOSHDatastream[0].datastream.networkProperties.endpointUrl,
 			resource: `/datastreams/${dsId}/observations`,
 			tls: currentOSHDatastream[0].datastream.networkProperties.tls,
 			protocol: 'ws',
 			mode: Mode.REAL_TIME,
-			responseFormat: 'application/swe+json',
+			responseFormat: hasVideoRole ? 'application/swe+binary' : 'application/swe+json',
 			id: currentOSHDatastream[0].id,
 			properties: properties,
 			connectorOpts: {
diff --git a/src/modules/visualization/visualizations/minimap/Descriptor.ts b/src/modules/visualization/visualizations/minimap/Descriptor.ts
index 8fcb8b70..66969594 100644
--- a/src/modules/visualization/visualizations/minimap/Descriptor.ts
+++ b/src/modules/visualization/visualizations/minimap/Descriptor.ts
@@ -13,7 +13,7 @@ export const MiniMapConfigRoles: VisualizationConfigRole[] = [
 		description: 'Select the data stream for the vehicle\'s live position.',
 		type: 'ds',
 		required: true,
-		showPropertySelector: false,
+		showPropertySelector: true,
 	},
 	{
 		role: 'orientation',
@@ -21,7 +21,7 @@ export const MiniMapConfigRoles: VisualizationConfigRole[] = [
 		description: 'Select the data stream for the direction of the vehicle\'s facing',
 		type: 'ds',
 		required: false,
-		showPropertySelector: false,
+		showPropertySelector: true,
 	},
 	{
 		role: 'video',
@@ -29,7 +29,7 @@ export const MiniMapConfigRoles: VisualizationConfigRole[] = [
 		description: 'Select the data stream for the video overlay',
 		type: 'ds',
 		required: false,
-		showPropertySelector: false,
+		showPropertySelector: true,
 	},
 ];
 
diff --git a/src/modules/visualization/visualizations/minimap/MiniMapView.vue b/src/modules/visualization/visualizations/minimap/MiniMapView.vue
index a8bc0289..3fcfa474 100644
--- a/src/modules/visualization/visualizations/minimap/MiniMapView.vue
+++ b/src/modules/visualization/visualizations/minimap/MiniMapView.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import { OSHVisualization } from '@/lib/OSHConnectDataStructs';
-import { onMounted, onBeforeUnmount, ref, watch, computed } from 'vue';
+import { onMounted, onBeforeUnmount, ref, watch, toRaw } from 'vue';
 import * as Cesium from 'cesium';
 import CesiumView from 'osh-js/source/core/ui/view/map/CesiumView';
+import VideoView from 'osh-js/source/core/ui/view/video/VideoView.js';
+import VideoDataLayer from 'osh-js/source/core/ui/layer/VideoDataLayer.js';
 import { DATASOURCE_DATA_TOPIC } from 'osh-js/source/core/Constants.js';
 import {
 	createDatasource,
@@ -49,8 +51,12 @@ const minimapContainerId = `minimap-${Date.now()}`;
 
 const viewMode = ref<'platform' | 'follow' | 'overhead' | 'freelook'>('follow');
 const showHUD = ref(false);
+const showAROverlay = ref(false);
+const viewModeBeforeAR = ref<'platform' | 'follow' | 'overhead' | 'freelook'>('follow');
+const arFov = ref(85);
 
 const hasOrientation = ref(false);
+const hasVideo = ref(false);
 
 const visualizationStore = useVisualizationStore();
 const duplicatedLayerIds = new Set<string>();
@@ -78,12 +84,13 @@ function onLLAListener(dsInstance: typeof ConSysApi) {
 	dataBroadcastChannel.onmessage = (message) => {
 		if (message.data.type === 'data') {
 			const data = message.data.values[0].data;
-			const lon = data.Location.lon ?? 0;
-			const lat = data.Location.lat ?? 0;
+			const lon = data[dsInstance.properties.location.property]?.lon ?? 0;
+			const lat = data[dsInstance.properties.location.property]?.lat ?? 0;
+			const alt = data[dsInstance.properties.location.property]?.alt ?? 0;
 			receivedLLA.value = {
 				lat,
 				lon,
-				alt: data.Location.alt ?? 0,
+				alt: alt,
 			};
 			updateTerrainHeight(lon, lat);
 		}
@@ -96,19 +103,165 @@ function onOrientationListener(dsInstance: typeof ConSysApi) {
 	dataBroadcastChannel.onmessage = (message) => {
 		if (message.data.type === 'data') {
 			const data = message.data.values[0].data;
+
 			receivedOrientation.value = {
-				yaw:
-					data.Attitude?.yaw ??
-					data.Orientation?.heading ??
-					0,
-				pitch: data.Attitude?.pitch ?? data.Orientation?.pitch ?? 0,
-				roll: data.Attitude?.roll ?? data.Orientation?.roll ?? 0,
+				yaw: data[dsInstance.properties.orientation.property].yaw ?? data[dsInstance.properties.orientation.property]?.heading ?? 0,
+				pitch: data[dsInstance.properties.orientation.property]?.pitch ?? 0,
+				roll: data[dsInstance.properties.orientation.property]?.roll ?? 0,
 			};
+
 			hasOrientation.value = true;
 		}
 	};
 }
 
+const videoContainerId = `minimap-video-${Date.now()}`;
+let arVideoView: any = null;
+let arVideoLayer: any = null;
+let videoDsInstance: typeof ConSysApi | null = null;
+let videoDsProps: IConSysApiDataSourceProperties | null = null;
+
+function createVideoView() {
+	if (arVideoView || !videoDsInstance || !videoDsProps) return;
+
+	const rawDs = toRaw(videoDsProps);
+	const getFrameData = {
+		dataSourceIds: [videoDsInstance.id],
+		handler: (rec: any) => rec[rawDs.properties.video.property],
+	};
+
+	const getTimestamp = {
+		dataSourceIds: [videoDsInstance.id],
+		handler: (rec: any) => rec.timestamp,
+	};
+
+	arVideoView = new VideoView({
+		container: videoContainerId,
+		css: 'video-view',
+		layers: [],
+		useWebCodecApi: true,
+		showTime: false,
+		showStats: false,
+	});
+
+	arVideoLayer = new VideoDataLayer({
+		name: 'ar-video',
+		dataSourceIds: [videoDsInstance.id],
+		getFrameData,
+		getTimestamp,
+	});
+
+	arVideoView.addLayer(arVideoLayer);
+}
+
+function destroyVideoView() {
+	if (arVideoView) {
+		try { arVideoView.destroy(); } catch (e) {}
+		arVideoView = null;
+		arVideoLayer = null;
+	}
+}
+
+let arFrustumCuller: Cesium.Event.RemoveCallback | null = null;
+
+
+// show only markers/layers that the 'camera' can currently see
+function cullToFrustum() {
+	if (!mapView?.viewer) return;
+	const camera = mapView.viewer.camera;
+	const frustum = camera.frustum;
+
+	const cullingVolume = frustum.computeCullingVolume(
+		camera.positionWC,
+		camera.directionWC,
+		camera.upWC
+	);
+
+	if (mapView.billboardCollection) {
+		for (let i = 0; i < mapView.billboardCollection.length; i++) {
+			const bb = mapView.billboardCollection.get(i);
+			if (bb.position) {
+				const visibility = cullingVolume.computeVisibility(
+					new Cesium.BoundingSphere(bb.position, 1)
+				);
+				bb.show = visibility !== Cesium.Intersect.OUTSIDE;
+			}
+		}
+	}
+	if (mapView.labelCollection) {
+		for (let i = 0; i < mapView.labelCollection.length; i++) {
+			const lb = mapView.labelCollection.get(i);
+			if (lb.position) {
+				const visibility = cullingVolume.computeVisibility(
+					new Cesium.BoundingSphere(lb.position, 1)
+				);
+				lb.show = visibility !== Cesium.Intersect.OUTSIDE;
+			}
+		}
+	}
+}
+
+function restoreBillboardVisibility() {
+	if (!mapView) return;
+	if (mapView.billboardCollection) {
+		for (let i = 0; i < mapView.billboardCollection.length; i++) {
+			mapView.billboardCollection.get(i).show = true;
+		}
+	}
+	if (mapView.labelCollection) {
+		for (let i = 0; i < mapView.labelCollection.length; i++) {
+			mapView.labelCollection.get(i).show = true;
+		}
+	}
+}
+
+function toggleAROverlay() {
+	showAROverlay.value = !showAROverlay.value;
+
+	if (!mapView?.viewer) return;
+	const viewer = mapView.viewer;
+
+	if (showAROverlay.value) {
+		viewModeBeforeAR.value = viewMode.value;
+		viewMode.value = 'platform';
+		// render cesium on transparent background
+		viewer.scene.globe.show = false;
+		viewer.scene.backgroundColor = Cesium.Color.TRANSPARENT;
+		updateARFov();
+		createVideoView();
+
+		arFrustumCuller = viewer.scene.postUpdate.addEventListener(() => {
+			cullToFrustum();
+		});
+	} else {
+		viewMode.value = viewModeBeforeAR.value;
+
+		viewer.scene.globe.show = true;
+		viewer.scene.backgroundColor = Cesium.Color.BLACK;
+		viewer.scene.moon.show = true;
+		destroyVideoView();
+
+		if (arFrustumCuller) {
+			arFrustumCuller();
+			arFrustumCuller = null;
+		}
+		restoreBillboardVisibility();
+	}
+
+	viewer.scene.requestRender();
+}
+
+function updateARFov() {
+	if (!mapView?.viewer || !showAROverlay.value) return;
+	const frustum = mapView.viewer.camera.frustum;
+	if (frustum instanceof Cesium.PerspectiveFrustum) {
+		frustum.fov = Cesium.Math.toRadians(arFov.value);
+		mapView.viewer.scene.requestRender();
+	}
+}
+
+watch(arFov, () => updateARFov());
+
 function setSceneInputEnabled(viewer: any, enabled: boolean) {
 	const controller = viewer.scene.screenSpaceCameraController;
 	controller.enableRotate = enabled;
@@ -126,7 +279,7 @@ function updateCamera() {
 	const lat = receivedLLA.value.lat;
 	const alt = receivedLLA.value.alt;
 
-	if (lon === 0 && lat === 0 && alt === 0) return;
+	if (lon === 0 && lat === 0) return;
 
 	const viewer = mapView.viewer;
 
@@ -153,7 +306,6 @@ function updateCamera() {
 	switch (viewMode.value) {
 		case 'platform': {
 			viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
-
 			viewer.camera.setView({
 				destination: Cesium.Cartesian3.fromDegrees(lon, lat, cameraAlt + 1.5),
 				orientation: {
@@ -173,7 +325,7 @@ function updateCamera() {
 
 			viewer.camera.lookAtTransform(
 				transform,
-				new Cesium.Cartesian3(0, -120, 50)
+				new Cesium.Cartesian3(0, -120, 60)
 			);
 			break;
 		}
@@ -200,6 +352,18 @@ onMounted(async () => {
 		container: minimapContainerId,
 		autoZoomOnFirstMarker: true,
 		layers: [],
+		options: {
+			viewerProps: {
+				orderIndependentTranslucency: false,
+				skyBox: false,
+				skyAtmosphere: false,
+				contextOptions: {
+					webgl: {
+						alpha: true,
+					},
+				},
+			},
+		},
 	});
 	await new Promise(requestAnimationFrame);
 
@@ -212,7 +376,6 @@ onMounted(async () => {
 
 	for (const ds of props.datasource) {
 		let dsInstance = createDatasource(ds);
-
 		if (ds?.properties?.location) {
 			onLLAListener(dsInstance);
 		}
@@ -220,6 +383,12 @@ onMounted(async () => {
 			onOrientationListener(dsInstance);
 		}
 
+		if (ds?.properties?.video) {
+			hasVideo.value = true;
+			videoDsInstance = dsInstance;
+			videoDsProps = ds;
+		}
+
 		dsInstance.connect();
 		dsInstances.value.push(dsInstance);
 	}
@@ -274,6 +443,11 @@ watch(
 );
 
 onBeforeUnmount(() => {
+	if (arFrustumCuller) {
+		arFrustumCuller();
+		arFrustumCuller = null;
+	}
+	destroyVideoView();
 	if (mapView) {
 		mapView.destroy();
 		mapView = null;
@@ -294,6 +468,7 @@ useVisualizationCleanup(dsInstances);
 			<v-btn-toggle
 				v-model="viewMode"
 				mandatory
+				:disabled="showAROverlay"
 				class="ga-2"
 			>
 				<v-btn
@@ -334,16 +509,52 @@ useVisualizationCleanup(dsInstances);
 			</v-btn-toggle>
 		</div>
 		<div class="minimap-scene">
-			<div :id="minimapContainerId" class="minimap-viewer"></div>
+			<div
+				:id="videoContainerId"
+				class="video-background"
+				:class="{ 'video-visible': showAROverlay && hasVideo }"
+			></div>
+			<div
+				:id="minimapContainerId"
+				class="minimap-viewer"
+				:class="{ 'ar-transparent': showAROverlay }"
+			></div>
+
+			<div class="overlay-toggles">
+				<v-btn
+					class="overlay-toggle-btn"
+					:color="showHUD ? 'green' : undefined"
+					size="x-small"
+					@click="showHUD = !showHUD"
+				>
+					HUD
+				</v-btn>
+				<v-btn
+					v-if="hasVideo"
+					class="overlay-toggle-btn"
+					:color="showAROverlay ? 'green' : undefined"
+					size="x-small"
+					@click="toggleAROverlay"
+				>
+					<v-icon start size="small">mdi-augmented-reality</v-icon>
+					AR
+				</v-btn>
+			</div>
 
-			<v-btn
-				class="hud-toggle"
-				:color="showHUD ? 'green' : undefined"
-				size="x-small"
-				@click="showHUD = !showHUD"
-			>
-				HUD
-			</v-btn>
+			<div v-if="showAROverlay" class="ar-fov-control">
+				<span class="ar-fov-label">FOV {{ arFov }}°</span>
+				<v-slider
+					v-model="arFov"
+					:min="30"
+					:max="120"
+					:step="1"
+					density="compact"
+					hide-details
+					thumb-size="12"
+					track-size="2"
+					color="green"
+				/>
+			</div>
 
 			<div v-if="showHUD" class="hud-overlay" :style="{ transform: `rotate(${-receivedOrientation.roll}deg)` }">
 				<div class="hud-crosshair">
@@ -395,11 +606,57 @@ useVisualizationCleanup(dsInstances);
 	height: 100% !important;
 }
 
-.hud-toggle {
+.overlay-toggles {
 	position: absolute;
 	top: 6px;
 	left: 6px;
 	z-index: 2;
+	display: flex;
+	gap: 4px;
+}
+
+.ar-fov-control {
+	position: absolute;
+	bottom: 8px;
+	right: 8px;
+	z-index: 2;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	background: rgba(0, 0, 0, 0.6);
+	border-radius: 4px;
+	padding: 4px 12px;
+	width: 200px;
+}
+.ar-fov-label {
+	color: #00ff41;
+	font-family: 'Courier New', monospace;
+	font-size: 11px;
+	white-space: nowrap;
+}
+
+.video-background {
+	position: absolute;
+	inset: 0;
+	z-index: 0;
+	background: #000;
+	overflow: hidden;
+	visibility: hidden;
+	pointer-events: none;
+}
+.video-background.video-visible {
+	visibility: visible;
+}
+
+.minimap-viewer.ar-transparent {
+	position: absolute;
+	inset: 0;
+	z-index: 1;
+}
+.minimap-viewer.ar-transparent :deep(.cesium-viewer),
+.minimap-viewer.ar-transparent :deep(.cesium-widget),
+.minimap-viewer.ar-transparent :deep(.cesium-widget canvas) {
+	background: transparent !important;
 }
 
 .hud-overlay {
@@ -467,4 +724,10 @@ useVisualizationCleanup(dsInstances);
 	margin-left: 1px;
 }
 
+.video-background :deep(canvas),
+.video-background :deep(img) {
+  width: 100% !important;
+  height: 100% !important;
+  object-fit: cover;
+}
 </style>
diff --git a/src/modules/visualization/visualizations/mission/MissionBuilder.vue b/src/modules/visualization/visualizations/mission/MissionBuilder.vue
index 78451aee..7a707bce 100644
--- a/src/modules/visualization/visualizations/mission/MissionBuilder.vue
+++ b/src/modules/visualization/visualizations/mission/MissionBuilder.vue
@@ -317,7 +317,6 @@ async function isLegacyPlanSchema(): Promise<boolean> {
 	try {
 		const { cs: storeCs } = mineControlObsPropsFromCS(cs.id);
 		const schema = await fetchCsSchema(storeCs.controlstream);
-		console.log('schema', schema)
 		if (!schema?.parametersSchema) return false;
 
 		const items = schema.parametersSchema.fields ?? schema.parametersSchema;
diff --git a/src/modules/visualization/visualizations/pointmarker/Builder.ts b/src/modules/visualization/visualizations/pointmarker/Builder.ts
index beae28c7..48314602 100644
--- a/src/modules/visualization/visualizations/pointmarker/Builder.ts
+++ b/src/modules/visualization/visualizations/pointmarker/Builder.ts
@@ -15,7 +15,7 @@ import { IPointMarkerCustomizationOptions } from '../../types/customization';
 import { IConSysApiDataSourceProperties } from '../../types/datasource';
 import { IPointMarkerLayerProperties } from '../../types/layers';
 
-export default function build() {
+export default async function build() {
 	console.log('Building Point Marker Visualization...');
 	const vizwizStore = useVizWizStore();
 	const visualizationStore = useVisualizationStore();
@@ -23,7 +23,7 @@ export default function build() {
 	// Aggregate datastreams from vizwizStore
 	const datastreams = AggregateDatastreams(vizwizStore.dsConfig);
 
-	const pmResult = CreatePointMarkerVizProps(
+	const pmResult = await CreatePointMarkerVizProps(
 		datastreams,
 		vizwizStore.visualizationCustomizationOptions
 	);
@@ -47,12 +47,11 @@ export default function build() {
 
 /**
  * Creates properties for a Map View based on the provided datastream, selected property, and visualization options.
- * @param ds
- * @param selectedProperty
+ * @param datastreams
  * @param visOptions
  * @constructor
  */
-export function CreatePointMarkerVizProps(
+export async function CreatePointMarkerVizProps(
 	datastreams: { [key: string]: any },
 	visOptions: IPointMarkerCustomizationOptions
 ) {
@@ -63,9 +62,9 @@ export function CreatePointMarkerVizProps(
 	let pointMarkerLayer: IPointMarkerLayerProperties = {
 		name: visOptions.name,
 		label: visOptions.name,
-		icon: visOptions.icon,
+		icon: visOptions.icon ?? '',
 		iconColor: visOptions.iconColor || '#FF0000',
-		iconName: visOptions.iconName,
+		iconName: visOptions.iconName ?? '',
 		iconSize: [32, 32],
 	};
 
@@ -95,6 +94,12 @@ export function CreatePointMarkerVizProps(
 			},
 		};
 		vizDatasources.push(currentDataSource);
+
+		// If milSymbol, change icon name
+		if (properties.milSymbol) {
+			pointMarkerLayer.iconName = 'mil-symbol';
+			pointMarkerLayer.iconColor = ''; // Reset icon color if using milsymbol
+		}
 	}
 
 	return {
diff --git a/src/modules/visualization/visualizations/pointmarker/Customize.vue b/src/modules/visualization/visualizations/pointmarker/Customize.vue
index c6fc0952..3f07a5a1 100644
--- a/src/modules/visualization/visualizations/pointmarker/Customize.vue
+++ b/src/modules/visualization/visualizations/pointmarker/Customize.vue
@@ -8,8 +8,12 @@ import { useComponentValidation } from '../../wizard/composables/useComponentVal
 import { useVizWizStore } from '@/stores/vizwizstore';
 
 const vizwizStore = useVizWizStore();
-// If pmIconColor selected in Config, don't show icon color select
-const showIconColor = computed(() => (vizwizStore.dsConfig.pmIconColor ? false : true));
+// If milSymbol is selected in Config, don't show icon select
+const showIcon = computed(() => (vizwizStore.dsConfig.milSymbol ? false : true));
+// If pmIconColor or milSymbol selected in Config, don't show icon color select
+const showIconColor = computed(() =>
+	vizwizStore.dsConfig.pmIconColor || vizwizStore.dsConfig.milSymbol ? false : true
+);
 
 const openPanels = ref<string[]>(['general', 'pointmarker']);
 
@@ -58,8 +62,21 @@ useComponentValidation(valid, emit);
 			title="Point Marker"
 			value="pointmarker"
 		>
-			<v-expansion-panel-text
-				><icon-control roleName="icon"></icon-control>
+			<v-expansion-panel-text>
+				<v-expand-transition>
+					<div v-if="showIcon">
+						<icon-control roleName="icon"></icon-control>
+					</div>
+					<div
+						v-else
+						class="pa-4"
+					>
+						<v-alert variant="outlined"
+							>Icon will be dynamically generated with the respective military symbol
+							based on the selected properties from the previous step.</v-alert
+						>
+					</div>
+				</v-expand-transition>
 				<v-expand-transition>
 					<div v-if="showIconColor">
 						<color-control
diff --git a/src/modules/visualization/visualizations/pointmarker/Descriptor.ts b/src/modules/visualization/visualizations/pointmarker/Descriptor.ts
index 3b39854c..5106a6bf 100644
--- a/src/modules/visualization/visualizations/pointmarker/Descriptor.ts
+++ b/src/modules/visualization/visualizations/pointmarker/Descriptor.ts
@@ -26,6 +26,12 @@ export const PointMarkerConfigRoles: VisualizationConfigRole[] = [
 		type: 'ds',
 		multiple: true,
 	},
+	{
+		role: 'milSymbol',
+		label: 'Military Symbology Icon',
+		description: 'Select a property to apply a milsymbol icon for the point marker.',
+		type: 'ds',
+	},
 	{
 		role: 'pmIconColor',
 		label: 'Icon Color',
@@ -68,7 +74,7 @@ export const PointMarkerDescriptor: VisualizationDescriptor = {
 	layers: ['PointMarkerLayer'],
 	description: 'Visualize a point marker on the map.',
 	formComponents: [ConfigComponent, CustomizeComponent],
-	builder: () => import('@/modules/visualization/visualizations/pointmarker/Builder'),
+	builder: async () => import('@/modules/visualization/visualizations/pointmarker/Builder'),
 	supportsCs: false,
 	requireCs: false,
 	supportedMaps: ['cesium', 'leaflet'],
diff --git a/src/modules/visualization/visualizations/sigint/Builder.ts b/src/modules/visualization/visualizations/sigint/Builder.ts
index c150812f..8e84887d 100644
--- a/src/modules/visualization/visualizations/sigint/Builder.ts
+++ b/src/modules/visualization/visualizations/sigint/Builder.ts
@@ -14,7 +14,7 @@ import { CreateLobVizProps } from '../lob/Builder';
 import { CreateEllipseVizProps } from '../ellipse/Builder';
 import { confirmRoles } from '../../registry/roleUtils';
 
-export default function build() {
+export default async function build() {
 	console.log('Building Sigint Visualization...');
 	const vizwizStore = useVizWizStore();
 	const visualizationStore = useVisualizationStore();
@@ -26,7 +26,7 @@ export default function build() {
 	const datastreams = AggregateDatastreams(vizwizStore.dsConfig);
 
 	// POINTMARKER
-	const pmResult = CreatePointMarkerVizProps(datastreams, {
+	const pmResult = await CreatePointMarkerVizProps(datastreams, {
 		name: vizwizStore.visualizationCustomizationOptions.name,
 		icon: vizwizStore.visualizationCustomizationOptions.pmIcon,
 		iconColor: vizwizStore.visualizationCustomizationOptions.pmIconColor,
diff --git a/src/modules/visualization/visualizations/sigint/Customize.vue b/src/modules/visualization/visualizations/sigint/Customize.vue
index 8016dde7..22da3988 100644
--- a/src/modules/visualization/visualizations/sigint/Customize.vue
+++ b/src/modules/visualization/visualizations/sigint/Customize.vue
@@ -6,19 +6,18 @@ import NameControl from '@/modules/visualization/wizard/customizations/NameContr
 import ColorControl from '@/modules/visualization/wizard/customizations/ColorControl.vue';
 import { useComponentValidation } from '@/modules/visualization/wizard/composables/useComponentValidation';
 import SliderValueControl from '@/modules/visualization/wizard/customizations/SliderValueControl.vue';
-import IconVisibilityControl from '@/modules/visualization/wizard/customizations/IconVisibilityControl.vue';
 import { useVizWizStore } from '@/stores/vizwizstore';
 import { confirmRoles } from '../../registry/roleUtils';
 import { EllipseConfigRoles } from '../ellipse/Descriptor';
 
 const vizwizStore = useVizWizStore();
 // POINTMARKER
-const showPmIconColor = computed(() => (vizwizStore.dsConfig.pmIconColor ? false : true));
-// LOB
-const showLobIcon = computed(
-	() => vizwizStore.visualizationCustomizationOptions.showLobIcon ?? true
+// If milSymbol is selected in PM Config, add alert to icon customize
+const showPmIcon = computed(() => (vizwizStore.dsConfig.milSymbol ? false : true));
+const showPmIconColor = computed(() =>
+	vizwizStore.dsConfig.pmIconColor || vizwizStore.dsConfig.milSymbol ? false : true
 );
-const showLobIconColor = computed(() => (vizwizStore.dsConfig.lobIconColor ? false : true));
+// LOB
 const showLobLineColor = computed(() => (vizwizStore.dsConfig.lobLineColor ? false : true));
 // ELLIPSE
 const showEllipseColor = computed(() => (vizwizStore.dsConfig.ellipseColor ? false : true));
@@ -71,7 +70,20 @@ useComponentValidation(valid, emit);
 			value="pointmarker"
 		>
 			<v-expansion-panel-text>
-				<icon-control roleName="pmIcon"></icon-control>
+				<v-expand-transition>
+					<div v-if="showPmIcon">
+						<icon-control roleName="pmIcon"></icon-control>
+					</div>
+					<div
+						v-else
+						class="pa-4"
+					>
+						<v-alert variant="outlined"
+							>Icon will be dynamically generated with the respective military symbol
+							based on the selected properties from the previous step.</v-alert
+						>
+					</div>
+				</v-expand-transition>
 				<v-expand-transition>
 					<div v-if="showPmIconColor">
 						<color-control
@@ -97,40 +109,6 @@ useComponentValidation(valid, emit);
 			value="lob"
 		>
 			<v-expansion-panel-text>
-				<icon-visibility-control
-					roleName="showLobIcon"
-					label="Show LoB Icon"
-				></icon-visibility-control>
-				<v-expand-transition>
-					<div v-if="showLobIcon">
-						<icon-control roleName="lobIcon"></icon-control>
-						<v-expand-transition>
-							<div v-if="showLobIconColor">
-								<color-control
-									roleName="lobIconColor"
-									label="LoB Icon Color"
-								></color-control>
-							</div>
-							<div
-								v-else
-								class="pb-4"
-							>
-								<v-alert variant="outlined"
-									>Icon color will be dynamically generated based on the selected
-									properties from the previous step.</v-alert
-								>
-							</div>
-						</v-expand-transition>
-					</div>
-					<div
-						v-else
-						class="pb-4"
-					>
-						<v-alert variant="outlined"
-							>Icon is hidden. Enable "Show Icon" to customize.</v-alert
-						>
-					</div>
-				</v-expand-transition>
 				<v-expand-transition>
 					<div v-if="showLobLineColor">
 						<color-control
diff --git a/src/modules/visualization/visualizations/sigint/Descriptor.ts b/src/modules/visualization/visualizations/sigint/Descriptor.ts
index f3a30338..e3fcd531 100644
--- a/src/modules/visualization/visualizations/sigint/Descriptor.ts
+++ b/src/modules/visualization/visualizations/sigint/Descriptor.ts
@@ -49,7 +49,7 @@ export const SigIntDescriptor: VisualizationDescriptor = {
 		ConfigComponentEllipse,
 		CustomizeComponent,
 	],
-	builder: () => import('@/modules/visualization/visualizations/sigint/Builder'),
+	builder: async () => import('@/modules/visualization/visualizations/sigint/Builder'),
 	supportsCs: false,
 	requireCs: false,
 	supportedMaps: ['cesium'],
diff --git a/src/modules/visualization/wizard/composables/useVisualizationWizard.ts b/src/modules/visualization/wizard/composables/useVisualizationWizard.ts
index 78fc89d7..4aad2c72 100644
--- a/src/modules/visualization/wizard/composables/useVisualizationWizard.ts
+++ b/src/modules/visualization/wizard/composables/useVisualizationWizard.ts
@@ -133,7 +133,7 @@ export function useVisualizationWizard(options: {
 
 		// Call default "build" function from the builder module
 		const builderModule = await entry.builder();
-		builderModule.default();
+		await builderModule.default();
 
 		// Close the wizard
 		showToast(`Visualization ${options.mode === 'create' ? 'created' : 'updated'}`, 'SUCCESS');