From e2f2fab5075462c9f39101ddf2df823e227b19b7 Mon Sep 17 00:00:00 2001
From: MuslemRahimi <moslem_rahimi@hotmail.de>
Date: Sat, 8 Mar 2025 23:50:56 +0100
Subject: [PATCH] ui fixes

---
 src/lib/components/Footer.svelte              |  42 +--
 .../shadcn/accordion/accordion-trigger.svelte |   2 +-
 src/lib/components/shadcn/button/index.ts     |   2 +-
 src/routes/+layout.svelte                     | 264 +++++++++---------
 src/routes/+page.svelte                       |  11 +-
 src/routes/market-news/+layout.svelte         |  20 +-
 src/routes/market-news/+page.svelte           |  28 +-
 src/routes/market-news/general/+page.svelte   |  71 ++---
 .../market-news/press-releases/+page.svelte   |  69 ++---
 9 files changed, 229 insertions(+), 280 deletions(-)

diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
index 39e653c0..3f1edae8 100644
--- a/src/lib/components/Footer.svelte
+++ b/src/lib/components/Footer.svelte
@@ -4,7 +4,7 @@
 
 <!--Footer-->
 <footer
-  class="bg-default border-t border-gray-600 z-20 sm:z-50 relative bottom-0 w-full sm:px-10 m-auto"
+  class="bg-[#1F2937] dark:bg-default border-t border-gray-600 z-20 sm:z-50 relative bottom-0 w-full sm:px-10 m-auto"
 >
   <div class="container mx-auto px-5 sm:px-3">
     <div class="w-full flex flex-col md:flex-row py-3">
@@ -81,7 +81,7 @@
 
         <!--
         <a href="https://stats.uptimerobot.com/MP0zLix9yk" rel="noopener noreferrer" target="_blank" class="flex flex-row items-center mt-4">
-          <span class="text-white sm:hover:text-blue-400">
+          <span class="text-white dark:sm:hover:text-blue-400">
             Server Status
           </span>
           <span class="relative flex h-3 w-3 ml-2">
@@ -98,28 +98,28 @@
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
             <a
               href="/stocks"
-              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              class="no-underline sm:hover:underline text-gray-300 sm:hover:text-white dark:text-gray-100 dark:sm:hover:text-blue-400"
               >Stocks</a
             >
           </li>
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
             <a
               href="/etf"
-              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              class="no-underline sm:hover:underline text-gray-300 sm:hover:text-white dark:text-gray-100 dark:sm:hover:text-blue-400"
               >ETFs</a
             >
           </li>
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
             <a
               href="/blog"
-              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              class="no-underline sm:hover:underline text-gray-300 sm:hover:text-white dark:text-gray-100 dark:sm:hover:text-blue-400"
               >Blog</a
             >
           </li>
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
             <a
               href="/learning-center"
-              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              class="no-underline sm:hover:underline text-gray-300 sm:hover:text-white dark:text-gray-100 dark:sm:hover:text-blue-400"
               >Learning Center</a
             >
           </li>
@@ -132,21 +132,21 @@
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
             <a
               href="/pricing"
-              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              class="no-underline sm:hover:underline text-gray-300 sm:hover:text-white dark:text-gray-100 dark:sm:hover:text-blue-400"
               >Pricing</a
             >
           </li>
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
             <a
               href="/newsletter"
-              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              class="no-underline sm:hover:underline text-gray-300 sm:hover:text-white dark:text-gray-100 dark:sm:hover:text-blue-400"
               >Free Newsletter</a
             >
           </li>
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
             <a
               href="/donation"
-              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              class="no-underline sm:hover:underline text-gray-300 sm:hover:text-white dark:text-gray-100 dark:sm:hover:text-blue-400"
               >Support Us ❤</a
             >
           </li>
@@ -159,14 +159,14 @@
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
             <a
               href="/login"
-              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              class="no-underline sm:hover:underline text-gray-300 sm:hover:text-white dark:text-gray-100 dark:sm:hover:text-blue-400"
               >Login</a
             >
           </li>
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
             <a
               href="/sitemap"
-              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              class="no-underline sm:hover:underline text-gray-300 sm:hover:text-white dark:text-gray-100 dark:sm:hover:text-blue-400"
             >
               Sitemap
             </a>
@@ -174,21 +174,21 @@
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
             <a
               href="/advertise"
-              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              class="no-underline sm:hover:underline text-gray-300 sm:hover:text-white dark:text-gray-100 dark:sm:hover:text-blue-400"
               >Advertise</a
             >
           </li>
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
             <a
               href="/data-disclaimer"
-              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              class="no-underline sm:hover:underline text-gray-300 sm:hover:text-white dark:text-gray-100 dark:sm:hover:text-blue-400"
               >Data Disclaimer</a
             >
           </li>
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
             <a
               href="/affiliate-program"
-              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              class="no-underline sm:hover:underline text-gray-300 sm:hover:text-white dark:text-gray-100 dark:sm:hover:text-blue-400"
               >Affiliate Program</a
             >
           </li>
@@ -201,7 +201,7 @@
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
             <a
               href="/about"
-              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              class="no-underline sm:hover:underline text-gray-300 sm:hover:text-white dark:text-gray-100 dark:sm:hover:text-blue-400"
             >
               About Us
             </a>
@@ -209,7 +209,7 @@
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
             <a
               href="/contact"
-              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              class="no-underline sm:hover:underline text-gray-300 sm:hover:text-white dark:text-gray-100 dark:sm:hover:text-blue-400"
             >
               Contact Us
             </a>
@@ -218,21 +218,21 @@
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
             <a
               href="/terms-of-use"
-              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              class="no-underline sm:hover:underline text-gray-300 sm:hover:text-white dark:text-gray-100 dark:sm:hover:text-blue-400"
               >Terms of Use</a
             >
           </li>
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
             <a
               href="/privacy-policy"
-              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              class="no-underline sm:hover:underline text-gray-300 sm:hover:text-white dark:text-gray-100 dark:sm:hover:text-blue-400"
               >Privacy Policy</a
             >
           </li>
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
             <a
               href="/imprint"
-              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              class="no-underline sm:hover:underline text-gray-300 sm:hover:text-white dark:text-gray-100 dark:sm:hover:text-blue-400"
               >Imprint</a
             >
           </li>
@@ -240,14 +240,14 @@
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
             <a
               href="/blog"
-              class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400"
+              class="no-underline sm:hover:underline text-gray-300 sm:hover:text-white dark:text-gray-100 dark:sm:hover:text-blue-400"
             >
               Blog
             </a>
           </li>-->
           <!--
           <li class="mt-2 inline-block mr-2 md:block md:mr-0">
