diff --git a/src/components/thread/EditComment.jsx b/src/components/thread/EditComment.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..7672d49e938b712f75244ea53c958bfacb8c7f8b
--- /dev/null
+++ b/src/components/thread/EditComment.jsx
@@ -0,0 +1,102 @@
+import axios from 'axios';
+import React, { useState, useEffect } from 'react';
+import { useInput } from '../../helpers/hooks/input-hook';
+import { authHeader } from '../../helpers/services/auth.service';
+import { API_URL } from '../../config/keys';
+import '../../styles/thread/Form.css';
+
+export default function EditComment(props) {
+  const { history } = props;
+
+  const back = () => {
+    history.goBack();
+  };
+
+  const redirect = (path) => {
+    history.push(path);
+  };
+
+  const commentId = props.match.params.comment;
+
+  const {
+    value: body,
+    setValue: setBody,
+    bind: bindBody,
+    reset: resetBody,
+  } = useInput('');
+
+  const [message, setMessage] = useState('');
+
+  useEffect(() => {
+    async function getDetailComment(commentId) {
+      // Grab comment detail
+      const content = await (
+        await axios.get(`${API_URL}/post/${commentId}`)
+      ).data?.data.message;
+      setBody(content);
+    }
+    getDetailComment(commentId);
+  }, [setBody, commentId]);
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    try {
+      const thisComment = await axios.put(
+        `${API_URL}/post/${commentId}`,
+        {
+          post: {
+            message: body,
+          },
+        },
+        {
+          headers: authHeader(),
+        }
+      );
+      const { data } = thisComment?.data;
+      redirect(`/topic/${data?.topic_name}/${data?.thread_id}/page/1`);
+    } catch (error) {
+      setMessage("Failed to edit comment");
+    }
+    resetBody();
+  };
+
+  return (
+    <div className="formContainer">
+      <div className="back" onClick={back}>
+        <i className="fas fa-angle-left"></i>
+        <h5>Back</h5>
+      </div>
+      <div className="header">
+        <h1>
+          <b>Edit a Comment</b>
+        </h1>
+      </div>
+      <div className="form_section">
+        <div>
+          {message && (
+            <div>
+              <div className="alert alert-danger" role="alert">
+                <p>{message}</p>
+              </div>
+            </div>
+          )}
+          <form onSubmit={handleSubmit}>
+            <div className="form_container">
+              <label for="body">Body</label>
+              <textarea
+                className="body"
+                name="body"
+                placeholder="Tulis"
+                required="false"
+                {...bindBody}
+              />
+              <div className="buttonContainer">
+                <input type="submit" className="buttonSubmit" value="Edit Comment" />
+              </div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/thread/Post.jsx b/src/components/thread/Post.jsx
index 0a8f1298bd825a1c98cbd0ac39a85e51d18409b3..4fef77907ce5bf8052d1e13465c134e3c4f6fc71 100644
--- a/src/components/thread/Post.jsx
+++ b/src/components/thread/Post.jsx
@@ -133,6 +133,12 @@ export default function Post(props) {
                   )}
                   {checkType == 'post' && (
                     <div classname="commentDeleteButton">
+                      <Button
+                        type="button"
+                        text="Edit"
+                        color="none-green"
+                        url={`comment/edit/${content.id}`}
+                      />
                       <button
                         type="button"
                         className="deleteButton"
diff --git a/src/routes/App.jsx b/src/routes/App.jsx
index 9a8bcf1143b3ad7a88fd7d5a204cbe895ad44c7a..6f72f0c440ac21071c66a3ae9de361f63a4959cf 100644
--- a/src/routes/App.jsx
+++ b/src/routes/App.jsx
@@ -12,6 +12,7 @@ import Search from '../components/Search';
 import EditThread from '../components/thread/EditThread';
 import Footer from '../components/utility/Footer';
 import UpdateProfileForm from '../components/profile/UpdateProfileForm.jsx';
+import EditComment from '../components/thread/EditComment';
 import {
   BrowserRouter as Router,
   Route,
@@ -61,6 +62,7 @@ function App() {
         <Route exact path="/threads" component={ListThreads} />
         <Route exact path="/thread/edit/:thread" component={EditThread} />
         <Route exact path="/profile/update" component={UpdateProfileForm} />
+        <Route exact path="/comment/edit/:comment" component={EditComment} />
         <Redirect exact from="" to="page/1" />
       </Switch>
       <Footer />