diff --git a/apps/nowait-user/src/assets/icon/cancel.svg b/apps/nowait-user/src/assets/icon/cancel.svg
index b3dfb7df..2767b326 100644
--- a/apps/nowait-user/src/assets/icon/cancel.svg
+++ b/apps/nowait-user/src/assets/icon/cancel.svg
@@ -1,4 +1,4 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="18.3633" y="19.7773" width="20" height="2" rx="1" transform="rotate(-135 18.3633 19.7773)" fill="#16191E"/>
-<rect x="4.22266" y="18.3633" width="20" height="2" rx="1" transform="rotate(-45 4.22266 18.3633)" fill="#16191E"/>
+<rect x="18.3633" y="19.7773" width="20" height="2" rx="1" transform="rotate(-135 18.3633 19.7773)" fill="currentColor"/>
+<rect x="4.22266" y="18.3633" width="20" height="2" rx="1" transform="rotate(-45 4.22266 18.3633)" fill="currentColor"/>
 </svg>
diff --git a/apps/nowait-user/src/assets/icon/search.svg b/apps/nowait-user/src/assets/icon/search.svg
index adcd7125..0cae67f4 100644
--- a/apps/nowait-user/src/assets/icon/search.svg
+++ b/apps/nowait-user/src/assets/icon/search.svg
@@ -1,3 +1,3 @@
-<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1322 12.8127C10.9262 13.7646 9.40312 14.3327 7.7474 14.3327C3.83538 14.3327 0.664062 11.1614 0.664062 7.24935C0.664062 3.33733 3.83538 0.166016 7.7474 0.166016C11.6594 0.166016 14.8307 3.33733 14.8307 7.24935C14.8307 8.90507 14.2626 10.4281 13.3108 11.6342L17.0867 15.4101C17.4121 15.7355 17.4121 16.2632 17.0867 16.5886C16.7612 16.914 16.2336 16.914 15.9081 16.5886L12.1322 12.8127ZM13.1641 7.24935C13.1641 10.2409 10.7389 12.666 7.7474 12.666C4.75585 12.666 2.33073 10.2409 2.33073 7.24935C2.33073 4.25781 4.75585 1.83268 7.7474 1.83268C10.7389 1.83268 13.1641 4.25781 13.1641 7.24935Z" fill="#888888"/>
+<svg width="18" height="17" viewBox="0 0 18 17" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1322 12.8127C10.9262 13.7646 9.40312 14.3327 7.7474 14.3327C3.83538 14.3327 0.664062 11.1614 0.664062 7.24935C0.664062 3.33733 3.83538 0.166016 7.7474 0.166016C11.6594 0.166016 14.8307 3.33733 14.8307 7.24935C14.8307 8.90507 14.2626 10.4281 13.3108 11.6342L17.0867 15.4101C17.4121 15.7355 17.4121 16.2632 17.0867 16.5886C16.7612 16.914 16.2336 16.914 15.9081 16.5886L12.1322 12.8127ZM13.1641 7.24935C13.1641 10.2409 10.7389 12.666 7.7474 12.666C4.75585 12.666 2.33073 10.2409 2.33073 7.24935C2.33073 4.25781 4.75585 1.83268 7.7474 1.83268C10.7389 1.83268 13.1641 4.25781 13.1641 7.24935Z" fill="currentColor"/>
 </svg>
diff --git a/apps/nowait-user/src/components/Header.tsx b/apps/nowait-user/src/components/Header.tsx
index 1e9016d2..f05eb8b2 100644
--- a/apps/nowait-user/src/components/Header.tsx
+++ b/apps/nowait-user/src/components/Header.tsx
@@ -3,12 +3,14 @@ import { AnimatePresence, motion } from "framer-motion";
 import { useNavigate } from "react-router-dom";
 import Logo from "../assets/logo.svg?react";
 import Menu from "../assets/icon/menu.svg?react";
-import Search from "../assets/icon/search_black.svg?react";
+import Search from "../assets/icon/search.svg?react";
 import Cancel from "../assets/icon/cancel.svg?react";
 import Portal from "./common/modal/Portal";