-            <a href="/newsletter" class="no-underline sm:hover:underline text-gray-100 sm:hover:text-blue-400">
+            <a href="/newsletter" class="no-underline sm:hover:underline text-gray-300 sm:hover:text-white dark:text-gray-100 dark:sm:hover:text-blue-400">
               Newsletter
             </a>
           </li>
diff --git a/src/lib/components/shadcn/accordion/accordion-trigger.svelte b/src/lib/components/shadcn/accordion/accordion-trigger.svelte
index a12443fc..5a2b9c51 100644
--- a/src/lib/components/shadcn/accordion/accordion-trigger.svelte
+++ b/src/lib/components/shadcn/accordion/accordion-trigger.svelte
@@ -22,7 +22,7 @@
   >
     <slot />
     <ChevronDown
-      class="text-white h-4 w-4 sm:absolute sm:right-5 shrink-0 transition-transform duration-200"
+      class="text-muted dark:text-white h-4 w-4 sm:absolute sm:right-5 shrink-0 transition-transform duration-200"
     />
   </AccordionPrimitive.Trigger>
 </AccordionPrimitive.Header>
diff --git a/src/lib/components/shadcn/button/index.ts b/src/lib/components/shadcn/button/index.ts
index c554d9e3..cb6438e0 100644
--- a/src/lib/components/shadcn/button/index.ts
+++ b/src/lib/components/shadcn/button/index.ts
@@ -6,7 +6,7 @@ const buttonVariants = tv({
   base: "cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm  ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   variants: {
     variant: {
-      default: "bg-primary text-primary-foreground",
+      default: "bg-white dark:bg-[#18181B] text-muted dark:text-white",
       destructive: "bg-destructive text-destructive-foreground",
       outline:
         "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d25cc290..b1ace209 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -284,36 +284,36 @@
         $screenWidth < 640 &&
         hideHeader
           ? 'invisible -mt-20'
-          : ''} top-0 z-40 bg-white dark:bg-default border-b border-gray-800 flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6"
+          : ''} top-0 z-40 bg-white dark:bg-default  shadow shadow-b shadow-md dark:border-b dark:border-gray-800 flex h-14 items-center gap-4 px-4 sm:h-auto sm:px-6"
       >
         <Sheet.Root>
           <Sheet.Trigger asChild let:builder>
             <Button
               builders={[builder]}
               size="icon"
-              class="bg-white dark:bg-default text-white sm:hover:bg-[#18181B] border-none"
+              class="bg-white dark:bg-default text-white sm:hover:bg-gray-200 dark:sm:hover:bg-[#18181B] border-none"
             >
-              <Menu class="h-5.5 w-5.5 sm:w-7 sm:h-7" />
+              <Menu class="h-5.5 w-5.5 sm:w-7 sm:h-7 text-muted dark:text-white " />
               <span class="sr-only">Toggle Menu</span>
             </Button>
           </Sheet.Trigger>
           <Sheet.Content
             side="left"
-            class="max-w-screen w-full sm:max-w-xs bg-[#18181B] overflow-y-auto text-muted dark:text-white"
+            class="max-w-screen w-full sm:max-w-xs bg-white dark:bg-[#18181B] overflow-y-auto text-muted dark:text-white"
           >
-            <nav class=" grid gap-6 text-lg bg-[#18181B]">
+            <nav class=" grid gap-6 text-lg ">
               <Sheet.Close asChild let:builder>
                 <Button
                   builders={[builder]}
-                  class="bg-[#18181B] hover:bg-[#18181B] -ml-4 mr-auto"
+                  class=" -ml-4 mr-auto bg-white dark:bg-[#18181B]"
                 >
                   <a
                     href="/"
-                    class="flex items-center gap-4 px-0.5 text-muted dark:text-white text-[1rem] font-semibold"
+                    class="flex items-center gap-4 px-0.5 text-muted dark:text-white text-xl font-semibold"
                   >
                     <img
-                      class="avatar w-9 sm:w-10 rounded-full"
-                      src={stocknear_logo}
+                      class="avatar w-9 sm:w-10 rounded-full "
+                      src="/pwa-192x192.png"
                       alt="Stocknear Logo"
                     />
                     Stocknear
@@ -325,18 +325,18 @@
                 <Button
                   builders={[builder]}
                   type="submit"
-                  class="w-full bg-[#18181B] hover:bg-[#18181B] -ml-4 mr-auto"
+                  class="w-full bg-white dark:bg-[#18181B] -ml-4 mr-auto"
                 >
                   <a
                     href="/"
                     class="w-full flex flex-row items-center mr-auto mt-5"
                   >
                     <div
-                      class="flex h-9 w-9 items-center justify-center rounded-md text-white transition-colors hover:text-white md:h-8 md:w-8"
+                      class="flex h-9 w-9 items-center justify-center rounded-md text-muted dark:text-white transition-colors md:h-8 md:w-8"
                     >
                       <Home class="h-5.5 w-5.5" />
                     </div>
-                    <span class="ml-3 text-white text-[1rem]">Home</span>
+                    <span class="ml-3 text-muted dark:text-white text-[1rem]">Home</span>
                   </a>
                 </Button>
               </Sheet.Close>
@@ -345,8 +345,8 @@
                 <Accordion.Root class="w-full">
                   <Accordion.Item value="item-1">
                     <Accordion.Trigger class="">
-                      <Stock class="h-5.5 w-5.5 mr-3 text-white ml-1" />
-                      <span class="text-white ml-1 mr-auto">Stocks</span>
+                      <Stock class="h-5.5 w-5.5 mr-3 text-muted dark:text-white ml-1" />
+                      <span class="text-muted dark:text-white ml-1 mr-auto">Stocks</span>
                     </Accordion.Trigger>
                     <Accordion.Content
                       class="border-l border-gray-500 ml-2 mt-5"
@@ -356,11 +356,11 @@
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full "
                           >
                             <a
                               href="/analysts"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-2"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-2"
                               >Top Analyst</a
                             >
                           </Button>
@@ -368,11 +368,11 @@
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full "
                           >
                             <a
                               href="/analysts/top-stocks"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >Top Analyst Stocks</a
                             >
                           </Button>
@@ -380,11 +380,11 @@
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full "
                           >
                             <a
                               href="/industry"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >By Industry</a
                             >
                           </Button>
@@ -392,22 +392,22 @@
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full "
                           >
                             <a
                               href="/stock-screener"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >Stock Screener</a
                             >
                           </Button>
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full "
                           >
                             <a
                               href="/market-mover/gainers"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >Market Mover</a
                             >
                           </Button>
@@ -415,11 +415,11 @@
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full "
                           >
                             <a
                               href="/heatmap"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >Market Heatmap</a
                             >
                           </Button>
@@ -427,11 +427,11 @@
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full "
                           >
                             <a
                               href="/list"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >Stock Lists</a
                             >
                           </Button>
@@ -446,8 +446,8 @@
                 <Accordion.Root class="w-full">
                   <Accordion.Item value="item-1">
                     <Accordion.Trigger class="">
-                      <Layers class="h-5.5 w-5.5 mr-3 text-white ml-1" />
-                      <span class="text-white ml-1 mr-auto">ETFs</span>
+                      <Layers class="h-5.5 w-5.5 mr-3 text-muted dark:text-white ml-1" />
+                      <span class="text-muted dark:text-white ml-1 mr-auto">ETFs</span>
                     </Accordion.Trigger>
                     <Accordion.Content
                       class="border-l border-gray-500 ml-2 mt-5"
@@ -457,22 +457,22 @@
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full"
                           >
                             <a
                               href="/etf/new-launches"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-2"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-2"
                               >New Launches</a
                             >
                           </Button>
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full"
                           >
                             <a
                               href="/etf/etf-providers"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >ETF Providers</a
                             >
                           </Button>
@@ -487,8 +487,8 @@
                 <Accordion.Root class="w-full">
                   <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 ml-1 mr-auto">Calendar</span>
+                      <Calendar class="h-5.5 w-5.5 mr-3 text-muted dark:text-white ml-1" />
+                      <span class="text-muted dark:text-white ml-1 mr-auto">Calendar</span>
                     </Accordion.Trigger>
                     <Accordion.Content
                       class="border-l border-gray-500 ml-2 mt-5"
@@ -498,22 +498,22 @@
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full "
                           >
                             <a
                               href="/dividends-calendar"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-2"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-2"
                               >Dividends Calendar</a
                             >
                           </Button>
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full "
                           >
                             <a
                               href="/earnings-calendar"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >Earnings Calendar</a
                             >
                           </Button>
@@ -521,11 +521,11 @@
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full "
                           >
                             <a
                               href="/ipos"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >IPO Calendar</a
                             >
                           </Button>
@@ -533,22 +533,22 @@
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full "
                           >
                             <a
                               href="/economic-calendar"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >Economic Calendar</a
                             >
                           </Button>
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full "
                           >
                             <a
                               href="/economic-indicator"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >Economic Indicator</a
                             >
                           </Button>
@@ -557,11 +557,11 @@
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full "
                           >
                             <a
                               href="/stock-splits-calendar"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >Stock Splits Calendar</a
                             >
                              
@@ -578,8 +578,8 @@
                 <Accordion.Root class="w-full">
                   <Accordion.Item value="item-1">
                     <Accordion.Trigger class="">
-                      <HandShake class="h-5.5 w-5.5 mr-3 text-white ml-1" />
-                      <span class="text-white ml-1 mr-auto">Congress</span>
+                      <HandShake class="h-5.5 w-5.5 mr-3 text-muted dark:text-white ml-1" />
+                      <span class="text-muted dark:text-white ml-1 mr-auto">Congress</span>
                     </Accordion.Trigger>
                     <Accordion.Content
                       class="border-l border-gray-500 ml-2 mt-5"
@@ -589,22 +589,22 @@
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full"
                           >
                             <a
                               href="/politicians/flow-data"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-2"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-2"
                               >Congress Flow</a
                             >
                           </Button>
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full"
                           >
                             <a
                               href="/politicians"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >All Politicians</a
                             >
                           </Button>
@@ -619,8 +619,8 @@
                 <Accordion.Root class="w-full">
                   <Accordion.Item value="item-1">
                     <Accordion.Trigger class="">
-                      <AudioLine class="h-5.5 w-5.5 mr-3 text-white ml-1" />
-                      <span class="text-white ml-1 mr-auto"
+                      <AudioLine class="h-5.5 w-5.5 mr-3 text-muted dark:text-white ml-1" />
+                      <span class="text-muted dark:text-white ml-1 mr-auto"
                         >Tracker Datasets</span
                       >
                     </Accordion.Trigger>
@@ -632,11 +632,11 @@
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full"
                           >
                             <a
                               href="/insider-tracker"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >Insider Tracker</a
                             >
                           </Button>
@@ -644,11 +644,11 @@
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full"
                           >
                             <a
                               href="/reddit-tracker"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >Reddit Tracker</a
                             >
                           </Button>
@@ -656,11 +656,11 @@
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full"
                           >
                             <a
                               href="/potus-tracker"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >POTUS Tracker</a
                             >
                           </Button>
@@ -669,11 +669,11 @@
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full"
                           >
                             <a
                               href="/sentiment-tracker"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >Sentiment Tracker</a
                             >
                           </Button>
@@ -689,8 +689,8 @@
                 <Accordion.Root class="w-full">
                   <Accordion.Item value="item-1">
                     <Accordion.Trigger class="">
-                      <Flow class="h-5.5 w-5.5 mr-3 text-white ml-1" />
-                      <span class="text-white ml-1 mr-auto">Flow Feed</span>
+                      <Flow class="h-5.5 w-5.5 mr-3 text-muted dark:text-white ml-1" />
+                      <span class="text-muted dark:text-white ml-1 mr-auto">Flow Feed</span>
                     </Accordion.Trigger>
                     <Accordion.Content
                       class="border-l border-gray-500 ml-2 mt-5"
@@ -700,11 +700,11 @@
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full"
                           >
                             <a
                               href="/market-flow"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-2"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-2"
                               >Market Flow</a
                             >
                           </Button>
@@ -712,22 +712,22 @@
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full"
                           >
                             <a
                               href="/options-flow"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >Options Flow</a
                             >
                           </Button>
                           <Button
                             builders={[builder]}
                             type="submit"
-                            class="w-full bg-[#18181B] hover:bg-[#18181B]"
+                            class="w-full"
                           >
                             <a
                               href="/dark-pool-flow"
-                              class="text-start w-full text-[1rem] text-white ml-4 mt-4"
+                              class="text-start w-full text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >Dark Pool Flow</a
                             >
                           </Button>
@@ -742,7 +742,7 @@
                 <Button
                   builders={[builder]}
                   type="submit"
-                  class="bg-[#18181B] hover:bg-[#18181B] -ml-4 w-full"
+                  class=" -ml-4 w-full"
                 >
                   <a
                     href="/hedge-funds"
@@ -750,11 +750,11 @@
                   >
                     <div class="flex flex-row items-center mr-auto">
                       <div
-                        class="flex h-9 w-9 items-center justify-center rounded-md text-white transition-colors hover:text-white md:h-8 md:w-8"
+                        class="flex h-9 w-9 items-center justify-center rounded-md text-muted dark:text-white transition-colors hover:text-muted dark:text-white md:h-8 md:w-8"
                       >
                         <Boxes class="h-5.5 w-5.5" />
                       </div>
-                      <span class="ml-3 text-white text-[1rem]"
+                      <span class="ml-3 text-muted dark:text-white text-[1rem]"
                         >Hedge Funds</span
                       >
                     </div>
@@ -766,7 +766,7 @@
                 <Button
                   builders={[builder]}
                   type="submit"
-                  class="bg-[#18181B] hover:bg-[#18181B] -ml-4 w-full"
+                  class=" -ml-4 w-full"
                 >
                   <a
                     href="/market-news"
@@ -774,11 +774,11 @@
                   >
                     <div class="flex flex-row items-center mr-auto">
                       <div
-                        class="flex h-9 w-9 items-center justify-center rounded-md text-white transition-colors hover:text-white md:h-8 md:w-8"
+                        class="flex h-9 w-9 items-center justify-center rounded-md text-muted dark:text-white transition-colors hover:text-muted dark:text-white md:h-8 md:w-8"
                       >
                         <Newspaper class="h-5.5 w-5.5" />
                       </div>
-                      <span class="ml-3 text-white text-[1rem]">News</span>
+                      <span class="ml-3 text-muted dark:text-white text-[1rem]">News</span>
                     </div>
                   </a>
                 </Button>
@@ -788,7 +788,7 @@
                   <Button
                     builders={[builder]}
                     type="submit"
-                    class="bg-[#18181B] hover:bg-[#18181B] -ml-4 w-full"
+                    class=" -ml-4 w-full"
                   >
                     <a
                       href="/pricing"
@@ -796,11 +796,11 @@
                     >
                       <div class="flex flex-row items-center mr-auto">
                         <div
-                          class="flex h-9 w-9 items-center justify-center rounded-md text-white transition-colors hover:text-white md:h-8 md:w-8"
+                          class="flex h-9 w-9 items-center justify-center rounded-md text-muted dark:text-white transition-colors hover:text-muted dark:text-white md:h-8 md:w-8"
                         >
                           <Gem class="h-5.5 w-5.5" />
                         </div>
-                        <span class="ml-3 text-white text-[1rem]"
+                        <span class="ml-3 text-muted dark:text-white text-[1rem]"
                           >Pricing Plan</span
                         >
                       </div>
@@ -815,7 +815,7 @@
         <a href="/" class="-ml-2 flex shrink-0">
           <img
             class="avatar w-9 3xl:w-10 rounded-full"
-            src={stocknear_logo}
+            src="/pwa-192x192.png"
             alt="Stocknear Logo"
           />
           <span class="text-muted dark:text-white font-semibold ml-2 text-lg">Stocknear</span>
@@ -914,7 +914,7 @@
         <div class="flex w-full">
           <div class="hidden 3xl:block 3xl:w-[300px]">
             <aside
-              class="fixed overflow-y-auto no-scrollbar overflow-hidden inset-y-0 left-0 z-50 3xl:flex w-64 flex-col 3xl:border-r 3xl:border-gray-800 bg-[#18181B]"
+              class="shadow-md fixed overflow-y-auto no-scrollbar overflow-hidden inset-y-0 left-0 z-50 3xl:flex w-64 flex-col dark:3xl:border-r dark:3xl:border-gray-800 bg-white dark:bg-[#18181B]"
             >
               <nav
                 class="flex flex-col items-center mr-auto gap-y-4 3xl:py-5 w-full"
@@ -925,27 +925,27 @@
                 >
                   <img
                     class="avatar w-9 3xl:w-12 rounded-full"
-                    src={stocknear_logo}
+                    src="/pwa-192x192.png"
                     alt="Stocknear Logo"
                   />
-                  <span class="text-white text-xl">Stocknear</span>
+                  <span class="text-muted dark:text-white text-xl">Stocknear</span>
                 </a>
 
                 <a href="/" class="flex flex-row items-center ml-9 w-full">
                   <div
-                    class="flex h-9 w-9 items-center justify-center rounded-md text-white transition-colors hover:text-white md:h-8 md:w-8"
+                    class="flex h-9 w-9 items-center justify-center rounded-md text-muted dark:text-white transition-colors md:h-8 md:w-8"
                   >
                     <Home class="h-5.5 w-5.5" />
                   </div>
-                  <span class="ml-3 text-white">Home</span>
+                  <span class="ml-3 text-muted dark:text-white">Home</span>
                 </a>
 
                 <div class="flex flex-row items-center ml-9 w-full mt-3">
                   <Accordion.Root class="w-full">
                     <Accordion.Item value="item-1">
-                      <Accordion.Trigger class="text-white ">
-                        <Stock class="h-5.5 w-5.5 mr-3 text-white ml-1" />
-                        <span class="text-white ml-1 mr-auto">Stocks</span>
+                      <Accordion.Trigger class="text-muted dark:text-white ">
+                        <Stock class="h-5.5 w-5.5 mr-3 text-muted dark:text-white ml-1" />
+                        <span class="text-muted dark:text-white ml-1 mr-auto">Stocks</span>
                       </Accordion.Trigger>
                       <Accordion.Content
                         class="border-l border-gray-500 ml-2 mt-5"
@@ -953,41 +953,41 @@
                         <div class="flex flex-col items-start">
                           <a
                             href="/analysts"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >Top Analyst</a
                           >
 
                           <a
                             href="/analysts/top-stocks"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >Top Analyst Stocks</a
                           >
 
                           <a
                             href="/industry"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >By Industry</a
                           >
                           <a
                             href="/stock-screener"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >Stock Screener</a
                           >
                           <a
                             href="/market-mover/gainers"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >Market Mover</a
                           >
 
                           <a
                             href="/heatmap"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >Market Heatmap</a
                           >
 
                           <a
                             href="/list"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >Stock Lists</a
                           >
                         </div>
@@ -1000,8 +1000,8 @@
                   <Accordion.Root class="w-full">
                     <Accordion.Item value="item-1">
                       <Accordion.Trigger class="">
-                        <Layers class="h-5.5 w-5.5 mr-3 text-white ml-1" />
-                        <span class="text-white ml-1 mr-auto">ETFs</span>
+                        <Layers class="h-5.5 w-5.5 mr-3 text-muted dark:text-white ml-1" />
+                        <span class="text-muted dark:text-white ml-1 mr-auto">ETFs</span>
                       </Accordion.Trigger>
                       <Accordion.Content
                         class="border-l border-gray-500 ml-2 mt-5"
@@ -1009,12 +1009,12 @@
                         <div class="flex flex-col items-start">
                           <a
                             href="/etf/new-launches"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >New Launches</a
                           >
                           <a
                             href="/etf/etf-providers"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >ETF Providers</a
                           >
                         </div>
@@ -1027,8 +1027,8 @@
                   <Accordion.Root class="w-full">
                     <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 ml-1 mr-auto">Calendar</span>
+                        <Calendar class="h-5.5 w-5.5 mr-3 text-muted dark:text-white ml-1" />
+                        <span class="text-muted dark:text-white ml-1 mr-auto">Calendar</span>
                       </Accordion.Trigger>
                       <Accordion.Content
                         class="border-l border-gray-500 ml-2 mt-5"
@@ -1036,41 +1036,41 @@
                         <div class="flex flex-col items-start">
                           <a
                             href="/dividends-calendar"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >Dividends Calendar</a
                           >
                           <a
                             href="/earnings-calendar"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >Earnings Calendar</a
                           >
                           <!--
                           <a
                             href="/fda-calendar"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >FDA Calendar</a
                           >
                             -->
 
                           <a
                             href="/ipos"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >IPO Calendar</a
                           >
                           <a
                             href="/economic-calendar"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >Economic Calendar</a
                           >
                           <a
                             href="/economic-indicator"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >Economic Indicator</a
                           >
                           <!--
                           <a
                             href="/stock-splits-calendar"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >Stock Splits Calendar</a
                           >
                             -->
@@ -1084,8 +1084,8 @@
                   <Accordion.Root class="w-full">
                     <Accordion.Item value="item-1">
                       <Accordion.Trigger class="">
-                        <HandShake class="h-5.5 w-5.5 mr-3 text-white ml-1" />
-                        <span class="text-white ml-1 mr-auto">Congress</span>
+                        <HandShake class="h-5.5 w-5.5 mr-3 text-muted dark:text-white ml-1" />
+                        <span class="text-muted dark:text-white ml-1 mr-auto">Congress</span>
                       </Accordion.Trigger>
 
                       <Accordion.Content
@@ -1095,12 +1095,12 @@
                           <div class="flex flex-col items-start">
                             <a
                               href="/politicians/flow-data"
-                              class="text-[1rem] text-white ml-4 mt-4"
+                              class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >Congress Flow</a
                             >
                             <a
                               href="/politicians"
-                              class="text-[1rem] text-white ml-4 mt-4"
+                              class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                               >All Politicians</a
                             >
                           </div>
@@ -1114,8 +1114,8 @@
                   <Accordion.Root class="w-full">
                     <Accordion.Item value="item-1">
                       <Accordion.Trigger class="">
-                        <AudioLine class="h-5.5 w-5.5 mr-3 text-white ml-1" />
-                        <span class="text-white ml-1 mr-auto"
+                        <AudioLine class="h-5.5 w-5.5 mr-3 text-muted dark:text-white ml-1" />
+                        <span class="text-muted dark:text-white ml-1 mr-auto"
                           >Tracker Datasets</span
                         >
                       </Accordion.Trigger>
@@ -1125,26 +1125,26 @@
                         <div class="flex flex-col items-start">
                           <a
                             href="/insider-tracker"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >Insider Tracker</a
                           >
 
                           <a
                             href="/reddit-tracker"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >Reddit Tracker</a
                           >
 
                           <a
                             href="/potus-tracker"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >POTUS Tracker</a
                           >
 
                           <!--
                           <a
                             href="/sentiment-tracker"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >Sentiment Tracker</a
                           >
                             -->
@@ -1158,8 +1158,8 @@
                   <Accordion.Root class="w-full">
                     <Accordion.Item value="item-1">
                       <Accordion.Trigger class="">
-                        <Flow class="h-5.5 w-5.5 mr-3 text-white ml-1" />
-                        <span class="text-white ml-1 mr-auto">Flow Feed</span>
+                        <Flow class="h-5.5 w-5.5 mr-3 text-muted dark:text-white ml-1" />
+                        <span class="text-muted dark:text-white ml-1 mr-auto">Flow Feed</span>
                       </Accordion.Trigger>
                       <Accordion.Content
                         class="border-l border-gray-500 ml-2 mt-5"
@@ -1167,18 +1167,18 @@
                         <div class="flex flex-col items-start">
                           <a
                             href="/market-flow"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >Market Flow</a
                           >
 
                           <a
                             href="/options-flow"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >Options Flow</a
                           >
                           <a
                             href="/dark-pool-flow"
-                            class="text-[1rem] text-white ml-4 mt-4"
+                            class="text-[1rem] text-muted dark:text-white ml-4 mt-4"
                             >Dark Pool Flow</a
                           >
                         </div>
@@ -1192,11 +1192,11 @@
                   class="flex flex-row items-center ml-9 w-full mt-3"
                 >
                   <div
-                    class="flex h-9 w-9 items-center justify-center rounded-md text-white transition-colors hover:text-white md:h-8 md:w-8"
+                    class="flex h-9 w-9 items-center justify-center rounded-md text-muted dark:text-white transition-colors  md:h-8 md:w-8"
                   >
                     <Boxes class="h-5.5 w-5.5" />
                   </div>
-                  <span class="ml-3 text-white">Hedge Funds</span>
+                  <span class="ml-3 text-muted dark:text-white">Hedge Funds</span>
                 </a>
 
                 <a
@@ -1204,11 +1204,11 @@
                   class="flex flex-row items-center ml-9 w-full mt-3"
                 >
                   <div
-                    class="flex h-9 w-9 items-center justify-center rounded-md text-white transition-colors hover:text-white md:h-8 md:w-8"
+                    class="flex h-9 w-9 items-center justify-center rounded-md text-muted dark:text-white transition-colors md:h-8 md:w-8"
                   >
                     <Newspaper class="h-5.5 w-5.5" />
                   </div>
-                  <span class="ml-3 text-white">News</span>
+                  <span class="ml-3 text-muted dark:text-white">News</span>
                 </a>
                 {#if !["Pro", "Plus"]?.includes(data?.user?.tier)}
                   <a
@@ -1216,18 +1216,18 @@
                     class="flex flex-row items-center ml-9 w-full mt-3"
                   >
                     <div
-                      class="flex h-9 w-9 items-center justify-center rounded-md text-white transition-colors hover:text-white md:h-8 md:w-8"
+                      class="flex h-9 w-9 items-center justify-center rounded-md text-muted dark:text-white transition-colors md:h-8 md:w-8"
                     >
                       <Gem class="h-5.5 w-5.5" />
                     </div>
-                    <span class="ml-3 text-white">Pricing Plan</span>
+                    <span class="ml-3 text-muted dark:text-white">Pricing Plan</span>
                   </a>
                 {/if}
               </nav>
             </aside>
           </div>
           <div class="w-full">
-            <main class="w-full overflow-y-auto bg-default sm:p-4">
+            <main class="w-full overflow-y-auto sm:p-4">
               <!--
               <button on:click={handleNotificationClick}>
                 Send Notification
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1b44fd0a..dfba3859 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -64,7 +64,7 @@
 />
 
 <div
-  class="w-full sm:max-w-[1400px] overflow-hidden m-auto min-h-screen bg-white dark:bg-default text-muted dark:text-white mb-40"
+  class="w-full sm:max-w-[1400px] overflow-hidden m-auto min-h-screen bg-white dark:bg-default text-muted dark:text-white mb-16"
 >
   {#if AppInstalled && !$closedPWA}
     <svelte:component this={AppInstalled} />
@@ -413,7 +413,7 @@
 
                         <a
                           href={`/stocks/${item?.ticker}`}
-                          class="inline-block badge duration-0 rounded-sm ml-1 px-2 m-auto text-blue-600 dark:text-blue-400 dark:sm:hover:text-white sm:hover:text-muted"
+                          class="inline-block badge duration-0 bg-blue-50 font-semibold dark:font-normal rounded-sm ml-1 px-2 m-auto text-blue-600 dark:text-blue-400 dark:sm:hover:text-white sm:hover:text-muted"
                           >{item?.ticker}</a
                         >
                       </li>
@@ -697,8 +697,8 @@
                     )}:
 
                     <li
-                      class="text-sm sm:text-[1rem]"
-                      style="color: #fff;  margin-top:10px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;"
+                      class="text-sm sm:text-[1rem] text-muted dark:text-white"
+                      style="margin-top:10px; margin-left: 30px; margin-bottom: 10px; list-style-type: disc;"
                     >
                       Revenue of {abbreviateNumber(item?.revenue)}
                       {item?.revenueSurprise > 0 ? "exceeds" : "misses"} estimates
@@ -713,7 +713,8 @@
                         : "growth"}.
                     </li>
                     <li
