diff --git a/front/src/ForumPage.js b/front/src/ForumPage.js
index abcba7d..7939da1 100644
--- a/front/src/ForumPage.js
+++ b/front/src/ForumPage.js
@@ -29,18 +29,56 @@
 export default function ForumPage() {
     const navigate = useNavigate();
     const [posts, setPosts] = useState([]);
+    const [searchQuery, setSearchQuery] = useState('');
 
     useEffect(() => {
         // get userId from cookie
         const match = document.cookie.match('(^|;)\\s*userId=([^;]+)');
         const userId = match ? match[2] : null;
         console.log("User ID from cookie:", userId);
-        if (!userId) return;
+        // if (!userId) return;
+        console.log("Fetching forum posts...");
         fetch(`${API_BASE_URL}/api/forum`)
-            .then(res => res.json())
-            .then(data => setPosts(data))
+            .then(res => {
+                // console.log("fetch raw response:", res);
+                return res.json();
+            })
+            .then(data => {
+                // console.log("fetch forum data:", data);
+                const formattedPosts = data.map(post => ({
+                    post_id: post.postid,
+                    title: post.posttitle,
+                    content: post.postcontent,
+                    author_id: post.postuserid,
+                    author_name: post.author?.username || '',
+                    created_at: new Date(post.posttime).toLocaleString(),
+                    reply_count: post.replytime,
+                    view_count: post.readtime,
+                }));
+                setPosts(formattedPosts);
+            })
             .catch(() => setPosts([]));
     }, []);
+    
+    // Handler to perform search based on input value
+    const handleSearch = () => {
+      fetch(`${API_BASE_URL}/api/search-posts?keyword=${encodeURIComponent(searchQuery)}`)
+        .then(res => res.json())
+        .then(data => {
+          const formattedPosts = data.map(post => ({
+            post_id: post.postid,
+            title: post.posttitle,
+            content: post.postcontent,
+            author_id: post.postuserid,
+            author_name: post.author?.username || '',
+            created_at: new Date(post.posttime).toLocaleString(),
+            reply_count: post.replytime,
+            view_count: post.readtime,
+          }));
+          setPosts(formattedPosts);
+        })
+        .catch(() => setPosts([]));
+    };
 
     return (
         <div style={{ maxWidth: 700, margin: "40px auto" }}>
@@ -49,6 +87,8 @@
                 <input
                     type="text"
                     placeholder="搜索帖子内容"
+                    value={searchQuery}
+                    onChange={e => setSearchQuery(e.target.value)}
                     style={{
                         flex: 1,
                         fontSize: 16,
@@ -69,6 +109,7 @@
                         borderRadius: 8,
                         cursor: "pointer",
                     }}
+                    onClick={handleSearch}
                 >
                     🔍
                 </button>