diff --git a/src/components/misc/Comments.astro b/src/components/misc/Comments.astro
new file mode 100644
index 0000000..51cdf5f
--- /dev/null
+++ b/src/components/misc/Comments.astro
@@ -0,0 +1,51 @@
+---
+// Giscus comments component — powered by GitHub Discussions
+// https://giscus.app
+---
+<div id="giscus-container" class="mt-6 mb-6 onload-animation">
+  <script
+    src="https://giscus.app/client.js"
+    data-repo="oc-xiaoju/oc-xiaoju.github.io"
+    data-repo-id="R_kgDOR325cw"
+    data-category="General"
+    data-category-id="DIC_kwDOR325c84C6RGY"
+    data-mapping="pathname"
+    data-strict="0"
+    data-reactions-enabled="1"
+    data-emit-metadata="0"
+    data-input-position="top"
+    data-theme="preferred_color_scheme"
+    data-lang="zh-CN"
+    data-loading="lazy"
+    crossorigin="anonymous"
+    async
+  ></script>
+</div>
+
+<script>
+  // Sync Giscus theme with site theme
+  function updateGiscusTheme() {
+    const isDark = document.documentElement.classList.contains('dark')
+    const theme = isDark ? 'dark' : 'light'
+    const iframe = document.querySelector<HTMLIFrameElement>('iframe.giscus-frame')
+    if (iframe) {
+      iframe.contentWindow?.postMessage(
+        { giscus: { setConfig: { theme } } },
+        'https://giscus.app'
+      )
+    }
+  }
+
+  // Watch for theme changes
+  const observer = new MutationObserver(updateGiscusTheme)
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['class'],
+  })
+
+  // Also update when giscus iframe loads
+  window.addEventListener('message', (event) => {
+    if (event.origin !== 'https://giscus.app') return
+    updateGiscusTheme()
+  })
+</script>
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index 2079efd..6b5b5c3 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -1,6 +1,7 @@
 ---
 import path from "node:path";
 import License from "@components/misc/License.astro";
+import Comments from "@components/misc/Comments.astro";
 import Markdown from "@components/misc/Markdown.astro";
 import I18nKey from "@i18n/i18nKey";
 import { i18n } from "@i18n/translation";
@@ -108,6 +109,8 @@ const jsonLd = {
 
             {licenseConfig.enable && <License title={entry.data.title} slug={entry.slug} pubDate={entry.data.published} class="mb-6 rounded-xl license-container onload-animation"></License>}
 
+            <Comments />
+
         </div>
     </div>