diff --git a/opendcs-web-client/build.gradle b/opendcs-web-client/build.gradle
index e3d7c16bc..ced3e2365 100644
--- a/opendcs-web-client/build.gradle
+++ b/opendcs-web-client/build.gradle
@@ -23,34 +23,36 @@ plugins {
 dependencies {
     implementation(libs.servlet.api)
     implementation(libs.slf4j.api)
-    runtimeClasspath(libs.jstl)
-    runtimeClasspath(libs.slf4j.jdk14)
-
-    runtimeOnly("org.webjars:bootstrap:5.3.8")
-    runtimeOnly("org.webjars:jquery-blockui:2.70-1")
-    runtimeOnly("org.webjars:jquery:3.4.1")
-    runtimeOnly("org.webjars:datatables:2.3.2")
-    runtimeOnly("org.webjars:datatables-buttons:3.2.5")
-    runtimeOnly("org.webjars:datatables-select:2.1.0")
-    runtimeOnly("org.webjars:select2:4.0.13")
-    runtimeOnly("org.webjars:d3js:6.7.0")
-    runtimeOnly("org.webjars:datatables-responsive:2.2.7")
-    runtimeOnly("org.webjars:bootstrap-switch:3.3.4")
-    runtimeOnly("org.webjars:uniform:2.1.2-1")
-    runtimeOnly("org.webjars.npm:switchery:0.0.2") {
-        exclude group: "org.webjars.npm", module: "cssify"
-    }
-    runtimeOnly("org.webjars:datatables-rowreorder:1.4.1")
-    runtimeOnly("org.webjars:bootstrap-sidebar:0.2.2")
-    runtimeOnly("org.webjars:jquery-validation:1.20.0")
-    runtimeOnly("org.webjars:pickadate.js:3.6.4")
-    runtimeOnly("org.webjars:bootstrap-daterangepicker:3.1")
-    runtimeOnly("org.webjars:momentjs:2.30.1-1")
+    implementation(libs.jstl)
+    implementation(libs.slf4j.jdk14)
 
+    // Webjars
+    implementation("org.webjars:webjars-locator-core:0.59")
+    implementation("org.webjars:webjars-servlet-2.x:1.6")
+    implementation("org.webjars:jquery:3.7.1")
+    implementation("org.webjars:bootstrap:5.3.8")
+    implementation("org.webjars:momentjs:2.30.1-1")
+    implementation("org.webjars.npm:bootstrap-daterangepicker:3.1.0")
+    implementation("org.webjars:jquery-blockui:2.70-1")
+    implementation("org.webjars:jquery-validation:1.20.0")
+    implementation("org.webjars:d3js:6.7.0")
 
+    // DataTables + Bootstrap 5
+    implementation("org.webjars.npm:datatables.net:1.13.8")
+    implementation("org.webjars.npm:datatables.net-bs5:1.13.8")
+    implementation("org.webjars.npm:datatables.net-responsive:2.5.0")
+    implementation("org.webjars.npm:datatables.net-responsive-bs5:2.5.0")
+    implementation("org.webjars.npm:datatables.net-buttons:2.4.2")
+    implementation("org.webjars.npm:datatables.net-buttons-bs5:2.4.2")
+    implementation("org.webjars.npm:datatables.net-select:1.7.1")
+    implementation("org.webjars.npm:datatables.net-select-bs5:1.4.0")
 
-    runtimeOnly("org.webjars:webjars-locator-core:0.59")
-    runtimeOnly("org.webjars:webjars-servlet-2.x:1.6")
+    // Extras
+    implementation("org.webjars:select2:4.0.13")
+    implementation("org.webjars:bootstrap-switch:3.3.4")
+    implementation("org.webjars:uniform:2.1.2-1")
+    implementation("org.webjars:bootstrap-sidebar:0.2.2")
+    implementation("org.webjars:pickadate.js:3.6.4")
 
     testImplementation(libs.selenium)
     testImplementation(libs.junit.api)
@@ -58,6 +60,7 @@ dependencies {
     testImplementation(libs.mockito.junit.jupiter)
 }
 
+
 publishing {
     publications {
         maven(MavenPublication) {
diff --git a/opendcs-web-client/src/main/webapp/WEB-INF/web.xml b/opendcs-web-client/src/main/webapp/WEB-INF/web.xml
index 54c7d4de5..434dc3ce3 100644
--- a/opendcs-web-client/src/main/webapp/WEB-INF/web.xml
+++ b/opendcs-web-client/src/main/webapp/WEB-INF/web.xml
@@ -178,11 +178,11 @@
         <servlet-name>Error</servlet-name>
         <url-pattern>/portal/error</url-pattern>
     </servlet-mapping>
-    
+
     <servlet>
         <servlet-name>WebjarsServlet</servlet-name>
         <servlet-class>org.webjars.servlet.WebjarsServlet</servlet-class>
-        <load-on-startup>2</load-on-startup>
+        <load-on-startup>1</load-on-startup>
     </servlet>
     <servlet-mapping>
         <servlet-name>WebjarsServlet</servlet-name>
diff --git a/opendcs-web-client/src/main/webapp/algorithms.jsp b/opendcs-web-client/src/main/webapp/algorithms.jsp
index 66751d389..8dd5fafe3 100644
--- a/opendcs-web-client/src/main/webapp/algorithms.jsp
+++ b/opendcs-web-client/src/main/webapp/algorithms.jsp
@@ -29,7 +29,7 @@
 					<div class="page-header-content header-elements-md-inline">
 						<div class="page-title d-flex">
 							<h4><span class="font-weight-semibold">OpenDCS</span> - Algorithms</h4>
-							<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
+							<a href="#" class="header-elements-toggle text-default d-md-none"><i class="bi bi-three-dots-vertical"></i></a>
 						</div>
 					</div>  
 				</div> 
@@ -63,7 +63,7 @@
 		</div>
 		<!-- /page content -->
 		<!-- algorithm modal -->
-		<div id="modal_main" class="modal fade" tabindex="-1" data-keyboard="false" data-backdrop="static">
+		<div id="modal_main" class="modal fade" tabindex="-1" data-bs-keyboard="false" data-bs-backdrop="static">
 			<div class="modal-dialog modal-dialog-scrollable opendcs-modal-90" class_old="modal-dialog modal-xl modal-height-xl">
 				<div class="modal-content h-100">
 					<div class="modal-header bg-secondary">
@@ -151,7 +151,7 @@
 					</div>
 				</div>
 					<div class="modal-footer pt-3">
-						<button type="button" class="btn btn-secondary" id="cancelButton" data-dismiss="modal">Cancel</button>
+						<button type="button" class="btn btn-secondary" id="cancelButton" data-bs-dismiss="modal">Cancel</button>
 						<button type="button" class="btn btn-success" id="saveButton">Save</button>
 					</div>
 				</div>
@@ -159,11 +159,10 @@
 		</div>
 		<!-- /algorithm modal -->
 	</body>
-	<jsp:include page="/resources/jsp/includes/decodes.jsp" /> 
-	<script src="/webjars/switchery/switchery.js"></script>
-	<script src="/webjars/bootstrap-switch/js/bootstrap-switch.min.js"></script>
-	<script src="/webjars/uniform/jquery.uniform.min.js"></script>
-	<script src="../resources/js/datatables/helpers.js"></script>
+	<jsp:include page="/resources/jsp/includes/decodes.jsp" />
+
+
+<script src="../resources/js/datatables/helpers.js"></script>
 	<script src="../resources/js/lib/dom_utilities.js"></script>
 	<script src="../resources/js/lib/object_utilities.js"></script>
 	<script src="../resources/js/lib/date_utilities.js"></script>
diff --git a/opendcs-web-client/src/main/webapp/computations.jsp b/opendcs-web-client/src/main/webapp/computations.jsp
index dd3ef5eeb..ceeb50510 100644
--- a/opendcs-web-client/src/main/webapp/computations.jsp
+++ b/opendcs-web-client/src/main/webapp/computations.jsp
@@ -14,7 +14,7 @@
 					<div class="page-header-content header-elements-md-inline">
 						<div class="page-title d-flex">
 							<h4><span class="font-weight-semibold">OpenDCS</span> - Computations</h4>
-							<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
+							<a href="#" class="header-elements-toggle text-default d-md-none"><i class="bi bi-three-dots-vertical"></i></a>
 						</div>
 					</div>  
 				</div> <!-- /page header -->
@@ -44,7 +44,7 @@
 			</div> <!-- /main content -->
 		</div> <!-- /page content -->
 		<!-- Computation modal -->
-		<div id="modal_main" class="modal fade" tabindex="-1" data-keyboard="false" data-backdrop="static">
+		<div id="modal_main" class="modal fade" tabindex="-1" data-bs-keyboard="false" data-bs-backdrop="static">
 			<div class="modal-dialog modal-dialog-scrollable opendcs-modal-90" class_old="modal-dialog modal-xl modal-height-xl">
 				<div class="modal-content h-100">
 					<div class="modal-header bg-secondary">
@@ -60,9 +60,9 @@
 											<table class="table table-hover datatable-responsive dataTable no-footer mb-1">
 												<caption class="captionTitleCenter">Details
 													<div class="float-right">
-														<div class="form-check form-check-switchery"">
+														<div class="form-check form-switch"">
 															<label class="form-check-label">
-																<input type="checkbox" id="enabledCheckbox" class="form-check-input-switchery" data-fouc>
+																<input type="checkbox" id="enabledCheckbox" class="form-check-input" >
 															</label>
 														</div>
 													</div>
@@ -154,7 +154,7 @@
 						</div>
 					</div>
 					<div class="modal-footer pt-3">
-						<button type="button" class="btn btn-secondary" id="cancelButton" data-dismiss="modal">Cancel</button>
+						<button type="button" class="btn btn-secondary" id="cancelButton" data-bs-dismiss="modal">Cancel</button>
 						<button type="button" class="btn btn-success" id="saveButton">Save</button>
 					</div>
 				</div>
@@ -163,7 +163,7 @@
 	</div>
 	<!-- /computation modal -->
 	<!-- Algorithm modal -->
-	<div id="modal_algorithm" class="modal fade" tabindex="-1" data-keyboard="false" data-backdrop="static">
+	<div id="modal_algorithm" class="modal fade" tabindex="-1" data-bs-keyboard="false" data-bs-backdrop="static">
 		<div class="modal-dialog modal-dialog-scrollable opendcs-modal-90" class_old="modal-dialog modal-xl modal-height-xl">
 			<div class="modal-content h-100">
 				<div class="modal-header bg-secondary">
@@ -192,7 +192,7 @@
 					</div>
 				</div>
 				<div class="modal-footer pt-3">
-					<button type="button" class="btn btn-secondary" id="cancelAlgoButton" data-dismiss="modal">Cancel</button>
+					<button type="button" class="btn btn-secondary" id="cancelAlgoButton" data-bs-dismiss="modal">Cancel</button>
 					<button type="button" class="btn btn-success" id="submitAlgoButton">Submit</button>
 				</div>
 			</div>
@@ -200,10 +200,9 @@
 	</div>
 	<!-- /algorithm modal -->
 	</body>
-	<jsp:include page="/resources/jsp/includes/decodes.jsp" /> 
-	<script src="/webjars/switchery/switchery.js"></script>
-	<script src="/webjars/bootstrap-switch/js/bootstrap-switch.min.js"></script>
-	<script src="/webjars/uniform/jquery.uniform.min.js"></script>
+	<jsp:include page="/resources/jsp/includes/decodes.jsp" />
+
+
 	<script src="../resources/js/datatables/helpers.js"></script>
 	<script src="../resources/js/lib/dom_utilities.js"></script>
 	<script src="../resources/js/lib/object_utilities.js"></script>
diff --git a/opendcs-web-client/src/main/webapp/configs.jsp b/opendcs-web-client/src/main/webapp/configs.jsp
index ede922bbd..4bf05485a 100644
--- a/opendcs-web-client/src/main/webapp/configs.jsp
+++ b/opendcs-web-client/src/main/webapp/configs.jsp
@@ -18,7 +18,7 @@
 					<div class="page-header-content header-elements-md-inline">
 						<div class="page-title d-flex">
 							<h4><span class="font-weight-semibold">OpenDCS</span> - Configs</h4>
-							<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
+							<a href="#" class="header-elements-toggle text-default d-md-none"><i class="bi bi-three-dots-vertical"></i></a>
 						</div>
 					</div>  
 				</div> <!-- /page header -->
@@ -55,7 +55,7 @@
 	</body>
 
 	<!-- Success modal -->
-	<div id="modal_config" class="modal fade" tabindex="-1" data-keyboard="false" data-backdrop="static">
+	<div id="modal_config" class="modal fade" tabindex="-1" data-bs-keyboard="false" data-bs-backdrop="static">
 		<div class="modal-dialog modal-dialog-scrollable opendcs-modal-90">
 			<div class="modal-content">
 				<div class="modal-header bg-secondary">
@@ -125,8 +125,7 @@
 				</div>
 
 				<div class="modal-footer">
-					<!--<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>-->
-					<button type="button" class="btn btn-secondary" id="cancelConfigsModalButton" data-dismiss="modal">Cancel</button>
+					<button type="button" class="btn btn-secondary" id="cancelConfigsModalButton" data-bs-dismiss="modal">Cancel</button>
 					<button type="button" class="btn btn-success" id="saveConfigsModalButton">Save</button>
 				</div>
 			</div>
@@ -136,7 +135,7 @@
 	<!-- /success modal -->
 	
 	<!-- Config Sensor modal -->
-	<div id="modal_configsensor" class="modal fade" data-keyboard="false" data-backdrop="static">
+	<div id="modal_configsensor" class="modal fade" data-bs-keyboard="false" data-bs-backdrop="static">
 		<div class="modal-dialog modal-sm-med modal-dialog-scrollable">
 			<div class="modal-content h-100">
 				<div class="modal-header bg-secondary">
@@ -220,7 +219,7 @@
 							<label data-mediumtype="polled-tcp" class="col-form-label col-lg-3 text-right">1st Sample Time</label>
 							<div class="col-lg-6 input-group">
 								<span class="input-group-prepend">
-									<span class="input-group-text"><i class="icon-watch2"></i></span>
+									<span class="input-group-text"><i class="bi bi-clock"></i></span>
 								</span>
 								<input type="text" class="form-control" id="firstSampleTime" value="00:00:00">
 							</div>
@@ -230,7 +229,7 @@
 							<label data-mediumtype="polled-tcp" class="col-form-label col-lg-3 text-right">Sampling Interval</label>
 							<div class="col-lg-6 input-group">
 								<span class="input-group-prepend">
-									<span class="input-group-text"><i class="icon-watch2"></i></span>
+									<span class="input-group-text"><i class="bi bi-clock"></i></span>
 								</span>
 								<input type="text" class="form-control" id="samplingInterval" value="00:00:00">
 							</div>
@@ -267,7 +266,7 @@
 	
 	
 	<!-- Decoding Script modal -->
-	<div id="modal_decodingscript" class="modal fade" data-keyboard="false" data-backdrop="static">
+	<div id="modal_decodingscript" class="modal fade" data-bs-keyboard="false" data-bs-backdrop="static">
 		<div class="modal-dialog modal-med">
 			<div class="modal-content h-100">
 				<div class="modal-header bg-secondary">
@@ -340,8 +339,8 @@
 					  		<legend class="text-uppercase font-size-sm font-weight-bold">Sample Message</legend>
 							
 								<ul class="nav nav-tabs">
-									<li class="nav-item"><a href="#lrgsTab" class="nav-link rounded-top active" data-toggle="tab">Load From LRGS</a></li>
-									<li class="nav-item"><a href="#fileTab" class="nav-link rounded-top" data-toggle="tab">Load From File</a></li>
+									<li class="nav-item"><a href="#lrgsTab" class="nav-link rounded-top active" data-bs-toggle="tab">Load From LRGS</a></li>
+									<li class="nav-item"><a href="#fileTab" class="nav-link rounded-top" data-bs-toggle="tab">Load From File</a></li>
 								</ul>
 
 								<div class="tab-content">
@@ -403,14 +402,7 @@
 	<!-- /decoding script modal -->
 	
 	<jsp:include page="/resources/jsp/includes/decodes.jsp" /> 
-	
-	<script src="/webjars/momentjs/moment.min.js"></script>
-	<script src="/webjars/bootstrap-daterangepicker/js/bootstrap-daterangepicker.js"></script>
-	<script src="../resources/js/plugins/pickers/anytime.min.js"></script>
-	<script src="/webjars/pickadate.js/picker.js"></script>
-	<script src="/webjars/pickadate.js/picker.date.js"></script>
-	<script src="/webjars/pickadate.js/picker.time.js"></script>
-	<script src="/webjars/pickadate.js/legacy.js"></script>
+
 	<script src="../resources/js/configs.js"></script>
 	<script src="../resources/js/datatables/helpers.js"></script>
 	<script src="../resources/js/lib/object_utilities.js"></script>
diff --git a/opendcs-web-client/src/main/webapp/engineering_units.jsp b/opendcs-web-client/src/main/webapp/engineering_units.jsp
index b1a4416f1..a6188d9f9 100644
--- a/opendcs-web-client/src/main/webapp/engineering_units.jsp
+++ b/opendcs-web-client/src/main/webapp/engineering_units.jsp
@@ -18,7 +18,7 @@
 					<div class="page-header-content header-elements-md-inline">
 						<div class="page-title d-flex">
 							<h4><span class="font-weight-semibold">OpenDCS</span> - Engineering Units</h4>
-							<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
+							<a href="#" class="header-elements-toggle text-default d-md-none"><i class="bi bi-three-dots-vertical"></i></a>
 						</div>
 					</div>  
 				</div> <!-- /page header -->
@@ -57,12 +57,10 @@
 		</div> <!-- /page content -->
 	</body>
 	
-	<jsp:include page="/resources/jsp/includes/decodes.jsp" /> 
-	
-<script src="/webjars/switchery/switchery.js"></script>
-<script src="/webjars/bootstrap-switch/js/bootstrap-switch.min.js"></script>
-<script src="/webjars/uniform/jquery.uniform.min.js"></script>
-	<script src="../resources/js/datatables/helpers.js"></script>
+	<jsp:include page="/resources/jsp/includes/decodes.jsp" />
+
+
+<script src="../resources/js/datatables/helpers.js"></script>
 	<script src="../resources/js/lib/dom_utilities.js"></script>
 	<script src="../resources/js/lib/object_utilities.js"></script>
 	<script src="../resources/js/lib/date_utilities.js"></script>
diff --git a/opendcs-web-client/src/main/webapp/enumerations.jsp b/opendcs-web-client/src/main/webapp/enumerations.jsp
index cad1b9d9b..769004ccf 100644
--- a/opendcs-web-client/src/main/webapp/enumerations.jsp
+++ b/opendcs-web-client/src/main/webapp/enumerations.jsp
@@ -18,7 +18,7 @@
 					<div class="page-header-content header-elements-md-inline">
 						<div class="page-title d-flex">
 							<h4><span class="font-weight-semibold">OpenDCS</span> - Enumerations</h4>
-							<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
+							<a href="#" class="header-elements-toggle text-default d-md-none"><i class="bi bi-three-dots-vertical"></i></a>
 						</div>
 					</div>  
 				</div> <!-- /page header -->
@@ -65,12 +65,10 @@
 	
 	
 	
-	<jsp:include page="/resources/jsp/includes/decodes.jsp" /> 
-	
-<script src="/webjars/switchery/switchery.js"></script>
-<script src="/webjars/bootstrap-switch/js/bootstrap-switch.min.js"></script>
-<script src="/webjars/uniform/jquery.uniform.min.js"></script>
-	<script src="../resources/js/datatables/helpers.js"></script>
+	<jsp:include page="/resources/jsp/includes/decodes.jsp" />
+
+
+<script src="../resources/js/datatables/helpers.js"></script>
 	<script src="../resources/js/lib/dom_utilities.js"></script>
 	<script src="../resources/js/lib/object_utilities.js"></script>
 	<script src="../resources/js/lib/date_utilities.js"></script>
diff --git a/opendcs-web-client/src/main/webapp/eu_conversions.jsp b/opendcs-web-client/src/main/webapp/eu_conversions.jsp
index 8be03b3db..a8be8decf 100644
--- a/opendcs-web-client/src/main/webapp/eu_conversions.jsp
+++ b/opendcs-web-client/src/main/webapp/eu_conversions.jsp
@@ -18,7 +18,7 @@
 					<div class="page-header-content header-elements-md-inline">
 						<div class="page-title d-flex">
 							<h4><span class="font-weight-semibold">OpenDCS</span> - Engineering Unit Conversions</h4>
-							<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
+							<a href="#" class="header-elements-toggle text-default d-md-none"><i class="bi bi-three-dots-vertical"></i></a>
 						</div>
 					</div>  
 				</div> <!-- /page header -->
@@ -32,7 +32,7 @@
 		                    	<button type="button" class="btn btn-success float-right" id="saveButton">Save</button>
 		                    </div>
 						</div>
-						<table id="mainTable" class="table table-hover datatable-responsive  w-100">
+						<table id="mainTable" class="table table-hover datatable-responsive w-100">
 							<caption class="captionTitleCenter">Engineering Unit Conversions
 								<button class="btn btn-secondary float-right captionButton mr-3" id="addButton">+</button>
 							</caption>
@@ -62,12 +62,10 @@
 		</div> <!-- /page content -->
 	</body>
 	
-	<jsp:include page="/resources/jsp/includes/decodes.jsp" /> 
-	
-<script src="/webjars/switchery/switchery.js"></script>
-<script src="/webjars/bootstrap-switch/js/bootstrap-switch.min.js"></script>
-<script src="/webjars/uniform/jquery.uniform.min.js"></script>
-	<script src="../resources/js/datatables/helpers.js"></script>
+	<jsp:include page="/resources/jsp/includes/decodes.jsp" />
+
+
+<script src="../resources/js/datatables/helpers.js"></script>
 	<script src="../resources/js/lib/dom_utilities.js"></script>
 	<script src="../resources/js/lib/object_utilities.js"></script>
 	<script src="../resources/js/lib/opendcs_utilities.js"></script>
diff --git a/opendcs-web-client/src/main/webapp/login.jsp b/opendcs-web-client/src/main/webapp/login.jsp
index fb9a654da..db39ad90c 100644
--- a/opendcs-web-client/src/main/webapp/login.jsp
+++ b/opendcs-web-client/src/main/webapp/login.jsp
@@ -17,6 +17,7 @@
 
 	<body class="navbar-top">
 
+		<jsp:include page="/resources/jsp/menus/decodes/main.jsp" />   
 
    		<!-- Page content -->
    		<div class="page-content">
@@ -30,8 +31,8 @@
 				<div class="page-header page-header-light">
 				    <div class="page-header-content header-elements-md-inline">
 				        <div class="page-title d-flex">
-				            <h4><i class="icon-arrow-left52 mr-2"></i> <span class="font-weight-semibold">OpenDCS Web Client</span> - Login</h4>
-				            <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
+				            <h4><i class="bi bi-arrow-left me-2"></i> <span class="font-weight-semibold">OpenDCS Web Client</span> - Login</h4>
+				            <a href="#" class="header-elements-toggle text-default d-md-none"><i class="bi bi-three-dots-vertical"></i></a>
 				        </div>
 				    </div>  
 				</div>
diff --git a/opendcs-web-client/src/main/webapp/netlist.jsp b/opendcs-web-client/src/main/webapp/netlist.jsp
index 10d690800..e44aef84e 100644
--- a/opendcs-web-client/src/main/webapp/netlist.jsp
+++ b/opendcs-web-client/src/main/webapp/netlist.jsp
@@ -12,8 +12,8 @@
 				<div class="page-header page-header-light">
 				    <div class="page-header-content header-elements-md-inline">
 				        <div class="page-title d-flex">
-				            <h4><i class="icon-arrow-left52 mr-2"></i> <span class="font-weight-semibold">OpenDCS</span> - Netlists</h4>
-				            <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
+				            <h4><i class="bi bi-arrow-left mr-2"></i> <span class="font-weight-semibold">OpenDCS</span> - Netlists</h4>
+				            <a href="#" class="header-elements-toggle text-default d-md-none"><i class="bi bi-three-dots-vertical"></i></a>
 				        </div>
 				    </div>  
 				</div>
@@ -49,7 +49,7 @@
 	    <!-- /page content -->
 	</body>
 	 <!-- Netlist modal -->
-	<div id="modal_netlist" class="modal fade" tabindex="-1" data-keyboard="false" data-backdrop="static">
+	<div id="modal_netlist" class="modal fade" tabindex="-1" data-bs-keyboard="false" data-bs-backdrop="static">
 	    <div class="modal-dialog modal-dialog-scrollable opendcs-modal-90">
 	        <div class="modal-content h-100">
 	            <div class="modal-header opendcs-modal-header-medium bg-secondary">
@@ -94,8 +94,7 @@
 	                </div>
 	            </div>
 	            <div class="modal-footer">
-	                <!-- <button type="button" class="btn btn-danger  mr-auto" id="deleteNetlistModalButton">Delete</button> -->
-	                <button type="button" class="btn btn-secondary" id="cancelNetlistModalButton" data-dismiss="modal">Cancel</button>
+	                <button type="button" class="btn btn-secondary" id="cancelNetlistModalButton" data-bs-dismiss="modal">Cancel</button>
 	                <button type="button" class="btn btn-success" id="saveNetlistModalButton">Save</button>
 	            </div>
 	        </div>
diff --git a/opendcs-web-client/src/main/webapp/platforms.jsp b/opendcs-web-client/src/main/webapp/platforms.jsp
index f1cb5eae0..fc5f2313b 100644
--- a/opendcs-web-client/src/main/webapp/platforms.jsp
+++ b/opendcs-web-client/src/main/webapp/platforms.jsp
@@ -21,7 +21,7 @@
 							<span class="font-weight-semibold">OpenDCS</span> - Platforms
 						</h4>
 						<a href="#" class="header-elements-toggle text-default d-md-none"><i
-							class="icon-more"></i></a>
+							class="bi bi-three-dots-vertical"></i></a>
 					</div>
 				</div>
 			</div>
@@ -67,7 +67,7 @@
 
 <!-- Platform modal -->
 <div id="modal_platform" class="modal fade" tabindex="-1"
-	data-keyboard="false" data-backdrop="static">
+	data-bs-keyboard="false" data-bs-backdrop="static">
 	<div class="modal-dialog modal-dialog-scrollable opendcs-modal-90"
 		class_old="modal-dialog modal-xl modal-height-xl">
 		<div class="modal-content h-100">
@@ -92,7 +92,7 @@
 										<div class="col-lg-9">
 											<select id="siteSelectbox" name="siteSelectbox"
 												data-placeholder="Select a site"
-												class="form-control select-clear" data-fouc>
+												class="form-control select-clear" >
 												<option></option>
 											</select>
 										</div>
@@ -117,13 +117,13 @@
 										<div class="col-lg-8">
 											<select id="configSelectbox" name="configSelectbox"
 												data-placeholder="Select a config"
-												class="form-control select-clear" data-fouc>
+												class="form-control select-clear" >
 												<option></option>
 											</select>
 										</div>
 										<div class="col-lg-1">
 											<span class="w-100 h-100 pointerCursor"> <i
-												id="editConfig" class="icon-pencil7"></i>
+												id="editConfig" class="bi bi-pencil"></i>
 											</span>
 										</div>
 									</div>
@@ -147,11 +147,11 @@
 
 									<div class="form-group row">
 										<label class="col-form-label col-lg-3">Production</label>
-										<div class="col-lg-9 form-check form-check-switchery"
+										<div class="col-lg-9 form-check form-switch"
 											id="isProductionDiv">
 											<label class="form-check-label"> <input
 												type="checkbox" id="isProduction"
-												class="form-check-input-switchery" data-fouc>
+												class="form-check-input" >
 											</label>
 
 										</div>
@@ -251,10 +251,8 @@
 			</div>
 
 			<div class="modal-footer pt-3">
-				<!--<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>-->
-				<!-- <button type="button" class="btn btn-danger  mr-auto" id="deleteSourceModalButton">Delete</button>-->
 				<button type="button" class="btn btn-secondary"
-					id="cancelSiteModalButton" data-dismiss="modal">Cancel</button>
+					id="cancelSiteModalButton" data-bs-dismiss="modal">Cancel</button>
 				<button type="button" class="btn btn-success"
 					id="savePlatformModalButton">Save</button>
 			</div>
@@ -264,7 +262,7 @@
 
 	<!-- Transport Media modal -->
 	<div id="modal_transportmedia" class="modal fade" tabindex="-1"
-		data-keyboard="false" data-backdrop="static">
+		data-bs-keyboard="false" data-bs-backdrop="static">
 		<div
 			class="modal-dialog modal-dialog-scrollable opendcs-modal-tall-narrow">
 			<div class="modal-content h-100">
@@ -288,12 +286,6 @@
 										class="selectpicker form-control">
 									</select>
 								</div>
-								<!-- 
-							<label class="col-form-label col-lg-3">Medium Type</label>
-							<div class="col-lg-9">
-								<input id="mediumTypeTextbox" type="text" class="form-control" required placeholder="Enter The Medium Type.">
-							</div>
-							-->
 							</div>
 							<div class="form-group row mb-2">
 								<label data-mediumtype="data-logger,iridium,other,shef"
@@ -371,18 +363,6 @@
 										class="form-control" required placeholder="(HH:MM:SS)">
 								</div>
 							</div>
-							<!-- 
-							<div class="form-group row mb-2">
-								<label class="col-form-label col-lg-3">Preamble</label>
-								<div class="col-lg-9">
-									<select id="preambleSelectbox" class="selectpicker form-control">
-			                      		<option value="L">Long</option>
-			                      		<option value="S">Short</option>
-			                      		<option value="U">Unknown</option>
-			                        </select>
-								</div>
-							</div>
-							-->
 						</div>
 						<div class="card col-lg-12 p-2 h-100 overflow-auto"
 							data-mediumtype="incoming-tcp,polled-tcp">
@@ -407,12 +387,12 @@
 							</div>
 							<div class="form-group row mb-2">
 								<label class="col-form-label col-lg-3">Do Login</label>
-								<div class="col-lg-9 form-check form-check-switchery"
+								<div class="col-lg-9 form-check form-switch"
 									id="doLoginDiv">
 									<label class="form-check-label"> <input
 										onclick="doLoginClicked(event, this)" type="checkbox"
-										id="doLoginEnabled" class="form-check-input-switchery"
-										data-fouc>
+										id="doLoginEnabled" class="form-check-input"
+										>
 									</label>
 
 								</div>
@@ -522,12 +502,12 @@
 							</div>
 							<div class="form-group row mb-2">
 								<label class="col-form-label col-lg-3">Do Login</label>
-								<div class="col-lg-9 form-check form-check-switchery"
+								<div class="col-lg-9 form-check form-switch"
 									id="doLoginDiv">
 									<label class="form-check-label"> <input
 										onclick="doLoginClicked(event, this)" type="checkbox"
-										id="doLoginEnabled" class="form-check-input-switchery"
-										data-fouc>
+										id="doLoginEnabled" class="form-check-input"
+										>
 									</label>
 
 								</div>
@@ -550,8 +530,6 @@
 					</div>
 				</div>
 				<div class="modal-footer pt-3">
-					<!--<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>-->
-					<!-- <button type="button" class="btn btn-danger  mr-auto" id="deleteSourceModalButton">Delete</button>-->
 					<button type="button" class="btn btn-secondary"
 						id="transportMediaModalCancel">Cancel</button>
 					<button type="button" class="btn btn-success"
@@ -567,8 +545,8 @@
 
 
 <!-- Platform Sensor modal -->
-<div id="modal_platformsensor" class="modal fade" data-keyboard="false"
-	data-backdrop="static">
+<div id="modal_platformsensor" class="modal fade" data-bs-keyboard="false"
+	data-bs-backdrop="static">
 	<div
 		class="modal-dialog modal-dialog-scrollable opendcs-modal-tall-narrow">
 		<div class="modal-content h-100">
@@ -596,7 +574,7 @@
 							<div class="col-6">
 								<select id="actualSiteSelectbox" name="actualSiteSelectbox"
 									data-placeholder="(inherited)"
-									class="form-control select-clear" data-fouc>
+									class="form-control select-clear" >
 									<option data-site_id="-1"></option>
 								</select>
 							</div>
@@ -643,7 +621,7 @@
 					</div>
 
 				</div>
-				<div class="form-group row  flex-grow-1">
+				<div class="form-group row flex-grow-1">
 					<div class="col-lg-12">
 						<div class="card w-100 h-100">
 							<table id="platformSensorPropertiesTable"
@@ -669,8 +647,6 @@
 				</div>
 			</div>
 			<div class="modal-footer">
-				<!--<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>-->
-				<!-- <button type="button" class="btn btn-danger  mr-auto" id="deleteSourceModalButton">Delete</button>-->
 				<button type="button" class="btn btn-secondary"
 					id="platformSensorModalCancel">Cancel</button>
 				<button type="button" class="btn btn-success"
@@ -681,14 +657,10 @@
 </div>
 <!-- /platform sensor modal -->
 
-
 <jsp:include page="/resources/jsp/includes/decodes.jsp" />
 
-<script src="/webjars/switchery/switchery.js"></script>
-<script src="/webjars/bootstrap-switch/js/bootstrap-switch.min.js"></script>
-<script src="/webjars/uniform/jquery.uniform.min.js"></script>
 <script src="../resources/js/datatables/helpers.js"></script>
-<script src="/webjars/datatables/js/dataTables.min.js"></script>
+<script src="../resources/js/datatables/datatables.js"></script>
 <script src="../resources/js/lib/dom_utilities.js"></script>
 <script src="../resources/js/lib/object_utilities.js"></script>
 <script src="../resources/js/lib/date_utilities.js"></script>
diff --git a/opendcs-web-client/src/main/webapp/presentation.jsp b/opendcs-web-client/src/main/webapp/presentation.jsp
index ab4ed6dab..149da43a5 100644
--- a/opendcs-web-client/src/main/webapp/presentation.jsp
+++ b/opendcs-web-client/src/main/webapp/presentation.jsp
@@ -17,7 +17,7 @@
 								<span class="font-weight-semibold">OpenDCS</span> - Presentation
 							</h4>
 							<a href="#" class="header-elements-toggle text-default d-md-none">
-								<i class="icon-more"></i>
+								<i class="bi bi-three-dots-vertical"></i>
 							</a>
 						</div>
 					</div>
@@ -57,7 +57,7 @@
 	<!-- /theme JS files -->
 	<!-- Presentation modal -->
 	<div id="modal_presentation" class="modal fade" tabindex="-1"
-		data-keyboard="false" data-backdrop="static">
+		data-bs-keyboard="false" data-bs-backdrop="static">
 		<div class="modal-dialog modal-dialog-scrollable opendcs-modal-90">
 			<div class="modal-content">
 				<div class="modal-header bg-secondary">
@@ -84,10 +84,10 @@
 						<div class="text-right col-lg-1">
 							<!-- <input type="checkbox" id="isProductionCheckbox" name="isProductionCheckbox"> -->
 							<!-- <label class="col-form-label col-lg-4">Enabled</label> -->
-							<div class="form-check form-check-switchery"">
+							<div class="form-check form-switch"">
 								<label class="form-check-label"> <input type="checkbox"
-									id="isProductionSwitch" class="form-check-input-switchery"
-									data-fouc>
+									id="isProductionSwitch" class="form-check-input"
+									>
 								</label>
 							</div>
 						</div>
@@ -115,9 +115,8 @@
 					</table>
 				</div>
 				<div class="modal-footer">
-					<!--<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>-->
 					<button type="button" class="btn btn-secondary"
-						id="cancelPresentationModalButton" data-dismiss="modal">Cancel</button>
+						id="cancelPresentationModalButton" data-bs-dismiss="modal">Cancel</button>
 					<button type="button" class="btn btn-success"
 						id="savePresentationModalButton">Save</button>
 				</div>
@@ -126,9 +125,8 @@
 	</div>
 	<!-- /presentation modal -->
 	<jsp:include page="/resources/jsp/includes/decodes.jsp" />
-	<script src="/webjars/switchery/switchery.js"></script>
-	<script src="/webjars/bootstrap-switch/js/bootstrap-switch.min.js"></script>
-	<script src="../resources/js/presentation.js"></script>
+
+<script src="../resources/js/presentation.js"></script>
 	<script src="../resources/js/datatables/helpers.js"></script>
 	<script src="../resources/js/lib/dom_utilities.js"></script>
 </html>
\ No newline at end of file
diff --git a/opendcs-web-client/src/main/webapp/processes.jsp b/opendcs-web-client/src/main/webapp/processes.jsp
index 0a349ee8a..400a19f18 100644
--- a/opendcs-web-client/src/main/webapp/processes.jsp
+++ b/opendcs-web-client/src/main/webapp/processes.jsp
@@ -14,7 +14,7 @@
 					<div class="page-header-content header-elements-md-inline">
 						<div class="page-title d-flex">
 							<h4><span class="font-weight-semibold">OpenDCS</span> - Processes</h4>
-							<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
+							<a href="#" class="header-elements-toggle text-default d-md-none"><i class="bi bi-three-dots-vertical"></i></a>
 						</div>
 					</div>  
 				</div> <!-- /page header -->
@@ -46,7 +46,7 @@
 		</div>
 		<!-- /page content -->
 		<!-- Process modal -->
-		<div id="modal_main" class="modal fade" tabindex="-1" data-keyboard="false" data-backdrop="static">
+		<div id="modal_main" class="modal fade" tabindex="-1" data-bs-keyboard="false" data-bs-backdrop="static">
 			<div class="modal-dialog modal-dialog-scrollable opendcs-modal-90" class_old="modal-dialog modal-xl modal-height-xl">
 				<div class="modal-content h-100">
 					<div class="modal-header bg-secondary">
@@ -79,9 +79,9 @@
 												</div>
 												<label class="col-form-label col-lg-3 text-right">Manual Edit App</label>
 												<div class="col-lg-2 float-left">
-													<div class="form-check form-check-switchery"">
+													<div class="form-check form-switch"">
 														<label class="form-check-label">
-															<input type="checkbox" id="manualEditCheckbox" class="form-check-input-switchery" data-fouc>
+															<input type="checkbox" id="manualEditCheckbox" class="form-check-input" >
 														</label>
 													</div>
 												</div>
@@ -116,7 +116,7 @@
 						</div>
 					</div>
 					<div class="modal-footer pt-3">
-						<button type="button" class="btn btn-secondary" id="cancelButton" data-dismiss="modal">Cancel</button>
+						<button type="button" class="btn btn-secondary" id="cancelButton" data-bs-dismiss="modal">Cancel</button>
 						<button type="button" class="btn btn-success" id="saveButton">Save</button>
 					</div>
 				</div>
@@ -125,10 +125,9 @@
 	</div>
 	<!-- /process modal -->
 	</body>
-	<jsp:include page="/resources/jsp/includes/decodes.jsp" /> 
-	<script src="/webjars/switchery/switchery.js"></script>
-	<script src="/webjars/bootstrap-switch/js/bootstrap-switch.min.js"></script>
-	<script src="/webjars/uniform/jquery.uniform.min.js"></script>
+	<jsp:include page="/resources/jsp/includes/decodes.jsp" />
+
+
 	<script src="../resources/js/datatables/helpers.js"></script>
 	<script src="../resources/js/lib/dom_utilities.js"></script>
 	<script src="../resources/js/lib/object_utilities.js"></script>
diff --git a/opendcs-web-client/src/main/webapp/resources/css/opendcs-shim.css b/opendcs-web-client/src/main/webapp/resources/css/opendcs-shim.css
new file mode 100644
index 000000000..1877c65a3
--- /dev/null
+++ b/opendcs-web-client/src/main/webapp/resources/css/opendcs-shim.css
@@ -0,0 +1,400 @@
+/* === OpenDCS shim v6 (cleaned) ============================================ */
+:root {
+    --navbar-height: 56px;
+    --sidebar-width: 260px;
+    --sidebar-bg: #343a40;
+    --sidebar-card-bg: #f8f9fa;
+    --sidebar-border: rgba(0,0,0,.05);
+}
+
+/* Offset the page for a fixed top navbar */
+body.navbar-top {
+    padding-top: var(--navbar-height);
+}
+
+/* -------------------------- Sidebar -------------------------------------- */
+.sidebar {
+    position: fixed;
+    z-index: 1030;
+    left: 0;
+    top: var(--navbar-height, 56px);
+    width: var(--sidebar-width);
+    height: calc(100vh - var(--navbar-height, 56px));
+    background: var(--sidebar-bg);
+    color: #dee2e6;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+}
+
+.sidebar .sidebar-mobile-toggler {
+    flex: 0 0 auto;
+    background: var(--sidebar-card-bg);
+    border-bottom: 1px solid var(--sidebar-border);
+}
+
+.sidebar .sidebar-content {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    padding-top: 0;
+}
+
+.sidebar .card-sidebar-mobile,
+.sidebar .card.card-sidebar-mobile {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    background: var(--sidebar-card-bg);
+    border: 1px solid var(--sidebar-border);
+    border-radius: 0;
+    margin: 0;
+}
+
+/* Remove the old Limitless toggler strip on desktop */
+@media (min-width: 768px) {
+    .sidebar .sidebar-mobile-toggler {
+        display: none !important;
+    }
+}
+
+/* Hide any leftover sidebar-control link row */
+.sidebar .navbar-nav-link.sidebar-control {
+    display: none !important;
+}
+
+/* Collapsed state */
+body.sidebar-collapsed .sidebar.sidebar-main {
+    width: 56px;
+}
+
+body.sidebar-collapsed .page-content {
+    margin-left: 56px;
+}
+
+body.sidebar-collapsed .nav-sidebar span,
+body.sidebar-collapsed .nav-sidebar .nav-link .nav-text {
+    display: none;
+}
+
+body.sidebar-collapsed .nav-sidebar .nav-link {
+    justify-content: center;
+}
+
+.sidebar-collapsed .sidebar.sidebar-main .nav-link {
+    justify-content: center;
+    padding-left: .5rem;
+    padding-right: .5rem;
+}
+
+.sidebar-collapsed .sidebar.sidebar-main .nav-link .fa,
+.sidebar-collapsed .sidebar.sidebar-main .nav-link i {
+    margin-right: 0;
+}
+
+.sidebar-collapsed .sidebar.sidebar-main .nav-group-sub {
+    display: none !important;
+}
+
+/* --------------------- Page content offset -------------------------------- */
+.page-content {
+    margin-left: 0;
+}
+
+body.has-sidebar:not(.sidebar-collapsed) .page-content {
+    margin-left: var(--sidebar-width);
+}
+
+.content-wrapper {
+    min-height: calc(100vh - var(--navbar-height));
+}
+
+.content {
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+/* Desktop collapse override */
+body.sidebar-collapsed .page-content {
+    margin-left: 0;
+}
+
+/* Mobile overlay behavior */
+@media (max-width: 991.98px) {
+    .sidebar {
+        transform: translateX(-100%);
+        transition: transform .2s ease;
+    }
+    .sidebar.show {
+        transform: translateX(0);
+    }
+    body.has-sidebar .page-content {
+        margin-left: 0;
+    }
+}
+
+/* -------------------------- Nav styling ---------------------------------- */
+.nav-sidebar {
+    padding: .5rem .25rem;
+}
+
+.nav-sidebar .nav-link {
+    color: #495057;
+    display: block;
+    padding: .5rem .75rem;
+    border-radius: .25rem;
+}
+
+.nav-sidebar .nav-link:hover,
+.nav-sidebar .nav-link:focus {
+    background: rgba(0,0,0,.05);
+    color: #212529;
+    text-decoration: none;
+}
+
+.nav-item-open > .nav-link,
+.nav-sidebar .nav-link.active {
+    background: #e9ecef;
+    color: #212529;
+    font-weight: 600;
+}
+
+.nav-group-sub {
+    padding-left: 1rem;
+    margin-top: .25rem;
+}
+
+.nav-item-open > .nav-group-sub {
+    display: block;
+}
+
+.nav-item-closed > .nav-group-sub {
+    display: none;
+}
+
+.nav-item-submenu > .nav-link::after {
+    content: "▸";
+    float: right;
+    opacity: .6;
+    transition: transform .15s ease-in-out;
+}
+
+.nav-item-open > .nav-link::after {
+    transform: rotate(90deg);
+}
+
+/* --------------------- DataTables header/footer --------------------------- */
+.datatable-header,
+.datatable-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .5rem;
+    margin-bottom: .5rem;
+}
+
+.datatable-header .dt-buttons .btn {
+    margin-right: .25rem;
+}
+
+.datatable-header .dataTables_filter {
+    margin-left: auto;
+}
+
+.datatable-footer {
+    justify-content: space-between;
+}
+
+.datatable-footer .dataTables_paginate {
+    margin-left: auto;
+}
+
+.datatable-footer .paginate_button {
+    padding: .25rem .5rem;
+}
+
+/* Inputs + labels inline */
+.dataTables_length label,
+.dataTables_filter label {
+    display: inline-flex;
+    align-items: center;
+    margin-bottom: 0;
+    white-space: nowrap;
+}
+
+.dataTables_length select {
+    display: inline-block;
+    width: auto;
+    margin-left: .25rem;
+}
+
+.dataTables_filter input {
+    display: inline-block;
+    width: 16rem;
+    max-width: 100%;
+    margin-left: .25rem;
+}
+
+/* Anchor menus to right edge inside table cells */
+.dataTables_wrapper td .dropdown-menu {
+    right: 0;
+    left: auto;
+}
+
+/* -------------------- Modal sizing/scroll behavior ------------------------ */
+.modal .dropdown-menu {
+    z-index: 1100;
+}
+
+.modal-dialog.modal-dialog-scrollable {
+    height: calc(100vh - 2rem);
+}
+
+.modal-dialog-scrollable .modal-content {
+    max-height: calc(100vh - 2rem);
+    display: flex;
+}
+
+body.navbar-top .modal-dialog.modal-dialog-scrollable {
+    height: calc(100vh - var(--navbar-height) - 2rem);
+}
+
+body.navbar-top .modal-dialog-scrollable .modal-content {
+    max-height: calc(100vh - var(--navbar-height) - 2rem);
+}
+
+.modal-dialog-scrollable .modal-body {
+    overflow-y: auto;
+}
+
+/* Wide editing modals on desktop */
+@media (min-width: 992px) {
+    .opendcs-modal-90 {
+        max-width: 90vw;
+    }
+}
+
+/* -------------------- Layering & navbar tweaks ---------------------------- */
+.navbar.fixed-top {
+    z-index: 1100;
+}
+
+/* Ensure navbar doesn't clip dropdowns */
+.navbar,
+.navbar .container,
+.navbar .container-fluid {
+    overflow: visible;
+}
+
+/* Taller top bar */
+.navbar {
+    --bs-navbar-padding-y: 0.75rem;
+}
+
+/* Bigger hamburger: larger click target + icon */
+.navbar-toggler {
+    --bs-navbar-toggler-padding-y: .6rem;
+    --bs-navbar-toggler-padding-x: 1rem;
+    --bs-navbar-toggler-font-size: 1.6rem;
+}
+
+/* Optional: keep brand vertically centered */
+.navbar-brand {
+    line-height: 1;
+}
+
+/* ---------------- Bootstrap 5 dropdown compatibility --------------------- */
+/* Let BS5 control visibility via `.show` */
+.dropdown-menu {
+    display: none;
+    position: absolute;
+}
+
+.dropdown-menu.show {
+    display: block;
+}
+
+/* If legacy CSS used `.open > .dropdown-menu { display:block }`, keep non-!important so BS5 still wins */
+.open > .dropdown-menu {
+    display: block;
+}
+
+/* Navbar dropdown layering */
+.navbar .dropdown-menu {
+    z-index: 1100;
+}
+
+/* --------------- Sidebar toggle strip inside the sidebar ------------------ */
+.sidebar .nav-link.sidebar-control.sidebar-main-toggle {
+    display: flex !important;
+    align-items: center;
+    justify-content: flex-end;
+    width: 100%;
+    padding: 0 .75rem;
+    min-height: clamp(44px, calc(var(--navbar-height) * .9), 64px);
+    background: var(--sidebar-card-bg);
+    border-bottom: 1px solid var(--sidebar-border);
+    margin: 0;
+}
+
+.sidebar .nav-link.sidebar-control.sidebar-main-toggle i {
+    font-size: clamp(1.25rem, calc(var(--navbar-height) * .42), 1.75rem);
+    line-height: 1;
+    width: 1.75em;
+    height: 1.75em;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* ----------------- Dark palette for left sidebar -------------------------- */
+.sidebar.sidebar-dark {
+    --sidebar-bg: #263238;
+    --sidebar-card-bg: var(--sidebar-bg);
+    --sidebar-border: rgba(255,255,255,.06);
+    --sidebar-link: #cfd8dc;
+    --sidebar-link-hover-bg: rgba(255,255,255,.06);
+    --sidebar-link-active-bg: rgba(255,255,255,.14);
+    --sidebar-link-active-color: #fff;
+    --sidebar-sub-bg: rgba(255,255,255,.03);
+}
+
+.sidebar.sidebar-dark .sidebar-mobile-toggler,
+.sidebar.sidebar-dark .card.card-sidebar-mobile {
+    background: var(--sidebar-card-bg);
+    border-color: var(--sidebar-border);
+}
+
+.sidebar.sidebar-dark .nav-link.sidebar-control.sidebar-main-toggle {
+    background: var(--sidebar-card-bg);
+    border-bottom: 1px solid var(--sidebar-border);
+    color: var(--sidebar-link);
+}
+
+.sidebar.sidebar-dark .nav-link.sidebar-control.sidebar-main-toggle:hover {
+    background: var(--sidebar-link-hover-bg);
+    color: var(--sidebar-link-active-color);
+}
+
+.sidebar.sidebar-dark .nav-sidebar .nav-link {
+    color: var(--sidebar-link);
+    background: transparent;
+}
+
+.sidebar.sidebar-dark .nav-sidebar .nav-link:hover,
+.sidebar.sidebar-dark .nav-sidebar .nav-link:focus {
+    background: var(--sidebar-link-hover-bg);
+    color: var(--sidebar-link-active-color);
+}
+
+.sidebar.sidebar-dark .nav-item-open > .nav-link,
+.sidebar.sidebar-dark .nav-sidebar .nav-link.active {
+    background: var(--sidebar-link-active-bg);
+    color: var(--sidebar-link-active-color);
+}
+
+.sidebar.sidebar-dark .nav-group-sub {
+    background: var(--sidebar-sub-bg);
+    border-left: 1px solid var(--sidebar-border);
+}
diff --git a/opendcs-web-client/src/main/webapp/resources/js/algorithms.js b/opendcs-web-client/src/main/webapp/resources/js/algorithms.js
index 7b0bb8bdc..c87710285 100644
--- a/opendcs-web-client/src/main/webapp/resources/js/algorithms.js
+++ b/opendcs-web-client/src/main/webapp/resources/js/algorithms.js
@@ -90,12 +90,10 @@ var params = {
  */
 var dtActions = [
     {
-        "type": "delete",
-        "onclick": `deleteOpendcsObject_default(event, this, ${JSON.stringify(params)})`
+        "type": "delete", "params": params
     },
     {
-        "type": "copy",
-        "onclick": "copyRow(event, this)"
+        "type": "copy", "params": {}
     }];
 
 
@@ -470,4 +468,12 @@ function copyRow(event, clickedLink)
     $(clickedLink).closest(".dropdown-menu").toggle();
     event.stopPropagation();
     beginOpenMainTableDialog(clickedLink.closest("tr"), true);
-}
\ No newline at end of file
+}
+
+// Copy row functionality (In the dropdown menu) for this page.
+window.OpenDCS = window.OpenDCS || {};
+OpenDCS.onCopyRow = function(e, el, params) {
+    if (typeof copyRow === "function") {
+        return copyRow(e, el);
+    }
+};
diff --git a/opendcs-web-client/src/main/webapp/resources/js/computations.js b/opendcs-web-client/src/main/webapp/resources/js/computations.js
index 6c5c07ee5..795128a01 100644
--- a/opendcs-web-client/src/main/webapp/resources/js/computations.js
+++ b/opendcs-web-client/src/main/webapp/resources/js/computations.js
@@ -79,12 +79,10 @@ var params = {
  */
 var dtActions = [
     {
-        "type": "delete",
-        "onclick": `deleteOpendcsObject_default(event, this, ${JSON.stringify(params)})`
+        "type": "delete", "params": params
     },
     {
-        "type": "copy",
-        "onclick": "copyRow(event, this)"
+        "type": "copy", "params": {}
     }];
 
 /**
@@ -924,7 +922,7 @@ document.addEventListener('DOMContentLoaded', function() {
             for (var x = 0; x < computationRefs.length; x++)
             {
                 var curRow = computationRefs[x];
-                var isProdDisplay = curRow.enabled ? '<i class="icon-checkmark4 mr-3 icon-1x"></i>' : "";
+                var isProdDisplay = curRow.enabled ? '<i class="icon-checkmark4 me-3 icon-1x"></i>' : "";
                 var newRow = [curRow.computationId, curRow.name, curRow.algorithmName, curRow.processName, isProdDisplay, curRow.description, createActionDropdown(dtActions)];
                 mainTable.row.add(newRow);
                 mainTable.draw(false);
@@ -1137,4 +1135,12 @@ function copyRow(event, clickedLink)
     $(clickedLink).closest(".dropdown-menu").toggle();
     event.stopPropagation();
     beginOpenMainTableDialog(clickedLink.closest("tr"), true);
-}
\ No newline at end of file
+}
+
+// Copy row functionality (In the dropdown menu) for this page.
+window.OpenDCS = window.OpenDCS || {};
+OpenDCS.onCopyRow = function(e, el, params) {
+    if (typeof copyRow === "function") {
+        return copyRow(e, el);
+    }
+};
diff --git a/opendcs-web-client/src/main/webapp/resources/js/configs.js b/opendcs-web-client/src/main/webapp/resources/js/configs.js
index 37eaf4e85..2ac7f4a7c 100644
--- a/opendcs-web-client/src/main/webapp/resources/js/configs.js
+++ b/opendcs-web-client/src/main/webapp/resources/js/configs.js
@@ -227,12 +227,10 @@ function updateConfigsTable(allConfigs)
 
         var actions = [{
             "type": "delete",
-            "onclick_deprecated": "deleteSourceFromRow(event, this)",
-            "onclick": `deleteOpendcsObject_default(event, this, ${JSON.stringify(params)})`
+            "params": params
         },
         {
-            "type": "copy",
-            "onclick": "copyRow(event, this)"
+            "type": "copy", "params": {}
         }];
 
         configsTable.row.add([curConfig.configId, curConfig.name, curConfig.equipmentId, curConfig.numPlatforms, curConfig.description, createActionDropdown(actions)]);
@@ -418,7 +416,7 @@ function openDecodingScriptDialog(rowClicked)
                 "onclick": null
             }];
             clickedScriptData.object.formatStatements.forEach(fs => {
-                var newRow = ['<i class="move-cursor icon-arrow-resize8 mr-3 icon-1x"></i>', fs.label, fs.format, createActionDropdown(actions)];
+                var newRow = ['<i class="move-cursor icon-arrow-resize8 me-3 icon-1x"></i>', fs.label, fs.format, createActionDropdown(actions)];
                 formatStatementsTable.row.add(newRow);
             });
 
@@ -1574,3 +1572,12 @@ function readFileContent(file) {
     })
 }
 
+
+
+// Copy row functionality (In the dropdown menu) for this page.
+window.OpenDCS = window.OpenDCS || {};
+OpenDCS.onCopyRow = function(e, el, params) {
+    if (typeof copyRow === "function") {
+        return copyRow(e, el);
+    }
+};
diff --git a/opendcs-web-client/src/main/webapp/resources/js/datatables/datatables.js b/opendcs-web-client/src/main/webapp/resources/js/datatables/datatables.js
new file mode 100644
index 000000000..09d63c5bb
--- /dev/null
+++ b/opendcs-web-client/src/main/webapp/resources/js/datatables/datatables.js
@@ -0,0 +1,968 @@
+/*
+ *  Copyright 2023 OpenDCS Consortium
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+class OpenDcsDataTable {
+  constructor(domId, properties, inlineOptions, actions, initialize, tableProperties) {
+	  console.log("In super constructor for OpenDcsDataTable.");
+      var defaultTableProperties = {
+                                      cellBorders: true
+                                  };
+	  //Remove # if the passed id starts with one.
+	  if (domId.startsWith("#"))
+	  {
+		  domId = domId.slice(1);
+	  }
+    this.domId = domId;
+    this.jq = $(`#${domId}`);
+    this.tableProperties = tableProperties != undefined && tableProperties != null
+        ? tableProperties : defaultTableProperties;
+    this.properties = properties;
+    
+    this.setInlineOptions(inlineOptions);
+    
+    this.actions = actions;
+    
+    this.dataTable = null;
+    
+    if (initialize)
+	{
+    	this.initDataTable();
+	}
+  }
+  
+  initDataTable() {
+    this.dataTable = this.jq.DataTable(this.properties);
+
+    if (this.tableProperties != null)
+    {
+        if (this.tableProperties.cellBorders)
+        {
+            //Make the cells slightly bordered by adding this class to the table.
+            this.jq.addClass("opendcs-bordered-cells");
+        }
+    }
+    this.jq.closest(".dataTables_wrapper").find("[function=addBlankRow]")
+    	.on("click", {thisObject: this}, function(e) {
+            e.data.thisObject.addBlankRowToDataTable(true);
+    	});	
+  }
+  
+  setInlineOptions(inlineOptions)
+  {
+	  this.inlineOptions = inlineOptions;
+  }
+  
+  setDataTable() {
+	  this.jq.DataTable(this.properties);
+  }
+	
+  addRow(newRow, backgroundColor) {
+	  var tempRow = this.dataTable.row.add(newRow);
+      if (backgroundColor != null)
+      {
+          tempRow.node().style.backgroundColor = backgroundColor;
+      }
+  }
+  
+  clearDataTable(paging) {
+	  if (paging == null)
+	  {
+		  paging = false;
+	  }
+	  this.dataTable.init();
+	  this.dataTable.clear();
+	  this.dataTable.draw(paging);
+  }
+  createActionDropdown(applicableActions)
+  {
+      var actionRefs = {
+              "delete": {
+                  "target": "<!-- DELETE_HTML -->",
+                  "html": '<a <!-- ONCLICK --> class="dropdown-item" data-ignorefocusout="true" action_type="delete_row"><i class="icon-cancel-circle2"></i> Delete</a>',
+                  "default_onclick": "deleteRow_default(event, this)"
+              },
+              "copy": {
+                  "target": "<!-- COPY_HTML -->",
+                  "html": '<a <!-- ONCLICK --> class="dropdown-item" data-ignorefocusout="true" action_type="copy_row"><i class="icon-cancel-circle2"></i> Copy</a>',
+                  "default_onclick": "copyRow_default(event, this)"
+              }
+      };
+
+      var actionDropdownHtml = '<div class="list-icons float-right">'
+          + '<div class="dropleft">'
+          + '    <a href="javascript:void(0)" class="list-icons-item" data-toggle="dropdown" onclick="clickedDropdown(event, this)" data-ignorefocusout="true">'
+          + '    <i class="icon-menu9"></i>'
+          + '</a>'
+          + '<div class="dropdown-menu dropdown-menu-right">'
+          + "<!-- COPY_HTML -->"
+          + "<!-- DELETE_HTML -->"
+          + '</div>'
+          + '</div>'
+          + '</div>';
+
+      applicableActions.forEach(applicAction => {
+
+          var type = applicAction["type"];
+          var onclick = applicAction["onclick"] != null ? applicAction["onclick"] : actionRefs[type]["default_onclick"];
+          actionDropdownHtml = actionDropdownHtml.replace(actionRefs[type]["target"], actionRefs[type]["html"].replace("<!-- ONCLICK -->", `onclick='${onclick}'`));
+      });
+
+      return actionDropdownHtml;
+  }
+
+  addBlankRowToDataTable(redraw, dragIcon)
+  {
+	  console.log("Adding blank row to datatable.");
+      var numCols = this.dataTable.columns().nodes().length;
+      var emptyRow = new Array(numCols);
+      emptyRow.fill("");
+      if (this.actions != null)
+      {
+          emptyRow[numCols-1] = createActionDropdown(this.actions);
+      }
+      if (dragIcon != null)
+      {
+          emptyRow[0] = '<i class="move-cursor icon-arrow-resize8 mr-3 icon-1x"></i>';
+      }
+      //Add green row, signifying new row to be added to table..
+      this.addRow(emptyRow, "#c4ffc9");
+      if (redraw)
+      {
+    	  this.dataTable.draw();
+      }
+      if (this.inlineOptions != null)
+      {
+          this.makeTableInline();
+      }
+  }
+  
+  getNonDeletedRowData()
+  {
+      var data = this.dataTable.data();
+      var returnRows = [];
+      for (var x = 0; x < data.length; x++)
+      {
+          var deleteAttr = $(this.dataTable.row(x).node()).attr("delete");
+          if (deleteAttr == null || deleteAttr.toLowerCase() != "true")
+          {
+              returnRows.push(data[x]);
+          }
+      }
+      return returnRows;
+  }
+  
+
+  getDataTableScrollHeight(spacingBottomPercentage)
+  {
+      var cardHeight = this.jq.closest(".card").height();
+      var spacingBottom = cardHeight * spacingBottomPercentage/100;
+      var wrapper = this.jq.closest("#" + this.jq.attr("id") + "_wrapper");
+      var tableHeight = this.jq.height();
+      var tableHeaderHeight = wrapper.find(".dataTables_scrollHead").height();
+      var tableButtonsHeight = wrapper.find(".dt-buttons").length > 0 ? wrapper.find(".dt-buttons").height() : 0;
+      
+      var scrollHeight = cardHeight - tableHeaderHeight - tableButtonsHeight - spacingBottom;
+      return scrollHeight;
+  }
+
+  getDatatableObjects()
+  {
+      var jqTable = this.jq;
+      var dt = this.dataTable;
+      dt.draw();
+
+      var wrapper = jqTable.closest(".dataTables_wrapper");
+
+      var parentDiv = wrapper.parent();
+      var buttons = wrapper.find(".dt-buttons");
+      var header = wrapper.find(".dataTables_scrollHead");
+      var body = wrapper.find(".dataTables_scrollBody");
+      var footer = wrapper.find(".dataTables_scrollFoot");
+
+      var objects = {
+              "parent_div": parentDiv,
+              "wrapper": wrapper,
+              "buttons": buttons,
+              "header": header,
+              "body": body,
+              "footer": footer
+      }
+      return objects;
+  }
+  
+  updateDataTableScroll(fillPercentage)
+  {
+
+	var jqTable = this.jq;
+    var dt = this.dataTable;
+    dt.draw();
+
+    var jqWrapper = jqTable.closest(".dataTables_wrapper");
+    var wrapperChildren = jqWrapper.children();
+
+    var wrapperParent = jqWrapper.parent();
+    var dtScrollBody = null;
+    var allObjects = [];
+    var totalOuterHeight = 0;
+    
+    //Trying to separate out all dom objects other than the scroll body.  This
+    //way, we can update the size of the scroll body based on the size/resize
+    //of the window.
+    for (var x = 0; x < wrapperChildren.length; x++)
+	{
+    	var curChild = $(wrapperChildren[x]);
+    	if (curChild.hasClass("dataTables_scroll"))
+		{
+    		var scrollChildren = curChild.children();
+    		for (var y = 0; y < scrollChildren.length;  y++)
+			{
+    			var curScrollChild = $(scrollChildren[y]);
+    			if (curScrollChild.hasClass("dataTables_scrollBody"))
+				{
+    				dtScrollBody = curScrollChild;
+				}
+    			else
+				{
+    				//add the non scroll body to the all other objects.
+    	    		allObjects.push(curScrollChild);
+        			totalOuterHeight += curScrollChild.outerHeight();
+				}
+			}
+    		
+		}
+    	else
+		{
+    		//add the non scroll body to the all other objects.
+    		totalOuterHeight += curChild.outerHeight();
+    		allObjects.push(curChild);
+		}
+	}
+
+    if (dtScrollBody == null)
+	{
+    	console.log("No scroll body for table.  Exiting now.");
+    	return;
+	}
+
+    //This is height instead of outerHeight to account for margins and padding.
+    var parentHeight = wrapperParent.height(); 
+    var dtScrollBodyHeight = dtScrollBody.height();
+    var dtScrollBodyOuterHeight = dtScrollBody.outerHeight();
+    var dtScrollBodyDiff = dtScrollBodyOuterHeight - dtScrollBodyHeight;
+    var sbNewHeight = parentHeight-totalOuterHeight;
+    
+    if (jqTable.attr("id") == "propertiesTable")
+	{
+    	console.log("*********PropertiesTable**************");
+        console.log("ParentHeight: " + parentHeight);
+        console.log("TotalOuterHeight: " + totalOuterHeight);
+    	console.log("*********PropertiesTable**************");
+        
+	}
+    if (totalOuterHeight > parentHeight)
+	{
+    	dtScrollBody.css("max-height", sbNewHeight);
+    	dtScrollBody.css("max-height", sbNewHeight);
+    	
+	}
+    else if (totalOuterHeight < parentHeight)
+	{
+    	dtScrollBody.css("max-height", sbNewHeight);
+    	dtScrollBody.css("max-height", sbNewHeight);
+	}
+    dt.draw();
+}
+ 
+  makeTableInline(runAtEndClick, runAtEndFocusOut)
+  {
+      var jqTableId = `#${this.domId}`;
+      $(jqTableId + ' tbody tr td').off('click');
+      $(jqTableId + ' tbody tr td').on('click', {thisObject: this}, function(e) {
+          //These rows are not editable.
+          var clickedWidth = $(this).width();
+
+          var clickable = $(this).attr("clickable");
+          if (clickable != null && clickable.toLowerCase() == "false")
+          {
+              //Cell not clickable, returning early.
+              return;
+          }
+          var targetTable = $(jqTableId).DataTable();
+          var clickedCell = targetTable.cell(this);
+          var colOptions = null;
+          if (clickedCell.length > 0)
+          {
+              var colNumOld = clickedCell[0][0].column;
+              var rowNum = clickedCell[0][0].row;
+              
+              var dtColNum = targetTable.column(this).index(); //This is the col num including hidden columns.
+              var colNum = getRealColumnIndex(this); //This is to take into account invisible columns;
+              
+              if (!$(jqTableId).hasClass("editing")) {
+                  var data = targetTable.row(rowNum).data()
+                  var $row = $(this.parentElement);
+                  var thisPosition = $row.find("td:nth-child(" + (colNum + 1).toString() + ")");
+                  var thisPositionText = thisPosition.text();
+
+
+                  var inputId = "Position_" + rowNum.toString() + "_" + colNum.toString();
+                  var inputId2 = "Position2_" + rowNum.toString() + "_" + colNum.toString();
+                  var inputId3 = "Position3_" + rowNum.toString() + "_" + colNum.toString();
+
+                  var forcedParam = $(this).attr("forced_propspec_type");
+                  if (forcedParam != null)
+                  {
+                      $(jqTableId).addClass("editing");
+                      var splitForcedParam = forcedParam.split(":");
+                      if (splitForcedParam.length > 1)
+                      {
+                          forcedParam = splitForcedParam[0];
+                      }
+                      if (forcedParam == "b")
+                      {
+                          var curVal = this.textContent.toLowerCase();
+                          var selectHtml = `<select style="width:${clickedWidth}" id="${inputId}">`;
+                          ["", "true", "false"].forEach(d => {
+                              var selectedFlag = "";
+                              if (curVal == d.toLowerCase())
+                              {
+                                  selectedFlag = 'selected';
+                              }
+                              selectHtml += `<option value="${d}" ${selectedFlag}>${d}</option>`;
+                          })
+                          selectHtml += "</select>";
+                          thisPosition.empty().append($(selectHtml));
+                      }
+                      else if (forcedParam == "e" && splitForcedParam.length > 1)
+                      {
+                          var curVal = this.textContent.toLowerCase();
+                          var selectType = splitForcedParam[1].toLowerCase();
+                          if (selectType == "season")
+                          {
+                              var sn = propSpecsMeta["seasons"].map(s => s.abbr);
+                              var selectHtml = `<select id="${inputId}"><option></option>`;
+                              sn.forEach(s => {
+                                  var selectedFlag = "";
+                                  if (curVal == s.toLowerCase())
+                                  {
+                                      selectedFlag = 'selected';
+                                  }
+                                  selectHtml += `<option value="${s}" ${selectedFlag}>${s}</option>`;
+                              })
+                              selectHtml += "</select>";
+                              thisPosition.empty().append($(selectHtml));
+                          }
+                          else if (selectType == "transportmediumtype")
+                          {
+                              var curVal = this.textContent.toLowerCase();
+                              var tmTypes = Object.keys(propSpecsMeta["transportMediumTypes"]);
+                              var selectHtml = `<select id="${inputId}"><option></option>`;
+                              tmTypes.forEach(tmt => {
+                                  var selectedFlag = "";
+                                  if (curVal == tmt.toLowerCase())
+                                  {
+                                      selectedFlag = 'selected';
+                                  }
+                                  selectHtml += `<option value="${tmt}" ${selectedFlag}>${tmt}</option>`;
+                              })
+                              selectHtml += "</select>";
+                              thisPosition.empty().append($(selectHtml));
+                          }
+
+                      }
+                      else if (forcedParam == "i")
+                      {
+                          thisPosition.empty().append($("<input></input>", {
+                              "id": inputId,
+                              "type": "number"
+                          }));
+                          $("#" + inputId).val(thisPositionText);
+                      }
+                      else if (forcedParam == "s" || forcedParam == "h" || forcedParam == "n" || forcedParam == "f" || forcedParam == "f")
+                      {
+                          thisPosition.empty().append($("<input></input>", {
+                              "id": inputId
+                          }));
+                          $("#" + inputId).val(thisPositionText);
+                      }
+                  }
+                  else
+                  {
+                      for (var x = 0; x < e.data.thisObject.inlineOptions.columnDefs.length; x++)
+                      {
+                          colOptions = e.data.thisObject.inlineOptions.columnDefs[x];
+                          if (colOptions.targets.indexOf(dtColNum) != -1)
+                          {
+                              $(jqTableId).addClass("editing");
+                              if (colOptions.type == "input")
+                              {
+                                  thisPosition.empty().append($("<input></input>", {
+                                      "id": inputId
+                                  }));
+                                  $("#" + inputId).val(thisPositionText);
+                                  break;
+                              }
+                              else if (colOptions.type == "number")
+                              {
+                                  thisPosition.empty().append($("<input></input>", {
+                                      "id": inputId,
+                                      "type": "number"
+                                  }));
+                                  $("#" + inputId).val(thisPositionText);
+                                  break;
+                              }
+                              else if (colOptions.type == "textarea")
+                              {
+                                  thisPosition.empty().append($('<div class="form-group">' +
+                                          '<textarea class="form-control" id="' + inputId + '"></textarea>' +
+                                  '</div>'));
+                                  $("#" + inputId).val(thisPositionText);
+                                  break;
+                              }
+                              else if (colOptions.type == "select")
+                              {
+                                  var curVal = this.textContent.toLowerCase();
+                                  var selectHtml = `<select id="${inputId}">`;
+                                  colOptions.data.forEach(d => {
+                                      var selectedFlag = "";
+                                      if (curVal == d.toLowerCase())
+                                      {
+                                          selectedFlag = 'selected';
+                                      }
+                                      selectHtml += `<option value="${d}" ${selectedFlag}>${d}</option>`;
+                                  })
+                                  selectHtml += "</select>";
+
+                                  thisPosition.empty().append($(selectHtml));
+                                  break;
+                              }
+                              else if (colOptions.type == "searchable_select")
+                              {
+                                  var optionGroupHtml = "";
+                                  for (var x = 0; x < colOptions.data.length; x++)
+                                  {
+                                      var fullName = colOptions.data[x];
+                                      var splitName = fullName.split("-");
+                                      var baseName = `${splitName[0]}-*`;
+                                      var subName = splitName.length > 1 ? `*-${splitName[1]}` : null;
+                                      var optionHtml = `<optgroup label="${fullName}">
+                                          <option value="${fullName}">${fullName}</option>
+                                          <option value="${baseName}">${baseName}</option>`
+                                          optionHtml += subName != null ? `<option value=${subName}>${subName}</option>` : "";
+                                      optionHtml += `</optgroup>`;
+                                      optionGroupHtml += optionHtml;
+                                  }
+
+                                  var objHtml = `
+                                      <div data-type="special_select" id="${inputId}">
+                                      <select class="form-control select-search" data-fouc>
+
+                                      ${optionGroupHtml}
+
+                                      </select>
+                                      </div>`;
+                                  thisPosition.empty().append($(objHtml));
+                                  $(`#${inputId}`).find("select").select2({
+                                      matcher(params, data) {
+                                          const originalMatcher = $.fn.select2.defaults.defaults.matcher;
+                                          const result = originalMatcher(params, data);
+
+                                          if (
+                                                  result &&
+                                                  data.children &&
+                                                  result.children &&
+                                                  data.children.length
+                                          ) {
+                                              if (
+                                                      data.children.length !== result.children.length &&
+                                                      data.text.toLowerCase().includes(params.term.toLowerCase())
+                                              ) {
+                                                  result.children = data.children;
+                                              }
+                                              return result;
+                                          }
+
+                                          return null;
+                                      },
+                                  });
+                                  $(`#${inputId}`).find("select").val(thisPositionText).trigger("change");
+                                  $(`#${inputId}`).closest("div").children().on("mousedown", function(e) {
+                                      var select = $(this).closest("div");
+                                      event.preventDefault();
+                                      var curTs = new Date();
+                                      var tsString = curTs.toISOString();
+                                      select.get(0).dataset["time_clicked"] = tsString;
+                                  });
+                                  break;
+                              }
+                              else if (colOptions.type == "editable_select")
+                              {
+                                  var curVal = this.textContent.toLowerCase();
+                                  var selectHtml = `<div data-type="special_select" id="${inputId}" class="select-editable"><select id="${inputId3}" onchange="this.nextElementSibling.value=this.value">`;
+                                  colOptions.data.forEach(d => {
+                                      var selectedFlag = "";
+                                      if (curVal == d.toLowerCase())
+                                      {
+                                          selectedFlag = 'selected';
+                                      }
+                                      selectHtml += `<option value="${d}" ${selectedFlag}>${d}</option>`;
+                                  })
+                                  selectHtml += `</select>
+                                      <input id="${inputId2}" type="text" name="format" value="" />
+                                      </div>`;
+                                  thisPosition.empty().append($(selectHtml));
+
+
+
+                                  var actualInput = $("#" + inputId2);
+                                  $(thisPosition.find("select")).trigger("change");
+                                  $(thisPosition.find("select")).focus();
+
+                                  var selectInput = $("#" + inputId3);
+
+                                  actualInput.val(thisPositionText);
+                                  actualInput.on("mousedown", function(e) {
+                                      var curTs = new Date();
+                                      var tsString = curTs.toISOString();
+                                      $(this).closest("div")[0].dataset["time_clicked"] = tsString;
+                                  });
+                                  selectInput.on("mousedown", function(e) {
+                                      var curTs = new Date();
+                                      var tsString = curTs.toISOString();
+                                      $(this).closest("div")[0].dataset["time_clicked"] = tsString;
+                                  });
+                                  break;
+                              }
+                              else
+                              {
+                                  $('#' + tableId).removeClass("editing");
+                                  break;
+                              }
+                          }
+                      }
+                  }
+
+                  //selects the new editable field and opens it by default for 
+                  //the user.
+                  if ((colOptions != null && colOptions.type != "searchable_select")
+                		  || forcedParam != null)
+                  {
+                      $("#" + inputId).focus();
+                      $("#" + inputId).find("select").focus(); //This is to focus on the editable_select option.
+                      $("#" + inputId).select();
+                      $("#" + inputId).keypress(function(event) {
+                          var keycode = (event.keyCode ? event.keyCode : event.which);
+                          if(keycode == '13'){
+                              this.blur();
+                              $("#" + this.id).trigger("focusout");
+                          }
+                      });
+                  }
+                  $("#" + inputId).data("prev_val", thisPositionText);
+
+
+              }
+
+          }
+
+          if (runAtEndClick != null)
+          {
+              runAtEndClick(this);
+          }
+      });
+      
+      $(jqTableId + ' tbody tr td').off('focusout');
+      $(jqTableId + ' tbody tr td').on("focusout", {thisObject: this}, function(e) {
+          var targetTable = $(jqTableId).DataTable();
+          var visibleColumns = targetTable.columns().visible();
+          var clickedCell = targetTable.cell(this);
+          var ignoreFocusOut = event.path[0].dataset["ignorefocusout"];
+
+          var editableSelectDiv = $(this).find("[data-type=special_select]");
+          var editableInput = null;
+          var keepFocus = false;
+          if (editableSelectDiv.length > 0)
+          {
+              var timeClickedString = editableSelectDiv.data("time_clicked");
+              if (timeClickedString != null)
+              {
+                  var timeClicked = new Date(timeClickedString);
+                  var curDateTs = new Date();
+                  //If you this check is performed within 0.140 seconds of the 
+                  //click on the text box, it will keep the box open.
+                  if ((curDateTs - timeClicked) <= 250) 
+                  {
+                      keepFocus = true;
+                  }
+              }
+          }
+          if ((ignoreFocusOut != null && ignoreFocusOut.toLowerCase() == "true") || keepFocus)
+          {
+              return;
+          }
+          if (clickedCell.length > 0)
+          {
+              var colNumOld = clickedCell[0][0].column;
+              var rowNum = clickedCell[0][0].row;
+              
+              var dtColNum = targetTable.column(this).index(); //This is the col num including hidden columns.
+              var colNum = getRealColumnIndex(this); //This is to take into account invisible columns;
+              
+              var inputId = "Position_" + rowNum.toString() + "_" + colNum.toString();
+              var thisVal = $("#" + inputId).val();
+              if (editableSelectDiv.length > 0)
+              {
+                  var selectSearchVal = editableSelectDiv.find(".select-search").val();
+                  var editSearchVal = editableSelectDiv.find("input").val();
+                  thisVal = selectSearchVal != null ? selectSearchVal : editSearchVal; 
+              }
+              var previousVal = $("#" + inputId).data("prev_val");
+              var $this = $(this);
+              var $thisCell = targetTable.cell($this);
+              var tempData = targetTable.row($this.closest("tr")).data().slice();
+              tempData[dtColNum] = thisVal;
+              targetTable.row($this.closest("tr")).data(tempData);
+              /**
+               * insted of updateing dom via jQuery use DataTable's Method to 
+               * update dom object and 
+               * also not forget to draw() your changes.
+               *
+               * $this.parent("td").empty().text($this.val());
+               *
+               **/
+              $thisCell.data(thisVal).draw();
+              for (var x = 0; x < e.data.thisObject.inlineOptions.columnDefs.length; x++)
+              {
+                  var def = e.data.thisObject.inlineOptions.columnDefs[x];
+                  if (def.targets.indexOf(dtColNum) != -1)
+                  {
+                      if (previousVal != thisVal)
+                      {
+                          if ("bgcolor" in def && "change" in def["bgcolor"] && def["bgcolor"]["change"] != null)
+                          {
+                              var bgColor = def["bgcolor"]["change"];
+                              $thisCell.node().style.backgroundColor = bgColor;                              
+                          }
+                          $thisCell.node().dataset["modified"] = true;
+                      }
+                  }
+              }
+              $(jqTableId).removeClass("editing");
+          }
+          if (runAtEndFocusOut != null)
+          {
+              runAtEndFocusOut(this);
+          }
+      });
+  }
+}
+
+
+class BasicTable extends OpenDcsDataTable {
+  constructor(domId, initialize, tableProperties) {
+	  console.log("In constructor for Child Class Basic Table.");
+	  var defaultProps = {
+		        "searching": false,
+		        "ordering": false,
+		        "paging": false,
+		        "info": false,
+		        "scrollCollapse": true,
+		        "scrollY": 150,
+		        "autoWidth": true,
+		        "dom": 'flrtip',
+		        "buttons": []
+		    };
+	  var defaultInlineOptions = {
+	          "columnDefs": [
+	              {
+	                  "targets": [0,1],
+	                  "type": "input",
+	                  "data": null,
+	                  "bgcolor": {
+	                      "change": "#c4eeff"
+	                  }
+	              }
+	          ]
+	      };
+	  var defaultActions = [{
+          "type": "delete",
+          "onclick": null
+      }];
+	  super(domId, defaultProps, defaultInlineOptions, 
+			  defaultActions, initialize, tableProperties);
+  }
+}
+
+class PropertiesTable extends OpenDcsDataTable {
+  constructor(domId, propspecClasses, initialize, tableProperties) {
+	  console.log("In constructor for Child Class Properties Table.");
+	  var defaultProps = {
+	          "searching": false,
+	          "ordering": false,
+	          "paging": false,
+	          "info": false,
+	          "dom": 'flrtip',
+	          "scrollCollapse": true,
+	          "autoWidth": true,
+	          "scrollY": 150,
+	          "buttons": []
+
+	      };
+	  var defaultInlineOptions = {
+	          "columnDefs": [
+	              {
+	                  "targets": [0,1],
+	                  "type": "input",
+	                  "data": null,
+	                  "bgcolor": {
+	                      "change": "#c4eeff"
+	                  }
+	              }
+	          ]
+	      };
+	  var defaultActions = [{
+          "type": "delete",
+          "onclick": null
+      }];
+	  super(domId, defaultProps, defaultInlineOptions, 
+			  defaultActions, initialize, tableProperties);
+
+	  this.propSpecMeta = {};
+	  if (propspecClasses != null)
+	  {
+		  var apiData = new ApiData();
+		  var thisClass = this;
+		  apiData.getPropspecs(propspecClasses, 
+				  function(apiClass, response) {
+			  			console.log("At Start.");
+		  			}, 
+		  			function(apiClass, response) {
+		  				console.log("At End.");
+		  				var combinedPropSpecs = [];
+		  				for (var key in apiClass.propspecs)
+	  					{
+		  					var ps = apiClass.propspecs[key];
+		  					if (ps.data != null)
+	  						{
+		  						combinedPropSpecs = combinedPropSpecs.concat(ps.data);
+	  						}
+	  					}
+		  				thisClass.apiData = apiClass;
+		  				thisClass.setPropspecs(combinedPropSpecs);
+		  			});
+	  }
+  }
+  
+  setPropspecs(propspecs)
+  {
+	  this.propspecs = propspecs;
+	    if (propspecs == null)
+	    {
+	        propspecs = [];
+	    }
+	    for (var propSpecObj of propspecs)
+	    {
+	        this.propSpecMeta[propSpecObj.name] = {
+	                "hover": propSpecObj.description,
+	                "type": propSpecObj.type
+	        }
+	    }
+  }
+  
+  updateProps(propertiesWithValues) {
+	  var rowsWithValues = [];
+	  var rowsWithoutValues = [];
+	  
+	  //Adds propspecs to passed properties object so they will show up in the 
+	  //data table.
+	  if (this.propSpecMeta != null)
+	  {
+		  for (var key in this.propSpecMeta)
+		  {
+			  if (propertiesWithValues[key] == null)
+			  {
+				  propertiesWithValues[key] = "";
+			  }
+		  }
+	  }
+	  
+	  for (var key in propertiesWithValues)
+	    {
+	        var newRow = [key, propertiesWithValues[key], this.createActionDropdown(this.actions)];
+	        if (newRow[1] != "")
+	        {
+	            rowsWithValues.push(newRow);
+	        }
+	        else
+	        {
+	            rowsWithoutValues.push(newRow);
+	        }
+	    }
+	  //This causes the properties with values to go to the top.
+	    for (var x = 0; x < rowsWithValues.length; x++)
+	    {
+	        this.addRow(rowsWithValues[x]);    
+	    }
+	    for (var x = 0; x < rowsWithoutValues.length; x++)
+	    {
+	        this.addRow(rowsWithoutValues[x]);    
+	    }
+	  //Need to draw first so that the "td" elements can be found.
+	    this.dataTable.draw(false); 
+	    if (this.inlineOptions == null)
+	    {
+	        //Prop table inline options null.
+	    }
+
+	    this.makeTableInline();
+	    this.dataTable.draw(false);
+
+
+	    var rowCount = this.dataTable.rows().count();
+	    for (var x = 0; x < rowCount; x++)
+	    {
+	        var rowData = this.dataTable.row(x).data();
+	        var propName = rowData[0];
+	        if (this.propSpecMeta[propName] != null)
+	        {
+	            $(this.dataTable.row(x).node()).attr("title", this.propSpecMeta[propName].hover);
+	            $($(this.dataTable.row(x).node()).find("td")[1]).attr("forced_propspec_type", this.propSpecMeta[propName].type);
+	        }
+	    }
+  }
+}
+
+class ApiData {
+    constructor() {
+        this.data = {};
+        this.propspecs = {}
+    }
+
+    getPropspecs(propspecs, runAtStartOfSuccess, runAtEndOfSuccess)
+    {
+        var thisClass = this;
+        for (var x = 0; x < propspecs.length; x++)
+        {
+            var opendcsApiCall = "propspecs";
+            var propspec = propspecs[x];
+
+            var onSuccess = function(response) {
+            	if (runAtStartOfSuccess != null)
+        		{
+            		runAtStartOfSuccess(thisClass, response);
+        		}
+                const [ , paramString ] = this.url.split( '?' );
+                const urlParams = new URLSearchParams(paramString);
+                var cls = urlParams.get("class");
+                thisClass.propspecs[cls].data = response;
+                thisClass.propspecs[cls].status = "success";
+                thisClass.propspecs[cls].ajaxObject = this;
+            	if (runAtEndOfSuccess != null)
+        		{
+            		runAtEndOfSuccess(thisClass, response);
+        		}
+            };
+            var onError = function(response) {
+                thisClass.propspecs[propspec].status = "error";
+                thisClass.propspecs[propspec].ajaxObject = this;
+            };
+
+            this.propspecs[propspec] = {
+                    "status": "retrieving",
+                    "data": null,
+                    "ajaxObject": null
+            }
+            $.ajax({
+                url: `${window.API_URL}/${opendcsApiCall}`,
+                type: "GET",
+                data: {
+                    "class": propspec
+                },
+                success: onSuccess,
+                error: onError
+            });
+        }
+    }
+
+    //onSuccess will always be run after setting the class data to the response.
+    //It has parameters for thisClass and response.
+    //onError has parameters for thisClass and response.
+    getData(opendcsApiCalls, onSuccess, onError)
+    {
+        var thisClass = this;
+
+        for (var x = 0; x < opendcsApiCalls.length; x++)
+        {
+            var opendcsApiCall = opendcsApiCalls[x];
+            var k = opendcsApiCall;
+
+
+            var fullOnSuccess = function(response) {
+                // Get everything after the `?`
+                const [ , paramString ] = this.url.split( '?' );
+                const urlParams = new URLSearchParams(paramString);
+                var apiCall = urlParams.get("opendcs_api_call");
+                thisClass.data[apiCall].data = response;
+                thisClass.data[apiCall].status = "success";
+                thisClass.data[apiCall].ajaxObject = this;
+                for (var y = 0; y < thisClass.data[apiCall].grouped_api_calls.length; y++)
+                {
+                    var curApiCall = thisClass.data[apiCall].grouped_api_calls[y];
+                    if (thisClass.data[curApiCall].status != "success")
+                    {
+                        console.log(`Still Waiting for API calls to complete.`);
+                        return;
+                    }
+                }
+                if (onSuccess == null)
+                {
+                    //onSuccess was not passed.
+                }
+                else
+                {
+                    onSuccess(thisClass, response);
+                }
+            };
+            var fullOnError = function(response) {
+                thisClass.data[k].status = "error";
+                thisClass.data[k].ajaxObject = this;
+                if (onError == null)
+                {
+                    //onError was not passed.
+                }
+                else
+                {
+                    onError(thisClass, response);
+                }
+            };
+
+            this.data[k] = {
+                    "status": "retrieving",
+                    "data": null,
+                    "grouped_api_calls": opendcsApiCalls,
+                    "onsuccess": fullOnSuccess,
+                    "onError": fullOnError,
+                    "ajaxObject": null
+            }
+            $.ajax({
+                url: `${window.API_URL}/${opendcsApiCall}`,
+                type: "GET",
+                data: {},
+                success: fullOnSuccess,
+                error: fullOnError
+            });
+        }
+    }
+}
\ No newline at end of file
diff --git a/opendcs-web-client/src/main/webapp/resources/js/datatables/helpers.js b/opendcs-web-client/src/main/webapp/resources/js/datatables/helpers.js
index 1e48f5854..3eb1f6192 100644
--- a/opendcs-web-client/src/main/webapp/resources/js/datatables/helpers.js
+++ b/opendcs-web-client/src/main/webapp/resources/js/datatables/helpers.js
@@ -48,6 +48,9 @@ document.addEventListener('DOMContentLoaded', function() {
     });
 
     setPropSpecsMeta();
+    document
+        .querySelectorAll('.dataTables_wrapper [onclick*="clickedDropdown"]')
+        .forEach(el => el.removeAttribute('onclick'));
 });
 
 
