diff --git a/src/routes/stocks/[tickerID]/insider/+layout.svelte b/src/routes/stocks/[tickerID]/insider/+layout.svelte
index 06c222d2..18295eab 100644
--- a/src/routes/stocks/[tickerID]/insider/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+layout.svelte
@@ -42,6 +42,7 @@
     const sectionMap = {
       institute: "institute",
       "congress-trading": "congress-trading",
+      transcripts: "transcripts",
     };
 
     const foundSection = parts?.find((part) =>
@@ -58,6 +59,7 @@
     const subSectionMap = {
       "congress-trading": "/insider/congress-trading",
       institute: "/insider/institute",
+      transcripts: "/insider/transcripts",
     };
 
     if (state !== "insider" && subSectionMap[state]) {
@@ -112,6 +114,16 @@
               >
                 Congress Trading
               </a>
+              <a
+                href={`/stocks/${$stockTicker}/insider/transcripts`}
+                on:click={() => changeSubSection("transcripts")}
+                class="p-2 px-5 cursor-pointer {displaySubSection ===
+                'transcripts'
+                  ? 'text-white bg-secondary sm:hover:bg-opacity-[0.95]'
+                  : 'text-gray-400 sm:hover:text-white sm:hover:bg-secondary sm:hover:bg-opacity-[0.95]'}"
+              >
+                Transcripts
+              </a>
             </ul>
           </nav>
 
diff --git a/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte b/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
new file mode 100644
index 00000000..438f4901
--- /dev/null
+++ b/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
@@ -0,0 +1,332 @@
+<script lang="ts">
+  import {
+    stockTicker,
+    getCache,
+    setCache,
+    displayCompanyName,
+    numberOfUnreadNotification,
+  } from "$lib/store";
+  import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.js";
+  import { Button } from "$lib/components/shadcn/button/index.js";
+  import Infobox from "$lib/components/Infobox.svelte";
+  import { onMount } from "svelte";
+
+  let chats = [];
+  let date;
+
+  const now = new Date();
+  let year = now.getFullYear();
+  let quarter = Math.floor(now.getMonth() / 3) + 1;
+  let yearRange = ["2024", "2023", "2022", "2021"];
+  let displayQuarter = quarter;
+  let displayYear = year;
+  let isLoaded = false;
+
+  function backToTop() {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  }
+
+  const getTranscripts = async () => {
+    isLoaded = false;
+    chats = [];
+    let output;
+    // Get cached data for the specific tickerID
+    const cachedData = getCache(
+      `${$stockTicker}-Q-${quarter}-${year}`,
+      "getTranscripts",
+    );
+    if (cachedData) {
+      output = cachedData;
+    } else {
+      const postData = {
+        ticker: $stockTicker,
+        quarter: quarter,
+        year: year,
+      };
+      // make the POST request to the endpoint
+      const response = await fetch("/api/earnings-call-transcripts", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(postData),
+      });
+
+      output = await response.json();
+      // Cache the data for this specific tickerID with a specific name 'getTranscripts'
+      setCache(
+        `${$stockTicker}-Q-${quarter}-${year}`,
+        output,
+        "getTranscripts",
+      );
+    }
+
+    chats = output?.chat ?? [];
+    date = output?.date ?? "-";
+    displayQuarter = quarter;
+    displayYear = year;
+    isLoaded = true;
+  };
+
+  onMount(async () => {
+    await getTranscripts();
+  });
+</script>
+
+<svelte:head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>
+    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""}
+    {$displayCompanyName} ({$stockTicker}) · Q{quarter}
+    {year} · Earnings Call Transcript · Stocknear
+  </title>
+  <meta
+    name="description"
+    content={`Get the latest Earnings Call Transcript of ${$displayCompanyName} (${$stockTicker}) for different years and quarters.`}
+  />
+
+  <!-- Other meta tags -->
+  <meta
+    property="og:title"
+    content={`${$displayCompanyName} (${$stockTicker}) · Q${quarter} ${year} · Earnings Call Transcript · Stocknear`}
+  />
+  <meta
+    property="og:description"
+    content={`Get the latest Earnings Call Transcript of ${$displayCompanyName} (${$stockTicker}) for different years and quarters.`}
+  />
+  <meta property="og:type" content="website" />
+  <!-- Add more Open Graph meta tags as needed -->
+
+  <!-- Twitter specific meta tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta
+    name="twitter:title"
+    content={`${$displayCompanyName} (${$stockTicker}) · Q${quarter} ${year} · Earnings Call Transcript · Stocknear`}
+  />
+  <meta
+    name="twitter:description"
+    content={`Get the latest Earnings Call Transcript of ${$displayCompanyName} (${$stockTicker}) for different years and quarters.`}
+  />
+  <!-- Add more Twitter meta tags as needed -->
+</svelte:head>
+
+<section
+  class="w-full bg-default overflow-hidden text-white min-h-screen mb-40 sm:mb-0"
+>
+  <div class="h-full overflow-hidden">
+    <div class="relative flex justify-center items-center overflow-hidden">
+      <div class="sm:p-7 w-full mt-2 sm:mt-0">
+        <div class="mb-6">
+          <h1 class="text-xl sm:text-2xl text-white font-bold mb-4">
+            Transcripts
+          </h1>
+
+          <div class="flex w-fit sm:w-[50%] md:block md:w-auto ml-auto">
+            <div class="relative inline-block text-left grow">
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger asChild let:builder>
+                  <Button
+                    builders={[builder]}
+                    class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                  >
+                    <span class="truncate text-white">Year: {year}</span>
+                    <svg
+                      class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      style="max-width:40px"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                        clip-rule="evenodd"
+                      ></path>
+                    </svg>
+                  </Button>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content
+                  class="w-56 h-fit max-h-72 overflow-y-auto scroller"
+                >
+                  <DropdownMenu.Label class="text-gray-400">
+                    Select Year
+                  </DropdownMenu.Label>
+                  <DropdownMenu.Separator />
+                  <DropdownMenu.Group>
+                    {#each yearRange as index}
+                      <DropdownMenu.Item
+                        on:click={() => {
+                          year = index;
+                          getTranscripts();
+                        }}
+                        class="cursor-pointer hover:bg-primary"
+                      >
+                        {index}
+                      </DropdownMenu.Item>
+                    {/each}
+                  </DropdownMenu.Group>
+                </DropdownMenu.Content>
+              </DropdownMenu.Root>
+            </div>
+            <div class="relative inline-block text-left grow ml-3">
+              <DropdownMenu.Root>
+                <DropdownMenu.Trigger asChild let:builder>
+                  <Button
+                    builders={[builder]}
+                    class="w-full border-gray-600 border bg-default sm:hover:bg-primary ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-md truncate"
+                  >
+                    <span class="truncate text-white">Quarter: Q{quarter}</span>
+                    <svg
+                      class="-mr-1 ml-1 h-5 w-5 xs:ml-2 inline-block"
+                      viewBox="0 0 20 20"
+                      fill="currentColor"
+                      style="max-width:40px"
+                      aria-hidden="true"
+                    >
+                      <path
+                        fill-rule="evenodd"
+                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                        clip-rule="evenodd"
+                      ></path>
+                    </svg>
+                  </Button>
+                </DropdownMenu.Trigger>
+                <DropdownMenu.Content
+                  class="w-56 h-fit max-h-72 overflow-y-auto scroller"
+                >
+                  <DropdownMenu.Label class="text-gray-400">
+                    Select Quarter
+                  </DropdownMenu.Label>
+                  <DropdownMenu.Separator />
+                  <DropdownMenu.Group>
+                    {#each [1, 2, 3, 4] as index}
+                      <DropdownMenu.Item
+                        on:click={() => {
+                          quarter = index;
+                          getTranscripts();
+                        }}
+                        class="cursor-pointer hover:bg-primary"
+                      >
+                        Q{index}
+                      </DropdownMenu.Item>
+                    {/each}
+                  </DropdownMenu.Group>
+                </DropdownMenu.Content>
+              </DropdownMenu.Root>
+            </div>
+          </div>
+        </div>
+
+        {#if isLoaded}
+          {#if chats?.length !== 0}
+            <div class="flex flex-col sm:flex-row items-center pt-5 pb-5">
+              <span class="text-white text-md">
+                Q{displayQuarter}
+                {displayYear} · Earnings Call Transcript
+              </span>
+              <span
+                class="text-white text-opacity-80 text-md mt-2 sm:mt-0 sm:ml-auto"
+              >
+                {new Date(date).toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                  year: "numeric",
+                })}
+              </span>
+            </div>
+
+            {#each chats as item}
+              {#if item?.name === "Operator"}
+                <div class="flex flex-col items-start gap-2.5 mt-5">
+                  <div class="flex flex-row items-center ml-auto mr-2">
+                    <div
+                      class="flex items-center space-x-2 rtl:space-x-reverse"
+                    >
+                      <span class="text-sm text-base">
+                        {item?.name}
+                      </span>
+                    </div>
+                    <div
+                      class="ml-2 avatar rounded-full w-8 h-8 sm:w-10 sm:h-10 relative border border-gray-600 bg-default bg-opacity-[0.6] flex items-center justify-center"
+                    >
+                      <svg
+                        class="w-6 h-6 sm:w-7 sm:h-7"
+                        xmlns="http://www.w3.org/2000/svg"
+                        viewBox="0 0 24 24"
+                        ><path
+                          fill="#fff"
+                          d="M12 14q-1.25 0-2.125-.875T9 11V5q0-1.25.875-2.125T12 2q1.25 0 2.125.875T15 5v6q0 1.25-.875 2.125T12 14m-1 7v-3.075q-2.6-.35-4.3-2.325T5 11h2q0 2.075 1.463 3.538T12 16q2.075 0 3.538-1.463T17 11h2q0 2.625-1.7 4.6T13 17.925V21z"
+                        /></svg
+                      >
+                    </div>
+                  </div>
+                  <div
+                    class="flex flex-col w-full leading-1.5 p-4 border border-gray-600 bg-primary rounded-l-xl rounded-tr-xl"
+                  >
+                    <p class="text-sm font-normal py-2.5 text-gray-200">
+                      {@html item?.description}
+                    </p>
+                  </div>
+                </div>
+              {:else}
+                <div class="flex flex-col items-start gap-2.5 mt-8">
+                  <div class="flex flex-row items-center">
+                    <div
+                      class="avatar rounded-full w-8 h-8 sm:w-10 sm:h-10 relative bg-red-600 bg-opacity-[0.6] flex items-center justify-center text-white text-sm sm:text-base"
+                    >
+                      <span
+                        class="absolute inset-0 flex items-center justify-center"
+                      >
+                        {item?.name?.slice(0, 1)}
+                      </span>
+                    </div>
+                    <div
+                      class="ml-2 flex items-center space-x-2 rtl:space-x-reverse"
+                    >
+                      <span class="text-sm text-base">
+                        {item?.name}
+                      </span>
+                    </div>
+                  </div>
+                  <div
+                    class="flex flex-col w-full leading-1.5 p-4 border border-gray-600 bg-secondary rounded-r-xl rounded-tl-xl"
+                  >
+                    <p class="text-sm font-normal py-2.5 text-gray-200">
+                      {@html item?.description}
+                    </p>
+                  </div>
+                </div>
+              {/if}
+            {/each}
+
+            <label
+              on:click={backToTop}
+              class="w-32 py-1.5 mt-10 hover:bg-white hover:bg-opacity-[0.05] cursor-pointer m-auto flex justify-center items-center border border-gray-600 rounded-full"
+            >
+              Back to top
+            </label>
+          {:else}
+             <Infobox
+                text={`No transcript available for ${$displayCompanyName} for the Q${displayQuarter} of ${displayYear}`}
+              />
+          {/if}
+        {:else}
+          <div class="flex justify-center items-center h-80">
+            <div class="relative">
+              <label
+                class="bg-secondary rounded-md h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"
+              >
+                <span class="loading loading-spinner loading-md text-gray-400"
+                ></span>
+              </label>
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
+</section>