diff --git a/src/App.css b/src/App.css
index 3e6578f..27992a3 100644
--- a/src/App.css
+++ b/src/App.css
@@ -39,5 +39,10 @@
 
 #main_mapper {
   display: flex;
- 
+  width: 102%;
+  height: 100%;
+}
+.container{
+  width: 100%;
+  height: 100%;
 }
diff --git a/src/PostList.css b/src/PostList.css
index b9162c4..662cd3a 100644
--- a/src/PostList.css
+++ b/src/PostList.css
@@ -1,10 +1,12 @@
 #PostList_div{
     width: 100%;
-    height: 80vh;
+    height: 100%;
    overflow-y: auto;
+   overflow-x: hidden;
    border-right: 1px solid#3e3e3e;
    border-left: 1px solid#3e3e3e;
    border-bottom: 1px solid#3e3e3e;
+   
 }
 #PostList_div::-webkit-scrollbar{
   
@@ -23,7 +25,7 @@
     /* z-index: 1000; */
 }
 #post-container{
-  
+
   height: 70%;
   overflow-y: auto;
   background-color: antiquewhite;
diff --git a/public/apartment.svg b/src/assets/apartment.svg
similarity index 100%
rename from public/apartment.svg
rename to src/assets/apartment.svg
diff --git a/src/components/CommentWrite.component.jsx b/src/components/CommentWrite.component.jsx
index dc792ff..3eb0a00 100644
--- a/src/components/CommentWrite.component.jsx
+++ b/src/components/CommentWrite.component.jsx
@@ -47,11 +47,11 @@ export default function CommentWrite({ _id, onCommentAddedListener }) {
   return (
     <div className="comment-write-wrapper">
       <p>새 댓글 쓰기</p>
-      <Space.Compact style={{ width: "100%" }}>
-        <Input style={{ width: '20%' }} placeholder="닉네임" value={commentForm.nickname} onChange={(e) => setCommentForm({ ...commentForm, nickname: e.target.value })}/>
-        <Input style={{ width: '80%' }} placeholder="댓글을 입력하세요" value={commentForm.comment} onChange={(e) => setCommentForm({ ...commentForm, comment: e.target.value })}/>
+      <Space.Compact style={{width: "100%" ,height:'25px'}}>
+        <Input style={{width: '20%' }} placeholder="닉네임" value={commentForm.nickname} onChange={(e) => setCommentForm({ ...commentForm, nickname: e.target.value })}/>
+        <Input style={{width: '80%' }} placeholder="댓글을 입력하세요" value={commentForm.comment} onChange={(e) => setCommentForm({ ...commentForm, comment: e.target.value })}/>
       </Space.Compact>
-      <Button type="default" id="add-comment" onClick={onAddCommentClickListener}>등록</Button>
+      <Button  type="default" id="add-comment" onClick={onAddCommentClickListener}>등록</Button>
     </div>
   )
 }
