diff --git a/src/lib/components/Infobox.svelte b/src/lib/components/Infobox.svelte
index ba1b1470..cf0577ff 100644
--- a/src/lib/components/Infobox.svelte
+++ b/src/lib/components/Infobox.svelte
@@ -3,7 +3,7 @@
 </script>
 
 <div
-  class="sm:mt-5 bg-inherit sm:mt-0 border-l-3 border-l-white border-r-0 border-t-0 border-b-0 border p-0 sm:p-4 text-white flex flex-row items-center"
+  class="sm:mt-5 sm:mt-0 border-l-3 border-l-muted dark:border-l-white border-r-0 border-t-0 border-b-0 border p-0 sm:p-4 text-muted dark:text-white flex flex-row items-center"
 >
   <svg
     class="h-6 w-6 hidden sm:block"
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 6de2e1d8..0f8ee6d6 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -9,15 +9,17 @@
   description="Welcome to Stocknear — a site that aims to be the internet's best source of free stock data and information for regular investors."
 />
 
-<body class="text-white w-full">
-  <section class="border-b border-gray-600 sm:rounded-md w-full">
+<body class="text-muted dark:text-white w-full">
+  <section
+    class="border-b border-gray-200 shadow dark:border-gray-600 sm:rounded-md w-full bg-gray-100 dark:bg-default"
+  >
     <div class="mx-auto max-w-7xl px-6 py-16 sm:py-28 md:px-8">
       <div class="text-center">
-        <h1 class="mt-1 text-4xl font-bold text-white sm:text-5xl lg:text-6xl">
+        <h1 class="mt-1 text-4xl font-bold sm:text-5xl lg:text-6xl">
           About Us
         </h1>
         <p
-          class="mx-auto mt-5 max-w-3xl text-xl leading-normal text-white md:mt-7 md:text-2xl"
+          class="mx-auto mt-5 max-w-3xl text-xl leading-normal md:mt-7 md:text-2xl"
         >
           Welcome to Stocknear — a stock analysis platform built by users, for
           users. Our goal is to be the internet's top source of free stock data
@@ -27,13 +29,13 @@
     </div>
   </section>
 
-  <section class="border-t border-gray-600 text-white">
+  <section class="border-t border-gray-300 dark:border-gray-600">
     <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-20">
       <div class="lg:text-center">
-        <h2 class="mt-2 text-3xl font-bold leading-8 text-white sm:text-4xl">
+        <h2 class="mt-2 text-3xl font-bold leading-8 sm:text-4xl">
           What sets us apart
         </h2>
-        <p class="mt-4 max-w-lg text-xl text-white lg:mx-auto">
+        <p class="mt-4 max-w-lg text-xl lg:mx-auto">
           We're here to make investing simple and efficient with data that’s
           always up-to-date and highly accurate.
         </p>
@@ -45,7 +47,7 @@
           <div class="relative">
             <dt>
               <div
-                class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-white text-black"
+                class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-white text-white dark:text-black"
               >
                 <svg
                   class="h-6 w-6"
@@ -74,7 +76,7 @@
           <div class="relative">
             <dt>
               <div
-                class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-white text-black"
+                class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-white text-white dark:text-black"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -101,7 +103,7 @@
           <div class="relative">
             <dt>
               <div
-                class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-white text-black"
+                class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-white text-white dark:text-black"
               >
                 <svg
                   class="w-6 h-6"
@@ -128,7 +130,7 @@
           <div class="relative">
             <dt>
               <div
-                class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-white text-black"
+                class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-white text-white dark:text-black"
               >
                 <svg
                   class="w-5 h-5"
@@ -155,7 +157,7 @@
           <div class="relative">
             <dt>
               <div
-                class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-white text-black"
+                class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-white text-white dark:text-black"
               >
                 <svg
                   class="w-6 h-6"
@@ -182,7 +184,7 @@
           <div class="relative">
             <dt>
               <div
