diff --git a/src/css/boardEpilogue.css b/src/css/boardEpilogue.css
index 960103d..ecdb5f2 100644
--- a/src/css/boardEpilogue.css
+++ b/src/css/boardEpilogue.css
@@ -328,4 +328,4 @@
         clear: both;
     }
 
-    
\ No newline at end of file
+   
\ No newline at end of file
diff --git a/src/css/myPage.css b/src/css/myPage.css
index acba587..f4f5e07 100644
--- a/src/css/myPage.css
+++ b/src/css/myPage.css
@@ -1,10 +1,13 @@
 .userInfo {
-    width: 15%;
+    width: 17%;
     height: 75%;
+    line-height: 2;
     background-color: white;
     border-style: solid;
     border-width: 1px;
     border-color: #e3dede;
+    margin-left: 14.5%;
+    float: left;
 }
 
 .userProfile {
@@ -12,6 +15,7 @@
     border-radius: 50%;
     margin-left: 15%;
     margin-top: 10%;
+    margin-bottom:10%;
 }
 
 #mpDIV{
@@ -22,8 +26,6 @@
     border-bottom-left-radius : 7px;
 }
 
-
-
 #bold{
     text-align: right;
     font-size: 20px;
@@ -56,6 +58,8 @@
     border-bottom-right-radius : 0px;
     border-bottom-left-radius : 0px;
     border-color: #e3dede;
+    float: left;
+    width: 24%;
 }
 
 .userTag{
@@ -86,12 +90,12 @@
     height: 1250px;
 }
 
-
 .point{
     border-top-style: solid;
     border-top-color: #e3dede;
     border-top-width: 1px;
 }
+
 #left{
     text-align: left;
     margin-left: 10%;
@@ -116,6 +120,9 @@
     margin-right: 3%;
 }
 
+
+/* 여기서부터 신뢰점수 리스트 */
+
 li{
     list-style: none;
 }
@@ -168,6 +175,15 @@ li{
     text-shadow:0.5px 0.5px 0.5px #000;
 }
 
+.trust_li{
+    display: flex;
+    width: 90%;
+    margin-left: 5%;
+    margin-bottom: 3%;
+}
+
+/* 여기까지 신뢰점수 리스트 */
+
 .last_join{
     width: 50%;
     margin-top: 3%;
@@ -180,4 +196,118 @@ li{
     border-top-right-radius : 50px;
     border-bottom-right-radius : 50px;
     border-bottom-left-radius : 50px;
+}
+
+.else{
+    margin-left: 15%;
+}
+
+.userProfile_info{
+    margin-bottom: 5%;
+}
+
+.fontsize25px{
+    font-size: 25px;
+}
+
+.fontsize20px{
+    font-size: 20px;
+}
+
+.fontsize15px{
+    font-size: 15px;
+}
+
+.inline_flex{
+    display: inline-flex;
+}
+
+.point_str{
+    display: inline-flex;
+    font-size: 25px; 
+    margin-left: 10%;
+}
+
+.point_num{
+    display: inline-flex;
+    font-size: 25px;
+}
+
+.support_list_main{
+    text-align: left;
+    font-size: 20px;
+    margin-left: 5%;
+}
+
+.top_string{
+    text-align: left;
+    margin-left: 3%;
+    font-size: 25px;
+}
+
+.mypage_maintool{
+    margin-left: 3%;
+    margin-right: 3%;
+    float: left;
+}
+
+.img_style{
+    width: 300px;
+    height: 180px;
+}
+
+.avis_title{
+    margin-bottom: 2%;
+    height: 30%;
+}
+
+.avis_body{
+    text-align: left;
+    font-size: 15px;
+}
+
+.undo_button{
+    text-align: right;
+    margin-right: 10%;
+    margin-bottom: 3%;
+}
+
+.img_style{
+    margin-left: 3%;
+    margin-right: 3%;
+    float: left;
+    height: 30%;
+}
+
+.exchange_button{
+    text-align: right;
+    margin-right: 10%;
+    margin-bottom: 3%;
+}
+
+.undo_button{
+    text-align: right;
+    margin-right: 10%;
+    margin-bottom: 3%;
+}
+
+.epilogue_div{
+    display: flex;
+    width: 90%;
+    margin-left: 5%;
+    margin-bottom: 3%;
+}
+
+.epilogue_title{
+    text-align: left;
+    margin-left: 3%;
+    font-size: 25px;
+}
+
+.left4{
+    margin-left: 4%;
+}
+
+.right{
+    text-align: right;
 }
\ No newline at end of file
diff --git a/src/css/myPageMain.css b/src/css/myPageMain.css
deleted file mode 100644
index c49d627..0000000
--- a/src/css/myPageMain.css
+++ /dev/null
@@ -1,97 +0,0 @@
-.userInfo{
-    width: 15%;
-    height: 80%;
-    text-align: center;
-    border-style: groove;
-    border-top-left-radius : 10px;
-    border-top-right-radius : 10px;
-    border-bottom-right-radius : 10px;
-    border-bottom-left-radius : 10px;
-    background-color: white;
-    border-style: groove;
-    border-width: 1px;
-}
-
-.userProfile {
-    width: 60%;
-    border-radius: 50%;
-    margin-left: 15%;
-    margin-top: 15%;
-}
-.listTool{
-    height: 20%;
-    width: 60%;
-    margin-left: 3%; 
-    background-color: white; 
-    float: left;
-    border-style: groove;
-    border-top-left-radius : 0px;
-    border-top-right-radius : 0px;
-    border-bottom-right-radius : 0px;
-    border-bottom-left-radius : 0px;
-}
-.option_tool{
-    background-color: black;
-}
-
-.supportList{
-    border-left-width:1px;
-    border-left-style:solid;
-    border-top-left-radius : 0px;
-    border-top-right-radius : 0px;
-    border-bottom-right-radius : 0px;
-    border-bottom-left-radius : 0px;
-}
-
-#mpDIV{
-    height: 80%;
-    text-align: center;
-    border-style: groove;
-    border-top-left-radius : 10px;
-    border-top-right-radius : 10px;
-    border-bottom-right-radius : 10px;
-    border-bottom-left-radius : 10px;
-
-}
-
-#left{
-    text-align: left;
-    margin-left: 10%;
-}
-
-#bold{
-    text-align: right;
-    font-size: 20px;
-}
-
-
-.userTag{
-    margin-left: 10%;
-    width: 80%;
-    border-style:groove;
-    border-top-left-radius : 10px;
-    border-top-right-radius : 10px;
-    border-bottom-right-radius : 10px;
-    border-bottom-left-radius : 10px;
-}
-
-.profile{
-    margin-top: 1%;
-    height: 80%;
-    width: 75%;
-    margin-left: 3%; 
-    float:left;
-    border-style: solid;
-    border-width: 1px;
-    border-color: #e3dede;
-    text-align: left;
-    border-top-left-radius : 7px;
-    border-top-right-radius : 7px;
-    border-bottom-right-radius : 7px;
-    border-bottom-left-radius : 7px;
-}
-
-.option_list{
-    list-style: none;
-    text-align: left;
-}
\ No newline at end of file
diff --git a/src/css/myPageOption.css b/src/css/myPageOption.css
deleted file mode 100644
index 512e114..0000000
--- a/src/css/myPageOption.css
+++ /dev/null
@@ -1,73 +0,0 @@
-.userInfo{
-    margin-top: 5%;
-    width: 15%;
-    height: 75%;
-    background-color: white;
-    border-style: groove;
-}
-
-.userProfile {
-    width: 60%;
-    border-radius: 50%;
-    margin-left: 15%;
-    margin-top: 15%;
-}
-
-#mpDIV{
-    text-align: center;
-    border-top-left-radius : 10px;
-    border-top-right-radius : 10px;
-    border-bottom-right-radius : 10px;
-    border-bottom-left-radius : 10px;
-}
-
-#left{
-    text-align: left;
-    margin-left: 10%;
-}
-
-#bold{
-    text-align: right;
-    font-size: 20px;
-}
-
-.supportList{
-    margin-top: 10%;
-    border-left-width:1px;
-    border-left-style:solid;
-    border-top-left-radius : 0px;
-    border-top-right-radius : 0px;
-    border-bottom-right-radius : 0px;
-    border-bottom-left-radius : 0px;
-}
-
-.userTag{
-    margin-left: 10%;
-    width: 80%;
-    border-style:groove;
-    border-top-left-radius : 10px;
-    border-top-right-radius : 10px;
-    border-bottom-right-radius : 10px;
-    border-bottom-left-radius : 10px;
-}
-
-.profile{
-    margin-top: 5.2%;
-    height: 80%;
-    width: 40%;
-    margin-left: 3%; 
-    background-color: white; 
-    float:left;
-    border-style: groove;
-}
-
-ul{
-    list-style: none;
-    text-align: left;
-}
-
-.optionButton{
-    float: right;
-    margin-right: 5%;
-    margin-top: 3%;
-}
\ No newline at end of file
diff --git a/src/mypage/myPageApplication.html b/src/mypage/myPageApplication.html
index 90600ca..daa78dc 100644
--- a/src/mypage/myPageApplication.html
+++ b/src/mypage/myPageApplication.html
@@ -89,94 +89,93 @@
 
 
         <br><Br><Br><br>
