diff --git a/apps/client/src/widgets/note_map.ts b/apps/client/src/widgets/note_map.ts
index e6d6acc70..44e81dd4e 100644
--- a/apps/client/src/widgets/note_map.ts
+++ b/apps/client/src/widgets/note_map.ts
@@ -53,15 +53,6 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
         this.$fixNodesButton = this.$widget.find(".fixnodes-type-switcher > button");
 
         new ResizeObserver(() => this.setDimensions()).observe(this.$container[0]);
-
-        // Reading the status of the Drag nodes Ui element. Changing it´s color when activated.
-        // Reading Force value of the link distance.
-        this.$fixNodesButton.on("click", async (event) => {
-            this.fixNodes = !this.fixNodes;
-            this.$fixNodesButton.toggleClass("toggled", this.fixNodes);
-        });
-
-        super.doRender();
     }
 
     async refreshWithNote(note: FNote) {
diff --git a/apps/client/src/widgets/note_map/NoteMap.css b/apps/client/src/widgets/note_map/NoteMap.css
index 836444883..e350af739 100644
--- a/apps/client/src/widgets/note_map/NoteMap.css
+++ b/apps/client/src/widgets/note_map/NoteMap.css
@@ -11,11 +11,6 @@
     border-radius: .2rem;
 }
 
-.fixnodes-type-switcher button.toggled {
-    background: var(--active-item-background-color);
-    color: var(--active-item-text-color);
-}
-
 /* Start of styling the slider */
 .fixnodes-type-switcher input[type="range"] {
 
diff --git a/apps/client/src/widgets/note_map/NoteMap.tsx b/apps/client/src/widgets/note_map/NoteMap.tsx
index 6f20afa8f..4468517e9 100644
--- a/apps/client/src/widgets/note_map/NoteMap.tsx
+++ b/apps/client/src/widgets/note_map/NoteMap.tsx
@@ -105,8 +105,9 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
                 <ActionButton
                     icon="bx bx-lock-alt"
                     text={t("note_map.fix-nodes")}
-                    className={fixNodes ? "toggled" : ""}
+                    className={fixNodes ? "active" : ""}
                     onClick={() => setFixNodes(!fixNodes)}
+                    frame
                 />
             </div>
 
@@ -126,7 +127,7 @@ function MapTypeSwitcher({ icon, text, type, currentMapType, setMapType }: {
     return (
         <ActionButton
             icon={icon} text={text}
-            disabled={currentMapType === type}
+            active={currentMapType === type}
             onClick={() => setMapType(type)}
             frame
         />
diff --git a/apps/client/src/widgets/react/ActionButton.tsx b/apps/client/src/widgets/react/ActionButton.tsx
index bb5f58eb3..28489005d 100644
--- a/apps/client/src/widgets/react/ActionButton.tsx
+++ b/apps/client/src/widgets/react/ActionButton.tsx
@@ -12,10 +12,11 @@ export interface ActionButtonProps {
     triggerCommand?: CommandNames;
     noIconActionClass?: boolean;
     frame?: boolean;
+    active?: boolean;
     disabled?: boolean;
 }
 
-export default function ActionButton({ text, icon, className, onClick, triggerCommand, titlePosition, noIconActionClass, frame, disabled }: ActionButtonProps) {
+export default function ActionButton({ text, icon, className, onClick, triggerCommand, titlePosition, noIconActionClass, frame, active, disabled }: ActionButtonProps) {
     const buttonRef = useRef<HTMLButtonElement>(null);
     const [ keyboardShortcut, setKeyboardShortcut ] = useState<string[]>();
 
@@ -33,7 +34,7 @@ export default function ActionButton({ text, icon, className, onClick, triggerCo
 
     return <button
         ref={buttonRef}
-        class={`${className ?? ""} ${!noIconActionClass ? "icon-action" : "btn"} ${icon} ${frame ? "btn btn-primary" : ""} ${disabled ? "disabled" : ""}`}
+        class={`${className ?? ""} ${!noIconActionClass ? "icon-action" : "btn"} ${icon} ${frame ? "btn btn-primary" : ""} ${disabled ? "disabled" : ""} ${active ? "active" : ""}`}
         onClick={onClick}
         data-trigger-command={triggerCommand}
         disabled={disabled}