diff --git a/src/App.js b/src/App.js
index ed0bbf3..a839358 100644
--- a/src/App.js
+++ b/src/App.js
@@ -21,6 +21,7 @@ import Footer from "./components/Footer";
 
 import GuestSideLogin from "./pages/GuestSideLogin";
 import GuestSide from "./pages/GuestSide";
+import { getItemTypesWithItems } from "./helpers/itemHelper.js";
 
 import {
   // checkToken,
@@ -41,6 +42,7 @@ function App() {
   const [shopId, setShopId] = useState("");
   const [totalItemsCount, setTotalItemsCount] = useState(0);
   const [deviceType, setDeviceType] = useState("");
+  const [shopItems, setShopItems] = useState([]);
 
   useEffect(() => {
     // Function to calculate totals from localStorage
@@ -71,6 +73,36 @@ function App() {
     setShopId(param);
   };
 
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const { response, data } = await getItemTypesWithItems(shopId);
+        console.log(data);
+        if (response.status === 200) {
+          setShopItems(data);
+          console.log(data);
+          // setLoading(false);
+          socket.emit("join-room", { token: getLocalStorage("auth"), shopId });
+
+          socket.on("joined-room", (response) => {
+            // const { isSpotifyNeedLogin } = response;
+            // setNeedSpotifyLogin(isSpotifyNeedLogin);
+          });
+
+          socket.on("transaction_created", () => {
+            console.log("transaction created");
+          });
+        } else {
+          // setScreenMessage("Kafe tidak tersedia");
+        }
+      } catch (error) {
+        console.error("Error fetching shop items:", error);
+      }
+    }
+
+    if (shopId != "") fetchData();
+  }, [shopId]);
+
   const rmConnectedGuestSides = async (gueseSideSessionId) => {
     const sessionLeft = await removeConnectedGuestSides(gueseSideSessionId);
     setGuestSides(sessionLeft.guestSideList);
@@ -182,6 +214,7 @@ function App() {
               <>
                 <CafePage
                   sendParam={handleSetParam}
+                  shopItems={shopItems}
                   socket={socket}
                   user={user} // if logged
                   guestSides={guestSides} // if being clerk
@@ -202,6 +235,7 @@ function App() {
               <>
                 <SearchResult
                   user={user} // if logged
+                  shopItems={shopItems}
                   guestSides={guestSides} // if being clerk
                   guestSideOfClerk={guestSideOfClerk} // if being guest side
                   removeConnectedGuestSides={(e) => rmConnectedGuestSides(e)}
diff --git a/src/components/SearchInput.js b/src/components/SearchInput.js
index a09098e..b77757a 100644
--- a/src/components/SearchInput.js
+++ b/src/components/SearchInput.js
@@ -44,7 +44,7 @@ const SearchIcon = styled.svg`
   pointer-events: none;
 `;
 
-export default function SearchInput({ shopId, autofocus }) {
+export default function SearchInput({ shopId, autofocus, onSearchChange }) {
   const [songName, setSongName] = useState("");
   const [debouncedSongName, setDebouncedSongName] = useState("");
   const navigate = useNavigate();
@@ -78,6 +78,7 @@ export default function SearchInput({ shopId, autofocus }) {
           navigate(`/${shopId}`);
         }
       }
+      if (onSearchChange) onSearchChange(songName);
     }
   }, [songName]);
 
diff --git a/src/pages/CafePage.js b/src/pages/CafePage.js
index 7614342..bd5b6b6 100644
--- a/src/pages/CafePage.js
+++ b/src/pages/CafePage.js
@@ -21,6 +21,7 @@ import {
 
 function CafePage({
   sendParam,
+  shopItems,
   socket,
   user,
   guestSides,
@@ -36,8 +37,6 @@ function CafePage({
   const [loading, setLoading] = useState(true);
   const [screenMessage, setScreenMessage] = useState("");
 
-  const [shopItems, setShopItems] = useState([]);
-
   const [isSpotifyNeedLogin, setNeedSpotifyLogin] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
 
@@ -65,35 +64,8 @@ function CafePage({
   };
 
   useEffect(() => {
-    async function fetchData() {
-      try {
-        setLoading(true);
-        const { response, data } = await getItemTypesWithItems(shopId);
-        console.log(data);
-        if (response.status === 200) {
-          setShopItems(data);
-          setLoading(false);
-          socket.emit("join-room", { token: getLocalStorage("auth"), shopId });
-
-          socket.on("joined-room", (response) => {
-            const { isSpotifyNeedLogin } = response;
-            setNeedSpotifyLogin(isSpotifyNeedLogin);
-          });
-
-          socket.on("transaction_created", () => {
-            console.log("transaction created");
-          });
-        } else {
-          setScreenMessage("Kafe tidak tersedia");
-        }
-      } catch (error) {
-        console.error("Error fetching shop items:", error);
-        setLoading(false); // Ensure loading state is turned off on error
-      }
-    }
-
-    fetchData();
-  }, [shopId]);
+    setLoading(false);
+  }, [shopItems]);
 
   if (loading)
     return (
diff --git a/src/pages/SearchResult.js b/src/pages/SearchResult.js
index bc17114..ed61666 100644
--- a/src/pages/SearchResult.js
+++ b/src/pages/SearchResult.js
@@ -1,46 +1,53 @@
 // src/CafePage.js
-
-import React, { useState, useEffect } from "react";
-import { useParams, useSearchParams, useNavigate } from "react-router-dom";
+import React, { useState } from "react";
+import { useParams, useSearchParams } from "react-router-dom";
 
 import "../App.css";
 import SearchInput from "../components/SearchInput";
 import ItemLister from "../components/ItemLister";
 import Header from "../components/Header";
 
-import { ThreeDots } from "react-loader-spinner";
-
-import { getItemTypesWithItems } from "../helpers/itemHelper.js";
-import {
-  getLocalStorage,
-  updateLocalStorage,
-} from "../helpers/localStorageHelpers";
-
-function SearchResult({ user }) {
+function SearchResult({ user, shopItems }) {
   const [searchParams] = useSearchParams();
   const { shopId } = useParams();
+  const [searchValue, setSearchValue] = useState(
+    "dwadawa vvwqd21qb13 4kfawfdwa dhawldhawr dliawbdjawndlks",
+  );
 
-  const handleLogout = () => {
-    updateLocalStorage("auth", "");
+  // Function to handle search input change
+  const handleSearchChange = (value) => {
+    setSearchValue(value);
   };
 
+  const filteredItems = shopItems
+    .map((itemType) => {
+      // Filter items in the itemList based on searchValue
+      const filteredItemList = itemType.itemList.filter((item) =>
+        item.name.toLowerCase().includes(searchValue.toLowerCase()),
+      );
+
+      // Return itemType with only filtered items
+      return {
+        ...itemType,
+        itemList: filteredItemList,
+      };
+    })
+    .filter((itemType) => itemType.itemList.length > 0); // Only include itemTypes with matching items
+
+  console.log(filteredItems);
   return (
     <div className="App">
-      <body className="App-header">
+      <header className="App-header">
         <Header HeaderText={"Search"} shopId={shopId} user={user} />
         <div style={{ marginTop: "5px" }}></div>
-        <SearchInput shopId={shopId} autofocus={true} />
-        <div style={{ marginTop: "15px" }}></div>
-        {/* <ItemTypeLister user={user} shopId={shopId} itemTypes={shopItems} /> */}
-        <div style={{ marginTop: "-13px" }}></div>
-        {/* <MusicPlayer
-          socket={socket}
+        <SearchInput
           shopId={shopId}
-          user={user}
-          isSpotifyNeedLogin={isSpotifyNeedLogin}
+          autofocus={true}
+          onSearchChange={handleSearchChange}
         />
-        <div style={{ marginTop: "-15px" }}></div>
-        {shopItems.map((itemType) => (
+        <div style={{ marginTop: "15px" }}></div>
+        <div style={{ marginTop: "-13px" }}></div>
+        {filteredItems.map((itemType) => (
           <ItemLister
             shopId={shopId}
             user={user}
@@ -49,8 +56,8 @@ function SearchResult({ user }) {
             typeName={itemType.name}
             itemList={itemType.itemList}
           />
-        ))} */}
-      </body>
+        ))}
+      </header>
     </div>
   );
 }