diff --git a/src/assets/icons/eye.svg b/src/assets/icons/eye.svg
new file mode 100644
index 0000000..9b4d290
--- /dev/null
+++ b/src/assets/icons/eye.svg
@@ -0,0 +1,5 @@
+<svg width="19" height="13" viewBox="0 0 19 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 6.49998C3.33333 1.97224 10.9 -4.36659 18.5 6.49998" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.5 6.49998C15.6667 11.0277 8.1 17.3666 0.5 6.49998" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<circle cx="9.5" cy="6.49998" r="2.5" stroke="#232323"/>
+</svg>
diff --git a/src/views/main-header.vue b/src/views/main-header.vue
index 406d949..54f3a83 100644
--- a/src/views/main-header.vue
+++ b/src/views/main-header.vue
@@ -124,7 +124,7 @@
 	}
 	const onSettings = () => {
 		hideProfilePopover()
-		console.log('settings')
+		router.push('/settings')
 	}
 	const onLogout = () => {
 		hideProfilePopover()
diff --git a/src/views/setting/components/Radio.vue b/src/views/setting/components/Radio.vue
index 8d2376c..7c05e54 100644
--- a/src/views/setting/components/Radio.vue
+++ b/src/views/setting/components/Radio.vue
@@ -29,6 +29,7 @@ const props = defineProps<{
   modelValue: string | number | boolean | Array<string | number | boolean> | null
   options: Option[] // 按钮选项数组
   multiple?: boolean // 是否支持多选，默认为 false
+  max?: number // 多选时最多可选数量，不传则不限制
 }>()
 
 const emit = defineEmits<{
@@ -54,6 +55,9 @@ const selectOption = (value: any) => {
     if (index >= 0) {
       current.splice(index, 1)
     } else {
+      if (typeof props.max === 'number' && props.max > 0 && current.length >= props.max) {
+        current.shift()
+      }
       current.push(value)
     }
     emit('update:modelValue', current)
diff --git a/src/views/setting/index.vue b/src/views/setting/index.vue
index 831ddb5..1a8eed3 100644
--- a/src/views/setting/index.vue
+++ b/src/views/setting/index.vue
@@ -18,9 +18,7 @@
           <div class="profile-header flex align-center">
             <div class="avatar relative">
               <SvgIcon name="user_0" size="46" class="avatar-icon" />
-              <button v-if="isEditing" type="button" class="avatar-edit-btn">
-                <SvgIcon name="ThumbEdit" size="18" class="avatar-edit-icon" />
-              </button>
+              <img src="@/assets/images/edit.png" class="avatar-edit-icon" />
             </div>
             <div class="profile-summary flex flex-col">
               <div class="profile-name">{{ fullName }}</div>
@@ -28,113 +26,66 @@
             </div>
           </div>
 
-          <template v-if="isEditing">
-            <div class="form-container flex flex-col">
-              <div class="flex col-gap-2">
-                <div class="form-item">
-                  <div class="form-item-label">FIRST NAME</div>
-                  <div class="form-item-value name">
-                    <el-input v-model="draftData.firstName" placeholder="First Name" />
-                  </div>
-                </div>
-                <div class="form-item">
-                  <div class="form-item-label">LAST NAME</div>
-                  <div class="form-item-value name">
-                    <el-input v-model="draftData.lastName" placeholder="Last Name" />
-                  </div>
+          <div class="read-section">
+            <div class="read-row two-column">
+              <div class="read-item">
+                <div class="read-label">FIRST NAME</div>
+                <div v-show="!isEditing" class="read-box">{{ displayData.firstName }}</div>
+                <div v-show="isEditing" class="form-item-value name">
+                  <el-input v-model="draftData.firstName" placeholder="First Name" />
                 </div>
               </div>
-
-              <div class="form-item">
-                <div class="form-item-label">USERNAME</div>
-                <div class="form-item-value">
-                  <el-input v-model="draftData.username" placeholder="Username" />
+              <div class="read-item">
+                <div class="read-label">LAST NAME</div>
+                <div v-show="!isEditing" class="read-box">{{ displayData.lastName }}</div>
+                <div v-show="isEditing" class="form-item-value name">
+                  <el-input v-model="draftData.lastName" placeholder="Last Name" />
                 </div>
-                <div class="form-tip">Your public username on Stylish Parade.</div>
-              </div>
-
-              <div class="form-item">
-                <div class="form-item-label">ROLE</div>
-                <div class="form-item-value noborder radio">
-                  <Radio multiple v-model="roleModel" :options="roleList" />
-                </div>
-                <div class="form-tip">Select up to 2 labels that suit you.</div>
               </div>
             </div>
 
-            <div class="social-links">
+            <div class="read-row">
+              <div class="read-label">USERNAME</div>
+              <div v-show="!isEditing" class="read-box">{{ displayData.username }}</div>
+              <div v-show="isEditing" class="form-item-value">
+                <el-input v-model="draftData.username" placeholder="Username" />
+              </div>
+            </div>
+            <div class="read-tip">Your public username on Stylish Parade.</div>
+
+            <div class="read-row role-row">
+              <div class="read-label">ROLE</div>
+              <div :class="{ 'readonly-radio-group': !isEditing }">
+                <Radio multiple :max="2" v-model="roleModel" :options="roleList" />
+              </div>
+            </div>
+            <div class="read-tip">Select up to 2 labels that suit you.</div>
+
+            <div class="social-links read-social-links">
               <div class="title">SOCIAL LINKS</div>
               <div class="links-list flex flex-col">
                 <div
                   class="links-item flex align-center"
-                  v-for="(item, index) in draftData.links"
-                  :key="`edit-${index}`"
+                  v-for="(item, index) in displayData.links"
+                  :key="`view-${index}`"
                 >
                   <div class="link-index">Link {{ index + 1 }}</div>
-                  <div class="link-href flex-1">
+                  <div v-show="!isEditing" class="link-href flex-1 readonly">{{ item }}</div>
+                  <div v-show="isEditing" class="link-href flex-1">
                     <el-input v-model="draftData.links[index]" />
                   </div>
                 </div>
-                <button type="button" class="add-link-btn" @click="handleAddLink">+</button>
+                <button
+                  v-show="isEditing"
+                  type="button"
+                  class="add-link-btn"
+                  @click="handleAddLink"
+                >
+                  +
+                </button>
               </div>
             </div>
-          </template>
-
-          <template v-else>
-            <div class="read-section">
-              <div class="read-row two-column">
-                <div class="read-item">
-                  <div class="read-label">FIRST NAME</div>
-                  <div class="read-box">{{ displayData.firstName }}</div>
-                </div>
-                <div class="read-item">
-                  <div class="read-label">LAST NAME</div>
-                  <div class="read-box">{{ displayData.lastName }}</div>
-                </div>
-              </div>
-
-              <div class="read-row">
-                <div class="read-label">USERNAME</div>
-                <div class="read-box">{{ displayData.username }}</div>
-              </div>
-              <div class="read-tip">Your public username on Stylish Parade.</div>
-
-              <div class="read-row role-row">
-                <div class="read-label">ROLE</div>
-                <div class="role-tags">
-                  <div
-                    v-for="item in displayData.role"
-                    :key="item"
-                    class="role-tag is-active"
-                  >
-                    {{ item }}
-                  </div>
-                  <div
-                    v-for="item in inactiveRoleList"
-                    :key="`inactive-${item}`"
-                    class="role-tag"
-                  >
-                    {{ item }}
-                  </div>
-                </div>
-              </div>
-              <div class="read-tip">Select up to 2 labels that suit you.</div>
-
-              <div class="social-links read-social-links">
-                <div class="title">SOCIAL LINKS</div>
-                <div class="links-list flex flex-col">
-                  <div
-                    class="links-item flex align-center"
-                    v-for="(item, index) in displayData.links"
-                    :key="`view-${index}`"
-                  >
-                    <div class="link-index">Link {{ index + 1 }}</div>
-                    <div class="link-href flex-1 readonly">{{ item }}</div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </template>
+          </div>
         </div>
       </div>
 
@@ -147,72 +98,72 @@
         </div>
 
         <div class="context-container security-container">
+          <div class="inner-divider" />
           <div class="security-row">
-            <div class="security-label">EMAIL</div>
-            <template v-if="isEditing">
-              <div class="inline-header flex align-center">
-                <div class="security-static flex-1">{{ displayData.email }}</div>
-                <button type="button" class="small-btn" @click="resetSecurityEmail">
-                  CANCEL
-                </button>
-              </div>
-            </template>
-            <template v-else>
-              <div class="security-static">{{ displayData.email }}</div>
-            </template>
+            <div class="security-inline-row flex align-center">
+              <div class="security-label inline">EMAIL</div>
+              <div class="security-static flex-1">{{ displayData.email }}</div>
+              <button
+                v-show="isEditing"
+                type="button"
+                class="small-btn"
+                @click="resetSecurityEmail"
+              >
+                CANCEL
+              </button>
+            </div>
           </div>
 
-          <div v-if="isEditing" class="security-row">
+          <div v-show="isEditing" class="security-row">
             <div class="security-label">NEW EMAIL ADDRESS</div>
-            <div class="outlined-field verify-field">
+            <div class="outlined-field verify-field align-center">
               <el-input v-model="securityDraft.newEmail" placeholder="Enter new email" />
-              <button type="button" class="verify-btn">Verify</button>
+              <div class="verify-btn">Verify</div>
             </div>
           </div>
 
-          <div class="inner-divider" v-if="isEditing" />
+          <div class="inner-divider" />
 
           <div class="security-row">
-            <div class="security-label">PASSWORD</div>
-            <template v-if="isEditing">
-              <div class="inline-header flex align-center">
-                <div class="security-static password-mask flex-1">.........</div>
-                <button type="button" class="small-btn" @click="resetSecurityPassword">
-                  CANCEL
-                </button>
-              </div>
-            </template>
-            <template v-else>
-              <div class="security-static password-mask">.........</div>
-            </template>
+            <div class="security-inline-row flex align-center">
+              <div class="security-label inline">PASSWORD</div>
+              <div class="security-static password-mask flex-1">.........</div>
+              <button
+                v-show="isEditing"
+                type="button"
+                class="small-btn"
+                @click="resetSecurityPassword"
+              >
+                CANCEL
+              </button>
+            </div>
           </div>
 
-          <template v-if="isEditing">
-            <div class="security-row">
-              <div class="security-label">NEW PASSWORD</div>
-              <div class="outlined-field">
-                <el-input
-                  v-model="securityDraft.newPassword"
-                  type="password"
-                  show-password
-                  placeholder="Enter new password"
-                />
-              </div>
-              <div class="security-tip">You must satisfy ALL password conditions to register.</div>
+          <div v-show="isEditing" class="security-row">
+            <div class="security-label">NEW PASSWORD</div>
+            <div class="outlined-field">
+              <el-input
+                v-model="securityDraft.newPassword"
+                type="password"
+                show-password
+                placeholder="Enter new password"
+              />
             </div>
+            <div class="security-tip">You must satisfy ALL password conditions to register.</div>
+          </div>
 
-            <div class="security-row">
-              <div class="security-label">CURRENT PASSWORD</div>
-              <div class="outlined-field">
-                <el-input
-                  v-model="securityDraft.currentPassword"
-                  type="password"
-                  show-password
-                  placeholder="Confirm with your password"
-                />
-              </div>
+          <div v-show="isEditing" class="security-row">
+            <div class="security-label">CURRENT PASSWORD</div>
+            <div class="outlined-field">
+              <el-input
+                v-model="securityDraft.currentPassword"
+                type="password"
+                show-password
+                placeholder="Confirm with your password"
+              />
             </div>
-          </template>
+          </div>
+          <div class="inner-divider" />
         </div>
       </div>
 
@@ -227,40 +178,26 @@
         <div class="context-container region-container">
           <div class="region-row">
             <div class="security-label">DISPLAY LANGUAGE</div>
-            <template v-if="isEditing">
-              <div class="outlined-field select-field">
-                <el-select v-model="draftData.language" placeholder="Select language">
-                  <el-option
-                    v-for="item in languageList"
-                    :key="item"
-                    :label="item"
-                    :value="item"
-                  />
-                </el-select>
-              </div>
-            </template>
-            <template v-else>
-              <div class="security-static field-box">{{ displayData.language }}</div>
-            </template>
+            <div v-show="!isEditing" class="security-static field-box">
+              {{ displayData.language }}
+            </div>
+            <div v-show="isEditing" class="outlined-field select-field">
+              <el-select v-model="draftData.language" placeholder="Select language">
+                <el-option v-for="item in languageList" :key="item" :label="item" :value="item" />
+              </el-select>
+            </div>
           </div>
 
           <div class="region-row">
             <div class="security-label">REGION</div>
-            <template v-if="isEditing">
-              <div class="outlined-field select-field">
-                <el-select v-model="draftData.region" placeholder="Select region">
-                  <el-option
-                    v-for="item in regionList"
-                    :key="item"
-                    :label="item"
-                    :value="item"
-                  />
-                </el-select>
-              </div>
-            </template>
-            <template v-else>
-              <div class="security-static field-box">{{ displayData.region }}</div>
-            </template>
+            <div v-show="!isEditing" class="security-static field-box">
+              {{ displayData.region }}
+            </div>
+            <div v-show="isEditing" class="outlined-field select-field">
+              <el-select v-model="draftData.region" placeholder="Select region">
+                <el-option v-for="item in regionList" :key="item" :label="item" :value="item" />
+              </el-select>
+            </div>
           </div>
         </div>
       </div>
@@ -285,10 +222,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, ref } from 'vue'
 import { ElMessage } from 'element-plus'
-import { updateUserInfo } from '@/api/login'
-import { useUserInfoStore } from '@/stores'
 import Radio from './components/Radio.vue'
 
 interface SettingsData {
@@ -308,8 +243,6 @@ interface SecurityDraft {
   currentPassword: string
 }
 
-const userInfoStore = useUserInfoStore()
-
 const roleList = [
   'Fashion Enthusiast',
   'Content Creator',
@@ -327,7 +260,7 @@ const roleList = [
 const languageList = ['English', 'Chinese', 'Japanese']
 const regionList = ['Hong Kong SAR', 'Mainland China', 'Singapore', 'United Kingdom']
 
-const createFallbackData = (): SettingsData => ({
+const createDefaultData = (): SettingsData => ({
   firstName: 'Alexandra',
   lastName: 'Chen',
   email: 'alex.chen@gmail.com',
@@ -338,27 +271,6 @@ const createFallbackData = (): SettingsData => ({
   region: 'Hong Kong SAR'
 })
 
-const normalizeArray = (value: unknown, fallback: string[] = []) => {
-  if (!Array.isArray(value)) return fallback
-  return value.filter((item): item is string => typeof item === 'string' && item.trim().length > 0)
-}
-
-const createSettingsFromUserInfo = (userInfo: any): SettingsData => {
-  const fallback = createFallbackData()
-  const firstName = userInfo?.firstName || userInfo?.first_name || fallback.firstName
-  const lastName = userInfo?.lastName || userInfo?.last_name || fallback.lastName
-  return {
-    firstName,
-    lastName,
-    email: userInfo?.email || fallback.email,
-    username: userInfo?.username || fallback.username,
-    role: normalizeArray(userInfo?.role || userInfo?.roles, fallback.role).slice(0, 2),
-    links: normalizeArray(userInfo?.links || userInfo?.socialLinks, fallback.links),
-    language: userInfo?.language || fallback.language,
-    region: userInfo?.region || fallback.region
-  }
-}
-
 const cloneSettingsData = (data: SettingsData): SettingsData => ({
   firstName: data.firstName,
   lastName: data.lastName,
@@ -376,24 +288,12 @@ const createEmptySecurityDraft = (): SecurityDraft => ({
   currentPassword: ''
 })
 
-const sourceData = ref<SettingsData>(createSettingsFromUserInfo(userInfoStore.getUserInfo))
+const sourceData = ref<SettingsData>(createDefaultData())
 const draftData = ref<SettingsData>(cloneSettingsData(sourceData.value))
 const securityDraft = ref<SecurityDraft>(createEmptySecurityDraft())
 const isEditing = ref(false)
 const saving = ref(false)
 
-watch(
-  () => userInfoStore.getUserInfo,
-  (value) => {
-    const next = createSettingsFromUserInfo(value)
-    sourceData.value = next
-    if (!isEditing.value) {
-      draftData.value = cloneSettingsData(next)
-    }
-  },
-  { deep: true, immediate: true }
-)
-
 const displayData = computed(() => (isEditing.value ? draftData.value : sourceData.value))
 
 const fullName = computed(() => {
@@ -401,17 +301,14 @@ const fullName = computed(() => {
   return `${data.firstName} ${data.lastName}`.trim()
 })
 
-const inactiveRoleList = computed(() => {
-  const selected = new Set(sourceData.value.role)
-  return roleList
-    .map((item) => String(item.value))
-    .filter((item) => !selected.has(item))
-})
-
 const roleModel = computed({
-  get: () => draftData.value.role,
+  get: () => displayData.value.role,
   set: (value: string[]) => {
-    draftData.value.role = value.slice(0, 2)
+    if (isEditing.value) {
+      draftData.value.role = value
+      return
+    }
+    sourceData.value.role = value
   }
 })
 
@@ -443,15 +340,13 @@ const handleDiscard = () => {
   isEditing.value = false
 }
 
-const buildUpdatePayload = () => {
+const buildNextData = () => {
   const nextEmail = securityDraft.value.newEmail.trim() || draftData.value.email
   return {
     firstName: draftData.value.firstName.trim(),
     lastName: draftData.value.lastName.trim(),
     username: draftData.value.username.trim(),
     email: nextEmail,
-    password: securityDraft.value.newPassword.trim() || undefined,
-    currentPassword: securityDraft.value.currentPassword.trim() || undefined,
     role: draftData.value.role,
     links: draftData.value.links.map((item) => item.trim()).filter(Boolean),
     language: draftData.value.language,
@@ -460,21 +355,14 @@ const buildUpdatePayload = () => {
 }
 
 const handleSave = async () => {
-  const payload = buildUpdatePayload()
+  const nextData = buildNextData()
   saving.value = true
   try {
-    await updateUserInfo(payload)
-    const nextData = cloneSettingsData({
-      ...draftData.value,
-      email: payload.email,
-      links: payload.links.length ? payload.links : ['']
-    })
-    sourceData.value = nextData
-    draftData.value = cloneSettingsData(nextData)
-    userInfoStore.setUserInfo({
-      ...userInfoStore.getUserInfo,
-      ...payload
+    sourceData.value = cloneSettingsData({
+      ...nextData,
+      links: nextData.links.length ? nextData.links : ['']
     })
+    draftData.value = cloneSettingsData(sourceData.value)
     securityDraft.value = createEmptySecurityDraft()
     isEditing.value = false
     ElMessage.success('Settings updated')
@@ -492,11 +380,29 @@ const handleSave = async () => {
   overflow-y: auto;
   background: #ffffff;
 
+  .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;
+  }
+
+  .control-wrapper() {
+    box-shadow: none;
+    border-radius: 0;
+    padding: 0 2rem;
+  }
+
   .banner {
     height: 14.8rem;
     row-gap: 1.2rem;
-    background:
-      linear-gradient(rgba(255, 255, 255, 0.91), rgba(255, 255, 255, 0.91)),
+    background: linear-gradient(rgba(255, 255, 255, 0.91), rgba(255, 255, 255, 0.91)),
       linear-gradient(90deg, #f2eee8 0%, #fbfaf8 40%, #f1ede7 100%);
 
     .title {
@@ -516,455 +422,377 @@ const handleSave = async () => {
 
   .setting-content {
     padding: 4rem 18rem 7rem;
-  }
-
-  .setting-item {
-    column-gap: 21.4rem;
-    align-items: flex-start;
-  }
-
-  .label-container {
-    width: 27.6rem;
-    font-family: 'KaiseiOpti-Medium';
-  }
-
-  .label {
-    font-size: 2.8rem;
-    line-height: 3.6rem;
-    color: #232323;
-  }
-
-  .label-desc {
-    width: 24rem;
-    margin-top: 2rem;
-    font-size: 1.6rem;
-    line-height: 2.2rem;
-    color: #666666;
-  }
-
-  .context-container {
-    width: 58rem;
-  }
-
-  .profile-header {
-    column-gap: 2.6rem;
-    margin-bottom: 3.6rem;
-  }
-
-  .avatar {
-    width: 8rem;
-    height: 8rem;
-    border-radius: 50%;
-    border: 0.1rem solid #d8d0c7;
-    background: #faf7f3;
-  }
-
-  .avatar-icon {
-    color: #979797;
-  }
-
-  .avatar-edit-btn {
-    position: absolute;
-    right: -0.2rem;
-    bottom: -0.2rem;
-    width: 3rem;
-    height: 3rem;
-    border: 0.2rem solid #ffffff;
-    border-radius: 50%;
-    background: #232323;
-    cursor: pointer;
-  }
-
-  .avatar-edit-icon {
-    color: #ffffff;
-  }
-
-  .profile-summary {
-    row-gap: 0.6rem;
-  }
-
-  .profile-name {
-    font-family: 'KaiseiOpti-Medium';
-    font-size: 2.4rem;
-    line-height: 3.6rem;
-    color: #232323;
-  }
-
-  .profile-email {
-    font-family: 'KaiseiOpti-Regular';
-    font-size: 1.8rem;
-    line-height: 2.4rem;
-    color: #979797;
-  }
-
-  .form-container {
-    row-gap: 3rem;
-  }
-
-  .col-gap-2 {
-    column-gap: 2rem;
-  }
-
-  .form-item-label,
-  .read-label,
-  .security-label {
-    margin-bottom: 0.8rem;
-    font-family: 'KaiseiOpti-Medium';
-    font-size: 1.4rem;
-    line-height: 2.4rem;
-    color: #585858;
-    letter-spacing: 0.04em;
-  }
-
-  .form-tip,
-  .read-tip,
-  .security-tip {
-    margin-top: 0.8rem;
-    font-family: 'KaiseiOpti-Regular';
-    font-size: 1.2rem;
-    line-height: 1.6rem;
-    color: #9f9f9f;
-  }
-
-  .form-item-value {
-    border: 0.1rem solid #979797;
-
-    &.noborder {
-      border: none;
+    .setting-item {
+      column-gap: 21.4rem;
+      justify-content: center;
     }
 
-    &.name {
-      width: 28.4rem;
+    .label-container {
+      width: 27.6rem;
+      font-family: 'KaiseiOpti-Medium';
+
+      .label {
+        font-size: 2.8rem;
+        line-height: 3.6rem;
+        color: #232323;
+      }
+
+      .label-desc {
+        width: 24rem;
+        margin-top: 2rem;
+        font-size: 1.6rem;
+        line-height: 2.2rem;
+        color: #666666;
+      }
     }
 
-    &.radio {
+    .context-container {
+      width: 58rem;
+      padding-top: 0.2rem;
+    }
+
+    .form-item-label,
+    .read-label,
+    .security-label {
+      margin-bottom: 0.8rem;
+      font-family: 'KaiseiOpti-Medium';
+      font-size: 1.4rem;
+      line-height: 2.4rem;
+      letter-spacing: 0.04em;
+      color: #585858;
+    }
+
+    .form-tip,
+    .read-tip,
+    .security-tip {
+      margin-top: 0.8rem;
+      font-family: 'KaiseiOpti-Regular';
+      font-size: 1.2rem;
+      line-height: 1.6rem;
+      color: #9f9f9f;
+    }
+
+    .form-item-value,
+    .outlined-field,
+    .link-href {
+      .field-frame();
+
+      :deep(.el-input),
+      :deep(.el-select) {
+        width: 100%;
+        min-height: 4rem;
+      }
+
+      :deep(.el-input__wrapper),
+      :deep(.el-select__wrapper) {
+        .control-wrapper();
+        min-height: 4rem;
+      }
+    }
+
+    .form-item-value {
+      &.noborder {
+        border: none;
+      }
+
+      &.name {
+        width: 28.4rem;
+      }
+
+      &.radio {
+        width: 58rem;
+      }
+
+      :deep(.el-input__inner) {
+        .field-text();
+      }
+    }
+
+    .read-box,
+    .field-box,
+    .security-static {
+      .field-frame();
+      .field-text();
+      display: flex;
+      align-items: center;
+      padding: 0.8rem 2rem;
+    }
+
+    .profile-header {
+      column-gap: 2.6rem;
+      margin-bottom: 3.6rem;
+
+      .avatar {
+        width: 8rem;
+        height: 8rem;
+        border-radius: 50%;
+        border: 0.1rem solid #d8d0c7;
+      }
+
+      .avatar-edit-icon {
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        width: 3rem;
+        height: 3rem;
+        border: 0.1rem solid #fff;
+        border-radius: 50%;
+        cursor: pointer;
+      }
+    }
+
+    .profile-summary {
+      row-gap: 0.6rem;
+    }
+
+    .profile-name {
+      font-family: 'KaiseiOpti-Medium';
+      font-size: 2.4rem;
+      line-height: 3.6rem;
+      color: #232323;
+    }
+
+    .profile-email {
+      font-family: 'KaiseiOpti-Regular';
+      font-size: 1.8rem;
+      line-height: 2.4rem;
+      color: #979797;
+    }
+
+    .read-section {
       width: 58rem;
     }
 
-    :deep(.el-input) {
-      height: 4rem;
+    .form-container {
+      row-gap: 3rem;
     }
 
-    :deep(.el-input__wrapper) {
-      box-shadow: none;
-      border-radius: 0;
-      padding: 0 2rem;
+    .col-gap-2 {
+      column-gap: 2rem;
     }
 
-    :deep(.el-input__inner) {
-      font-family: 'KaiseiOpti-Regular';
-      color: #232323;
-      font-size: 1.6rem;
+    .read-row + .read-row,
+    .region-row + .region-row {
+      margin-top: 3rem;
     }
-  }
 
-  .read-section {
-    width: 58rem;
-  }
-
-  .read-row + .read-row,
-  .security-row + .security-row,
-  .region-row + .region-row {
-    margin-top: 3rem;
-  }
-
-  .read-row.two-column {
-    display: grid;
-    grid-template-columns: 28.4rem 28.4rem;
-    column-gap: 2rem;
-  }
-
-  .read-box,
-  .field-box {
-    width: 100%;
-    min-height: 4rem;
-    border: 0.1rem solid #979797;
-    padding: 0.8rem 2rem;
-    display: flex;
-    align-items: center;
-    font-family: 'KaiseiOpti-Regular';
-    font-size: 1.6rem;
-    line-height: 2.4rem;
-    color: #232323;
-  }
-
-  .role-row {
-    margin-top: 3rem;
-  }
-
-  .role-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.8rem;
-  }
-
-  .role-tag {
-    min-width: 8rem;
-    height: 4rem;
-    padding: 0 1.2rem;
-    border: 0.1rem solid #979797;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-family: 'KaiseiOpti-Regular';
-    font-size: 1.4rem;
-    line-height: 2rem;
-    color: #979797;
-
-    &.is-active {
-      background: #232323;
-      border-color: #232323;
-      color: #ffffff;
+    .read-row.two-column {
+      display: grid;
+      grid-template-columns: 28.4rem 28.4rem;
+      column-gap: 2rem;
     }
-  }
 
-  .social-links {
-    margin-top: 5.8rem;
-    font-family: 'KaiseiOpti-Medium';
-  }
+    .readonly-radio-group {
+      pointer-events: none;
+    }
 
-  .social-links .title {
-    font-size: 1.4rem;
-    color: #585858;
-    margin-bottom: 2rem;
-  }
+    .role-row {
+      margin-top: 3rem;
+    }
 
-  .links-list {
-    row-gap: 0.8rem;
-  }
+    .social-links {
+      margin-top: 5.8rem;
+      font-family: 'KaiseiOpti-Medium';
 
-  .links-item {
-    column-gap: 3.4rem;
-  }
+      .title {
+        margin-bottom: 2rem;
+        font-size: 1.4rem;
+        color: #585858;
+      }
 
-  .link-index {
-    width: 4rem;
-    font-family: 'KaiseiOpti-Regular';
-    font-size: 1.4rem;
-    line-height: 2rem;
-    color: #979797;
-  }
+      &.read-social-links {
+        margin-top: 4.8rem;
+      }
+    }
 
-  .link-href {
-    min-height: 4rem;
-    border: 0.1rem solid #979797;
-    color: #979797;
+    .links-list {
+      row-gap: 0.8rem;
+    }
 
-    &.readonly {
-      padding: 0.8rem 2rem;
-      display: flex;
-      align-items: center;
+    .links-item {
+      column-gap: 3.4rem;
+    }
+
+    .link-index {
       font-family: 'KaiseiOpti-Regular';
       font-size: 1.4rem;
       line-height: 2rem;
-      color: #9f9f9f;
+      color: #979797;
     }
 
-    :deep(.el-input) {
+    .link-href {
+      color: #979797;
+
+      &.readonly {
+        display: flex;
+        align-items: center;
+        padding: 0.8rem 2rem;
+        font-family: 'KaiseiOpti-Regular';
+        font-size: 1.4rem;
+        line-height: 2rem;
+        color: #9f9f9f;
+      }
+
+      :deep(.el-input) {
+        height: 4rem;
+      }
+
+      :deep(.el-input__inner) {
+        font-family: 'KaiseiOpti-Regular';
+        font-size: 1.4rem;
+        color: #9f9f9f;
+      }
+    }
+
+    .add-link-btn {
+      width: 4rem;
       height: 4rem;
+      border: 0.1rem solid #f0ebe5;
+      background: #f6f6f6;
+      color: #b4aea6;
+      font-size: 2rem;
+      line-height: 1;
+      cursor: pointer;
     }
 
-    :deep(.el-input__wrapper) {
-      box-shadow: none;
-      border-radius: 0;
-      padding: 0 2rem;
+    .security-container {
+      .security-row + .security-row {
+        margin-top: 2.8rem;
+      }
+
+      .security-label {
+        margin: 0 0 0.8rem;
+
+        &.inline {
+          width: 10.8rem;
+          margin-bottom: 0;
+          flex-shrink: 0;
+        }
+      }
+
+      .security-static {
+        min-height: 2.4rem;
+        padding: 0.1rem 0 0;
+        border: none;
+      }
+
+      .security-inline-row {
+        gap: 2.8rem;
+        min-height: 3.2rem;
+      }
+
+      .security-tip {
+        margin-top: 0.6rem;
+      }
+
+      .verify-field {
+        display: flex;
+        margin-top: 0.8rem;
+
+        :deep(.el-input) {
+          flex: 1;
+        }
+      }
+
+      .verify-btn {
+        border: none;
+        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;
+      }
+
+      .password-mask {
+        font-family: 'KaiseiOpti-Bold';
+        letter-spacing: 0.08rem;
+      }
+
+      .inner-divider {
+        height: 1px;
+        margin: 2rem 0;
+        background-color: #c4c4c4;
+      }
     }
 
-    :deep(.el-input__inner) {
-      font-family: 'KaiseiOpti-Regular';
-      color: #9f9f9f;
-      font-size: 1.4rem;
-    }
-  }
-
-  .add-link-btn {
-    width: 4rem;
-    height: 4rem;
-    border: 0.1rem solid #f0ebe5;
-    background: #f6f6f6;
-    color: #b4aea6;
-    font-size: 2rem;
-    line-height: 1;
-    cursor: pointer;
-  }
-
-  .security-static {
-    min-height: 4rem;
-    display: flex;
-    align-items: center;
-    font-family: 'KaiseiOpti-Regular';
-    font-size: 1.6rem;
-    line-height: 2.4rem;
-    color: #232323;
-  }
-
-  .password-mask {
-    font-family: 'KaiseiOpti-Bold';
-    letter-spacing: 0.08rem;
-  }
-
-  .inline-header {
-    gap: 1.6rem;
-  }
-
-  .outlined-field {
-    width: 58rem;
-    border: 0.1rem solid #979797;
-
-    :deep(.el-input),
-    :deep(.el-select) {
-      width: 100%;
-      min-height: 4rem;
+    .region-container {
+      .field-box {
+        padding: 0.8rem 2rem;
+      }
     }
 
-    :deep(.el-input__wrapper),
-    :deep(.el-select__wrapper) {
-      min-height: 4rem;
-      box-shadow: none;
-      border-radius: 0;
-      padding: 0 2rem;
-    }
-
-    :deep(.el-input__inner),
-    :deep(.el-select__selected-item),
-    :deep(.el-select__placeholder) {
-      font-family: 'KaiseiOpti-Regular';
-      font-size: 1.4rem;
+    .small-btn,
+    .secondary-btn,
+    .primary-btn {
+      border: 0.1rem solid #c4c4c4;
+      background: #f6f6f6;
+      font-family: 'KaiseiOpti-Bold';
       color: #232323;
+      cursor: pointer;
     }
 
-    :deep(.el-input__inner::placeholder) {
-      color: #9f9f9f;
+    .small-btn {
+      width: 10rem;
+      height: 3.2rem;
+      align-self: flex-start;
+      font-size: 1.2rem;
+      line-height: 2.6rem;
+      letter-spacing: -0.03em;
     }
-  }
 
-  .verify-field {
-    display: flex;
-    align-items: stretch;
+    .gap {
+      height: 0.05rem;
+      margin-top: 6rem;
+      margin-bottom: 4rem;
+      background-color: #c4c4c4;
 
-    :deep(.el-input) {
-      flex: 1;
+      &.bottom-gap {
+        margin-top: 4rem;
+      }
     }
-  }
 
-  .verify-btn {
-    width: 7.6rem;
-    border: none;
-    border-left: 0.1rem solid #979797;
-    background: #ffffff;
-    font-family: 'KaiseiOpti-Medium';
-    font-size: 1.4rem;
-    color: #232323;
-    cursor: pointer;
-  }
-
-  .small-btn,
-  .secondary-btn,
-  .primary-btn {
-    border: 0.1rem solid #c4c4c4;
-    background: #f6f6f6;
-    font-family: 'KaiseiOpti-Bold';
-    color: #232323;
-    cursor: pointer;
-  }
-
-  .small-btn {
-    width: 10rem;
-    height: 3.2rem;
-    font-size: 1.2rem;
-    line-height: 2.6rem;
-  }
-
-  .inner-divider {
-    height: 0.05rem;
-    margin: 2.8rem 0 3rem;
-    background-color: #c4c4c4;
-  }
-
-  .gap {
-    height: 0.05rem;
-    margin-top: 6rem;
-    background-color: #c4c4c4;
-  }
-
-  .bottom-gap {
-    margin-top: 4rem;
-  }
-
-  .action-container {
-    justify-content: center;
-    column-gap: 1.2rem;
-    margin-top: 2.8rem;
-  }
-
-  .primary-btn,
-  .secondary-btn {
-    height: 4.4rem;
-    font-size: 1.6rem;
-    line-height: 2.6rem;
-  }
-
-  .primary-btn {
-    min-width: 23.6rem;
-    border-color: #232323;
-    background: #232323;
-    color: #ffffff;
-    padding: 0 2.4rem;
-
-    &:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
+    .action-container {
+      justify-content: center;
+      column-gap: 1.2rem;
+      margin-top: 2.8rem;
     }
-  }
 
-  .secondary-btn {
-    width: 12rem;
-    background: #ffffff;
+    .primary-btn,
+    .secondary-btn {
+      height: 4.4rem;
+      font-size: 1.6rem;
+      line-height: 2.6rem;
 
-    &:disabled {
-      opacity: 0.6;
-      cursor: not-allowed;
+      &:disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
     }
-  }
 
-  .edit-btn {
-    min-width: 12rem;
-  }
+    .primary-btn {
+      min-width: 23.6rem;
+      padding: 0 2.4rem;
+      border-color: #232323;
+      background: #232323;
+      color: #ffffff;
+    }
 
-  .read-social-links {
-    margin-top: 4.8rem;
-  }
+    .secondary-btn {
+      width: 12rem;
+      background: #ffffff;
+    }
 
-  .security-container,
-  .region-container {
-    padding-top: 0.2rem;
-  }
-
-  .role-tag,
-  :deep(.radio-button) {
-    white-space: nowrap;
-  }
-
-  :deep(.radio-button-group) {
-    gap: 0.8rem;
-  }
-
-  :deep(.radio-button) {
-    border: 0.1rem solid #979797;
-    height: 4rem;
-    min-width: 8rem;
-    padding: 0 1.2rem;
-    color: #979797;
-    background-color: #fff;
-    font-size: 1.4rem;
-    font-family: 'KaiseiOpti-Regular';
-  }
-
-  :deep(.radio-button.is-active),
-  :deep(.radio-button:hover) {
-    border-color: #232323;
-    color: #fff;
-    background-color: #232323;
+    .edit-btn {
+      min-width: 12rem;
+    }
   }
 }
+
+:deep(.el-select-dropdown__item) {
+  padding: 0 2rem !important;
+}
 </style>