\ No newline at end of file
diff --git a/src/components/Home.component.jsx b/src/components/Home.component.jsx
index b024083..76e38cc 100644
--- a/src/components/Home.component.jsx
+++ b/src/components/Home.component.jsx
@@ -13,7 +13,7 @@ export default function HomeComponent() {
   }
 
   return (
-    <section>
+    <section id="section_div">
       <Header sorting={orderBy} onOrderChangedListener={onOrderChangedListener} />
       <ApartmentForm />
       <PostList orderBy={orderBy} page={page} />
diff --git a/src/components/Nav.component.jsx b/src/components/Nav.component.jsx
index e0c7876..f0cea10 100644
--- a/src/components/Nav.component.jsx
+++ b/src/components/Nav.component.jsx
@@ -1,10 +1,10 @@
 import "../styles/nav.component.css"
-
+import apartment from "../assets/apartment.svg" 
 export default function NavComponent() {
   return (
-    <>
-      <nav>
-        <img src="../../public/apartment.svg"/>
+    
+      <nav id="navcomponent_div">
+        <img src={apartment}/>
         <h2>너의 아파트는</h2>
         <h3>멋쟁이사자처럼</h3>
         <h3>야무진친구들</h3>
@@ -19,6 +19,6 @@ export default function NavComponent() {
           <p>이지혜</p>
         </div>
       </nav>
-    </>
+
   );
 }
\ No newline at end of file
diff --git a/src/components/PostItem.component.jsx b/src/components/PostItem.component.jsx
index 8d2148c..577cff2 100644
--- a/src/components/PostItem.component.jsx
+++ b/src/components/PostItem.component.jsx
@@ -27,17 +27,20 @@ import CommentWrite from "./CommentWrite.component.jsx";
     }
 
     const onPostClickedListener = async () => {
-      if (comments.length === 0) {
+      if(!isCommentClicked){        //댓글창을 여는 경우
         setIsCommentClicked(true)
         const response = await axios.get(`https://apt-api.blbt.app/v1/apartment/${_id}/comments`)
         if (response.status === HttpStatusCode.Ok) {
           setComments(response.data.comments)
         }
-      } else {
-        // 다시 눌러 닫은 경우
+      }
+      else{
         setComments([])
         setIsCommentClicked(false)
       }
+      
+   
+      
     }
 
     const onCommentAddedListener = async () => {
@@ -82,31 +85,32 @@ import CommentWrite from "./CommentWrite.component.jsx";
         </div>
         <p id="apartment-name" onClick={onPostClickedListener}>&quot;{apartmentName}&quot;</p>
         <p id="gpt-score">평가: <span>{gptScore}점</span></p>
-        <div className="like-comment-wrapper">
+        <div className="like-comment-delete-wrapper">
           {
             newIsLiked ? (
-              <div className="icon-text-wrapper" onClick={onLikeClickListener}>
-                <img src={fillHeart} alt="좋아요 취소"/>
+              <div id="like-icon-wrapper" className="icon-text-wrapper" >
+                <img src={fillHeart} alt="좋아요 취소" onClick={onLikeClickListener}/>
                 <p>{newLikeCount}</p>
               </div>
             ) : (
-              <div className="icon-text-wrapper" onClick={onLikeClickListener}>
-                <img src={heart} alt="좋아요 표시"/>
+              <div id="like-icon-wrapper" className="icon-text-wrapper" onClick={onLikeClickListener}>
+                <img src={heart} alt="좋아요 표시" onClick={onLikeClickListener}/>
                 <p>{newLikeCount}</p>
               </div>
             )
           }
-          <div className="icon-text-wrapper" onClick={onPostClickedListener}>
-            <img src={chat} alt="댓글"/>
+          <div id="text-icon-wrapper" className="icon-text-wrapper" >
+            <img src={chat} alt="댓글" onClick={onPostClickedListener}/>
             <p>{commentCount}</p>
           </div>
-          <div style={{flex: 2}}/>
-          <div className="icon-text-wrapper" onClick={showDeleteModal}>
+          {/* <div style={{marginRight:'100px',flex: 2}}/> */}
+          <div id="delete-icon-wrapper" className="icon-text-wrapper" onClick={showDeleteModal}>
             <img src={del} alt="삭제"/>
             <p>삭제</p>
           </div>
         </div>
         <div className="post-comments">
+          <div className="post-comments-list">
           {
             comments.map((comment) => <Comment
               key={comment._id}
@@ -114,6 +118,8 @@ import CommentWrite from "./CommentWrite.component.jsx";
               comment={comment.comment}
               createdAt={comment.createdAt} />)
           }
+          </div>
+          
           {
             isCommentClicked ?  <CommentWrite _id={_id} onCommentAddedListener={onCommentAddedListener} /> : <></>
           }
diff --git a/src/index.css b/src/index.css
index 8fbd2e4..2b7a8a0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,29 +1,115 @@
-body{
-display: flex;
-height: 100vh;
-justify-content: center;
- background-color: black;
-}
-body::-webkit-scrollbar{
-  width: 0px;
-  background-color: black;
-}
 
-#page_title{
-  position: fixed;
-  left: 80px;
-  top: 80px;
-  color: white;
+
+@media screen and (max-width:400px) {
+  body{
+    display: flex;
+    width: 100%;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+     background-color: black;
+    }
+    body::-webkit-scrollbar{
+      width: 0px;
+      background-color: black;
+    }
+    body::-webkit-scrollbar-thumb{
+      width: 0px;
+      background-color: black;
+    }
+    
+    #page_title{
+      position: fixed;
+      left: 80px;
+      top: 80px;
+      color: white;
+    }
+    #page_title h1:last-child{
+      color: #B6B6B6;
+    }
+    #root{
+      
+      
+      width: 102vw;
+      height: 100%;
+      background-color: black;
+      
+    
+    }
+    
 }
