From 80e5c0bc4b95786b9984d73ab1d8e3d4d961ae0d Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sun, 15 Dec 2024 19:02:41 +0100
Subject: [PATCH] update news component && ui

---
 src/lib/components/AnalystEstimate.svelte     |   2 +-
 src/lib/components/BorrowedShare.svelte       |   2 +-
 src/lib/components/ClinicalTrial.svelte       |   2 +-
 src/lib/components/CorporateLobbying.svelte   |   2 +-
 src/lib/components/Correlation.svelte         |   2 +-
 src/lib/components/DCF.svelte                 |   2 +-
 src/lib/components/DarkPool.svelte            |   2 +-
 src/lib/components/EarningsSurprise.svelte    |   2 +-
 src/lib/components/Enterprise.svelte          | 386 ++++++------------
 src/lib/components/ExecutiveCard.svelte       |   2 +-
 src/lib/components/FOMCImpact.svelte          |   2 +-
 src/lib/components/FailToDeliver.svelte       |   2 +-
 src/lib/components/FundamentalAnalysis.svelte |   2 +-
 src/lib/components/GovernmentContract.svelte  |   2 +-
 src/lib/components/ImpliedVolatility.svelte   |   2 +-
 src/lib/components/Lazy.svelte                |  48 +--
 src/lib/components/LoginPopup.svelte          |   2 +-
 src/lib/components/MarketMaker.svelte         |   2 +-
 src/lib/components/News.svelte                | 311 +++++++++-----
 src/lib/components/NextEarnings.svelte        |   2 +-
 src/lib/components/OptionsData.svelte         |   2 +-
 src/lib/components/OptionsNetFlow.svelte      |   2 +-
 src/lib/components/PriceAnalysis.svelte       |   2 +-
 src/lib/components/RetailVolume.svelte        |   2 +-
 src/lib/components/RevenueSegmentation.svelte |   2 +-
 src/lib/components/SECFilingsCard.svelte      |   2 +-
 src/lib/components/ShareStatistics.svelte     |   2 +-
 src/lib/components/Swap.svelte                |   2 +-
 src/lib/components/TARating.svelte            |   2 +-
 src/lib/components/TrendAnalysis.svelte       |   4 +-
 src/lib/components/WIIM.svelte                |   2 +-
 src/lib/components/WatchListCard.svelte       |   2 +-
 src/routes/analysts/+page.svelte              |   2 +-
 src/routes/crypto/[tickerID]/+page.svelte     |   2 +-
 .../[tickerID]/congress-trading/+page.svelte  |   2 +-
 src/routes/economic-indicator/+page.svelte    |   2 +-
 src/routes/etf/[tickerID]/+page.svelte        |   2 +-
 .../etf/[tickerID]/dividends/+page.svelte     |   2 +-
 .../etf/[tickerID]/insider/+page.svelte       |   2 +-
 src/routes/heatmaps/+page.svelte              |   2 +-
 src/routes/insider-tracker/+page.svelte       |   2 +-
 src/routes/ipos/+page.svelte                  |   2 +-
 src/routes/ipos/[slug]/+page.svelte           |   2 +-
 src/routes/login/+page.svelte                 |   2 +-
 src/routes/market-news/general/+page.svelte   |   2 +-
 src/routes/options-flow/+page.svelte          |   2 +-
 src/routes/politicians/+page.svelte           |   2 +-
 src/routes/reddit-tracker/+page.svelte        |   2 +-
 src/routes/register/+page.svelte              |   2 +-
 src/routes/stocks/[tickerID]/+page.svelte     |   2 +-
 .../stocks/[tickerID]/dividends/+page.svelte  |   2 +-
 .../stocks/[tickerID]/financials/+page.svelte |   2 +-
 .../stocks/[tickerID]/insider/+page.svelte    |   2 +-
 .../insider/congress-trading/+page.svelte     |   2 +-
 .../insider/transcripts/+page.svelte          |   2 +-
 .../[tickerID]/metrics/[slug]/+page.svelte    |   2 +-
 .../statistics/market-cap/+page.svelte        |   2 +-
 src/routes/watchlist/options/+page.svelte     |   2 +-
 src/routes/watchlist/stocks/+page.svelte      |   2 +-
 59 files changed, 428 insertions(+), 431 deletions(-)

diff --git a/src/lib/components/AnalystEstimate.svelte b/src/lib/components/AnalystEstimate.svelte
index 8c7407b1..82e428b4 100644
--- a/src/lib/components/AnalystEstimate.svelte
+++ b/src/lib/components/AnalystEstimate.svelte
@@ -1040,7 +1040,7 @@
         <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"
+              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>
diff --git a/src/lib/components/BorrowedShare.svelte b/src/lib/components/BorrowedShare.svelte
index ec393447..83c2c092 100644
--- a/src/lib/components/BorrowedShare.svelte
+++ b/src/lib/components/BorrowedShare.svelte
@@ -118,7 +118,7 @@
       <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"
+            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>
diff --git a/src/lib/components/ClinicalTrial.svelte b/src/lib/components/ClinicalTrial.svelte
index d6801be8..40a87cca 100644
--- a/src/lib/components/ClinicalTrial.svelte
+++ b/src/lib/components/ClinicalTrial.svelte
@@ -87,7 +87,7 @@
         <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"
+              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>
diff --git a/src/lib/components/CorporateLobbying.svelte b/src/lib/components/CorporateLobbying.svelte
index dff2de87..cb9f7055 100644
--- a/src/lib/components/CorporateLobbying.svelte
+++ b/src/lib/components/CorporateLobbying.svelte
@@ -61,7 +61,7 @@
       <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"
+            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>
diff --git a/src/lib/components/Correlation.svelte b/src/lib/components/Correlation.svelte
index 51fdf37a..7ea22788 100644
--- a/src/lib/components/Correlation.svelte
+++ b/src/lib/components/Correlation.svelte
@@ -178,7 +178,7 @@
         <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"
+              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>
diff --git a/src/lib/components/DCF.svelte b/src/lib/components/DCF.svelte
index a629e74f..cc534c0f 100644
--- a/src/lib/components/DCF.svelte
+++ b/src/lib/components/DCF.svelte
@@ -362,7 +362,7 @@
         <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"
