diff --git a/src/components/NavigationBar/SearchBar/index.tsx b/src/components/NavigationBar/SearchBar/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..17e1e26e8b0f75459b82da154548a075d279a637
--- /dev/null
+++ b/src/components/NavigationBar/SearchBar/index.tsx
@@ -0,0 +1,77 @@
+import React, { useState } from "react";
+import ReactDOM from "react-dom";
+import { useLocation, useNavigate } from "react-router-dom";
+import { MagnifyingGlassIcon, ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/solid";
+
+const FilterMenu = () => {
+    return (
+        <div
+        className="relative bottom-[-55%]" 
+        id="filterMenuContainer">
+            <div className="rounded-xl absolute w-[60vw] h-fit -translate-x-[50%] bg-slate-300 py-4 px-2 text-left flex flex-col gap-2">
+                <h1 className="text-xl font-bold">Search Attribute</h1>
+                <div className="flex bg-slate-200 rounded-xl p-4">
+                    <form name="typeFilter" 
+                    className="text-black grow flex flex-col">
+                        <p>Type: </p>
+                        <div className="flex gap-1">
+                            <input
+                            type="radio" id="userFilter" name="typeFilter" value={"userFilter"}></input>
+                                <label 
+                                htmlFor="userFilter">User</label>
+                        </div>
+                        <div className="flex gap-1">
+                            <input  
+                            type="radio" id="productFilter" name="typeFilter" value={"productFilter"}></input>
+                                <label htmlFor="productFilter">Product</label>
+                        </div>
+                    </form>
+                    <form name="sortFilter" 
+                    className="text-black grow flex flex-col">
+                        <p>Sort: </p>
+                        <div className="flex gap-1">
+                            <input
+                            type="radio" id="ascendingFilter" name="sortFilter" value={"ascendingFilter"}></input>
+                                <label 
+                                htmlFor="ascendingFilter">Ascending</label>
+                        </div>
+                        <div className="flex gap-1">
+                            <input  
+                            type="radio" id="descendingFilter" name="sortFilter" value={"descendingFilter"}></input>
+                                <label htmlFor="descendingFilter">Descending</label>
+                        </div>
+                    </form>
+                </div>
+                <button className="btn-primary ml-auto bg-secondary rounded-xl px-4" type="submit" name="typeFilter">Set</button>
+            </div>
+        </div>
+    )
+}
+
+const SearchBar = () => {
+    const location = useLocation();
+    const navigate = useNavigate();
+    // if (location.pathname!="/catalog"){
+        //     navigate("/catalog");
+        // }
+    const [isFilterMenuVisible, setFilterMenuVisible] = useState(false);
+    function filterMenuToggle() {
+        setFilterMenuVisible(!isFilterMenuVisible);
+    }
+    return (
+        <div className="text-white gap-1 flex items-center">
+            <MagnifyingGlassIcon className="text-inherit inline h-6 w-6"/>
+            <input className="placeholder:italic bg-transparent placeholder:text-inherit inline grow" placeholder="Search..">
+            </input>
+            <div>
+                <button onClick={filterMenuToggle} 
+                className="btn-primary hover:bg-quinary rounded-full">
+                    {!isFilterMenuVisible && (<ChevronDownIcon className="h-6 w-6 text-inherit inline"/>) || (<ChevronUpIcon className="h-6 w-6 text-inherit inline"/>) }
+                </button>
+                {isFilterMenuVisible && (<FilterMenu />)}
+            </div>
+        </div>
+    )
+}
+
+export default SearchBar
\ No newline at end of file
diff --git a/src/components/NavigationBar/index.tsx b/src/components/NavigationBar/index.tsx
index cdd3fcfa826e0d14024a15873eab6969242c6439..bff462699f2f94a59604d371095ed2431672b06c 100644
--- a/src/components/NavigationBar/index.tsx
+++ b/src/components/NavigationBar/index.tsx
@@ -1,15 +1,19 @@
 import React, { useState } from "react";
 import ReactDOM from 'react-dom/client';
-import { Bars3Icon , ShoppingCartIcon, UserIcon, MagnifyingGlassIcon, BookOpenIcon} from '@heroicons/react/24/solid';
+import { Bars3Icon , ShoppingCartIcon, UserIcon, BookOpenIcon } from '@heroicons/react/24/solid';
 import logo from '../../assets/images/logo.svg';
 import '../../assets/styles/Button/Button.css'
 import { useLocation } from "react-router-dom";
+import SearchBar from "./SearchBar";
 
 const NavigationBar = () => {
     const location = useLocation();
     const NavbarExcludedPages = ["/login", "/register"]
     if (NavbarExcludedPages.indexOf(location.pathname) != -1) {
         return null;
+    }
+    function searchFilterMenu() {
+
     }
     return (
         <>
@@ -29,11 +33,7 @@ const NavigationBar = () => {
                     </a>
                 </div>
                 <div className="sm:grow max-w-sm bg-black/10 rounded-full text-center ml-auto sm:mx-auto btn-primary">
-                    <div className="text-white gap-1 flex">
-                        <MagnifyingGlassIcon className="text-inherit inline h-6 w-6"/>
-                        <input className="placeholder:italic bg-transparent placeholder:text-inherit inline grow" placeholder="Search..">
-                        </input>
-                    </div>
+                    <SearchBar />
                 </div>
                 <div className="sm:ml-auto btn-primary text-tertiary">
                     <a href="/catalog">
diff --git a/src/pages/CatalogPage/index.tsx b/src/pages/CatalogPage/index.tsx
index 177f1659944dc50624b6475ea097f9623001ebf4..ece3c0e19e3e296a469820f528ae0d23a2b4795c 100644
--- a/src/pages/CatalogPage/index.tsx
+++ b/src/pages/CatalogPage/index.tsx
@@ -14,7 +14,7 @@ const CatalogPage = () => {
             description : "no_description",
             price : 0,
             quantity : 0,
-            seller_username : "no_seller " + (index + 1)
+            seller_username : "seller_" + (index + 1)
         }
         dummyArr.push(elem);
     }