@@ -63,43 +66,64 @@ document.addEventListener('DOMContentLoaded', function() {
  *                   ]
  * @returns
  */
-function createActionDropdown(applicableActions)
-{
-    var actionRefs = {
-            "delete": {
-                "target": "<!-- DELETE_HTML -->",
-                "html": '<a <!-- ONCLICK --> class="dropdown-item" data-ignorefocusout="true" action_type="delete_row"><i class="icon-cancel-circle2"></i> Delete</a>',
-                "default_onclick": "deleteRow_default(event, this)"
-            },
-            "copy": {
-                "target": "<!-- COPY_HTML -->",
-                "html": '<a <!-- ONCLICK --> class="dropdown-item" data-ignorefocusout="true" action_type="copy_row"><i class="icon-cancel-circle2"></i> Copy</a>',
-                "default_onclick": "copyRow_default(event, this)"
+
+function createActionDropdown(applicableActions) {
+    // normalize actions array
+    const actions = Array.isArray(applicableActions) ? applicableActions : [];
+
+    function actionItem({ type, onclick, params }) {
+        // prefer data-params (robust), fallback to onclick string/function
+        let attr = '';
+        if (params && typeof params === 'object') {
+            const json = JSON.stringify(params).replace(/"/g, '&quot;'); // safe in HTML
+            attr = `data-params="${json}"`;
+        } else if (onclick) {
+            if (typeof onclick === 'function') {
+                // register function once and call via global registry
+                window.OpenDCS = window.OpenDCS || {};
+                OpenDCS.actionHandlers = OpenDCS.actionHandlers || {};
+                const id = 'h_' + Math.random().toString(36).slice(2);
+                OpenDCS.actionHandlers[id] = onclick;
+                attr = `onclick="OpenDCS.actionHandlers['${id}'](event, this)"`;
+            } else {
+                // string like "deleteRow_default(event, this)"
+                attr = `onclick="${onclick}"`;
             }
-    };
+        } else {
+            // default fallbacks by type
+            const def = type === 'delete'
+                ? `deleteRow_default(event, this)`
+                : `copyRow_default(event, this)`;
+            attr = `onclick="${def}"`;
+        }
 
-    var actionDropdownHtml = '<div class="list-icons float-right">'
-        + '<div class="dropdown">'
-        + '    <a href="javascript:void(0)" class="list-icons-item" data-toggle="dropdown" onclick="clickedDropdown(event, this)" data-ignorefocusout="true">'
-        + '    <i class="icon-menu9"></i>'
-        + '</a>'
-        + '<div class="dropdown-menu dropdown-menu-right">'
-        + "<!-- COPY_HTML -->"
-        + "<!-- DELETE_HTML -->"
-        + '</div>'
-        + '</div>'
-        + '</div>';
-
-    applicableActions.forEach(applicAction => {
-
-        var type = applicAction["type"];
-        var onclick = applicAction["onclick"] != null ? applicAction["onclick"] : actionRefs[type]["default_onclick"];
-        actionDropdownHtml = actionDropdownHtml.replace(actionRefs[type]["target"], actionRefs[type]["html"].replace("<!-- ONCLICK -->", `onclick='${onclick}'`));
-    });
+        const icon = type === 'delete'
+            ? '<i class="bi bi-x-circle"></i> Delete'
+            : '<i class="bi bi-files"></i> Copy';
 
-    return actionDropdownHtml;
+        const act = type === 'delete' ? 'delete_row' : 'copy_row';
+
+        return `<a class="dropdown-item" ${attr} data-ignorefocusout="true" action_type="${act}">${icon}</a>`;
+    }
+
+    const items = actions.map(actionItem).join('');
+
+    return `
+    <div class="list-icons float-end">
+      <div class="dropdown dropstart">
+        <a href="javascript:void(0)" class="list-icons-item dropdown-toggle"
+           data-bs-toggle="dropdown" data-bs-boundary="viewport"
+           aria-haspopup="true" aria-expanded="false">
+          <i class="bi bi-three-dots-vertical"></i>
+        </a>
+        <div class="dropdown-menu dropdown-menu-end">
+          ${items}
+        </div>
+      </div>
+    </div>`;
 }
 
+
 function setPropSpecsMeta()
 {
     //seasonMeta
@@ -153,7 +177,7 @@ function addBlankRowToDataTable(targetTable, redraw, action, inlineOptions, drag
     }
     if (dragIcon != null)
     {
-        emptyRow[0] = '<i class="move-cursor icon-arrow-resize8 mr-3 icon-1x"></i>';
+        emptyRow[0] = '<i class="move-cursor icon-arrow-resize8 me-3 icon-1x"></i>';
     }
     targetDataTable.row.add(emptyRow);
     if (redraw)
@@ -297,6 +321,64 @@ function deleteOpendcsObject_default(event, clickedLink, params)
     event.stopPropagation();
 }
 
+// Delegated handler for Delete action inside DataTables menus
+document.addEventListener('click', function (e) {
+    const a = e.target.closest('.dataTables_wrapper .dropdown-menu .dropdown-item[action_type="delete_row"]');
+    if (!a) return;
+
+    e.preventDefault();      // no navigation
+    e.stopPropagation();     // don't go through into row handlers
+
+    // Use data-params
+    let params = null;
+    const raw = a.getAttribute('data-params');
+    if (raw) {
+        try { params = JSON.parse(raw); } catch (_) { params = null; }
+    }
+
+    if (params) {
+        deleteOpendcsObject_default(e, a, params);
+    } else if (typeof a.onclick === 'function') {
+        // fallback: inline onclick string case
+    } else {
+        // default behavior
+        deleteRow_default(e, a);
+    }
+}, true);
+
+/**
+ * Delegated handler for Copy action inside DataTables menus
+ * Pages can provide a hook: OpenDCS.onCopyRow(e, el, params)
+ * If not provided, we fallback to legacy global copyRow(e, el) or copyRow_default.
+ */
+document.addEventListener('click', function (e) {
+    const a = e.target.closest('.dataTables_wrapper .dropdown-menu .dropdown-item[action_type="copy_row"]');
+    if (!a) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    let params = null;
+    const raw = a.getAttribute('data-params');
+    if (raw) {
+        try { params = JSON.parse(raw); } catch (_) { params = null; }
+    }
+
+    try {
+        if (window.OpenDCS && typeof window.OpenDCS.onCopyRow === 'function') {
+            return window.OpenDCS.onCopyRow(e, a, params);
+        } else if (typeof window.copyRow === 'function') {
+            // legacy page-specific handler
+            return window.copyRow(e, a);
+        } else {
+            // default no-op
+            return copyRow_default(e, a);
+        }
+    } catch (err) {
+        console.error('Error handling copy action:', err);
+    }
+}, true);
+
 function toggleRowMarkedForDeletion(jqRow)
 {
     var curDeleteValue = $(jqRow).attr("delete");
@@ -363,7 +445,7 @@ function addElementToDataTableHeader(datatableId, element)
     var targetSelector = "#" + datatableId + "_wrapper .dataTables_filter";
     element.appendTo(targetSelector);
     $(targetSelector).addClass("w-50");
-    $("#" + datatableId + "_wrapper" + " .dataTables_filter label").addClass("float-left");
+    $("#" + datatableId + "_wrapper" + " .dataTables_filter label").addClass("float-start");
 }
 
 function makeTableInline(tableId, inlineOptions, runAtEndClick, runAtEndFocusOut)
@@ -428,6 +510,7 @@ function makeTableInline(tableId, inlineOptions, runAtEndClick, runAtEndFocusOut
                             selectHtml += `<option value="${d}" ${selectedFlag}>${d}</option>`;
                         })
                         selectHtml += "</select>";
+                        //TODO: Need to sanitize for code injection.
                         thisPosition.empty().append($(selectHtml));
                     }
                     else if (forcedParam == "e" && splitForcedParam.length > 1)
@@ -447,6 +530,7 @@ function makeTableInline(tableId, inlineOptions, runAtEndClick, runAtEndFocusOut
                                 selectHtml += `<option value="${s}" ${selectedFlag}>${s}</option>`;
                             })
                             selectHtml += "</select>";
+                            //TODO: Need to sanitize for code injection.
                             thisPosition.empty().append($(selectHtml));
                         }
                         else if (selectType == "transportmediumtype")