-    <div class="mypage_background">
-        <h1 style="margin-left: 15%;">ELSE</h1>
-        <!-- 개인정보 페이지 -->
-        <div class="mypage" id="mpDIV">
-            <!-- 왼쪽 개인정보 구성화면 -->
-            <div class="userInfo" style="width: 17%; line-height: 2; margin-left: 14.5%; background-color: white; float: left;" id="mpDIV">
-                <!-- 유저 프로필 사진 -->
-                <div class="userProfile" id="mpDIV">
-                    <img src="../img/pinggu.jpeg" class="userProfile" style="margin-bottom:10%;">
-                    <div class="userProfile_Upload" id="mpDIV">
+          <div class="mypage_background">
+            <h1 class="else">ELSE</h1>
+            <!-- 개인정보 페이지 -->
+            <div class="mypage" id="mpDIV">
+                <!-- 왼쪽 개인정보 구성화면 -->
+                <div class="userInfo" id="mpDIV">
+                    <!-- 유저 프로필 사진 -->
+                    <div class="userProfile" id="mpDIV">
+                        <img src="../img/pinggu.jpeg" class="userProfile">
+                        <div class="userProfile_Upload" id="mpDIV">
+                        </div>
+                    </div>
+                    <!-- 유저 개인정보 -->
+                    <div class="userProfile_info" id="mpDIV">
+                          <div class="userName" id="mpDIV">
+                              <h1>홍길동</h1>
+                              <p class="fontsize25px">hongGD@gmail.com</p> 
+                          </div>
+                          
+                          <div class="userPhoneNumber" id="mpDIV">
+                              <p class="fontsize25px">010-1234-5678</p> 
+                          </div>
+                          
+                              <h3 class="inline_flex">관심태그 : </h3>
+                              <p class="inline_flex"> 과일, 나눔, 체험</p>
+                          
                     </div>
-                </div>
-                <!-- 유저 개인정보 -->
-                <div style="margin-bottom: 5%;" id="mpDIV">
-                      <div class="userName" id="mpDIV">
-                          <h1>홍길동</h1>
-                          <p style="font-size: 20px;">hongGD@gmail.com</p> 
-                      </div>
-                      
-                      <div class="userPhoneNumber" id="mpDIV">
-                          <p style="font-size: 20px;">010-1234-5678</p> 
-                      </div>
-                      
-                          <h3 style="display: inline-flex">관심태그 : </h3>
-                          <p style="display: inline-flex"> 과일, 나눔, 체험</p>
-                      
-                </div>
                       
                       <!-- <hr class="userinfo_hr" style="border-color:#e3dede; border:3px 0 0 0"> -->
                       
                       <div class="point" style="text-align: left;">
-                          <p style="display: inline-flex; font-size: 25px;  margin-left: 10%;" id="bold">포인트 : </p>
-                          <p style="display: inline-flex; font-size: 25px;" id="bold"> 10,000 P</p>
+                        <p class="point_str" id="bold">포인트 : </p>
+                        <p class="point_num" id="bold"> 10,000 P</p>
+                    </div>
+                    
+                    <div class="point">
+                      <div class="list" id="left" id="mpDIV">
+                        <p class="fontsize25px">신청내역</p>
                       </div>
-                      
-                      <div class="point">
-                        <div class="list" id="left" id="mpDIV">
-                          <p style="font-size: 25px;">신청내역</p>
-                        </div>
-                        <div class="likeList" id="left" id="mpDIV">
-                          <p style="font-size: 25px;">관심목록</p>
-                        </div>
-                        <div class="undo" id="left" id="mpDIV">
-                          <p style="font-size: 25px;">신청취소</p>
-                        </div>
+                      <div class="likeList" id="left" id="mpDIV">
+                        <p class="fontsize25px">관심목록</p>
                       </div>
-                      <div class="point">
-                        <div class="userOption" id="left" id="mpDIV"> 
-                          <p style="font-size: 25px;">계정설정</p>
-                        </div>
+                      <div class="undo" id="left" id="mpDIV">
+                        <p class="fontsize25px">신청취소</p>
                       </div>
-                      <div id="mpDIV"></div>
-            </div>
-          <!-- 위쪽 지원현황 -->
-                  <div class="listTool" id="mpDIV">
-                      <h1 style="text-align: left; font-size: 20px; margin-left: 5%;">지원현황</h1>
-                      <div id="mpDIV">
-                          <div style="float: left; width: 24%;" id="mpDIV">
-                            <h1> 0</h1>
-                              <p style="font-size: 20px;"> 지원완료 </p>
-                          </div>
-                          <div class="supportList" style="float: left; width: 24%;">
-                            <h1>0</h1>
-                              <p style="font-size: 20px;"> 지원서 열람 </p> 
-                          </div>
-                          <div class="supportList" style="float: left; width: 24%;">
-                            <h1>2</h1>
-                              <p style="font-size: 20px;"> 참여이력 </p> 
-                          </div>
-                          <div class="supportList" style="float: left; width: 24%;">
-                            <h1>3</h1>
-                              <p style="font-size: 20px;"> 스크랩 </p> 
-                          </div>
-                      </div>
-                      <div></div>
-                      <div class="report">
+                    </div>
+                    <div class="point">
+                      <div class="userOption" id="left" id="mpDIV"> 
+                        <p class="fontsize25px">계정설정</p>
                       </div>
-                  </div>
+                    </div>
+                    <div id="mpDIV"></div>
+          </div>
+          <!-- 위쪽 지원현황 -->
+          <div class="listTool" id="mpDIV">
+            <h1 class="support_list_main">지원현황</h1>
+            <div id="mpDIV">
+                <div class="supportList">
+                  <h1> 0</h1>
+                    <p class="fontsize20px"> 지원완료 </p>
+                </div>
+                <div class="supportList">
+                  <h1>0</h1>
+                    <p class="fontsize20px"> 지원서 열람 </p> 
+                </div>
+                <div class="supportList">
+                  <h1>2</h1>
+                    <p class="fontsize20px"> 참여이력 </p> 
+                </div>
+                <div class="supportList">
+                  <h1>3</h1>
+                    <p class="fontsize20px"> 스크랩 </p> 
+                </div>
+            </div>
+            <div></div>
+            <div class="report">
+            </div>
+        </div>
                   <!-- 중앙에 들어갈 내용 -->
                     <div class="profile" id="mpDIV">
-                        <div style="margin-top: 5%; margin-bottom: 5%;"id="mpDIV">
-                        </div>
-                        <h3 style="text-align: left; margin-left: 3%; font-size: 25px;">홍길동님의 신청내역</h3>
+                      <h3 class="top_string">홍길동님의 신청내역</h3>
+
                         <div class="list_div">
-                        <div style="margin-left: 3%; margin-right: 3%;float: left;" id="mpDIV">
+                          <div class="mypage_maintool" id="mpDIV">
                             <img src="../img\성주참외.jpg" style="width: 300px; height: 200px;">
                         </div>
-                        <div style="margin-bottom: 2%; height: 30%;" id="mpDIV">
+                        <div class="avis_title" id="mpDIV">
                             <h2>참외 하우스 일손 돕기</h2>
                             <div>
                             <p style="text-align: left; font-size: 15px;">장소 : 충청남도 논산시 대교동
@@ -191,13 +190,13 @@ <h2>참외 하우스 일손 돕기</h2>
                         </div>
                       </div>
                       <div class="list_div">
-                        <div style="margin-left: 3%;margin-right: 3%; float: left; height: 30%;" id="mpDIV">
+                        <div class="mypage_maintool" id="mpDIV">
                             <img src="../img\해산물직판장.jpg" style="width: 300px; height: 200px;">
                         </div>
-                        <div style="margin-bottom: 2%; height: 30%;" id="mpDIV">
+                        <div class="avis_title" id="mpDIV">
                             <h2>해산물 직판장에서 해산물 운반</h2>
