From 0aaadabf5cf3128ef0a387091a6adb0391de8c3d Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Fri, 21 Jun 2024 09:02:24 +0200
Subject: [PATCH] ui fixes

---
 src/lib/components/PriceAnalysis.svelte       |   6 +-
 src/lib/components/TrendAnalysis.svelte       |   6 +-
 .../etf/[tickerID]/dividends/+page.svelte     |  32 +++--
 .../etf/[tickerID]/holdings/+page.svelte      |   6 +-
 .../etf/[tickerID]/options/+page.svelte       |  10 +-
 .../stocks/[tickerID]/analyst/+page.svelte    |   2 +-
 .../stocks/[tickerID]/dividends/+page.svelte  |  65 +++++-----
 .../[tickerID]/stats/employees/+page.svelte   | 113 ++++++++++--------
 8 files changed, 126 insertions(+), 114 deletions(-)

diff --git a/src/lib/components/PriceAnalysis.svelte b/src/lib/components/PriceAnalysis.svelte
index d084728a..af15833e 100644
--- a/src/lib/components/PriceAnalysis.svelte
+++ b/src/lib/components/PriceAnalysis.svelte
@@ -225,7 +225,7 @@ $: {
             <div class="w-full mt-5 mb-5 flex justify-start items-center">
                 <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 ">
                   <!--Start Flow Sentiment-->  
-                  <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-2xl h-20">
+                  <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-lg h-20">
                       <div class="flex flex-col items-start">
                           <span class="font-medium text-gray-200 text-sm">Price Sentiment</span>
                           <span class="text-start text-[1rem] font-medium {priceSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{priceSentiment}</span>
@@ -234,7 +234,7 @@ $: {
                   
                   <!--End Flow Sentiment-->
                    <!--Start Put/Call-->  
-                   <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-2xl h-20">
+                   <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-lg h-20">
                     <div class="flex flex-col items-start">
                         <span class="font-medium text-gray-200 text-sm"><span class="italic">R</span><sup>2</sup> Score</span>
                         <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@@ -262,7 +262,7 @@ $: {
                    <!--End Put/Call-->
 
                    <!--Start mape-->  
-                   <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-2xl h-20">
+                   <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-lg h-20">
                     <div class="flex flex-col items-start">
                         <span class="font-medium text-gray-200 text-sm">MAPE</span>
                         <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
diff --git a/src/lib/components/TrendAnalysis.svelte b/src/lib/components/TrendAnalysis.svelte
index 5368d946..7e06cd15 100644
--- a/src/lib/components/TrendAnalysis.svelte
+++ b/src/lib/components/TrendAnalysis.svelte
@@ -128,7 +128,7 @@ $: {
             <div class="w-full mt-5 mb-5 flex justify-start items-center">
                 <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 gap-x-3 ">
                   <!--Start Flow Sentiment-->  
-                  <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-2xl h-20">
+                  <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-lg h-20">
                       <div class="flex flex-col items-start">
                           <span class="font-medium text-gray-200 text-sm">Trend Sentiment</span>
                           <span class="text-start text-[1rem] font-medium {flowSentiment === 'Bullish' ? 'text-[#10DB06]' : 'text-[#FC2120]'}">{flowSentiment}</span>
@@ -137,7 +137,7 @@ $: {
                   
                   <!--End Flow Sentiment-->
                    <!--Start Put/Call-->  
-                   <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-2xl h-20">
+                   <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-lg h-20">
                     <div class="flex flex-col items-start">
                         <span class="font-medium text-gray-200 text-sm ">Accuracy</span>
                         <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@@ -165,7 +165,7 @@ $: {
                    <!--End Put/Call-->
 
                    <!--Start Precision-->  
-                   <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-2xl h-20">
+                   <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#202020] shadow-lg rounded-lg h-20">
                     <div class="flex flex-col items-start">
                         <span class="font-medium text-gray-200 text-sm ">Precision</span>
                         <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
diff --git a/src/routes/etf/[tickerID]/dividends/+page.svelte b/src/routes/etf/[tickerID]/dividends/+page.svelte
index edddd7c8..5d8262bc 100644
--- a/src/routes/etf/[tickerID]/dividends/+page.svelte
+++ b/src/routes/etf/[tickerID]/dividends/+page.svelte
@@ -171,7 +171,6 @@
     <!-- Other meta tags -->
     <meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) Dividend History, Dates & Yield · stocknear`}/>
     <meta property="og:description" content={`Get the latest dividend data for ${$displayCompanyName} (${$etfTicker}), including dividend history, yield, key dates, growth and other metrics.`} />
-    <meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
     <meta property="og:type" content="website"/>
     <!-- Add more Open Graph meta tags as needed -->
   
@@ -179,7 +178,6 @@
     <meta name="twitter:card" content="summary_large_image"/>
     <meta name="twitter:title" content={`${$displayCompanyName} (${$etfTicker}) Dividend History, Dates & Yield · stocknear`}/>
     <meta name="twitter:description" content={`Get the latest dividend data for ${$displayCompanyName} (${$etfTicker}) stock price quote with breaking news, financials, statistics, charts and more.`} />
-    <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
     <!-- Add more Twitter meta tags as needed -->
   
   </svelte:head>
@@ -250,7 +248,7 @@
                               </span>
                             </div>
                             <span class="text-white text-[1rem] font-semibold">
-                              ${annualDividend !== '0.00' ? annualDividend : '0'}
+                              ${annualDividend !== '0.00' ? annualDividend?.toFixed(2) : '0'}
                             </span>
                           </div>
                           <!--End Column Win Rate-->
@@ -309,14 +307,14 @@
   
                       </div>
         
-                          <div class="flex flex-row items-center w-full mt-14 mb-8">
+                          <div class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-14 mb-8">
         
-                            <h3 class="text-xl text-white font-medium ">
+                            <h3 class="text-xl text-white font-semibold ">
                               Dividends History
                             </h3>
         
         
-                            <label class="{stockDividends?.length === 0 ? 'hidden' : ''} inline-flex cursor-pointer relative ml-auto">
+                            <label class="{stockDividends?.length === 0 ? 'hidden' : ''} inline-flex cursor-pointer relative ml-auto mt-5 sm:mt-0">
                               <input on:click={toggleMode} type="checkbox" value={mode} class="sr-only peer">
                               <div class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"></div>
                               {#if mode}
@@ -348,36 +346,36 @@
                             {:else}
                             
                               <div class="flex justify-start items-center w-full m-auto shadow-md rounded-none sm:rounded-lg mb-4">
-                                <table class="table table-sm table-pin-rows shadow-md table-compact flex justify-start items-center w-full m-auto">
+                                <table class="table table-sm table-compact flex justify-start items-center w-full m-auto">
                                   <thead>
                                     <tr class="bg-[#0F0F0F] border-b-slate-600 shadow-md">
-                                      <th class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-medium">
+                                      <th class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-semibold">
                                         Ex-Divid. Date
                                       </th>
-                                      <th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-medium">
+                                      <th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-semibold">
                                         Cash Amount
                                       </th>
-                                      <th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] hidden sm:table-cell text-white text-sm font-medium">
+                                      <th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] hidden sm:table-cell text-white text-sm font-semibold">
                                         Record Date
                                       </th>
-                                      <th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-medium">
+                                      <th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-semibold">
                                         Pay Date
                                       </th>
                                     </tr>
                                   </thead>
-                                  <tbody class="shadow-md">
+                                  <tbody class="">
                                     {#each stockDividends as item}
-                                    <tr class="text-gray-200 ">
-                                      <td class="text-start bg-[#0F0F0F] text-xs sm:text-sm text-white font-medium border-b border-[#0F0F0F]">
+                                    <tr class="text-gray-200 odd:bg-[#202020]">
+                                      <td class="text-start text-xs sm:text-sm text-white font-medium border-b border-[#0F0F0F]">
                                         {new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
                                       </td>
-                                      <td class="text-end bg-[#0F0F0F] text-xs sm:text-sm text-white border-b border-[#0F0F0F]">
+                                      <td class="text-end text-xs sm:text-sm text-white border-b border-[#0F0F0F]">
                                         ${item?.adjDividend?.toFixed(2)}
                                       </td>
-                                      <td class="text-end bg-[#0F0F0F] text-xs sm:text-sm hidden sm:table-cell text-white border-b border-[#0F0F0F]">
+                                      <td class="text-end text-xs sm:text-sm hidden sm:table-cell text-white border-b border-[#0F0F0F]">
                                         {item?.recordDate?.length !== 0 ? new Date(item?.recordDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
                                       </td>
-                                      <td class="text-end bg-[#0F0F0F] text-xs sm:text-sm text-white border-b border-[#0F0F0F]">
+                                      <td class="text-end text-xs sm:text-sm text-white border-b border-[#0F0F0F]">
                                         {item?.paymentDate?.length !== 0 ? new Date(item?.paymentDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
                                       </td>
                                     </tr>
diff --git a/src/routes/etf/[tickerID]/holdings/+page.svelte b/src/routes/etf/[tickerID]/holdings/+page.svelte
index 54e01bcf..9f00255b 100644
--- a/src/routes/etf/[tickerID]/holdings/+page.svelte
+++ b/src/routes/etf/[tickerID]/holdings/+page.svelte
@@ -76,7 +76,6 @@ $: {
   <!-- Other meta tags -->
   <meta property="og:title" content={`${$displayCompanyName} (${$etfTicker}) Holdings List · stocknear`}/>
   <meta property="og:description" content={`Get the Holdings List of ${$displayCompanyName} (${$etfTicker}).`} />
-  <meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <meta property="og:type" content="website"/>
   <!-- Add more Open Graph meta tags as needed -->
 
@@ -84,7 +83,6 @@ $: {
   <meta name="twitter:card" content="summary_large_image"/>
   <meta name="twitter:title" content={`${$displayCompanyName} (${$etfTicker}) Holdings List · stocknear`}/>
   <meta name="twitter:description" content={`Get the Holdings List of ${$displayCompanyName} (${$etfTicker}).`} />
-  <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <!-- Add more Twitter meta tags as needed -->
 
 </svelte:head>
@@ -135,10 +133,10 @@ $: {
                             </tr>
                           </thead>
                           <tbody>
-                            {#each holdings as item,index}
+                            {#each (data?.user?.tier === 'Pro' ? holdings : holdings?.slice(0,3)) as item,index}
                         <!-- row -->
                         {#if item?.asset !== null}
-                        <tr on:click={() => stockSelector(item?.asset)} class="w-full sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#0F0F0F] border-b-[#0F0F0F] shake-ticker {item?.asset?.length !== 0 ? 'cursor-pointer' : ''}">
+                        <tr on:click={() => stockSelector(item?.asset)} class="w-full sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#202020] {index+1 === holdings?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''} {item?.asset?.length !== 0 ? 'cursor-pointer' : ''}">
                           
                           <td class="text-gray-200 border-b border-[#0F0F0F]">
                             {index+1}
diff --git a/src/routes/etf/[tickerID]/options/+page.svelte b/src/routes/etf/[tickerID]/options/+page.svelte
index 6dd6d05a..6f478a75 100644
--- a/src/routes/etf/[tickerID]/options/+page.svelte
+++ b/src/routes/etf/[tickerID]/options/+page.svelte
@@ -389,7 +389,7 @@ $: {
                             <div class="w-full mt-5 mb-10 m-auto flex justify-center items-center">
                               <div class="w-full grid grid-cols-2 lg:grid-cols-3 gap-y-3 lg:gap-y-3 gap-x-3 ">
                                 <!--Start Flow Sentiment-->  
-                                <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
+                                <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-lg h-20">
                                     <div class="flex flex-col items-start">
                                         <span class="font-medium text-gray-200 text-sm ">Flow Sentiment</span>
                                         <span class="text-start text-[1rem] font-medium {flowSentiment === 'Bullish' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">{flowSentiment}</span>
@@ -398,7 +398,7 @@ $: {
                                 </div>
                                 <!--End Flow Sentiment-->
                                 <!--Start Put/Call-->  
-                                <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
+                                <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-lg h-20">
                                   <div class="flex flex-col items-start">
                                       <span class="font-medium text-gray-200 text-sm ">Put/Call</span>
                                       <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@@ -425,7 +425,7 @@ $: {
                               </div>
                               <!--End Put/Call-->
                               <!--Start Call Flow-->  
-                              <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
+                              <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-lg h-20">
                                 <div class="flex flex-col items-start">
                                     <span class="font-medium text-gray-200 text-sm ">Call Flow</span>
                                     <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@@ -454,7 +454,7 @@ $: {
                               </div>
                               <!--End Call Flow-->
                               <!--Start Put Flow-->  
-                              <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-2xl h-20">
+                              <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] shadow-lg rounded-lg h-20">
                                 <div class="flex flex-col items-start">
                                     <span class="font-medium text-gray-200 text-sm ">Put Flow</span>
                                     <span class="text-start text-sm sm:text-[1rem] font-medium text-white">
@@ -514,7 +514,7 @@ $: {
                                     <tbody>
                                       {#each optionList as item}
                                       <!-- row -->
-                                      <tr class="bg-[#0F0F0F] border-b-[#0F0F0F]">
+                                      <tr class="bg-[#0F0F0F] border-b-[#0F0F0F] ">
                                         
                                         <td class="text-white text-xs sm:text-sm text-start">
                                           {formatDate(item?.updated)}
diff --git a/src/routes/stocks/[tickerID]/analyst/+page.svelte b/src/routes/stocks/[tickerID]/analyst/+page.svelte
index 1afec182..7d3d0ee6 100644
--- a/src/routes/stocks/[tickerID]/analyst/+page.svelte
+++ b/src/routes/stocks/[tickerID]/analyst/+page.svelte
@@ -261,7 +261,7 @@ function latestInfoDate(inputDate) {
                                 </thead>
                                 <tbody>
                                   {#each (data?.user?.tier === 'Pro' ? historyList : historyList?.slice(0,3)) as item,index}
-                                  <tr on:click={() => goto(`/analysts/${item?.analystId}`)} class="cursor-pointer {latestInfoDate(item?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'bg-[#0F0F0F]'} border-b-[#0F0F0F] {index+1 === historyList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
+                                  <tr on:click={() => goto(`/analysts/${item?.analystId}`)} class="cursor-pointer odd:bg-[#202020] {latestInfoDate(item?.date) ? 'bg-[#F9AB00] bg-opacity-[0.1]' : 'bg-[#0F0F0F]'} border-b-[#0F0F0F]  {index+1 === historyList?.slice(0,3)?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                                     <td class="text-sm text-start">
                                       <div class="flex flex-col items-start">
                                         <span class="text-blue-400 font-medium">{item?.analyst_name} </span>
diff --git a/src/routes/stocks/[tickerID]/dividends/+page.svelte b/src/routes/stocks/[tickerID]/dividends/+page.svelte
index cde60032..098e6404 100644
--- a/src/routes/stocks/[tickerID]/dividends/+page.svelte
+++ b/src/routes/stocks/[tickerID]/dividends/+page.svelte
@@ -280,29 +280,28 @@ onMount(async() => {
       
                           </div>
       
-                        <div class="flex flex-row items-center w-full mt-14 mb-8">
-      
-                          <h3 class="text-xl text-white font-medium ">
-                            Dividends History
-                          </h3>
-      
-      
-                          <label class="{stockDividends?.length === 0 ? 'hidden' : ''} inline-flex cursor-pointer relative ml-auto">
-                            <input on:click={toggleMode} type="checkbox" value={mode} class="sr-only peer">
-                            <div class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"></div>
-                            {#if mode}
-                            <span class="ml-2 text-sm font-medium text-gray-300">
-                                Cool Mode
-                            </span>
-                            {:else}
-                            <span class="ml-2 text-sm font-medium text-gray-500">
-                                Boring Mode
-                            </span>
-                            {/if}
-                          </label>
-      
-                        </div>
-                        
+                          <div class="flex flex-col sm:flex-row items-start sm:items-center w-full mt-14 mb-8">
+        
+                            <h3 class="text-xl text-white font-semibold ">
+                              Dividends History
+                            </h3>
+        
+        
+                            <label class="{stockDividends?.length === 0 ? 'hidden' : ''} inline-flex cursor-pointer relative ml-auto mt-5 sm:mt-0">
+                              <input on:click={toggleMode} type="checkbox" value={mode} class="sr-only peer">
+                              <div class="w-11 h-6 bg-gray-400 rounded-full peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#1563F9]"></div>
+                              {#if mode}
+                              <span class="ml-2 text-sm font-medium text-gray-300">
+                                  Cool Mode
+                              </span>
+                              {:else}
+                              <span class="ml-2 text-sm font-medium text-gray-500">
+                                  Boring Mode
+                              </span>
+                              {/if}
+                            </label>
+        
+                          </div>
       
                         {#if stockDividends?.length !== 0}
       
@@ -321,36 +320,36 @@ onMount(async() => {
                           {:else}
                           
                             <div class="flex justify-start items-center w-full m-auto shadow-md rounded-none sm:rounded-lg mb-4">
-                              <table class="table table-sm table-pin-rows shadow-md table-compact flex justify-start items-center w-full m-auto">
+                              <table class="table table-sm table-compact flex justify-start items-center w-full m-auto">
                                 <thead>
                                   <tr class="bg-[#0F0F0F] border-b-slate-600 shadow-md">
-                                    <th class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-medium">
+                                    <th class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-semibold">
                                       Ex-Divid. Date
                                     </th>
-                                    <th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-medium">
+                                    <th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-semibold">
                                       Cash Amount
                                     </th>
-                                    <th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] hidden sm:table-cell text-white text-sm font-medium">
+                                    <th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] hidden sm:table-cell text-white text-sm font-semibold">
                                       Record Date
                                     </th>
-                                    <th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-medium">
+                                    <th class="text-end bg-[#0F0F0F] border-b border-[#0F0F0F] text-white text-sm font-semibold">
                                       Pay Date
                                     </th>
                                   </tr>
                                 </thead>
                                 <tbody class="shadow-md">
                                   {#each stockDividends as item}
-                                  <tr class="text-gray-200 ">
-                                    <td class="text-start bg-[#0F0F0F] text-xs sm:text-sm text-white font-medium border-b border-[#0F0F0F]">
+                                  <tr class="text-gray-200 odd:bg-[#202020]">
+                                    <td class="text-start text-xs sm:text-sm text-white font-medium border-b border-[#0F0F0F]">
                                       {new Date(item?.date)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
                                     </td>
-                                    <td class="text-end bg-[#0F0F0F] text-xs sm:text-sm text-white border-b border-[#0F0F0F]">
+                                    <td class="text-end text-xs sm:text-sm text-white border-b border-[#0F0F0F]">
                                       ${item?.adjDividend?.toFixed(2)}
                                     </td>
-                                    <td class="text-end bg-[#0F0F0F] text-xs sm:text-sm hidden sm:table-cell text-white border-b border-[#0F0F0F]">
+                                    <td class="text-end text-xs sm:text-sm hidden sm:table-cell text-white border-b border-[#0F0F0F]">
                                       {item?.recordDate?.length !== 0 ? new Date(item?.recordDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
                                     </td>
-                                    <td class="text-end bg-[#0F0F0F] text-xs sm:text-sm text-white border-b border-[#0F0F0F]">
+                                    <td class="text-end text-xs sm:text-sm text-white border-b border-[#0F0F0F]">
                                       {item?.paymentDate?.length !== 0 ? new Date(item?.paymentDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' }) : 'n/a'}
                                     </td>
                                   </tr>
diff --git a/src/routes/stocks/[tickerID]/stats/employees/+page.svelte b/src/routes/stocks/[tickerID]/stats/employees/+page.svelte
index f550b79c..f05f8b38 100644
--- a/src/routes/stocks/[tickerID]/stats/employees/+page.svelte
+++ b/src/routes/stocks/[tickerID]/stats/employees/+page.svelte
@@ -59,7 +59,7 @@ function selectSortingMethod(state:string) {
     const options = {
       grid: {
           left: '0%',
-          right: '0%',
+          right: '2%',
           top: '10%',
           bottom: '20%',
           containLabel: true,
@@ -285,7 +285,6 @@ optionsGrowth = plotGrowth();
 <!-- Other meta tags -->
 <meta property="og:title" content={`${$displayCompanyName} (${$stockTicker}) Number of Employees · stocknear`}/>
 <meta property="og:description" content={`Detailed historical employees number for ${$displayCompanyName} (${$stockTicker}). See many years of change, growth and the impact.`} />
-<meta property="og:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
 <meta property="og:type" content="website"/>
 <!-- Add more Open Graph meta tags as needed -->
 
@@ -293,7 +292,6 @@ optionsGrowth = plotGrowth();
 <meta name="twitter:card" content="summary_large_image"/>
 <meta name="twitter:title" content={`${$displayCompanyName} (${$stockTicker}) Number of Employees · stocknear`}/>
 <meta name="twitter:description" content={`Detailed historical employees number for ${$displayCompanyName} (${$stockTicker}). See many years of change, growth and the impact.`} />
-<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
 <!-- Add more Twitter meta tags as needed -->
 
 </svelte:head>
@@ -338,50 +336,69 @@ optionsGrowth = plotGrowth();
   
                       </div>
 
-              
-                      <div class="no-scrollbar stats stats-horizontal bg-[#0F0F0F] shadow-md w-full rounded-lg">
-
-                        <div class="stat">
-                          <div class="stat-title text-sm font-medium text-white">Total Employees</div>
-                          <div class="stat-value text-white text-[1rem] font-medium">{abbreviateNumber(employees)}</div>
-                        </div>
+                      
+                      <div class="grid grid-cols-2 sm:grid-cols-3 gap-10 sm:gap-5 bg-[#202020] shadow-md rounded-xl p-5 flex justify-center items-center mb-2">
+                        <!--Start Column Title-->
+                        <div class="flex flex-col">
+                          <div class="flex flex-row items-center">
+                            <span class="text-gray-300 font-medium text-[1rem]">
+                              Total Employees
+                            </span>
+                          </div>
                         
-                        <div class="stat">
-                          <div class="stat-title text-white text-sm font-medium">Change (1Y)</div>
-                          <div class="stat-value text-white text-[1rem] font-medium">
+                          <span class="text-white text-[1rem] font-semibold">
+                            {abbreviateNumber(employees)}
+                          </span>
+                        </div>
+                        <!--End Column Title-->
+                  
+                        <!--Start Column Win Rate-->
+                        <div class="flex flex-col">
+                          <div class="flex flex-row items-center">
+                            <span class="text-gray-300 font-medium text-[1rem] ">
+                                Change (1Y)
+                            </span>
+                          </div>
+                          <span class="text-white text-[1rem] font-semibold">
                             {#if dateDistance}
                             n/a
                             {:else}
                               {abbreviateNumber(changeRate)}
                             {/if}
-                          </div>
+                          </span>
                         </div>
-                        
-                        <div class="stat">
-                          <div class="stat-title text-white text-sm font-medium">Growth (1Y)</div>
-                          <div class="stat-value text-lg font-medium">
-                            {#if growthRate >= 0}
-                                  <span class="text-white text-md font-medium">
-                                    <svg class="w-5 h-5 inline-block -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
-                                      <span class="text-[#10DB06] text-[1rem]">+{growthRate}%</span>
-                                  </span>
-                                  {:else if growthRate < 0}
-                                  <div class="text-white text-md font-medium">
-                                      <svg class="w-5 h-5 rotate-180 inline-block -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>    
-                                      <span class="text-[#FF2F1F] text-[1rem]">{growthRate}%</span>
-                                  </div>
-                                  {:else}
-                                    <span class="text-white m-auto">
-                                      n/a
-                                    </span>
-                                  {/if}
+                        <!--End Column Win Rate-->
+                  
+                        <!--Start Column Performance-->
+                        <div class="flex flex-col">
+                            <div class="flex flex-row items-center">
+                              <span class="text-gray-300 font-medium text-[1rem]">
+                              Growth (1Y)
+                              </span>
+                            </div>
+                            <span class="text-white  text-[1rem] font-semibold">
+                              {#if growthRate >= 0}
+                              <span class="text-white text-md font-medium">
+                                <svg class="w-5 h-5 inline-block -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#10db06" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>
+                                  <span class="text-[#10DB06] text-[1rem]">+{growthRate}%</span>
+                              </span>
+                              {:else if growthRate < 0}
+                              <div class="text-white text-md font-medium">
+                                  <svg class="w-5 h-5 rotate-180 inline-block -mr-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="evaArrowUpFill0"><g id="evaArrowUpFill1"><path id="evaArrowUpFill2" fill="#FF2F1F" d="M16.21 16H7.79a1.76 1.76 0 0 1-1.59-1a2.1 2.1 0 0 1 .26-2.21l4.21-5.1a1.76 1.76 0 0 1 2.66 0l4.21 5.1A2.1 2.1 0 0 1 17.8 15a1.76 1.76 0 0 1-1.59 1Z"/></g></g></svg>    
+                                  <span class="text-[#FF2F1F] text-[1rem]">{growthRate}%</span>
+                              </div>
+                              {:else}
+                                <span class="text-white m-auto">
+                                  n/a
+                                </span>
+                              {/if}
+                            </span>
                           </div>
-                        </div>
-                        
+                    <!--End Column-->
+                    </div>
+
                          
       
-                          </div>
-
                       
       
                       <div class="flex flex-row items-center w-full mt-10 mb-8">
@@ -431,36 +448,36 @@ optionsGrowth = plotGrowth();
                           {/if}
                           
                           <div class="flex justify-start items-center w-full m-auto pr-1 pl-1 p-3">
-                              <table class="table table-sm table-compact table-pin-rows flex justify-start items-center w-full px-3 m-auto">
+                              <table class="table table-sm table-compact flex justify-start items-center w-full px-3 m-auto">
                               <thead>
                                   <tr>
-                                  <th class="text-start shadow-md border-b border-[#0F0F0F] bg-[#0F0F0F] text-white text-sm font-medium">
+                                  <th class="text-start border-b border-[#0F0F0F] bg-[#0F0F0F] text-white text-sm font-semibiold">
                                       Date
                                   </th>
-                                  <th class="text-end shadow-md border-b border-[#0F0F0F] bg-[#0F0F0F] text-white text-sm font-medium">
+                                  <th class="text-end border-b border-[#0F0F0F] bg-[#0F0F0F] text-white text-sm font-semibiold">
                                       Employees
                                   </th>
-                                  <th class="text-end shadow-md border-b border-[#0F0F0F] bg-[#0F0F0F] hidden sm:table-cell text-white text-sm font-medium">
+                                  <th class="text-end border-b border-[#0F0F0F] bg-[#0F0F0F] hidden sm:table-cell text-white text-sm font-semibiold">
                                       Change
                                   </th>
-                                  <th class="text-end shadow-md border-b border-[#0F0F0F] bg-[#0F0F0F] text-white text-sm font-medium">
+                                  <th class="text-end border-b border-[#0F0F0F] bg-[#0F0F0F] text-white text-sm font-semibiold">
                                       Growth
                                   </th>
                                 </tr>
                               </thead>
-                              <tbody class="shadow-md">
+                              <tbody class="">
                                 {#each historyList as item, index}
-                                <tr class="text-gray-200 ">
-                                  <td class="text-start bg-[#0F0F0F] border-b border-[#0F0F0F]  text-xs sm:text-sm text-white">
+                                <tr class="text-gray-200 odd:bg-[#202020]">
+                                  <td class="text-start border-b border-[#0F0F0F] text-xs sm:text-sm text-white">
                                     {new Date(item?.filingDate)?.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', daySuffix: '2-digit' })}
                                   </td>
-                                  <td class="text-end border-b border-[#0F0F0F] bg-[#0F0F0F] text-xs sm:text-sm text-white">
+                                  <td class="text-end border-b border-[#0F0F0F] text-xs sm:text-sm text-white">
                                     {new Intl.NumberFormat("en").format(item?.employeeCount)}
                                   </td>
-                                  <td class="text-end border-b border-[#0F0F0F] bg-[#0F0F0F] text-xs sm:text-sm hidden sm:table-cell text-white">
+                                  <td class="text-end border-b border-[#0F0F0F] text-xs sm:text-sm hidden sm:table-cell text-white">
                                     {abbreviateNumber(item?.employeeCount-historyList[index+1]?.employeeCount)}
                                   </td>
-                                  <td class="text-end border-b border-[#0F0F0F] bg-[#0F0F0F] text-xs sm:text-sm text-white text-end">
+                                  <td class="text-end border-b border-[#0F0F0F] text-xs sm:text-sm text-white text-end">
                                     {#if index+1-historyList?.length == 0}
                                     0.00%
                                     {:else}