@@ -463,6 +547,8 @@ function makeTableInline(tableId, inlineOptions, runAtEndClick, runAtEndFocusOut
                                 selectHtml += `<option value="${tmt}" ${selectedFlag}>${tmt}</option>`;
                             })
                             selectHtml += "</select>";
+
+                            //TODO: Need to sanitize for code injection.
                             thisPosition.empty().append($(selectHtml));
                         }
 
@@ -529,7 +615,6 @@ function makeTableInline(tableId, inlineOptions, runAtEndClick, runAtEndFocusOut
                                     selectHtml += `<option value="${d}" ${selectedFlag}>${d}</option>`;
                                 })
                                 selectHtml += "</select>";
-
                                 //TODO: Need to sanitize for code injection.
                                 thisPosition.empty().append($(selectHtml));
                                 break;
@@ -608,6 +693,7 @@ function makeTableInline(tableId, inlineOptions, runAtEndClick, runAtEndFocusOut
                                 selectHtml += `</select>
                                     <input id="${inputId2}" type="text" name="format" value="" />
                                     </div>`;
+                                //TODO: Need to sanitize for code injection.
                                 thisPosition.empty().append($(selectHtml));
 
 
@@ -1236,20 +1322,12 @@ function handleDrop(e) {
 
     if (dragDatatable["source"]["jqTable"].is(dragDatatable["destination"]["jqTable"]) && !dragDatatable["source"]["jqRow"].is(dragDatatable["destination"]["jqRow"])) {
 
-        // If selected rows and dragged item is selected then move selected rows
-        //if (selectedRows.count() > 0 && $(dragSrcRow).hasClass('selected')) {
-        //if (selectedRow != null)
-        //if (dragSrcRow != null)
-        //{
         var sourceIndex = dragDatatable["source"]["dtRowIndex"];
         var targetIndex = dragDatatable["destination"]["dtRowIndex"];
         //row style swap
         var sourceBgColors = getRowTdBackgroundColors(dragDatatable["source"].jqRow);
         var destinationBgColors = getRowTdBackgroundColors(dragDatatable["destination"].jqRow);
 
-        //var sourceSelected = doesRowHaveClass(dragDatatable["source"].jqRow, "selected");
-        //var destinationSelected = doesRowHaveClass(dragDatatable["destination"].jqRow, "selected");
-
         var sourceSelected = isRowIndexSelected(dragDatatable["source"]["dtTable"], sourceIndex); //doesRowHaveClass(dragDatatable["source"].jqRow, "selected");
         var destinationSelected = isRowIndexSelected(dragDatatable["destination"]["dtTable"], targetIndex); //doesRowHaveClass(dragDatatable["destination"].jqRow, "selected");
 
@@ -1269,15 +1347,12 @@ function handleDrop(e) {
                 var nextRowBgColors = getRowTdBackgroundColors($(jqRows[x+1]));
                 setRowTdBackgroundColors($(jqRows[x]), nextRowBgColors);
 
-                //if (doesRowHaveClass($(jqRows[x+1]), "selected"))
                 if (isRowIndexSelected(dragDatatable["source"]["dtTable"], x+1))
                 {
-                    //$(jqRows[x]).addClass("selected");
                     dragDatatable["source"]["dtTable"].row(x).select();
                 }
                 else
                 {
-                    //$(jqRows[x]).removeClass("selected");
                     dragDatatable["source"]["dtTable"].row(x).deselect();
                 }
 
@@ -1291,9 +1366,6 @@ function handleDrop(e) {
                 }
 
             }
-            //var nextRow = dragDatatable["source"]["dtTable"].row(x+1).data();
-            //dragDatatable["destination"]["dtTable"].row(targetIndex).data(dragDatatable["source"]["dtRowData"]);
-            //setRowTdBackgroundColors(dragDatatable["destination"].jqRow, sourceBgColors);
         }
         else
         {
@@ -1306,16 +1378,12 @@ function handleDrop(e) {
                 var nextRowBgColors = getRowTdBackgroundColors($(jqRows[x-1]));
                 setRowTdBackgroundColors($(jqRows[x]), nextRowBgColors);
 
-
-                //if (doesRowHaveClass($(jqRows[x+1]), "selected"))
                 if (isRowIndexSelected(dragDatatable["source"]["dtTable"], x-1))
                 {
-                    //$(jqRows[x]).addClass("selected");
                     dragDatatable["source"]["dtTable"].row(x).select();
                 }
                 else
                 {
-                    //$(jqRows[x]).removeClass("selected");
                     dragDatatable["source"]["dtTable"].row(x).deselect();
                 }
 
@@ -1329,15 +1397,11 @@ function handleDrop(e) {
                 }
 
             }
-            //var nextRow = dragDatatable["source"]["dtTable"].row(x+1).data();
-            //dragDatatable["destination"]["dtTable"].row(targetIndex).data(dragDatatable["source"]["dtRowData"]);
-
         }
         dragDatatable["destination"]["dtTable"].row(targetIndex).data(dragDatatable["source"]["dtRowData"]);
         setRowTdBackgroundColors(dragDatatable["destination"].jqRow, sourceBgColors);
         if (sourceSelected)
         {
-            //dragDatatable["source"].jqRow.removeClass("selected");
             dragDatatable["destination"].dtRow.select();
         }
         else
@@ -1350,39 +1414,6 @@ function handleDrop(e) {
     return false;
 }
 
-function handleDrop_deprecated(e) {
-    // this / e.target is current target element.
-
-    if (e.stopPropagation) {
-        e.stopPropagation(); // stops the browser from redirecting.
-    }
-
-    // Get destination table id, row
-    var dstTable = $(this.closest('table')).attr('id');
-
-    // No need to process if src and dst table are the same
-    if (srcTable == dstTable) {
-
-        if (dragSrcRow != null)
-        {
-            var targetDrag = this;
-            var frmtDragData = formatStatementsTable.row($(dragSrcRow)).data();
-            var targetDragData = formatStatementsTable.row($(this)).data();
-
-            var srcDragSiteName = frmtDragData[0];
-            
-            alert("New Data: " + JSON.stringify(newData));
-
-            updateRowClickEvents();
-            
-            dragSrcRow = null;
-            
-        } 
-        
-    }
-    return false;
-}
-
 function handleDragEnd(e) {
     // this/e.target is the source node.
     // Reset the opacity of the source row
@@ -1397,7 +1428,6 @@ function handleDragEnd(e) {
     
 }
 
-
 /**
  * Filters platforms in the netlist display based on the selected transport medium type.  NOTE - it will display the values that are passed and filter out all other values (not displaying them).
  * @param columnNumber {int} the column to run the filter
@@ -1549,4 +1579,60 @@ function getRowWithColumnData(table, cellValue, columnNumber)
         }
     }
     return null;
-}
\ No newline at end of file
+}
+
+/* === Bootstrap 5 dropdown shielding for DataTables rows (one true handler) === */
+/* NOTE - might not be the best way, but for now it gets us going */
+(function () {
+    if (window.__opendcsDropdownShieldDT) return;
+    window.__opendcsDropdownShieldDT = true;
+
+    let lastHandledTs = 0;
+
+    document.addEventListener('click', function (e) {
+        const t = e.target;
+        if (!t) return;
+
+        // Only inside DataTables UI
+        const inDT = t.closest && t.closest('.dataTables_wrapper');
+        if (!inDT) return;
+
+        // Stop duplicate listeners on the same event
+        if (e.timeStamp && e.timeStamp === lastHandledTs) return;
+        lastHandledTs = e.timeStamp;
+
+        // If the click is on a DT dropdown toggle, this manages it
+        const toggle = t.closest('[data-bs-toggle="dropdown"]');
+        if (toggle) {
+            // If already open, DO NOT toggle again (prevents instant close)
+            const alreadyOpen =
+                toggle.getAttribute('aria-expanded') === 'true' ||
+                (bootstrap.Dropdown.getInstance(toggle)?._menu?.classList?.contains('show'));
+
+            e.preventDefault();
+            if (e.stopImmediatePropagation) e.stopImmediatePropagation();
+            e.stopPropagation();
+
+            const dd = bootstrap.Dropdown.getOrCreateInstance(toggle, {
+                autoClose: true,
+                popperConfig: {
+                    strategy: 'fixed',
+                    modifiers: [
+                        { name: 'offset', options: { offset: [0, 8] } },
+                        { name: 'preventOverflow', options: { boundary: 'viewport' } },
+                        { name: 'computeStyles', options: { adaptive: false } },
+                    ],
+                },
+            });
+
+            if (!alreadyOpen) dd.show(); // open once; don't close immediately
+            return;
+        }
+
+        // Clicks inside menu: stop row/cell handlers from hijacking
+        if (t.closest('.dropdown-menu')) {
+            e.stopPropagation();
+            return;
+        }
+    }, true);
+})();
\ No newline at end of file
diff --git a/opendcs-web-client/src/main/webapp/resources/js/enumerations.js b/opendcs-web-client/src/main/webapp/resources/js/enumerations.js
index 512943116..bffc7a415 100644
--- a/opendcs-web-client/src/main/webapp/resources/js/enumerations.js
+++ b/opendcs-web-client/src/main/webapp/resources/js/enumerations.js
@@ -154,7 +154,7 @@ document.addEventListener('DOMContentLoaded', function() {
                     var description = item.description != null ? item.description : "";
                     var javaClass = item.execClassName != null ? item.execClassName : "";
                     var options = item.editClassName != null ? item.editClassName : "";
-                    var newRow = ['<i class="move-cursor icon-arrow-resize8 mr-3 icon-1x"></i>', "", key, description, javaClass, item.editClassName, createActionDropdown(actions)];
+                    var newRow = ['<i class="move-cursor icon-arrow-resize8 me-3 icon-1x"></i>', "", key, description, javaClass, item.editClassName, createActionDropdown(actions)];
                     enumerationTable.row.add(newRow);
                     makeTableInline("enumerationTable", enumerationTableInlineOptions);
                     enumerationTable.draw(false);
diff --git a/opendcs-web-client/src/main/webapp/resources/js/layout.js b/opendcs-web-client/src/main/webapp/resources/js/layout.js
new file mode 100644
index 000000000..0a59f742e
--- /dev/null
+++ b/opendcs-web-client/src/main/webapp/resources/js/layout.js
@@ -0,0 +1,36 @@
+// resources/js/layout.js
+(function () {
+    function setNavbarOffset() {
+        var nav = document.querySelector('nav.navbar.fixed-top');
+        if (!nav) return;
+
+        // offsetHeight includes borders, but add a safety pixel for sub-pixel rounding at zoom
+        var rect = nav.getBoundingClientRect();
+        document.documentElement.style.setProperty('--navbar-height', rect.height + 'px');
+        document.body.classList.add('navbar-top');
+    }
+
+    function initDropdowns() {
+        if (!(window.bootstrap && window.bootstrap.Dropdown)) {
+            console.warn('Bootstrap Dropdown not found. Ensure bootstrap.bundle.min.js is loaded before app scripts.');
+            return;
+        }
+
+        // Create instances so programmatic control works later,
+        document.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(function (el) {
+            bootstrap.Dropdown.getOrCreateInstance(el, {
+                autoClose: true,
+                popperConfig: { strategy: 'fixed' }
+            });
+        });
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        setNavbarOffset();
+        initDropdowns();
+
+        // Recompute on resize & after fonts load
+        window.addEventListener('resize', setNavbarOffset);
+        if (document.fonts && document.fonts.ready) document.fonts.ready.then(setNavbarOffset);
+    });
+})();
diff --git a/opendcs-web-client/src/main/webapp/resources/js/lib/dom_utilities.js b/opendcs-web-client/src/main/webapp/resources/js/lib/dom_utilities.js
index 5cdaed490..e486078a2 100644
--- a/opendcs-web-client/src/main/webapp/resources/js/lib/dom_utilities.js
+++ b/opendcs-web-client/src/main/webapp/resources/js/lib/dom_utilities.js
@@ -15,17 +15,9 @@
 
 document.addEventListener('DOMContentLoaded', function() {
     console.log("dom_utilities.js");
-    var elems = Array.prototype.slice.call(document.querySelectorAll('.form-check-input-switchery'));
-    elems.forEach(function(html) {
-        var switchery = new Switchery(html);
-    });
 
-    if ($().select2) {
-        console.warn('Warning - select2.min.js is loaded.');
-        //Select with search
-        $('.select-search').select2();
-    }
 });
+
 function createElement(elementType, attributes, classes, innerHtml)
 {
     var element = $("<" + elementType + ">");
diff --git a/opendcs-web-client/src/main/webapp/resources/js/lib/opendcs_utilities.js b/opendcs-web-client/src/main/webapp/resources/js/lib/opendcs_utilities.js
index a04fa892f..eb9fb6997 100644
--- a/opendcs-web-client/src/main/webapp/resources/js/lib/opendcs_utilities.js
+++ b/opendcs-web-client/src/main/webapp/resources/js/lib/opendcs_utilities.js
@@ -621,4 +621,33 @@ function handleErrorResponse(response, showAlert, showAlertDetails)
     catch (error) {
         show_notification_modal("Error", "An error occurred.", "There was an error with the operation.", "OK", "bg-danger", "bg-danger");
     }
-}
\ No newline at end of file
+}
+
+/* Bootstrap 5 modal jQuery-compatibility shim
+   NOTE - Not the best solution, but it gets us going.
+   ------------------------------------------------------------------
+   Helps older code that does $('#modal').modal('show'|'hide') while
+   the app uses Bootstrap 5. If $.fn.modal is missing, route calls to bootstrap.Modal.
+*/
+(function($, bootstrap){
+    if (!$ || !bootstrap) return;
+    if (!$.fn.modal) {
+        $.fn.modal = function(actionOrOptions){
+            return this.each(function(){
+                var el = this;
+                try {
+                    var inst = bootstrap.Modal.getOrCreateInstance(el, (typeof actionOrOptions === 'object') ? actionOrOptions : undefined);
+                    if (typeof actionOrOptions === 'string') {
+                        var action = actionOrOptions.toLowerCase();
+                        if (action === 'show') { inst.show(); }
+                        else if (action === 'hide') { inst.hide(); }
+                        else if (action === 'toggle') { inst.toggle(); }
+                        else if (action === 'dispose') { inst.dispose(); }
+                    }
+                } catch(e) {
+                    console.error('Modal shim error:', e);
+                }
+            });
+        };
+    }
+})(window.jQuery, window.bootstrap);
diff --git a/opendcs-web-client/src/main/webapp/resources/js/main.js b/opendcs-web-client/src/main/webapp/resources/js/main.js
index c211ea5d7..8cda17dd1 100644
--- a/opendcs-web-client/src/main/webapp/resources/js/main.js
+++ b/opendcs-web-client/src/main/webapp/resources/js/main.js
@@ -1,9 +1,11 @@
 document.addEventListener("DOMContentLoaded", function(event) {
 	console.log("loaded main.js.");
-	
-	//This runs the logout functionality.  It is in main.js, which is loaded 
+
+	//This runs the logout functionality.  It is in main.js, which is loaded
 	//into any page.
-	$("#logoutButton").on("click", function() {
+	$(document).on('click', '#logoutButton', function (e) {
+		e.preventDefault();
+		console.log("Logging out.");
         sessionStorage.removeItem("token");
         window.location = "login";
     });
diff --git a/opendcs-web-client/src/main/webapp/resources/js/netlist.js b/opendcs-web-client/src/main/webapp/resources/js/netlist.js
index 4a29e61f8..13ca2b100 100644
--- a/opendcs-web-client/src/main/webapp/resources/js/netlist.js
+++ b/opendcs-web-client/src/main/webapp/resources/js/netlist.js
@@ -37,7 +37,7 @@ let netlistListTable;
 let curNetlistDetails = undefined;
 
 /**
- * The list of GOES transport medium types.  
+ * The list of GOES transport medium types.
  * TODO: This needs to be hard coded for now, but should not be eventually.
  */
 let goesTms =     ["goes",
@@ -45,7 +45,7 @@ let goesTms =     ["goes",
     "goes-random"];
 
 /**
- * The list of transport medium types that should be ignored.  
+ * The list of transport medium types that should be ignored.
  * TODO: This maybe should be a value that the user can select in a preference
  * page.
  */
@@ -291,11 +291,11 @@ function updateNetlistsTable(netlistJson)
         };
         let actions = [{
             "type": "delete",
-            "onclick": `deleteOpendcsObject_default(event, this, ${JSON.stringify(params)})`,
+            "params": params,
         },
         {
             "type": "copy",
-            "onclick": "copyRow(event, this)"
+            "params": {}
         }
         ];
         netlistListTable.row.add([curNetlist.name, curNetlist.transportMediumType, curNetlist.numPlatforms, curNetlist.netlistId, createActionDropdown(actions)]);
@@ -740,4 +740,12 @@ function initializeDataTables()
 
     });
     nlTable.init();
-}
\ No newline at end of file
+}
+
+// Copy row functionality (In the dropdown menu) for this page.
+window.OpenDCS = window.OpenDCS || {};
+OpenDCS.onCopyRow = function(e, el, params) {
+    if (typeof copyRow === "function") {
+        return copyRow(e, el);
+    }
+};
diff --git a/opendcs-web-client/src/main/webapp/resources/js/platforms.js b/opendcs-web-client/src/main/webapp/resources/js/platforms.js
index 76caea096..5403d9809 100644
--- a/opendcs-web-client/src/main/webapp/resources/js/platforms.js
+++ b/opendcs-web-client/src/main/webapp/resources/js/platforms.js
@@ -226,12 +226,10 @@ function updatePlatformsTable()
         };
 
         var actions = [{
-            "type": "delete",
-            "onclick": `deleteOpendcsObject_default(event, this, ${JSON.stringify(params)})`
+            "type": "delete", "params": params
         },
         {
-            "type": "copy",
-            "onclick": "copyRow(event, this)"
+            "type": "copy", "params": {}
         }];
         var curConfigName = "";
         for (var x = 0; x < openDcsData.data.configrefs.data.length; x++)
@@ -941,7 +939,6 @@ function initializeEvents()
                         "transportInterval": transportInterval,
                         "transportWindow": transportWindow,
                         "username": curTmRow[13]
-                //"preamble": curTmRow[10] //TODO: NEED THIS STILL
                 };
 
                 changeObjectPropertyValueToNewValue(newTransportMedia, "", null);
@@ -1023,10 +1020,7 @@ function initializeEvents()
 /*****************Initialize Elements***********************/
 function initializeElements()
 {
-    var elems = Array.prototype.slice.call(document.querySelectorAll('.form-check-input-switchery'));
-    elems.forEach(function(html) {
-        var switchery = new Switchery(html);
-    });
+    var elems = Array.prototype.slice.call(document.querySelectorAll('.form-check-input'));
 }
 
 /** **************Initialize Datatables******************* */
@@ -1194,4 +1188,12 @@ function initializeDataTables()
         $("#modal_platformsensor").modal("hide");
     });
 