-                            <div style="margin-left: 3%;">
-                            <p style="text-align: left; font-size: 15px;">장소 : 경기도 화성시 궁평항
+                            <div >
+                            <p class="avis_body">장소 : 경기도 화성시 궁평항
                             <br> 날짜 : 2021년 10월 09일
                             <br> 업무시간 : 05시 ~ 11시
                             <br> 업무강도 : 상
@@ -208,13 +207,13 @@ <h2>해산물 직판장에서 해산물 운반</h2>
                         </div>
                       </div>
                       <div class="list_div">
-                        <div style="margin-left: 3%;margin-right: 3%; float: left; height: 30%;" id="mpDIV">
+                        <div class="mypage_maintool" id="mpDIV">
                             <img src="../img\blank.png" style="width: 300px; height: 160px;">
                         </div>
-                        <div style="margin-bottom: 2%; height: 30%;" id="mpDIV">
+                        <div class="avis_title" id="mpDIV">
                             <h2>새롭게 추가될 영역입니다.</h2>
-                            <div style="margin-left: 3%;">
-                            <p style="text-align: left; font-size: 20px;">장소 : -
+                            <div >
+                            <p class="avis_body">장소 : -
                             <br> 날짜 : -
                             <br> 업무시간 : -
                             <br> 업무강도 : -
@@ -224,13 +223,13 @@ <h2>새롭게 추가될 영역입니다.</h2>
                         </div>
                       </div>
                       <div class="list_div">
-                        <div style="margin-left: 3%;margin-right: 3%; float: left; height: 30%;" id="mpDIV">
+                        <div class="mypage_maintool" id="mpDIV">
                             <img src="../img\blank.png" style="width: 300px; height: 160px;">
                         </div>
-                        <div style="margin-bottom: 2%; height: 30%;" id="mpDIV">
+                        <div class="avis_title" id="mpDIV">
                             <h2>새롭게 추가될 영역입니다.</h2>
-                            <div style="margin-left: 3%;">
-                            <p style="text-align: left; font-size: 20px;">장소 : -
+                            <div>
+                            <p class="avis_body">장소 : -
                             <br> 날짜 : -
                             <br> 업무시간 : -
                             <br> 업무강도 : -
diff --git a/src/mypage/myPageMain.html b/src/mypage/myPageMain.html
index 065bf71..d56a712 100644
--- a/src/mypage/myPageMain.html
+++ b/src/mypage/myPageMain.html
@@ -89,92 +89,91 @@
 
 
         <br><Br><Br><br>
-    <div class="mypage_background">
-        <h1 style="margin-left: 15%;">ELSE</h1>
-        <!-- 개인정보 페이지 -->
-        <div class="mypage" id="mpDIV">
-            <!-- 왼쪽 개인정보 구성화면 -->
-            <div class="userInfo" style="width: 17%; line-height: 2; margin-left: 14.5%; background-color: white; float: left;" id="mpDIV">
-                <!-- 유저 프로필 사진 -->
-                <div class="userProfile" id="mpDIV">
-                    <img src="../img/pinggu.jpeg" class="userProfile" style="margin-bottom:10%;">
-                    <div class="userProfile_Upload" id="mpDIV">
+          <div class="mypage_background">
+            <h1 class="else">ELSE</h1>
+            <!-- 개인정보 페이지 -->
+            <div class="mypage" id="mpDIV">
+                <!-- 왼쪽 개인정보 구성화면 -->
+                <div class="userInfo" id="mpDIV">
+                    <!-- 유저 프로필 사진 -->
+                    <div class="userProfile" id="mpDIV">
+                        <img src="../img/pinggu.jpeg" class="userProfile">
+                        <div class="userProfile_Upload" id="mpDIV">
+                        </div>
+                    </div>
+                    <!-- 유저 개인정보 -->
+                    <div class="userProfile_info" id="mpDIV">
+                          <div class="userName" id="mpDIV">
+                              <h1>홍길동</h1>
+                              <p class="fontsize25px">hongGD@gmail.com</p> 
+                          </div>
+                          
+                          <div class="userPhoneNumber" id="mpDIV">
+                              <p class="fontsize25px">010-1234-5678</p> 
+                          </div>
+                          
+                              <h3 class="inline_flex">관심태그 : </h3>
+                              <p class="inline_flex"> 과일, 나눔, 체험</p>
+                          
                     </div>
-                </div>
-                <!-- 유저 개인정보 -->
-                <div style="margin-bottom: 5%;" id="mpDIV">
-                      <div class="userName" id="mpDIV">
-                          <h1>홍길동</h1>
-                          <p style="font-size: 20px;">hongGD@gmail.com</p> 
-                      </div>
-                      
-                      <div class="userPhoneNumber" id="mpDIV">
-                          <p style="font-size: 20px;">010-1234-5678</p> 
-                      </div>
-                      
-                          <h3 style="display: inline-flex">관심태그 : </h3>
-                          <p style="display: inline-flex"> 과일, 나눔, 체험</p>
-                      
-                </div>
                       
                       <!-- <hr class="userinfo_hr" style="border-color:#e3dede; border:3px 0 0 0"> -->
                       
                       <div class="point" style="text-align: left;">
-                          <p style="display: inline-flex; font-size: 25px;  margin-left: 10%;" id="bold">포인트 : </p>
-                          <p style="display: inline-flex; font-size: 25px;" id="bold"> 10,000 P</p>
+                        <p class="point_str" id="bold">포인트 : </p>
+                        <p class="point_num" id="bold"> 10,000 P</p>
+                    </div>
+                    
+                    <div class="point">
+                      <div class="list" id="left" id="mpDIV">
+                        <p class="fontsize25px">신청내역</p>
                       </div>
-                      
-                      <div class="point">
-                        <div class="list" id="left" id="mpDIV">
-                          <p style="font-size: 25px;">신청내역</p>
-                        </div>
-                        <div class="likeList" id="left" id="mpDIV">
-                          <p style="font-size: 25px;">관심목록</p>
-                        </div>
-                        <div class="undo" id="left" id="mpDIV">
-                          <p style="font-size: 25px;">신청취소</p>
-                        </div>
+                      <div class="likeList" id="left" id="mpDIV">
+                        <p class="fontsize25px">관심목록</p>
                       </div>
-                      <div class="point">
-                        <div class="userOption" id="left" id="mpDIV"> 
-                          <p style="font-size: 25px;">계정설정</p>
-                        </div>
+                      <div class="undo" id="left" id="mpDIV">
+                        <p class="fontsize25px">신청취소</p>
                       </div>
-                      <div id="mpDIV"></div>
-            </div>
-          <!-- 위쪽 지원현황 -->
-                  <div class="listTool" id="mpDIV">
-                      <h1 style="text-align: left; font-size: 20px; margin-left: 5%;">지원현황</h1>
-                      <div id="mpDIV">
-                          <div style="float: left; width: 24%;" id="mpDIV">
-                            <h1> 0</h1>
-                              <p style="font-size: 20px;"> 지원완료 </p>
-                          </div>
-                          <div class="supportList" style="float: left; width: 24%;">
-                            <h1>0</h1>
-                              <p style="font-size: 20px;"> 지원서 열람 </p> 
-                          </div>
-                          <div class="supportList" style="float: left; width: 24%;">
-                            <h1>2</h1>
-                              <p style="font-size: 20px;"> 참여이력 </p> 
-                          </div>
-                          <div class="supportList" style="float: left; width: 24%;">
-                            <h1>3</h1>
-                              <p style="font-size: 20px;"> 스크랩 </p> 
-                          </div>
-                      </div>
-                      <div></div>
-                      <div class="report">
+                    </div>
+                    <div class="point">
+                      <div class="userOption" id="left" id="mpDIV"> 
+                        <p class="fontsize25px">계정설정</p>
                       </div>
-                  </div>
+                    </div>
+                    <div id="mpDIV"></div>
+          </div>
+          <!-- 위쪽 지원현황 -->
+          <div class="listTool" id="mpDIV">
+            <h1 class="support_list_main">지원현황</h1>
+            <div id="mpDIV">
+                <div class="supportList">
+                  <h1> 0</h1>
+                    <p class="fontsize20px"> 지원완료 </p>
+                </div>
+                <div class="supportList">
+                  <h1>0</h1>
+                    <p class="fontsize20px"> 지원서 열람 </p> 
+                </div>
+                <div class="supportList">
+                  <h1>2</h1>
+                    <p class="fontsize20px"> 참여이력 </p> 
+                </div>
+                <div class="supportList">
+                  <h1>3</h1>
+                    <p class="fontsize20px"> 스크랩 </p> 
+                </div>
+            </div>
+            <div></div>
+            <div class="report">
+            </div>
+        </div>
                   <!-- 중앙에 들어갈 내용 -->
                   <div class="profile" id="mpDIV">
