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/assets/images/digitalItem/digital_item_banner.png b/src/assets/images/digitalItem/digital_item_banner.png
new file mode 100644
index 0000000..d2ee914
Binary files /dev/null and b/src/assets/images/digitalItem/digital_item_banner.png differ
diff --git a/src/components/CommodityItem.vue b/src/components/CommodityItem.vue
index 55eb813..281c18b 100644
--- a/src/components/CommodityItem.vue
+++ b/src/components/CommodityItem.vue
@@ -34,7 +34,7 @@ const {} = toRefs(data);
 	<div class="commodity-item">
 		<img :src="props.url" alt="">
 		<div class="detail">
-			<div calss="text">
+			<div class="text">
 				<div class="name">
 					{{ props.name }}
 				</div>
@@ -44,7 +44,7 @@ const {} = toRefs(data);
 			</div>
 			<div class="btn" @click="addShopping">
 				<div class="text">
-					<SvgIcon name="add" size="24"></SvgIcon>
+					<SvgIcon name="add" size="26"></SvgIcon>
 				</div>
 			</div>
 		</div>
@@ -62,13 +62,14 @@ const {} = toRefs(data);
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
-			.text{
+			> .text{
 				color: #232323;
 				> .name{
 					font-family: "KaiseiOpti-Regular";
 					font-weight: 400;
 					font-size: var(--commodity-name-fontSize,1.6rem);
 					line-height: var(--commodity-name-lineHeight,2.3rem);
+					margin-bottom: var(--commodity-name-marginBottom,0rem);
 				}
 				> .price{
 					font-family: "KaiseiOpti-Regular";
diff --git a/src/components/checked.vue b/src/components/checked.vue
new file mode 100644
index 0000000..4954620
--- /dev/null
+++ b/src/components/checked.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
+const props = defineProps({
+	list:{
+		type:Array,
+		default:()=>[]
+	},
+	selected:{
+		type:String,
+		default:()=>''
+	}
+})
+const emit = defineEmits([
+	'update:selected'
+])
+const checkList = computed(()=>{
+	return [props.selected]
+})
+const handleChange = (val) => {
+	if (val.length > 1) {
+		emit('update:selected', val[val.length - 1])
+	}
+}
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<el-checkbox-group v-model="checkList" @change="handleChange">
+		<el-checkbox 
+			v-for="item in props.list" 
+			:key="item.value"
+			:value="item.value"
+		>
+			{{ item.label }}
+		</el-checkbox>
+	</el-checkbox-group>
+</template>
+<style lang="less" scoped>
+	.el-checkbox-group{
+		display: flex;
+		flex-direction: column;
+		gap: 1.2rem;
+	}
+	label{
+		--el-checkbox-font-size: 1.6rem;
+		--el-checkbox-checked-text-color: #232323;
+		--el-checkbox-font-weight: 400;
+		--el-checkbox-height: 2rem;
+		--el-checkbox-checked-bg-color: #232323;
+		--el-checkbox-checked-input-border-color: #232323;
+		--el-checkbox-input-border: 1px solid #232323;
+		font-family: "KaiseiOpti-Regular";
+		line-height: 2rem;
+		.el-checkbox__label{
+			padding-left: 1.4rem;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 1bff1b5..be8cbea 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -23,6 +23,11 @@ const router = createRouter({
       name: 'brand',
       component: () => import('../views/brand/index.vue')
     },
+	{
+		path: '/digitalItem',
+		name: 'digitalItem',
+		component: () => import('../views/digitalItem/index.vue'),
+	},
     {
       path: '/settings',
       name: 'settings',
@@ -34,6 +39,11 @@ const router = createRouter({
       name: 'shoppingCart',
       component: () => import('@/views/shoppingCart/index.vue')
     },
+    {
+      path: '/notifications',
+      name: 'notifications',
+      component: () => import('@/views/notifications/index.vue')
+    },
     {
       path: '/:pathMatch(.*)',
       name: '404',
diff --git a/src/views/digitalItem/commodity-list.vue b/src/views/digitalItem/commodity-list.vue
new file mode 100644
index 0000000..9c99b70
--- /dev/null
+++ b/src/views/digitalItem/commodity-list.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import img from "@/assets/images/collectionStory/Rectangle.png";
+//const props = defineProps({
+//})
+const emit = defineEmits([
+	'addShopping'
+])
+let data = reactive({
+})
+const list = ref([
+	{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},{
+		url: img,
+		title: "Windswept Burden",
+		price: "$100.00",
+	},
+])
+const type = ref('All')
+const addShopping = (item) => {
+	emit('addShopping', item)
+}
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="commodityList">
+		<div class="list">
+			<div class="item" v-for="item in list" :key="item.url">
+				<CommodityItem :url="item.url" :name="item.title" :price="item.price" @addShopping="addShopping(item)"></CommodityItem>
+			</div>
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.commodityList{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		.list{
+			width: 100%;
+			flex: 1;
+			display: grid;
+			align-content: start;
+			grid-template-columns: repeat(3, 1fr);
+			overflow-y: auto;
+			/* 垂直线（右边框） */
+			.item{
+				position: relative;
+				padding: 1.2rem;
+				--commodity-marginBottom: 2rem;
+				--commodity-name-fontSize: 2rem;
+				--commodity-name-marginBottom: .8rem;
+				--commodity-price-fontSize: 1.6rem;
+			}
+			.item::before {
+				content: '';
+				position: absolute;
+				right: 0;
+				top: 0;
+				height: 100%;
+				border-right: 0.5px solid #585858;
+				z-index: 1;
+			}
+
+				/* 水平线（下边框） */
+			.item::after {
+				content: '';
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				border-bottom: 0.5px solid #585858;
+				z-index: 1;
+			}
+				/* 移除最后一列的右边框 */
+			.item:nth-child(3n)::before {
+				display: none;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/digitalItem/index.vue b/src/views/digitalItem/index.vue
new file mode 100644
index 0000000..dcfb1cd
--- /dev/null
+++ b/src/views/digitalItem/index.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import CommodityList from "./commodity-list.vue";
+import MerchantInfo from "./merchant-info.vue";
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+const addShopping = (item) => {}
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="digitalItem">
+		<div class="header-img">
+			<img src="@/assets/images/digitalItem/digital_item_banner.png" alt="">
+			<div class="text">
+				<div class="title">Digital Item</div>
+				<p class="info">Virtual fashion creations collected in your personal archive</p>
+			</div>
+		</div>
+		<div class="content">
+			<div class="merchant-info">
+				<MerchantInfo></MerchantInfo>
+			</div>
+			<div class="commodity-list">
+				<CommodityList @addShopping="addShopping"></CommodityList>
+			</div>
+		</div>
+		<Footer></Footer>
+	</div>
+</template>
+<style lang="less" scoped>
+	.digitalItem{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		overflow-y: auto;
+		.header-img{
+			width: 100%;
+			position: relative;
+			>img{
+				width: 100%;
+			}
+			> .text{
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%);
+				> .title{
+					font-family: KaiseiOpti-Bold;
+					color: #232323;
+					font-weight: 700;
+					font-size: 4rem;
+					line-height: 2.3rem;
+					letter-spacing: 0%;
+					text-align: center;
+				}
+				> .info{
+					font-family: KaiseiOpti-Regular;
+					color: #585858;
+					font-size: 1.6rem;
+					line-height: 140%;
+					margin-top: 1.2rem;
+					text-align: center;
+				}
+			}
+		}
+		.content{
+			display: flex;
+			height: auto;
+			align-items: flex-start;
+			border-top: 0.5px solid #585858;
+			margin-top: 6rem;
+			.merchant-info{
+				width: 38.5rem;
+				padding-left: 10.2rem;
+				height: var(--app-view-height);
+				overflow-y: auto;
+				position: sticky;
+				top: 0;
+				&::-webkit-scrollbar{
+					width: 0;
+					height: 0;
+				}
+			}
+			.commodity-list{
+				flex: 1;
+				border-left: 0.5px solid #585858;
+				border-right: 0.5px solid #585858;
+				margin-right: 9rem;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/digitalItem/merchant-info.vue b/src/views/digitalItem/merchant-info.vue
new file mode 100644
index 0000000..2063f15
--- /dev/null
+++ b/src/views/digitalItem/merchant-info.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+const categoriesList = ref([
+	{
+		label: 'All',
+		value: 'All'
+	},
+	{
+		label: 'Outwear',
+		value: 'Outwear'
+	},
+	{
+		label: 'Dress',
+		value: 'Dress'
+	},
+	{
+		label: 'Trousers',
+		value: 'Trousers'
+	},
+	{
+		label: 'Blouse',
+		value: 'Blouse'
+	},
+	{
+		label: 'Skirt',
+		value: 'Skirt'
+	},
+	{
+		label: 'Accessories',
+		value: 'Accessories'
+	},
+]);
+const genderList = ref([
+	{
+		label: 'All',
+		value: 'All'
+	},
+	{
+		label: 'Male',
+		value: 'Male'
+	},
+	{
+		label: 'Female',
+		value: 'Female'
+	},
+])
+const categories = ref('All')
+const gender = ref('All')
+
+const clearFilters = () => {
+	categories.value = 'All'
+	gender.value = 'All'
+}
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="filters">
+		<div class="title">
+			<div class="left">Filters</div>
+			<div class="right" @click="clearFilters">Clear</div>
+		</div>
+		<div class="categories">Categories</div>
+		<div class="line"></div>
+		<div class="multiple">
+			<checked :list="categoriesList" v-model:selected="categories" />
+		</div>
+		<div class="categories">Gender</div>
+		<div class="line"></div>
+		<div class="multiple">
+			<checked :list="genderList" v-model:selected="gender" />
+		</div>
+	</div>
+</template>
+<style lang="less" scoped>
+	.filters{
+		width: 100%;
+		height: auto;
+		position: relative;
+		padding-top: 4rem;
+		padding-bottom: 4rem;
+		.title{
+			margin-bottom: 3rem;
+			display: flex;
+			padding: 0 1.2rem;
+			.left{
+				margin-right: 12.2rem;
+				font-family: "KaiseiOpti-Bold";
+				font-weight: 700;
+				font-size: 2.4rem;
+				line-height: 3.5rem;
+				color: #232323;
+			}
+			.right{
+				text-decoration: underline;
+				font-family: "KaiseiOpti-Regular";
+				font-weight: 400;
+				font-size: 1.6rem;
+				line-height: 2.4rem;
+				letter-spacing: -0.48px;
+				text-align: right;
+				color: #979797;
+				cursor: pointer;
+			}
+		}
+		.categories{
+			font-family: "KaiseiOpti-Bold";
+			font-weight: 700;
+			font-size: 1.8rem;
+			line-height: 2.3rem;
+			color: #585858;
+			margin-bottom: 1.1rem;
+			padding: 0 1.2rem;
+		}
+		.line{
+			border-top: 0.5px solid #C4C4C4;
+			width: 27.1rem;
+			margin-bottom: 2.2rem;
+		}
+		.multiple{
+			padding: 0 2.3rem;
+			margin-bottom: 2.9rem;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/main-header.vue b/src/views/main-header.vue
index c700cfb..04c4b41 100644
--- a/src/views/main-header.vue
+++ b/src/views/main-header.vue
@@ -120,11 +120,11 @@
 	}
 	const onNotifications = () => {
 		hideProfilePopover()
-		console.log('notifications')
+		router.push('/notifications')
 	}
 	const onSettings = () => {
 		hideProfilePopover()
-		console.log('settings')
+		router.push('/settings')
 	}
 	const onLogout = () => {
 		hideProfilePopover()
diff --git a/src/views/notifications/components/NotificationListItem.vue b/src/views/notifications/components/NotificationListItem.vue
new file mode 100644
index 0000000..e52039a
--- /dev/null
+++ b/src/views/notifications/components/NotificationListItem.vue
@@ -0,0 +1,136 @@
+<template>
+  <article class="notification-item" :class="{ expanded: item.isExpanded, unread: item.isUnread }">
+    <button type="button" class="notification-trigger" @click="handleToggle">
+      <span class="status-dot" :class="{ visible: item.isUnread }" />
+
+      <div class="notification-main">
+        <h3 class="notification-title">{{ item.title }}</h3>
+        <p class="notification-date">{{ item.date }}</p>
+      </div>
+
+      <span class="notification-arrow" :class="arrowClasses" />
+    </button>
+
+    <div v-if="item.isExpanded" class="notification-content">
+      {{ item.content }}
+    </div>
+  </article>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { NotificationRecord } from '../types'
+
+const props = defineProps<{
+  item: NotificationRecord
+}>()
+
+const emit = defineEmits<{
+  toggle: [id: NotificationRecord['id']]
+}>()
+
+const arrowClasses = computed(() => ({
+  expanded: props.item.isExpanded
+}))
+
+const handleToggle = () => {
+  emit('toggle', props.item.id)
+}
+</script>
+
+<style lang="less" scoped>
+.notification-item {
+  border-bottom: 0.05rem solid #ded8d2;
+
+  &.expanded {
+    .notification-title {
+      color: #585858;
+      font-family: 'KaiseiOpti-Medium';
+    }
+  }
+}
+
+.notification-trigger {
+  width: 100%;
+  padding: 2rem 0;
+  display: grid;
+  grid-template-columns: 0.8rem minmax(0, 1fr) 2.4rem;
+  align-items: center;
+  gap: 2.4rem;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+}
+
+.status-dot {
+  width: 0.8rem;
+  height: 0.8rem;
+  border-radius: 50%;
+  background: transparent;
+  transition: background-color 0.2s ease;
+
+  &.visible {
+    background: #232323;
+  }
+}
+
+.notification-main {
+  min-width: 0;
+}
+
+.notification-title {
+  margin: 0;
+  color: #232323;
+  font-size: 1.6rem;
+  line-height: 1.4;
+  font-family: 'KaiseiOpti-Bold';
+}
+
+.notification-date {
+  margin: 0.8rem 0 0;
+  color: #9f9f9f;
+  font-size: 1.2rem;
+  line-height: 1.4;
+  font-family: 'KaiseiOpti-Regular';
+}
+
+.notification-arrow {
+  width: 0.9rem;
+  height: 0.9rem;
+  justify-self: end;
+  border-right: 0.1rem solid #8f8f8f;
+  border-bottom: 0.1rem solid #8f8f8f;
+  transform: rotate(-45deg);
+  transition: transform 0.2s ease, border-color 0.2s ease;
+
+  &.expanded {
+    transform: rotate(45deg);
+  }
+}
+
+.notification-content {
+  padding: 0 5.6rem 2.4rem 3.2rem;
+  color: #585858;
+  font-size: 1.4rem;
+  line-height: 2;
+  font-family: 'KaiseiOpti-Regular';
+}
+
+@media (max-width: 768px) {
+  .notification-trigger {
+    gap: 1.6rem;
+    padding: 1.8rem 0;
+    grid-template-columns: 0.8rem minmax(0, 1fr) 1.8rem;
+  }
+
+  .notification-title {
+    font-size: 1.5rem;
+  }
+
+  .notification-content {
+    padding: 0 3rem 2rem 2.4rem;
+    font-size: 1.3rem;
+    line-height: 1.8;
+  }
+}
+</style>
diff --git a/src/views/notifications/components/NotificationsList.vue b/src/views/notifications/components/NotificationsList.vue
new file mode 100644
index 0000000..161d904
--- /dev/null
+++ b/src/views/notifications/components/NotificationsList.vue
@@ -0,0 +1,111 @@
+<template>
+  <section class="notifications-panel">
+    <div class="notifications-toolbar">
+      <div class="unread-summary">
+        <span class="unread-label">UNREAD</span>
+        <span class="unread-count">{{ unreadCount }}</span>
+      </div>
+
+      <button
+        type="button"
+        class="mark-all-button"
+        :disabled="unreadCount === 0"
+        @click="emit('markAllAsRead')"
+      >
+        Mark all as read
+      </button>
+    </div>
+
+    <div class="notifications-items">
+      <NotificationListItem
+        v-for="item in items"
+        :key="item.id"
+        :item="item"
+        @toggle="emit('toggleItem', $event)"
+      />
+    </div>
+  </section>
+</template>
+<script setup lang="ts">
+import NotificationListItem from './NotificationListItem.vue'
+import type { NotificationRecord } from '../types'
+
+defineProps<{
+  items: NotificationRecord[]
+  unreadCount: number
+}>()
+
+const emit = defineEmits<{
+  toggleItem: [id: NotificationRecord['id']]
+  markAllAsRead: []
+}>()
+</script>
+
+<style lang="less" scoped>
+.notifications-panel {
+  width: 100%;
+}
+
+.notifications-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
+  margin-bottom: 4rem;
+}
+
+.unread-summary {
+  display: inline-flex;
+  align-items: center;
+  gap: 1.3rem;
+}
+
+.unread-label {
+  color: #979797;
+  font-size: 1.4rem;
+  line-height: 1.4;
+  letter-spacing: 0.04em;
+  font-family: 'KaiseiOpti-Regular';
+}
+
+.unread-count {
+  min-width: 3.1rem;
+  height: 2.4rem;
+  padding: 0 0.8rem;
+  border-radius: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: #232323;
+  color: #ffffff;
+  font-size: 1.4rem;
+  line-height: 1;
+  font-family: 'KaiseiOpti-Bold';
+}
+
+.mark-all-button {
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: #979797;
+  font-size: 1.4rem;
+  line-height: 1.4;
+  text-decoration: underline;
+  text-underline-offset: 0.2rem;
+  font-family: 'KaiseiOpti-Regular';
+  cursor: pointer;
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.55;
+  }
+}
+
+@media (max-width: 768px) {
+  .notifications-toolbar {
+    align-items: flex-start;
+    flex-direction: column;
+    margin-bottom: 2.8rem;
+  }
+}
+</style>
diff --git a/src/views/notifications/index.vue b/src/views/notifications/index.vue
new file mode 100644
index 0000000..c1e08a2
--- /dev/null
+++ b/src/views/notifications/index.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="notifications-view mini-scrollbar">
+    <section class="notifications-hero">
+      <div class="notifications-hero__content">
+        <h1 class="notifications-hero__title">Notifications</h1>
+        <p class="notifications-hero__subtitle">System announcements and updates</p>
+      </div>
+    </section>
+
+    <section class="notifications-content">
+      <NotificationsList
+        :items="notifications"
+        :unread-count="unreadCount"
+        @toggle-item="handleToggleItem"
+        @mark-all-as-read="handleMarkAllAsRead"
+      />
+    </section>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import NotificationsList from './components/NotificationsList.vue'
+import type { NotificationRecord } from './types'
+
+const notifications = ref<NotificationRecord[]>([
+  {
+    id: 'maintenance-mar-10-primary',
+    title: 'Platform Maintenance Notice - Mar 10, 2026',
+    date: 'Mar 6, 2026',
+    content:
+      'We will perform scheduled platform maintenance on Mar 10, 2026 to improve checkout stability and notification delivery. During this window, a few account features may respond more slowly than usual.',
+    isUnread: true,
+    isExpanded: false
+  },
+  {
+    id: 'maintenance-mar-10-reminder',
+    title: 'Platform Maintenance Notice - Mar 10, 2026',
+    date: 'Feb 28, 2026',
+    content:
+      'This is an early reminder for the Mar 10 maintenance window. Please avoid making urgent profile or order updates right before the scheduled service period.',
+    isUnread: true,
+    isExpanded: false
+  },
+  {
+    id: 'terms-mar-1',
+    title: 'Updated Terms of Service - Effective Mar 1, 2026',
+    date: 'Feb 20, 2026',
+    content:
+      'We updated our Terms of Service to clarify digital item ownership, payment processing responsibilities, and account conduct expectations. Please review the new terms before your next purchase.',
+    isUnread: true,
+    isExpanded: false
+  },
+  {
+    id: 'welcome',
+    title: 'Welcome to Stylish Parade',
+    date: 'Jan 4, 2026',
+    content:
+      'Thanks for joining Stylish Parade. Explore brand stories, save your favorite pieces, and keep your profile updated so we can recommend the right collections for you.',
+    isUnread: false,
+    isExpanded: false
+  },   
+  {
+    id: 'holiday-support',
+    title: 'Platform Maintenance Notice - Mar 10, 2026',
+    date: 'Dec 20, 2025',
+    content:
+      'Our customer support team will have limited availability during the holiday season from Dec 24 to Jan 2. Response times may be longer than usual. The platform will remain fully operational throughout this period. We wish you a wonderful holiday season.',
+    isUnread: false,
+    isExpanded: true
+  }
+])
+
+const unreadCount = computed(() => notifications.value.filter((item) => item.isUnread).length)
+
+const handleToggleItem = (id: NotificationRecord['id']) => {
+  const targetItem = notifications.value.find((item) => item.id === id)
+
+  if (!targetItem) return
+
+  const nextExpanded = !targetItem.isExpanded
+
+  notifications.value = notifications.value.map((item) => ({
+    ...item,
+    isUnread: item.id === id ? false : item.isUnread,
+    isExpanded: item.id === id ? nextExpanded : false
+  }))
+}
+
+const handleMarkAllAsRead = () => {
+  notifications.value = notifications.value.map((item) => ({
+    ...item,
+    isUnread: false
+  }))
+}
+</script>
+
+<style lang="less" scoped>
+.notifications-view {
+  height: 100%;
+  overflow-y: auto;
+  background: #ffffff;
+}
+
+.notifications-hero {
+  min-height: 14.8rem;
+  padding: 3.2rem 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(180deg, rgba(245, 243, 240, 0.92) 0%, rgba(250, 249, 246, 0.95) 100%),
+    linear-gradient(
+      90deg,
+      rgba(227, 221, 212, 0.28) 0%,
+      rgba(255, 255, 255, 0.24) 50%,
+      rgba(227, 221, 212, 0.28) 100%
+    );
+  border-bottom: 0.05rem solid #dfd8d1;
+}
+
+.notifications-hero__content {
+  text-align: center;
+}
+
+.notifications-hero__title {
+  margin: 0;
+  color: #232323;
+  font-size: 4rem;
+  line-height: 1;
+  font-family: 'KaiseiOpti-Bold';
+}
+
+.notifications-hero__subtitle {
+  margin: 1.2rem 0 0;
+  color: #585858;
+  font-size: 1.6rem;
+  line-height: 1.4;
+  font-family: 'KaiseiOpti-Regular';
+}
+
+.notifications-content {
+  width: min(108rem, calc(100% - 4rem));
+  margin: 0 auto;
+  padding: 4rem 0 8rem;
+}
+
+@media (max-width: 768px) {
+  .notifications-hero {
+    min-height: 12rem;
+    padding: 2.8rem 1.6rem;
+  }
+
+  .notifications-hero__title {
+    font-size: 3rem;
+  }
+
+  .notifications-hero__subtitle {
+    margin-top: 0.8rem;
+    font-size: 1.4rem;
+  }
+
+  .notifications-content {
+    width: calc(100% - 3.2rem);
+    padding: 3.2rem 0 4.8rem;
+  }
+}
+</style>
diff --git a/src/views/notifications/types.ts b/src/views/notifications/types.ts
new file mode 100644
index 0000000..90fabf5
--- /dev/null
+++ b/src/views/notifications/types.ts
@@ -0,0 +1,8 @@
+export interface NotificationRecord {
+  id: string
+  title: string
+  date: string
+  content: string
+  isUnread: boolean
+  isExpanded: boolean
+}
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>