diff --git a/packages/web/src/javascripts/Components/Menu/MenuItem.tsx b/packages/web/src/javascripts/Components/Menu/MenuItem.tsx
index dd1056934..38bc496e7 100644
--- a/packages/web/src/javascripts/Components/Menu/MenuItem.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuItem.tsx
@@ -41,7 +41,7 @@ const MenuItem = forwardRef(
           tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
           className={classNames(
             'flex w-full cursor-pointer select-none border-0 bg-transparent px-3 py-2.5 text-left md:py-1.5',
-            'text-mobile-menu-item text-text enabled:hover:bg-contrast enabled:hover:text-foreground',
+            'text-mobile-menu-item text-text enabled:hover:bg-passive-3 enabled:hover:text-foreground',
             'focus:bg-info-backdrop focus:shadow-none md:text-tablet-menu-item lg:text-menu-item',
             'disabled:cursor-not-allowed disabled:opacity-60',
             className,
diff --git a/packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx b/packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx
index 7a654d569..aac07b7ca 100644
--- a/packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuRadioButtonItem.tsx
@@ -75,7 +75,7 @@ const MenuRadioButtonItem = forwardRef(
           tabIndex={typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE}
           className={classNames(
             'flex w-full cursor-pointer gap-2 border-0 bg-transparent px-3 py-2.5 text-left md:py-1.5',
-            'text-mobile-menu-item text-text hover:bg-contrast hover:text-foreground',
+            'text-mobile-menu-item text-text hover:bg-passive-3 hover:text-foreground',
             'focus:bg-info-backdrop focus:shadow-none md:text-tablet-menu-item lg:text-menu-item',
             className,
             className?.includes('items-') ? '' : 'items-center',
diff --git a/packages/web/src/javascripts/Components/Menu/MenuSection.tsx b/packages/web/src/javascripts/Components/Menu/MenuSection.tsx
index 6fa3ddbb1..297073cb1 100644
--- a/packages/web/src/javascripts/Components/Menu/MenuSection.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuSection.tsx
@@ -18,7 +18,7 @@ const MenuSection = ({
       )}
     >
       {title && <div className="px-3 py-1 text-sm font-semibold uppercase text-text lg:text-xs">{title}</div>}
-      <div className="divide-y divide-passive-3 overflow-hidden rounded-md bg-passive-4 md:divide-none md:rounded-none md:bg-transparent">
+      <div className="divide-y divide-passive-3 overflow-hidden rounded-md bg-default md:divide-none md:rounded-none md:bg-transparent">
         {children}
       </div>
     </div>
diff --git a/packages/web/src/javascripts/Components/Menu/MenuSwitchButtonItem.tsx b/packages/web/src/javascripts/Components/Menu/MenuSwitchButtonItem.tsx
index fcee2c39c..d5791b37c 100644
--- a/packages/web/src/javascripts/Components/Menu/MenuSwitchButtonItem.tsx
+++ b/packages/web/src/javascripts/Components/Menu/MenuSwitchButtonItem.tsx
@@ -37,7 +37,7 @@ const MenuSwitchButtonItem = forwardRef(
           ref={ref}
           className={classNames(
             'flex w-full cursor-pointer items-center border-0 bg-transparent px-3 py-2 md:py-1.5',
-            'text-left text-text focus:bg-info-backdrop focus:shadow-none enabled:hover:bg-contrast enabled:hover:text-foreground',
+            'text-left text-text focus:bg-info-backdrop focus:shadow-none enabled:hover:bg-passive-3 enabled:hover:text-foreground',
             'text-mobile-menu-item md:text-tablet-menu-item lg:text-menu-item',
             'disabled:cursor-not-allowed disabled:opacity-60',
             className,
diff --git a/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx b/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx
index e0a401296..ae412ed12 100644
--- a/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx
+++ b/packages/web/src/javascripts/Components/Popover/MobilePopoverContent.tsx
@@ -171,22 +171,30 @@ const MobilePopoverContent = ({
         <div
           ref={mergeRefs([setPopoverElement, addCloseMethod])}
           className={classNames(
-            'z-1 absolute bottom-0 flex max-h-[calc(100%_-_max(var(--safe-area-inset-top),2rem))] min-h-[40%] w-full flex-col rounded-t-xl bg-default pb-safe-bottom',
+            'z-1 absolute bottom-0 flex max-h-[calc(100%_-_max(var(--safe-area-inset-top),2rem))] min-h-[40%] w-full flex-col rounded-t-xl bg-passive-5 pb-safe-bottom',
             forceFullHeightOnMobile && 'h-full',
           )}
+          style={{
+            boxShadow: '0px -4px 8px rgba(0, 0, 0, 0.075)',
+          }}
           id={'popover/' + id}
           data-popover={id}
           data-mobile-popover
         >
-          <div className="mx-auto mt-2 min-h-[0.3rem] w-12 rounded-full bg-passive-2" />
-          <MobileModalHeader className="border-b border-border px-2 py-1.5 text-lg">
+          <div className="w-full rounded-t-xl bg-default">
+            <div className="mx-auto mt-2 min-h-[0.3rem] w-12 rounded-full bg-passive-2" />
+          </div>
+          <MobileModalHeader className="border-b border-border bg-default px-2 py-1.5 text-lg">
             <div />
             <div className="flex items-center justify-center font-semibold">{title}</div>
             <MobileModalAction type="primary" slot="right" action={requestClose}>
               Done
             </MobileModalAction>
           </MobileModalHeader>
-          <div className={classNames('h-full overflow-y-auto overscroll-none', className)} ref={scrollContainerRef}>
+          <div
+            className={classNames('h-full overflow-y-auto overscroll-none bg-passive-5', className)}
+            ref={scrollContainerRef}
+          >
             {children}
           </div>
         </div>