-#page_title h1:last-child{
-  color: #B6B6B6;
+
+@media screen and (max-width:770px) {
+  body{
+    display: flex;
+    width: 100vw;
+    height: 100vh;
+    justify-content: center;
+    align-items: center;
+     background-color: black;
+    }
+    body::-webkit-scrollbar{
+      width: 0px;
+      background-color: black;
+    }
+    body::-webkit-scrollbar-thumb{
+      width: 0px;
+      background-color: black;
+    }
+    
+    #page_title{
+      position: fixed;
+      left: 80px;
+      top: 80px;
+      color: white;
+    }
+    #page_title h1:last-child{
+      color: #B6B6B6;
+    }
+    #root{
+      
+      
+      width: 115vw;
+      height: 100%;
+      background-color: black;
+      
+    
+    }
+    
 }
-#root{
-  
-  width: 50%;
-  height: 100%;
-  background-color: black;
-  
 
+
+
+@media screen and (min-width:770px) {
+  body{
+    display: flex;
+    width: 100%;
+    height: 100vh;
+    justify-content: center;
+     background-color: black;
+    }
+    body::-webkit-scrollbar{
+      width: 0px;
+      background-color: black;
+    }
+    
+    #page_title{
+      position: fixed;
+      left: 80px;
+      top: 80px;
+      color: white;
+    }
+    #page_title h1:last-child{
+      color: #B6B6B6;
+    }
+    #root{
+      
+      width: 100%;
+      height: 100%;
+      background-color: black;
+      
+    
+    }
+    
 }
 
diff --git a/src/styles/apartment-form.component.css b/src/styles/apartment-form.component.css
index b517de2..203def0 100644
--- a/src/styles/apartment-form.component.css
+++ b/src/styles/apartment-form.component.css
@@ -1,38 +1,90 @@
-.create-apartment-form {
-  width: 100%;
-  border-right: 1px solid #3e3e3e;
-  border-bottom: 1px solid #3e3e3e;
-  display: flex;
-  flex-direction: column;
+@media screen and (max-width:770px) {
+  .create-apartment-form {
+    width: 100%;
+    border-right: 1px solid #3e3e3e;
+    border-bottom: 1px solid #3e3e3e;
+    border-left: 1px solid #3e3e3e;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .create-apartment-form input{
+    font-size: 15px;
+  }
+  .owner-form {
+    display: flex;
+  }
+  
+  .owner-input {
+    background-color: #000000;
+    border: none;
+    outline: none;
+    font-size: 1rem;
+    margin: 8px 32px 8px 32px;
+    color: white;
+    flex: 1;
+  }
+  
+  #apt-name {
+    padding: 24px;
+    margin: 8px;
+    background-color: #000000;
+    border: none;
+    outline: none;
+    border-bottom: 1px solid #3e3e3e;
+    font-size: 0.9rem;
+    color: white;
+    font-weight: bold;
+  }
+  
+  .submit {
+    width: 100px;
+    margin: 0 32px 16px auto;
+    font-size: 13px;
+  }
 }
 
-.owner-form {
-  display: flex;
-}
-
-.owner-input {
-  background-color: #000000;
-  border: none;
-  outline: none;
-  font-size: 1rem;
-  margin: 8px 32px 8px 32px;
-  color: white;
-  flex: 1;
-}
 
