diff --git a/diskuy/src/Comment.css b/diskuy/src/Comment.css
new file mode 100644
index 0000000000000000000000000000000000000000..3abc1d4eaf8623fe05815c3d71aa44c4a9e1e176
--- /dev/null
+++ b/diskuy/src/Comment.css
@@ -0,0 +1,3 @@
+#comment {
+    background-color: aqua;
+}
\ No newline at end of file
diff --git a/diskuy/src/Post.js b/diskuy/src/Post.js
new file mode 100644
index 0000000000000000000000000000000000000000..7f446ac6e369a3099bd220d7865d852d448a8030
--- /dev/null
+++ b/diskuy/src/Post.js
@@ -0,0 +1,12 @@
+import './Comment.css';
+
+export default function Post(props){
+    return (
+        <div id="comment">
+            <p id="creator">By {props.user} - Date</p>
+            <h1 id="judul">{props.header}</h1>
+            <p id="isi">{props.text}</p>
+            <p className='inline'>{props.points}</p>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/diskuy/src/Thread.css b/diskuy/src/Thread.css
new file mode 100644
index 0000000000000000000000000000000000000000..0a9a9ab469976c5cf2f57c356ffc642c3457802a
--- /dev/null
+++ b/diskuy/src/Thread.css
@@ -0,0 +1,8 @@
+.indent {
+    position: relative;
+    left: 5%
+}
+
+.inline {
+    display: inline;
+}
\ No newline at end of file
diff --git a/diskuy/src/Topic.js b/diskuy/src/Topic.js
new file mode 100644
index 0000000000000000000000000000000000000000..c6f7919b3f49e37ec93402d23c7bee0a346734e1
--- /dev/null
+++ b/diskuy/src/Topic.js
@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+import Thread from './Thread'
+
+const threads = [
+    {
+        header: 'halo'
+    },
+    {
+        header: 'halo'
+    }
+]
+
+export default function Topic(props){
+    const [thread, setThread] = useState(threads)
+
+    return (
+        <div>
+            {thread.map((value) => (
+                <h2>{value.header}</h2>
+            ))}
+        </div>
+    )
+}
\ No newline at end of file