diff --git a/src/views/setting/components/SecuritySection.vue b/src/views/setting/components/SecuritySection.vue
index 6c73d08..c957f76 100644
--- a/src/views/setting/components/SecuritySection.vue
+++ b/src/views/setting/components/SecuritySection.vue
@@ -1,29 +1,42 @@
 <template>
-  <SettingsSection
-    :title="t('Settings.security.title')"
-    :description="t('Settings.security.description')"
-    content-class="security-container"
-  >
-    <div class="inner-divider" />
-    <div class="security-row">
-      <div class="security-inline-row">
-        <div class="security-label inline">{{ t('Settings.security.email') }}</div>
-        <div class="security-static">{{ email }}</div>
-        <button v-show="isEditing" type="button" class="small-btn" @click="emit('reset-email')">
-          {{ t('Settings.buttons.cancel') }}
-        </button>
-      </div>
-    </div>
+	<SettingsSection
+		:title="t('Settings.security.title')"
+		:description="t('Settings.security.description')"
+		content-class="security-container"
+	>
+		<div class="inner-divider" />
+		<div class="security-row">
+			<div class="security-inline-row">
+				<div class="security-label inline">{{ t('Settings.security.email') }}</div>
+				<div class="security-static">{{ email }}</div>
+				<button
+					v-show="isEditing && !isEditingEmail"
+					type="button"
+					class="small-btn"
+					@click="emit('edit-email')"
+				>
+					{{ t('Settings.buttons.edit') }}
+				</button>
+				<button
+					v-show="isEditing && isEditingEmail"
+					type="button"
+					class="small-btn"
+					@click="emit('reset-email')"
+				>
+					{{ t('Settings.buttons.cancel') }}
+				</button>
+			</div>
+		</div>
 
-    <div v-show="isEditing" class="security-row">
-      <div class="security-label">{{ t('Settings.security.newEmail') }}</div>
-      <div class="outlined-field verify-field">
-        <el-input
-          :model-value="newEmail"
-          :placeholder="t('Settings.security.newEmailPlaceholder')"
-          @update:model-value="emit('update:newEmail', String($event))"
-        />
-        <!-- <button
+		<div v-show="isEditing && isEditingEmail" class="security-row">
+			<div class="security-label">{{ t('Settings.security.newEmail') }}</div>
+			<div class="outlined-field verify-field">
+				<el-input
+					:model-value="newEmail"
+					:placeholder="t('Settings.security.newEmailPlaceholder')"
+					@update:model-value="emit('update:newEmail', String($event))"
+				/>
+				<!-- <button
           type="button"
           class="verify-btn"
           :class="{ verified: isEmailVerified }"
@@ -31,212 +44,235 @@
         >
           {{ isEmailVerified ? t('Settings.security.verified') : t('Settings.security.verify') }}
         </button> -->
-      </div>
-      <!-- <div v-if="isEmailVerified" class="security-tip verified-tip">
+			</div>
+			<!-- <div v-if="isEmailVerified" class="security-tip verified-tip">
         {{ t('Settings.security.verifiedTip') }}
       </div> -->
-    </div>
+		</div>
 
-    <div class="inner-divider" />
+		<div class="inner-divider" />
 
-    <div class="security-row">
-      <div class="security-inline-row">
-        <div class="security-label inline">{{ t('Settings.security.password') }}</div>
-        <div class="security-static password-mask">.........</div>
-        <button v-show="isEditing" type="button" class="small-btn" @click="emit('reset-password')">
-          {{ t('Settings.buttons.cancel') }}
-        </button>
-      </div>
-    </div>
+		<div class="security-row">
+			<div class="security-inline-row">
+				<div class="security-label inline">{{ t('Settings.security.password') }}</div>
+				<div class="security-static password-mask">.........</div>
+				<button
+					v-show="isEditing && !isEditingPassword"
+					type="button"
+					class="small-btn"
+					@click="emit('edit-password')"
+				>
+					{{ t('Settings.buttons.edit') }}
+				</button>
+				<button
+					v-show="isEditing && isEditingPassword"
+					type="button"
+					class="small-btn"
+					@click="emit('reset-password')"
+				>
+					{{ t('Settings.buttons.cancel') }}
+				</button>
+			</div>
+		</div>
 
