diff --git a/frontend/src/components/Home/BrowseHome/BrowseHome.jsx b/frontend/src/components/Home/BrowseHome/BrowseHome.jsx
index 65e6fc1..dcb13bb 100644
--- a/frontend/src/components/Home/BrowseHome/BrowseHome.jsx
+++ b/frontend/src/components/Home/BrowseHome/BrowseHome.jsx
@@ -24,7 +24,6 @@ const BrowseHome = () => {
     setShowFilter(value);
   };
 
-  console.log(showFilter)
   
   
 
diff --git a/frontend/src/pages/Anime.jsx b/frontend/src/pages/Anime.jsx
index e939838..9e1cd20 100644
--- a/frontend/src/pages/Anime.jsx
+++ b/frontend/src/pages/Anime.jsx
@@ -1,14 +1,42 @@
 
 import "../styles/FilterSearch.scoped.scss";
 
+
+
+
+import { useState } from 'react';
+
 import { FilterSearchAnime } from "../components/Anime/FilterSearchAnime";
 import { BrowseAniMan } from "../components/Browse/BrowseAniMan";
+import { Search } from "../components/Search";
 
 const Anime = () => {
+  
+  
+  const [showFilter, setShowFilter] = useState(false);
+
+  const handleShowFilterChange = (value) => {
+    setShowFilter(value);
+  };
+
+  
+
+  
   return (
     <>
       <div className="main">
+    
+
+      <div className="bg-blacky flex justify-center items-center ">
+          <Search  onShowFilterChange={handleShowFilterChange}/>
+      </div>
+    
+
+ {showFilter ? (
         <FilterSearchAnime />
+    
+     ) : null}   
+    
         <BrowseAniMan isanime={true} />
       </div>
     </>
diff --git a/frontend/src/pages/Explore.jsx b/frontend/src/pages/Explore.jsx
index 338cc76..3a05955 100644
--- a/frontend/src/pages/Explore.jsx
+++ b/frontend/src/pages/Explore.jsx
@@ -1,17 +1,37 @@
 import { Link } from "react-router-dom";
+import { useState } from 'react';
 
 import "../styles/FilterSearch.scoped.scss";
 import "../styles/Explore.scoped.scss";
 
 import { BrowseAniMan } from "../components/Browse/BrowseAniMan";
 import { FilterSearchExplore } from "../components/Explore/FilterSearchExplore";
+import { Search } from "../components/Search";
 
 const Explore = () => {
+  
+  const [showFilter, setShowFilter] = useState(false);
+
+  const handleShowFilterChange = (value) => {
+    setShowFilter(value);
+  };
+  
   return (
     <>
       <div className="main">
+    
+
+    
+
+      <div className="bg-blacky flex justify-center items-center ">
+          <Search  onShowFilterChange={handleShowFilterChange}/>
+      </div>
+
+ {showFilter ? (
         <FilterSearchExplore />
 
+     ) : null}   
+
         <div className="subtitle flex flex-row justify-between p-6 ">
           <h2>Trending Anime:</h2>
           <Link to="/anime">
diff --git a/frontend/src/pages/Manga.jsx b/frontend/src/pages/Manga.jsx
index 89b7b51..0ef3458 100644
--- a/frontend/src/pages/Manga.jsx
+++ b/frontend/src/pages/Manga.jsx
@@ -1,14 +1,38 @@
 
 import "../styles/FilterSearch.scoped.scss";
 
+import { useState } from 'react';
+
 import { FilterSearchManga } from "../components/Manga/FilterSearchManga";
 import { BrowseAniMan } from "../components/Browse/BrowseAniMan";
+import { Search } from "../components/Search";
+
 
 const Manga = () => {
+  
+  const [showFilter, setShowFilter] = useState(false);
+
+  const handleShowFilterChange = (value) => {
+    setShowFilter(value);
+  };
+  
   return (
     <>
       <div className="main">
+    
+
+      <div className="bg-blacky flex justify-center items-center ">
+          <Search  onShowFilterChange={handleShowFilterChange}/>
+      </div>
+    
+
+ {showFilter ? (
         <FilterSearchManga />
+   
+        
+     ) : null}   
+    
+    
         <BrowseAniMan isanime={false} />
       </div>
     </>