-}
\ No newline at end of file
+}
+
+// Register page-specific copy handler with new delegated dropdown API
+window.OpenDCS = window.OpenDCS || {};
+OpenDCS.onCopyRow = function(e, el, params) {
+    if (typeof copyRow === "function") {
+        return copyRow(e, el);
+    }
+};
diff --git a/opendcs-web-client/src/main/webapp/resources/js/presentation.js b/opendcs-web-client/src/main/webapp/resources/js/presentation.js
index 5cff4ff17..fe2aab8c8 100644
--- a/opendcs-web-client/src/main/webapp/resources/js/presentation.js
+++ b/opendcs-web-client/src/main/webapp/resources/js/presentation.js
@@ -25,10 +25,8 @@ var openDcsData;
 
 document.addEventListener('DOMContentLoaded', function() {
     console.log("Loaded presentation.js.");
-    var elems = Array.prototype.slice.call(document.querySelectorAll('.form-check-input-switchery'));
-    elems.forEach(function(html) {
-        var switchery = new Switchery(html);
-    });
+
+
 
     openDcsData = new OpenDcsData();
     show_waiting_modal();
@@ -59,7 +57,7 @@ document.addEventListener('DOMContentLoaded', function() {
     );
 
     initializeEvents();
-    initializeDataTables()    
+    initializeDataTables();
 });
 
 /**
@@ -103,11 +101,9 @@ function updatePresentationTable(allPresentations)
                 "urlIdName": "groupid"
         };
         var actions = [{
-            "type": "delete",
-            "onclick": `deleteOpendcsObject_default(event, this, ${JSON.stringify(params)})`
+            "type": "delete", "params": params
         },{
-            "type": "copy",
-            "onclick": "copyRow(event, this)"
+            "type": "copy", "params": {}
         }];
         presentationTable.row.add([curPresentation.groupId, curPresentation.name, curPresentation.inheritsFrom, curPresentation.lastModified, isProdDisplay, createActionDropdown(actions)]);
     }
@@ -428,4 +424,12 @@ function initializeDataTables()
                     }
                     ]
             });
-}
\ No newline at end of file
+}
+
+// Copy row functionality (In the dropdown menu) for this page.
+window.OpenDCS = window.OpenDCS || {};
+OpenDCS.onCopyRow = function(e, el, params) {
+    if (typeof copyRow === "function") {
+        return copyRow(e, el);
+    }
+};
diff --git a/opendcs-web-client/src/main/webapp/resources/js/processes.js b/opendcs-web-client/src/main/webapp/resources/js/processes.js
index 53b57efaf..dc04dd36a 100644
--- a/opendcs-web-client/src/main/webapp/resources/js/processes.js
+++ b/opendcs-web-client/src/main/webapp/resources/js/processes.js
@@ -43,8 +43,7 @@ var dtActions = [
         "onclick": "deleteRow(event, this)"
     },
     {
-        "type": "copy",
-        "onclick": "copyRow(event, this)"
+        "type": "copy", "params": {}
     }];
 
 /**
@@ -116,11 +115,9 @@ document.addEventListener('DOMContentLoaded', function() {
                     "urlIdName": "appid"
             };
             var actions = [{
-                "type": "delete",
-                "onclick": `deleteOpendcsObject_default(event, this, ${JSON.stringify(params)})`
+                "type": "delete", "params": params
             },{
-                "type": "copy",
-                "onclick": "copyRow(event, this)"
+                "type": "copy", "params": {}
             }];
             var newRow = [curRow.appId, curRow.appName, "", curRow.comment, createActionDropdown(actions)];
             mainTable.row.add(newRow);
@@ -347,4 +344,12 @@ function copyRow(event, clickedLink)
     $(clickedLink).closest(".dropdown-menu").toggle();
     event.stopPropagation();
     openMainTableDialog(clickedLink.closest("tr"), true);
-}
\ No newline at end of file
+}
+
+// Register page-specific copy handler with new delegated dropdown API
+window.OpenDCS = window.OpenDCS || {};
+OpenDCS.onCopyRow = function(e, el, params) {
+    if (typeof copyRow === "function") {
+        return copyRow(e, el);
+    }
+};
diff --git a/opendcs-web-client/src/main/webapp/resources/js/routing.js b/opendcs-web-client/src/main/webapp/resources/js/routing.js
index c94bdbdd2..50f96f058 100644
--- a/opendcs-web-client/src/main/webapp/resources/js/routing.js
+++ b/opendcs-web-client/src/main/webapp/resources/js/routing.js
@@ -136,11 +136,9 @@ function updateRoutingTable(responseJson)
 
         var actions = [{
             "type": "delete",
-            "onclick_deprecated": "openDeleteModal(event, this)",
-            "onclick": `deleteOpendcsObject_default(event, this, ${JSON.stringify(params)})`
+            "params": params
         },{
-            "type": "copy",
-            "onclick": "copyRow(event, this)"
+            "type": "copy", "params": {}
         }];
 
         routingTable.row.add([curRouting.routingId, 
@@ -885,12 +883,6 @@ document.addEventListener('DOMContentLoaded', function() {
         
         $("#modal_platformselection").modal("hide");
     });
-    
-    
-    var elems = Array.prototype.slice.call(document.querySelectorAll('.form-check-input-switchery'));
-    elems.forEach(function(html) {
-        var switchery = new Switchery(html);
-    });
 
     
 
@@ -1218,3 +1210,12 @@ document.addEventListener('DOMContentLoaded', function() {
         openSaveModal();
     });
 });
+
+
+// Copy row functionality (In the dropdown menu) for this page.
+window.OpenDCS = window.OpenDCS || {};
+OpenDCS.onCopyRow = function(e, el, params) {
+    if (typeof copyRow === "function") {
+        return copyRow(e, el);
+    }
+};
diff --git a/opendcs-web-client/src/main/webapp/resources/js/schedule.js b/opendcs-web-client/src/main/webapp/resources/js/schedule.js
index cf89e4ae5..3e44b54a0 100644
--- a/opendcs-web-client/src/main/webapp/resources/js/schedule.js
+++ b/opendcs-web-client/src/main/webapp/resources/js/schedule.js
@@ -344,12 +344,10 @@ function updateScheduleEntryTable(responseJson)
         };
 
         var actions = [{
-            "type": "delete",
-            "onclick": `deleteOpendcsObject_default(event, this, ${JSON.stringify(params)})`,
+            "type": "delete", "params": params,
         },
         {
-            "type": "copy",
-            "onclick": "copyRow(event, this)"
+            "type": "copy", "params": {}
         }
         ];
         var isEnabled = curEntry.enabled ? '<i class="icon-checkmark4 mr-3 icon-1x"></i>' : "";
@@ -497,26 +495,13 @@ function getSelectedScheduleRadioButton()
  */
 function initializeExecutionSchedule()
 {
-    var elems = Array.prototype.slice.call(document.querySelectorAll('.form-check-input-switchery'));
-    //initialize the switches in the execution schedule.
-    elems.forEach(function(html) {
-        var switchery = new Switchery(html);
-    });
 
-    $('.form-check-input-styled-primary').uniform({
-        wrapperClass: 'border-primary text-primary'
-    });
 
-    // Danger
-    $('.form-check-input-styled-danger').uniform({
-        wrapperClass: 'border-danger text-danger'
-    });
+    $('.form-check-input-styled-primary')
 
-    // Success
-    $('.form-check-input-styled-success').uniform({
-        wrapperClass: 'border-success text-success'
-    });
+    $('.form-check-input-styled-danger')
 
+    $('.form-check-input-styled-success')
     enableRunEveryElements(false);
 
     $('input[type=radio][name=runFreq]').change(function() {
@@ -585,3 +570,12 @@ function initializeDataTables()
             });
     $('#scheduleEntryTable').on('click', 'tbody tr', openScheduleDialog);
 }
+
+
+// Copy row functionality (In the dropdown menu) for this page.
+window.OpenDCS = window.OpenDCS || {};
+OpenDCS.onCopyRow = function(e, el, params) {
+    if (typeof copyRow === "function") {
+        return copyRow(e, el);
+    }
+};
diff --git a/opendcs-web-client/src/main/webapp/resources/js/seasons.js b/opendcs-web-client/src/main/webapp/resources/js/seasons.js
index 96ddb8a6c..6751abd75 100644
--- a/opendcs-web-client/src/main/webapp/resources/js/seasons.js
+++ b/opendcs-web-client/src/main/webapp/resources/js/seasons.js
@@ -9,7 +9,6 @@ var mainTable;
  */
 var mainTableInlineOptions = {};
 
-
 /**
  * Save queue based on the seasons that need to be saved.  Multiple seasons
  * can be edited before selecting save, so multiple seasons need to be saved.
@@ -200,7 +199,7 @@ document.addEventListener('DOMContentLoaded', function() {
                 var curSeason = response[x];
 
                 var timezone = curSeason.tz != null ? curSeason.tz : "";
-                var newRow = ['<i class="move-cursor icon-arrow-resize8 mr-3 icon-1x"></i>', curSeason.abbr, curSeason.abbr, curSeason.name, curSeason.start, curSeason.end, timezone, createActionDropdown(actions)];
+                var newRow = ['<i class="move-cursor icon-arrow-resize8 me-3 icon-1x"></i>', curSeason.abbr, curSeason.abbr, curSeason.name, curSeason.start, curSeason.end, timezone, createActionDropdown(actions)];
                 mainTable.row.add(newRow);
                 makeTableInline("mainTable", mainTableInlineOptions);
                 mainTable.draw(false);
diff --git a/opendcs-web-client/src/main/webapp/resources/js/sidebar.js b/opendcs-web-client/src/main/webapp/resources/js/sidebar.js
new file mode 100644
index 000000000..e829f1be1
--- /dev/null
+++ b/opendcs-web-client/src/main/webapp/resources/js/sidebar.js
@@ -0,0 +1,256 @@
+
+/*!
+ * OpenDCS helpers (Bootstrap 5)
+ * - NOTE - I consider this another SHIM
+ * - Sidebar collapse + accordion groups
+ * - Stacked modals fix (nested modals)
+ * - Action dropdowns in DataTables: programmatic toggle + stop row handlers
+ * - Fallback: show_waiting_modal / hide_waiting_modal
+ */
+(function () {
+  function whenReady(cb) {
+    if (document.readyState !== 'loading') cb();
+    else document.addEventListener('DOMContentLoaded', cb, { once: true });
+  }
+  function directChild(parent, selector) {
+    if (!parent) return null;
+    for (var i = 0; i < parent.children.length; i++) {
+      var el = parent.children[i];
+      if (el.matches && el.matches(selector)) return el;
+    }
+    return null;
+  }
+  function isDisplayed(el) {
+    if (!el) return false;
+    if (el.style && el.style.display) return el.style.display !== 'none';
+    try { return window.getComputedStyle(el).display !== 'none'; } catch (e) { return true; }
+  }
+
+  // ---------------- Fallback waiting modal ----------------
+  function ensureWaitingModal() {
+    var id = 'opendcs-waiting-modal';
+    var el = document.getElementById(id);
+    if (el) return el;
+    el = document.createElement('div');
+    el.className = 'modal fade';
+    el.id = id;
+    el.setAttribute('tabindex', '-1');
+    el.setAttribute('aria-hidden', 'true');
+    el.innerHTML = ''
+      + '<div class="modal-dialog modal-dialog-centered">'
+      + '  <div class="modal-content">'
+      + '    <div class="modal-header">'
+      + '      <h5 class="modal-title">Please wait</h5>'
+      + '    </div>'
+      + '    <div class="modal-body"><div class="d-flex align-items-center">'
+      + '      <div class="spinner-border me-2" role="status" aria-hidden="true"></div>'
+      + '      <div class="small flex-fill" id="opendcs-waiting-message">Working...</div>'
+      + '    </div></div>'
+      + '  </div>'
+      + '</div>';
+    document.body.appendChild(el);
+    return el;
+  }
+  if (typeof window.show_waiting_modal !== 'function') {
+    window.show_waiting_modal = function (title, message) {
+      try {
+        var el = ensureWaitingModal();
+        if (title) el.querySelector('.modal-title').textContent = title;
+        if (message) el.querySelector('#opendcs-waiting-message').textContent = message;
+        var m = bootstrap.Modal.getOrCreateInstance(el, { backdrop: 'static', keyboard: false });
+        m.show();
+      } catch (e) {}
+    };
+  }
+  if (typeof window.hide_waiting_modal !== 'function') {
+    window.hide_waiting_modal = function () {
+      try {
+        var el = document.getElementById('opendcs-waiting-modal');
+        if (!el) return;
+        bootstrap.Modal.getOrCreateInstance(el).hide();
+      } catch (e) {}
+    };
+  }
+
+  // ---------------- Dropdowns in DataTables ----------------
+  function bindDropdownToggle(el) {
+    if (!el || el.dataset.ddBound === '1') return;
+    el.dataset.ddBound = '1';
+
+    // Prevent row click from selecting/opening while still opening the dropdown
+    el.addEventListener('click', function (e) {
+      e.preventDefault(); //don't navigate for '#' toggles
+      e.stopPropagation(); //block row handlers
+      try {
+        var dd = bootstrap.Dropdown.getOrCreateInstance(el);
+        dd.toggle();
+      } catch (err) {}
+    });
+
+    // shield row handlers that may listen on mousedown
+    ['pointerdown','mousedown'].forEach(function(type){
+      el.addEventListener(type, function (e) {
+        e.stopPropagation();
+      });
+    });
+  }
+
+  function rebindDropdowns(root) {
+    (root || document)
+        .querySelectorAll('.dataTables_wrapper [data-bs-toggle="dropdown"]')
+        .forEach(bindDropdownToggle);
+  }
+
+  // Hide dropdown after clicking a menu item, without bubbling to row handlers
+  document.addEventListener('click', function (e) {
+    var menu = e.target && e.target.closest('.dropdown-menu');
+    if (!menu) return;
+    e.stopPropagation(); // block row click
+    var item = e.target.closest('.dropdown-item, button.dropdown-item');
+    if (item) {
+      var container = menu.closest('.dropdown, .btn-group');
+      var toggle = container && container.querySelector('[data-bs-toggle="dropdown"]');
+      if (toggle) {
+        // allow the item's own handler to run, then close the menu
+        setTimeout(function () {
+          try { bootstrap.Dropdown.getOrCreateInstance(toggle).hide(); } catch (err) {}
+        }, 0);
+      }
+    }
+  }, true); // capture so we beat row handlers
+
+  whenReady(function () {
+    rebindDropdowns(document);
+
+    var mo = new MutationObserver(function (mutations) {
+      mutations.forEach(function (m) {
+        m.addedNodes && m.addedNodes.forEach(function (n) {
+          if (n.nodeType !== 1) return;
+          //if (n.matches && n.matches('[data-bs-toggle="dropdown"]')) bindDropdownToggle(n);
+          if (n.matches && n.matches('.dataTables_wrapper [data-bs-toggle="dropdown"]')) {
+            bindDropdownToggle(n);
+          }
+          if (n.querySelectorAll) rebindDropdowns(n);
+        });
+      });
+    });
+    mo.observe(document.body, { childList: true, subtree: true });
+  });
+
+  // ---------------- Sidebar + accordion ----------------
+  whenReady(function () {
+    var body = document.body;
+    var sidebar = document.querySelector('.sidebar.sidebar-main');
+    if (sidebar) {
+      body.classList.add('has-sidebar');
+
+      // collapse/expand with persistence
+      var key = 'opendcs.sidebar.collapsed';
+      try { if (localStorage.getItem(key) === '1') body.classList.add('sidebar-collapsed'); } catch (e) {}
+      sidebar.querySelectorAll('.sidebar-main-toggle').forEach(function (btn) {
+        btn.addEventListener('click', function (e) {
+          e.preventDefault();
+          body.classList.toggle('sidebar-collapsed');
+          try { localStorage.setItem(key, body.classList.contains('sidebar-collapsed') ? '1' : '0'); } catch (e) {}
+        });
+      });
+
+      // groups accordion (any li that directly contains ul.nav-group-sub)
+      function directChild(parent, selector) {
+        if (!parent) return null;
+        for (var i = 0; i < parent.children.length; i++) {
+          var el = parent.children[i];
+          if (el.matches && el.matches(selector)) return el;
+        }
+        return null;
+      }
+      var lis = Array.prototype.slice.call(sidebar.querySelectorAll('.nav-sidebar > li'));
+      var groups = lis.filter(function (li) { return !!directChild(li, 'ul.nav-group-sub'); });
+
+      groups.forEach(function (li) {
+        var link = directChild(li, 'a.nav-link');
+        var submenu = directChild(li, 'ul.nav-group-sub');
+        if (!link || !submenu) return;
+
+        var open = isDisplayed(submenu) || li.classList.contains('nav-item-open') || link.getAttribute('aria-expanded') === 'true';
+        if (open) {
+          li.classList.add('nav-item-open');
+          submenu.style.display = 'block';
+        } else {
+          li.classList.remove('nav-item-open');
+          submenu.style.display = 'none';
+        }
+
+        link.addEventListener('click', function (ev) {
+          var href = (link.getAttribute('href') || '').trim();
+          if (href === '' || href === '#' || href.toLowerCase().indexOf('javascript:') === 0) {
+            ev.preventDefault();
+          }
+          var isOpen = li.classList.contains('nav-item-open');
+          groups.forEach(function (sib) {
+            if (sib !== li) {
+              sib.classList.remove('nav-item-open');
+              var s = directChild(sib, 'ul.nav-group-sub'); if (s) s.style.display = 'none';
+              var sLink = directChild(sib, 'a.nav-link'); if (sLink) sLink.setAttribute('aria-expanded', 'false');
+            }
+          });
+          if (isOpen) {
+            li.classList.remove('nav-item-open');
+            submenu.style.display = 'none';
+            link.setAttribute('aria-expanded', 'false');
+          } else {
+            li.classList.add('nav-item-open');
+            submenu.style.display = 'block';
+            link.setAttribute('aria-expanded', 'true');
+          }
+        });
+      });
+
+      // Open the group that contains an active sub-link, if any
+      var active = sidebar.querySelector('.nav-group-sub .nav-link.active');
+      if (active) {
+        var node = active.closest('li');
+        while (node && !directChild(node, 'ul.nav-group-sub')) {
+          node = node.parentElement ? node.parentElement.closest('li') : null;
+        }
+        if (node) {
+          groups.forEach(function (sib) {
+            if (sib !== node) {
+              sib.classList.remove('nav-item-open');
+              var s = directChild(sib, 'ul.nav-group-sub'); if (s) s.style.display = 'none';
+            }
+          });
+          node.classList.add('nav-item-open');
+          var gs = directChild(node, 'ul.nav-group-sub'); if (gs) gs.style.display = 'block';
+        }
+      }
+    }
+  });
+
+  // ---------------- Stacked Modals (BS5) ----------------
+  function adjustModalStack(modal) {
+    if (modal.parentElement && modal.parentElement !== document.body) {
+      document.body.appendChild(modal);
+    }
+    var openCount = document.querySelectorAll('.modal.show').length;
+    var z = 1055 + 10 * openCount;
+    modal.style.zIndex = String(z);
+    setTimeout(function () {
+      var backdrops = document.querySelectorAll('.modal-backdrop');
+      for (var i = backdrops.length - 1; i >= 0; i--) {
+        var bd = backdrops[i];
+        if (!bd.dataset.stackAdjusted) {
+          bd.style.zIndex = String(z - 5);
+          bd.dataset.stackAdjusted = '1';
+          break;
+        }
+      }
+    }, 0);
+  }
+  document.addEventListener('show.bs.modal', function (e) { adjustModalStack(e.target); });
+  document.addEventListener('shown.bs.modal', function (e) { adjustModalStack(e.target); });
+  document.addEventListener('hidden.bs.modal', function () {
+    if (document.querySelectorAll('.modal.show').length > 0) document.body.classList.add('modal-open');
+  });
+
+})();
diff --git a/opendcs-web-client/src/main/webapp/resources/js/sites.js b/opendcs-web-client/src/main/webapp/resources/js/sites.js
index 1c498b64c..60c3e0bc1 100644
--- a/opendcs-web-client/src/main/webapp/resources/js/sites.js
+++ b/opendcs-web-client/src/main/webapp/resources/js/sites.js
@@ -73,12 +73,12 @@ document.addEventListener('DOMContentLoaded', function() {
         });
         var selectBox = createSelectBox("displayedTypeSelect", 
                 options, 
-                ["float-right"],
+                ["float-end"],
                 changeSiteNameType,
                 null,
                 null
         );
-        var fullDiv = createElement("div", null, ["float-left", "row", "w-50"], null);
+        var fullDiv = createElement("div", null, ["float-start", "row", "w-50"], null);
         var labelDiv = createElement("div", null, ["col-lg-6", "text-right", "justify-content-center", "align-self-center"], "Displayed Type");
         var selectDiv = createElement("div", null, ["col-lg-6"], selectBox);
         fullDiv.append(labelDiv);
@@ -151,18 +151,15 @@ function updateSitesTable(responseJson)
                 }
             }
 