-    <div v-show="isEditing" class="security-row">
-      <div class="security-label">{{ t('Settings.security.newPassword') }}</div>
-      <div class="outlined-field">
-        <el-input
-          :model-value="newPassword"
-          type="password"
-          show-password
-          :placeholder="t('Settings.security.newPasswordPlaceholder')"
-          @update:model-value="emit('update:newPassword', String($event))"
-        />
-      </div>
-      <div class="security-tip">{{ t('Settings.security.passwordTip') }}</div>
-    </div>
+		<div v-show="isEditing && isEditingPassword" class="security-row">
+			<div class="security-label">{{ t('Settings.security.newPassword') }}</div>
+			<div class="outlined-field">
+				<el-input
+					:model-value="newPassword"
+					type="password"
+					show-password
+					:placeholder="t('Settings.security.newPasswordPlaceholder')"
+					@update:model-value="emit('update:newPassword', String($event))"
+				/>
+			</div>
+			<div class="security-tip">{{ t('Settings.security.passwordTip') }}</div>
+		</div>
 
-    <div v-show="isEditing" class="security-row">
-      <div class="security-label">{{ t('Settings.security.currentPassword') }}</div>
-      <div class="outlined-field">
-        <el-input
-          :model-value="currentPassword"
-          type="password"
-          show-password
-          :placeholder="t('Settings.security.currentPasswordPlaceholder')"
-          @update:model-value="emit('update:currentPassword', String($event))"
-        />
-      </div>
-    </div>
-    <div class="inner-divider" />
-  </SettingsSection>
+		<div v-show="isEditing && isEditingPassword" class="security-row">
+			<div class="security-label">{{ t('Settings.security.currentPassword') }}</div>
+			<div class="outlined-field">
+				<el-input
+					:model-value="currentPassword"
+					type="password"
+					show-password
+					:placeholder="t('Settings.security.currentPasswordPlaceholder')"
+					@update:model-value="emit('update:currentPassword', String($event))"
+				/>
+			</div>
+		</div>
+		<div class="inner-divider" />
+	</SettingsSection>
 </template>
 
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-import SettingsSection from './SettingsSection.vue'
+	import { useI18n } from 'vue-i18n'
+	import SettingsSection from './SettingsSection.vue'
 
-defineProps<{
-  email: string
-  newEmail: string
-  newPassword: string
-  currentPassword: string
-  isEditing: boolean
-  isEmailVerified: boolean
-}>()
+	defineProps<{
+		email: string
+		newEmail: string
+		newPassword: string
+		currentPassword: string
+		isEditing: boolean
+		isEditingEmail: boolean
+		isEditingPassword: boolean
+		isEmailVerified: boolean
+	}>()
 
-const emit = defineEmits<{
-  (event: 'update:newEmail', value: string): void
-  (event: 'update:newPassword', value: string): void
-  (event: 'update:currentPassword', value: string): void
-  (event: 'reset-email'): void
-  (event: 'reset-password'): void
-  (event: 'verify-email'): void
-}>()
+	const emit = defineEmits<{
+		(event: 'update:newEmail', value: string): void
+		(event: 'update:newPassword', value: string): void
+		(event: 'update:currentPassword', value: string): void
+		(event: 'edit-email'): void
+		(event: 'edit-password'): void
+		(event: 'reset-email'): void
+		(event: 'reset-password'): void
+		(event: 'verify-email'): void
+	}>()
 
-const { t } = useI18n()
+	const { t } = useI18n()
 </script>
 
 <style lang="less" scoped>
-.field-text() {
-  font-family: 'KaiseiOpti-Regular';
-  font-size: 1.6rem;
-  line-height: 2.4rem;
-  color: #232323;
-}
+	.field-text() {
+		font-family: 'KaiseiOpti-Regular';
+		font-size: 1.6rem;
+		line-height: 2.4rem;
+		color: #232323;
+	}
 
-.field-frame() {
-  width: 100%;
-  min-height: 4rem;
-  border: 0.1rem solid #979797;
-}
+	.field-frame() {
+		width: 100%;
+		min-height: 4rem;
+		border: 0.1rem solid #979797;
+	}
 
-.control-wrapper() {
-  box-shadow: none;
-  border-radius: 0;
-  padding: 0 2rem;
-}
+	.control-wrapper() {
+		box-shadow: none;
+		border-radius: 0;
+		padding: 0 2rem;
+	}
 
-.security-row + .security-row {
-  margin-top: 2.8rem;
-}
+	.security-row + .security-row {
+		margin-top: 2.8rem;
+	}
 
