diff --git a/src/containers/ChangePass.jsx b/src/containers/ChangePass.jsx
index 6d1b538..51d5a36 100644
--- a/src/containers/ChangePass.jsx
+++ b/src/containers/ChangePass.jsx
@@ -1,7 +1,9 @@
 import Sidebar from "./SideForm";
 import Button from "../component/Button";
 import Input from "../component/Input";
+import Search from "../component/Search";
 import "./styles/ChangePass.scss";
+import Logo from "../image/logo_black.png";
 
 const ChangePass = () => {
   return (
@@ -10,7 +12,13 @@ const ChangePass = () => {
         <Sidebar showLogout={false} />
       </div>
       <div className="content-wrapper">
+        <div className="search-area">
+          <Search />
+        </div>
+
         <div className="password-area">
+          <h3>비밀번호 변경</h3>
+          <img className="settinglogo" src={Logo} />
           <Input type="password" placeholder="비밀번호" />
           <Input type="password" placeholder="비밀번호 확인" />
           <Button text="비밀번호 변경하기" />
diff --git a/src/containers/SettingForm.jsx b/src/containers/SettingForm.jsx
index b92b779..5c501c6 100644
--- a/src/containers/SettingForm.jsx
+++ b/src/containers/SettingForm.jsx
@@ -1,8 +1,18 @@
+import { useNavigate } from "react-router-dom";
 import Sidebar from "./SideForm";
 import Search from "../component/Search";
-import "./styles/ChangePass.scss";
+import Button from "../component/Button";
+import Input from "../component/Input";
+import ProfileUpload from "../component/ProfileUpload";
+import "./styles/SettingForm.scss";
 
 const SettingForm = () => {
+  const navigate = useNavigate();
+
+  const handleChangePassword = () => {
+    navigate("/setting/changepassword");
+  };
+
   return (
     <div className="start-container">
       <div className="sidebar-area">
@@ -12,7 +22,30 @@ const SettingForm = () => {
         <div className="search-area">
           <Search />
         </div>
-        <div className="setting-area"></div>
+        <div className="setting-area">
+          <div className="signup-area">
+            <h3>마이페이지</h3>
+            <ProfileUpload />
+            <Input
+              type="text"
+              placeholder="아이디"
+              disabled={true}
+              value="아이디: user123" // 실제 사용자 아이디로 대체
+            />
+            <Input type="text" placeholder="이름(한글)" />
+            <Input type="text" placeholder="이름(영문)" />
+
+            <div className="button-group">
+              <button className="action-button" onClick={handleChangePassword}>
+                비밀번호 변경
+              </button>
+              <button className="action-button">내 게시물</button>
+            </div>
+
+            <Button text="정보수정하기" />
+            <span className="Withdrawal">회원탈퇴하기</span>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/src/containers/styles/ChangePass.scss b/src/containers/styles/ChangePass.scss
index 905de73..facdbe6 100644
--- a/src/containers/styles/ChangePass.scss
+++ b/src/containers/styles/ChangePass.scss
@@ -17,10 +17,14 @@
   }
 
   .content-wrapper {
-    width: 80%;
-    display: flex;
-    flex-direction: column;
-
+    h3 {
+      text-align: center;
+      margin: 20px 0; // 위아래 여백 추가
+    }
+    .settinglogo {
+      width: 300px;
+      height: 300px;
+    }
     .password-area {
       display: flex;
       flex-direction: column;
@@ -52,10 +56,18 @@
       width: 100%;
       height: calc(7.15 * 100% / 8);
 
+      h3 {
+        margin: 15px 0; // 모바일에서는 여백 줄임
+        font-size: 18px; // 모바일에서 폰트 크기 조정
+      }
+
       .search-area {
         height: calc(100% / 8);
       }
-
+      .settinglogo {
+        width: 150px;
+        height: 150px;
+      }
       .password-area {
         height: calc(7 * 100% / 7);
       }
diff --git a/src/containers/styles/Community.scss b/src/containers/styles/Community.scss
index b9ac0c1..89a5efb 100644
--- a/src/containers/styles/Community.scss
+++ b/src/containers/styles/Community.scss
@@ -16,6 +16,7 @@
     max-width: 950px;
     margin: 0 auto;
     overflow-y: auto;
+    overflow-x: hidden;
     @media (max-width: 767px) {
       padding: 10px;
       max-width: 100%;
diff --git a/src/containers/styles/SettingForm.scss b/src/containers/styles/SettingForm.scss
index 659a7f3..a20dbe4 100644
--- a/src/containers/styles/SettingForm.scss
+++ b/src/containers/styles/SettingForm.scss
@@ -21,15 +21,7 @@
     display: flex;
     flex-direction: column;
 
-    .search-area {
-      height: calc(100% / 16);
-      background-color: none;
-      padding: 10px;
-      display: flex;
-      align-items: center;
-    }
-
-    .setting-area {
+    .signup-area {
       display: flex;
       flex-direction: column;
       justify-content: center;
@@ -40,10 +32,90 @@
       height: calc(9 * 100% / 10);
       background-color: #fdfcfc;
       padding: 20px;
+      .custom-button {
+        width: 300px !important; // !important를 사용하여 강제 적용
+        height: 95px !important;
+        background-color: #4267b2;
+        color: white;
+        font-size: 15px;
+
+        &:hover {
+          background-color: #365899;
+        }
+
+        @media (max-width: 767px) {
+          width: 250px !important;
+          height: 40px !important;
+          font-size: 13px;
+        }
+      }
+      .button-group {
+        display: flex;
+        gap: 20px;
+        width: 100%;
+        max-width: 400px;
+        justify-content: center;
+        margin: 10px 0;
+
+        .action-button {
+          flex: 1;
+          padding: 12px 20px;
+          background-color: white;
+          color: #3d3d3d;
+          border: solid 1.5px;
+          border-radius: 8px;
+          cursor: pointer;
+          font-size: 14px;
+          transition: background-color 0.2s;
+
+          &:hover {
+            background-color: rgb(231, 231, 231);
+          }
+        }
+      }
+
+      .Withdrawal {
+        color: #666;
+        text-decoration: underline;
+        cursor: pointer;
+        font-size: 13px;
+        margin-top: 10px;
+
+        &:hover {
+          color: #333;
+        }
+      }
+
+      @media (max-width: 767px) {
+        gap: 10px;
+
+        .button-group {
+          gap: 10px;
+          max-width: 300px;
+
+          .action-button {
+            padding: 10px 15px;
+            font-size: 13px;
+          }
+        }
+
+        :global(.custom-button) {
+          width: 300px;
+          height: 34px;
+          font-size: 14px;
+        }
+
+        .Withdrawal {
+          font-size: 13px;
+        }
+      }
+    }
+
+    .re-login {
+      text-decoration: underline;
     }
   }
 
-  // Media query for screens smaller than 768px
   @media (max-width: 767px) {
     flex-direction: column;
 
@@ -61,8 +133,11 @@
         height: calc(100% / 8);
       }
 
-      .setting-area {
-        height: calc(7 * 100% / 8);
+      .signup-area {
+        height: calc(7 * 100% / 7);
+      }
+      .re-login {
+        font-size: 13px;
       }
     }
   }
diff --git a/src/containers/styles/SignupForm.scss b/src/containers/styles/SignupForm.scss
index 6520c27..67da99f 100644
--- a/src/containers/styles/SignupForm.scss
+++ b/src/containers/styles/SignupForm.scss
@@ -32,16 +32,51 @@
       height: calc(9 * 100% / 10);
       background-color: #fdfcfc;
       padding: 20px;
+
+      .button-group {
+        display: flex;
+        gap: 20px;
+        width: 100%;
+        max-width: 400px;
+        justify-content: center;
+        margin: 10px 0;
+
+        .action-button {
+          flex: 1;
+          padding: 12px 20px;
+          background-color: white;
+          color: #3d3d3d;
+          border: solid 1.5px;
+          border-radius: 8px;
+          cursor: pointer;
+          font-size: 14px;
+          transition: background-color 0.2s;
+
+          &:hover {
+            background-color: rgb(231, 231, 231);
+          }
+        }
+      }
+
       @media (max-width: 767px) {
         gap: 10px;
+
+        .button-group {
+          gap: 10px;
+
+          .action-button {
+            padding: 10px 15px;
+            font-size: 13px;
+          }
+        }
       }
     }
+
     .re-login {
       text-decoration: underline;
     }
   }
 
-  // Media query for screens smaller than 768px
   @media (max-width: 767px) {
     flex-direction: column;