diff --git a/src/app.config.ts b/src/app.config.ts
index 2f15ede..f4dcc05 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -62,9 +62,10 @@ export default defineAppConfig({
     list: [
       {
         pagePath: 'pages/main/index',
-        text: 'clock',
+        text: 'Home',
       },
-      { pagePath: 'pages/personalPage/index', text: 'user' },
+      { pagePath: 'pages/messageNotification/index', text: 'Massage' },
+      { pagePath: 'pages/personalPage/index', text: 'Profile' },
     ],
   },
   window: {
diff --git a/src/common/utils/keyGen.ts b/src/common/utils/keyGen.ts
new file mode 100644
index 0000000..4938359
--- /dev/null
+++ b/src/common/utils/keyGen.ts
@@ -0,0 +1,15 @@
+const keyGen = function* () {
+  let count = 0;
+  while (true) {
+    yield count++;
+  }
+};
+
+const uniqueKeyUtil = (() => {
+  const generator = keyGen();
+  return {
+    nextKey: () => generator.next().value,
+  };
+})();
+
+export default uniqueKeyUtil;
diff --git a/src/custom-tab-bar/index.scss b/src/custom-tab-bar/index.scss
index 33c1ea3..4e4c0d8 100644
--- a/src/custom-tab-bar/index.scss
+++ b/src/custom-tab-bar/index.scss
@@ -6,7 +6,7 @@
   position: fixed;
   bottom: 0;
   background-color: #f9f9f2;
-  box-shadow: 0 -1vh 0.5vh rgba(0, 0, 0, 0.1);
+  box-shadow: 0 -1vh 1vh rgba(0, 0, 0, 0.1);
   display: flex;
   justify-content: space-evenly;
   align-items: center;
diff --git a/src/custom-tab-bar/index.tsx b/src/custom-tab-bar/index.tsx
index c1752ac..e45d290 100644
--- a/src/custom-tab-bar/index.tsx
+++ b/src/custom-tab-bar/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable import/first */
 import { View } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 import { memo } from 'react';
@@ -5,8 +6,8 @@ import { AtIcon } from 'taro-ui';
 
 import './index.scss';
 
-// eslint-disable-next-line import/first
 import useActiveButtonStore, { ActiveButtonType } from '@/common/hooks/useActiveNav';
+import uniqueKeyUtil from '@/common/utils/keyGen';
 
 interface TabBarProps {}
 
@@ -14,7 +15,7 @@ const TAB_LIST: Array<{ pagePath: string; name: string; icon?: string }> = [
   { pagePath: '/pages/main/index', name: 'Home', icon: 'streaming' },
   { pagePath: '/pages/123/index', name: 'Download', icon: 'download-cloud' },
   { pagePath: '/pages/456/index', name: '+' },
-  { pagePath: '/pages/789/index', name: 'Massage', icon: 'message' },
+  { pagePath: '/pages/messageNotification/index', name: 'Massage', icon: 'message' },
   { pagePath: '/pages/personalPage/index', name: 'Profile', icon: 'user' },
 ];
 
@@ -23,7 +24,7 @@ const TabBar: React.FC<TabBarProps> = memo(() => {
 
   return (
     <View className="guild_line">
-      {TAB_LIST.map((item, index) => (
+      {TAB_LIST.map((item) => (
         <>
           {item.name === '+' ? (
             <View className="add_button">
@@ -31,7 +32,7 @@ const TabBar: React.FC<TabBarProps> = memo(() => {
             </View>
           ) : (
             <AtIcon
-              key={index}
+              key={uniqueKeyUtil.nextKey()}
               value={item.icon as string}
               size="35"
               color={activeButton === item.name ? '#f18900' : '#FFD777'}
diff --git a/src/pages/messageNotification/index.scss b/src/pages/messageNotification/index.scss
index 742ab02..e69de29 100644
--- a/src/pages/messageNotification/index.scss
+++ b/src/pages/messageNotification/index.scss
@@ -1,73 +0,0 @@
-.MessageNotification {
-  width: 100%;
-  height: 95vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: absolute;
-  top: 2vh;
-  gap: 4vh;
-  overflow: scroll;
-}
-
-.MessageNotification .messageNotification_message {
-  width: 90vw;
-  display: flex;
-  gap: 5vw;
-}
-
-.MessageNotification .messageNotification_photo {
-  width: 8vh;
-  height: 8vh;
-  border-radius: 50%;
-  background-color: #f9f9f2;
-}
-
-.MessageNotification .messageNotification_detail {
-  display: flex;
-  flex-direction: column;
-  gap: 1vh;
-}
-
-.MessageNotification .messageNotification_username {
-  font-size: 2.2vh;
-  font-weight: bold;
-}
-
-.MessageNotification .messageNotification_event {
-  display: flex;
-}
-
-.MessageNotification .messageNotification_event_type {
-  font-size: 2.2vh;
-  color: #d2d5d8;
-}
-
-.MessageNotification .messageNotification_description {
-  font-size: 2.2vh;
-  font-weight: lighter;
-}
-
-.MessageNotification .messageNotification_comment {
-  font-size: 2.2vh;
-  color: #d2d5d8;
-  border-left: 1vw solid #d2d5d8;
-  padding-left: 1vw;
-}
-
-.MessageNotification .messageNotification_reply {
-  width: 65vw;
-  height: 3vh;
-  border-radius: 2vh;
-  background-color: #f9f9f2;
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.MessageNotification .messageNotification_reply_text {
-  position: absolute;
-  left: 3vw;
-  font-size: 1.8vh;
-  color: #d2d5d8;
-}
diff --git a/src/pages/messageNotification/index.tsx b/src/pages/messageNotification/index.tsx
index b58b470..43fd5e7 100644
--- a/src/pages/messageNotification/index.tsx
+++ b/src/pages/messageNotification/index.tsx
@@ -1,74 +1,119 @@
-/* eslint-disable no-console */
-import { View } from '@tarojs/components';
-import { useLoad } from '@tarojs/taro';
-import { useState } from 'react';
+import { Text, View } from '@tarojs/components';
+import { memo, useState } from 'react';
+import { AtIcon } from 'taro-ui';
 
 import './index.scss';
 
-type MessageNotificationProps = object;
-type MessageProps = {
+// eslint-disable-next-line import/first
+import uniqueKeyUtil from '@/common/utils/keyGen';
+
+type Notification = {
   username: string;
   eventType: boolean;
   description: string;
   comment: string;
+  timestamp: string;
 };
 
-const MessageNotification: React.FC<MessageNotificationProps> = () => {
-  useLoad(() => {
-    console.log('Page loaded.');
-  });
+interface MessageNotificationProps {}
+
+interface MessageProps extends Notification {}
+
+interface TabBarProps {
+  tab: string;
+  setTab: (tab: string) => void;
+}
 
-  const [notificationEventType] = useState(true);
-  const [notificationUsername] = useState('昵称');
-  const [notificationDescription] = useState('我正在回复你的评论');
-  const [notificationComment] = useState('这里是原评论内容');
+const Tabs: { name: string; icon: string }[] = [
+  {
+    name: '提问',
+    icon: 'clock',
+  },
+  {
+    name: '点赞',
+    icon: 'clock',
+  },
+  {
+    name: '官方',
+    icon: 'clock',
+  },
+];
+
+const MessageNotification: React.FC<MessageNotificationProps> = memo(() => {
+  const [tab, setTab] = useState<string>('提问');
+  const [notification, setNotification] = useState<Notification>({
+    username: '昵称',
+    eventType: true,
+    description: '我正在回复你的评论',
+    comment: '这里是原评论内容',
+    timestamp: '2023年1月1日',
+  });
 
   return (
-    <View className="MessageNotification">
+    <View className="flex h-[95vh] w-full flex-col items-center gap-4 overflow-y-scroll px-4 pt-2">
+      <TabBar tab={tab} setTab={setTab} />
       <Message
-        username={notificationUsername}
-        eventType={notificationEventType}
-        description={notificationDescription}
-        comment={notificationComment}
+        username={notification.username}
+        eventType={notification.eventType}
+        description={notification.description}
+        comment={notification.comment}
+        timestamp={notification.timestamp}
       />
       <Message
-        username={notificationUsername}
+        username={notification.username}
         eventType={false}
-        description={notificationDescription}
-        comment={notificationComment}
+        description={notification.description}
+        comment={notification.comment}
+        timestamp={notification.timestamp}
       />
     </View>
   );
-};
+});
 
-const Message: React.FC<MessageProps> = ({
-  username,
-  eventType,
-  description,
-  comment,
-}) => {
-  return (
-    <View className="messageNotification_message">
-      <View className="messageNotification_photo"></View>
-      <View className="messageNotification_detail">
-        <View className="messageNotification_username">{username}</View>
-        <View className="messageNotification_event">
-          <View className="messageNotification_event_type">
-            {eventType ? '回复：' : '赞了我'}
-          </View>
-          {eventType && (
-            <View className="messageNotification_description">{description}</View>
-          )}
+const TabBar: React.FC<TabBarProps> = memo(({ tab, setTab }) => (
+  <View className="mb-2 flex w-full justify-evenly">
+    {Tabs.map((item) => (
+      <View key={uniqueKeyUtil.nextKey()} className="flex flex-col items-center gap-2">
+        <View className="flex h-16 w-16 items-center justify-center rounded-full bg-[#f9f9f2] shadow-lg">
+          <AtIcon
+            value={item.icon}
+            size="35"
+            color={tab === item.name ? '#f18900' : '#FFD777'}
+            onClick={() => {
+              setTab(item.name);
+            }}
+          ></AtIcon>
+        </View>
+        <Text>{item.name}</Text>
+      </View>
+    ))}
+  </View>
+));
+
+const Message: React.FC<MessageProps> = memo(
+  ({ username, eventType, description, comment, timestamp }) => (
+    <View className="flex w-full gap-4">
+      <View className="h-14 w-16 rounded-full border bg-[#f9f9f2]"></View>
+      <View className="flex w-full flex-col gap-2">
+        <View className="flex w-full justify-between">
+          <Text className="text-sm font-bold">{username}</Text>
+          <Text className="text-xs text-gray-200">{timestamp}</Text>
+        </View>
+        <View className="flex">
+          <View className="text-sm text-gray-300">{eventType ? '回复：' : '赞了我'}</View>
+          {eventType && <View className="text-sm text-gray-500">{description}</View>}
+        </View>
+        <View className="border-l-4 border-gray-300 pl-2 text-sm text-gray-500">
+          {comment}
         </View>
-        <View className="messageNotification_comment">{comment}</View>
         {eventType && (
-          <View className="messageNotification_reply">
-            <View className="messageNotification_reply_text">回复TA:</View>
+          <View className="flex h-6 w-full items-center rounded-lg bg-[#f9f9f2] px-2">
+            <View className="text-xs text-gray-300">回复TA:</View>
           </View>
         )}
       </View>
     </View>
-  );
-};
+  )
+);
 
 export default MessageNotification;
diff --git a/src/pages/personalPage/index.tsx b/src/pages/personalPage/index.tsx
index 8f18127..5bd241d 100644
--- a/src/pages/personalPage/index.tsx
+++ b/src/pages/personalPage/index.tsx
@@ -13,7 +13,6 @@ import {
   BookIcon,
   ClockIcon,
   MailIcon,
-  MessageIcon,
   StarIcon,
   TopBackground,
 } from '@/common/assets/img/personalPage';
@@ -170,22 +169,6 @@ const List = () => {
           void Taro.navigateTo({ url: '/pages/evaluateCourseHistory/index' });
         }}
       />
-      <AtListItem
-        title="消息提醒"
-        arrow="right"
-        thumb={MessageIcon}
-        onClick={() => {
-          void Taro.navigateTo({ url: '/pages/messageNotification/index' });
-        }}
-      />
-      <AtListItem
-        title="官方消息"
-        arrow="right"
-        thumb={MessageIcon}
-        onClick={() => {
-          void Taro.navigateTo({ url: '/pages/officialNotification/index' });
-        }}
-      />
       <AtListItem
         title="意见反馈"
         arrow="right"
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 53f0637..ccd0699 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,7 +2,7 @@ import type { Config } from 'tailwindcss';
 
 const config = {
   // 不在 content 包括的文件内编写的 class，不会生成对应的工具类
-  content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
+  content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx}'],
   theme: {
     extend: {},
   },