diff --git a/src/interface/components/Switch.svelte b/src/interface/components/Switch.svelte
index 20d045b4..6fe91cbf 100644
--- a/src/interface/components/Switch.svelte
+++ b/src/interface/components/Switch.svelte
@@ -30,7 +30,7 @@
 </script>
 
 <div
-  class="flex w-14 p-1 cursor-pointer transition-all duration-150 rounded-full bg-gradient-to-tr dark:from-[#38373D]/50 dark:to-[#38373D] from-[#DDDDDD]/50 to-[#DDDDDD] switch select-none"
+  class="flex w-14 p-1 cursor-pointer transition-all duration-150 rounded-full bg-gradient-to-tr dark:from-[#38373D]/50 dark:to-[#38373D] to-[#DDDDDD]/50 from-[#DDDDDD] switch select-none"
   data-ison={state}
   onclick={() => onChange(!state)}
   onkeydown={(e) => e.key === "Enter" && onChange(!state)}
@@ -46,6 +46,10 @@
 
 <style>
   .switch[data-ison="true"] {
+    @apply to-[#30D259]/80 from-[#30D259];
+  }
+
+  .dark .switch[data-ison="true"] {
     @apply from-[#30D259]/50 to-[#30D259];
   }
 </style>
diff --git a/src/interface/components/TabbedContainer.svelte b/src/interface/components/TabbedContainer.svelte
index 6b4b53d3..43a62349 100644
--- a/src/interface/components/TabbedContainer.svelte
+++ b/src/interface/components/TabbedContainer.svelte
@@ -67,7 +67,7 @@
         {#each tabs as { Content, props }, index}
         <div class="absolute focus:outline-none w-full pt-2 transition-opacity duration-300 overflow-y-scroll no-scrollbar pb-2 h-full tab {activeTab === index ? 'opacity-100 active' : 'opacity-0'}"
           style="left: {index * 100}%;">
-          <div style="left: {index * 100}%;" class="fixed top-0 w-full h-8 bg-gradient-to-b to-transparent pointer-events-none z-[100] from-zinc-200 dark:from-zinc-800 dark:to-transparent"></div>
+          <div style="left: {index * 100}%;" class="fixed top-0 w-full h-8 bg-gradient-to-b to-transparent pointer-events-none z-[100] from-white dark:from-zinc-800 dark:to-transparent"></div>
              <Content {...props} />
           </div>
         {/each}