-                class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-white text-black"
+                class="absolute flex h-12 w-12 items-center justify-center rounded-md bg-[#3B82F6] dark:bg-white text-white dark:text-black"
               >
                 <svg
                   class="h-6 w-6"
@@ -211,12 +213,14 @@
     </div>
   </section>
 
-  <section class="border-t border-gray-600 text-white">
+  <section
+    class="border-t border-gray-200 shadow dark:border-gray-600 bg-gray-100 dark:bg-default"
+  >
     <div class="mx-auto max-w-7xl px-6 py-12 lg:px-8 lg:py-28">
       <div class="space-y-12 lg:grid lg:grid-cols-3 lg:gap-8 lg:space-y-0">
         <div class="space-y-5 sm:space-y-4">
           <h2 class="text-3xl font-bold sm:text-4xl">Our Team</h2>
-          <p class="text-lg text-white sm:text-xl">
+          <p class="text-lg sm:text-xl">
             Stocknear is an open-source project solely maintained by Muslem
             Rahimi.
           </p>
@@ -241,10 +245,12 @@
                   <div class="space-y-4">
                     <div class="space-y-1 text-lg font-semibold leading-6">
                       <h3>Muslem Rahimi, PhD</h3>
-                      <p class="text-blue-400">Founder / Chief of Nothing</p>
+                      <p class="text-blue-500 dark:text-blue-400">
+                        Founder / Chief of Nothing
+                      </p>
                     </div>
                     <div class="text-lg">
-                      <p class="text-white">
+                      <p class="">
                         Muslem founded Stocknear in 2022 after leaving his role
                         as an insurance mathematician at Deloitte. He holds a
                         Bachelor's degree in Physics from the University of
diff --git a/src/routes/donation/+page.svelte b/src/routes/donation/+page.svelte
index d39ebfd3..d68520c6 100644
--- a/src/routes/donation/+page.svelte
+++ b/src/routes/donation/+page.svelte
@@ -11,12 +11,12 @@
 />
 
 <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">Sponsor</li>
+      <li><a href="/" class="text-muted dark:text-gray-300">Home</a></li>
+      <li class="text-muted dark:text-gray-300">Sponsor</li>
     </ul>
   </div>
 
@@ -27,15 +27,13 @@
       >
         <main class="w-full lg:w-3/4 lg:pr-5">
           <div class="mb-6 border-b-[2px]">
-            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
-              Sponsor
-            </h1>
+            <h1 class="mb-1 text-2xl sm:text-3xl font-bold">Sponsor</h1>
           </div>
 
-          <div class="w-full bg-default m-auto">
+          <div class="w-full m-auto">
             <div class="">
-              <h2 class="text-white text-xl font-semibold mb-5">Hey 👋,</h2>
-              <p class="text-white mb-5 text-[1rem]">
+              <h2 class=" text-xl font-semibold mb-5">Hey 👋,</h2>
+              <p class=" mb-5 text-[1rem]">
                 Thank you for considering supporting our mission. As the sole
                 person behind Stocknear—handling everything from backend
                 development to customer service—I'm committed to keeping our
@@ -45,7 +43,7 @@
                 Our Plans are priced ensure that high-quality stock data is within
                 reach for retail investors of all backgrounds.
               </p>
-              <div class="text-white mb-5 text-[1rem]">
+              <div class=" mb-5 text-[1rem]">
                 While the Membership is designed to sustain our basic
                 operations, your additional support can help us go even further.
                 By sponsoring, you're not just supporting a platform; you're
@@ -94,10 +92,10 @@
                 </ul>
               </div>
 
-              <h2 class="text-white text-2xl font-semibold">
+              <h2 class=" text-2xl font-semibold">
                 Become a sponsor to Stocknear
               </h2>
-              <p class="text-white mb-5 text-[1rem]">
+              <p class=" mb-5 text-[1rem]">
                 If you believe in our mission and want to support us beyond your
                 Subscription, please support us via GitHub Sponsors. Every
                 contribution, no matter the size, makes a significant impact on
