diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index 8f4f15ea..46a33bb2 100644
--- a/src/app/(home)/page.tsx
+++ b/src/app/(home)/page.tsx
@@ -47,58 +47,56 @@ export default function Home() {
   ];
 
   return (
-    <div className="flex min-h-screen min-w-[320px] flex-col">
-      <main className="flex-grow">
-        {/* 히어로 섹션 */}
-        <section className="bg-black text-black relative flex flex-col items-center py-10">
-          <div className="relative z-0 w-full max-w-[320px] text-center sm:max-w-[80%] lg:max-w-[964px]">
-            {/* 상자 내부의 텍스트와 버튼 */}
-            <h1 className="font-nexon-bold mb-2 mt-6 text-2xl leading-tight text-green-500 sm:text-3xl md:text-4xl lg:text-5xl lg:leading-relaxed">
-              WorkRoot
-            </h1>
-            <p className="font-nexon-regular mb-4 text-base leading-snug sm:text-lg md:text-xl lg:text-2xl lg:leading-relaxed">
-              한 곳에서 관리하는 알바 구인 플랫폼
-            </p>
-            {user ? (
-              <Link href="/albalist">
-                <p className="font-nexon-regular text-black inline-block rounded-lg bg-green-500 px-4 py-2 text-sm sm:px-6 sm:py-3 sm:text-base md:px-8 md:py-4 md:text-lg lg:px-10 lg:py-5 lg:text-xl">
-                  알바 둘러보기
-                </p>
-              </Link>
-            ) : (
-              <Link href="/login">
-                <p className="font-nexon-regular text-black inline-block rounded-lg bg-green-500 px-4 py-2 text-sm sm:px-6 sm:py-3 sm:text-base md:px-8 md:py-4 md:text-lg lg:px-10 lg:py-5 lg:text-xl">
-                  알바를 시작하기
-                </p>
-              </Link>
-            )}
-          </div>
+    <div className="flex min-w-[320px] flex-grow flex-col">
+      {/* 히어로 섹션 */}
+      <section className="bg-black text-black relative flex flex-col items-center py-10">
+        <div className="relative z-0 w-full max-w-[320px] text-center sm:max-w-[80%] lg:max-w-[964px]">
+          {/* 상자 내부의 텍스트와 버튼 */}
+          <h1 className="font-nexon-bold mb-2 mt-6 text-2xl leading-tight text-green-500 sm:text-3xl md:text-4xl lg:text-5xl lg:leading-relaxed">
+            WorkRoot
+          </h1>
+          <p className="font-nexon-regular mb-4 text-base leading-snug sm:text-lg md:text-xl lg:text-2xl lg:leading-relaxed">
+            한 곳에서 관리하는 알바 구인 플랫폼
+          </p>
+          {user ? (
+            <Link href="/albalist">
+              <p className="font-nexon-regular text-black inline-block rounded-lg bg-green-500 px-4 py-2 text-sm sm:px-6 sm:py-3 sm:text-base md:px-8 md:py-4 md:text-lg lg:px-10 lg:py-5 lg:text-xl">
+                알바 둘러보기
+              </p>
+            </Link>
+          ) : (
+            <Link href="/login">
+              <p className="font-nexon-regular text-black inline-block rounded-lg bg-green-500 px-4 py-2 text-sm sm:px-6 sm:py-3 sm:text-base md:px-8 md:py-4 md:text-lg lg:px-10 lg:py-5 lg:text-xl">
+                알바 시작하기
+              </p>
+            </Link>
+          )}
+        </div>
 
-          {/* 배경 이미지 */}
-          <div className="relative mt-8 aspect-[964/520] w-[320px] sm:w-[70vw] lg:w-[964px]">
-            <Image src="/images/01.png" alt="Hero Background" fill className="rounded-lg object-contain" priority />
-          </div>
-        </section>
+        {/* 배경 이미지 */}
+        <div className="relative mt-8 aspect-[964/520] w-[320px] sm:w-[70vw] lg:w-[964px]">
+          <Image src="/images/01.png" alt="Hero Background" fill className="rounded-lg object-contain" priority />
+        </div>
+      </section>
 
-        {/* UI 섹션 */}
-        <section className="py-8 md:py-16">
-          <div className="container mx-auto px-4">
-            <div className="flex flex-col gap-4 md:gap-6 md:py-10 lg:gap-10 lg:py-20">
-              {sections.map((section) => (
-                <div
-                  key={section.id}
-                  data-id={section.id}
-                  className={`relative flex h-[300px] w-full transform items-center justify-center rounded-lg opacity-0 transition-all duration-700 ease-in-out md:h-[400px] lg:h-[500px] ${
-                    visibleSections.has(section.id) ? "scale-100 opacity-100" : "scale-90"
-                  }`}
-                >
-                  <Image src={section.src} alt={section.alt} fill className="rounded-lg object-contain" />
-                </div>
-              ))}
-            </div>
+      {/* UI 섹션 */}
+      <section className="py-8 md:py-16">
+        <div className="container mx-auto px-4">
+          <div className="flex flex-col gap-4 md:gap-6 md:py-10 lg:gap-10 lg:py-20">
+            {sections.map((section) => (
+              <div
+                key={section.id}
+                data-id={section.id}
+                className={`relative flex h-[300px] w-full transform items-center justify-center rounded-lg opacity-0 transition-all duration-700 ease-in-out md:h-[400px] lg:h-[500px] ${
+                  visibleSections.has(section.id) ? "scale-100 opacity-100" : "scale-90"
+                }`}
+              >
+                <Image src={section.src} alt={section.alt} fill className="rounded-lg object-contain" />
+              </div>
+            ))}
           </div>
-        </section>
-      </main>
+        </div>
+      </section>
     </div>
   );
 }
