diff --git a/src/ss_backend/main.mo b/src/ss_backend/main.mo
index 9ae0af4..96934d0 100644
--- a/src/ss_backend/main.mo
+++ b/src/ss_backend/main.mo
@@ -222,6 +222,33 @@ actor {
     return #ok(Vector.toArray(tempPosts));
   };
 
+  func containsInsensitive(text : Text, pattern : Text) : Bool {
+    let lowerText = Text.toLowercase(text);
+    let lowerPattern = Text.toLowercase(pattern);
+    return Text.contains(lowerText, #text lowerPattern);
+  };
+
+  public func searchPost(searchQuery : Text) : async Result.Result<[Post], Text> {
+
+    var allSearchPosts = Vector.Vector<Post>();
+
+    if (searchQuery == "") {
+      for (post in posts.vals()) {
+        allSearchPosts.add(post);
+      };
+      return #ok(Vector.toArray(allSearchPosts));
+    } else {
+      for (post in posts.vals()) {
+        let contains = containsInsensitive(post.description, searchQuery);
+        if (contains) {
+          allSearchPosts.add(post);
+        };
+      };
+      return #ok(Vector.toArray(allSearchPosts));
+    };
+    return #ok(Vector.toArray(allSearchPosts));
+  };
+
   public query func getPostById(postId : Text) : async Result.Result<Post, Text> {
     let post = posts.get(postId);
     switch (post) {
@@ -465,8 +492,6 @@ actor {
       };
     };
   };
-  
-  
 
   public func isVoted(userId : Principal, currPost : Text) : async Bool {
     let post = await getPostById(currPost);
@@ -583,4 +608,5 @@ actor {
       };
     };
   };
+
 };
diff --git a/src/ss_frontend/src/components/MiddleHomePart.jsx b/src/ss_frontend/src/components/MiddleHomePart.jsx
index 72c021c..cfc425b 100644
--- a/src/ss_frontend/src/components/MiddleHomePart.jsx
+++ b/src/ss_frontend/src/components/MiddleHomePart.jsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react'
-import TextInput from './TextInput'
-import HomePost from './HomePost'
-import { useAuth } from '../hooks/UseAuth'
-import { useMutation } from '@tanstack/react-query'
+import React, { useEffect, useState } from "react";
+import TextInput from "./TextInput";
+import HomePost from "./HomePost";
+import { useAuth } from "../hooks/UseAuth";
+import { useMutation } from "@tanstack/react-query";
 import { ss_backend } from "../../../declarations/ss_backend";
 
 const MiddleHomePart = ({ setCurrPost, currPost }) => {
@@ -20,11 +20,10 @@ const MiddleHomePart = ({ setCurrPost, currPost }) => {
     return true;
   }
 
-
   async function fetchPosts() {
     const fetchedPosts = await ss_backend.getAllPosts();
     // console.log(fetchedPosts);
-    
+
     if (fetchedPosts.ok) {
       setPosts(fetchedPosts.ok);
     }
@@ -35,27 +34,26 @@ const MiddleHomePart = ({ setCurrPost, currPost }) => {
   }, [user, posts]);
 
   return (
-    <div className='w-1/2 h-full flex flex-col justify-start'>
-      {
-        isAuthenticated && <TextInput />
-      }
-      <div className=' flex flex-col gap-6'>
+    <div className="w-1/2 h-full flex flex-col justify-start">
+      {isAuthenticated && <TextInput />}
+      <div className=" flex flex-col gap-6">
         {posts.length != 0 &&
-
           posts.map((post) => {
             return (
-              <HomePost choosePost={setCurrPost} post={post} refetch={dataMutate} />
+              <HomePost
+                choosePost={setCurrPost}
+                post={post}
+                refetch={dataMutate}
+              />
             );
-          })
-
-        }
+          })}
 
         {/* <HomePost choosePost={setCurrPost} postId={"dummy"} />
 
         <HomePost choosePost={setCurrPost} postId={"dummy"} /> */}
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default MiddleHomePart
\ No newline at end of file
+export default MiddleHomePart;
diff --git a/src/ss_frontend/src/components/MiddleHomePartSearched.jsx b/src/ss_frontend/src/components/MiddleHomePartSearched.jsx
new file mode 100644
index 0000000..4ec959d
--- /dev/null
+++ b/src/ss_frontend/src/components/MiddleHomePartSearched.jsx
@@ -0,0 +1,61 @@
+import React, { useEffect, useState } from "react";
+import TextInput from "./TextInput";
+import HomePost from "./HomePost";
+import { useAuth } from "../hooks/UseAuth";
+import { useMutation } from "@tanstack/react-query";
+import { ss_backend } from "../../../declarations/ss_backend";
+import { useLocation } from "react-router-dom";
+
+export default function MiddleHomePartSearched({ setCurrPost, currPost }) {
+  const { isAuthenticated, user } = useAuth();
+  const [posts, setPosts] = useState([]);
+  const { search } = useLocation();
+  const searchQuery = new URLSearchParams(search).get("query");
+
+  const { status: statusFetchingData, mutate: dataMutate } = useMutation({
+    mutationKey: ["checkFetch"],
+    mutationFn: fetchDatas,
+  });
+
+  async function fetchDatas() {
+    await fetchPosts();
+    // await fetchFriendHeader();
+    return true;
+  }
+
+  async function fetchPosts() {
+    const fetchedPosts = await ss_backend.searchPost(
+      searchQuery === undefined ? "" : searchQuery
+    );
+    // console.log(fetchedPosts);
+
+    if (fetchedPosts.ok) {
+      setPosts(fetchedPosts.ok);
+    }
+  }
+
+  useEffect(() => {
+    dataMutate();
+  }, [user, posts]);
+
+  return (
+    <div className="w-1/2 h-full flex flex-col justify-start">
+      <div className=" flex flex-col gap-6">
+        {posts.length != 0 &&
+          posts.map((post) => {
+            return (
+              <HomePost
+                choosePost={setCurrPost}
+                post={post}
+                refetch={dataMutate}
+              />
+            );
+          })}
+
+        {/* <HomePost choosePost={setCurrPost} postId={"dummy"} />
+  
+          <HomePost choosePost={setCurrPost} postId={"dummy"} /> */}
+      </div>
+    </div>
+  );
+}
diff --git a/src/ss_frontend/src/components/Navbar.jsx b/src/ss_frontend/src/components/Navbar.jsx
index e322f9c..7cf65bb 100644
--- a/src/ss_frontend/src/components/Navbar.jsx
+++ b/src/ss_frontend/src/components/Navbar.jsx
@@ -21,6 +21,7 @@ const Navbar = () => {
         e.preventDefault();
         console.log(searchKey);
         navigate(`/search?query=${searchKey}`);
+        window.location.reload();
       }
     };
 
