diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8c3e9ede..9099456f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -57,7 +57,7 @@ const Home = () => {
   const [deadline, setDeadline] = useState(false);
   const [stack, setStack] = useState("");
   const [position, setPosition] = useState("");
-  const [mode, setMode] = useState("");
+  const [mode, setMode] = useState("0");
   const { isAuth } = useAuthStore();
   const [isInitialRender, setIsInitialRender] = useState(true);
   const rankImageArray = [
@@ -210,7 +210,7 @@ const Home = () => {
   const setToInitialState = () => {
     setStack("");
     setPosition("");
-    setMode("");
+    setMode("0");
     setLike(false);
     setRecruit(true);
   };
@@ -294,6 +294,18 @@ const Home = () => {
     }
   }, []);
 
+  useEffect(() => {
+    const handleResize = () => {
+      setModalOpen(false);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
   const bannerDefaultStyle =
     "duration-1500 absolute left-0 top-0 flex h-250 md:h-300 lg:h-350 w-full justify-center transition-opacity";
   const bannerValidStyle = "opacity-100 transition-opacity ease-in";
@@ -708,102 +720,132 @@ const Home = () => {
           <Sheet.Container>
             <Sheet.Header />
             <Sheet.Content>
-              <div className="flex flex-wrap items-center justify-center gap-5">
-                <MultiSelector
-                  initialLabel={"기술 스택"}
-                  items={stacks.stacks.map((stack) => ({
-                    value: stack.id.toString(),
-                    label: stack.name,
-                  }))}
-                  onSelectedChange={(value) =>
-                    setStack(value.map((item) => item.label).join(","))
-                  }
-                  className="w-220"
-                />
-                <MultiSelector
-                  initialLabel={"모집 분야"}
-                  items={positions.positions.map((position) => ({
-                    value: position.name,
-                    label: position.name,
-                  }))}
-                  onSelectedChange={(value) =>
-                    setPosition(value.map((item) => item.label).join(","))
-                  }
-                  className="w-220"
-                />
-                <SingleSelector
-                  initialLabel={"진행 방식"}
-                  items={steadyRunningMethods}
-                  className="mb-8 h-43 w-220"
-                  onSelectedChange={(value) => setMode(value)}
-                />
-                <div
-                  className={`${
-                    like
-                      ? "border-5 border-st-yellow"
-                      : "border border-st-gray-100"
-                  } transition-border mb-8 flex h-43 w-150 items-center justify-center rounded-5 duration-100`}
-                >
-                  {isAuth && (
+              <div className="flex h-full flex-col justify-between">
+                <div className="flex flex-col items-center gap-5">
+                  <div className="flex flex-col justify-center gap-20">
+                    <div className="flex flex-col items-center justify-center gap-20 text-25 font-bold">
+                      기술 스택
+                      <MultiSelector
+                        initialLabel={"기술 스택"}
+                        items={stacks.stacks.map((stack) => ({
+                          value: stack.id.toString(),
+                          label: stack.name,
+                        }))}
+                        onSelectedChange={(value) =>
+                          setStack(value.map((item) => item.label).join(","))
+                        }
+                        className="w-300"
+                      />
+                    </div>
+                    <div className="flex flex-col items-center justify-center gap-20 text-25 font-bold">
+                      모집 분야
+                      <MultiSelector
+                        initialLabel={"모집 분야"}
+                        items={positions.positions.map((position) => ({
+                          value: position.name,
+                          label: position.name,
+                        }))}
+                        onSelectedChange={(value) =>
+                          setPosition(value.map((item) => item.label).join(","))
+                        }
+                        className="w-300"
+                      />
+                    </div>
+
+                    <div className="flex flex-col items-center justify-center gap-20 text-25 font-bold">
+                      진행 방식
+                      <div className="flex items-center justify-center gap-20 text-17">
+                        <div
+                          className={`${
+                            mode === "0" ? "" : "text-st-gray-100"
+                          } cursor-pointer`}
+                          onClick={() => setMode("0")}
+                        >
+                          전체
+                        </div>
+                        <div
+                          className={`${
+                            mode === "offline" ? "" : "text-st-gray-100"
+                          } cursor-pointer`}
+                          onClick={() => setMode("offline")}
+                        >
+                          오프라인
+                        </div>
+                        <div
+                          className={`${
+                            mode === "online" ? "" : "text-st-gray-100"
+                          } cursor-pointer`}
+                          onClick={() => setMode("online")}
+                        >
+                          온라인
+                        </div>
+                        <div
+                          className={`${
+                            mode === "both" ? "" : "text-st-gray-100"
+                          } cursor-pointer`}
+                          onClick={() => setMode("both")}
+                        >
+                          혼합
+                        </div>
+                      </div>
+                    </div>
+                    <div className="flex flex-col items-center justify-center gap-20 text-25 font-bold">
+                      모집 현황
+                      <div className="flex items-center justify-center gap-20">
+                        <div
+                          className={`${
+                            recruit
+                              ? "border-5 border-st-primary"
+                              : "border border-st-gray-100"
+                          } transition-border mb-8 flex h-43 w-100 items-center justify-center rounded-5 duration-100`}
+                        >
+                          <button
+                            className="h-full w-full text-15 font-bold"
+                            onClick={() => setRecruit(true)}
+                          >
+                            모집중
+                          </button>
+                        </div>
+                        <div
+                          className={`${
+                            !recruit
+                              ? "border-5 border-st-red"
+                              : "border border-st-gray-100"
+                          } transition-border mb-8 flex h-43 w-100 items-center justify-center rounded-5 duration-100`}
+                        >
+                          <button
+                            className="h-full w-full text-15 font-bold"
+                            onClick={() => setRecruit(false)}
+                          >
+                            전체
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div className="flex items-end justify-center gap-20 p-20">
+                  <div className="mb-8 flex h-43 w-200 items-center justify-center rounded-10 shadow-md">
                     <button
-                      className="h-full w-full font-bold"
-                      onClick={() => setLike(!like)}
+                      className="h-full w-full rounded-10 font-bold hover:bg-st-green hover:text-st-white"
+                      onClick={() => {
+                        setModalOpen(false);
+                      }}
                     >
-                      💛 내 좋아요
+                      필터 적용
                     </button>
-                  )}
-                  {!isAuth && (
-                    <AlertModal
-                      actionButton={
-                        <LoginModal
-                          trigger={
-                            <Button
-                              className={cn(
-                                `bg-st-primary ${buttonSize.sm} items-center justify-center text-st-white`,
-                              )}
-                            >
-                              로그인
-                            </Button>
-                          }
-                        />
-                      }
-                      trigger={
-                        <button
-                          onClick={() => setModalOpen(false)}
-                          className="h-full w-full font-bold"
-                        >
-                          💛 내 좋아요
-                        </button>
-                      }
+                  </div>
+                  <div className="mb-8 flex h-43 w-200 items-center justify-center rounded-10 shadow-md">
+                    <button
+                      className="h-full w-full rounded-10 font-bold hover:bg-st-red hover:text-st-white"
+                      onClick={() => {
+                        setToInitialState();
+                        setModalOpen(false);
+                      }}
                     >
-                      <div className="text-center text-18 font-bold">
-                        로그인이 필요한 기능입니다! <br />
-                        로그인 하시겠어요?
-                      </div>
-                    </AlertModal>
-                  )}
-                </div>
-                <div
-                  className={`${
-                    recruit
-                      ? "border-5 border-st-primary"
-                      : "border border-st-gray-100"
-                  } transition-border mb-8 flex h-43 w-100 items-center justify-center rounded-5 duration-100`}
-                >
-                  <button
-                    className="h-full w-full font-bold"
-                    onClick={() => setRecruit(!recruit)}
-                  >
-                    모집중
-                  </button>
-                </div>
-                <div className="mb-8 flex h-43 w-100 items-center justify-center rounded-5 border border-st-gray-100">
-                  <button
-                    className="h-full w-full font-bold"
-                    onClick={() => setToInitialState()}
-                  >
-                    초기화
-                  </button>
+                      초기화
+                    </button>
+                  </div>
                 </div>
               </div>
             </Sheet.Content>
diff --git a/src/constants/selectorItems.ts b/src/constants/selectorItems.ts
index b98f2452..17ef42d5 100644
--- a/src/constants/selectorItems.ts
+++ b/src/constants/selectorItems.ts
@@ -16,6 +16,7 @@ export const steadyParticipantsLimit = [
 ];
 
 export const steadyRunningMethods = [
+  { value: "0", label: "전체" },
   { value: "OFFLINE", label: "오프라인" },
   { value: "ONLINE", label: "온라인" },
   { value: "BOTH", label: "혼합" },
diff --git a/src/services/steady/getSteadies.ts b/src/services/steady/getSteadies.ts
index 37bc00f9..30c30c3f 100644
--- a/src/services/steady/getSteadies.ts
+++ b/src/services/steady/getSteadies.ts
@@ -19,7 +19,7 @@ const getSteadies = async (
       }${keyword !== "" ? `&keyword=${keyword}` : ""}${
         stack !== "" ? `&stack=${stack}` : ""
       }${position !== "" ? `&position=${position}` : ""}${
-        mode !== "" ? `&steadyMode=${mode}` : ""
+        mode !== "0" ? `&steadyMode=${mode}` : ""
       }${recruit ? `&status=RECRUITING` : ""}${
         deadline ? `&direction=asc&criteria=deadline` : ""
       }`,