-.security-label {
-  margin: 0 0 0.8rem;
-  font-family: 'KaiseiOpti-Medium';
-  font-size: 1.4rem;
-  line-height: 2.4rem;
-  letter-spacing: 0.04em;
-  color: #585858;
+	.security-label {
+		margin: 0 0 0.8rem;
+		font-family: 'KaiseiOpti-Medium';
+		font-size: 1.4rem;
+		line-height: 2.4rem;
+		letter-spacing: 0.04em;
+		color: #585858;
 
-  &.inline {
-    width: 10.8rem;
-    margin-bottom: 0;
-    flex-shrink: 0;
-  }
-}
+		&.inline {
+			width: 10.8rem;
+			margin-bottom: 0;
+			flex-shrink: 0;
+		}
+	}
 
-.security-static {
-  .field-text();
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-height: 2.4rem;
-  padding: 0.1rem 0 0;
-}
+	.security-static {
+		.field-text();
+		display: flex;
+		align-items: center;
+		flex: 1;
+		min-height: 2.4rem;
+		padding: 0.1rem 0 0;
+	}
 
-.security-inline-row {
-  display: flex;
-  align-items: center;
-  gap: 2.8rem;
-  min-height: 3.2rem;
-}
+	.security-inline-row {
+		display: flex;
+		align-items: center;
+		gap: 2.8rem;
+		min-height: 3.2rem;
+	}
 
-.security-tip {
-  margin-top: 0.6rem;
-  font-family: 'KaiseiOpti-Regular';
-  font-size: 1.2rem;
-  line-height: 1.6rem;
-  color: #9f9f9f;
-}
+	.security-tip {
+		margin-top: 0.6rem;
+		font-family: 'KaiseiOpti-Regular';
+		font-size: 1.2rem;
+		line-height: 1.6rem;
+		color: #9f9f9f;
+	}
 
-.outlined-field {
-  .field-frame();
+	.outlined-field {
+		.field-frame();
 
-  :deep(.el-input) {
-    width: 100%;
-    min-height: 4rem;
-  }
+		:deep(.el-input) {
+			width: 100%;
+			min-height: 4rem;
+		}
 
-  :deep(.el-input__wrapper) {
-    .control-wrapper();
-    min-height: 4rem;
-  }
-}
+		:deep(.el-input__wrapper) {
+			.control-wrapper();
+			min-height: 4rem;
+		}
+	}
 
-.verify-field {
-  display: flex;
-  align-items: center;
-  margin-top: 0.8rem;
+	.verify-field {
+		display: flex;
+		align-items: center;
+		margin-top: 0.8rem;
 
-  :deep(.el-input) {
-    flex: 1;
-  }
-}
+		:deep(.el-input) {
+			flex: 1;
+		}
+	}
 
