diff --git a/web/model-manager.css b/web/model-manager.css
index c851808..352adbc 100644
--- a/web/model-manager.css
+++ b/web/model-manager.css
@@ -35,6 +35,11 @@
     left: 75%;
 }
 
+.model-manager .sidebar-buttons .sidebar-button-active {
+    border-color: var(--fg-color);
+    color: var(--fg-color);
+}
+
 /* common */
 .model-manager h1 {
     min-width: 0;
diff --git a/web/model-manager.js b/web/model-manager.js
index 377ddc0..c964852 100644
--- a/web/model-manager.js
+++ b/web/model-manager.js
@@ -3239,9 +3239,15 @@ class SidebarButtons {
         const modelManager = this.#modelManager.element;
         const sidebarButtons = this.element.children;
 
+        const buttonActiveState = "sidebar-button-active";
+        for (let i = 0; i < sidebarButtons.length; i++) {
+            sidebarButtons[i].classList.remove(buttonActiveState);
+        }
+
         let buttonIndex;
         for (buttonIndex = 0; buttonIndex < sidebarButtons.length; buttonIndex++) {
-            if (sidebarButtons[buttonIndex] === button) {
+            const sidebarButton = sidebarButtons[buttonIndex];
+            if (sidebarButton === button) {
                 break;
             }
         }
@@ -3259,6 +3265,8 @@ class SidebarButtons {
         if (stateIndex != buttonIndex) {
             const newSidebarState = sidebarStates[buttonIndex];
             modelManager.classList.add(newSidebarState);
+            const sidebarButton = sidebarButtons[buttonIndex];
+            sidebarButton.classList.add(buttonActiveState);
         }
     }