diff --git a/src/pages/HelpPage.css b/src/pages/HelpPage.css
new file mode 100644
index 0000000..6809108
--- /dev/null
+++ b/src/pages/HelpPage.css
@@ -0,0 +1,78 @@
+.help-page-wrapper {
+  min-height: 100vh;
+  background-color: #fff7e6; /* 淡橙色背景 */
+  padding: 3rem 1rem; /* 上下3rem，左右1rem */
+  box-sizing: border-box;
+}
+
+.help-container {
+  max-width: 960px; /* 大约是4xl宽度 */
+  margin: 0 auto;
+  background: white;
+  border: 4px solid black;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 10px rgb(0 0 0 / 0.1);
+  padding: 2rem;
+  box-sizing: border-box;
+}
+
+.help-title {
+  font-size: 2rem;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 1.5rem;
+  border-bottom: 2px solid black;
+  padding-bottom: 1rem;
+}
+
+.help-content {
+  max-width: none; /* 让内容最大宽度不限制 */
+  margin: 0 auto;
+  padding: 0 2rem; /* 左右边距2rem */
+  box-sizing: border-box;
+}
+
+/* markdown 内容排版，配合 rehype-highlight 样式 */
+.help-content p {
+  margin: 1rem 0;
+  line-height: 1.6;
+}
+
+.help-content h1 {
+  font-size: 1.5rem;
+  margin: 2rem 0 1rem;
+  font-weight: 700;
+  border-bottom: 1px solid #ccc;
+  padding-bottom: 0.5rem;
+}
+
+.help-content h2 {
+  font-size: 1.25rem;
+  margin: 1.5rem 0 1rem;
+  font-weight: 600;
+}
+
+.help-content code {
+  background-color: #f3f4f6;
+  padding: 0.2rem 0.4rem;
+  border-radius: 0.25rem;
+  font-family: monospace;
+  font-size: 0.9rem;
+}
+
+.help-content pre {
+  background-color: #f3f4f6;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  overflow-x: auto;
+  margin: 1rem 0;
+  border: 1px solid #d1d5db;
+}
+
+.help-content blockquote {
+  border-left: 4px solid #9ca3af;
+  padding-left: 1rem;
+  font-style: italic;
+  color: #6b7280;
+  margin: 1rem 0;
+}
diff --git a/src/pages/HelpPage.jsx b/src/pages/HelpPage.jsx
new file mode 100644
index 0000000..ec5161b
--- /dev/null
+++ b/src/pages/HelpPage.jsx
@@ -0,0 +1,47 @@
+import React, { useEffect, useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeHighlight from 'rehype-highlight';
+import './HelpPage.css'; // 引入样式
+import Navbar from '../components/Navbar'; // 导航栏组件
+
+export default function HelpPage() {
+  const [markdown, setMarkdown] = useState('');
+
+  useEffect(() => {
+    fetch('/help.md')
+      .then(res => {
+        if (!res.ok) throw new Error('Markdown 文件加载失败');
+        return res.text();
+      })
+      .then(text => setMarkdown(text))
+      .catch(() => setMarkdown('# 帮助文档加载失败，请稍后再试。'));
+  }, []);
+
+   return (
+     <div>
+      <Navbar />
+      <div className="help-page-wrapper">
+        <div className="help-container">
+          <h1 className="help-title">📚 帮助文档</h1>
+          <div className="help-content">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              rehypePlugins={[rehypeHighlight]}
+              components={{
+                h1: ({ node, ...props }) => <h1 {...props} />,
+                h2: ({ node, ...props }) => <h2 {...props} />,
+                p: ({ node, ...props }) => <p {...props} />,
+                code: ({ node, ...props }) => <code {...props} />,
+                pre: ({ node, ...props }) => <pre {...props} />,
+                blockquote: ({ node, ...props }) => <blockquote {...props} />,
+              }}
+            >
+              {markdown}
+            </ReactMarkdown>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}