diff --git a/src/components/Connection.tsx b/src/components/Connection.tsx
index f6a009e..ad58365 100644
--- a/src/components/Connection.tsx
+++ b/src/components/Connection.tsx
@@ -1,4 +1,3 @@
-
 import React from 'react';
 
 interface ConnectionProps {
@@ -9,12 +8,16 @@ interface ConnectionProps {
 }
 
 export const Connection: React.FC<ConnectionProps> = ({ from, to, fromColor = '#a855f7', toColor = '#a855f7' }) => {
-  // Create gradient ID based on colors to ensure uniqueness
-  const gradientId = `gradient-${fromColor.replace('#', '')}-${toColor.replace('#', '')}`;
+  // Create a safe gradient ID by removing special characters
+  const gradientId = `gradient-${fromColor.replace(/[^a-zA-Z0-9]/g, '')}-${toColor.replace(/[^a-zA-Z0-9]/g, '')}`;
   
   return (
     <g>
       <defs>
+        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+          <feGaussianBlur stdDeviation="2" result="blur" />
+          <feComposite in="SourceGraphic" in2="blur" operator="over" />
+        </filter>
         <linearGradient id={gradientId} x1="0%" y1="0%" x2="100%" y2="0%">
           <stop offset="0%" stopColor={fromColor} stopOpacity="0.7" />
           <stop offset="100%" stopColor={toColor} stopOpacity="0.7" />