@@ -121,38 +119,40 @@
 
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/about"
               class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  About Us
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
+                <h2 class="text-start text-xl font-semibold ml-3">About Us</h2>
+                <ArrowLogo
+                  class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
+                />
               </div>
-              <span class="text-white p-3 ml-3 mr-3">
+              <span class=" p-3 ml-3 mr-3">
                 Learn more about why we're doing this here
               </span>
             </a>
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/contact"
               class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
+                <h2 class="text-start text-xl font-semibold ml-3">
                   Contact Us
                 </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
+                <ArrowLogo
+                  class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
+                />
               </div>
-              <span class="text-white p-3 ml-3 mr-3">
+              <span class=" p-3 ml-3 mr-3">
                 Let me know if you need something
               </span>
             </a>
diff --git a/src/routes/notifications/+page.svelte b/src/routes/notifications/+page.svelte
index bcd31c91..b1b0a2ff 100644
--- a/src/routes/notifications/+page.svelte
+++ b/src/routes/notifications/+page.svelte
@@ -64,12 +64,12 @@
 />
 
 <section
-  class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
+  class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen 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">Notifications</li>
+      <li><a href="/" class="text-muted dark:text-gray-300">Home</a></li>
+      <li class="text-muted dark:text-gray-300">Notifications</li>
     </ul>
   </div>
 
@@ -80,9 +80,7 @@
       >
         <main class="w-full lg:w-3/4 lg:pr-10">
           <div class="mb-3 border-b-[2px]">
-            <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
-              Notification
-            </h1>
+            <h1 class="mb-1 text-2xl sm:text-3xl font-bold">Notification</h1>
           </div>
 
           <div class="mb-4">
@@ -92,27 +90,29 @@
           </div>
 
           {#if notificationList?.length !== 0}
-            <div class="flex flex-col items-start w-full text-white">
+            <div class="flex flex-col items-start w-full">
               {#each notificationList as item}
                 {#if item?.notifyType === "priceAlert"}
                   <!-- svelte-ignore a11y-click-events-have-key-events -->
                   <div
-                    class=" pb-3 sm:p-3 mb-6 sm:mb-3 text-white w-full {!item?.readed
+                    class="border-b border-gray-300 dark:border-gray-800 pb-3 sm:p-3 mb-6 sm:mb-3 w-full {!item?.readed
                       ? 'bg-[#F9AB00]/10'
                       : ''} "
                   >
                     <div class="flex flex-row items-center w-full">
                       <!-- svelte-ignore a11y-label-has-associated-control -->
-                      <a class="avatar w-8 h-8 shrink-0 mr-4">
+                      <a
+                        class="avatar w-8 h-8 shrink-0 mr-4 bg-gray-200 dark:bg-gray-800 rounded-full"
+                      >
                         <img
                           style="clip-path: circle(50%);"
-                          class="shrink-0 w-8 h-8 rounded-full inline-block"
+                          class="shrink-0 w-8 h-8 rounded-full inline-block p-1"
                           src={`https://financialmodelingprep.com/image-stock/${item?.liveResults?.symbol}.png`}
                           alt="Company Logo"
                         />
                       </a>
 
-                      <div class="text-white text-sm sm:text-[1rem]">
+                      <div class=" text-sm sm:text-[1rem]">
                         <!-- svelte-ignore a11y-click-events-have-key-events -->
                         <!-- svelte-ignore a11y-label-has-associated-control -->
                         <div class="flex flex-col items-start">
@@ -145,22 +145,24 @@
                 {:else if item?.notifyType === "wiim"}
                   <!-- svelte-ignore a11y-click-events-have-key-events -->
                   <div
-                    class=" pb-3 sm:p-3 mb-6 sm:mb-3 text-white w-full {!item?.readed
+                    class="border-b border-gray-300 dark:border-gray-800 pb-3 sm:p-3 mb-6 sm:mb-3 w-full {!item?.readed
                       ? 'bg-[#F9AB00]/10'
                       : ''} "
                   >
                     <div class="flex flex-row items-center w-full">
                       <!-- svelte-ignore a11y-label-has-associated-control -->
-                      <a class="avatar w-8 h-8 shrink-0 mr-4">
+                      <a
+                        class="avatar w-8 h-8 shrink-0 mr-4 bg-gray-200 dark:bg-gray-800 rounded-full"
+                      >
                         <img
                           style="clip-path: circle(50%);"
-                          class="shrink-0 w-8 h-8 rounded-full inline-block"
+                          class="shrink-0 w-8 h-8 rounded-full inline-block p-1"
                           src={`https://financialmodelingprep.com/image-stock/${item?.liveResults?.symbol}.png`}
                           alt="Company Logo"
                         />
                       </a>
 
-                      <div class="text-white text-sm sm:text-[1rem]">
+                      <div class=" text-sm sm:text-[1rem]">
                         <!-- svelte-ignore a11y-click-events-have-key-events -->
                         <!-- svelte-ignore a11y-label-has-associated-control -->
                         <div class="flex flex-col items-start">
@@ -189,22 +191,24 @@
                   </div>
                 {:else if item?.notifyType === "topAnalyst"}
                   <div
-                    class=" pb-3 sm:p-3 mb-6 sm:mb-3 text-white w-full {!item?.readed
+                    class="border-b border-gray-300 dark:border-gray-800 pb-3 sm:p-3 mb-6 sm:mb-3 w-full {!item?.readed
                       ? 'bg-[#F9AB00]/10'
                       : ''} "
                   >
                     <div class="flex flex-row items-center w-full">
                       <!-- svelte-ignore a11y-label-has-associated-control -->
