From 1375c2812e0e1c9807a79178edc8f9c52e099cdb Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Mon, 15 Jul 2024 13:34:06 +0200
Subject: [PATCH] ui fix

---
 src/lib/components/PriceAlert.svelte          |   2 +-
 src/lib/components/SkeletonLoading.svelte     |   2 +-
 src/lib/components/shadcn/card/card.svelte    |   2 +-
 src/routes/+layout.svelte                     | 168 ++++++++++++------
 src/routes/analysts/+page.svelte              |   6 +-
 src/routes/analysts/[slug]/+page.svelte       |   4 +-
 src/routes/analysts/top-stocks/+page.svelte   |   8 +-
 src/routes/dividends-calendar/+page.svelte    |   4 +-
 src/routes/earnings-calendar/+page.svelte     |   4 +-
 src/routes/economic-calendar/+page.svelte     |   8 +-
 src/routes/etf/etf-providers/+layout.svelte   |   4 +-
 src/routes/etf/etf-providers/+page.svelte     |   4 +-
 .../etf/etf-providers/[slug]/+page.svelte     |   6 +-
 src/routes/etf/new-launches/+page.svelte      |   6 +-
 src/routes/fda-calendar/+page.svelte          |   6 +-
 src/routes/heatmaps/+page.svelte              |   9 +-
 src/routes/hedge-funds/[slug]/+page.svelte    |  14 +-
 src/routes/ipos/+layout.svelte                |   2 +-
 src/routes/ipos/+page.svelte                  |   2 +-
 src/routes/ipos/[slug]/+page.svelte           |   2 +-
 src/routes/list/+layout.svelte                |   2 +-
 src/routes/list/amex-stocks/+page.svelte      |   2 +-
 .../list/canadian-stocks-us/+page.svelte      |   2 +-
 .../list/chinese-stocks-us/+page.svelte       |   2 +-
 src/routes/list/dow-jones-stocks/+page.svelte |   2 +-
 src/routes/list/german-stocks-us/+page.svelte |   2 +-
 src/routes/list/indian-stocks-us/+page.svelte |   2 +-
 .../list/israeli-stocks-us/+page.svelte       |   2 +-
 .../list/japanese-stocks-us/+page.svelte      |   2 +-
 src/routes/list/large-cap-stocks/+page.svelte |   4 +-
 src/routes/list/mega-cap-stocks/+page.svelte  |   4 +-
 src/routes/list/micro-cap-stocks/+page.svelte |   4 +-
 src/routes/list/mid-cap-stocks/+page.svelte   |   4 +-
 src/routes/list/nano-cap-stocks/+page.svelte  |   4 +-
 .../list/nasdaq-100-stocks/+page.svelte       |   2 +-
 src/routes/list/nasdaq-stocks/+page.svelte    |   2 +-
 src/routes/list/nyse-stocks/+page.svelte      |   2 +-
 src/routes/list/small-cap-stocks/+page.svelte |   2 +-
 src/routes/list/sp-500-stocks/+page.svelte    |   2 +-
 src/routes/list/uk-stocks-us/+page.svelte     |   2 +-
 src/routes/list/xetra-stocks/+page.svelte     |   2 +-
 src/routes/markdown-guide/+page.svelte        |   2 -
 src/routes/market-mover/+page.svelte          |   5 +-
 src/routes/market-news/+layout.svelte         |   2 +-
 src/routes/market-news/+page.svelte           |   4 +-
 src/routes/market-news/crypto/+page.svelte    |   4 +-
 src/routes/market-news/general/+page.svelte   |   2 +-
 src/routes/most-retail-volume/+page.svelte    |   6 +-
 src/routes/most-shorted-stocks/+page.svelte   |   6 +-
 src/routes/options-zero-dte/+page.svelte      |   4 +-
 src/routes/politicians/[slug]/+page.svelte    |   8 +-
 src/routes/politicians/flow-data/+page.svelte |   8 +-
 src/routes/stock-screener/+page.svelte        |  12 +-
 src/routes/stock-splits-calendar/+page.svelte |   6 +-
 54 files changed, 206 insertions(+), 178 deletions(-)

