diff --git a/.gitignore b/.gitignore
index 68503cd..d55e5e4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,6 +25,8 @@
 /public/aliases.json
 /public/topics-data.json
 /public/speaker-data.json
+/public/source-count-data.json
+/public/sources-data.json
 
 # misc
 .DS_Store
diff --git a/.gitmodules b/.gitmodules
index 3c9eb36..dac4e11 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -4,4 +4,4 @@
 [submodule "public/gh-pages"]
 	path = public/gh-pages
 	url = https://github.com/bitcointranscripts/bitcointranscripts.github.io.git
-	branch = gh-pages
\ No newline at end of file
+	branch = gh-pages
diff --git a/contentlayer.config.ts b/contentlayer.config.ts
index d9aa52a..1b927a8 100644
--- a/contentlayer.config.ts
+++ b/contentlayer.config.ts
@@ -1,13 +1,8 @@
-import { createSlug, SpeakerData, TopicsData } from "./src/utils";
-import {
-  defineDocumentType,
-  defineNestedType,
-  makeSource,
-} from "contentlayer2/source-files";
-import { writeFileSync } from "fs";
 import path from "path";
 import * as fs from "fs";
-import { Transcript as ContentTranscriptType } from "./.contentlayer/generated/types";
+import { createSlug, createText, 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";
 
 const Resources = defineNestedType(() => ({
   name: "Resources",
@@ -16,7 +11,6 @@ const Resources = defineNestedType(() => ({
     url: { type: "string" },
   },
 }));
-
 export interface CategoryInfo {
   title: string;
   slug: string;
@@ -32,6 +26,10 @@ interface TagInfo {
   count: number;
 }
 
+interface ContentTree {
+  [key: string]: ContentTree | ContentTranscriptType[];
+}
+
 /**
  * Count the occurrences of all tags across transcripts and write to json file
  */
@@ -65,7 +63,7 @@ const getTranscriptAliases = (allTranscripts: ContentTranscriptType[]) => {
     }
   }
 
-  writeFileSync("./public/aliases.json", JSON.stringify(aliases));
+  fs.writeFileSync("./public/aliases.json", JSON.stringify(aliases));
 };
 
 const getCategories = () => {
@@ -96,11 +94,7 @@ 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);
@@ -122,13 +116,11 @@ 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
@@ -136,7 +128,7 @@ function organizeTags(transcripts: ContentTranscriptType[]) {
     tagsByCategory[category].sort((a, b) => a.name.localeCompare(b.name));
   });
 
-  writeFileSync("./public/tag-data.json", JSON.stringify(tagsByCategory));
+  fs.writeFileSync("./public/tag-data.json", JSON.stringify(tagsByCategory));
   return { tagsByCategory, tagsWithoutCategory };
 }
 
