diff --git a/frontend/src/assets/stylesheets/element-plus/button.css b/frontend/src/assets/stylesheets/element-plus/button.css
index fb0fd01bb..881ed79f6 100644
--- a/frontend/src/assets/stylesheets/element-plus/button.css
+++ b/frontend/src/assets/stylesheets/element-plus/button.css
@@ -120,6 +120,127 @@
   box-shadow: var(--shadow-xs);
 }
 
+/* btn-outline */
+.btn-outline {
+  background-color: var(--Base-White);
+  border: 1px solid var(--Gray-300);
+  color: var(--Gray-700);
+}
+
+.btn-outline:hover {
+  background-color: var(--Gray-50);
+  border: 1px solid var(--Gray-300);
+  color: var(--Gray-800);
+}
+
+.btn-outline:focus {
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(152, 162, 179, 0.14);
+}
+
+.btn-outline[disabled] {
+  background-color: var(--Base-White);
+  color: var(--Gray-400);
+  border: 1px solid var(--Gray-200);
+}
+
+/* btn-outline-primary */
+.btn-outline-primary {
+  background-color: var(--Base-White);
+  border: 1px solid var(--Brand-300);
+  color: var(--Brand-700);
+}
+
+.btn-outline-primary:hover {
+  background-color: var(--Brand-50);
+  border: 1px solid var(--Brand-300);
+  color: var(--Brand-800);
+}
+
+.btn-outline-primary:focus {
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(77, 106, 214, 0.24);
+}
+
+.btn-outline-primary[disabled] {
+  background-color: var(--Base-White);
+  color: var(--Gray-400);
+  border: 1px solid var(--Gray-200);
+}
+
+/* btn-outline-danger */
+.btn-outline-danger {
+  background-color: var(--Base-White);
+  border: 1px solid var(--Error-300);
+  color: var(--Error-700);
+}
+
+.btn-outline-danger:hover {
+  background-color: var(--Error-50);
+  border: 1px solid var(--Error-300);
+  color: var(--Error-800);
+}
+
+.btn-outline-danger:focus {
+  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px rgba(240, 68, 56, 0.24);
+}
+
+.btn-outline-danger[disabled] {
+  background-color: var(--Base-White);
+  color: var(--Gray-400);
+  border: 1px solid var(--Gray-200);
+}
+
+/* btn-ghost */
+.btn-ghost {
+  background-color: transparent;
+  border: 1px solid transparent;
+  color: var(--Gray-600);
+  box-shadow: none;
+}
+
+.btn-ghost:hover {
+  background-color: var(--Gray-50);
+  border: 1px solid transparent;
+  color: var(--Gray-700);
+}
+
+.btn-ghost[disabled] {
+  color: var(--Gray-400);
+}
+
+/* btn-ghost-primary */
+.btn-ghost-primary {
+  background-color: transparent;
+  border: 1px solid transparent;
+  color: var(--Brand-700);
+}
+
+.btn-ghost-primary:hover {
+  background-color: var(--Brand-50);
+  border: 1px solid transparent;
+  color: var(--Brand-800);
+}
+
+.btn-ghost-primary[disabled] {
+  color: var(--Gray-400);
+}
+
+/* btn-ghost-danger */
+.btn-ghost-danger {
+  background-color: transparent;
+  border: 1px solid transparent;
+  color: var(--Error-700);
+}
+
+.btn-ghost-danger:hover {
+  background-color: var(--Error-50);
+  border: 1px solid transparent;
+  color: var(--Error-800);
+}
+
+.btn-ghost-danger[disabled] {
+  color: var(--Gray-400);
+}
+
 /* btn-tertiary-gray */
 .btn-tertiary-gray {
   color: var(--Gray-600);
@@ -193,6 +314,7 @@
 /* sm size button */
 .btn-primary.btn-sm,
 .btn-danger.btn-sm,
+.btn-outline-danger.btn-sm,
 .btn-secondary-gray.btn-sm,
 .btn-secondary-color.btn-sm,
 .btn-tertiary-gray.btn-sm,
@@ -356,4 +478,3 @@
   text-align: center;
   justify-content: center;
 }
