diff --git a/src/pages/MessagePage/MessagePage.css b/src/pages/MessagePage/MessagePage.css
new file mode 100644
index 0000000..77ea80a
--- /dev/null
+++ b/src/pages/MessagePage/MessagePage.css
@@ -0,0 +1,44 @@
+/* ./pages/MessagePage/MessagePage.css */
+
+.message-page {
+    padding: 20px;
+    background-color: #f8f9fa;
+    min-height: calc(100vh - 120px);
+  }
+  
+  .message-page h2 {
+    font-size: 24px;
+    margin-bottom: 20px;
+  }
+  
+  .message-list {
+    list-style: none;
+    padding: 0;
+  }
+  
+  .message-item {
+    background: #ffffff;
+    border: 1px solid #dee2e6;
+    border-radius: 6px;
+    padding: 15px;
+    margin-bottom: 15px;
+  }
+  
+  .message-header {
+    font-size: 16px;
+    margin-bottom: 10px;
+    color: #343a40;
+    display: flex;
+    justify-content: space-between;
+  }
+  
+  .message-time {
+    font-size: 14px;
+    color: #6c757d;
+  }
+  
+  .message-content {
+    font-size: 15px;
+    color: #495057;
+  }
+  
\ No newline at end of file
diff --git a/src/pages/MessagePage/MessagePage.jsx b/src/pages/MessagePage/MessagePage.jsx
new file mode 100644
index 0000000..ae95dca
--- /dev/null
+++ b/src/pages/MessagePage/MessagePage.jsx
@@ -0,0 +1,92 @@
+import React, { useEffect, useState } from 'react';
+import './MessagePage.css';
+import { useUser } from '../../context/UserContext';
+
+const API_BASE = process.env.REACT_APP_API_BASE;
+
+const mockMessages = [
+  {
+    message_id: 1,
+    sender_username: 'Alice',
+    timestamp: Date.now() - 100000,
+    content: '你好，这是测试消息。',
+  },
+  {
+    message_id: 2,
+    sender_username: 'Bob',
+    timestamp: Date.now() - 50000,
+    content: '欢迎使用我们的平台！',
+  },
+];
+
+const MessagePage = () => {
+  const { user } = useUser(); // 从上下文中获取用户
+  const currentUserId = user?.id;
+
+  const [messages, setMessages] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (currentUserId) {
+      fetchMessages();
+    }
+  }, [currentUserId]);
+
+  const fetchMessages = async () => {
+    setLoading(true);
+    try {
+      if (process.env.NODE_ENV === 'development') {
+        await new Promise((r) => setTimeout(r, 500)); // 模拟延迟
+        setMessages(mockMessages);
+      } else {
+        const response = await fetch(`${API_BASE}/echo/messages/${currentUserId}`);
+        const data = await response.json();
+        if (data.status === 'success') {
+          setMessages(data.messages);
+        } else {
+          setMessages([]);
+        }
+      }
+    } catch (error) {
+      console.error('加载消息失败:', error);
+      setMessages([]);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!currentUserId) {
+    return <div className="message-page">未登录，无法加载消息。</div>;
+  }
+
+  if (loading) {
+    return <div className="message-page">加载中...</div>;
+  }
+
+  return (
+    <div className="message-page">
+      <h2>我的消息</h2>
+      {messages.length === 0 ? (
+        <div>暂无消息记录</div>
+      ) : (
+        <ul className="message-list">
+          {messages.map((msg) => (
+            <li key={msg.message_id} className="message-item">
+              <div className="message-header">
+                来自：<strong>{msg.sender_username}</strong>
+                <span className="message-time">
+                  {new Date(msg.timestamp).toLocaleString()}
+                </span>
+              </div>
+              <div className="message-content">
+                {msg.content}
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+};
+
+export default MessagePage;