-            var params = {
-                "objectType": "site",
-                "objectTypeDisplayName": "Site",
-                "objectIdIndex": 0,
-                "objectNameIndex": 1,
-                "urlIdName": "siteid"
-            };
-
             var actions = [{
-                "type": "delete",
-                "onclick": `deleteOpendcsObject_default(event, this, ${JSON.stringify(params)})`
-
+                type: 'delete',
+                params: {
+                    objectType: 'site',
+                    objectTypeDisplayName: 'site',
+                    objectIdIndex: 0,
+                    objectNameIndex: 1,
+                    urlIdName: 'siteid'
+                }
             }];
             var newRow = [curSite.siteId,
                 displayedSiteName,
diff --git a/opendcs-web-client/src/main/webapp/resources/js/sources.js b/opendcs-web-client/src/main/webapp/resources/js/sources.js
index 72080196f..bd36c4e98 100644
--- a/opendcs-web-client/src/main/webapp/resources/js/sources.js
+++ b/opendcs-web-client/src/main/webapp/resources/js/sources.js
@@ -153,12 +153,10 @@ function updateSourcesTable(responseJson)
         };
 
         var actions = [{
-            "type": "delete",
-            "onclick": `deleteOpendcsObject_default(event, this, ${JSON.stringify(params)})`
+            "type": "delete", "params": params
         },
         {
-            "type": "copy",
-            "onclick": "copyRow(event, this)"
+            "type": "copy", "params": {}
         }];
         sourcesTable.row.add([curSource.name, curSource.type, curSource.arguments, curSource.usedBy, createActionDropdown(actions), curSource.dataSourceId]);
     }
