diff --git a/backend/apps/datasource/api/datasource.py b/backend/apps/datasource/api/datasource.py
index 49155de5..42b29b89 100644
--- a/backend/apps/datasource/api/datasource.py
+++ b/backend/apps/datasource/api/datasource.py
@@ -6,21 +6,21 @@ from ..models.datasource import DatasourceConf, CoreDatasource
 router = APIRouter(tags=["datasource"], prefix="/datasource")
 
 @router.get("/list")
-def datasource_list(session: SessionDep):
+async def datasource_list(session: SessionDep):
     return get_datasource_list(session=session)
 
 @router.post("/check")
-def check(session: SessionDep, ds: CoreDatasource):
+async def check(session: SessionDep, ds: CoreDatasource):
     return check_status(session, ds)
 
 @router.post("/add", response_model=CoreDatasource)
-def add(session: SessionDep, ds: CoreDatasource):
+async def add(session: SessionDep, ds: CoreDatasource):
     return create_ds(session, ds)
 
 @router.post("/update", response_model=CoreDatasource)
-def update(session: SessionDep, ds: CoreDatasource):
+async def update(session: SessionDep, ds: CoreDatasource):
     return update_ds(session, ds)
 
 @router.post("/delete/{id}", response_model=CoreDatasource)
-def delete(session: SessionDep, id: int):
+async def delete(session: SessionDep, id: int):
     return delete_ds(session, id)
\ No newline at end of file
diff --git a/frontend/package.json b/frontend/package.json
index e288a03d..d167c93b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,6 +16,7 @@
   "devDependencies": {
     "@element-plus/icons-vue": "^2.3.1",
     "@types/crypto-js": "^4.2.2",
+    "crypto-js": "^4.2.0",
     "@types/node": "^22.14.1",
     "@vitejs/plugin-vue": "^5.2.2",
     "@vue/tsconfig": "^0.7.0",
diff --git a/frontend/src/views/ds/form.vue b/frontend/src/views/ds/form.vue
index b9b9f69e..e776f9ef 100644
--- a/frontend/src/views/ds/form.vue
+++ b/frontend/src/views/ds/form.vue
@@ -31,7 +31,7 @@
         <el-input v-model="config.username" />
       </el-form-item>
       <el-form-item label="Password">
-        <el-input v-model="config.password" />
+        <el-input v-model="config.password" type="password" show-password />
       </el-form-item>
       <el-form-item label="Database">
         <el-input v-model="config.database" />
@@ -91,12 +91,10 @@ const open = (item: any) => {
     }
   } else {
     form.value = {
-      driver:'',
-      host:'',
-      port:0,
-      username:'',
-      password:'',
-      database:'',
+      name:'',
+      description:'',
+      type:'mysql',
+      configuration: ''
     }
     config.value = {
       driver:'',
diff --git a/frontend/src/views/ds/index.vue b/frontend/src/views/ds/index.vue
index aa282766..a7aaa8f3 100644
--- a/frontend/src/views/ds/index.vue
+++ b/frontend/src/views/ds/index.vue
@@ -33,12 +33,8 @@
         </div>
         <div class="connection-status" :class="`${getStatus(ds.status)}`">{{ ds.status }}</div>
         <div class="connection-actions">
-          <button class="action-btn" @click="editDs(ds)">
-            <el-icon><IconOpeEdit /></el-icon>
-          </button>
-          <button class="action-btn" @click="deleteDs(ds)">
-            <el-icon><IconOpeDelete /></el-icon>
-          </button>
+          <el-button type="primary" class="action-btn" circle @click="editDs(ds)" :icon="IconOpeEdit"/>
+          <el-button type="danger" class="action-btn" circle @click="deleteDs(ds)" :icon="IconOpeDelete"/>
         </div>
       </div>
     </div>
@@ -217,20 +213,7 @@ onMounted(() => {
     bottom: 20px;
     right: 20px;
     display: flex;
-    transition: opacity 0.2s ease;
-    gap: 8px;
     .action-btn {
-      width: 36px;
-      height: 36px;
-      border-radius: 50%;
-      display: none;
-      align-items: center;
-      justify-content: center;
-      color: #5f6368;
-      cursor: pointer;
-      transition: all 0.2s;
-      background-color: #f1f3f4;
-      border: none;
     }
   }
   :hover .action-btn{