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..8263bce9 100644
--- a/apps/nowait-user/src/components/Header.tsx
+++ b/apps/nowait-user/src/components/Header.tsx
@@ -3,12 +3,13 @@ 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";
 
 const HomeHeader = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
   const navigate = useNavigate();
 
   const toggleMenu = () => {
@@ -19,6 +20,14 @@ const HomeHeader = () => {
     setIsMenuOpen(false);
   };
 
+  const openSearch = () => {
+    setIsSearchOpen(true);
+  };
+
+  const closeSearch = () => {
+    setIsSearchOpen(false);
+  };
+
   const handleBookmarkClick = () => {
     closeMenu();
     navigate("/bookmark");
@@ -34,7 +43,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 +122,92 @@ const HomeHeader = () => {
           )}
         </AnimatePresence>
       </Portal>
+
+      {/* 전체 화면 검색 모달 */}
+      <Portal>
+        <AnimatePresence>
+          {isSearchOpen && (
+            <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="주점명, 메뉴, 학과 검색"
+                      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={closeSearch}
+                    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"
+                >
+                  <div className="flex flex-col gap-4">
+                    <div className="flex text-16-bold leading-[144%] tracking-[-0.01em] text-black-90">
+                      최근 검색
+                    </div>
+                    <div className="flex flex-row justify-between">
+                      <div className="flex text-16-regular text-black-90">
+                        스페이시스
+                      </div>
+                      <div className="flex">
+                        <button className="flex">
+                          <Cancel className="icon-xs text-black-60" />
+                        </button>
+                      </div>
+                    </div>
+                    <div className="flex flex-row justify-between">
+                      <div className="flex text-16-regular text-black-90">
+                        스페이시스
+                      </div>
+                      <div className="flex">
+                        <button className="flex">
+                          <Cancel className="icon-xs text-black-60" />
+                        </button>
+                      </div>
+                    </div>
+                    <div className="flex flex-row justify-between">
+                      <div className="flex text-16-regular text-black-90">
+                        스페이시스
+                      </div>
+                      <div className="flex">
+                        <button className="flex">
+                          <Cancel className="icon-xs text-black-60" />
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </motion.div>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </Portal>
     </>
   );
 };