-                    <div style="margin-bottom: 5%;" id="mpDIV">
-                    </div>
-                    <h3 style="text-align: left; margin-left: 3%; font-size: 25px;">홍길동님, 환영합니다.</h3>
+                    <h3 class="top_string">홍길동님, 환영합니다.</h3>
+
                     <br>
                     <h2>신뢰점수</h2>
-                    <div style="display: flex; width: 90%; margin-left: 5%; margin-bottom: 3%;">
+                    <div class="trust_li">
                     <li class="li1">20 ℃</li>
                     <li class="li2">40 ℃</li>
                     <li class="li3">60 ℃</li>
@@ -188,24 +187,22 @@ <h1>최근 참여한 품앗이 확인하러 가기 </h1>
                     </div>
                 </div>
                 <div class="profile" id="mpDIV">
-                    <div style="margin-bottom: 5%;" id="mpDIV">
-                    </div>
-                    <h3 style="text-align: left; margin-left: 3%; font-size: 25px;">내가 남긴 후기</h3>
-                    <div style="display: flex; width: 90%; margin-left: 5%; margin-bottom: 3%;">
-                    <li style="margin-left: 4%;">
+                    <h3 class="epilogue_title">내가 남긴 후기</h3>
+                    <div class="epilogue_div">
+                    <li class="left4">
                         <img src="..\img\epliloge1.jpg" style="width: 250px; height: 300px;">
-                        <h3 style="text-align: left;">어촌 일손돕기</h3>
-                        <p style="text-align: left;">2022.10.22</p>
+                        <h3 class="avis_body">어촌 일손돕기</h3>
+                        <p class="avis_body">2022.10.22</p>
                     </li>
-                    <li style="margin-left: 4%;">
+                    <li class="left4">
                         <img src="..\img\epliloge2.jpg" style="width: 250px; height: 300px;">
-                        <h3 style="text-align: left;">봉사활동 후 친구들과</h3>
-                        <p style="text-align: left;">2022.09.17</p>
+                        <h3 class="avis_body">봉사활동 후 친구들과</h3>
+                        <p class="avis_body">2022.09.17</p>
                     </li>
-                    <li style="margin-left: 4%;">
+                    <li class="left4">
                         <img src="..\img\epliloge3.png" style="width: 250px; height: 300px;">
-                        <h3 style="text-align: left;">품앗이 멤버들</h3>
-                        <p style="text-align: left;">2022.09.05</p>
+                        <h3 class="avis_body">품앗이 멤버들</h3>
+                        <p class="avis_body">2022.09.05</p>
                     </li>
                     </div>
                 </div>
diff --git a/src/mypage/myPageOption.html b/src/mypage/myPageOption.html
index ad23d0d..193cfee 100644
--- a/src/mypage/myPageOption.html
+++ b/src/mypage/myPageOption.html
@@ -89,125 +89,123 @@
 
 
         <br><Br><Br><br>
-    <div class="mypage_background">
-        <h1 style="margin-left: 15%;">ELSE</h1>
-        <!-- 개인정보 페이지 -->
-        <div class="mypage" id="mpDIV">
-            <!-- 왼쪽 개인정보 구성화면 -->
-            <div class="userInfo" style="width: 17%; line-height: 2; margin-left: 14.5%; background-color: white; float: left;" id="mpDIV">
-                <!-- 유저 프로필 사진 -->
-                <div class="userProfile" id="mpDIV">
-                    <img src="../img/pinggu.jpeg" class="userProfile" style="margin-bottom:10%;">
-                    <div class="userProfile_Upload" id="mpDIV">
+          <div class="mypage_background">
+            <h1 class="else">ELSE</h1>
+            <!-- 개인정보 페이지 -->
+            <div class="mypage" id="mpDIV">
+                <!-- 왼쪽 개인정보 구성화면 -->
+                <div class="userInfo" id="mpDIV">
+                    <!-- 유저 프로필 사진 -->
+                    <div class="userProfile" id="mpDIV">
+                        <img src="../img/pinggu.jpeg" class="userProfile">
+                        <div class="userProfile_Upload" id="mpDIV">
+                        </div>
+                    </div>
+                    <!-- 유저 개인정보 -->
+                    <div class="userProfile_info" id="mpDIV">
+                          <div class="userName" id="mpDIV">
+                              <h1>홍길동</h1>
+                              <p class="fontsize25px">hongGD@gmail.com</p> 
+                          </div>
+                          
+                          <div class="userPhoneNumber" id="mpDIV">
+                              <p class="fontsize25px">010-1234-5678</p> 
+                          </div>
+                          
+                              <h3 class="inline_flex">관심태그 : </h3>
+                              <p class="inline_flex"> 과일, 나눔, 체험</p>
+                          
                     </div>
-                </div>
-                <!-- 유저 개인정보 -->
-                <div style="margin-bottom: 5%;" id="mpDIV">
-                      <div class="userName" id="mpDIV">
-                          <h1>홍길동</h1>
-                          <p style="font-size: 20px;">hongGD@gmail.com</p> 
-                      </div>
-                      
-                      <div class="userPhoneNumber" id="mpDIV">
-                          <p style="font-size: 20px;">010-1234-5678</p> 
-                      </div>
-                      
-                          <h3 style="display: inline-flex">관심태그 : </h3>
-                          <p style="display: inline-flex"> 과일, 나눔, 체험</p>
-                      
-                </div>
                       
                       <!-- <hr class="userinfo_hr" style="border-color:#e3dede; border:3px 0 0 0"> -->
                       
                       <div class="point" style="text-align: left;">
-                          <p style="display: inline-flex; font-size: 25px;  margin-left: 10%;" id="bold">포인트 : </p>
-                          <p style="display: inline-flex; font-size: 25px;" id="bold"> 10,000 P</p>
+                        <p class="point_str" id="bold">포인트 : </p>
+                        <p class="point_num" id="bold"> 10,000 P</p>
+                    </div>
+                    
+                    <div class="point">
+                      <div class="list" id="left" id="mpDIV">
+                        <p class="fontsize25px">신청내역</p>
                       </div>
-                      
-                      <div class="point">
-                        <div class="list" id="left" id="mpDIV">
-                          <p style="font-size: 25px;">신청내역</p>
-                        </div>
-                        <div class="likeList" id="left" id="mpDIV">
-                          <p style="font-size: 25px;">관심목록</p>
-                        </div>
-                        <div class="undo" id="left" id="mpDIV">
-                          <p style="font-size: 25px;">신청취소</p>
-                        </div>
+                      <div class="likeList" id="left" id="mpDIV">
+                        <p class="fontsize25px">관심목록</p>
                       </div>
-                      <div class="point">
-                        <div class="userOption" id="left" id="mpDIV"> 
-                          <p style="font-size: 25px;">계정설정</p>
-                        </div>
+                      <div class="undo" id="left" id="mpDIV">
+                        <p class="fontsize25px">신청취소</p>
                       </div>
-                      <div id="mpDIV"></div>
-            </div>
-          <!-- 위쪽 지원현황 -->
-                  <div class="listTool" id="mpDIV">
-                      <h1 style="text-align: left; font-size: 20px; margin-left: 5%;">지원현황</h1>
-                      <div id="mpDIV">
-                          <div style="float: left; width: 24%;" id="mpDIV">
-                            <h1> 0</h1>
-                              <p style="font-size: 20px;"> 지원완료 </p>
-                          </div>
-                          <div class="supportList" style="float: left; width: 24%;">
-                            <h1>0</h1>
-                              <p style="font-size: 20px;"> 지원서 열람 </p> 
-                          </div>
-                          <div class="supportList" style="float: left; width: 24%;">
-                            <h1>2</h1>
-                              <p style="font-size: 20px;"> 참여이력 </p> 
-                          </div>
-                          <div class="supportList" style="float: left; width: 24%;">
-                            <h1>3</h1>
-                              <p style="font-size: 20px;"> 스크랩 </p> 
-                          </div>
-                      </div>
-                      <div></div>
-                      <div class="report">
+                    </div>
+                    <div class="point">
+                      <div class="userOption" id="left" id="mpDIV"> 
+                        <p class="fontsize25px">계정설정</p>
                       </div>