@@ -625,3 +623,12 @@ function initializeDataTables()
             });
     $('#sourcesTable').on('click', 'tbody tr', openSourcesDialog);
 }
+
+
+// Register page-specific copy handler with new delegated dropdown API
+window.OpenDCS = window.OpenDCS || {};
+OpenDCS.onCopyRow = function(e, el, params) {
+    if (typeof copyRow === "function") {
+        return copyRow(e, el);
+    }
+};
diff --git a/opendcs-web-client/src/main/webapp/resources/jsp/footers/decodes.jsp b/opendcs-web-client/src/main/webapp/resources/jsp/footers/decodes.jsp
index c8c1d5618..4f19a5387 100644
--- a/opendcs-web-client/src/main/webapp/resources/jsp/footers/decodes.jsp
+++ b/opendcs-web-client/src/main/webapp/resources/jsp/footers/decodes.jsp
@@ -19,8 +19,8 @@
 <div class="navbar navbar-expand-lg navbar-light">
 	<div class="text-center d-lg-none w-100">
 		<button type="button" class="navbar-toggler dropdown-toggle"
-			data-toggle="collapse" data-target="#navbar-footer">
-			<i class="icon-unfold mr-2"></i> Footer
+			data-bs-toggle="collapse" data-bs-target="#navbar-footer">
+			<i class="fa-chevron-down me-2"></i> Footer
 		</button>
 	</div>
 
