diff --git a/src/frontend/partials/controls.eta.html b/src/frontend/partials/controls.eta.html
index 68e032c..df601fa 100644
--- a/src/frontend/partials/controls.eta.html
+++ b/src/frontend/partials/controls.eta.html
@@ -126,7 +126,7 @@
 							data-bs-target="#collapseSettingsStorages"
 							aria-expanded="<%= it.active == 'SETT_STORE' ? 'true' : 'false'%>"
 							aria-controls="collapseSettingsStorages">
-							<i class="bi bi-caret-left-fill dropdownIndicator"></i>
+							<i class="bi bi-caret-left-fill dropdownIndicator" data-ref-target="#collapseSettingsStorages"></i>
 						</span>
 					</a>
 
@@ -159,20 +159,18 @@
 						<a class="nav-link ms-4 <%= it.active == 'SETT_IMPORT_JSON' ? 'active' : ''%>" href="/manage/import/json"> <i class="bi bi-filetype-json"></i> JSON Import</a>
 					</div>
 				</ul>
-				
 			</div>
 			<!-- Align the mode picker at the bottom of the navbar -->
 
 			<ul class="nav flex-column mb-2 position-absolute bottom-0 align-items-center w-100">
 				<div class="input-group mb-3 justify-content-center w-100">
-					
 					<label class="btn btn-secondary" for="mode_light"><i class="bi bi-brightness-high"></i></label>
-					<input type="radio" class="btn-check" name="options" id="mode_light" autocomplete="off" >
-	
-					<input type="radio" class="btn-check" name="options" id="mode_auto" autocomplete="off" checked>
+					<input type="radio" class="btn-check" name="options" id="mode_light" autocomplete="off" />
+
+					<input type="radio" class="btn-check" name="options" id="mode_auto" autocomplete="off" checked />
 					<label class="btn btn-secondary" for="mode_auto"><i class="bi bi-magic"></i></label>
-	
-					<input type="radio" class="btn-check" name="options" id="mode_dark" autocomplete="off">
+
+					<input type="radio" class="btn-check" name="options" id="mode_dark" autocomplete="off" />
 					<label class="btn btn-secondary" for="mode_dark"><i class="bi bi-moon"></i></label>
 				</div>
 				<script>
@@ -189,20 +187,21 @@
 					}
 					modeLight.addEventListener('click', () => {
 						localStorage.setItem('bs.theme', 'light');
-						document.documentElement.setAttribute('data-bs-theme', 'light');
+						updateColorMode()
+						//document.documentElement.setAttribute('data-bs-theme', 'light');
 					});
 					modeAuto.addEventListener('click', () => {
 						localStorage.setItem('bs.theme', 'auto');
-						document.documentElement.setAttribute('data-bs-theme', 'auto');
+						updateColorMode()
+						//document.documentElement.setAttribute('data-bs-theme', 'auto');
 					});
 					modeDark.addEventListener('click', () => {
 						localStorage.setItem('bs.theme', 'dark');
-						document.documentElement.setAttribute('data-bs-theme', 'dark');
+						updateColorMode()
+						//document.documentElement.setAttribute('data-bs-theme', 'dark');
 					});
 				</script>
-		</ul>
-			
-			      
+			</ul>
 		</nav>
 
 		<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4" style="min-height: 100%">
diff --git a/static/css/dashboard.css b/static/css/dashboard.css
index 8683fbd..0c183eb 100644
--- a/static/css/dashboard.css
+++ b/static/css/dashboard.css
@@ -108,10 +108,17 @@ body {
 	transform: rotate(-90deg) !important;
 	transition: 0.5s;
 }
-
-.dropdownIndicator {
+.derotate {
+	transform: rotate(0deg) !important;
 	transition: 0.5s;
 }
+.derotate::before {
+	transform: rotate(0deg) !important;
+	transition: 0.5s;
+}
+.dropdownIndicator {
+	transition: all 0.5s;
+}
 
 
 /*
diff --git a/static/js/handleSidebarTriangles.js b/static/js/handleSidebarTriangles.js
index 02e7fe0..f330b34 100644
--- a/static/js/handleSidebarTriangles.js
+++ b/static/js/handleSidebarTriangles.js
@@ -1,18 +1,22 @@
 const trinagles = $('.dropdownIndicator');
-//const containers = $('');
+console.log(`Found ${trinagles.length} triangles`)
+
 
 trinagles.each(function () {
 	var target = $(this.dataset.refTarget);
+	var triTar = $(this);
+	// Apply rotate if target is open
+	if (target.hasClass('show')) {
+		$(this).addClass('rotate');
+	}
+
+	console.log('target', target);
 	target.on('show.bs.collapse', function () {
-		//$(this).parent.addClass('rotate');
-		 $(this).parent().find('.dropdownIndicator').addClass('rotate');
-		 console.log($(this).parent().find('.dropdownIndicator'));
-		console.log('show');
+		$(triTar).addClass('rotate');
+		$(triTar).removeClass('derotate');
 	});
 	target.on('hide.bs.collapse', function () {
-		//$(this).parent.removeClass('rotate');
-		 $(this).parent().find('.dropdownIndicator').removeClass('rotate');
-		console.log('hide');
+		$(triTar).removeClass('rotate');
+		$(triTar).addClass('derotate');
 	});
-	// bootstrap.Collapse.getOrCreateInstance(document.querySelector(this.dataset.refTarget))
 });