-                  </div>
+                    </div>
+                    <div id="mpDIV"></div>
+          </div>
+          <!-- 위쪽 지원현황 -->
+          <div class="listTool" id="mpDIV">
+            <h1 class="support_list_main">지원현황</h1>
+            <div id="mpDIV">
+                <div class="supportList">
+                  <h1> 0</h1>
+                    <p class="fontsize20px"> 지원완료 </p>
+                </div>
+                <div class="supportList">
+                  <h1>0</h1>
+                    <p class="fontsize20px"> 지원서 열람 </p> 
+                </div>
+                <div class="supportList">
+                  <h1>2</h1>
+                    <p class="fontsize20px"> 참여이력 </p> 
+                </div>
+                <div class="supportList">
+                  <h1>3</h1>
+                    <p class="fontsize20px"> 스크랩 </p> 
+                </div>
+            </div>
+            <div></div>
+            <div class="report">
+            </div>
+        </div>
                   <!-- 중앙에 들어갈 내용 -->
                   <div class="profile" id="mpDIV">
-                    <div style="margin-bottom: 5%;" id="mpDIV">
-                    </div>
-                    <h3 style="text-align: left; margin-left: 3%;">홍길동님의 계정설정</h3>
+                    <h3 class="top_string">홍길동님의 계정설정</h3>
 
                     <div id="mpDIV">
                         <table>
                             <div class="option_list">
-                                <div style="text-align: right;"><button id="optionButton">정보수정</button></div>
+                                <div class="right"><button id="optionButton">정보수정</button></div>
                             <ul>
-                                <li><h4 style="font-size: 15px;">이름</h4></li>
-                                <li><h5 style="font-size: 20px;">홍길동</h5></li>
+                                <li><h4 class="fontsize15px">이름</h4></li>
+                                <li><h5 class="fontsize20px">홍길동</h5></li>
                             </ul>
                             </div>
                             <div class="option_list">
-                                <div style="text-align: right;"><button id="optionButton">정보수정</button></div>
+                                <div class="right"><button id="optionButton">정보수정</button></div>
                             <ul>
-                                <li><h4 style="font-size: 15px;">연락처</h4></li>
-                                <li><h5 style="font-size: 20px;">010-1234-5678</h5></li>
+                                <li><h4 class="fontsize15px">연락처</h4></li>
+                                <li><h5 class="fontsize20px">010-1234-5678</h5></li>
                             </ul>
                             </div>
                             <div class="option_list">
-                                <div style="text-align: right;"><button id="optionButton">정보수정</button></div>
+                                <div class="right"><button id="optionButton">정보수정</button></div>
                             <ul>
-                                <li><h4 style="font-size: 15px;">이메일</h4></li>
-                                <li><h5 style="font-size: 20px;">hongGD@gmail.com</h5></li>
+                                <li><h4 class="fontsize15px">이메일</h4></li>
+                                <li><h5 class="fontsize20px">hongGD@gmail.com</h5></li>
                             </ul>
                             </div>
                             <div class="option_list">
-                                <div style="text-align: right;"><button id="optionButton">정보수정</button></div>
+                                <div class="right"><button id="optionButton">정보수정</button></div>
                             <ul>
-                                <li><h4 style="font-size: 15px;">생년월일</h4></li>
-                                <li><h5 style="font-size: 20px;">19xx년 xx월 xx일</h5></li>
+                                <li><h4 class="fontsize15px">생년월일</h4></li>
+                                <li><h5 class="fontsize20px">19xx년 xx월 xx일</h5></li>
                             </ul>
                             </div>
                             <div class="option_list">
-                                <div style="text-align: right;"><button id="optionButton">정보수정</button></div>
+                                <div class="right"><button id="optionButton">정보수정</button></div>
                             <ul>
-                                <li><h4 style="font-size: 15px;">주소</h4></li>
-                                <li><h5 style="font-size: 20px;">경기도 시흥시 정왕동</h5></li>
+                                <li><h4 class="fontsize15px">주소</h4></li>
+                                <li><h5 class="fontsize20px">경기도 시흥시 정왕동</h5></li>
                             </ul>
                             </div>
                             <div class="option_list">
diff --git a/src/mypage/myPageScrap.html b/src/mypage/myPageScrap.html
index 6fb12f9..7a0e587 100644
--- a/src/mypage/myPageScrap.html
+++ b/src/mypage/myPageScrap.html
@@ -89,98 +89,96 @@
 
 
         <br><Br><Br><br>
-    <div class="mypage_background">
-        <h1 style="margin-left: 15%;">ELSE</h1>
-        <!-- 개인정보 페이지 -->
-        <div class="mypage" id="mpDIV">
-            <!-- 왼쪽 개인정보 구성화면 -->
-            <div class="userInfo" style="width: 17%; line-height: 2; margin-left: 14.5%; background-color: white; float: left;" id="mpDIV">
-                <!-- 유저 프로필 사진 -->
-                <div class="userProfile" id="mpDIV">
-                    <img src="../img/pinggu.jpeg" class="userProfile" style="margin-bottom:10%;">
-                    <div class="userProfile_Upload" id="mpDIV">
+          <div class="mypage_background">
+            <h1 class="else">ELSE</h1>
+            <!-- 개인정보 페이지 -->
+            <div class="mypage" id="mpDIV">
+                <!-- 왼쪽 개인정보 구성화면 -->
+                <div class="userInfo" id="mpDIV">
+                    <!-- 유저 프로필 사진 -->
+                    <div class="userProfile" id="mpDIV">
+                        <img src="../img/pinggu.jpeg" class="userProfile">
+                        <div class="userProfile_Upload" id="mpDIV">
+                        </div>
+                    </div>
+                    <!-- 유저 개인정보 -->
+                    <div class="userProfile_info" id="mpDIV">
+                          <div class="userName" id="mpDIV">
+                              <h1>홍길동</h1>
+                              <p class="fontsize25px">hongGD@gmail.com</p> 
+                          </div>
+                          
+                          <div class="userPhoneNumber" id="mpDIV">
+                              <p class="fontsize25px">010-1234-5678</p> 
+                          </div>
+                          
+                              <h3 class="inline_flex">관심태그 : </h3>
+                              <p class="inline_flex"> 과일, 나눔, 체험</p>
+                          
                     </div>
-                </div>
-                <!-- 유저 개인정보 -->
-                <div style="margin-bottom: 5%;" id="mpDIV">
-                      <div class="userName" id="mpDIV">
-                          <h1>홍길동</h1>
-                          <p style="font-size: 20px;">hongGD@gmail.com</p> 
-                      </div>
-                      
-                      <div class="userPhoneNumber" id="mpDIV">
-                          <p style="font-size: 20px;">010-1234-5678</p> 
-                      </div>
-                      
-                          <h3 style="display: inline-flex">관심태그 : </h3>
-                          <p style="display: inline-flex"> 과일, 나눔, 체험</p>
-                      
-                </div>
                       
                       <!-- <hr class="userinfo_hr" style="border-color:#e3dede; border:3px 0 0 0"> -->
                       
                       <div class="point" style="text-align: left;">
-                          <p style="display: inline-flex; font-size: 25px;  margin-left: 10%;" id="bold">포인트 : </p>
-                          <p style="display: inline-flex; font-size: 25px;" id="bold"> 10,000 P</p>
-                      </div>
-                      
-                      <div class="point">
-                        <div class="list" id="left" id="mpDIV">
-                          <p style="font-size: 25px;">신청내역</p>
-                        </div>
-                        <div class="likeList" id="left" id="mpDIV">
-                          <p style="font-size: 25px;">관심목록</p>
-                        </div>
-                        <div class="undo" id="left" id="mpDIV">
-                          <p style="font-size: 25px;">신청취소</p>
-                        </div>
+                        <p class="point_str" id="bold">포인트 : </p>
+                        <p class="point_num" id="bold"> 10,000 P</p>
+                    </div>
+                    
+                    <div class="point">
+                      <div class="list" id="left" id="mpDIV">
+                        <p class="fontsize25px">신청내역</p>
                       </div>
-                      <div class="point">
-                        <div class="userOption" id="left" id="mpDIV"> 
-                          <p style="font-size: 25px;">계정설정</p>
-                        </div>
+                      <div class="likeList" id="left" id="mpDIV">
+                        <p class="fontsize25px">관심목록</p>
                       </div>
-                      <div id="mpDIV"></div>
-            </div>
-          <!-- 위쪽 지원현황 -->
-                  <div class="listTool" id="mpDIV">
-                      <h1 style="text-align: left; font-size: 20px; margin-left: 5%;">지원현황</h1>
-                      <div id="mpDIV">
-                          <div style="float: left; width: 24%;" id="mpDIV">
-                            <h1> 0</h1>
-                              <p style="font-size: 20px;"> 지원완료 </p>
-                          </div>
-                          <div class="supportList" style="float: left; width: 24%;">
-                            <h1>0</h1>
-                              <p style="font-size: 20px;"> 지원서 열람 </p> 
-                          </div>
-                          <div class="supportList" style="float: left; width: 24%;">
-                            <h1>2</h1>
-                              <p style="font-size: 20px;"> 참여이력 </p> 
-                          </div>
-                          <div class="supportList" style="float: left; width: 24%;">
-                            <h1>3</h1>
-                              <p style="font-size: 20px;"> 스크랩 </p> 
-                          </div>
+                      <div class="undo" id="left" id="mpDIV">
+                        <p class="fontsize25px">신청취소</p>
                       </div>
