diff --git a/src/assets/styles/window.css b/src/assets/styles/window.css
index fae5d46c..a85f567e 100644
--- a/src/assets/styles/window.css
+++ b/src/assets/styles/window.css
@@ -144,4 +144,8 @@
 
 .bg-mix {
   background-color: #d7f0fe;
+}
+
+.dark\:bg-dark-mix:is(.dark *) {
+  background-color: #0b7ab0;
 }
\ No newline at end of file
diff --git a/src/pages/get-supporter-edition.astro b/src/pages/get-supporter-edition.astro
index 1613501d..8dff9517 100644
--- a/src/pages/get-supporter-edition.astro
+++ b/src/pages/get-supporter-edition.astro
@@ -15,20 +15,20 @@ const metadata = {
   <!-- Hero2 Widget ******************* -->
 
   <Hero
-    tagline="<span class='text-sky-600'>Coming Soon...</span>"
-    title='<span class="text-5xl"> Lychee <span class="text-sky-600">SE</span></span>'
-    subtitle="Unlock the full capabilities of <span class='font-bold text-black'>Lychee</span> with the <span class='text-sky-600 font-bold'>Supporter Edition</span>.<br>Get exclusive features and support the development of Lychee."
+    tagline="<span class='text-sky-600 dark:text-sky-400'>Coming Soon...</span>"
+    title='<span class="text-5xl"> Lychee <span class="text-sky-600 dark:text-sky-400">SE</span></span>'
+    subtitle="Unlock the full capabilities of <span class='font-bold text-black dark:text-white'>Lychee</span> with the <span class='text-sky-600 dark:text-sky-400 font-bold'>Supporter Edition</span>.<br>Get exclusive features and support the development of Lychee."
   >
   <Fragment slot="bg">
 
   <div class="relative w-full flex justify-center pt-0 md:pt-[76px]">
     <div class="shape-divider-bottom  hidden lg:block">
-        <div class="h-4 sm:h-16 md:h-52 w-full bg-mix"/>
+        <div class="h-4 sm:h-16 md:h-52 w-full bg-mix dark:bg-dark-mix"/>
         <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 200" preserveAspectRatio="none" class="bg-bgDark2">
-          <path d="M 0 50 C 150 150 300 0 500 80 L 500 0 L 0 0" class="shape-fill bg-white fill-sky-400" 
+          <path d="M 0 50 C 150 150 300 0 500 80 L 500 0 L 0 0" class="shape-fill bg-white fill-sky-400 dark:bg-black dark:fill-sky-950" 
             fill="rgb(57, 27, 112)"></path>
-          <path d="M 0 50 C 150 150 330 -30 500 50 L 500 0 L 0 0" class="fill-sky-100" opacity="0.8"></path>
-         <path d="M 0 50 C 215 150 250 0 500 100 L 500 0 L 0 0" class="fill-sky-50" opacity="0.5"></path>
+          <path d="M 0 50 C 150 150 330 -30 500 50 L 500 0 L 0 0" class="fill-sky-100 dark:fill-sky-800" opacity="0.8"></path>
+         <path d="M 0 50 C 215 150 250 0 500 100 L 500 0 L 0 0" class="fill-sky-50 dark:fill-sky-500" opacity="0.5"></path>
         </svg>
     </div>
   </div>
@@ -154,7 +154,7 @@ const metadata = {
         available: [true, true],
       },
       {
-        feature: 'Upload by chunks <span class="rounded-full text-xs text-white bg-sky-300 px-2 shadow-sm shadow-black/20">v6</span>',
+        feature: 'Upload by chunks <span class="rounded-full text-xs text-white bg-sky-300 dark:text-neutral-300 dark:bg-sky-600 px-2 shadow-sm shadow-black/20">v6</span>',
         available: [true, true],
       },
       {
@@ -207,7 +207,7 @@ const metadata = {
         available: [true, true],
       },
       {
-        feature: 'Slideshow with previous & next <span class="rounded-full text-xs text-white bg-sky-300 px-2 shadow-sm shadow-black/20">v6</span>',
+        feature: 'Slideshow with previous & next <span class="rounded-full text-xs text-white bg-sky-300 dark:text-neutral-300 dark:bg-sky-600 px-2 shadow-sm shadow-black/20">v6</span>',
         available: [true, true],
       },
 
@@ -228,11 +228,11 @@ const metadata = {
         available: [true, true],
       },
       {
-        feature: 'Space usage per user <span class="rounded-full text-xs text-white bg-sky-300 px-2 shadow-sm shadow-black/20">v6</span>',
+        feature: 'Space usage per user <span class="rounded-full text-xs text-white bg-sky-300 dark:text-neutral-300 dark:bg-sky-600 px-2 shadow-sm shadow-black/20">v6</span>',
         available: [false, true],
       },
       {
-        feature: 'Upload quota per user <span class="rounded-full text-xs text-white bg-sky-300 px-2 shadow-sm shadow-black/20">v6</span>',
+        feature: 'Upload quota per user <span class="rounded-full text-xs text-white bg-sky-300 dark:text-neutral-300 dark:bg-sky-600 px-2 shadow-sm shadow-black/20">v6</span>',
         available: [false, true],
       },
 
@@ -282,7 +282,7 @@ const metadata = {
         available: [true, true],
       },
       {
-        feature: 'Statistics on your installation <span class="rounded-full text-xs text-white bg-sky-300 px-2 shadow-sm shadow-black/20">v6</span>',
+        feature: 'Statistics on your installation <span class="rounded-full text-xs text-white  bg-sky-300 dark:text-neutral-300 dark:bg-sky-600 px-2 shadow-sm shadow-black/20">v6</span>',
         available: [false, true],
       }