diff --git a/src/app.config.ts b/src/app.config.ts
index 4e2430c..8fb4fc0 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -1,5 +1,5 @@
 export default defineAppConfig({
-  pages: ["pages/index/index"],
+  pages: ["pages/index/index", "pages/message/index"],
   window: {
     navigationBarTitleText: "新手小程序",
     navigationBarBackgroundColor: "#1AAD19",
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 81e630e..b45b8d3 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -28,7 +28,6 @@ const navItems: TabbarItem[] = [
   { key: "message", label: "消息", active: false, badge: true },
   { key: "mine", label: "我的", active: false }
 ];
-
 const mockBluetoothDevices: DeviceCandidate[] = [
   { id: "mock-thermo-01", name: "体征监测设备 A1", source: "mock" },
   { id: "mock-thermo-02", name: "体征监测设备 B2", source: "mock" }
@@ -115,8 +114,17 @@ export default function Index() {
     showToast("后续可从这里进入设备管理页");
   };
 
-  const handleTabClick = (label: string) => {
-    showToast(`${label}功能待接入`);
+  const handleTabClick = (item: TabbarItem) => {
+    if (item.key === "home") {
+      return;
+    }
+
+    if (item.key === "message") {
+      Taro.redirectTo({ url: "/pages/message/index" });
+      return;
+    }
+
+    showToast(`${item.label}功能待接入`);
   };
 
   const handleScanBind = async () => {
@@ -295,7 +303,7 @@ export default function Index() {
         </View>
       </PanelCard>
 
-      <BottomTabbar items={navItems} onItemClick={(item) => handleTabClick(item.label)} />
+      <BottomTabbar items={navItems} onItemClick={handleTabClick} />
     </View>
   );
 }
diff --git a/src/pages/message/index.config.ts b/src/pages/message/index.config.ts
new file mode 100644
index 0000000..c344b06
--- /dev/null
+++ b/src/pages/message/index.config.ts
@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationStyle: "custom",
+  navigationBarTitleText: "消息"
+});
diff --git a/src/pages/message/index.scss b/src/pages/message/index.scss
new file mode 100644
index 0000000..acc9b20
--- /dev/null
+++ b/src/pages/message/index.scss
@@ -0,0 +1,129 @@
+.message-page {
+  position: relative;
+  min-height: 100vh;
+  padding: 24rpx 24rpx 156rpx;
+  box-sizing: border-box;
+  background: linear-gradient(180deg, #1d2331 0%, #171d29 100%);
+  overflow: hidden;
+}
+
+.message-page__glow {
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+.message-page__glow--top {
+  top: -80rpx;
+  left: -40rpx;
+  width: 280rpx;
+  height: 280rpx;
+  background: radial-gradient(circle, rgba(55, 228, 171, 0.1), transparent 70%);
+}
+
+.message-page__glow--side {
+  top: 160rpx;
+  right: -90rpx;
+  width: 240rpx;
+  height: 320rpx;
+  background: radial-gradient(circle, rgba(86, 116, 184, 0.12), transparent 72%);
+}
+
+.message-tabs {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 110rpx;
+  padding: 20rpx 0 28rpx;
+}
+
+.message-tabs__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 120rpx;
+}
+
+.message-tabs__label {
+  color: #8f97ac;
+  font-size: 24rpx;
+  line-height: 1.3;
+}
+
+.message-tabs__label--active {
+  color: #36e4aa;
+  font-weight: 600;
+}
+
+.message-tabs__dot {
+  position: absolute;
+  top: 6rpx;
+  right: -10rpx;
+  width: 10rpx;
+  height: 10rpx;
+  border-radius: 50%;
+  background: #ff4d4f;
+}
+
+.message-tabs__line {
+  position: absolute;
+  left: 50%;
+  bottom: -10rpx;
+  width: 52rpx;
+  height: 4rpx;
+  border-radius: 999rpx;
+  background: linear-gradient(90deg, #35e5b3 0%, #20c9bf 100%);
+  transform: translateX(-50%);
+}
+
+.message-list {
+  position: relative;
+  z-index: 1;
+}
+
+.message-card {
+  padding: 24rpx 26rpx;
+  border-radius: 26rpx;
+  background: rgba(42, 48, 66, 0.96);
+  box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.03);
+}
+
+.message-card + .message-card {
+  margin-top: 22rpx;
+}
+
+.message-card__title {
+  display: block;
+  margin-bottom: 18rpx;
+  color: #f3f7ff;
+  font-size: 28rpx;
+  font-weight: 600;
+  line-height: 1.5;
+}
+
+.message-card__row {
+  display: flex;
+  align-items: flex-start;
+  line-height: 1.7;
+}
+
+.message-card__row + .message-card__row {
+  margin-top: 6rpx;
+}
+
+.message-card__label {
+  width: 104rpx;
+  flex-shrink: 0;
+  color: #7f889d;
+  font-size: 22rpx;
+}
+
+.message-card__value {
+  flex: 1;
+  color: #d9dfeb;
+  font-size: 22rpx;
+  word-break: break-all;
+}
diff --git a/src/pages/message/index.tsx b/src/pages/message/index.tsx
new file mode 100644
index 0000000..cff820a
--- /dev/null
+++ b/src/pages/message/index.tsx
@@ -0,0 +1,170 @@
+import { Text, View } from "@tarojs/components";
+import Taro from "@tarojs/taro";
+import { useState } from "react";
+import BottomTabbar, { type TabbarItem } from "../../components/bottom-tabbar";
+import "./index.scss";
+
+type MessageTabKey = "vital" | "system";
+
+type MessageItem = {
+  id: string;
+  title: string;
+  deviceId: string;
+  userName: string;
+  messageType: string;
+  valueText: string;
+  occurredAt: string;
+  category: MessageTabKey;
+};
+
+const tabs: Array<{ key: MessageTabKey; label: string; hasDot?: boolean }> = [
+  { key: "vital", label: "体征消息" },
+  { key: "system", label: "系统消息", hasDot: true }
+];
+
+const messageList: MessageItem[] = [
+  {
+    id: "vital-1",
+    title: "实时监测结果通知",
+    deviceId: "A54984651",
+    userName: "1201/李小北",
+    messageType: "心率异常",
+    valueText: "106",
+    occurredAt: "2024-07-30 01:15",
+    category: "vital"
+  },
+  {
+    id: "vital-2",
+    title: "睡眠报告分析通知",
+    deviceId: "A54984651",
+    userName: "1201/李小北",
+    messageType: "HRV异常",
+    valueText: "89",
+    occurredAt: "2024-07-30 01:15",
+    category: "vital"
+  },
+  {
+    id: "vital-3",
+    title: "睡眠月报分析通知",
+    deviceId: "A54984651",
+    userName: "1201/李小北",
+    messageType: "睡眠得分",
+    valueText: "有20天低于60分",
+    occurredAt: "2024-07-30 01:15",
+    category: "vital"
+  },
+  {
+    id: "system-1",
+    title: "系统升级提醒",
+    deviceId: "平台消息",
+    userName: "全部用户",
+    messageType: "版本更新",
+    valueText: "建议升级到最新版本",
+    occurredAt: "2024-07-30 09:30",
+    category: "system"
+  },
+  {
+    id: "system-2",
+    title: "服务时间调整通知",
+    deviceId: "平台消息",
+    userName: "全部用户",
+    messageType: "运营公告",
+    valueText: "周日 02:00-04:00 系统维护",
+    occurredAt: "2024-07-29 18:00",
+    category: "system"
+  }
+];
+
+const fieldLabels = {
+  deviceId: "设备ID",
+  userName: "使用人员",
+  messageType: "消息类型",
+  valueText: "检测数值",
+  occurredAt: "发生时间"
+};
+
+const navItems: TabbarItem[] = [
+  { key: "home", label: "首页", active: false },
+  { key: "report", label: "报告", active: false },
+  { key: "assistant", label: "小e", active: false },
+  { key: "message", label: "消息", active: true, badge: true },
+  { key: "mine", label: "我的", active: false }
+];
+
+export default function MessagePage() {
+  const [activeTab, setActiveTab] = useState<MessageTabKey>("vital");
+
+  const currentMessages = messageList.filter((item) => item.category === activeTab);
+
+  const handleTabClick = (item: TabbarItem) => {
+    if (item.key === "message") {
+      return;
+    }
+
+    if (item.key === "home") {
+      Taro.redirectTo({ url: "/pages/index/index" });
+      return;
+    }
+
+    Taro.showToast({
+      title: `${item.label}功能待接入`,
+      icon: "none"
+    });
+  };
+
+  return (
+    <View className="message-page">
+      <View className="message-page__glow message-page__glow--top" />
+      <View className="message-page__glow message-page__glow--side" />
+
+      <View className="message-tabs">
+        {tabs.map((item) => {
+          const isActive = item.key === activeTab;
+
+          return (
+            <View className="message-tabs__item" key={item.key} onClick={() => setActiveTab(item.key)}>
+              <Text className={`message-tabs__label ${isActive ? "message-tabs__label--active" : ""}`}>{item.label}</Text>
+              {item.hasDot ? <View className="message-tabs__dot" /> : null}
+              {isActive ? <View className="message-tabs__line" /> : null}
+            </View>
+          );
+        })}
+      </View>
+
+      <View className="message-list">
+        {currentMessages.map((item) => (
+          <View className="message-card" key={item.id}>
+            <Text className="message-card__title">{item.title}</Text>
+
+            <View className="message-card__row">
+              <Text className="message-card__label">{fieldLabels.deviceId}</Text>
+              <Text className="message-card__value">{item.deviceId}</Text>
+            </View>
+
+            <View className="message-card__row">
+              <Text className="message-card__label">{fieldLabels.userName}</Text>
+              <Text className="message-card__value">{item.userName}</Text>
+            </View>
+
+            <View className="message-card__row">
+              <Text className="message-card__label">{fieldLabels.messageType}</Text>
+              <Text className="message-card__value">{item.messageType}</Text>
+            </View>
+
+            <View className="message-card__row">
+              <Text className="message-card__label">{fieldLabels.valueText}</Text>
+              <Text className="message-card__value">{item.valueText}</Text>
+            </View>
+
+            <View className="message-card__row">
+              <Text className="message-card__label">{fieldLabels.occurredAt}</Text>
+              <Text className="message-card__value">{item.occurredAt}</Text>
+            </View>
+          </View>
+        ))}
+      </View>
+
+      <BottomTabbar items={navItems} onItemClick={handleTabClick} />
+    </View>
+  );
+}