+              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>
diff --git a/src/lib/components/DarkPool.svelte b/src/lib/components/DarkPool.svelte
index 96a4097c..2fe73084 100644
--- a/src/lib/components/DarkPool.svelte
+++ b/src/lib/components/DarkPool.svelte
@@ -129,7 +129,7 @@
       <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"
+            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>
diff --git a/src/lib/components/EarningsSurprise.svelte b/src/lib/components/EarningsSurprise.svelte
index adf7de57..769d2ddc 100644
--- a/src/lib/components/EarningsSurprise.svelte
+++ b/src/lib/components/EarningsSurprise.svelte
@@ -53,7 +53,7 @@
           <!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
           <div class="flex flex-row items-center">
             <h3
-              class="mr-1 flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
+              class="mr-1 flex flex-row items-center text-white text-2xl font-bold"
             >
               Earnings Surprise
             </h3>
diff --git a/src/lib/components/Enterprise.svelte b/src/lib/components/Enterprise.svelte
index 541f2b20..a8a8c8bb 100644
--- a/src/lib/components/Enterprise.svelte
+++ b/src/lib/components/Enterprise.svelte
@@ -1,269 +1,145 @@
+<script lang 'ts'></script>
 
-<script lang ='ts'>
-    import { enterpriseComponent, displayCompanyName, stockTicker, screenWidth, getCache, setCache} from '$lib/store';
-    import InfoModal from '$lib/components/InfoModal.svelte';
-    import { Chart } from 'svelte-echarts';
-    import { init, use } from 'echarts/core'
-    import { BarChart } from 'echarts/charts'
-    import { GridComponent, TooltipComponent } from 'echarts/components'
-    import { CanvasRenderer } from 'echarts/renderers'
+<section class="overflow-hidden text-white h-full pb-8 sm:pb-2">
+  <main class="overflow-hidden">
+    <div class="flex flex-row items-center">
+      <label
+        for="enterpriseValueInfo"
+        class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold"
+      >
+        Enterprise Value
+      </label>
+      <InfoModal
+        title={"Enterprise Value"}
+        content={"Enterprise value (EV) is a comprehensive measure of a company's total value in the stock market, considering market capitalization, debt, cash, and minority interests. It helps in M&A analysis, comparative analysis, valuation metrics, and capital structure assessment, aiding investors, analysts, and companies in financial decision-making."}
+        id={"enterpriseValueInfo"}
+      />
+    </div>
 
