diff --git a/daily-thought-frontend/src/components/comments/Comment.tsx b/daily-thought-frontend/src/components/comments/Comment.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..754572915a6f59bac3e4cb2d8a3f8b5f31a486a1
--- /dev/null
+++ b/daily-thought-frontend/src/components/comments/Comment.tsx
@@ -0,0 +1,32 @@
+import { Comment } from "@/types/comment"
+import { HeartIcon } from '@heroicons/react/24/outline'
+import { FC, PropsWithChildren } from "react"
+
+type CommentProps = {
+  Comment: Comment,
+
+}
+
+const Comment: FC<PropsWithChildren<CommentProps>> = ({
+  Comment
+}) => {
+
+  return (
+    <div className="w-full flex items-center justify-between p-2">
+      <div className="flex flex-1">
+        <div className="flex h-8 w-8 max-w-xs items-center justify-center rounded-full bg-c-pink text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-pink-400 mr-2">
+          <img className="h-8 w-8 rounded-full" src={Comment.User.Avatar} alt="" />
+        </div>
+        <div>
+          <p className="text-xs font-bold">{Comment.User.Name}</p>
+          <p className="text-sm">This is my comment</p>
+          <p className="text-xs text-gray-500">1 like</p>
+        </div>
+      </div>
+      
+      <HeartIcon className="block h-3 w-3" aria-hidden="true" />
+    </div>
+  )
+}
+
+export default Comment;
\ No newline at end of file