diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 81b3e9d7a..24df2aefd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6725,6 +6725,9 @@ importers:
       '@docsearch/react':
         specifier: '3'
         version: 3.5.2(@algolia/client-search@4.22.0)(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)(search-insights@2.13.0)
+      '@giscus/react':
+        specifier: ^2
+        version: 2.4.0(react-dom@18.2.0)(react@18.2.0)
       '@tailwindcss/typography':
         specifier: ^0.5.10
         version: 0.5.10(tailwindcss@3.4.0)
@@ -8033,6 +8036,17 @@ packages:
     resolution: {integrity: sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==}
     dev: false
 
+  /@giscus/react@2.4.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-y8d8qiZ2sBuaXRcgn/ZWfMlRs9bx26p62BU/HEKQQ+IfHo3B/kglgPjX/IqudwlX+DOlHUl1NvtFo9C8Eqo0eQ==}
+    peerDependencies:
+      react: ^16 || ^17 || ^18
+      react-dom: ^16 || ^17 || ^18
+    dependencies:
+      giscus: 1.4.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@github/browserslist-config@1.0.0:
     resolution: {integrity: sha512-gIhjdJp/c2beaIWWIlsXdqXVRUz3r2BxBCpfz/F3JXHvSAQ1paMYjLH+maEATtENg+k5eLV7gA+9yPp762ieuw==}
     dev: true
