diff --git a/src/routes/api/earnings-call-transcripts/+server.ts b/src/routes/api/earnings-call-transcripts/+server.ts
index aa96fbbc..38c31d76 100644
--- a/src/routes/api/earnings-call-transcripts/+server.ts
+++ b/src/routes/api/earnings-call-transcripts/+server.ts
@@ -9,6 +9,7 @@ export const POST: RequestHandler = async ({ request, locals }) => {
     quarter: data?.quarter,
     year: data?.year,
   };
+
   const response = await fetch(apiURL + "/earnings-call-transcripts", {
     method: "POST",
     headers: {
diff --git a/src/routes/stocks/[tickerID]/insider/transcripts/+page.server.ts b/src/routes/stocks/[tickerID]/insider/transcripts/+page.server.ts
deleted file mode 100644
index 1925869d..00000000
--- a/src/routes/stocks/[tickerID]/insider/transcripts/+page.server.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-const now = new Date();
-const year = now?.getFullYear()?.toString();
-const quarter = (Math.floor(now?.getMonth() / 3) + 1)?.toString();
-
-export const load = async ({ locals, params }) => {
-  const getTranscripts = async () => {
-    let output;
-
-    const { apiKey, apiURL } = locals;
-
-    const postData = {
-      ticker: params.tickerID,
-      quarter: quarter,
-      year: year,
-    };
-
-    // make the POST request to the endpoint
-    const response = await fetch(apiURL + "/earnings-call-transcripts", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        "X-API-KEY": apiKey,
-      },
-      body: JSON.stringify(postData),
-    });
-
-    output = await response.json();
-
-    return output;
-  };
-
-  // Make sure to return a promise
-  return {
-    getTranscripts: await getTranscripts(),
-    quarter,
-    year,
-  };
-};
diff --git a/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte b/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
index 28b0542b..c5c7ec54 100644
--- a/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
@@ -1,455 +1,349 @@
-<script lang='ts'>
-  import { stockTicker, getCache, setCache, displayCompanyName, numberOfUnreadNotification } from '$lib/store';
-    
-  export let data;
-  
-  let chats = data?.getTranscripts?.chat ?? [];
-  let date = data?.getTranscripts?.date;
-    
-  let displayQuarter = data?.quarter;
-  let displayYear = data?.year;
-  let quarter = displayQuarter;
-  let year = displayYear;
-  let isLoaded = true;
-  
+<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 { 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'
-      });
+    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;
-  
-    };
-  
+    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),
+      });
 
-  </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-[#09090B] overflow-hidden text-white h-full 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-2xl sm:text-3xl text-gray-200 font-bold mb-4">
-                              Transcripts
-                          </h1>
+      output = await response.json();
+      // Cache the data for this specific tickerID with a specific name 'getTranscripts'
+      setCache(
+        `${$stockTicker}-Q-${quarter}-${year}`,
+        output,
+        "getTranscripts",
+      );
+    }
 
-                          
-                            <div class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]">
-                              <svg class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
-                              Discover the earnings call highlights and investor Q&A with {$displayCompanyName}!                              
-                            </div>
+    chats = output?.chat ?? [];
+    date = output?.date ?? "-";
+    displayQuarter = quarter;
+    displayYear = year;
+    isLoaded = true;
+  };
 
