diff --git a/package-lock.json b/package-lock.json
index d4961aa..6b3c673 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "version": "0.0.0",
       "dependencies": {
+        "@giscus/react": "^3.0.0",
         "@vercel/analytics": "^1.3.1",
         "@vercel/speed-insights": "^1.0.12",
         "github-markdown-css": "^5.6.1",
@@ -379,6 +380,18 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@giscus/react": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@giscus/react/-/react-3.0.0.tgz",
+      "integrity": "sha512-hgCjLpg3Wgh8VbTF5p8ZLcIHI74wvDk1VIFv12+eKhenNVUDjgwNg2B1aq/3puyHOad47u/ZSyqiMtohjy/OOA==",
+      "dependencies": {
+        "giscus": "^1.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18",
+        "react-dom": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -459,6 +472,21 @@
         "node": ">=12"
       }
     },
+    "node_modules/@lit-labs/ssr-dom-shim": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.2.1.tgz",
+      "integrity": "sha512-wx4aBmgeGvFmOKucFKY+8VFJSYZxs9poN3SDNQFF6lT6NrQUnHiPB2PWz2sc4ieEcAaYYzN+1uWahEeTq2aRIQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/@lit/reactive-element": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-2.0.4.tgz",
+      "integrity": "sha512-GFn91inaUa2oHLak8awSIigYz0cU0Payr1rcFsrkf5OJ5eSPxElyZfKh0f2p9FsTiZWXQdWGJeXZICEfXXYSXQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.2.0"
+      }
+    },
     "node_modules/@next/env": {
       "version": "14.2.11",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.11.tgz",
@@ -1113,6 +1141,12 @@
       "integrity": "sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==",
       "dev": true
     },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "license": "MIT"
+    },
     "node_modules/@types/unist": {
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
@@ -4351,6 +4385,15 @@
         "url": "https://github.com/privatenumber/get-tsconfig?sponsor=1"
       }
     },
+    "node_modules/giscus": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/giscus/-/giscus-1.5.0.tgz",
+      "integrity": "sha512-t3LL0qbSO3JXq3uyQeKpF5CegstGfKX/0gI6eDe1cmnI7D56R7j52yLdzw4pdKrg3VnufwCgCM3FDz7G1Qr6lg==",
+      "license": "MIT",
+      "dependencies": {
+        "lit": "^3.1.2"
+      }
+    },
     "node_modules/github-markdown-css": {
       "version": "5.6.1",
       "resolved": "https://registry.npmjs.org/github-markdown-css/-/github-markdown-css-5.6.1.tgz",
@@ -5704,6 +5747,37 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
+    "node_modules/lit": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-3.2.0.tgz",
+      "integrity": "sha512-s6tI33Lf6VpDu7u4YqsSX78D28bYQulM+VAzsGch4fx2H0eLZnJsUBsPWmGYSGoKDNbjtRv02rio1o+UdPVwvw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit/reactive-element": "^2.0.4",
+        "lit-element": "^4.1.0",
+        "lit-html": "^3.2.0"
+      }
+    },
+    "node_modules/lit-element": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-4.1.0.tgz",
+      "integrity": "sha512-gSejRUQJuMQjV2Z59KAS/D4iElUhwKpIyJvZ9w+DIagIQjfJnhR20h2Q5ddpzXGS+fF0tMZ/xEYGMnKmaI/iww==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.2.0",
+        "@lit/reactive-element": "^2.0.4",
+        "lit-html": "^3.2.0"
+      }
+    },
+    "node_modules/lit-html": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-3.2.0.tgz",
+      "integrity": "sha512-pwT/HwoxqI9FggTrYVarkBKFN9MlTUpLrDHubTmW4SrkL3kkqW5gxwbxMMUnbbRHBC0WTZnYHcjDSCM559VyfA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
     "node_modules/load-json-file": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
diff --git a/package.json b/package.json
index dbbb72d..72dea3b 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "count-docs": "ls -R src/posts/docs | grep .md | wc -l"
   },
   "dependencies": {
+    "@giscus/react": "^3.0.0",
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.12",
     "github-markdown-css": "^5.6.1",
diff --git a/src/app/docs/[...categories]/layout.jsx b/src/app/docs/[...categories]/layout.jsx
new file mode 100644
index 0000000..ea439d4
--- /dev/null
+++ b/src/app/docs/[...categories]/layout.jsx
@@ -0,0 +1,13 @@
+import Section from '@/components/layouts/Section/Section';
+import Giscus from '@/components/section/Giscus';
+
+export default function Layout({ children }) {
+  return (
+    <>
+      {children}
+      <Section>
+        <Giscus />
+      </Section>
+    </>
+  );
+}
diff --git a/src/components/layouts/Section/Section.jsx b/src/components/layouts/Section/Section.jsx
new file mode 100644
index 0000000..5a5c177
--- /dev/null
+++ b/src/components/layouts/Section/Section.jsx
@@ -0,0 +1,5 @@
+import styles from './Section.module.scss';
+
+export default function Section({ children }) {
+  return <section className={styles.section}>{children}</section>;
+}
diff --git a/src/components/layouts/Section/Section.module.scss b/src/components/layouts/Section/Section.module.scss
new file mode 100644
index 0000000..7ab300e
--- /dev/null
+++ b/src/components/layouts/Section/Section.module.scss
@@ -0,0 +1,3 @@
+.section {
+  margin: 50px 0;
+}
diff --git a/src/components/layouts/Section/index.js b/src/components/layouts/Section/index.js
new file mode 100644
index 0000000..0da1673
--- /dev/null
+++ b/src/components/layouts/Section/index.js
@@ -0,0 +1,3 @@
+import Section from './Section';
+
+export default Section;
diff --git a/src/components/section/Giscus/Giscus.jsx b/src/components/section/Giscus/Giscus.jsx
new file mode 100644
index 0000000..669a0cc
--- /dev/null
+++ b/src/components/section/Giscus/Giscus.jsx
@@ -0,0 +1,24 @@
+'use client';
+
+import GiscusOriginal from '@giscus/react';
+
+import { REPOSITORY } from '@/constants/github';
+
+export default function Giscus() {
+  return (
+    <GiscusOriginal
+      repo={REPOSITORY.fullName}
+      repoId="R_kgDOLa_QgA"
+      category="comments"
+      categoryId="DIC_kwDOLa_QgM4ChivI"
+      mapping="pathname"
+      strict="0"
+      reactionsEnabled="1"
+      emitMetadata="0"
+      inputPosition="top"
+      theme="preferred_color_scheme"
+      lang="ko"
+      loading="lazy"
+    />
+  );
+}
diff --git a/src/components/section/Giscus/index.js b/src/components/section/Giscus/index.js
new file mode 100644
index 0000000..b6c4a53
--- /dev/null
+++ b/src/components/section/Giscus/index.js
@@ -0,0 +1,3 @@
+import Giscus from './Giscus';
+
+export default Giscus;