From 6d2d4f9ec03e62905ae6156add5b5baae4595256 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 12 Jul 2024 20:58:50 +0200
Subject: [PATCH] resize stock page

---
 src/lib/components/AnalystEstimate.svelte     |  15 +-
 src/lib/components/BullBearSay.svelte         |  31 ++--
 src/lib/components/ImpliedVolatility.svelte   |   2 +-
 src/lib/components/Sidecard.svelte            |   2 -
 src/routes/stocks/[tickerID]/+layout.svelte   |   4 +-
 src/routes/stocks/[tickerID]/+page.svelte     |   4 +-
 .../stocks/[tickerID]/insider/+page.svelte    |   4 +-
 .../stats/balance-sheet/+page.svelte          | 162 +++++++++---------
 .../[tickerID]/stats/cash-flow/+page.svelte   | 128 +++++++-------
 .../[tickerID]/stats/income/+page.svelte      | 104 +++++------
 .../[tickerID]/stats/ratios/+page.svelte      | 110 ++++++------
 11 files changed, 275 insertions(+), 291 deletions(-)

diff --git a/src/lib/components/AnalystEstimate.svelte b/src/lib/components/AnalystEstimate.svelte
index 5bfd0a1c..1680fdcd 100644
--- a/src/lib/components/AnalystEstimate.svelte
+++ b/src/lib/components/AnalystEstimate.svelte
@@ -200,11 +200,9 @@ $: {
     
 
 
-<section class="bg-[#0F0F0F] overflow-hidden text-white h-full sm:mb-0">
-    <div class="flex justify-center w-fit m-auto h-full overflow-hidden">
-        <div class="relative flex justify-center items-center overflow-hidden">
-            <main>
-                <div class="w-fit sm:w-full sm:max-w-2xl m-auto mt-5 sm:mt-0">
+<section class="overflow-hidden text-white h-full pb-8 sm:pb-2">
+    <main class="overflow-hidden ">
+                <div class="w-fit sm:w-full  m-auto mt-5 sm:mt-0">
                     
                 <div class="flex flex-row items-center">
                     <label for="predictiveFundamentalsInfo" class="mr-1 cursor-pointer flex flex-row items-center text-white text-xl sm:text-3xl font-bold">
@@ -243,7 +241,7 @@ $: {
                     </select>
                 
 
-                <div class="flex flex-row items-center ml-2 sm:ml-0 justify-start w-[90vw] sm:w-[560px] h-[220px] sm:h-[250px] sm:pl-3 sm:pr-3 pt-4 pb-5 mt-5 sm:mt-10">
+                <div class="flex flex-row items-center ml-2 sm:ml-0 justify-start w-[90vw] sm:w-full h-[220px] sm:h-[250px] sm:pl-3 sm:pr-3 pt-4 pb-5 mt-5 sm:mt-10">
 
 
                     <div class="chart-container h-[250px]">
@@ -295,7 +293,7 @@ $: {
 
                 
                 
-                <div class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto rounded-none sm:rounded-lg overflow-hidden overflow-x-scroll pr-10">
+                <div class="no-scrollbar flex justify-start items-center w-screen sm:w-full mt-6 m-auto rounded-none sm:rounded-lg overflow-hidden overflow-x-scroll">
                     <table class="table table-sm shaodow table-pin-cols table-compact rounded-none sm:rounded-md w-full bg-[#0F0F0F] border-bg-[#0F0F0F]">
                         <thead class="">
                         <tr class="">
@@ -361,9 +359,8 @@ $: {
             {/if}
 
             </div>
+
         </main>
-        </div>
-        </div>
 </section>
         
     
diff --git a/src/lib/components/BullBearSay.svelte b/src/lib/components/BullBearSay.svelte
index 7a82d515..76b2c99e 100644
--- a/src/lib/components/BullBearSay.svelte
+++ b/src/lib/components/BullBearSay.svelte
@@ -18,26 +18,17 @@ function splitIntoParagraphs(text) {
 
 let paragraphs = splitIntoParagraphs(rawData?.bullSays);
 
-function changeMode(state:string) {
-    mode = state;
-    if(mode === 'bullish') {
+
+function handleMode(i) {
+  activeIdx = i;
+  if(activeIdx === 0) {
         paragraphs = splitIntoParagraphs(rawData?.bullSays);
     }
-    else if (mode === 'bearish') {
+    else if (activeIdx === 1) {
         paragraphs = splitIntoParagraphs(rawData?.bearSays);
     }
 }
 
-function handleMode() {
-  if(mode === 'bullish') {
-    mode = 'bearish'
-    changeMode(mode)
-  } else {
-    mode = 'bullish';
-    changeMode(mode)
-  }
-}
-
 const tabs = [
     {
       title: "Bull Case",
@@ -46,6 +37,7 @@ const tabs = [
       title: "Bear Case",
     },
   ];
+
   let activeIdx = 0;
 
 $: {
@@ -89,13 +81,10 @@ $: {
     <AnimateSharedLayout>
       {#each tabs as item, i}
         <button
-          on:click={handleMode}
+          on:click={() => handleMode(i)}
           class="group relative z-[1] rounded-full px-6 py-1 {activeIdx === i
             ? 'z-0'
             : ''} "
-          on:click={() => {
-            activeIdx = i;
-          }}
         >
           {#if activeIdx === i}
             <Motion
@@ -120,13 +109,13 @@ $: {
   
 
   <!--End Header-->
-    <span class="text-gray-200 text-xs sm:text-[0.85rem] italic mt-6 sm:ml-auto">
+    <span class="text-gray-200 text-xs sm:text-[0.915rem] italic mt-6 sm:ml-auto">
       Updated {rawData?.date}
     </span>
     <div class="flex mt-5 h-auto">
     
-      <div class="{mode === 'bullish' ? 'bg-[#10DB06]' : 'bg-[#FF2F1F]'} w-3.5 rounded-l-xl" />
-      <span class="text-gray-100 ml-3 text-sm ">
+      <div class="{activeIdx === 0 ? 'bg-[#10DB06]' : 'bg-[#FF2F1F]'} w-3.5 rounded-l-xl" />
+      <span class="text-gray-100 ml-3 text-[0.915rem] ">
         {#if showFullText}
         {#each (showFullText ? paragraphs : paragraphs?.slice(0,1)) as paragraph, index}
         <p class="{index !== 0 ? 'mt-1' : ''} pr-1">{paragraph} {paragraphs?.length <= index+1 ? '' : '.'}</p>
diff --git a/src/lib/components/ImpliedVolatility.svelte b/src/lib/components/ImpliedVolatility.svelte
index 588f43dd..59bc37d1 100644
--- a/src/lib/components/ImpliedVolatility.svelte
+++ b/src/lib/components/ImpliedVolatility.svelte
@@ -158,7 +158,7 @@ function findLowestAndhighestIV(data, lastDateStr) {
       axisLabel: {
           formatter: function (value, index) {
             if (index % 2 === 0) {
-              return value?.toFixed(1)+'%'
+              return value?.toFixed(0)+'%'
             } else {
                   return ''; // Hide this tick
               }
diff --git a/src/lib/components/Sidecard.svelte b/src/lib/components/Sidecard.svelte
index c93f6716..e0c95679 100644
--- a/src/lib/components/Sidecard.svelte
+++ b/src/lib/components/Sidecard.svelte
@@ -18,7 +18,6 @@ export let analystRating
 
 
   
-
 <TickerInfoCard stockDeck={stockDeck}  />
 
 
@@ -30,4 +29,3 @@ export let analystRating
 <SimilarTickerCard similarstock={similarstock}/>
 
 <TopETFTickerHolder topETFHolder={topETFHolder}/>
-
diff --git a/src/routes/stocks/[tickerID]/+layout.svelte b/src/routes/stocks/[tickerID]/+layout.svelte
index 22490d1e..40b6a8eb 100644
--- a/src/routes/stocks/[tickerID]/+layout.svelte
+++ b/src/routes/stocks/[tickerID]/+layout.svelte
@@ -571,11 +571,11 @@ $: {
           <!--End Mobile Navbar-->
          
       
-          <div class="w-full xl:w-fit max-w-3xl sm:max-w-6xl m-auto px-3 sm:px-6">      
+          <div class="w-full xl:w-fit max-w-3xl sm:max-w-6xl m-auto px-3">      
                     
                         <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
                             <!-- Main content -->
-                            <div class="pb-12 md:pb-20 w-full max-w-3xl lg:max-w-2xl">
+                            <div class="pb-12 md:pb-20 w-full max-w-5xl lg:max-w-3xl">
                                 <div class="md:pr-6 lg:pr-10">
                                  
                 
diff --git a/src/routes/stocks/[tickerID]/+page.svelte b/src/routes/stocks/[tickerID]/+page.svelte
index 70f8a47b..abf815b3 100644
--- a/src/routes/stocks/[tickerID]/+page.svelte
+++ b/src/routes/stocks/[tickerID]/+page.svelte
@@ -751,12 +751,12 @@ function changeChartType() {
   
   <section class="bg-[#0F0F0F] min-h-screen pb-40 overflow-hidden">
   
-              <div class="w-full max-w-3xl m-auto overflow-hidden">
+              <div class="w-full max-w-4xl m-auto overflow-hidden">
   
           
                     <div class="md:flex md:justify-between md:divide-x md:divide-slate-800">
                         <!-- Main content -->
-                        <div class="pb-12 md:pb-20 w-full max-w-2xl sm:pr-6 xl:pr-0">
+                        <div class="pb-12 md:pb-20 w-full max-w-3xl sm:pr-6 xl:pr-0">
                           <div class="xl:pr-10">
   
       
diff --git a/src/routes/stocks/[tickerID]/insider/+page.svelte b/src/routes/stocks/[tickerID]/insider/+page.svelte
index 182fe05e..24fa0203 100644
--- a/src/routes/stocks/[tickerID]/insider/+page.svelte
+++ b/src/routes/stocks/[tickerID]/insider/+page.svelte
@@ -509,7 +509,7 @@ onMount(async() => {
                             </thead>
                             <tbody>
                               {#each (data?.user?.tier === 'Pro' ? insiderTradingList : insiderTradingList?.slice(0,3)) as item, index}
-                              <tr class="text-gray-200 bg-[#0F0F0F] {index+1 === insiderTradingList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
+                              <tr class="text-gray-200 odd:bg-[#202020] {index+1 === insiderTradingList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
       
                                 <td class="text-gray-200 border-b border-[#0F0F0F]">
                                   <div class="flex flex-col">
@@ -532,7 +532,7 @@ onMount(async() => {
                                     {#if item?.transactionType === 'Bought'}
                                       <span class="text-[#10DB06]">Bought</span>
                                     {:else if item?.transactionType === 'Grant'}
-                                      <span class="text-[#8f95a1]">Grant</span>
+                                      <span class="text-white">Grant</span>
                                     {:else if item?.transactionType === 'Sold'}
                                       <span class="text-[#FF2F1F]">Sold</span>
                                     {:else if item?.transactionType === 'Exercise'}
diff --git a/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte b/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte
index 66c449d9..cced45fc 100644
--- a/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/balance-sheet/+page.svelte
@@ -586,170 +586,170 @@ $: {
                                         
                                                     
                                                     <!-- row -->
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Cash & Equivalents</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Cash & Equivalents</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.cashAndCashEquivalents,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.cashAndCashEquivalents,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Short-Term Investments</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Short-Term Investments</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.shortTermInvestments,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.shortTermInvestments,true)}</td>
                                                         {/each}
                                                     </tr>
                                                         <!-- row -->
-                                                        <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Long-Term Investments</td>
+                                                        <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Long-Term Investments</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.longTermInvestments,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.longTermInvestments,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Other Long-Term Assets</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Other Long-Term Assets</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.otherNonCurrentAssets,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.otherNonCurrentAssets,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Receivables</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Receivables</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.netReceivables,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.netReceivables,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Inventory</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Inventory</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.inventory,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.inventory,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Other Current Assets</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Other Current Assets</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.otherCurrentAssets,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.otherCurrentAssets,true)}</td>
                                                         {/each}
                                                     </tr>
                                                         <!-- row -->
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Total Current Assets</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Total Current Assets</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.totalCurrentAssets,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.totalCurrentAssets,true)}</td>
                                                         {/each}
                                                     </tr>
                                                         <!-- row -->
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Property, Plant & Equipment</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Property, Plant & Equipment</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.propertyPlantEquipmentNet,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.propertyPlantEquipmentNet,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Goodwill & Intangibles</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Goodwill & Intangibles</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.goodwillAndIntangibleAssets,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.goodwillAndIntangibleAssets,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Total Long-Term Assets</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Total Long-Term Assets</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.totalNonCurrentAssets,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.totalNonCurrentAssets,true)}</td>
                                                         {/each}
                                                     </tr>
                                                         <!-- row -->
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Total Assets</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Total Assets</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.totalAssets,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.totalAssets,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Account Payables</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Account Payables</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.accountPayables,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.accountPayables,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Deferred Revenue</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Deferred Revenue</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.deferredRevenue,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.deferredRevenue,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Short-Term Debt</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Short-Term Debt</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.shortTermDebt,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.shortTermDebt,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Other Current Liabilities</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Other Current Liabilities</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.otherCurrentLiabilities,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.otherCurrentLiabilities,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Total Current Liabilities</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Total Current Liabilities</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.totalCurrentLiabilities,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.totalCurrentLiabilities,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Long-Term Debt</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Long-Term Debt</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.longTermDebt,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.longTermDebt,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Other Long-Term Liabilities</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Other Long-Term Liabilities</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.otherNonCurrentLiabilities,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.otherNonCurrentLiabilities,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Total Long-Term Liabilities</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Total Long-Term Liabilities</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.totalNonCurrentLiabilities,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.totalNonCurrentLiabilities,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Total Liabilities</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Total Liabilities</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.totalLiabilities,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.totalLiabilities,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Total Debt</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Total Debt</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.totalDebt,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.totalDebt,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Common Stock</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Common Stock</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.commonStock,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.commonStock,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Retained Earnings</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Retained Earnings</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.retainedEarnings,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.retainedEarnings,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Comprehensive Income</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Comprehensive Income</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.accumulatedOtherComprehensiveIncomeLoss,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.accumulatedOtherComprehensiveIncomeLoss,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Shareholders' Equity</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Shareholders' Equity</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.totalStockholdersEquity,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.totalStockholdersEquity,true)}</td>
                                                         {/each}
                                                     </tr>
-                                                    <tr class="text-white">
-                                                        <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Total Investments</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                        <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Total Investments</td>
                                                         {#each balanceSheet as balance}
-                                                        <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(balance?.totalInvestments,true)}</td>
+                                                        <td class=" text-xs sm:text-sm"> {abbreviateNumber(balance?.totalInvestments,true)}</td>
                                                         {/each}
                                                     </tr>
                                                     
diff --git a/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte b/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte
index 98798316..234e3305 100644
--- a/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/cash-flow/+page.svelte
@@ -525,7 +525,7 @@ $: {
                                 <table class="table w-full">
                                     <thead>
                                         <tr class="text-white ">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-sm sm:text-[1rem] font-bold pr-10">Year</td>
+                                            <td class="text-start border-r border-[#191E24] text-white text-sm sm:text-[1rem] font-bold pr-10">Year</td>
                                             {#each cashFlow as cash}
                                             {#if filterRule === 'annual'}
                                                 <td class="bg-[#0F0F0F] font-semibold pr-5 sm:pr-14 text-sm">
@@ -543,134 +543,134 @@ $: {
                             
                                         
                                         <!-- row -->
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Net Income</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Net Income</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.netIncome,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.netIncome,true)}</td>
                                             {/each}
                                         </tr>
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Depreciation & Amortization</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Depreciation & Amortization</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.depreciationAndAmortization,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.depreciationAndAmortization,true)}</td>
                                             {/each}
                                         </tr>
                                             <!-- row -->
-                                            <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Stock-Based Compensation</td>
+                                            <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Stock-Based Compensation</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.stockBasedCompensation,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.stockBasedCompensation,true)}</td>
                                             {/each}
                                         </tr>
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Other Working Capital</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Other Working Capital</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.otherWorkingCapital,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.otherWorkingCapital,true)}</td>
                                             {/each}
                                         </tr>
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Other Non-Cash Items</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Other Non-Cash Items</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.otherNonCashItems,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.otherNonCashItems,true)}</td>
                                             {/each}
                                         </tr>
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Deferred Income Tax</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Deferred Income Tax</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.deferredIncomeTax,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.deferredIncomeTax,true)}</td>
                                             {/each}
                                         </tr>
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Change in Working Capital</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Change in Working Capital</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.changeInWorkingCapital,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.changeInWorkingCapital,true)}</td>
                                             {/each}
                                         </tr>
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Operating Cash Flow</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Operating Cash Flow</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.netCashProvidedByOperatingActivities,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.netCashProvidedByOperatingActivities,true)}</td>
                                             {/each}
                                         </tr>
                                             <!-- row -->
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Capital Expenditures</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Capital Expenditures</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.capitalExpenditure,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.capitalExpenditure,true)}</td>
                                             {/each}
                                         </tr>
                                             <!-- row -->
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Acquisitions</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Acquisitions</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.acquisitionsNet,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.acquisitionsNet,true)}</td>
                                             {/each}
                                         </tr>
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Purchase of Investments</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Purchase of Investments</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.purchasesOfInvestments,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.purchasesOfInvestments,true)}</td>
                                             {/each}
                                         </tr>
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Sales Maturities Of Investments</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Sales Maturities Of Investments</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.salesMaturitiesOfInvestments,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.salesMaturitiesOfInvestments,true)}</td>
                                             {/each}
                                         </tr>
                                             <!-- row -->
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Other Investing Acitivies</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Other Investing Acitivies</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.otherInvestingActivites,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.otherInvestingActivites,true)}</td>
                                             {/each}
                                         </tr>
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Investing Cash Flow</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Investing Cash Flow</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.netCashUsedForInvestingActivites,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.netCashUsedForInvestingActivites,true)}</td>
                                             {/each}
                                         </tr>
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Debt Repayment</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Debt Repayment</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.debtRepayment,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.debtRepayment,true)}</td>
                                             {/each}
                                         </tr>
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Common Stock Repurchased</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Common Stock Repurchased</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.commonStockRepurchased,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.commonStockRepurchased,true)}</td>
                                             {/each}
                                         </tr>
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Dividend Paid</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Dividend Paid</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.dividendsPaid,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.dividendsPaid,true)}</td>
                                             {/each}
                                         </tr>
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Other Financial Acitivies</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Other Financial Acitivies</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.otherFinancingActivites,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.otherFinancingActivites,true)}</td>
                                             {/each}
                                         </tr>
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Financial Cash Flow</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Financial Cash Flow</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.netCashUsedProvidedByFinancingActivities,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.netCashUsedProvidedByFinancingActivities,true)}</td>
                                             {/each}
                                         </tr>
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Net Cash Flow</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Net Cash Flow</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.netChangeInCash,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.netChangeInCash,true)}</td>
                                             {/each}
                                         </tr>