-  
-                            <div class="flex flex-row items-center mb-5 pt-3 justify-center sm:justify-end">
-                              <label for="quarterModal" class="ml-1 sm:ml-3 text-sm cursor-pointer bg-purple-600 sm:hover:bg-purple-700 duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
-                                  Quarter: Q{quarter}
-                              </label>
-                              <label for="yearModal" class="ml-3 text-sm cursor-pointer bg-purple-600 sm:hover:bg-purple-700 duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
-                                  Year: {year}
-                              </label>
-                              <label on:click={() => getTranscripts()} class="ml-3 text-sm cursor-pointer bg-purple-600 sm:hover:bg-purple-700 duration-100 transition ease-in-out px-4 py-1.5 rounded-lg shadow-md">
-                                  Run
-                              </label>
-                            </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 bg-[#0DDE00] 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="#27272A" 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 bg-[#27272A] 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 bg-[#27272A] 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}
-  
+  onMount(async () => {
+    await getTranscripts();
+  });
+</script>
 
-                          <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-slate-800 rounded-full">
-                              Back to top
-                          </label>
-          
-                          {:else} 
-                          <h3 class="pl-4 pr-4 pt-5 flex justify-center items-center text-md sm:text-lg text-center text-slate-200">
-                            No transcript available for {$displayCompanyName} for the Q{displayQuarter} of {displayYear} 🧐.
-                          </h3>
-                          {/if}
-  
-  
-  
-  
-                      {:else}
-                      <div class="flex justify-center items-center h-80">
-                        <div class="relative">
-                        <label class="bg-[#09090B] rounded-xl 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>
-  
-  
-  
-  
-  
-  
-  
-    <!--Start Quarter-->
-    <input type="checkbox" id="quarterModal" class="modal-toggle" />
-        
-    <dialog id="quarterModal" class="modal modal-bottom sm:modal-middle ">
-    
-    
-      <label id="quarterModal" for="quarterModal"  class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"></label>
-      
-      
-      <div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800">
-    
-    
-    
-      <label for="quarterModal" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white">
-        ✕
-      </label>
-    
-        <div class="text-white">
-          
-          <h3 class="font-medium text-lg sm:text-xl mb-10">
-            Quarter
-          </h3>
-            
-    
-          <div class="flex flex-col items-center w-full max-w-3xl bg-[#09090B]">
-    
-    
-            <label for="quarterModal" on:click={() => quarter='1'} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
-    
-                <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {quarter === '1' ? 'ring-2 ring-[#04E000]' : ''}">
-                  
-                  <span class="ml-1 text-white font-medium mr-auto">
-                    Q1
-                  </span>
-    
-                  <div class="rounded-full w-8 h-8 relative border border-[#737373]">
-                    {#if quarter === '1'}
-                      <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
-                    {/if}
-                  </div>
-    
-                </div>
-               
-            </label>
-    
-    
-            <label for="quarterModal" on:click={() => quarter='2'} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
-    
-              <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {quarter === '2' ? 'ring-2 ring-[#04E000]' : ''}">
-                
-                <span class="ml-1 text-white font-medium mr-auto">
-                  Q2
-                </span>
-  
-                <div class="rounded-full w-8 h-8 relative border border-[#737373]">
-                  {#if quarter === '2'}
-                    <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
-                  {/if}
-                </div>
-  
-              </div>
-             
-          </label>
-  
-          <label for="quarterModal" on:click={() => quarter='3'} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
-    
-              <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {quarter === '3' ? 'ring-2 ring-[#04E000]' : ''}">
-                
-                <span class="ml-1 text-white font-medium mr-auto">
-                  Q3
-                </span>
-  
-                <div class="rounded-full w-8 h-8 relative border border-[#737373]">
-                  {#if quarter === '3'}
-                    <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
-                  {/if}
-                </div>
-  
-              </div>
-             
-          </label>
-  
-          <label for="quarterModal" on:click={() => quarter='4'} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
-    
-              <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {quarter === '4' ? 'ring-2 ring-[#04E000]' : ''}">
-                
-                <span class="ml-1 text-white font-medium mr-auto">
-                  Q4
-                </span>
-  
-                <div class="rounded-full w-8 h-8 relative border border-[#737373]">
-                  {#if quarter === '4'}
-                    <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
-                  {/if}
-                </div>
-  
-              </div>
-             
-          </label>
-    
-    
-        
-  
-    
-    
+<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-[#09090B] overflow-hidden text-white h-full 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-2xl sm:text-3xl text-gray-200 font-bold mb-4">
+            Transcripts
+          </h1>
+
+          <div
+            class="text-white p-3 sm:p-5 mb-10 rounded-lg sm:flex sm:flex-row sm:items-center border border-slate-800 text-sm sm:text-[1rem]"
+          >
+            <svg
+              class="w-6 h-6 flex-shrink-0 inline-block sm:mr-2"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 256 256"
+              ><path
+                fill="#a474f6"
+                d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"
+              /></svg
+            >
+            Discover the earnings call highlights and investor Q&A with {$displayCompanyName}!
+          </div>
+
+          <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-[#09090B] sm:hover:bg-[#27272A] ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg 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-[#27272A]"
+                      >
+                        {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-[#09090B] sm:hover:bg-[#27272A] ease-out  flex flex-row justify-between items-center px-3 py-2 text-white rounded-lg 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-[#27272A]"
+                      >
+                        Q{index}
+                      </DropdownMenu.Item>
+                    {/each}
+                  </DropdownMenu.Group>
+                </DropdownMenu.Content>
+              </DropdownMenu.Root>
+            </div>
           </div>
-           
         </div>
-    
-    
-            
-          </div>
-      </dialog>
-    <!--End Quarter-->
-  
-  
-  
-  
-  
-    <!--Start Quarter-->
-    <input type="checkbox" id="yearModal" class="modal-toggle" />
-        
-    <dialog id="yearModal" class="modal modal-bottom sm:modal-middle ">
-    
-    
-      <label id="yearModal" for="yearModal"  class="cursor-pointer modal-backdrop bg-[#09090B] bg-opacity-[0.5]"></label>
-      
-      
-      <div class="modal-box w-full bg-[#09090B] sm:border sm:border-slate-800">
-    
-    
-    
-      <label for="yearModal" class="cursor-pointer absolute right-5 top-2 bg-[#09090B] text-[1.8rem] text-white">
-        ✕
-      </label>
-    
-        <div class="text-white">
-          
-          <h3 class="font-medium text-lg sm:text-xl mb-10">
-            Year
-          </h3>
-            
-    
-          <div class="flex flex-col items-center w-full max-w-3xl bg-[#09090B]">
-    
-    
-            <label for="yearModal" on:click={() => year='2024'} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
-    
-                <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {year === '1' ? 'ring-2 ring-[#04E000]' : ''}">
-                  
-                  <span class="ml-1 text-white font-medium mr-auto">
-                    2024
-                  </span>
-    
-                  <div class="rounded-full w-8 h-8 relative border border-[#737373]">
-                    {#if year === '2024'}
-                      <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
-                    {/if}
+
+        {#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 bg-[#0DDE00] 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="#27272A"
+                          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 bg-[#27272A] 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 bg-[#27272A] 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-slate-800 rounded-full"
+            >
+              Back to top
             </label>
-    
-    
-            <label for="yearModal" on:click={() => year='2023'} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
-    
-              <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {year === '2' ? 'ring-2 ring-[#04E000]' : ''}">
-                
-                <span class="ml-1 text-white font-medium mr-auto">
-                  2023
-                </span>
-  
-                <div class="rounded-full w-8 h-8 relative border border-[#737373]">
-                  {#if year === '2023'}
-                    <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
-                  {/if}
-                </div>
-  
-              </div>
-             
-          </label>
-  
-          <label for="yearModal" on:click={() => year='2022'} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
-    
-              <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {year === '3' ? 'ring-2 ring-[#04E000]' : ''}">
-                
-                <span class="ml-1 text-white font-medium mr-auto">
-                  2022
-                </span>
-  
-                <div class="rounded-full w-8 h-8 relative border border-[#737373]">
-                  {#if year === '2022'}
-                    <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
-                  {/if}
-                </div>
-  
-              </div>
-             
-          </label>
-  
-          <label for="yearModal" on:click={() => year='2021'} class="cursor-pointer w-full flex flex-row justify-start items-center mb-5">
-    
-              <div class="flex flex-row items-center w-full bg-[#303030] p-3 rounded-lg {year === '4' ? 'ring-2 ring-[#04E000]' : ''}">
-                
-                <span class="ml-1 text-white font-medium mr-auto">
-                  2021
-                </span>
-  
-                <div class="rounded-full w-8 h-8 relative border border-[#737373]">
-                  {#if year === '2021'}
-                    <svg class="w-full h-full rounded-full" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#09090B000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --> <title>ic_fluent_checkmark_circle_48_filled</title> <desc>Created with Sketch.</desc> <g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="ic_fluent_checkmark_circle_48_filled" fill="#04E000" fill-rule="nonzero"> <path d="M24,4 C35.045695,4 44,12.954305 44,24 C44,35.045695 35.045695,44 24,44 C12.954305,44 4,35.045695 4,24 C4,12.954305 12.954305,4 24,4 Z M32.6338835,17.6161165 C32.1782718,17.1605048 31.4584514,17.1301307 30.9676119,17.5249942 L30.8661165,17.6161165 L20.75,27.732233 L17.1338835,24.1161165 C16.6457281,23.6279612 15.8542719,23.6279612 15.3661165,24.1161165 C14.9105048,24.5717282 14.8801307,25.2915486 15.2749942,25.7823881 L15.3661165,25.8838835 L19.8661165,30.3838835 C20.3217282,30.8394952 21.0415486,30.8698693 21.5323881,30.4750058 L21.6338835,30.3838835 L32.6338835,19.3838835 C33.1220388,18.8957281 33.1220388,18.1042719 32.6338835,17.6161165 Z" id="🎨-Color"> </path> </g> </g> </g></svg>
-                  {/if}
-                </div>
-  
-              </div>
-             
-          </label>
-    
-    
-        
-  
-    
-    
+          {:else}
+            <h3
+              class="pl-4 pr-4 pt-5 flex justify-center items-center text-md sm:text-lg text-center text-slate-200"
+            >
+              No transcript available for {$displayCompanyName} for the Q{displayQuarter}
+              of {displayYear} 🧐.
+            </h3>
+          {/if}
+        {:else}
+          <div class="flex justify-center items-center h-80">
+            <div class="relative">
+              <label
+                class="bg-[#09090B] rounded-xl 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>
-           
-        </div>
-    
-    
-            
-          </div>
-      </dialog>
-    <!--End Quarter-->
\ No newline at end of file
+        {/if}
+      </div>
+    </div>
+  </div>
+</section>
diff --git a/src/routes/stocks/[tickerID]/statistics/+page.svelte b/src/routes/stocks/[tickerID]/statistics/+page.svelte
index 2e21e640..19530337 100644
--- a/src/routes/stocks/[tickerID]/statistics/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/+page.svelte
@@ -134,7 +134,7 @@ updateYearRange()
                 Total Valuation
               </h2>
               <p
-                class="mb-4 px-0.5 text-base leading-relaxed text-white xs:text-[1.05rem] lg:leading-normal"
+                class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
                 Tesla has a market cap or net worth of $832.14 billion. The
                 enterprise value is $812.05 billion.
@@ -169,7 +169,7 @@ updateYearRange()
                 Important Dates
               </h2>
               <p
-                class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
+                class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
                 The last earnings date was Wednesday, October 23, 2024, after
                 market close.
@@ -201,7 +201,7 @@ updateYearRange()
                 Share Statistics
               </h2>
               <p
-                class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
+                class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
                 Tesla has 3.19 billion shares outstanding. The number of shares
                 has increased by 0.31% in one year.
@@ -265,7 +265,7 @@ updateYearRange()
                 Valuation Ratios
               </h2>
               <p
-                class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
+                class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
                 The trailing PE ratio is 71.41 and the forward PE ratio is
                 86.99. Tesla's PEG ratio is 5.94.
@@ -344,7 +344,7 @@ updateYearRange()
                 Enterprise Valuation
               </h2>
               <p
-                class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
+                class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
                 The stock's EV/EBITDA ratio is 61.31, with an EV/FCF ratio of
                 224.95.
@@ -400,7 +400,7 @@ updateYearRange()
                 Financial Position
               </h2>
               <p
-                class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
+                class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
                 The company has a current ratio of 1.84, with a Debt / Equity
                 ratio of 0.18.
@@ -464,7 +464,7 @@ updateYearRange()
                 Financial Efficiency
               </h2>
               <p
-                class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
+                class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
                 Return on equity (ROE) is 20.39% and return on invested capital
                 (ROIC) is 6.96%.
@@ -573,7 +573,7 @@ updateYearRange()
                 Stock Price Statistics
               </h2>
               <p
-                class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
+                class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
                 The stock price has increased by +22.82% in the last 52 weeks.
                 The beta is 2.30, so Tesla's price volatility has been higher
@@ -638,7 +638,7 @@ updateYearRange()
                 Short Selling Information
               </h2>
               <p
-                class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
+                class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
                 The latest short interest is 74.33 million, so 2.33% of the
                 outstanding shares have been sold short.
@@ -694,7 +694,7 @@ updateYearRange()
                 Income Statement
               </h2>
               <p
-                class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
+                class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
                 In the last 12 months, Tesla had revenue of $97.15 billion and
                 earned $12.74 billion in profits. Earnings per share was $3.65.
@@ -783,7 +783,7 @@ updateYearRange()
                 Balance Sheet
               </h2>
               <p
-                class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
+                class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
                 The company has $33.65 billion in cash and $12.78 billion in
                 debt, giving a net cash position of $20.87 billion or $6.53 per
@@ -862,7 +862,7 @@ updateYearRange()
                 Cash Flow
               </h2>
               <p
-                class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
+                class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
                 In the last 12 months, operating cash flow was $14.48 billion
                 and capital expenditures -$10.87 billion, giving a free cash
@@ -915,7 +915,7 @@ updateYearRange()
             <div>
               <h2 class="mb-2 px-0.5 text-xl font-bold text-white">Margins</h2>
               <p
-                class="mb-4 px-0.5 text-base leading-relaxed text-white dark:text-dark-200 xs:text-[1.05rem] lg:leading-normal"
+                class="mb-4 px-0.5 text-white xs:text-[1.05rem] lg:leading-normal"
               >
                 Gross margin is 18.23%, with operating and profit margins of
                 8.38% and 13.07%.