diff --git a/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx b/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx
index 52e9975e..b84be017 100644
--- a/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx
+++ b/frontend/packages/core/src/pages/aiSetting/AIFlowChart.tsx
@@ -122,14 +122,14 @@ const AIFlowChart = () => {
         source: 'apiService',
         target: model.id,
         label: `apis(${model.api_count})`,
-        style: { stroke: '#ddd', cursor: 'pointer' }
+        markerEnd: { type: 'arrow' },
+        data: { id: model.id }
       })),
       ...modelData.map((model) => ({
         id: `${model.id}-keys-edge`,
         source: model.id,
         target: `${model.id}-keys`,
-        animated: true,
-        style: { stroke: '#ddd' }
+        animated: true
       }))
     ]
 
@@ -221,10 +221,10 @@ const AIFlowChart = () => {
         panOnScroll={true}
         panOnScrollMode={PanOnScrollMode.Vertical}
         defaultEdgeOptions={{
-          type: 'custom'
+          type: 'custom',
+          style: { strokeWidth: 2 }
         }}
         connectionMode={ConnectionMode.Loose}
-        fitView
       />
     </div>
   )
diff --git a/frontend/packages/core/src/pages/aiSetting/components/CustomEdge.tsx b/frontend/packages/core/src/pages/aiSetting/components/CustomEdge.tsx
index 7df93001..2fcf5824 100644
--- a/frontend/packages/core/src/pages/aiSetting/components/CustomEdge.tsx
+++ b/frontend/packages/core/src/pages/aiSetting/components/CustomEdge.tsx
@@ -1,4 +1,4 @@
-import { BaseEdge, EdgeLabelRenderer, EdgeProps, getBezierPath } from '@xyflow/react'
+import { BaseEdge, EdgeLabelRenderer, EdgeProps, getSmoothStepPath } from '@xyflow/react'
 
 export default function CustomEdge({
   id,
@@ -13,36 +13,41 @@ export default function CustomEdge({
   label,
   data
 }: EdgeProps) {
-  const [edgePath, labelX, labelY] = getBezierPath({
+  const [edgePath, labelX, labelY] = getSmoothStepPath({
     sourceX,
     sourceY,
     sourcePosition,
     targetX,
     targetY,
-    targetPosition
+    targetPosition,
+    borderRadius: 16
   })
 
+  const modelId = data?.id
+
   return (
     <>
-      <BaseEdge path={edgePath} markerEnd={markerEnd} style={style} />
+      <BaseEdge path={edgePath} markerEnd={markerEnd} style={{ stroke: '#ddd', cursor: 'pointer', strokeWidth: 1 }} />
       {label && (
         <EdgeLabelRenderer>
-          <div
+          <a
+            href={`/aiSetting/model?modelId=${modelId}`}
+            target="_blank"
             style={{
               position: 'absolute',
-              transform: `translate(-50%, -50%) translate(${targetX}px,${targetY}px)`,
-              background: '#f8f9fa',
-              padding: '4px 8px',
+              transform: `translate(${targetX - 80}px,${targetY}px)`,
               borderRadius: '4px',
               fontSize: 12,
               fontWeight: 500,
+              color: 'var(--primary-color)',
+              cursor: 'pointer',
               pointerEvents: 'all',
-              border: '1px solid #ddd'
+              textDecoration: 'none'
             }}
             className="nodrag nopan"
           >
             {label}
-          </div>
+          </a>
         </EdgeLabelRenderer>
       )}
     </>