diff --git a/code/frontend/src/App.js b/code/frontend/src/App.js
index c6d227b..16a3025 100644
--- a/code/frontend/src/App.js
+++ b/code/frontend/src/App.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Dashboard from './pages/Dashboard';
 import LobsterDetail from './components/LobsterDetail';
+import MemoryPage from './pages/MemoryPage';
 
 function App() {
   return (
@@ -9,6 +10,7 @@ function App() {
       <Routes>
         <Route path="/" element={<Dashboard />} />
         <Route path="/lobster/:lobsterId" element={<LobsterDetail />} />
+        <Route path="/lobster/:lobsterId/memory" element={<MemoryPage />} />
       </Routes>
     </Router>
   );
diff --git a/code/frontend/src/pages/MemoryPage/index.js b/code/frontend/src/pages/MemoryPage/index.js
new file mode 100644
index 0000000..78b90e1
--- /dev/null
+++ b/code/frontend/src/pages/MemoryPage/index.js
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import MemoryModal from '../../components/MemoryModal/index.js';
+
+function MemoryPage() {
+  const { lobsterId } = useParams();
+  const navigate = useNavigate();
+  const [lobster, setLobster] = useState(null);
+
+  // 龙虾数据（应该从 API 获取，这里简化处理）
+  const lobsters = {
+    1: { name: '飞行侠', emoji: '🦸' },
+    2: { name: '道童', emoji: '☯️' },
+    3: { name: '墨子', emoji: '🔧' },
+    4: { name: '织网者', emoji: '🕸️' },
+    5: { name: '费曼', emoji: '⚛️' },
+    6: { name: '守望者', emoji: '👁️' },
+  };
+
+  const lobsterData = lobsters[lobsterId];
+
+  const handleClose = () => {
+    navigate(`/lobster/${lobsterId}`);
+  };
+
+  if (!lobsterData) {
+    return <div>龙虾不存在</div>;
+  }
+
+  return (
+    <MemoryModal
+      lobsterId={lobsterId}
+      lobsterName={`${lobsterData.emoji} ${lobsterData.name}`}
+      onClose={handleClose}
+    />
+  );
+}
+
+export default MemoryPage;