-                      style="color: #fff; line-height: 22px; margin-top:0px; margin-left: 30px; margin-bottom: 30px; list-style-type: disc;"
+                      class="text-muted dark:text-white"
+                      style="line-height: 22px; margin-top:0px; margin-left: 30px; margin-bottom: 30px; list-style-type: disc;"
                     >
                       EPS of {item?.eps}
                       {item?.epsSurprise > 0 ? "exceeds" : "misses"} estimates by
diff --git a/src/routes/market-news/+layout.svelte b/src/routes/market-news/+layout.svelte
index 658e1335..05991756 100644
--- a/src/routes/market-news/+layout.svelte
+++ b/src/routes/market-news/+layout.svelte
@@ -10,7 +10,7 @@
       path: "/market-news",
     },
     {
-      title: "Market",
+      title: "Markets",
       path: "/market-news/general",
     },
     {
@@ -32,12 +32,12 @@
 </script>
 
 <section
-  class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden pb-20 pt-5 px-4 lg:px-3"
+  class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden pb-20 pt-5 px-4 lg:px-3 text-muted dark:text-white"
 >
   <div class="text-sm sm:text-[1rem] breadcrumbs">
     <ul>
-      <li><a href="/" class="text-gray-300">Home</a></li>
-      <li class="text-gray-300">Market News</li>
+      <li><a href="/" class="text-muted dark:text-gray-300">Home</a></li>
+      <li class="text-muted dark:text-gray-300">Market News</li>
     </ul>
   </div>
 
@@ -47,7 +47,7 @@
         class="relative flex justify-center items-start overflow-hidden w-full"
       >
         <main class="w-full lg:pr-5">
-          <h1 class="mb-6 text-white text-2xl sm:text-3xl font-bold">
+          <h1 class="mb-6 text-2xl sm:text-3xl font-bold">
             {activeIdx === 0
               ? "All Stocks News"
               : activeIdx === 1
@@ -55,14 +55,16 @@
                 : "Press Releases"}
           </h1>
 
-          <nav class=" border-b-[2px] overflow-x-auto whitespace-nowrap">
-            <ul class="flex flex-row items-center w-full text-lg text-white">
+          <nav
+            class="border-[#2C6288] dark:border-white border-b-[2px] overflow-x-auto whitespace-nowrap"
+          >
+            <ul class="flex flex-row items-center w-full text-[1rem]">
               {#each tabs as item, i}
                 <a
                   href={item?.path}
                   class="p-2 px-5 cursor-pointer {activeIdx === i
-                    ? 'text-white bg-primary/90 font-semibold'
-                    : 'text-gray-400 sm:hover:text-white sm:hover:bg-primary/90'}"
+                    ? 'text-muted dark:text-white bg-[#EEEEEE] dark:bg-primary/90 font-semibold'
+                    : 'text-blue-500 dark:text-gray-400 sm:hover:text-muted dark:sm:hover:text-white sm:hover:bg-[#EEEEEE] dark:sm:hover:bg-primary/90'}"
                 >
                   {item.title}
                 </a>