+import SearchModal from "./common/modal/SearchModal";
 
 const HomeHeader = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
   const navigate = useNavigate();
 
   const toggleMenu = () => {
@@ -19,6 +21,14 @@ const HomeHeader = () => {
     setIsMenuOpen(false);
   };
 
+  const openSearch = () => {
+    setIsSearchOpen(true);
+  };
+
+  const closeSearch = () => {
+    setIsSearchOpen(false);
+  };
+
   const handleBookmarkClick = () => {
     closeMenu();
     navigate("/bookmark");
@@ -34,7 +44,7 @@ const HomeHeader = () => {
       <div className="flex justify-between items-center py-4">
         <Logo className="w-14.5 h-6" />
         <div className="flex flex-row gap-3">
-          <button onClick={() => {}} className="cursor-pointer">
+          <button onClick={openSearch} className="cursor-pointer">
             <Search className="icon-m" />
           </button>
           <button onClick={toggleMenu} className="cursor-pointer">
@@ -113,6 +123,9 @@ const HomeHeader = () => {
           )}
         </AnimatePresence>
       </Portal>
+
+      {/* 전체 화면 검색 모달 */}
+      <SearchModal isOpen={isSearchOpen} onClose={closeSearch} />
     </>
   );
 };
diff --git a/apps/nowait-user/src/components/common/modal/SearchModal.tsx b/apps/nowait-user/src/components/common/modal/SearchModal.tsx
new file mode 100644
index 00000000..e643069c
--- /dev/null
+++ b/apps/nowait-user/src/components/common/modal/SearchModal.tsx
@@ -0,0 +1,279 @@
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useNavigate } from "react-router-dom";
+import Portal from "./Portal";
+import Search from "../../../assets/icon/search.svg?react";
+import Cancel from "../../../assets/icon/cancel.svg?react";
+import UserApi from "../../../utils/UserApi";
+import type { SearchStore, SearchResponse } from "../../../types/search";
+
+interface SearchModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const SearchModal = ({ isOpen, onClose }: SearchModalProps) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchResults, setSearchResults] = useState<SearchStore[]>([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [recentSearches, setRecentSearches] = useState<string[]>([]);
+  const navigate = useNavigate();
+
+  // 최근 검색어 로드
+  useEffect(() => {
+    const savedSearches = localStorage.getItem("recentSearches");
+    if (savedSearches) {
+      try {
+        setRecentSearches(JSON.parse(savedSearches));
+      } catch (error) {
+        console.error("최근 검색어 로드 실패:", error);
+        setRecentSearches([]);
+      }
+    }
+  }, []);
+
+  // 최근 검색어 저장
+  const saveRecentSearch = (searchTerm: string) => {
+    const newSearches = [
+      searchTerm,
+      ...recentSearches.filter((item) => item !== searchTerm),
+    ].slice(0, 10);
+    setRecentSearches(newSearches);
+    localStorage.setItem("recentSearches", JSON.stringify(newSearches));
+  };
+
+  // 최근 검색어 삭제
+  const removeRecentSearch = (searchTerm: string) => {
+    const newSearches = recentSearches.filter((item) => item !== searchTerm);
+    setRecentSearches(newSearches);
+    localStorage.setItem("recentSearches", JSON.stringify(newSearches));
+  };
+
+  // 검색 API 호출 함수
+  const performSearch = async (query: string) => {
+    if (!query.trim()) {
+      setSearchResults([]);
+      return;
+    }
+
+    setIsSearching(true);
+    try {
+      const response = await UserApi.get<SearchResponse>(
+        `/v1/stores/search?keyword=${encodeURIComponent(query)}`
+      );
+      if (response.data.success) {
+        setSearchResults(response.data.response);
+      } else {
+        setSearchResults([]);
+      }
+    } catch (error) {
+      console.error("검색 실패:", error);
+      setSearchResults([]);
+    } finally {
+      setIsSearching(false);
+    }
+  };
+
+  // 디바운스 검색
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      performSearch(searchQuery);
+    }, 300);
+
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  // 모달이 닫힐 때 검색 상태 초기화
+  useEffect(() => {
+    if (!isOpen) {
+      setSearchQuery("");
+      setSearchResults([]);
+    }
+  }, [isOpen]);
+
+  // 검색 입력 핸들러
+  const handleSearchInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+  };
+
+  // 주점 클릭 핸들러 - 학과명을 최근 검색어에 저장하고 학과 페이지로 이동
+  const handleStoreClick = (store: SearchStore) => {
+    // 학과명을 최근 검색어에 저장
+    saveRecentSearch(store.departmentName);
+
+    // 학과별 주점 목록 페이지로 이동 (departmentId를 query parameter로 전달)
+    navigate(`/store/${store.departmentId}`);
+    onClose();
+  };
+
+  // 최근 검색어 클릭 핸들러
+  const handleRecentSearchClick = (searchTerm: string) => {
+    setSearchQuery(searchTerm);
+  };
+
+  // 검색 결과 아이템 컴포넌트
+  const SearchResultItem = ({ store }: { store: SearchStore }) => (
+    <div
+      className="flex flex-row py-3 gap-3 w-full min-w-0 items-center cursor-pointer"
+      onClick={() => handleStoreClick(store)}
+    >
+      <div className="rounded-full w-11 h-11 bg-gray-200 flex-shrink-0 overflow-hidden">
+        {store.profileImage ? (
+          <img
+            alt={`${store.name} 주점 이미지`}
+            src={store.profileImage}
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <div className="w-full h-full bg-gray-200" />
+        )}
+      </div>
+      <div className="flex flex-col flex-1 min-w-0">
+        <div className="flex flex-row gap-2 items-center min-w-0">
+          <div className="text-title-16-bold text-black-90 text-start truncate flex-shrink min-w-0">
+            {store.name}
+          </div>
+          <div className="flex-shrink-0">
+            {store.isActive ? (
+              <div className="px-1.5 py-1.25 rounded-md bg-[#FFEEDF]">
+                <div className="font-bold text-[10px] text-[#FF5E07]">
+                  영업중
+                </div>
+              </div>
+            ) : (
+              <div className="px-1.5 py-1.25 rounded-md bg-[#F7F7F7]">
+                <div className="font-bold text-[10px] text-[#AAAAAA]">
+                  오픈 전
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+        <div className="flex text-13-regular text-black-70 text-start">
+          {store.departmentName}
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <Portal>
+      <AnimatePresence>
+        {isOpen && (
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="fixed inset-0 z-50 bg-white px-5"
+          >
+            <div className="max-w-[430px] min-w-[360px] w-full h-full bg-white mx-auto">
+              {/* 검색 헤더 */}
+              <motion.div
+                initial={{ y: -20, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                exit={{ y: -20, opacity: 0 }}
+                transition={{ duration: 0.3 }}
+                className="flex items-center gap-4 pt-4 mb-10"
+              >
+                <div className="flex-1 relative">
+                  <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 icon-s text-black-60" />
+                  <input
+                    type="text"
+                    placeholder="주점명, 메뉴, 학과 검색"
+                    value={searchQuery}
+                    onChange={handleSearchInput}
+                    className="w-full h-12 pl-12 pr-4 bg-black-15 rounded-2xl text-16-regular text-black-60 placeholder:text-16-regular placeholder:text-black-50 focus:outline-none focus:border-primary"
+                    autoFocus
+                  />
+                </div>
+                <button
+                  onClick={onClose}
+                  className="text-16-medium text-black-70"
+                >
+                  닫기
+                </button>
+              </motion.div>
+
+              {/* 검색 내용 영역 */}
+              <motion.div
+                initial={{ y: 20, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                exit={{ y: 20, opacity: 0 }}
+                transition={{ duration: 0.3, delay: 0.1 }}
+                className="flex-1 overflow-y-auto"
+              >
+                {searchQuery.trim() ? (
+                  // 검색 결과 표시
+                  <div className="flex flex-col">
+                    <div className="flex text-16-bold leading-[144%] tracking-[-0.01em] text-black-90 mb-4">
+                      검색 결과{" "}
+                      {searchResults.length > 0 && `${searchResults.length}`}
+                    </div>
+                    {isSearching ? (
+                      <div className="flex justify-center items-center py-8">
+                        <div className="text-16-regular text-black-50">
+                          검색 중...
+                        </div>
+                      </div>
+                    ) : searchResults.length > 0 ? (
+                      <div className="flex flex-col">
+                        {searchResults.map((store) => (
+                          <SearchResultItem key={store.storeId} store={store} />
+                        ))}
+                      </div>
+                    ) : (
+                      <div className="flex flex-col items-center justify-center py-8">
+                        <div className="text-16-regular text-black-50 mb-2">
+                          검색 결과가 없습니다
+                        </div>
+                        <div className="text-14-regular text-black-40">
+                          다른 키워드로 검색해보세요
+                        </div>
+                      </div>
+                    )}
+                  </div>
+                ) : (
+                  // 최근 검색 표시
+                  <div className="flex flex-col gap-4">
+                    <div className="flex text-16-bold leading-[144%] tracking-[-0.01em] text-black-90">
+                      최근 검색
+                    </div>
+                    {recentSearches.length > 0 ? (
+                      recentSearches.map((searchTerm, index) => (
+                        <div
+                          key={index}
+                          className="flex flex-row justify-between"
+                        >
+                          <button
+                            className="flex text-16-regular text-black-90 cursor-pointer"
+                            onClick={() => handleRecentSearchClick(searchTerm)}
+                          >
+                            {searchTerm}
+                          </button>
+                          <div className="flex">
+                            <button
+                              className="flex"
+                              onClick={() => removeRecentSearch(searchTerm)}
+                            >
+                              <Cancel className="icon-xs text-black-60" />
+                            </button>
+                          </div>
+                        </div>
+                      ))
+                    ) : (
+                      <div className="flex text-14-regular text-black-50 py-4">
+                        최근 검색어가 없습니다
+                      </div>
+                    )}
+                  </div>
+                )}
+              </motion.div>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+    </Portal>
+  );
+};
+
+export default SearchModal;
diff --git a/apps/nowait-user/src/global.css b/apps/nowait-user/src/global.css
index 8c273798..cd22f186 100644
--- a/apps/nowait-user/src/global.css
+++ b/apps/nowait-user/src/global.css
@@ -103,6 +103,28 @@ body {
   }
 }
 
+@keyframes number-slide-up {
+  0% {
+    transform: translateY(40%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes number-slide-down {
+  0% {
+    transform: translateY(-40%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
 @keyframes slide-up-out {
   0% {
     transform: translateY(0);
@@ -145,6 +167,14 @@ body {
   animation: slide-down-out 0.3s ease-out forwards;
 }
 
+.animate-number-slide-up {
+  animation: number-slide-up 0.3s ease-out forwards;
+}
+
+.animate-number-slide-down {
+  animation: number-slide-down 0.3s ease-out forwards;
+}
+
 @media (prefers-reduced-motion: no-preference) {
   a:nth-of-type(2) .logo {
     animation: logo-spin infinite 20s linear;
@@ -202,7 +232,7 @@ body {
   max-width: 11.25rem;
   max-height: 17px;
   color: var(--navy-70);
-  background-color: #F2F6F9;
+  background-color: #f2f6f9;
   padding: unset !important;
   justify-content: center;
   text-align: center;
diff --git a/apps/nowait-user/src/pages/home/components/MyWaitingDetail.tsx b/apps/nowait-user/src/pages/home/components/MyWaitingDetail.tsx
index 23eb4f7a..855eadf7 100644
--- a/apps/nowait-user/src/pages/home/components/MyWaitingDetail.tsx
+++ b/apps/nowait-user/src/pages/home/components/MyWaitingDetail.tsx
@@ -19,13 +19,36 @@ const MyWaitingDetail = ({
 
   // 현재 활성 카드 인덱스 상태
   const [currentIndex, setCurrentIndex] = useState(0);
-  const [prevIndex, setPrevIndex] = useState(0);
+  const [scrollOffset, setScrollOffset] = useState(0);
+  const [animationKey, setAnimationKey] = useState(0);
   const [animationDirection, setAnimationDirection] = useState<
     "up" | "down" | null
   >(null);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [scrollOffset, setScrollOffset] = useState(0);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const prevIndexRef = useRef(0);
+
+  // 숫자 애니메이션 효과
+  useEffect(() => {
+    if (currentIndex !== prevIndexRef.current) {
+      // 슬라이드 방향 판단
+      const isRightSlide = currentIndex > prevIndexRef.current;
+
+      // 애니메이션 방향 설정
+      setAnimationDirection(isRightSlide ? "up" : "down");
+
+      // 강제 리렌더링을 위한 키 변경
+      setAnimationKey((prev) => prev + 1);
+
+      // 애니메이션 완료 후 방향 리셋
+      const timer = setTimeout(() => {
+        setAnimationDirection(null);
+      }, 300);
+
+      prevIndexRef.current = currentIndex;
+
+      return () => clearTimeout(timer);
+    }
+  }, [currentIndex]);
 
   // 스크롤 이벤트 핸들러
   useEffect(() => {
@@ -44,23 +67,7 @@ const MyWaitingDetail = ({
       setScrollOffset(offset);
 
       if (boundedIndex !== currentIndex) {
-        setPrevIndex(currentIndex);
-
-        // 애니메이션 방향 결정
-        if (boundedIndex > currentIndex) {
-          setAnimationDirection("up");
-        } else {
-          setAnimationDirection("down");
-        }
-
-        setIsAnimating(true);
         setCurrentIndex(boundedIndex);
-
-        // 애니메이션 완료 후 상태 초기화
-        setTimeout(() => {
-          setIsAnimating(false);
-          setAnimationDirection(null);
-        }, 300);
       }
     };
 
@@ -68,91 +75,6 @@ const MyWaitingDetail = ({
     return () => container.removeEventListener("scroll", handleScroll);
   }, [items.length, currentIndex]);
 
-  // 숫자 애니메이션 컴포넌트 (각 자릿수별 애니메이션)
-  const AnimatedDigits = ({
-    value,
-    prevValue,
-    direction,
-    isAnimating,
-  }: {
-    value: number;
-    prevValue: number;
-    direction: "up" | "down" | null;
-    isAnimating: boolean;
-  }) => {
-    // 숫자를 문자열로 변환 후 각 자릿수로 분리
-    const currentDigits = value.toString().split("").map(Number);
-    const prevDigits = prevValue.toString().split("").map(Number);
-
-    // 단일 자릿수 애니메이션 컴포넌트
-    const SingleDigit = ({
-      digit,
-      prevDigit,
-      digitIndex,
-      totalDigits,
-    }: {
-      digit: number;
-      prevDigit: number;
-      digitIndex: number;
-      totalDigits: number;
-    }) => {
-      // 오른쪽부터 애니메이션 (delay 계산: 일의자리가 먼저, 십의자리가 나중에)
-      const reverseIndex = totalDigits - 1 - digitIndex;
-      const animationDelay = reverseIndex * 100; // 100ms씩 지연
-
-      // 이 자릿수가 실제로 변경되었는지 확인
-      const isDigitChanged = digit !== prevDigit;
-      const shouldAnimate = isAnimating && isDigitChanged;
-
-      return (
-        <span className="relative inline-block overflow-hidden align-baseline text-22-bold min-w-[0.6em] text-center">
-          <span
-            className={`inline-block transition-transform duration-300 ease-out ${
-              !shouldAnimate
-                ? ""
-                : direction === "up"
-                ? "animate-slide-up"
-                : "animate-slide-down"
-            }`}
-            style={{
-              transitionDelay: shouldAnimate ? `${animationDelay}ms` : "0ms",
-            }}
-          >
-            {digit}
-          </span>
-          {shouldAnimate && (
-            <span
-              className={`absolute top-0 left-0 inline-block transition-transform duration-300 ease-out w-full text-center ${
-                direction === "up"
-                  ? "animate-slide-up-out"
-                  : "animate-slide-down-out"
-              }`}
-              style={{
-                transitionDelay: `${animationDelay}ms`,
-              }}
-            >
-              {prevDigit}
-            </span>
-          )}
-        </span>
-      );
-    };
-
-    return (
-      <span className="inline-flex items-baseline">
-        {currentDigits.map((digit, index) => (
-          <SingleDigit
-            key={index}
-            digit={digit}
-            prevDigit={prevDigits[index] || 0}
-            digitIndex={index}
-            totalDigits={currentDigits.length}
-          />
-        ))}
-      </span>
-    );
-  };
-
   return (
     <div className="fixed inset-0 z-50 bg-[#222] flex items-center justify-center">
       <div className="max-w-[430px] min-w-[360px] w-full h-full bg-white flex flex-col mx-auto">
@@ -176,12 +98,18 @@ const MyWaitingDetail = ({
             <div className="text-22-bold text-black-90 flex items-baseline justify-center gap-1">
               <span>내 앞 대기</span>
               <span className="text-primary flex items-baseline">
-                <AnimatedDigits
-                  value={items[currentIndex]?.waitingCount || 0}
-                  prevValue={items[prevIndex]?.waitingCount || 0}
-                  direction={animationDirection}
-                  isAnimating={isAnimating}
-                />
+                <span
+                  key={animationKey}
+                  className={`text-22-bold ${
+                    animationDirection === "up"
+                      ? "animate-number-slide-up"
+                      : animationDirection === "down"
+                      ? "animate-number-slide-down"
+                      : ""
+                  }`}
+                >
+                  {items[currentIndex]?.waitingCount || 0}
+                </span>
                 <span>팀</span>
               </span>
             </div>
diff --git a/apps/nowait-user/src/types/search.ts b/apps/nowait-user/src/types/search.ts
new file mode 100644
index 00000000..a05151a8
--- /dev/null
+++ b/apps/nowait-user/src/types/search.ts
@@ -0,0 +1,18 @@
+export interface SearchStore {
+  storeId: number;
+  departmentId: number;
+  departmentName: string;
+  name: string;
+  location: string;
+  description: string;
+  profileImage: string | null;
+  bannerImages: any[];
+  isActive: boolean;
+  deleted: boolean;
+  createdAt: string;
+}
+
+export interface SearchResponse {
+  success: boolean;
+  response: SearchStore[];
+}