diff --git a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
index 157eeb865..6a33b66a6 100644
--- a/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/ConnectionLineComponent/index.tsx
@@ -10,6 +10,7 @@ const ConnectionLineComponent = ({
 }: ConnectionLineComponentProps): JSX.Element => {
   const handleDragging = useFlowStore((state) => state.handleDragging);
   const color = handleDragging?.color;
+  const accentColor = `hsl(var(--accent-${color}))`;
 
   return (
     <g>
@@ -19,7 +20,7 @@ const ConnectionLineComponent = ({
         strokeWidth={2}
         className={`animated`}
         style={{
-          stroke: handleDragging ? handleDragging.color : "",
+          stroke: handleDragging ? accentColor : "",
           ...connectionLineStyle,
         }}
         d={`M${fromX},${fromY} C ${fromX} ${toY} ${fromX} ${toY} ${toX},${toY}`}
@@ -29,7 +30,7 @@ const ConnectionLineComponent = ({
         cy={toY}
         fill="#fff"
         r={5}
-        stroke={color}
+        stroke={accentColor}
         className=""
         strokeWidth={1.5}
       />
diff --git a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
index c0e8b1e73..da1f6c510 100644
--- a/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
@@ -125,8 +125,6 @@ export default function Page({ view }: { view?: boolean }): JSX.Element {
   const [isHighlightingCursor, setIsHighlightingCursor] = useState(false);
 
   const addComponent = useAddComponent();
-  const { zoomIn, zoomOut, fitView } = useReactFlow();
-  const { zoom } = useViewport();
 
   useEffect(() => {
     const handleVisibilityChange = () => {