@@ -34,7 +34,7 @@
 				   class="nav-link"
 				   target="_blank"
 				   rel="noopener">
-					<i class="icon-code"></i>
+					<i class="bi bi-code-slash"></i>
 					<span>API Swagger UI </span>
 				</a>
 		</ul>
@@ -53,4 +53,6 @@
 	});
 </script>
 
-<%-- /footer --%>
\ No newline at end of file
+<%-- /footer --%>
+
+<script src="${pageContext.request.contextPath}/resources/js/sidebar.js"></script>
diff --git a/opendcs-web-client/src/main/webapp/resources/jsp/headers/decodes.jsp b/opendcs-web-client/src/main/webapp/resources/jsp/headers/decodes.jsp
index 7405fa1cf..889502ce1 100644
--- a/opendcs-web-client/src/main/webapp/resources/jsp/headers/decodes.jsp
+++ b/opendcs-web-client/src/main/webapp/resources/jsp/headers/decodes.jsp
@@ -1,5 +1,5 @@
-<%@ page language="java" contentType="text/html; charset=UTF-8"
-	pageEncoding="UTF-8"%>
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 <%--
   ~  Copyright 2023 OpenDCS Consortium
   ~
@@ -19,12 +19,20 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  <link rel="icon" type="image/png" href="../resources/img/odcs-favicon.png"/>
-  <%-- Global stylesheets --%>
-  <link href="../resources/css/select.dataTables.css" rel="stylesheet" type="text/css"/>
-  <link href="/webjars/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
-  <link href="/webjars/bootstrap-daterangepicker/css/bootstrap-daterangepicker.css" rel="stylesheet" type="text/css"/>
-  <link href="../resources/css/main.css" rel="stylesheet" type="text/css"/>
-  <%-- <meta http-equiv="Content-Security-Policy" content="script-src 'self'"> --%>
+  <link rel="icon" type="image/png" href="<c:url value='/resources/img/odcs-favicon.png'/>"/>
+
+  <!-- Styles -->
+  <link href="<c:url value='/webjars/bootstrap/5.3.8/css/bootstrap.min.css'/>" rel="stylesheet" type="text/css"/>
+
+  <link href="<c:url value='/webjars/datatables.net-bs5/1.13.8/css/dataTables.bootstrap5.min.css'/>" rel="stylesheet" type="text/css"/>
+  <link href="<c:url value='/webjars/datatables.net-responsive-bs5/2.5.0/css/responsive.bootstrap5.min.css'/>" rel="stylesheet" type="text/css"/>
+  <link href="<c:url value='/webjars/datatables.net-buttons-bs5/2.4.2/css/buttons.bootstrap5.min.css'/>" rel="stylesheet" type="text/css"/>
+  <link href="<c:url value='/webjars/datatables.net-select-bs5/1.4.0/css/select.bootstrap5.min.css'/>" rel="stylesheet" type="text/css"/>
+
+  <link href="<c:url value='/webjars/bootstrap-daterangepicker/3.1.0/daterangepicker.css'/>" rel="stylesheet" type="text/css"/>
+
+  <link href="<c:url value='/resources/css/main.css'/>" rel="stylesheet" type="text/css"/>
+  <link href="<c:url value='/resources/css/opendcs-shim.css'/>" rel="stylesheet" type="text/css"/>
+
   <title>OpenDCS Web Client</title>
 </head>
\ No newline at end of file
diff --git a/opendcs-web-client/src/main/webapp/resources/jsp/includes/decodes.jsp b/opendcs-web-client/src/main/webapp/resources/jsp/includes/decodes.jsp
index a28e79e7b..d329ce79f 100644
--- a/opendcs-web-client/src/main/webapp/resources/jsp/includes/decodes.jsp
+++ b/opendcs-web-client/src/main/webapp/resources/jsp/includes/decodes.jsp
@@ -1,53 +1,47 @@
-<%@ page language="java" contentType="text/html; charset=UTF-8"
-	pageEncoding="UTF-8"%>
-<%--
-  ~  Copyright 2023 OpenDCS Consortium
-  ~
-  ~  Licensed under the Apache License, Version 2.0 (the "License");
-  ~  you may not use this file except in compliance with the License.
-  ~  You may obtain a copy of the License at
-  ~       http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~  Unless required by applicable law or agreed to in writing, software
-  ~  distributed under the License is distributed on an "AS IS" BASIS,
-  ~  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~  See the License for the specific language governing permissions and
-  ~  limitations under the License.
-  --%>
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 
 <%-- Core JS files --%>
-<script src="/webjars/jquery/jquery.min.js"></script>
-<script src="/webjars/bootstrap/js/bootstrap.bundle.min.js"></script>
-<script src="/webjars/jquery-blockui/jquery.blockUI.js"></script>
-<%-- /core JS files --%>
+<script src="<c:url value='/webjars/jquery/3.7.1/jquery.min.js'/>"></script>
+<script src="<c:url value='/webjars/bootstrap/5.3.8/js/bootstrap.bundle.min.js'/>"></script>
+<script src="<c:url value='/webjars/select2/4.0.13/js/select2.min.js'/>"></script>
 
-<%-- Theme JS files --%>
-<script src="/webjars/d3js/d3.min.js"></script>
-<%-- /theme JS files --%>
+<!-- jQuery plugins / utilities -->
+<script src="<c:url value='/webjars/jquery-blockui/2.70/jquery.blockUI.js'/>"></script>
+<script src="<c:url value='/webjars/jquery-validation/1.20.0/jquery.validate.min.js'/>"></script>
+<script src="<c:url value='/webjars/d3js/6.7.0/d3.min.js'/>"></script>
 
+<!-- Date handling -->
+<script src="<c:url value='/webjars/moment/2.30.1/min/moment.min.js'/>"></script>
+<script src="<c:url value='/webjars/bootstrap-daterangepicker/3.1.0/daterangepicker.js'/>"></script>
 
 <%-- Datatables files --%>
-<script src="/webjars/datatables/js/dataTables.min.js"></script>
-<script src="/webjars/datatables-responsive/js/dataTables.responsive.min.js"></script>
-<script src="/webjars/select2/4.0.13/js/select2.min.js"></script>
-<script src="/webjars/datatables-select/2.1.0/js/dataTables.select.min.js"></script>
-<script src="/webjars/datatables-buttons/3.2.5/js/dataTables.buttons.min.js"></script>
-<%-- /datatables files --%>
-
-<%--  OpenDCS Web Files --%>
-<script src="../resources/js/decodes.js"></script>
-<script src="../resources/js/lib/dom_utilities.js"></script>
-<script src="../resources/js/lib/opendcs_utilities.js"></script>
-<%-- /opendcs web files --%>
-
-<%-- Get API Path --%>
-<script>
-	var origin = window.location.origin;
-	var apiBasePath = `<%= getServletConfig().getServletContext().getInitParameter("api_base_path") %>`;
-	window.API_URL = new URL(apiBasePath, origin).href;
-</script>
-<%-- /get api path --%>
+<script src="<c:url value='/webjars/datatables.net/1.13.8/js/jquery.dataTables.min.js'/>"></script>
+<script src="<c:url value='/webjars/datatables.net-bs5/1.13.8/js/dataTables.bootstrap5.min.js'/>"></script>
+
+<!-- DataTables extensions -->
+<script src="<c:url value='/webjars/datatables.net-responsive/2.5.0/js/dataTables.responsive.min.js'/>"></script>
+<script src="<c:url value='/webjars/datatables.net-responsive-bs5/2.5.0/js/responsive.bootstrap5.min.js'/>"></script>
+<script src="<c:url value='/webjars/datatables.net-buttons/2.4.2/js/dataTables.buttons.min.js'/>"></script>
+<script src="<c:url value='/webjars/datatables.net-buttons-bs5/2.4.2/js/buttons.bootstrap5.min.js'/>"></script>
+<script src="<c:url value='/webjars/datatables.net-select/1.7.1/js/dataTables.select.min.js'/>"></script>
+<script src="<c:url value='/webjars/datatables.net-select-bs5/1.4.0/js/select.bootstrap5.min.js'/>"></script>
+
+<!-- Web Client files -->
+<script src="<c:url value='/resources/js/decodes.js'/>"></script>
+<script src="<c:url value='/resources/js/lib/dom_utilities.js'/>"></script>
+<script src="<c:url value='/resources/js/lib/opendcs_utilities.js'/>"></script>
 
+<!-- Modals -->
 <jsp:include page="/resources/jsp/modals/waiting.jsp" />
 <jsp:include page="/resources/jsp/modals/notification.jsp" />
-<jsp:include page="/resources/jsp/modals/yesno.jsp" />
\ No newline at end of file
+<jsp:include page="/resources/jsp/modals/yesno.jsp" />
+
+<!-- API base -->
+<script>
+	(function () {
+		var origin = window.location.origin;
+		var apiBasePath = "<%= getServletConfig().getServletContext().getInitParameter("api_base_path") %>";
+		window.API_URL = new URL(apiBasePath, origin).href;
+	})();
+</script>
diff --git a/opendcs-web-client/src/main/webapp/resources/jsp/menus/decodes/main.jsp b/opendcs-web-client/src/main/webapp/resources/jsp/menus/decodes/main.jsp
index dfa37c112..577445842 100644
--- a/opendcs-web-client/src/main/webapp/resources/jsp/menus/decodes/main.jsp
+++ b/opendcs-web-client/src/main/webapp/resources/jsp/menus/decodes/main.jsp
@@ -1,34 +1,63 @@
-<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
-    <%-- ~ Copyright 2023 OpenDCS Consortium ~ ~ Licensed under the Apache License, Version 2.0 (the "License" ); ~ you
-        may not use this file except in compliance with the License. ~ You may obtain a copy of the License at ~
-        http://www.apache.org/licenses/LICENSE-2.0 ~ ~ Unless required by applicable law or agreed to in writing,
-        software ~ distributed under the License is distributed on an "AS IS" BASIS, ~ WITHOUT WARRANTIES OR CONDITIONS
-        OF ANY KIND, either express or implied. ~ See the License for the specific language governing permissions and ~
-        limitations under the License. --%>
+<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
+<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
 
-        <%-- Main navbar --%>
+<%-- ~ Copyright 2023 OpenDCS Consortium ~ ~ Licensed under the Apache License, Version 2.0 (the "License" ); ~ you
+       may not use this file except in compliance with the License. ~ You may obtain a copy of the License at ~
+       http://www.apache.org/licenses/LICENSE-2.0 ~ ~ Unless required by applicable law or agreed to in writing,
+       software ~ distributed under the License is distributed on an "AS IS" BASIS, ~ WITHOUT WARRANTIES OR CONDITIONS
+       OF ANY KIND, either express or implied. ~ See the License for the specific language governing permissions and ~
+       limitations under the License. --%>
 
-            <nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
-                <div class="container-fluid">
-                    <div class="navbar-header">
-                        <a class="navbar-brand" href="#">OpenDCS</a>
-                    </div>
-                    <ul class="nav navbar-nav navbar-right">
-                        <li class="nav-item dropdown ">
-                            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button"
-                                aria-expanded="false">User</a>
-                            <ul class="dropdown-menu">
-                                <li><a class="dropdown-item" href="#">Profile</a></li>
-                                <li><a class="dropdown-item" href="#">Admin</a></li>
-                                <li>
-                                    <hr class="dropdown-divider">
-                                </li>
-                                <li><a class="dropdown-item" href="#">Logout</a></li>
-                            </ul>
-                        </li>
-                    </ul>
-                </div>
-            </nav>
 
-            <%-- /main navbar --%>
-                <script src="../resources/js/main.js"></script>
\ No newline at end of file
+<%-- Main navbar --%>
+<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
+	<div class="container-fluid">
+		<!-- Brand -->
+		<a href="dashboard" class="navbar-brand navbarMenuHome">OpenDCS</a>
+
+		<!-- Mobile collapse button -->
+		<button class="navbar-toggler" type="button"
+				data-bs-toggle="collapse" data-bs-target="#navbarTop"
+				aria-controls="navbarTop" aria-expanded="false" aria-label="Toggle navigation">
+			<span class="navbar-toggler-icon"></span>
+		</button>
+
+		<!-- Collapsible area -->
+		<div class="collapse navbar-collapse" id="navbarTop">
+			<ul class="navbar-nav me-auto"></ul>
+			<ul class="navbar-nav">
+				<li class="nav-item dropdown" data-bs-display="static">
+					<a class="nav-link dropdown-toggle d-flex align-items-center"
+					   href="#" id="userDropdown" role="button"
+					   data-bs-toggle="dropdown" aria-expanded="false">
+						<img src="../resources/img/user_profile_image_large.png"
+							 class="rounded-circle me-2" height="34" alt="">
+						<span id="usernameDropdownText"></span>
+					</a>
+					<ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="userDropdown">
+						<li>
+							<a href="#" class="dropdown-item">
+								<i class="bi bi-person-plus me-2"></i>My profile
+							</a>
+						</li>
+						<li><hr class="dropdown-divider"></li>
+						<li>
+							<a href="admin" class="dropdown-item" target="_blank">
+								<i class="bi bi-crown me-2"></i>Admin
+							</a>
+						</li>
+						<li>
+							<a class="dropdown-item" id="logoutButton"
+							   href="<c:url value='login'/>" role="button">
+								<i class="bi bi-box-arrow-right me-2"></i>Logout
+							</a>
+						</li>
+					</ul>
+				</li>
+			</ul>
+		</div>
+	</div>
+</nav>
+
+<script src="<c:url value='/resources/js/layout.js'/>"></script>
+<script src="<c:url value='/resources/js/main.js'/>"></script>
diff --git a/opendcs-web-client/src/main/webapp/resources/jsp/menus/decodes/sidebar.jsp b/opendcs-web-client/src/main/webapp/resources/jsp/menus/decodes/sidebar.jsp
index 27425cdff..ecc3c309a 100644
--- a/opendcs-web-client/src/main/webapp/resources/jsp/menus/decodes/sidebar.jsp
+++ b/opendcs-web-client/src/main/webapp/resources/jsp/menus/decodes/sidebar.jsp
@@ -16,45 +16,154 @@
   --%>
 
 <%-- Main sidebar --%>
+<div
+	class="sidebar sidebar-dark sidebar-main sidebar-expand-md sidebar-fixed">
 
-<nav class="nav d-flex flex-column flex-shrink-0 p3" style="width: 30em;">
-	<ul class="list-unstyled ps-0">
-		<li class="mb-1">
-			<button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#decodes-collapse" aria-expanded="true">
-				Decodes
-			</button>
-			<div id="decodes-collapse" class="collapse <% if (request.getAttribute("tool") == "decodes") { %> show <% }%> ">
-				<a class="nav-link <% if (request.getAttribute("page") == "platforms") { %>active<% } %>" aria-current="page" href="platforms">Platforms</a>
-				<a class="nav-link <% if (request.getAttribute("page") == "sites") { %>active<% } %>" href="sites">Sites</a>
-				<a class="nav-link <% if (request.getAttribute("page") == "configs") { %>active<% } %>" href="configs">Configs</a>
-				<a class="nav-link <% if (request.getAttribute("page") == "presentations") { %>active<% } %>" href="presentation">Presentation</a>
-				<a class="nav-link <% if (request.getAttribute("page") == "routing") { %>active<% } %>" href="routing">Routing</a>
-				<a class="nav-link <% if (request.getAttribute("page") == "sources") { %>active<% } %>" href="sources">Data Sources</a>
-				<a class="nav-link <% if (request.getAttribute("page") == "netlist") { %>active<% } %>" href="netlist">Netlists</a>
-				<a class="nav-link <% if (request.getAttribute("page") == "schedule") { %>active<% } %>" href="schedule">Schedule Entry</a>
-			</div>
-		</li>
-		<li class="mb-1">
-			<button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#computations-collapse" aria-expanded="true">
-				Computations
-			</button>
-			<div id="computations-collapse" class="collapse <% if (request.getAttribute("tool") == "computations") { %> show <% }%>">
-				<a class="nav-link <% if (request.getAttribute("page") == "algorithm") { %>active<% } %>" aria-current="page" href="algorithms">Algorithms</a>
-				<a class="nav-link <% if (request.getAttribute("page") == "computations") { %>active<% } %>" href="computations">Computations</a>
-				<a class="nav-link <% if (request.getAttribute("page") == "processes") { %>active<% } %>" href="processes">Processes</a>
-			</div>
-		</li>
-		<li class="mb-1">
-			<button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed" data-bs-toggle="collapse" data-bs-target="#reflist-collapse" aria-expanded="true">
-				Reference List
-			</button>
-			<div id="reflist-collapse" class="collapse <% if (request.getAttribute("tool") == "rledit") { %> show <% }%>">
-				<a class="nav-link <% if (request.getAttribute("page") == "enumerations") { %>active<% } %>" aria-current="page" href="enumerations">Enumerations</a>
-				<a class="nav-link <% if (request.getAttribute("page") == "engineering_units") { %>active<% } %>" href="engineering_units">Engineering Units</a>
-				<a class="nav-link <% if (request.getAttribute("page") == "eu_conversions") { %>active<% } %>" href="eu_conversions">Unit Conversions</a>
-				<a class="nav-link <% if (request.getAttribute("page") == "seasons") { %>active<% } %>" href="seasons">Seasons</a>
-			</div>
-		</li>
-	</ul>
-</nav>
-<%-- /main sidebar --%>
+	<%-- Sidebar mobile toggler --%>
+	<div class="sidebar-mobile-toggler text-center">
+		<a href="#" class="sidebar-mobile-main-toggle"> <i
+			class="bi bi-arrow-left"></i>
+		</a> Navigation <a href="#" class="sidebar-mobile-expand"> <i
+			class="bi bi-fullscreen"></i> <i class="bi bi-fullscreen-exit"></i>
+		</a>
+	</div>
+	<%-- /sidebar mobile toggler --%>
+
+
+	<%-- Sidebar content --%>
+	<div class="sidebar-content">
+		<a href="#" class="nav-link sidebar-control sidebar-main-toggle d-none d-md-block" aria-label="Toggle sidebar">
+			<i class="bi bi-list"></i>
+		</a>
+		<%-- Main navigation --%>
+		<div class="card card-sidebar-mobile">
+			<ul class="nav nav-sidebar" data-nav-type="accordion">
+				<%-- Main --%>
+				
+				<li class="nav-item">
+					
+				</li>
+
+				<li
+					class="nav-item nav-item-submenu <% if (request.getAttribute("tool") == "decodes") { %> nav-item-open <% } else { %> nav-item-closed <% } %>">
+					<a href="#" class="nav-link"><i class="bi bi-files"></i> <span>Decodes
+							Database Editor</span></a>
+					<ul class="nav nav-group-sub" data-submenu-title="rl_edit"
+						style="<% if (request.getAttribute("tool") == "decodes") { %> display:block; <% } else { %> display:none; <% } %>">
+						<li
+							class="nav-item nav-item-submenu <% if (request.getAttribute("page") == "platforms") { %> nav-item-open <% } else { %> nav-item-closed <% } %>">
+							<a href="platforms" class="nav-link"> <i
+								class="bi bi-file-text"></i> <span>Platforms</span>
+						</a>
+						</li>
+						<li
+							class="nav-item nav-item-submenu <% if (request.getAttribute("page") == "sites") { %> nav-item-open <% } else { %> nav-item-closed <% } %>">
+							<a href="sites" class="nav-link"> <i
+								class="bi bi-file-text"></i> <span>Sites</span>
+						</a>
+						</li>
+						<li
+							class="nav-item nav-item-submenu <% if (request.getAttribute("page") == "configs") { %> nav-item-open <% } else { %> nav-item-closed <% } %>">
+							<a href="configs" class="nav-link"> <i
+								class="bi bi-file-text"></i> <span>Configs</span>
+						</a>
+						</li>
+						<li
+							class="nav-item nav-item-submenu <% if (request.getAttribute("page") == "presentation") { %> nav-item-open <% } else { %> nav-item-closed <% } %>">
+							<a href="presentation" class="nav-link"> <i
+								class="bi bi-file-text"></i> <span>Presentation</span>
+						</a>
+						</li>
+						<li
+							class="nav-item nav-item-submenu <% if (request.getAttribute("page") == "routing") { %> nav-item-open <% } else { %> nav-item-closed <% } %>d">
+							<a href="routing" class="nav-link"> <i
+								class="bi bi-file-text"></i> <span>Routing</span>
+						</a>
+						</li>
+						<li
+							class="nav-item nav-item-submenu <% if (request.getAttribute("page") == "sources") { %> nav-item-open <% } else { %> nav-item-closed <% } %>">
+							<a href="sources" class="nav-link"> <i
+								class="bi bi-file-text"></i> <span>Sources</span>
+						</a>
+						</li>
+						<li
+							class="nav-item nav-item-submenu <% if (request.getAttribute("page") == "netlist") { %> nav-item-open <% } else { %> nav-item-closed <% } %>">
+							<a href="netlist" class="nav-link"> <i
+								class="bi bi-file-text"></i> <span>Netlists</span>
+						</a>
+						</li>
+						<li
+							class="nav-item nav-item-submenu <% if (request.getAttribute("page") == "schedule entry") { %> nav-item-open <% } else { %> nav-item-closed <% } %>">
+							<a href="schedule" class="nav-link"> <i
+								class="bi bi-file-text"></i> <span>Schedule Entry</span>
+						</a>
+						</li>
+					</ul>
+				</li>
+				<li
+					class="nav-item nav-item-submenu <% if (request.getAttribute("tool") == "computations") { %> nav-item-open <% } else { %> nav-item-closed <% } %>">
+					<a href="#" class="nav-link"><i class="bi bi-files"></i> <span>Computations</span></a>
+					<ul class="nav nav-group-sub" data-submenu-title="rl_edit"
+						style="<% if (request.getAttribute("tool") == "computations") { %> display:block; <% } else { %> display:none; <% } %>">
+						<li
+							class="nav-item nav-item-submenu <% if (request.getAttribute("page") == "algorithms") { %> nav-item-open <% } else { %> nav-item-closed <% } %>">
+							<a href="algorithms" class="nav-link"> <i
+								class="bi bi-file-text"></i> <span>Algorithms</span>
+						</a>
+						</li>
+						<li
+							class="nav-item nav-item-submenu <% if (request.getAttribute("page") == "computations") { %> nav-item-open <% } else { %> nav-item-closed <% } %>">
+							<a href="computations" class="nav-link"> <i
+								class="bi bi-file-text"></i> <span>Computations</span>
+						</a>
+						</li>
+						<li
+							class="nav-item nav-item-submenu <% if (request.getAttribute("page") == "processes") { %> nav-item-open <% } else { %> nav-item-closed <% } %>">
+							<a href="processes" class="nav-link"> <i
+								class="bi bi-file-text"></i> <span>Processes</span>
+						</a>
+						</li>
+					</ul>
+				</li>
+				<li
+					class="nav-item nav-item-submenu <% if (request.getAttribute("tool") == "rledit") { %> nav-item-open <% } else { %> nav-item-closed <% } %>">
+					<a href="#" class="nav-link"><i class="bi bi-files"></i> <span>Reflist
+							Editor</span></a>
+					<ul class="nav nav-group-sub" data-submenu-title="rl_edit"
+						style="<% if (request.getAttribute("tool") == "rledit") { %> display:block; <% } else { %> display:none; <% } %>">
+						<li
+							class="nav-item nav-item-submenu <% if (request.getAttribute("page") == "enumerations") { %> nav-item-open <% } else { %> nav-item-closed <% } %>">
+							<a href="enumerations" class="nav-link"> <i
+								class="bi bi-file-text"></i> <span>Enumerations</span>
+						</a>
+						</li>
+						<li
+							class="nav-item nav-item-submenu <% if (request.getAttribute("page") == "engineering_units") { %> nav-item-open <% } else { %> nav-item-closed <% } %>">
+							<a href="engineering_units" class="nav-link"> <i
+								class="bi bi-file-text"></i> <span>Engineering
+									Units</span>
+						</a>
+						</li>
+						
+						<li
+							class="nav-item nav-item-submenu <%if (request.getAttribute("page") == "eu_conversions") {%> nav-item-open <%} else {%> nav-item-closed <%}%>">
+							<a href="eu_conversions" class="nav-link"> <i
+								class="bi bi-file-text"></i> <span>EU Conversions</span>
+						</a>
+						</li>
+						<li
+							class="nav-item nav-item-submenu <%if (request.getAttribute("page") == "seasons") {%> nav-item-open <%} else {%> nav-item-closed <%}%>">
+							<a href="seasons" class="nav-link"> <i
+								class="bi bi-file-text"></i> <span>Seasons</span>
+						</a>
+						</li>
+					</ul>
+				</li>
+
+			</ul>
+		</div>
+		<%-- /main navigation --%>
+	</div>
+	<%-- /sidebar content --%>
+</div>
+<%-- /main sidebar --%>
\ No newline at end of file
diff --git a/opendcs-web-client/src/main/webapp/resources/jsp/modals/notification.jsp b/opendcs-web-client/src/main/webapp/resources/jsp/modals/notification.jsp
index d6d49dda2..506a04381 100644
--- a/opendcs-web-client/src/main/webapp/resources/jsp/modals/notification.jsp
+++ b/opendcs-web-client/src/main/webapp/resources/jsp/modals/notification.jsp
@@ -17,12 +17,12 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8"
 	pageEncoding="UTF-8"%>
 <div id="notificationModal" class="modal fade" tabindex="-1"