-#apt-name {
-  padding: 24px;
-  margin: 8px;
-  background-color: #000000;
-  border: none;
-  outline: none;
-  border-bottom: 1px solid #3e3e3e;
-  font-size: 1.25rem;
-  color: white;
-  font-weight: bold;
+@media screen and (min-width:770px) {
+  .create-apartment-form {
+    width: 100%;
+    border-right: 1px solid #3e3e3e;
+    border-bottom: 1px solid #3e3e3e;
+    display: flex;
+    flex-direction: column;
+    
+  }
+  
+  
+  .owner-form {
+    display: flex;
+  }
+  
+  .owner-input {
+    background-color: #000000;
+    border: none;
+    outline: none;
+    font-size: 1rem;
+    margin: 8px 32px 8px 32px;
+    color: white;
+    flex: 1;
+  }
+  
+  #apt-name {
+    padding: 24px;
+    margin: 8px;
+    background-color: #000000;
+    border: none;
+    outline: none;
+    border-bottom: 1px solid #3e3e3e;
+    font-size: 1.25rem;
+    color: white;
+    font-weight: bold;
+  }
+  
+  .submit {
+    width: 150px;
+    margin: 0 32px 16px auto;
+  }
 }
 
-.submit {
-  width: 150px;
-  margin: 0 32px 16px auto;
-}
\ No newline at end of file
diff --git a/src/styles/comment-write.component.css b/src/styles/comment-write.component.css
index 1fba375..4e4347f 100644
--- a/src/styles/comment-write.component.css
+++ b/src/styles/comment-write.component.css
@@ -1,17 +1,67 @@
-.comment-write-wrapper {
-  width: 100%;
-  padding-left: 32px;
-  padding-right: 24px;
-  padding-top: 16px;
+
+
+@media screen and (max-width:770px) {
+  .comment-write-wrapper {
+
+    width: 100%;
+    padding-left: 32px;
+    padding-right: 24px;
+    padding-top: 16px;
+  }
+  
+  .comment-write-wrapper p {
+    color: white;
+    margin-bottom: 8px;
+    font-weight: 500;
+    font-size: 15px;
+  }
+  
+  #add-comment {
+    background-color: #2079ff;
+    border: none;
+    color: white;
+    float: right;
+    width: 80px;
+    height: 30px;
+    margin-top: 15px;
+    font-size: 13px;
+  }
+  #add-comment:hover{
+    background-color: #1b6ae0;
+  }
 }
 
-.comment-write-wrapper p {
-  color: white;
-  margin-bottom: 4px;
-  font-weight: bold;
+
+
+
+
+@media screen and (min-width:770px) {
+  .comment-write-wrapper {
+
+    width: 100%;
+    padding-left: 32px;
+    padding-right: 24px;
+    padding-top: 16px;
+  }
+  
+  .comment-write-wrapper p {
+    color: white;
+    margin-bottom: 4px;
+    font-weight: bold;
+  }
+  
+  #add-comment {
+    background-color: #2079ff;
+    border: none;
+    color: white;
+    float: right;
+    width: 100px;
+    height: 40px;
+    margin-top: 15px;
+  }
+  #add-comment:hover{
+    background-color: #1b6ae0;
+  }
 }
 
-#add-comment {
-  margin-left: auto;
-  margin-top: 8px;
-}
\ No newline at end of file
+
diff --git a/src/styles/comment.component.css b/src/styles/comment.component.css
index 8623044..ef6f400 100644
--- a/src/styles/comment.component.css
+++ b/src/styles/comment.component.css
@@ -1,9 +1,11 @@
 .comment-wrapper {
+  
   display: flex;
   flex-direction: column;
-  margin: 8px 24px 0 32px;
+  margin: 8px 15px 0 15px;
   cursor: pointer;
   border-bottom: 1px solid #3e3e3e;
+  background-color: black;
 }
 
 .comment-header {
@@ -12,13 +14,28 @@
 
 .comment-header p {
   margin-bottom: 2px;
+  font-size: 15px;
 }
 
 .comment-header p:nth-child(1) {
   color: white;
-  font-weight: bold;
+  font-weight: 800;
+}
+
+.comment-header p:nth-child(3) ,.comment-header p:nth-child(2){
+  color: white;
+  font-weight: 300;
+  font-size: 12px;
+  margin-left: 1px;
+  margin-bottom: 8px;
+
+}
+.comment-header p:nth-child(2){
+  margin-top: 2px;
 }
 
 .comment-wrapper #content {
   color: white;
+  font-weight: 400;
+  font-size: 15px;
 }