-
diff --git a/frontend/src/components/__tests__/user_settings/ProfileEdit.spec.js b/frontend/src/components/__tests__/user_settings/ProfileEdit.spec.js
index e06124f89..8d1ab3828 100644
--- a/frontend/src/components/__tests__/user_settings/ProfileEdit.spec.js
+++ b/frontend/src/components/__tests__/user_settings/ProfileEdit.spec.js
@@ -158,7 +158,7 @@ describe('ProfileEdit.vue', () => {
     const clickSpy = vi.spyOn(wrapper.vm.fileInput, 'click')
 
     // Find and click the upload avatar button
-    await wrapper.find('.btn.btn-primary.btn-sm').trigger('click')
+    await wrapper.find('.btn.btn-secondary-gray.btn-sm').trigger('click')
 
     expect(clickSpy).toHaveBeenCalled()
   })
@@ -168,7 +168,7 @@ describe('ProfileEdit.vue', () => {
 
     wrapper.vm.profileData.avatar.value = 'https://example.com/avatar.jpg'
 
-    await wrapper.find('.btn-secondary-gray.btn-sm').trigger('click')
+    await wrapper.find('.btn.btn-outline-danger.btn-sm').trigger('click')
 
     await wrapper.vm.$nextTick()
 
diff --git a/frontend/src/components/user_settings/Menu.vue b/frontend/src/components/user_settings/Menu.vue
index 7dd5f3e19..dbbfae897 100644
--- a/frontend/src/components/user_settings/Menu.vue
+++ b/frontend/src/components/user_settings/Menu.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="z-20 bg-white border-b border-gray-100">
+  <div class="z-20 bg-white border-gray-100">
     <div class="sticky top-14 pt-6 w-72 rounded-md mx-6 md:w-full md:mx-0">
       <div
         @click="clickProfile"
diff --git a/frontend/src/components/user_settings/ProfileEdit.vue b/frontend/src/components/user_settings/ProfileEdit.vue
index 2bffbf607..1e9cabe08 100644
--- a/frontend/src/components/user_settings/ProfileEdit.vue
+++ b/frontend/src/components/user_settings/ProfileEdit.vue
@@ -1,53 +1,65 @@
 <template>
-  <div class="flex flex-col gap-[24px] px-6 py-10 border-l md:border-l-0">
+  <div class="flex flex-col gap-6 px-6 md:px-0 py-10 border-l md:border-l-0">
     <div class="font-semibold text-xl leading-[28px]">
       {{ $t('profile.accountSetting') }}
     </div>
     <!-- avatar -->
-    <div>
-      <div class="flex items-center gap-[4px] mb-[8px]">{{ $t('profile.edit.userAvatar') }}</div>
+    <div class="flex flex-row items-center gap-5 mb-2">
       <el-avatar
-        :size="120"
+        :size="96"
         :src="profileData.avatar.value">
       </el-avatar>
-      <div class="flex gap-[12px] fileInput">
+      <div class="flex flex-col gap-3 fileInput">
         <input
           ref="fileInput"
           type="file"
           class="hidden"
           @change="uploadAvatar" />
-        <div
+        <CsgButton
           @click="uploadImage"
-          class="btn btn-primary btn-sm">
-          {{ $t('profile.edit.uploadAvatar') }}
-        </div>
-        <div
+          class="btn btn-secondary-gray btn-sm"
+          :name="$t('profile.edit.uploadAvatar')"
+        />
+        <CsgButton  
           @click="removeImage"
-          class="btn btn-secondary-gray btn-sm">
-          {{ $t('profile.edit.removeAvatar') }}
-        </div>
+          class="btn btn-outline-danger btn-sm"
+          :name="$t('profile.edit.removeAvatar')"
+        />
       </div>
     </div>
-    <!-- name -->
-    <div>
-      <div class="flex items-center gap-[4px] mb-[8px]">
-        {{ $t('all.userName') }}
+    <!-- name and nickname -->
+    <div class="flex gap-4 max-w-[600px]">
+      <div class="flex-1">
+        <div class="flex items-center gap-1 mb-2">
+          {{ $t('all.userName') }}
+        </div>
+        <el-input
+          size="large"
+          v-model="profileData.username.value"
+          :disabled="!canChangeUsername"
+          :placeholder="$t('all.userName')">
+        </el-input>
+        <p class="text-gray-500 text-xs italic pt-1">
+          {{ $t('rule.nameRule') }}
+        </p>
+      </div>
+      <div class="flex-1">
+        <div class="flex items-center gap-1 mb-2">
+          {{ $t('all.nickName') }}
+        </div>
+        <el-input
+          size="large"
+          v-model="profileData.nickname.value"
+          :placeholder="$t('all.nickName')"
+          @change="handleInputChange">
+        </el-input>
       </div>
-      <el-input
-        class="max-w-[600px]"
-        v-model="profileData.username.value"
-        :disabled="!canChangeUsername"
-        :placeholder="$t('all.userName')">
-      </el-input>
-      <p class="text-gray-500 text-xs italic pt-1">
-        {{ $t('rule.nameRule') }}
-      </p>
     </div>
     <!-- phone -->
     <div>
-      <div class="flex items-center gap-[4px] mb-[8px]">
-        {{ $t('all.phone')
-        }}<svg
+      <div class="flex items-center gap-1 mb-2">
+        {{ $t('all.phone')}}
+        <svg
           xmlns="http://www.w3.org/2000/svg"
           width="6"
           height="6"
@@ -60,6 +72,7 @@
       </div>
       <el-input
         class="max-w-[600px]"
+        size="large"
         v-model="profileData.phone.value"
         disabled
         :placeholder="$t('all.phone')">
@@ -67,7 +80,7 @@
     </div>
     <!-- email -->
     <div>
-      <div class="flex items-center gap-[4px] mb-[8px]">
+      <div class="flex items-center gap-1 mb-2">
         {{ $t('all.email')
         }}<svg
           xmlns="http://www.w3.org/2000/svg"
@@ -85,6 +98,7 @@
         <el-form-item prop="email">
           <el-input
             class="max-w-[600px]"
+            size="large"
             v-model="form.email"
             :placeholder="$t('all.email')"
             @change="handleInputChange">
@@ -93,25 +107,14 @@
       </el-form>
 
     </div>
-    <!-- nickname -->
-    <div>
-      <div class="flex items-center gap-[4px] mb-[8px]">
-        {{ $t('all.nickName') }}
-      </div>
-      <el-input
-        class="max-w-[600px]"
-        v-model="profileData.nickname.value"
-        :placeholder="$t('all.nickName')"
-        @change="handleInputChange">
-      </el-input>
-    </div>
     <!-- homepage -->
     <div>
-      <div class="flex items-center gap-[4px] mb-[8px]">
+      <div class="flex items-center gap-1 mb-2">
         {{ $t('all.homepage') }}
       </div>
       <el-input
         class="max-w-[600px]"
+        size="large"
         v-model="profileData.homepage.value"
         :placeholder="$t('all.homepage')"
         @change="handleInputChange">
@@ -119,11 +122,12 @@
     </div>
     <!-- bio -->
     <div>
-      <div class="flex items-center gap-[4px] mb-[8px]">
+      <div class="flex items-center gap-1 mb-2">
         {{ $t('all.bio') }}
       </div>
       <el-input
         class="max-w-[600px]"
+        size="large"
         v-model="profileData.bio.value"
         clearable
         type="textarea"
@@ -133,6 +137,7 @@
       </el-input>
     </div>
     <div
+      v-if="hasBasicInfoChanges"
       @click="confirmUpdateProfile"
       class="btn btn-primary btn-md w-fit">
       {{ $t('all.save') }}
@@ -144,7 +149,7 @@
   import csrfFetch from '../../packs/csrfFetch.js'
   import useFetchApi from '../../packs/useFetchApi'
   import { ElMessage, ElMessageBox } from 'element-plus'
-  import { ref, reactive, watch } from 'vue'
+  import { ref, reactive, watch, computed } from 'vue'
   import useUserStore from '../../stores/UserStore.js'
   import { storeToRefs } from 'pinia'
   import { useI18n } from 'vue-i18n'
@@ -189,17 +194,98 @@
 
   const fileInput = ref(null)
   const emit = defineEmits(['updateHasSave'])
+  
+  // 存储初始值用于比较
+  const initialUsername = ref('')
+  const initialNickname = ref('')
+  const initialHomepage = ref('')
+  const initialBio = ref('')
+  const initialAvatar = ref('')
+  const hasInitialized = ref(false)
+  
+  // 初始化函数
+  const initializeValues = () => {
+    if (!hasInitialized.value) {
+      initialUsername.value = profileData.username?.value || ''
+      initialNickname.value = profileData.nickname?.value || ''
+      initialHomepage.value = profileData.homepage?.value || ''
+      initialBio.value = profileData.bio?.value || ''
+      initialAvatar.value = profileData.avatar?.value || ''
+      hasInitialized.value = true
+    }
+  }
+  
+  // 重置初始值函数（保存成功后调用）
+  const resetInitialValues = () => {
+    initialUsername.value = profileData.username?.value || ''
+    initialNickname.value = profileData.nickname?.value || ''
+    initialHomepage.value = profileData.homepage?.value || ''
+    initialBio.value = profileData.bio?.value || ''
+    initialAvatar.value = profileData.avatar?.value || ''
+  }
 
   const { canChangeUsername } = storeToRefs(userStore)
   const { refreshCanChangeUsernameCookie } = userStore
 
+  // 计算属性：检查字段是否有变化
+  const hasBasicInfoChanges = computed(() => {
+    return (profileData.username?.value || '') !== initialUsername.value ||
+           (profileData.nickname?.value || '') !== initialNickname.value ||
+           (profileData.homepage?.value || '') !== initialHomepage.value ||
+           (profileData.bio?.value || '') !== initialBio.value ||
+           (profileData.avatar?.value || '') !== initialAvatar.value
+  })
+
+  // 初始化初始值
+  initializeValues()
+  
+  // watch 函数需要在所有相关变量定义之后
+  watch(
+    () => profileData,
+    (newVal, oldVal) => {
+      // 只有在不是第一次初始化时才更新初始化状态
+      if (oldVal) {
+        userStore.updateInitalized(false)
+      }
+      form.email = profileData.email?.value || ''
+      
+      // 更新初始值（排除手机号和邮箱）
+      initializeValues()
+    },
+    { deep: true, immediate: true }
+  )
+
+  // 调试用：监控计算属性变化
+  watch(
+    () => hasBasicInfoChanges.value,
+    (newVal) => {
+      console.log('hasBasicInfoChanges:', newVal)
+      console.log('Current values:', {
+        username: profileData.username?.value || '',
+        nickname: profileData.nickname?.value || '',
+        homepage: profileData.homepage?.value || '',
+        bio: profileData.bio?.value || '',
+        avatar: profileData.avatar?.value || ''
+      })
+      console.log('Initial values:', {
+        username: initialUsername.value,
+        nickname: initialNickname.value,
+        homepage: initialHomepage.value,
+        bio: initialBio.value,
+        avatar: initialAvatar.value
+      })
+    }
+  )
+
   const uploadImage = () => {
     fileInput.value.click()
   }
 
   const removeImage = () => {
     fileInput.value.value = ''
-    profileData.avatar.value = ''
+    if (profileData.avatar) {
+      profileData.avatar.value = ''
+    }
   }
 
   const uploadAvatar = async () => {
@@ -215,7 +301,9 @@
     if (!response.ok) {
       ElMessage.warning(result.message)
     } else {
-      profileData.avatar.value = result.url
+      if (profileData.avatar) {
+        profileData.avatar.value = result.url
+      }
     }
   }
 
@@ -254,7 +342,7 @@
     }
 
     if (canChangeUsername.value) {
-      params['new_username'] = profileData.username.value
+      params['new_username'] = profileData.username?.value || ''
     }
 
     Object.keys(params).forEach(key => {
@@ -288,7 +376,7 @@
   }
 
   const saveProfile = (config={}) => {
-    if (isBlank(profileData.username.value)) {
+    if (isBlank(profileData.username?.value)) {
       ElMessage.warning("Please provide username")
       return
     }
diff --git a/frontend/src/locales/en_js/all.js b/frontend/src/locales/en_js/all.js
index d40615561..1dfea7167 100644
--- a/frontend/src/locales/en_js/all.js
+++ b/frontend/src/locales/en_js/all.js
@@ -39,9 +39,9 @@ export const all = {
   sureDel: "to confirm deletion",
   canNot: "Cannot",
   role: "Role",
-  userName: "Username",
-  updateUserName: "Update Username",
-  nickName: "Nickname",
+  userName: "User ID",
+  updateUserName: "Update User ID",
+  nickName: "User Name",
   homepage:"homepage",
   bio:"bio",
   phone: "Phone Number",
diff --git a/frontend/src/locales/en_js/profile.js b/frontend/src/locales/en_js/profile.js
index 171d536e4..8b9b7bd51 100644
--- a/frontend/src/locales/en_js/profile.js
+++ b/frontend/src/locales/en_js/profile.js
@@ -17,7 +17,6 @@ export const profile = {
     warningTipDesc: "Are you sure to leave the Settings page unsaved?",
   },
   edit: {
-    userAvatar: "User Avatar",
     uploadAvatar: "Upload Avatar",
     removeAvatar: "Remove Avatar",
     confirmUpdateTitle: "Profile Update",
diff --git a/frontend/src/locales/en_js/rule.js b/frontend/src/locales/en_js/rule.js
index e5c61996f..ce5675d29 100644
--- a/frontend/src/locales/en_js/rule.js
+++ b/frontend/src/locales/en_js/rule.js
@@ -1,7 +1,7 @@
 export const rule = {
   notChangable: "Can't be changed once been set",
   // nameRule: "A string of 2-64 alphanumeric characters, _.-, where _.- cannot appear side by side, must start with a letter, and end with a letter or number.",
-  nameRule: "Please enter a combination of 2 to 10 letters and numbers",
+  nameRule: "Please enter a combination of 2 to 10 letters and numbers, as the unique ID",
   collectionNameRule: "A string of 2-70 alphanumeric characters, _.-, where _.- cannot appear side by side, must start with a letter, and end with a letter or number.",
   lengthLimit: "The length is within the range of {min} to {max} characters",
   startWithLetter: "Must start with a letter",
diff --git a/frontend/src/locales/zh_hant_js/all.js b/frontend/src/locales/zh_hant_js/all.js
index b329561fa..6eb278e1d 100644
--- a/frontend/src/locales/zh_hant_js/all.js
+++ b/frontend/src/locales/zh_hant_js/all.js
@@ -40,9 +40,9 @@ export const all = {
   sureDel: "以確認刪除",
   canNot: "無法",
   role: "角色",
-  userName: "使用者名稱",
-  updateUserName: "更新 使用者名稱",
-  nickName: "使用者暱稱",
+  userName: "使用者ID",
+  updateUserName: "更新 使用者ID",
+  nickName: "使用者名稱",
   homepage:"主頁",
   bio:"個人簡介",
   phone: "手機號碼",
diff --git a/frontend/src/locales/zh_hant_js/profile.js b/frontend/src/locales/zh_hant_js/profile.js
index d10847f20..78af3030a 100644
--- a/frontend/src/locales/zh_hant_js/profile.js
+++ b/frontend/src/locales/zh_hant_js/profile.js
@@ -1,8 +1,5 @@
 export const profile = {
   accountSetting: "帳號設定",
-    updatePassword: "更新密碼",
-    keyManagement: "金鑰管理",
-    rechargeBilling: "帳單/儲值",
     myCollect: "我的收藏",
     interests: "興趣",
     organization: "組織機構",
@@ -20,16 +17,8 @@ export const profile = {
       warningTipDesc: "確認在未儲存的狀態下離開設定頁面？",
     },
     edit: {
-      userAvatar: "用戶頭像",
       uploadAvatar: "上傳頭像",
       removeAvatar: "移除頭像",
-      updatePhone: "更新",
-      sendSms: "發送",
-      retrySendSms: "後重試",
-      smsCode: '驗證碼',
-      smsSented: '驗證碼已發送',
-      smsNotMatch: '驗證碼不匹配',
-      phoneNotMatch: '電話和驗證碼不匹配',
       confirmUpdateTitle: "更新 Profile",
       confirmUpdate: "更新",
       cancelUpdate: "取消",
@@ -41,11 +30,5 @@ export const profile = {
       internalUsernamePlaceholder: "用戶名",
       emailRequired: "請輸入電子郵箱地址",
       emailValid: "請輸入有效的電子郵箱地址，如example{'@'}domain.com",
-      certification: "認證資訊",
-      RealNameAuthentication: "實名認證",
-      pending: "申請中",
-      approved: "已認證",
-      rejected: "已拒絕",
-      rejectReason: "拒絕原因",
     },
   }
\ No newline at end of file
diff --git a/frontend/src/locales/zh_hant_js/rule.js b/frontend/src/locales/zh_hant_js/rule.js
index f402b53f7..b326522ee 100644
--- a/frontend/src/locales/zh_hant_js/rule.js
+++ b/frontend/src/locales/zh_hant_js/rule.js
@@ -1,7 +1,7 @@
 export const rule = {
   notChangable: "設定後不可變更",
     // nameRule: "2-64个字母数字_.-的字符串，_.-不能并列出现，只能字母开头，字母或者数字结尾",
-    nameRule: "請輸入2~10位的字母、數字組合",
+    nameRule: "請輸入2~10位的字母、數字組合，作為唯一ID",
     collectionNameRule: "2-70個字母數字_.-的字串，_.-不能並列出現，只能字母開頭，字母或者數字結尾",
     lengthLimit: "長度在{min}到{max}字元範圍",
     startWithLetter: "必須以字母開頭",
diff --git a/frontend/src/locales/zh_js/all.js b/frontend/src/locales/zh_js/all.js
index e97ab85e1..254fd5a25 100644
--- a/frontend/src/locales/zh_js/all.js
+++ b/frontend/src/locales/zh_js/all.js
@@ -39,9 +39,9 @@ export const all = {
   sureDel: "以确认删除",
   canNot: "无法",
   role: "角色",
-  userName: "用户名",
-  updateUserName: "更新 用户名",
-  nickName: "用户昵称",
+  userName: "用户ID",
+  updateUserName: "更新 用户ID",
+  nickName: "用户名称",
   homepage:"主页",
   bio:"个人简介",
   phone: "手机号码",
diff --git a/frontend/src/locales/zh_js/profile.js b/frontend/src/locales/zh_js/profile.js
index 15ba24980..86e1a7a0b 100644
--- a/frontend/src/locales/zh_js/profile.js
+++ b/frontend/src/locales/zh_js/profile.js
@@ -17,7 +17,6 @@ export const profile = {
     warningTipDesc: "确认在未保存的状态下离开设置页面？",
   },
   edit: {
-    userAvatar: "用户头像",
     uploadAvatar: "上传头像",
     removeAvatar: "移除头像",
     confirmUpdateTitle: "更新 Profile",
diff --git a/frontend/src/locales/zh_js/rule.js b/frontend/src/locales/zh_js/rule.js
index 05c1ae57d..465444b05 100644
--- a/frontend/src/locales/zh_js/rule.js
+++ b/frontend/src/locales/zh_js/rule.js
@@ -1,7 +1,7 @@
 export const rule = {
   notChangable: "设置后不可更改",
   // nameRule: "2-64个字母数字_.-的字符串，_.-不能并列出现，只能字母开头，字母或者数字结尾",
-  nameRule: "请输入2~10位的字母、数字组合",
+  nameRule: "请输入 2-10 位字母或数字的组合，作为唯一ID",
   collectionNameRule: "2-70个字母数字_.-的字符串，_.-不能并列出现，只能字母开头，字母或者数字结尾",
   lengthLimit: "长度在{min}到{max}字符范围",
   startWithLetter: "必须以字母开头",