-                      <a class="avatar w-8 h-8 shrink-0 mr-4">
+                      <a
+                        class="avatar w-8 h-8 shrink-0 mr-4 bg-gray-200 dark:bg-gray-800 rounded-full"
+                      >
                         <img
                           style="clip-path: circle(50%);"
-                          class="shrink-0 w-8 h-8 rounded-full inline-block"
+                          class="shrink-0 w-8 h-8 rounded-full inline-block p-1"
                           src={`https://financialmodelingprep.com/image-stock/${item?.liveResults?.symbol}.png`}
                           alt="Company Logo"
                         />
                       </a>
 
-                      <div class="text-white text-sm sm:text-[1rem]">
+                      <div class=" text-sm sm:text-[1rem]">
                         <!-- svelte-ignore a11y-click-events-have-key-events -->
                         <!-- svelte-ignore a11y-label-has-associated-control -->
                         <div class="flex flex-col items-start">
@@ -238,22 +242,24 @@
                   </div>
                 {:else if item?.notifyType === "earningsSurprise"}
                   <div
-                    class=" pb-3 sm:p-3 mb-6 sm:mb-3 text-white w-full {!item?.readed
+                    class="border-b border-gray-300 dark:border-gray-800 pb-3 sm:p-3 mb-6 sm:mb-3 w-full {!item?.readed
                       ? 'bg-[#F9AB00]/10'
                       : ''} "
                   >
                     <div class="flex flex-row items-center w-full">
                       <!-- svelte-ignore a11y-label-has-associated-control -->
-                      <a class="avatar w-8 h-8 shrink-0 mr-4">
+                      <a
+                        class="avatar w-8 h-8 shrink-0 mr-4 bg-gray-200 dark:bg-gray-800 rounded-full"
+                      >
                         <img
                           style="clip-path: circle(50%);"
-                          class="shrink-0 w-8 h-8 rounded-full inline-block"
+                          class="shrink-0 w-8 h-8 rounded-full inline-block p-1"
                           src={`https://financialmodelingprep.com/image-stock/${item?.liveResults?.symbol}.png`}
                           alt="Company Logo"
                         />
                       </a>
 
