diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
index 384826cf6..d1df9bd55 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesMenuView.tsx
@@ -37,7 +37,7 @@ const PreferencesMenuView: FunctionComponent<Props> = ({ menu }) => {
   )
 
   return (
-    <div className="border-t border-border bg-default px-5 pt-2 md:border-0 md:bg-transparent md:px-0 md:py-0">
+    <div className="border-t border-border bg-default px-5 pt-2 md:border-0 md:bg-contrast md:px-0 md:py-0">
       <div className="hidden min-w-55 flex-col overflow-y-auto px-3 py-6 md:flex">
         {menuItems.map((pref) => (
           <PreferencesMenuItem
diff --git a/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx b/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
index a612d0ab4..9e64a12a9 100644
--- a/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
+++ b/packages/web/src/javascripts/Components/Preferences/PreferencesView.tsx
@@ -34,7 +34,7 @@ const PreferencesView: FunctionComponent<PreferencesProps> = (props) => {
     <div
       className={classNames(
         'absolute top-0 left-0 z-preferences flex h-full max-h-screen w-full flex-col bg-default pt-safe-top',
-        isIOS() ? 'pb-safe-bottom' : 'pb-2',
+        isIOS() ? 'pb-safe-bottom' : 'pb-2 md:pb-0',
       )}
       ref={fitNodeToMobileScreen}
     >