-                                        <tr class="text-white">
-                                            <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Free Cash Flow</td>
+                                        <tr class="text-white odd:bg-[#202020]">
+                                            <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">Free Cash Flow</td>
                                             {#each cashFlow as cash}
-                                            <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.freeCashFlow,true)}</td>
+                                            <td class="text-xs sm:text-sm"> {abbreviateNumber(cash?.freeCashFlow,true)}</td>
                                             {/each}
                                         </tr> 
                                         </tbody>
diff --git a/src/routes/stocks/[tickerID]/stats/income/+page.svelte b/src/routes/stocks/[tickerID]/stats/income/+page.svelte
index 45a942e8..d026833f 100644
--- a/src/routes/stocks/[tickerID]/stats/income/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/income/+page.svelte
@@ -502,7 +502,7 @@ const exportData = (format = 'csv') => {
                                 </div>
                             </div>
                 
-                            <div class="app w-full h-[300px]  m-auto">
+                            <div class="app w-full h-[300px] m-auto">
                                 <Chart options={optionsData} class="chart" />
                             </div>
     
@@ -531,110 +531,110 @@ const exportData = (format = 'csv') => {
                                 
                                             
                                             <!-- row -->
-                                            <tr class="text-white">
-                                                <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Revenue</td>
+                                            <tr class="text-white odd:bg-[#202020]">
+                                                <td class="text-start border-r border-[#191E24] text-white  text-xs sm:text-sm">Revenue</td>
                                                 {#each income as cash}
-                                                <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.revenue,true)}</td>
+                                                <td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.revenue,true)}</td>
                                                 {/each}
                                             </tr>