@@ -146,11 +138,11 @@ function organizeTopics(transcripts: ContentTranscriptType[]) {
 
   transcripts.forEach((transcript) => {
     const slugTags = transcript.tags?.map((tag) => ({
-      slug:createSlug(tag),
-      name:tag
+      slug: createSlug(tag),
+      name: tag,
     }));
 
-    slugTags?.forEach(({slug, name}) => {
+    slugTags?.forEach(({ slug, name }) => {
       if (slugTopics[slug] !== undefined) {
         const index = slugTopics[slug];
         topicsArray[index].count += 1;
@@ -166,44 +158,8 @@ function organizeTopics(transcripts: ContentTranscriptType[]) {
     });
   });
 
-  writeFileSync("./public/topics-data.json", JSON.stringify(topicsArray));
+  fs.writeFileSync("./public/topics-data.json", JSON.stringify(topicsArray));
 }
-/**
- * Count the occurrences of all types across transcripts and write to json file
- */
-const createTypesCount = (allTranscripts: ContentTranscriptType[]) => {
-  const typesAndCount: Record<string, number> = {};
-  const relevantTypes = [
-    "video",
-    "core-dev-tech",
-    "podcast",
-    "conference",
-    "meeting",
-    "club",
-    "meetup",
-    "hackathon",
-    "workshop",
-    "residency",
-    "developer-tools",
-  ];
-
-  allTranscripts.forEach((transcript) => {
-    if (transcript.categories) {
-      transcript.categories.forEach((type: string) => {
-        const formattedType = createSlug(type);
-        if (relevantTypes.includes(formattedType)) {
-          if (formattedType in typesAndCount) {
-            typesAndCount[formattedType] += 1;
-          } else {
-            typesAndCount[formattedType] = 1;
-          }
-        }
-      });
-    }
-  });
-
-  writeFileSync("./public/types-data.json", JSON.stringify(typesAndCount));
-};
 
 function createSpeakers(transcripts: ContentTranscriptType[]) {
   const slugSpeakers: any = {};
@@ -211,11 +167,11 @@ function createSpeakers(transcripts: ContentTranscriptType[]) {
 
   transcripts.forEach((transcript) => {
     const slugSpeakersArray = transcript.speakers?.map((speaker) => ({
-      slug:createSlug(speaker),
+      slug: createSlug(speaker),
       name: speaker,
     }));
 
-    slugSpeakersArray?.forEach(({slug, name}) => {
+    slugSpeakersArray?.forEach(({ slug, name }) => {
       if (slugSpeakers[slug] !== undefined) {
         const index = slugSpeakers[slug];
         speakerArray[index].count += 1;
@@ -231,8 +187,95 @@ function createSpeakers(transcripts: ContentTranscriptType[]) {
     });
   });
 
+  fs.writeFileSync("./public/speaker-data.json", JSON.stringify(speakerArray));
+}
+
+function generateSourcesCount(transcripts: ContentTranscriptType[], sources: ContentSourceType[]) {
+  const sourcesArray: TagInfo[] = [];
+  const slugSources: Record<string, number> = {};
+
+  transcripts.forEach((transcript) => {
+    const slug = transcript._raw.flattenedPath.split("/")[0];
 
-  writeFileSync("./public/speaker-data.json", JSON.stringify(speakerArray));
+    if (slugSources[slug] !== undefined) {
+      sourcesArray[slugSources[slug]].count += 1;
+    } else {
+      const sourcesLength = sourcesArray.length;
+      slugSources[slug] = sourcesLength;
+
+      const getSourceName = (slug: string) =>
+        sources.find((source) => source.language === "en" && source.slugAsParams[0] === slug)?.title ?? unsluggify(slug);
+
+      sourcesArray[sourcesLength] = {
+        slug,
+        name: getSourceName(slug),
+        count: 1,
+      };
+    }
+  });
+
+  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 nestedTypes: any = {};
+
+  sources.forEach((transcript) => {
+    if (transcript.types) {
+      transcript.types.forEach((type) => {
+        const slugType = type.charAt(0).toUpperCase() + type.slice(1);
+        const slug = transcript.slugAsParams[0];
+
+        const sourceIndex = slugSources[slug];
+        const getSource = sourcesArray[sourceIndex] ?? null;
+
+        if (!nestedTypes[slugType]) {
+          nestedTypes[slugType] = [];
+        } else {
+          if (nestedTypes[slugType].includes(getSource) || getSource === null) return;
+          nestedTypes[slugType].push(getSource);
+        }
+      });
+    }
+  });
+
+  fs.writeFileSync("./public/types-data.json", JSON.stringify(nestedTypes));
+};
+
+function organizeContent(transcripts: ContentTranscriptType[]) {
+  const tree: ContentTree = {};
+
+  transcripts.forEach((transcript) => {
+    const parts = transcript.slugAsParams;
+    let current = tree;
+
+    const isNonEnglishDir = /\w+\.[a-z]{2}\b/.test(parts[parts.length - 1]);
+    if (isNonEnglishDir) return;
+
+    for (let i = 0; i < parts.length - 1; i++) {
+      if (!current[parts[i]]) {
+        current[parts[i]] = i === parts.length - 2 ? [] : {};
+      }
+      current = current[parts[i]] as ContentTree;
+    }
+
+    (current as unknown as any[]).push({
+      title: transcript.title,
+      speakers: transcript.speakers,
+      date: transcript.date,
+      tags: transcript.tags,
+      sourceFilePath: transcript._raw.sourceFilePath,
+      flattenedPath: transcript._raw.flattenedPath,
+      summary: transcript.summary,
+      body: createText(transcript.body),
+      source: transcript.source,
+    });
+  });
+
+  // Save the result as JSON
+  fs.writeFileSync("./public/sources-data.json", JSON.stringify(tree, null, 2));
 }
 
 export const Transcript = defineDocumentType(() => ({
@@ -261,6 +304,8 @@ export const Transcript = defineDocumentType(() => ({
     aditional_resources: { type: "list", of: Resources },
     additional_resources: { type: "list", of: Resources },
     weight: { type: "number" },
+    types: { type: "list", of: { type: "string" } },
+    source_file: { type: "string" },
   },
   computedFields: {
     url: {
@@ -268,15 +313,49 @@ export const Transcript = defineDocumentType(() => ({
       resolve: (doc) => `/${doc._raw.flattenedPath}`,
     },
     slugAsParams: {
-      type: "string",
+      type: "list",
       resolve: (doc) => doc._raw.flattenedPath.split("/"),
     },
   },
 }));
 
+export const Source = defineDocumentType(() => ({
+  name: "Source",
+  filePathPattern: `**/_index{,.??}.md`,
+  contentType: "markdown",
+  fields: {
+    title: { type: "string", required: true },
+    source: { type: "string" },
+    transcription_coverage: { type: "string" },
+    hosts: { type: "list", of: { type: "string" } },
+    weight: { type: "number" },
+    website: { type: "string" },
+    types: { type: "list", of: { type: "string" } },
+    additional_resources: { type: "list", of: Resources },
+  },
+  computedFields: {
+    url: {
+      type: "string",
+      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";
+        return lan;
+      },
+    },
+    slugAsParams: {
+      type: "list",
+      resolve: (doc) => doc._raw.flattenedPath.split("/").slice(0, -1),
+    },
+  },
+}));
+
 export default makeSource({
   contentDirPath: path.join(process.cwd(), "public", "bitcoin-transcript"),
-  documentTypes: [Transcript],
+  documentTypes: [Source, Transcript],
   contentDirExclude: [
     ".github",
     ".gitignore",
@@ -288,11 +367,13 @@ export default makeSource({
     "2018-08-17-richard-bondi-bitcoin-cli-regtest.es.md",
   ],
   onSuccess: async (importData) => {
-    const { allDocuments } = await importData();
-    organizeTags(allDocuments);
-    createTypesCount(allDocuments);
-    organizeTopics(allDocuments);
-    getTranscriptAliases(allDocuments);
-    createSpeakers(allDocuments);
+    const { allTranscripts, allSources } = await importData();
+    organizeTags(allTranscripts);
+    createTypesCount(allTranscripts, allSources);
+    organizeTopics(allTranscripts);
+    getTranscriptAliases(allTranscripts);
+    createSpeakers(allTranscripts);
+    generateSourcesCount(allTranscripts, allSources);
+    organizeContent(allTranscripts);
   },
 });
diff --git a/next.config.mjs b/next.config.mjs
index 6f15486..f3b54d8 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -5,8 +5,8 @@ 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([^/]+)", // intercept all paths ending with a file extension
+          destination: "/gh-pages/:path*.:ext", // rewrite to gh-pages/[path_here].ext
         },
         {
           source: "/transcripts",
@@ -20,8 +20,12 @@ const nextConfig = {
           source: "/:path*",
           destination: "/gh-pages/:path*/index.html",
         },
-      ]
-    }
+        {
+          source: "/sources/:path((?!.*\\.[^/]+).*)", // Matches /source/[any path without a file extension]
+          destination: "/[...slug]/:path*", // Replace with your catch-all route
+        },
+      ],
+    };
   },
 };
 
diff --git a/public/images/not-found-img.png b/public/images/not-found-img.png
new file mode 100644
index 0000000..b7ebbb0
Binary files /dev/null and b/public/images/not-found-img.png differ
diff --git a/public/svgs/date-icon.svg b/public/svgs/date-icon.svg
new file mode 100644
index 0000000..ef03eca
--- /dev/null
+++ b/public/svgs/date-icon.svg
@@ -0,0 +1,7 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15 1.66666V3.33332M5 1.66666V3.33332" stroke="#808080" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.99657 10.8333H10.0041M9.99657 14.1667H10.0041M13.3262 10.8333H13.3337M6.66699 10.8333H6.67447M6.66699 14.1667H6.67447" stroke="#808080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.91699 6.66666H17.0837" stroke="#808080" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.08301 10.2027C2.08301 6.57162 2.08301 4.75607 3.12644 3.62803C4.16987 2.5 5.84925 2.5 9.20801 2.5H10.7913C14.1501 2.5 15.8295 2.5 16.8729 3.62803C17.9163 4.75607 17.9163 6.57162 17.9163 10.2027V10.6307C17.9163 14.2618 17.9163 16.0773 16.8729 17.2053C15.8295 18.3333 14.1501 18.3333 10.7913 18.3333H9.20801C5.84925 18.3333 4.16987 18.3333 3.12644 17.2053C2.08301 16.0773 2.08301 14.2618 2.08301 10.6307V10.2027Z" stroke="#808080" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.5 6.66666H17.5" stroke="#808080" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/svgs/link-icon.svg b/public/svgs/link-icon.svg
new file mode 100644
index 0000000..a682520
--- /dev/null
+++ b/public/svgs/link-icon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.14339 10.691L9.35031 10.4841C11.329 8.50531 14.5372 8.50531 16.5159 10.4841C18.4947 12.4628 18.4947 15.671 16.5159 17.6497L13.6497 20.5159C11.671 22.4947 8.46279 22.4947 6.48405 20.5159C4.50532 18.5372 4.50532 15.329 6.48405 13.3503L6.9484 12.886" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+<path d="M17.0516 11.114L17.5159 10.6497C19.4947 8.67095 19.4947 5.46279 17.5159 3.48405C15.5372 1.50532 12.329 1.50532 10.3503 3.48405L7.48405 6.35031C5.50532 8.32904 5.50532 11.5372 7.48405 13.5159C9.46279 15.4947 12.671 15.4947 14.6497 13.5159L14.8566 13.309" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+</svg>
diff --git a/public/svgs/tags-icon.svg b/public/svgs/tags-icon.svg
new file mode 100644
index 0000000..a53bb62
--- /dev/null
+++ b/public/svgs/tags-icon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3 17.9808V12.7075C3 9.07416 3 7.25748 4.09835 6.12874C5.1967 5 6.96447 5 10.5 5C14.0355 5 15.8033 5 16.9017 6.12874C18 7.25748 18 9.07416 18 12.7075V17.9808C18 20.2867 18 21.4396 17.2755 21.8523C15.8724 22.6514 13.2405 19.9852 11.9906 19.1824C11.2657 18.7168 10.9033 18.484 10.5 18.484C10.0967 18.484 9.73425 18.7168 9.00938 19.1824C7.7595 19.9852 5.12763 22.6514 3.72454 21.8523C3 21.4396 3 20.2867 3 17.9808Z" stroke="#0B0A0A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 2H11C15.714 2 18.0711 2 19.5355 3.46447C21 4.92893 21 7.28595 21 12V18" stroke="#0B0A0A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/svgs/world-icon.svg b/public/svgs/world-icon.svg
new file mode 100644
index 0000000..5b3a70c
--- /dev/null
+++ b/public/svgs/world-icon.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="black" stroke-width="1.5"/>
+<path d="M8 12C8 18 12 22 12 22C12 22 16 18 16 12C16 6 12 2 12 2C12 2 8 6 8 12Z" stroke="black" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M21 15H3" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 9H3" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/app/(explore)/[...slug]/page.tsx b/src/app/(explore)/[...slug]/page.tsx
new file mode 100644
index 0000000..90ed7ef
--- /dev/null
+++ b/src/app/(explore)/[...slug]/page.tsx
@@ -0,0 +1,122 @@
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { notFound } from "next/navigation";
+import { ContentTreeArray } from "@/utils/data";
+import LinkIcon from "/public/svgs/link-icon.svg";
+import WorldIcon from "/public/svgs/world-icon.svg";
+import allSources from "@/public/sources-data.json";
+import { ContentTree, filterOutIndexes } from "@/utils";
+import BreadCrumbs from "@/components/common/BreadCrumbs";
+import { ArrowLinkRight } from "@bitcoin-dev-project/bdp-ui/icons";
+import { allSources as allContentSources } from "contentlayer/generated";
+import TranscriptDetailsCard from "@/components/common/TranscriptDetailsCard";
+
+// forces 404 for paths not generated from `generateStaticParams` function.
+export const dynamicParams = false;
+
+export function generateStaticParams() {
+  return allContentSources.map(({ slugAsParams }) => ({ slug: slugAsParams }));
+}
+
+const page = ({ params }: { params: { slug: string[] } }) => {
+  const slug = params.slug ?? [];
+  const contentTree = allSources;
+
+  let current: any = contentTree;
+
+  for (const part of slug) {
+    if (typeof current === "object" && !Array.isArray(current) && part in current) {
+      current = current[part] as ContentTree | ContentTreeArray[];
+    } else {
+      notFound();
+    }
+  }
+
+  const displayCurrent = filterOutIndexes(current);
+
+  const pageDetails = allContentSources.find((source) => {
+    return source.slugAsParams.join("/") === slug.join("/") && source.language === "en";
+  });
+
+  const isDirectoryList = Array.isArray(current);
+
+  return (
+    <div className='flex items-start lg:gap-[50px]'>
+      <div className='flex flex-col w-full gap-6 md:gap-8 2xl:gap-10 no-scrollbar'>
+        <div
+          className={`flex flex-col ${
+            isDirectoryList ? "border-b border-b-[#9B9B9B] pb-6 md:border-b-0 md:pb-0" : "border-b border-b-[#9B9B9B] pb-6 lg:pb-10"
+          } gap-5 2xl:gap-6`}
+        >
+          <BreadCrumbs />
+          <div className='flex flex-col'>
+            <Link href={slug.slice(0, -1).join("/") === "" ? `/sources` : `/${slug.slice(0, -1).join("/")}`} className='flex gap-1 items-center'>
+              <ArrowLinkRight className='rotate-180 w-5 md:w-6' />
+              <p>Back</p>
+            </Link>
+
+            <h3 className='text-xl 2xl:text-2xl font-medium pt-6 md:pt-3'>{pageDetails?.title ?? slug[slug.length - 1]}</h3>
+            {isDirectoryList && pageDetails?.website ? (
+              <div className='flex gap-1 items-center pt-3 md:pt-6'>
+                <Image src={WorldIcon} alt='world icon' className='w-[18px] md:w-[20px]' />
+                <Link
+                  href={pageDetails?.website ?? ""}
+                  target='_blank'
+                  className='text-xs md:text-sm xl:text-base leading-[17.6px] font-medium text-black underline text-wrap break-words line-clamp-1'
+                >
+                  {pageDetails.website ?? ""}
+                </Link>
+              </div>
+            ) : null}
+
+            {isDirectoryList && pageDetails?.additional_resources ? (
+              <div className='flex gap-1 items-center pt-3 md:pt-6'>
+                <Image src={LinkIcon} alt='link icon' className='w-[18px] md:w-[20px]' />
+                <div className='flex gap-1 flex-wrap'>
+                  {pageDetails.additional_resources.map((resource, index) => (
+                    <Link
+                      href={resource.url ?? ""}
+                      key={`${resource.title}-${index}`}
+                      target='_blank'
+                      className='py-[2px] px-4 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'
+                    >
+                      {resource.title}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            ) : null}
+          </div>
+        </div>
+
+        {isDirectoryList ? (
+          <div className='flex flex-col gap-6 h-full pb-8 overflow-scroll'>
+            {(displayCurrent as ContentTreeArray[])
+              .sort((a, b) => new Date(b.date!).getTime() - new Date(a.date!).getTime() || a.title.localeCompare(b.title))
+              .map((item, i) => (
+                <TranscriptDetailsCard key={i} slug={slug} data={item} />
+              ))}
+          </div>
+        ) : (
+          <div className='flex-col flex gap-10 overflow-scroll pb-8'>
+            <div className='grid grid-cols-1 sm:grid-cols-2 gap-2.5'>
+              {(displayCurrent as string[]).map((key, i) => (
+                <Link
+                  key={`${key}-${i}}`}
+                  href={`/${[...slug, key].join("/")}`}
+                  className='flex capitalize cursor-pointer border max-w-[100%] border-gray-custom-1200 rounded-[5px] justify-between items-center text-sm py-5 px-4 lg:py-7 2xl:px-6 2xl:text-lg font-semibold text-gray-custom-1100'
+                >
+                  <span className='text-wrap break-words max-w-[80%]'>{key}</span>
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+      <div className='hidden lg:flex sticky top-0 flex-shrink-0 w-fit lg:justify-center 2xl:min-w-[100px] xl:min-w-[200px]'></div>
+    </div>
+  );
+};
+
+export default page;
diff --git a/src/app/(explore)/layout.tsx b/src/app/(explore)/layout.tsx
deleted file mode 100644
index 87b0d99..0000000
--- a/src/app/(explore)/layout.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import ExploreNavigation from "@/components/explore/ExploreNavigation";
-
-export default function ExploreLayout({
-  children, // will be a page or nested layout
-}: {
-  children: React.ReactNode;
-}) {
-  return (
-    <div className="w-full max-w-[1920px] mx-auto px-4 lg:px-10 2xl:px-[60px]">
-      <section className="flex  gap-[50px] h-[calc(100vh-var(--header-height))]  pt-6 overflow-y-auto ">
-        <ExploreNavigation />
-        <div className="max-h-full h-full w-full scroll-smooth overflow-scroll ">{children}</div>
-
-        {/* Include shared UI here e.g. a header or sidebar */}
-      </section>
-    </div>
-  );
-}
diff --git a/src/app/(explore)/sources/page.tsx b/src/app/(explore)/sources/page.tsx
new file mode 100644
index 0000000..cc8ad9d
--- /dev/null
+++ b/src/app/(explore)/sources/page.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import TranscriptContentPage from "@/components/explore/TranscriptContentPage";
+import allSources from "@/public/source-count-data.json";
+
+const SourcesPage = () => {
+  return (
+    <div className='flex flex-col text-black'>
+      <TranscriptContentPage
+        header='Sources'
+        data={allSources}
+        description='Sources help you find transcripts within a specific talk, meetup, conference, and the likes.'
+        type='alphabet'
+        linkName='sources'
+      />
+    </div>
+  );
+};
+
+export default SourcesPage;
diff --git a/src/app/(explore)/template.tsx b/src/app/(explore)/template.tsx
new file mode 100644
index 0000000..73ce3c6
--- /dev/null
+++ b/src/app/(explore)/template.tsx
@@ -0,0 +1,23 @@
+import ExploreNavigation from "@/components/explore/ExploreNavigation";
+import FooterComponent from "@/components/layout/FooterComponent";
+import Wrapper from "@/components/layout/Wrapper";
+
+export default function ExploreLayout({
+  children, // will be a page or nested layout
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <section className="mt-2 md:mt-6 h-[calc(100vh-var(--header-height)-26px)] overflow-y-auto">
+        <Wrapper className="flex gap-[50px] md:pb-[100px]">
+          <ExploreNavigation />
+          <div className="w-full scroll-smooth">{children}</div>
+
+          {/* Include shared UI here e.g. a header or sidebar */}
+        </Wrapper>
+        <FooterComponent />
+      </section>
+    </>
+  );
+}
diff --git a/src/app/(explore)/types/page.tsx b/src/app/(explore)/types/page.tsx
new file mode 100644
index 0000000..c61cd31
--- /dev/null
+++ b/src/app/(explore)/types/page.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import TranscriptContentPage from "@/components/explore/TranscriptContentPage";
+import allTypesData from "@/public/types-data.json";
+
+const CategoriesPage = () => {
+  return (
+    <div className='flex flex-col text-black'>
+      <TranscriptContentPage
+        header='Types'
+        data={allTypesData}
+        description='Sources tend to fall into discrete types, from podcasts to meetups. Find transcripts in your preferred format of communication.'
+        type='words'
+        linkName='sources'
+      />
+    </div>
+  );
+};
+
+export default CategoriesPage;
diff --git a/src/app/globals.css b/src/app/globals.css
index b497b56..f5fbf76 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -32,7 +32,7 @@
   --background-start-rgb: 214, 219, 220;
   --background-end-rgb: 255, 255, 255;
   --basic-mono-font: basic-mono;
-  --header-height: 100px;
+  --header-height: 86px;
 }
 
 /* @media (prefers-color-scheme: dark) {
@@ -49,6 +49,11 @@ body {
   color: rgb(var(--foreground-rgb));
 } */
 
+@media (min-width: 768px) {
+  :root {
+    --header-height: 100px;
+  }
+}
 
 @layer utilities {
   .text-balance {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f2f3e1c..3b8a60c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -24,7 +24,7 @@ export default function RootLayout({
     <html lang='en'>
       <body className={manrope.className}>
         <Header />
-        <div>{children}</div>
+        {children}
       </body>
       <Script async src='https://visits.bitcoindevs.xyz/script.js' data-website-id='06384ada-7f1c-44c2-a6d9-d830fb23e122'></Script>
     </html>
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
new file mode 100644
index 0000000..ccc3220
--- /dev/null
+++ b/src/app/not-found.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import ErrorPageSkeleton from "@/components/common/ErrorPageSkeleton";
+
+export default function NotFound() {
+  return (
+    <ErrorPageSkeleton>
+      <section className='text-center'>
+        <h1 className='text-[40px] leading-[54.62px] 2xl:text-[56px] 2xl:leading-[76.5px] xl:text-5xl xl:leading-[60px] font-extrabold text-center'>
+          404
+        </h1>
+        <section className='flex flex-col gap-2 sm:gap-4 text-sm font-medium md:text-base md:font-semibold 2xl:text-lg 2xl:font-semibold text-center pt-2'>
+          <p>Page not found</p>
+          <p className=''>
+            But maybe we found a new Transcript Reviewer? <span className='sm:hidden whitespace-nowrap'>(we mean you!)</span>
+            <br />
+            <span className='hidden sm:flex text-center items-center justify-center'>(We mean you!)</span>
+          </p>
+        </section>
+      </section>
+    </ErrorPageSkeleton>
+  );
+}
diff --git a/src/components/common/BreadCrumbs.tsx b/src/components/common/BreadCrumbs.tsx
index 9dd6e45..cd0645c 100644
--- a/src/components/common/BreadCrumbs.tsx
+++ b/src/components/common/BreadCrumbs.tsx
@@ -1,29 +1,47 @@
+"use client";
+
 import Link from "next/link";
-import { useParams, usePathname } from "next/navigation";
+import { usePathname } from "next/navigation";
 import React from "react";
+import { ExploreNavigationItems } from "@/utils/data";
 
 const BreadCrumbs = () => {
-  const pathname = usePathname()
-  const allRoutes= pathname.split("/").map(path=> ({name:path || "home", link:`/${path||""}`}))
+  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">
-      {
-        allRoutes.map((link, i) => (
-          <div key={link.name} className="flex gap-1 items-center">
-            <Link
-              className={
-                ` text-gray-custom-800 capitalize hover:underline font-medium text-sm    2xl:text-base`
-              }
-              href={link.link}
-            >
-              {link.name}
-            </Link>
-            {i !== allRoutes.length - 1 && (
-              <p className="text-custom-black-custom-200">/</p>
-            )}
-          </div>
-        ))}
+    <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>
   );
 };
diff --git a/src/components/common/ErrorPageSkeleton.tsx b/src/components/common/ErrorPageSkeleton.tsx
new file mode 100644
index 0000000..7ef6c1c
--- /dev/null
+++ b/src/components/common/ErrorPageSkeleton.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { ArrowLinkRight } from "@bitcoin-dev-project/bdp-ui/icons";
+
+const ErrorPageSkeleton = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <main className='flex items-center justify-center h-[calc(100vh-var(--header-height))] px-4'>
+      <div className='flex flex-col items-center justify-center gap-6 w-[663px] sm:w-full h-full'>
+        <div>{children}</div>
+        <section className='max-w-[326px] max-h-[276.56px] sm:max-w-[550px] sm:max-h-[450px] relative h-full w-full'>
+          <Image src='/images/not-found-img.png' alt='not found image' fill className=' object-contain' />
+        </section>
+
+        <section className='flex flex-col sm:flex-row gap-6 w-full items-center justify-center'>
+          <Link
+            href='/'
+            className='flex items-center justify-center gap-2 font-semibold text-base leading-[22px] 2xl:text-lg 2xl:font-semibold text-white py-[17px] sm:py-5 2xl:py-6 bg-orange-custom-100 rounded-full w-full sm:w-[50%] sm:max-w-[298.5px] max-w-full h-14 sm:h-full text-nowrap'
+          >
+            <ArrowLinkRight className='text-white w-6 max-md:w-5 rotate-180' />
+            Return Home
+          </Link>
+          <Link
+            href='https://review.btctranscripts.com/'
+            target='_blank'
+            className='flex items-center justify-center gap-2 text-base font-semibold 2xl:text-lg text-black py-[17px] sm:py-5 2xl:py-6 bg-transparent border-2 border-black rounded-full w-full sm:w-[50%] h-14 sm:h-full sm:max-w-[298.5px] max-w-full text-nowrap'
+          >
+            Review Transcripts
+            <ArrowLinkRight className='text-black w-6 max-md:w-5' />
+          </Link>
+        </section>
+      </div>
+    </main>
+  );
+};
+
+export default ErrorPageSkeleton;
diff --git a/src/components/common/NoSearchResult.tsx b/src/components/common/NoSearchResult.tsx
new file mode 100644
index 0000000..956fe0e
--- /dev/null
+++ b/src/components/common/NoSearchResult.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import ErrorPageSkeleton from "./ErrorPageSkeleton";
+
+const NoSearchResult = () => {
+  return (
+    <ErrorPageSkeleton>
+      <section className='text-center max-w-[424px]'>
+        <h1 className='text-[40px] leading-[54.62px] 2xl:text-[56px] 2xl:leading-[76.5px] xl:text-5xl xl:leading-[60px] font-extrabold text-center'>
+          No Search Results Found
+        </h1>
+        <section className='flex items-center justify-center text-sm font-medium md:text-base md:font-semibold 2xl:text-lg 2xl:font-semibold text-center pt-2'>
+          <p className='max-w-[258px] sm:max-w-full'>Help us review transcripts to make sure this never happens again!</p>
+        </section>
+      </section>
+    </ErrorPageSkeleton>
+  );
+};
+
+export default NoSearchResult;
diff --git a/src/components/common/TranscriptDetailsCard.tsx b/src/components/common/TranscriptDetailsCard.tsx
new file mode 100644
index 0000000..e11d10a
--- /dev/null
+++ b/src/components/common/TranscriptDetailsCard.tsx
@@ -0,0 +1,122 @@
+import React from "react";
+import Link from "next/link";
+import Image from "next/image";
+import { ContentTreeArray } from "@/utils/data";
+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";
+
+const TranscriptDetailsCard = ({ data, slug }: { data: ContentTreeArray; slug: string[] }) => {
+  const { speakers, tags, summary, date, title, body, flattenedPath: url } = data;
+
+  const calculateRemaining = (data: string[]) => (data?.length && data.length > 3 ? data.length - 3 : 0);
+
+  return (
+    <div className='border border-gray-custom-1200 rounded-lg p-4 md:p-5 2xl:p-6 flex flex-col gap-3 md:gap-4'>
+      <section className='flex justify-between'>
+        <div className='flex flex-col gap-2 w-full'>
+          <section className='flex flex-col md:flex-row gap-3 md:justify-between md:items-center w-full'>
+            <div className='flex gap-2 flex-wrap'>
+              {slug
+                .join(" / ")
+                .split(" ")
+                .map((slg, i) => (
+                  <p
+                    key={`${slg}-${i}`}
+                    className={`text-xs md:text-sm 2xl:text-base leading-[20.64px] ${
+                      slg === "/" ? "text-custom-black-custom-200" : "text-gray-custom-800"
+                    } font-medium capitalize`}
+                  >
+                    {unsluggify(slg)}
+                  </p>
+                ))}
+            </div>
+
+            {date && (
+              <div className='flex gap-2 items-center h-fit'>
+                <Image src={DateIcon} alt='date icon' className='w-[18px] md:w-[20px]' />
+                <p className='text-xs md:text-sm 2xl:text-base leading-[17.6px] font-medium text-gray-custom-800'>{formatDate(date!)}</p>
+              </div>
+            )}
+          </section>
+
+          <Link
+            href={`/${url}`}
+            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}
+          </Link>
+        </div>
+      </section>
+
+      <section className='flex flex-col gap-4'>
+        {speakers?.length ? (
+          <section className='flex gap-2 items-center max-md:gap-1'>
+            <>
+              <span>
+                <MicIcon className='w-5 md:w-6' />
+              </span>
+              <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>
+                  ))}
+
+                  {calculateRemaining(speakers) === 0 ? null : (
+                    <p className='py-[2px] px-5 rounded-[5px] bg-gray-custom-700 whitespace-nowrap text-nowrap max-md:px-3 lg:py-1 max-2xl:text-sm max-md:text-sm max-md:border max-md:border-gray-custom-300 max-md:leading-[100%]'>
+                      + {calculateRemaining(speakers)} more
+                    </p>
+                  )}
+                </div>
+              </div>
+            </>
+          </section>
+        ) : null}
+
+        <section className='flex gap-2 items-center max-md:gap-1'>
+          {tags?.length ? (
+            <>
+              <span>
+                <Image src={TagsIcon} alt='date icon' className='w-5 md:w-6' />
+              </span>
+              <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>
+                  ))}
+
+                  {calculateRemaining(tags) === 0 ? null : (
+                    <p className='py-[2px] px-5 rounded-[5px] bg-gray-custom-700 whitespace-nowrap text-nowrap max-md:px-3 lg:py-1 max-2xl:text-sm max-md:text-sm max-md:border max-md:border-gray-custom-300 max-md:leading-[100%]'>
+                      + {calculateRemaining(tags)} more
+                    </p>
+                  )}
+                </div>
+              </div>
+            </>
+          ) : null}
+        </section>
+      </section>
+
+      {summary || body ? (
+        <section>
+          <p className='text-sm md:text 2xl:text-base text-custom-black-custom-300 2xl:leading-[25px] line-clamp-3'>{summary ? summary : body}</p>
+        </section>
+      ) : null}
+    </div>
+  );
+};
+
+export default TranscriptDetailsCard;
diff --git a/src/components/explore/ContentGrouping.tsx b/src/components/explore/ContentGrouping.tsx
index 3bd50a6..09d0a76 100644
--- a/src/components/explore/ContentGrouping.tsx
+++ b/src/components/explore/ContentGrouping.tsx
@@ -1,3 +1,5 @@
+"use client" 
+
 import { createSlug, GroupedData } from "@/utils";
 import Link from "next/link";
 import { useEffect, useRef } from "react";
diff --git a/src/components/explore/ExploreNavigation.tsx b/src/components/explore/ExploreNavigation.tsx
index 3751e9c..2c19ab3 100644
--- a/src/components/explore/ExploreNavigation.tsx
+++ b/src/components/explore/ExploreNavigation.tsx
@@ -7,29 +7,22 @@ import { ArrowLinkUpRight } from "@bitcoin-dev-project/bdp-ui/icons";
 
 const ExploreNavigation = () => {
   return (
-    <section className="max-md:hidden md:flex sticky top-0 flex-col flex-none 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">
+    <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]'>
+      <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}
-          />
+          <ExploreNavigationItem key={item.href} href={item.href} title={item.title} />
         ))}
       </div>
-      <div className="flex flex-col gap-4 rounded-lg p-4 border border-gray-custom-1200">
-        <p className="text-sm 2xl:text-lg font-semibold">Review Transcripts</p>
+      <div className='flex flex-col gap-4 rounded-lg p-4 border border-gray-custom-1200'>
+        <p className='text-sm 2xl:text-lg font-semibold'>Review Transcripts</p>
         <Link
-          href="https://review.btctranscripts.com"
-          target="_blank"
+          href='https://review.btctranscripts.com'
+          target='_blank'
           className="relative flex items-center gap-1 w-fit text-xs 2xl:text-base font-semibold before:content-[''] before:absolute before:bottom-[-3px] before:left-0 before:w-full before:h-[1px] before:bg-black hover:before:h-[2px] before:transition-all"
         >
-          <span className="leading-none">Earn Sats</span>
-          <span className="">
-            <ArrowLinkUpRight
-              className="w-4 2xl:w-5"
-              pathProps={{ strokeWidth: 1.8 }}
-            />
+          <span className='leading-none'>Earn Sats</span>
+          <span className=''>
+            <ArrowLinkUpRight className='w-4 2xl:w-5' pathProps={{ strokeWidth: 1.8 }} />
           </span>
         </Link>
       </div>
@@ -37,15 +30,25 @@ const ExploreNavigation = () => {
   );
 };
 
-const ExploreNavigationItem = ({
-  href,
-  title,
-}: {
-  href: string;
-  title: string;
-}) => {
+const ExploreNavigationItem = ({ href, title }: { href: string; title: string }) => {
   const pathname = usePathname();
-  const isActive = pathname === href;
+  let pagePath = pathname.split("/")[1].toLowerCase();
+
+  const switchState = () => {
+    let isActive = false;
+    const navList = ExploreNavigationItems.map((item) => item.title.toLowerCase()).includes(pagePath);
+
+    if (navList) {
+      isActive = pagePath === title.toLowerCase();
+    } else if (!navList) {
+      pagePath = "sources";
+      isActive = pagePath === title.toLowerCase();
+    }
+
+    return { isActive };
+  };
+
+  const { isActive } = switchState();
 
   return (
     <Link
@@ -53,9 +56,7 @@ const ExploreNavigationItem = ({
       href={href}
       className={twMerge(
         "text-sm 2xl:text-lg leading-none px-4 py-4 rounded-lg 2xl:px-6 2xl:py-6 2xl:rounded-xl hover:bg-orange-custom-800 hover:text-orange-custom-100 transition-all",
-        isActive
-          ? "bg-orange-custom-800 text-orange-custom-100 font-semibold"
-          : ""
+        isActive ? "bg-orange-custom-800 text-orange-custom-100 font-semibold" : ""
       )}
     >
       {title}
diff --git a/src/components/explore/GroupedTranscriptContent.tsx b/src/components/explore/GroupedTranscriptContent.tsx
index c4ea5a2..8afccdc 100644
--- a/src/components/explore/GroupedTranscriptContent.tsx
+++ b/src/components/explore/GroupedTranscriptContent.tsx
@@ -38,7 +38,7 @@ const GroupedTranscriptContent = ({
       id={topicsByAlphabet[0].toLowerCase()}
       className="flex flex-col gap-7 "
     >
-      <h4 className="font-bold text-2xl">{topicsByAlphabet[0]}</h4>
+      <h4 className="font-bold text-2xl capitalize">{topicsByAlphabet[0]}</h4>
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
         {topicsByAlphabet[1].map((topics, i) => (
           <SingleTranscriptContent
@@ -55,7 +55,7 @@ const GroupedTranscriptContent = ({
       id={createSlug(topicsByAlphabet[0])}
       className="flex flex-col gap-7"
     >
-      <h4 className="font-bold text-2xl">{topicsByAlphabet[0]}</h4>
+      <h4 className="font-bold text-2xl capitalize">{topicsByAlphabet[0]}</h4>
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-2.5">
         {topicsByAlphabet[1] &&
         topicsByAlphabet[1].map((data, i) => (
diff --git a/src/components/explore/SingleTranscriptContent.tsx b/src/components/explore/SingleTranscriptContent.tsx
index 4a5599f..bdcce6f 100644
--- a/src/components/explore/SingleTranscriptContent.tsx
+++ b/src/components/explore/SingleTranscriptContent.tsx
@@ -3,16 +3,18 @@ import Link from "next/link";
 import React from "react";
 
 type SingleContent = {
- linkName: DepreciatedCategories
-} & TopicsData
-const SingleTranscriptContent = ({ count, slug, name, linkName }: SingleContent ) => {
+  linkName: DepreciatedCategories;
+} & TopicsData;
+const SingleTranscriptContent = ({ count, slug, name, linkName }: SingleContent) => {
+  const url = linkName === "sources" ? `/${slug}` : `/${linkName}/${slug}`;
+
   return (
     <Link
-      href={`/${linkName}/${slug}`}
-      className="flex capitalize cursor-pointer border max-w-[100%]  border-gray-custom-1200 rounded-[5px] justify-between items-center text-sm py-5 px-4 lg:py-7 2xl:px-6 2xl:text-lg font-semibold text-gray-custom-1100"
+      href={url}
+      className='flex capitalize cursor-pointer border max-w-[100%]  border-gray-custom-1200 rounded-[5px] justify-between items-center text-sm py-5 px-4 lg:py-7 2xl:px-6 2xl:text-lg font-semibold text-gray-custom-1100'
     >
-      <span className="text-wrap break-words max-w-[80%]">{name}</span>
-      <span className="font-normal font-basis-mono">{getDoubleDigits(count)}</span>
+      <span className='text-wrap break-words max-w-[80%]'>{name}</span>
+      <span className='font-normal font-basis-mono'>{getDoubleDigits(count)}</span>
     </Link>
   );
 };
diff --git a/src/components/explore/TranscriptContentPage.tsx b/src/components/explore/TranscriptContentPage.tsx
index 95909bb..2d05077 100644
--- a/src/components/explore/TranscriptContentPage.tsx
+++ b/src/components/explore/TranscriptContentPage.tsx
@@ -1,15 +1,10 @@
-"use client"
+"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, sortKeysAlphabetically } from "@/utils";
 import MobileAlphabetGrouping from "./MobileAlphabetGrouping";
 import ContentGrouping from "./ContentGrouping";
 
@@ -22,52 +17,27 @@ 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) : sortKeysAlphabetically(data);
+  const [currentGroup, setCurrentGroup] = useState<string>(type === "alphabet" ? "A" : createSlug(Object.keys(groupedData)[0]));
 
   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 ">
+        <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 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) => (
@@ -94,23 +64,12 @@ const TranscriptContentPage: FC<ITranscriptContentPage> = ({
         </div>
       </div>
 
-      <div className="hidden lg:flex sticky top-0 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>
   );
 };
 
-export default TranscriptContentPage;
\ No newline at end of file
+export default TranscriptContentPage;
diff --git a/src/components/landing-page/TranscriptCard.tsx b/src/components/landing-page/TranscriptCard.tsx
index 493ba24..be2226d 100644
--- a/src/components/landing-page/TranscriptCard.tsx
+++ b/src/components/landing-page/TranscriptCard.tsx
@@ -79,7 +79,7 @@ export const ExploreTranscriptCard = ({
       linkUrl = `/tags/#${parseUrl}`;
       break;
     case "TYPE":
-      linkUrl = `/categories/${parseUrl}`;
+      linkUrl = `/types#${parseUrl}`;
       break;
     default:
       break;
diff --git a/src/components/landing-page/explore-transcripts/ExploreTranscriptClient.tsx b/src/components/landing-page/explore-transcripts/ExploreTranscriptClient.tsx
index 34cb169..1127a8e 100644
--- a/src/components/landing-page/explore-transcripts/ExploreTranscriptClient.tsx
+++ b/src/components/landing-page/explore-transcripts/ExploreTranscriptClient.tsx
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { Carousel } from "@bitcoin-dev-project/bdp-ui";
 import { ArrowLinkRight } from "@bitcoin-dev-project/bdp-ui/icons";
 import { ExploreTranscriptCard } from "../TranscriptCard";
+import { countItemsAndSort } from "@/utils";
 
 interface TagInfo {
   name: string;
@@ -14,19 +15,12 @@ interface TagInfo {
 
 interface ExploreTranscriptClientProps {
   categories: { [category: string]: TagInfo[] };
-  types: {
-    [key: string]: number;
-  };
+  types: { [category: string]: TagInfo[] };
 }
 
 const ExploreTranscriptClient = ({ categories, types }: ExploreTranscriptClientProps) => {
-  const sortedCategories = Object.fromEntries(
-    Object.entries(categories)
-      .sort(([a], [b]) => a.localeCompare(b))
-      .map(([key, value]) => [key, value.sort((a, b) => a.name.localeCompare(b.name))])
-  );
-
-  const sortedTypes = Object.fromEntries(Object.entries(types).sort(([a], [b]) => a.localeCompare(b)));
+  const sortedCategories = countItemsAndSort(categories);
+  const sortedTypes = countItemsAndSort(types);
 
   return (
     <div className='flex items-center justify-center w-full'>
@@ -43,7 +37,7 @@ const ExploreTranscriptClient = ({ categories, types }: ExploreTranscriptClientP
             <Carousel.Container>
               {Object.entries(sortedCategories).map(([key, value]) => (
                 <Carousel.Item key={key}>
-                  <ExploreTranscriptCard title={key} transcripts={value.length} url={key} key={key} type='CATEGORY' />
+                  <ExploreTranscriptCard title={key} transcripts={value} url={key} key={key} type='CATEGORY' />
                 </Carousel.Item>
               ))}
             </Carousel.Container>
diff --git a/src/components/landing-page/explore-transcripts/ExploreTranscripts.tsx b/src/components/landing-page/explore-transcripts/ExploreTranscripts.tsx
index de5bffc..440a328 100644
--- a/src/components/landing-page/explore-transcripts/ExploreTranscripts.tsx
+++ b/src/components/landing-page/explore-transcripts/ExploreTranscripts.tsx
@@ -10,7 +10,7 @@ function getTags() {
   return JSON.parse(fileContents);
 }
 
-const getTypes = (): { [key: string]: number } => {
+const getTypes = () => {
   const filePath = path.join(process.cwd(), "public", "types-data.json");
   const fileContents = fs.readFileSync(filePath, "utf8");
   return JSON.parse(fileContents);
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 9201de6..4aa1a26 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -189,7 +189,9 @@ const Header = () => {
     <div className='flex items-center justify-center border-b-[0.5px] border-b-gray-custom-200 max-md:border-b-0 w-full sticky top-0 z-20'>
       <Wrapper className='h-[var(--header-height)] flex items-center w-full justify-between bg-white sticky top-0 z-20 gap-6 max-lg:gap-4 max-md:h-[86px]'>
         <section className='flex items-center gap-16 max-xl:gap-8 max-lg:gap-4'>
-          <Logo iconStyles='w-9 max-xl:w-[30px]' textStyles='text-black text-[24px] leading-[36.77px] max-lg:text-base' />
+          <Link href="/">
+            <Logo iconStyles='w-9 max-xl:w-[30px]' textStyles='text-black text-[24px] leading-[36.77px] max-lg:text-base' />
+          </Link>
           <nav className='md:hidden items-center gap-16 text-black max-xl:gap-4 max-lg:text-sm max-md:hidden'>
             <Link href='/categories'>Transcripts</Link>
             <Link href='/about' className='hidden'>
diff --git a/src/components/layout/Wrapper.tsx b/src/components/layout/Wrapper.tsx
index 46ef379..3c80a51 100644
--- a/src/components/layout/Wrapper.tsx
+++ b/src/components/layout/Wrapper.tsx
@@ -1,5 +1,5 @@
 import React from "react";
 
 export default function Wrapper({ className, ...props }: React.ComponentPropsWithoutRef<"div">) {
-  return <div className={`px-[60px] max-xl:px-5 max-lg:px-4 max-w-[1920px] ${className}`} {...props} />;
+  return <div className={`w-full max-w-[1920px] px-4 lg:px-10 2xl:px-[60px] mx-auto ${className}`} {...props} />;
 }
diff --git a/src/utils/data.ts b/src/utils/data.ts
index c94cdbf..29f3f32 100644
--- a/src/utils/data.ts
+++ b/src/utils/data.ts
@@ -5,6 +5,7 @@ import bitcointldr from "/public/images/bitcoin-tldr.jpg";
 import savingSatoshi from "/public/images/saving-satoshi.jpg";
 import transcriptsreview from "/public/images/bitcoin-transcripts-review.jpg";
 import bitcoindevs from "/public/images/bitcoin-devs.jpg";
+import { IsoDateTimeString, Markdown } from "contentlayer2/core";
 
 export type MenuApp = {
   href: string;
@@ -24,8 +25,7 @@ export const menuApps = [
     href: "https://chat.bitcoinsearch.xyz",
     image: chatbtc,
     alt: "ChatBTC image",
-    title:
-      "Interactive AI chat to learn about bitcoin technology and its history",
+    title: "Interactive AI chat to learn about bitcoin technology and its history",
   },
   {
     href: "https://bitcoinsearch.xyz/",
@@ -37,15 +37,13 @@ export const menuApps = [
     href: "https://tldr.bitcoinsearch.xyz/",
     image: bitcointldr,
     alt: "Bitcoin TLDR",
-    title:
-      "Daily summary of key bitcoin tech development discussions and updates",
+    title: "Daily summary of key bitcoin tech development discussions and updates",
   },
   {
     href: "https://savingsatoshi.com",
     image: savingSatoshi,
     alt: "Saving Satoshi",
-    title:
-      "Engaging bitcoin dev intro for coders using technical texts and code challenges",
+    title: "Engaging bitcoin dev intro for coders using technical texts and code challenges",
   },
   {
     href: "https://review.btctranscripts.com/",
@@ -68,14 +66,14 @@ export const ExploreNavigationItems = [
     href: "/speakers",
     title: "Speakers",
   },
-  // {
-  //   href: "/types",
-  //   title: "Types",
-  // },
-  // {
-  //   href: "/sources",
-  //   title: "Sources",
-  // },
+  {
+    href: "/types",
+    title: "Types",
+  },
+  {
+    href: "/sources",
+    title: "Sources",
+  },
 ];
 
 export const alphabeticalArrangement = [
@@ -107,3 +105,14 @@ export const alphabeticalArrangement = [
   "Y",
   "Z",
 ];
+
+export type ContentTreeArray = {
+  title: string;
+  speakers?: string[] | undefined;
+  date?: IsoDateTimeString | undefined;
+  tags?: string[] | undefined;
+  sourceFilePath: string;
+  flattenedPath: string;
+  summary?: string | undefined;
+  body: string;
+};
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 9fe6478..1bbb208 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1,4 +1,5 @@
-import { type Transcript } from "contentlayer/generated";
+import { Markdown, type Transcript } from "contentlayer/generated";
+import { ContentTreeArray } from "./data";
 
 export interface ContentTree {
   [key: string]: ContentTree | Transcript[];
@@ -19,13 +20,19 @@ export type ContentData = {
   name: string;
   slug: string;
   count: number;
+};
+
+interface TagInfo {
+  name: string;
+  slug: string;
+  count: number;
 }
 
-type  ContentKeys = {
+type ContentKeys = {
   [key: string]: ContentData[];
 };
 
-export type DepreciatedCategories = "tags" | "speakers" | "categories"
+export type DepreciatedCategories = "tags" | "speakers" | "categories" | "sources" | "types";
 
 export type GroupedData = Record<string, TopicsData[] | SpeakerData[]>;
 
@@ -82,11 +89,7 @@ export const extractTranscripts = (allTranscripts: Transcript[]) => {
     const days_opened = Math.floor((CURRENT_DAY - transcriptDate) / ONE_DAY);
 
     acc.push({ ...transcript, days_opened });
-    acc.sort(
-      (a, b) =>
-        new Date(b.date as string).getTime() -
-        new Date(a.date as string).getTime()
-    );
+    acc.sort((a, b) => new Date(b.date as string).getTime() - new Date(a.date as string).getTime());
 
     if (acc.length > 3) acc.pop();
     return acc;
@@ -116,9 +119,7 @@ export function createSlug(name: string): string {
     .replace(/-+$/, ""); // Trim - from end of text
 }
 
-export function groupDataByAlphabet(
-  items: TopicsData[] | SpeakerData[]
-): Record<string, TopicsData[]> {
+export function groupDataByAlphabet(items: TopicsData[] | SpeakerData[]): Record<string, TopicsData[]> {
   return items
     .sort((a, b) => a.slug.localeCompare(b.slug))
     .reduce((acc, item) => {
@@ -126,11 +127,11 @@ export function groupDataByAlphabet(
 
       // Check if the first character is a digit
       if (!isNaN(Number(firstLetter))) {
-        if (!acc['#']) {
-          acc['#'] = [];
+        if (!acc["#"]) {
+          acc["#"] = [];
         }
         // Add the current item to the '#' group
-        acc['#'].push(item);
+        acc["#"].push(item);
       } else {
         if (!acc[firstLetter]) {
           acc[firstLetter] = [];
@@ -151,14 +152,9 @@ export function getDoubleDigits(count: number) {
   return `${count}`;
 }
 
-export const getAllCharactersProperty = (
-  arrayOfAlphabets: string[],
-  groupedTopics: GroupedData |  never[]
-) => {
+export const getAllCharactersProperty = (arrayOfAlphabets: string[], groupedTopics: GroupedData | never[]) => {
   const newData = arrayOfAlphabets.map((alp) => {
-    const ifFound = Object.entries(groupedTopics).find(
-      (topic) => topic[0] === alp
-    );
+    const ifFound = Object.entries(groupedTopics).find((topic) => topic[0] === alp);
     if (ifFound) {
       return {
         alp,
@@ -174,14 +170,96 @@ export const getAllCharactersProperty = (
   return newData;
 };
 
-
-export const sortKeysAlphabetically = (data:ContentKeys  ): ContentKeys => {
+export const sortKeysAlphabetically = (data: ContentKeys): ContentKeys => {
   const sortedKeys = Object.keys(data).sort((a, b) => a.localeCompare(b));
 
   const sortedData: ContentKeys = {};
   sortedKeys.forEach((key) => {
-      sortedData[key] = data[key];
+    sortedData[key] = data[key];
   });
 
   return sortedData;
-};
\ No newline at end of file
+};
+
+export const unsluggify = (slug: string) => slug.replace(/-/g, " ");
+
+export const formatDate = (dateString: string): string | null => {
+  if (!dateString) return null;
+
+  const date = new Date(dateString);
+  const options: Intl.DateTimeFormatOptions = {
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  };
+
+  return new Intl.DateTimeFormat("en-GB", options).format(date);
+};
+
+export function filterOutIndexes(arr: {} | ContentTreeArray[]) {
+  let filterIndex: ContentTreeArray[] | string[] = [];
+
+  if (Array.isArray(arr)) {
+    const list = arr.filter((item: ContentTreeArray) => {
+      const url = item.flattenedPath.split("/");
+
+      return !url[url.length - 1].startsWith("_index");
+    });
+    filterIndex = showOnlyEnglish(list) as ContentTreeArray[];
+  } else {
+    filterIndex = Object.keys(arr).filter((item) => !item.startsWith("_index"));
+  }
+
+  return filterIndex;
+}
+
+export const showOnlyEnglish = (args: ContentTreeArray[]) => {
+  const languageCodes = ["zh", "es", "pt"];
+  const languageRegex = new RegExp(`\\.(${languageCodes.join("|")})(\\.md)?$`);
+
+  const transcripts = args.filter((transcript) => {
+    return !languageRegex.test(transcript.flattenedPath);
+  });
+
+  return transcripts;
+};
+
+export const extractDirectoryData = (data: any[]) => {
+  if (!Array.isArray(data)) return { directoryData: null };
+
+  const directoryData = data.find((item) => {
+    const url = item.flattenedPath.split("/");
+    return url[url.length - 1] === "_index";
+  });
+
+  return { directoryData };
+};
+
+export const createText = (args: Markdown) => {
+  const text = args.raw.replace(/<http[^>]+>|https?:\/\/[^\s]+|##+/g, "").trim();
+  return text.length > 300 ? text.slice(0, 300) + "..." : text;
+};
+
+export const sortObjectAndArrays = (args: { [category: string]: TagInfo[] }) => {
+  return Object.fromEntries(
+    Object.entries(args)
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([key, value]) => [key, value.sort((a, b) => a.name.localeCompare(b.name))])
+  );
+};
+
+export const countItemsAndSort = (args: { [category: string]: TagInfo[] }) => {
+  const countObject: { [key: string]: number } = {};
+
+  Object.entries(args).map(([key, value]) => {
+    countObject[key] = value.reduce((acc, curr) => acc + curr.count, 0);
+  });
+
+  const sortObject: { [key: string]: number } = Object.keys(countObject)
+    .sort()
+    .reduce((acc, curr) => {
+      acc[curr] = countObject[curr];
+      return acc;
+    }, {} as typeof countObject);
+  return sortObject;
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index b6749f2..5a77a0a 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -12,8 +12,7 @@ const config: Config = {
     extend: {
       backgroundImage: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+        "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
       colors: {
         gray: {
@@ -31,6 +30,7 @@ const config: Config = {
           "custom-1200": "#CCCCCC",
           "custom-1300": "#E6E6E6",
           "custom-1400": "#ACACAC",
+          "custom-1500": "#DBDBDB",
         },
         blue: {
           "custom-100": "#2A58FE",
@@ -55,6 +55,9 @@ const config: Config = {
           "custom-200": "#202020",
           "custom-300": "#464646",
         },
+        "custom-white": {
+          "custom-100": "#F2F2F2",
+        },
       },
       fontFamily: {
         brawler: ["var(--brawler-font)"],