diff --git a/src/components/Form/FormFields/agreement.vue b/src/components/Form/FormFields/agreement.vue
new file mode 100644
index 000000000..e5268b73d
--- /dev/null
+++ b/src/components/Form/FormFields/agreement.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <el-checkbox v-model="iValue">
+      {{ $t('ReadAgreeTo') }}
+      <a href="/core/auth/user-agreement/" target="_blank" style="color: #409eff">
+        {{ $t('TermsOfService') }}
+      </a>
+      {{ $t('and') }}
+      <a href="/core/auth/privacy-policy/" target="_blank" style="color: #409eff">
+        {{ $t('PrivacyPolicy') }}
+      </a>
+    </el-checkbox>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    value: {
+      type: Boolean,
+      default: () => false
+    }
+  },
+  data() {
+    return {
+      iValue: false
+    }
+  },
+  computed: {
+    iValue: {
+      get() {
+        return this.value
+      },
+      set(v) {
+        this.$emit('update:value', v)
+      }
+    }
+  },
+  watch: {
+    iValue: {
+      handler(v) {
+        this.$emit('input', v)
+      }
+    }
+  },
+  created() {
+    this.iValue = this.value
+  },
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/profile/Improvement.vue b/src/views/profile/Improvement.vue
index f24c68545..afc83ec35 100644
--- a/src/views/profile/Improvement.vue
+++ b/src/views/profile/Improvement.vue
@@ -6,12 +6,14 @@
 import { GenericCreateUpdatePage } from '@/layout/components'
 import { Required } from '@/components/Form/DataForm/rules'
 import { PhoneInput } from '@/components/Form/FormFields'
+import Agreement from '@/components/Form/FormFields/agreement.vue'
 import store from '@/store'
 
 export default {
   name: 'Improvement',
   components: {
-    GenericCreateUpdatePage
+    GenericCreateUpdatePage,
+    Agreement
   },
   props: {
     object: {
@@ -26,7 +28,7 @@ export default {
         [this.$t('Account'), ['username', 'name', 'email']],
         [this.$t('Authentication'), ['mfa_level', 'public_key']],
         [this.$t('Other'), ['phone']],
-        [this.$t('TermsAndConditions'), ['terms']]
+        [this.$t('TermsOfService'), ['terms']]
       ],
       fieldsMeta: {
         username: {
@@ -53,15 +55,14 @@ export default {
             type: 'textarea',
             placeholder: 'ssh-rsa AAAA...'
           },
-          hidden: (formValue) => {
+          hidden: formValue => {
             return formValue.source !== 'local'
           },
           helpText: this.$t('SSHKeyOfProfileSSHUpdatePage')
         },
         terms: {
-          label: this.$t('IAgree'),
-          type: 'checkbox',
-          checked: false,
+          label: '',
+          component: Agreement,
           rules: [Required],
           helpText: this.$t('MFAOfUserFirstLoginUserGuidePage')
         }
@@ -93,9 +94,14 @@ export default {
   },
   methods: {
     disableMFAFieldIfNeed(user) {
-      const adminUserIsNeed = (user?.is_superuser || user?.is_org_admin) &&
+      const adminUserIsNeed =
+        (user?.is_superuser || user?.is_org_admin) &&
         store.getters.publicSettings['SECURITY_MFA_AUTH'] === 2
-      if (store.getters.publicSettings['SECURITY_MFA_AUTH'] === 1 || adminUserIsNeed || user?.mfa_level.value === 2) {
+      if (
+        store.getters.publicSettings['SECURITY_MFA_AUTH'] === 1 ||
+        adminUserIsNeed ||
+        user?.mfa_level.value === 2
+      ) {
         this.fieldsMeta['mfa_level'].disabled = true
       }
     }