diff --git a/packages/web/src/javascripts/Components/Button/Button.tsx b/packages/web/src/javascripts/Components/Button/Button.tsx
index 7a991b360..c6b201eff 100644
--- a/packages/web/src/javascripts/Components/Button/Button.tsx
+++ b/packages/web/src/javascripts/Components/Button/Button.tsx
@@ -5,19 +5,19 @@ export type ButtonStyle = 'default' | 'contrast' | 'neutral' | 'info' | 'warning
 const getColorsForNormalVariant = (style: ButtonStyle) => {
   switch (style) {
     case 'default':
-      return 'bg-default text-text'
+      return 'bg-passive-5 text-text'
     case 'contrast':
-      return 'bg-default text-contrast'
+      return 'bg-passive-5 text-contrast'
     case 'neutral':
-      return 'bg-default text-neutral'
+      return 'bg-passive-5 text-neutral'
     case 'info':
-      return 'bg-default text-info'
+      return 'bg-passive-5 text-info'
     case 'warning':
-      return 'bg-default text-warning'
+      return 'bg-passive-5 text-warning'
     case 'danger':
-      return 'bg-default text-danger'
+      return 'bg-passive-5 text-danger'
     case 'success':
-      return 'bg-default text-success'
+      return 'bg-passive-5 text-success'
   }
 }
 
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
index d5d5147b3..83315ba9b 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesComponents/Content.tsx
@@ -24,7 +24,7 @@ export const Text: FunctionComponent<Props> = ({ children, className }) => (
 )
 
 const buttonClasses =
-  'block bg-default text-text rounded border-solid \
+  'block bg-passive-5 text-text rounded border-solid \
 border px-4 py-1.5 font-bold text-base lg:text-sm w-fit \
 focus:bg-contrast hover:bg-contrast border-border'