-    export let data;
-
-    // now with tree-shaking
-    use([BarChart, GridComponent, TooltipComponent, CanvasRenderer])
-    
-    let isLoaded = false;
-
-    let rawData = [];
-    let optionsData;
-
-
-
-function getPlotOptions() {
-    let dates = [];
-    let enterpriseValue = [];
-    let marketCapitalization = [];
-    let addTotalDebt = [];
-    let cashEquivalent = [];
-    // Iterate over the data and extract required information
-    rawData?.forEach(item => {
-    // Extract year and convert it to fiscal year format
-    const fiscalYear = item?.date;
-    dates?.push(fiscalYear);
-
-    // Extract totalValue
-    enterpriseValue?.push(item?.enterpriseValue);
-    marketCapitalization?.push(item?.marketCapitalization);
-    addTotalDebt?.push(item?.addTotalDebt);
-    cashEquivalent?.push(item?.minusCashAndCashEquivalents)
-
-    });
-
-
-
-    const option = {
-    silent: true,
-    animation: false,
-    tooltip: {
-        trigger: 'axis',
-        hideDelay: 100, // Set the delay in milliseconds
-    },
-    grid: {
-        left: $screenWidth < 640 ? '0%' : '2%',
-        right: $screenWidth < 640 ? '2%' : '2%',
-        bottom: $screenWidth < 640 ? '0%' : '2%',
-        top: '5%',
-        containLabel: true
-    },
-    xAxis: {
-        data: dates,
-        type: 'category',
-        axisLabel: {
-            color: '#fff',
-        }
-        },
-        yAxis: {
-        splitLine: {
-            show: false, // Disable x-axis grid lines
-        },
-        axisLabel: {
-          show: false // Hide y-axis labels
-        },
-        },
-    series: [
-        {   
-            name: 'Cash Equiv.',
-            data: cashEquivalent,
-            type: 'bar',
-            itemStyle: {
-                color: '#fff' // Change bar color to white
-            }
-        },
-        {
-            name: 'Debt',
-            data: addTotalDebt,
-            type: 'bar',
-            itemStyle: {
-                color: '#3B82F6' // Change bar color to white
-            }
-        },
-        {
-            name: 'Market Cap',
-            data: marketCapitalization,
-            type: 'bar',
-            itemStyle: {
-                color: '#E11D48' // Change bar color to white
-            }
-        },
-        {
-            name: 'Enterprise Value',
-            data: enterpriseValue,
-            type: 'bar',
-            itemStyle: {
-                    color: '#22C55E' // Change bar color to white
-                }
-        },
-    ]
-    };
-
-
-return option;
-}
-
-const getEnterPriseValues = async (ticker) => {
-    // Get cached data for the specific tickerID
-    const cachedData = getCache(ticker, 'getEnterPriseValues');
-    if (cachedData) {
-      rawData = cachedData;
-    } else {
-
-      const postData = {'ticker': ticker, path: 'enterprise-values'};
-      // make the POST request to the endpoint
-      const response = await fetch('/api/ticker-data', {
-        method: 'POST',
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify(postData)
-      });
-
-      rawData = await response.json();
-
-      // Cache the data for this specific tickerID with a specific name 'getEnterPriseValues'
-      setCache(ticker, rawData, 'getEnterPriseValues');
-    }
-
-    if(rawData?.length !== 0) {
-        $enterpriseComponent = true;
-    } else {
-        $enterpriseComponent = false;
-    }
-};
-
-
-$: {
-  if($stockTicker && typeof window !== 'undefined') {
-    isLoaded=false;
-    const asyncFunctions = [
-      getEnterPriseValues($stockTicker)
-      ];
-      Promise.all(asyncFunctions)
-          .then((results) => {
-            optionsData = getPlotOptions()
-          })
-          .catch((error) => {
-            console.error('An error occurred:', error);
-          });
-    isLoaded = true;
-
-  }
-}
-
-</script>
-    
-    
-    
-    <section class="overflow-hidden text-white h-full pb-8 sm:pb-2">
-        <main class="overflow-hidden ">
-                        
-            <div class="flex flex-row items-center">
-                <label for="enterpriseValueInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
-                    Enterprise Value
-                </label>
-                <InfoModal
-                  title={"Enterprise Value"}
-                  content={"Enterprise value (EV) is a comprehensive measure of a company's total value in the stock market, considering market capitalization, debt, cash, and minority interests. It helps in M&A analysis, comparative analysis, valuation metrics, and capital structure assessment, aiding investors, analysts, and companies in financial decision-making."}
-                  id={"enterpriseValueInfo"}
-                />
+    {#if isLoaded}
+      {#if rawData?.length !== 0}
+        <div class="mt-2 pb-4">
+          <div class="w-full flex flex-col items-start">
+            <div class="text-white text-[1rem] mt-1 sm:mt-3 mb-1 w-full">
+              {$displayCompanyName}'s' enterprise value provides a comprehensive
+              snapshot of its total worth, crucial for assessing its financial
+              health and making informed investment decisions.
             </div>
-            
-            {#if isLoaded}
-            {#if rawData?.length !== 0}
-            <div class="mt-2 pb-4">
-                    
-                <div class="w-full flex flex-col items-start">
-                    <div class="text-white text-[1rem] mt-1 sm:mt-3 mb-1 w-full">
-                        {$displayCompanyName}'s' enterprise value provides a comprehensive snapshot of its total worth, crucial for assessing its financial health and making informed investment decisions.
-                    </div>
-                </div>
-            
-                <a href="{'/stocks/'+$stockTicker+'/stats/income'}" class="text-blue-400 hover:text-white flex justify-end mt-3 text-sm sm:text-[1rem]">
-                    Full report
-                </a>
+          </div>
 
-                <div class="app w-full h-[300px] mt-5">
-                    <Chart {init} options={optionsData} class="chart" />
-                </div>
-                
-                <div class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12">
-                    <div class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
-                    <div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
-                    <div class="w-3 h-3 bg-[#22C55E] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
-                    <span class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block">
-                        Enterprise Value
-                    </span>
-                </div>
-                    <div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
-                        <div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
-                        <div class="w-3 h-3 bg-[#E11D48] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
-                        <span class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block">
-                        Mkt Cap
-                        </span>
-                    </div>
-                    <div class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center">
-                    <div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
-                    <div class="w-3 h-3 bg-[#3B82F6] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
-                    <span class="mt-2 sm:mt-0 text-white text-xs sm:text-md inline-block">
-                        Debt
-                    </span>
-                </div>
-                <div class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center sm:items-center ml-3 sm:ml-0 w-1/2 justify-center">
-                    <div class="h-full transform -translate-x-1/2 " aria-hidden="true"></div>
-                    <div class="w-3 h-3 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2" aria-hidden="true"></div>
-                    <span class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block">
-                        Cash Equivalents
-                    </span>
-                </div>
-            
-                </div>
+          <a
+            href={"/stocks/" + $stockTicker + "/stats/income"}
+            class="text-blue-400 hover:text-white flex justify-end mt-3 text-sm sm:text-[1rem]"
+          >
+            Full report
+          </a>
+
+          <div class="app w-full h-[300px] mt-5">
+            <Chart {init} options={optionsData} class="chart" />
+          </div>
+
+          <div
+            class="flex flex-row items-center justify-between mx-auto mt-5 w-full sm:w-11/12"
+          >
+            <div
+              class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
+            >
+              <div
+                class="h-full transform -translate-x-1/2"
+                aria-hidden="true"
+              ></div>
+              <div
+                class="w-3 h-3 bg-[#22C55E] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2"
+                aria-hidden="true"
+              ></div>
+              <span
+                class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block"
+              >
+                Enterprise Value
+              </span>
             </div>
-
-            {/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}
-
-    
-        </main>
-    </section>
-    
-    
-    
+            <div
+              class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
+            >
+              <div
+                class="h-full transform -translate-x-1/2"
+                aria-hidden="true"
+              ></div>
+              <div
+                class="w-3 h-3 bg-[#E11D48] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2"
+                aria-hidden="true"
+              ></div>
+              <span
+                class="mt-2 sm:mt-0 text-white text-xs sm:text-md sm:font-medium inline-block"
+              >
+                Mkt Cap
+              </span>
+            </div>
+            <div
+              class="flex flex-col sm:flex-row items-center ml-3 sm:ml-0 w-1/2 justify-center"
+            >
+              <div
+                class="h-full transform -translate-x-1/2"
+                aria-hidden="true"
+              ></div>
+              <div
+                class="w-3 h-3 bg-[#3B82F6] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2"
+                aria-hidden="true"
+              ></div>
+              <span
+                class="mt-2 sm:mt-0 text-white text-xs sm:text-md inline-block"
+              >
+                Debt
+              </span>
+            </div>
+            <div
+              class="mt-3.5 sm:mt-0 flex flex-col sm:flex-row items-center sm:items-center ml-3 sm:ml-0 w-1/2 justify-center"
+            >
+              <div
+                class="h-full transform -translate-x-1/2"
+                aria-hidden="true"
+              ></div>
+              <div
+                class="w-3 h-3 bg-[#fff] border-4 box-content border-[#27272A] rounded-full transform sm:-translate-x-1/2"
+                aria-hidden="true"
+              ></div>
+              <span
+                class="mt-2 sm:mt-0 text-white text-center sm:text-start text-xs sm:text-md inline-block"
+              >
+                Cash Equivalents
+              </span>
+            </div>
+          </div>
+        </div>
+      {/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}
+  </main>
+</section>
 
 <style>
-
-.app {
+  .app {
     height: 300px;
     max-width: 100%; /* Ensure chart width doesn't exceed the container */
+  }
 
-    }
-
-    @media (max-width: 640px) {
+  @media (max-width: 640px) {
     .app {
-        height: 230px;
-    }
+      height: 230px;
     }
+  }
 
-    .chart {
+  .chart {
     width: 100%;
-    }
-    
-</style>
\ No newline at end of file
+  }
+</style>
diff --git a/src/lib/components/ExecutiveCard.svelte b/src/lib/components/ExecutiveCard.svelte
index 09f45fa0..ac494758 100644
--- a/src/lib/components/ExecutiveCard.svelte
+++ b/src/lib/components/ExecutiveCard.svelte
@@ -188,7 +188,7 @@
       <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"
+            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>
diff --git a/src/lib/components/FOMCImpact.svelte b/src/lib/components/FOMCImpact.svelte
index 32611352..ee77b540 100644
--- a/src/lib/components/FOMCImpact.svelte
+++ b/src/lib/components/FOMCImpact.svelte
@@ -329,7 +329,7 @@
       <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"
+            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"></span>
           </label>
diff --git a/src/lib/components/FailToDeliver.svelte b/src/lib/components/FailToDeliver.svelte
index 4d015f3f..3cd73b27 100644
--- a/src/lib/components/FailToDeliver.svelte
+++ b/src/lib/components/FailToDeliver.svelte
@@ -311,7 +311,7 @@
       <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"
+            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>
diff --git a/src/lib/components/FundamentalAnalysis.svelte b/src/lib/components/FundamentalAnalysis.svelte
index c373a9f5..58eb978a 100644
--- a/src/lib/components/FundamentalAnalysis.svelte
+++ b/src/lib/components/FundamentalAnalysis.svelte
@@ -240,7 +240,7 @@
       <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"
+            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"></span>
           </label>
diff --git a/src/lib/components/GovernmentContract.svelte b/src/lib/components/GovernmentContract.svelte
index 1b20f16c..aa60e154 100644
--- a/src/lib/components/GovernmentContract.svelte
+++ b/src/lib/components/GovernmentContract.svelte
@@ -237,7 +237,7 @@
       <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"
+            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>
diff --git a/src/lib/components/ImpliedVolatility.svelte b/src/lib/components/ImpliedVolatility.svelte
index d41254dd..d9e563ca 100644
--- a/src/lib/components/ImpliedVolatility.svelte
+++ b/src/lib/components/ImpliedVolatility.svelte
@@ -150,7 +150,7 @@
         <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"
+              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>
diff --git a/src/lib/components/Lazy.svelte b/src/lib/components/Lazy.svelte
index 2a7cb344..511d13a0 100644
--- a/src/lib/components/Lazy.svelte
+++ b/src/lib/components/Lazy.svelte
@@ -1,29 +1,31 @@
 <script>
-	import { onMount} from 'svelte'
+  import { onMount } from "svelte";
 
-	let el
-	let show = false;
-	
-	onMount(() => {
-		const observer = new IntersectionObserver((entries) => {
-			const entry = entries[0]
-			if (entry.target !== el) return
-			show = entry.isIntersecting
-			if (show) observer.disconnect()
-		})
-		observer.observe(el)
-		return () => observer.disconnect()
-	})
+  let el;
+  let show = false;
+
+  onMount(() => {
+    const observer = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      if (entry.target !== el) return;
+      show = entry.isIntersecting;
+      if (show) observer.disconnect();
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  });
 </script>
 
 {#if show}
-	<slot />
+  <slot />
 {:else}
-	<div bind:this={el} 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}
\ No newline at end of file
+  <div bind:this={el} 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}
diff --git a/src/lib/components/LoginPopup.svelte b/src/lib/components/LoginPopup.svelte
index 580725a2..8fed1dd5 100644
--- a/src/lib/components/LoginPopup.svelte
+++ b/src/lib/components/LoginPopup.svelte
@@ -1551,7 +1551,7 @@ const output = await response.json();
         <div class="absolute right-1/2 left-1/2 top-1/2 bottom-1/2">
           <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"
+              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>
diff --git a/src/lib/components/MarketMaker.svelte b/src/lib/components/MarketMaker.svelte
index 9a935f63..18ed789a 100644
--- a/src/lib/components/MarketMaker.svelte
+++ b/src/lib/components/MarketMaker.svelte
@@ -230,7 +230,7 @@
       <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"
+            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"></span>
           </label>
diff --git a/src/lib/components/News.svelte b/src/lib/components/News.svelte
index 2af16406..eaf33a13 100644
--- a/src/lib/components/News.svelte
+++ b/src/lib/components/News.svelte
@@ -1,137 +1,256 @@
 <script lang="ts">
-  import { stockTicker, etfTicker } from "$lib/store";
+  import { stockTicker, etfTicker, setCache, getCache } from "$lib/store";
   import { formatDate } from "$lib/utils";
+  import { page } from "$app/stores";
 
   export let data;
 
   let rawData = [];
+  let rawDataPressRelease;
+
   let newsList = [];
+  let displaySection = "all";
+  let isLoaded = true;
 
-  /*
-  let videoId = null;
-
-  function checkIfYoutubeVideo(link) {
-    const url = new URL(link);
-    if (url?.hostname === "www.youtube.com") {
-      const searchParams = url.searchParams;
-      searchParams.delete("t"); // Remove the "t" parameter
-      const videoIdMatch = url?.search?.match(/v=([^&]+)/);
-
-      if (videoIdMatch) {
-        return videoIdMatch[1];
-      }
+  async function getPressRelease() {
+    isLoaded = false;
+    displaySection = "press-releases";
+    const cachedData = getCache($stockTicker, "getPressRelease");
+    if (cachedData) {
+      rawDataPressRelease = cachedData;
     } else {
+      const postData = { ticker: $stockTicker, path: "stock-press-release" };
+      const response = await fetch("/api/ticker-data", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(postData),
+      });
+
+      rawDataPressRelease = await response?.json();
+      setCache($stockTicker, rawData, "getPressRelease");
+    }
+    isLoaded = true;
+  }
+
+  function checkIfYoutubeVideo(link: string): string | null {
+    try {
+      const url = new URL(link);
+      if (
+        url.hostname === "www.youtube.com" ||
+        url.hostname === "youtube.com"
+      ) {
+        return url.searchParams.get("v");
+      }
+      return null;
+    } catch {
       return null;
     }
   }
-*/
+
   function loadMoreData() {
     const nextIndex = newsList?.length;
     const newArticles = rawData?.slice(nextIndex, nextIndex + 20);
     newsList = [...newsList, ...newArticles];
   }
 
+  $: filteredNewsList =
+    displaySection === "videos"
+      ? newsList.filter((item) => checkIfYoutubeVideo(item.url) !== null)
+      : displaySection === "press-releases"
+        ? rawDataPressRelease
+        : newsList;
+
   $: {
     if (($stockTicker || $etfTicker) && typeof window !== "undefined") {
+      isLoaded = true;
       rawData = data?.getNews;
+      rawDataPressRelease = [];
       newsList = rawData?.slice(0, 20) ?? [];
+      displaySection = "all";
     }
   }
+
+  // Track whether each video should be shown
+  let showVideo = {};
+  function handlePlayClick(index: number) {
+    showVideo = { ...showVideo, [index]: true };
+  }
 </script>
 
 <div class="space-y-3 overflow-hidden">
-  <!--Start Content-->
   <div class="w-auto lg:w-full p-1 flex flex-col m-auto">
-    <div class="flex flex-col items-center w-full mb-3">
+    <div class="flex flex-col items-center w-full mb-1">
       <div class="flex flex-row justify-start mr-auto items-center">
-        <!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
         <div class="flex flex-row items-center">
           <label
-            class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
+            class="mr-1 cursor-pointer flex flex-row items-center text-white text-2xl font-bold"
           >
             News
           </label>
         </div>
       </div>
     </div>
-    {#if rawData?.length > 0}
-      <div class="grid grid-cols-1 gap-2 pb-5">
-        {#each newsList as item}
-          <div class="w-full flex flex-col bg-[#09090B] rounded-md m-auto">
-            <!--
-          {#if !checkIfYoutubeVideo(item.url)}
-            <div class="w-full aspect-video mb-4">
-              <iframe
-                class="w-full h-full rounded-md border border-gray-800"
-                src={`https://www.youtube.com/embed/${videoId}`}
-                frameborder="0"
-                allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                allowfullscreen
-              ></iframe>
-            </div>
-            <div class="w-full px-4 pb-4">
-              <h3 class="text-sm text-white/80 mb-2">
-                {formatDate(item?.publishedDate)} ago · {item?.site}
-              </h3>
-              <a
-                href={item?.url}
-                rel="noopener noreferrer"
-                target="_blank"
-                class="text-lg sm:text-xl font-bold text-white"
-              >
-                {item?.title}
-                <p class="text-white text-sm mt-2 font-normal">
-                  {item?.text}
-                </p>
-              </a>
-            </div>
-            -->
-            <div class="w-full flex flex-col sm:flex-row">
-              <a
-                href={item?.url}
-                rel="noopener noreferrer"
-                target="_blank"
-                class="w-full sm:max-w-56 h-fit max-h-96 sm:mr-3 border border-gray-800 rounded-md"
-              >
-                <div class="flex-shrink-0 m-auto">
-                  <img
-                    src={item?.image}
-                    class="h-auto w-full rounded-md"
-                    alt="news image"
-                    loading="lazy"
-                  />
-                </div>
-              </a>
-              <div class="-mt-3 w-full">
-                <h3 class="text-sm text-white/80 truncate mb-2 mt-3">
-                  {formatDate(item?.publishedDate)} &#183; {item?.site}
-                </h3>
-                <a
-                  href={item?.url}
-                  rel="noopener noreferrer"
-                  target="_blank"
-                  class="text-lg sm:text-xl font-bold text-white"
-                >
-                  {item?.title}
-                  <p class="text-white text-sm mt-2 font-normal">
-                    {item?.text?.length > 200
-                      ? item?.text?.slice(0, 200) + "..."
-                      : item?.text}
-                  </p>
-                </a>
-              </div>
-            </div>
-          </div>
-          <hr class="border-gray-600 w-full m-auto mt-5 mb-5" />
-        {/each}
-      </div>
-      {#if newsList?.length !== rawData?.length}
-        <label
-          on:click={loadMoreData}
-          class="shadow-lg rounded-md cursor-pointer w-5/6 sm:w-full sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff]"
+
+    <div
+      class="{$page?.url?.pathname.includes('etf')
+        ? 'hidden'
+        : ''} mt-1 sm:mt-0 text-white"
+    >
+      <div
+        class="hflex flex-row items-center justify-between overflow-x-auto border-b border-gray-600 py-1.5"
+      >
+        <ul
+          class="hide-scroll mb-0.5 flex flex-row overflow-x-auto whitespace-nowrap text-lg"
         >
-          Load More News
-        </label>
+          <li>
+            <button
+              on:click={() => (displaySection = "all")}
+              class="rounded-md px-3 py-0.5 sm:hover:bg-secondary {displaySection ===
+              'all'
+                ? 'bg-secondary'
+                : ''}">All</button
+            >
+          </li>
+          <li>
+            <button
+              on:click={() => (displaySection = "videos")}
+              class="rounded-md px-3 py-0.5 ml-2 sm:hover:bg-secondary {displaySection ===
+              'videos'
+                ? 'bg-secondary'
+                : ''}">Videos</button
+            >
+          </li>
+          <li>
+            <button
+              on:click={() => getPressRelease()}
+              class="rounded-md px-3 py-0.5 ml-2 sm:hover:bg-secondary {displaySection ===
+              'press-releases'
+                ? 'bg-secondary'
+                : ''}"
+              ><span class="inline sm:hidden">Press</span><span
+                class="hidden sm:inline">Press Releases</span
+              ></button
+            >
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    {#if rawData?.length > 0}
+      {#if isLoaded}
+        <div class="grid grid-cols-1 gap-2 pb-5 pt-5">
+          {#each filteredNewsList as item, index}
+            <div class="w-full flex flex-col bg-[#09090B] rounded-md m-auto">
+              {#if checkIfYoutubeVideo(item.url)}
+                {#if showVideo[index]}
+                  <!-- Show the YouTube iframe when the user clicks play -->
+                  <div class="w-full aspect-video mb-4">
+                    <iframe
+                      class="w-full h-full rounded-md border border-gray-800"
+                      src={`https://www.youtube.com/embed/${checkIfYoutubeVideo(item.url)}`}
+                      frameborder="0"
+                      allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                      allowfullscreen
+                    ></iframe>
+                  </div>
+                {:else}
+                  <!-- Show the image placeholder with a play button -->
+                  <div class="w-full aspect-video">
+                    <div class="mb-3 sm:order-3 lg:pr-2">
+                      <div
+                        class="group relative block cursor-pointer bg-black bg-cover bg-[center_50%] object-contain after:block after:pb-[56.25%] after:content-[''] rounded-sm focus:outline-none focus:ring-2 focus:ring-blue-brand_light focus:ring-offset-2"
+                        style="background-image: url({item?.image});"
+                        tabindex="0"
+                        on:click={() => handlePlayClick(index)}
+                      >
+                        <div
+                          class="absolute left-[50%] top-[50%] z-10 h-[46px] w-[70px] -translate-x-1/2 -translate-y-1/2 rounded-lg bg-[#212121] opacity-80 transition-all before:absolute before:left-[50%] before:top-[50%] before:-translate-x-1/2 before:-translate-y-1/2 before:border-y-[11px] before:border-l-[19px] before:border-r-0 before:border-transparent before:border-l-white before:content-[''] group-hover:bg-[#ff0000] group-hover:opacity-100"
+                        ></div>
+                      </div>
+                    </div>
+                  </div>
+                {/if}
+                <div class="mt-3 w-full">
+                  <h3 class="text-sm text-white/80 truncate mb-2">
+                    {formatDate(item?.publishedDate)} &#183; {item?.site}
+                  </h3>
+                  <a
+                    href={item?.url}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    class="text-lg sm:text-xl font-bold text-white"
+                  >
+                    {item?.title}
+                    <p class="text-white text-sm mt-2 font-normal">
+                      {item?.text?.length > 200
+                        ? item?.text?.slice(0, 200) + "..."
+                        : item?.text}
+                    </p>
+                  </a>
+                </div>
+              {:else}
+                <!-- Default news article display -->
+                <div class="w-full flex flex-col sm:flex-row">
+                  <a
+                    href={item?.url}
+                    rel="noopener noreferrer"
+                    target="_blank"
+                    class="w-full sm:max-w-56 h-fit max-h-96 sm:mr-3 border border-gray-800 rounded-md"
+                  >
+                    <div class="flex-shrink-0 m-auto">
+                      <img
+                        src={item?.image}
+                        class="h-auto w-full rounded-md"
+                        alt="news image"
+                        loading="lazy"
+                      />
+                    </div>
+                  </a>
+                  <div class="mt-3 sm:mt-0 w-full">
+                    <h3 class="text-sm text-white/80 truncate mb-2">
+                      {formatDate(item?.publishedDate)} &#183; {item?.site}
+                    </h3>
+                    <a
+                      href={item?.url}
+                      rel="noopener noreferrer"
+                      target="_blank"
+                      class="text-lg sm:text-xl font-bold text-white"
+                    >
+                      {item?.title}
+                      <p class="text-white text-sm mt-2 font-normal">
+                        {item?.text?.length > 200
+                          ? item?.text?.slice(0, 200) + "..."
+                          : item?.text}
+                      </p>
+                    </a>
+                  </div>
+                </div>
+              {/if}
+            </div>
+            <hr class="border-gray-600 w-full m-auto mt-5 mb-5" />
+          {/each}
+        </div>
+        {#if newsList?.length !== rawData?.length}
+          <label
+            on:click={loadMoreData}
+            class="shadow-lg rounded-md cursor-pointer w-5/6 sm:w-full sm:max-w-3xl flex justify-center items-center py-3 h-full text-sm sm:text-[1rem] text-center font-semibold text-black m-auto sm:hover:bg-gray-300 bg-[#fff]"
+          >
+            Load More News
+          </label>
+        {/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}
     {:else}
       <span class="text-white"> No News article available yet </span>
diff --git a/src/lib/components/NextEarnings.svelte b/src/lib/components/NextEarnings.svelte
index 17c5c941..77274ca1 100644
--- a/src/lib/components/NextEarnings.svelte
+++ b/src/lib/components/NextEarnings.svelte
@@ -43,7 +43,7 @@
           <!--<img class="h-10 inline-block mr-2" src={copilotIcon} />-->
           <div class="flex flex-row items-center">
             <h3
-              class="mr-1 flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
+              class="mr-1 flex flex-row items-center text-white text-2xl font-bold"
             >
               Next Earnings Release
             </h3>
diff --git a/src/lib/components/OptionsData.svelte b/src/lib/components/OptionsData.svelte
index 16a5a75f..f38e4468 100644
--- a/src/lib/components/OptionsData.svelte
+++ b/src/lib/components/OptionsData.svelte
@@ -269,7 +269,7 @@
       <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"
+            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"></span>
           </label>
diff --git a/src/lib/components/OptionsNetFlow.svelte b/src/lib/components/OptionsNetFlow.svelte
index 3200ce4e..3dfa673f 100644
--- a/src/lib/components/OptionsNetFlow.svelte
+++ b/src/lib/components/OptionsNetFlow.svelte
@@ -185,7 +185,7 @@
       <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"
+            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>
diff --git a/src/lib/components/PriceAnalysis.svelte b/src/lib/components/PriceAnalysis.svelte
index 8e7f07a3..e084398c 100644
--- a/src/lib/components/PriceAnalysis.svelte
+++ b/src/lib/components/PriceAnalysis.svelte
@@ -320,7 +320,7 @@
       <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"
+            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>
diff --git a/src/lib/components/RetailVolume.svelte b/src/lib/components/RetailVolume.svelte
index bc6013f9..03dc6b17 100644
--- a/src/lib/components/RetailVolume.svelte
+++ b/src/lib/components/RetailVolume.svelte
@@ -310,7 +310,7 @@
       <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"
+            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>
diff --git a/src/lib/components/RevenueSegmentation.svelte b/src/lib/components/RevenueSegmentation.svelte
index 6b56835c..249dc1df 100644
--- a/src/lib/components/RevenueSegmentation.svelte
+++ b/src/lib/components/RevenueSegmentation.svelte
@@ -369,7 +369,7 @@
       <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"
+            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>
diff --git a/src/lib/components/SECFilingsCard.svelte b/src/lib/components/SECFilingsCard.svelte
index 38da46fe..85867efa 100644
--- a/src/lib/components/SECFilingsCard.svelte
+++ b/src/lib/components/SECFilingsCard.svelte
@@ -240,7 +240,7 @@
       <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"
+            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>
diff --git a/src/lib/components/ShareStatistics.svelte b/src/lib/components/ShareStatistics.svelte
index 8636225b..bb290af8 100644
--- a/src/lib/components/ShareStatistics.svelte
+++ b/src/lib/components/ShareStatistics.svelte
@@ -170,7 +170,7 @@
       <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"
+            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"></span>
           </label>
diff --git a/src/lib/components/Swap.svelte b/src/lib/components/Swap.svelte
index 664a92ef..054686d2 100644
--- a/src/lib/components/Swap.svelte
+++ b/src/lib/components/Swap.svelte
@@ -291,7 +291,7 @@
       <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"
+            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>
diff --git a/src/lib/components/TARating.svelte b/src/lib/components/TARating.svelte
index e1744056..85b1e321 100644
--- a/src/lib/components/TARating.svelte
+++ b/src/lib/components/TARating.svelte
@@ -254,7 +254,7 @@
       <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"
+            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>
diff --git a/src/lib/components/TrendAnalysis.svelte b/src/lib/components/TrendAnalysis.svelte
index 608981a1..b20592ea 100644
--- a/src/lib/components/TrendAnalysis.svelte
+++ b/src/lib/components/TrendAnalysis.svelte
@@ -210,7 +210,7 @@
         <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"
+              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>
@@ -222,7 +222,7 @@
       <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"
+            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>
diff --git a/src/lib/components/WIIM.svelte b/src/lib/components/WIIM.svelte
index 7abc496a..35667c99 100644
--- a/src/lib/components/WIIM.svelte
+++ b/src/lib/components/WIIM.svelte
@@ -50,7 +50,7 @@
     <div class="flex flex-row items-center">
       <label
         for="whyPriceMovedInfo"
-        class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-2xl font-bold"
+        class="mr-1 cursor-pointer flex flex-row items-center text-white text-2xl font-bold"
       >
         Why Price Moved
       </label>
diff --git a/src/lib/components/WatchListCard.svelte b/src/lib/components/WatchListCard.svelte
index 8cfd7f36..fffe9ee3 100644
--- a/src/lib/components/WatchListCard.svelte
+++ b/src/lib/components/WatchListCard.svelte
@@ -220,7 +220,7 @@
     <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"
+          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"></span>
         </label>
diff --git a/src/routes/analysts/+page.svelte b/src/routes/analysts/+page.svelte
index 1260157b..f0907536 100644
--- a/src/routes/analysts/+page.svelte
+++ b/src/routes/analysts/+page.svelte
@@ -326,7 +326,7 @@
               <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"
+                    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"
diff --git a/src/routes/crypto/[tickerID]/+page.svelte b/src/routes/crypto/[tickerID]/+page.svelte
index 4d11b75b..aaad6fc3 100644
--- a/src/routes/crypto/[tickerID]/+page.svelte
+++ b/src/routes/crypto/[tickerID]/+page.svelte
@@ -1142,7 +1142,7 @@ afterUpdate(async () => {
             >
               <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"
+                  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>
diff --git a/src/routes/crypto/[tickerID]/congress-trading/+page.svelte b/src/routes/crypto/[tickerID]/congress-trading/+page.svelte
index 58ac21e8..688a439f 100644
--- a/src/routes/crypto/[tickerID]/congress-trading/+page.svelte
+++ b/src/routes/crypto/[tickerID]/congress-trading/+page.svelte
@@ -593,7 +593,7 @@
           <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"
+                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>
diff --git a/src/routes/economic-indicator/+page.svelte b/src/routes/economic-indicator/+page.svelte
index 2959fc22..2768ca0b 100644
--- a/src/routes/economic-indicator/+page.svelte
+++ b/src/routes/economic-indicator/+page.svelte
@@ -984,7 +984,7 @@
             <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"
+                  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>
diff --git a/src/routes/etf/[tickerID]/+page.svelte b/src/routes/etf/[tickerID]/+page.svelte
index c013a083..b95a3c29 100644
--- a/src/routes/etf/[tickerID]/+page.svelte
+++ b/src/routes/etf/[tickerID]/+page.svelte
@@ -1247,7 +1247,7 @@
                   >
                     <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"
+                        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"
diff --git a/src/routes/etf/[tickerID]/dividends/+page.svelte b/src/routes/etf/[tickerID]/dividends/+page.svelte
index 8ba19c72..49360424 100644
--- a/src/routes/etf/[tickerID]/dividends/+page.svelte
+++ b/src/routes/etf/[tickerID]/dividends/+page.svelte
@@ -421,7 +421,7 @@
             <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"
+                  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>
diff --git a/src/routes/etf/[tickerID]/insider/+page.svelte b/src/routes/etf/[tickerID]/insider/+page.svelte
index 71243e7d..920587cb 100644
--- a/src/routes/etf/[tickerID]/insider/+page.svelte
+++ b/src/routes/etf/[tickerID]/insider/+page.svelte
@@ -412,7 +412,7 @@
             <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"
+                  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>
diff --git a/src/routes/heatmaps/+page.svelte b/src/routes/heatmaps/+page.svelte
index ba2f2ec2..da5d1a4e 100644
--- a/src/routes/heatmaps/+page.svelte
+++ b/src/routes/heatmaps/+page.svelte
@@ -470,7 +470,7 @@ async function exportTreemap() {
       <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"
+            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>
diff --git a/src/routes/insider-tracker/+page.svelte b/src/routes/insider-tracker/+page.svelte
index 878925f1..b06a761b 100644
--- a/src/routes/insider-tracker/+page.svelte
+++ b/src/routes/insider-tracker/+page.svelte
@@ -298,7 +298,7 @@
             <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"
+                  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>
diff --git a/src/routes/ipos/+page.svelte b/src/routes/ipos/+page.svelte
index 1fb1247c..09d8234a 100644
--- a/src/routes/ipos/+page.svelte
+++ b/src/routes/ipos/+page.svelte
@@ -156,7 +156,7 @@
     <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"
+          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>
diff --git a/src/routes/ipos/[slug]/+page.svelte b/src/routes/ipos/[slug]/+page.svelte
index 8b31975a..815e99ac 100644
--- a/src/routes/ipos/[slug]/+page.svelte
+++ b/src/routes/ipos/[slug]/+page.svelte
@@ -253,7 +253,7 @@
     <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"
+          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>
diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte
index 36f61f25..a65a7304 100644
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@@ -795,7 +795,7 @@
   <div class="absolute right-1/2 left-1/2 top-1/2 bottom-1/2">
     <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"
+        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>
diff --git a/src/routes/market-news/general/+page.svelte b/src/routes/market-news/general/+page.svelte
index dbefac38..536741f3 100644
--- a/src/routes/market-news/general/+page.svelte
+++ b/src/routes/market-news/general/+page.svelte
@@ -180,7 +180,7 @@
                   {/if}
                 </div>
 
-                <hr class="border-gray-800 w-full m-auto mt-5 mb-5" />
+                <hr class="border-gray-600 w-full m-auto mt-5 mb-5" />
               {/each}
             {/if}
           </div>
diff --git a/src/routes/options-flow/+page.svelte b/src/routes/options-flow/+page.svelte
index 30371380..d1568a56 100644
--- a/src/routes/options-flow/+page.svelte
+++ b/src/routes/options-flow/+page.svelte
@@ -1675,7 +1675,7 @@
         <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"
+              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>
diff --git a/src/routes/politicians/+page.svelte b/src/routes/politicians/+page.svelte
index 1eac812a..d44681ca 100644
--- a/src/routes/politicians/+page.svelte
+++ b/src/routes/politicians/+page.svelte
@@ -389,7 +389,7 @@
       <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"
+            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>
diff --git a/src/routes/reddit-tracker/+page.svelte b/src/routes/reddit-tracker/+page.svelte
index 66d3fe0a..8daff967 100644
--- a/src/routes/reddit-tracker/+page.svelte
+++ b/src/routes/reddit-tracker/+page.svelte
@@ -653,7 +653,7 @@
             <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"
+                  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>
diff --git a/src/routes/register/+page.svelte b/src/routes/register/+page.svelte
index d14801ca..5c1a43ac 100644
--- a/src/routes/register/+page.svelte
+++ b/src/routes/register/+page.svelte
@@ -822,7 +822,7 @@
   <div class="absolute right-1/2 left-1/2 top-1/2 bottom-1/2">
     <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"
+        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>
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index 5b90aa84..41b105ec 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -1098,7 +1098,7 @@
                   >
                     <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"
+                        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"
diff --git a/src/routes/stocks/[tickerID]/dividends/+page.svelte b/src/routes/stocks/[tickerID]/dividends/+page.svelte
index 42c1c6d9..30ee8529 100644
--- a/src/routes/stocks/[tickerID]/dividends/+page.svelte
+++ b/src/routes/stocks/[tickerID]/dividends/+page.svelte
@@ -421,7 +421,7 @@
             <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"
+                  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>
diff --git a/src/routes/stocks/[tickerID]/financials/+page.svelte b/src/routes/stocks/[tickerID]/financials/+page.svelte
index 597738ea..9c86fbc9 100644
--- a/src/routes/stocks/[tickerID]/financials/+page.svelte
+++ b/src/routes/stocks/[tickerID]/financials/+page.svelte
@@ -822,7 +822,7 @@
         <div class="w-full 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"
+              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>
diff --git a/src/routes/stocks/[tickerID]/insider/+page.svelte b/src/routes/stocks/[tickerID]/insider/+page.svelte
index b05b5489..6bc82d94 100644
--- a/src/routes/stocks/[tickerID]/insider/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+page.svelte
@@ -692,7 +692,7 @@
           <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"
+                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>
diff --git a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
index e9bfdce2..a23b99e7 100644
--- a/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte
@@ -412,7 +412,7 @@
             <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"
+                  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>
diff --git a/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte b/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
index 81f8a79f..aacab977 100644
--- a/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte
@@ -320,7 +320,7 @@
           <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"
+                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>
diff --git a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
index c11427ce..e463332c 100644
--- a/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/metrics/[slug]/+page.svelte
@@ -289,7 +289,7 @@
         <div class="w-full 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"
+              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>
diff --git a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
index 4096b1ae..7a6aa592 100644
--- a/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
+++ b/src/routes/stocks/[tickerID]/statistics/market-cap/+page.svelte
@@ -749,7 +749,7 @@
         <div class="w-full 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"
+              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>
diff --git a/src/routes/watchlist/options/+page.svelte b/src/routes/watchlist/options/+page.svelte
index 8486dd3e..6d2c5bbd 100644
--- a/src/routes/watchlist/options/+page.svelte
+++ b/src/routes/watchlist/options/+page.svelte
@@ -510,7 +510,7 @@
             <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"
+                  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>
diff --git a/src/routes/watchlist/stocks/+page.svelte b/src/routes/watchlist/stocks/+page.svelte
index a7028f1b..a3cbfd0d 100644
--- a/src/routes/watchlist/stocks/+page.svelte
+++ b/src/routes/watchlist/stocks/+page.svelte
@@ -1853,7 +1853,7 @@
             <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"
+                  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>