\ No newline at end of file
diff --git a/src/styles/data-list.component.css b/src/styles/data-list.component.css
index 198fb3e..5bc3390 100644
--- a/src/styles/data-list.component.css
+++ b/src/styles/data-list.component.css
@@ -1,32 +1,75 @@
-.datalist-wrapper {
-  display: flex;
-  flex-direction: column;
-  background: black;
-  margin: 0 24px 0 24px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-  color: white;
-  border-bottom: 1px solid #3e3e3e;
-  cursor: pointer;
+@media screen and (max-width:770px) {
+  .datalist-wrapper {
+    display: flex;
+    flex-direction: column;
+    background: black;
+    margin: 0 24px 0 24px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    color: white;
+    border-bottom: 1px solid #3e3e3e;
+    cursor: pointer;
+  }
+  
+  .datalist-wrapper > h4 {
+    font-size: 1.125rem;
+    font-weight:500;
+    margin: 0;
+    font-size: 16px;
+  }
+  
+  .apartment-region-wrapper {
+    display: flex;
+  }
+  
+  .apartment-region-wrapper p {
+    flex: 1;
+    font-size: 0.825rem;
+    color: #a4a4a4;
+    margin: 0;
+    max-width: 350px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 }
 
-.datalist-wrapper > h4 {
-  font-size: 1.125rem;
-  font-weight: bold;
-  margin: 0;
-}
 
-.apartment-region-wrapper {
-  display: flex;
+
+
+
+@media screen and (min-width:770px) {
+  .datalist-wrapper {
+    display: flex;
+    flex-direction: column;
+    background: black;
+    margin: 0 24px 0 24px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    color: white;
+    border-bottom: 1px solid #3e3e3e;
+    cursor: pointer;
+  }
+  
+  .datalist-wrapper > h4 {
+    font-size: 1.125rem;
+    font-weight: bold;
+    margin: 0;
+  }
+  
+  .apartment-region-wrapper {
+    display: flex;
+  }
+  
+  .apartment-region-wrapper p {
+    flex: 1;
+    font-size: 0.825rem;
+    color: #a4a4a4;
+    margin: 0;
+    max-width: 350px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
 }
 
-.apartment-region-wrapper p {
-  flex: 1;
-  font-size: 0.825rem;
-  color: #a4a4a4;
-  margin: 0;
-  max-width: 350px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
\ No newline at end of file
diff --git a/src/styles/header.component.css b/src/styles/header.component.css
index faa4e71..4722148 100644
--- a/src/styles/header.component.css
+++ b/src/styles/header.component.css
@@ -1,28 +1,69 @@
-header {
-  width: 100%;
-  height: 56px;
-  display: flex;
-  border-bottom: 1px solid #3e3e3e;
-  border-right: 1px solid #3e3e3e;
-  align-items: center;
-  justify-content: center;
-}
 
-.order-mapper {
-  flex: 1;
-  cursor: pointer;
+@media screen and (max-width:770px) {   /* 모바일 */
+  header {
+    width: 100%;
+    height: 56px;
+    display: flex;
+    border-bottom: 1px solid #3e3e3e;
+    border-right: 1px solid #3e3e3e;
+    border-left: 1px solid #3e3e3e;
+    align-items: center;
+    justify-content: center;
+    
+  }
+  
+  .order-mapper {
+    flex: 1;
+    cursor: pointer;
+  }
+  
+  .order-mapper > p {
+    color: white;
+    text-align: center;
+    font-weight: bold;
+    font-size: 1rem;
+    font-weight: 500;
+    margin: 0;
+  }
+  
+  .order-selected {
+    text-decoration: underline orange;
+    text-underline-offset: 16px;
+    text-decoration-thickness: 3px;
+  }
 }
 
-.order-mapper > p {
-  color: white;
-  text-align: center;
-  font-weight: bold;
-  font-size: 1.125rem;
-  margin: 0;
+
+
+@media screen and (min-width:770px) {   /* 컴퓨터 혹은 태블릿 화면 */
+  header {
+    width: 100%;
+    height: 56px;
+    display: flex;
+    border-bottom: 1px solid #3e3e3e;
+    border-right: 1px solid #3e3e3e;
+    align-items: center;
+    justify-content: center;
+    
+  }
+  
+  .order-mapper {
+    flex: 1;
+    cursor: pointer;
+  }
+  
+  .order-mapper > p {
+    color: white;
+    text-align: center;
+    font-weight: bold;
+    font-size: 1.125rem;
+    margin: 0;
+  }
+  
+  .order-selected {
+    text-decoration: underline orange;
+    text-underline-offset: 16px;
+    text-decoration-thickness: 3px;
+  }
 }
 
-.order-selected {
-  text-decoration: underline orange;
-  text-underline-offset: 16px;
-  text-decoration-thickness: 3px;
-}
\ No newline at end of file
diff --git a/src/styles/home.component.css b/src/styles/home.component.css
index e4ce200..fef502d 100644
--- a/src/styles/home.component.css
+++ b/src/styles/home.component.css
@@ -1,3 +1,5 @@
 section {
   width: 100%;
+  height: 100%;
+  
 }
\ No newline at end of file
diff --git a/src/styles/nav.component.css b/src/styles/nav.component.css
index 2e95112..e751ac0 100644
--- a/src/styles/nav.component.css
+++ b/src/styles/nav.component.css
@@ -1,37 +1,52 @@
-nav {
-  width: 210px;
-  height: 100vh;
-  border-right: 1px solid #3e3e3e;
-  padding-top: 16px;
-}
 
-nav > img {
-  color: white;
-  width: 48px;
-  height: 48px;
+@media  screen and (max-width:770px) {      /* 모바일 화면*/
+  #navcomponent_div{
+    display: none;
+  }
+  
 }
 
-nav > h2 {
-  color: white;
-  font-size: 1.5rem;
-}
 
-nav > h3 {
-  color: #c4c4c4;
-  font-size: 1.25rem;
-  margin: 0;
-}
 
-.developers > h4 {
-  margin-top: 64px;
-  font-size: 1rem;
-}
+  @media  screen and (min-width:770px) {   /* 패드 화면*/
+  nav {
 
-.developers > p {
-  margin: 0 0 8px;
-  font-size: 0.85rem;
+    width: 300px;
+    height: 100vh;
+    border-right: 1px solid #3e3e3e;
+    padding-top: 16px;
+  }
+  
+  nav > img {
+    color: white;
+    width: 48px;
+    height: 48px;
+  }
+  
+  nav > h2 {
+    color: white;
+    font-size: 1.5rem;
+  }
+  
+  nav > h3 {
+    color: #c4c4c4;
+    font-size: 1.25rem;
+    margin: 0;
+  }
+  
+  .developers > h4 {
+    margin-top: 64px;
+    font-size: 1rem;
+  }
+  
+  .developers > p {
+    margin: 0 0 8px;
+    font-size: 0.85rem;
+  }
+  
+  .developers {
+    color: #c4c4c4;
+  }
+  
 }
 
-.developers {
-  color: #c4c4c4;
-}
diff --git a/src/styles/post-item.component.css b/src/styles/post-item.component.css
index 9c30a33..8e2686a 100644
--- a/src/styles/post-item.component.css
+++ b/src/styles/post-item.component.css
@@ -1,60 +1,185 @@
-.post-item-container {
-  display: flex;
-  flex-direction: column;
-  padding: 16px 24px 16px 24px;
-  border-bottom: 1px solid #3e3e3e;
-}
-
-.post-header {
-  display: flex;
-}
-
-.post-header p {
-  margin-bottom: 2px;
-}
-
-.post-header p:nth-child(1) {
-  color: white;
-  font-weight: bold;
-}
 
-.post-header p:nth-child(2), p:nth-child(3) {
-  color: #d9d9d9;
-}
-
-#apartment-name {
-  font-size: 1.125rem;
-  color: white;
-  font-weight: bold;
-  cursor: pointer;
-}
 
-#gpt-score {
-  font-weight: bold;
+@media screen and (max-width:770px) {
+  .post-item-container {
+    display: flex;
+    flex-direction: column;
+    padding: 16px 24px 16px 24px;
+    border-bottom: 1px solid #3e3e3e;
+    
+  }
+  #apartment-name{
+    margin-top: 15px;
+  }
+  
+  .post-header {
+    margin-left: 5px;
+    display: flex;
+  }
+  
+  .post-header p {
+    margin-bottom: 2px;
+    
+  }
+  
+  .post-header p:nth-child(1) {
+    color: white;
+    font-weight: 500;
+    font-size: 15px;
+  }
+  
+  .post-header p:nth-child(2), p:nth-child(3) {
+    color: #d9d9d9;
+    font-size: 13px;
+    margin-top: 3px;
+  }
+  
+  #apartment-name {
+    margin-left: 5px;
+    font-size: 1rem;
+    color: white;
+    font-weight: bold;
+    cursor: pointer;
+  }
+  
+  #gpt-score {
+    margin-left: 5px;
+    font-weight: 500;
+  }
+  
+  #gpt-score span {
+    color: #f1c40f;
+  }
+  
+  .like-comment-delete-wrapper{
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 50px;
+    margin-left: 5px;
+  }
+  #delete-icon-wrapper{
+    position: absolute;
+    right: 20px;
+    
+  }
+  
+  #delete-icon-wrapper p{
+    font-size: 15px;
+  }
+  #like-icon-wrapper{
+      margin-right: 20px;
+  }
+ 
+  .icon-text-wrapper {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+  }
+  
+  .icon-text-wrapper p {
+    
+    font-size: 18px;
+    color: white;
+    margin: 0 0 0 8px;
+    font-weight: 500;
+    
+  }
+  
+  .icon-text-wrapper img {
+    width: 18px;
+    height: 18px;
+  }
 }
 
