diff --git a/contentlayer.config.ts b/contentlayer.config.ts
index 0bbbdea..69bce5b 100644
--- a/contentlayer.config.ts
+++ b/contentlayer.config.ts
@@ -1,8 +1,16 @@
 import path from "path";
 import * as fs from "fs";
 import { createSlug, SpeakerData, TopicsData, unsluggify } from "./src/utils";
-import { defineDocumentType, defineNestedType, makeSource } from "contentlayer2/source-files";
-import { Transcript as ContentTranscriptType, Source as ContentSourceType } from "./.contentlayer/generated/types";
+import {
+  defineDocumentType,
+  defineNestedType,
+  makeSource,
+} from "contentlayer2/source-files";
+import {
+  Transcript as ContentTranscriptType,
+  Source as ContentSourceType,
+} from "./.contentlayer/generated/types";
+import { LanguageCodes } from "./src/config";
 
 const Resources = defineNestedType(() => ({
   name: "Resources",
@@ -94,7 +102,11 @@ function organizeTags(transcripts: ContentTranscriptType[]) {
   });
 
   // Process all tags at once
-  const allTags = new Set(transcripts.flatMap((transcript) => transcript.tags?.map((tag) => tag) || []));
+  const allTags = new Set(
+    transcripts.flatMap(
+      (transcript) => transcript.tags?.map((tag) => tag) || []
+    )
+  );
 
   allTags.forEach((tag) => {
     const catInfo = categoryMap.get(tag);
@@ -116,11 +128,13 @@ function organizeTags(transcripts: ContentTranscriptType[]) {
 
   // Add "Miscellaneous" category with remaining uncategorized tags
   if (tagsWithoutCategory.size > 0) {
-    tagsByCategory["Miscellaneous"] = Array.from(tagsWithoutCategory).map((tag) => ({
-      name: tag,
-      slug: tag,
-      count: tagCounts[tag] || 0,
-    }));
+    tagsByCategory["Miscellaneous"] = Array.from(tagsWithoutCategory).map(
+      (tag) => ({
+        name: tag,
+        slug: tag,
+        count: tagCounts[tag] || 0,
+      })
+    );
   }
 
   // Sort tags alphabetically within each category
@@ -190,7 +204,10 @@ function createSpeakers(transcripts: ContentTranscriptType[]) {
   fs.writeFileSync("./public/speaker-data.json", JSON.stringify(speakerArray));
 }
 
-function generateSourcesCount(transcripts: ContentTranscriptType[], sources: ContentSourceType[]) {
+function generateSourcesCount(
+  transcripts: ContentTranscriptType[],
+  sources: ContentSourceType[]
+) {
   const sourcesArray: TagInfo[] = [];
   const slugSources: Record<string, number> = {};
 
@@ -204,7 +221,10 @@ function generateSourcesCount(transcripts: ContentTranscriptType[], sources: Con
       slugSources[slug] = sourcesLength;
 
       const getSourceName = (slug: string) =>
-        sources.find((source) => source.language === "en" && source.slugAsParams[0] === slug)?.title ?? unsluggify(slug);
+        sources.find(
+          (source) =>
+            source.language === "en" && source.slugAsParams[0] === slug
+        )?.title ?? unsluggify(slug);
 
       sourcesArray[sourcesLength] = {
         slug,
@@ -214,12 +234,21 @@ function generateSourcesCount(transcripts: ContentTranscriptType[], sources: Con
     }
   });
 
-  fs.writeFileSync("./public/source-count-data.json", JSON.stringify(sourcesArray));
+  fs.writeFileSync(
+    "./public/source-count-data.json",
+    JSON.stringify(sourcesArray)
+  );
   return { sourcesArray, slugSources };
 }
 
-const createTypesCount = (transcripts: ContentTranscriptType[], sources: ContentSourceType[]) => {
-  const { sourcesArray, slugSources } = generateSourcesCount(transcripts, sources);
+const createTypesCount = (
+  transcripts: ContentTranscriptType[],
+  sources: ContentSourceType[]
+) => {
+  const { sourcesArray, slugSources } = generateSourcesCount(
+    transcripts,
+    sources
+  );
   const nestedTypes: any = {};
 
   sources.forEach((transcript) => {
@@ -234,7 +263,8 @@ const createTypesCount = (transcripts: ContentTranscriptType[], sources: Content
         if (!nestedTypes[slugType]) {
           nestedTypes[slugType] = [];
         } else {
-          if (nestedTypes[slugType].includes(getSource) || getSource === null) return;
+          if (nestedTypes[slugType].includes(getSource) || getSource === null)
+            return;
           nestedTypes[slugType].push(getSource);
         }
       });
@@ -244,11 +274,27 @@ const createTypesCount = (transcripts: ContentTranscriptType[], sources: Content
   fs.writeFileSync("./public/types-data.json", JSON.stringify(nestedTypes));
 };
 
-function organizeContent(transcripts: ContentTranscriptType[], sources: ContentSourceType[]) {
+function organizeContent(
+  transcripts: ContentTranscriptType[],
+  sources: ContentSourceType[]
+) {
   const tree: any = {};
 
   sources.forEach((source) => {
-    const { _id, slugAsParams, language, _raw, weight, body, hosts, transcription_coverage, url, type, types, ...metaData } = source;
+    const {
+      _id,
+      slugAsParams,
+      language,
+      _raw,
+      weight,
+      body,
+      hosts,
+      transcription_coverage,
+      url,
+      type,
+      types,
+      ...metaData
+    } = source;
     const params = source.slugAsParams;
     const topParam = params[0] as string;
     const nestedSource = params.length > 1;
@@ -257,16 +303,21 @@ function organizeContent(transcripts: ContentTranscriptType[], sources: ContentS
       tree[topParam] = {};
     }
     const allTranscriptsForSourceLanguage = transcripts.filter(
-      (transcript) => transcript._raw.sourceFileDir === source._raw.sourceFileDir && transcript.language === language
+      (transcript) =>
+        transcript._raw.sourceFileDir === source._raw.sourceFileDir &&
+        transcript.language === language
     );
 
-    const allTranscriptsForSourceLanguageURLs = allTranscriptsForSourceLanguage.map((transcript) => transcript.url);
+    const allTranscriptsForSourceLanguageURLs =
+      allTranscriptsForSourceLanguage.map((transcript) => transcript.url);
 
     if (!nestedSource) {
       tree[topParam] = {
         ...tree[topParam],
         [language]: {
-          data: allTranscriptsForSourceLanguageURLs.length ? allTranscriptsForSourceLanguageURLs : {},
+          data: allTranscriptsForSourceLanguageURLs.length
+            ? allTranscriptsForSourceLanguageURLs
+            : {},
           metadata: {
             ...metaData,
           },
@@ -276,7 +327,9 @@ function organizeContent(transcripts: ContentTranscriptType[], sources: ContentS
       tree[topParam][language].data = {
         ...tree[topParam][language].data,
         [params[1]]: {
-          data: allTranscriptsForSourceLanguageURLs.length ? allTranscriptsForSourceLanguageURLs : {},
+          data: allTranscriptsForSourceLanguageURLs.length
+            ? allTranscriptsForSourceLanguageURLs
+            : {},
           metadata: {
             ...metaData,
           },
@@ -288,6 +341,8 @@ function organizeContent(transcripts: ContentTranscriptType[], sources: ContentS
   fs.writeFileSync("./public/sources-data.json", JSON.stringify(tree, null, 2));
 }
 
+const getLanCode = /[.]\w{2}$/gi // Removes the last two characters if there's a dot
+
 export const Transcript = defineDocumentType(() => ({
   name: "Transcript",
   filePathPattern: `**/*.md`,
@@ -322,16 +377,45 @@ export const Transcript = defineDocumentType(() => ({
       type: "string",
       resolve: (doc) => `/${doc._raw.flattenedPath}`,
     },
-    slugAsParams: {
-      type: "list",
-      resolve: (doc) => doc._raw.flattenedPath.split("/"),
-    },
     language: {
       type: "string",
       resolve: (doc) => {
         const transcript = doc._raw.flattenedPath.split("/").pop();
-        const lan = transcript?.split(".").length === 2 ? transcript?.split(".")[1] : "en";
-        return lan;
+        const lan = transcript?.match(getLanCode);
+        const languageCode = (lan?.[lan.length - 1] || "").replace(".", "");
+        const finalLanguage = LanguageCodes.includes(languageCode)
+          ? languageCode
+          : "en";
+        return finalLanguage;
+      },
+    },
+    languageURL: {
+      type: "string",
+      resolve: (doc) => {
+        const transcript = doc._raw.flattenedPath.split("/").pop();
+        const fullPathWithoutDot = doc._raw.flattenedPath.replace(
+          getLanCode,
+          ""
+        );
+
+        const lan = transcript?.match(getLanCode);
+        const languageCode = (lan?.[0] || "").replace(".", "")
+
+        if (LanguageCodes.includes(languageCode)) {
+          return `/${languageCode}/${fullPathWithoutDot}`;
+        }
+
+        return `/${fullPathWithoutDot}`;
+      },
+    },
+    slugAsParams: {
+      type: "list",
+      resolve: (doc) => {
+        const pathWithoutDot = doc._raw.flattenedPath.replace(
+          getLanCode,
+          ""
+        );
+        return pathWithoutDot.split("/");
       },
     },
   },
@@ -354,13 +438,15 @@ export const Source = defineDocumentType(() => ({
   computedFields: {
     url: {
       type: "string",
-      resolve: (doc) => `/${doc._raw.flattenedPath.split("/").slice(0, -1).join("/")}`,
+      resolve: (doc) =>
+        `/${doc._raw.flattenedPath.split("/").slice(0, -1).join("/")}`,
     },
     language: {
       type: "string",
       resolve: (doc) => {
         const index = doc._raw.flattenedPath.split("/").pop();
-        const lan = index?.split(".").length === 2 ? index?.split(".")[1] : "en";
+        const lan =
+          index?.split(".").length === 2 ? index?.split(".")[1] : "en";
         return lan;
       },
     },
diff --git a/next.config.mjs b/next.config.mjs
index f3b54d8..dc09efd 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -5,24 +5,36 @@ const nextConfig = {
     return {
       fallback: [
         {
-          source: "/:path*.:ext([^/]+)", // intercept all paths ending with a file extension
-          destination: "/gh-pages/:path*.:ext", // rewrite to gh-pages/[path_here].ext
+          source: "/:path*.:ext([a-zA-Z0-9_+]{1,4})", // Match extensions that are 1-4 AlphaNumeric characters long
+          destination: "/gh-pages/:path*.:ext", // Rewrite to gh-pages/[path_here].ext
         },
         {
-          source: "/transcripts",
-          destination: "/gh-pages/index.html",
+          source: "/tags/:path",
+          destination: "/gh-pages/tags/:path/index.html",
         },
         {
-          source: "/types",
-          destination: "/gh-pages/categories/index.html",
+          source: "/speakers/:path",
+          destination: "/gh-pages/speakers/:path/index.html",
         },
         {
-          source: "/:path*",
-          destination: "/gh-pages/:path*/index.html",
+          source: "/es",
+          destination: "/gh-pages/es/index.html",
+        },
+        {
+          source: "/zh",
+          destination: "/gh-pages/zh/index.html",
+        },
+        {
+          source: "/pt",
+          destination: "/gh-pages/pt/index.html",
+        },
+        {
+          source: "/:path((?!.*\\.[a-zA-Z0-9]{1,4}$).*)", // Matches paths without a valid file extension
+          destination: "/transcript/:path*", // Rewrite to /transcripts/[path...]
         },
         {
-          source: "/sources/:path((?!.*\\.[^/]+).*)", // Matches /source/[any path without a file extension]
-          destination: "/[...slug]/:path*", // Replace with your catch-all route
+          source: "/:path*",
+          destination: "/gh-pages/:path*/index.html",
         },
       ],
     };
diff --git a/package-lock.json b/package-lock.json
index 6e5d7cb..78c4c75 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,9 @@
       "version": "0.1.0",
       "dependencies": {
         "@bitcoin-dev-project/bdp-ui": "^1.5.1",
+        "@uiw/react-markdown-preview": "^5.1.3",
         "contentlayer2": "^0.4.6",
+        "date-fns": "^4.1.0",
         "next": "14.2.4",
         "next-contentlayer2": "^0.4.6",
         "react": "^18",
@@ -1566,17 +1568,20 @@
         "undici-types": "~6.19.2"
       }
     },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.5",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz",
+      "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ=="
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
-      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
-      "dev": true
+      "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA=="
     },
     "node_modules/@types/react": {
       "version": "18.3.9",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.9.tgz",
       "integrity": "sha512-+BpAVyTpJkNWWSSnaLBk6ePpHLOGJKnEQNbINNovPWzvEUyAe3e+/d494QdEh71RekM/qV7lw6jzf1HGrJyAtQ==",
-      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -1601,6 +1606,41 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="
     },
+    "node_modules/@uiw/copy-to-clipboard": {
+      "version": "1.0.17",
+      "resolved": "https://registry.npmjs.org/@uiw/copy-to-clipboard/-/copy-to-clipboard-1.0.17.tgz",
+      "integrity": "sha512-O2GUHV90Iw2VrSLVLK0OmNIMdZ5fgEg4NhvtwINsX+eZ/Wf6DWD0TdsK9xwV7dNRnK/UI2mQtl0a2/kRgm1m1A==",
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      }
+    },
+    "node_modules/@uiw/react-markdown-preview": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/@uiw/react-markdown-preview/-/react-markdown-preview-5.1.3.tgz",
+      "integrity": "sha512-jV02wO4XHWFk54kz7sLqOkdPgJLttSfKLyen47XgjcyGgQXU2I4WJBygmdpV2AT9m/MiQ8qrN1Y+E5Syv9ZDpw==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@uiw/copy-to-clipboard": "~1.0.12",
+        "react-markdown": "~9.0.1",
+        "rehype-attr": "~3.0.1",
+        "rehype-autolink-headings": "~7.1.0",
+        "rehype-ignore": "^2.0.0",
+        "rehype-prism-plus": "2.0.0",
+        "rehype-raw": "^7.0.0",
+        "rehype-rewrite": "~4.0.0",
+        "rehype-slug": "~6.0.0",
+        "remark-gfm": "~4.0.0",
+        "remark-github-blockquote-alert": "^1.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@ungap/structured-clone": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
@@ -1709,6 +1749,15 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/bcp-47-match": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/bcp-47-match/-/bcp-47-match-2.0.3.tgz",
+      "integrity": "sha512-JtTezzbAibu8G0R9op9zb3vcWZd9JF6M0xOYGPn0fNCd7wOpRB1mU2mH9T8gaBGbAAyIIVgB2G7xG0GP98zMAQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -1720,6 +1769,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
+    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -2062,6 +2116,21 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-selector-parser": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/css-selector-parser/-/css-selector-parser-3.0.5.tgz",
+      "integrity": "sha512-3itoDFbKUNx1eKmVpYMFyqKX04Ww9osZ+dLgrk6GEv6KMVeXUhUnp4I5X+evw+u3ZxVU6RFXSSRxlTeMh8bA+g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/mdevils"
+        },
+        {
+          "type": "patreon",
+          "url": "https://patreon.com/mdevils"
+        }
+      ]
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -2077,8 +2146,16 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
     },
     "node_modules/debug": {
       "version": "4.3.7",
@@ -2134,6 +2211,18 @@
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
       "dev": true
     },
+    "node_modules/direction": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/direction/-/direction-2.0.1.tgz",
+      "integrity": "sha512-9S6m9Sukh1cZNknO1CWAr2QAWsbKLafQiyM5gZ7VgXHeuaoUwffKN4q6NC4A/Mf9iiPlOXQEKW/Mv/mh9/3YFA==",
+      "bin": {
+        "direction": "cli.js"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
@@ -2152,6 +2241,17 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "dev": true
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
@@ -2417,6 +2517,11 @@
         "node": "6.* || 8.* || >= 10.*"
       }
     },
+    "node_modules/github-slugger": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-2.0.0.tgz",
+      "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw=="
+    },
     "node_modules/glob": {
       "version": "10.4.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
@@ -2491,6 +2596,181 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-from-html": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-html/-/hast-util-from-html-2.0.3.tgz",
+      "integrity": "sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.1.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "parse5": "^7.0.0",
+        "vfile": "^6.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.1.tgz",
+      "integrity": "sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hastscript": "^8.0.0",
+        "property-information": "^6.0.0",
+        "vfile": "^6.0.0",
+        "vfile-location": "^5.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-parse5/node_modules/hast-util-parse-selector": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-parse5/node_modules/hastscript": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-8.0.0.tgz",
+      "integrity": "sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-has-property": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-has-property/-/hast-util-has-property-3.0.0.tgz",
+      "integrity": "sha512-MNilsvEKLFpV604hwfhVStK0usFY/QmM5zX16bo7EjnAEGofr5YyI37kzopBlZJkHD4t887i+q/C8/tr5Q94cA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-heading-rank": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz",
+      "integrity": "sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-is-element": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
+      "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-parse-selector": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-3.1.1.tgz",
+      "integrity": "sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==",
+      "dependencies": {
+        "@types/hast": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-parse-selector/node_modules/@types/hast": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
+      "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
+    "node_modules/hast-util-parse-selector/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="
+    },
+    "node_modules/hast-util-raw": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.0.4.tgz",
+      "integrity": "sha512-LHE65TD2YiNsHD3YuXcKPHXPLuYh/gjp12mOfU8jxSrm1f/yJpsb0F/KKljS6U9LJoP0Ux+tCe8iJ2AsPzTdgA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "hast-util-to-parse5": "^8.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "parse5": "^7.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-select": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-select/-/hast-util-select-6.0.3.tgz",
+      "integrity": "sha512-OVRQlQ1XuuLP8aFVLYmC2atrfWHS5UD3shonxpnyrjcCkwtvmt/+N6kYJdcY4mkMJhxp4kj2EFIxQ9kvkkt/eQ==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "bcp-47-match": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "css-selector-parser": "^3.0.0",
+        "devlop": "^1.0.0",
+        "direction": "^2.0.0",
+        "hast-util-has-property": "^3.0.0",
+        "hast-util-to-string": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "nth-check": "^2.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "unist-util-visit": "^5.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-estree": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-3.1.0.tgz",
@@ -2579,6 +2859,36 @@
         "inline-style-parser": "0.2.4"
       }
     },
+    "node_modules/hast-util-to-parse5": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.0.tgz",
+      "integrity": "sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-string": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-3.0.1.tgz",
+      "integrity": "sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-whitespace": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
@@ -2591,6 +2901,44 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hastscript": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-7.2.0.tgz",
+      "integrity": "sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^3.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hastscript/node_modules/@types/hast": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
+      "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
+    "node_modules/hastscript/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="
+    },
+    "node_modules/html-url-attributes": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
+      "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/html-void-elements": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
@@ -2891,6 +3239,41 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/markdown-table": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
+      "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.1.tgz",
+      "integrity": "sha512-SG21kZHGC3XRTSUhtofZkBzZTJNM5ecCi0SK2IMKmSXR8vO3peL+kb1O0z7Zl83jKtutG4k5Wv/W7V3/YHvzPA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace/node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/mdast-util-from-markdown": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.1.tgz",
@@ -2942,6 +3325,101 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/mdast-util-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.0.0.tgz",
+      "integrity": "sha512-dgQEX5Amaq+DuUqf26jJqSK9qgixgd6rYDHAv4aTBuA92cTknZlKpPfa86Z/s8Dj8xsAQpFfBmPUHWJBWqS4Bw==",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-gfm-autolink-literal": "^2.0.0",
+        "mdast-util-gfm-footnote": "^2.0.0",
+        "mdast-util-gfm-strikethrough": "^2.0.0",
+        "mdast-util-gfm-table": "^2.0.0",
+        "mdast-util-gfm-task-list-item": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-find-and-replace": "^3.0.0",
+        "micromark-util-character": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.0.0.tgz",
+      "integrity": "sha512-5jOT2boTSVkMnQ7LTrd6n/18kqwjmuYqo7JUPe+tRCY6O7dAuTFMtTPauYYrMPpox9hlN0uOx/FL8XvEfG9/mQ==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-mdx": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mdast-util-mdx/-/mdast-util-mdx-3.0.0.tgz",
@@ -3210,6 +3688,120 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/micromark-extension-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^2.0.0",
+        "micromark-extension-gfm-footnote": "^2.0.0",
+        "micromark-extension-gfm-strikethrough": "^2.0.0",
+        "micromark-extension-gfm-table": "^2.0.0",
+        "micromark-extension-gfm-tagfilter": "^2.0.0",
+        "micromark-extension-gfm-task-list-item": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.0.tgz",
+      "integrity": "sha512-Ub2ncQv+fwD70/l4ou27b4YzfNaCJOvyX4HxXU15m7mpYY+rjuWzsLIPZHJL253Z643RpbcP1oeIJlQ/SKW67g==",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/micromark-extension-mdx-expression": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/micromark-extension-mdx-expression/-/micromark-extension-mdx-expression-3.0.0.tgz",
@@ -3890,6 +4482,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nth-check": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+      "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+      "dependencies": {
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
+      }
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -3946,6 +4549,22 @@
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
       "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="
     },
+    "node_modules/parse-numeric-range": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz",
+      "integrity": "sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ=="
+    },
+    "node_modules/parse5": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
+      "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
+      "dependencies": {
+        "entities": "^4.5.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/pascal-case": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz",
@@ -4272,6 +4891,31 @@
         }
       }
     },
+    "node_modules/react-markdown": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz",
+      "integrity": "sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "html-url-attributes": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -4292,11 +4936,160 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/refractor": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/refractor/-/refractor-4.8.1.tgz",
+      "integrity": "sha512-/fk5sI0iTgFYlmVGYVew90AoYnNMP6pooClx/XKqyeeCQXrL0Kvgn8V0VEht5ccdljbzzF1i3Q213gcntkRExg==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "@types/prismjs": "^1.0.0",
+        "hastscript": "^7.0.0",
+        "parse-entities": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/refractor/node_modules/@types/hast": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-2.3.10.tgz",
+      "integrity": "sha512-McWspRw8xx8J9HurkVBfYj0xKoE25tOFlHGdx4MJ5xORQrMGZNqJhVQWaIbm6Oyla5kYOXtDiopzKRJzEOkwJw==",
+      "dependencies": {
+        "@types/unist": "^2"
+      }
+    },
+    "node_modules/refractor/node_modules/@types/unist": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
+      "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA=="
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
       "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="
     },
+    "node_modules/rehype-attr": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/rehype-attr/-/rehype-attr-3.0.3.tgz",
+      "integrity": "sha512-Up50Xfra8tyxnkJdCzLBIBtxOcB2M1xdeKe1324U06RAvSjYm7ULSeoM+b/nYPQPVd7jsXJ9+39IG1WAJPXONw==",
+      "dependencies": {
+        "unified": "~11.0.0",
+        "unist-util-visit": "~5.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      }
+    },
+    "node_modules/rehype-autolink-headings": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/rehype-autolink-headings/-/rehype-autolink-headings-7.1.0.tgz",
+      "integrity": "sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "hast-util-heading-rank": "^3.0.0",
+        "hast-util-is-element": "^3.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-ignore": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/rehype-ignore/-/rehype-ignore-2.0.2.tgz",
+      "integrity": "sha512-BpAT/3lU9DMJ2siYVD/dSR0A/zQgD6Fb+fxkJd4j+wDVy6TYbYpK+FZqu8eM9EuNKGvi4BJR7XTZ/+zF02Dq8w==",
+      "dependencies": {
+        "hast-util-select": "^6.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      }
+    },
+    "node_modules/rehype-parse": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/rehype-parse/-/rehype-parse-9.0.1.tgz",
+      "integrity": "sha512-ksCzCD0Fgfh7trPDxr2rSylbwq9iYDkSn8TCDmEJ49ljEUBxDVCzCHv7QNzZOfODanX4+bWQ4WZqLCRWYLfhag==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-from-html": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-prism-plus": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-prism-plus/-/rehype-prism-plus-2.0.0.tgz",
+      "integrity": "sha512-FeM/9V2N7EvDZVdR2dqhAzlw5YI49m9Tgn7ZrYJeYHIahM6gcXpH0K1y2gNnKanZCydOMluJvX2cB9z3lhY8XQ==",
+      "dependencies": {
+        "hast-util-to-string": "^3.0.0",
+        "parse-numeric-range": "^1.3.0",
+        "refractor": "^4.8.0",
+        "rehype-parse": "^9.0.0",
+        "unist-util-filter": "^5.0.0",
+        "unist-util-visit": "^5.0.0"
+      }
+    },
+    "node_modules/rehype-raw": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
+      "integrity": "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-raw": "^9.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-rewrite": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/rehype-rewrite/-/rehype-rewrite-4.0.2.tgz",
+      "integrity": "sha512-rjLJ3z6fIV11phwCqHp/KRo8xuUCO8o9bFJCNw5o6O2wlLk6g8r323aRswdGBQwfXPFYeSuZdAjp4tzo6RGqEg==",
+      "dependencies": {
+        "hast-util-select": "^6.0.0",
+        "unified": "^11.0.3",
+        "unist-util-visit": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      }
+    },
+    "node_modules/rehype-slug": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-6.0.0.tgz",
+      "integrity": "sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "github-slugger": "^2.0.0",
+        "hast-util-heading-rank": "^3.0.0",
+        "hast-util-to-string": "^3.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/rehype-stringify": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-10.0.0.tgz",
@@ -4326,6 +5119,37 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-gfm": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.0.tgz",
+      "integrity": "sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-github-blockquote-alert": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/remark-github-blockquote-alert/-/remark-github-blockquote-alert-1.2.1.tgz",
+      "integrity": "sha512-qNf2mSAoZgh3Cl23/9Y1L7S4Kbf9NsdHvYK398ab/52yEsDPDU5I4cuTcgDRrdIX7Ltc6RK+KCLRtWkbFnL6Dg==",
+      "dependencies": {
+        "unist-util-visit": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://jaywcjlove.github.io/#/sponsor"
+      }
+    },
     "node_modules/remark-mdx": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-3.0.1.tgz",
@@ -4386,6 +5210,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-stringify": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/repeat-string": {
       "version": "1.6.1",
       "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
@@ -4955,6 +5793,16 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/unist-util-filter": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/unist-util-filter/-/unist-util-filter-5.0.1.tgz",
+      "integrity": "sha512-pHx7D4Zt6+TsfwylH9+lYhBhzyhEnCXs/lbq/Hstxno5z4gVdyc2WEW0asfjGKPyG4pEKrnBv5hdkO6+aRnQJw==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      }
+    },
     "node_modules/unist-util-is": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
@@ -5061,6 +5909,19 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/vfile-location": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
+      "integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vfile-message": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
@@ -5074,6 +5935,15 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/web-namespaces": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+      "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 73f8178..f58ed55 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,9 @@
   },
   "dependencies": {
     "@bitcoin-dev-project/bdp-ui": "^1.5.1",
+    "@uiw/react-markdown-preview": "^5.1.3",
     "contentlayer2": "^0.4.6",
+    "date-fns": "^4.1.0",
     "next": "14.2.4",
     "next-contentlayer2": "^0.4.6",
     "react": "^18",
diff --git a/public/svgs/eye-close-icon.svg b/public/svgs/eye-close-icon.svg
new file mode 100644
index 0000000..3047625
--- /dev/null
+++ b/public/svgs/eye-close-icon.svg
@@ -0,0 +1,7 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.3346 7.16669C18.3346 7.16669 15.0013 12.1667 10.0013 12.1667C5.0013 12.1667 1.66797 7.16669 1.66797 7.16669" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M12.5 11.75L13.75 13.8333" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.668 9.66669L18.3346 11.3334" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M1.66797 11.3334L3.33464 9.66669" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7.5 11.75L6.25 13.8333" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/svgs/eye-open-icon.svg b/public/svgs/eye-open-icon.svg
new file mode 100644
index 0000000..bd4c88a
--- /dev/null
+++ b/public/svgs/eye-open-icon.svg
@@ -0,0 +1,4 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.9527 9.70416C18.206 10.0594 18.3327 10.2371 18.3327 10.5C18.3327 10.7629 18.206 10.9406 17.9527 11.2958C16.8143 12.8922 13.907 16.3333 9.99935 16.3333C6.09167 16.3333 3.18443 12.8922 2.04605 11.2958C1.79269 10.9406 1.66602 10.7629 1.66602 10.5C1.66602 10.2371 1.79269 10.0594 2.04605 9.70416C3.18443 8.10786 6.09167 4.66666 9.99935 4.66666C13.907 4.66666 16.8143 8.10786 17.9527 9.70416Z" stroke="black" stroke-width="1.5"/>
+<path d="M12.5 10.5C12.5 9.11925 11.3807 8 10 8C8.61925 8 7.5 9.11925 7.5 10.5C7.5 11.8807 8.61925 13 10 13C11.3807 13 12.5 11.8807 12.5 10.5Z" stroke="black" stroke-width="1.5"/>
+</svg>
diff --git a/public/svgs/pencil-icon.svg b/public/svgs/pencil-icon.svg
new file mode 100644
index 0000000..e665aae
--- /dev/null
+++ b/public/svgs/pencil-icon.svg
@@ -0,0 +1,4 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7141 6.48239L17.1158 5.08063C17.89 4.30646 19.1452 4.30646 19.9194 5.08063C20.6935 5.8548 20.6935 7.10998 19.9194 7.88415L18.5176 9.28591M15.7141 6.48239L7.48023 14.7163C6.43493 15.7616 5.91226 16.2842 5.55637 16.9211C5.20047 17.558 4.8424 19.0619 4.5 20.5C5.93809 20.1576 7.44199 19.7995 8.07889 19.4436C8.71579 19.0877 9.23844 18.5651 10.2838 17.5198L18.5176 9.28591M15.7141 6.48239L18.5176 9.28591" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.5 20.5H17.5" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/src/app/transcript/[...slug]/page.tsx b/src/app/transcript/[...slug]/page.tsx
new file mode 100644
index 0000000..4cdf66b
--- /dev/null
+++ b/src/app/transcript/[...slug]/page.tsx
@@ -0,0 +1,81 @@
+import React from "react";
+import { allTranscripts } from "contentlayer/generated";
+import allSources from "@/public/sources-data.json";
+import { notFound } from "next/navigation";
+import IndividualTranscript from "@/components/individual-transcript/IndividualTranscript";
+import { createSlug } from "@/utils";
+import { BaseCrumbType } from "@/components/common/BaseCrumbLists";
+
+// forces 404 for paths not generated from `generateStaticParams` function.
+export const dynamicParams = false;
+
+export function generateStaticParams() {
+  const allSingleTranscriptPaths = allTranscripts.map((transcript) => {
+    const slugForLanguage = transcript.languageURL
+      .split("/")
+      .filter((path) => Boolean(path.trim()));
+    return {
+      slug: slugForLanguage,
+    };
+  });
+  return allSingleTranscriptPaths;
+}
+
+const Page = ({ params }: { params: { slug: string[] } }) => {
+  const slugArray = params.slug;
+  let transcriptUrl = `/${slugArray.join("/")}`;
+
+  const transcript = allTranscripts.find(
+    (transcript) => transcript.languageURL === transcriptUrl
+  );
+
+  if (!transcript) {
+    return notFound();
+  }
+
+  let sourcesData: any = allSources;
+
+  // This  function returns an array of breadcrumb which we use to display navigation
+  const breadcrumbRoutes:BaseCrumbType[] = transcript.slugAsParams.map(
+    (crumb: string, index: number) => {
+      let title = "";
+      const languageNumber = transcript.slugAsParams.length - (index + 1);
+      const link = transcript.languageURL
+      .split("/")
+      .slice(0, languageNumber === 0 ? undefined : -languageNumber)
+      .join("/");
+
+      // Needed to update the object when we go down the tree
+      sourcesData = sourcesData[crumb as keyof typeof allSources];
+      // Checks if the index is 0 so we can update the title and the data to the new sourcesData
+      if (index === 0) {
+        title = sourcesData[transcript.language]?.metadata.title;
+        sourcesData = sourcesData[transcript.language]?.data;       
+      } 
+      // Checks if it's the last item in the map and updates the title to the transcripts title
+      else if (index === transcript.slugAsParams.length - 1) {
+        title = transcript.title;
+      } 
+      // if it's neither the last or the first update the title and sourcesData
+      else {
+        title = sourcesData?.metadata.title;
+        sourcesData = sourcesData?.data;
+      }
+
+      return {
+        name: title,
+        link,
+        isActive: index === transcript.slugAsParams.length - 1,
+      };
+    }
+  );
+
+  return (
+    <IndividualTranscript
+      breadCrumbs={[...breadcrumbRoutes]}
+      transcript={transcript}
+    />
+  );
+};
+
+export default Page;
diff --git a/src/components/common/BaseCrumbLists.tsx b/src/components/common/BaseCrumbLists.tsx
new file mode 100644
index 0000000..35b235b
--- /dev/null
+++ b/src/components/common/BaseCrumbLists.tsx
@@ -0,0 +1,33 @@
+import Link from "next/link";
+
+export type BaseCrumbType = {
+  name: string;
+  link: string;
+  isActive: boolean;
+};
+
+const BaseCrumbLists = ({crumbsArray}:{crumbsArray:BaseCrumbType[]}) => {
+  return (
+    <div className="flex gap-1 flex-wrap">
+      {crumbsArray.map((link, i) => (
+        <div key={link.name} className="flex gap-1 items-center">
+          <Link
+            className={`capitalize hover:underline font-medium text-sm 2xl:text-base text-nowrap ${
+              link.isActive
+                ? "text-orange-custom-100"
+                : "text-black md:text-gray-custom-800"
+            }`}
+            href={link.link}
+          >
+            {link.name}
+          </Link>
+          {i !== crumbsArray.length - 1 && (
+            <p className="text-custom-black-custom-200">/</p>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default BaseCrumbLists;
diff --git a/src/components/common/BreadCrumbs.tsx b/src/components/common/BreadCrumbs.tsx
deleted file mode 100644
index cd0645c..0000000
--- a/src/components/common/BreadCrumbs.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-"use client";
-
-import Link from "next/link";
-import { usePathname } from "next/navigation";
-import React from "react";
-import { ExploreNavigationItems } from "@/utils/data";
-
-const BreadCrumbs = () => {
-  const pathname = usePathname();
-
-  const navListWithoutSources = ExploreNavigationItems.filter((item) => item.href !== "/sources").map((item) => item.href.slice(1));
-
-  const pathnameArray = pathname.split("/");
-  const isNotSourcesPage = navListWithoutSources.includes(pathnameArray[1]);
-
-  const allRoutes = pathnameArray.map((path, idx) => {
-    const route = pathname
-      .split("/")
-      .slice(0, idx + 1)
-      .join("/");
-    return { name: path || "home", link: route || "/" };
-  });
-
-  if (!isNotSourcesPage && pathnameArray[1] !== "sources") {
-    allRoutes.splice(1, 0, { name: "Sources", link: "/sources" });
-  }
-
-  const isActive = allRoutes[allRoutes.length - 1];
-
-  return (
-    <div className='flex gap-1 flex-wrap'>
-      {allRoutes.map((link, i) => (
-        <div key={link.name} className='flex gap-1 items-center'>
-          <Link
-            className={`capitalize hover:underline font-medium text-sm 2xl:text-base text-nowrap ${
-              isActive.name.toLowerCase() === link.name.toLowerCase() ? "text-orange-custom-100 md:text-black" : "text-black md:text-gray-custom-800"
-            }`}
-            href={link.link}
-          >
-            {link.name}
-          </Link>
-          {i !== allRoutes.length - 1 && <p className='text-custom-black-custom-200'>/</p>}
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default BreadCrumbs;
diff --git a/src/components/common/Pill.tsx b/src/components/common/Pill.tsx
new file mode 100644
index 0000000..64d3960
--- /dev/null
+++ b/src/components/common/Pill.tsx
@@ -0,0 +1,15 @@
+import Link from "next/link";
+
+const Pill = ({ name, slug }: { name: string; slug: string }) => {
+  return (
+    <Link
+      key={name}
+      href={slug || ""}
+      className="max-content py-1 px-4 rounded-[5px] bg-gray-custom-700 hover:bg-gray-custom-600 hover:text-gray-custom-100 max-md:px-3 max-md:py-[2px] text-xs md:text-sm 2xl:text-base max-md:border max-md:border-gray-custom-300 max-md:leading-[100%]"
+    >
+      {name}
+    </Link>
+  );
+};
+
+export default Pill;
diff --git a/src/components/common/Tabs.tsx b/src/components/common/Tabs.tsx
new file mode 100644
index 0000000..812abe6
--- /dev/null
+++ b/src/components/common/Tabs.tsx
@@ -0,0 +1,132 @@
+"use client";
+
+import { Resources } from "contentlayer/generated";
+import React, { SetStateAction, useState } from "react";
+import TranscriptTabContent from "../individual-transcript/TranscriptTabContent";
+import ContentGrouping from "../explore/ContentGrouping";
+import { ContentData, GroupedData, TopicsData } from "@/utils";
+
+const Tabs = ({
+  summary,
+  markdown,
+  extraInfo,
+  currentHeading,
+  groupedHeading,
+  setCurrentHeading,
+}: {
+  summary?: string;
+  markdown: string;
+  extraInfo?: Resources[];
+  currentHeading?: string;
+  groupedHeading?: Record<string, ContentData[]>;
+  setCurrentHeading?: React.Dispatch<SetStateAction<string>>;
+}) => {
+  const [openTabs, setOpenTabs] = useState<
+    "transcript" | "summary" | "extraInfo"
+  >("transcript");
+
+  return (
+    <div className="flex flex-col relative">
+      <div className="sticky bg-white z-10 top-0 lg:top-0  md:pt-6 h-full flex gap-4 md:gap-10 xl:gap-16 justify-start items-center border-b border-b-gray-custom-1200">
+        <Tab
+          title="Transcript"
+          isOpen={openTabs === "transcript"}
+          onClick={() => setOpenTabs("transcript")}
+        />
+        {summary && (
+          <Tab
+            title="Summary"
+            isOpen={openTabs === "summary"}
+            onClick={() => setOpenTabs("summary")}
+          />
+        )}
+
+        {extraInfo && (
+          <Tab
+            title="Extra Info"
+            isOpen={openTabs === "extraInfo"}
+            onClick={() => setOpenTabs("extraInfo")}
+          />
+        )}
+      </div>
+
+     {/* This is needed since the layout for the mobile design changes and goes under the tabs */}
+      {Object.keys({ ...groupedHeading }).length > 0 && (
+        <div className="block w-full pt-4 lg:hidden sticky top-[20px] md:top-[65px] z-[5]">
+          <ContentGrouping
+            currentGroup={currentHeading || ""}
+            groupedData={(groupedHeading as GroupedData) || []}
+            screen="mobile"
+          />
+        </div>
+      )}
+
+      <div className="relative h-full lg:max-w-[90%]">
+        {openTabs === "transcript" && (
+          <div className="relative">
+            <div className="pt-4  selection:bg-[#B4D5FF]">
+              <TranscriptTabContent
+                markdown={markdown}
+                setCurrentHeading={setCurrentHeading}
+              />
+            </div>
+          </div>
+        )}
+        {openTabs === "summary" && (
+          <section className="pt-4">
+            <p>{summary}</p>
+          </section>
+        )}
+        {openTabs === "extraInfo" && (
+          <section className="flex flex-col pt-4">
+            {extraInfo?.map((info) => (
+              <p className="text-base 2xl:text-lg font-medium leading-8">
+                {" "}
+                <span>{info.title}: </span>
+                <a
+                  target="_blank"
+                  href={info.url}
+                  className="text-blue-custom-200 font-medium hover:underline visited:bg-purple-600"
+                >
+                  {info.url}
+                </a>
+              </p>
+            ))}
+          </section>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const Tab = ({
+  title,
+  isOpen,
+  onClick,
+}: {
+  title: string;
+  isOpen: boolean;
+  onClick: () => void;
+}) => {
+  return (
+    <button
+      onClick={onClick}
+      className="w-full max-w-[33%] flex items-start justify-center h-[31px] md:h-12 xl:h-14 2xl:h-[60px]"
+    >
+      <section className="flex flex-col h-full items-center justify-between relative w-full">
+        <p
+          className={`text-sm md:text-base xl:text-lg 2xl:text-xl font-normal ${
+            isOpen ? "text-orange-custom-100" : "text-custom-black-custom-400"
+          }`}
+        >
+          {title}
+        </p>
+        {isOpen && (
+          <div className="h-1 bg-orange-custom-100 w-full absolute bottom-0"></div>
+        )}
+      </section>
+    </button>
+  );
+};
+
+export default Tabs;
diff --git a/src/components/common/TranscriptDetailsCard.tsx b/src/components/common/TranscriptDetailsCard.tsx
index f6a0ac9..89b3669 100644
--- a/src/components/common/TranscriptDetailsCard.tsx
+++ b/src/components/common/TranscriptDetailsCard.tsx
@@ -6,9 +6,10 @@ import DateIcon from "/public/svgs/date-icon.svg";
 import TagsIcon from "/public/svgs/tags-icon.svg";
 import { createSlug, formatDate, unsluggify } from "@/utils";
 import { MicIcon } from "@bitcoin-dev-project/bdp-ui/icons";
+import Pill from "./Pill";
 
 const TranscriptDetailsCard = ({ data, slug }: { data: ContentTreeArray; slug: string[] }) => {
-  const { speakers, tags, summary, date, title, body, flattenedPath: url } = data;
+  const { speakers, tags, summary, date, title, body, languageURL } = data;
 
   const calculateRemaining = (data: string[]) => (data?.length && data.length > 3 ? data.length - 3 : 0);
 
@@ -17,7 +18,7 @@ const TranscriptDetailsCard = ({ data, slug }: { data: ContentTreeArray; slug: s
       <section className='flex justify-between'>
         <div className='flex md:flex-row flex-col justify-between gap-2 w-full'>
           <Link
-            href={`/${url}`}
+            href={`${languageURL}`}
             className='font-bold text-base leading-[21.86px] md:text-xl 2xl:text-[22.5px] md:leading-[30px] text-orange-custom-100 md:text-black'
           >
             {title}
@@ -41,13 +42,7 @@ const TranscriptDetailsCard = ({ data, slug }: { data: ContentTreeArray; slug: s
               <div className='flex gap-[9px] flex-wrap'>
                 <div className='flex flex-wrap gap-[9px] max-md:gap-2'>
                   {speakers.slice(0, 3).map((speaker, idx) => (
-                    <Link
-                      key={idx}
-                      href={`/speakers/${createSlug(speaker)}`}
-                      className='py-[2px] px-5 capitalize rounded-[5px] bg-custom-white-custom-100 text-base leading-[21.86px] font-medium max-md:px-3 lg:py-1 max-2xl:text-sm max-md:text-sm border border-gray-custom-1500 max-md:leading-[100%] cursor-pointer'
-                    >
-                      {speaker}
-                    </Link>
+                    <Pill key={speaker} name={speaker} slug={`/speakers/${createSlug(speaker)}`}  />
                   ))}
 
                   {calculateRemaining(speakers) === 0 ? null : (
@@ -70,13 +65,7 @@ const TranscriptDetailsCard = ({ data, slug }: { data: ContentTreeArray; slug: s
               <div className='flex gap-[9px] flex-wrap'>
                 <div className='flex flex-wrap gap-[9px] max-md:gap-2'>
                   {tags.slice(0, 3).map((tag, idx) => (
-                    <Link
-                      key={idx}
-                      href={`/tags/${createSlug(tag)}`}
-                      className='py-[2px] px-5 capitalize rounded-[5px] bg-custom-white-custom-100 text-base leading-[21.86px] font-medium max-md:px-3 lg:py-1 max-2xl:text-sm max-md:text-sm border border-gray-custom-1500 max-md:leading-[100%] cursor-pointer'
-                    >
-                      {unsluggify(tag)}
-                    </Link>
+                    <Pill key={idx} name={tag} slug={`/tags/${createSlug(tag)}`}  />
                   ))}
 
                   {calculateRemaining(tags) === 0 ? null : (
diff --git a/src/components/common/TranscriptMetadataCard.tsx b/src/components/common/TranscriptMetadataCard.tsx
new file mode 100644
index 0000000..b4792e0
--- /dev/null
+++ b/src/components/common/TranscriptMetadataCard.tsx
@@ -0,0 +1,194 @@
+"use client";
+
+import React, { useState } from "react";
+import Image from "next/image";
+import {
+  BookmarkIcon,
+  CalendarIcon,
+  MicIcon,
+} from "@bitcoin-dev-project/bdp-ui/icons";
+import Link from "next/link";
+import { createSlug } from "@/utils";
+import AiGeneratedIcon from "../svgs/AIGeneratedIcon";
+import { format, isDate } from "date-fns";
+import Pill from "./Pill";
+
+interface ITranscriptMetadataComponent {
+  title: string;
+  date: string | Date;
+  topics: string[];
+  speakers: string[] | null;
+  transcriptBy: string | string[];
+}
+
+const TranscriptMetadataComponent = ({
+  title,
+  speakers,
+  topics,
+  date,
+  transcriptBy,
+}: ITranscriptMetadataComponent) => {
+  const [showDetail, setShowDetail] = useState(true);
+  const isAiGenerated = transcriptBy.includes("needs-review") ? true : false;
+  const handleShowDetail = () => {
+    setShowDetail((prev) => !prev);
+  };
+
+  const convertedDate  = date ? new Date(date) : false
+ 
+  const formattedDate =   isDate(convertedDate) ? format(convertedDate, "d MMMM, yyyy") : "";
+
+  return (
+    <div className="border flex text-black flex-col rounded-2xl p-4 md:p-5 2xl:p-6 gap-4 w-full border-gray-custom-1200">
+      <div className="flex flex-col md:flex-row flex-wrap gap-4 justify-between ">
+        <h4 className="text-orange-custom-100 text-xl font-bold md:text-2xl 2xl:text-[2rem]">
+          {title}
+        </h4>
+        <button
+          onClick={handleShowDetail}
+          className="text-black text-sm lg:text-base gap-1 py-1.5 2xl:py-2 px-5 flex items-center border  w-[149px] md:w-[154px] rounded-lg border-gray-custom-1100 whitespace-nowrap"
+        >
+          {showDetail ? (
+            <>
+              <Image
+                src="/svgs/eye-close-icon.svg"
+                alt="eye close icon"
+                width={24}
+                height={24}
+                className="w-5"
+              />
+              <span className="font-medium text-sm 2xl:text-base">
+                Hide Details{" "}
+              </span>
+            </>
+          ) : (
+            <>
+              <Image
+                src="/svgs/eye-open-icon.svg"
+                alt="eye open icon"
+                width={24}
+                height={24}
+                className="w-5"
+              />
+              <span className="font-medium">Show Details</span>
+            </>
+          )}
+        </button>
+      </div>
+      {/* Depends on the Show and Hide Button */}
+      {showDetail && (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 md:gap-5 2xl:gap-6">
+          <MetadataBlock
+            header={
+              <>
+                <CalendarIcon width={"19px"} color="#141B34" />
+                <p className="text-base lg:text-lg font-semibold">Date</p>
+              </>
+            }
+            footer={
+              <div className="pl-2.5">
+                {formattedDate ? 
+                <p className="text-xs md:text-sm lg:text-base 2xl:text-lg md:font-medium">
+                  {formattedDate}
+                </p>:
+                 <p className="pt-1.5 text-xs md:text-sm lg:text-sm 2xl:text-base md:font-medium">Not available</p>
+            }
+              </div>
+            }
+          />
+          {/* render only 3 tags*/}
+          <MetadataBlock
+            header={
+              <>
+                <BookmarkIcon width={"19px"} color="#000000" />
+                <p className="text-base lg:text-lg font-semibold">Topics</p>
+              </>
+            }
+            footer={
+              <div className="flex flex-wrap gap-2">
+                {(topics && topics.length > 0) ?
+                  topics.map((topic) => (
+                    <Pill key={topic} name={topic} slug={`/tags/${createSlug(topic)}`} />
+                  )):
+                  <p className="pl-2.5 pt-1.5 text-xs md:text-sm lg:text-sm 2xl:text-base md:font-medium">Not available</p>
+                }
+              </div>
+            }
+          />
+
+          <MetadataBlock
+            header={
+              <>
+                <MicIcon width={"19px"} color="#000000" />
+                <p className="text-base lg:text-lg font-semibold">Speakers</p>
+              </>
+            }
+            footer={
+              <div className="flex flex-wrap gap-2">
+                {speakers && speakers.length > 0 ?
+                  speakers.map((speaker) => (
+                    <Pill key={speaker} name={speaker} slug={`/speakers/${createSlug(speaker)}`} />
+                  )):
+                  <p className="pl-2.5 pt-1.5 text-xs md:text-sm lg:text-sm 2xl:text-base md:font-medium">Not available</p>
+                }
+              </div>
+            }
+          />
+
+          <MetadataBlock
+            header={
+              <>
+                <Image
+                  src="/svgs/pencil-icon.svg"
+                  alt="pencil icon"
+                  width={24}
+                  height={24}
+                  className="w-5"
+                />
+                <p className="text-base  lg:text-lg font-semibold">
+                  Transcript by
+                </p>
+              </>
+            }
+            footer={
+              <div className="pl-5 pt-1.5 flex items-center ">
+                {isAiGenerated ? (
+                  <>
+                    <a href="https://review.btctranscripts.com/" className="text-blue-custom-100 no-underline border-b border-blue-custom-100 max-w-[max-content] text-sm 2xl:text-base flex gap-1 items-start cursor-pointer">
+                    <AiGeneratedIcon className="-mt-0.5" />
+                      <span>
+                        AI Generated (Review for sats)
+                      </span>
+                      
+                    </a>{" "}
+                  </>
+                ) : (
+                  <p className="text-xs md:text-sm lg:text-sm 2xl:text-base md:font-medium">
+                    {transcriptBy}
+                  </p>
+                )}
+              </div>
+            }
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+const MetadataBlock = ({
+  header,
+  footer,
+}: {
+  header: React.ReactNode;
+  footer: React.ReactNode;
+}) => {
+  return (
+    <div className="flex flex-col gap-2 border-b pb-3  border-dashed border-gray-custom-1600">
+      <div className="flex items-center gap-1">{header}</div>
+      <div>{footer}</div>
+    </div>
+  );
+};
+
+export default TranscriptMetadataComponent;
diff --git a/src/components/explore/ContentGrouping.tsx b/src/components/explore/ContentGrouping.tsx
index 09d0a76..85bcce9 100644
--- a/src/components/explore/ContentGrouping.tsx
+++ b/src/components/explore/ContentGrouping.tsx
@@ -1,18 +1,21 @@
-"use client" 
+"use client";
 
-import { createSlug, GroupedData } from "@/utils";
+import { createContentSlug, createSlug, GroupedData } from "@/utils";
 import Link from "next/link";
-import { useEffect, useRef } from "react";
+import { SetStateAction, useEffect, useRef } from "react";
+import { twMerge } from "tailwind-merge";
 
 export interface IContentGrouping {
   currentGroup: string;
   groupedData: GroupedData | never[];
   screen?: "mobile" | "desktop";
+  className?: string;
 }
 const ContentGrouping = ({
   currentGroup,
   groupedData,
   screen,
+  className,
 }: IContentGrouping) => {
   const selectRef = useRef<HTMLSelectElement>(null);
   const linkRef = useRef<HTMLAnchorElement>(null);
@@ -23,11 +26,11 @@ const ContentGrouping = ({
       linkRef.current.click();
     }
   };
-
+  
   useEffect(() => {
     if (currentGroup) {
       if (selectRef.current) {
-        selectRef.current.value = createSlug(currentGroup);
+        selectRef.current.value = `${currentGroup}`;
       }
     }
   }, [currentGroup]);
@@ -36,16 +39,17 @@ const ContentGrouping = ({
     <>
       {screen === "desktop" && (
         <div
-          className={
-            " flex-col p-5 hidden lg:flex gap-2.5 border max-h-[calc(95vh-var(--header-height))] overflow-scroll no-scrollbar border-gray-custom-1200 rounded-md w-full min-w-[260px] 2xl:min-w-[354px] "
-          }
+          className={twMerge(
+            " flex-col p-5 hidden lg:flex gap-2.5 border max-h-[calc(95vh-var(--header-height))] overflow-auto scroller border-gray-custom-1200 rounded-md w-full min-w-[260px] 2xl:min-w-[354px] ",
+            className
+          )}
         >
           {Object.keys(groupedData).map((char) => (
             <Link
               key={char}
-              href={`#${createSlug(char)}`}
-              className={` flex    text-sm  2xl:text-lg   ${
-                createSlug(currentGroup) == createSlug(char)
+              href={`#${createContentSlug(char)}`}
+              className={`flex text-sm  2xl:text-lg leading-5   ${
+                createContentSlug(currentGroup) == createContentSlug(char)
                   ? "text-orange-custom-100 rounded-[4px] font-semibold"
                   : ""
               } `}
@@ -61,9 +65,7 @@ const ContentGrouping = ({
             {" "}
             link group
           </a>
-          <div
-            className="selection-box pr-2 bg-orange-custom-800 py-2.5 px-4 rounded-md "
-          >
+          <div className="selection-box pr-2 bg-orange-custom-800 py-2.5 px-4 rounded-md ">
             <select
               onChange={onOptionsChange}
               value={currentGroup}
@@ -71,7 +73,7 @@ const ContentGrouping = ({
               className="pr-3  bg-orange-custom-800   w-full outline-none font-medium"
             >
               {Object.keys(groupedData).map((char) => (
-                <option key={char} value={createSlug(char)}>
+                <option key={char} value={createContentSlug(char)}>
                   {char}{" "}
                 </option>
               ))}
diff --git a/src/components/explore/ExploreNavigation.tsx b/src/components/explore/ExploreNavigation.tsx
index 2c19ab3..8ad3199 100644
--- a/src/components/explore/ExploreNavigation.tsx
+++ b/src/components/explore/ExploreNavigation.tsx
@@ -7,7 +7,7 @@ import { ArrowLinkUpRight } from "@bitcoin-dev-project/bdp-ui/icons";
 
 const ExploreNavigation = () => {
   return (
-    <section className='hidden md:flex sticky top-0 overflow-y-auto flex-col self-start gap-4 2xl:gap-6 w-full max-w-[240px] 2xl:max-w-[320px]'>
+    <section className='hidden md:flex  flex-shrink-0 sticky top-0 overflow-y-auto flex-col self-start gap-4 2xl:gap-6 w-full max-w-[240px] 2xl:max-w-[320px]'>
       <div className='flex flex-col gap-4 2xl:gap-6 rounded-lg px-5 py-[23px] border border-gray-custom-1200'>
         {ExploreNavigationItems.map((item) => (
           <ExploreNavigationItem key={item.href} href={item.href} title={item.title} />
diff --git a/src/components/explore/TranscriptContentPage.tsx b/src/components/explore/TranscriptContentPage.tsx
index 2d05077..7f59241 100644
--- a/src/components/explore/TranscriptContentPage.tsx
+++ b/src/components/explore/TranscriptContentPage.tsx
@@ -1,12 +1,19 @@
 "use client";
 
 import React, { FC, useState } from "react";
-import BreadCrumbs from "../common/BreadCrumbs";
 import GroupedTranscriptContent from "./GroupedTranscriptContent";
 import AlphabetGrouping from "./AlphabetGrouping";
-import { createSlug, DepreciatedCategories, groupDataByAlphabet, sortKeysAlphabetically } from "@/utils";
+import {
+  createSlug,
+  DepreciatedCategories,
+  groupDataByAlphabet,
+  GroupedData,
+  sortKeysAlphabetically,
+} from "@/utils";
 import MobileAlphabetGrouping from "./MobileAlphabetGrouping";
 import ContentGrouping from "./ContentGrouping";
+import BaseCrumbLists from "../common/BaseCrumbLists";
+import { usePathname } from "next/navigation";
 
 interface ITranscriptContentPage {
   header: string;
@@ -17,27 +24,69 @@ interface ITranscriptContentPage {
   linkName: DepreciatedCategories;
 }
 
-const TranscriptContentPage: FC<ITranscriptContentPage> = ({ header, data, description, mobileDescription, linkName, type }) => {
-  const groupedData = type === "alphabet" ? groupDataByAlphabet(data) : sortKeysAlphabetically(data);
-  const [currentGroup, setCurrentGroup] = useState<string>(type === "alphabet" ? "A" : createSlug(Object.keys(groupedData)[0]));
+const TranscriptContentPage: FC<ITranscriptContentPage> = ({
+  header,
+  data,
+  description,
+  mobileDescription,
+  linkName,
+  type,
+}) => {
+  const groupedData =
+    type === "alphabet"
+      ? groupDataByAlphabet(data) as GroupedData
+      : sortKeysAlphabetically(data) as GroupedData;
 
+  const [currentGroup, setCurrentGroup] = useState<string>(
+    type === "alphabet" ? "A" : createSlug(Object.keys(groupedData)[0])
+  );
+
+  const pathname = usePathname();
+  const pathnameArray = pathname.split("/");
+  const allRoutes = pathnameArray.map((path, idx) => {
+    const route = pathname
+      .split("/")
+      .slice(0, idx + 1)
+      .join("/");
+
+    return {
+      name: path || "home",
+      link: route || "/",
+      isActive: idx === pathnameArray.length - 1,
+    };
+  });
   return (
-    <div className='flex items-start relative lg:gap-[50px]'>
-      <div className='flex flex-col w-full gap-6 lg:gap-10 no-scrollbar'>
-        <div className='block lg:hidden sticky top-0'>
-          {type == "alphabet" && <MobileAlphabetGrouping currentGroup={currentGroup} groupedData={groupedData} />}
-          {type == "words" && <ContentGrouping groupedData={groupedData} currentGroup={currentGroup} screen='mobile' />}
+    <div className="flex items-start relative lg:gap-[50px]">
+      <div className="flex flex-col w-full gap-6 lg:gap-10 no-scrollbar">
+        <div className="block lg:hidden sticky top-0">
+          {type == "alphabet" && (
+            <MobileAlphabetGrouping
+              currentGroup={currentGroup}
+              groupedData={groupedData}
+            />
+          )}
+          {type == "words" && (
+            <ContentGrouping
+              groupedData={groupedData}
+              currentGroup={currentGroup}
+              screen="mobile"
+            />
+          )}
         </div>
-        <div className='flex flex-col border-b border-b-[#9B9B9B] pb-6 lg:pb-10  gap-6 '>
-          <BreadCrumbs />
-          <div className='flex flex-col gap-1  lg:gap-4'>
-            <h3 className='text-xl  2xl:text-2xl font-medium'>{header}</h3>
-            <p className='hidden lg:inline-block text-sm  lg:text-base 2xl:text-lg text-custom-black-custom-300'>{description}</p>
-            <p className='inline-block lg:hidden text-sm lg:text-lg text-custom-black-custom-300'>{mobileDescription || description}</p>
+        <div className="flex flex-col border-b border-b-[#9B9B9B] pb-6 lg:pb-10  gap-6 ">
+          <BaseCrumbLists crumbsArray={allRoutes} />
+          <div className="flex flex-col gap-1  lg:gap-4">
+            <h3 className="text-xl  2xl:text-2xl font-medium">{header}</h3>
+            <p className="hidden lg:inline-block text-sm  lg:text-base 2xl:text-lg text-custom-black-custom-300">
+              {description}
+            </p>
+            <p className="inline-block lg:hidden text-sm lg:text-lg text-custom-black-custom-300">
+              {mobileDescription || description}
+            </p>
           </div>
         </div>
 
-        <div className='flex-col flex gap-10  pb-[calc(90vh-var(--header-height))]'>
+        <div className="flex-col flex gap-10  pb-[calc(90vh-var(--header-height))]">
           {groupedData &&
             type === "alphabet" &&
             Object.entries(groupedData).map((arg, i) => (
@@ -64,9 +113,20 @@ const TranscriptContentPage: FC<ITranscriptContentPage> = ({ header, data, descr
         </div>
       </div>
 
-      <div className='hidden lg:flex sticky top-0 self-start flex-shrink-0 w-fit lg:justify-center '>
-        {type === "alphabet" && <AlphabetGrouping groupedData={groupedData} currentGroup={currentGroup} />}
-        {type == "words" && <ContentGrouping groupedData={groupedData} currentGroup={currentGroup} screen='desktop' />}
+      <div className="hidden lg:flex sticky top-0 self-start flex-shrink-0 w-fit lg:justify-center ">
+        {type === "alphabet" && (
+          <AlphabetGrouping
+            groupedData={groupedData}
+            currentGroup={currentGroup}
+          />
+        )}
+        {type == "words" && (
+          <ContentGrouping
+            groupedData={groupedData}
+            currentGroup={currentGroup}
+            screen="desktop"
+          />
+        )}
       </div>
     </div>
   );
diff --git a/src/components/individual-transcript/IndividualTranscript.tsx b/src/components/individual-transcript/IndividualTranscript.tsx
new file mode 100644
index 0000000..c7bb2b7
--- /dev/null
+++ b/src/components/individual-transcript/IndividualTranscript.tsx
@@ -0,0 +1,89 @@
+"use client";
+import React, { useState } from "react";
+import { Transcript } from "contentlayer/generated";
+import TranscriptMetadataComponent from "../common/TranscriptMetadataCard";
+import ContentGrouping from "../explore/ContentGrouping";
+import { ContentData, createContentSlug, extractHeadings, GroupedData } from "@/utils";
+import Wrapper from "../layout/Wrapper";
+import { twMerge } from "tailwind-merge";
+import FooterComponent from "../layout/FooterComponent";
+import BaseCrumbLists, { BaseCrumbType } from "../common/BaseCrumbLists";
+import Tabs from "../common/Tabs";
+
+
+type HeadingObject = Record<string, ContentData[]>;;
+
+const IndividualTranscript = ({
+  breadCrumbs,
+  transcript,
+}: {
+  breadCrumbs: BaseCrumbType[];
+  transcript: Transcript;
+}) => {
+  const [currentHeading, setCurrentHeading] = useState("");
+
+  const allHeadings =  extractHeadings(transcript.body.raw).reduce<HeadingObject>((acc, key, index)=>{
+    //  removing the # from the string
+    let keyWithoutHash  = key.replace(/[#]+\s+/gi, "")
+    acc[keyWithoutHash] = [{
+      name: keyWithoutHash,
+      slug: createContentSlug(key), 
+    }]
+     return acc;
+  }, {})
+
+  const staticRoutes = [
+    { name: "Home", link: "/", isActive: false },
+    { name: "Sources", link: "/sources", isActive: false },
+  ];
+  const finalRoutes = [...staticRoutes, ...breadCrumbs];
+  return (
+    <Wrapper className="relative flex flex-col !px-0 gap-6 lg:gap-7 2xl:gap-10 mx-auto h-[calc(100vh-var(--header-height))] w-full overflow-y-auto scroll-smooth">
+      <div className="py-4 lg:pt-7 2xl:pt-10 px-4 lg:px-10 2xl:px-[60px]">
+        <BaseCrumbLists crumbsArray={finalRoutes} />
+      </div>
+
+      <div className="flex gap-4 justify-between px-4 lg:px-10 2xl:px-[60px]">
+        <div className=" w-full relative flex flex-col flex-1 ">
+          <div className=" w-full">
+            <TranscriptMetadataComponent
+              title={transcript.title}
+              date={transcript.date || ""}
+              topics={transcript.tags || []}
+              speakers={transcript.speakers || []}
+              transcriptBy={transcript.transcript_by || ""}
+            />
+          </div>
+
+          <div>
+            <div className="pt-4 md:pt-5 2xl:pt-6 pb-[var(--header-height)] xl:pb-[calc(60vh-var(--header-height))]">
+              <Tabs
+                markdown={transcript.body.raw}
+                summary={transcript?.summary}
+                extraInfo={transcript?.additional_resources}
+                currentHeading={currentHeading}
+                groupedHeading={allHeadings}
+                setCurrentHeading={setCurrentHeading}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="hidden lg:flex w-full sticky lg:flex-auto top-6 max-w-[300px] 2xl:max-w-[465px] self-start">
+          <ContentGrouping
+            currentGroup={currentHeading}
+            groupedData={allHeadings as unknown as GroupedData}
+            className={twMerge(
+              `!w-full rounded-xl max-h-[calc(90vh-var(--header-height))]`,
+              Object.keys(allHeadings).length < 1 && "!invisible"
+            )}
+            screen="desktop"
+          />
+        </div>
+      </div>
+      <FooterComponent />
+    </Wrapper>
+  );
+};
+
+export default IndividualTranscript;
diff --git a/src/components/individual-transcript/TranscriptTabContent.tsx b/src/components/individual-transcript/TranscriptTabContent.tsx
new file mode 100644
index 0000000..d1b7e19
--- /dev/null
+++ b/src/components/individual-transcript/TranscriptTabContent.tsx
@@ -0,0 +1,75 @@
+import React, { SetStateAction } from "react";
+import MarkdownPreview from "@uiw/react-markdown-preview";
+import "./markdown.css";
+import { InView } from "react-intersection-observer";
+import { createContentSlug } from "@/utils";
+
+
+function formatSpeakerText(text: string): string {
+  // Regular expression pattern to match "Speaker" or "Speaker:" followed by a timestamp
+  const pattern = /(\b\w+(?: \w+)?\s*):? (\d{2}:\d{2}:\d{2})/g;
+
+  // Replace matched text with formatted HTML
+  return text.replace(pattern, (match, speaker, time) => {
+    // HTML for the speaker's name
+    const formattedSpeaker = `<span className="font-bold text-black text-base leading-[1.36rem]">${speaker}:</span>`;
+    // HTML for the timestamp
+    const formattedTime = `<span className="text-gray-custom-1700 font-bold text-base leading-[1.36rem]">${time}</span>`;
+
+    // Return the combined formatted HTML within a paragraph tag
+    return `<p className="inline-block mt-2">${formattedSpeaker} ${formattedTime}</p>`;
+  });
+}
+
+const TranscriptTabContent = ({
+  markdown,
+  setCurrentHeading,
+}: {
+  markdown: string;
+  setCurrentHeading?: React.Dispatch<SetStateAction<string>>;
+}) => {
+  const formattedMarkdown = formatSpeakerText(markdown);
+
+  return (
+    <MarkdownPreview
+      source={formattedMarkdown}
+      className={`!bg-transparent`}
+      components={{
+        h1: ({ children = [], className, ...props }) => {
+          return (
+            <InView
+              as="div"
+              threshold={1}
+              rootMargin="35% 0% -65% 0%"
+              onChange={(inView) => {
+                if (setCurrentHeading && inView) {
+                  setCurrentHeading(createContentSlug(props?.id || ""));
+                }
+              }}
+            >
+              <h1 id={createContentSlug(props?.id || "")}>{children}</h1>
+            </InView>
+          );
+        },
+        h2: ({ children = [], className, ...props }) => {
+          return (
+            <InView
+              as="div"
+              threshold={1}
+              rootMargin="35% 0% -65% 0%"
+              onChange={(inView, entry) => {
+                if (setCurrentHeading && inView) {
+                  setCurrentHeading(createContentSlug(props?.id || ""));
+                }
+              }}
+            >
+              <h2 id={createContentSlug(props?.id || "")}>{children}</h2>
+            </InView>
+          );
+        },
+      }}
+    />
+  );
+};
+
+export default TranscriptTabContent;
diff --git a/src/components/individual-transcript/markdown.css b/src/components/individual-transcript/markdown.css
new file mode 100644
index 0000000..a780363
--- /dev/null
+++ b/src/components/individual-transcript/markdown.css
@@ -0,0 +1,109 @@
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
+.wmde-markdown.wmde-markdown-color {
+    background-color: transparent;
+    font-family: "Manrope", sans-serif ;
+}
+
+.wmde-markdown h1, .wmde-markdown h2 {
+    padding-left: 10px;
+    scroll-margin-top: 100px;
+    border-left: 8px solid #F7931A;
+    color: #000;
+    border-bottom: none !important;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    margin: 8px 0px !important;
+    font-size: 1.125rem;
+
+}
+
+.wmde-markdown h3, .wmde-markdown h4, .wmde-markdown h5, .wmde-markdown h6 {
+    color: #000;
+    font-size: 1rem
+}
+
+span.code-line {
+    white-space: pre-wrap;
+}
+.wmde-markdown pre code, .wmde-markdown pre tt{
+    max-width: 100%;
+}
+.wmde-markdown pre > code {
+    max-width: 100%;
+}
+
+.wmde-markdown p {
+
+    margin-bottom: 8px;
+    color: #000;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 2.1875rem;
+}
+
+.wmde-markdown a.anchor {
+    display: none !important;
+}
+
+@media (min-width: 1024px) {
+
+    .wmde-markdown h1, .wmde-markdown h2 {
+        /* margin: 0px !important; */
+        scroll-margin-top: 100px;
+        color: #000;
+        padding-top: 10px;
+        padding-bottom: 10px;
+        margin: 12px 0px !important;
+        font-size: 1.2rem;
+    }
+
+    .wmde-markdown h3, .wmde-markdown h4, .wmde-markdown h5, .wmde-markdown h6 {
+        color: #000;
+        font-size: 1rem;
+    }
+
+    .wmde-markdown p {
+        margin: 0px !important;
+        color: #000;
+        font-weight: 400;
+        font-size: 1rem;
+        line-height: 2.1875rem;
+    }
+    .wmde-markdown ul,.wmde-markdown ol {
+        margin: 0px !important;
+        color: #000;
+        font-weight: 400;
+        font-size: 1rem;
+        line-height: 2.1875rem;
+    }
+    .wmde-markdown ul, .wmde-markdown li {
+        list-style-type: circle;
+    }
+
+    .wmde-markdown a.anchor {
+        display: none !important;
+    }
+}
+
+@media (min-width: 1536px) {
+
+    .wmde-markdown h1, .wmde-markdown h2 {
+        margin: 12px 0px !important;
+        font-size: 1.75rem;
+    }
+
+    .wmde-markdown h3,.wmde-markdown h4, .wmde-markdown h5, .wmde-markdown h6 {
+        color: #000;
+        font-size: 1rem;
+    }
+
+    .wmde-markdown p {
+        margin: 0px !important;
+        color: #000;
+        line-height: 2rem;
+    }
+
+    .wmde-markdown a.anchor {
+        display: none !important;
+    }
+}
\ No newline at end of file
diff --git a/src/components/svgs/AIGeneratedIcon.tsx b/src/components/svgs/AIGeneratedIcon.tsx
new file mode 100644
index 0000000..902b336
--- /dev/null
+++ b/src/components/svgs/AIGeneratedIcon.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+import { SVGProps } from "react";
+const AiGeneratedIcon = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width={21}
+    height={20}
+    viewBox="0 0 21 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M16.3327 13.3333V11.6666C16.3327 9.30963 16.3327 8.13109 15.6004 7.39886C14.8682 6.66663 13.6897 6.66663 11.3327 6.66663H9.66602C7.30899 6.66663 6.13048 6.66663 5.39825 7.39886C4.66602 8.13109 4.66602 9.30963 4.66602 11.6666V13.3333C4.66602 15.6903 4.66602 16.8688 5.39825 17.601C6.13048 18.3333 7.30899 18.3333 9.66602 18.3333H11.3327C13.6897 18.3333 14.8682 18.3333 15.6004 17.601C16.3327 16.8688 16.3327 15.6903 16.3327 13.3333Z"
+      stroke="#2A58FE"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M16.334 15C17.5125 15 18.1017 15 18.4679 14.6339C18.834 14.2677 18.834 13.6785 18.834 12.5C18.834 11.3215 18.834 10.7322 18.4679 10.3661C18.1017 10 17.5125 10 16.334 10"
+      stroke="#2A58FE"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M4.66602 15C3.48751 15 2.89825 15 2.53213 14.6339C2.16602 14.2677 2.16602 13.6785 2.16602 12.5C2.16602 11.3215 2.16602 10.7322 2.53213 10.3661C2.89825 10 3.48751 10 4.66602 10"
+      stroke="#2A58FE"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M11.75 2.91663C11.75 3.60698 11.1903 4.16663 10.5 4.16663C9.80967 4.16663 9.25 3.60698 9.25 2.91663C9.25 2.22627 9.80967 1.66663 10.5 1.66663C11.1903 1.66663 11.75 2.22627 11.75 2.91663Z"
+      stroke="#2A58FE"
+    />
+    <path
+      d="M10.5 4.16663V6.66663"
+      stroke="#2A58FE"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8 10.8334V11.6667"
+      stroke="#2A58FE"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M13 10.8334V11.6667"
+      stroke="#2A58FE"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.83398 14.5834C8.83398 14.5834 9.38957 15 10.5007 15C11.6117 15 12.1673 14.5834 12.1673 14.5834"
+      stroke="#2A58FE"
+      strokeLinecap="round"
+    />
+  </svg>
+);
+export default AiGeneratedIcon;
diff --git a/src/config/index.ts b/src/config/index.ts
new file mode 100644
index 0000000..6597631
--- /dev/null
+++ b/src/config/index.ts
@@ -0,0 +1 @@
+export const LanguageCodes = ["zh", "es", "pt"]
\ No newline at end of file
diff --git a/src/utils/data.ts b/src/utils/data.ts
index 29f3f32..91248da 100644
--- a/src/utils/data.ts
+++ b/src/utils/data.ts
@@ -111,6 +111,7 @@ export type ContentTreeArray = {
   speakers?: string[] | undefined;
   date?: IsoDateTimeString | undefined;
   tags?: string[] | undefined;
+  languageURL?: string;
   sourceFilePath: string;
   flattenedPath: string;
   summary?: string | undefined;
diff --git a/src/utils/index.ts b/src/utils/index.ts
index fde3a46..2a94a0a 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -19,7 +19,7 @@ export type SpeakerData = {
 export type ContentData = {
   name: string;
   slug: string;
-  count: number;
+  count?: number;
 };
 
 interface TagInfo {
@@ -89,12 +89,22 @@ export function createSlug(name: string): string {
   return name
     .toLowerCase()
     .replace(/\s+/g, "-") // Replace spaces with -
-    .replace(/[^\w\-]+/g, "") // Remove all non-word chars
+    .replace(/[^\w\-]+/gi, "") // Remove all non-word chars
     .replace(/\-\-+/g, "-") // Replace multiple - with single -
     .replace(/^-+/, "") // Trim - from start of text
     .replace(/-+$/, ""); // Trim - from end of text
 }
 
+// This is needed to handle different languages slug for individual content and not clear them out
+export function createContentSlug(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/\s+/g, "-") // Replace spaces with hyphens
+    .replace(/[^\p{L}\p{N}\-_]+/giu, "") // Remove all non-alphanumeric characters except hyphen
+    .replace(/\-\-+/g, "-") // Replace multiple hyphens with a single hyphen
+    .replace(/^-+/, "") // Trim hyphens from the start
+    .replace(/-+$/, ""); // Trim hyphens from the end
+}
 export function groupDataByAlphabet(items: TopicsData[] | SpeakerData[]): Record<string, TopicsData[]> {
   return items
     .sort((a, b) => a.slug.localeCompare(b.slug))
@@ -257,7 +267,7 @@ export const fetchTranscriptDetails = (allTranscripts: Transcript[], paths: stri
   if (!isRoot || paths.length === 0) return { transcripts: [] };
 
   const transcripts = allTranscripts.reduce((acc, curr) => {
-    const { url, title, speakers, date, tags, _raw, summary, body } = curr;
+    const { url, title, speakers, date, tags, _raw, summary, body, languageURL } = curr;
 
     if (paths.includes(url)) {
       acc.push({
@@ -265,6 +275,7 @@ export const fetchTranscriptDetails = (allTranscripts: Transcript[], paths: stri
         speakers,
         date,
         tags,
+        languageURL,
         sourceFilePath: _raw.sourceFilePath,
         flattenedPath: _raw.flattenedPath,
         summary,
@@ -283,3 +294,16 @@ export const fetchTranscriptDetails = (allTranscripts: Transcript[], paths: stri
     transcripts,
   };
 };
+
+export function extractHeadings(text: string): string[] {
+  const lines: string[] = text.split('\n');
+  const headings: string[] = [];
+
+  lines.forEach(line => {
+      if (/^#{1,2}\s/.test(line)) {
+          headings.push(line.trim());
+      }
+  });
+
+  return headings;
+}
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5a77a0a..26f4042 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -31,9 +31,12 @@ const config: Config = {
           "custom-1300": "#E6E6E6",
           "custom-1400": "#ACACAC",
           "custom-1500": "#DBDBDB",
+          "custom-1600": "#BEBEBE",
+          "custom-1700": "#737373"
         },
         blue: {
           "custom-100": "#2A58FE",
+          "custom-200" :"#2A66FF"
         },
         orange: {
           "custom-100": "#F7931A",
@@ -54,6 +57,7 @@ const config: Config = {
           "custom-100": "#292929",
           "custom-200": "#202020",
           "custom-300": "#464646",
+          "custom-400": "#525252",
         },
         "custom-white": {
           "custom-100": "#F2F2F2",
diff --git a/tsconfig.json b/tsconfig.json
index c4a0288..457a440 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "lib": ["dom", "dom.iterable", "esnext"],
+    "target": "ES6",
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,