diff --git a/Arma3TacMapWebApp/Arma3TacMapWebApp.csproj b/Arma3TacMapWebApp/Arma3TacMapWebApp.csproj
index 0d54719..b1731ed 100644
--- a/Arma3TacMapWebApp/Arma3TacMapWebApp.csproj
+++ b/Arma3TacMapWebApp/Arma3TacMapWebApp.csproj
@@ -18,8 +18,8 @@
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
     </PackageReference>
     <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="8.0.7" />
-    <PackageReference Include="Pmad.Milsymbol.AspNetCore" Version="0.1.50" />
-	<PackageReference Include="Pmad.Milsymbol.Png" Version="0.1.50" />
+    <PackageReference Include="Pmad.Milsymbol.AspNetCore" Version="0.1.53" />
+	<PackageReference Include="Pmad.Milsymbol.Png" Version="0.1.53" />
 	<PackageReference Include="PuppeteerSharp" Version="20.0.5" />
     <PackageReference Include="SixLabors.ImageSharp" Version="3.1.6" />
 	  
diff --git a/Arma3TacMapWebApp/Controllers/HomeController.cs b/Arma3TacMapWebApp/Controllers/HomeController.cs
index e6c9d98..1f9bd13 100644
--- a/Arma3TacMapWebApp/Controllers/HomeController.cs
+++ b/Arma3TacMapWebApp/Controllers/HomeController.cs
@@ -11,6 +11,7 @@
 using Arma3TacMapWebApp.Services.GameMapStorage.Json;
 using Microsoft.AspNetCore.Authorization;
 using Microsoft.AspNetCore.Mvc;
+using Microsoft.EntityFrameworkCore.Metadata;
 using Microsoft.Extensions.Logging;
 
 namespace Arma3TacMapWebApp.Controllers
@@ -221,6 +222,14 @@ public async Task<IActionResult> GameCssContent(string gameName)
                     sb.AppendLine();
                 }
             }
+            if ( game.Markers != null)
+            {
+                foreach (var marker in game.Markers)
+                {
+                    sb.Append($".game-icon-{marker.Name!.ToLowerInvariant()} {{ background-image: url('{marker.ImagePng}'); }}");
+                    sb.AppendLine();
+                }
+            }
             return Content(sb.ToString(), "text/css");
         }
 
diff --git a/Arma3TacMapWebApp/Controllers/SymbolsController.cs b/Arma3TacMapWebApp/Controllers/SymbolsController.cs
index b3fdec8..b76f8da 100644
--- a/Arma3TacMapWebApp/Controllers/SymbolsController.cs
+++ b/Arma3TacMapWebApp/Controllers/SymbolsController.cs
@@ -50,7 +50,8 @@ public async Task<IActionResult> Png(string sidc, [FromQuery] SymbolsViewModel?
                 Direction = ToDegrees(options?.Direction),
                 HigherFormation = options?.HigherFormation,
                 ReinforcedReduced = options?.ReinforcedReduced,
-                UniqueDesignation = options?.UniqueDesignation
+                UniqueDesignation = options?.UniqueDesignation,
+                OutlineWidth = 3
             });
             var stream = new MemoryStream();
             symbol.SaveToPng(stream, 2);
diff --git a/Arma3TacMapWebApp/Views/Home/EditMap.cshtml b/Arma3TacMapWebApp/Views/Home/EditMap.cshtml
index 3af34c2..866f96a 100644
--- a/Arma3TacMapWebApp/Views/Home/EditMap.cshtml
+++ b/Arma3TacMapWebApp/Views/Home/EditMap.cshtml
@@ -150,123 +150,52 @@
                 </button>
             </div>
             <div class="modal-body">
-                <div class="bg-light text-center mb-1 p-1">
-                    <div id="symbolNumber" class="text-dark">
+
+                <pmad-symbol-selector id="sidc" name="" layout="Extended" />
+
+                <div class="form-row">
+                    <div class="form-group col-md-6">
+                        <label for="additionalInformation" class="control-label">@Localizer["Additional Information"]</label>
+                        <input type="text" id="additionalInformation" class="form-control  form-control-sm" />
                     </div>
-                    <div id="symbolPreview">
+                    <div class="form-group col-md-6">
+                        <label for="higherFormation" class="control-label">Higher Formation</label>
+                        <input type="text" id="higherFormation" class="form-control  form-control-sm" />
                     </div>
                 </div>
-                <div>
-                    <div class="form-row">
-                        <div class="form-group col-md-3">
-                            <label for="id2" class="control-label">@Localizer["Standard Identity"]</label>
-                            <select id="id2" class="form-control  form-control-sm">
-                                <option value="0">@Localizer["Pending (yellow)"]</option>
-                                <option value="1">@Localizer["Unknown (yellow)"]</option>
-                                <option value="2">@Localizer["Assumed Friend (blue)"]</option>
-                                <option value="3" selected="selected">@Localizer["Friend (blue)"]</option>
-                                <option value="4">@Localizer["Neutral (green)"]</option>
-                                <option value="5">@Localizer["Suspect (red)"]</option>
-                                <option value="6">@Localizer["Hostile (red)"]</option>
-                            </select>
-                        </div>
-                        <div class="form-group col-md-3">
-                            <label for="set" class="control-label">@Localizer["Symbol set"]</label>
-                            <select id="set" class="form-control  form-control-sm">
-                            </select>
-                        </div>
-                        <div class="form-group col-md-3">
-                            <label for="status" class="control-label">@Localizer["Status"]</label>
-                            <select id="status" class="form-control  form-control-sm">
-                                <option value="0" selected="selected">@Localizer["Present"]</option>
-                                <option value="1">@Localizer["Planned/Anticiped/Supect"]</option>
-                                <option value="2">@Localizer["Present/Fully capable"]</option>
-                                <option value="3">@Localizer["Present/Damaged"]</option>
-                                <option value="4">@Localizer["Present/Destroyed"]</option>
-                                <option value="5">@Localizer["Present/Full to capacity"]</option>
-                            </select>
-                        </div>
-                        <div class="form-group col-md-3">
-                            <label for="hq" class="control-label">HQ, TF</label>
-                            <select id="hq" class="form-control  form-control-sm">
-                                <option value="0" selected="selected">n/a</option>
-                                <option value="1">Feint/Dummy</option>
-                                <option value="2">Headquarters</option>
-                                <option value="3">Feint/Dummy Headquarters</option>
-                                <option value="4">Task Force</option>
-                                <option value="5">Feint/Dummy Task Force</option>
-                                <option value="6">Task Force Headquarters</option>
-                                <option value="7">Feint/Dummy Task Force Headquarters</option>
-                            </select>
-                        </div>
+                <div class="form-row">
+                    <div class="form-group col-md-4">
+                        <label for="uniqueDesignation" class="control-label">@Localizer["Unique Designation"]</label>
+                        <input type="text" maxlength="21" id="uniqueDesignation" class="form-control  form-control-sm" />
                     </div>
