diff --git a/src/components/MediaMuteAndSwitchButton.module.css b/src/components/MediaMuteAndSwitchButton.module.css
index 6888cbaf..e5bba238 100644
--- a/src/components/MediaMuteAndSwitchButton.module.css
+++ b/src/components/MediaMuteAndSwitchButton.module.css
@@ -14,7 +14,10 @@ Please see LICENSE in the repository root for full details.
   transition: background-color 0.2s ease-in-out;
 }
 .containerOpen {
-  background-color: var(--cpd-color-bg-subtle-primary);
+  background-color: var(--cpd-color-bg-action-primary-pressed);
+}
+.chevronIconOpen > svg {
+  color: var(--cpd-color-icon-on-solid-primary);
 }
 .menuButton {
   width: 40px;
diff --git a/src/components/MediaMuteAndSwitchButton.tsx b/src/components/MediaMuteAndSwitchButton.tsx
index 6325a8e8..05a1b257 100644
--- a/src/components/MediaMuteAndSwitchButton.tsx
+++ b/src/components/MediaMuteAndSwitchButton.tsx
@@ -16,6 +16,7 @@ import { t } from "i18next";
 import {
   CheckIcon,
   ChevronUpIcon,
+  ChevronDownIcon,
   MicOffSolidIcon,
   MicOnIcon,
   MicOnSolidIcon,
@@ -171,8 +172,11 @@ export const MediaMuteAndSwitchButton: FC<MediaMuteAndSwitchButtonProps> = ({
         trigger={
           <Button
             iconOnly
-            className={styles.menuButton}
-            Icon={ChevronUpIcon}
+            className={classNames({
+              [styles.menuButton]: true,
+              [styles.chevronIconOpen]: menuOpen,
+            })}
+            Icon={menuOpen ? ChevronUpIcon : ChevronDownIcon}
             kind={"tertiary"}
             size="lg"
             aria-label={optionsButtonLabel}