-                      <div></div>
-                      <div class="report">
+                    </div>
+                    <div class="point">
+                      <div class="userOption" id="left" id="mpDIV"> 
+                        <p class="fontsize25px">계정설정</p>
                       </div>
-                  </div>
+                    </div>
+                    <div id="mpDIV"></div>
+          </div>
+          <!-- 위쪽 지원현황 -->
+          <div class="listTool" id="mpDIV">
+            <h1 class="support_list_main">지원현황</h1>
+            <div id="mpDIV">
+                <div class="supportList">
+                  <h1> 0</h1>
+                    <p class="fontsize20px"> 지원완료 </p>
+                </div>
+                <div class="supportList">
+                  <h1>0</h1>
+                    <p class="fontsize20px"> 지원서 열람 </p> 
+                </div>
+                <div class="supportList">
+                  <h1>2</h1>
+                    <p class="fontsize20px"> 참여이력 </p> 
+                </div>
+                <div class="supportList">
+                  <h1>3</h1>
+                    <p class="fontsize20px"> 스크랩 </p> 
+                </div>
+            </div>
+            <div></div>
+            <div class="report">
+            </div>
+        </div>
                   <!-- 중앙에 들어갈 내용 -->
                     <div class="profile" id="mpDIV">
-                        <div style="margin-top: 5%; margin-bottom: 5%;"id="mpDIV">
-                        </div>
-                        <h3 style="text-align: left; margin-left: 3%; font-size: 25px;">홍길동님의 관심목록</h3>
+                      <h3 class="top_string">홍길동님의 관심목록</h3>
 
                         <div class="list_div">
-                        <div style="margin-left: 3%; margin-right: 3%;float: left;" id="mpDIV">
+                        <div class="mypage_maintool" id="mpDIV">
                             <img src="../img\과수원.jpeg" style="width: 300px; height: 150px;">
                         </div>
-                        <div style="margin-bottom: 2%; height: 30%;" id="mpDIV">
+                        <div class="avis_title" id="mpDIV">
                             <h2>과수원 과일 수확 및 개별포장</h2>
                             <div>
-                                <p style="text-align: left; font-size: 15px;">장소 : 충청북도 영동군 영동면
+                                <p class="avis_body">장소 : 충청북도 영동군 영동면
                                     <br> 날짜 : 20xx년 xx월 xx일
                                     <br> 업무시간 : 11시 ~ 16시
                                     <br> 업무강도 : 중
@@ -191,13 +189,13 @@ <h2>과수원 과일 수확 및 개별포장</h2>
                       </div>
 
                       <div class="list_div">
-                        <div style="margin-left: 3%;margin-right: 3%; float: left; height: 30%;" id="mpDIV">
+                        <div class="mypage_maintool" id="mpDIV">
                             <img src="../img\딸기농장.jpeg" style="width: 300px; height: 150px;">
                         </div>
-                        <div style="margin-bottom: 2%; height: 30%;" id="mpDIV">
+                        <div class="avis_title" id="mpDIV">
                             <h2>딸기농장 딸기 체험 안내</h2>
                             <div>
-                                <p style="text-align: left; font-size: 15px;">장소 : 충청남도 논산시 대교동
+                                <p class="avis_body">장소 : 충청남도 논산시 대교동
                                     <br> 날짜 : 20xx년 xx월 xx일
                                     <br> 업무시간 : 09시 ~ 18시
                                     <br> 업무강도 : 하
@@ -207,13 +205,13 @@ <h2>딸기농장 딸기 체험 안내</h2>
                         </div>
                       </div>
                       <div class="list_div">
-                        <div style="margin-left: 3%;margin-right: 3%; float: left; height: 30%;" id="mpDIV">
+                        <div class="mypage_maintool" id="mpDIV">
                             <img src="../img\강사님.jpg" style="width: 300px; height: 160px;">
                         </div>
-                        <div style="margin-bottom: 2%; height: 30%;" id="mpDIV">
+                        <div class="avis_title" id="mpDIV">
                             <h2>KOTEA IT 웹개발</h2>
                             <div>
-                                <p style="text-align: left; font-size: 15px;">장소 : 서울시 강남구 역삼동
+                                <p class="avis_body">장소 : 서울시 강남구 역삼동
                                     <br> 날짜 : 2022년 10월 24일
                                     <br> 업무시간 : 19시 ~ 22시
                                     <br> 업무강도 : 상
@@ -223,13 +221,13 @@ <h2>KOTEA IT 웹개발</h2>
                         </div>
                       </div>
                       <div class="list_div">
-                        <div style="margin-left: 3%;margin-right: 3%; float: left; height: 30%;" id="mpDIV">
+                        <div class="mypage_maintool" id="mpDIV">
                             <img src="../img\blank.png" style="width: 300px; height: 160px;">
                         </div>
-                        <div style="margin-bottom: 2%; height: 30%;" id="mpDIV">
+                        <div class="avis_title" id="mpDIV">
                             <h2>새롭게 추가될 영역입니다.</h2>
-                            <div style="margin-left: 3%;">
-                            <p style="text-align: left; font-size: 20px;">장소 : -
+                            <div>
+                            <p class="avis_body">장소 : -
                             <br> 날짜 : -
                             <br> 업무시간 : -
                             <br> 업무강도 : -
diff --git a/src/mypage/myPageUndo.html b/src/mypage/myPageUndo.html
index 2a45216..91c8d20 100644
--- a/src/mypage/myPageUndo.html
+++ b/src/mypage/myPageUndo.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>신청내역</title>
+    <title>취소신청</title>
     <link rel="stylesheet" href="..\css\myPage.css" crossorigin="anonymous"/>
 
         <!--header 관련 css-->
@@ -89,116 +89,115 @@
 
 
         <br><Br><Br><br>
-    <div class="mypage_background">
-        <h1 style="margin-left: 15%;">ELSE</h1>
-        <!-- 개인정보 페이지 -->
-        <div class="mypage" id="mpDIV">
-            <!-- 왼쪽 개인정보 구성화면 -->
-            <div class="userInfo" style="width: 17%; line-height: 2; margin-left: 14.5%; background-color: white; float: left;" id="mpDIV">
-                <!-- 유저 프로필 사진 -->
-                <div class="userProfile" id="mpDIV">
-                    <img src="../img/pinggu.jpeg" class="userProfile" style="margin-bottom:10%;">
-                    <div class="userProfile_Upload" id="mpDIV">
+          <div class="mypage_background">
+            <h1 class="else">ELSE</h1>
+            <!-- 개인정보 페이지 -->
+            <div class="mypage" id="mpDIV">
+                <!-- 왼쪽 개인정보 구성화면 -->
+                <div class="userInfo" id="mpDIV">
+                    <!-- 유저 프로필 사진 -->
+                    <div class="userProfile" id="mpDIV">
+                        <img src="../img/pinggu.jpeg" class="userProfile">
+                        <div class="userProfile_Upload" id="mpDIV">
+                        </div>
+                    </div>
+                    <!-- 유저 개인정보 -->
+                    <div class="userProfile_info" id="mpDIV">
+                          <div class="userName" id="mpDIV">
+                              <h1>홍길동</h1>
+                              <p class="fontsize25px">hongGD@gmail.com</p> 
+                          </div>
+                          
+                          <div class="userPhoneNumber" id="mpDIV">
+                              <p class="fontsize25px">010-1234-5678</p> 
+                          </div>
+                          
+                              <h3 class="inline_flex">관심태그 : </h3>
+                              <p class="inline_flex"> 과일, 나눔, 체험</p>
+                          
                     </div>
-                </div>
-                <!-- 유저 개인정보 -->
-                <div style="margin-bottom: 5%;" id="mpDIV">
-                      <div class="userName" id="mpDIV">
-                          <h1>홍길동</h1>
-                          <p style="font-size: 20px;">hongGD@gmail.com</p> 
-                      </div>
-                      
-                      <div class="userPhoneNumber" id="mpDIV">
-                          <p style="font-size: 20px;">010-1234-5678</p> 
-                      </div>
-                      
-                          <h3 style="display: inline-flex">관심태그 : </h3>
-                          <p style="display: inline-flex"> 과일, 나눔, 체험</p>
-                      
-                </div>
                       
                       <!-- <hr class="userinfo_hr" style="border-color:#e3dede; border:3px 0 0 0"> -->
                       
                       <div class="point" style="text-align: left;">
