diff --git a/daily-thought-frontend/src/components/navigation/NavBar.tsx b/daily-thought-frontend/src/components/navigation/NavBar.tsx
index aac83c013ebacfdbe5f32ce1264fcc16ba8e5fd9..37599979f8672bc50d7bf75af3d9d7a852edd0f3 100644
--- a/daily-thought-frontend/src/components/navigation/NavBar.tsx
+++ b/daily-thought-frontend/src/components/navigation/NavBar.tsx
@@ -5,12 +5,15 @@ import { UserCircleIcon, MagnifyingGlassIcon } from '@heroicons/react/24/solid'
 import { User } from '@/types/user'
 import NavMenu from './NavMenu'
 import BasicField from '../form/BasicField'
+import useDebounce from '@/hooks/useDebounce'
+import UserSearch from '../form/UserSearch'
 
 const navigation = [
   { name: 'My Feed', href: '/feed', current: true }
 ]
 const userNavigation = [
   { name: 'Your Profile', href: '/profile' },
+  { name: 'Search', href: '/search'},
   { name: 'Sign out', href: '/signOut' },
 ]
 
@@ -26,34 +29,7 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
   children,
   user
 }) =>  { 
-  const [searchQuery, setSearchQuery] = useState<string>("");
-  const [searchResults, setSearchResults] = useState([]);
 
-  const handleSearch = async (query: string) => {
-    setSearchQuery(query);
-
-    const JSONdata = JSON.stringify({query: query})
-    const endpoint = `${process.env.NEXT_PUBLIC_USER_SERVICE_URL}api/search`
-    const options = {
-      method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSONdata,
-    }
-    const response = await fetch(endpoint, options)
-    const result = await response.json()
-
-    if(result.error !== undefined){
-      setError(result.error.error)
-    } else {
-      if(result.token !== undefined && result.username !== undefined){
-        sessionStorage.setItem('username', result.username)
-        sessionStorage.setItem('token', result.token) 
-        Router.push("/feed")
-      } 
-    }
-  }
 
   return (
     <>
@@ -96,15 +72,7 @@ const NavBar: FC<PropsWithChildren<NavBarProps>> = ({
                       <div className="flex items-center">
 
                         <NavMenu icon={<MagnifyingGlassIcon className="h-6 w-6" aria-hidden="true"/>} width={"w-64"}>
-                          <BasicField name="search" placeholder="Search users" onChange={handleSearch}/>
-
-                          {!searchQuery &&
-                            <div className='flex items-center justify-center'>
-                              <p className='text-xs text-gray-500'>
-                                Enter a search query to add friends
-                              </p>
-                            </div>
-                          }
+                          <UserSearch />
                         </NavMenu>
 
                         <button