diff --git a/package.json b/package.json
index 46e636c..0d5ca26 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.2",
-    "@tanstack/react-query": "^5.0.5",
+    "@tanstack/react-query": "^5.8.4",
+    "@tanstack/react-query-devtools": "^5.8.4",
     "axios": "^1.6.0",
     "bootstrap": "5.3.2",
     "firebase": "^10.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 88dcdf3..96abfd9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,11 @@ dependencies:
     specifier: ^3.3.2
     version: 3.3.2(react-hook-form@7.47.0)
   '@tanstack/react-query':
-    specifier: ^5.0.5
-    version: 5.0.5(react-dom@18.2.0)(react@18.2.0)
+    specifier: ^5.8.4
+    version: 5.8.4(react-dom@18.2.0)(react@18.2.0)
+  '@tanstack/react-query-devtools':
+    specifier: ^5.8.4
+    version: 5.8.4(@tanstack/react-query@5.8.4)(react-dom@18.2.0)(react@18.2.0)
   axios:
     specifier: ^1.6.0
     version: 1.6.0
@@ -1147,12 +1150,29 @@ packages:
     engines: {node: '>=14.0.0'}
     dev: false
 
-  /@tanstack/query-core@5.0.5:
-    resolution: {integrity: sha512-MThCETMkHDHTnFZHp71L+SqTtD5d6XHftFCVR1xRJdWM3qGrlQ2VCXaj0SKVcyJej2e1Opa2c7iknu1llxCDNQ==}
+  /@tanstack/query-core@5.8.3:
+    resolution: {integrity: sha512-SWFMFtcHfttLYif6pevnnMYnBvxKf3C+MHMH7bevyYfpXpTMsLB9O6nNGBdWSoPwnZRXFNyNeVZOw25Wmdasow==}
     dev: false
 
-  /@tanstack/react-query@5.0.5(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-ZG0Q4HZ0iuI8mWiZ2/MdVYPHbrmAVhMn7+gLOkxJh6zLIgCL4luSZlohzN5Xt4MjxfxxWioO1nemwpudaTsmQg==}
+  /@tanstack/query-devtools@5.8.4:
+    resolution: {integrity: sha512-F1dRbITNt9tMUoM9WCH8WQ2c54116hv52m/PKK8ZiN/pO2wGVzTZtKuLanF8pFpwmNchjIixcMw/a57HY5ivcw==}
+    dev: false
+
+  /@tanstack/react-query-devtools@5.8.4(@tanstack/react-query@5.8.4)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-mffs51FJqXU/5rwhbwv393DccL6et7uK2pRLwOcmMrWbPyW8vpxr9oidaghHX4cdVeP/7u5owW9yMpBhBAJfcQ==}
+    peerDependencies:
+      '@tanstack/react-query': ^5.8.4
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    dependencies:
+      '@tanstack/query-devtools': 5.8.4
+      '@tanstack/react-query': 5.8.4(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@tanstack/react-query@5.8.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-CD+AkXzg8J72JrE6ocmuBEJfGzEzu/bzkD6sFXFDDB5yji9N20JofXZlN6n0+CaPJuIi+e4YLCbGsyPFKkfNQA==}
     peerDependencies:
       react: ^18.0.0
       react-dom: ^18.0.0
@@ -1163,7 +1183,7 @@ packages:
       react-native:
         optional: true
     dependencies:
-      '@tanstack/query-core': 5.0.5
+      '@tanstack/query-core': 5.8.3
       react: 18.2.0
       react-dom: 18.2.0(react@18.2.0)
     dev: false
diff --git a/src/components/Navbar.component.tsx b/src/components/Navbar.component.tsx
index 6e205ac..5dbc74b 100644
--- a/src/components/Navbar.component.tsx
+++ b/src/components/Navbar.component.tsx
@@ -1,11 +1,30 @@
-import { FC } from 'react'
+import { FC, KeyboardEvent, useState } from 'react'
 
-import { Link } from 'react-router-dom'
+import { Link, useNavigate, useSearchParams } from 'react-router-dom'
 
 import NavLink from './NavLink.component'
 import UserOptions from './UserOptions.component'
 