-                                            <tr class="text-white">
-                                                <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Cost of Revenue</td>
+                                            <tr class="text-white odd:bg-[#202020]">
+                                                <td class="text-start border-r border-[#191E24] text-white  text-xs sm:text-sm">Cost of Revenue</td>
                                                 {#each income as cash}
-                                                <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.costOfRevenue,true)}</td>
+                                                <td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.costOfRevenue,true)}</td>
                                                 {/each}
                                             </tr>
                                                 <!-- row -->
-                                                <tr class="text-white">
-                                                <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Gross Profit</td>
+                                                <tr class="text-white odd:bg-[#202020]">
+                                                <td class="text-start border-r border-[#191E24] text-white  text-xs sm:text-sm">Gross Profit</td>
                                                 {#each income as cash}
-                                                <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.grossProfit,true)}</td>
+                                                <td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.grossProfit,true)}</td>
                                                 {/each}
                                             </tr>
-                                            <tr class="text-white">
-                                                <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Selling, General & Admin</td>
+                                            <tr class="text-white odd:bg-[#202020]">
+                                                <td class="text-start border-r border-[#191E24] text-white  text-xs sm:text-sm">Selling, General & Admin</td>
                                                 {#each income as cash}
-                                                <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.sellingGeneralAndAdministrativeExpenses,true)}</td>
+                                                <td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.sellingGeneralAndAdministrativeExpenses,true)}</td>
                                                 {/each}
                                             </tr>
