diff --git a/src/app/events/search/page.tsx b/src/app/events/search/page.tsx
index e69de29b..238f02ae 100644
--- a/src/app/events/search/page.tsx
+++ b/src/app/events/search/page.tsx
@@ -0,0 +1,8 @@
+// app/search/page.tsx
+import SearchResults from '@src/components/SearchResults';
+
+const SearchPage = () => {
+  return <SearchResults />;
+};
+
+export default SearchPage;
\ No newline at end of file
diff --git a/src/components/SearchResults.tsx b/src/components/SearchResults.tsx
index e611065f..d3c14533 100644
--- a/src/components/SearchResults.tsx
+++ b/src/components/SearchResults.tsx
@@ -1,16 +1,27 @@
-import { api } from '@src/trpc/server';
-import EventCard from '@src/components/events/EventCard';
+import { useEffect, useState } from 'react';
 import { useSearchParams } from 'next/navigation';
+import EventCard from '@src/components/events/EventCard';
+import { api } from '@src/trpc/react';
 
-const SearchResults = async () => {
+const SearchResults = () => {
   const searchParams = useSearchParams();
   const query = searchParams.get('query') || '';
+  const [events, setEvents] = useState([]);
+
+  useEffect(() => {
+    const fetchEvents = async () => {
+      const { data } = await api.event.searchByName.useQuery({ name: query });
+      setEvents(data || []);
+    };
 
-  const { events } = await api.event.searchByName({ name: query });
+    if (query) {
+      fetchEvents();
+    }
+  }, [query]);
 
   return (
     <main className="pb-10 md:pl-72">
-      <h1 className="text-2xl font-bold">Search Results for "{query}"</h1>
+      <h1 className="text-2xl font-bold">Events</h1>
       <div className="flex flex-col space-y-4">
         {events.length > 0 ? (
           events.map((event) => <EventCard key={event.id} event={event} />)