diff --git a/frontend/src/components/Comments.js b/frontend/src/components/Comments.js
new file mode 100644
index 0000000000000000000000000000000000000000..edd8e7fa463d90d9416daeced8b96da32664dfc5
--- /dev/null
+++ b/frontend/src/components/Comments.js
@@ -0,0 +1,33 @@
+import React, {useEffect, useState} from "react";
+import "../css/Article.css"
+
+import {Routes, Route, Link, useNavigate, Navigate  } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
+
+function Comments({data}) {
+  const [
+    _id, title, content, images, author,
+    keyword, latitude, longitude,
+    comments, likes, createdAt] = data;
+
+  const navigate = useNavigate();
+  function MoveTo(link){
+    navigate(link)
+  }	
+  let listItem = []
+  listItem = comments.map((el)=>{
+    // http://localhost:8080/uploads/21701487062905.png
+    return(
+        <p>肄붾㎤�� �뚯뒪��</p>
+    )});
+    
+  return (
+    <div class="comment">
+      <p>{'肄붾㎤�� �뚯뒪��{'}</p>
+      <p>{listItem}</p>
+      <p>{'}肄붾㎤�� �뚯뒪��'}</p>
+    </div>
+  );
+}
+
+export default Comments;
diff --git a/frontend/src/css/Article.css b/frontend/src/css/Article.css
index 6e932291be394a181849d705417502bd964d7215..d68f5eab74fb6a72bd6cb0884a6c631eb73e7733 100644
--- a/frontend/src/css/Article.css
+++ b/frontend/src/css/Article.css
@@ -4,5 +4,5 @@
 }
 
 .article:hover {
-    background-color: #bbbbbb;
+    background-color: #dddddd;
   }
\ No newline at end of file
diff --git a/frontend/src/pages/PostRead.js b/frontend/src/pages/PostRead.js
index bbd4c0f83d8b3810756c976a4dcdfab1eff77138..a7fc63e6833c0b54312bb44cb3f2e40b45eb48ab 100644
--- a/frontend/src/pages/PostRead.js
+++ b/frontend/src/pages/PostRead.js
@@ -4,7 +4,7 @@ import React, { useEffect, useState, useContext} from 'react';
 import Article from '../components/Article.js';
 import { UserContext } from '../Context.js';
 import MapLocator from '../components/MapForLoaction.js';
-
+import Comments from '../components/Comments.js';
 
 import axios from 'axios';
 axios.defaults.withCredentials = true;
@@ -39,33 +39,38 @@ function PostRead() {
 
     }, []);  
 
-
-
     console.log(article);
     console.log(article?Object.values(article):"no");
-    if (article) {
-      return(
-        <div className="App" >
+
+      if (article) {
+        return(
+          <>
             <div className="introduction" style={{display: 'flex'}}>
               <MapLocator loc={{lat: article.latitude, lng: article.longitude}} keyword={article.keyword}></MapLocator>
-              <Article data={Object.values(article)}></Article>
+              <div>
+                <Article data={Object.values(article)}></Article>
+                <button>議곗���</button>
+              </div>
             </div>
-            �볤�李�, �볤��곌린, 議곗��� �꾨Ⅴ湲�
-            �ъ뒪�� �댁슜
-            <p>�꾩옱 �섏씠吏��� �뚮씪誘명꽣�� { params.id } �낅땲��.</p>
-        </div>)
-    }
-    else {
-      return(
-        <div className="App">
-          <h1>�ъ뒪�� �섏씠吏�</h1>
-            <div className="introduction" style={{display: 'flex'}}>
-              <p>濡쒕뵫以�</p>
-            </div>
-        </div>)
-    }
+            <form>
+              <div style={{display: 'flex'}}>
+                <button>�볤� �묒꽦</button>
+                <input type="text"></input>
+              </div>
+            </form>   
+            <Comments data={Object.values(article)}></Comments>      
+          </>
+
+        )    
+      }
+      else {
+        return(
+        <div className="introduction" style={{display: 'flex'}}>
+          <p>濡쒕뵫以�</p>
+        </div>
+        )
+      }
 
-    ;
   }
 
   async function requestLoadArticleById(id) {