-.verify-btn {
-  border: none;
-  min-width: 11rem;
-  height: 2.8rem;
-  line-height: 2.8rem;
-  border-left: 0.1rem solid #979797;
-  background: #ffffff;
-  font-family: 'KaiseiOpti-Medium';
-  font-size: 1.4rem;
-  color: #232323;
-  cursor: pointer;
-  padding: 0 2rem;
+	.verify-btn {
+		border: none;
+		min-width: 11rem;
+		height: 2.8rem;
+		line-height: 2.8rem;
+		border-left: 0.1rem solid #979797;
+		background: #ffffff;
+		font-family: 'KaiseiOpti-Medium';
+		font-size: 1.4rem;
+		color: #232323;
+		cursor: pointer;
+		padding: 0 2rem;
 
-  &.verified {
-    color: #ffffff;
+		&.verified {
+			color: #ffffff;
+			background: #232323;
+			border-left-color: #232323;
+		}
+	}
+
+	.password-mask {
+		font-family: 'KaiseiOpti-Bold';
+		letter-spacing: 0.08rem;
+	}
+
+	.inner-divider {
+		height: 1px;
+		margin: 2rem 0;
+		background-color: #c4c4c4;
+	}
+
+	.small-btn {
+		width: 10rem;
+		height: 3.2rem;
+		align-self: flex-start;
+		border: 0.1rem solid #c4c4c4;
+		background: #f6f6f6;
+		font-family: 'KaiseiOpti-Bold';
+		font-size: 1.2rem;
+		line-height: 2.6rem;
+		letter-spacing: -0.03em;
+		color: #232323;
+		cursor: pointer;
+		/* 
+  &.edit-btn {
+    border-color: #232323;
     background: #232323;
-    border-left-color: #232323;
-  }
-}
+    color: #ffffff;
+  } */
+	}
 
-.password-mask {
-  font-family: 'KaiseiOpti-Bold';
-  letter-spacing: 0.08rem;
-}
-
-.inner-divider {
-  height: 1px;
-  margin: 2rem 0;
-  background-color: #c4c4c4;
-}
-
-.small-btn {
-  width: 10rem;
-  height: 3.2rem;
-  align-self: flex-start;
-  border: 0.1rem solid #c4c4c4;
-  background: #f6f6f6;
-  font-family: 'KaiseiOpti-Bold';
-  font-size: 1.2rem;
-  line-height: 2.6rem;
-  letter-spacing: -0.03em;
-  color: #232323;
-  cursor: pointer;
-}
-
-.verified-tip {
-  color: #6f7f68;
-}
+	.verified-tip {
+		color: #6f7f68;
+	}
 </style>
diff --git a/src/views/setting/index.vue b/src/views/setting/index.vue
index a8a3edf..431dc9d 100644
--- a/src/views/setting/index.vue
+++ b/src/views/setting/index.vue
@@ -25,7 +25,11 @@
 				v-model:current-password="securityDraft.currentPassword"
 				:email="displayData.email"
 				:is-editing="isEditing"
+				:is-editing-email="isEditingEmail"
+				:is-editing-password="isEditingPassword"
 				:is-email-verified="isEmailVerified"
+				@edit-email="handleEditEmail"
+				@edit-password="handleEditPassword"
 				@reset-email="resetSecurityEmail"
 				@reset-password="resetSecurityPassword"
 				@verify-email="handleVerifyEmail"
@@ -98,9 +102,13 @@
 		fullName,
 		roleModel,
 		needsEmailVerification,
+		isEditingEmail,
+		isEditingPassword,
 		handleEdit,
 		handleDiscard,
 		handleSave,
+		handleEditEmail,
+		handleEditPassword,
 		resetSecurityEmail,
 		resetSecurityPassword,
 		handleVerifyEmail,
diff --git a/src/views/setting/useSettingsForm.ts b/src/views/setting/useSettingsForm.ts
index 0b4a0bd..88fd4a7 100644
--- a/src/views/setting/useSettingsForm.ts
+++ b/src/views/setting/useSettingsForm.ts
@@ -88,6 +88,8 @@ export function useSettingsForm({ t, locale }: UseSettingsFormOptions) {
 	const verificationTargetEmail = shallowRef('')
 	const verifiedEmail = shallowRef('')
 	const verificationCode = shallowRef('')
+	const isEditingEmail = shallowRef(false)
+	const isEditingPassword = shallowRef(false)
 
 	const roleList = computed(() =>
 		roleValues.map((value) => ({
@@ -178,6 +180,8 @@ export function useSettingsForm({ t, locale }: UseSettingsFormOptions) {
 		draftData.value = cloneSettingsData(sourceData.value)
 		securityDraft.value = createEmptySecurityDraft()
 		resetEmailVerificationState()
+		isEditingEmail.value = false
+		isEditingPassword.value = false
 	}
 
 	const handleEdit = () => {
@@ -188,11 +192,21 @@ export function useSettingsForm({ t, locale }: UseSettingsFormOptions) {
 	const resetSecurityEmail = () => {
 		securityDraft.value.newEmail = ''
 		resetEmailVerificationState()
+		isEditingEmail.value = false
 	}
 
 	const resetSecurityPassword = () => {
 		securityDraft.value.newPassword = ''
 		securityDraft.value.currentPassword = ''
+		isEditingPassword.value = false
+	}
+
+	const handleEditEmail = () => {
+		isEditingEmail.value = true
+	}
+
+	const handleEditPassword = () => {
+		isEditingPassword.value = true
 	}
 
 	const handleDiscard = () => {
@@ -385,11 +399,15 @@ export function useSettingsForm({ t, locale }: UseSettingsFormOptions) {
 		fullName,
 		roleModel,
 		needsEmailVerification,
+		isEditingEmail,
+		isEditingPassword,
 		handleEdit,
 		handleDiscard,
 		handleSave,
 		resetSecurityEmail,
 		resetSecurityPassword,
+		handleEditEmail,
+		handleEditPassword,
 		handleVerifyEmail,
 		handleSendVerifyCode,
 		handleVerificationSubmit,