diff --git a/src/routes/market-news/+page.svelte b/src/routes/market-news/+page.svelte
index b6640792..8d87e864 100644
--- a/src/routes/market-news/+page.svelte
+++ b/src/routes/market-news/+page.svelte
@@ -80,7 +80,7 @@
   description="The latest news on individual stocks on the US stock market, gathered from trusted finance and investing websites."
 />
 
-<div class="w-full overflow-hidden m-auto mt-5">
+<div class="w-full overflow-hidden m-auto mt-5 text-muted dark:text-white">
   <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
     <div
       class="relative flex justify-center items-start overflow-hidden w-full"
@@ -90,13 +90,13 @@
           <div class="grid grid-cols-1 gap-y-3">
             {#if news?.length !== 0}
               {#each news as item, index}
-                <div class="w-full flex flex-col bg-default rounded-md m-auto">
+                <div class="w-full flex flex-col rounded-md m-auto">
                   {#if checkIfYoutubeVideo(item.url)}
                     {#if showVideo[index]}
                       <!-- Show the YouTube iframe when the user clicks play -->
                       <div class="w-full aspect-video mb-4">
                         <iframe
-                          class="w-full h-full rounded-md border border-gray-800"
+                          class="w-full h-full rounded-md border border-gray-300 dark:border-gray-800"
                           src={`https://www.youtube.com/embed/${checkIfYoutubeVideo(item.url)}`}
                           frameborder="0"
                           allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -128,10 +128,10 @@
                         href={item?.url}
                         rel="noopener noreferrer"
                         target="_blank"
-                        class="text-lg sm:text-xl font-bold text-white"
+                        class="text-lg sm:text-xl font-bold"
                       >
                         {item?.title}
-                        <p class="text-white text-sm mt-2 font-normal">
+                        <p class=" text-sm mt-2 font-normal">
                           {item?.text?.length > 200
                             ? item?.text?.slice(0, 200) + "..."
                             : item?.text}
@@ -145,7 +145,7 @@
                         href={item?.url}
                         rel="noopener noreferrer"
                         target="_blank"
-                        class="w-full sm:max-w-56 h-fit max-h-96 sm:mr-3 border border-gray-800 rounded-md"
+                        class="w-full sm:max-w-56 h-fit max-h-96 sm:mr-3 border border-gray-300 dark:border-gray-800 rounded-md"
                       >
                         <div class="shrink-0 m-auto">
                           <img
@@ -164,10 +164,10 @@
                           href={item?.url}
                           rel="noopener noreferrer"
                           target="_blank"
-                          class="text-lg sm:text-xl font-bold text-white"
+                          class="text-lg sm:text-xl font-bold"
                         >
                           {item?.title}
-                          <p class="text-white text-sm mt-2 font-normal">
+                          <p class=" text-sm mt-2 font-normal">
                             {item?.text?.length > 200
                               ? item?.text?.slice(0, 200) + "..."
                               : item?.text}
@@ -177,7 +177,9 @@
                     </div>
                   {/if}
                 </div>
-                <hr class="border-gray-600 w-full m-auto mt-5 mb-5" />
+                <hr
+                  class="border-gray-300 dark:border-gray-600 w-full m-auto mt-5 mb-5"
+                />
               {/each}
             {/if}
           </div>
@@ -186,16 +188,16 @@
       <aside class="hidden lg:block relative fixed w-1/4">
         {#if marketNews?.length !== 0}
           <div
-            class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
             <div class="p-4 text-sm">
-              <h3 class="text-xl text-white font-bold mb-3">Market News</h3>
-              <ul class="text-white">
+              <h3 class="text-xl font-bold mb-3">Market News</h3>
+              <ul class="">
                 {#each marketNews?.slice(0, 10) as item}
                   <li class="mb-3 last:mb-1">
                     {formatDate(item?.publishedDate)} ago -
                     <a
-                      class="sm:hover:text-white text-blue-400"
+                      class="sm:hover:text-muted dark:sm:hover:text-white text-blue-500 dark:text-blue-400"
                       href={item?.url}
                       target="_blank"
                       rel="noopener noreferrer nofollow">{item?.title}</a
diff --git a/src/routes/market-news/general/+page.svelte b/src/routes/market-news/general/+page.svelte
index 3af884f5..c0bdb47f 100644
--- a/src/routes/market-news/general/+page.svelte
+++ b/src/routes/market-news/general/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { numberOfUnreadNotification } from "$lib/store";
   import { onMount } from "svelte";
+  import SEO from "$lib/components/SEO.svelte";
 
   export let data;
 
@@ -74,44 +74,13 @@
   }
 </script>
 
-<svelte:head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Today's
-    Stock Market News and Breaking Stories · Stocknear
-  </title>
-  <meta
-    name="description"
-    content={`Get the latest stock market news and breaking stories from the world's best finance and investing websites.`}
-  />
+<SEO
+  title="Today's
+    Stock Market News and Breaking Stories"
+  description="Get the latest stock market news and breaking stories from the world's best finance and investing websites."
+/>
 
-  <!-- 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:type" content="website" />
-  <!-- Add more Open Graph meta tags as needed -->
-
-  <!-- Twitter specific meta tags -->
-  <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.`}
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
-
-<div class="w-full overflow-hidden m-auto mt-5">
+<div class="w-full overflow-hidden m-auto mt-5 text-muted dark:text-white">
   <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
     <div
       class="relative flex justify-center items-start overflow-hidden w-full"
@@ -121,13 +90,13 @@
           <div class="grid grid-cols-1 gap-y-3">
             {#if news?.length !== 0}
               {#each news as item, index}
-                <div class="w-full flex flex-col bg-default rounded-md m-auto">
+                <div class="w-full flex flex-col rounded-md m-auto">
                   {#if checkIfYoutubeVideo(item.url)}
                     {#if showVideo[index]}
                       <!-- Show the YouTube iframe when the user clicks play -->
                       <div class="w-full aspect-video mb-4">
                         <iframe
-                          class="w-full h-full rounded-md border border-gray-800"
+                          class="w-full h-full rounded-md border border-gray-300 dark:border-gray-800"
                           src={`https://www.youtube.com/embed/${checkIfYoutubeVideo(item.url)}`}
                           frameborder="0"
                           allow="clipboard-write; encrypted-media; gyroscope; picture-in-picture"
@@ -159,10 +128,10 @@
                         href={item?.url}
                         rel="noopener noreferrer"
                         target="_blank"
-                        class="text-lg sm:text-xl font-bold text-white"
+                        class="text-lg sm:text-xl font-bold"
                       >
                         {item?.title}
-                        <p class="text-white text-sm mt-2 font-normal">
+                        <p class=" text-sm mt-2 font-normal">
                           {item?.text?.length > 200
                             ? item?.text?.slice(0, 200) + "..."
                             : item?.text}
@@ -176,7 +145,7 @@
                         href={item?.url}
                         rel="noopener noreferrer"
                         target="_blank"
-                        class="w-full sm:max-w-56 h-fit max-h-96 sm:mr-3 border border-gray-800 rounded-md"
+                        class="w-full sm:max-w-56 h-fit max-h-96 sm:mr-3 border border-gray-300 dark:border-gray-800 rounded-md"
                       >
                         <div class="shrink-0 m-auto">
                           <img
@@ -195,10 +164,10 @@
                           href={item?.url}
                           rel="noopener noreferrer"
                           target="_blank"
-                          class="text-lg sm:text-xl font-bold text-white"
+                          class="text-lg sm:text-xl font-bold"
                         >
                           {item?.title}
-                          <p class="text-white text-sm mt-2 font-normal">
+                          <p class=" text-sm mt-2 font-normal">
                             {item?.text?.length > 200
                               ? item?.text?.slice(0, 200) + "..."
                               : item?.text}
@@ -208,7 +177,9 @@
                     </div>
                   {/if}
                 </div>
-                <hr class="border-gray-600 w-full m-auto mt-5 mb-5" />
+                <hr
+                  class="border-gray-300 dark:border-gray-600 w-full m-auto mt-5 mb-5"
+                />
               {/each}
             {/if}
           </div>
@@ -217,16 +188,16 @@
       <aside class="hidden lg:block relative fixed w-1/4">
         {#if stockNews?.length !== 0}
           <div
-            class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
             <div class="p-4 text-sm">
-              <h3 class="text-xl text-white font-bold mb-3">Stock News</h3>
-              <ul class="text-white">
+              <h3 class="text-xl font-bold mb-3">Stock News</h3>
+              <ul class="">
                 {#each stockNews?.slice(0, 10) as item}
                   <li class="mb-3 last:mb-1">
                     {formatDate(item?.publishedDate)} ago -
                     <a
-                      class="sm:hover:text-white text-blue-400"
+                      class="sm:hover:text-muted dark:sm:hover:text-white text-blue-500 dark:text-blue-400"
                       href={item?.url}
                       target="_blank"
                       rel="noopener noreferrer nofollow">{item?.title}</a
diff --git a/src/routes/market-news/press-releases/+page.svelte b/src/routes/market-news/press-releases/+page.svelte
index 99c7a535..65c87221 100644
--- a/src/routes/market-news/press-releases/+page.svelte
+++ b/src/routes/market-news/press-releases/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { numberOfUnreadNotification } from "$lib/store";
   import { onMount } from "svelte";
+  import SEO from "$lib/components/SEO.svelte";
 
   export let data;
 
@@ -53,44 +53,13 @@
   });
 </script>
 
-<svelte:head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width" />
-  <title>
-    {$numberOfUnreadNotification > 0 ? `(${$numberOfUnreadNotification})` : ""} Press
-    Releases From Publicly Traded Companies · Stocknear
-  </title>
-  <meta
-    name="description"
-    content={`Press releases for publicly traded companies on the US stock market. Includes important company events, earnings releases and more.`}
-  />
+<SEO
+  title="Press
+    Releases From Publicly Traded Companies"
+  description="Press releases for publicly traded companies on the US stock market. Includes important company events, earnings releases and more."
+/>
 
-  <!-- Other meta tags -->
-  <meta
-    property="og:title"
-    content={`TPress Releases From Publicly Traded Companies · Stocknear`}
-  />
-  <meta
-    property="og:description"
-    content={`Press releases for publicly traded companies on the US stock market. Includes important company events, earnings releases and more.`}
-  />
-  <meta property="og:type" content="website" />
-  <!-- Add more Open Graph meta tags as needed -->
-
-  <!-- Twitter specific meta tags -->
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta
-    name="twitter:title"
-    content={`TPress Releases From Publicly Traded Companies · Stocknear`}
-  />
-  <meta
-    name="twitter:description"
-    content={`Press releases for publicly traded companies on the US stock market. Includes important company events, earnings releases and more.`}
-  />
-  <!-- Add more Twitter meta tags as needed -->
-</svelte:head>
-
-<div class="w-full overflow-hidden m-auto mt-5">
+<div class="w-full overflow-hidden m-auto mt-5 text-muted dark:text-white">
   <div class="sm:p-0 flex justify-center w-full m-auto overflow-hidden">
     <div
       class="relative flex justify-center items-start overflow-hidden w-full"
@@ -100,7 +69,7 @@
           <div class="grid grid-cols-1 gap-y-3">
             {#if news.length !== 0}
               {#each news as item}
-                <div class="w-full flex flex-col bg-default m-auto">
+                <div class="w-full flex flex-col m-auto">
                   <div class="w-full flex flex-col sm:flex-row">
                     <a
                       href={item?.url}
@@ -119,7 +88,9 @@
                     </a>
 
                     <div class="w-full">
-                      <h3 class="text-sm text-white/80 truncate mb-2">
+                      <h3
+                        class="text-sm text-muted dark:text-white/80 truncate mb-2"
+                      >
                         {formatDate(item?.publishedDate)} ago · {item?.site}
                       </h3>
 
@@ -127,16 +98,16 @@
                         href={item?.url}
                         rel="noopener noreferrer"
                         target="_blank"
-                        class="text-lg sm:text-xl font-bold text-white"
+                        class="text-lg sm:text-xl font-bold"
                       >
                         {item?.title}
-                        <p class="text-white text-sm mt-2 font-normal">
+                        <p class=" text-sm mt-2 font-normal">
                           {item?.text?.length > 200
                             ? item?.text?.slice(0, 200) + "..."
                             : item?.text}
                         </p>
                       </a>
-                      <div class=" mt-2 text-white">
+                      <div class=" mt-2">
                         <span>Stocks:</span>
 
                         <a
@@ -150,7 +121,9 @@
                   </div>
                 </div>
 
-                <hr class="border-gray-600 w-full m-auto mt-3 mb-5" />
+                <hr
+                  class="border-gray-300 dark:border-gray-600 w-full m-auto mt-3 mb-5"
+                />
               {/each}
             {/if}
           </div>
@@ -159,16 +132,16 @@
       <aside class="hidden lg:block relative fixed w-1/4">
         {#if stockNews?.length !== 0}
           <div
-            class="w-full sm:hover:text-white text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer"
           >
             <div class="p-4 text-sm">
-              <h3 class="text-xl text-white font-bold mb-3">Stock News</h3>
-              <ul class="text-white">
+              <h3 class="text-xl font-bold mb-3">Stock News</h3>
+              <ul class="">
                 {#each stockNews?.slice(0, 10) as item}
                   <li class="mb-3 last:mb-1">
                     {formatDate(item?.publishedDate)} ago -
                     <a
-                      class="sm:hover:text-white text-blue-400"
+                      class="sm:hover:text-muted dark:sm:hover:text-white text-blue-500 dark:text-blue-400"
                       href={item?.url}
                       target="_blank"
                       rel="noopener noreferrer nofollow">{item?.title}</a