diff --git a/frontend/src/views/ds/form.vue b/frontend/src/views/ds/form.vue
new file mode 100644
index 00000000..d175de93
--- /dev/null
+++ b/frontend/src/views/ds/form.vue
@@ -0,0 +1,58 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    title="Add Datasource"
+    width="500"
+  >
+    <el-form :model="form" label-width="auto">
+      <el-form-item label="Name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="Host/Ip">
+        <el-input v-model="form.host" />
+      </el-form-item>
+      <el-form-item label="Port">
+        <el-input v-model="form.port" />
+      </el-form-item>
+      <el-form-item label="Username">
+        <el-input v-model="form.username" />
+      </el-form-item>
+      <el-form-item label="Password">
+        <el-input v-model="form.password" />
+      </el-form-item>
+      <el-form-item label="Database">
+        <el-input v-model="form.database" />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button>Test Connect</el-button>
+        <el-button type="primary" @click="save">Save</el-button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+<script lang="ts" setup>
+import { reactive } from 'vue'
+import { ref } from 'vue'
+const dialogVisible = ref<boolean>(false)
+const form = reactive({
+  name:'',
+  host:'',
+  port:0,
+  username:'',
+  password:'',
+  database:''
+})
+
+const open = () => {
+  dialogVisible.value = true
+}
+
+const save = () => {
+
+}
+
+defineExpose({ open })
+</script>
+<style lang="less" scoped>
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/ds/index.vue b/frontend/src/views/ds/index.vue
index 4c968a82..75614983 100644
--- a/frontend/src/views/ds/index.vue
+++ b/frontend/src/views/ds/index.vue
@@ -3,7 +3,7 @@
     <div class="header">
       <div class="mt-4">
         <el-input
-          v-model="input3"
+          v-model="search"
           style="max-width: 300px"
           placeholder="Search Datasource..."
           class="input-with-select"
@@ -14,7 +14,7 @@
         </el-input>
       </div>
 
-      <el-button type="primary" :icon="IconOpeAdd">Add Datasource</el-button>
+      <el-button type="primary" :icon="IconOpeAdd" @click="addDs">Add Datasource</el-button>
     </div>
 
     <div class="connections-container">
@@ -43,12 +43,19 @@
       </div>
     </div>
   </div>
+  <DsForm ref="dsForm"/>
 </template>
 <script lang="ts" setup>
 import IconOpeAdd from '@/assets/svg/operate/ope-add.svg'
 import IconOpeEdit from '@/assets/svg/operate/ope-edit.svg'
 import IconOpeDelete from '@/assets/svg/operate/ope-delete.svg'
 import { Search } from '@element-plus/icons-vue'
+import { ref } from 'vue'
+import DsForm from './form.vue'
+
+const search = ref<string>('')
+const dsForm = ref()
+
 const mockData = [
   {
     name:'1',
@@ -133,7 +140,7 @@ const mockData = [
   }
 ]
 
-const getStatus = function(status: string) {
+const getStatus = (status: string) => {
   if (status === 'On') {
     return 'connected'
   }
@@ -144,6 +151,10 @@ const getStatus = function(status: string) {
     return 'needs-verification'
   }
 }
+
+const addDs = () => {
+  dsForm.value.open()
+}
 </script>
 <style lang="less" scoped>
 .header{