diff --git a/frontend/src/business/components/common/router/router.js b/frontend/src/business/components/common/router/router.js
index 0ff12b5946..831b68821e 100644
--- a/frontend/src/business/components/common/router/router.js
+++ b/frontend/src/business/components/common/router/router.js
@@ -33,6 +33,7 @@ import TestTrack from "../../track/TestTrack";
 import ApiReportList from "../../api/report/ApiReportList";
 import axios from "axios";
 import ApiKeys from "../../settings/personal/ApiKeys";
+import ServiceIntegration from "../../settings/organization/ServiceIntegration";
 
 const requireContext = require.context('@/business/components/xpack/', true, /router\.js$/)
 
@@ -70,6 +71,10 @@ const router = new VueRouter({
           path: 'organizationworkspace',
           component: OrganizationWorkspace,
         },
+        {
+          path: 'serviceintegration',
+          component: ServiceIntegration,
+        },
         {
           path: 'personsetting',
           component: PersonSetting
diff --git a/frontend/src/business/components/settings/SettingMenu.vue b/frontend/src/business/components/settings/SettingMenu.vue
index cc3fd00952..2669d52e4f 100644
--- a/frontend/src/business/components/settings/SettingMenu.vue
+++ b/frontend/src/business/components/settings/SettingMenu.vue
@@ -21,6 +21,8 @@
       </el-menu-item>
       <el-menu-item index="/setting/organizationworkspace" v-permission="['org_admin']">{{$t('commons.workspace')}}
       </el-menu-item>
+      <el-menu-item index="/setting/serviceintegration" v-permission="['org_admin']">服务集成
+      </el-menu-item>
     </el-submenu>
 
     <el-submenu index="3" v-permission="['test_manager']" v-if="isCurrentWorkspaceUser">
diff --git a/frontend/src/business/components/settings/organization/DefectManagement.vue b/frontend/src/business/components/settings/organization/DefectManagement.vue
new file mode 100644
index 0000000000..0ed4360aaf
--- /dev/null
+++ b/frontend/src/business/components/settings/organization/DefectManagement.vue
@@ -0,0 +1,85 @@
+<template>
+  <el-card class="header-title">
+    <div>
+      <div>请选择要集成的缺陷管理平台：</div>
+      <el-radio-group v-model="platform" style="margin-top: 10px">
+        <el-radio v-for="(item, index) in platforms" :key="index" :label="item.value" size="small">
+          {{item.name}}
+        </el-radio>
+      </el-radio-group>
+    </div>
+
+    <div style="width: 500px">
+      <div style="margin-top: 20px;margin-bottom: 10px">Basic Auth账号信息：</div>
+      <el-form :model="form" ref="form" label-width="100px" size="small">
+        <el-form-item label="API 账号" prop="account">
+          <el-input v-model="form.account" placeholder="请输入账号"/>
+        </el-form-item>
+        <el-form-item label="API 口令" prop="password">
+          <el-input v-model="form.password" auto-complete="new-password" placeholder="请输入口令" show-password/>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="small" @click="submit('form')" style="width: 400px">
+            保存
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="defect-tip">
+      <div>使用指引：</div>
+      <div>
+        1. Basic Auth 账号信息在"公司管理-安全与集成-开放平台"中查询
+      </div>
+      <div>
+        2. 保存 Basic Auth 账号信息后，需要在 Metersphere 项目中手动关联 ID/key
+        <router-link to="/track/project/all" style="margin-left: 5px">马上关联项目</router-link>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: "DefectManagement",
+    data() {
+      return {
+        form: {},
+        platform: '',
+        platforms: [
+          {
+            name: 'TAPD',
+            value: 'tapd',
+          },
+          {
+            name: 'JIRA',
+            value: 'jira',
+          }
+        ],
+        rules: {
+          account: {required: true, message: "请输入账号", trigger: ['change', 'blur']},
+          password: {required: true, message: "请输入密码", trigger: ['change', 'blur']}
+        },
+      }
+    },
+    methods: {
+      submit(form) {
+
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  .header-title {
+    padding: 10px 30px;
+  }
+
+  .defect-tip {
+    background: #EDEDED;
+    border: solid #E1E1E1 1px;
+    margin: 10px 0;
+    padding: 10px;
+    border-radius: 3px;
+  }
+</style>
diff --git a/frontend/src/business/components/settings/organization/ServiceIntegration.vue b/frontend/src/business/components/settings/organization/ServiceIntegration.vue
new file mode 100644
index 0000000000..a4ba653d67
--- /dev/null
+++ b/frontend/src/business/components/settings/organization/ServiceIntegration.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <el-tabs class="system-setting" v-model="activeName">
+      <el-tab-pane label="缺陷管理平台" name="defect">
+        <defect-management/>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+
+  import DefectManagement from "./DefectManagement";
+
+  export default {
+    name: "ServiceIntegration",
+    components: {
+      DefectManagement
+    },
+    data() {
+      return {
+        activeName: 'defect'
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>