+import { FiSearch } from 'react-icons/fi'
+
 const Navbar: FC = () => {
+  const [searchEventsParams] = useSearchParams()
+  const [searchQuery, setSearchQuery] = useState<string>(
+    searchEventsParams.get('q') ?? ''
+  )
+
+  const navigate = useNavigate()
+
+  const handleSearchPublicEvents = (event: KeyboardEvent<HTMLInputElement>) => {
+    const searchQuery = event.currentTarget.value
+    if (event.key === 'Enter' && searchQuery !== '') {
+      const searchParams = new URLSearchParams()
+      searchParams.append('q', searchQuery)
+
+      navigate('/search?' + searchParams)
+    }
+  }
+
   return (
     <nav className='navbar navbar-expand-lg navbar-dark bg-black'>
       <div className='container-md'>
@@ -13,21 +32,24 @@ const Navbar: FC = () => {
           Master Planner Event
         </Link>
 
-        {/* <div className='collapse navbar-collapse'>
-          <form>
-            <Input
-              register={}
-              placeholder='Search...'
-              adornment={() => <FiSearch />}
-              style={{ width: '300px' }}
+        <div className='collapse navbar-collapse'>
+          <div className='input-group w-75'>
+            <span className='input-group-text'>
+              <FiSearch />
+            </span>
+            <input
+              placeholder='Buscar...'
+              value={searchQuery}
+              onChange={e => setSearchQuery(e.currentTarget.value)}
+              className='form-control'
+              onKeyDown={handleSearchPublicEvents}
             />
-          </form>
-        </div> */}
+          </div>
+        </div>
 
         <div className='d-flex align-items-center gap-3'>
           <ul className='nav nav-underline d-flex'>
             <NavLink href='/'>Home</NavLink>
-            <NavLink href='/public-events'>Public events</NavLink>
             <NavLink href='/networks'>Networks</NavLink>
             <NavLink href='/notifications'>Notifications</NavLink>
           </ul>
diff --git a/src/components/SelectCategory.component.tsx b/src/components/SelectCategory.component.tsx
new file mode 100644
index 0000000..131e907
--- /dev/null
+++ b/src/components/SelectCategory.component.tsx
@@ -0,0 +1,46 @@
+import { ChangeEvent, FC } from 'react'
+
+import { useQuery } from '@tanstack/react-query'
+
+import { UseFormRegister } from 'react-hook-form'
+
+import { getAllCategories } from '../services/category.service'
+
+import Select from './Select.component'
+
+interface Props {
+  register: UseFormRegister<any>
+  onChange: (event: ChangeEvent<HTMLSelectElement>) => void
+}
+
+const SelectCategory: FC<Props> = ({ register, onChange }) => {
+  const { isLoading, data: categories } = useQuery({
+    queryKey: ['categories'],
+    queryFn: () => getAllCategories(),
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+  })
+
+  return (
+    <Select
+      id='selectCategory'
+      defaultOption='No selected'
+      name='category'
+      register={register}
+      isLoading={isLoading}
+      label='Category'
+      onChange={onChange}
+      options={() => (
+        <>
+          {categories?.data.map(category => (
+            <option key={category.id} value={category.name}>
+              {category.name}
+            </option>
+          ))}
+        </>
+      )}
+    />
+  )
+}
+
+export default SelectCategory
diff --git a/src/main.tsx b/src/main.tsx
index 4d0c09d..0388477 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -6,6 +6,7 @@ import { RouterProvider } from 'react-router-dom'
 import router from './router'
 
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
 import { AlertContextProvider } from './context/alert/AlertContextProvider'
 
@@ -20,6 +21,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
       <AlertContextProvider>
         <RouterProvider router={router} />
       </AlertContextProvider>
+      <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   </React.StrictMode>
 )
diff --git a/src/models/event.model.ts b/src/models/event.model.ts
index 2681e07..98c1913 100644
--- a/src/models/event.model.ts
+++ b/src/models/event.model.ts
@@ -108,3 +108,8 @@ export interface SearchEventsParticipatingParams {
   sortBy?: string
   category?: CategoryName
 }
+
+export interface SearchEventsParams {
+  searchQuery: string
+  category?: CategoryName
+}
diff --git a/src/pages/SearchEvents.page.tsx b/src/pages/SearchEvents.page.tsx
new file mode 100644
index 0000000..9ea0845
--- /dev/null
+++ b/src/pages/SearchEvents.page.tsx
@@ -0,0 +1,90 @@
+import { Link, useSearchParams } from 'react-router-dom'
+
+import { useQuery } from '@tanstack/react-query'
+
+import { useForm } from 'react-hook-form'
+
+import { SearchEventsParams } from '../models/event.model'
+
+import { searchEvents } from '../services/event.service'
+
+import EventCardSkeleton from '../components/skeleton/EventCardSkeleton.component'
+import EventCard from '../components/EventCard.component'
+import SelectCategory from '../components/SelectCategory.component'
+
+function SearchEvents() {
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const { handleSubmit, register, setValue } = useForm<SearchEventsParams>({
+    defaultValues: {
+      searchQuery: searchParams.get('q') ?? '',
+    },
+  })
+
+  const {
+    data: events,
+    isLoading: isLoadingEvents,
+    isRefetching,
+  } = useQuery({
+    queryKey: [
+      'search',
+      { q: searchParams.get('q'), category: searchParams.get('category') },
+    ],
+    queryFn: () => searchEvents(searchParams),
+    enabled: searchParams.get('q') !== null || searchParams.get('q') !== '',
+    refetchOnWindowFocus: false,
+  })
+
+  const handleSearchEvents = handleSubmit(data => {
+    const searchQuery = searchParams.get('q')
+    if (searchQuery !== null) {
+      if (data.category && data.category !== null) {
+        setSearchParams({ q: searchQuery, category: data.category })
+        return
+      }
+
+      setSearchParams({ q: searchQuery })
+    }
+  })
+
+  return (
+    <main className='d-flex mt-4 gap-3'>
+      <section className='d-flex flex-column gap-3' style={{ width: '65%' }}>
+        {isRefetching ? (
+          <div>Nada</div>
+        ) : isLoadingEvents || !events ? (
+          [...Array(3)].map(() => (
+            <EventCardSkeleton key={crypto.randomUUID()} width='100%' />
+          ))
+        ) : events.data.length > 0 ? (
+          events.data.map(event => (
+            <EventCard key={event.id} {...event} width='100%' />
+          ))
+        ) : (
+          <h5 className='text-center'>No events found</h5>
+        )}
+      </section>
+
+      <aside style={{ width: '35%' }}>
+        <div className='card mb-2'>
+          <form className='card-body'>
+            <h5 className='mb-1'>Filters</h5>
+            <SelectCategory
+              register={register}
+              onChange={event => {
+                setValue('category', event.currentTarget.value)
+                handleSearchEvents()
+              }}
+            />
+          </form>
+        </div>
+
+        <Link to='/create' className='btn btn-primary w-100'>
+          New Event
+        </Link>
+      </aside>
+    </main>
+  )
+}
+
+export default SearchEvents
diff --git a/src/router.tsx b/src/router.tsx
index d893019..81f3135 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -7,6 +7,7 @@ import Login from './pages/Login.page'
 import Register from './pages/Register.page'
 
 import Home from './pages/Home.page'
+import SearchEvents from './pages/SearchEvents.page'
 import CreateEvent from './pages/CreateEvent.page'
 import EventDetails from './pages/EventDetails.page'
 import UserProfile from './pages/UserProfile.page'
@@ -40,6 +41,10 @@ const router = createBrowserRouter([
         index: true,
         element: <Home />,
       },
+      {
+        path: '/search',
+        element: <SearchEvents />,
+      },
       {
         path: '/create',
         element: <CreateEvent />,
diff --git a/src/services/event.service.ts b/src/services/event.service.ts
index 3572e11..d94be3b 100644
--- a/src/services/event.service.ts
+++ b/src/services/event.service.ts
@@ -37,6 +37,19 @@ export const searchEventsParticipating = async (
     .then(response => response.data)
 }
 
+export const searchEvents = async (
+  params: URLSearchParams
+): Promise<ListResponse<EventItem>> => {
+  const accessToken = useAuthStore.getState().accessToken
+  return eventBaseEndpoint
+    .get<ListResponse<EventItem>>('/search?' + params.toString(), {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    })
+    .then(response => response.data)
+}
+
 export const getEventById = async (eventId: EventId): Promise<EventDetails> => {
   const accessToken = useAuthStore.getState().accessToken
   return eventBaseEndpoint