diff --git a/src/lib/components/PriceAlert.svelte b/src/lib/components/PriceAlert.svelte
index 36e56b40..e8c13289 100644
--- a/src/lib/components/PriceAlert.svelte
+++ b/src/lib/components/PriceAlert.svelte
@@ -166,7 +166,7 @@ $: {
     <label for="priceAlertModal"  class="cursor-pointer modal-backdrop bg-[#fff] bg-opacity-[0.02]"></label>
     
     
-        <div class="modal-box rounded-none w-full bg-[#000] h-[450px]" >
+        <div class="modal-box rounded-none w-full bg-[#000] border border-gray-800 h-[450px]" >
     
         <!--Start Trade Modal-->
         <label for="priceAlertModal" class="cursor-pointer absolute right-5 top-5 bg-[#000] text-[1.8rem] text-white">
diff --git a/src/lib/components/SkeletonLoading.svelte b/src/lib/components/SkeletonLoading.svelte
index 1af93491..99b1bb5c 100644
--- a/src/lib/components/SkeletonLoading.svelte
+++ b/src/lib/components/SkeletonLoading.svelte
@@ -12,7 +12,7 @@
 
 
             <div role="status" class="animate-pulse space-x-8 md:flex md:items-center mb-4">
-                <div class="flex items-center justify-center w-48 h-28 sm:w-48  sm:h-48 bg-[#1F1F23] rounded ">
+                <div class="flex items-center justify-center w-48 h-28 sm:w-48  sm:h-48 bg-[#09090B] rounded ">
                     <svg class="w-12 h-12 text-gray-200" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" viewBox="0 0 640 512"><path d="M480 80C480 35.82 515.8 0 560 0C604.2 0 640 35.82 640 80C640 124.2 604.2 160 560 160C515.8 160 480 124.2 480 80zM0 456.1C0 445.6 2.964 435.3 8.551 426.4L225.3 81.01C231.9 70.42 243.5 64 256 64C268.5 64 280.1 70.42 286.8 81.01L412.7 281.7L460.9 202.7C464.1 196.1 472.2 192 480 192C487.8 192 495 196.1 499.1 202.7L631.1 419.1C636.9 428.6 640 439.7 640 450.9C640 484.6 612.6 512 578.9 512H55.91C25.03 512 .0006 486.1 .0006 456.1L0 456.1z"/></svg>
                 </div>
                 <div class="w-full md:w-96 ">
diff --git a/src/lib/components/shadcn/card/card.svelte b/src/lib/components/shadcn/card/card.svelte
index 3b5d7a26..fa23ea19 100644
--- a/src/lib/components/shadcn/card/card.svelte
+++ b/src/lib/components/shadcn/card/card.svelte
@@ -9,7 +9,7 @@
 </script>
 
 <div
-	class={cn("rounded-lg border text-white shadow-sm", className)}
+	class={cn("rounded-lg border border-gray-800 bg-purple-900 text-white shadow-sm", className)}
 	{...$$restProps}
 >
 	<slot />
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index db1a350c..f33c98f2 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -16,35 +16,20 @@
 
   //import DiscountBanner from '$lib/components/DiscountBanner.svelte';
   
-  import { beforeNavigate, afterNavigate, goto } from '$app/navigation';
+  import { beforeNavigate, afterNavigate } from '$app/navigation';
   import { onMount } from 'svelte';
-  import { showCookieConsent,  newAvatar, userRegion, screenWidth, stockTicker, etfTicker, searchBarData, loginData, numberOfUnreadNotification, cachedPosts, currentPagePosition, clientSideCache, twitchStatus } from '$lib/store';
+  import { showCookieConsent,  newAvatar, userRegion, screenWidth, stockTicker, etfTicker, loginData, numberOfUnreadNotification, cachedPosts, currentPagePosition, clientSideCache, twitchStatus } from '$lib/store';
 
   import { Button } from "$lib/components/shadcn/button/index.ts";
   import * as Card from "$lib/components/shadcn/card/index.ts";
   import * as DropdownMenu from "$lib/components/shadcn/dropdown-menu/index.ts";
-  import { Input } from "$lib/components/shadcn/input/index.ts";
+  //import { Input } from "$lib/components/shadcn/input/index.ts";
   import * as Sheet from "$lib/components/shadcn/sheet/index.ts";
-  import * as Tooltip from "$lib/components/shadcn/tooltip/index.js";
   import * as Accordion from "$lib/components/shadcn/accordion/index.js";
 
-  import ChevronLeft from "lucide-svelte/icons/chevron-left";
-  import ChevronRight from "lucide-svelte/icons/chevron-right";
-  import Copy from "lucide-svelte/icons/copy";
-  import CreditCard from "lucide-svelte/icons/credit-card";
-  import File from "lucide-svelte/icons/file";
+
   import Home from "lucide-svelte/icons/house";
-  import LineChart from "lucide-svelte/icons/line-chart";
-  import ListFilter from "lucide-svelte/icons/list-filter";
-  import EllipsisVertical from "lucide-svelte/icons/ellipsis-vertical";
-  import Package from "lucide-svelte/icons/package";
-  import Package2 from "lucide-svelte/icons/package-2";
   import Menu from "lucide-svelte/icons/menu";
-  import Search from "lucide-svelte/icons/search";
-  import Settings from "lucide-svelte/icons/settings";
-  import ShoppingCart from "lucide-svelte/icons/shopping-cart";
-  import Truck from "lucide-svelte/icons/truck";
-  import UsersRound from "lucide-svelte/icons/users-round";
   import Stock from "lucide-svelte/icons/candlestick-chart";
   import Calendar from "lucide-svelte/icons/calendar";
   import Option from "lucide-svelte/icons/waves";
@@ -475,10 +460,15 @@ $: {
               </Accordion.Trigger>
               <Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
                 <div class="flex flex-col items-start">
-                  <a href="#" class="text-white ml-4 mt-2">Top Analyst</a>
-                  <a href="#" class="text-white ml-4 mt-2">Top Analyst Stocks</a>
-                  <a href="#" class="text-white ml-4 mt-2">Shorted Stocks</a>
-                  <a href="#" class="text-white ml-4 mt-2">Retail Trader Tracker</a>
+                  <a href="/analysts" class="text-white ml-4 mt-4">Top Analyst</a>
+                  <a href="/analysts/top-stocks" class="text-white ml-4 mt-4">Top Analyst Stocks</a>
+                  <a href="/most-shorted-stocks" class="text-white ml-4 mt-4">Shorted Stocks</a>
+                  <a href="/most-retail-volume" class="text-white ml-4 mt-4">Retail Trader Tracker</a>
+                  <a href="/stock-screener" class="text-white ml-4 mt-4">Stock Screener</a>
+                  <a href="/market-mover" class="text-white ml-4 mt-4">Market Mover</a>
+                  <a href="/heatmaps" class="text-white ml-4 mt-4">Heatmaps</a>
+                  <a href="/list" class="text-white ml-4 mt-4">Stock Lists</a>
+
                 </div>
                 
               </Accordion.Content
@@ -500,10 +490,8 @@ $: {
               </Accordion.Trigger>
               <Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
                 <div class="flex flex-col items-start">
-                  <a href="#" class="text-white ml-4 mt-2">Top Analyst</a>
-                  <a href="#" class="text-white ml-4 mt-2">Top Analyst Stocks</a>
-                  <a href="#" class="text-white ml-4 mt-2">Shorted Stocks</a>
-                  <a href="#" class="text-white ml-4 mt-2">Retail Trader Tracker</a>
+                  <a href="/etf/new-launches" class="text-white ml-4 mt-4">New Launches</a>
+                  <a href="/etf/etf-providers" class="text-white ml-4 mt-4">ETF Providers</a>
                 </div>
                 
               </Accordion.Content
@@ -525,10 +513,12 @@ $: {
               </Accordion.Trigger>
               <Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
                 <div class="flex flex-col items-start">
-                  <a href="#" class="text-white ml-4 mt-4">Top Analyst</a>
-                  <a href="#" class="text-white ml-4 mt-4">Top Analyst Stocks</a>
-                  <a href="#" class="text-white ml-4 mt-4">Shorted Stocks</a>
-                  <a href="#" class="text-white ml-4 mt-4">Retail Trader Tracker</a>
+                  <a href="/dividends-calendar" class="text-white ml-4 mt-4">Dividends Calendar</a>
+                  <a href="/earnings-calendar" class="text-white ml-4 mt-4">Earnings Calendar</a>
+                  <a href="/ipos/2024" class="text-white ml-4 mt-4">IPO Calendar</a>
+                  <a href="/fda-calendar" class="text-white ml-4 mt-4">FDA Calendar</a>
+                  <a href="/economic-calendar" class="text-white ml-4 mt-4">Economic Calendar</a>
+                  <a href="/stock-splits-calendar" class="text-white ml-4 mt-4">Stock Splits Calendar</a>
                 </div>
                 
               </Accordion.Content
@@ -550,8 +540,8 @@ $: {
               </Accordion.Trigger>
               <Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
                 <div class="flex flex-col items-start">
-                  <a href="#" class="text-white ml-4 mt-2">Options Flow</a>
-                  <a href="#" class="text-white ml-4 mt-4">0DTE Flow</a>
+                  <a href="/options-flow" class="text-white ml-4 mt-4">Options Flow</a>
+                  <a href="options-zero-dte" class="text-white ml-4 mt-4">0DTE Flow</a>
                 </div>
                 
               </Accordion.Content
@@ -574,10 +564,10 @@ $: {
               </Accordion.Trigger>
               <Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
                 <div class="flex flex-col items-start">
-                  <a href="#" class="text-white ml-4 mt-4">Top Analyst</a>
-                  <a href="#" class="text-white ml-4 mt-4">Top Analyst Stocks</a>
-                  <a href="#" class="text-white ml-4 mt-4">Shorted Stocks</a>
-                  <a href="#" class="text-white ml-4 mt-4">Retail Trader Tracker</a>
+                  <div class="flex flex-col items-start">
+                    <a href="/politicians/flow-data" class="text-white ml-4 mt-4">Congress Flow</a>
+                    <a href="/politicians" class="text-white ml-4 mt-4">All Politicians</a>
+                  </div>
                 </div>
                 
               </Accordion.Content
@@ -614,7 +604,7 @@ $: {
             <Newspaper class="h-5.5 w-5.5" />
             
           </div>
-          <span class="ml-3 text-white">Newspaper</span>
+          <span class="ml-3 text-white">News</span>
         </a>
 
         <a href="/community" class="flex flex-row items-center ml-5 mt-3 mr-auto">
@@ -628,7 +618,27 @@ $: {
         </a>
             
     </nav>
-   
+    {#if data?.user?.tier === 'Free' || data?.user?.freeTrial === true}
+    <div class="mt-auto p-4 ">
+      <Card.Root
+        data-x-chunk-name="dashboard-02-chunk-0"
+        data-x-chunk-description="A card with a call to action"
+      >
+        <Card.Header class="p-2 pt-0 md:p-4">
+          <Card.Title>Upgrade to Pro</Card.Title>
+          <Card.Description>
+            Unlock all features of the platform and level up your trading.
+          </Card.Description>
+        </Card.Header>
+        <Card.Content class="p-2 pt-0 md:p-4 md:pt-0">
+          <a href="/pricing" class="px-12 rounded-lg text-sm py-1.5 m-auto text-center w-full bg-white text-black font-semibold hover:bg-white/80">
+            Upgrade
+          </a>
+        </Card.Content>
+      </Card.Root>
+    </div>
+    {/if}
+
   </aside>
   <div class="flex flex-col">
     <header class="navbar {$screenWidth < 640 && hideHeader ? 'invisible -mt-20' : ''} sticky top-0 z-40 bg-[#141417] flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6">
@@ -674,17 +684,29 @@ $: {
                 <Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
                   <Sheet.Close asChild let:builder>
                     <div class="flex flex-col items-start">
-                      <Button builders={[builder]} type="submit" class="bg-[#141417]">
-                        <a href="/etf/new-launches" class="text-[1rem] text-white ml-4 mt-2">Top Analyst</a>
+                      <Button builders={[builder]} type="submit" class="bg-[#141417] hover:bg-[#141417]">
+                        <a href="/analysts" class="text-[1rem] text-white ml-4 mt-2">Top Analyst</a>
                       </Button>
-                      <Button builders={[builder]} type="submit" class="bg-[#141417]">
-                        <a href="/etf/etf-providers" class="text-[1rem] text-white ml-4 mt-4">Top Analyst Stocks</a>
+                      <Button builders={[builder]} type="submit" class="bg-[#141417] hover:bg-[#141417]">
+                        <a href="/analysts/top-stocks" class="text-[1rem] text-white ml-4 mt-4">Top Analyst Stocks</a>
                       </Button>
-                      <Button builders={[builder]} type="submit" class="bg-[#141417]">
-                        <a href="/etf/etf-providers" class="text-[1rem] text-white ml-4 mt-4">Shorted Stocks</a>
+                      <Button builders={[builder]} type="submit" class="bg-[#141417] hover:bg-[#141417]">
+                        <a href="/most-shorted-stocks" class="text-[1rem] text-white ml-4 mt-4">Shorted Stocks</a>
                       </Button>
-                      <Button builders={[builder]} type="submit" class="bg-[#141417]">
-                        <a href="/etf/etf-providers" class="text-[1rem] text-white ml-4 mt-4">Retail Trader Tracker</a>
+                      <Button builders={[builder]} type="submit" class="bg-[#141417] hover:bg-[#141417]">
+                        <a href="/most-retail-volume" class="text-[1rem] text-white ml-4 mt-4">Retail Trader Tracker</a>
+                      </Button>
+                      <Button builders={[builder]} type="submit" class="bg-[#141417] hover:bg-[#141417]">
+                        <a href="/stock-screener" class="text-[1rem] text-white ml-4 mt-4">Stock Screener</a>
+                      </Button>
+                      <Button builders={[builder]} type="submit" class="bg-[#141417] hover:bg-[#141417]">
+                        <a href="/market-mover" class="text-[1rem] text-white ml-4 mt-4">Market Mover</a>
+                      </Button>
+                      <Button builders={[builder]} type="submit" class="bg-[#141417] hover:bg-[#141417]">
+                        <a href="/heatmaps" class="text-[1rem] text-white ml-4 mt-4">Heatmaps</a>
+                      </Button>
+                      <Button builders={[builder]} type="submit" class="bg-[#141417] hover:bg-[#141417]">
+                        <a href="/list" class="text-[1rem] text-white ml-4 mt-4">Stock Lists</a>
                       </Button>
                     </div>
 
@@ -711,10 +733,10 @@ $: {
 
                   <Sheet.Close asChild let:builder>
                     <div class="flex flex-col items-start">
-                      <Button builders={[builder]} type="submit" class="bg-[#141417]">
+                      <Button builders={[builder]} type="submit" class="bg-[#141417] hover:bg-[#141417]">
                         <a href="/etf/new-launches" class="text-[1rem] text-white ml-4 mt-2">New Launches</a>
                       </Button>
-                      <Button builders={[builder]} type="submit" class="bg-[#141417]">
+                      <Button builders={[builder]} type="submit" class="bg-[#141417] hover:bg-[#141417]">
                         <a href="/etf/etf-providers" class="text-[1rem] text-white ml-4 mt-4">ETF Providers</a>
                       </Button>
                     </div>
@@ -728,6 +750,52 @@ $: {
             </Accordion.Root>
                     
           </div>
+
+          <div class="flex flex-row items-center mr-auto  w-3/4">
+
+            <Accordion.Root class="w-fit">
+  
+              <Accordion.Item value="item-1">
+  
+                <Accordion.Trigger class="">
+                  <Calendar class="h-5.5 w-5.5 mr-3 text-white ml-1"/>  
+                  <span class="text-white mr-auto">Calendar</span>
+                </Accordion.Trigger>
+                <Accordion.Content class="border-l border-gray-500 ml-2 mt-5">
+
+                  <Sheet.Close asChild let:builder>
+                    <div class="flex flex-col items-start">
+                      <Button builders={[builder]} type="submit" class="bg-[#141417] hover:bg-[#141417]">
+                        <a href="/dividends-calendar" class="text-[1rem] text-white ml-4 mt-2">Dividends Calendar</a>
+                      </Button>
+                      <Button builders={[builder]} type="submit" class="bg-[#141417] hover:bg-[#141417]">
+                        <a href="/earnings-calendar" class="text-[1rem] text-white ml-4 mt-4">Earnings Calendar</a>
+                      </Button>
+                      <Button builders={[builder]} type="submit" class="bg-[#141417] hover:bg-[#141417]">
+                        <a href="/ipos/2024" class="text-[1rem] text-white ml-4 mt-4">IPO Calendar</a>
+                      </Button>
+                      <Button builders={[builder]} type="submit" class="bg-[#141417] hover:bg-[#141417]">
+                        <a href="/fda-calendar" class="text-[1rem] text-white ml-4 mt-4">FDA Calendar</a>
+                      </Button>
+                      <Button builders={[builder]} type="submit" class="bg-[#141417] hover:bg-[#141417]">
+                        <a href="/economic-calendar" class="text-[1rem] text-white ml-4 mt-4">Economic Calendar</a>
+                      </Button>
+                      <Button builders={[builder]} type="submit" class="bg-[#141417] hover:bg-[#141417]">
+                        <a href="/stock-splits-calendar" class="text-[1rem] text-white ml-4 mt-4">Stock Splits Calendar</a>
+                      </Button>
+                    </div>
+
+                  </Sheet.Close>
+
+                  
+                </Accordion.Content
+                >
+              </Accordion.Item>
+            </Accordion.Root>
+                    
+          </div>
+
+
          
 
           </nav>
@@ -736,7 +804,7 @@ $: {
       
       <a href="/" class="-ml-2 flex w-9 flex-shrink-0">
         <img class="avatar w-9 2xl:w-10 rounded-full" src={cloudFrontUrl+"/assets/stocknear_logo.png"} />
-        <span class="text-white hidden sm:block font-semibold ml-2 text-lg">Stocknear</span>
+        <span class="text-white font-semibold ml-2 text-lg">Stocknear</span>
       </a>
 
       
diff --git a/src/routes/analysts/+page.svelte b/src/routes/analysts/+page.svelte
index b38b318a..80bc34f6 100644
--- a/src/routes/analysts/+page.svelte
+++ b/src/routes/analysts/+page.svelte
@@ -51,7 +51,6 @@ $: {
 <!-- Other meta tags -->
 <meta property="og:title" content={`Top Wall Street Stock Analysts · stocknear`}/>
 <meta property="og:description" content={`A list of the top Wall Street stock analysts, ranked by their success rate and average return per rating.`} />
-<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 -->
 
@@ -59,7 +58,6 @@ $: {
 <meta name="twitter:card" content="summary_large_image"/>
 <meta name="twitter:title" content={`Top Wall Street Stock Analysts · stocknear`}/>
 <meta name="twitter:description" content={`A list of the top Wall Street stock analysts, ranked by their success rate and average return per rating.`} />
-<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
 <!-- Add more Twitter meta tags as needed -->
 
 </svelte:head>
@@ -82,7 +80,7 @@ $: {
         <div class="relative flex justify-center items-center overflow-hidden w-full">
             <main class="w-full">
              
-              <div class="w-full max-w-4xl m-auto sm:bg-[#09090B] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+              <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
               
                   <!-- Start Column -->
@@ -137,7 +135,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] border-b border-blue-400">
+                        <tr class="bg-[#09090B]">
                           <th class="text-end bg-[#09090B] text-white text-[1rem] font-medium">
                             #
                           </th>
diff --git a/src/routes/analysts/[slug]/+page.svelte b/src/routes/analysts/[slug]/+page.svelte
index 3c1c0639..56a9d119 100644
--- a/src/routes/analysts/[slug]/+page.svelte
+++ b/src/routes/analysts/[slug]/+page.svelte
@@ -109,7 +109,6 @@ function sectorSelector(sector) {
 <!-- Other meta tags -->
 <meta property="og:title" content={`Top Wall Street Stock Analysts · stocknear`}/>
 <meta property="og:description" content={`A list of the top Wall Street stock analysts, ranked by their success rate and average return per rating.`} />
-<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 -->
 
@@ -117,7 +116,6 @@ function sectorSelector(sector) {
 <meta name="twitter:card" content="summary_large_image"/>
 <meta name="twitter:title" content={`Top Wall Street Stock Analysts · stocknear`}/>
 <meta name="twitter:description" content={`A list of the top Wall Street stock analysts, ranked by their success rate and average return per rating.`} />
-<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
 <!-- Add more Twitter meta tags as needed -->
 
 </svelte:head>
@@ -232,7 +230,7 @@ function sectorSelector(sector) {
                       <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 rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto">
                           <thead>
-                            <tr class="bg-[#09090B] border-b border-blue-400">
+                            <tr class="bg-[#09090B]">
                               <th class="text-start bg-[#09090B] text-gray-200 text-sm sm:text-[1rem] font-semibold">
                                 Stock
                               </th>
diff --git a/src/routes/analysts/top-stocks/+page.svelte b/src/routes/analysts/top-stocks/+page.svelte
index 4f6494ab..5df192ad 100644
--- a/src/routes/analysts/top-stocks/+page.svelte
+++ b/src/routes/analysts/top-stocks/+page.svelte
@@ -55,7 +55,6 @@
   <!-- Other meta tags -->
   <meta property="og:title" content={`Top 100 Strong Buy Stocks · stocknear`}/>
   <meta property="og:description" content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`} />
-  <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 -->
   
@@ -63,7 +62,6 @@
   <meta name="twitter:card" content="summary_large_image"/>
   <meta name="twitter:title" content={`Top 100 Strong Buy Stocks · stocknear`}/>
   <meta name="twitter:description" content={`The top 100 "Strong Buy" stocks according to the best performing Wall Street analysts, with a rating of 5 stars.`} />
-  <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <!-- Add more Twitter meta tags as needed -->
   
   </svelte:head>
@@ -87,7 +85,7 @@
           <div class="relative flex justify-center items-center overflow-hidden w-full">
               <main class="w-full">
                
-                <div class="w-full max-w-4xl m-auto sm:bg-[#09090B] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+                <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
                   <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
                 
                     <!-- Start Column -->
@@ -134,7 +132,7 @@
             
                 </div>
 
-                <div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B]  sm:rounded-lg h-auto p-5 ">
+                <div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] border border-gray-800 sm:rounded-lg h-auto p-5 ">
                   <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
                   Strong Buy stocks by top-rated analysts with a star rating of 4 or above, known for their exceptional accuracy and returns. Stocks are ranked based on the volume of analyst ratings.
                 </div>
@@ -146,7 +144,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] border-b border-blue-400">
+                          <tr class="bg-[#09090B]">
                             <th class="text-end bg-[#09090B] text-white text-sm font-semibold">
                               #
                             </th>
diff --git a/src/routes/dividends-calendar/+page.svelte b/src/routes/dividends-calendar/+page.svelte
index 8ecd16ec..1628fac7 100644
--- a/src/routes/dividends-calendar/+page.svelte
+++ b/src/routes/dividends-calendar/+page.svelte
@@ -238,7 +238,6 @@ $: {
 <!-- Other meta tags -->
 <meta property="og:title" content={`Dividends Calendar · stocknear`}/>
 <meta property="og:description" content={`A list of upcoming dividends on the US stock market, with dates, times and estimated revenue and dividends growth.`} />
-<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 -->
 
@@ -246,7 +245,6 @@ $: {
 <meta name="twitter:card" content="summary_large_image"/>
 <meta name="twitter:title" content={`Dividends Calendar · stocknear`}/>
 <meta name="twitter:description" content={`A list of upcoming dividends on the US stock market, with dates, times and estimated revenue and dividends growth.`} />
-<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
 <!-- Add more Twitter meta tags as needed -->
 
 </svelte:head>
@@ -264,7 +262,7 @@ $: {
       </div>
     -->
 
-        <div class="w-full max-w-4xl m-auto sm:bg-[#09090B] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+        <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
           <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
         
             <!-- Start Column -->
diff --git a/src/routes/earnings-calendar/+page.svelte b/src/routes/earnings-calendar/+page.svelte
index a3010b26..d0562047 100644
--- a/src/routes/earnings-calendar/+page.svelte
+++ b/src/routes/earnings-calendar/+page.svelte
@@ -239,7 +239,6 @@ $: {
 <!-- Other meta tags -->
 <meta property="og:title" content={`Earnings Calendar · stocknear`}/>
 <meta property="og:description" content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`} />
-<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 -->
 
@@ -247,7 +246,6 @@ $: {
 <meta name="twitter:card" content="summary_large_image"/>
 <meta name="twitter:title" content={`Earnings Calendar · stocknear`}/>
 <meta name="twitter:description" content={`A list of upcoming earnings on the US stock market, with dates, times and estimated revenue and earnings growth.`} />
-<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
 <!-- Add more Twitter meta tags as needed -->
 
 </svelte:head>
@@ -264,7 +262,7 @@ $: {
     </div>
     -->
 
-    <div class="w-full max-w-4xl m-auto sm:bg-[#09090B] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+    <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
       <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
     
         <!-- Start Column -->
diff --git a/src/routes/economic-calendar/+page.svelte b/src/routes/economic-calendar/+page.svelte
index 292daf59..04cf1de9 100644
--- a/src/routes/economic-calendar/+page.svelte
+++ b/src/routes/economic-calendar/+page.svelte
@@ -291,7 +291,6 @@ const loadWorker = async () => {
   <!-- Other meta tags -->
   <meta property="og:title" content={`Worldwide Economic Calendar · stocknear`}/>
   <meta property="og:description" content={`A list of upcoming economic events on the US stock market, with dates, times and estimation.`} />
-  <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 -->
   
@@ -299,7 +298,6 @@ const loadWorker = async () => {
   <meta name="twitter:card" content="summary_large_image"/>
   <meta name="twitter:title" content={`Worldwide Economic Calendar · stocknear`}/>
   <meta name="twitter:description" content={`A list of upcoming economic events on the US stock market, with dates, times and estimation.`} />
-  <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <!-- Add more Twitter meta tags as needed -->
   
   </svelte:head>
@@ -310,7 +308,7 @@ const loadWorker = async () => {
         
       
 
-          <div class="w-full max-w-4xl m-auto sm:bg-[#09090B] sm:rounded-xl h-auto sm:p-10 mt-10 sm:mt-3 mb-8">
+          <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto sm:p-10 mt-10 sm:mt-3 mb-8">
             <div class="grid grid-cols-1 sm:grid-cols-2">
           
               <!-- Start Column -->
@@ -402,14 +400,14 @@ const loadWorker = async () => {
 
 <div class="flex flex-row items-center w-fit ml-auto mt-6 mb-2 mr-3 sm:mr-0">
 {#if filterList?.length !== 0}
-<label on:click={() => filterList = [] } class="mr-3 text-sm cursor-pointer bg-[#09090B] sm:hover:bg-[#09090B] duratiion-100 transition ease-in-out px-4 py-2 rounded-lg shadow-lg ml-auto">
+<label on:click={() => filterList = [] } class="mr-3 text-sm cursor-pointer bg-[#27272A] sm:hover:bg-[#27272A] duratiion-100 transition ease-in-out px-4 py-2 rounded-lg shadow-lg ml-auto">
   <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-4 h-4" viewBox="0 0 21 21"><g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M3.578 6.487A8 8 0 1 1 2.5 10.5"/><path d="M7.5 6.5h-4v-4"/></g></svg>
       Reset All
 </label>
 {/if}
 
 <div class="dropdown dropdown-end z-30">
-  <button tabindex="0" role="button" class="text-sm cursor-pointer bg-[#09090B] sm:hover:bg-[#09090B] duratiion-100 transition ease-in-out px-4 py-2 rounded-lg shadow-lg ml-auto">
+  <button tabindex="0" role="button" class="text-sm cursor-pointer text-white bg-[#27272A] sm:hover:bg-[#27272A] duration-100 transition ease-in-out px-4 py-2 rounded-lg shadow-lg ml-auto">
     Filter
     <svg class="inline-block w-2.5 h-2.5 ml-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
diff --git a/src/routes/etf/etf-providers/+layout.svelte b/src/routes/etf/etf-providers/+layout.svelte
index 9278f867..18351752 100644
--- a/src/routes/etf/etf-providers/+layout.svelte
+++ b/src/routes/etf/etf-providers/+layout.svelte
@@ -32,7 +32,6 @@
   <!-- Other meta tags -->
   <meta property="og:title" content="Largest ETF Providers by Assets Under Management · stocknear"/>
   <meta property="og:description" content="A complete list of all the companies that provide exchange-traded funds (ETFs) that are actively traded on the U.S. stock market.">
-  <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 -->
 
@@ -40,7 +39,6 @@
   <meta name="twitter:card" content="summary_large_image"/>
   <meta name="twitter:title" content="Largest ETF Providers by Assets Under Management · stocknear"/>
   <meta name="twitter:description" content="A complete list of all the companies that provide exchange-traded funds (ETFs) that are actively traded on the U.S. stock market.">
-  <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
     
@@ -60,7 +58,7 @@
 
 
 
-<div class="w-full max-w-4xl m-auto sm:bg-[#09090B] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+<div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
 
     <!-- Start Column -->
diff --git a/src/routes/etf/etf-providers/+page.svelte b/src/routes/etf/etf-providers/+page.svelte
index 3e32da6c..aed44575 100644
--- a/src/routes/etf/etf-providers/+page.svelte
+++ b/src/routes/etf/etf-providers/+page.svelte
@@ -23,7 +23,6 @@ let etfProviderList = data?.getAllETFProviders;
   <!-- Other meta tags -->
   <meta property="og:title" content={`Largest ETF Providers by Assets Under Management · stocknear`}/>
   <meta property="og:description" content={`A complete list of all the companies that provide exchange-traded funds (ETFs) that are actively traded on the U.S. stock market.`} />
-  <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 -->
 
@@ -31,7 +30,6 @@ let etfProviderList = data?.getAllETFProviders;
   <meta name="twitter:card" content="summary_large_image"/>
   <meta name="twitter:title" content={`Largest ETF Providers by Assets Under Management · stocknear`}/>
   <meta name="twitter:description" content={`A complete list of all the companies that provide exchange-traded funds (ETFs) that are actively traded on the U.S. stock market.`} />
-  <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <!-- Add more Twitter meta tags as needed -->
 
 </svelte:head>
@@ -41,7 +39,7 @@ let etfProviderList = data?.getAllETFProviders;
     <section class="w-full max-w-4xl overflow-hidden m-auto">
             
           
-        <div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
+        <div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4">
           <svg class="w-5 h-5 inline-block flex-shrink-0 mr-0.5 sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
           
           Every Exchange-Traded Fund (ETF) is managed by a specific company. Below is a list of companies offering actively traded ETFs on the U.S. stock market.
diff --git a/src/routes/etf/etf-providers/[slug]/+page.svelte b/src/routes/etf/etf-providers/[slug]/+page.svelte
index acf4ddeb..312d3bb7 100644
--- a/src/routes/etf/etf-providers/[slug]/+page.svelte
+++ b/src/routes/etf/etf-providers/[slug]/+page.svelte
@@ -59,7 +59,6 @@
   <!-- Other meta tags -->
   <meta property="og:title" content={`${etfProviderName} (${etfProviderData?.length}) ETFs - A Complete List`}/>
   <meta property="og:description" content={``} />
-  <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 -->
 
@@ -67,7 +66,6 @@
   <meta name="twitter:card" content="summary_large_image"/>
   <meta name="twitter:title" content={`${etfProviderName} (${etfProviderData?.length}) ETFs - A Complete List`}/>
   <meta name="twitter:description" content={``} />
-  <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <!-- Add more Twitter meta tags as needed -->
 
 </svelte:head>
@@ -77,7 +75,7 @@
                 
 
             {#if rawData?.length !== 0}
-            <div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
+            <div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4">
               <svg class="w-5 h-5 inline-block flex-shrink-0 mr-0.5 sm:mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
               
               {etfProviderName} has {rawData?.length} ETFs listed with a total of {abbreviateNumber(totalAssets,true)} 
@@ -87,7 +85,7 @@
             </div>
             {/if}
 
-            <div class="stats stats-horizontal bg-[#09090B] shadow w-full rounded-none sm:rounded-lg overflow-hidden">
+            <div class="stats stats-horizontal bg-[#27272A] shadow w-full rounded-none sm:rounded-lg overflow-hidden">
       
                 <div class="stat">
                   <div class="stat-title text-white text-sm sm:text-lg font-semibold">Listed Funds</div>
diff --git a/src/routes/etf/new-launches/+page.svelte b/src/routes/etf/new-launches/+page.svelte
index 8c967dd8..d523a7c4 100644
--- a/src/routes/etf/new-launches/+page.svelte
+++ b/src/routes/etf/new-launches/+page.svelte
@@ -36,7 +36,6 @@ $: {
 <!-- Other meta tags -->
 <meta property="og:title" content={`100 Newest ETFs · stocknear`}/>
 <meta property="og:description" content={`A list of the 100 most recently launched ETFs on the US stock market, sorted by the inception date.`} />
-<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 -->
 
@@ -44,7 +43,6 @@ $: {
 <meta name="twitter:card" content="summary_large_image"/>
 <meta name="twitter:title" content={`100 Newest ETFs · stocknear`}/>
 <meta name="twitter:description" content={`A list of the 100 most recently launched ETFs on the US stock market, sorted by the inception date.`} />
-<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
 <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
               
@@ -57,7 +55,7 @@ $: {
         </ul>
     </div>
 
-  <div class="w-full max-w-4xl m-auto sm:bg-[#09090B] sm:rounded-xl h-auto p-10 mt-3 sm:mb-8">
+  <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto p-10 mt-3 sm:mb-8">
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
   
       <!-- Start Column -->
@@ -125,7 +123,7 @@ $: {
           </span>
       </div>
 
-      <div class="border-b mt-2 border-blue-400 w-full mb-4" />
+      <div class="border-b mt-2 border-gray-800 w-full mb-4" />
 
 
     <table class="mt-5 table table-compact rounded-none sm:rounded-md w-full bg-[#09090B] border-bg-[#09090B] m-auto overflow-hidden">
diff --git a/src/routes/fda-calendar/+page.svelte b/src/routes/fda-calendar/+page.svelte
index 3bd80557..4cf1bc47 100644
--- a/src/routes/fda-calendar/+page.svelte
+++ b/src/routes/fda-calendar/+page.svelte
@@ -88,7 +88,7 @@
           <div class="relative flex justify-center items-center overflow-hidden w-full">
               <main class="w-full">
                
-                <div class="w-full max-w-4xl m-auto sm:bg-[#09090B] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+                <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
                   <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
                 
                     <!-- Start Column -->
@@ -137,7 +137,7 @@
 
                 {#if isLoaded}
 
-                <div class="w-full max-w-4xl text-center sm:text-start sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B]  sm:rounded-lg h-auto p-5 ">
+                <div class="w-full max-w-4xl text-center sm:text-start sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 ">
                   <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
                   Biotech companies can be among the most lucrative stocks if you invest wisely. Their stock prices can soar by +100% in a single day or plummet by the same amount, depending on the outcomes of clinical trials.
                 </div>
@@ -148,7 +148,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] border-b border-blue-400">
+                          <tr class="bg-[#09090B]">
                             <th class="text-start bg-[#09090B] text-white text-sm font-semibold">
                               Symbol
                             </th>
diff --git a/src/routes/heatmaps/+page.svelte b/src/routes/heatmaps/+page.svelte
index 27ff5119..377d45b5 100644
--- a/src/routes/heatmaps/+page.svelte
+++ b/src/routes/heatmaps/+page.svelte
@@ -4,7 +4,6 @@
 import Chart from '$lib/components/Chart.svelte'
 
 import { screenWidth, numberOfUnreadNotification } from '$lib/store';
-import { fly } from 'svelte/transition';
 import { goto } from '$app/navigation';
 //import * as echarts from 'echarts';
 
@@ -292,7 +291,6 @@ $: {
     <!-- Other meta tags -->
     <meta property="og:title" content="Market Heatmaps · stocknear"/>
     <meta property="og:description" content="Stock Heatmaps of S&P500, Nasdaq and Dow Jones to see percentage changes of the return for different time periods">
-    <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 -->
 
@@ -300,7 +298,6 @@ $: {
     <meta name="twitter:card" content="summary_large_image"/>
     <meta name="twitter:title" content="Market Heatmaps · stocknear"/>
     <meta name="twitter:description" content="Stock Heatmaps of S&P500, Nasdaq and Dow Jones to see percentage changes of the return for different time periods">
-    <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
     <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
     
@@ -309,7 +306,7 @@ $: {
     
     <section class="w-full max-w-4xl overflow-hidden m-auto min-h-screen pt-5 pb-60">
     
-          <div class="w-full max-w-4xl m-auto sm:bg-[#09090B] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+          <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
           
               <!-- Start Column -->
@@ -363,7 +360,7 @@ $: {
       {#if isLoaded}
     
                 
-        <section in:fly={{ x: -10, duration: 150, delay:150 }} out:fly={{ x: 5, duration: 150 }} class="w-full max-w-4xl overflow-hidden m-auto">
+        <section class="w-full max-w-4xl overflow-hidden m-auto">
           
 
 
@@ -373,7 +370,7 @@ $: {
     
                     
 
-                  <div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4 ">
+                  <div class="w-full max-w-4xl sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 mb-4 ">
                       <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
                       <span>
                           Today, <label on:click={() => sectorSelector(lowestSumCategory)} class="cursor-pointer text-blue-400 sm:hover:text-white">{lowestSumCategory}</label> took the lead as the {displayIndex} largest loser, marking a total return of <span class="text-white font-medium">{lowestSum?.toFixed(2)}%</span>, 
diff --git a/src/routes/hedge-funds/[slug]/+page.svelte b/src/routes/hedge-funds/[slug]/+page.svelte
index c4b77930..8675ebbd 100644
--- a/src/routes/hedge-funds/[slug]/+page.svelte
+++ b/src/routes/hedge-funds/[slug]/+page.svelte
@@ -634,7 +634,7 @@ function tabFunction(state) {
                   </div>
                 </div>
                 
-                <div class="p-0 sm:p-10 bg-[#09090B] sm:bg-[#09090B] rounded-lg sm:min-h-[430px] pt-6">
+                <div class="p-0 sm:p-10 bg-[#09090B] sm:bg-[#09090B] border border-gray-800 rounded-lg sm:min-h-[430px] pt-6">
                   <div class="h-auto w-full ">
                     
                     
@@ -650,7 +650,7 @@ function tabFunction(state) {
                     {#if rawList?.length !== 0}
                     <div class="hidden sm:block sm:overflow-hidden sm:overflow-y-scroll scroller w-full m-auto h-auto sm:max-h-[700px]">
 
-                      <table class="-ml-3 table table-sm table-compact table-pin-rows table-pin-cols rounded-none sm:rounded-md w-full bg-[#09090B] m-auto mt-5 ">
+                      <table class=" table table-sm table-compact table-pin-rows table-pin-cols rounded-none sm:rounded-md w-full bg-[#09090B] m-auto mt-5 ">
                         <!-- head -->
                         <thead>
                           <tr class="bg-[#09090B]">
@@ -671,11 +671,11 @@ function tabFunction(state) {
                             <th class="shadow-md text-start bg-[#09090B] text-white text-sm font-semibold">
                               Value Owned
                             </th>
-                            <th class="shadow-md text-start bg-[#09090B]  text-white text-sm font-semibold">
+                            <th class="shadow-md text-ednd bg-[#09090B]  text-white text-sm font-semibold">
                               Avg. Buy Price
                             </th>
                             {#if changeAssetType !== 'Share'}
-                            <th class="shadow-md text-start bg-[#09090B]  text-white text-sm font-semibold">
+                            <th class="shadow-md text-end bg-[#09090B]  text-white text-sm font-semibold">
                               Type
                             </th>
                             {/if}
@@ -683,7 +683,7 @@ function tabFunction(state) {
                         </thead>
                         <tbody class="p-0">
                           {#each deactivateContent ? displayList?.slice(0,5) : displayList as item}
-                              <tr on:click={() => goto(`/${item?.type}/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#27272A] cursor-pointer">
+                              <tr on:click={() => goto(`/${item?.type}/${item?.symbol}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#27272A] cursor-pointer">
       
                                 <td class="text-gray-200 pb-3 border-b border-b-[#27272A]">
                                   <div class="flex flex-row items-center">
@@ -714,11 +714,11 @@ function tabFunction(state) {
                                     {abbreviateNumber(item?.marketValue,true)}
                                 </td>
   
-                                  <td class="text-center text-sm font-semibold text-white border-b border-b-[#27272A]">
+                                  <td class="text-end text-sm font-semibold text-white border-b border-b-[#27272A]">
                                       ${item?.avgPricePaid}
                                   </td>
                                   {#if changeAssetType !== 'Share'}
-                                  <td class="text-center text-sm font-semibold border-b border-b-[#27272A] {item?.putCallShare === 'CALL' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">
+                                  <td class="text-end text-sm font-semibold border-b border-b-[#27272A] {item?.putCallShare === 'CALL' ? 'text-[#00FC50]' : 'text-[#FC2120]'}">
                                     {formatString(item?.putCallShare)}
                                   </td>
                                   {/if}
diff --git a/src/routes/ipos/+layout.svelte b/src/routes/ipos/+layout.svelte
index 8a99f48c..b12015ec 100644
--- a/src/routes/ipos/+layout.svelte
+++ b/src/routes/ipos/+layout.svelte
@@ -89,7 +89,7 @@ $: {
                 <main>
       
       
-                  <div class="w-full max-w-4xl m-auto sm:bg-[#09090B] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-12">
+                  <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-12">
                     <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
                   
                       <!-- Start Column -->
diff --git a/src/routes/ipos/+page.svelte b/src/routes/ipos/+page.svelte
index cf075e28..a5aee22e 100644
--- a/src/routes/ipos/+page.svelte
+++ b/src/routes/ipos/+page.svelte
@@ -62,7 +62,7 @@
   <div class="flex flex-col justify-center items-center p-3 sm:p-0">
   
     
-    <div class="mt-0 sm:mt-5 mb-2 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-lg h-auto p-5">
+    <div class="mt-0 sm:mt-5 mb-2 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 font-medium border border-gray-800 sm:rounded-lg h-auto p-5">
       <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
       All {rawData?.length} IPOs on the US stock market in between 2019 - 2024.
     </div>
diff --git a/src/routes/ipos/[slug]/+page.svelte b/src/routes/ipos/[slug]/+page.svelte
index fa4039cf..2919250f 100644
--- a/src/routes/ipos/[slug]/+page.svelte
+++ b/src/routes/ipos/[slug]/+page.svelte
@@ -108,7 +108,7 @@ $: {
 <div class="flex flex-col justify-center items-center p-5 sm:p-0">
 
   
-  <div class="mt-0 sm:mt-5 mb-2 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 font-medium bg-[#09090B] sm:rounded-lg h-auto p-5">
+  <div class="mt-0 sm:mt-5 mb-2 w-full sm:flex sm:flex-row sm:items-center m-auto text-gray-100 font-medium border border-gray-800 sm:rounded-lg h-auto p-5">
     <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
     There have been {totalIPOs} IPOs on the US stock market in {year}.
   </div>
diff --git a/src/routes/list/+layout.svelte b/src/routes/list/+layout.svelte
index f93b2747..d6bef3e0 100644
--- a/src/routes/list/+layout.svelte
+++ b/src/routes/list/+layout.svelte
@@ -205,7 +205,7 @@ const combinedNavigation = navigation?.concat(updatedNavigation);
 
 
 
-        <div class="hidden sm:block w-full max-w-4xl m-auto bg-[#09090B] sm:rounded-xl h-auto p-10 mt-3 mb-8">
+        <div class="hidden sm:block w-full max-w-4xl m-auto bg-[#27272A] sm:rounded-xl h-auto p-10 mt-3 mb-8">
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
         
             <!-- Start Column -->
diff --git a/src/routes/list/amex-stocks/+page.svelte b/src/routes/list/amex-stocks/+page.svelte
index 89ddb9fd..68977bc1 100644
--- a/src/routes/list/amex-stocks/+page.svelte
+++ b/src/routes/list/amex-stocks/+page.svelte
@@ -48,7 +48,7 @@
         </div>
   
           
-        <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+        <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
     
           <div class="stat">
             <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/list/canadian-stocks-us/+page.svelte b/src/routes/list/canadian-stocks-us/+page.svelte
index d69812a2..53dec575 100644
--- a/src/routes/list/canadian-stocks-us/+page.svelte
+++ b/src/routes/list/canadian-stocks-us/+page.svelte
@@ -49,7 +49,7 @@
         </div>
   
           
-        <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+        <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
     
           <div class="stat">
             <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/list/chinese-stocks-us/+page.svelte b/src/routes/list/chinese-stocks-us/+page.svelte
index 96a10594..61af576e 100644
--- a/src/routes/list/chinese-stocks-us/+page.svelte
+++ b/src/routes/list/chinese-stocks-us/+page.svelte
@@ -48,7 +48,7 @@
         </div>
   
           
-        <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+        <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
     
           <div class="stat">
             <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/list/dow-jones-stocks/+page.svelte b/src/routes/list/dow-jones-stocks/+page.svelte
index 417e8011..65805609 100644
--- a/src/routes/list/dow-jones-stocks/+page.svelte
+++ b/src/routes/list/dow-jones-stocks/+page.svelte
@@ -50,7 +50,7 @@
         </div>
   
           
-        <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+        <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
     
           <div class="stat">
             <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/list/german-stocks-us/+page.svelte b/src/routes/list/german-stocks-us/+page.svelte
index 99c49ea6..493b5614 100644
--- a/src/routes/list/german-stocks-us/+page.svelte
+++ b/src/routes/list/german-stocks-us/+page.svelte
@@ -49,7 +49,7 @@
         </div>
   
           
-        <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+        <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
     
           <div class="stat">
             <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/list/indian-stocks-us/+page.svelte b/src/routes/list/indian-stocks-us/+page.svelte
index 76cf39e9..ba0fca19 100644
--- a/src/routes/list/indian-stocks-us/+page.svelte
+++ b/src/routes/list/indian-stocks-us/+page.svelte
@@ -49,7 +49,7 @@
         </div>
   
           
-        <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+        <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
     
           <div class="stat">
             <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/list/israeli-stocks-us/+page.svelte b/src/routes/list/israeli-stocks-us/+page.svelte
index 253461c2..0fbe0759 100644
--- a/src/routes/list/israeli-stocks-us/+page.svelte
+++ b/src/routes/list/israeli-stocks-us/+page.svelte
@@ -49,7 +49,7 @@
         </div>
   
           
-        <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+        <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
     
           <div class="stat">
             <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/list/japanese-stocks-us/+page.svelte b/src/routes/list/japanese-stocks-us/+page.svelte
index c2a8ab68..832c968c 100644
--- a/src/routes/list/japanese-stocks-us/+page.svelte
+++ b/src/routes/list/japanese-stocks-us/+page.svelte
@@ -49,7 +49,7 @@
         </div>
   
           
-        <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+        <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
     
           <div class="stat">
             <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/list/large-cap-stocks/+page.svelte b/src/routes/list/large-cap-stocks/+page.svelte
index 5cb3ce8d..9359f551 100644
--- a/src/routes/list/large-cap-stocks/+page.svelte
+++ b/src/routes/list/large-cap-stocks/+page.svelte
@@ -46,7 +46,7 @@
           
         
         
-    <div class="w-full max-w-4xl m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
+    <div class="w-full max-w-4xl m-auto text-gray-100 bg-[#27272A] sm:rounded-lg h-auto p-5 mb-4">
       Large-cap stocks have a market capitalizations ranging between $10 billion to $200 billion USD, while additional categories include 
       <a href="/list/mega-cap-stocks" class="text-blue-400 hover:text-white">
           Mega-Cap
@@ -65,7 +65,7 @@
       </a>.
   </div>
   
-      <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+      <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
     
           <div class="stat">
             <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/list/mega-cap-stocks/+page.svelte b/src/routes/list/mega-cap-stocks/+page.svelte
index 888e6d80..ab7da29c 100644
--- a/src/routes/list/mega-cap-stocks/+page.svelte
+++ b/src/routes/list/mega-cap-stocks/+page.svelte
@@ -46,7 +46,7 @@
           
         
         
-    <div class="w-full max-w-4xl m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
+    <div class="w-full max-w-4xl m-auto text-gray-100 bg-[#27272A] sm:rounded-lg h-auto p-5 mb-4">
       Mega-cap stocks have a market capitalizations ranging above $200 billion USD, while additional categories include 
       <a href="/list/large-cap-stocks" class="text-blue-400 hover:text-white">
           Large-Cap
@@ -65,7 +65,7 @@
       </a>.
   </div>
   
-      <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+      <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
     
           <div class="stat">
             <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/list/micro-cap-stocks/+page.svelte b/src/routes/list/micro-cap-stocks/+page.svelte
index 0c0fd61e..ea07b99c 100644
--- a/src/routes/list/micro-cap-stocks/+page.svelte
+++ b/src/routes/list/micro-cap-stocks/+page.svelte
@@ -46,7 +46,7 @@
           
         
         
-    <div class="w-full max-w-4xl m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
+    <div class="w-full max-w-4xl m-auto text-gray-100 bg-[#27272A] sm:rounded-lg h-auto p-5 mb-4">
       Micro-cap stocks have a market capitalizations ranging between $50 and $300 million USD, while additional categories include 
         <a href="/list/mega-cap-stocks" class="text-blue-400 hover:text-white">
             Mega-Cap
@@ -65,7 +65,7 @@
         </a>.
     </div>
   
-    <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+    <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
     
       <div class="stat">
         <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/list/mid-cap-stocks/+page.svelte b/src/routes/list/mid-cap-stocks/+page.svelte
index 93587c9f..69890e19 100644
--- a/src/routes/list/mid-cap-stocks/+page.svelte
+++ b/src/routes/list/mid-cap-stocks/+page.svelte
@@ -46,7 +46,7 @@
           
         
         
-    <div class="w-full max-w-4xl m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
+    <div class="w-full max-w-4xl m-auto text-gray-100 bg-[#27272A] sm:rounded-lg h-auto p-5 mb-4">
       Mid-cap stocks have a market capitalizations ranging from $2 billion to $10 billion USD, while additional categories include 
       <a href="/list/mega-cap-stocks" class="text-blue-400 hover:text-white">
           Mega-Cap
@@ -65,7 +65,7 @@
       </a>.
   </div>
   
-  <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+  <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
     
     <div class="stat">
       <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/list/nano-cap-stocks/+page.svelte b/src/routes/list/nano-cap-stocks/+page.svelte
index 98919970..591d946e 100644
--- a/src/routes/list/nano-cap-stocks/+page.svelte
+++ b/src/routes/list/nano-cap-stocks/+page.svelte
@@ -46,7 +46,7 @@
           
         
         
-    <div class="w-full max-w-4xl m-auto text-gray-100 bg-[#09090B] sm:rounded-lg h-auto p-5 mb-4">
+    <div class="w-full max-w-4xl m-auto text-gray-100 bg-[#27272A] sm:rounded-lg h-auto p-5 mb-4">
       Nano-cap stocks have a market capitalizations under $50 million USD, while additional categories include 
       <a href="/list/mega-cap-stocks" class="text-blue-400 hover:text-white">
           Mega-Cap
@@ -62,7 +62,7 @@
       </a>.
   </div>
   
-  <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+  <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
     
     <div class="stat">
       <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/list/nasdaq-100-stocks/+page.svelte b/src/routes/list/nasdaq-100-stocks/+page.svelte
index 47100f21..a8a7ecf2 100644
--- a/src/routes/list/nasdaq-100-stocks/+page.svelte
+++ b/src/routes/list/nasdaq-100-stocks/+page.svelte
@@ -48,7 +48,7 @@
         </div>
   
           
-        <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+        <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
     
           <div class="stat">
             <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/list/nasdaq-stocks/+page.svelte b/src/routes/list/nasdaq-stocks/+page.svelte
index 16e3957a..18bd8546 100644
--- a/src/routes/list/nasdaq-stocks/+page.svelte
+++ b/src/routes/list/nasdaq-stocks/+page.svelte
@@ -49,7 +49,7 @@ $: {
         </div>
 
         
-        <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+        <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
     
           <div class="stat">
             <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/list/nyse-stocks/+page.svelte b/src/routes/list/nyse-stocks/+page.svelte
index d922568b..aef8266d 100644
--- a/src/routes/list/nyse-stocks/+page.svelte
+++ b/src/routes/list/nyse-stocks/+page.svelte
@@ -50,7 +50,7 @@
         </div>
   
           
-        <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+        <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
     
           <div class="stat">
             <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/list/small-cap-stocks/+page.svelte b/src/routes/list/small-cap-stocks/+page.svelte
index 35d1dc4d..fd994d38 100644
--- a/src/routes/list/small-cap-stocks/+page.svelte
+++ b/src/routes/list/small-cap-stocks/+page.svelte
@@ -65,7 +65,7 @@
       </a>.
   </div>
   
-      <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+      <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
         
         <div class="stat">
           <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/list/sp-500-stocks/+page.svelte b/src/routes/list/sp-500-stocks/+page.svelte
index 71329a8e..0dc295e0 100644
--- a/src/routes/list/sp-500-stocks/+page.svelte
+++ b/src/routes/list/sp-500-stocks/+page.svelte
@@ -50,7 +50,7 @@
         </div>
   
           
-        <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+        <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
     
           <div class="stat">
             <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/list/uk-stocks-us/+page.svelte b/src/routes/list/uk-stocks-us/+page.svelte
index 948097d3..140fa1da 100644
--- a/src/routes/list/uk-stocks-us/+page.svelte
+++ b/src/routes/list/uk-stocks-us/+page.svelte
@@ -49,7 +49,7 @@
         </div>
   
           
-        <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+        <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
     
           <div class="stat">
             <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/list/xetra-stocks/+page.svelte b/src/routes/list/xetra-stocks/+page.svelte
index 24a5f1ad..d3a63945 100644
--- a/src/routes/list/xetra-stocks/+page.svelte
+++ b/src/routes/list/xetra-stocks/+page.svelte
@@ -49,7 +49,7 @@
         </div>
   
           
-        <div class="stats stats-horizontal no-scrollbar bg-[#09090B] w-full rounded-lg text-white">
+        <div class="stats stats-horizontal no-scrollbar bg-[#27272A] w-full rounded-lg text-white">
     
           <div class="stat">
             <div class="stat-title text-sm sm:text-lg font-semibold text-white">Total Stocks</div>
diff --git a/src/routes/markdown-guide/+page.svelte b/src/routes/markdown-guide/+page.svelte
index 90b81c68..dfad82d4 100644
--- a/src/routes/markdown-guide/+page.svelte
+++ b/src/routes/markdown-guide/+page.svelte
@@ -13,7 +13,6 @@
     <!-- Other meta tags -->
     <meta property="og:title" content="Markdown Guide · stocknear"/>
     <meta property="og:description" content="Markdown Guide to Post on Stocknear Community Page">
-    <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 -->
   
@@ -21,7 +20,6 @@
     <meta name="twitter:card" content="summary_large_image"/>
     <meta name="twitter:title" content="Markdown Guide · stocknear"/>
     <meta name="twitter:description" content="Markdown Guide to Post on Stocknear Community Page">
-    <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
     <!-- Add more Twitter meta tags as needed -->
   </svelte:head>
   
diff --git a/src/routes/market-mover/+page.svelte b/src/routes/market-mover/+page.svelte
index 2e73540a..63daf180 100644
--- a/src/routes/market-mover/+page.svelte
+++ b/src/routes/market-mover/+page.svelte
@@ -204,7 +204,6 @@ $: {
 <!-- Other meta tags -->
 <meta property="og:title" content={`Today's Top Stock Gainers, Losers and Most Active · stocknear`}/>
 <meta property="og:description" content={`A list of the stocks with the highest percentage gain, highest percentage loss and most active today. See stock price, volume, market cap and more.`} />
-<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 -->
 
@@ -212,7 +211,6 @@ $: {
 <meta name="twitter:card" content="summary_large_image"/>
 <meta name="twitter:title" content={`Today's Top Stock Gainers, Losers and Most Active · stocknear`}/>
 <meta name="twitter:description" content={`A list of the stocks with the highest percentage gain, highest percentage loss and most active today. See stock price, volume, market cap 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>
@@ -231,7 +229,7 @@ $: {
 -->
 
 
-  <div class="w-full max-w-4xl m-auto sm:bg-[#09090B] sm:rounded-xl h-auto sm:p-10 mt-8 mb-4 sm:mb-8">
+  <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto sm:p-10 mt-8 mb-4 sm:mb-8">
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
   
       <!-- Start Column -->
@@ -304,7 +302,6 @@ $: {
             <div class="{displaySection === 'active' ? 'bg-[#75D377]' : 'bg-[#09090B]'} mt-1 h-[3px] rounded-full w-[5rem] rounded-full" />
           </button> 
         </div>
-        <div class="border-b mt-5 border-blue-400" />
 
       </div>
 
diff --git a/src/routes/market-news/+layout.svelte b/src/routes/market-news/+layout.svelte
index 8c4c6fd8..62c7398a 100644
--- a/src/routes/market-news/+layout.svelte
+++ b/src/routes/market-news/+layout.svelte
@@ -52,7 +52,7 @@ const navigation = [
             <main>
   
   
-              <div class="w-full max-w-5xl m-auto sm:bg-[#09090B] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+              <div class="w-full max-w-5xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
                 <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
               
                   <!-- Start Column -->
diff --git a/src/routes/market-news/+page.svelte b/src/routes/market-news/+page.svelte
index 14f9cc6d..03f7610b 100644
--- a/src/routes/market-news/+page.svelte
+++ b/src/routes/market-news/+page.svelte
@@ -59,7 +59,6 @@ function checkIfYoutubeVideo(link) {
 <!-- Other meta tags -->
 <meta property="og:title" content={`Today's Stock Market News and Breaking Stories · stocknear`}/>
 <meta property="og:description" content={`Get the latest stock market news and breaking stories from the world's best finance and investing websites.`} />
-<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 -->
 
@@ -67,7 +66,6 @@ function checkIfYoutubeVideo(link) {
 <meta name="twitter:card" content="summary_large_image"/>
 <meta name="twitter:title" content={`Today's Stock Market News and Breaking Stories · stocknear`}/>
 <meta name="twitter:description" content={`Get the latest stock market news and breaking stories from the world's best finance and investing websites.`} />
-<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
 <!-- Add more Twitter meta tags as needed -->
 
 </svelte:head>
@@ -82,7 +80,7 @@ function checkIfYoutubeVideo(link) {
                   <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                       {#if news.length !== 0}
                       {#each news as item}
-                          <div class="flex flex-col w-full mt-5 bg-[#09090B] shadow-lg h-auto sm:h-[430px] pb-10 sm:pb-5 rounded-none sm:rounded-lg m-auto">
+                          <div class="flex flex-col w-full mt-5 bg-[#27272A] shadow-lg h-auto sm:h-[430px] pb-10 sm:pb-5 rounded-none sm:rounded-lg m-auto">
                             {#if videoId = checkIfYoutubeVideo(item.url)}
                                 <iframe
                                     class="w-full h-56 rounded-none sm:rounded-lg"
diff --git a/src/routes/market-news/crypto/+page.svelte b/src/routes/market-news/crypto/+page.svelte
index 0e3a78eb..1004f831 100644
--- a/src/routes/market-news/crypto/+page.svelte
+++ b/src/routes/market-news/crypto/+page.svelte
@@ -58,7 +58,6 @@ function checkIfYoutubeVideo(link) {
   <!-- Other meta tags -->
   <meta property="og:title" content={`Today's Crypto News and Breaking Stories · stocknear`}/>
   <meta property="og:description" content={`Get the latest crypto news and breaking stories from the world's best finance and investing websites.`} />
-  <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 -->
   
@@ -66,7 +65,6 @@ function checkIfYoutubeVideo(link) {
   <meta name="twitter:card" content="summary_large_image"/>
   <meta name="twitter:title" content={`Today's Crypto News and Breaking Stories · stocknear`}/>
   <meta name="twitter:description" content={`Get the latest crypto news and breaking stories from the world's best finance and investing websites.`} />
-  <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <!-- Add more Twitter meta tags as needed -->
   
 </svelte:head>
@@ -84,7 +82,7 @@ function checkIfYoutubeVideo(link) {
                   <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                       {#if news.length !== 0}
                       {#each news as item}
-                          <div class="flex flex-col w-full mt-5 bg-[#09090B] shadow-lg h-auto sm:h-[420px] pb-10 sm:pb-5 rounded-none sm:rounded-lg m-auto">
+                          <div class="flex flex-col w-full mt-5 bg-[#27272A] shadow-lg h-auto sm:h-[420px] pb-10 sm:pb-5 rounded-none sm:rounded-lg m-auto">
                             {#if videoId = checkIfYoutubeVideo(item.url)}
                                 <iframe
                                     class="w-full h-56 rounded-none sm:rounded-lg"
diff --git a/src/routes/market-news/general/+page.svelte b/src/routes/market-news/general/+page.svelte
index 70a38da3..aaf8b8e5 100644
--- a/src/routes/market-news/general/+page.svelte
+++ b/src/routes/market-news/general/+page.svelte
@@ -82,7 +82,7 @@
                   <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
                       {#if news?.length !== 0}
                       {#each news as item}
-                          <div class="flex flex-col w-full mt-5 bg-[#09090B] shadow-lg h-auto sm:h-[420px] pb-10 sm:pb-5 rounded-none sm:rounded-lg m-auto">
+                          <div class="flex flex-col w-full mt-5 bg-[#27272A] shadow-lg h-auto sm:h-[420px] pb-10 sm:pb-5 rounded-none sm:rounded-lg m-auto">
                             {#if videoId = checkIfYoutubeVideo(item.url)}
                                 <iframe
                                     class="w-full h-56 rounded-none sm:rounded-lg"
diff --git a/src/routes/most-retail-volume/+page.svelte b/src/routes/most-retail-volume/+page.svelte
index 517f6c52..0d7cefdc 100644
--- a/src/routes/most-retail-volume/+page.svelte
+++ b/src/routes/most-retail-volume/+page.svelte
@@ -88,7 +88,7 @@
           <div class="relative flex justify-center items-center overflow-hidden w-full">
               <main class="w-full">
                
-                <div class="w-full max-w-4xl m-auto sm:bg-[#09090B] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+                <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
                   <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
                 
                     <!-- Start Column -->
@@ -137,7 +137,7 @@
 
                 {#if isLoaded}
 
-                <div class="w-full max-w-4xl text-center sm:text-start sm:flex sm:flex-row sm:items-center m-auto text-gray-100 bg-[#09090B]  sm:rounded-lg h-auto p-5 ">
+                <div class="w-full max-w-4xl text-center sm:text-start sm:flex sm:flex-row sm:items-center m-auto text-gray-100 border border-gray-800 sm:rounded-lg h-auto p-5 ">
                   <svg class="w-5 h-5 inline-block sm:mr-2 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="#a474f6" d="M128 24a104 104 0 1 0 104 104A104.11 104.11 0 0 0 128 24m-4 48a12 12 0 1 1-12 12a12 12 0 0 1 12-12m12 112a16 16 0 0 1-16-16v-40a8 8 0 0 1 0-16a16 16 0 0 1 16 16v40a8 8 0 0 1 0 16"/></svg>
                     We update on a daily basis where retail investor are trading the most to never miss out the next hype. 
                     Daily sentiments can either be bullish (strong buying of retail investors) or bearish (more selling) for each stock.
@@ -149,7 +149,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] border-b border-blue-400">
+                          <tr class="bg-[#09090B]">
                             <th class="text-end bg-[#09090B] text-white text-sm font-semibold">
                               #
                             </th>
diff --git a/src/routes/most-shorted-stocks/+page.svelte b/src/routes/most-shorted-stocks/+page.svelte
index b20dca7b..9fef922e 100644
--- a/src/routes/most-shorted-stocks/+page.svelte
+++ b/src/routes/most-shorted-stocks/+page.svelte
@@ -60,7 +60,6 @@
   <!-- Other meta tags -->
   <meta property="og:title" content={`High Short Interest Stocks · stocknear`}/>
   <meta property="og:description" content={`Short interest, stock short squeeze, short interest ratio & short selling data positions for NASDAQ, NYSE & AMEX stocks to find shorts in the stock market.`} />
-  <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 -->
   
@@ -68,7 +67,6 @@
   <meta name="twitter:card" content="summary_large_image"/>
   <meta name="twitter:title" content={`High Short Interest Stocks · stocknear`}/>
   <meta name="twitter:description" content={`Short interest, stock short squeeze, short interest ratio & short selling data positions for NASDAQ, NYSE & AMEX stocks to find shorts in the stock market.`} />
-  <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
   <!-- Add more Twitter meta tags as needed -->
   
   </svelte:head>
@@ -90,7 +88,7 @@
           <div class="relative flex justify-center items-center overflow-hidden w-full">
               <main class="w-full">
                
-                <div class="w-full max-w-4xl m-auto sm:bg-[#09090B] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+                <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
                   <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
                 
                     <!-- Start Column -->
@@ -143,7 +141,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] border-b border-blue-400">
+                          <tr class="bg-[#09090B]">
                             <th class="text-end bg-[#09090B] text-white text-sm font-semibold">
                               #
                             </th>
diff --git a/src/routes/options-zero-dte/+page.svelte b/src/routes/options-zero-dte/+page.svelte
index cb52e94a..cba68adc 100644
--- a/src/routes/options-zero-dte/+page.svelte
+++ b/src/routes/options-zero-dte/+page.svelte
@@ -418,7 +418,7 @@ const debouncedHandleInput = debounce(handleInput, 200);
 
 
 
-<div class="w-full max-w-5xl m-auto sm:bg-[#09090B] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+<div class="w-full max-w-5xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
     
         <!-- Start Column -->
@@ -766,7 +766,7 @@ const debouncedHandleInput = debounce(handleInput, 200);
                     {formatTime(item?.time)}
                   </td>
 
-                <th on:click|stopPropagation={() => assetSelector(item?.ticker, item?.assetType)} class="{index % 2 ? 'bg-[#09090B]' : 'bg-[#09090B]'} text-blue-400 text-start font-normal">
+                <th on:click|stopPropagation={() => assetSelector(item?.ticker, item?.assetType)} class="{index % 2 ? 'bg-[#09090B]' : 'bg-[#27272A]'} text-blue-400 text-start font-normal">
                   {item?.ticker}
                 </th>
 
diff --git a/src/routes/politicians/[slug]/+page.svelte b/src/routes/politicians/[slug]/+page.svelte
index 5ee54e1c..f49454bf 100644
--- a/src/routes/politicians/[slug]/+page.svelte
+++ b/src/routes/politicians/[slug]/+page.svelte
@@ -296,7 +296,7 @@
                    <div class="w-full mt-5 mb-10 m-auto flex justify-center items-center ">
                     <div class="w-full grid grid-cols-2 gap-y-3 lg:gap-y-3 gap-x-3 ">
                        <!--Start Total Amount Traded-->  
-                       <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#262626] rounded-2xl h-20">
+                       <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-5 bg-[#27272A] rounded-2xl h-20">
                         <div class="flex flex-col items-start">
                             <span class="font-medium text-gray-200 text-sm ">Total Amount</span>
                             <span class="text-start text-[1rem] font-medium text-white mt-0.5">
@@ -310,7 +310,7 @@
                     </div>
                     <!--End Total Amount Traded-->
                       <!--Start Buy/Sell-->  
-                      <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#262626] rounded-2xl h-20">
+                      <div class="flex flex-row items-center flex-wrap w-full px-3 sm:px-4 bg-[#27272A] rounded-2xl h-20">
                         <div class="flex flex-col items-start">
                             <span class="font-medium text-gray-200 text-sm sm:text-[1rem] ">Buy/Sell</span>
                             <span class="text-start text-sm sm:text-[1rem] font-medium text-white mt-0.5">
@@ -409,12 +409,12 @@
                         </thead>
                         <tbody class="p-0">
                           {#each displayList as item}
-                              <tr on:click={() => goto(`/${item?.assetType === 'stock' ? 'stocks' : item?.assetType === 'etf' ? 'etf' : 'crypto'}/${item?.ticker}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#27272A] cursor-pointer">
+                              <tr on:click={() => goto(`/${item?.assetType === 'stock' ? 'stocks' : item?.assetType === 'etf' ? 'etf' : 'crypto'}/${item?.ticker}`)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#27272A] cursor-pointer">
                                 
                                 <td class="text-gray-200 pb-3 border-b border-b-[#27272A]">
                                   <div class="flex flex-row items-center">
                                     <div class="flex-shrink-0 rounded-full w-8 h-8 relative bg-[#09090B] flex items-center justify-center">
-                                      <img style="clip-path: circle(50%);" class="avatar w-7 h-7" src={`https://financialmodelingprep.com/image-stock/${item?.ticker}.png`} alt="stock logo"/>
+                                      <img style="clip-path: circle(50%);" class="avatar w-5 h-5" src={`https://financialmodelingprep.com/image-stock/${item?.ticker}.png`} alt="stock logo"/>
                                     </div>
                                     <div class="flex flex-col ml-2">
                                       <span class="text-blue-400">{item?.ticker?.replace('_',' ')}</span>
diff --git a/src/routes/politicians/flow-data/+page.svelte b/src/routes/politicians/flow-data/+page.svelte
index ddf8c245..bdf9855b 100644
--- a/src/routes/politicians/flow-data/+page.svelte
+++ b/src/routes/politicians/flow-data/+page.svelte
@@ -371,7 +371,6 @@
       <!-- Other meta tags -->
       <meta property="og:title" content="Latest Congressional Trading · stocknear"/>
       <meta property="og:description" content="Find the latest congress trading and see what insiders who have access to regulations are investing.">
-      <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 -->
   
@@ -379,7 +378,6 @@
       <meta name="twitter:card" content="summary_large_image"/>
       <meta name="twitter:title" content="Latest Congressional Trading · stocknear"/>
       <meta name="twitter:description" content="Find the latest congress trading and see what insiders who have access to regulations are investing.">
-      <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
       <!-- Add more Twitter meta tags as needed -->
   </svelte:head>
   
@@ -396,7 +394,7 @@
       </div>
     -->
   
-        <div class="w-full max-w-4xl m-auto sm:bg-[#09090B] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+        <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
           <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
         
             <!-- Start Column -->
@@ -597,7 +595,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] border-b border-blue-400">
+                            <tr class="bg-[#09090B]">
                               <th class="bg-[#09090B] text-start bg-[#09090B] text-white text-sm font-medium sm:font-semibold">
                                 Person
                               </th>
@@ -620,7 +618,7 @@
                             {#each displayList as item, index}
                             <tr on:click={() => goto(`/politicians/${item?.id}`)} class="cursor-pointer text-gray-200 odd:bg-[#27272A] border-b-[#09090B] {index+1 === rawData?.length && data?.user?.tier !== 'Pro' ? 'opacity-[0.1]' : ''}">
                             
-                              <th class="{index % 2 ? 'bg-[#09090B]' : 'bg-[#09090B]'} text-gray-200 ">
+                              <th class="{index % 2 ? 'bg-[#09090B]' : 'bg-[#27272A]'} text-gray-200 ">
                                 <div class="flex flex-row items-center">
                                   <div class="flex-shrink-0 rounded-full border border-slate-700 w-9 h-9 relative {item?.party === 'Republican' ? 'bg-[#98272B]' : item?.party === 'Democratic' ? 'bg-[#295AC7]' : 'bg-[#4E2153]'} flex items-center justify-center">
                                     <img style="clip-path: circle(50%);" class="rounded-full w-7" src={item?.image} loading="lazy"/>
diff --git a/src/routes/stock-screener/+page.svelte b/src/routes/stock-screener/+page.svelte
index 88bb3b7f..4c6bbf40 100644
--- a/src/routes/stock-screener/+page.svelte
+++ b/src/routes/stock-screener/+page.svelte
@@ -235,7 +235,6 @@ onMount(async () => {
     <!-- Other meta tags -->
     <meta property="og:title" content="Free Stock Screener - Search, Filter and Analyze Stocks · stocknear"/>
     <meta property="og:description" content="A free stock screener to search, filter and analyze stocks with different indicators and 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 -->
   
@@ -243,7 +242,6 @@ onMount(async () => {
     <meta name="twitter:card" content="summary_large_image"/>
     <meta name="twitter:title" content="Free Stock Screener - Search, Filter and Analyze Stocks · stocknear"/>
     <meta name="twitter:description" content="A free stock screener to search, filter and analyze stocks with different indicators and metrics.">
-    <meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
     <!-- Add more Twitter meta tags as needed -->
 </svelte:head>
       
@@ -260,7 +258,7 @@ onMount(async () => {
     </ul>
   </div>
       
-  <div class="w-full max-w-4xl m-auto sm:bg-[#09090B] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
+  <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pb-10 sm:pt-10 mt-3 mb-8">
     <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
   
       <!-- Start Column -->
@@ -324,7 +322,7 @@ onMount(async () => {
     
       <div class="hidden sm:block">
       {#each strategyList as st, index}
-      <div class=" sm:rounded-xl shadow-lg bg-[#09090B] pt-5 pb-5 sm:pb-0 mt-5">
+      <div class=" sm:rounded-xl border border-gray-800 pt-5 pb-5 sm:pb-0 mt-5">
         
         <div class="flex flex-row {$screenWidth >= 640 ? '-mb-4' : ''} ">
           <div class="text-white font-bold text-lg pl-5">
@@ -549,7 +547,7 @@ onMount(async () => {
     <label for="addStrategy"  class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
     
     
-    <div class="modal-box w-full bg-[#09090B]" >
+    <div class="modal-box w-full bg-[#09090B] border border-gray-800" >
   
         <h1 class="text-white text-2xl font-bold">
           New Strategy
@@ -633,7 +631,7 @@ onMount(async () => {
     <label for="deleteStrategy"  class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
     
     
-    <div class="modal-box w-full bg-[#09090B] overflow-hidden ">
+    <div class="modal-box w-full bg-[#09090B] border border-gray-800 overflow-hidden ">
   
       <h3 class="font-bold text-md sm:text-lg flex justify-center items-center mt-10 text-white">
         Are you sure you want to delete the strategy?
@@ -667,7 +665,7 @@ onMount(async () => {
     <label for="viewStrategy"  class="cursor-pointer modal-backdrop bg-[#000] bg-opacity-[0.5]"></label>
     
     
-    <div class="modal-box w-full bg-[#09090B] border border-slate-600 overflow-y-scroll overflow-hidden {$screenWidth < 640 ? 'min-h-screen' : 'h-[800px]'}">
+    <div class="modal-box w-full bg-[#09090B] border border-gray-800 overflow-y-scroll overflow-hidden {$screenWidth < 640 ? 'min-h-screen' : 'h-[800px]'}">
   
   
       <!--Start Rule Preview-->
diff --git a/src/routes/stock-splits-calendar/+page.svelte b/src/routes/stock-splits-calendar/+page.svelte
index 26700a2c..d301efa6 100644
--- a/src/routes/stock-splits-calendar/+page.svelte
+++ b/src/routes/stock-splits-calendar/+page.svelte
@@ -251,7 +251,6 @@
 <!-- Other meta tags -->
 <meta property="og:title" content={`Stock Splits Calendar · stocknear`}/>
 <meta property="og:description" content={`A list of upcoming stock splits on the US stock market, with dates, times and market cap.`} />
-<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 -->
 
@@ -259,7 +258,6 @@
 <meta name="twitter:card" content="summary_large_image"/>
 <meta name="twitter:title" content={`Stock Splits Calendar · stocknear`}/>
 <meta name="twitter:description" content={`A list of upcoming stock splits on the US stock market, with dates, times and market cap.`} />
-<meta name="twitter:image" content="https://stocknear-pocketbase.s3.amazonaws.com/logo/meta_logo.jpg"/>
 <!-- Add more Twitter meta tags as needed -->
 
 </svelte:head>
@@ -278,7 +276,7 @@
   -->
 
       
-          <div class="w-full max-w-4xl m-auto sm:bg-[#09090B] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pt-10 sm:pb-10 sm:mt-3 mb-8">
+          <div class="w-full max-w-4xl m-auto sm:bg-[#27272A] sm:rounded-xl h-auto pl-10 pr-10 pt-5 sm:pt-10 sm:pb-10 sm:mt-3 mb-8">
             <div class="grid grid-cols-1 sm:grid-cols-2 gap-10">
           
               <!-- Start Column -->
@@ -381,7 +379,7 @@
                           <tbody>
                             {#each day as item}
                             <!-- row -->
-                            <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] bg-[#09090B] border-b-[#09090B] shake-ticker cursor-pointer">
+                            <tr on:click={() => goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer">
                               
                               <td class="text-blue-400 border-b-[#09090B]">
                                 {item?.symbol}