-                                            <tr class="text-white">
-                                                <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Research & Development</td>
+                                            <tr class="text-white odd:bg-[#202020]">
+                                                <td class="text-start border-r border-[#191E24] text-white  text-xs sm:text-sm">Research & Development</td>
                                                 {#each income as cash}
-                                                <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.researchAndDevelopmentExpenses,true)}</td>
+                                                <td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.researchAndDevelopmentExpenses,true)}</td>
                                                 {/each}
                                             </tr>
-                                            <tr class="text-white">
-                                                <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Other Expenses</td>
+                                            <tr class="text-white odd:bg-[#202020]">
+                                                <td class="text-start border-r border-[#191E24] text-white  text-xs sm:text-sm">Other Expenses</td>
                                                 {#each income as cash}
-                                                <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.otherExpenses,true)}</td>
+                                                <td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.otherExpenses,true)}</td>
                                                 {/each}
                                             </tr>
-                                            <tr class="text-white">
-                                                <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Operating Expenses</td>
+                                            <tr class="text-white odd:bg-[#202020]">
+                                                <td class="text-start border-r border-[#191E24] text-white  text-xs sm:text-sm">Operating Expenses</td>
                                                 {#each income as cash}
-                                                <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.operatingExpenses,true)}</td>
+                                                <td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.operatingExpenses,true)}</td>
                                                 {/each}
                                             </tr>
