diff --git a/frontend/sweet-red-beans/src/components/DMPage/DMDetail.js b/frontend/sweet-red-beans/src/components/DMPage/DMDetail.js
index 0d1b89f..5468cf8 100644
--- a/frontend/sweet-red-beans/src/components/DMPage/DMDetail.js
+++ b/frontend/sweet-red-beans/src/components/DMPage/DMDetail.js
@@ -138,6 +138,7 @@ const DMDetail = ({selectedRoom}) => {
                 addMessage(newMessage);
             })
         });
+        setComplete(selectedRoom.is_complete)
     }, [selectedRoom])
 
     //신뢰도 +1 주는 버튼
@@ -280,15 +281,14 @@ const DMDetail = ({selectedRoom}) => {
 
     return (
         <>
-        <Modal open={modalOpen} close={closeModal} header="로그인">
-        <form>
-            신고사유를 적어주세요
+        <Modal open={modalOpen} close={closeModal} header="신고하기">
+        <form className={style.modal}>
+            <div>신고사유를 적어주세요</div>
             <div>
-            <textarea value={reportContent} onChange={reportContentChange} style={{width:"400px", height:"200px", cols:"20"}}></textarea>
-            <button onClick={reportClick}>신고하기</button>
+                <textarea value={reportContent} onChange={reportContentChange}></textarea>
             </div>
+            <button onClick={reportClick}>신고하기</button>
         </form>
-
         </Modal>
         
         <div className={style.chatcontainer}>
@@ -341,8 +341,8 @@ const DMDetail = ({selectedRoom}) => {
             , [contents, imgBase64, myNickname])}
 
 
-            
             {complete ? <div className={style.complete}>거래가 완료되었습니다.</div> : null}
+            
             <div className={style.writeArea}>
                 <label htmlFor="upload_file"></label>
                 <input type="file" onChange={handleChangeFile} id="upload_file" style={{display:"none"}}/>
diff --git a/frontend/sweet-red-beans/src/components/EventPage/EventPage.js b/frontend/sweet-red-beans/src/components/EventPage/EventPage.js
index 6aa2949..d0b9f73 100644
--- a/frontend/sweet-red-beans/src/components/EventPage/EventPage.js
+++ b/frontend/sweet-red-beans/src/components/EventPage/EventPage.js
@@ -121,11 +121,12 @@ const EventPage = () => {
                     <button onClick={interestClick} className={sort==="관심도순"?style.selected:style.notSelected}>관심도순</button>
                 </div>
                 <div className={style.cinemafilter}>
-                    <select onChange={selectChange}>
+                    <select onChange={selectChange} value={selected}>
                         {selectList.map((item) => (
                             <option value={item} key={item}>{item}</option>
                         ))}
                     </select>
+                    <span className={style.filterArrow}></span>
                 </div>
                 
 
diff --git a/frontend/sweet-red-beans/src/components/InformationShares/InformationSharePage.js b/frontend/sweet-red-beans/src/components/InformationShares/InformationSharePage.js
index 7a94188..931e845 100644
--- a/frontend/sweet-red-beans/src/components/InformationShares/InformationSharePage.js
+++ b/frontend/sweet-red-beans/src/components/InformationShares/InformationSharePage.js
@@ -131,32 +131,49 @@ const InformationSharePage = () => {
         <>
         <div className={style.whiteBox}>
             <div className={style.filterArea}>
-                <select onChange={cinemaNameChange}>
-                    {cinemaNames.map((item) => (
-                        <option value={item} key={item}>{item}</option>
-                    ))}
-                </select>
+                <div className={style.filter}>
+                    <select onChange={cinemaNameChange} value={cinemaName}>
+                        {cinemaNames.map((item) => (
+                            <option value={item} key={item}>{item}</option>
+                        ))}
+                    </select>
+                    <span className={style.filterArrow}></span>
+                </div>
+                
                 {
-                    cinemaNameSelected ? <select onChange={cinemaAreaChange}>
-                    {cinemaAreas.map((item) => (
-                        <option value={item} key={item}>{item}</option>
-                    ))}
-                </select> : null
+                    cinemaNameSelected ? 
+                    <div className={style.filter}>
+                        <select onChange={cinemaAreaChange} value={cinemaArea}>
+                        {cinemaAreas.map((item) => (
+                            <option value={item} key={item}>{item}</option>
+                        ))}
+                        </select> 
+                        <span className={style.filterArrow}></span>
+                    </div>
+                : null
                 }
 
                 {
-                    cinemaAreaSelected ? <select onChange={cinemaBranchChange}>
-                    {cinemaBranches.map((item) => (
-                        <option value={item} key={item}>{item}</option>
-                    ))}
-                </select> : null
+                    cinemaAreaSelected ? 
+                    <div className={style.filter}>
+                        <select onChange={cinemaBranchChange} value={cinemaBranch}>
+                        {cinemaBranches.map((item) => (
+                            <option value={item} key={item}>{item}</option>
+                        ))}
+                        </select>
+                        <span className={style.filterArrow}></span>
+                    </div>
+                : null
                 }
 
-                <select onChange={sortChange}>
-                    {sorts.map((item) => (
-                        <option value={item} key={item}>{item}</option>
-                    ))}
-                </select>
+                <div className={style.filter}>
+                    <select onChange={sortChange} value={sort}>
+                        {sorts.map((item) => (
+                            <option value={item} key={item}>{item}</option>
+                        ))}
+                    </select>
+                    <span className={style.filterArrow}></span>
+                </div>
 
                 <div className={style.search}>
                     <input type="text" placeholder="검색" onChange={searchChange} value={search} size="5"></input>
diff --git a/frontend/sweet-red-beans/src/components/InformationShares/InformationShareWritePage.js b/frontend/sweet-red-beans/src/components/InformationShares/InformationShareWritePage.js
index 8907dc3..32490b6 100644
--- a/frontend/sweet-red-beans/src/components/InformationShares/InformationShareWritePage.js
+++ b/frontend/sweet-red-beans/src/components/InformationShares/InformationShareWritePage.js
@@ -221,25 +221,39 @@ const InformationShareWritePage = () => {
             <div className={style.titleArea}>
                 <input type="text" value={title} onChange={titleChange} placeholder="제목"/>
                 <div className={style.filterArea}>
-                    <select onChange={cinemaNameChange}>
-                    {cinemaNames.map((item) => (
-                        <option value={item} key={item}>{item}</option>
-                    ))}
-                    </select>
+                    <div className={style.filter}>
+                        <select onChange={cinemaNameChange} value={cinemaName}>
+                            {cinemaNames.map((item) => (
+                                <option value={item} key={item}>{item}</option>
+                            ))}
+                        </select>
+                        <span className={style.filterArrow}></span>
+                    </div>
+
                     {
-                        cinemaNameSelected ? <select onChange={cinemaAreaChange}>
-                        {cinemaAreas.map((item) => (
-                            <option value={item} key={item}>{item}</option>
-                        ))}
-                    </select> : null
+                        cinemaNameSelected ? 
+                        <div className={style.filter}>
+                            <select onChange={cinemaAreaChange} value={cinemaArea}>
+                            {cinemaAreas.map((item) => (
+                                <option value={item} key={item}>{item}</option>
+                            ))}
+                            </select> 
+                            <span className={style.filterArrow}></span>
+                        </div>
+                    : null
                     }
 
                     {
-                        cinemaAreaSelected ? <select onChange={cinemaBranchChange}>
-                        {cinemaBranches.map((item) => (
-                            <option value={item} key={item}>{item}</option>
-                        ))}
-                    </select> : null
+                        cinemaAreaSelected ? 
+                        <div className={style.filter}>
+                            <select onChange={cinemaBranchChange} value={cinemaBranch}>
+                            {cinemaBranches.map((item) => (
+                                <option value={item} key={item}>{item}</option>
+                            ))}
+                            </select>
+                            <span className={style.filterArrow}></span>
+                        </div>
+                    : null
                     }
                 </div>
             </div>
diff --git a/frontend/sweet-red-beans/src/components/MainPage/MainMovieEvents.js b/frontend/sweet-red-beans/src/components/MainPage/MainMovieEvents.js
index 078135b..04b9b2a 100644
--- a/frontend/sweet-red-beans/src/components/MainPage/MainMovieEvents.js
+++ b/frontend/sweet-red-beans/src/components/MainPage/MainMovieEvents.js
@@ -30,6 +30,7 @@ const MainMovieEvents = ({cinemaName}) => {
     , []);
 
     useEffect(()=>{
+        console.log(events);
         events.map((item, index) => {
             if(item.cinema_name === cinemaName){
                 filterMovieList.push(item)
@@ -50,8 +51,8 @@ const MainMovieEvents = ({cinemaName}) => {
         arrows:true,
         infinite: true,
         speed: 500,
-        slidesToShow: 2,
-        slidesToScroll: 2,
+        slidesToShow: 3,
+        slidesToScroll: 3,
     };
     return (
         <>
diff --git a/frontend/sweet-red-beans/src/components/MainPage/MovieThumbnail.js b/frontend/sweet-red-beans/src/components/MainPage/MovieThumbnail.js
index 4b6dd18..9d4d2f8 100644
--- a/frontend/sweet-red-beans/src/components/MainPage/MovieThumbnail.js
+++ b/frontend/sweet-red-beans/src/components/MainPage/MovieThumbnail.js
@@ -37,7 +37,7 @@ const MovieThumbnail = ({thisEvent}) => {
 
     return(
         <>
-        <div className={style.container}>
+        <div className={style.maincontainer}>
             <Link to = {`/event/${thisEvent.event_id}`} style={{ textDecoration: 'none' }}>
             <div className={style.thumbnailArea}>
                 <img src={thisEvent.thumbnail_url}/>
diff --git a/frontend/sweet-red-beans/src/components/Modals/Modal.js b/frontend/sweet-red-beans/src/components/Modals/Modal.js
index c524781..e1b2996 100644
--- a/frontend/sweet-red-beans/src/components/Modals/Modal.js
+++ b/frontend/sweet-red-beans/src/components/Modals/Modal.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../css/modal.css';
+import style from '../../css/Modal/modal.module.css';
 
 const Modal = (props) => {
   // 열기, 닫기, 모달 헤더 텍스트를 부모로부터 받아옴
@@ -7,19 +7,19 @@ const Modal = (props) => {
 
   return (
     // 모달이 열릴때 openModal 클래스가 생성된다.
-    <div className={open ? 'openModal modal' : 'modal'}>
+    <div className={open ? `${style.openModal} ${style.modal}` : style.modal}>
       {open ? (
-        <section className='section'>
-            <div className='buttonArea'>
-              <button className="topClose" onClick={close}>
+        <section>
+            <div className={style.buttonArea}>
+              <button onClick={close}>
                 {' '}
                 &times;{' '}
               </button>
             </div>
-            <div className='header'>
+            <header>
               {header}
-            </div>
-          <div className='main'>{props.children}</div>
+            </header>
+          <main>{props.children}</main>
           <footer>
             {/* <button className="close" onClick={close}>
               close
diff --git a/frontend/sweet-red-beans/src/components/Modals/ReportModal.js b/frontend/sweet-red-beans/src/components/Modals/ReportModal.js
index 407d6f7..817da40 100644
--- a/frontend/sweet-red-beans/src/components/Modals/ReportModal.js
+++ b/frontend/sweet-red-beans/src/components/Modals/ReportModal.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../css/ReportModal.css';
+import style from '../../css/Modal/ReportModal.module.css';
 
 const ReportModal = (props) => {
   // 열기, 닫기, 모달 헤더 텍스트를 부모로부터 받아옴
@@ -7,23 +7,19 @@ const ReportModal = (props) => {
 
   return (
     // 모달이 열릴때 openModal 클래스가 생성된다.
-    <div className={open ? 'openModal modal' : 'modal'}>
+    <div className={open ? `${style.openModal} ${style.modal}` : style.modal}>
       {open ? (
         <section>
-          <header>
-            {header}
-            <button className="close" onClick={close}>
-              {' '}
-              &times;{' '}
-            </button>
-          </header>
+            <div className={style.buttonArea}>
+              <button onClick={close}>
+                {' '}
+                &times;{' '}
+              </button>
+            </div>
+            <header>
+              {header}
+            </header>
           <main>{props.children}</main>
-          <footer>
-            <button className="close" onClick={close}>
-              {' '}
-              close{' '}
-            </button>
-          </footer>
         </section>
       ) : null}
     </div>
diff --git a/frontend/sweet-red-beans/src/components/Modals/TransactionWriteModal.js b/frontend/sweet-red-beans/src/components/Modals/TransactionWriteModal.js
index 8c32fa0..3d28e8f 100644
--- a/frontend/sweet-red-beans/src/components/Modals/TransactionWriteModal.js
+++ b/frontend/sweet-red-beans/src/components/Modals/TransactionWriteModal.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import '../../css/TransactionPage/TransactionWriteModal.css';
+import style from '../../css/Modal/TransactionWriteModal.module.css';
 
 const TransactionWriteModal = (props) => {
   // 열기, 닫기, 모달 헤더 텍스트를 부모로부터 받아옴
@@ -7,23 +7,19 @@ const TransactionWriteModal = (props) => {
 
   return (
     // 모달이 열릴때 openModal 클래스가 생성된다.
-    <div className={open ? 'openModal modal' : 'modal'}>
+    <div className={open ? `${style.openModal} ${style.modal}` : style.modal}>
       {open ? (
         <section>
-          <header>
-            {header}
-            <button className="close" onClick={close}>
-              {' '}
-              &times;{' '}
-            </button>
-          </header>
+            <div className={style.buttonArea}>
+              <button onClick={close}>
+                {' '}
+                &times;{' '}
+              </button>
+            </div>
+            <header>
+              {header}
+            </header>
           <main>{props.children}</main>
-          <footer>
-            <button className="close" onClick={close}>
-              {' '}
-              close{' '}
-            </button>
-          </footer>
         </section>
       ) : null}
     </div>
diff --git a/frontend/sweet-red-beans/src/components/MyPage/MyPageNormal.js b/frontend/sweet-red-beans/src/components/MyPage/MyPageNormal.js
index b8c8161..67a1610 100644
--- a/frontend/sweet-red-beans/src/components/MyPage/MyPageNormal.js
+++ b/frontend/sweet-red-beans/src/components/MyPage/MyPageNormal.js
@@ -296,7 +296,7 @@ const MyPageNomal = () => {
                     <input type="file" onChange={handleChangeFile} id="upload_file" style={{display:"none"}}/>
 
                     <div className={style.nicknameChangeArea} id="nicknameChangeArea">
-                        <input type="text" placeholder="닉네임" onChange={nicknameModifyChange} value={nicknameModify}/>
+                        <input type="text" placeholder="닉네임" onChange={nicknameModifyChange} value={nicknameModify} maxlength="15"/>
                         <div></div>
                     </div>
 
diff --git a/frontend/sweet-red-beans/src/components/TransactionPage/TransactionDetail.js b/frontend/sweet-red-beans/src/components/TransactionPage/TransactionDetail.js
index 2a05ba3..a3f2880 100644
--- a/frontend/sweet-red-beans/src/components/TransactionPage/TransactionDetail.js
+++ b/frontend/sweet-red-beans/src/components/TransactionPage/TransactionDetail.js
@@ -231,65 +231,74 @@ const TransactionDetail = ({transaction}) => {
 
     return(
         <>
-        <Modal open={modalOpen} close={closeModal} header="로그인">
-        <form>
-            신고사유를 적어주세요
+        <Modal open={modalOpen} close={closeModal} header="신고하기">
+        <form className={style.modal}>
+            <div>신고사유를 적어주세요</div>
             <div>
-            <textarea value={reportContent} onChange={reportContentChange} style={{width:"400px", height:"200px", cols:"20"}}></textarea>
-            <button onClick={reportClick}>신고하기</button>
+                <textarea value={reportContent} onChange={reportContentChange}></textarea>
             </div>
+            <button onClick={reportClick}>신고하기</button>
         </form>
         </Modal>
 
         <div className={style.transactionBox}>
-            <div>
-                <img src={transaction.profile_url} className={style.profileImage}/>
-                <div className={style.nickname}>
-                    {transaction.nickname} 
-                </div>
-                <div className={style.reliability}>
-                <div className={style.reliabilityIcon}></div>
-                <div className={style.reliabilityCount}>
-                {transaction.reliability}
+
+            <div className={style.profileArea}>
+                <img src={transaction.profile_url}/>
+                <div className={style.nickname}>{transaction.nickname}</div>
+                <div className={style.reliabilityArea}>{transaction.reliability}</div>
+            </div>
+
+            <div className={style.statusArea}>
+            {
+                transaction.is_mine
+                ? 
+                <div onClick={statusClick} className={status==='진행중'?style.proceedingButton : style.doneButton}>
+                    <div>{status==='진행중'? "진행중" : "마감"}</div>
                 </div>
+                :
+                <div className={status === '진행중' ? style.proceeding : style.done}>
+                {status === '진행중' ? <div>진행중</div> : <div>마감</div>}
                 </div>
-
-                {status === '진행중' ? <div className={style.proceeding}>진행중</div> : null}
-                {status === '마감' ? <div className={style.done}>마감</div> : null}
-                
-                <div className={style.statusButtonArea}>
-                {transaction.is_mine ? (<div>
+            }
+            </div>
+            
+            {/* <div className={style.statusButtonArea}>
+                {transaction.is_mine ? 
+                <div>
                     <button className={style.statusButton} onClick={statusClick}>{status==="진행중" ? "마감으로 바꾸기" : "진행중으로 바꾸기"}</button>
-                    </div>
-                ) : 
-                <div className={style.notMine}>
-                    <button onClick={openModal} className={style.reportButton}></button>
-                    {status === '진행중' ? <button onClick={DMClick} className={style.DMButton}></button> :
-                    <button disabled={true} className={style.DMButton}></button>}
-                    
-                    <button onClick={likeClick} className={style.likeButton}>{likeStatus ? "" : ""}</button>
-                </div>}
                 </div>
+                : 
+                null}
+            </div> */}
                 
-            </div>
-            <div>
-
-                {transaction.is_mine ? (
-                    <div className={style.deleteArea}>
-                    <button onClick={deleteClick} className={style.deleteButton}></button>
-                    </div>
-                ) : null}
-            </div>
             
             <div className={style.content}>
                 {transaction.content}
             </div>
 
-            <div className={style.date}>
-            {
-                parseDate(transaction.written_date)
-            }
+            <div className={style.bottomArea}>
+                <div>
+                    {transaction.is_mine ? 
+                        <div className={style.deleteArea}>
+                            <button onClick={deleteClick}></button>
+                        </div>
+                    : 
+                    <div className={style.notMineButtonArea}>
+                        <button onClick={openModal}></button>
+                        {status === '진행중' ? <button onClick={DMClick}></button> :
+                        <button disabled={true}></button>}
+                        <button onClick={likeClick}>{likeStatus ? "" : ""}</button>
+                    </div>}
+                </div>
+
+                <div className={style.date}>
+                {
+                    parseDate(transaction.written_date)
+                }
+                </div>
             </div>
+
         </div>
 
         
diff --git a/frontend/sweet-red-beans/src/components/TransactionPage/TransactionPage.js b/frontend/sweet-red-beans/src/components/TransactionPage/TransactionPage.js
index 875edc3..55dab3a 100644
--- a/frontend/sweet-red-beans/src/components/TransactionPage/TransactionPage.js
+++ b/frontend/sweet-red-beans/src/components/TransactionPage/TransactionPage.js
@@ -64,12 +64,7 @@ const TransactionPage = () => {
 
     //검색버튼 눌렀을 때
     const searchClick = () => {
-      if (search === "") {
-        alert("검색할 단어를 입력해주세요");
-      }
-      else {
         setSearchWords([...searchWords, search]);
-      }
     }
 
     //전체보기 눌렀을 때
@@ -271,36 +266,34 @@ const TransactionPage = () => {
         <>
         <div className={style.wrap}>
         <div className={style.writeBox}>
-          
-          <div>
           <div className={style.profileArea}>
-            <img src={profileImage} className={style.profileImage}/>
-            <div className={style.nickname}>
-            {nickname}
-            </div>
+            <img src={profileImage}/>
+            <div>{nickname}</div>
           </div>
+
           <div className={style.writeButtonArea}>
-            <button onClick={writeClick} className={style.writeButton}>작성하기</button>
-          </div>
-          <textarea value={content} onChange={contentChange} className={style.writeTextArea}></textarea>
+            <button onClick={writeClick}>작성하기</button>
           </div>
+          <textarea value={content} onChange={contentChange}></textarea>
         </div>
 
         <div className={style.transactionsBox}>
           <div className={style.topBox}>
-            <button onClick={allClick} className={isProceed ? style.notSelected : style.proceedSelected}>전체</button>
-            <button onClick={proceedClick} className={isProceed ? style.proceedSelected : style.notSelected}>진행중</button>
-            <div className={style.filterBox}>
-              <select onChange={searchSortChange} className={style.filter}>
-                  <option value="글내용">글내용</option>
+            <div className={style.proceedfilter}>
+                <button onClick={allClick} className={isProceed?style.notSelected:style.selected}>전체</button>
+                <button onClick={proceedClick} className={!isProceed?style.notSelected:style.selected}>진행중</button>
+            </div>
+            <div className={style.filter}>
+              <select onChange={searchSortChange} value={searchSort}>
+                  <option value="글내용">내용</option>
                   <option value="작성자">작성자</option>
               </select>
-              <span className={style.filterArrow}>▼</span>
+              <span className={style.filterArrow}></span>
             </div>
             <div className={style.search}>
-                <input type="text" placeholder="검색" value={search} onChange={searchChange} className={style.searchArea}/>
+                <input type="text" placeholder="검색" value={search} onChange={searchChange}/>
                 <div className={style.underline}></div>
-                <button onClick={searchClick} className={style.searchButton}></button>
+                <button onClick={searchClick}></button>
             </div>
           </div>
           
@@ -310,13 +303,18 @@ const TransactionPage = () => {
 
           <button className={BtnStatus ? [style.writeBtn, style.active].join(" ") : style.writeBtn} onClick={openModal}>글쓰기</button>
         </div>
-
-
-
         
         <TransactionWriteModal open={modalOpen} close={closeModal} header="글 작성하기">
-          <textarea value={content} onChange={contentChange} style={{width:"400px", height:"200px", cols:"20"}}></textarea>
-          <button onClick={writeClick}>글 쓰기</button>
+          <form className={style.modal}>
+              <div>
+                <img src={profileImage} className={style.profileImage}/>
+                <div className={style.nickname}>{nickname}</div>
+              </div>
+              <div>
+                  <textarea value={content} onChange={contentChange}></textarea>
+              </div>
+              <button onClick={writeClick}>글 쓰기</button>
+          </form>
         </TransactionWriteModal>
 
         <div>
diff --git a/frontend/sweet-red-beans/src/css/DMPage/DMDetail.module.css b/frontend/sweet-red-beans/src/css/DMPage/DMDetail.module.css
index e69a301..a7bb6a8 100644
--- a/frontend/sweet-red-beans/src/css/DMPage/DMDetail.module.css
+++ b/frontend/sweet-red-beans/src/css/DMPage/DMDetail.module.css
@@ -1,3 +1,41 @@
+.modal {
+    text-align: center;
+}
+
+.modal > div:nth-child(1) {
+    text-align: left;
+    padding: 10px 0px 10px 30px;
+    font-size: 16px;
+}
+
+.modal > div > textarea{
+    width: 520px;
+    height: 200px;
+    resize: none;
+    outline: none;
+    padding:20px;
+    box-sizing: border-box;
+    border-radius: 10px;
+    border: #C4C4C4 1px solid;
+    font-size: 14px;
+}
+
+.modal > div > textarea:focus{
+    border: #5a5a5a 2px solid;
+}
+
+.modal > button {
+    margin-top: 30px;
+    cursor: pointer;
+    border: none;
+    background-color: #F23333;
+    color: white;
+    font-size: 16px;
+    border-radius: 10px;
+    height: 50px;
+    width: 110px;
+}
+
 .chatcontainer {
     position: relative;
     display: inline-block;
diff --git a/frontend/sweet-red-beans/src/css/EventPage/EventPage.module.css b/frontend/sweet-red-beans/src/css/EventPage/EventPage.module.css
index e082581..e847c1c 100644
--- a/frontend/sweet-red-beans/src/css/EventPage/EventPage.module.css
+++ b/frontend/sweet-red-beans/src/css/EventPage/EventPage.module.css
@@ -34,48 +34,76 @@
   border: none;
   font-size: 14px;
   margin-left: 5px;
+  transition: transform 200ms ease;
+}
+
+.notSelected:hover {
+  transform: scale(1.2);
 }
 
 .selected{
-  font-size: 16px;
+  cursor:default;
+  font-size: 18px;
   color: #f23333;
 }
 .selected::before {
   display: inline-block;
   margin-right: 5px;
   content: "";
-  width: 20px;
-  height: 20px;
+  width: 15px;
+  height: 15px;
   background: url("../../img/check.png");
   background-repeat: no-repeat;
   background-size: 100%;
 }
 
-.cinemafilter {
+.cinemafilter{
   display: inline-block;
   position: relative;
   width: 100px;
-  height: 45px;
+  height: 35px;
   border-bottom: 3px solid #C4C4C4;
-  margin-left: 20px;
-  vertical-align: bottom;
+  margin-left: 30px;
 }
 
 .cinemafilter > select {
+  font-size: 14px;
   cursor: pointer;
   width: inherit;
-  height: 35px;
+  height: inherit;
   background: transparent;
   border: 0 none;
   outline: 0 none;
   padding: 0 8px;
-  position: absolute;
+  position: relative;
   z-index: 3;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
-  left: 0px;
-  bottom: 0px;
+}
+
+.cinemafilter > select > option {
+  color: #5a5a5a;
+  padding: 10px 0px 10px 0px;
+  font-size: 16px;
+}
+
+.filterArrow {
+  position: absolute; 
+  bottom: 7px; 
+  right: 0; 
+  z-index: 1; 
+  width: 20px; 
+  height: 20px;
+  transition: transform 300ms ease-in-out;
+  background: url("../../img/down-arrow.png");
+  background-repeat: no-repeat;
+  background-size: 70%;
+  background-position: 50% 50%;
+}
+
+.cinemafilter > select:focus + .filterArrow{
+  transform: rotate(180deg);
 }
 
 .search {
@@ -84,7 +112,7 @@
     text-align: right;
     width: 200px;
     height: 45px;
-    margin-left: 20px;
+    margin-left: 30px;
     border-bottom: 3px solid #C4C4C4;
     vertical-align: bottom;
     right: 0px;
diff --git a/frontend/sweet-red-beans/src/css/InformationSharePage/InformationShareDetailPage.module.css b/frontend/sweet-red-beans/src/css/InformationSharePage/InformationShareDetailPage.module.css
index db08077..a1e388b 100644
--- a/frontend/sweet-red-beans/src/css/InformationSharePage/InformationShareDetailPage.module.css
+++ b/frontend/sweet-red-beans/src/css/InformationSharePage/InformationShareDetailPage.module.css
@@ -59,7 +59,7 @@
     display: inline-block;
     top:50%;
     transform: translate(0, -50%);
-    font-size: 0.88rem;
+    font-size: 14px;
 }
 
 /* 닉네임 */
diff --git a/frontend/sweet-red-beans/src/css/InformationSharePage/InformationSharePage.module.css b/frontend/sweet-red-beans/src/css/InformationSharePage/InformationSharePage.module.css
index 8f24278..29148a5 100644
--- a/frontend/sweet-red-beans/src/css/InformationSharePage/InformationSharePage.module.css
+++ b/frontend/sweet-red-beans/src/css/InformationSharePage/InformationSharePage.module.css
@@ -16,30 +16,73 @@
     margin-bottom: 45px;
 }
 
-
-.filterArea select {
+.filter{
     display: inline-block;
     position: relative;
-    border: none;
-    outline: none;
+    width: 100px;
+    height: 35px;
+    border-bottom: 3px solid #C4C4C4;
+    margin-left: 30px;
+    text-align: left;
+  }
+
+.filter > select {
+    font-size: 14px;
+    cursor: pointer;
+    width: inherit;
+    height: inherit;
+    background: transparent;
+    border: 0 none;
+    outline: 0 none;
+    padding: 0 8px;
+    position: relative;
+    z-index: 3;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
-    border-bottom: 3px solid #C4C4C4;
-    padding: 10px;
-    margin-left: 20px;
+    overflow:hidden;
+    text-overflow: ellipsis; 
+    white-space:nowrap;
 }
 
-.filterArea select option {
-    color: #656565;
-    padding: 3px 0;
+
+.filter > select > option {
+    color: #5a5a5a;
+    padding: 10px 0px 10px 0px;
+    font-size: 16px;
+}
+  
+.filterArrow {
+    position: absolute; 
+    bottom: 7px; 
+    right: 0; 
+    z-index: 1; 
+    width: 20px; 
+    height: 20px;
+    transition: transform 300ms ease-in-out;
+    background: url("../../img/down-arrow.png");
+    background-repeat: no-repeat;
+    background-size: 70%;
+    background-position: 50% 50%;
+}
+  
+.filter > select:focus + .filterArrow{
+    transform: rotate(180deg);
+}
+
+.filter:nth-child(2) {
+    width: 130px;
 }
 
-.filterArea select option:focus {
-    color: #f23333;
-    padding: 3px 0;
+.filter:nth-child(3) {
+    width: 160px;
 }
 
+.filter:nth-child(3) > select {
+    width: 140px;
+}
+
+
 .search {
     display: inline-block;
     position: relative;
@@ -95,8 +138,31 @@
     height: 25px;
     display: flex;
     background: url('../../img/search.png');
-    background-size: cover;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-position: 50% 50%;
     border: 0 none;
     outline: 0 none;
     background-color: white;
-}
\ No newline at end of file
+}
+
+/* .search button::before {
+    display: flex;
+    position: absolute;
+    content: "";
+    width: 30px;
+    height: 30px;
+    background-color: #5a5a5a;
+    background-size: 30px 30px;
+    z-index: 2;
+} */
+
+/* .search button::before:hover {
+    display: flex;
+    position: absolute;
+    content: "";
+    width: 30px;
+    height: 30px;
+    background-color: #5a5a5a;
+    background-size: 30px 30px;
+} */
\ No newline at end of file
diff --git a/frontend/sweet-red-beans/src/css/InformationSharePage/InformationShareWritePage.module.css b/frontend/sweet-red-beans/src/css/InformationSharePage/InformationShareWritePage.module.css
index 244ac5b..2865dbf 100644
--- a/frontend/sweet-red-beans/src/css/InformationSharePage/InformationShareWritePage.module.css
+++ b/frontend/sweet-red-beans/src/css/InformationSharePage/InformationShareWritePage.module.css
@@ -6,7 +6,7 @@
     border-radius: 20px;
     border: 1px solid #C4C4C4;
     box-sizing: border-box;
-    padding: 80px 100px 30px 100px;
+    padding: 100px 100px 50px 100px;
     margin-bottom: 100px;
     margin-top: 50px;
 }
@@ -45,25 +45,75 @@
 
 .filterArea {
     position: absolute;
-    right: -20px;
+    right: 0px;
     bottom: 0px;
     display: inline-block;
 }
 
-.filterArea > select {
+.filter{
+    display: inline-block;
+    position: relative;
+    width: 100px;
+    height: 35px;
+    border-bottom: 3px solid #C4C4C4;
+    margin-left: 30px;
+    text-align: left;
+  }
+
+.filter > select {
+    font-size: 14px;
     cursor: pointer;
-    border: none;
-    outline: none;
+    width: inherit;
+    height: inherit;
+    background: transparent;
+    border: 0 none;
+    outline: 0 none;
+    padding: 0 8px;
+    position: relative;
+    z-index: 3;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
-    border-bottom: 3px solid #C4C4C4;
-    padding: 10px;
-    margin-right: 20px;
+    overflow:hidden;
+    text-overflow: ellipsis; 
+    white-space:nowrap;
 }
 
-.filterArea > select:nth-child(1) {
-    
+
+.filter > select > option {
+    color: #5a5a5a;
+    padding: 10px 0px 10px 0px;
+    font-size: 16px;
+}
+  
+.filterArrow {
+    position: absolute; 
+    bottom: 7px; 
+    right: 0; 
+    z-index: 1; 
+    width: 20px; 
+    height: 20px;
+    transition: transform 300ms ease-in-out;
+    background: url("../../img/down-arrow.png");
+    background-repeat: no-repeat;
+    background-size: 70%;
+    background-position: 50% 50%;
+}
+  
+.filter > select:focus + .filterArrow{
+    transform: rotate(180deg);
+}
+
+.filter:nth-child(2) {
+    width: 130px;
+}
+
+.filter:nth-child(3) {
+    width: 160px;
+}
+
+.filter:nth-child(3) > select {
+    width: 140px;
 }
 
 .contentArea {
diff --git a/frontend/sweet-red-beans/src/css/MainPage/MovieThumbnail.module.css b/frontend/sweet-red-beans/src/css/MainPage/MovieThumbnail.module.css
index 5abf800..c2edb57 100644
--- a/frontend/sweet-red-beans/src/css/MainPage/MovieThumbnail.module.css
+++ b/frontend/sweet-red-beans/src/css/MainPage/MovieThumbnail.module.css
@@ -1,4 +1,4 @@
-.container{
+.maincontainer{
     position: relative;
     text-align: left;
     width: 280px;
diff --git a/frontend/sweet-red-beans/src/css/Modal/ReportModal.module.css b/frontend/sweet-red-beans/src/css/Modal/ReportModal.module.css
new file mode 100644
index 0000000..756f044
--- /dev/null
+++ b/frontend/sweet-red-beans/src/css/Modal/ReportModal.module.css
@@ -0,0 +1,91 @@
+.modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.openModal > section {
+width: 100%;
+max-width: 600px;
+margin: 0 auto;
+border-radius: 0.3rem;
+background-color: white;
+/* 팝업이 열릴때 스르륵 열리는 효과 */
+animation: modal-show 0.3s;
+overflow: hidden;
+}
+
+.buttonArea {
+position: relative;
+padding: 16px 64px 16px 16px;
+font-weight: 700;
+}
+
+.buttonArea > button{
+cursor: pointer;
+position: absolute;
+top: 10px;
+right: 10px;
+width: 30px;
+font-size: 21px;
+font-weight: 700;
+text-align: center;
+color: #999;
+background-color: transparent;
+border: none;
+}
+
+.modal > section > header {
+position: relative;
+background-color: white;
+font-weight: 500;
+font-size: 30px;
+margin: 30px 0px 30px 0px;
+}
+
+.modal > section > main {
+padding: 16px;
+border-bottom: none;
+border-top: none;
+margin-bottom: 50px;
+}
+/* .modal > section > footer {
+text-align: right;
+}
+.modal > section > footer button {
+padding: 6px 12px;
+color: #fff;
+background-color: #0088ff;
+border-radius: 5px;
+font-size: 13px;
+} */
+.modal.openModal {
+display: flex;
+align-items: center;
+/* 팝업이 열릴때 스르륵 열리는 효과 */
+animation: modal-bg-show 0.3s;
+}
+
+@keyframes modal-show {
+from {
+  opacity: 0;
+  margin-top: -50px;
+}
+to {
+  opacity: 1;
+  margin-top: 0;
+}
+}
+@keyframes modal-bg-show {
+from {
+  opacity: 0;
+}
+to {
+  opacity: 1;
+}
+}
diff --git a/frontend/sweet-red-beans/src/css/Modal/TransactionWriteModal.module.css b/frontend/sweet-red-beans/src/css/Modal/TransactionWriteModal.module.css
new file mode 100644
index 0000000..26f8ab8
--- /dev/null
+++ b/frontend/sweet-red-beans/src/css/Modal/TransactionWriteModal.module.css
@@ -0,0 +1,91 @@
+.modal {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 99;
+  background-color: rgba(0, 0, 0, 0.6);
+}
+
+.openModal > section {
+  width: 100%;
+  max-width: 600px;
+  margin: 0 auto;
+  border-radius: 0.3rem;
+  background-color: white;
+  /* 팝업이 열릴때 스르륵 열리는 효과 */
+  animation: modal-show 0.3s;
+  overflow: hidden;
+}
+
+.buttonArea {
+position: relative;
+padding: 16px 64px 16px 16px;
+font-weight: 700;
+}
+
+.buttonArea > button{
+cursor: pointer;
+position: absolute;
+top: 10px;
+right: 10px;
+width: 30px;
+font-size: 21px;
+font-weight: 700;
+text-align: center;
+color: #999;
+background-color: transparent;
+border: none;
+}
+
+.modal > section > header {
+position: relative;
+background-color: white;
+font-weight: 500;
+font-size: 30px;
+margin: 30px 0px 30px 0px;
+}
+
+.modal > section > main {
+padding: 16px;
+border-bottom: none;
+border-top: none;
+margin-bottom: 50px;
+}
+/* .modal > section > footer {
+text-align: right;
+}
+.modal > section > footer button {
+padding: 6px 12px;
+color: #fff;
+background-color: #0088ff;
+border-radius: 5px;
+font-size: 13px;
+} */
+.modal.openModal {
+display: flex;
+align-items: center;
+/* 팝업이 열릴때 스르륵 열리는 효과 */
+animation: modal-bg-show 0.3s;
+}
+
+@keyframes modal-show {
+from {
+  opacity: 0;
+  margin-top: -50px;
+}
+to {
+  opacity: 1;
+  margin-top: 0;
+}
+}
+@keyframes modal-bg-show {
+from {
+  opacity: 0;
+}
+to {
+  opacity: 1;
+}
+}
diff --git a/frontend/sweet-red-beans/src/css/modal.css b/frontend/sweet-red-beans/src/css/Modal/modal.module.css
similarity index 79%
rename from frontend/sweet-red-beans/src/css/modal.css
rename to frontend/sweet-red-beans/src/css/Modal/modal.module.css
index d96a9bc..7bae988 100644
--- a/frontend/sweet-red-beans/src/css/modal.css
+++ b/frontend/sweet-red-beans/src/css/Modal/modal.module.css
@@ -9,7 +9,7 @@
     background-color: rgba(0, 0, 0, 0.6);
   }
 
-.modal > .section {
+.openModal > section {
   width: 90%;
   max-width: 450px;
   margin: 0 auto;
@@ -26,7 +26,8 @@
   font-weight: 700;
 }
 
-.topClose{
+.buttonArea > button{
+  cursor: pointer;
   position: absolute;
   top: 10px;
   right: 10px;
@@ -36,28 +37,28 @@
   text-align: center;
   color: #999;
   background-color: transparent;
+  border: none;
 }
 
-.header {
-  font-size: 20pt;
-  margin-top: 20px;
-  margin-bottom: 50px;
-}
-
-.main{
-  margin-bottom: 50px;
+.modal > section > header {
+  position: relative;
+  background-color: white;
+  font-weight: 500;
+  font-size: 30px;
+  margin: 30px 0px 30px 0px;
 }
 
-.modal > .section > .main {
+.modal > section > main {
   padding: 16px;
   border-bottom: none;
   border-top: none;
+  margin-bottom: 50px;
 }
-.modal > .section > footer {
+.modal > section > footer {
   padding: 12px 16px;
   text-align: right;
 }
-.modal > .section > footer button {
+.modal > section > footer button {
   padding: 6px 12px;
   color: #fff;
   background-color: #0088ff;
diff --git a/frontend/sweet-red-beans/src/css/MyPage/MyPageDetail/MyComments.module.css b/frontend/sweet-red-beans/src/css/MyPage/MyPageDetail/MyComments.module.css
index b5f985d..10e9721 100644
--- a/frontend/sweet-red-beans/src/css/MyPage/MyPageDetail/MyComments.module.css
+++ b/frontend/sweet-red-beans/src/css/MyPage/MyPageDetail/MyComments.module.css
@@ -2,6 +2,7 @@
     width: 800px;
     margin: 0 auto;
     min-height: 800px;
+    margin-top: 15px;
 }  
 
 .topBar {
diff --git a/frontend/sweet-red-beans/src/css/MyPage/MyPageDetail/MyLikeTransactions.module.css b/frontend/sweet-red-beans/src/css/MyPage/MyPageDetail/MyLikeTransactions.module.css
index f036a57..5db8be1 100644
--- a/frontend/sweet-red-beans/src/css/MyPage/MyPageDetail/MyLikeTransactions.module.css
+++ b/frontend/sweet-red-beans/src/css/MyPage/MyPageDetail/MyLikeTransactions.module.css
@@ -1,6 +1,4 @@
 .container {
     min-height: 800px;
-}
-
-.footer {
+    margin-top: 15px;
 }
\ No newline at end of file
diff --git a/frontend/sweet-red-beans/src/css/MyPage/MyPageDetail/MyPosts.module.css b/frontend/sweet-red-beans/src/css/MyPage/MyPageDetail/MyPosts.module.css
index 2ea3027..edd3dd7 100644
--- a/frontend/sweet-red-beans/src/css/MyPage/MyPageDetail/MyPosts.module.css
+++ b/frontend/sweet-red-beans/src/css/MyPage/MyPageDetail/MyPosts.module.css
@@ -2,6 +2,7 @@
     width: 800px;
     margin: 0 auto;
     min-height: 800px;
+    margin-top: 15px;
 }  
 
 .topBar {
diff --git a/frontend/sweet-red-beans/src/css/MyPage/MyPageDetail/MyTransactions.module.css b/frontend/sweet-red-beans/src/css/MyPage/MyPageDetail/MyTransactions.module.css
index f036a57..5db8be1 100644
--- a/frontend/sweet-red-beans/src/css/MyPage/MyPageDetail/MyTransactions.module.css
+++ b/frontend/sweet-red-beans/src/css/MyPage/MyPageDetail/MyTransactions.module.css
@@ -1,6 +1,4 @@
 .container {
     min-height: 800px;
-}
-
-.footer {
+    margin-top: 15px;
 }
\ No newline at end of file
diff --git a/frontend/sweet-red-beans/src/css/MyPage/MyPageNormal.module.css b/frontend/sweet-red-beans/src/css/MyPage/MyPageNormal.module.css
index 75a9b5e..bddbcb3 100644
--- a/frontend/sweet-red-beans/src/css/MyPage/MyPageNormal.module.css
+++ b/frontend/sweet-red-beans/src/css/MyPage/MyPageNormal.module.css
@@ -138,12 +138,12 @@
     left:158px;
 }
 
-.focus {
+/* 밑줄 */
+.nicknameChangeArea > div {
     position: absolute;
     left: 0;
     bottom: -10px;
-    height: 5px;
-    border-radius: 50px;
+    height: 3px;
     margin-left: 50%;
     width: calc(100%);
     background: #F23333;
@@ -157,18 +157,15 @@
     border: none;
     font-size: 14pt;
     width: 180px;
-}
-
-.nicknameChangeArea > input:focus {
     outline: none;
 }
 
-.nicknameChangeArea > input:hover + .nicknameChangeArea > div{
+.nicknameChangeArea > input:hover + div{
     transform: scaleX(1);
     margin-left: 0;
 }
 
-.nicknameChangeArea > input:focus + .nicknameChangeArea > div {
+.nicknameChangeArea > input:focus + div {
     transform: scaleX(1);
     margin-left: 0;
 }
diff --git a/frontend/sweet-red-beans/src/css/ReportModal.css b/frontend/sweet-red-beans/src/css/ReportModal.css
deleted file mode 100644
index dbae5f7..0000000
--- a/frontend/sweet-red-beans/src/css/ReportModal.css
+++ /dev/null
@@ -1,83 +0,0 @@
-.modal {
-    display: none;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 99;
-    background-color: rgba(0, 0, 0, 0.6);
-  }
-  .modal button {
-    outline: none;
-    cursor: pointer;
-    border: 0;
-  }
-  .modal > section {
-    width: 90%;
-    max-width: 450px;
-    margin: 0 auto;
-    border-radius: 0.3rem;
-    background-color: #fff;
-    /* 팝업이 열릴때 스르륵 열리는 효과 */
-    animation: modal-show 0.3s;
-    overflow: hidden;
-  }
-  .modal > section > header {
-    position: relative;
-    padding: 16px 64px 16px 16px;
-    background-color: #f1f1f1;
-    font-weight: 700;
-  }
-  .modal > section > header button {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    width: 30px;
-    font-size: 21px;
-    font-weight: 700;
-    text-align: center;
-    color: #999;
-    background-color: transparent;
-  }
-  .modal > section > main {
-    padding: 16px;
-    border-bottom: 1px solid #dee2e6;
-    border-top: 1px solid #dee2e6;
-  }
-  .modal > section > footer {
-    padding: 12px 16px;
-    text-align: right;
-  }
-  .modal > section > footer button {
-    padding: 6px 12px;
-    color: #fff;
-    background-color: #6c757d;
-    border-radius: 5px;
-    font-size: 13px;
-  }
-  .modal.openModal {
-    display: flex;
-    align-items: center;
-    /* 팝업이 열릴때 스르륵 열리는 효과 */
-    animation: modal-bg-show 0.3s;
-  }
-  @keyframes modal-show {
-    from {
-      opacity: 0;
-      margin-top: -50px;
-    }
-    to {
-      opacity: 1;
-      margin-top: 0;
-    }
-  }
-  @keyframes modal-bg-show {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  
\ No newline at end of file
diff --git a/frontend/sweet-red-beans/src/css/TopBar/LogIn.module.css b/frontend/sweet-red-beans/src/css/TopBar/LogIn.module.css
index f4c1a82..d86114c 100644
--- a/frontend/sweet-red-beans/src/css/TopBar/LogIn.module.css
+++ b/frontend/sweet-red-beans/src/css/TopBar/LogIn.module.css
@@ -5,6 +5,7 @@
     margin-top: 0px;
 } */
 
+
 .loginButton {
     cursor: pointer;
     border: none;
diff --git a/frontend/sweet-red-beans/src/css/TransactionPage/TransactionDetail.module.css b/frontend/sweet-red-beans/src/css/TransactionPage/TransactionDetail.module.css
index 315fb04..9db0f05 100644
--- a/frontend/sweet-red-beans/src/css/TransactionPage/TransactionDetail.module.css
+++ b/frontend/sweet-red-beans/src/css/TransactionPage/TransactionDetail.module.css
@@ -50,12 +50,62 @@
     }
 }
 
-.content {
-    margin-top: 10px;
-    white-space: pre-wrap;
+.modal {
+    text-align: center;
+}
+
+.modal > div:nth-child(1) {
+    text-align: left;
+    padding: 10px 0px 10px 30px;
+    font-size: 16px;
+}
+
+.modal > div > textarea{
+    width: 520px;
+    height: 200px;
+    resize: none;
+    outline: none;
+    padding:20px;
+    box-sizing: border-box;
+    border-radius: 10px;
+    border: #C4C4C4 1px solid;
+    font-size: 14px;
+}
+
+.modal > div > textarea:focus{
+    border: #5a5a5a 2px solid;
+}
+
+.modal > div > textarea::-webkit-scrollbar{
+    width: 15px;
+}
+  
+.modal > div > textarea::-webkit-scrollbar-thumb{
+    width: 15px;
+    background-color: #C4C4C4;
+    border-radius: 20px;
+    background-clip: padding-box;
+    border: 4px solid transparent;
+  
+}
+
+.modal > button {
+    margin-top: 30px;
+    cursor: pointer;
+    border: none;
+    background-color: #F23333;
+    color: white;
+    font-size: 16px;
+    border-radius: 10px;
+    height: 50px;
+    width: 110px;
 }
 
-.profileImage {
+.profileArea {
+    display: inline-block;
+}
+
+.profileArea > img {
     display: inline-block;
     vertical-align: middle;
     width: 50px;
@@ -65,73 +115,80 @@
     object-fit: cover;
 }
 
-.nickname {
+.profileArea > div {
     display: inline-block;
     margin-right: 20px;
     vertical-align: middle;
+    font-size: 16px;
 }
 
-.reliability {
+.reliabilityArea {
     display: inline-block;
     vertical-align: middle;
     margin-right: 20px;
 }
 
-.reliabilityCount {
+.reliabilityArea::before {
+    content: "";
     display: inline-block;
     vertical-align: middle;
-    margin-top: 10px;
-}
-
-.reliabilityIcon {
-    float: left;
-    vertical-align: middle;
-    width: 50px;
-    height: 50px;
-    border: #C4C4C4 1px solid;
+    width: 40px;
+    height: 40px;
     border-radius: 50px;
     margin-right: 10px;
     background: url('../../img/reliability.png');
-    background-size: 60%;
+    background-size: 50%;
     background-repeat: no-repeat;
     background-position: 50% 40%;
+    box-shadow: 0px 0px 7px rgba(90, 90, 90, 0.25);
 }
 
-.date {
+.statusArea {
     position: absolute;
     right: 20px;
-    bottom: 20px;
+    display: inline-block;
+    vertical-align: middle;
 }
 
-.proceeding{
+.proceeding, .done {
+    cursor: default;
     text-align: center;
-    color: white;
     width: 80px;
     height: 30px;
     border-radius: 50px;
+}
+
+.proceeding{
     background-color: #F23333;
-    opacity: 0.8;
-    display: inline-block;
-    margin-right: 20px;
-    vertical-align: middle;
 }
 
 .done{
-    text-align: center;
+    background-color: #C4C4C4;
+}
+
+.proceeding > div, .done > div {
+    position: absolute;
+    top:50%;
+    left:50%;
+    transform: translate(-50%, -50%);
     color: white;
+    width: inherit;
+    font-size: 16px;
+
+}
+
+.proceedingButton, .doneButton {
+    cursor: default;
+    text-align: center;
     width: 80px;
     height: 30px;
     border-radius: 50px;
-    background-color: #C4C4C4;
-    display: inline-block;
-    margin-right: 20px;
-    vertical-align: middle;
+    background-color: #5a5a5a;
+    font-size: 16px;
 }
 
-.statusButtonArea {
-    display: inline-block;
-    vertical-align: middle;
-
+.proceedingButton > div, .doneButton > div {
+    position: absolute;
 }
 
 .statusButton {
@@ -148,66 +205,93 @@
     font-size: 13pt;
 }
 
-.likeButton {
+.notMine {
+    position: absolute;
+    top:20px;
+    right: 20px;
+}
+
+.content {
+    margin: 10px 0px 40px 10px;
+    white-space: pre-wrap;
+    font-size: 14px;
+    width: 90%;
+}
+
+.bottomArea {
+    position: absolute;
+    bottom: 10px;
+    left: 0px;
+    opacity: 0.8;
+    height: 40px;
+    width: 100%;
+}
+
+.deleteArea, .notMineButtonArea {
+    position: absolute;
+}
+
+/* 삭제 버튼 */
+.deleteArea > button {
+    position: absolute;
+    left: 20px;
     cursor: pointer;
-    width: 50px;
-    height: 50px;
-    border: #C4C4C4 1px solid;
+    width: 40px;
+    height: 40px;
+    border: none;
     border-radius: 50px;
-    background: url('../../img/heart.png');
+    background: url('../../img/trash.png');
     background-size: 60%;
     background-repeat: no-repeat;
-    background-position: 50% 60%;
-    margin-left: 20px;
+    background-position: 50% 50%;
+    transition: background-color 200ms ease;
 }
 
-.DMButton {
-    cursor: pointer;
-    width: 50px;
-    height: 50px;
-    border: #C4C4C4 1px solid;
-    background: url('../../img/email.png');
-    background-size: 70%;
-    background-repeat: no-repeat;
-    background-position: center;
-    border-radius: 50px;
-    margin-left: 20px;
-    
-}
 
-.reportButton {
-    cursor: pointer;
-    width: 50px;
-    height: 50px;
-    border: #C4C4C4 1px solid;
-    border-radius: 50px;
+/* 신고 버튼 */
+.notMineButtonArea > button:nth-child(1) {
+    left: 20px;
     background: url('../../img/siren.png');
-    background-size: 70%;
+    background-size: 60%;
     background-repeat: no-repeat;
-    background-position: 50% 30%;
+    background-position: 50% 45%;
 }
 
-.notMine {
-    position: absolute;
-    top:20px;
-    right: 20px;
+.notMineButtonArea > button:nth-child(2) {
+    left: 80px;
+    background: url('../../img/email.png');
+    background-size: 60%;
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
 }
 
-.deleteArea {
-    position: absolute;
-    top:20px;
-    right: 20px;
+.notMineButtonArea > button:nth-child(3) {
+    left: 140px;
+    background: url('../../img/heart.png');
+    background-size: 55%;
+    background-repeat: no-repeat;
+    background-position: 50% 60%;
 }
 
-.deleteButton {
+.notMineButtonArea > button {
+    position: absolute;
     cursor: pointer;
-    width: 50px;
-    height: 50px;
-    border: #C4C4C4 1px solid;
+    width: 40px;
+    height: 40px;
+    border: none;
     border-radius: 50px;
-    background: url('../../img/trash.png');
-    background-size: 70%;
-    background-repeat: no-repeat;
-    background-position: 50% 40%;
+    transition: background-color 200ms ease;
+}
+
+.bottomArea button:hover {
+    background-color: rgba(242, 51, 51, 0.3);
 }
 
+.date {
+    font-size: 14px;
+    position: absolute;
+    display: inline-block;
+    color: #C4C4C4;
+    right: 20px;
+    bottom: 0px;
+}
\ No newline at end of file
diff --git a/frontend/sweet-red-beans/src/css/TransactionPage/TransactionPage.module.css b/frontend/sweet-red-beans/src/css/TransactionPage/TransactionPage.module.css
index 2bbd1dd..03680b1 100644
--- a/frontend/sweet-red-beans/src/css/TransactionPage/TransactionPage.module.css
+++ b/frontend/sweet-red-beans/src/css/TransactionPage/TransactionPage.module.css
@@ -1,6 +1,5 @@
 .wrap {
   position: relative;
-  padding: 10px;
   font-size: 18px;
   line-height: 1.6;
 }
@@ -15,6 +14,7 @@
   box-sizing: border-box;
   padding: 30px;
   margin-bottom: 100px;
+  margin-top: 50px;
 }
 
 .profileArea {
@@ -24,7 +24,7 @@
   top:30px;
 }
 
-.profileImage {
+.profileArea > img {
   display: inline-block;
   vertical-align: middle;
   width: 50px;
@@ -33,10 +33,11 @@
   object-fit: cover;
 }
 
-.nickname {
+.profileArea > div {
   margin-left: 20px;
   display: inline-block;
   vertical-align: middle;
+  font-size: 16px;
 
 }
 
@@ -47,7 +48,7 @@
   right: 150px;
 }
 
-.writeButton {
+.writeButtonArea > button {
   cursor: pointer;
   border: none;
   width: 190px;
@@ -57,7 +58,7 @@
   color: white;
 }
 
-.writeButton:hover{
+.writeButtonArea > button:hover{
   animation: swing linear 0.15s 2;
 }
 
@@ -68,26 +69,27 @@
   100% {  }
 }
 
-.writeTextArea {
+.writeBox > textarea {
   width: 700px;
   height: 200px;
   border-radius: 10px;
-  border: 2px solid #656565;
+  border: 1px solid #C4C4C4;
   box-sizing: border-box;
   padding: 20px;
   resize: none;
   margin-top: 70px;
+  outline: none;
 }
 
-.writeTextArea:focus{
-  outline: none;
+.writeBox > textarea:focus{
+  border: 2px solid #5a5a5a;
 }
 
-.writeTextArea::-webkit-scrollbar{
+.writeBox > textarea::-webkit-scrollbar{
   width: 15px;
 }
 
-.writeTextArea::-webkit-scrollbar-thumb{
+.writeBox > textarea::-webkit-scrollbar-thumb{
   width: 15px;
   background-color: #C4C4C4;
   border-radius: 20px;
@@ -113,32 +115,116 @@
   margin-bottom: 30px;
 }
 
-.proceedSelected, .notSelected{
+.proceedfilter{
+  display: inline-block;
+  vertical-align: bottom;
+}
+
+.selected, .notSelected {
   cursor: pointer;
-  border: none;
-  width: 90px;
-  padding: 10px;
-  height: 45px;
-  margin-left: 0px;
   background-color: transparent;
+  border: none;
+  font-size: 14px;
+  margin-left: 20px;
+  transition: transform 200ms ease;
 }
 
-.proceedSelected {
-  font-size: 12pt;
-  color: #F23333;
+.notSelected:hover {
+  transform: scale(1.2);
+}
+
+.selected{
+  cursor:default;
+  font-size: 18px;
+  color: #f23333;
+}
+
+.selected::before {
+  display: inline-block;
+  margin-right: 5px;
+  content: "";
+  width: 15px;
+  height: 15px;
   background: url("../../img/check.png");
-  background-size: 20%;
   background-repeat: no-repeat;
-  background-position: 0% 60%;
+  background-size: 100%;
+}
+
+.filter{
+  display: inline-block;
+  position: relative;
+  width: 100px;
+  height: 35px;
+  border-bottom: 3px solid #C4C4C4;
+  margin-left: 30px;
+}
+
+.filter > select {
+  font-size: 14px;
+  cursor: pointer;
+  width: inherit;
+  height: inherit;
+  background: transparent;
+  border: 0 none;
+  outline: 0 none;
+  padding: 0 8px;
+  position: relative;
+  z-index: 3;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.filter > select > option {
+  color: #5a5a5a;
+  padding: 10px 0px 10px 0px;
+  font-size: 16px;
+}
+
+.filterArrow {
+  position: absolute; 
+  bottom: 7px; 
+  right: 0; 
+  z-index: 1; 
+  width: 20px; 
+  height: 20px;
+  transition: transform 300ms ease-in-out;
+  background: url("../../img/down-arrow.png");
+  background-repeat: no-repeat;
+  background-size: 70%;
+  background-position: 50% 50%;
 }
 
+.filter > select:focus + .filterArrow{
+  transform: rotate(180deg);
+}
+
+/* .filterArrow{
+  position: absolute; 
+  top: 0; 
+  right: 0; 
+  z-index: 1; 
+  width: 35px; 
+  height: inherit;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #C4C4C4;
+  transition: transform 300ms ease-in-out;
+} */
+
+/* .filter .filterArrow {
+  width: 50%;
+  transition: .3s;
+} */
+
 .search {
   display: inline-block;
   position: relative;
   text-align: right;
   width: 200px;
   height: 45px;
-  margin-left: 20px;
+  margin-left: 30px;
   border-bottom: 3px solid #C4C4C4;
   vertical-align: bottom;
 }
@@ -152,7 +238,7 @@
   box-sizing: border-box;
   border: none;
   padding: 10px;
-
+  font-size: 14px;
   transition: border-bottom 200ms ease;
 }
 
@@ -192,56 +278,6 @@
   outline: 0 none;
   background-color: white;
 }
-.filterBox{
-  display: inline-block;
-  position: relative;
-  width: 100px;
-  height: 45px;
-  border-bottom: 3px solid #C4C4C4;
-  margin-left: 20px;
-}
-
-.filter {
-  width: inherit;
-  height: inherit;
-  background: transparent;
-  border: 0 none;
-  outline: 0 none;
-  padding: 0 8px;
-  position: relative;
-  z-index: 3;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-}
-
-.filter option {
-  color: #656565;
-  padding: 3px 0;
-  font-size: 16px;
-}
-
-.filterArrow{
-  position: absolute; 
-  top: 0; 
-  right: 0; 
-  z-index: 1; 
-  width: 35px; 
-  height: inherit;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #C4C4C4;
-}
-
-/* .filter .filterArrow {
-  width: 50%;
-  transition: .3s;
-} */
-
-.filter:focus + .filterArrow{
-  transform: rotate(180deg);
-}
 
 .topBtn {
   position: fixed; 
@@ -289,4 +325,41 @@
 .writeBtn.active {
   z-index: 10; 
   opacity: 1;
+}
+
+.modal {
+  text-align: center;
+}
+
+.modal > div:nth-child(1) {
+  text-align: left;
+  padding: 10px 0px 10px 30px;
+}
+
+.modal > div > textarea{
+  width: 520px;
+  height: 200px;
+  resize: none;
+  outline: none;
+  padding:20px;
+  box-sizing: border-box;
+  border-radius: 10px;
+  border: #C4C4C4 1px solid;
+  font-size: 14px;
+}
+
+.modal > div > textarea:focus{
+  border: #5a5a5a 2px solid;
+}
+
+.modal > button {
+  margin-top: 30px;
+  cursor: pointer;
+  border: none;
+  background-color: #F23333;
+  color: white;
+  font-size: 16px;
+  border-radius: 10px;
+  height: 50px;
+  width: 110px;
 }
\ No newline at end of file
diff --git a/frontend/sweet-red-beans/src/css/TransactionPage/TransactionWriteModal.css b/frontend/sweet-red-beans/src/css/TransactionPage/TransactionWriteModal.css
deleted file mode 100644
index dbae5f7..0000000
--- a/frontend/sweet-red-beans/src/css/TransactionPage/TransactionWriteModal.css
+++ /dev/null
@@ -1,83 +0,0 @@
-.modal {
-    display: none;
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 99;
-    background-color: rgba(0, 0, 0, 0.6);
-  }
-  .modal button {
-    outline: none;
-    cursor: pointer;
-    border: 0;
-  }
-  .modal > section {
-    width: 90%;
-    max-width: 450px;
-    margin: 0 auto;
-    border-radius: 0.3rem;
-    background-color: #fff;
-    /* 팝업이 열릴때 스르륵 열리는 효과 */
-    animation: modal-show 0.3s;
-    overflow: hidden;
-  }
-  .modal > section > header {
-    position: relative;
-    padding: 16px 64px 16px 16px;
-    background-color: #f1f1f1;
-    font-weight: 700;
-  }
-  .modal > section > header button {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-    width: 30px;
-    font-size: 21px;
-    font-weight: 700;
-    text-align: center;
-    color: #999;
-    background-color: transparent;
-  }
-  .modal > section > main {
-    padding: 16px;
-    border-bottom: 1px solid #dee2e6;
-    border-top: 1px solid #dee2e6;
-  }
-  .modal > section > footer {
-    padding: 12px 16px;
-    text-align: right;
-  }
-  .modal > section > footer button {
-    padding: 6px 12px;
-    color: #fff;
-    background-color: #6c757d;
-    border-radius: 5px;
-    font-size: 13px;
-  }
-  .modal.openModal {
-    display: flex;
-    align-items: center;
-    /* 팝업이 열릴때 스르륵 열리는 효과 */
-    animation: modal-bg-show 0.3s;
-  }
-  @keyframes modal-show {
-    from {
-      opacity: 0;
-      margin-top: -50px;
-    }
-    to {
-      opacity: 1;
-      margin-top: 0;
-    }
-  }
-  @keyframes modal-bg-show {
-    from {
-      opacity: 0;
-    }
-    to {
-      opacity: 1;
-    }
-  }
-  
\ No newline at end of file
diff --git a/frontend/sweet-red-beans/src/img/down-arrow.png b/frontend/sweet-red-beans/src/img/down-arrow.png
new file mode 100644
index 0000000..975a4da
Binary files /dev/null and b/frontend/sweet-red-beans/src/img/down-arrow.png differ