diff --git a/src/ss_frontend/src/components/ProfileSidebar.jsx b/src/ss_frontend/src/components/ProfileSidebar.jsx
index 2872c47..015b0cd 100644
--- a/src/ss_frontend/src/components/ProfileSidebar.jsx
+++ b/src/ss_frontend/src/components/ProfileSidebar.jsx
@@ -4,6 +4,7 @@ import { Link, useNavigate } from "react-router-dom";
 import { useAuth } from "../hooks/UseAuth";
 import { useQuery } from "@tanstack/react-query";
 import { useState } from "react";
+import profilePlaceholder from "../assets/profilePlaceholder.jpg"
 
 const ProfileSidebar = () => {
   const { isAuthenticated, getUser, user } = useAuth();
@@ -14,16 +15,18 @@ const ProfileSidebar = () => {
   });
   const [name, setName] = useState("");
   const [username, setUsername] = useState("");
+  const [pfp, setPfp] = useState("");
   useEffect(() => {
     console.log(data);
-    
+
     if (!isLoading && data != undefined) {
       if (data.ok) {
         setUsername(data.ok.username);
-        setName(data.ok.name)
+        setName(data.ok.name);
+        setPfp(data.ok.profileUrl);
       } else {
         console.log(data);
-        
+
         setName("Something's wrong");
       }
     }
@@ -33,7 +36,16 @@ const ProfileSidebar = () => {
     <>
       <div className=" border-gray-200 border rounded-xl flex-col flex max-w-md items-center w-[20vw]">
         <div className="border-2 rounded-full border-neutral-500 mt-4">
-          <AiOutlineUser className="text-6xl"></AiOutlineUser>
+          {isAuthenticated ? (
+            <img
+              id="profileImage"
+              src={pfp === "" ? profilePlaceholder : pfp}
+              alt="Upload a file"
+              className="object-cover w-24 h-24 rounded-full"
+            />
+          ) : (
+            <AiOutlineUser className="text-6xl"></AiOutlineUser>
+          )}
         </div>
         <div className="mt-4 mb-4 pr-8 pl-8 flex flex-col items-center">
           {/* {isAuthenticated} */}
diff --git a/src/ss_frontend/src/pages/HomePage.jsx b/src/ss_frontend/src/pages/HomePage.jsx
index 5bd7ef5..6c93544 100644
--- a/src/ss_frontend/src/pages/HomePage.jsx
+++ b/src/ss_frontend/src/pages/HomePage.jsx
@@ -26,8 +26,6 @@ const HomePage = () => {
             </div> : <CommentDetailPage currPost={currPost} setCurrPost={setCurrPost}/>
           }
 
-          
-
           {/* <TextInput /> */}
         </div>
       </div>
diff --git a/src/ss_frontend/src/pages/SearchPage.jsx b/src/ss_frontend/src/pages/SearchPage.jsx
index 8b7e34c..21967ff 100644
--- a/src/ss_frontend/src/pages/SearchPage.jsx
+++ b/src/ss_frontend/src/pages/SearchPage.jsx
@@ -1,14 +1,40 @@
-import React from "react";
+import React, { useState } from "react";
 import { useLocation } from "react-router-dom";
 import MainTemplate from "../templates/MainTemplate";
+import ProfileSidebar from "../components/ProfileSidebar";
+import RightHomePart from "../components/RightHomePart";
+import CommentDetailPage from "../components/CommentDetailPage";
+import MiddleHomePart from "../components/MiddleHomePart";
+import DetailPage from "../components/DetailPage";
+import MiddleHomePartSearched from "../components/MiddleHomePartSearched";
 
 export default function SearchPage() {
-  const { search } = useLocation();
-  const searchQuery = new URLSearchParams(search).get("query");
+  const [currPost, setCurrPost] = useState();
 
   return (
     <MainTemplate>
-      <div>{searchQuery}</div>
+      <div className="">
+        <div className="flex pt-[5rem] justify-around ">
+          <div className="sticky self-start top-[5rem]">
+            <ProfileSidebar />
+          </div>
+          {currPost !== undefined ? (
+            <DetailPage currPost={currPost} setCurrPost={setCurrPost} />
+          ) : (
+            <MiddleHomePartSearched
+              setCurrPost={setCurrPost}
+              currPost={currPost}
+            />
+          )}
+          {currPost === undefined ? (
+            <div className="sticky self-start top-[5rem]">
+              <RightHomePart />
+            </div>
+          ) : (
+            <CommentDetailPage currPost={currPost} setCurrPost={setCurrPost} />
+          )}
+        </div>
+      </div>
     </MainTemplate>
   );
 }