diff --git a/src/api/notification/modify.ts b/src/api/notification/modify.ts
index d0faa87..135176c 100644
--- a/src/api/notification/modify.ts
+++ b/src/api/notification/modify.ts
@@ -3,16 +3,15 @@ import type { Response, NotificationInstance } from '@zvms/zvms4-types'
 import { ElNotification } from 'element-plus'
 
 async function modifyNotification(notification: NotificationInstance, id: string) {
-  console.log(notification)
   const result = (
     await axios(`/notification/${id}`, {
       method: 'put',
-      data: notification
+      data: { notification }
     })
   ).data as Response<string>
   if (result.status == 'error') {
     ElNotification({
-      title: '修改通知错误（' + result.code + '）',
+      title: 'Error when modifying notification' + result.code,
       message: result.message,
       type: 'error'
     })
@@ -21,4 +20,43 @@ async function modifyNotification(notification: NotificationInstance, id: string
   }
 }
 
-export { modifyNotification as modify }
+async function modifyNotificationTitle(id: string, title: string) {
+  const result = (
+    await axios(`/notification/${id}/title`, {
+      method: 'put',
+      data: { title }
+    })
+  ).data as Response<string>
+  if (result.status == 'error') {
+    ElNotification({
+      title: 'Error when modifying notification title' + result.code,
+      message: result.message,
+      type: 'error'
+    })
+  } else {
+    return result.data
+  }
+}
+
+async function modifyNotificationContent(id: string, content: string) {
+  const result = (
+    await axios(`/notification/${id}/content`, {
+      method: 'put',
+      data: { content }
+    })
+  ).data as Response<string>
+  if (result.status == 'error') {
+    ElNotification({
+      title: 'Error when modifying notification content' + result.code,
+      message: result.message,
+      type: 'error'
+    })
+  } else {
+    return result.data
+  }
+}
+
+export const modify = {
+  title: modifyNotificationTitle,
+  content: modifyNotificationContent
+}
diff --git a/src/components/activity/ZActivityImpressionManager.vue b/src/components/activity/ZActivityImpressionManager.vue
index 8c10219..3a6268e 100644
--- a/src/components/activity/ZActivityImpressionManager.vue
+++ b/src/components/activity/ZActivityImpressionManager.vue
@@ -11,7 +11,7 @@ import {
   Plus,
   User
 } from '@element-plus/icons-vue'
-import { Save } from '@icon-park/vue-next'
+import { ImageFiles, Save } from '@icon-park/vue-next'
 import type {
   ActivityMember,
   ActivityInstance,
@@ -32,17 +32,19 @@ import {
   ElFormItem,
   ElDivider,
   ElUpload,
-  ElCarousel,
-  ElCarouselItem,
   ElImage,
   ElEmpty,
   ElIcon,
-  ElNotification
+  ElNotification,
+  type UploadUserFile,
+  ElDialog,
+  ElScrollbar
 } from 'element-plus'
 import { useI18n } from 'vue-i18n'
 import { ZActivityMember, ZActivityDetails, ZActivityStatus } from '@/components'
 import api from '@/api'
 import { baseURL } from '@/plugins/axios'
+import { useWindowSize } from '@vueuse/core'
 
 const props = defineProps<{
   activity: ActivityInstance
@@ -51,6 +53,7 @@ const props = defineProps<{
 
 const user = useUserStore()
 const { t } = useI18n()
+const { height } = useWindowSize()
 
 const emits = defineEmits<{
   (e: 'update:modelValue', value: string): void
@@ -60,9 +63,10 @@ const emits = defineEmits<{
 const { activity, role } = toRefs(props)
 
 const impression = ref('')
-const myimages = ref([] as string[])
+const myimages = ref<UploadUserFile[]>([])
 const present = ref<ActivityMember>()
-
+const preview = ref(false)
+const previewUrl = ref('')
 const activeNames = ref<string[]>(['1', '2'])
 const submitable = ref<boolean>(role.value !== 'class')
 
@@ -118,7 +122,7 @@ interface ImpressionCursor {
   _id: string
   duration: number
   status: MemberActivityStatus
-  images: string[]
+  images: UploadUserFile[]
 }
 
 const current = ref<ImpressionCursor>({
@@ -137,20 +141,14 @@ async function getMemberActivity(id: string = user._id) {
   loading.value = true
   try {
     present.value = await api.activity.member.read(activity.value._id, id)
-    console.log('[DEBUG] present')
-    console.log(present.value)
     if (!present.value) {
       throw new Error('No such member')
     }
     if (role.value === 'mine') {
       impression.value = present.value?.impression
-      var imglist = present.value?.images.map((x) => `${baseURL}image/${x}/data`) ?? []
-      for (var i in imglist) {
-        myimages.value.push(imglist[i])
-        current.value.images.push(imglist[i])
-      }
-      console.log('[DEBUG] myimages')
-      console.log(myimages.value)
+      let imglist = present.value?.images.map((x) => `${baseURL}image/${x}/data`) ?? []
+      myimages.value.push(...imglist.map((image) => ({ name: image, url: image })))
+      current.value.images = myimages.value
     }
   } catch (e) {
     ElNotification({
@@ -169,7 +167,8 @@ async function curserTo(index: number) {
       (await api.activity.member.read(activity.value._id, activity.value.members[index - 1]._id)) ??
       activity.value.members[index - 1]
     const result = await api.user.readOne(present.value._id)
-    const images = await api.activity.image.read(activity.value._id, present.value._id)
+    const images =
+      present.value?.images.map((x) => ({ name: x, url: `${baseURL}image/${x}/data` })) ?? []
     console.log('[DEBUG] images')
     console.log(images)
     current.value = {
@@ -180,7 +179,7 @@ async function curserTo(index: number) {
       _id: present.value._id,
       duration: present.value.duration ?? 0,
       status: present.value.status,
-      images: images.map((x) => `${baseURL}image/${x}/data`)
+      images: images
     }
   } catch (e) {
     ElNotification({
@@ -209,39 +208,6 @@ function handleSuccess(resp: Response<string>) {
   }
 }
 
-function handlePreview(imageUrl: string) {
-  window.open(imageUrl, '_blank')
-}
-
-function downloadIamge(imgsrc: string, name: string) {
-  //下载图片地址和图片名
-  var image = new Image()
-  // 解决跨域 Canvas 污染问题
-  image.setAttribute('crossOrigin', 'anonymous')
-  image.onload = function () {
-    var canvas = document.createElement('canvas')
-    canvas.width = image.width
-    canvas.height = image.height
-    var context = canvas.getContext('2d')
-    if (!context) {
-      throw new Error('Failed to get canvas context')
-    }
-    context.drawImage(image, 0, 0, image.width, image.height)
-    var url = canvas.toDataURL('image/png') //得到图片的base64编码数据
-
-    var a = document.createElement('a') // 生成一个a元素
-    var event = new MouseEvent('click') // 创建一个单击事件
-    a.download = name || 'photo' // 设置图片名称
-    a.href = url // 将生成的URL设置为a.href属性
-    a.dispatchEvent(event) // 触发a的单击事件
-  }
-  image.src = imgsrc
-}
-
-function handleDownload(imageUrl: string) {
-  downloadIamge(imageUrl, imageUrl.split('/')[5] ?? 'photo')
-}
-
 function getUserToken() {
   return localStorage.getItem('token')
 }
@@ -404,37 +370,45 @@ function getUserToken() {
             }"
             :limit="3"
             :on-success="handleSuccess"
-            :file-list="myimages.map((image) => ({ name: image, url: image }))"
+            :on-preview="
+              (file) => {
+                preview = true
+                previewUrl = file.url ?? ''
+              }
+            "
+            :file-list="myimages"
           >
             <ElIcon><Plus /></ElIcon>
-            <template #file="{ file }">
-              <div>
-                <ElImage class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
-                <span class="el-upload-list__item-actions">
-                  <span class="el-upload-list__item-preview" @click="handlePreview(file.url)">
-                    <ElIcon><zoom-in /></ElIcon>
-                  </span>
-                  <span class="el-upload-list__item-delete" @click="handleDownload(file.url)">
-                    <ElIcon><Download /></ElIcon>
-                  </span>
-                  <!-- <span class="el-upload-list__item-delete">
-                    <ElIcon><Delete /></ElIcon>
-                  </span> -->
-                </span>
-              </div>
-            </template>
           </ElUpload>
         </ElCard>
         <ElCard shadow="hover" class="w-full" v-else>
-          <ElEmpty v-if="myimages.length === 0" :description="t('activity.image.empty.name')" />
-          <ElCarousel v-else :autoplay="false" class="w-full">
-            <ElCarouselItem v-for="(item, index) in myimages" :key="index">
-              <ElImage :src="item" />
-            </ElCarouselItem>
-          </ElCarousel>
+          <ElEmpty
+            v-if="current.images.length === 0"
+            :description="t('activity.image.empty.name')"
+          />
+          <ElUpload
+            class="w-full"
+            list-type="picture-card"
+            disabled
+            :file-list="current.images"
+            :on-preview="
+              (file) => {
+                preview = true
+                previewUrl = file.url ?? ''
+              }
+            "
+            :on-remove="() => false"
+          >
+            <ElIcon><ImageFiles /></ElIcon>
+          </ElUpload>
         </ElCard>
       </ElCollapseItem>
     </ElCollapse>
+    <ElDialog v-model="preview">
+      <ElScrollbar :max-height="height * 0.6">
+        <ElImage :src="previewUrl" />
+      </ElScrollbar>
+    </ElDialog>
   </div>
 </template>
 
diff --git a/src/components/activity/ZActivityList.vue b/src/components/activity/ZActivityList.vue
index 8cd3b38..97d2f18 100644
--- a/src/components/activity/ZActivityList.vue
+++ b/src/components/activity/ZActivityList.vue
@@ -14,7 +14,7 @@ import {
 import { onMounted, ref, toRefs, watch } from 'vue'
 import { useUserStore } from '@/stores/user'
 import dayjs from 'dayjs'
-import { Box, Search, PieChart, Refresh, Plus } from '@element-plus/icons-vue'
+import { Box, Search, PieChart, Refresh, Plus, EditPen, View } from '@element-plus/icons-vue'
 import { useWindowSize } from '@vueuse/core'
 import { useI18n } from 'vue-i18n'
 import { getActivity } from './getActivity'
@@ -26,6 +26,7 @@ import {
   ZActivityCard
 } from '@/components'
 import { useRouter } from 'vue-router'
+import { Write } from '@icon-park/vue-next'
 
 const { t } = useI18n()
 const { width, height } = useWindowSize()
@@ -293,12 +294,45 @@ watch(
             />
           </template>
           <template #default="{ row }">
-            <ZActivityImpressionDrawer
-              :id="row._id"
-              :role="role"
-              :readonly="true"
-              @refresh="refresh"
-            />
+            <ElButton
+              :icon="Write"
+              v-if="
+                ['draft', 'rejected'].includes(
+                  (row as ActivityInstance).members.find((x: ActivityMember) => x._id === user._id)
+                    ?.status ?? ''
+                ) && role === 'mine'
+              "
+              text
+              bg
+              type="primary"
+              @click="router.push(`/activity/details/${row._id}/impression/${role}`)"
+            >
+              {{ t('activity.impression.actions.write') }}
+            </ElButton>
+            <ElButton
+              :icon="EditPen"
+              v-else-if="
+                role === 'campus' &&
+                (user.position.includes('admin') || user.position.includes('auditor')) &&
+                row.members.filter((x: ActivityMember) => x.status === 'pending').length > 0
+              "
+              type="danger"
+              text
+              bg
+              @click="router.push(`/activity/details/${row._id}/impression/${role}`)"
+            >
+              {{ t('activity.impression.actions.reflect') }}
+            </ElButton>
+            <ElButton
+              :icon="View"
+              v-else
+              text
+              bg
+              type="info"
+              @click="router.push(`/activity/details/${row._id}/impression/${role}`)"
+            >
+              {{ t('activity.impression.actions.view') }}
+            </ElButton>
           </template>
         </ElTableColumn>
       </ElTable>
diff --git a/src/components/form/ZSelectPerson.vue b/src/components/form/ZSelectPerson.vue
index bd23303..1421396 100644
--- a/src/components/form/ZSelectPerson.vue
+++ b/src/components/form/ZSelectPerson.vue
@@ -41,7 +41,6 @@ async function filter(number: string) {
   load.value = true
   const digits = number.replace(/[^0-9]/g, '').length
   const han = extractHanCharacters(number).length
-  console.log(digits, han)
   if (filterStart.value && digits <= (filterStart.value ? filterStart.value : 5) && han < 2) {
     load.value = false
     return []
diff --git a/src/components/notifications/ZNotificationCard.vue b/src/components/notifications/ZNotificationCard.vue
new file mode 100644
index 0000000..1a46e75
--- /dev/null
+++ b/src/components/notifications/ZNotificationCard.vue
@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import { ElCard, ElInput, ElButton } from 'element-plus'
+import { ZActivityMember } from '@/components'
+import { useUserStore } from '@/stores/user'
+import ZNotificationContentDisplayer from './ZNotificationContentDisplayer.vue'
+import { useI18n } from 'vue-i18n'
+import type { NotificationInstance } from '@zvms/zvms4-types'
+import api from '@/api'
+import { toRefs, ref } from 'vue'
+import { ArrowRight, Delete } from '@element-plus/icons-vue'
+import { OouiUserAnonymous } from '@/icons'
+import dayjs from 'dayjs'
+
+const user = useUserStore()
+const { t } = useI18n()
+
+const props = withDefaults(defineProps<{ notification: NotificationInstance }>(), {})
+const emits = defineEmits(['refresh'])
+
+const { notification } = toRefs(props)
+
+const title = ref(notification.value.title)
+const content = ref(notification.value.content)
+
+const editing = ref<false | 'title' | 'content'>(false)
+
+async function modifyTitle() {
+  await api.notification.modify.title(notification.value._id, title.value)
+  notification.value.title = title.value
+  editing.value = false
+  emits('refresh')
+}
+
+async function modifyContent() {
+  await api.notification.modify.content(notification.value._id, content.value)
+  notification.value.content = content.value
+  editing.value = false
+  emits('refresh')
+}
+
+async function deleteNotification(id: string) {
+  await api.notification.delete(id, user._id)
+}
+</script>
+
+<template>
+  <ElCard shadow="hover" class="py-6px">
+    <div class="flex notifications-center">
+      <span
+        class="text-xl"
+        :class="notification.title.length !== 0 ? 'font-bold' : 'op-65'"
+        @dblclick="editing = 'title'"
+        v-if="editing !== 'title'"
+      >
+        {{
+          notification.title.length === 0 &&
+          (user.position.includes('admin') ||
+            user.position.includes('department') ||
+            user.position.includes('auditor'))
+            ? t('notification.editable')
+            : notification.title
+        }}
+      </span>
+      <ElInput
+        v-model="title"
+        @keydown.enter="modifyTitle"
+        v-else
+        style="width: 60%; padding-bottom: 0.5rem; padding-top: 0.5rem"
+      >
+        <template #append>
+          <ElButton :icon="ArrowRight" type="primary" plain @click="modifyTitle"></ElButton>
+        </template>
+      </ElInput>
+      <div class="ma"></div>
+      <div class="w-74px">
+        <ZActivityMember v-if="!notification.anonymous" :id="notification.publisher" />
+        <ZActivityMember
+          v-else-if="user.position.includes('admin')"
+          :icon="OouiUserAnonymous"
+          type="info"
+          :id="notification.publisher"
+        />
+        <ElButton v-else type="info" text bg size="small" :icon="OouiUserAnonymous" circle />
+      </div>
+      <ElButton
+        v-if="
+          user.position.includes('admin') ||
+          user.position.includes('department') ||
+          user.position.includes('auditor')
+        "
+        :icon="Delete"
+        @click="deleteNotification(notification._id)"
+        circle
+        text
+        bg
+        type="danger"
+        size="small"
+        class="ml-0.5rem"
+      ></ElButton>
+    </div>
+    <div
+      class="text-sm py-6px"
+      :class="notification.content.length === 0 ? 'op-65' : ''"
+      @dblclick="editing = 'content'"
+      v-if="editing !== 'content'"
+    >
+      <ZNotificationContentDisplayer
+        :content="
+          notification.content.length === 0 &&
+          (user.position.includes('admin') ||
+            user.position.includes('department') ||
+            user.position.includes('auditor'))
+            ? t('notification.editable')
+            : notification.content
+        "
+      />
+    </div>
+    <div v-else>
+      <ElInput
+        v-model="content"
+        @keydown.enter="modifyContent"
+        type="textarea"
+        autosize
+        class="w-full"
+        style="padding-top: 0.5rem; padding-bottom: 0.5rem"
+      >
+      </ElInput>
+      <div style="text-align: right">
+        <ElButton text bg circle :icon="ArrowRight" @click="modifyContent"></ElButton>
+      </div>
+    </div>
+    <div class="ma"></div>
+    <div class="w-full py-3">
+      <span class="float-right op-65 text-sm">
+        {{ dayjs(notification.time).format('YYYY-MM-DD HH:mm:ss') }}
+      </span>
+    </div>
+  </ElCard>
+</template>
diff --git a/src/components/notifications/ZNotificationContentDisplayer.vue b/src/components/notifications/ZNotificationContentDisplayer.vue
index 12214d5..b15b79d 100644
--- a/src/components/notifications/ZNotificationContentDisplayer.vue
+++ b/src/components/notifications/ZNotificationContentDisplayer.vue
@@ -7,7 +7,7 @@ const paras = computed(() => props.content.split('\n'))
 </script>
 
 <template>
-  <div v-for="item in paras">
+  <div v-for="item in paras" class="py-1" :key="item">
     {{ item }}
   </div>
 </template>
diff --git a/src/components/notifications/ZNotificationForm.vue b/src/components/notifications/ZNotificationForm.vue
index e6a0fcd..499a473 100644
--- a/src/components/notifications/ZNotificationForm.vue
+++ b/src/components/notifications/ZNotificationForm.vue
@@ -13,7 +13,8 @@ import {
   ElSelect,
   ElPageHeader,
   ElCard,
-  ElButton
+  ElButton,
+  ElNotification
 } from 'element-plus'
 import type { NotificationInstance } from '@zvms/zvms4-types'
 import { ArrowLeft, Refresh, ArrowRight } from '@element-plus/icons-vue'
@@ -53,6 +54,22 @@ const submit = () => {
     // router.push('/notifications/creative/' + portNum)
     return
   }
+  if (notification.value.title === '') {
+    ElNotification({
+      type: 'error',
+      title: t('validation.notification.title.required')
+    })
+    loading.value = false
+    return
+  }
+  if (!notification.value.global && notification.value?.receivers?.length === 0) {
+    ElNotification({
+      type: 'error',
+      title: t('validation.notification.receivers.required')
+    })
+    loading.value = false
+    return
+  }
   api.notification.create(notification.value)
   router.push('/notifications')
 }
@@ -92,7 +109,7 @@ const submit = () => {
               <ElInput v-model="notification.title" />
             </ElFormItem>
             <ElFormItem :label="t('notification.create.elements.content')">
-              <ElInput type="textarea" :auto-size="{ minRows: 2 }" v-model="notification.content" />
+              <ElInput type="textarea" autosize :auto-size="{ minRows: 2 }" v-model="notification.content" />
             </ElFormItem>
             <ElFormItem
               :label="t('notification.create.elements.type')"
@@ -117,7 +134,7 @@ const submit = () => {
               :rules="[
                 { required: true, message: t('validation.notification.expire.required') },
                 {
-                  validator: (rule, value, callback) => {
+                  validator: (rule: any, value: any, callback: any) => {
                     try {
                       if (dayjs(value).isBefore(dayjs(notification.time))) {
                         callback(t('validation.notification.expire.future'))
@@ -153,10 +170,21 @@ const submit = () => {
               v-if="!notification.global"
               :label="t('notification.create.elements.receivers')"
               required
+              prop="receivers"
               :rules="[
                 {
                   required: notification.global === false,
                   message: t('validation.notification.receivers.required')
+                },
+                {
+                  validator: (rule: any, value: any, callback: any) => {
+                    console.log(typeof value)
+                    if (value.length == 0) {
+                      callback(t('validation.notification.receivers.required'))
+                    } else {
+                      callback()
+                    }
+                  }
                 }
               ]"
             >
diff --git a/src/components/notifications/ZNotificationList.vue b/src/components/notifications/ZNotificationList.vue
index c649c9c..bfd01ce 100644
--- a/src/components/notifications/ZNotificationList.vue
+++ b/src/components/notifications/ZNotificationList.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ElCard, ElButton, ElPagination, ElScrollbar, ElNotification } from 'element-plus'
-import { Clock, Delete, ArrowRight } from '@element-plus/icons-vue'
+import { Delete, ArrowRight } from '@element-plus/icons-vue'
 import { onMounted, ref, watch } from 'vue'
 import dayjs from 'dayjs'
 import type { NotificationInstance } from '@zvms/zvms4-types'
@@ -11,14 +11,19 @@ import ZActivityMember from '@/components/activity/ZActivityMember.vue'
 import ZNotificationContentDisplayer from './ZNotificationContentDisplayer.vue'
 import { useWindowSize } from '@vueuse/core'
 import { OouiUserAnonymous } from '@/icons'
+import ZNotificationCard from './ZNotificationCard.vue'
 
 const { t } = useI18n()
-
 const user = useUserStore()
 const { height } = useWindowSize()
 
-const minHeight = ref(height.value * 0.68 + 'px')
+const props = defineProps<{
+  refresh: number
+  mode: 'global' | 'personal'
+  less: boolean
+}>()
 
+const minHeight = ref(height.value * 0.68 + 'px')
 watch(height, () => (minHeight.value = height.value * 0.68 + 'px'))
 
 const notifications = ref<NotificationInstance[]>([])
@@ -29,9 +34,7 @@ const loading = ref(false)
 
 async function getNotifications(mode: 'global' | 'personal') {
   loading.value = true
-  emptyEditingStatus()
   const lessLength = 3 // max length in UserHome
-  console.log(props.less, mode)
   try {
     if (mode === 'personal')
       await api.notification.read
@@ -41,10 +44,12 @@ async function getNotifications(mode: 'global' | 'personal') {
           total.value = res?.total || 0
         })
     else
-      await api.notification.read.global(pageIndex.value, pageSize.value).then((res) => {
-        notifications.value = res ? res.data : []
-        total.value = res?.total || 0
-      })
+      await api.notification.read
+        .global(props.less ? 1 : pageIndex.value, props.less ? lessLength : pageSize.value)
+        .then((res) => {
+          notifications.value = res ? res.data : []
+          total.value = res?.total || 0
+        })
     loading.value = false
   } catch (e) {
     ElNotification({
@@ -57,152 +62,28 @@ async function getNotifications(mode: 'global' | 'personal') {
 }
 
 watch(pageIndex, () => getNotifications(props.mode))
-watch(pageSize, () => getNotifications(props.mode))
+watch(pageSize, () => {
+  pageIndex.value = 1
+  getNotifications(props.mode)
+})
 
-const props = defineProps<{
-  refresh: number
-  mode: 'global' | 'personal'
-  less: boolean
-}>()
 watch(props, () => {
+  pageIndex.value = 1
   getNotifications(props.mode)
 })
 
 onMounted(() => getNotifications(props.mode))
 
-const deleteNotification = async (id: string) => {
-  await api.notification.delete(id, user._id)
-  await getNotifications(props.mode)
-}
-
-// edit the title / content of any notification
-const editTitle = ref({
-  id: '',
-  editing: false
-})
-const editContent = ref({
-  id: '',
-  editing: false
-})
-const toggleEditTitle = (id: string) => {
-  editContent.value = { editing: false, id: '' }
-  editTitle.value = {
-    editing: !editTitle.value.editing,
-    id
-  }
-}
-const toggleEditContent = (id: string) => {
-  editTitle.value = { editing: false, id: '' }
-  editContent.value = {
-    editing: !editContent.value.editing,
-    id
-  }
-}
-const emptyEditingStatus = () => {
-  editTitle.value = { editing: false, id: '' }
-  editContent.value = { editing: false, id: '' }
-}
-const modify = () => {
-  const id = editTitle.value.editing ? editTitle.value.id : editContent.value.id
-  const modified = notifications.value.flat().find((i) => i._id === id) as NotificationInstance
-  emptyEditingStatus()
-  api.notification.modify(modified, id)
-}
 </script>
 
 <template>
   <div class="p-5">
     <ElScrollbar :height="minHeight" v-loading="loading">
       <div v-for="(item, index) in notifications" :key="index" class="p-6px">
-        <ElCard shadow="hover" class="py-6px">
-          <div class="flex items-center">
-            <span
-              class="text-xl"
-              :class="item.title.length !== 0 ? 'font-bold' : 'op-65'"
-              @dblclick="toggleEditTitle(item._id)"
-              v-if="!editTitle.editing || item._id !== editTitle.id"
-            >
-              {{
-                item.title.length === 0 &&
-                (user.position.includes('admin') ||
-                  user.position.includes('department') ||
-                  user.position.includes('auditor'))
-                  ? t('notification.editable')
-                  : item.title
-              }}
-            </span>
-            <ElInput
-              v-model="item.title"
-              @keydown.enter="modify"
-              v-else
-              style="width: 60%; padding-bottom: 0.5rem; padding-top: 0.5rem"
-            >
-              <template #append>
-                <ElButton :icon="ArrowRight" type="primary" plain @click="modify"></ElButton>
-              </template>
-            </ElInput>
-            <div class="ma"></div>
-            <div class="w-74px">
-              <ZActivityMember v-if="!item.anonymous" :id="item.publisher" />
-              <ZActivityMember
-                v-else-if="user.position.includes('admin')"
-                :icon="OouiUserAnonymous"
-                type="info"
-                :id="item.publisher"
-              />
-              <ElButton v-else type="info" text bg size="small" :icon="OouiUserAnonymous" circle />
-            </div>
-            <ElButton
-              v-if="
-                user.position.includes('admin') ||
-                user.position.includes('department') ||
-                user.position.includes('auditor')
-              "
-              :icon="Delete"
-              @click="deleteNotification(item._id)"
-              circle
-              text
-              bg
-              type="danger"
-              size="small"
-              class="ml-0.5rem"
-            ></ElButton>
-          </div>
-          <div
-            class="text-sm py-6px"
-            :class="item.content.length === 0 ? 'op-65' : ''"
-            @dblclick="toggleEditContent(item._id)"
-            v-if="!editContent.editing || editContent.id !== item._id"
-          >
-            <ZNotificationContentDisplayer
-              :content="
-                item.content.length === 0 &&
-                (user.position.includes('admin') ||
-                  user.position.includes('department') ||
-                  user.position.includes('auditor'))
-                  ? t('notification.editable')
-                  : item.content
-              "
-            />
-          </div>
-          <ElInput
-            v-model="item.content"
-            @keydown.enter="modify"
-            v-else
-            style="width: 85%; padding-top: 0.5rem; padding-bottom: 0.5rem"
-          >
-            <template #append>
-              <ElButton :icon="ArrowRight" @click="modify"></ElButton>
-            </template>
-          </ElInput>
-          <div class="ma"></div>
-          <div class="w-full py-3">
-            <span class="float-right">
-              <span :icon="Clock"></span>
-              {{ dayjs(item.time).format('YYYY-MM-DD HH:mm:ss') }}
-            </span>
-          </div>
-        </ElCard>
+        <ZNotificationCard
+          :notification="item"
+          @refresh="getNotifications(props.mode)"
+        />
       </div>
       <div class="text-center my-10 text-lg op-70" v-if="notifications.length == 0">
         <ElEmpty />
diff --git a/src/i18n/locales/about.ts b/src/i18n/locales/about.ts
index c86e076..24ddd3a 100644
--- a/src/i18n/locales/about.ts
+++ b/src/i18n/locales/about.ts
@@ -54,119 +54,3 @@ export const zhCN = {
     nick: '昵称'
   }
 }
-
-export const zhWY = {
-  about: {
-    project: '夫 ZVMS 之事',
-    developers: '夫开发者之事'
-  },
-  footer: '镇海中学义工委员会技术部主治',
-  repository: {
-    license: '可议',
-    version: {
-      '0': '夫事之版',
-      '1': '由 ',
-      '2': '所作。谢！',
-      stack: '技术堆栈：',
-      repo: '库址：'
-    },
-    thank: {
-      mean: '又谢',
-      icon: ' 供伺服器于庠序之外，',
-      test: ' 设新版（v2.0 - 最新版）图标，',
-      end: ' 试之狂。'
-    }
-  },
-  switch: {
-    real: '实之名',
-    nick: '昵之称'
-  }
-}
-
-export const zhTW = {
-  about: {
-    project: '關於 ZVMS',
-    developers: '關於開發者'
-  },
-  footer: '鎮海中學義工自主管理委員會技術部',
-  repository: {
-    license: '許可協議',
-    version: {
-      '0': '本專案',
-      '1': '版本由 ',
-      '2': ' 開發。感謝！',
-      stack: '技術棧：',
-      repo: '倉庫地址：'
-    },
-    thank: {
-      mean: '同時，感謝 ',
-      icon: ' 提供的校外伺服器，',
-      test: ' 設計的新版（v2.0 - 最新版）圖標，以及',
-      end: ' 的瘋狂測試。'
-    }
-  },
-  switch: {
-    real: '實名',
-    nick: '昵稱'
-  }
-}
-
-export const jaJP = {
-  about: {
-    project: 'ZVMSについて',
-    developers: '開発者について'
-  },
-  footer: '鎮海中学生ボランティア自治管理委員会技術部',
-  repository: {
-    license: 'ライセンス',
-    version: {
-      '0': 'プロジェクトの',
-      '1': 'バージョンは ',
-      '2': ' によって開発されました。ありがとう！',
-      stack: '技術スタック：',
-      repo: 'リポジトリ：'
-    },
-    thank: {
-      mean: '同時に、',
-      icon: ' が提供するオフキャンパスサーバーに感謝し、',
-      test: ' がデザインした新しいバージョン（2.0 - 最新）のアイコン、および',
-      end: ' のクレイジーテストに感謝します。'
-    }
-  },
-  switch: {
-    real: '実名',
-    nick: 'ニックネーム'
-  }
-}
-
-export const frFR = {
-  about: {
-    project: 'À propos de ZVMS',
-    developers: 'À propos des développeurs'
-  },
-  footer: 'Comité de gestion autonome des bénévoles étudiants du lycée de Zhenhai',
-  repository: {
-    license: 'Licence',
-    version: {
-      '0': 'La version',
-      '1': 'du projet est développée par ',
-      '2': '. Merci!',
-      stack: 'Pile technologique: ',
-      repo: 'Dépôt: '
-    },
-    thank: {
-      mean: 'En même temps, merci au serveur hors campus fourni par ',
-      icon: ', icône de la nouvelle version (2.0 - dernière) conçue par ',
-      test: ', et le test fou par ',
-      end: '.'
-    }
-  },
-  switch: {
-    real: 'Nom réel',
-    nick: 'Pseudo'
-  }
-}
-
-export const koKR = {}
-
-export const ruRU = {}
diff --git a/src/i18n/locales/home.ts b/src/i18n/locales/home.ts
index bc109d4..2b32f20 100644
--- a/src/i18n/locales/home.ts
+++ b/src/i18n/locales/home.ts
@@ -40,7 +40,7 @@ export const enUS = {
     },
     notification: {
       title: 'Notification',
-      more: 'more'
+      more: 'More'
     }
   }
 }
diff --git a/src/i18n/locales/notification.ts b/src/i18n/locales/notification.ts
index 1393f95..3904a05 100644
--- a/src/i18n/locales/notification.ts
+++ b/src/i18n/locales/notification.ts
@@ -28,7 +28,7 @@ export const enUS = {
       clear: 'Clear'
     }
   },
-  editable: 'Click to edit'
+  editable: 'Double click to edit'
 }
 
 export const zhCN = {
@@ -61,7 +61,7 @@ export const zhCN = {
       clear: '清空'
     }
   },
-  editable: '点击以编辑'
+  editable: '双击以编辑'
 }
 
 export const zhWY = {
diff --git a/src/router/index.ts b/src/router/index.ts
index 6e325f6..a4b4569 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -88,6 +88,11 @@ const router = createRouter({
       name: 'activity-view',
       component: () => import('../views/activity/ActivityPage.vue')
     },
+    {
+      path: '/activity/details/:id/impression/:mode',
+      name: 'activity-impression',
+      component: () => import('../views/activity/ActivityImpression.vue')
+    },
     {
       path: '/umbrella/',
       name: 'umbrella',
diff --git a/src/views/activity/ActivityImpression.vue b/src/views/activity/ActivityImpression.vue
new file mode 100644
index 0000000..1029d2e
--- /dev/null
+++ b/src/views/activity/ActivityImpression.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { ActivityInstance } from '@zvms/zvms4-types'
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ZActivityImpressionManager } from '@/components'
+import {
+  ElHeader,
+  ElLoading,
+  ElScrollbar,
+  ElCard,
+  ElBreadcrumb,
+  ElBreadcrumbItem,
+  ElPageHeader,
+  ElButton
+} from 'element-plus'
+import { useI18n } from 'vue-i18n'
+import { useWindowSize } from '@vueuse/core'
+import api from '@/api'
+import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
+
+const route = useRoute()
+const router = useRouter()
+const { t } = useI18n()
+const { height } = useWindowSize()
+
+const activityId = ref(route.params.id.toString())
+const mode = ref<'mine' | 'class' | 'campus'>(
+  route.params.mode.toString() as 'mine' | 'class' | 'campus'
+)
+const classify = ref(mode.value === 'mine' ? 'write' : 'reflect')
+
+const activity = ref<ActivityInstance>()
+
+onMounted(async () => {
+  const loading = ElLoading.service({ fullscreen: true })
+  try {
+    activity.value = await api.activity.read.single(activityId.value)
+  } finally {
+    loading.close()
+  }
+})
+</script>
+
+<template>
+  <div class="p-12">
+    <ElPageHeader :icon="ArrowLeft" @back="() => router.back()">
+      <template #content>
+        {{ t(`activity.impression.page.${classify}.title`) }}
+      </template>
+      <template #breadcrumb>
+        <ElBreadcrumb :separator-icon="ArrowRight">
+          <ElBreadcrumbItem>
+            <ElButton text size="small" @click="router.push({ path: '/activities' })">
+              {{ t('nav.breadcrumbs.view.home') }}
+            </ElButton>
+          </ElBreadcrumbItem>
+          <ElBreadcrumbItem>
+            <ElButton text size="small">
+              {{ t('nav.breadcrumbs.view.specific') }}
+            </ElButton>
+          </ElBreadcrumbItem>
+          <ElBreadcrumbItem>
+            <ElButton
+              text
+              size="small"
+              @click="router.push({ path: `/activity/details/${activityId}` })"
+            >
+              {{ activity?.name }}
+            </ElButton>
+          </ElBreadcrumbItem>
+          <ElBreadcrumbItem>
+            <ElButton text size="small" type="info">
+              {{ t(`activity.impression.page.${classify}.title`) }}
+            </ElButton>
+          </ElBreadcrumbItem>
+        </ElBreadcrumb>
+      </template>
+    </ElPageHeader>
+    <div class="py-4">
+      <ElCard shadow="never">
+        <ElScrollbar :max-height="height * 0.6">
+          <ZActivityImpressionManager v-if="activity" :activity="activity" :role="mode" />
+        </ElScrollbar>
+      </ElCard>
+    </div>
+  </div>
+</template>
diff --git a/src/views/activity/ActivityPage.vue b/src/views/activity/ActivityPage.vue
index 4fa0a74..98699d2 100644
--- a/src/views/activity/ActivityPage.vue
+++ b/src/views/activity/ActivityPage.vue
@@ -14,7 +14,6 @@ const activity = ref<ActivityInstance>()
 
 const loading = ElLoading.service({
   fullscreen: true,
-  text: '加载中'
 })
 
 api.activity.read.single(_id).then(res => {
diff --git a/src/views/notifications/NotificationItem.vue b/src/views/notifications/NotificationItem.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/views/user/UserHome.vue b/src/views/user/UserHome.vue
index be4a3a7..a512903 100644
--- a/src/views/user/UserHome.vue
+++ b/src/views/user/UserHome.vue
@@ -9,7 +9,7 @@ import {
   ElSkeleton
 } from 'element-plus'
 import MaterialSymbolsDescriptionOutline from '@/icons/MaterialSymbolsDescriptionOutline.vue'
-import { Refresh } from '@element-plus/icons-vue'
+import { Refresh, ArrowRight } from '@element-plus/icons-vue'
 import dayjs from 'dayjs'
 import { ref } from 'vue'
 import { useHeaderStore } from '@/stores/header'
@@ -22,12 +22,11 @@ import ZNotificationList from '@/components/notifications/ZNotificationList.vue'
 import { useWindowSize } from '@vueuse/core'
 import { useRouter } from 'vue-router'
 
-const router = useRouter()
-
 const header = useHeaderStore()
 const user = useUserStore()
 const { t } = useI18n()
 const { width, height } = useWindowSize()
+const router = useRouter()
 
 header.setHeader(t('nav.home'))
 
@@ -46,6 +45,12 @@ async function refreshUser() {
   await user.refreshUser()
   loading.value = false
 }
+
+const notMode = ref<'personal' | 'global'>('personal')
+const toggleMode = () => {
+  if (notMode.value === 'personal') notMode.value = 'global'
+  else notMode.value = 'personal'
+}
 </script>
 
 <template>
@@ -99,16 +104,38 @@ async function refreshUser() {
         :social-practice="time.socialPractice"
       />
     </div>
-    <ElCard class="py-4" shadow="hover">
-      <div class="flex items-center">
-        <span class="text-lg">{{ t('home.panels.notification.title') }}</span>
-        <span class="ma"></span>
-        <ElButton bg text type="primary" @click="router.push('notifications')">{{
-          t('home.panels.notification.more')
-        }}</ElButton>
-      </div>
-      <ZNotificationList less mode="personal" />
-    </ElCard>
+    <div class="pt-4 pb-8">
+      <ElCard shadow="hover">
+        <div class="flex items-center">
+          <p class="text-lg pl-1">{{ t('home.panels.notification.title') }}</p>
+          <div class="ma"></div>
+          <ElButton
+            bg
+            text
+            round
+            :icon="ArrowRight"
+            type="success"
+            v-if="
+              user.position.includes('admin') ||
+              user.position.includes('department') ||
+              user.position.includes('auditor')
+            "
+            @click="
+              user.position.includes('admin') ||
+              user.position.includes('department') ||
+              user.position.includes('auditor')
+                ? toggleMode()
+                : undefined
+            "
+            >{{ t('notification.home.' + notMode) }}</ElButton
+          >
+          <ElButton bg text round @click="router.push('/notifications/')">{{
+            t('home.panels.notification.more')
+          }}</ElButton>
+        </div>
+        <ZNotificationList less :mode="notMode" />
+      </ElCard>
+    </div>
   </div>
 </template>