diff --git a/web/apps/photos/src/styles/photoswipe.css b/web/apps/photos/src/styles/photoswipe.css
index 6f55264b31..d2276b61c9 100644
--- a/web/apps/photos/src/styles/photoswipe.css
+++ b/web/apps/photos/src/styles/photoswipe.css
@@ -230,6 +230,7 @@
       which case this should be possible straightforwardly.
       */
     --media-menu-hidden-max-height: 1px;
+    --media-menu-max-height: 1000px;
 }
 
 /*
@@ -287,12 +288,10 @@ media-fullscreen-button[mediafullscreenunavailable] {
 
 media-settings-menu {
     /*
-      Restore the background for the settings menu.
-
-      The default is var(--_menu-bg), which is rgb(20 20 30 / .8).
+      Restore the background for the settings menu (we made it transparent). The
+      default is var(--_menu-bg), which is rgb(20 20 30 / .8).
      */
     --media-control-background: var(--mui-palette-fixed-dark-background-paper);
-    --media-menu-border: 10px solid #1b1b1b;
     /* Regular, but since the rest of media controls use 400, it
        appears heavier. */
     --media-font-weight: 500;
@@ -302,10 +301,4 @@ media-settings-menu {
       See: [Note: Showing menus outside of media-controller]
      */
     z-index: 1;
-    /*
-      Undo the effects of --media-menu-hidden-max-height.
-
-      See: [Note: Showing menus outside of media-controller]
-     */
-    --media-menu-max-height: 1000px;
 }
diff --git a/web/packages/gallery/components/viewer/icons.tsx b/web/packages/gallery/components/viewer/icons.tsx
index aea783a5c9..c0f9bc81e1 100644
--- a/web/packages/gallery/components/viewer/icons.tsx
+++ b/web/packages/gallery/components/viewer/icons.tsx
@@ -69,3 +69,10 @@ export const createPSRegisterElementIconHTML = (name: IconKeys) => ({
 // Favorite is a special case since it consists of two layers.
 const favoriteInner = () =>
     `${paths.favorite} id="pswp__icn-favorite" />${paths["favorite-fill"]} id="pswp__icn-favorite-fill" />`;
+
+/**
+ * The path of "@mui/icons-material/Settings" as as string.
+ *
+ * Assumes `viewBox="0 0 24 24"`.
+ */
+export const settingsSVGPath = `<path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6"></path>`;
diff --git a/web/packages/gallery/components/viewer/photoswipe.ts b/web/packages/gallery/components/viewer/photoswipe.ts
index 1f86be8476..37e1fcbff4 100644
--- a/web/packages/gallery/components/viewer/photoswipe.ts
+++ b/web/packages/gallery/components/viewer/photoswipe.ts
@@ -18,7 +18,7 @@ import {
     type FileViewerAnnotatedFile,
     type FileViewerProps,
 } from "./FileViewer";
-import { createPSRegisterElementIconHTML } from "./icons";
+import { createPSRegisterElementIconHTML, settingsSVGPath } from "./icons";
 
 export interface FileViewerPhotoSwipeDelegate {
     /**
@@ -1164,6 +1164,10 @@ const hlsVideoHTML = (url: string, mediaControllerID: string) => `
  * To make these functional, the `media-control-bar` requires the
  * `mediacontroller="${mediaControllerID}"` attribute.
  *
+ * TODO(HLS): Tooltips get clipped
+ * TODO(HLS): Translation
+ * TODO(HLS): Spurious console warning
+ *
  * Notes:
  *
  * - Examples: https://media-chrome.mux.dev/examples/vanilla/
@@ -1194,9 +1198,9 @@ const hlsVideoControlsHTML = () => `
     <media-mute-button></media-mute-button>
     <media-time-display showduration notoggle></media-time-display>
     <media-text-display></media-text-display>
-    <media-chrome-menu-button id="et-settings-menu-btn" invoketarget="et-settings-menu" notooltip>
-      <h1>B2</h1>
-    </media-chrome-menu-button>
+    <media-settings-menu-button id="et-settings-menu-btn" invoketarget="et-settings-menu" notooltip>
+      <svg slot="icon" viewBox="0 0 24 24">${settingsSVGPath}</svg>
+    </media-settings-menu-button>
     <media-pip-button></media-pip-button>
     <media-airplay-button></media-airplay-button>
     <media-fullscreen-button></media-fullscreen-button>