-                                            <tr class="text-white">
-                                                <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Interest Expense</td>
+                                            <tr class="text-white odd:bg-[#202020]">
+                                                <td class="text-start border-r border-[#191E24] text-white  text-xs sm:text-sm">Interest Expense</td>
                                                 {#each income as cash}
-                                                <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.interestExpense,true)}</td>
+                                                <td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.interestExpense,true)}</td>
                                                 {/each}
                                             </tr>
                                                 <!-- row -->
-                                            <tr class="text-white">
-                                                <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Pretax Income</td>
+                                            <tr class="text-white odd:bg-[#202020]">
+                                                <td class="text-start border-r border-[#191E24] text-white  text-xs sm:text-sm">Pretax Income</td>
                                                 {#each income as cash}
-                                                <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.incomeBeforeTax,true)}</td>
+                                                <td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.incomeBeforeTax,true)}</td>
                                                 {/each}
                                             </tr>
                                                 <!-- row -->
-                                            <tr class="text-white">
-                                                <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Income Tax</td>
+                                            <tr class="text-white odd:bg-[#202020]">
+                                                <td class="text-start border-r border-[#191E24] text-white  text-xs sm:text-sm">Income Tax</td>
                                                 {#each income as cash}
-                                                <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.incomeTaxExpense,true)}</td>
+                                                <td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.incomeTaxExpense,true)}</td>
                                                 {/each}
                                             </tr>
