diff --git "a/components/\bGitcus.tsx" "b/components/\bGitcus.tsx"
new file mode 100644
index 0000000..4fc7169
--- /dev/null
+++ "b/components/\bGitcus.tsx"
@@ -0,0 +1,45 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import { useTheme } from 'next-themes'
+
+export default function Giscus() {
+  const ref = useRef<HTMLDivElement>(null)
+  const { resolvedTheme } = useTheme()
+  const theme = resolvedTheme === 'dark' ? 'dark' : 'light'
+
+  useEffect(() => {
+    if (!ref.current || ref.current.hasChildNodes()) return
+
+    const scriptElem = document.createElement('script')
+    scriptElem.src = 'https://giscus.app/client.js'
+    scriptElem.async = true
+    scriptElem.crossOrigin = 'anonymous'
+
+    scriptElem.setAttribute('data-repo', 'WE-ARE-RACCOONS/RACCOONS')
+    scriptElem.setAttribute('data-repo-id', 'R_kgDONOeDQg')
+    scriptElem.setAttribute('data-mapping', 'pathname')
+    scriptElem.setAttribute('data-strict', '0')
+    scriptElem.setAttribute('data-reactions-enabled', '1')
+    scriptElem.setAttribute('data-emit-metadata', '0')
+    scriptElem.setAttribute('data-input-position', 'bottom')
+    scriptElem.setAttribute('data-theme', theme)
+    scriptElem.setAttribute('data-lang', 'ko')
+    ref.current.style.width = '100%'
+
+    ref.current.appendChild(scriptElem)
+  }, [theme])
+
+  return (
+    <section
+      ref={ref}
+      style={{
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        margin: '0 auto',
+      }}
+    />
+  )
+}
diff --git a/components/Comments.tsx b/components/Comments.tsx
index 079ed4b..e0e82ba 100644
--- a/components/Comments.tsx
+++ b/components/Comments.tsx
@@ -1,7 +1,19 @@
 'use client'
 
-import Giscus from './Gitcus'
+import Giscus from './\bGitcus'
 
 export default function Comments({ slug }: { slug: string }) {
-  return <Giscus />
+  return (
+    <div
+      style={{
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        margin: '0 auto',
+      }}
+    >
+      <Giscus />
+    </div>
+  )
 }
diff --git a/components/Gitcus.tsx b/components/Gitcus.tsx
deleted file mode 100644
index a51c334..0000000
--- a/components/Gitcus.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client'
-
-import dynamic from 'next/dynamic'
-const DynamicGiscus = dynamic(() => import('@giscus/react'))
-
-export default function Comments() {
-  return (
-    <DynamicGiscus
-      repo="WE-ARE-RACCOONS/RACCOONS"
-      repoId="R_kgDONOeDQg"
-      mapping="pathname"
-      lang="ko"
-      category="General"
-    />
-  )
-}
diff --git a/package-lock.json b/package-lock.json
index c64e6bd..852120c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,7 +8,6 @@
       "name": "tailwind-nextjs-starter-blog",
       "version": "2.3.0",
       "dependencies": {
-        "@giscus/react": "^3.0.0",
         "@headlessui/react": "2.2.0",
         "@next/bundle-analyzer": "15.0.2",
         "@tailwindcss/forms": "^0.5.9",
diff --git a/package.json b/package.json
index bd5baad..997aacf 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,6 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@giscus/react": "^3.0.0",
     "@headlessui/react": "2.2.0",
     "@next/bundle-analyzer": "15.0.2",
     "@tailwindcss/forms": "^0.5.9",