-                      <div class="text-white text-sm sm:text-[1rem]">
+                      <div class=" text-sm sm:text-[1rem]">
                         <!-- svelte-ignore a11y-click-events-have-key-events -->
                         <!-- svelte-ignore a11y-label-has-associated-control -->
                         <div class="flex flex-col items-start">
@@ -285,7 +291,7 @@
             </div>
           {:else}
             <div
-              class="mt-5 text-white font-semibold text-[1rem] justify-center items-center m-auto"
+              class="mt-5 font-semibold text-[1rem] justify-center items-center m-auto"
             >
               Empty just like our souls...
               <svg
@@ -303,38 +309,40 @@
 
         <aside class="hidden lg:block relative fixed w-1/4 ml-4">
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/watchlist/stocks"
               class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
-                  Watchlist
-                </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
+                <h2 class="text-start text-xl font-semibold ml-3">Watchlist</h2>
+                <ArrowLogo
+                  class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
+                />
               </div>
-              <span class="text-white p-3 ml-3 mr-3">
+              <span class=" p-3 ml-3 mr-3">
                 Get realtime updates of your favorite stocks
               </span>
             </a>
           </div>
 
           <div
-            class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+            class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
           >
             <a
               href="/reddit-tracker"
               class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
             >
               <div class="w-full flex justify-between items-center p-3 mt-3">
-                <h2 class="text-start text-xl font-semibold text-white ml-3">
+                <h2 class="text-start text-xl font-semibold ml-3">
                   Reddit Tracker
                 </h2>
-                <ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
+                <ArrowLogo
+                  class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
+                />
               </div>
-              <span class="text-white p-3 ml-3 mr-3">
+              <span class=" p-3 ml-3 mr-3">
                 Get the latest trends of r/Wallstreetbets
               </span>
             </a>
diff --git a/src/routes/sitemap/+page.svelte b/src/routes/sitemap/+page.svelte
index b2758735..8fffaea0 100644
--- a/src/routes/sitemap/+page.svelte
+++ b/src/routes/sitemap/+page.svelte
@@ -193,15 +193,17 @@
   description="Navigate through Stocknear's complete collection of financial tools and market analysis resources. Access real-time stock data, ETFs, options flow, and more."
 />
 
-<main>
+<main class="text-muted dark:text-white">
   <section
     class="w-full max-w-3xl sm:max-w-[1400px] overflow-hidden min-h-screen pb-20 pt-5 px-4 lg:px-3"
     aria-label="Sitemap Navigation"
   >
     <nav class="text-sm sm:text-[1rem] breadcrumbs" aria-label="Breadcrumb">
       <ul>
-        <li><a href="/" class="text-gray-300">Home</a></li>
-        <li class="text-gray-300" aria-current="page">Sitemap</li>
+        <li><a href="/" class="text-muted dark:text-gray-300">Home</a></li>
+        <li class="text-muted dark:text-gray-300" aria-current="page">
+          Sitemap
+        </li>
       </ul>
     </nav>
 
@@ -212,12 +214,10 @@
         >
           <article class="w-full lg:w-3/4 lg:pr-10">
             <div class="mb-6 border-b-[2px]">
-              <h1 class="mb-1 text-white text-2xl sm:text-3xl font-bold">
-                Sitemap
-              </h1>
+              <h1 class="mb-1 text-2xl sm:text-3xl font-bold">Sitemap</h1>
             </div>
 
-            <div class=" w-full bg-default m-auto text-white">
+            <div class=" w-full m-auto">
               <div class="content">
                 <p class="text-[1rem] sm:text-lg">
                   Explore a comprehensive list of Stocknear's financial tools
@@ -225,9 +225,7 @@
                   ETFs, options flow, and more. Use our search bar for quick
                   access to specific stock symbols.
                 </p>