-	data-backdrop="static" data-keyboard="false">
+	data-bs-backdrop="static" data-bs-keyboard="false">
 	<div class="modal-dialog">
 		<div class="modal-content">
 			<div class="modal-header" id="notificationModalTitleDiv">
 				<h6 class="modal-title" id="notificationModalTitle"></h6>
-				<%--<button type="button" class="close" data-dismiss="modal">&times;</button>--%>
+				<%--<button type="button" class="close" data-bs-dismiss="modal">&times;</button>--%>
 			</div>
 
 			<div class="modal-body">
@@ -31,7 +31,7 @@
 			</div>
 
 			<div class="modal-footer">
-				<button type="button" data-dismiss="modal" class="btn">OK</button>
+				<button type="button" data-bs-dismiss="modal" class="btn">OK</button>
 			</div>
 		</div>
 	</div>
diff --git a/opendcs-web-client/src/main/webapp/resources/jsp/modals/waiting.jsp b/opendcs-web-client/src/main/webapp/resources/jsp/modals/waiting.jsp
index 903f5c3b0..c4577be33 100644
--- a/opendcs-web-client/src/main/webapp/resources/jsp/modals/waiting.jsp
+++ b/opendcs-web-client/src/main/webapp/resources/jsp/modals/waiting.jsp
@@ -17,7 +17,7 @@
 
 <%-- Waiting modal --%>
 <div id="modal_waiting" class="modal fade" tabindex="-1"
-	data-keyboard="false" data-backdrop="static">
+	data-bs-keyboard="false" data-bs-backdrop="static">
 	<div class="modal-dialog">
 		<div class="modal-content">
 			<div class="modal-header bg-secondary">
diff --git a/opendcs-web-client/src/main/webapp/resources/jsp/modals/yesno.jsp b/opendcs-web-client/src/main/webapp/resources/jsp/modals/yesno.jsp
index 57e69fe6d..61ee32abc 100644
--- a/opendcs-web-client/src/main/webapp/resources/jsp/modals/yesno.jsp
+++ b/opendcs-web-client/src/main/webapp/resources/jsp/modals/yesno.jsp
@@ -21,7 +21,6 @@
         <div class="modal-content">
             <div class="modal-header" id="yesNoModalTitleDiv">
                 <h6 class="modal-title" id="yesNoModalTitle"></h6>
-                <%--<button type="button" class="close" data-dismiss="modal">&times;</button>--%>
             </div>
 
             <div class="modal-body">
@@ -30,9 +29,9 @@
             </div>
 
             <div class="modal-footer">
-                <button type="button" data-dismiss="modal" class="btn"
+                <button type="button" data-bs-dismiss="modal" class="btn"
                     id="modal_yesno_no_button">No</button>
-                <button type="button" data-dismiss="modal" class="btn"
+                <button type="button" data-bs-dismiss="modal" class="btn"
                     id="modal_yesno_yes_button">Yes</button>
             </div>
         </div>
diff --git a/opendcs-web-client/src/main/webapp/routing.jsp b/opendcs-web-client/src/main/webapp/routing.jsp
index 22561d9e2..82fbd962f 100644
--- a/opendcs-web-client/src/main/webapp/routing.jsp
+++ b/opendcs-web-client/src/main/webapp/routing.jsp
@@ -1,7 +1,8 @@
 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
 <!DOCTYPE html>
 <html lang="en">
-	<jsp:include page="/resources/jsp/headers/decodes.jsp" />   
+	<jsp:include page="/resources/jsp/headers/decodes.jsp" />
+
 	<body class="navbar-top">
 		<!-- Main navbar -->
 		<jsp:include page="/resources/jsp/menus/decodes/main.jsp" />   
@@ -18,7 +19,7 @@
 					<div class="page-header-content header-elements-md-inline">
 						<div class="page-title d-flex">
 							<h4><span class="font-weight-semibold">OpenDCS</span> - Routing</h4>
-							<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
+							<a href="#" class="header-elements-toggle text-default d-md-none"><i class="bi bi-three-dots-vertical"></i></a>
 						</div>
 					</div>  
 				</div> <!-- /page header -->
@@ -57,7 +58,7 @@
 
 
 	<!-- Routing modal -->
-	<div id="modal_routing" class="modal fade" tabindex="-1" data-keyboard="false" data-backdrop="static">
+	<div id="modal_routing" class="modal fade" tabindex="-1" data-bs-keyboard="false" data-bs-backdrop="static">
 		<div class="modal-dialog modal-dialog-scrollable opendcs-modal-90">
 			<div class="modal-content h-100">
 				<div class="modal-header bg-secondary">
@@ -126,21 +127,21 @@
 								<div class="form-group row">
 									<div class="text-right nobr col-6">
 									
-										<div class="form-check form-check-switchery">
+										<div class="form-check form-switch">
 											<label class="form-check-label float-left">
 											In-line computations
 											</label>
-												<input type="checkbox" id="inlineComputationsCheckbox" class="form-check-input-switchery" data-fouc>
+												<input type="checkbox" id="inlineComputationsCheckbox" class="form-check-input" >
 												
 											
 										</div>
 									</div>
 									<div class="text-right nobr col-4">
-										<div class="form-check form-check-switchery">
+										<div class="form-check form-switch">
 											<label class="form-check-label float-left">
 												Is Production
 											</label>
-												<input type="checkbox" id="isProductionCheckbox" class="form-check-input-switchery" data-fouc>
+												<input type="checkbox" id="isProductionCheckbox" class="form-check-input" >
 												
 											
 										</div>
@@ -278,29 +279,29 @@
 									<div class="form-group pt-2">
 											<label class="font-weight-semibold">Platform/Message Types</label>
 												
-											<div class="form-check form-check-switchery">
+											<div class="form-check form-switch">
 												<label class="form-check-label">
-													<input type="checkbox" id="goesSelfTimedCheckbox" class="form-check-input-switchery" data-fouc>
+													<input type="checkbox" id="goesSelfTimedCheckbox" class="form-check-input" >
 													GOES Self Timed
 												</label>
 											</div>
-											<div class="form-check form-check-switchery">
+											<div class="form-check form-switch">
 												<label class="form-check-label">
-													<input type="checkbox" id="goesRandomCheckbox" class="form-check-input-switchery" data-fouc>
+													<input type="checkbox" id="goesRandomCheckbox" class="form-check-input" >
 													GOES Random
 												</label>
 											</div>
-											<div class="form-check form-check-switchery">
+											<div class="form-check form-switch">
 												<label class="form-check-label">
-													<input type="checkbox" id="qualityNotificationsCheckbox" class="form-check-input-switchery" data-fouc>
+													<input type="checkbox" id="qualityNotificationsCheckbox" class="form-check-input" >
 													Quality Notifications
 												</label>
 											</div>
 											<div class="row">
 												<div class="col-6">
-													<div class="form-check form-check-switchery">
+													<div class="form-check form-switch">
 														<label class="form-check-label">
-															<input type="checkbox" id="goesSpacecraftCheckbox" class="form-check-input-switchery" data-fouc>
+															<input type="checkbox" id="goesSpacecraftCheckbox" class="form-check-input" >
 															GOES Spacecraft
 														</label>
 													</div>
@@ -312,23 +313,23 @@
 													</select>
 												</div>
 											</div>
-											<div class="form-check form-check-switchery">
+											<div class="form-check form-switch">
 												<label class="form-check-label">
-													<input type="checkbox" id="iridiumCheckbox" class="form-check-input-switchery" data-fouc>
+													<input type="checkbox" id="iridiumCheckbox" class="form-check-input" >
 													Iridium
 												</label>
 											</div>
-											<div class="form-check form-check-switchery">
+											<div class="form-check form-switch">
 												<label class="form-check-label">
-													<input type="checkbox" id="networkModemDcpCheckbox" class="form-check-input-switchery" data-fouc>
+													<input type="checkbox" id="networkModemDcpCheckbox" class="form-check-input" >
 													Network/Modem DCP
 												</label>
 											</div>
 											<div class="row">
 												<div class="col-6">
-													<div class="form-check form-check-switchery">
+													<div class="form-check form-switch">
 														<label class="form-check-label">
-															<input type="checkbox" id="parityCheckbox" class="form-check-input-switchery" data-fouc>
+															<input type="checkbox" id="parityCheckbox" class="form-check-input" >
 															Parity
 														</label>
 													</div>
@@ -347,8 +348,7 @@
 					</div>
 				</div>
 				<div class="modal-footer">
-					<!--<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>-->
-					<button type="button" class="btn btn-secondary" id="cancelRoutingModalButton" data-dismiss="modal">Cancel</button>
+					<button type="button" class="btn btn-secondary" id="cancelRoutingModalButton" data-bs-dismiss="modal">Cancel</button>
 					<button type="button" class="btn btn-success" id="saveRoutingModalButton">Save</button>
 				</div>
 			</div>
@@ -357,7 +357,7 @@
 	<!-- /routing modal -->
 
 	<!-- Platform selection modal -->
-	<div id="modal_platformselection" class="modal fade" tabindex="-1" data-keyboard="false" data-backdrop="static">
+	<div id="modal_platformselection" class="modal fade" tabindex="-1" data-bs-keyboard="false" data-bs-backdrop="static">
 	    <div class="modal-dialog modal-dialog-scrollable opendcs-modal-90">
 	        <div class="modal-content">
 	            <div class="modal-header bg-secondary">
@@ -420,8 +420,7 @@
 	            </div>
 	      
 	            <div class="modal-footer">
-	                <!-- <button type="button" class="btn btn-danger  mr-auto" id="deleteNetlistModalButton">Delete</button> -->
-	                <button type="button" class="btn btn-secondary" id="cancelPlatformModalButton" data-dismiss="modal">Cancel</button>
+	                <button type="button" class="btn btn-secondary" id="cancelPlatformModalButton" data-bs-dismiss="modal">Cancel</button>
 	                <button type="button" class="btn btn-success" id="addPlatformModalButton">Update</button>
 	            </div>
 	        </div>
@@ -430,11 +429,10 @@
 	<!-- /platform selection modal -->
 
 
-<jsp:include page="/resources/jsp/includes/decodes.jsp" /> 
-<script src="/webjars/switchery/switchery.js"></script>
-<script src="/webjars/bootstrap-switch/js/bootstrap-switch.min.js"></script>
-<script src="/webjars/uniform/jquery.uniform.min.js"></script>
-<script src="/webjars/datatables/js/dataTables.min.js"></script>
+<jsp:include page="/resources/jsp/includes/decodes.jsp" />
+
+
+<script src="../resources/js/datatables/datatables.js"></script>
 <script src="../resources/js/datatables/helpers.js"></script>
 <script src="../resources/js/lib/time.js"></script>
 <script src="../resources/js/lib/dom_utilities.js"></script>
diff --git a/opendcs-web-client/src/main/webapp/schedule.jsp b/opendcs-web-client/src/main/webapp/schedule.jsp
index f24367555..732d4637d 100644
--- a/opendcs-web-client/src/main/webapp/schedule.jsp
+++ b/opendcs-web-client/src/main/webapp/schedule.jsp
@@ -22,7 +22,7 @@
 							Entry
 						</h4>
 						<a href="#" class="header-elements-toggle text-default d-md-none"><i
-							class="icon-more"></i></a>
+							class="bi bi-three-dots-vertical"></i></a>
 					</div>
 				</div>
 			</div>
@@ -68,7 +68,7 @@
 
 <!-- Schedule Modal -->
 <div id="modal_schedule" class="modal fade" tabindex="-1"
-	data-keyboard="false" data-backdrop="static">
+	data-bs-keyboard="false" data-bs-backdrop="static">
 	<div class="modal-dialog modal-dialog-scrollable opendcs-modal-90">
 		<div class="modal-content">
 			<div class="modal-header bg-secondary">
@@ -86,11 +86,11 @@
 
 								<div class="form-group row">
 									<label class="col-form-label col-lg-4">Enabled</label>
-									<div class="col-lg-8 form-check form-check-switchery"
+									<div class="col-lg-8 form-check form-switch"
 										id="editCbtDiv">
 										<label class="form-check-label"> <input
 											type="checkbox" id="scheduleEntryEnabled"
-											class="form-check-input-switchery" data-fouc>
+											class="form-check-input" >
 										</label>
 
 									</div>
@@ -147,7 +147,7 @@
 												<label class="form-check-label exec-schedule-check"> <input
 													type="radio" name="runFreq"
 													class="form-check-input-styled-primary" value="continuous"
-													checked data-fouc> Run Continuously
+													checked > Run Continuously
 												</label>
 											</div>
 										</div>
@@ -159,7 +159,7 @@
 												<label class="form-check-label exec-schedule-check"> <input
 													type="radio" name="runFreq"
 													class="form-check-input-styled-primary" value="once"
-													data-fouc> Run Once
+													> Run Once
 												</label>
 											</div>
 											<div class="col-md-9">
@@ -184,7 +184,7 @@
 												<label class="form-check-label exec-schedule-check"> <input
 													type="radio" name="runFreq"
 													class="form-check-input-styled-primary" value="runevery"
-													data-fouc> Run Every
+													> Run Every
 												</label>
 											</div>
 											<div class="col-md-9">
@@ -224,10 +224,8 @@
 			</div>
 
 			<div class="modal-footer mt-3">
-				<!--<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>-->
-				<!-- <button type="button" class="btn btn-danger  mr-auto" id="deleteSourceModalButton">Delete</button> -->
 				<button type="button" class="btn btn-secondary"
-					id="cancelModalButton" data-dismiss="modal">Cancel</button>
+					id="cancelModalButton" data-bs-dismiss="modal">Cancel</button>
 				<button type="button" class="btn btn-success" id="saveModalButton">Save</button>
 			</div>
 		</div>
@@ -238,9 +236,7 @@
 
 <jsp:include page="/resources/jsp/includes/decodes.jsp" />
 
-<script src="/webjars/switchery/switchery.js"></script>
-<script src="/webjars/bootstrap-switch/js/bootstrap-switch.min.js"></script>
-<script src="/webjars/uniform/jquery.uniform.min.js"></script>
+
 <script src="../resources/js/schedule.js"></script>
 <script src="../resources/js/lib/time.js"></script>
 <script src="../resources/js/datatables/helpers.js"></script>
diff --git a/opendcs-web-client/src/main/webapp/seasons.jsp b/opendcs-web-client/src/main/webapp/seasons.jsp
index 49ddc5494..313dbaae8 100644
--- a/opendcs-web-client/src/main/webapp/seasons.jsp
+++ b/opendcs-web-client/src/main/webapp/seasons.jsp
@@ -18,7 +18,7 @@
 					<div class="page-header-content header-elements-md-inline">
 						<div class="page-title d-flex">
 							<h4><span class="font-weight-semibold">OpenDCS</span> - Seasons</h4>
-							<a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
+							<a href="#" class="header-elements-toggle text-default d-md-none"><i class="bi bi-three-dots-vertical"></i></a>
 						</div>
 					</div>  
 				</div> <!-- /page header -->
@@ -61,12 +61,10 @@
 	
 	
 	
-	<jsp:include page="/resources/jsp/includes/decodes.jsp" /> 
-	
-<script src="/webjars/switchery/switchery.js"></script>
-<script src="/webjars/bootstrap-switch/js/bootstrap-switch.min.js"></script>
-<script src="/webjars/uniform/jquery.uniform.min.js"></script>
-	<script src="../resources/js/datatables/helpers.js"></script>
+	<jsp:include page="/resources/jsp/includes/decodes.jsp" />
+
+
+<script src="../resources/js/datatables/helpers.js"></script>
 	<script src="../resources/js/lib/dom_utilities.js"></script>
 	<script src="../resources/js/lib/object_utilities.js"></script>
 	<script src="../resources/js/lib/date_utilities.js"></script>
diff --git a/opendcs-web-client/src/main/webapp/sites.jsp b/opendcs-web-client/src/main/webapp/sites.jsp
index 4e4a806da..c188c9578 100644
--- a/opendcs-web-client/src/main/webapp/sites.jsp
+++ b/opendcs-web-client/src/main/webapp/sites.jsp
@@ -21,7 +21,7 @@
 							<span class="font-weight-semibold">OpenDCS</span> - Sites
 						</h4>
 						<a href="#" class="header-elements-toggle text-default d-md-none"><i
-							class="icon-more"></i></a>
+							class="bi bi-three-dots-vertical"></i></a>
 					</div>
 				</div>
 			</div>
@@ -64,7 +64,7 @@
 
 <!-- Site modal -->
 <div id="modal_site" class="modal fade" tabindex="-1"
-	data-keyboard="false" data-backdrop="static">
+	data-bs-keyboard="false" data-bs-backdrop="static">
 	<div
 		class="modal-dialog modal-dialog-scrollable modal-med opendcs-modal-90">
 		<div class="modal-content">
@@ -232,10 +232,8 @@
 			</div>
 
 			<div class="modal-footer">
-				<!--<button type="button" class="btn btn-link" data-dismiss="modal">Close</button>-->
-				<!-- <button type="button" class="btn btn-danger  mr-auto" id="deleteSourceModalButton">Delete</button>-->
 				<button type="button" class="btn btn-secondary"
-					id="cancelSiteModalButton" data-dismiss="modal">Cancel</button>
+					id="cancelSiteModalButton" data-bs-dismiss="modal">Cancel</button>
 				<button type="button" class="btn btn-success"
 					id="saveSiteModalButton">Save</button>
 			</div>
@@ -246,10 +244,9 @@
 
 <jsp:include page="/resources/jsp/includes/decodes.jsp" />
 
-<script src="/webjars/jquery-validation/jquery.validate.min.js"></script>
 <script src="../resources/js/lib/time.js"></script>
 <script src="../resources/js/datatables/helpers.js"></script>
-<script src="/webjars/datatables/js/dataTables.min.js"></script>
+<script src="../resources/js/datatables/datatables.js"></script>
 <script src="../resources/js/lib/dom_utilities.js"></script>
 <script src="../resources/js/sites.js"></script>
 </html>
\ No newline at end of file
diff --git a/opendcs-web-client/src/main/webapp/sources.jsp b/opendcs-web-client/src/main/webapp/sources.jsp
index 35bb75a15..e20a1185b 100644
--- a/opendcs-web-client/src/main/webapp/sources.jsp
+++ b/opendcs-web-client/src/main/webapp/sources.jsp
@@ -21,7 +21,7 @@
 							<span class="font-weight-semibold">OpenDCS</span> - Sources
 						</h4>
 						<a href="#" class="header-elements-toggle text-default d-md-none"><i
-							class="icon-more"></i></a>
+							class="bi bi-three-dots-vertical"></i></a>
 					</div>
 				</div>
 			</div>
@@ -65,7 +65,7 @@
 
 <!-- Success modal -->
 <div id="modal_success" class="modal fade sourceDialog" tabindex="-1"
-	data-keyboard="false" data-backdrop="static">
+	data-bs-keyboard="false" data-bs-backdrop="static">
 	<div class="modal-dialog modal-dialog-scrollable opendcs-modal-90">
 		<div class="modal-content h-100">
 			<div class="modal-header opendcs-modal-header-medium bg-secondary">
@@ -136,7 +136,7 @@
 
 			<div class="modal-footer">
 				<button type="button" class="btn btn-secondary"
-					id="cancelSourcesModalButton" data-dismiss="modal">Cancel</button>
+					id="cancelSourcesModalButton" data-bs-dismiss="modal">Cancel</button>
 				<button type="button" class="btn btn-success"
 					id="saveSourcesModalButton">Save</button>
 			</div>
@@ -148,6 +148,6 @@
 <jsp:include page="/resources/jsp/includes/decodes.jsp" />
 <script src="../resources/js/datatables/helpers.js"></script>
 <script src="../resources/js/sources.js"></script>
-<script src="/webjars/datatables-rowreorder/js/dataTables.rowReorder.min.js"></script>
+<script src="../resources/js/datatables/dataTables.rowReorder.min.js"></script>
 
 </html>
\ No newline at end of file