ui fixes

src/lib/components/AnalystEstimate.svelte

@@ -434,7 +434,7 @@ function findIndex(data) {
           <div class="flex justify-center items-center h-80">
             <div class="relative">
               <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <span class="loading loading-spinner loading-md"></span>
+                <span class="loading loading-spinner loading-md text-gray-400"></span>
               </label>
             </div>
           </div>

src/lib/components/BorrowedShare.svelte

@@ -305,7 +305,7 @@ function findLowestAndHighestFee(data, lastDateStr) {
         <div class="flex justify-center items-center h-80">
             <div class="relative">
             <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <span class="loading loading-spinner loading-md"></span>
+                <span class="loading loading-spinner loading-md text-gray-400"></span>
             </label>
             </div>
         </div>

src/lib/components/ClinicalTrial.svelte

@@ -324,7 +324,7 @@ let charNumber = 20;
         <div class="flex justify-center items-center h-80">
             <div class="relative">
             <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <span class="loading loading-spinner loading-md"></span>
+                <span class="loading loading-spinner loading-md text-gray-400"></span>
             </label>
             </div>
         </div>

src/lib/components/CorporateLobbying.svelte

@@ -197,7 +197,7 @@ $: {
             <div class="flex justify-center items-center h-80">
                 <div class="relative">
                 <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                    <span class="loading loading-spinner loading-md"></span>
+                    <span class="loading loading-spinner loading-md text-gray-400"></span>
                 </label>
                 </div>
             </div>

src/lib/components/Correlation.svelte

@@ -152,7 +152,7 @@
     <div class="flex justify-center items-center h-80">
         <div class="relative">
         <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-            <span class="loading loading-spinner loading-md"></span>
+            <span class="loading loading-spinner loading-md text-gray-400"></span>
         </label>
         </div>
     </div>

src/lib/components/DCF.svelte

@@ -332,7 +332,7 @@ $: {
             <div class="flex justify-center items-center h-80">
                 <div class="relative">
                 <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                    <span class="loading loading-spinner loading-md"></span>
+                    <span class="loading loading-spinner loading-md text-gray-400"></span>
                 </label>
                 </div>
             </div>

src/lib/components/DarkPool.svelte

@@ -285,7 +285,7 @@ $: {
         <div class="flex justify-center items-center h-80">
             <div class="relative">
             <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <span class="loading loading-spinner loading-md"></span>
+                <span class="loading loading-spinner loading-md text-gray-400"></span>
             </label>
             </div>
         </div>

src/lib/components/Enterprise.svelte

@@ -235,7 +235,7 @@ $: {
             <div class="flex justify-center items-center h-80">
                 <div class="relative">
                 <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                    <span class="loading loading-spinner loading-md"></span>
+                    <span class="loading loading-spinner loading-md text-gray-400"></span>
                 </label>
                 </div>
             </div>  

src/lib/components/ExecutiveCard.svelte

@@ -165,7 +165,7 @@ afterUpdate(async() => {
     <div class="flex justify-center items-center h-80">
       <div class="relative">
         <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-          <span class="loading loading-spinner loading-md"></span>
+          <span class="loading loading-spinner loading-md text-gray-400"></span>
         </label>
       </div>
     </div>

src/lib/components/FOMCImpact.svelte

@@ -188,7 +188,7 @@ $: {
                     <div class="flex justify-start items-center w-full m-auto mt-6 overflow-x-scroll">
                     <table class="table table-sm table-compact w-full">
                       <thead>
-                        <tr>
+                        <tr class="border-b border-[#27272A]">
                           <th class="text-white font-semibold text-sm sm:text-[1rem] text-start bg-[#09090B]">Date</th>
                           <th class="text-white font-semibold text-sm sm:text-[1rem] text-end bg-[#09090B]">Previous</th>
                           <th class="text-white font-semibold text-sm sm:text-[1rem] text-end bg-[#09090B]">Forecast</th>

src/lib/components/FailToDeliver.svelte

@@ -307,7 +307,7 @@ function findLowestAndHighestPrice(data, lastDateStr) {
         <div class="flex justify-center items-center h-80">
             <div class="relative">
             <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <span class="loading loading-spinner loading-md"></span>
+                <span class="loading loading-spinner loading-md text-gray-400"></span>
             </label>
             </div>
         </div>

src/lib/components/GovernmentContract.svelte

@@ -274,7 +274,7 @@ use([BarChart, GridComponent, CanvasRenderer])
         <div class="flex justify-center items-center h-80">
             <div class="relative">
             <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <span class="loading loading-spinner loading-md"></span>
+                <span class="loading loading-spinner loading-md text-gray-400"></span>
             </label>
             </div>
         </div>

src/lib/components/ImpliedVolatility.svelte

@@ -359,7 +359,7 @@ function changeStatement(event)
         <div class="flex justify-center items-center h-80">
             <div class="relative">
             <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <span class="loading loading-spinner loading-md"></span>
+                <span class="loading loading-spinner loading-md text-gray-400"></span>
             </label>
             </div>
         </div>

src/lib/components/Lazy.svelte

@@ -22,7 +22,7 @@
 	<div bind:this={el} class="flex justify-center items-center h-80">
 		<div class="relative">
 		  <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-			<span class="loading loading-spinner loading-md"></span>
+			<span class="loading loading-spinner loading-md text-gray-400"></span>
 		  </label>
 		</div>
 	  </div>  

src/lib/components/LoginPopup.svelte

@@ -386,7 +386,7 @@ function handleHoverGithub() {
 	<div class="absolute right-1/2 left-1/2 top-1/2 bottom-1/2">
 		<div class="relative">
 			<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-				<span class="loading loading-spinner loading-md"></span>
+				<span class="loading loading-spinner loading-md text-gray-400"></span>
 			</label>
 		</div>  
 	</div>

src/lib/components/OptionsNetFlow.svelte

@@ -231,7 +231,7 @@
         <div class="flex justify-center items-center h-80">
             <div class="relative">
             <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <span class="loading loading-spinner loading-md"></span>
+                <span class="loading loading-spinner loading-md text-gray-400"></span>
             </label>
             </div>
         </div>

src/lib/components/PriceAnalysis.svelte

@@ -272,7 +272,7 @@ onMount(async () => {
             <div class="flex justify-center items-center h-80">
               <div class="relative">
                 <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                  <span class="loading loading-spinner loading-md"></span>
+                  <span class="loading loading-spinner loading-md text-gray-400"></span>
                 </label>
               </div>
             </div>  

src/lib/components/RetailVolume.svelte

@@ -318,7 +318,7 @@ $: {
             <div class="flex justify-center items-center h-80">
                 <div class="relative">
                 <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                    <span class="loading loading-spinner loading-md"></span>
+                    <span class="loading loading-spinner loading-md text-gray-400"></span>
                 </label>
                 </div>
             </div>

src/lib/components/RevenueSegmentation.svelte

@@ -261,7 +261,7 @@ $: charNumber = $screenWidth < 640 ? 25 :40;
         <div class="flex justify-center items-center h-80">
           <div class="relative">
             <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-              <span class="loading loading-spinner loading-md"></span>
+              <span class="loading loading-spinner loading-md text-gray-400"></span>
             </label>
           </div>
         </div>

src/lib/components/SECFilingsCard.svelte

@@ -219,7 +219,7 @@ $: {
       <div class="flex justify-center items-center h-80">
         <div class="relative">
           <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-            <span class="loading loading-spinner loading-md"></span>
+            <span class="loading loading-spinner loading-md text-gray-400"></span>
           </label>
         </div>
       </div>  

src/lib/components/Searchbar.svelte

@@ -510,7 +510,7 @@ $: {
     <div class="flex justify-center items-center m-auto mt-4 py-20">
       <div class="relative">
         <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-          <span class="loading loading-spinner loading-md"></span>
+          <span class="loading loading-spinner loading-md text-gray-400"></span>
         </label>
     </div>  
     </div>

src/lib/components/ShareHolders.svelte

@@ -389,7 +389,7 @@ let charNumber = 30;
                 <div class="flex justify-center items-center h-80">
                     <div class="relative">
                     <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                        <span class="loading loading-spinner loading-md"></span>
+                        <span class="loading loading-spinner loading-md text-gray-400"></span>
                     </label>
                     </div>
                 </div>  

src/lib/components/Swap.svelte

@@ -258,7 +258,7 @@
         <div class="flex justify-center items-center h-80">
             <div class="relative">
             <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <span class="loading loading-spinner loading-md"></span>
+                <span class="loading loading-spinner loading-md text-gray-400"></span>
             </label>
             </div>
         </div>

src/lib/components/TARating.svelte

@@ -193,7 +193,7 @@ $: if ($assetType || $stockTicker || $etfTicker || $cryptoTicker) {
           <div class="flex justify-center items-center h-80">
               <div class="relative">
               <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                  <span class="loading loading-spinner loading-md"></span>
+                  <span class="loading loading-spinner loading-md text-gray-400"></span>
               </label>
               </div>
           </div>

src/lib/components/TrendAnalysis.svelte

@@ -208,7 +208,7 @@ $: {
           <div class="flex justify-center items-center h-80">
             <div class="relative">
               <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <span class="loading loading-spinner loading-md"></span>
+                <span class="loading loading-spinner loading-md text-gray-400"></span>
               </label>
             </div>
           </div>  
@@ -218,7 +218,7 @@ $: {
           <div class="flex justify-center items-center h-80">
             <div class="relative">
               <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <span class="loading loading-spinner loading-md"></span>
+                <span class="loading loading-spinner loading-md text-gray-400"></span>
               </label>
             </div>
           </div>  

src/lib/components/WIIM.svelte

@@ -130,7 +130,7 @@ $: {
             <div class="flex justify-center items-center h-80">
                 <div class="relative">
                 <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                    <span class="loading loading-spinner loading-md"></span>
+                    <span class="loading loading-spinner loading-md text-gray-400"></span>
                 </label>
                 </div>
             </div>

src/routes/analysts/+page.svelte

@@ -224,7 +224,7 @@ $: {
                   <div class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden">
                     <table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
                       <thead>
-                        <tr class="bg-[#09090B]">
+                        <tr class="bg-[#09090B] border-b border-[#27272A]">
                           <th on:click={() => { sortBy = 'rank'; changeOrder(order); }} class="cursor-pointer text-center bg-[#09090B] text-white text-[1rem] font-semibold">
                             Rank
                             <svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'rank' ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
@@ -260,7 +260,7 @@ $: {
                       <tbody>
                         {#each analytRatingList as item, index}
 
-                        <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === rawData?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
+                        <tr class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === rawData?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                           <td class="text-white text-sm sm:text-[1rem] font-semibold text-white text-center">
                             {item?.rank}
                           </td>
@@ -333,7 +333,7 @@ $: {
                   <div class="flex justify-center items-center h-80">
                     <div class="relative">
                     <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                        <span class="loading loading-spinner loading-md"></span>
+                        <span class="loading loading-spinner loading-md text-gray-400"></span>
                     </label>
                     </div>
                   </div>

src/routes/analysts/top-stocks/+page.svelte

@@ -218,7 +218,7 @@ $: {
                     <div class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden">
                       <table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
                         <thead>
-                          <tr class="bg-[#09090B]">
+                          <tr class="bg-[#09090B] border-b border-[#27272A]">
                             <th on:click={() => { sortBy = 'rank'; changeOrder(order); }} class="cursor-pointer text-center bg-[#09090B] text-white text-[1rem] font-semibold">
                               Rank
                               <svg class="w-5 h-5 inline-block {order === 'highToLow' && sortBy === 'rank' ? 'rotate-180' : ''}" viewBox="0 0 20 20" fill="currentColor" style="max-width:40px"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
@@ -253,7 +253,7 @@ $: {
                         <tbody>
                           {#each analytRatingList as item, index}
   
-                          <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === rawData?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
+                          <tr class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === rawData?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                             <td class="text-white text-sm sm:text-[1rem] whitespace-nowrap font-medium text-white text-center">
                               {item?.rank}
                             </td>
@@ -304,7 +304,7 @@ $: {
                     <div class="flex justify-center items-center h-80">
                       <div class="relative">
                       <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                          <span class="loading loading-spinner loading-md"></span>
+                          <span class="loading loading-spinner loading-md text-gray-400"></span>
                       </label>
                       </div>
                     </div>

src/routes/community/post/[postId]/+page.svelte

@@ -848,7 +848,7 @@ function updateVote(postVote) {
                                       <div class="flex justify-center items-center h-80">
                                         <div class="relative">
                                         <label class="bg-[#141417] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                                            <span class="loading loading-spinner loading-md"></span>
+                                            <span class="loading loading-spinner loading-md text-gray-400"></span>
                                         </label>
                                         </div>
                                     </div>

src/routes/corporate-lobbying-tracker/+page.svelte

@@ -180,7 +180,7 @@ $: charNumber = $screenWidth < 640 ? 15 : 20;
                       <div class="w-screen sm:w-full rounded-none sm:rounded-lg mb-4 overflow-x-scroll lg:overflow-hidden">
                         <table class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
                           <thead>
-                            <tr class="bg-[#09090B]">
+                            <tr class="bg-[#09090B] border-b border-[#27272A]">
                               <th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
                                 Date
                               </th>
@@ -203,7 +203,7 @@ $: charNumber = $screenWidth < 640 ? 15 : 20;
                           <tbody>
                             {#each displayList as item, index}
     
-                            <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === displayList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
+                            <tr class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === displayList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
    
 
                             <td class="text-start text-sm sm:text-[1rem] text-white whitespace-nowrap">
@@ -250,7 +250,7 @@ $: charNumber = $screenWidth < 640 ? 15 : 20;
                   <div class="flex justify-center items-center h-80">
                     <div class="relative">
                       <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                        <span class="loading loading-spinner loading-md"></span>
+                        <span class="loading loading-spinner loading-md text-gray-400"></span>
                       </label>
                     </div>
                   </div>  

src/routes/cramer-tracker/+page.svelte

@@ -421,7 +421,7 @@ rawData?.forEach(item => {
                       <div class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll">
                         <table class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
                           <thead>
-                            <tr class="bg-[#09090B]">
+                            <tr class="bg-[#09090B] border-b border-[#27272A]">
                               <th class="text-start bg-[#09090B] text-white text-[1rem] font-semibold">
                                 Company Name
                               </th>
@@ -442,7 +442,7 @@ rawData?.forEach(item => {
                           <tbody>
                             {#each displayList as item, index}
     
-                            <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]">
+                            <tr class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A]">
    
                               <td class="text-sm sm:text-[1rem] text-start whitespace-nowrap">
                                 {#if index >= 5 && data?.user?.tier !== 'Pro'}
@@ -518,7 +518,7 @@ rawData?.forEach(item => {
                   <div class="flex justify-center items-center h-80">
                     <div class="relative">
                       <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                        <span class="loading loading-spinner loading-md"></span>
+                        <span class="loading loading-spinner loading-md text-gray-400"></span>
                       </label>
                     </div>
                   </div>  

src/routes/crypto/[tickerID]/+page.svelte

@@ -1051,7 +1051,7 @@ afterUpdate(async () => {
                                       <div class="flex justify-center w-full sm:w-[650px] h-80 sm:w-[600px] items-center">
                                         <div class="relative">
                                           <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                                            <span class="loading loading-spinner loading-md"></span>
+                                            <span class="loading loading-spinner loading-md text-gray-400"></span>
                                           </label>
                                       </div>  
                                     </div>

src/routes/crypto/[tickerID]/congress-trading/+page.svelte

@@ -405,7 +405,7 @@ onMount(async () => {
                       <div class="flex justify-center items-center h-80">
                         <div class="relative">
                         <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                            <span class="loading loading-spinner loading-md"></span>
+                            <span class="loading loading-spinner loading-md text-gray-400"></span>
                         </label>
                         </div>
                     </div>

src/routes/dividends-calendar/+page.svelte

@@ -365,7 +365,7 @@ $: {
                   <div class="w-full overflow-x-scroll no-scrollbar">  
                     <table class="table table-sm table-compact rounded-none sm:rounded-md w-full border-[#09090B] m-auto mt-4 ">
                         <thead>
-                          <tr class="whitespace-nowrap">
+                          <tr class="whitespace-nowrap border-b border-[#27272A]">
                             <th class="text-white font-semibold text-sm">Symbol</th>
                             <th class="text-white font-semibold text-sm">Company Name</th>
                             <th class="text-white font-semibold text-sm">Market Cap</th>

src/routes/economic-indicator/+page.svelte

@@ -780,7 +780,7 @@ onMount(async () => {
                 <div class="flex justify-center items-center h-80">
                   <div class="relative">
                     <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                      <span class="loading loading-spinner loading-md"></span>
+                      <span class="loading loading-spinner loading-md text-gray-400"></span>
                     </label>
                   </div>
                 </div>  

src/routes/etf/[tickerID]/+page.svelte

@@ -1200,7 +1200,7 @@ async function exportData() {
                                       <div class="flex justify-center w-full sm:w-[650px] h-80 sm:w-[600px] items-center">
                                         <div class="relative">
                                           <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                                            <span class="loading loading-spinner loading-md"></span>
+                                            <span class="loading loading-spinner loading-md text-gray-400"></span>
                                           </label>
                                       </div>  
                                     </div>

src/routes/etf/[tickerID]/congress-trading/+page.svelte

@@ -405,7 +405,7 @@ onMount(async () => {
                       <div class="flex justify-center items-center h-80">
                         <div class="relative">
                         <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                            <span class="loading loading-spinner loading-md"></span>
+                            <span class="loading loading-spinner loading-md text-gray-400"></span>
                         </label>
                         </div>
                     </div>

src/routes/etf/[tickerID]/dividends/+page.svelte

@@ -307,7 +307,7 @@
                       <div class="flex justify-center items-center h-80">
                           <div class="relative">
                           <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                              <span class="loading loading-spinner loading-md"></span>
+                              <span class="loading loading-spinner loading-md text-gray-400"></span>
                           </label>
                           </div>
                       </div>

src/routes/etf/[tickerID]/options/+page.svelte

@@ -1062,7 +1062,7 @@ $: {
         <div class="m-auto flex justify-center items-center h-80">
             <div class="relative">
             <label class="bg-[#272727] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <span class="loading loading-spinner loading-md"></span>
+                <span class="loading loading-spinner loading-md text-gray-400"></span>
             </label>
             </div>
         </div>

src/routes/etf/new-launches/+page.svelte

@@ -124,7 +124,7 @@ $: charNumber = $screenWidth < 640 ? 30 : 40
     <div class="w-full overflow-x-scroll">
     <table class="mt-5 table table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto overflow-hidden">
       <thead>
-        <tr>
+        <tr class="border-b border-[#27272A]">
           <th class="text-white font-semibold text-[1rem]">Inception</th>
           <th class="text-white font-semibold text-[1rem]">Symbol</th>
           <th class="text-white font-semibold text-[1rem] ">Fund Name</th>

src/routes/fda-calendar/+page.svelte

@@ -234,7 +234,7 @@
                 <div class="flex justify-center items-center h-80">
                   <div class="relative">
                     <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                      <span class="loading loading-spinner loading-md"></span>
+                      <span class="loading loading-spinner loading-md text-gray-400"></span>
                     </label>
                   </div>
                 </div>  

src/routes/heatmaps/+page.svelte

@@ -430,7 +430,7 @@ $: {
         <div class="flex justify-center items-center h-80">
           <div class="relative">
           <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-              <span class="loading loading-spinner loading-md"></span>
+              <span class="loading loading-spinner loading-md text-gray-400"></span>
           </label>
           </div>
       </div>

src/routes/hedge-funds/+page.svelte

@@ -251,7 +251,7 @@ async function handleInput(event) {
       <div class="flex justify-center items-center h-80">
         <div class="relative">
         <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-            <span class="loading loading-spinner loading-md"></span>
+            <span class="loading loading-spinner loading-md text-gray-400"></span>
         </label>
         </div>
     </div>

src/routes/ipos/+page.svelte

@@ -140,7 +140,7 @@
     <div class="flex justify-center items-center h-80">
       <div class="relative">
       <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-          <span class="loading loading-spinner loading-md"></span>
+          <span class="loading loading-spinner loading-md text-gray-400"></span>
       </label>
       </div>
   </div>

src/routes/ipos/[slug]/+page.svelte

@@ -141,7 +141,7 @@ $: {
    <div class="w-full overflow-x-scroll">
     <table class="mt-5 table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto overflow-hidden">
       <thead>
-        <tr>
+        <tr class="border-b border-[#27272A]">
           <th class="text-white font-medium text-[1rem] text-start">IPO Date</th>
           <th class="text-white font-medium text-[1rem] text-start">Symbol</th>
           <th class="text-white font-medium text-[1rem]">Name</th>
@@ -216,7 +216,7 @@ $: {
   <div class="flex justify-center items-center h-80">
     <div class="relative">
     <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-        <span class="loading loading-spinner loading-md"></span>
+        <span class="loading loading-spinner loading-md text-gray-400"></span>
     </label>
     </div>
 </div>

src/routes/list/basic-materials-sector/+page.svelte

@@ -239,7 +239,7 @@ function getPlotOptions() {
             <div class="flex justify-center items-center h-80">
               <div class="relative">
               <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                  <span class="loading loading-spinner loading-md"></span>
+                  <span class="loading loading-spinner loading-md text-gray-400"></span>
               </label>
               </div>
             </div>

src/routes/list/communication-services-sector/+page.svelte

@@ -239,7 +239,7 @@ function getPlotOptions() {
             <div class="flex justify-center items-center h-80">
               <div class="relative">
               <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                  <span class="loading loading-spinner loading-md"></span>
+                  <span class="loading loading-spinner loading-md text-gray-400"></span>
               </label>
               </div>
             </div>

src/routes/list/consumer-cyclical-sector/+page.svelte

@@ -239,7 +239,7 @@ function getPlotOptions() {
             <div class="flex justify-center items-center h-80">
               <div class="relative">
               <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                  <span class="loading loading-spinner loading-md"></span>
+                  <span class="loading loading-spinner loading-md text-gray-400"></span>
               </label>
               </div>
             </div>

src/routes/list/consumer-defensive-sector/+page.svelte

@@ -239,7 +239,7 @@ function getPlotOptions() {
             <div class="flex justify-center items-center h-80">
               <div class="relative">
               <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                  <span class="loading loading-spinner loading-md"></span>
+                  <span class="loading loading-spinner loading-md text-gray-400"></span>
               </label>
               </div>
             </div>

src/routes/list/energy-sector/+page.svelte

@@ -239,7 +239,7 @@ function getPlotOptions() {
             <div class="flex justify-center items-center h-80">
               <div class="relative">
               <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                  <span class="loading loading-spinner loading-md"></span>
+                  <span class="loading loading-spinner loading-md text-gray-400"></span>
               </label>
               </div>
             </div>

src/routes/list/financial-sector/+page.svelte

@@ -241,7 +241,7 @@ function getPlotOptions() {
             <div class="flex justify-center items-center h-80">
               <div class="relative">
               <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                  <span class="loading loading-spinner loading-md"></span>
+                  <span class="loading loading-spinner loading-md text-gray-400"></span>
               </label>
               </div>
             </div>

src/routes/list/healthcare-sector/+page.svelte

@@ -239,7 +239,7 @@ function getPlotOptions() {
             <div class="flex justify-center items-center h-80">
               <div class="relative">
               <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                  <span class="loading loading-spinner loading-md"></span>
+                  <span class="loading loading-spinner loading-md text-gray-400"></span>
               </label>
               </div>
             </div>

src/routes/list/industrials-sector/+page.svelte

@@ -239,7 +239,7 @@ function getPlotOptions() {
             <div class="flex justify-center items-center h-80">
               <div class="relative">
               <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                  <span class="loading loading-spinner loading-md"></span>
+                  <span class="loading loading-spinner loading-md text-gray-400"></span>
               </label>
               </div>
             </div>

src/routes/list/industry/[slug]/+page.svelte

@@ -150,7 +150,7 @@ function getPlotOptions() {
               <div class="flex justify-center items-center h-80">
                 <div class="relative">
                 <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                    <span class="loading loading-spinner loading-md"></span>
+                    <span class="loading loading-spinner loading-md text-gray-400"></span>
                 </label>
                 </div>
               </div>

src/routes/list/real-estate-sector/+page.svelte

@@ -239,7 +239,7 @@ function getPlotOptions() {
             <div class="flex justify-center items-center h-80">
               <div class="relative">
               <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                  <span class="loading loading-spinner loading-md"></span>
+                  <span class="loading loading-spinner loading-md text-gray-400"></span>
               </label>
               </div>
             </div>

src/routes/list/technology-sector/+page.svelte

@@ -239,7 +239,7 @@ function getPlotOptions() {
             <div class="flex justify-center items-center h-80">
               <div class="relative">
               <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                  <span class="loading loading-spinner loading-md"></span>
+                  <span class="loading loading-spinner loading-md text-gray-400"></span>
               </label>
               </div>
             </div>

src/routes/list/utilities-sector/+page.svelte

@@ -239,7 +239,7 @@ function getPlotOptions() {
             <div class="flex justify-center items-center h-80">
               <div class="relative">
               <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                  <span class="loading loading-spinner loading-md"></span>
+                  <span class="loading loading-spinner loading-md text-gray-400"></span>
               </label>
               </div>
             </div>

src/routes/login/+page.svelte

@@ -216,7 +216,7 @@
 	<div class="absolute right-1/2 left-1/2 top-1/2 bottom-1/2">
 		<div class="relative">
 			<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-				<span class="loading loading-spinner loading-md"></span>
+				<span class="loading loading-spinner loading-md text-gray-400"></span>
 			</label>
 		</div>  
 	</div>

src/routes/market-mover/+page.svelte

@@ -376,7 +376,7 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
     <div class="w-full overflow-x-scroll no-scrollbar">
       <table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B]">
         <thead>
-          <tr>
+          <tr class="border-b border-[#27272A]">
             <th class="text-white font-semibold text-[1rem] whitespace-nowrap">Symbol</th>
             <th class="text-white font-semibold text-[1rem] whitespace-nowrap">Name</th>
             <th on:click={() => { sortBy = 'change'; changeOrder(order); }} class="whitespace-nowrap cursor-pointer text-white font-semibold text-[1rem] text-end">
@@ -399,7 +399,7 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
         </thead>
         <tbody>
           {#each gainerLoserActive as item, index}
-          <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] cursor-pointer">
+          <tr on:click={() => goto("/stocks/"+item?.symbol)} class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] cursor-pointer">
     
           <td class="border-b-[#09090B] text-sm sm:text-[1rem] whitespace-nowrap">
              <a href={"/stocks/"+item?.symbol} class="sm:hover:text-white text-blue-400">
@@ -449,7 +449,7 @@ $: charNumber = $screenWidth < 640 ? 20 : 30;
   <div class="flex justify-center items-center h-80">
     <div class="relative">
     <label class="bg-[#09090B] rounded-lg h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-        <span class="loading loading-spinner loading-md"></span>
+        <span class="loading loading-spinner loading-md text-gray-400"></span>
     </label>
     </div>
 </div>

src/routes/most-retail-volume/+page.svelte

@@ -152,7 +152,7 @@ async function handleScroll() {
                     <div class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden">
                       <table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
                         <thead>
-                          <tr class="bg-[#09090B]">
+                          <tr class="bg-[#09090B] border-b border-[#27272A]">
                             <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
                               #
                             </th>
@@ -178,7 +178,7 @@ async function handleScroll() {
                         <tbody>
                           {#each stockList as item, index}
   
-                          <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === stockList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
+                          <tr class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === stockList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                             <td class="text-white text-sm sm:text-[1rem] font-medium text-white text-end">
                               {index+1}
                             </td>
@@ -221,7 +221,7 @@ async function handleScroll() {
                 <div class="flex justify-center items-center h-80">
                   <div class="relative">
                     <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                      <span class="loading loading-spinner loading-md"></span>
+                      <span class="loading loading-spinner loading-md text-gray-400"></span>
                     </label>
                   </div>
                 </div>  

src/routes/most-shorted-stocks/+page.svelte

@@ -137,7 +137,7 @@ async function handleScroll() {
                     <div class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden">
                       <table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
                         <thead>
-                          <tr class="bg-[#09090B]">
+                          <tr class="bg-[#09090B] border-b border-[#27272A]">
                             <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
                               #
                             </th>
@@ -165,7 +165,7 @@ async function handleScroll() {
                         <tbody>
                           {#each stockList as item, index}
   
-                          <tr on:click={() => goto(`/stocks/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === stockList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
+                          <tr on:click={() => goto(`/stocks/${item?.symbol}`)} class="border-b border-[#27272A] sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === stockList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                             <td class="text-white text-sm sm:text-[1rem] font-medium text-white text-end">
                               {index+1}
                             </td>
@@ -212,7 +212,7 @@ async function handleScroll() {
                 <div class="flex justify-center items-center h-80">
                   <div class="relative">
                     <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                      <span class="loading loading-spinner loading-md"></span>
+                      <span class="loading loading-spinner loading-md text-gray-400"></span>
                     </label>
                   </div>
                 </div>  

src/routes/notifications/+page.svelte

@@ -226,7 +226,7 @@ onMount(async () => {
          <div class="flex justify-center items-center h-80">
           <div class="relative">
           <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-              <span class="loading loading-spinner loading-md"></span>
+              <span class="loading loading-spinner loading-md text-gray-400"></span>
           </label>
           </div>
       </div>

src/routes/options-flow/+page.svelte

@@ -1386,7 +1386,7 @@ $: {
           <div class="flex justify-center items-center h-80">
             <div class="relative">
             <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <span class="loading loading-spinner loading-md"></span>
+                <span class="loading loading-spinner loading-md text-gray-400"></span>
             </label>
             </div>
         </div>

src/routes/politicians/+page.svelte

@@ -299,7 +299,7 @@ onMount(async () => {
       <div class="flex justify-center items-center h-80">
         <div class="relative">
         <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-            <span class="loading loading-spinner loading-md"></span>
+            <span class="loading loading-spinner loading-md text-gray-400"></span>
         </label>
         </div>
     </div>

src/routes/politicians/flow-data/+page.svelte

@@ -432,7 +432,7 @@
                       <div class="w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden">
                         <table class="table table-sm sm:table-md table-pin-cols table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
                           <thead>
-                            <tr class="bg-[#09090B]">
+                            <tr class="bg-[#09090B] border-b border-[#27272A]">
                               <th class="bg-[#09090B] text-start bg-[#09090B] text-white text-sm font-medium sm:font-semibold">
                                 Person
                               </th>
@@ -514,7 +514,7 @@
       <div class="flex justify-center items-center h-80">
         <div class="relative">
         <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-            <span class="loading loading-spinner loading-md"></span>
+            <span class="loading loading-spinner loading-md text-gray-400"></span>
         </label>
         </div>
     </div>

src/routes/price-alert/+page.svelte

@@ -395,7 +395,7 @@ $: charNumber = $screenWidth < 640 ? 15 : 40;
         <div class="flex justify-center items-center h-80">
           <div class="relative">
           <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-              <span class="loading loading-spinner loading-md"></span>
+              <span class="loading loading-spinner loading-md text-gray-400"></span>
           </label>
           </div>
       </div>

src/routes/reddit-tracker/+page.svelte

@@ -525,7 +525,7 @@ const optionCompanySpread = {
                   <div class="flex justify-center items-center h-80">
                     <div class="relative">
                       <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                        <span class="loading loading-spinner loading-md"></span>
+                        <span class="loading loading-spinner loading-md text-gray-400"></span>
                       </label>
                     </div>
                   </div>  

src/routes/register/+page.svelte

@@ -242,7 +242,7 @@
 	<div class="absolute right-1/2 left-1/2 top-1/2 bottom-1/2">
 		<div class="relative">
 			<label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-				<span class="loading loading-spinner loading-md"></span>
+				<span class="loading loading-spinner loading-md text-gray-400"></span>
 			</label>
 		</div>  
 	</div>

src/routes/sentiment-tracker/+page.svelte

@@ -200,7 +200,7 @@ async function handleScroll() {
                     <div class="w-screen sm:w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden">
                       <table class="table table-sm table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
                         <thead>
-                          <tr class="bg-[#09090B]">
+                          <tr class="bg-[#09090B] border-b border-[#27272A]">
                             <th class="text-end bg-[#09090B] text-white text-[1rem] font-semibold">
                               #
                             </th>
@@ -230,7 +230,7 @@ async function handleScroll() {
                         <tbody>
                           {#each stockList as item, index}
   
-                          <tr class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === stockList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
+                          <tr class="sm:hover:bg-[#245073] border-b border-[#27272A] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] {index+1 === stockList?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                             <td class="text-white text-sm sm:text-[1rem] font-medium text-white text-end">
                               {item?.rank}
                             </td>
@@ -279,7 +279,7 @@ async function handleScroll() {
                 <div class="flex justify-center items-center h-80">
                   <div class="relative">
                     <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                      <span class="loading loading-spinner loading-md"></span>
+                      <span class="loading loading-spinner loading-md text-gray-400"></span>
                     </label>
                   </div>
                 </div>  

src/routes/stock-screener/+page.svelte

@@ -1145,7 +1145,7 @@ function handleInput(event) {
                                     <div class="flex items-center justify-start gap-x-1">
                                         <div class="relative inline-block flex flex-row items-center justify-center">
                                             <label on:click={() => changeRuleCondition(row?.rule, 'under')} class="cursor-pointer flex flex-row mr-2 justify-center items-center">
-                                              <input type="radio" class="radio checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" 
+                                              <input type="radio" class="radio ring-0 checked:bg-purple-600 bg-[#09090B] border border-slate-800 mr-2" 
                                                   checked={ruleCondition[row?.rule] === 'under'} name={row?.rule} />
                                               <span class="label-text text-white">Under</span> 
                                             </label>
@@ -1456,7 +1456,7 @@ function handleInput(event) {
                   <div class="flex justify-center items-center h-80">
                     <div class="relative">
                     <label class="bg-[#262626] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                        <span class="loading loading-spinner loading-md"></span>
+                        <span class="loading loading-spinner loading-md text-gray-400"></span>
                     </label>
                     </div>
                   </div>

src/routes/stocks/[tickerID]/+page.svelte

@@ -955,7 +955,7 @@ async function exportData() {
             <div class="flex justify-center w-full sm:w-[650px] h-80 sm:w-[600px] items-center">
               <div class="relative">
                 <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                  <span class="loading loading-spinner loading-md"></span>
+                  <span class="loading loading-spinner loading-md text-gray-400"></span>
                 </label>
               </div>
             </div>

src/routes/stocks/[tickerID]/dividends/+page.svelte

@@ -307,7 +307,7 @@
                       <div class="flex justify-center items-center h-80">
                           <div class="relative">
                           <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                              <span class="loading loading-spinner loading-md"></span>
+                              <span class="loading loading-spinner loading-md text-gray-400"></span>
                           </label>
                           </div>
                       </div>

src/routes/stocks/[tickerID]/forecast/analyst/+page.svelte

@@ -241,7 +241,7 @@ changeTab(0)
                           <div class="w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll sm:overflow-hidden">
                             <table class="table table-sm table-compact no-scrollbar rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
                                 <thead class="">
-                                  <tr class="">
+                                  <tr class="border-b border-[#27272A]">
                                     <td class="text-white font-semibold text-[1rem] text-start">Analyst</td>
                                     <td class="text-white font-semibold text-[1rem] text-start">Rating</td>
                                     <td class="text-white font-semibold text-[1rem] text-end">Date</td>

src/routes/stocks/[tickerID]/insider/+page.svelte

@@ -358,7 +358,7 @@ const transactionStyles = {
                   <div class="flex justify-center items-center h-80">
                     <div class="relative">
                     <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                        <span class="loading loading-spinner loading-md"></span>
+                        <span class="loading loading-spinner loading-md text-gray-400"></span>
                     </label>
                     </div>
                 </div>

src/routes/stocks/[tickerID]/insider/congress-trading/+page.svelte

@@ -200,7 +200,7 @@ onMount(async () => {
                       <div class="mt-6 flex justify-start items-center w-full m-auto rounded-none sm:rounded-lg mb-4 overflow-x-scroll">
                         <table class="table table-sm sm:table-md table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
                           <thead>
-                            <tr class="bg-[#09090B]">
+                            <tr class="bg-[#09090B] border-b border-[#27272A]">
                               <th class="shadow-md text-start bg-[#09090B] text-white text-sm font-semibold">
                                 Person
                               </th>
@@ -277,7 +277,7 @@ onMount(async () => {
                       <div class="flex justify-center items-center h-80">
                         <div class="relative">
                         <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                            <span class="loading loading-spinner loading-md"></span>
+                            <span class="loading loading-spinner loading-md text-gray-400"></span>
                         </label>
                         </div>
                     </div>

src/routes/stocks/[tickerID]/insider/transcripts/+page.svelte

@@ -202,7 +202,7 @@
                       <div class="flex justify-center items-center h-80">
                         <div class="relative">
                         <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                            <span class="loading loading-spinner loading-md"></span>
+                            <span class="loading loading-spinner loading-md text-gray-400"></span>
                         </label>
                         </div>
                     </div>

src/routes/stocks/[tickerID]/options/+page.svelte

@@ -724,7 +724,7 @@ $: {
                                   {#if activeIdx === 0}
                                     <table class="table table-pin-cols table-sm table-compact rounded-none sm:rounded-md w-full border-bg-[#09090B] m-auto mt-4 overflow-x-auto">
                                         <thead>
-                                          <tr class="">
+                                          <tr class="border-b border-[#27272A]">
                                             <td class="text-slate-200 font-semibold text-sm text-start">Date</td>
                                             <td class="text-slate-200 font-semibold text-sm text-end">% Change</td>
                                             <td class="text-slate-200 font-semibold text-sm text-end">P/C</td>
@@ -1062,7 +1062,7 @@ $: {
         <div class="m-auto flex justify-center items-center h-80">
             <div class="relative">
             <label class="bg-[#272727] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <span class="loading loading-spinner loading-md"></span>
+                <span class="loading loading-spinner loading-md text-gray-400"></span>
             </label>
             </div>
         </div>

src/routes/stocks/[tickerID]/stats/+page.svelte

@@ -273,7 +273,7 @@ updateYearRange()
             <div class="flex flex-col justify-center items-center w-full m-auto overflow-x-scroll no-scrollbar">
               <table class="table table-sm table-pin-rows table-compact text-start w-full flex justify-start items-center w-full m-auto">
                 <thead>
-                  <tr class="bg-[#09090B] text-white text-sm">
+                  <tr class="bg-[#09090B] text-white text-sm ">
                     <th class="text-start text-sm sm:text-[1rem] font-semibold"> Metric </th>
                     <th class="text-end bg-[#09090B] text-sm sm:text-[1rem] font-semibold">
                       {$stockTicker}
@@ -282,7 +282,7 @@ updateYearRange()
                   </tr>
                 </thead>
                 <tbody>
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Cumulative Return </td>
                     <td class="text-white text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {#if quantStats[$stockTicker?.toUpperCase()]["Cumulative Return %"] >= 0}
@@ -300,7 +300,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Compound Annual Growth Rate (CAGR) </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {#if quantStats[$stockTicker?.toUpperCase()]["CAGR %"] >= 0}
@@ -318,7 +318,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Sharpe </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Sharpe"]?.toFixed(2)}
@@ -328,7 +328,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A]">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Sortino </td>
                     <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Sortino"]?.toFixed(2)}
@@ -338,7 +338,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Max Drawdown </td>
                     <td class="text-start text-white text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {#if quantStats[$stockTicker?.toUpperCase()]["Max Drawdown"] >= 0}
@@ -356,7 +356,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Longest Drawdown Days </td>
                     <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Longest DD Days"]}
@@ -366,7 +366,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Volatility (ann.) </td>
                     <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Volatility (ann.) %"]}%
@@ -376,7 +376,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Correlation </td>
                     <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Correlation"]}%
@@ -386,7 +386,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> R^2 </td>
                     <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["R^2"]}
@@ -396,7 +396,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Calmar </td>
                     <td class=" text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Calmar"]}
@@ -406,7 +406,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Skew </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Skew"]?.toFixed(2)}
@@ -416,7 +416,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Kurtosis </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Kurtosis"]?.toFixed(2)}
@@ -426,7 +426,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-starttext-sm sm:text-[1rem] whitespace-nowrap"> Expected Daily </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {#if quantStats[$stockTicker?.toUpperCase()]["Expected Daily %"] >= 0}
@@ -444,7 +444,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Expected Monthly </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {#if quantStats[$stockTicker?.toUpperCase()]["Expected Monthly %"] >= 0}
@@ -462,7 +462,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Expected Yearly </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {#if quantStats[$stockTicker?.toUpperCase()]["Expected Yearly %"] >= 0}
@@ -480,7 +480,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Kelly Criterion </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Kelly Criterion %"]}%
@@ -490,7 +490,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Risk of Ruin </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Risk of Ruin %"]}%
@@ -500,7 +500,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Daily Value-at-Risk </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {#if quantStats[$stockTicker?.toUpperCase()]["Daily Value-at-Risk %"] >= 0}
@@ -518,7 +518,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Expected Shortfall (cVaR) </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {#if quantStats[$stockTicker?.toUpperCase()]["Expected Shortfall (cVaR) %"] >= 0}
@@ -536,7 +536,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Max Consecutive Wins </td>
                     <td class="text-start text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Max Consecutive Wins"]}
@@ -546,7 +546,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-white text-sm sm:text-[1rem] whitespace-nowrap"> Max Consecutive Losses </td>
                     <td class="text-start text-end text-sm sm:text-[1rem]">
                       {quantStats[$stockTicker?.toUpperCase()]["Max Consecutive Losses"]}
@@ -556,7 +556,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-starttext-sm sm:text-[1rem] whitespace-nowrap"> Gain/Pain Ratio </td>
                     <td class="text-start text-end text-sm sm:text-[1rem]">
                       {quantStats[$stockTicker?.toUpperCase()]["Gain/Pain Ratio"]?.toFixed(2)}
@@ -566,7 +566,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Gain/Pain (1M) </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Gain/Pain (1M)"]?.toFixed(2)}
@@ -576,7 +576,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Payoff Ratio </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Payoff Ratio"]?.toFixed(2)}
@@ -586,7 +586,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Profit Factor </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Profit Factor"]?.toFixed(2)}
@@ -596,7 +596,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Outlier Win Ratio </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Outlier Win Ratio"]?.toFixed(2)}
@@ -606,7 +606,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Outlier Loss Ratio </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Outlier Loss Ratio"]?.toFixed(2)}
@@ -616,7 +616,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> MTD </td>
                     <td class="text-start text-end text-sm sm:text-[1rem]">
                       {#if quantStats[$stockTicker?.toUpperCase()]["MTD %"] >= 0}
@@ -634,7 +634,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> 3M </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {#if quantStats[$stockTicker?.toUpperCase()]["3M %"] >= 0}
@@ -652,7 +652,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> 6M </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {#if quantStats[$stockTicker?.toUpperCase()]["6M %"] >= 0}
@@ -670,7 +670,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-starttext-sm sm:text-[1rem] whitespace-nowrap"> Best Day </td>
                     <td class="text-start text-end text-sm">
                       {#if quantStats[$stockTicker?.toUpperCase()]["Best Day %"] >= 0}
@@ -688,7 +688,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Worst Day </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {#if quantStats[$stockTicker?.toUpperCase()]["Worst Day %"] >= 0}
@@ -706,7 +706,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Best Month </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {#if quantStats[$stockTicker?.toUpperCase()]["Best Month %"] >= 0}
@@ -724,7 +724,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Worst Month </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {#if quantStats[$stockTicker?.toUpperCase()]["Worst Month %"] >= 0}
@@ -742,7 +742,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Best Year </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {#if quantStats[$stockTicker?.toUpperCase()]["Best Year %"] >= 0}
@@ -760,7 +760,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Worst Year </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {#if quantStats[$stockTicker?.toUpperCase()]["Worst Year %"] >= 0}
@@ -778,7 +778,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Avg. Drawdown </td>
                     <td class="text-start text-end ttext-sm sm:text-[1rem]">
                       {#if quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown"] >= 0}
@@ -796,7 +796,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Avg. Drawdown Days </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Avg. Drawdown Days"]}
@@ -806,7 +806,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Recovery Factor </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Recovery Factor"]?.toFixed(2)}
@@ -816,7 +816,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Ulcer Index </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Ulcer Index"]?.toFixed(2)}
@@ -826,7 +826,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Avg. Up Month </td>
                     <td class="text-start text-end text-sm sm:text-[1rem]">
                       {#if quantStats[$stockTicker?.toUpperCase()]["Avg. Up Month %"] >= 0}
@@ -844,7 +844,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Avg. Down Month </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {#if quantStats[$stockTicker?.toUpperCase()]["Avg. Down Month %"] >= 0}
@@ -862,7 +862,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Win Days </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Win Days %"]?.toFixed(2)}%
@@ -872,7 +872,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Win Month </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Win Month %"]?.toFixed(2)}%
@@ -882,7 +882,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Win Quarter </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Win Quarter %"]?.toFixed(2)}%
@@ -892,7 +892,7 @@ updateYearRange()
                     </td>
                   </tr>
 
-                  <tr class="text-white odd:bg-[#27272A] font-semibold">
+                  <tr class="text-white odd:bg-[#27272A] border-b border-[#27272A]">
                     <td class="text-start text-sm sm:text-[1rem] whitespace-nowrap"> Win Year </td>
                     <td class="text-end text-sm sm:text-[1rem] whitespace-nowrap">
                       {quantStats[$stockTicker?.toUpperCase()]["Win Year %"]?.toFixed(2)}%

src/routes/stocks/[tickerID]/stats/income/+page.svelte

@@ -661,7 +661,7 @@ $: {
                 <div class="w-full flex justify-center items-center h-80">
                     <div class="relative">
                     <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                        <span class="loading loading-spinner loading-md"></span>
+                        <span class="loading loading-spinner loading-md text-gray-400"></span>
                     </label>
                     </div>
                 </div>

src/routes/stocks/[tickerID]/stats/market-cap/+page.svelte

@@ -430,7 +430,7 @@ async function plotData()
                 <div class="w-full flex justify-center items-center h-80">
                     <div class="relative">
                     <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                        <span class="loading loading-spinner loading-md"></span>
+                        <span class="loading loading-spinner loading-md text-gray-400"></span>
                     </label>
                     </div>
                 </div>

src/routes/watchlist/options/+page.svelte

@@ -364,7 +364,7 @@ onMount(async () => {
         <div class="flex justify-center items-center h-80">
             <div class="relative">
             <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-                <span class="loading loading-spinner loading-md"></span>
+                <span class="loading loading-spinner loading-md text-gray-400"></span>
             </label>
             </div>
         </div>

src/routes/watchlist/stocks/+page.svelte

@@ -472,7 +472,7 @@ onDestroy( () => {
     <div class="flex justify-center items-center h-80">
       <div class="relative">
       <label class="bg-[#09090B] rounded-xl h-14 w-14 flex justify-center items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
-          <span class="loading loading-spinner loading-md"></span>
+          <span class="loading loading-spinner loading-md text-gray-400"></span>
       </label>
       </div>
   </div>