-                <h2 class="text-white text-xl sm:text-2xl font-bold mt-8 mb-5">
-                  Pages
-                </h2>
+                <h2 class=" text-xl sm:text-2xl font-bold mt-8 mb-5">Pages</h2>
                 <nav aria-label="Site Pages">
                   <ul
                     class="list-outside list-disc space-y-1 p-1 pl-6 md:gap-x-8 md:text-lg"
@@ -244,7 +242,7 @@
                   </ul>
                 </nav>
 
-                <h2 class="text-white text-xl sm:text-2xl font-bold mt-8 mb-5">
+                <h2 class=" text-xl sm:text-2xl font-bold mt-8 mb-5">
                   Articles
                 </h2>
                 <nav aria-label="Site Pages">
@@ -265,7 +263,7 @@
                   </ul>
                 </nav>
 
-                <h2 class="text-white text-xl sm:text-2xl font-bold mt-8 mb-5">
+                <h2 class=" text-xl sm:text-2xl font-bold mt-8 mb-5">
                   Learning Center
                 </h2>
                 <nav aria-label="Site Pages">
@@ -285,7 +283,7 @@
                   </ul>
                 </nav>
 
-                <h2 class="text-white text-xl sm:text-2xl font-bold mt-8 mb-5">
+                <h2 class=" text-xl sm:text-2xl font-bold mt-8 mb-5">
                   Financial terms
                 </h2>
                 <nav aria-label="Site Pages">
@@ -311,57 +309,63 @@
 
           <aside class="hidden lg:block relative fixed w-1/4 mt-4">
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+              class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/pricing"
                 class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
               >
                 <div class="w-full flex justify-between items-center p-3 mt-3">
-                  <h2 class="text-start text-xl font-semibold text-white ml-3">
+                  <h2 class="text-start text-xl font-semibold ml-3">
                     Pro Subscription
                   </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
+                  <ArrowLogo
+                    class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
+                  />
                 </div>
-                <span class="text-white p-3 ml-3 mr-3">
+                <span class=" p-3 ml-3 mr-3">
                   Upgrade now for unlimited access to all data and tools.
                 </span>
               </a>
             </div>
 
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+              class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/donation"
                 class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
               >
                 <div class="w-full flex justify-between items-center p-3 mt-3">
-                  <h2 class="text-start text-xl font-semibold text-white ml-3">
+                  <h2 class="text-start text-xl font-semibold ml-3">
                     Sponsor Us
                   </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
+                  <ArrowLogo
+                    class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
+                  />
                 </div>
-                <span class="text-white p-3 ml-3 mr-3">
+                <span class=" p-3 ml-3 mr-3">
                   Learn more about why we're doing this here
                 </span>
               </a>
             </div>
 
             <div
-              class="w-full text-white border border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer bg-inherit sm:hover:bg-secondary transition ease-out duration-100"
+              class="w-full border border-gray-300 dark:border-gray-600 rounded-md h-fit pb-4 mt-4 cursor-pointer sm:hover:shadow-lg dark:sm:hover:bg-secondary transition ease-out duration-100"
             >
               <a
                 href="/contact"
                 class="w-auto lg:w-full p-1 flex flex-col m-auto px-2 sm:px-0"
               >
                 <div class="w-full flex justify-between items-center p-3 mt-3">
-                  <h2 class="text-start text-xl font-semibold text-white ml-3">
+                  <h2 class="text-start text-xl font-semibold ml-3">
                     Contact Us
                   </h2>
-                  <ArrowLogo class="w-8 h-8 mr-3 shrink-0" />
+                  <ArrowLogo
+                    class="w-8 h-8 mr-3 shrink-0 text-gray-400 dark:text-white"
+                  />
                 </div>
-                <span class="text-white p-3 ml-3 mr-3">
+                <span class=" p-3 ml-3 mr-3">
                   Let me know if you need something
                 </span>
               </a>