-#gpt-score span {
-  color: #f1c40f;
-}
 
-.like-comment-wrapper {
-  display: flex;
-}
-
-.icon-text-wrapper {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  flex: 1;
-}
 
-.icon-text-wrapper p {
-  color: white;
-  margin: 0 0 0 8px;
-  font-weight: bold;
+@media screen and (min-width:770px) {
+  .post-item-container {
+    display: flex;
+    flex-direction: column;
+    padding: 16px 24px 16px 24px;
+    border-bottom: 1px solid #3e3e3e;
+   
+  }
+  
+  
+  .post-header {
+    display: flex;
+  }
+  
+  .post-header p {
+    margin-bottom: 2px;
+  }
+  
+  .post-header p:nth-child(1) {
+    color: white;
+    font-weight: bold;
+  }
+  
+  .post-header p:nth-child(2), p:nth-child(3) {
+    color: #d9d9d9;
+  }
+  
+  #apartment-name {
+    margin-top: 15px;
+    font-size: 1.125rem;
+    color: white;
+    font-weight: bold;
+    cursor: pointer;
+  }
+  
+  #gpt-score {
+    font-weight: bold;
+  }
+  
+  #gpt-score span {
+    color: #f1c40f;
+  }
+  
+  .like-comment-delete-wrapper{
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 50px;
+  
+  }
+  #delete-icon-wrapper{
+    position: absolute;
+    right: 20px;
+  }
+ 
+  #like-icon-wrapper{
+      margin-right: 20px;
+  }
+  #like-icon-wrapper img{
+    cursor: pointer;
+  }
+  #text-icon-wrapper img{
+    cursor: pointer;
+  }
+ 
+  .icon-text-wrapper {
+    display: flex;
+    align-items: center;
+    
+  }
+  
+  .icon-text-wrapper p {
+    
+    font-size: 20px;
+    color: white;
+    margin: 0 0 0 8px;
+    font-weight: bold;
+    
+  }
+  
+  .icon-text-wrapper img {
+    width: 20px;
+    height: 20px;
+  }
+  
 }
 
-.icon-text-wrapper img {
-  width: 16px;
-  height: 16px;
-}
\ No newline at end of file