diff --git a/react-app/src/components/MarkdownContent.jsx b/react-app/src/components/MarkdownContent.jsx
index 16038f4..2b1ea7a 100644
--- a/react-app/src/components/MarkdownContent.jsx
+++ b/react-app/src/components/MarkdownContent.jsx
@@ -40,6 +40,7 @@ function MarkdownContent() {
       <div className="markdown-preview-sizer markdown-preview-section"
            dangerouslySetInnerHTML={{__html: innerHtml.content}}>
       </div>
+        <UtterancesComments />
     </>
   );
 }
diff --git a/react-app/src/components/UtterancesComments.jsx b/react-app/src/components/UtterancesComments.jsx
new file mode 100644
index 0000000..9155235
--- /dev/null
+++ b/react-app/src/components/UtterancesComments.jsx
@@ -0,0 +1,33 @@
+import {useEffect, useRef} from "react";
+import data from '../stores/data.json'
+
+const UtterancesComments = () => {
+  const commentsRef = useRef(null);
+  
+  useEffect(() => {
+    if (!data.isEnableComments) return;
+    const currentRef = commentsRef.current;
+    if (!currentRef) return;
+
+    const script = document.createElement("script");
+    script.src = "https://utteranc.es/client.js";
+    script.setAttribute("repo", data.repo);
+    script.setAttribute("issue-term", "pathname");
+    script.setAttribute("theme", data.theme);
+    script.crossOrigin = "anonymous";
+    script.async = true;
+
+    commentsRef.current.appendChild(script);
+
+    return () => {
+      if (commentsRef) {
+        currentRef.innerHTML = "";
+      }
+    };
+
+  }, []);
+  
+  return <div ref={commentsRef} />;
+};
+
+export default UtterancesComments;
\ No newline at end of file