-                                            <tr class="text-white">
-                                                <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Net Income</td>
+                                            <tr class="text-white odd:bg-[#202020]">
+                                                <td class="text-start border-r border-[#191E24] text-white  text-xs sm:text-sm">Net Income</td>
                                                 {#each income as cash}
-                                                <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.netIncome,true)}</td>
+                                                <td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.netIncome,true)}</td>
                                                 {/each}
                                             </tr>
-                                            <tr class="text-white">
-                                                <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Shares Outstanding (Basic)</td>
+                                            <tr class="text-white odd:bg-[#202020]">
+                                                <td class="text-start border-r border-[#191E24] text-white  text-xs sm:text-sm">Shares Outstanding (Basic)</td>
                                                 {#each income as cash}
-                                                <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.weightedAverageShsOut)}</td>
+                                                <td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.weightedAverageShsOut)}</td>
                                                 {/each}
                                             </tr>
                                                 <!-- row -->
-                                            <tr class="text-white">
-                                                <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Shares Outstanding (Diluted)</td>
+                                            <tr class="text-white odd:bg-[#202020]">
+                                                <td class="text-start border-r border-[#191E24] text-white  text-xs sm:text-sm">Shares Outstanding (Diluted)</td>
                                                 {#each income as cash}
-                                                <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.weightedAverageShsOutDil)}</td>
+                                                <td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.weightedAverageShsOutDil)}</td>
                                                 {/each}
                                             </tr>
-                                            <tr class="text-white">
-                                                <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">EPS (Basic)</td>
+                                            <tr class="text-white odd:bg-[#202020]">
+                                                <td class="text-start border-r border-[#191E24] text-white  text-xs sm:text-sm">EPS (Basic)</td>
                                                 {#each income as cash}
-                                                <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {cash?.eps?.toFixed(2)}</td>
+                                                <td class=" text-xs sm:text-sm"> {cash?.eps?.toFixed(2)}</td>
                                                 {/each}
                                             </tr>
-                                            <tr class="text-white">
-                                                <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">EPS (Diluted)</td>
+                                            <tr class="text-white odd:bg-[#202020]">
+                                                <td class="text-start border-r border-[#191E24] text-white  text-xs sm:text-sm">EPS (Diluted)</td>
                                                 {#each income as cash}
-                                                <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {cash?.epsdiluted?.toFixed(2)}</td>
+                                                <td class=" text-xs sm:text-sm"> {cash?.epsdiluted?.toFixed(2)}</td>
                                                 {/each}
                                             </tr>
-                                            <tr class="text-white">
-                                                <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">EBITDA</td>
+                                            <tr class="text-white odd:bg-[#202020]">
+                                                <td class="text-start border-r border-[#191E24] text-white  text-xs sm:text-sm">EBITDA</td>
                                                 {#each income as cash}
-                                                <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.ebitda,true)}</td>
+                                                <td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.ebitda,true)}</td>
                                                 {/each}
                                             </tr>
