diff --git a/apps/client/src/widgets/note_map.ts b/apps/client/src/widgets/note_map.ts
index 36b4ec98e..e6d6acc70 100644
--- a/apps/client/src/widgets/note_map.ts
+++ b/apps/client/src/widgets/note_map.ts
@@ -15,8 +15,7 @@ const esc = utils.escapeHtml;
 const TPL = /*html*/`<div class="note-map-widget">
     <!-- UI for dragging Notes and link force -->
 
-    <div class="btn-group-sm fixnodes-type-switcher content-floating-buttons bottom-left" role="group">
-      <button type="button" data-toggle="button" class="btn bx bx-lock-alt tn-tool-button" title="${t("note_map.fix-nodes")}" data-type="moveable"></button>
+      <button type="button" data-toggle="button" class="btn  tn-tool-button" title="${}" data-type="moveable"></button>
       <input type="range" class="slider" min="1" title="${t("note_map.link-distance")}" max="100" value="40" >
     </div>
 
@@ -70,22 +69,8 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
 
         const ForceGraph = (await import("force-graph")).default;
         this.graph = new ForceGraph(this.$container[0])
-            //Code to fixate nodes when dragged
-            .onNodeDragEnd((node) => {
-                if (this.fixNodes) {
-                    node.fx = node.x;
-                    node.fy = node.y;
-                } else {
-                    node.fx = undefined;
-                    node.fy = undefined;
-                }
-            })
-
             // Rendering code was here
 
-
-
-
         const nodeLinkRatio = data.nodes.length / data.links.length;
         const magnifiedRatio = Math.pow(nodeLinkRatio, 1.5);
         const charge = -20 / magnifiedRatio;
diff --git a/apps/client/src/widgets/note_map/NoteMap.tsx b/apps/client/src/widgets/note_map/NoteMap.tsx
index 87462499c..6f20afa8f 100644
--- a/apps/client/src/widgets/note_map/NoteMap.tsx
+++ b/apps/client/src/widgets/note_map/NoteMap.tsx
@@ -26,6 +26,7 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
 
     const graphRef = useRef<ForceGraph<NodeObject, LinkObject<NodeObject>>>();
     const containerSize = useElementSize(parentRef);
+    const [ fixNodes, setFixNodes ] = useState(false);
 
     // Build the note graph instance.
     useEffect(() => {
@@ -80,6 +81,19 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
         graphRef.current.width(containerSize.width).height(containerSize.height);
     }, [ containerSize?.width, containerSize?.height ]);
 
+    // Fixing nodes when dragged.
+    useEffect(() => {
+        graphRef.current?.onNodeDragEnd((node) => {
+            if (fixNodes) {
+                node.fx = node.x;
+                node.fy = node.y;
+            } else {
+                node.fx = undefined;
+                node.fy = undefined;
+            }
+        })
+    }, [ fixNodes ]);
+
     return (
         <div className="note-map-widget">
             <div className="btn-group btn-group-sm map-type-switcher content-floating-buttons top-left" role="group">
@@ -87,6 +101,15 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
                 <MapTypeSwitcher type="tree" icon="bx bx-sitemap" text={t("note-map.button-tree-map")} currentMapType={mapType} setMapType={setMapType} />
             </div>
 
+            <div class="btn-group-sm fixnodes-type-switcher content-floating-buttons bottom-left" role="group">
+                <ActionButton
+                    icon="bx bx-lock-alt"
+                    text={t("note_map.fix-nodes")}
+                    className={fixNodes ? "toggled" : ""}
+                    onClick={() => setFixNodes(!fixNodes)}
+                />
+            </div>
+
             <div ref={styleResolverRef} class="style-resolver" />
             <div ref={containerRef} className="note-map-container" />
         </div>