@@ -8538,6 +8552,16 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /@lit-labs/ssr-dom-shim@1.1.2:
+    resolution: {integrity: sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g==}
+    dev: false
+
+  /@lit/reactive-element@2.0.2:
+    resolution: {integrity: sha512-SVOwLAWUQg3Ji1egtOt1UiFe4zdDpnWHyc5qctSceJ5XIu0Uc76YmGpIjZgx9YJ0XtdW0Jm507sDvjOu+HnB8w==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.1.2
+    dev: false
+
   /@manypkg/cli@0.21.1:
     resolution: {integrity: sha512-v9Orok25sBcFfTSniDLx1FsRRXsn2qz7EiC3cPMKtTNDTwSE2Teq/nXUPX73xNd1NIjMwTXfio1QWsQ9O36Atg==}
     engines: {node: '>=14.18.0'}
@@ -9916,6 +9940,10 @@ packages:
     resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
     dev: true
 
+  /@types/trusted-types@2.0.7:
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+    dev: false
+
   /@types/unist@2.0.10:
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
     dev: false
@@ -13012,6 +13040,12 @@ packages:
       resolve-pkg-maps: 1.0.0
     dev: true
 
+  /giscus@1.4.0:
+    resolution: {integrity: sha512-Pll+pcclTx47NcFDw8nuka2Ja85Gc4XWpzSgL0rszOQaMQRQIV8UMR+zP4a+/N3tV2TXc1SZ537kWlsN6EsAaw==}
+    dependencies:
+      lit: 3.1.0
+    dev: false
+
   /git-hooks-list@3.1.0:
     resolution: {integrity: sha512-LF8VeHeR7v+wAbXqfgRlTSX/1BJR9Q1vEMR8JAz1cEg6GX07+zyj3sAdDvYjj/xnlIfVuGgj4qBei1K3hKH+PA==}
     dev: true
@@ -14767,6 +14801,28 @@ packages:
       repeat-string: 1.6.1
     dev: false
 
+  /lit-element@4.0.2:
+    resolution: {integrity: sha512-/W6WQZUa5VEXwC7H9tbtDMdSs9aWil3Ou8hU6z2cOKWbsm/tXPAcsoaHVEtrDo0zcOIE5GF6QgU55tlGL2Nihg==}
+    dependencies:
+      '@lit-labs/ssr-dom-shim': 1.1.2
+      '@lit/reactive-element': 2.0.2
+      lit-html: 3.1.0
+    dev: false
+
+  /lit-html@3.1.0:
+    resolution: {integrity: sha512-FwAjq3iNsaO6SOZXEIpeROlJLUlrbyMkn4iuv4f4u1H40Jw8wkeR/OUXZUHUoiYabGk8Y4Y0F/rgq+R4MrOLmA==}
+    dependencies:
+      '@types/trusted-types': 2.0.7
+    dev: false
+
+  /lit@3.1.0:
+    resolution: {integrity: sha512-rzo/hmUqX8zmOdamDAeydfjsGXbbdtAFqMhmocnh2j9aDYqbu0fjXygjCa0T99Od9VQ/2itwaGrjZz/ZELVl7w==}
+    dependencies:
+      '@lit/reactive-element': 2.0.2
+      lit-element: 4.0.2
+      lit-html: 3.1.0
+    dev: false
+
   /load-json-file@5.3.0:
     resolution: {integrity: sha512-cJGP40Jc/VXUsp8/OrnyKyTZ1y6v/dphm3bioS+RrKXjK2BB6wHUd6JptZEFDGgGahMT+InnZO5i1Ei9mpC8Bw==}
     engines: {node: '>=6'}
diff --git a/website/package.json b/website/package.json
index 37984e411..56de3eb09 100644
--- a/website/package.json
+++ b/website/package.json
@@ -12,6 +12,7 @@
     "@codinasion/language-data": "workspace:*",
     "@docsearch/css": "3",
     "@docsearch/react": "3",
+    "@giscus/react": "^2",
     "@tailwindcss/typography": "^0.5.10",
     "daisyui": "^4.4.22",
     "flowbite": "^2.2.0",
diff --git a/website/src/app/program/[slug]/page.tsx b/website/src/app/program/[slug]/page.tsx
index 292970f5c..46f41cc0a 100644
--- a/website/src/app/program/[slug]/page.tsx
+++ b/website/src/app/program/[slug]/page.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import SEO from "@/components/SEO";
+import Breadcrumb from "@/components/Breadcrumb";
 import ProgramDetailComponent from "@/components/Program/program-detail-component";
 import { GetProgramList, GetProgramData } from "@/data";
 import type { ProgramDataType, ProgramListType } from "@/types";
@@ -56,6 +57,14 @@ export default async function ProgramDetailPage({
 
   return (
     <>
+      <Breadcrumb
+        paths={[
+          { title: "Home", href: "/" },
+          { title: "Program", href: "/program" },
+          { title: programData.title },
+        ]}
+      />
+
       <ProgramDetailComponent programData={programData} />
     </>
   );
diff --git a/website/src/components/Breadcrumb/index.tsx b/website/src/components/Breadcrumb/index.tsx
new file mode 100644
index 000000000..ea2fc5aec
--- /dev/null
+++ b/website/src/components/Breadcrumb/index.tsx
@@ -0,0 +1,26 @@
+import Link from "@/components/Link";
+
+interface Props {
+  paths: {
+    title: string;
+    href?: string;
+  }[];
+}
+
+export default function Breadcrumb({ paths }: Props) {
+  return (
+    <div className="text-sm breadcrumbs mb-5">
+      <ul>
+        {paths.map((path, index) => (
+          <li key={index}>
+            {path.href ? (
+              <Link href={path.href}>{path.title}</Link>
+            ) : (
+              <span>{path.title}</span>
+            )}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
diff --git a/website/src/components/Comment/index.tsx b/website/src/components/Comment/index.tsx
new file mode 100644
index 000000000..669f03228
--- /dev/null
+++ b/website/src/components/Comment/index.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import Giscus from "@giscus/react";
+
+export default function Comment() {
+  const { theme } = useTheme();
+
+  return (
+    <>
+      <div className="my-10">
+        <Giscus
+          id="giscus-comments"
+          repo={`codinasion/.github`}
+          repoId={`R_kgDOKx7Kyw`}
+          category={`General`}
+          categoryId={`DIC_kwDOKx7Ky84CcJY2`}
+          mapping={`pathname`}
+          strict={`1`}
+          reactionsEnabled={`1`}
+          emitMetadata={`0`}
+          inputPosition={`bottom`}
+          theme={theme}
+          lang={`en`}
+          loading={`lazy`}
+        />
+      </div>
+    </>
+  );
+}
diff --git a/website/src/components/MarkdownPreview/Code.tsx b/website/src/components/MarkdownPreview/Code.tsx
index 463534f00..6a1d9be77 100644
--- a/website/src/components/MarkdownPreview/Code.tsx
+++ b/website/src/components/MarkdownPreview/Code.tsx
@@ -31,7 +31,7 @@ function Code({ className, children, ...props }: CodeProps): JSX.Element {
     </SyntaxHighlighter>
   ) : (
     // Inline code
-    <kbd className="bg-base-300 rounded-md px-2 pt-1 font-mono break-words">
+    <kbd className="bg-neutral rounded-md px-2 pt-1 font-mono break-words">
       {String(children.trim()).replace(/\n$/, "")}
     </kbd>
   );
diff --git a/website/src/components/Program/program-component.tsx b/website/src/components/Program/program-component.tsx
index 9ddbc9eb7..52c169b40 100644
--- a/website/src/components/Program/program-component.tsx
+++ b/website/src/components/Program/program-component.tsx
@@ -1,7 +1,7 @@
 import Pagination from "@/components/Pagination";
 import ProgramCard from "./program-card";
 import ProgramLanguageComponent from "./program-language-component";
-import SponsorCard from "../Sponsors/sponsor-card";
+import SponsorCard from "@/components/Sponsors/sponsor-card";
 import type { ProgramListType } from "@/types";
 
 interface Props {
diff --git a/website/src/components/Program/program-detail-component.tsx b/website/src/components/Program/program-detail-component.tsx
index cc1dca0c9..d81ecc455 100644
--- a/website/src/components/Program/program-detail-component.tsx
+++ b/website/src/components/Program/program-detail-component.tsx
@@ -1,5 +1,6 @@
 import { GetLanguageData } from "@codinasion/language-data";
 import MarkdownPreview from "@/components/MarkdownPreview";
+import Comment from "@/components/Comment";
 import ProgramContributorsComponent from "./program-contributors-component";
 import SponsorCard from "@/components/Sponsors/sponsor-card";
 import type { ProgramDataType } from "@/types";
@@ -36,6 +37,8 @@ ${programData.description}
 ${codeblock}
 `}
         </MarkdownPreview>
+
+        <Comment />
       </div>
 
       <div className="space-y-5 min-w-[320px]">