-                                            <tr class="text-white">
-                                                <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Depreciation & Amortization</td>
+                                            <tr class="text-white odd:bg-[#202020]">
+                                                <td class="text-start border-r border-[#191E24] text-white  text-xs sm:text-sm">Depreciation & Amortization</td>
                                                 {#each income as cash}
-                                                <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {abbreviateNumber(cash?.depreciationAndAmortization,true)}</td>
+                                                <td class=" text-xs sm:text-sm"> {abbreviateNumber(cash?.depreciationAndAmortization,true)}</td>
                                                 {/each}
                                             </tr>
 
diff --git a/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte b/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
index 4a5ca3f9..4d0f1c81 100644
--- a/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/ratios/+page.svelte
@@ -493,7 +493,7 @@ $: {
                                         <table class="table w-full">
                                             <thead>
                                                 <tr class="text-white ">
-                                                    <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white text-sm sm:text-[1rem] font-bold pr-10">Year</td>
+                                                    <td class="text-start border-r border-[#191E24] text-sm sm:text-[1rem] font-bold pr-10">Year</td>
                                                     {#each ratios as item}
                                                     {#if filterRule === 'annual'}
                                                         <td class="bg-[#0F0F0F] font-semibold pr-5 sm:pr-14 text-sm">
@@ -511,116 +511,116 @@ $: {
                                     
                                                 
                                                 <!-- row -->
-                                                <tr class="text-white">
-                                                    <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">PE Ratio</td>
+                                                <tr class="text-white odd:bg-[#202020]">
+                                                    <td class="text-start border-r border-[#191E24] text-xs sm:text-sm">PE Ratio</td>
                                                     {#each ratios as item}
-                                                    <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {item?.priceEarningsRatio?.toFixed(2)}</td>
+                                                    <td class="text-xs sm:text-sm"> {item?.priceEarningsRatio?.toFixed(2)}</td>
                                                     {/each}
                                                 </tr>
-                                                <tr class="text-white">
-                                                    <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">PS Ratio</td>
+                                                <tr class="text-white odd:bg-[#202020]">
+                                                    <td class="text-start border-r border-[#191E24]  text-xs sm:text-sm">PS Ratio</td>
                                                     {#each ratios as item}
-                                                    <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {item?.priceToSalesRatio?.toFixed(2)}</td>
+                                                    <td class="text-xs sm:text-sm"> {item?.priceToSalesRatio?.toFixed(2)}</td>
                                                     {/each}
                                                 </tr>
                                                     <!-- row -->
-                                                    <tr class="text-white">
-                                                    <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">PB Ratio</td>
+                                                    <tr class="text-white odd:bg-[#202020]">
+                                                    <td class="text-start border-r border-[#191E24]  text-xs sm:text-sm">PB Ratio</td>
                                                     {#each ratios as item}
-                                                    <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {item?.priceToBookRatio?.toFixed(2)}</td>
+                                                    <td class="text-xs sm:text-sm"> {item?.priceToBookRatio?.toFixed(2)}</td>
                                                     {/each}
                                                 </tr>
-                                                <tr class="text-white">
-                                                    <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">P/FCF Ratio</td>
+                                                <tr class="text-white odd:bg-[#202020]">
+                                                    <td class="text-start border-r border-[#191E24]  text-xs sm:text-sm">P/FCF Ratio</td>
                                                     {#each ratios as item}
-                                                    <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {item?.priceToFreeCashFlowsRatio?.toFixed(2)}</td>
+                                                    <td class="text-xs sm:text-sm"> {item?.priceToFreeCashFlowsRatio?.toFixed(2)}</td>
                                                     {/each}
                                                 </tr>
-                                                <tr class="text-white">
-                                                    <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">P/OCF Ratio</td>
+                                                <tr class="text-white odd:bg-[#202020]">
+                                                    <td class="text-start border-r border-[#191E24]  text-xs sm:text-sm">P/OCF Ratio</td>
                                                     {#each ratios as item}
-                                                    <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {item?.priceToOperatingCashFlowsRatio?.toFixed(2)}</td>
+                                                    <td class="text-xs sm:text-sm"> {item?.priceToOperatingCashFlowsRatio?.toFixed(2)}</td>
                                                     {/each}
                                                 </tr>
-                                                <tr class="text-white">
-                                                    <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">OCF/S Ratio</td>
+                                                <tr class="text-white odd:bg-[#202020]">
+                                                    <td class="text-start border-r border-[#191E24]  text-xs sm:text-sm">OCF/S Ratio</td>
                                                     {#each ratios as item}
-                                                    <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {item?.operatingCashFlowSalesRatio !== null ? item?.operatingCashFlowSalesRatio?.toFixed(2) : '-'}</td>
+                                                    <td class="text-xs sm:text-sm"> {item?.operatingCashFlowSalesRatio !== null ? item?.operatingCashFlowSalesRatio?.toFixed(2) : '-'}</td>
                                                     {/each}
                                                 </tr>
-                                                <tr class="text-white">
-                                                    <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Debt / Equity Ratio</td>
+                                                <tr class="text-white odd:bg-[#202020]">
+                                                    <td class="text-start border-r border-[#191E24]  text-xs sm:text-sm">Debt / Equity Ratio</td>
                                                     {#each ratios as item}
-                                                    <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {item?.debtEquityRatio?.toFixed(2)}</td>
+                                                    <td class="text-xs sm:text-sm"> {item?.debtEquityRatio?.toFixed(2)}</td>
                                                     {/each}
                                                 </tr>
                                                     <!-- row -->
-                                                <tr class="text-white">
-                                                    <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Quick Ratio</td>
+                                                <tr class="text-white odd:bg-[#202020]">
+                                                    <td class="text-start border-r border-[#191E24]  text-xs sm:text-sm">Quick Ratio</td>
                                                     {#each ratios as item}
-                                                    <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {item?.quickRatio?.toFixed(2)}</td>
+                                                    <td class="text-xs sm:text-sm"> {item?.quickRatio?.toFixed(2)}</td>
                                                     {/each}
                                                 </tr>
                                                     <!-- row -->
-                                                <tr class="text-white">
-                                                    <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Current Ratio</td>
+                                                <tr class="text-white odd:bg-[#202020]">
+                                                    <td class="text-start border-r border-[#191E24]  text-xs sm:text-sm">Current Ratio</td>
                                                     {#each ratios as item}
-                                                    <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {item?.currentRatio?.toFixed(2)}</td>
+                                                    <td class="text-xs sm:text-sm"> {item?.currentRatio?.toFixed(2)}</td>
                                                     {/each}
                                                 </tr>
-                                                <tr class="text-white">
-                                                    <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Asset Turnover</td>
+                                                <tr class="text-white odd:bg-[#202020]">
+                                                    <td class="text-start border-r border-[#191E24]  text-xs sm:text-sm">Asset Turnover</td>
                                                     {#each ratios as item}
-                                                    <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {item?.assetTurnover?.toFixed(2)}</td>
+                                                    <td class="text-xs sm:text-sm"> {item?.assetTurnover?.toFixed(2)}</td>
                                                     {/each}
                                                 </tr>
-                                                <tr class="text-white">
-                                                    <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Interest Coverage</td>
+                                                <tr class="text-white odd:bg-[#202020]">
+                                                    <td class="text-start border-r border-[#191E24]  text-xs sm:text-sm">Interest Coverage</td>
                                                     {#each ratios as item}
-                                                    <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {item?.interestCoverage?.toFixed(2)}</td>
+                                                    <td class="text-xs sm:text-sm"> {item?.interestCoverage?.toFixed(2)}</td>
                                                     {/each}
                                                 </tr>
                                                     <!-- row -->
-                                                <tr class="text-white">
-                                                    <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Return on Equity (ROE)</td>
+                                                <tr class="text-white odd:bg-[#202020]">
+                                                    <td class="text-start border-r border-[#191E24]  text-xs sm:text-sm">Return on Equity (ROE)</td>
                                                     {#each ratios as item}
-                                                    <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {(item?.returnOnEquity*100)?.toFixed(2)}%</td>
+                                                    <td class="text-xs sm:text-sm"> {(item?.returnOnEquity*100)?.toFixed(2)}%</td>
                                                     {/each}
                                                 </tr>
-                                                <tr class="text-white">
-                                                    <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Return on Assets (ROA)</td>
+                                                <tr class="text-white odd:bg-[#202020]">
+                                                    <td class="text-start border-r border-[#191E24]  text-xs sm:text-sm">Return on Assets (ROA)</td>
                                                     {#each ratios as item}
-                                                    <td class="bg-[#0F0F0F]  text-xs sm:text-sm">{(item?.returnOnAssets*100)?.toFixed(2)}%</td>
+                                                    <td class="text-xs sm:text-sm">{(item?.returnOnAssets*100)?.toFixed(2)}%</td>
                                                     {/each}
                                                 </tr>
-                                                <tr class="text-white">
-                                                    <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Return on Capital (ROIC)</td>
+                                                <tr class="text-white odd:bg-[#202020]">
+                                                    <td class="text-start border-r border-[#191E24]  text-xs sm:text-sm">Return on Capital (ROIC)</td>
                                                     {#each ratios as item}
-                                                    <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {(item?.returnOnCapitalEmployed*100)?.toFixed(2)}%</td>
+                                                    <td class="text-xs sm:text-sm"> {(item?.returnOnCapitalEmployed*100)?.toFixed(2)}%</td>
                                                     {/each}
                                                 </tr>
-                                                <tr class="text-white">
-                                                    <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Dividend Yield</td>
+                                                <tr class="text-white odd:bg-[#202020]">
+                                                    <td class="text-start border-r border-[#191E24]  text-xs sm:text-sm">Dividend Yield</td>
                                                     {#each ratios as item}
-                                                    <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {(item?.dividendYield*100)?.toFixed(2)}%</td>
+                                                    <td class="text-xs sm:text-sm"> {(item?.dividendYield*100)?.toFixed(2)}%</td>
                                                     {/each}
                                                 </tr>
-                                                <tr class="text-white">
-                                                    <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Payout Ratio</td>
+                                                <tr class="text-white odd:bg-[#202020]">
+                                                    <td class="text-start border-r border-[#191E24]  text-xs sm:text-sm">Payout Ratio</td>
                                                     {#each ratios as item}
-                                                    <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {(item?.payoutRatio*100)?.toFixed(2)}%</td>
+                                                    <td class="text-xs sm:text-sm"> {(item?.payoutRatio*100)?.toFixed(2)}%</td>
                                                     {/each}
                                                 </tr>
-                                                <tr class="text-white">
-                                                    <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Gross Profit Margin</td>
+                                                <tr class="text-white odd:bg-[#202020]">
+                                                    <td class="text-start border-r border-[#191E24]  text-xs sm:text-sm">Gross Profit Margin</td>
                                                     {#each ratios as item}
-                                                    <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {(item?.grossProfitMargin*100)?.toFixed(2)}%</td>
+                                                    <td class="text-xs sm:text-sm"> {(item?.grossProfitMargin*100)?.toFixed(2)}%</td>
                                                     {/each}
                                                 </tr>
-                                                <tr class="text-white">
-                                                    <td class="text-start border-r border-[#191E24] bg-[#0F0F0F] text-white  text-xs sm:text-sm">Net Profit Margin</td>
+                                                <tr class="text-white odd:bg-[#202020]">
+                                                    <td class="text-start border-r border-[#191E24]  text-xs sm:text-sm">Net Profit Margin</td>
                                                     {#each ratios as item}
-                                                    <td class="bg-[#0F0F0F]  text-xs sm:text-sm"> {(item?.netProfitMargin*100)?.toFixed(2)}%</td>
+                                                    <td class="text-xs sm:text-sm"> {(item?.netProfitMargin*100)?.toFixed(2)}%</td>
                                                     {/each}
                                                 </tr>
                                            </tbody>