-
-                    <div class="form-row">
-                        <div class="form-group col-md-6">
-                            <label for="icon" class="control-label">@Localizer["Symbol"]</label>
-                            <select id="icon" class="form-control  form-control-sm" data-live-search="true">
-                            </select>
-                        </div>
-                        <div class="form-group col-md-2">
-                            <label for="mod1" class="control-label">@Localizer["Icon Modifier 1"]</label>
-                            <select id="mod1" class="form-control  form-control-sm" data-live-search="true">
-                            </select>
-                        </div>
-                        <div class="form-group col-md-2">
-                            <label for="mod2" class="control-label">@Localizer["Icon Modifier 2"]</label>
-                            <select id="mod2" class="form-control  form-control-sm" data-live-search="true">
-                            </select>
-                        </div>
-                        <div class="form-group col-md-2">
-                            <label for="size" class="control-label">@Localizer["Echelon"]</label>
-                            <select id="size" class="form-control  form-control-sm">
-                            </select>
-                        </div>
+                    <div class="form-group col-md-4">
+                        <label for="direction" class="control-label">@Localizer["Direction (mil)"]</label>
+                        <input type="number" max="6400" min="0" id="direction" class="form-control  form-control-sm" />
                     </div>
-                    <div class="form-row">
-                        <div class="form-group col-md-6">
-                            <label for="additionalInformation" class="control-label">@Localizer["Additional Information"]</label>
-                            <input type="text" id="additionalInformation" class="form-control  form-control-sm" />
-                        </div>
-                        <div class="form-group col-md-6">
-                            <label for="higherFormation" class="control-label">Higher Formation</label>
-                            <input type="text" id="higherFormation" class="form-control  form-control-sm" />
-                        </div>
+                    <div class="form-group col-md-4">
+                        <label for="reinforcedReduced" class="control-label">@Localizer["Reinforced"]</label>
+                        <select id="reinforcedReduced" class="form-control  form-control-sm">
+                            <option value=""></option>
+                            <option value="(+)">(+) reinforced</option>
+                            <option value="(-)">(-) reduced</option>
+                            <option value="(±)">(±) reinforced and reduced</option>
+                        </select>
                     </div>
-                    <div class="form-row">
-                        <div class="form-group col-md-4">
-                            <label for="uniqueDesignation" class="control-label">@Localizer["Unique Designation"]</label>
-                            <input type="text" maxlength="21" id="uniqueDesignation" class="form-control  form-control-sm" />
-                        </div>
-                        <div class="form-group col-md-4">
-                            <label for="direction" class="control-label">@Localizer["Direction (mil)"]</label>
-                            <input type="number" max="6400" min="0" id="direction" class="form-control  form-control-sm" />
-                        </div>
-                        <div class="form-group col-md-4">
-                            <label for="reinforcedReduced" class="control-label">@Localizer["Reinforced"]</label>
-                            <select id="reinforcedReduced" class="form-control  form-control-sm">
-                                <option value=""></option>
-                                <option value="(+)">(+) reinforced</option>
-                                <option value="(-)">(-) reduced</option>
-                                <option value="(±)">(±) reinforced and reduced</option>
-                            </select>
-                        </div>
+                </div>
+                <div class="form-row">
+                    <div class="form-group col-md-2">
+                        <label for="milsymbol-scale" class="control-label">@Localizer["Scale"]</label>
+                        <input type="number" id="milsymbol-scale" class="form-control" min="10" max="1000" value="100" />
                     </div>
-                    <div class="form-row">
-                        <div class="form-group col-md-2">
-                            <label for="milsymbol-scale" class="control-label">@Localizer["Scale"]</label>
-                            <input type="number" id="milsymbol-scale" class="form-control" min="10" max="1000" value="100" />
-                        </div>
-                        <div class="form-group col-md-5">
-                            <label for="milsymbol-layer" class="control-label">@Localizer["Layer"]</label>
-                            <select class="layers-dropdown form-control" id="milsymbol-layer">
-                                <option value="@Model.InitLiveMap.mapId.TacMapID">@Localizer["Base layer"]</option>
-                            </select>
-                        </div>
-                        <div class="form-group col-md-5 mb-0">
-                            <p>@Localizer["Export to Metis Marker Preview"]</p>
-                            <p id="symbolPreviewMetis" class="mb-0 text-center"></p>
-                        </div>
+                    <div class="form-group col-md-5">
+                        <label for="milsymbol-layer" class="control-label">@Localizer["Layer"]</label>
+                        <select class="layers-dropdown form-control" id="milsymbol-layer">
+                            <option value="@Model.InitLiveMap.mapId.TacMapID">@Localizer["Base layer"]</option>
+                        </select>
+                    </div>
+                    <div class="form-group col-md-5 mb-0">
+                        <p>@Localizer["Export to Metis Marker Preview"]</p>
+                        <p id="symbolPreviewMetis" class="mb-0 text-center"></p>
                     </div>
                 </div>
 