diff --git a/src/app/(pages)/(albaform)/alba/[formId]/components/FormDetail.tsx b/src/app/(pages)/(albaform)/alba/[formId]/components/FormDetail.tsx
index 07a68fa8..10eac54a 100644
--- a/src/app/(pages)/(albaform)/alba/[formId]/components/FormDetail.tsx
+++ b/src/app/(pages)/(albaform)/alba/[formId]/components/FormDetail.tsx
@@ -27,7 +27,7 @@ export default function FormDetails({ albaFormDetailData }: FormDetailsProps) {
       </div>
       <div className="flex space-x-5 text-2xl">
         <p>{albaFormDetailData.location}</p>
-        <button className="text-xl text-primary-orange-300" onClick={handleCopyLocation}>
+        <button type="button" className="text-xl text-primary-orange-300" onClick={handleCopyLocation}>
           복사
         </button>
       </div>
diff --git a/src/app/(pages)/kakao-map/page.tsx b/src/app/(pages)/kakao-map/page.tsx
index 7e0d4108..3ee65863 100644
--- a/src/app/(pages)/kakao-map/page.tsx
+++ b/src/app/(pages)/kakao-map/page.tsx
@@ -73,10 +73,15 @@ const KakaoMapPage = () => {
           onChange={(e) => setAddress(e.target.value)}
           className="flex-1 border p-2"
         />
-        <button onClick={handleOpenPostcode} className="rounded bg-green-500 p-2 text-white hover:bg-green-600">
+        <button
+          type="button"
+          onClick={handleOpenPostcode}
+          className="rounded bg-green-500 p-2 text-white hover:bg-green-600"
+        >
           우편번호 찾기
         </button>
         <button
+          type="button"
           onClick={searchAddress}
           disabled={loading || !!error}
           className="rounded bg-blue-500 p-2 text-white hover:bg-blue-600 disabled:bg-gray-400"
diff --git a/src/app/(pages)/myAlbaform/(role)/owner/page.tsx b/src/app/(pages)/myAlbaform/(role)/owner/page.tsx
index 16529e55..da14e064 100644
--- a/src/app/(pages)/myAlbaform/(role)/owner/page.tsx
+++ b/src/app/(pages)/myAlbaform/(role)/owner/page.tsx
@@ -154,7 +154,7 @@ export default function AlbaList() {
       {/* 검색 섹션과 필터 드롭다운을 고정 위치로 설정 */}
       <div className="fixed left-0 right-0 top-16 z-40 bg-white shadow-sm">
         {/* 검색 섹션 */}
-        <div className="w-full border-b border-grayscale-100">
+        <div className="w-full border-b border-line-100">
           <div className="mx-auto flex max-w-screen-2xl flex-col gap-4 px-4 py-4 md:px-6 lg:px-8">
             <div className="flex items-center justify-between">
               <SearchSection />
@@ -163,7 +163,7 @@ export default function AlbaList() {
         </div>
 
         {/* 필터 드롭다운 섹션 */}
-        <div className="w-full border-b border-grayscale-100">
+        <div className="w-full border-b border-line-100">
           <div className="mx-auto flex max-w-screen-2xl items-center justify-between gap-2 px-4 py-4 md:px-6 lg:px-8">
             <div className="flex items-center gap-2">
               <FilterDropdown
diff --git a/src/app/(pages)/mypage/components/FilterBar/TabMenu.tsx b/src/app/(pages)/mypage/components/FilterBar/TabMenu.tsx
index 55c49764..96b61223 100644
--- a/src/app/(pages)/mypage/components/FilterBar/TabMenu.tsx
+++ b/src/app/(pages)/mypage/components/FilterBar/TabMenu.tsx
@@ -31,7 +31,7 @@ export default function TabMenu() {
   };
 
   return (
-    <div className="flex space-x-4 sm:space-x-8">
+    <div className="flex gap-4 lg:gap-8">
       {TABS.map((tab) => (
         <Link key={tab.value} href={`/mypage?${createQueryString(tab.value)}`} className={getLinkClassName(tab.value)}>
           {tab.name}
diff --git a/src/app/(pages)/mypage/components/FilterBar/index.tsx b/src/app/(pages)/mypage/components/FilterBar/index.tsx
index f8721764..87f66c0c 100644
--- a/src/app/(pages)/mypage/components/FilterBar/index.tsx
+++ b/src/app/(pages)/mypage/components/FilterBar/index.tsx
@@ -49,33 +49,29 @@ export default function FilterBar() {
   return (
     <div className="w-full bg-white">
       {/* 마이페이지 섹션 */}
-      <div className="border-b border-grayscale-200">
-        <div className="flex items-center justify-between">
-          <h1 className="text-grayscale-900 py-4 text-xl font-bold sm:py-6 sm:text-2xl">마이페이지</h1>
-          {/* sm, md에서는 케밥 메뉴, lg 이상에서는 버튼 */}
-          <div>
-            <div className="hidden lg:flex lg:gap-2">
-              <Button variant="solid" width="sm" onClick={handleEditProfile}>
-                내 정보 수정
-              </Button>
-              <Button variant="outlined" width="sm" onClick={handleChangePassword}>
-                비밀번호 변경
-              </Button>
-            </div>
-            <div className="lg:hidden">
-              <KebabDropdown options={dropdownOptions} />
-            </div>
+      <div className="flex items-center justify-between">
+        <h1 className="text-grayscale-900 py-4 text-xl font-bold sm:py-6 sm:text-2xl">마이페이지</h1>
+        {/* sm, md에서는 케밥 메뉴, lg 이상에서는 버튼 */}
+        <div>
+          <div className="hidden lg:flex lg:gap-2">
+            <Button variant="solid" width="sm" onClick={handleEditProfile}>
+              내 정보 수정
+            </Button>
+            <Button variant="outlined" width="sm" onClick={handleChangePassword}>
+              비밀번호 변경
+            </Button>
+          </div>
+          <div className="lg:hidden">
+            <KebabDropdown options={dropdownOptions} />
           </div>
         </div>
       </div>
 
       {/* 탭 메뉴 섹션 */}
-      <nav className="border-b border-grayscale-200">
-        <div className="mx-auto flex max-w-screen-2xl items-center justify-between px-4 py-4 md:px-6 lg:px-8">
+      <nav className="border-b border-line-100">
+        <div className="mx-auto flex max-w-screen-2xl items-center justify-between py-4">
           <TabMenu />
-          <div className="ml-auto">
-            <SortSection />
-          </div>
+          <SortSection />
         </div>
       </nav>
     </div>
diff --git a/src/app/(pages)/mypage/components/sections/ScrapsSection.tsx b/src/app/(pages)/mypage/components/sections/ScrapsSection.tsx
index 92ecb83f..f3bcceb2 100644
--- a/src/app/(pages)/mypage/components/sections/ScrapsSection.tsx
+++ b/src/app/(pages)/mypage/components/sections/ScrapsSection.tsx
@@ -129,8 +129,8 @@ export default function ScrapsSection() {
   return (
     <div className="space-y-4">
       {/* 필터 드롭다운 섹션 */}
-      <div className="w-full border-b border-grayscale-100">
-        <div className="mx-auto flex max-w-screen-2xl items-center justify-between gap-2 px-4 py-4 md:px-6 lg:px-8">
+      <div className="w-full border-b border-line-100">
+        <div className="mx-auto flex max-w-screen-2xl items-center justify-between gap-2 py-4">
           <div className="flex items-center gap-2">
             <FilterDropdown
               options={filterPublicOptions.map((option) => option.label)}
diff --git a/src/app/(pages)/mypage/layout.tsx b/src/app/(pages)/mypage/layout.tsx
index edb33e0a..0b47a0f7 100644
--- a/src/app/(pages)/mypage/layout.tsx
+++ b/src/app/(pages)/mypage/layout.tsx
@@ -8,13 +8,11 @@ interface MypageLayoutProps {
 
 export default function MypageLayout({ children }: MypageLayoutProps) {
   return (
-    <div className="flex min-h-screen flex-col">
-      <div className="mx-auto w-full min-w-[327px] px-6 md:max-w-[600px] lg:max-w-[1480px]">
-        <Suspense fallback={<LoadingSpinner />}>
-          <FilterBar />
-          {children}
-        </Suspense>
-      </div>
+    <div className="mx-auto flex w-full min-w-[327px] flex-col px-6 md:max-w-[600px] lg:max-w-[1480px]">
+      <Suspense fallback={<LoadingSpinner />}>
+        <FilterBar />
+        {children}
+      </Suspense>
     </div>
   );
 }
diff --git a/src/app/components/button/default/BookmarkBtn.tsx b/src/app/components/button/default/BookmarkBtn.tsx
new file mode 100644
index 00000000..20079c1a
--- /dev/null
+++ b/src/app/components/button/default/BookmarkBtn.tsx
@@ -0,0 +1,35 @@
+"use client";
+import React, { useState } from "react";
+import { FaBookmark, FaRegBookmark } from "react-icons/fa";
+import { cn } from "@/lib/tailwindUtil";
+
+interface BookmarkBtnProps {
+  className?: string;
+}
+
+const BookmarkBtn = ({ className = "" }: BookmarkBtnProps) => {
+  const [isBookmarked, setIsBookmarked] = useState(false);
+
+  const toggleBookmark = () => {
+    setIsBookmarked((prev) => !prev);
+  };
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "inline-flex h-12 w-12 items-center justify-center rounded-full bg-primary-orange-50 p-2 transition-colors",
+        className
+      )}
+      onClick={toggleBookmark}
+    >
+      {isBookmarked ? (
+        <FaBookmark className={cn("text-xl text-primary-orange-300")} />
+      ) : (
+        <FaRegBookmark className={cn("text-xl text-primary-orange-300")} />
+      )}
+    </button>
+  );
+};
+
+export default BookmarkBtn;
diff --git a/src/app/components/button/default/FloatingBtn.tsx b/src/app/components/button/default/FloatingBtn.tsx
index 8e549e2f..29f07307 100644
--- a/src/app/components/button/default/FloatingBtn.tsx
+++ b/src/app/components/button/default/FloatingBtn.tsx
@@ -18,7 +18,7 @@ const FloatingBtn = ({ variant = "orange", icon, children, className, ...props }
   const widthStyles = children ? "w-auto px-3" : "w-12";
 
   return (
-    <button className={cn(baseStyles, variants[variant], widthStyles, className)} {...props}>
+    <button type="button" className={cn(baseStyles, variants[variant], widthStyles, className)} {...props}>
       {icon && <span className="text-2xl">{icon}</span>}
       <span className={cn(children ? "ml-2" : "", "hidden sm:inline")}>{children}</span>
     </button>
diff --git a/src/app/components/button/default/RadioBtn.tsx b/src/app/components/button/default/RadioBtn.tsx
index a9149852..e02dc9d4 100644
--- a/src/app/components/button/default/RadioBtn.tsx
+++ b/src/app/components/button/default/RadioBtn.tsx
@@ -53,7 +53,7 @@ const RadioBtn = ({
   );
 
   const labelElement = label && (
-    <label htmlFor={props.id || value} className="cursor-pointer text-sm md:text-lg">
+    <label htmlFor={props.id || value} className="cursor-pointer text-sm lg:text-lg">
       {label}
     </label>
   );
@@ -62,7 +62,7 @@ const RadioBtn = ({
     <div
       onClick={handleClick}
       className={cn(
-        "flex w-full cursor-pointer items-center rounded-lg border border-grayscale-200 p-4 transition-colors md:p-6",
+        "flex w-full cursor-pointer items-center rounded-lg border border-grayscale-200 p-4 transition-colors lg:px-6 lg:py-[17px]",
         checked && "border-primary-orange-300 bg-primary-orange-50",
         !checked && "hover:border-grayscale-300 hover:bg-grayscale-50",
         position === positionOptions.POSITION_RIGHT ? "justify-between" : "gap-2",
diff --git a/src/app/components/button/dropdown/FilterDropdown.tsx b/src/app/components/button/dropdown/FilterDropdown.tsx
index 9ee8142d..28e723ce 100644
--- a/src/app/components/button/dropdown/FilterDropdown.tsx
+++ b/src/app/components/button/dropdown/FilterDropdown.tsx
@@ -57,31 +57,29 @@ const FilterDropdown = ({ options, className = "", onChange, initialValue, readO
         className
       )}
     >
-      <div>
-        <button
-          type="button"
+      <button
+        type="button"
+        className={cn(
+          "flex w-full items-center justify-between rounded-md border p-2 font-medium shadow-sm",
+          "text-grayscale-700 hover:bg-primary-orange-50",
+          selectedLabel === options[0]
+            ? "border border-grayscale-100 bg-white"
+            : "border-primary-orange-300 bg-primary-orange-50"
+        )}
+        onClick={toggleDropdown}
+        disabled={readOnly}
+      >
+        <span className={selectedLabel === options[0] ? "text-black-100" : "text-primary-orange-300"}>
+          {selectedLabel}
+        </span>
+        <IoIosArrowDown
           className={cn(
-            "flex w-full items-center justify-between rounded-md border p-2 font-medium shadow-sm",
-            "text-grayscale-700 hover:bg-primary-orange-50",
-            selectedLabel === options[0]
-              ? "border border-grayscale-100 bg-white"
-              : "border-primary-orange-300 bg-primary-orange-50"
+            "text-orange-400 transition-transform duration-200",
+            isOpen && "rotate-180",
+            selectedLabel === options[0] ? "text-grayscale-200" : "text-primary-orange-300"
           )}
-          onClick={toggleDropdown}
-          disabled={readOnly}
-        >
-          <span className={selectedLabel === options[0] ? "text-black-100" : "text-primary-orange-300"}>
-            {selectedLabel}
-          </span>
-          <IoIosArrowDown
-            className={cn(
-              "text-orange-400 transition-transform duration-200",
-              isOpen && "rotate-180",
-              selectedLabel === options[0] ? "text-grayscale-200" : "text-primary-orange-300"
-            )}
-          />
-        </button>
-      </div>
+        />
+      </button>
 
       {isOpen && !readOnly && (
         <DropdownList
diff --git a/src/app/components/button/dropdown/KebabDropdown.tsx b/src/app/components/button/dropdown/KebabDropdown.tsx
index a7fbe2d7..01b24fe1 100644
--- a/src/app/components/button/dropdown/KebabDropdown.tsx
+++ b/src/app/components/button/dropdown/KebabDropdown.tsx
@@ -28,6 +28,7 @@ const KebabDropdown = ({ options, className = "" }: KebabDropdownProps) => {
   return (
     <div ref={dropdownRef} className={cn("relative inline-block text-left", className)}>
       <button
+        type="button"
         onClick={() => setIsOpen(!isOpen)}
         className="rounded-full p-2 hover:bg-grayscale-50"
         aria-label="메뉴 더보기"
@@ -40,6 +41,7 @@ const KebabDropdown = ({ options, className = "" }: KebabDropdownProps) => {
           <div className="py-1">
             {options.map((option, index) => (
               <button
+                type="button"
                 key={`${index}-${option.label}`}
                 onClick={() => {
                   option.onClick();
diff --git a/src/app/components/card/board/CommentDetail.tsx b/src/app/components/card/board/CommentDetail.tsx
new file mode 100644
index 00000000..2b311299
--- /dev/null
+++ b/src/app/components/card/board/CommentDetail.tsx
@@ -0,0 +1,146 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+import Image from "next/image";
+import BaseTextArea from "@/app/components/input/textarea/BaseTextArea";
+import Button from "@/app/components/button/default/Button";
+
+export interface CommentDetailProps {
+  id: number;
+  userName: string;
+  userImageUrl?: string;
+  date: string;
+  comment: string;
+  isAuthor: boolean;
+  onEdit: (id: number, newContent: string) => void;
+  onDelete: (id: number) => void;
+}
+
+const CommentDetail: React.FC<CommentDetailProps> = ({
+  id,
+  userName,
+  userImageUrl,
+  date,
+  comment,
+  isAuthor,
+  onEdit,
+  onDelete,
+}) => {
+  const [showOptions, setShowOptions] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [editedComment, setEditedComment] = useState(comment);
+  const [imageError, setImageError] = useState(false);
+  const optionsRef = useRef<HTMLDivElement>(null);
+
+  const handleEdit = () => {
+    onEdit(id, editedComment);
+    setIsEditing(false);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (optionsRef.current && !optionsRef.current.contains(event.target as Node)) {
+        setShowOptions(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+
+  return (
+    <div className="relative flex h-auto min-h-[128px] w-full flex-col border border-line-200 p-4 sm:min-h-[122px] lg:min-h-[148px]">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-1">
+          {imageError || !userImageUrl ? (
+            <div className="relative h-6 w-6 rounded-full bg-gray-300">
+              <span className="absolute inset-0 flex items-center justify-center text-xs text-gray-600">
+                {userName?.[0]?.toUpperCase() || "?"}
+              </span>
+            </div>
+          ) : (
+            <Image
+              src={userImageUrl}
+              alt={`${userName || "User"}'s profile`}
+              width={24}
+              height={24}
+              className="rounded-full"
+              onError={() => setImageError(true)}
+            />
+          )}
+          <div className="flex items-center gap-1 truncate">
+            <span className="truncate font-nexon text-xs text-grayscale-500 sm:text-sm lg:text-base">
+              {userName || "Anonymous"}
+            </span>
+            <span className="mx-1 text-grayscale-500"> | </span>
+            <span className="font-nexon text-xs text-grayscale-500 sm:text-sm lg:text-base">{date}</span>
+          </div>
+        </div>
+
+        {isAuthor && (
+          <div className="relative" ref={optionsRef}>
+            <button
+              type="button"
+              onClick={() => setShowOptions(!showOptions)}
+              className="text-grayscale-500"
+              aria-label="Options"
+            >
+              <Image src="/icons/menu/kebab-menu-md.svg" alt="Menu" width={28} height={28} />
+            </button>
+            {showOptions && (
+              <div className="absolute right-0 mt-2 w-[80px] rounded-lg bg-white shadow-lg sm:w-[132px] lg:w-[132px]">
+                <div className="flex h-[68px] flex-col justify-center gap-2 p-2 sm:h-[104px] lg:h-[104px]">
+                  <button
+                    onClick={() => {
+                      setIsEditing(true);
+                      setShowOptions(false);
+                    }}
+                    className="rounded-md bg-grayscale-50 p-2 text-xs text-grayscale-400 hover:bg-orange-50 hover:text-black-400 sm:text-sm"
+                  >
+                    수정하기
+                  </button>
+                  <button
+                    onClick={() => {
+                      if (confirm("정말로 삭제하시겠습니까?")) {
+                        onDelete(id);
+                      }
+                      setShowOptions(false);
+                    }}
+                    className="rounded-md bg-grayscale-50 p-2 text-xs text-grayscale-400 hover:bg-orange-50 hover:text-black-400 sm:text-sm"
+                  >
+                    삭제하기
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {isEditing ? (
+        <div className="mt-4">
+          <BaseTextArea
+            name="editComment"
+            variant="white"
+            placeholder="댓글을 수정해주세요."
+            value={editedComment}
+            onChange={(e) => setEditedComment(e.target.value)}
+            size="w-full h-[132px] sm:h-[132px] lg:h-[160px]"
+          />
+          <div className="mt-2 flex justify-end space-x-2">
+            <Button onClick={handleEdit}>저장</Button>
+            <Button onClick={() => setIsEditing(false)} variant="outlined">
+              취소
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div className="mt-4 w-full overflow-hidden text-xs leading-normal sm:text-sm lg:text-base">
+          <p className="font-nexon text-black-400">{comment}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CommentDetail;
diff --git a/src/app/components/card/cardList/AlbaListItem.tsx b/src/app/components/card/cardList/AlbaListItem.tsx
index 7a90c78e..f35d8ad4 100644
--- a/src/app/components/card/cardList/AlbaListItem.tsx
+++ b/src/app/components/card/cardList/AlbaListItem.tsx
@@ -178,7 +178,11 @@ const AlbaListItem = ({
             </div>
             {/* 케밥 메뉴 */}
             <div ref={dropdownRef} className="relative">
-              <button className="hover:text-grayscale-700 text-grayscale-500" onClick={handleDropdownToggle}>
+              <button
+                type="button"
+                className="hover:text-grayscale-700 text-grayscale-500"
+                onClick={handleDropdownToggle}
+              >
                 <BsThreeDotsVertical className="h-6 w-6" />
               </button>
               {/* 드롭다운 메뉴 */}
diff --git a/src/app/components/card/cardList/ApplicationStatusCard.tsx b/src/app/components/card/cardList/ApplicationStatusCard.tsx
index 846694fb..92f63b1d 100644
--- a/src/app/components/card/cardList/ApplicationStatusCard.tsx
+++ b/src/app/components/card/cardList/ApplicationStatusCard.tsx
@@ -24,13 +24,13 @@ const ApplicationStatusCard = ({ applicationStatusData }: ApplicationStatusCardP
           <span className={theadStyle}>전화번호</span>
           <div className="flex items-center gap-2">
             <span className={theadStyle}>경력</span>
-            <button onClick={() => setExperienceSort((prev) => !prev)}>
+            <button type="button" onClick={() => setExperienceSort((prev) => !prev)}>
               <FaSortAmountDown className={cn(sortIconStyle, experienceSort ? "rotate-0" : "rotate-180")} />
             </button>
           </div>
           <div className="flex items-center gap-2">
             <span className={theadStyle}>상태</span>
-            <button onClick={() => setStatusSort((prev) => !prev)}>
+            <button type="button" onClick={() => setStatusSort((prev) => !prev)}>
               <FaSortAmountDown className={cn(sortIconStyle, statusSort ? "rotate-0" : "rotate-180")} />
             </button>
           </div>
diff --git a/src/app/components/card/cardList/MyApplicationListItem.tsx b/src/app/components/card/cardList/MyApplicationListItem.tsx
index b6a63d0d..f95cb507 100644
--- a/src/app/components/card/cardList/MyApplicationListItem.tsx
+++ b/src/app/components/card/cardList/MyApplicationListItem.tsx
@@ -80,6 +80,7 @@ const MyApplicationListItem = ({ id, createdAt, status, resumeId, resumeName, fo
             <span>{formatLocalDate(createdAt, true)}</span>
           </div>
           <button
+            type="button"
             onClick={handleResumeDownload}
             className="decoration-grayscale-600/50 hover:text-grayscale-600 hover:decoration-grayscale-600 text-sm font-medium text-grayscale-500 underline decoration-1 underline-offset-4 hover:cursor-pointer md:text-base"
           >
diff --git a/src/app/components/card/cardList/ScrapListItem.tsx b/src/app/components/card/cardList/ScrapListItem.tsx
index f118b81d..04cefb10 100644
--- a/src/app/components/card/cardList/ScrapListItem.tsx
+++ b/src/app/components/card/cardList/ScrapListItem.tsx
@@ -143,6 +143,7 @@ const ScrapListItem = ({
             {/* 케밥 메뉴 */}
             <div ref={dropdownRef} className="relative">
               <button
+                type="button"
                 className="hover:text-grayscale-700 text-grayscale-500"
                 onClick={() => setShowDropdown(!showDropdown)}
               >
diff --git a/src/app/components/input/dateTimeDaypicker/DatePickerHeader.tsx b/src/app/components/input/dateTimeDaypicker/DatePickerHeader.tsx
index 04b2fc37..01b5bd34 100644
--- a/src/app/components/input/dateTimeDaypicker/DatePickerHeader.tsx
+++ b/src/app/components/input/dateTimeDaypicker/DatePickerHeader.tsx
@@ -22,13 +22,13 @@ const DatePickerHeader = ({
         기간 선택
       </div>
       <div className="lg:h-15 mb-2 flex h-12 items-center justify-between px-[14px] py-3">
-        <button onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
+        <button type="button" onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
           <MdKeyboardArrowLeft className={iconStyle} />
         </button>
         <span className="text-base font-semibold leading-[26px] text-black-400 lg:text-[20px] lg:leading-8">
           {`${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, "0")}`}
         </span>
-        <button onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
+        <button type="button" onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
           <MdKeyboardArrowRight className={iconStyle} />
         </button>
       </div>
diff --git a/src/app/components/input/dateTimeDaypicker/DayPickerBtn.tsx b/src/app/components/input/dateTimeDaypicker/DayPickerBtn.tsx
index 554b8774..92cb5891 100644
--- a/src/app/components/input/dateTimeDaypicker/DayPickerBtn.tsx
+++ b/src/app/components/input/dateTimeDaypicker/DayPickerBtn.tsx
@@ -28,6 +28,7 @@ const DayPickerBtn = ({
   return (
     <div>
       <button
+        type="button"
         onClick={handleClick}
         disabled={disabled}
         className={cn(
diff --git a/src/app/components/layout/Header.tsx b/src/app/components/layout/Header.tsx
index 11d09959..631d346c 100644
--- a/src/app/components/layout/Header.tsx
+++ b/src/app/components/layout/Header.tsx
@@ -30,123 +30,135 @@ export default function Header() {
     return cn(
       "font-medium transition-colors h-16 flex items-center",
       "hover:text-lime-900",
-      isActive ? "text-lime-900 text-sm sm:text-base md:text-lg md:font-bold" : "text-lime-700 text-sm sm:text-base"
+      isActive ? "text-lime-900 text-sm md:text-base lg:text-lg lg:font-bold" : "text-lime-700 text-sm md:text-base"
     );
   };
-
+  const headerStyle =
+    "fixed left-0 right-0 top-0 z-40 border-b border-b-line-100 bg-lime-100 -tracking-widest md:tracking-normal";
+  const navStyle =
+    "mx-auto flex h-16 min-w-[327px] items-center justify-between px-6 md:max-w-[600px] lg:max-w-[1480px]";
+  const menuStyle = "ml-4 flex h-16 items-center gap-4 md:ml-8 md:gap-6 lg:ml-[46px]";
+  const buttonStyle = "rounded-lg border-2 px-2 py-1 text-sm md:px-3 md:py-1.5 md:text-base lg:px-4 lg:py-2";
+  const skeletonStyle = "w-16 animate-pulse bg-lime-200";
   // 로딩 시간이 1초 이상일 때만 스켈레톤 UI 표시
   if (isLoading) {
     return (
-      <header className="fixed left-0 right-0 top-0 z-50 bg-lime-100 -tracking-widest md:tracking-normal">
-        <div className="container mx-auto px-4">
-          <nav className="flex h-16 items-center justify-between">
-            {/* 로고와 메인 네비게이션 */}
-            <div className="flex items-center">
-              {/* 로고 스켈레톤 - 이미지로 대체*/}
-              <Image
-                src="/logo.svg"
-                alt="Work Root Logo"
-                width={200}
-                height={60}
-                className="w-32 hover:opacity-90 sm:w-40 md:w-[200px]"
-              />
+      <header className={headerStyle}>
+        <nav className={navStyle}>
+          {/* 로고와 메인 네비게이션 */}
+          <div className="flex items-center">
+            {/* 로고 스켈레톤 - 이미지로 대체*/}
+            <Image
+              src="/logo.svg"
+              alt="Work Root Logo"
+              width={200}
+              height={60}
+              className="w-32 hover:opacity-90 sm:w-40 md:w-[200px]"
+            />
 
-              {/* 메뉴 스켈레톤 - 실제 메뉴와 동일한 위치에 배치 */}
-              <div className="ml-4 flex h-16 items-center space-x-2 sm:ml-6 sm:space-x-4 md:ml-10 md:space-x-6">
-                <div className="h-6 w-16 animate-pulse bg-lime-200" />
-                <div className="h-6 w-16 animate-pulse bg-lime-200" />
-              </div>
+            {/* 메뉴 스켈레톤 - 실제 메뉴와 동일한 위치에 배치 */}
+            <div className={menuStyle}>
+              <div className={cn("h-6", skeletonStyle)} />
+              <div className={cn("h-6", skeletonStyle)} />
             </div>
+          </div>
 
-            {/* 로그인/회원가입 버튼 스켈레톤 */}
-            <div className="flex items-center space-x-2 sm:space-x-4">
-              <div className="h-8 w-16 animate-pulse bg-lime-200" />
-              <div className="h-8 w-16 animate-pulse bg-lime-200" />
-            </div>
-          </nav>
-        </div>
+          {/* 로그인/회원가입 버튼 스켈레톤 */}
+          <div className="flex items-center gap-2 lg:gap-4">
+            <div className={cn("h-8", skeletonStyle)} />
+            <div className={cn("h-8", skeletonStyle)} />
+          </div>
+        </nav>
       </header>
     );
   }
 
   return (
-    <header className="fixed left-0 right-0 top-0 z-50 bg-lime-100 -tracking-widest md:tracking-normal">
-      <div className="container mx-auto px-4">
-        <nav className="flex h-16 items-center justify-between">
-          {/* 로고와 메인 네비게이션 */}
-          <div className="flex items-center">
-            <Link href="/" className="text-xl text-white hover:text-blue-100">
-              <Image
-                src="/logo.svg"
-                alt="Work Root Logo"
-                width={200}
-                height={60}
-                className="w-32 hover:opacity-90 sm:w-40 md:w-[200px]"
-              />
-            </Link>
+    <header className={headerStyle}>
+      <nav className={navStyle}>
+        {/* 로고와 메인 네비게이션 */}
+        <div className="flex items-center">
+          <Link href="/" className="text-xl text-white hover:text-blue-100">
+            <Image
+              src="/logo.svg"
+              alt="WorkRoot"
+              width={200}
+              height={60}
+              className="w-32 hover:opacity-90 md:w-[200px]"
+            />
+          </Link>
 
-            <div className="ml-4 flex h-16 space-x-2 sm:ml-6 sm:space-x-4 md:ml-10 md:space-x-6">
-              <Link href="/albalist" className={getLinkClassName("/albalist")}>
-                알바 목록
-              </Link>
-              <Link href="/albatalk" className={getLinkClassName("/albatalk")}>
-                알바 토크
+          <div className={menuStyle}>
+            <Link href="/albalist" className={getLinkClassName("/albalist")}>
+              알바 목록
+            </Link>
+            <Link href="/albatalk" className={getLinkClassName("/albatalk")}>
+              알바 토크
+            </Link>
+            {user && (
+              <Link href="/myalbaform" className={getLinkClassName("/myalbaform")}>
+                내 알바폼
               </Link>
-              {user && (
-                <Link href="/myalbaform" className={getLinkClassName("/myalbaform")}>
-                  내 알바폼
-                </Link>
-              )}
-            </div>
+            )}
           </div>
+        </div>
 
-          {/* 로그인/회원가입 또는 메뉴 버튼 */}
-          <ul className="flex items-center space-x-2 sm:space-x-4 md:space-x-6">
-            {!user ? (
-              <>
-                <li className="flex items-center">
-                  <Link
-                    href="/login"
-                    className="rounded-lg border-2 border-lime-700 px-2 py-1 text-sm text-lime-700 transition-colors hover:bg-lime-700 hover:text-white sm:px-3 sm:py-1.5 sm:text-base md:px-4 md:py-2"
-                  >
-                    로그인
-                  </Link>
-                </li>
-                <li className="flex items-center">
-                  <Link
-                    href="/signup"
-                    className="rounded-lg bg-lime-700 px-2 py-1 text-sm font-semibold text-white transition-colors hover:bg-lime-800 sm:px-3 sm:py-1.5 sm:text-base md:px-4 md:py-2"
-                  >
-                    회원가입
-                  </Link>
-                </li>
-              </>
-            ) : (
-              <button onClick={() => setIsSideMenuOpen(true)} className="block" aria-label="메뉴 열기">
-                <Image src="/icons/menu/menu-sm.svg" width={24} height={24} alt="메뉴" className="block sm:hidden" />
-                <Image src="/icons/menu/menu-md.svg" width={36} height={36} alt="메뉴" className="hidden sm:block" />
-              </button>
-            )}
-          </ul>
-        </nav>
-      </div>
+        {/* 로그인/회원가입 또는 메뉴 버튼 */}
+        <ul className="flex items-center gap-2 lg:gap-4">
+          {!user ? (
+            <>
+              <li className="flex items-center">
+                <Link
+                  href="/login"
+                  className={cn(
+                    buttonStyle,
+                    "border-lime-700 px-2 py-1 text-sm text-lime-700 transition-colors hover:bg-lime-700 hover:text-white"
+                  )}
+                >
+                  로그인
+                </Link>
+              </li>
+              <li className="flex items-center">
+                <Link
+                  href="/signup"
+                  className={cn(
+                    buttonStyle,
+                    "border-lime-700 bg-lime-700 text-white transition-colors hover:bg-lime-800"
+                  )}
+                >
+                  회원가입
+                </Link>
+              </li>
+            </>
+          ) : (
+            <button type="button" onClick={() => setIsSideMenuOpen(true)} className="block" aria-label="메뉴 열기">
+              <Image src="/icons/menu/menu-sm.svg" width={24} height={24} alt="메뉴" className="block sm:hidden" />
+              <Image src="/icons/menu/menu-md.svg" width={36} height={36} alt="메뉴" className="hidden sm:block" />
+            </button>
+          )}
+        </ul>
+      </nav>
 
       {/* 사이드바 오버레이 */}
       {isSideMenuOpen && (
-        <div className="bg-black fixed inset-0 z-40 bg-opacity-50" onClick={() => setIsSideMenuOpen(false)} />
+        <div className="bg-black fixed inset-0 z-30 bg-opacity-50" onClick={() => setIsSideMenuOpen(false)} />
       )}
 
       {/* 사이드바 */}
       <div
         className={cn(
-          "fixed right-0 top-0 z-50 h-full w-40 transform bg-white shadow-lg transition-transform duration-300 ease-in-out md:w-64",
+          "fixed right-0 top-0 z-40 h-full w-40 transform bg-white shadow-lg transition-transform duration-300 ease-in-out md:w-64",
           isSideMenuOpen ? "translate-x-0" : "translate-x-full"
         )}
       >
         <div className="flex w-full flex-col p-6">
           <div className="mb-6 flex items-center justify-between">
             <span className="px-3 text-lg font-bold text-lime-700">메뉴</span>
-            <button onClick={() => setIsSideMenuOpen(false)} className="hover:text-grayscale-700 text-grayscale-500">
+            <button
+              type="button"
+              onClick={() => setIsSideMenuOpen(false)}
+              className="hover:text-grayscale-700 text-grayscale-500"
+            >
               ✕
             </button>
           </div>
@@ -161,6 +173,7 @@ export default function Header() {
                 마이페이지
               </Link>
               <button
+                type="button"
                 onClick={handleLogout}
                 className="rounded-lg border-2 border-lime-700 px-4 py-3 text-lime-700 hover:bg-lime-700 hover:text-white"
               >
diff --git a/src/app/components/layout/forms/SearchSection.tsx b/src/app/components/layout/forms/SearchSection.tsx
index eac801fe..e5d790bb 100644
--- a/src/app/components/layout/forms/SearchSection.tsx
+++ b/src/app/components/layout/forms/SearchSection.tsx
@@ -34,7 +34,7 @@ export default function SearchSection() {
         </div>
         <button
           type="submit"
-          className="rounded-lg bg-[#FFB800] px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-[#FFA800] md:px-8 md:text-base lg:px-12 lg:text-lg xl:px-16 xl:text-xl"
+          className="rounded-lg bg-primary-orange-300 px-4 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-primary-orange-200 md:px-8 md:text-base lg:px-12 lg:text-lg xl:px-16 xl:text-xl"
         >
           검색
         </button>
diff --git a/src/app/components/loading-spinner/LoadingSpinner.tsx b/src/app/components/loading-spinner/LoadingSpinner.tsx
index 4cbcf30f..e89be82d 100644
--- a/src/app/components/loading-spinner/LoadingSpinner.tsx
+++ b/src/app/components/loading-spinner/LoadingSpinner.tsx
@@ -5,7 +5,7 @@ import React from "react";
 
 export default function LoadingSpinner() {
   return (
-    <div className="flex min-h-screen flex-col items-center justify-center bg-white px-4">
+    <div className="flex min-h-screen flex-col items-center justify-center px-4">
       <Player
         autoplay
         loop
diff --git a/src/app/components/modal/ModalLayout.tsx b/src/app/components/modal/ModalLayout.tsx
index ea6b7a54..bc796c1a 100644
--- a/src/app/components/modal/ModalLayout.tsx
+++ b/src/app/components/modal/ModalLayout.tsx
@@ -53,7 +53,7 @@ const ModalLayout = () => {
 
   return createPortal(
     <div
-      className="bg-black/50 fixed inset-0 z-50 flex items-center justify-center p-4"
+      className="bg-black50 !z-99999 fixed inset-0 flex items-center justify-center"
       onClick={(e) => {
         if (e.target === e.currentTarget) closeModal();
       }}
diff --git a/src/app/components/modal/modals/alert/ApplicationDetailModal.tsx b/src/app/components/modal/modals/alert/ApplicationDetailModal.tsx
index 3efeda57..da7cf415 100644
--- a/src/app/components/modal/modals/alert/ApplicationDetailModal.tsx
+++ b/src/app/components/modal/modals/alert/ApplicationDetailModal.tsx
@@ -53,63 +53,60 @@ const ApplicationDetailModal = ({
   return (
     <div
       className={cn(
-        "relative h-[544px] w-[375px] overflow-hidden rounded-3xl bg-white p-6 md:h-[668px] md:w-[440px]",
+        "relative w-[375px] overflow-hidden rounded-3xl bg-white p-6 shadow-lg lg:w-[440px] lg:p-10",
         className
       )}
     >
       <div className="flex h-full flex-col">
-        <div className="mb-6 md:mb-8">
-          <div className="text-lg font-semibold md:text-2xl">내 지원 내역</div>
+        <div className="mb-6 lg:mb-8">
+          <div className="text-lg font-semibold lg:text-2xl">내 지원 내역</div>
         </div>
 
-        <div className="flex-1">
-          <div className="space-y-4 md:space-y-5">
-            {applicationDate && (
-              <div className="flex items-center justify-between text-sm md:text-base">
-                <span className="text-muted-foreground">지원일시</span>
-                <span>{formatDateTime(applicationDate)}</span>
-              </div>
-            )}
+        <div className="space-y-4 lg:space-y-5">
+          {applicationDate && (
+            <div className="flex items-center justify-between text-sm lg:text-base">
+              <span className="text-muted-foreground">지원일시</span>
+              <span>{formatDateTime(applicationDate)}</span>
+            </div>
+          )}
 
-            {applicationStatus && (
-              <div className="flex items-center justify-between text-sm md:text-base">
-                <span className="text-muted-foreground">진행 상태</span>
-                <span className="rounded bg-primary-orange-50 px-2 py-1 font-semibold text-primary-orange-300">
-                  {applicationStatus}
-                </span>
-              </div>
-            )}
-          </div>
-
-          <div className="mt-6 space-y-4 md:mt-8 md:space-y-6">
-            {defaultFields.map((field) => (
-              <div key={field.name} className="space-y-2">
-                <label htmlFor={field.name} className="text-muted-foreground block text-sm md:text-base">
-                  {field.label}
-                </label>
-                <ReadOnlyInput
-                  name={field.name}
-                  type={field.type}
-                  value={field.value}
-                  size="w-full h-[48px] md:h-[54px]"
-                />
-              </div>
-            ))}
-          </div>
+          {applicationStatus && (
+            <div className="flex items-center justify-between text-sm lg:text-base">
+              <span className="text-muted-foreground">진행 상태</span>
+              <span className="rounded bg-primary-orange-50 px-2 py-1 font-semibold text-primary-orange-300">
+                {applicationStatus}
+              </span>
+            </div>
+          )}
         </div>
 
-        <div className="mt-6 md:mt-8">
-          <Link href={`/forms/${formId}`} className="block">
-            <Button type="button" className="h-[48px] w-full text-base font-medium md:h-[54px] md:text-lg">
-              지원 내역 상세보기
-            </Button>
-          </Link>
+        <div className="mt-6 space-y-4 lg:mt-8 lg:space-y-6">
+          {defaultFields.map((field) => (
+            <div key={field.name} className="space-y-2">
+              <label htmlFor={field.name} className="text-muted-foreground block text-sm lg:text-base">
+                {field.label}
+              </label>
+              <ReadOnlyInput
+                name={field.name}
+                type={field.type}
+                value={field.value}
+                size="w-full h-[48px] lg:h-[54px]"
+              />
+            </div>
+          ))}
         </div>
 
+        <Link href={`/forms/${formId}`} className="block">
+          <Button type="button" className="mt-6 h-[58px] !w-full text-base font-medium lg:mt-8 lg:h-[72px] lg:text-lg">
+            지원 내역 상세보기
+          </Button>
+        </Link>
+
         <button
+          type="button"
           onClick={onClose}
           aria-label="모달 닫기"
-          className="hover:text-grayscale-600 absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full bg-white text-grayscale-400"
+          className="hover:text-grayscale-600 absolute right-4 top-4 flex size-8 items-center justify-center rounded-full bg-white text-grayscale-400 lg:right-10 lg:top-10"
         >
           <Image src="/icons/x/x-sm.svg" alt="" width={16} height={16} className="block sm:hidden" />
           <Image src="/icons/x/x-md.svg" alt="" width={20} height={20} className="hidden sm:block" />
diff --git a/src/app/components/modal/modals/alert/FormContinueModal.tsx b/src/app/components/modal/modals/alert/FormContinueModal.tsx
index 9d40133a..ae0a8319 100644
--- a/src/app/components/modal/modals/alert/FormContinueModal.tsx
+++ b/src/app/components/modal/modals/alert/FormContinueModal.tsx
@@ -15,45 +15,44 @@ const FormContinueModal = ({ isOpen, onClose, className }: FormContinueModalProp
   return (
     <div
       className={cn(
-        "relative left-1/2 h-[284px] w-[375px] -translate-x-1/2 rounded-3xl bg-white p-6 shadow-lg md:h-[384px] md:w-[520px]",
+        "relative left-1/2 w-[375px] -translate-x-1/2 rounded-3xl bg-white p-6 shadow-lg lg:w-[520px] lg:p-10",
         className
       )}
     >
       <div className="relative h-full">
         <button
+          type="button"
           onClick={onClose}
           className="hover:text-grayscale-600 absolute right-0 top-0 flex items-center justify-center text-grayscale-400"
         >
           <Image src="/icons/x/x-sm.svg" alt="close" width={16} height={16} className="block sm:hidden" />
           <Image src="/icons/x/x-md.svg" alt="close" width={20} height={20} className="hidden sm:block" />
         </button>
-        <div className="flex h-full flex-col items-center py-4 text-center md:py-6">
-          <div className="flex items-center justify-center">
-            <div className="relative h-20 w-20 md:h-[120px] md:w-[120px]">
-              <Image
-                src="/images/modal/closed-orange-sm.svg"
-                alt="warning"
-                width={80}
-                height={80}
-                className="block sm:hidden"
-              />
-              <Image
-                src="/images/modal/closed-orange-md.svg"
-                alt="warning"
-                width={120}
-                height={120}
-                className="hidden sm:block"
-              />
-            </div>
+        <div className="flex h-full flex-col items-center text-center">
+          <div className="relative mb-6 flex h-20 w-20 items-center justify-center lg:h-[120px] lg:w-[120px]">
+            <Image
+              src="/images/modal/closed-orange-sm.svg"
+              alt="warning"
+              width={80}
+              height={80}
+              className="block sm:hidden"
+            />
+            <Image
+              src="/images/modal/closed-orange-md.svg"
+              alt="warning"
+              width={120}
+              height={120}
+              className="hidden sm:block"
+            />
           </div>
-          <h2 className="mb-2 text-lg font-bold md:text-xl">작성 중인 알바폼이 있어요!</h2>
-          <p className="text-grayscale-600 mb-6 text-sm md:text-base">이어서 작성하시겠어요?</p>
+          <h2 className="mb-2 text-lg font-bold lg:text-xl">작성 중인 알바폼이 있어요!</h2>
+          <p className="text-grayscale-600 mb-6 text-sm lg:text-base">이어서 작성하시겠어요?</p>
 
           <div className="mt-auto">
             <Link href="/" className="block">
               <Button
                 type="button"
-                className="h-[58px] w-[327px] text-base font-medium md:h-[72px] md:w-[360px] md:text-lg"
+                className="h-[58px] w-[327px] text-base font-medium lg:h-[72px] lg:w-[360px] lg:text-lg"
               >
                 이어쓰기
               </Button>
diff --git a/src/app/components/modal/modals/alert/RecruitmentClosedModal.tsx b/src/app/components/modal/modals/alert/RecruitmentClosedModal.tsx
index 1fe081d5..0f97d5fa 100644
--- a/src/app/components/modal/modals/alert/RecruitmentClosedModal.tsx
+++ b/src/app/components/modal/modals/alert/RecruitmentClosedModal.tsx
@@ -16,46 +16,42 @@ const RecruitmentClosedModal = ({ formId, isOpen, onClose, className }: Recruitm
   return (
     <div
       className={cn(
-        "relative left-1/2 h-[284px] w-[375px] -translate-x-1/2 rounded-3xl bg-white p-6 shadow-lg md:h-[384px] md:w-[520px]",
+        "relative left-1/2 w-[375px] -translate-x-1/2 rounded-3xl bg-white p-6 shadow-lg lg:w-[520px] lg:p-10",
         className
       )}
     >
       <div className="relative h-full">
         <button
+          type="button"
           onClick={onClose}
           className="hover:text-grayscale-600 absolute right-0 top-0 flex items-center justify-center text-grayscale-400"
         >
           <Image src="/icons/x/x-sm.svg" alt="close" width={16} height={16} className="block sm:hidden" />
           <Image src="/icons/x/x-md.svg" alt="close" width={20} height={20} className="hidden sm:block" />
         </button>
-        <div className="flex h-full flex-col items-center py-4 text-center md:py-6">
-          <div className="flex items-center justify-center">
-            <div className="relative h-20 w-20 md:h-[120px] md:w-[120px]">
-              <Image
-                src="/images/modal/closed-orange-sm.svg"
-                alt="warning"
-                width={80}
-                height={80}
-                className="block sm:hidden"
-              />
-              <Image
-                src="/images/modal/closed-orange-md.svg"
-                alt="warning"
-                width={120}
-                height={120}
-                className="hidden sm:block"
-              />
-            </div>
+        <div className="flex h-full flex-col items-center text-center">
+          <div className="relative mb-6 flex h-20 w-20 items-center justify-center lg:h-[120px] lg:w-[120px]">
+            <Image
+              src="/images/modal/closed-orange-sm.svg"
+              alt="warning"
+              width={80}
+              height={80}
+              className="block sm:hidden"
+            />
+            <Image
+              src="/images/modal/closed-orange-md.svg"
+              alt="warning"
+              width={120}
+              height={120}
+              className="hidden sm:block"
+            />
           </div>
-          <h2 className="mb-2 text-lg font-bold md:text-xl">모집 마감</h2>
-          <p className="text-grayscale-600 mb-6 text-sm md:text-base">모집이 종료된 알바폼입니다.</p>
+          <h2 className="mb-2 text-lg font-bold lg:text-xl">모집 마감</h2>
+          <p className="text-grayscale-600 mb-6 text-sm lg:text-base">모집이 종료된 알바폼입니다.</p>
 
           <div className="mt-auto">
             <Link href={`/forms/${formId}`} className="block">
-              <Button
-                type="button"
-                className="h-[58px] w-[327px] text-base font-medium md:h-[72px] md:w-[360px] md:text-lg"
-              >
+              <Button className="h-[58px] w-[327px] text-base font-medium lg:h-[72px] lg:w-[360px] lg:text-lg">
                 홈으로 가기
               </Button>
             </Link>
diff --git a/src/app/components/modal/modals/confirm/CustomFormModal.tsx b/src/app/components/modal/modals/confirm/CustomFormModal.tsx
index 8f503804..0e3a4775 100644
--- a/src/app/components/modal/modals/confirm/CustomFormModal.tsx
+++ b/src/app/components/modal/modals/confirm/CustomFormModal.tsx
@@ -40,14 +40,14 @@ const CustomFormModal = ({
 
       <div
         className={cn(
-          "fixed left-1/2 top-1/2 z-50 h-[330px] w-[375px] -translate-x-1/2 -translate-y-1/2 rounded-3xl bg-white pb-8 pt-4 shadow-lg md:h-[440px] md:w-[520px]",
+          "fixed left-1/2 top-1/2 z-50 w-[375px] -translate-x-1/2 -translate-y-1/2 rounded-3xl bg-white p-6 shadow-lg lg:w-[520px] lg:p-10",
           className
         )}
       >
         <div className="relative h-full">
-          <div className="flex h-full flex-col items-center text-center md:pt-8">
+          <div className="flex h-full flex-col items-center text-center lg:pt-8">
             <div className="flex items-center justify-center">
-              <div className="relative h-20 w-20 md:h-[120px] md:w-[120px]">
+              <div className="relative mb-6 h-20 w-20 lg:h-[120px] lg:w-[120px]">
                 <Image
                   src="/images/modal/warning-orange-sm.svg"
                   alt="warning"
@@ -64,22 +64,20 @@ const CustomFormModal = ({
                 />
               </div>
             </div>
-            <h2 className="mb-2 text-lg font-bold md:text-xl">{title}</h2>
-            <p className="text-grayscale-600 mb-6 text-sm md:text-base">{content}</p>
+            <h2 className="mb-2 text-lg font-bold lg:text-xl">{title}</h2>
+            <p className="text-grayscale-600 mb-6 text-sm lg:text-base">{content}</p>
 
             <div className="mt-auto flex w-full flex-col items-center gap-3">
               <Button
-                type="button"
                 onClick={handleConfirm}
-                className="h-[48px] w-[300px] text-base font-medium md:h-[62px] md:w-[360px] md:text-lg"
+                className="h-[48px] w-[300px] text-base font-medium lg:h-[62px] lg:w-[360px] lg:text-lg"
               >
                 {confirmText}
               </Button>
               <Button
-                type="button"
                 variant="outlined"
                 onClick={handleCancel}
-                className="h-[48px] w-[300px] text-base font-medium hover:border-primary-orange-50 hover:bg-primary-orange-100 hover:text-white md:h-[62px] md:w-[360px] md:text-lg"
+                className="h-[48px] w-[300px] text-base font-medium hover:border-primary-orange-50 hover:bg-primary-orange-100 hover:text-white lg:h-[62px] lg:w-[360px] lg:text-lg"
               >
                 {cancelText}
               </Button>
diff --git a/src/app/components/modal/modals/confirm/DeleteFormModal.tsx b/src/app/components/modal/modals/confirm/DeleteFormModal.tsx
index 0106e159..fe0b5571 100644
--- a/src/app/components/modal/modals/confirm/DeleteFormModal.tsx
+++ b/src/app/components/modal/modals/confirm/DeleteFormModal.tsx
@@ -39,38 +39,36 @@ const DeleteFormModal = ({ id, isOpen, onClose, onConfirm, className }: ConfirmF
   return (
     <div
       className={cn(
-        "relative left-1/2 h-[330px] w-[375px] -translate-x-1/2 rounded-3xl bg-white pb-8 pt-4 shadow-lg md:h-[440px] md:w-[520px]",
+        "relative left-1/2 w-[375px] -translate-x-1/2 rounded-3xl bg-white p-6 shadow-lg lg:w-[520px] lg:p-10",
         className
       )}
     >
       <div className="relative h-full">
-        <form onSubmit={handleSubmit} className="flex h-full flex-col items-center text-center md:pt-8">
-          <div className="flex items-center justify-center">
-            <div className="relative h-20 w-20 md:h-[120px] md:w-[120px]">
-              <Image
-                src="/images/modal/warning-orange-sm.svg"
-                alt="warning"
-                width={80}
-                height={80}
-                className="block sm:hidden"
-              />
-              <Image
-                src="/images/modal/warning-orange-md.svg"
-                alt="warning"
-                width={120}
-                height={120}
-                className="hidden sm:block"
-              />
-            </div>
+        <form onSubmit={handleSubmit} className="flex h-full flex-col items-center text-center lg:pt-8">
+          <div className="relative mb-6 h-20 w-20 items-center justify-center lg:h-[120px] lg:w-[120px]">
+            <Image
+              src="/images/modal/warning-orange-sm.svg"
+              alt="warning"
+              width={80}
+              height={80}
+              className="block sm:hidden"
+            />
+            <Image
+              src="/images/modal/warning-orange-md.svg"
+              alt="warning"
+              width={120}
+              height={120}
+              className="hidden sm:block"
+            />
           </div>
-          <h2 className="mb-2 text-lg font-bold md:text-xl">알바폼을 삭제할까요?</h2>
-          <p className="text-grayscale-600 mb-6 text-sm md:text-base">삭제 후 정보를 복구할 수 없어요.</p>
+          <h2 className="mb-2 text-lg font-bold lg:text-xl">알바폼을 삭제할까요?</h2>
+          <p className="text-grayscale-600 mb-6 text-sm lg:text-base">삭제 후 정보를 복구할 수 없어요.</p>
 
           <div className="mt-auto flex w-full flex-col items-center gap-3">
             <Button
               type="submit"
               disabled={isDeleting}
-              className="h-[48px] w-[300px] text-base font-medium md:h-[62px] md:w-[360px] md:text-lg"
+              className="h-[48px] w-[300px] text-base font-medium lg:h-[62px] lg:w-[360px] lg:text-lg"
             >
               {isDeleting ? <DotLoadingSpinner /> : "삭제하기"}
             </Button>
@@ -79,9 +77,9 @@ const DeleteFormModal = ({ id, isOpen, onClose, onConfirm, className }: ConfirmF
               variant="outlined"
               onClick={onClose}
               disabled={isDeleting}
-              className="h-[48px] w-[300px] text-base font-medium hover:border-primary-orange-50 hover:bg-primary-orange-100 hover:text-white md:h-[62px] md:w-[360px] md:text-lg"
+              className="h-[48px] w-[300px] text-base font-medium hover:border-primary-orange-50 hover:bg-primary-orange-100 hover:text-white lg:h-[62px] lg:w-[360px] lg:text-lg"
             >
-              다음에 할께요
+              다음에 할게요
             </Button>
           </div>
         </form>
diff --git a/src/app/components/modal/modals/confirm/SelectProgressModal.tsx b/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
index 1c61b04f..3d4f28f1 100644
--- a/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
+++ b/src/app/components/modal/modals/confirm/SelectProgressModal.tsx
@@ -60,15 +60,13 @@ const SelectProgressModal = ({ id, isOpen, onClose, className }: ConfirmFormModa
   return (
     <>
       <div className="bg-black fixed inset-0 z-50 bg-opacity-50" onClick={onClose} />
-      <div
-        className={cn("h-[454px] w-[375px] rounded-3xl bg-white p-4 shadow-lg md:h-[566px] md:w-[440px]", className)}
-      >
+      <div className={cn("w-[375px] rounded-3xl bg-white p-6 shadow-lg lg:w-[440px] lg:p-10", className)}>
         <form onSubmit={handleSubmit} className="flex h-full flex-col items-center">
           <div className="text-center">
-            <h2 className="mb-2 text-lg font-bold md:mb-3 md:text-2xl">진행상태 선택</h2>
-            <p className="text-muted-foreground mb-6 text-sm md:mb-8 md:text-base">현재 진행상태를 알려주세요.</p>
+            <h2 className="mb-2 text-lg font-bold lg:mb-3 lg:text-2xl">진행상태 선택</h2>
+            <p className="text-muted-foreground mb-6 text-sm lg:mb-8 lg:text-base">현재 진행상태를 알려주세요.</p>
           </div>
-          <div className="h-auto w-full md:h-[264px] md:w-[360px]">
+          <div className="h-auto w-full">
             <RadioGroup value={selectedValue} onValueChange={handleValueChange} className="space-y-3">
               {radioOptions.map((option) => (
                 <RadioBtn
@@ -78,33 +76,29 @@ const SelectProgressModal = ({ id, isOpen, onClose, className }: ConfirmFormModa
                   value={option.value}
                   id={option.id}
                   position={positionOptions.POSITION_RIGHT}
-                  className="text-sm md:text-base"
+                  className="text-sm lg:text-base"
                   disabled={isSubmitting}
                 />
               ))}
             </RadioGroup>
           </div>
-          <div className="mt-auto w-full md:w-[360px]">
-            <div className="grid grid-cols-2 gap-4">
-              <Button
-                type="button"
-                onClick={handleCancel}
-                color="gray"
-                disabled={isSubmitting}
-                width="sm"
-                className="h-[48px] text-base font-medium md:h-[62px] md:text-lg"
-              >
-                취소
-              </Button>
-              <Button
-                type="submit"
-                disabled={isSubmitting}
-                width="sm"
-                className="h-[48px] text-base font-medium hover:border-primary-orange-50 hover:bg-primary-orange-100 hover:text-white md:h-[62px] md:text-lg"
-              >
-                {isSubmitting ? <DotLoadingSpinner /> : "선택하기"}
-              </Button>
-            </div>
+          <div className="mt-[30px] flex w-full justify-between lg:w-[360px]">
+            <Button
+              type="button"
+              onClick={handleCancel}
+              color="gray"
+              disabled={isSubmitting}
+              className="h-[58px] w-[158px] text-base font-medium text-white lg:h-[72px] lg:w-[176px] lg:text-lg"
+            >
+              취소
+            </Button>
+            <Button
+              type="submit"
+              disabled={isSubmitting}
+              className="h-[58px] w-[158px] text-base font-medium lg:h-[72px] lg:w-[176px] lg:text-lg"
+            >
+              {isSubmitting ? <DotLoadingSpinner /> : "선택하기"}
+            </Button>
           </div>
         </form>
       </div>
diff --git a/src/app/components/modal/modals/form/ChangePasswordModal.tsx b/src/app/components/modal/modals/form/ChangePasswordModal.tsx
index 9635a1a5..73100aa1 100644
--- a/src/app/components/modal/modals/form/ChangePasswordModal.tsx
+++ b/src/app/components/modal/modals/form/ChangePasswordModal.tsx
@@ -7,6 +7,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useLogout } from "@/hooks/queries/auth/useLogout";
 import { usePassword } from "@/hooks/queries/user/me/useChangePassword";
 import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
+import Button from "@/app/components/button/default/Button";
 
 interface ChangePasswordModalProps {
   isOpen: boolean;
@@ -94,15 +95,15 @@ const ChangePasswordModal = ({ isOpen, onClose, className }: ChangePasswordModal
   return (
     <div
       className={cn(
-        "relative left-1/2 h-[484px] w-[375px] -translate-x-1/2 overflow-hidden rounded-2xl bg-white p-6 shadow-lg sm:p-8 md:h-[666px] md:w-[720px]",
+        "relative left-1/2 w-[375px] -translate-x-1/2 overflow-hidden rounded-2xl bg-white p-6 shadow-lg lg:w-[720px] lg:p-10",
         className
       )}
     >
-      <div className="mb-8 h-[46px] text-center text-xl font-semibold md:mb-12 md:text-2xl">비밀번호 변경</div>
-      <form onSubmit={handleSubmit(onSubmitHandler)} className="space-y-4 md:space-y-6">
+      <div className="mb-8 h-[46px] text-center text-xl font-semibold lg:mb-12 lg:text-2xl">비밀번호 변경</div>
+      <form onSubmit={handleSubmit(onSubmitHandler)} className="space-y-4 lg:space-y-6">
         {defaultFields.map((field) => (
-          <div key={field.name} className="h-[88px] space-y-1.5 md:h-[114px] md:space-y-2">
-            <label className="text-grayscale-700 block text-sm font-semibold md:px-2 md:text-base">{field.label}</label>
+          <div key={field.name} className="h-[88px] space-y-1.5 lg:h-[114px] lg:space-y-2">
+            <label className="text-grayscale-700 block text-sm font-semibold lg:px-2 lg:text-base">{field.label}</label>
             <div className="flex w-full flex-col items-center">
               <BaseInput
                 {...register(field.name)}
@@ -110,31 +111,29 @@ const ChangePasswordModal = ({ isOpen, onClose, className }: ChangePasswordModal
                 placeholder={field.placeholder}
                 variant="white"
                 disabled={isPending}
-                size="w-[327px] h-[54px] md:w-[640px] md:h-[64px]"
+                size="w-[327px] h-[54px] lg:w-[640px] lg:h-[64px]"
                 errormessage={errors[field.name]?.message}
+                innerClassName="placeholder:text-sm placeholder:leading-[26px] font-normal text-sm leading-[26px]"
               />
             </div>
           </div>
         ))}
-        <div className="mt-4 flex h-[58px] gap-3 md:mt-6 md:h-[72px]">
-          <button
-            type="button"
+
+        <div className="mt-4 flex h-[58px] gap-3 lg:mt-6 lg:h-[72px]">
+          <Button
+            color="gray"
             onClick={() => {
               onClose();
               reset();
             }}
             disabled={isPending}
-            className="text-grayscale-700 flex-1 rounded-md border border-grayscale-300 bg-white px-4 py-2 text-sm font-semibold transition-colors hover:bg-grayscale-50 md:text-base"
+            className="h-full text-base font-medium text-white lg:text-lg"
           >
             취소
-          </button>
-          <button
-            type="submit"
-            disabled={isPending}
-            className="flex-1 rounded-md bg-orange-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-orange-600 md:text-base"
-          >
+          </Button>
+          <Button type="submit" disabled={isPending} className="h-full text-base font-medium lg:text-lg">
             {isPending ? <DotLoadingSpinner /> : "변경하기"}
-          </button>
+          </Button>
         </div>
       </form>
     </div>
diff --git a/src/app/components/modal/modals/form/EditMyProfileModal.tsx b/src/app/components/modal/modals/form/EditMyProfileModal.tsx
index ec8bd89b..1069f093 100644
--- a/src/app/components/modal/modals/form/EditMyProfileModal.tsx
+++ b/src/app/components/modal/modals/form/EditMyProfileModal.tsx
@@ -12,6 +12,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { nicknameSchema, mobilePhoneSchema } from "@/schemas/commonSchema";
 import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
+import Button from "@/app/components/button/default/Button";
 
 interface EditMyProfileModalProps {
   isOpen: boolean;
@@ -103,54 +104,50 @@ const EditMyProfileModal = ({ isOpen, onClose, className }: EditMyProfileModalPr
   return (
     <div
       className={cn(
-        "relative left-1/2 h-[610px] w-[375px] -translate-x-1/2 overflow-hidden rounded-2xl bg-white p-6 shadow-lg sm:p-8 md:h-[818px] md:w-[720px]",
+        "relative left-1/2 w-[375px] -translate-x-1/2 overflow-hidden rounded-2xl bg-white p-6 shadow-lg lg:w-[540px] lg:p-10",
         className
       )}
     >
-      <div className="h-[26px] text-center md:h-[46px]">
-        <h2 className="text-[18px] font-semibold md:text-[32px]">내 정보 수정</h2>
-      </div>
+      <h2 className="h-[26px] text-center text-[18px] font-semibold lg:h-[46px] lg:text-[32px]">내 정보 수정</h2>
 
       <form
         onSubmit={handleSubmit(onSubmitHandler)}
-        className="flex h-[calc(100%-26px)] flex-col md:h-[calc(100%-46px)]"
+        className="flex h-[calc(100%-26px)] flex-col lg:h-[calc(100%-46px)]"
       >
-        <div className="flex-1 space-y-2 md:space-y-8">
-          <div className="my-6 flex justify-center md:my-8">
-            <div className="relative">
-              <div className="relative h-[110px] w-[110px] md:h-[120px] md:w-[120px]">
-                <button
-                  type="button"
-                  onClick={handleImageClick}
-                  className="h-full w-full overflow-hidden rounded-full bg-grayscale-100"
-                >
-                  {previewUrl ? (
-                    <Image
-                      src={previewUrl}
-                      alt="Profile"
-                      width={120}
-                      height={120}
-                      className="h-full w-full object-cover"
-                    />
-                  ) : (
-                    <FiUser className="h-full w-full bg-grayscale-100 p-6 text-grayscale-200" />
-                  )}
-                </button>
-                <button
-                  type="button"
-                  onClick={handleImageClick}
-                  className="absolute bottom-1 right-1 flex h-8 w-8 items-center justify-center rounded-full border-[2px] border-white bg-grayscale-100 shadow-lg"
-                >
-                  <FiEdit2 className="text-grayscale-600 h-4 w-4" />
-                </button>
-              </div>
-              <input ref={fileInputRef} type="file" accept="image/*" onChange={handleImageChange} className="hidden" />
+        <div className="flex-1 space-y-2 lg:space-y-8">
+          <div className="relative my-6 flex justify-center lg:my-8">
+            <div className="relative h-[110px] w-[110px] lg:h-[120px] lg:w-[120px]">
+              <button
+                type="button"
+                onClick={handleImageClick}
+                className="h-full w-full overflow-hidden rounded-full bg-grayscale-100"
+              >
+                {previewUrl ? (
+                  <Image
+                    src={previewUrl}
+                    alt="Profile"
+                    width={120}
+                    height={120}
+                    className="h-full w-full object-cover"
+                  />
+                ) : (
+                  <FiUser className="h-full w-full bg-grayscale-100 p-6 text-grayscale-200" />
+                )}
+              </button>
+              <button
+                type="button"
+                onClick={handleImageClick}
+                className="absolute bottom-1 right-1 flex h-8 w-8 items-center justify-center rounded-full border-[2px] border-white bg-grayscale-100 shadow-lg"
+              >
+                <FiEdit2 className="text-grayscale-600 h-4 w-4" />
+              </button>
             </div>
+            <input ref={fileInputRef} type="file" accept="image/*" onChange={handleImageChange} className="hidden" />
           </div>
 
           {fields.map((field) => (
-            <div key={field.name} className="h-[88px] space-y-1.5 md:h-[114px] md:space-y-2">
-              <label className="text-grayscale-700 block px-2 text-sm font-semibold md:text-base">
+            <div key={field.name} className="space-y-1.5 lg:space-y-2">
+              <label className="text-grayscale-700 block px-2 text-sm font-semibold lg:text-base">
                 {field.label}
                 <span className="text-orange-500">*</span>
               </label>
@@ -160,8 +157,8 @@ const EditMyProfileModal = ({ isOpen, onClose, className }: EditMyProfileModalPr
                   type="text"
                   placeholder={`${field.label}${field.postPosition} 입력해주세요.`}
                   variant="white"
-                  size="w-[327px] h-[54px] md:w-[640px] md:h-[64px]"
-                  wrapperClassName="px-[14px] md:px-[20px]"
+                  size="w-[327px] h-[54px] lg:w-[460px] lg:h-[64px]"
+                  wrapperClassName="px-[14px] lg:px-[20px]"
                   disabled={isUpdating}
                   errormessage={errors[field.name]?.message}
                 />
@@ -170,22 +167,25 @@ const EditMyProfileModal = ({ isOpen, onClose, className }: EditMyProfileModalPr
           ))}
         </div>
 
-        <div className="flex h-[58px] justify-between gap-3 md:h-[72px]">
-          <button
-            type="button"
-            onClick={onClose}
+        <div className="mt-4 flex h-[58px] w-full justify-between gap-3 lg:mt-6 lg:h-[72px]">
+          <Button
+            color="gray"
+            onClick={() => {
+              onClose();
+              reset();
+            }}
             disabled={isUpdating}
-            className="text-grayscale-700 w-[158px] rounded-md border border-grayscale-300 bg-white px-4 py-2 text-sm font-semibold transition-colors hover:bg-grayscale-100 md:w-[314px] md:text-base"
+            className="h-[58px] w-[158px] text-base font-medium text-white lg:h-[72] lg:w-[314px] lg:text-lg"
           >
             취소
-          </button>
-          <button
+          </Button>
+          <Button
             type="submit"
             disabled={isUpdating}
-            className="w-[158px] rounded-md bg-primary-orange-300 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-primary-orange-200 md:w-[314px] md:text-base"
+            className="h-[58px] w-[158px] text-base font-medium lg:h-[72] lg:w-[314px] lg:text-lg"
           >
             {isUpdating ? <DotLoadingSpinner /> : "수정하기"}
-          </button>
+          </Button>
         </div>
       </form>
     </div>
diff --git a/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx b/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx
index 3a9a40a5..3258bdfe 100644
--- a/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx
+++ b/src/app/components/modal/modals/form/EditOwnerProfileModal.tsx
@@ -12,6 +12,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { nicknameSchema, storePhoneSchema, mobilePhoneSchema } from "@/schemas/commonSchema";
 import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinner";
+import Button from "@/app/components/button/default/Button";
 
 interface EditOwnerProfileModalProps {
   isOpen: boolean;
@@ -130,53 +131,45 @@ const EditOwnerProfileModal = ({ isOpen, onClose, className }: EditOwnerProfileM
   return (
     <div
       className={cn(
-        "relative left-1/2 w-[375px] -translate-x-1/2 overflow-hidden rounded-2xl bg-white shadow-lg md:w-[480px] lg:w-[540px]",
+        "relative left-1/2 w-[375px] -translate-x-1/2 overflow-hidden rounded-2xl bg-white p-6 shadow-lg lg:w-[540px] lg:p-10",
         className
       )}
     >
-      <div className="p-6 pb-0 text-center lg:p-8 lg:pb-0">
+      <div className="pb-2 pt-6 text-center lg:pb-2 lg:pt-8">
         <h2 className="text-[18px] font-semibold lg:text-[24px]">사장님 정보 관리</h2>
       </div>
 
       <form onSubmit={handleSubmit(onSubmitHandler)} className="flex flex-col">
-        <div className="max-h-[calc(100vh-300px)] overflow-y-auto p-6 lg:p-8">
-          <div className="space-y-4 lg:space-y-10">
+        <div className="scrollbar-custom max-h-[calc(100vh-300px)] pr-2">
+          <div className="space-y-8 lg:space-y-14">
             <div className="flex justify-center">
-              <div className="relative">
-                <div className="relative h-[80px] w-[80px] lg:h-[100px] lg:w-[100px]">
-                  <button
-                    type="button"
-                    onClick={handleImageClick}
-                    className="h-full w-full overflow-hidden rounded-full bg-grayscale-100"
-                  >
-                    {previewUrl ? (
-                      <Image
-                        src={previewUrl}
-                        alt="Profile"
-                        width={120}
-                        height={120}
-                        className="h-full w-full object-cover"
-                      />
-                    ) : (
-                      <FiUser className="h-full w-full p-6 text-grayscale-200" />
-                    )}
-                  </button>
-                  <button
-                    type="button"
-                    onClick={handleImageClick}
-                    className="absolute bottom-1 right-1 flex h-8 w-8 items-center justify-center rounded-full border-[2px] border-white bg-grayscale-100 shadow-lg"
-                  >
-                    <FiEdit2 className="text-grayscale-600 h-4 w-4" />
-                  </button>
-                </div>
-                <input
-                  ref={fileInputRef}
-                  type="file"
-                  accept="image/*"
-                  onChange={handleImageChange}
-                  className="hidden"
-                />
+              <div className="relative h-[80px] w-[80px] lg:h-[100px] lg:w-[100px]">
+                <button
+                  type="button"
+                  onClick={handleImageClick}
+                  className="h-full w-full overflow-hidden rounded-full bg-grayscale-100"
+                >
+                  {previewUrl ? (
+                    <Image
+                      src={previewUrl}
+                      alt="Profile"
+                      width={120}
+                      height={120}
+                      className="h-full w-full object-cover"
+                    />
+                  ) : (
+                    <FiUser className="h-full w-full p-6 text-grayscale-200" />
+                  )}
+                </button>
+                <button
+                  type="button"
+                  onClick={handleImageClick}
+                  className="absolute bottom-1 right-1 flex h-8 w-8 items-center justify-center rounded-full border-[2px] border-white bg-grayscale-100 shadow-lg"
+                >
+                  <FiEdit2 className="text-grayscale-600 h-4 w-4" />
+                </button>
               </div>
+              <input ref={fileInputRef} type="file" accept="image/*" onChange={handleImageChange} className="hidden" />
             </div>
 
             {fields.map((field) => (
@@ -212,23 +205,20 @@ const EditOwnerProfileModal = ({ isOpen, onClose, className }: EditOwnerProfileM
           </div>
         </div>
 
-        <div className="sticky bottom-0 border-grayscale-100 bg-white p-6 lg:p-8">
+        <div className="sticky bottom-0 w-full border-grayscale-100 bg-white pt-4 lg:pt-10">
           <div className="flex h-[36px] justify-between gap-3 lg:h-[48px]">
-            <button
+            <Button
               type="button"
+              color="gray"
               onClick={onClose}
               disabled={isUpdating}
-              className="text-grayscale-700 w-[158px] rounded-md border border-grayscale-300 bg-white px-4 py-2 text-sm font-semibold transition-colors hover:bg-grayscale-50 md:w-[314px] md:text-base"
+              className="text-sm font-semibold text-white lg:text-base"
             >
               취소
-            </button>
-            <button
-              type="submit"
-              disabled={isUpdating}
-              className="w-[158px] rounded-md bg-orange-500 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-orange-600 md:w-[314px] md:text-base"
-            >
+            </Button>
+            <Button type="submit" disabled={isUpdating} className="text-sm font-semibold lg:text-base">
               {isUpdating ? <DotLoadingSpinner /> : "수정하기"}
-            </button>
+            </Button>
           </div>
         </div>
       </form>
diff --git a/src/app/components/popUp/closeButton.tsx b/src/app/components/popUp/closeButton.tsx
index dbcfa61d..42f9a413 100644
--- a/src/app/components/popUp/closeButton.tsx
+++ b/src/app/components/popUp/closeButton.tsx
@@ -9,7 +9,7 @@ interface CloseButtonProps {
 
 export default function CloseButton({ onClose }: CloseButtonProps) {
   return (
-    <button onClick={onClose} className="absolute right-2 top-1/2 -translate-y-1/2 transform md:right-4">
+    <button type="button" onClick={onClose} className="absolute right-2 top-1/2 -translate-y-1/2 transform md:right-4">
       <Image
         src="/icons/x/x-md.svg"
         alt="닫기"
diff --git a/src/app/globals.css b/src/app/globals.css
index 801577da..8e6b409f 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -326,3 +326,7 @@ input[type="checkbox"]:disabled {
 }
 
 /* --------------------- date picker커스텀 끝--------------------- */
+
+.bg-black50 {
+  @apply !bg-[#141414] !bg-opacity-50;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1258d790..35441388 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -11,7 +11,7 @@ export { metadata, viewport };
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="ko">
-      <body>
+      <body className="scrollbar-custom">
         <ClientLayout>
           <Header />
           <main className="min-h-screen pt-16">{children}</main>
diff --git a/src/app/stories/design-system/components/modal/ModalLayout.stories.tsx b/src/app/stories/design-system/components/modal/ModalLayout.stories.tsx
index 43f927d4..6cfd895a 100644
--- a/src/app/stories/design-system/components/modal/ModalLayout.stories.tsx
+++ b/src/app/stories/design-system/components/modal/ModalLayout.stories.tsx
@@ -129,6 +129,7 @@ const ModalTester = () => {
         <div className="grid grid-cols-2 gap-4 md:grid-cols-3">
           {modalButtons.map((button, index) => (
             <button
+              type="button"
               key={index}
               onClick={button.onClick}
               className={`rounded-md px-4 py-2 text-sm text-white transition-colors ${