-                          <p style="display: inline-flex; font-size: 25px;  margin-left: 10%;" id="bold">포인트 : </p>
-                          <p style="display: inline-flex; font-size: 25px;" id="bold"> 10,000 P</p>
+                        <p class="point_str" id="bold">포인트 : </p>
+                        <p class="point_num" id="bold"> 10,000 P</p>
+                    </div>
+                    
+                    <div class="point">
+                      <div class="list" id="left" id="mpDIV">
+                        <p class="fontsize25px">신청내역</p>
                       </div>
-                      
-                      <div class="point">
-                        <div class="list" id="left" id="mpDIV">
-                          <p style="font-size: 25px;">신청내역</p>
-                        </div>
-                        <div class="likeList" id="left" id="mpDIV">
-                          <p style="font-size: 25px;">관심목록</p>
-                        </div>
-                        <div class="undo" id="left" id="mpDIV">
-                          <p style="font-size: 25px;">신청취소</p>
-                        </div>
+                      <div class="likeList" id="left" id="mpDIV">
+                        <p class="fontsize25px">관심목록</p>
                       </div>
-                      <div class="point">
-                        <div class="userOption" id="left" id="mpDIV"> 
-                          <p style="font-size: 25px;">계정설정</p>
-                        </div>
+                      <div class="undo" id="left" id="mpDIV">
+                        <p class="fontsize25px">신청취소</p>
                       </div>
-                      <div id="mpDIV"></div>
-            </div>
-          <!-- 위쪽 지원현황 -->
-                  <div class="listTool" id="mpDIV">
-                      <h1 style="text-align: left; font-size: 20px; margin-left: 5%;">지원현황</h1>
-                      <div id="mpDIV">
-                          <div style="float: left; width: 24%;" id="mpDIV">
-                            <h1> 0</h1>
-                              <p style="font-size: 20px;"> 지원완료 </p>
-                          </div>
-                          <div class="supportList" style="float: left; width: 24%;">
-                            <h1>0</h1>
-                              <p style="font-size: 20px;"> 지원서 열람 </p> 
-                          </div>
-                          <div class="supportList" style="float: left; width: 24%;">
-                            <h1>2</h1>
-                              <p style="font-size: 20px;"> 참여이력 </p> 
-                          </div>
-                          <div class="supportList" style="float: left; width: 24%;">
-                            <h1>3</h1>
-                              <p style="font-size: 20px;"> 스크랩 </p> 
-                          </div>
-                      </div>
-                      <div></div>
-                      <div class="report">
+                    </div>
+                    <div class="point">
+                      <div class="userOption" id="left" id="mpDIV"> 
+                        <p class="fontsize25px">계정설정</p>
                       </div>
-                  </div>
+                    </div>
+                    <div id="mpDIV"></div>
+          </div>
+          <!-- 위쪽 지원현황 -->
+          <div class="listTool" id="mpDIV">
+            <h1 class="support_list_main">지원현황</h1>
+            <div id="mpDIV">
+                <div class="supportList">
+                  <h1> 0</h1>
+                    <p class="fontsize20px"> 지원완료 </p>
+                </div>
+                <div class="supportList">
+                  <h1>0</h1>
+                    <p class="fontsize20px"> 지원서 열람 </p> 
+                </div>
+                <div class="supportList">
+                  <h1>2</h1>
+                    <p class="fontsize20px"> 참여이력 </p> 
+                </div>
+                <div class="supportList">
+                  <h1>3</h1>
+                    <p class="fontsize20px"> 스크랩 </p> 
+                </div>
+            </div>
+            <div></div>
+            <div class="report">
+            </div>
+        </div>
                   <!-- 중앙에 들어갈 내용 -->
                     <div class="profile" id="mpDIV">
-                        <div style="margin-top: 5%; margin-bottom: 5%;"id="mpDIV">
-                        </div>
-                        <h3 style="text-align: left; margin-left: 3%; font-size: 25px;">홍길동님의 신청내역</h3>
+                        <h3 class="top_string">홍길동님의 신청내역</h3>
+
                         <div class="list_div">
-                        <div style="margin-left: 3%; margin-right: 3%;float: left;" id="mpDIV">
+                          <div class="mypage_maintool" id="mpDIV">
                             <img src="../img\포도.jpg" style="width: 300px; height: 200px;">
                         </div>
-                        <div style="margin-bottom: 2%; height: 30%;" id="mpDIV">
+                        <div class="avis_title" id="mpDIV">
                             <h2>포도 및 샤인머스켓 포장</h2>
                             <div>
-                            <p style="text-align: left; font-size: 15px;">장소 : 경기도 안산시 대부북동
+                            <p class="avis_body">장소 : 경기도 안산시 대부북동
                                 <br> 날짜 : 20xx년 xx월 xx일
                                 <br> 업무시간 : 13시 ~ 17시
                                 <br> 업무강도 : 하
                                 <br> 업무내용 : 하우스에서 수확한 포도와 샤인머스켓을
                                 <br> 종이포장지로 포장한 후 포장박스에 담기</p>
                           </div>
-                          <div style="text-align: right; margin-right: 10%; margin-bottom: 3%;" id="mpDIV">
+                          <div class="undo_button" id="mpDIV">
                             <button>신청 취소</button>
                             </div>
                         </div>
                       </div>
                       <div class="list_div">
-                        <div style="margin-left: 3%;margin-right: 3%; float: left; height: 30%;" id="mpDIV">
+                        <div class="mypage_maintool"id="mpDIV">
                             <img src="../img\blank.png" style="width: 300px; height: 160px;">
                         </div>
-                        <div style="margin-bottom: 2%; height: 30%;" id="mpDIV">
+                        <div class="avis_title" id="mpDIV">
                             <h2>새롭게 추가될 영역입니다.</h2>
-                            <div style="margin-left: 3%;">
-                            <p style="text-align: left; font-size: 20px;">장소 : -
+                            <div>
+                            <p class="avis_body">장소 : -
                             <br> 날짜 : -
                             <br> 업무시간 : -
                             <br> 업무강도 : -
@@ -208,13 +207,13 @@ <h2>새롭게 추가될 영역입니다.</h2>
                         </div>
                       </div>
                       <div class="list_div">
-                        <div style="margin-left: 3%;margin-right: 3%; float: left; height: 30%;" id="mpDIV">
+                        <div class="mypage_maintool" id="mpDIV">
                             <img src="../img\blank.png" style="width: 300px; height: 160px;">
                         </div>
-                        <div style="margin-bottom: 2%; height: 30%;" id="mpDIV">
+                        <div class="avis_title" id="mpDIV">
                             <h2>새롭게 추가될 영역입니다.</h2>
-                            <div style="margin-left: 3%;">
-                            <p style="text-align: left; font-size: 20px;">장소 : -
+                            <div>
+                            <p class="avis_body">장소 : -
                             <br> 날짜 : -
                             <br> 업무시간 : -
                             <br> 업무강도 : -
@@ -224,13 +223,13 @@ <h2>새롭게 추가될 영역입니다.</h2>
                         </div>
                       </div>
                       <div class="list_div">
-                        <div style="margin-left: 3%;margin-right: 3%; float: left; height: 30%;" id="mpDIV">
+                        <div class="mypage_maintool" id="mpDIV">
                             <img src="../img\blank.png" style="width: 300px; height: 160px;">
                         </div>
-                        <div style="margin-bottom: 2%; height: 30%;" id="mpDIV">
+                        <div class="avis_title" id="mpDIV">
                             <h2>새롭게 추가될 영역입니다.</h2>
-                            <div style="margin-left: 3%;">
-                            <p style="text-align: left; font-size: 20px;">장소 : -
+                            <div>
+                            <p class="avis_body">장소 : -
                             <br> 날짜 : -
                             <br> 업무시간 : -
                             <br> 업무강도 : -
diff --git a/src/point/point.html b/src/point/point.html
index 51a1718..ecfc482 100644
--- a/src/point/point.html
+++ b/src/point/point.html
@@ -90,77 +90,77 @@
 
         <br><Br><Br><br>
     <div class="mypage_background">
-        <h1 style="margin-left: 15%;">ELSE</h1>
+        <h1 class="else">ELSE</h1>
         <!-- 개인정보 페이지 -->
         <div class="mypage" id="mpDIV">
             <!-- 왼쪽 개인정보 구성화면 -->
-            <div class="userInfo" style="width: 17%; line-height: 2; margin-left: 14.5%; background-color: white; float: left;" id="mpDIV">
+            <div class="userInfo" id="mpDIV">
                 <!-- 유저 프로필 사진 -->
                 <div class="userProfile" id="mpDIV">