@@ -297,25 +226,25 @@
             <div class="modal-body">
                 <div>
                     <div class="form-row">
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-6">
                             <label for="basic-type" class="control-label">@Localizer["Shape"]</label>
-                            <select id="basic-type" class="form-control">
-                                @foreach (var type in Model.Game.Markers)
+                            <select id="basic-type" class="form-control game-icon-select">
+                                @foreach (var type in Model.Game.Markers!)
                                 {
-                                    <option data-content="<img src='@(type.ImagePng)' height='24' /> @(type.EnglishTitle)" value="@type.Name.ToLowerInvariant()">@(type.EnglishTitle)</option>
+                                    <option class="game-icon-@type.Name!.ToLowerInvariant()" value="@type.Name!.ToLowerInvariant()">@(type.EnglishTitle)</option>
                                 }
                             </select>
                         </div>
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-3">
                             <label for="basic-color" class="control-label">@Localizer["Color"]</label>
-                            <select id="basic-color" class="form-control">
-                                @foreach (var color in Model.Game.Colors)
+                            <select id="basic-color" class="form-control game-color-select">
+                                @foreach (var color in Model.Game.Colors!)
                                 {
-                                    <option class="game-bg-@color.Name.ToLowerInvariant()" value="@color.Name.ToLowerInvariant()">@color.EnglishTitle</option>
+                                    <option class="game-bg-@color.Name!.ToLowerInvariant()" value="@color.Name.ToLowerInvariant()">@color.EnglishTitle</option>
                                 }
                             </select>
                         </div>
-                        <div class="form-group col-md-4">
+                        <div class="form-group col-md-3">
                             <label for="basic-dir" class="control-label">@Localizer["Rotation (mil)"]</label>
                             <input type="number" max="6400" min="0" id="basic-dir" class="form-control" />
                         </div>
@@ -368,12 +297,12 @@
             <div class="modal-body">
                 <div>
                     <div class="form-row">
-                        <div class="form-group">
+                        <div class="form-group col-md-3">
                             <label for="line-color" class="control-label">@Localizer["Color"]</label>
-                            <select id="line-color" class="form-control">
-                                @foreach (var color in Model.Game.Colors)
+                            <select id="line-color" class="form-control game-color-select">
+                                @foreach (var color in Model.Game.Colors!)
                                 {
-                                    <option class="game-bg-@color.Name.ToLowerInvariant()" value="@color.Name.ToLowerInvariant()">@color.EnglishTitle</option>
+                                    <option class="game-bg-@color.Name!.ToLowerInvariant()" value="@color.Name.ToLowerInvariant()">@color.EnglishTitle</option>
                                 }
                             </select>
                         </div>
@@ -530,10 +459,10 @@
                     </div>
                     <div class="form-group col-md-4">
                         <label for="mission-selector-color" class="control-label">@Localizer["Color"]</label>
-                        <select id="mission-selector-color" class="form-control">
-                            @foreach (var color in Model.Game.Colors)
+                        <select id="mission-selector-color" class="form-control game-color-select">
+                            @foreach (var color in Model.Game.Colors!)
                             {
-                                <option class="game-bg-@color.Name.ToLowerInvariant()" value="@color.Name.ToLowerInvariant()">@color.EnglishTitle</option>
+                                <option class="game-bg-@color.Name!.ToLowerInvariant()" value="@color.Name.ToLowerInvariant()">@color.EnglishTitle</option>
                             }
                         </select>
                     </div>
@@ -611,10 +540,10 @@
                 <div class="form-row">
                     <div class="form-group col-md-4">
                         <label for="mission-edit-color" class="control-label">@Localizer["Color"]</label>
-                        <select id="mission-edit-color" class="form-control">
-                            @foreach (var color in Model.Game.Colors)
+                        <select id="mission-edit-color" class="form-control game-color-select">
+                            @foreach (var color in Model.Game.Colors!)
                             {
-                                <option class="game-bg-@color.Name.ToLowerInvariant()" value="@color.Name.ToLowerInvariant()">@color.EnglishTitle</option>
+                                <option class="game-bg-@color.Name!.ToLowerInvariant()" value="@color.Name.ToLowerInvariant()">@color.EnglishTitle</option>
                             }
                         </select>
                     </div>
diff --git a/Arma3TacMapWebApp/Views/Shared/_MapScripts.cshtml b/Arma3TacMapWebApp/Views/Shared/_MapScripts.cshtml
index 573968f..7f448d7 100644
--- a/Arma3TacMapWebApp/Views/Shared/_MapScripts.cshtml
+++ b/Arma3TacMapWebApp/Views/Shared/_MapScripts.cshtml
@@ -3,14 +3,10 @@
 </script>
 <script src="https://cdn.jsdelivr.net/npm/@@microsoft/signalr@5.0.4/dist/browser/signalr.min.js">
 </script>
-<script src="https://cdn.jsdelivr.net/npm/milsymbol@2.0.0/dist/milsymbol.min.js">
-</script>
-<script src="https://cdn.jsdelivr.net/npm/milstd@0.1.6/milstd.min.js">
-</script>
+<pmad-script-milsymbol />
 @if (Model.init == "initLiveMap")
 {
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/bootstrap-select.min.js">
-    </script>
+    <pmad-script-choices />
 }
 <script src="@Model.endpoint/js/mapUtils.js">
 </script>
