diff --git a/apps/hackathon/src/app/teams/browse/page.tsx b/apps/hackathon/src/app/teams/browse/page.tsx
index 8f38e24..f04c954 100644
--- a/apps/hackathon/src/app/teams/browse/page.tsx
+++ b/apps/hackathon/src/app/teams/browse/page.tsx
@@ -1,5 +1,5 @@
-import { FC, ReactElement, useState } from 'react';
-import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
+import { FC, ReactElement, useState, useEffect } from 'react';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
 import { Link, useNavigate } from 'react-router';
 import { useTeams, useJoinTeam, useMyTeams, ETeamVisibility, joinTeamSchema, TJoinTeamForm } from '@imphnen-frontend-service/service';
 import { useForm } from 'react-hook-form';
@@ -8,13 +8,22 @@ import { CitySelect } from '../../../components/city-select';
 
 const BrowseTeamsPage: FC = (): ReactElement => {
   const navigate = useNavigate();
-  const [search, setSearch] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [debouncedSearch, setDebouncedSearch] = useState('');
   const [selectedCity, setSelectedCity] = useState('');
   const [selectedTeamId, setSelectedTeamId] = useState<string | null>(null);
   const [showJoinModal, setShowJoinModal] = useState(false);
 
+  // Debounce search term
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(searchTerm);
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [searchTerm]);
+
   const { data: teamsData, isLoading } = useTeams({
-    search,
+    search: debouncedSearch,
     city: selectedCity || undefined,
     visibility: ETeamVisibility.PUBLIC,
   });
@@ -78,12 +87,12 @@ const BrowseTeamsPage: FC = (): ReactElement => {
               <label className="block text-sm font-medium text-gray-700 mb-2">
                 Search Teams
               </label>
-              <Input
+              <input
                 type="text"
                 placeholder="Search by team name..."
-                value={search}
-                onChange={(e) => setSearch(e.target.value)}
-                className="h-12"
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="w-full h-[42px] px-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
               />
             </div>
             <div>
diff --git a/apps/hackathon/src/components/city-select.tsx b/apps/hackathon/src/components/city-select.tsx
index 5af998a..a7dc901 100644
--- a/apps/hackathon/src/components/city-select.tsx
+++ b/apps/hackathon/src/components/city-select.tsx
@@ -70,7 +70,7 @@ export const CitySelect: FC<CitySelectProps> = ({
           }}
           onClick={handleInputClick}
           placeholder={placeholder}
-          className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
+          className={`w-full h-[42px] px-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
             error ? 'border-red-500' : 'border-gray-300'
           }`}
         />