-                    <img src="../img/pinggu.jpeg" class="userProfile" style="margin-bottom:10%;">
+                    <img src="../img/pinggu.jpeg" class="userProfile">
                     <div class="userProfile_Upload" id="mpDIV">
                     </div>
                 </div>
                 <!-- 유저 개인정보 -->
-                <div style="margin-bottom: 5%;" id="mpDIV">
+                <div class="userProfile_info" id="mpDIV">
                       <div class="userName" id="mpDIV">
                           <h1>홍길동</h1>
-                          <p style="font-size: 20px;">hongGD@gmail.com</p> 
+                          <p class="fontsize25px">hongGD@gmail.com</p> 
                       </div>
                       
                       <div class="userPhoneNumber" id="mpDIV">
-                          <p style="font-size: 20px;">010-1234-5678</p> 
+                          <p class="fontsize25px">010-1234-5678</p> 
                       </div>
                       
-                          <h3 style="display: inline-flex">관심태그 : </h3>
-                          <p style="display: inline-flex"> 과일, 나눔, 체험</p>
+                          <h3 class="inline_flex">관심태그 : </h3>
+                          <p class="inline_flex"> 과일, 나눔, 체험</p>
                       
                 </div>
                       
                       <!-- <hr class="userinfo_hr" style="border-color:#e3dede; border:3px 0 0 0"> -->
                       
                       <div class="point" style="text-align: left;">
-                          <p style="display: inline-flex; font-size: 25px;  margin-left: 10%;" id="bold">포인트 : </p>
-                          <p style="display: inline-flex; font-size: 25px;" id="bold"> 10,000 P</p>
+                          <p class="point_str" id="bold">포인트 : </p>
+                          <p class="point_num" id="bold"> 10,000 P</p>
                       </div>
                       
                       <div class="point">
                         <div class="list" id="left" id="mpDIV">
-                          <p style="font-size: 25px;">신청내역</p>
+                          <p class="fontsize25px">신청내역</p>
                         </div>
                         <div class="likeList" id="left" id="mpDIV">
-                          <p style="font-size: 25px;">관심목록</p>
+                          <p class="fontsize25px">관심목록</p>
                         </div>
                         <div class="undo" id="left" id="mpDIV">
-                          <p style="font-size: 25px;">신청취소</p>
+                          <p class="fontsize25px">신청취소</p>
                         </div>
                       </div>
                       <div class="point">
                         <div class="userOption" id="left" id="mpDIV"> 
-                          <p style="font-size: 25px;">계정설정</p>
+                          <p class="fontsize25px">계정설정</p>
                         </div>
                       </div>
                       <div id="mpDIV"></div>
             </div>
           <!-- 위쪽 지원현황 -->
                   <div class="listTool" id="mpDIV">
-                      <h1 style="text-align: left; font-size: 20px; margin-left: 5%;">지원현황</h1>
+                      <h1 class="support_list_main">지원현황</h1>
                       <div id="mpDIV">
-                          <div style="float: left; width: 24%;" id="mpDIV">
+                          <div class="supportList">
                             <h1> 0</h1>
-                              <p style="font-size: 20px;"> 지원완료 </p>
+                              <p class="fontsize20px"> 지원완료 </p>
                           </div>
-                          <div class="supportList" style="float: left; width: 24%;">
+                          <div class="supportList">
                             <h1>0</h1>
-                              <p style="font-size: 20px;"> 지원서 열람 </p> 
+                              <p class="fontsize20px"> 지원서 열람 </p> 
                           </div>
-                          <div class="supportList" style="float: left; width: 24%;">
+                          <div class="supportList">
                             <h1>2</h1>
-                              <p style="font-size: 20px;"> 참여이력 </p> 
+                              <p class="fontsize20px"> 참여이력 </p> 
                           </div>
-                          <div class="supportList" style="float: left; width: 24%;">
+                          <div class="supportList">
                             <h1>3</h1>
-                              <p style="font-size: 20px;"> 스크랩 </p> 
+                              <p class="fontsize20px"> 스크랩 </p> 
                           </div>
                       </div>
                       <div></div>
@@ -169,24 +169,23 @@ <h1>3</h1>
                   </div>
                   <!-- 중앙에 들어갈 내용 -->
                     <div class="profile" id="mpDIV">
-                        <div style="margin-top: 5%; margin-bottom: 5%;"id="mpDIV">
-                        </div>
-                        <h3 style="text-align: left; margin-left: 3%; font-size: 25px;">홍길동님의 포인트</h3>
+                        <h3 class="top_string">홍길동님의 포인트</h3>
 
                         <div class="list_div">
-                        <div style="margin-left: 3%; margin-right: 3%;float: left;" id="mpDIV">
-                            <img src="../img\bookcupon.jpg" style="width: 300px; height: 200px;">
+                        <div class="mypage_maintool" id="mpDIV">
+                            <img class="img_style" src="../img\bookcupon.jpg" style="width: 300px; height: 200px;">
                         </div>
-                        <div style="margin-bottom: 2%; height: 30%;" id="mpDIV">
+                        <div class="avis_title" id="mpDIV">
                             <h2>도서문화상품권</h2>
                             <div>
-                            <p style="text-align: left; font-size: 20px;">
+                            <p class="avis_body">
                                 <br>
                                 도서문화 상품권 교환하기
                                 <br>
                                 5,000원권 혹은 10,000원권으로 교환 가능합니다.
                                 <br>
-                                    
+                                    <br>
+                                    <br>
                             </p>
                             <div style="text-align: right; margin-right: 10%; margin-bottom: 3%;" id="mpDIV">
                                 <button>교환 신청</button>
@@ -196,19 +195,20 @@ <h2>도서문화상품권</h2>
                       </div>
 
                       <div class="list_div">
-                        <div style="margin-left: 3%;margin-right: 3%; float: left; height: 30%;" id="mpDIV">
+                        <div class="mypage_maintool" id="mpDIV">
                             <img src="../img\cupon.jpg" style="width: 300px; height: 200px;">
                         </div>
-                        <div style="margin-bottom: 2%; height: 30%;" id="mpDIV">
+                        <div class="avis_title" id="mpDIV">
                             <h2>문화상품권</h2>
                             <div>
-                                <p style="text-align: left; font-size: 20px;">
+                                <p class="avis_body">
                                     <br>
                                     문화상품권 교환하기
                                     <br>
                                     5,000원권 혹은 10,000원권으로 교환 가능합니다.
                                     <br>
-                                        
+                                      <br>
+                                      <br>
                                 </p>
                                 <div style="text-align: right; margin-right: 10%; margin-bottom: 3%;" id="mpDIV">
                                     <button>교환 신청</button>
@@ -217,34 +217,34 @@ <h2>문화상품권</h2>
                         </div>
                       </div>
                       <div class="list_div">
-                        <div style="margin-left: 3%;margin-right: 3%; float: left; height: 30%;" id="mpDIV">
+                        <div class="mypage_maintool" id="mpDIV">
                             <img src="../img\localCurrency.jpg" style="width: 300px; height: 160px;">
                         </div>
-                        <div style="margin-bottom: 2%; height: 30%;" id="mpDIV">
+                        <div class="avis_title" id="mpDIV">
                             <h2>지역화폐</h2>
                             <div>
-                                <p style="text-align: left; font-size: 20px;">
+                                <p class="avis_body">
                                     <br>
                                     지역화폐 교환하기
                                     <br>
                                     1,000원권, 5,000원권, 10,000원권으로 교환 가능합니다.
-                                    
+                                    <br>
                                         
                                 </p>
-                                <div style="text-align: right; margin-right: 10%; margin-bottom: 3%;" id="mpDIV">
+                                <div class="exchange_button"id="mpDIV">
                                     <button>교환 신청</button>
                                     </div>
                               </div>
                         </div>
                       </div>
                       <div class="list_div">
-                        <div style="margin-left: 3%;margin-right: 3%; float: left; height: 30%;" id="mpDIV">
+                        <div class="mypage_maintool" id="mpDIV">
                             <img src="../img\blank.png" style="width: 300px; height: 160px;">
                         </div>
-                        <div style="margin-bottom: 2%; height: 30%;" id="mpDIV">
+                        <div class="avis_title" id="mpDIV">
                             <h2>새롭게 추가될 영역입니다.</h2>
-                            <div style="margin-left: 3%;">
-                            <p style="text-align: left; font-size: 20px;">장소 : -
+                            <div>
+                            <p class="avis_body">장소 : -
                             <br> 날짜 : -
                             <br> 업무시간 : -
                             <br> 업무강도 : -