diff --git a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
index a206079629f6344300b4fa13fa0bd6181be3552c..9f18518daab337c819ceb7ed06d969cae09625d8 100644
--- a/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
+++ b/libs/shared/lib/vis/visualizations/nodelinkvis/components/NLPixi.tsx
@@ -17,7 +17,7 @@ import {
 } from 'pixi.js';
 import { useAppDispatch, useML, useSearchResultData } from '../../../../data-access';
 import { NLPopup } from './NLPopup';
-import { hslStringToHex, nodeColor, nodeColorHex } from './utils';
+import { hslStringToHex, nodeColor } from './utils';
 import { CytoscapeLayout, GraphologyLayout, LayoutFactory, Layouts } from '../../../../graph-layout';
 import { MultiGraph } from 'graphology';
 import { Viewport } from 'pixi-viewport';
@@ -25,7 +25,6 @@ import { NodelinkVisProps } from '../nodelinkvis';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@graphpolaris/shared/lib/components/tooltip';
 import { MovedEvent } from 'pixi-viewport/dist/types';
 import { ConstructionOutlined } from '@mui/icons-material';
-import { CardToolTipVis, CardToolTipVisProps } from '@graphpolaris/shared/lib/components/CardToolTipVis';
 
 type Props = {
   onClick: (event?: { node: NodeTypeD3; pos: IPointData }) => void;
@@ -221,17 +220,17 @@ export const NLPixi = (props: Props) => {
     },
     onZoom(event: FederatedPointerEvent) {
       const scale = viewport.current!.transform.scale.x;
-      
+
       if (graph.current.nodes.length < config.LABEL_MAX_NODES) {
-        labelLayer.alpha = (scale > 2) ? Math.min(1, (scale - 2) * 3) : 0;
+        labelLayer.alpha = scale > 2 ? Math.min(1, (scale - 2) * 3) : 0;
 
         if (labelLayer.alpha > 0) {
           labelLayer.renderable = true;
-          
-          const scale  = 1 / viewport.current!.scale.x;  // starts from 0.5 down to 0.
+
+          const scale = 1 / viewport.current!.scale.x; // starts from 0.5 down to 0.
 
           // Only change the fontSize for specific intervals, continuous change has too big of an impact on performance
-          const fontSize = (scale < 0.1) ? 30 : (scale < 0.2) ? 40 : (scale < 0.3) ? 50 : 60;
+          const fontSize = scale < 0.1 ? 30 : scale < 0.2 ? 40 : scale < 0.3 ? 50 : 60;
           const strokeWidth = fontSize / 2;
           labelMap.current.forEach((text) => {
             text.style.fontSize = fontSize;
@@ -241,7 +240,7 @@ export const NLPixi = (props: Props) => {
           labelLayer.renderable = false;
         }
       }
-    }
+    },
   }));
 
   function resize() {
@@ -290,6 +289,7 @@ export const NLPixi = (props: Props) => {
     const nodeMeta = props.graph.nodes[node._id];
     const texture = Assets.get(textureId(nodeMeta.selected));
     gfx.texture = texture;
+
     // Cluster colors
     if (nodeMeta?.cluster) {
       gfx.tint = nodeMeta.cluster >= 0 ? nodeColor(nodeMeta.cluster) : 0x000000;
@@ -358,7 +358,7 @@ export const NLPixi = (props: Props) => {
 
     const linkMeta = props.graph.links[link._id];
 
-    const text = new Text(linkMeta.name, { 
+    const text = new Text(linkMeta.name, {
       fontSize: 60,
       fill: config.LINE_COLOR_DEFAULT,
       stroke: 0xffffff,
@@ -366,7 +366,7 @@ export const NLPixi = (props: Props) => {
     });
     text.cullable = true;
     text.anchor.set(0.5, 0.5);
-    text.scale.set(0.1, .1);
+    text.scale.set(0.1, 0.1);
     labelMap.current.set(link._id, text);
     labelLayer.addChild(text);
 
@@ -466,11 +466,12 @@ export const NLPixi = (props: Props) => {
 
     text.x = (source.x + target.x) / 2;
     text.y = (source.y + target.y) / 2;
-    
+
     const length = Math.hypot(target.x - source.x, target.y - source.y);
 
     // Skip rendering labels on very short edges
-    if (length < text.width + 10) { // 10 to account for size of node
+    if (length < text.width + 10) {
+      // 10 to account for size of node
       text.alpha = 0;
       return;
     } else {
@@ -478,7 +479,7 @@ export const NLPixi = (props: Props) => {
     }
 
     const rads = Math.atan2(target.y - source.y, target.x - source.x);
-    text.rotation = rads
+    text.rotation = rads;
 
     const degrees = Math.abs(text.angle % 360);
 
@@ -488,8 +489,7 @@ export const NLPixi = (props: Props) => {
     } else {
       text.rotation = rads;
     }
-  }
-
+  };
 
   // const text = labelMap.current.get(link._id);
   //   if (!text) return;
@@ -501,7 +501,7 @@ export const NLPixi = (props: Props) => {
 
   //   text.x = (source.x + target.x) / 2;
   //   text.y = (source.y + target.y) / 2;
-    
+
   //   const rads = Math.atan2(target.y - source.y, target.x - source.x);
   //   const degrees = Math.abs(text.angle % 360);
 
@@ -773,14 +773,7 @@ export const NLPixi = (props: Props) => {
         <Tooltip key={popup.node._id} open={true} interactive={!dragging} boundaryElement={ref} showArrow={true}>
           <TooltipTrigger x={popup.pos.x} y={popup.pos.y} />
           <TooltipContent>
-            <div>
-              <CardToolTipVis
-                type="popupvis"
-                name={props.graph.nodes[popup.node._id].label}
-                colorHeader={nodeColorHex(props.graph.nodes[popup.node._id].type)}
-                data={props.graph.nodes[popup.node._id].attributes}
-              />
-            </div>
+            <NLPopup onClose={() => {}} data={{ node: props.graph.nodes[popup.node._id], pos: popup.pos }} key={popup.node._id} />
           </TooltipContent>
         </Tooltip>
       ))}
@@ -788,14 +781,11 @@ export const NLPixi = (props: Props) => {
         <Tooltip key={quickPopup.node._id} open={true} boundaryElement={ref} showArrow={true}>
           <TooltipTrigger x={quickPopup.pos.x} y={quickPopup.pos.y} />
           <TooltipContent>
-            <div>
-              <CardToolTipVis
-                type="popupvis"
-                name={props.graph.nodes[quickPopup.node._id].label}
-                colorHeader={nodeColorHex(props.graph.nodes[quickPopup.node._id].type)}
-                data={props.graph.nodes[quickPopup.node._id].attributes}
-              />
-            </div>
+            <NLPopup
+              onClose={() => {}}
+              data={{ node: props.graph.nodes[quickPopup.node._id], pos: quickPopup.pos }}
+              key={quickPopup.node._id}
+            />
           </TooltipContent>
         </Tooltip>
       )}