diff --git a/frontend/packages/core/src/pages/playground/components/KeyStatusCard.tsx b/frontend/packages/core/src/pages/playground/components/KeyStatusNode.tsx
similarity index 91%
rename from frontend/packages/core/src/pages/playground/components/KeyStatusCard.tsx
rename to frontend/packages/core/src/pages/playground/components/KeyStatusNode.tsx
index 4597446f..df69c9d3 100644
--- a/frontend/packages/core/src/pages/playground/components/KeyStatusCard.tsx
+++ b/frontend/packages/core/src/pages/playground/components/KeyStatusNode.tsx
@@ -8,16 +8,17 @@ interface KeyStatus {
   priority?: number
 }
 
-interface KeyStatusCardProps {
-  keys: KeyStatus[]
+interface KeyStatusNodeData {
   title: string
+  keys: KeyStatus[]
 }
 
 const KEY_SIZE = '1.25rem' // 20px
 const KEY_GAP = '0.25rem' // 4px
 const MAX_KEYS = 10
 
-const KeyStatusCard: React.FC<KeyStatusCardProps> = ({ keys = [], title }) => {
+export const KeyStatusNode: React.FC<{ data: KeyStatusNodeData }> = ({ data }) => {
+  const { title, keys = [] } = data
   const totalKeys = keys.length
   const keyWidth = totalKeys > 5 ? `calc((100% - ${(totalKeys - 1) * 0.25}rem) / ${totalKeys})` : KEY_SIZE
 
@@ -54,5 +55,3 @@ const KeyStatusCard: React.FC<KeyStatusCardProps> = ({ keys = [], title }) => {
     </div>
   )
 }
-
-export default KeyStatusCard
diff --git a/frontend/packages/core/src/pages/playground/components/ModelCard.tsx b/frontend/packages/core/src/pages/playground/components/ModelCard.tsx
deleted file mode 100644
index 7ec74018..00000000
--- a/frontend/packages/core/src/pages/playground/components/ModelCard.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Icon } from '@iconify/react'
-import { Handle, Position } from '@xyflow/react'
-import React from 'react'
-import { ModelCardStatus } from './types'
-
-interface ModelCardProps {
-  title: string
-  status: ModelCardStatus
-  defaultModel: string
-  onSettingClick?: () => void
-}
-
-const ModelCard: React.FC<ModelCardProps> = ({ title, status, defaultModel, onSettingClick }) => (
-  <div className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[280px] relative">
-    <Handle type="target" position={Position.Left} />
-    <Handle type="source" position={Position.Right} />
-    <div className="flex justify-between items-center">
-      <div className="flex gap-2 items-center">
-        <Icon icon="mdi:robot" className="text-xl text-[--primary-color]" />
-        <span className="text-base text-gray-900">{title}</span>
-        <Icon
-          icon={status === 'success' ? 'mdi:check-circle' : 'mdi:close-circle'}
-          className={`text-xl ${status === 'success' ? 'text-green-500' : 'text-red-500'}`}
-        />
-      </div>
-      <Icon
-        icon="mdi:cog"
-        className="text-xl text-gray-400 cursor-pointer hover:text-[--primary-color]"
-        onClick={onSettingClick}
-      />
-    </div>
-    <div className="mt-2 text-sm text-gray-500">{defaultModel}</div>
-  </div>
-)
-
-export default ModelCard
diff --git a/frontend/packages/core/src/pages/playground/components/ModelCardNode.tsx b/frontend/packages/core/src/pages/playground/components/ModelCardNode.tsx
new file mode 100644
index 00000000..e5fd28c0
--- /dev/null
+++ b/frontend/packages/core/src/pages/playground/components/ModelCardNode.tsx
@@ -0,0 +1,37 @@
+import { Icon } from '@iconify/react'
+import { Handle, Position } from '@xyflow/react'
+import React from 'react'
+import { ModelCardStatus } from './types'
+
+interface ModelCardData {
+  title: string
+  status: ModelCardStatus
+  defaultModel: string
+}
+
+type ModelCardNodeData = ModelCardData & {
+  id: string
+  position: { x: number; y: number }
+}
+
+export const ModelCardNode: React.FC<{ data: ModelCardNodeData }> = ({ data }) => {
+  const { title, status, defaultModel } = data
+  return (
+    <div className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[280px] relative">
+      <Handle type="target" position={Position.Left} />
+      <Handle type="source" position={Position.Right} />
+      <div className="flex justify-between items-center">
+        <div className="flex gap-2 items-center">
+          <Icon icon="mdi:robot" className="text-xl text-[--primary-color]" />
+          <span className="text-base text-gray-900">{title}</span>
+          <Icon
+            icon={status === 'success' ? 'mdi:check-circle' : 'mdi:close-circle'}
+            className={`text-xl ${status === 'success' ? 'text-green-500' : 'text-red-500'}`}
+          />
+        </div>
+        <Icon icon="mdi:cog" className="text-xl text-gray-400 cursor-pointer hover:text-[--primary-color]" />
+      </div>
+      <div className="mt-2 text-sm text-gray-500">{defaultModel}</div>
+    </div>
+  )
+}
diff --git a/frontend/packages/core/src/pages/playground/components/NodeComponents.tsx b/frontend/packages/core/src/pages/playground/components/NodeComponents.tsx
index 950e7b2d..e2626cc2 100644
--- a/frontend/packages/core/src/pages/playground/components/NodeComponents.tsx
+++ b/frontend/packages/core/src/pages/playground/components/NodeComponents.tsx
@@ -1,103 +1,3 @@
-import { Icon } from '@iconify/react'
-import { Handle, NodeProps, Position } from '@xyflow/react'
-import React from 'react'
-import { ModelCardStatus } from './types'
-
-interface KeyStatus {
-  status: ModelCardStatus
-  keyID: number | string
-  priority?: number
-}
-
-interface KeyStatusNodeData {
-  title: string
-  keys: KeyStatus[]
-}
-
-interface ModelCardData {
-  title: string
-  status: ModelCardStatus
-  defaultModel: string
-}
-
-type ModelCardNodeData = ModelCardData & {
-  id: string
-  position: { x: number; y: number }
-}
-
-const KEY_SIZE = '1.25rem' // 20px
-const KEY_GAP = '0.25rem' // 4px
-const MAX_KEYS = 10
-
-export const KeyStatusNode: React.FC<{ data: KeyStatusNodeData }> = ({ data }) => {
-  const { title, keys = [] } = data
-  const totalKeys = keys.length
-  const keyWidth = totalKeys > 5 ? `calc((100% - ${(totalKeys - 1) * 0.25}rem) / ${totalKeys})` : KEY_SIZE
-
-  return (
-    <div className="relative p-4 bg-white rounded-lg shadow-sm node-card">
-      <Handle type="target" position={Position.Left} />
-      <div className="flex flex-col gap-2">
-        <div className="text-sm text-gray-900">{title}</div>
-        <div
-          className="flex gap-1 w-full"
-          style={{
-            maxWidth: `calc(${MAX_KEYS} * ${KEY_SIZE} + (${MAX_KEYS} - 1) * ${KEY_GAP})`,
-            minHeight: KEY_SIZE
-          }}
-        >
-          {keys
-            .sort((a, b) => (a.priority || 0) - (b.priority || 0))
-            .map((key) => (
-              <div
-                key={key.keyID}
-                style={{
-                  width: keyWidth,
-                  height: KEY_SIZE
-                }}
-                className={`
-                  rounded-md flex-shrink-0
-                  ${key.status === 'success' ? 'bg-green-500' : 'bg-red-500'}
-                  transition-all duration-200 hover:opacity-80
-                `}
-              />
-            ))}
-        </div>
-      </div>
-    </div>
-  )
-}
-
-export const ModelCardNode: React.FC<{ data: ModelCardNodeData }> = ({ data }) => {
-  const { title, status, defaultModel } = data
-  return (
-    <div className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[280px] relative">
-      <Handle type="target" position={Position.Left} />
-      <Handle type="source" position={Position.Right} />
-      <div className="flex justify-between items-center">
-        <div className="flex gap-2 items-center">
-          <Icon icon="mdi:robot" className="text-xl text-[--primary-color]" />
-          <span className="text-base text-gray-900">{title}</span>
-          <Icon
-            icon={status === 'success' ? 'mdi:check-circle' : 'mdi:close-circle'}
-            className={`text-xl ${status === 'success' ? 'text-green-500' : 'text-red-500'}`}
-          />
-        </div>
-        <Icon icon="mdi:cog" className="text-xl text-gray-400 cursor-pointer hover:text-[--primary-color]" />
-      </div>
-      <div className="mt-2 text-sm text-gray-500">{defaultModel}</div>
-    </div>
-  )
-}
-
-export const ServiceCardNode: React.FC<NodeProps> = () => {
-  return (
-    <div className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[150px] relative">
-      <Handle type="source" position={Position.Right} />
-      <div className="flex flex-col gap-2 items-center">
-        <Icon icon="mdi:robot" className="text-3xl text-[--primary-color]" />
-        <span className="text-base text-gray-900">AI Service</span>
-      </div>
-    </div>
-  )
-}
+export { KeyStatusNode } from './KeyStatusNode'
+export { ModelCardNode } from './ModelCardNode'
+export { ServiceCardNode } from './ServiceCardNode'
diff --git a/frontend/packages/core/src/pages/playground/components/ServiceCard.tsx b/frontend/packages/core/src/pages/playground/components/ServiceCard.tsx
deleted file mode 100644
index 8b1e340f..00000000
--- a/frontend/packages/core/src/pages/playground/components/ServiceCard.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Icon } from '@iconify/react'
-import { Handle, Position } from '@xyflow/react'
-import React from 'react'
-
-const ServiceCard: React.FC = () => (
-  <div className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[150px] relative">
-    <Handle type="source" position={Position.Right} />
-    <div className="flex flex-col gap-2 items-center">
-      <Icon icon="mdi:robot" className="text-3xl text-[--primary-color]" />
-      <span className="text-base text-gray-900">AI Service</span>
-    </div>
-  </div>
-)
-
-export default ServiceCard
diff --git a/frontend/packages/core/src/pages/playground/components/ServiceCardNode.tsx b/frontend/packages/core/src/pages/playground/components/ServiceCardNode.tsx
new file mode 100644
index 00000000..5b513048
--- /dev/null
+++ b/frontend/packages/core/src/pages/playground/components/ServiceCardNode.tsx
@@ -0,0 +1,15 @@
+import { Icon } from '@iconify/react'
+import { Handle, NodeProps, Position } from '@xyflow/react'
+import React from 'react'
+
+export const ServiceCardNode: React.FC<NodeProps> = () => {
+  return (
+    <div className="node-card bg-white rounded-lg shadow-sm p-4 min-w-[150px] relative">
+      <Handle type="source" position={Position.Right} />
+      <div className="flex flex-col gap-2 items-center">
+        <Icon icon="mdi:robot" className="text-3xl text-[--primary-color]" />
+        <span className="text-base text-gray-900">AI Service</span>
+      </div>
+    </div>
+  )
+}