@@ -23,8 +19,6 @@
     <script src="//mrdoob.github.io/stats.js/build/stats.min.js" onload="var stats = new Stats(); document.body.appendChild(stats.dom); requestAnimationFrame(function loop() { stats.update(); requestAnimationFrame(loop) });">
     </script>
 }
-<script src="/js/milstdExtra.js" asp-append-version="true">
-</script>
 <script src="/js/milMissions.js" asp-append-version="true">
 </script>
 <script src="/js/arma3TacMap.js" asp-append-version="true">
diff --git a/Arma3TacMapWebApp/wwwroot/css/arma3TacMap.css b/Arma3TacMapWebApp/wwwroot/css/arma3TacMap.css
index f16d0d9..0775ea6 100644
--- a/Arma3TacMapWebApp/wwwroot/css/arma3TacMap.css
+++ b/Arma3TacMapWebApp/wwwroot/css/arma3TacMap.css
@@ -100,14 +100,14 @@
     /*text-shadow: 1px 1px 2px white;*/
 }
 
-.btn-outline-secondary {
+.map .btn-outline-secondary {
     background-color: rgba(255, 255, 255, 0.5);
     text-shadow: 0px 0px 4px #fff;
 }
-    .btn-outline-secondary:hover {
+    .map .btn-outline-secondary:hover {
         text-shadow: none;
     }
-.btn-outline-primary {
+.map .btn-outline-primary {
     background-color: rgba(255, 255, 255, 0.5);
 }
 
@@ -165,4 +165,72 @@
     font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
     font-size: 12px;
     line-height: 1.5;
-}
\ No newline at end of file
+}
+ 
+/** Color dropdown */
+
+.choices__list--dropdown.choices-dropdown-grid {
+    width: 300px !important;
+}
+
+.choices-dropdown-grid div.choices__list {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: column;
+    width: 300px;
+}
+
+    .choices-dropdown-grid div.choices__list div.choices__item {
+        width: 100px;
+        text-align: center;
+        border: 7px solid transparent;
+        padding: 3px;
+    }
+        .choices-dropdown-grid div.choices__list div.choices__item.is-highlighted {
+            border: 7px solid #f2f2f2;
+            padding: 3px;
+        }
+
+div.choices__item.item-color {
+    padding: 2px 4px;
+    margin: -2px -4px;
+    border-radius: 3px;
+    box-sizing: content-box;
+    text-align: center;
+}
+
+/** Map overlay color selector (for line tool) */
+
+main .map div.choices__item.item-color {
+    color: transparent !important;
+    width: 22px;
+    height: 30px;
+    margin: -5px -8px -5px -8px;
+    box-sizing: border-box;
+}
+
+main .map .choices[data-type*="select-one"]::after {
+    right: 4px;
+}
+
+main .map .choices .choices__inner {
+    background-color: rgba(255, 255, 255, 0.5);
+    border: 1px #6c757d solid;
+    border-radius: 4px;
+}
+
+/** Basic marker dropdown */
+.choices__item.game-icon {
+    background-size: 20px 20px;
+    background-repeat: no-repeat;
+    background-position: 0px;
+    padding-left: 30px;
+}
+.choices__list--dropdown .choices__item.game-icon {
+    padding-left: 40px !important;
+    background-position: 10px;
+}
+
+div.modal div.pmad-symbol-selector div.preview-box {
+    min-height: 110px;
+}
diff --git a/Arma3TacMapWebApp/wwwroot/css/site.css b/Arma3TacMapWebApp/wwwroot/css/site.css
index f972734..aceb6b4 100644
--- a/Arma3TacMapWebApp/wwwroot/css/site.css
+++ b/Arma3TacMapWebApp/wwwroot/css/site.css
@@ -102,3 +102,32 @@ input:checked + label.orbat-radio {
 .list-group-item.active .btn {
     border-color: white;
 }
+
+/* Slight changes to ChoicesJS to be boostrap lookalike */
+main .choices .choices__inner {
+    background-color: #fff;
+    border: 1px solid #ced4da;
+    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+main .choices.is-focused .choices__inner {
+    border-color: #80bdff;
+    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
+    border-radius: 2.5px;
+}
+
+main .choices.is-focused {
+    overflow: unset;
+}
+
+main .choices .choices__list--dropdown {
+    border-radius: 2.5px;
+    border: 1px solid #ced4da;
+    box-shadow: 0 0 .1rem .1rem rgba(0,0,0,.1);
+}
+
+/* Allow choices height to match standard form field (not suitable for symbol selector choices due to icon) */
+.modal-body .choices[data-type*="select-one"] .choices__inner.same-height-as-bs {
+    min-height: 24.4px;
+    padding: 3.3px 12px;
+}
\ No newline at end of file
diff --git a/Arma3TacMapWebApp/wwwroot/js/arma3TacMap.js b/Arma3TacMapWebApp/wwwroot/js/arma3TacMap.js
index 53eac00..9f68043 100644
--- a/Arma3TacMapWebApp/wwwroot/js/arma3TacMap.js
+++ b/Arma3TacMapWebApp/wwwroot/js/arma3TacMap.js
@@ -3,83 +3,20 @@
 var Arma3TacMap;
 (function (Arma3TacMap) {
 
-    ms.setStandard("APP6"); // We always use APP6 edition D
+    document.addEventListener("DOMContentLoaded", function () {
+        ms.setStandard("APP6"); // We always use APP6 edition D
+    });
 
     var intl = new Intl.NumberFormat();
 
-    function applySymbolSet() {
-        var id = '0003';
-        var symbolset = $('#set').val();
+    const choices = {};
 
-        $('#size').empty();
-        $.each(echelonMobilityTowedarray(symbolset), function (name, value) {
-            var sym = new ms.Symbol(id + symbolset + '00' + value.code + '0000000000', { size: 16 });
-            var labelHtml = '<img class="mil-icon" src="' + sym.asCanvas(window.devicePixelRatio).toDataURL() + '" width="' + sym.getSize().width + '" height="' + sym.getSize().height + '"> ' + value.name;
-            $('#size').append($('<option></option>').attr({ value: value.code, 'data-content': labelHtml }).text(value.name));
-        });
-
-        var data = milstd.app6d[symbolset];
-
-        var grps = {};
-        $('#icon').empty();
-        $.each(data['main icon'], function (name, value) {
-
-            var sym = new ms.Symbol(id + symbolset + '0000' + value.code + '0000', { size: 16 });
-            var labelHtml = '<img class="mil-icon" src="' + sym.asCanvas(window.devicePixelRatio).toDataURL() + '" width="' + sym.getSize().width + '" height="' + sym.getSize().height + '"> ';
-            var labelText = '';
-
-            if (value['entity type']) {
-                if (value['entity subtype']) {
-                    labelHtml += '<span class="font-weight-light text-muted">' + value.entity + ' - ' + value['entity type'] + '</span> - <strong>' + value['entity subtype'] + '</strong>';
-                    labelText = value.entity + ' - ' + value['entity type'] + ' - ' + value['entity subtype'];
-                } else {
-                    labelHtml += '<span class="font-weight-light text-muted">' + value.entity + '</span> - <strong>' + value['entity type'] + '</strong>';
-                    labelText = value.entity + ' - ' + value['entity subtype'];
-                }
-            }
-            else {
-                labelHtml += '<strong>' + value.entity + '</strong>';
-                labelText = value.entity;
-
-                $('#icon').append($('<option></option>').attr({ 'data-divider': 'true' }));
-            }
-            $('#icon').append($('<option></option>').attr({ value: value.code, 'data-content': labelHtml }).text(labelText));
-        });
-
-        $('#mod1').empty();
-        $.each(data['modifier 1'], function (name, value) {
-            var sym = new ms.Symbol(id + symbolset + '0000000000' + value.code + '00', { size: 16 });
-            var labelHtml = '<img class="mil-icon" src="' + sym.asCanvas(window.devicePixelRatio).toDataURL() + '" width="' + sym.getSize().width + '" height="' + sym.getSize().height + '"> ' + value.modifier;
-            $('#mod1').append($('<option></option>').attr({ value: value.code, 'data-content': labelHtml }).text(value.modifier));
-        });
-
-        $('#mod2').empty();
-        $.each(data['modifier 2'], function (name, value) {
-            var sym = new ms.Symbol(id + symbolset + '000000000000' + value.code, { size: 16 });
-            var labelHtml = '<img class="mil-icon" src="' + sym.asCanvas(window.devicePixelRatio).toDataURL() + '" width="' + sym.getSize().width + '" height="' + sym.getSize().height + '"> ' + value.modifier;
-            $('#mod2').append($('<option></option>').attr({ value: value.code, 'data-content': labelHtml }).text(value.modifier));
-        });
-
-        $('#size').selectpicker('refresh');
-        $('#icon').selectpicker('refresh');
-        $('#mod1').selectpicker('refresh');
-        $('#mod2').selectpicker('refresh');
-    }
     function getSymbol() {
-        var symbol = '100';
-        symbol += $('#id2').val() || '0';
-        symbol += $('#set').val() || '00';
-        symbol += $('#status').val() || '0';
-        symbol += $('#hq').val() || '0';
-        symbol += $('#size').val() || '00';
-        symbol += $('#icon').val() || '000000';
-        symbol += $('#mod1').val() || '00';
-        symbol += $('#mod2').val() || '00';
-        return symbol;
+        return PmadMilsymbolSelector.getInstance('sidc').getValue();
     }
 
     // Keep up to date with Arma3TacMapLibrary.Maps.MapExporter
-    var metisSupported = {
+    const metisSupported = {
         entity: ["121100", "121102", "121103", "121104", "121105", "120500", "120600", "121000", "150600", "120501", "111000"],
         modifier1: ["98"],
         modifier2: ["51"],
@@ -87,108 +24,35 @@ var Arma3TacMap;
         status: ["1"]
     };
 
-    function getMetisCompatible(wanted, supported, fallback) {
-        if (supported.includes(wanted)) {
-            return wanted;
+    function getSymbolMetisCompatible(sidc) {
+
+        function getMetisCompatible(wanted, supported, fallback) {
+            if (supported.includes(wanted)) {
+                return wanted;
+            }
+            return fallback;
         }
-        return fallback;
-    }
 
-    function getSymbolMetisCompatible() {
-        var symbol = '100';
-        symbol += $('#id2').val() || '0';
+        let symbol = '100';
+        symbol += sidc.substring(3, 4);
         symbol += '10';
-        symbol += getMetisCompatible($('#status').val() || '0', $('#id2').val() != "4" ? metisSupported.status : [], '0');
+        symbol += getMetisCompatible(sidc.substring(6, 7), sidc.substring(3, 4) != "4" ? metisSupported.status : [], '0');
         symbol += '0';
-        symbol += getMetisCompatible($('#size').val() || '00', metisSupported.size, '00');
-        symbol += getMetisCompatible($('#icon').val() || '000000', metisSupported.entity, '000000');
-        symbol += getMetisCompatible($('#mod1').val() || '00', metisSupported.modifier1, '00');
-        symbol += getMetisCompatible($('#mod2').val() || '00', metisSupported.modifier2, '00');
+        symbol += getMetisCompatible(sidc.substring(8, 10), metisSupported.size, '00');
+        symbol += getMetisCompatible(sidc.substring(10, 16), metisSupported.entity, '000000');
+        symbol += getMetisCompatible(sidc.substring(16, 18), metisSupported.modifier1, '00');
+        symbol += getMetisCompatible(sidc.substring(18, 20), metisSupported.modifier2, '00');
         return symbol;
     }
 
-    function addDegreesToConfig(config, name) {
-        var value = $('#' + name).val();
-        if (value !== '') {
-            config[name] = String(Number(value) * 360 / 6400);
-        }
-    }
-    function addToConfig(config, name) {
-        var value = $('#' + name).val();
-        if (value !== '') {
-            config[name] = value;
-        }
-    }
-
-    function getSymbolConfig() {
-
-        var config = {};
-        addToConfig(config, 'uniqueDesignation');
-        addDegreesToConfig(config, 'direction');
-        addToConfig(config, 'higherFormation');
-        addToConfig(config, 'additionalInformation');
-        addToConfig(config, 'reinforcedReduced');
-        return config;
-    }
-
     function setSymbol(symbol, config) {
-
-        $('#id2').val(symbol.substr(3, 1));
-        $('#set').val(symbol.substr(4, 2));
-        applySymbolSet();
-
-        $('#status').val(symbol.substr(6, 1));
-        $('#hq').val(symbol.substr(7, 1));
-        $('#size').val(symbol.substr(8, 2));
-        $('#icon').val(symbol.substr(10, 6));
-        $('#mod1').val(symbol.substr(16, 2));
-        $('#mod2').val(symbol.substr(18, 2));
-
         $('#uniqueDesignation').val(config.uniqueDesignation || '');
         $('#higherFormation').val(config.higherFormation || '');
         $('#additionalInformation').val(config.additionalInformation || '');
         $('#reinforcedReduced').val(config.reinforcedReduced || '');
         $('#direction').val(config.direction !== undefined ? (Number(config.direction) * 6400 / 360) : '');
-        applySymbol();
 
-        $('select').selectpicker('render');
-    }
-
-    function applySymbol() {
-        var symbol = getSymbol();
-
-        $('#symbolNumber').text(symbol);
-
-        var config = getSymbolConfig();
-
-        config.size = 70;
-
-        var sym = new ms.Symbol(symbol, config);
-
-        $('#symbolPreview').empty();
-
-        $('#symbolPreview').append($('<img></img>')
-            .attr({
-                src: sym.asCanvas(window.devicePixelRatio).toDataURL(),
-                width: sym.getSize().width,
-                height: sym.getSize().height
-
-            })
-        );
-
-        var symMetis = new ms.Symbol(getSymbolMetisCompatible(), {
-            size: 40,
-            uniqueDesignation: config.uniqueDesignation
-        });
-        $('#symbolPreviewMetis').empty();
-        $('#symbolPreviewMetis').append($('<img></img>')
-            .attr({
-                src: symMetis.asCanvas(window.devicePixelRatio).toDataURL(),
-                width: symMetis.getSize().width,
-                height: symMetis.getSize().height
-            })
-        );
-        return symbol;
+        PmadMilsymbolSelector.getInstance('sidc').setValue(symbol);
     }
 
     var basicColors = {
@@ -315,7 +179,6 @@ var Arma3TacMap;
         }
 
         $('select.layers-dropdown').val('' + marker.options.markerLayer.id);
-        $('select.layers-dropdown').selectpicker('refresh');
 
         if (modalMarkerData.type == 'mil') {
             setSymbol(modalMarkerData.symbol, modalMarkerData.config);
@@ -327,12 +190,11 @@ var Arma3TacMap;
             $('#milsymbol-grid').text(Arma3Map.toGrid(e.latlng));
 
         } else if (modalMarkerData.type == 'basic') {
-            $('#basic-type').val(modalMarkerData.symbol);
-            $('#basic-color').val(modalMarkerData.config.color.toLowerCase());
+            choices['basic-type'].setChoiceByValue(modalMarkerData.symbol);
+            choices['basic-color'].setChoiceByValue(modalMarkerData.config.color.toLowerCase());
             $('#basic-dir').val(modalMarkerData.config.dir);
             $('#basic-label').val(modalMarkerData.config.label);
             $('#basic-scale').val((modalMarkerData.scale ?? 1) * 100);
-            $('select').selectpicker('render');
 
             $('#basicsymbol').modal('show');
             $('#basicsymbol-delete').show();
@@ -341,14 +203,12 @@ var Arma3TacMap;
             $('#basicsymbol-grid').text(Arma3Map.toGrid(e.latlng));
 
         } else if (modalMarkerData.type == 'line') {
-            $('#line-color').val(modalMarkerData.config.color.toLowerCase());
-            $('select').selectpicker('render');
+            choices['line-color'].setChoiceByValue(modalMarkerData.config.color.toLowerCase());
             $('#line').modal('show');
         } else if (modalMarkerData.type == 'measure') {
             $('#measure').modal('show');
         } else if (modalMarkerData.type == 'mission') {
-            $('#mission-edit-color').val(modalMarkerData.config.color.toLowerCase());
-            $('select').selectpicker('render');
+            choices['mission-edit-color'].setChoiceByValue(modalMarkerData.config.color.toLowerCase());
             $('#mission-edit').modal('show');
 
         } else if (modalMarkerData.type == 'note') {
@@ -356,7 +216,6 @@ var Arma3TacMap;
             initNoteEditor(modalMarkerData.config.content);
 
             $('#note-position').val(modalMarkerData.config.position);
-            $('select').selectpicker('render');
 
             $('#note-dialog').modal('show');
             $('#note-delete').show();
@@ -375,7 +234,6 @@ var Arma3TacMap;
         $('#milsymbol-grid').text(Arma3Map.toGrid(latlng));
 
         $('#milsymbol-layer').val('' + getCurrentLayerId());
-        $('#milsymbol-layer').selectpicker('refresh');
     };
 
     function insertOrbat(latlng) {
@@ -392,11 +250,34 @@ var Arma3TacMap;
         $('#basicsymbol-grid').text(Arma3Map.toGrid(latlng));
 
         $('#basicsymbol-layer').val('' + getCurrentLayerId());
-        $('#basicsymbol-layer').selectpicker('refresh');
     };
 
     function milsymbolMarkerTool(backend) {
 
+        const fields = {
+            uniqueDesignation: document.getElementById('uniqueDesignation'),
+            direction: document.getElementById('direction'),
+            higherFormation: document.getElementById('higherFormation'),
+            additionalInformation: document.getElementById('additionalInformation'),
+            reinforcedReduced: document.getElementById('reinforcedReduced'),
+            //commonIdentifier: document.getElementById('commonIdentifier')
+        };
+
+        function getSymbolConfig () {
+            let options = {};
+            Object.getOwnPropertyNames(fields).forEach(name => {
+                let value = fields[name].value;
+                if (value !== '') {
+                    if (name == 'direction') {
+                        value = String(Number(value) * 360 / 6400);
+                    }
+                    options[name] = value;
+                }
+            });
+            return options;
+        };
+
+
         $('#milsymbol-insert').on('click', function () {
             var symbol = getSymbol();
             var symbolConfig = getSymbolConfig();
@@ -425,18 +306,25 @@ var Arma3TacMap;
             $('#milsymbol').modal('hide');
         });
 
-        $.each(milstd.app6d, function (name, value) {
-            $('#set').append($('<option></option>').attr({ value: value.symbolset }).text(value.name));
+
+        Object.getOwnPropertyNames(fields).forEach(name => {
+            fields[name].addEventListener('change', function () {
+                PmadMilsymbolSelector.getInstance('sidc').updatePreview();
+            });
         });
-        $('#set').selectpicker("refresh");
-        $('#set').val("10");
-        applySymbolSet();
 
-        $('#set').change(applySymbolSet);
-        applySymbol();
+        PmadMilsymbolSelector.setOptions("sidc", {
+            getSymbolOptions: function () { var options = getSymbolConfig(); options.size = 60;  return options; },
+            symbolUpdatedCallback: function (sidc, optionsWithDegrees, symbol) {
 
-        $('select').change(applySymbol);
-        $('input').change(applySymbol);
+                // Update Metis Marker export preview
+                var symMetis = new ms.Symbol(getSymbolMetisCompatible(sidc), {
+                    size: 30,
+                    uniqueDesignation: optionsWithDegrees.uniqueDesignation
+                });
+                document.getElementById('symbolPreviewMetis').innerHTML = symMetis.asSVG();
+            }
+        });
 
     }
 
@@ -743,9 +631,7 @@ var Arma3TacMap;
         $('#note-insert').show();
         $('#note-grid').text(Arma3Map.toGrid(latlng));
         $('#note-dialog').modal('show');
-
         $('#note-layer').val('' + getCurrentLayerId());
-        $('#note-layer').selectpicker('refresh');
 
         initNoteEditor('');
     }
@@ -1004,7 +890,11 @@ var Arma3TacMap;
 
         $('.leaflet-container').css('cursor', currentTool == 0 ? '' : 'crosshair');
 
-        colorPicker.selectpicker(currentTool == 4 ? 'show' : 'hide');
+        if (currentTool == 4) {
+            choices['color-tool'].containerOuter.element.classList.remove("d-none");
+        } else {
+            choices['color-tool'].containerOuter.element.classList.add("d-none");
+        }
 
         if (currentTool == 1) {
             map.dragging.disable();
@@ -1025,19 +915,10 @@ var Arma3TacMap;
             gameJson.colors.forEach(color => { basicColors[color.name.toLowerCase()] = color.hexadecimal; });
         }
         
-        var previousColor = Object.getOwnPropertyNames(basicColors)[0];
-        var colorSelect = $('<select class="btn-maptool" data-container="body" id="color-tool" data-style="game-bg-' + previousColor + '"></select>');
-        Object.getOwnPropertyNames(basicColors).forEach(function (color) {
-            colorSelect.append($('<option></option>').attr({
-                value: color,
-                'data-content': "<div class='game-bg-" + color + "' style='width:20px; height:20px;'/>"
-            }).addClass('game-bg-' + color));
-        });
-        colorSelect.on('change', function () {
-            colorSelect.selectpicker('setStyle', 'game-bg-' + previousColor, 'remove');
-            colorSelect.selectpicker('setStyle', 'game-bg-' + colorSelect.val(), 'add');
-            previousColor = colorSelect.val();
-        });
+        var preExisting = document.querySelector('.game-color-select'); // Find an existing color picker
+
+        var colorSelect = $('<select class="btn-maptool game-color-select" id="color-tool"></select>');
+        colorSelect.html(preExisting.innerHTML);
         return colorSelect;
     }
 
@@ -1274,11 +1155,71 @@ var Arma3TacMap;
             }
         });
 
-        $('select').selectpicker();
-
         $('.modal-edit-points').on('click', _ => editMarkerPoints(modalMarker, map, backend));
 
+
+
+        const choicesColorConfig = {
+            searchEnabled: false,
+            shouldSort: false,
+            itemSelectText: "",
+            callbackOnCreateTemplates: () => ({
+                choice: function (options, choice, selectText, groupName) {
+                    let result = Choices.defaults.templates.choice.call(this, options, choice, selectText, groupName);
+                    result.classList.add(choice.element.className);
+                    return result;
+                },
+                item: function (options, choice, selectText, groupName) {
+                    let result = Choices.defaults.templates.choice.call(this, options, choice, selectText, groupName);
+                    result.classList.add(choice.element.className);
+                    result.classList.add("item-color");
+                    return result;
+                },
+            }),
+            classNames: {
+                listDropdown: ['choices__list--dropdown', 'choices-dropdown-grid'],
+                containerInner: ['choices__inner', 'same-height-as-bs'],
+            }
+        };
+
+        const choicesIconConfig = {
+            shouldSort: false,
+            itemSelectText: "",
+            searchResultLimit: -1,
+            callbackOnCreateTemplates: () => ({
+                item: function (options, choice, removeItemButton) {
+                    let result = Choices.defaults.templates.item.call(this, options, choice, removeItemButton);
+                    result.classList.add(choice.element.className);
+                    return result;
+                },
+                choice: function (options, choice, selectText, groupName) {
+                    let result = Choices.defaults.templates.choice.call(this, options, choice, selectText, groupName);
+                    result.classList.add(choice.element.className);
+                    return result;
+                },
+            }),
+            classNames: {
+                item: ['choices__item', 'game-icon'],
+                containerInner: ['choices__inner', 'same-height-as-bs'],
+            },
+            fuseOptions: {
+                shouldSort: false,
+                findAllMatches: true,
+                threshold: 0,
+                ignoreLocation: true
+            }
+        };
+
+        document.querySelectorAll('select.game-color-select').forEach(function (select) {
+            choices[select.id] = new Choices(select, choicesColorConfig);
+        });
+
+        document.querySelectorAll('select.game-icon-select').forEach(function (select) {
+            choices[select.id] = new Choices(select, choicesIconConfig);
+        });
+
         selectTool(map, 0);
+
     }
 
     function getHeading(p1, p2) {
@@ -1442,7 +1383,6 @@ var Arma3TacMap;
         $('select.layers-dropdown').each((index, selectElement) => {
             const selectElements = sorted.map((l) => $(selectElement).find('option[value=' + l.id + ']').detach());
             $(selectElement).append(selectElements);
-            $(selectElement).selectpicker('refresh');
         });
     }
 
diff --git a/Arma3TacMapWebApp/wwwroot/js/milstdExtra.js b/Arma3TacMapWebApp/wwwroot/js/milstdExtra.js
deleted file mode 100644
index 3be7c6c..0000000
--- a/Arma3TacMapWebApp/wwwroot/js/milstdExtra.js
+++ /dev/null
@@ -1,70 +0,0 @@
-function echelonMobilityTowedarray(symbolset) {
-    if (symbolset == "10") {
-        return [
-            { code: "00", name: "Unspecified", sidc: "10031000000000000000" },
-            { code: "11", name: "Team/Crew", sidc: "10031000110000000000" },
-            { code: "12", name: "Squad ", sidc: "10031000120000000000" },
-            { code: "13", name: "Section", sidc: "10031000130000000000" },
-            { code: "14", name: "Platoon/Detachment", sidc: "10031000140000000000" },
-            { code: "15", name: "Company/Battery/Troop", sidc: "10031000150000000000" },
-            { code: "16", name: "Battalion/Squadron", sidc: "10031000160000000000" },
-            { code: "17", name: "Regiment/Group", sidc: "10031000170000000000" },
-            { code: "18", name: "Brigade", sidc: "10031000180000000000" },
-            { code: "21", name: "Division", sidc: "10031000210000000000" },
-            { code: "22", name: "Corps/MEF", sidc: "10031000220000000000" },
-            { code: "23", name: "Army", sidc: "10031000230000000000" },
-            { code: "24", name: "Army Group/Front", sidc: "10031000240000000000" },
-            { code: "25", name: "Region/Theater", sidc: "10031000250000000000" },
-            { code: "26", name: "Command", sidc: "10031000260000000000" }
-        ];
-    }
-    // add signals intelligence
-    if (symbolset == "15") {
-        return [
-            { code: "00", name: "Unspecified", sidc: "10031500000000000000" },
-            {
-                code: "31",
-                name: "Wheeled limited cross country",
-                sidc: "10031500310000000000"
-            },
-            {
-                code: "32",
-                name: "Wheeled cross country",
-                sidc: "10031500320000000000"
-            },
-            { code: "33", name: "Tracked", sidc: "10031500330000000000" },
-            {
-                code: "34",
-                name: "Wheeled and tracked combination",
-                sidc: "10031500340000000000"
-            },
-            { code: "35", name: "Towed", sidc: "10031500350000000000" },
-            { code: "36", name: "Railway", sidc: "10031500360000000000" },
-            { code: "37", name: "Pack animals", sidc: "10031500370000000000" },
-            {
-                code: "41",
-                name: "Over snow (prime mover)",
-                sidc: "10031500410000000000"
-            },
-            { code: "42", name: "Sled", sidc: "10031500420000000000" },
-            { code: "51", name: "Barge", sidc: "10031500510000000000" },
-            { code: "52", name: "Amphibious", sidc: "10031500520000000000" }
-        ];
-    }
-    if (symbolset == "27") {
-        return [
-            { code: "00", name: "Unspecified", sidc: "10032700000000000000" },
-            { code: "71", name: "Leader", sidc: "10032700710000000000" }
-        ];
-    }
-    if (symbolset == "30" || symbolset == "35") {
-        return [
-            { code: "00", name: "Unspecified", sidc: "10033000000000000000" },
-            { code: "61", name: "Short towed array", sidc: "10033000610000000000" },
-            { code: "62", name: "Long towed array", sidc: "10033000620000000000" }
-        ];
-    }
-    return [
-        { code: "00", name: "n/a", sidc: "10031000000000000000" }
-    ];
-}
\ No newline at end of file