diff --git a/packages/twenty-website/src/sections/footer/Footer.tsx b/packages/twenty-website/src/sections/footer/Footer.tsx
index b0b823a4f6..165f0da20d 100644
--- a/packages/twenty-website/src/sections/footer/Footer.tsx
+++ b/packages/twenty-website/src/sections/footer/Footer.tsx
@@ -54,7 +54,7 @@ export function Footer() {
     <FooterRoot data-menu-surface="" data-scheme="dark">
       <StageContainer>
         <FooterBackdrop />
-        <Card>
+        <Card data-scheme="light">
           <NotchedCardShape />
           <TwentyLogo sizePx={40} />
           <FooterNav />
diff --git a/packages/twenty-website/src/ui/Button.tsx b/packages/twenty-website/src/ui/Button.tsx
index 24df39442e..42e19ae3a1 100644
--- a/packages/twenty-website/src/ui/Button.tsx
+++ b/packages/twenty-website/src/ui/Button.tsx
@@ -76,6 +76,20 @@ const buttonClassName = css`
     --button-label-hover: ${color('white')};
   }
 
+  [data-scheme='dark'] [data-scheme='light'] &[data-variant='filled'] {
+    --button-fill: ${color('black')};
+    --button-hover-fill: ${color('black-hover')};
+    --button-label: ${color('white')};
+    --button-label-hover: ${color('white')};
+  }
+
+  [data-scheme='dark'] [data-scheme='light'] &[data-variant='outlined'] {
+    --button-stroke: ${color('black')};
+    --button-hover-fill: ${color('black')};
+    --button-label: ${color('black')};
+    --button-label-hover: ${color('black')};
+  }
+
   /* Outlined hovers are a 5% ink wash. The shape paints OPAQUE and the
      layer carries the opacity, so the wash composites once — segment
      overlaps can never double into seams, on any surface. */