diff --git a/apps/client/src/widgets/note_map.ts b/apps/client/src/widgets/note_map.ts
index 3e0bda763..848394a3a 100644
--- a/apps/client/src/widgets/note_map.ts
+++ b/apps/client/src/widgets/note_map.ts
@@ -34,6 +34,7 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
     private fixNodes: boolean;
     private widgetMode: WidgetMode;
 
+    private themeStyle!: string;
     private $container!: JQuery<HTMLElement>;
     private $fixNodesButton!: JQuery<HTMLElement>;
     graph!: ForceGraph;
@@ -80,28 +81,9 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
                 }
             })
 
-            // set link width to immitate a highlight effekt. Checking the condition if any links are saved in the previous defined set highlightlinks
-            .linkWidth((link) => (highlightLinks.has(link) ? 3 : 0.4))
-            .linkColor((link) => (highlightLinks.has(link) ? "white" : this.cssData.mutedTextColor))
-            .linkDirectionalArrowLength(4)
-            .linkDirectionalArrowRelPos(0.95)
-
             // Rendering code was here
 
-            .nodePointerAreaPaint((node, _, ctx) => this.paintNode(node as Node, this.getColorForNode(node as Node), ctx))
-            .nodePointerAreaPaint((node, color, ctx) => {
-                if (!node.id) {
-                    return;
-                }
 
-                ctx.fillStyle = color;
-                ctx.beginPath();
-                if (node.x && node.y) {
-                    ctx.arc(node.x, node.y, this.noteIdToSizeMap[node.id], 0, 2 * Math.PI, false);
-                }
-                ctx.fill();
-            })
-            .nodeLabel((node) => esc((node as Node).name))
             .onNodeClick((node) => {
                 if (node.id) {
                     appContext.tabManager.getActiveContext()?.setNote((node as Node).id);
diff --git a/apps/client/src/widgets/note_map/rendering.ts b/apps/client/src/widgets/note_map/rendering.ts
index 1f9fa89eb..7d05a1eb8 100644
--- a/apps/client/src/widgets/note_map/rendering.ts
+++ b/apps/client/src/widgets/note_map/rendering.ts
@@ -133,8 +133,29 @@ export function setupRendering(graph: ForceGraph, { noteId, themeStyle, widgetMo
             hoverNode = node || null;
             highlightLinks.clear();
         })
+        .nodePointerAreaPaint((node, _, ctx) => paintNode(node as Node, getColorForNode(node as Node, noteId, themeStyle, widgetMode), ctx))
+        .nodePointerAreaPaint((node, color, ctx) => {
+            if (!node.id) {
+                return;
+            }
+
+            ctx.fillStyle = color;
+            ctx.beginPath();
+            if (node.x && node.y) {
+                ctx.arc(node.x, node.y, noteIdToSizeMap[node.id], 0, 2 * Math.PI, false);
+            }
+            ctx.fill();
+        })
+        .nodeLabel((node) => escapeHtml((node as Node).name))
         .onZoom((zoom) => zoomLevel = zoom.k);
 
+    // set link width to immitate a highlight effect. Checking the condition if any links are saved in the previous defined set highlightlinks
+    graph
+        .linkWidth((link) => (highlightLinks.has(link) ? 3 : 0.4))
+        .linkColor((link) => (highlightLinks.has(link) ? "white" : cssData.mutedTextColor))
+        .linkDirectionalArrowLength(4)
+        .linkDirectionalArrowRelPos(0.95)
+
     // Link-specific config
     if (mapType) {
         graph