diff --git a/src/app/directory/search/ClubSearch.tsx b/src/app/directory/search/ClubSearch.tsx
new file mode 100644
index 00000000..cf9a4073
--- /dev/null
+++ b/src/app/directory/search/ClubSearch.tsx
@@ -0,0 +1,35 @@
+'use client';
+import { api } from '@src/trpc/react';
+import type { SelectClub as Club } from '@src/server/db/models';
+import { type Session } from 'next-auth';
+import ClubCard from '@src/components/club/ClubCard';
+
+interface ClubSearchComponentProps {
+  userSearch: string;
+  session: Session | null;
+}
+
+export const ClubSearchComponent = ({
+  userSearch,
+  session,
+}: ClubSearchComponentProps) => {
+  const { data } = api.club.byNameNoLimit.useQuery(
+    { name: userSearch },
+    { enabled: !!userSearch },
+  );
+
+  if (!data) {
+    return <p />;
+  }
+  if (data.length === 0) {
+    return <p>No results found</p>;
+  }
+
+  return (
+    <div className="grid w-full auto-rows-fr grid-cols-[repeat(auto-fill,320px)] justify-center gap-16 pb-4">
+      {data.map((club: Club) => (
+        <ClubCard key={club.id} club={club} session={session} priority />
+      ))}
+    </div>
+  );
+};
diff --git a/src/app/directory/search/page.tsx b/src/app/directory/search/page.tsx
new file mode 100644
index 00000000..8542f9b8
--- /dev/null
+++ b/src/app/directory/search/page.tsx
@@ -0,0 +1,24 @@
+import Header from '@src/components/header/BaseHeader';
+import { ClubSearchComponent } from './ClubSearch';
+import { getServerAuthSession } from '@src/server/auth';
+
+type Params = {
+  searchParams: { [key: string]: string | undefined };
+};
+
+const clubSearch = async (props: Params) => {
+  const { searchParams } = props;
+  const userSearch = searchParams['search'] || '';
+  const session = await getServerAuthSession();
+
+  return (
+    <main className="md:pl-72">
+      <div>
+        <Header />
+        <ClubSearchComponent userSearch={userSearch} session={session} />
+      </div>
+    </main>
+  );
+};
+
+export default clubSearch;
diff --git a/src/components/searchBar/ClubSearchBar.tsx b/src/components/searchBar/ClubSearchBar.tsx
index 6e2ffa8d..8b02f613 100644
--- a/src/components/searchBar/ClubSearchBar.tsx
+++ b/src/components/searchBar/ClubSearchBar.tsx
@@ -23,9 +23,7 @@ export const ClubSearchBar = () => {
       onClick={onClickSearchResult}
       submitButton
       submitLogic={() => {
-        if (data && data[0]) {
-          onClickSearchResult(data[0]);
-        }
+        router.push(`/directory/search?search=${encodeURIComponent(search)}`);
       }}
     />
   );
diff --git a/src/server/api/routers/club.ts b/src/server/api/routers/club.ts
index ee13dbdb..4f9d6ef6 100644
--- a/src/server/api/routers/club.ts
+++ b/src/server/api/routers/club.ts
@@ -64,6 +64,17 @@ export const clubRouter = createTRPCRouter({
 
     return clubs.slice(0, 5);
   }),
+  byNameNoLimit: publicProcedure
+    .input(byNameSchema)
+    .query(async ({ input, ctx }) => {
+      const { name } = input;
+      const clubs = await ctx.db.query.club.findMany({
+        where: (club) =>
+          and(ilike(club.name, `%${name}%`), eq(club.approved, 'approved')),
+      });
+
+      return clubs;
+    }),
   byId: publicProcedure.input(byIdSchema).query(async ({ input, ctx }) => {
     const { id } = input;
     try {