diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 661b466..ba6655d 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -17,7 +17,7 @@ const variantStyles = {
   },
   outline: {
     gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
-    white: 'border-gray-300 text-white hover:border-gray-400 active:bg-gray-100 active:text-white',
+    white: 'border-gray-300 text-white hover:border-gray-400 hover:text-gray-300 active:bg-gray-100 active:text-gray-800',
   },
 }
 
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 2791276..e02313b 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -135,7 +135,7 @@ export function Header() {
               )}
             </Popover>
             <div className="flex items-center gap-6 max-lg:hidden">
-              <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline">
+              <Button href="https://docs.ourworld.tf/mycelium_cloud/docs/" variant="outline" color="white">
                 Docs
               </Button>
               <Button href="https://www.mycelium.threefold.io/download/" color="cyan">Get Started</Button>