diff --git a/frontend/src/pages/Workflow/Definition/Designer/components/NodePanel/index.less b/frontend/src/pages/Workflow/Definition/Designer/components/NodePanel/index.less
new file mode 100644
index 00000000..71b2942c
--- /dev/null
+++ b/frontend/src/pages/Workflow/Definition/Designer/components/NodePanel/index.less
@@ -0,0 +1,126 @@
+.node-panel {
+    height: 100%;
+    background: #fff;
+
+    &-loading {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .ant-tabs {
+        height: 100%;
+        
+        .ant-tabs-nav {
+            margin: 0;
+            padding: 12px 12px 0;
+            background: #fafafa;
+            
+            .ant-tabs-tab {
+                padding: 8px 16px !important;
+                margin: 0 !important;
+                transition: all 0.3s;
+                border-radius: 4px 4px 0 0;
+                
+                &:hover {
+                    color: #1890ff;
+                }
+                
+                &.ant-tabs-tab-active {
+                    background: #fff;
+                    
+                    .ant-tabs-tab-btn {
+                        color: #1890ff;
+                        font-weight: 500;
+                    }
+                }
+            }
+        }
+        
+        .ant-tabs-content {
+            height: calc(100% - 44px);  // 减去tab导航的高度
+        }
+    }
+
+    .node-panel-content {
+        height: 100%;
+        padding: 16px;
+        overflow-y: auto;
+        background: #fff;
+
+        &::-webkit-scrollbar {
+            width: 6px;
+            height: 6px;
+        }
+
+        &::-webkit-scrollbar-thumb {
+            background: #ccc;
+            border-radius: 3px;
+        }
+
+        &::-webkit-scrollbar-track {
+            background: #f5f5f5;
+            border-radius: 3px;
+        }
+    }
+
+    .node-card {
+        position: relative;
+        margin-bottom: 12px;
+        padding: 12px 16px;
+        background: #fff;
+        border: 1px solid #e6e6e6;
+        border-radius: 6px;
+        cursor: move;
+        transition: all 0.2s;
+        display: flex;
+        align-items: center;
+        
+        &:hover {
+            border-color: #1890ff;
+            background: #e6f7ff;
+            transform: translateY(-1px);
+            box-shadow: 0 2px 8px rgba(24, 144, 255, 0.1);
+        }
+
+        .node-icon {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 36px;
+            height: 36px;
+            margin-right: 12px;
+            border-radius: 6px;
+            background: #f0f5ff;
+            
+            i {
+                font-size: 20px;
+                color: #1890ff;
+            }
+        }
+
+        .node-name {
+            font-size: 14px;
+            color: #262626;
+            font-weight: 500;
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            right: 16px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 16px;
+            height: 16px;
+            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z'/%3E%3C/svg%3E") center/contain no-repeat;
+            opacity: 0.5;
+            transition: all 0.2s;
+        }
+
+        &:hover::after {
+            opacity: 1;
+        }
+    }
+}
diff --git a/frontend/src/pages/Workflow/Definition/Designer/components/NodePanel/index.tsx b/frontend/src/pages/Workflow/Definition/Designer/components/NodePanel/index.tsx
index dfa96d73..1fd27be1 100644
--- a/frontend/src/pages/Workflow/Definition/Designer/components/NodePanel/index.tsx
+++ b/frontend/src/pages/Workflow/Definition/Designer/components/NodePanel/index.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Tabs, Spin } from 'antd';
 import { NodeType, getNodeTypes } from '../../service';
-import './index.css';
+import './index.less';
 
 interface NodePanelProps {
   onNodeDragStart: (nodeType: NodeType) => void;
diff --git a/frontend/src/pages/Workflow/Definition/Designer/index.tsx b/frontend/src/pages/Workflow/Definition/Designer/index.tsx
index a228f5b2..ceb05cab 100644
--- a/frontend/src/pages/Workflow/Definition/Designer/index.tsx
+++ b/frontend/src/pages/Workflow/Definition/Designer/index.tsx
@@ -743,9 +743,11 @@ const FlowDesigner: React.FC = () => {
     return (
         <Card
             title={
-                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                    <Button icon={<ArrowLeftOutlined/>} onClick={() => navigate(-1)}>返回</Button>
-                    <Button type="primary" icon={<SaveOutlined/>} onClick={handleSave}>保存</Button>
+                <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+                    <Space>
+                        <Button type="primary" icon={<SaveOutlined/>} onClick={handleSave}>保存</Button>
+                        <Button icon={<ArrowLeftOutlined/>} onClick={() => navigate(-1)}>返回</Button>
+                    </Space>
                 </div>
             }
             className="workflow-designer"