diff --git a/locales/en-US/app.ftl b/locales/en-US/app.ftl
index be577ee3a9..0e45985893 100644
--- a/locales/en-US/app.ftl
+++ b/locales/en-US/app.ftl
@@ -315,16 +315,17 @@ ErrorBoundary--report-error-to-developers-description =
 # This is used in a call to action button, displayed inside the error box.
 ErrorBoundary--report-error-on-github = Report the error on GitHub
 
-## Footer Links
-
-FooterLinks--legal = Legal
-FooterLinks--Privacy = Privacy
-FooterLinks--Cookies = Cookies
-FooterLinks--languageSwitcher--select =
+## Settings Menu
+## The settings popup opened from the cog icon in the top bar.
+
+SettingsMenu--button =
+    .title = Settings
+SettingsMenu--docs = Documentation
+SettingsMenu--legal = Legal
+SettingsMenu--privacy = Privacy
+SettingsMenu--cookies = Cookies
+SettingsMenu--language-switcher =
     .title = Change language
-FooterLinks--hide-button =
-    .title = Hide footer links
-    .aria-label = Hide footer links
 
 ## FullTimeline
 ## The timeline component of the full view in the analysis UI at the top of the
@@ -576,7 +577,6 @@ MenuButtons--index--share-error-uploading =
     .label = Error uploading
 
 MenuButtons--index--revert = Revert to Original Profile
-MenuButtons--index--docs = Docs
 
 MenuButtons--permalink--button =
     .label = Permalink
diff --git a/res/img/svg/cog-12.svg b/res/img/svg/cog-12.svg
new file mode 100644
index 0000000000..e0cb45dfe1
--- /dev/null
+++ b/res/img/svg/cog-12.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="12px" height="12px" version="1.1" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#0c0c0d" fill-opacity=".8" fill-rule="evenodd" d="M5.25 0.5h1.5l.25 1.5a4 4 0 0 1 1.06.44l1.24-.87 1.06 1.06-.87 1.24a4 4 0 0 1 .44 1.06l1.5.25v1.5l-1.5.25a4 4 0 0 1-.44 1.06l.87 1.24-1.06 1.06-1.24-.87a4 4 0 0 1-1.06.44l-.25 1.5h-1.5l-.25-1.5a4 4 0 0 1-1.06-.44l-1.24.87-1.06-1.06.87-1.24a4 4 0 0 1-.44-1.06l-1.5-.25v-1.5l1.5-.25a4 4 0 0 1 .44-1.06l-.87-1.24 1.06-1.06 1.24.87a4 4 0 0 1 1.06-.44Zm.75 3.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" clip-rule="evenodd"/>
+</svg>
diff --git a/res/img/svg/cog-light-12.svg b/res/img/svg/cog-light-12.svg
new file mode 100644
index 0000000000..8f02e82250
--- /dev/null
+++ b/res/img/svg/cog-light-12.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg width="12px" height="12px" version="1.1" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+  <path fill="#ededf0" fill-opacity=".8" fill-rule="evenodd" d="M5.25 0.5h1.5l.25 1.5a4 4 0 0 1 1.06.44l1.24-.87 1.06 1.06-.87 1.24a4 4 0 0 1 .44 1.06l1.5.25v1.5l-1.5.25a4 4 0 0 1-.44 1.06l.87 1.24-1.06 1.06-1.24-.87a4 4 0 0 1-1.06.44l-.25 1.5h-1.5l-.25-1.5a4 4 0 0 1-1.06-.44l-1.24.87-1.06-1.06.87-1.24a4 4 0 0 1-.44-1.06l-1.5-.25v-1.5l1.5-.25a4 4 0 0 1 .44-1.06l-.87-1.24 1.06-1.06 1.24.87a4 4 0 0 1 1.06-.44Zm.75 3.5a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z" clip-rule="evenodd"/>
+</svg>
diff --git a/src/components/app/AppHeader.tsx b/src/components/app/AppHeader.tsx
index 6dc0eb9649..e4d9a4f37a 100644
--- a/src/components/app/AppHeader.tsx
+++ b/src/components/app/AppHeader.tsx
@@ -9,7 +9,7 @@
 import * as React from 'react';
 
 import { InnerNavigationLink } from 'firefox-profiler/components/shared/InnerNavigationLink';
-import { ThemeToggle } from './ThemeToggle';
+import { SettingsMenu } from './SettingsMenu';
 
 import './AppHeader.css';
 import { Localized } from '@fluent/react';
@@ -44,7 +44,7 @@ export class AppHeader extends React.PureComponent<{}> {
             </span>
           </Localized>
           <div className="appHeaderRightControls">
-            <ThemeToggle />
+            <SettingsMenu buttonClassName="appHeaderSettingsButton" />
             <Localized id="AppHeader--github-icon" attrs={{ title: true }}>
               <a
                 className="appHeaderGithubIcon"
diff --git a/src/components/app/FooterLinks.css b/src/components/app/FooterLinks.css
deleted file mode 100644
index 3ab3be1958..0000000000
--- a/src/components/app/FooterLinks.css
+++ /dev/null
@@ -1,67 +0,0 @@
-.appFooterLinks {
-  --internal-background-color: var(--grey-20);
-  --internal-border-color: var(--grey-40);
-
-  /* Position */
-  position: fixed;
-  right: 0;
-  bottom: 0;
-
-  /* Box */
-  padding: 0 3px;
-
-  /* Other */
-  border-top: 1px solid var(--internal-border-color);
-  border-left: 1px solid var(--internal-border-color);
-  background-color: var(--internal-background-color);
-}
-
-.appFooterLinksLink,
-.appFooterLinksClose {
-  display: inline-block;
-  margin: 2px 4px;
-  text-decoration: none;
-}
-
-.appFooterLinksClose {
-  border: none;
-  margin: 0;
-  background: none;
-  color: var(--link-foreground-color);
-  cursor: pointer;
-  font: inherit;
-}
-
-.appFooterLinksLink:hover,
-.appFooterLinksClose:hover {
-  text-decoration: underline;
-}
-
-.appFooterLinksLanguageSwitcher {
-  margin: 2px 5px;
-  color: inherit;
-  font: inherit;
-}
-
-:root.dark-mode {
-  .appFooterLinks {
-    --internal-background-color: var(--raised-background-color);
-    --internal-border-color: var(--grey-60);
-  }
-
-  .appFooterLinksLanguageSwitcher {
-    --internal-background-color: var(--grey-60);
-    --internal-boreder-color: var(--grey-40);
-
-    border: 1px solid var(--internal-boreder-color);
-    border-radius: 4px;
-    background: var(--internal-background-color);
-  }
-}
-
-@media (max-width: 767px) {
-  .appFooterLinks {
-    width: 100%;
-    text-align: center;
-  }
-}
diff --git a/src/components/app/FooterLinks.tsx b/src/components/app/FooterLinks.tsx
deleted file mode 100644
index d1fb2745c8..0000000000
--- a/src/components/app/FooterLinks.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-import { Localized } from '@fluent/react';
-import { PureComponent } from 'react';
-import { LanguageSwitcher } from './LanguageSwitcher';
-
-import './FooterLinks.css';
-
-type State = { hide: boolean };
-
-export class FooterLinks extends PureComponent<{}, State> {
-  _onClick = () => {
-    this.setState({ hide: true });
-  };
-
-  override state = {
-    hide: false,
-  };
-
-  override render() {
-    if (this.state.hide) {
-      return null;
-    }
-    return (
-      <div className="appFooterLinks">
-        <Localized
-          id="FooterLinks--hide-button"
-          attrs={{ title: true, 'aria-label': true }}
-        >
-          <button
-            className="appFooterLinksClose"
-            type="button"
-            onClick={this._onClick}
-          >
-            ✕
-          </button>
-        </Localized>
-        <a
-          className="appFooterLinksLink"
-          href="https://www.mozilla.org/about/legal/terms/mozilla"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Localized id="FooterLinks--legal">Legal</Localized>
-        </a>
-        <a
-          className="appFooterLinksLink"
-          href="https://www.mozilla.org/privacy/websites"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Localized id="FooterLinks--Privacy">Privacy</Localized>
-        </a>
-        <a
-          className="appFooterLinksLink"
-          href="https://www.mozilla.org/privacy/websites/#cookies"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Localized id="FooterLinks--Cookies">Cookies</Localized>
-        </a>
-        <LanguageSwitcher />
-      </div>
-    );
-  }
-}
diff --git a/src/components/app/LanguageSwitcher.tsx b/src/components/app/LanguageSwitcher.tsx
index b2d0250121..913df025fe 100644
--- a/src/components/app/LanguageSwitcher.tsx
+++ b/src/components/app/LanguageSwitcher.tsx
@@ -30,12 +30,9 @@ export function LanguageSwitcher(): React.ReactNode {
   }
 
   return (
-    <Localized
-      id="FooterLinks--languageSwitcher--select"
-      attrs={{ title: true }}
-    >
+    <Localized id="SettingsMenu--language-switcher" attrs={{ title: true }}>
       <select
-        className="appFooterLinksLanguageSwitcher"
+        className="settingsMenuLanguageSwitcher"
         onChange={onLocaleChange}
         value={primaryLocale}
       >
diff --git a/src/components/app/MenuButtons/index.tsx b/src/components/app/MenuButtons/index.tsx
index fc2d965154..92c75be4e6 100644
--- a/src/components/app/MenuButtons/index.tsx
+++ b/src/components/app/MenuButtons/index.tsx
@@ -24,6 +24,7 @@ import {
 /* Note: the order of import is important, from most general to most specific,
  * so that the CSS rules are in the correct order. */
 import { ButtonWithPanel } from 'firefox-profiler/components/shared/ButtonWithPanel';
+import { SettingsMenu } from 'firefox-profiler/components/app/SettingsMenu';
 import { MetaInfoPanel } from './MetaInfo';
 import { PublishPanel } from './Publish';
 import { MenuButtonsPermalink } from './Permalink';
@@ -334,15 +335,10 @@ class MenuButtonsImpl extends React.PureComponent<Props, State> {
         {this._renderMetaInfoButton()}
         {this._renderPublishPanel()}
         {this._renderPermalink()}
-        <a
-          href="/docs/"
-          target="_blank"
-          className="menuButtonsButton menuButtonsButton-hasLeftBorder"
-          title="Open the documentation in a new window"
-        >
-          <Localized id="MenuButtons--index--docs">Docs</Localized>
-          <i className="open-in-new" />
-        </a>
+        <SettingsMenu
+          buttonClassName="menuButtonsButton menuButtonsButton-hasIcon menuButtonsButton-hasLeftBorder menuButtonsSettingsButton"
+          rightAligned
+        />
       </>
     );
   }
diff --git a/src/components/app/Root.tsx b/src/components/app/Root.tsx
index d32eb2d19d..c5cd50a133 100644
--- a/src/components/app/Root.tsx
+++ b/src/components/app/Root.tsx
@@ -6,7 +6,6 @@ import { PureComponent } from 'react';
 import { Localized } from '@fluent/react';
 import { Provider } from 'react-redux';
 import { UrlManager } from './UrlManager';
-import { FooterLinks } from './FooterLinks';
 import {
   NonLocalizedErrorBoundary,
   LocalizedErrorBoundary,
@@ -44,7 +43,6 @@ export class Root extends PureComponent<RootProps> {
                     <ServiceWorkerManager />
                     <ProfileLoader />
                     <AppViewRouter />
-                    <FooterLinks />
                     <WindowTitle />
                   </UrlManager>
                 </DragAndDrop>
diff --git a/src/components/app/SettingsMenu.css b/src/components/app/SettingsMenu.css
new file mode 100644
index 0000000000..20fe442484
--- /dev/null
+++ b/src/components/app/SettingsMenu.css
@@ -0,0 +1,132 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+.settingsMenu {
+  --internal-cog-icon: url(../../../res/img/svg/cog-12.svg);
+  --internal-open-in-new-icon: url(../../../res/img/svg/open-in-new-12.svg);
+}
+
+:root.dark-mode {
+  .settingsMenu {
+    --internal-cog-icon: url(../../../res/img/svg/cog-light-12.svg);
+    --internal-open-in-new-icon: url(../../../res/img/svg/open-in-new-light-12.svg);
+  }
+}
+
+.menuButtonsSettingsButton::before {
+  padding-right: 0;
+  background-image: var(--internal-cog-icon);
+}
+
+.appHeaderSettingsButton {
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  transition: opacity 250ms var(--animation-curve);
+}
+
+.appHeaderSettingsButton::before {
+  display: block;
+  width: 22px;
+  height: 22px;
+  background: var(--internal-cog-icon) no-repeat center / 22px;
+  content: '';
+}
+
+.appHeaderSettingsButton:hover {
+  opacity: 0.5;
+}
+
+.settingsMenuArrowPanel {
+  min-width: 200px;
+}
+
+.settingsMenuArrowPanel--rightAligned {
+  --offset-from-right: 14px;
+}
+
+.settingsMenuArrowPanel .arrowPanelContent {
+  padding: 0;
+
+  --internal-approx-distance-from-top: 20px;
+  --internal-approx-distance-to-bottom: 5px;
+}
+
+.settingsMenuPanel {
+  display: flex;
+  flex-direction: column;
+  font-size: 12px;
+  font-weight: normal;
+  line-height: 1.3;
+}
+
+.settingsMenuRow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px 14px;
+}
+
+.settingsMenuRow--theme .themeToggle {
+  width: 100%;
+  margin: 0;
+}
+
+.settingsMenuRow--theme .themeToggleButton {
+  width: auto;
+  flex: 1;
+}
+
+.settingsMenuLinks {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  padding: 4px 0;
+  border-top: 1px solid var(--base-border-color);
+  border-bottom: 1px solid var(--base-border-color);
+}
+
+.settingsMenuLink {
+  display: flex;
+  align-items: center;
+  padding: 4px 14px;
+}
+
+.settingsMenuLink .open-in-new {
+  margin-left: auto;
+}
+
+.settingsMenuLink,
+.settingsMenuLink:visited {
+  color: var(--base-foreground-color);
+  text-decoration: none;
+}
+
+.settingsMenuLink:hover {
+  background-color: rgb(0 0 0 / 0.06);
+  text-decoration: none;
+}
+
+:root.dark-mode .settingsMenuLink:hover {
+  background-color: rgb(255 255 255 / 0.08);
+}
+
+.settingsMenuLanguageSwitcher {
+  flex: 1;
+  color: inherit;
+  font: inherit;
+}
+
+:root.dark-mode .settingsMenuLanguageSwitcher {
+  border: 1px solid var(--grey-40);
+  border-radius: 4px;
+  background: var(--grey-60);
+}
diff --git a/src/components/app/SettingsMenu.tsx b/src/components/app/SettingsMenu.tsx
new file mode 100644
index 0000000000..f90e0aaa52
--- /dev/null
+++ b/src/components/app/SettingsMenu.tsx
@@ -0,0 +1,92 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react';
+import { Localized } from '@fluent/react';
+
+import { ButtonWithPanel } from 'firefox-profiler/components/shared/ButtonWithPanel';
+import { ThemeToggle } from './ThemeToggle';
+import { LanguageSwitcher } from './LanguageSwitcher';
+
+import './SettingsMenu.css';
+
+type Props = {
+  readonly buttonClassName?: string;
+  // When true, the panel is positioned tight against the viewport's right edge.
+  // Used in the profile-viewer top bar where the cog sits at the screen edge
+  // and the default centered placement would overflow.
+  readonly rightAligned?: boolean;
+};
+
+function SettingsMenuPanel() {
+  return (
+    <div className="settingsMenuPanel">
+      <div className="settingsMenuRow settingsMenuRow--theme">
+        <ThemeToggle />
+      </div>
+      <div className="settingsMenuLinks">
+        <a
+          className="settingsMenuLink"
+          href="/docs/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Localized id="SettingsMenu--docs">Documentation</Localized>
+          <i className="open-in-new" />
+        </a>
+        <a
+          className="settingsMenuLink"
+          href="https://www.mozilla.org/about/legal/terms/mozilla"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Localized id="SettingsMenu--legal">Legal</Localized>
+          <i className="open-in-new" />
+        </a>
+        <a
+          className="settingsMenuLink"
+          href="https://www.mozilla.org/privacy/websites"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Localized id="SettingsMenu--privacy">Privacy</Localized>
+          <i className="open-in-new" />
+        </a>
+        <a
+          className="settingsMenuLink"
+          href="https://www.mozilla.org/privacy/websites/#cookies"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <Localized id="SettingsMenu--cookies">Cookies</Localized>
+          <i className="open-in-new" />
+        </a>
+      </div>
+      <div className="settingsMenuRow settingsMenuRow--language">
+        <LanguageSwitcher />
+      </div>
+    </div>
+  );
+}
+
+export class SettingsMenu extends React.PureComponent<Props> {
+  override render() {
+    const { buttonClassName, rightAligned } = this.props;
+    const panelClassName = rightAligned
+      ? 'settingsMenuArrowPanel settingsMenuArrowPanel--rightAligned'
+      : 'settingsMenuArrowPanel';
+    return (
+      <Localized id="SettingsMenu--button" attrs={{ title: true }}>
+        <ButtonWithPanel
+          className="settingsMenu"
+          buttonClassName={buttonClassName}
+          panelClassName={panelClassName}
+          title="Settings"
+          label=""
+          panelContent={<SettingsMenuPanel />}
+        />
+      </Localized>
+    );
+  }
+}
diff --git a/src/components/shared/ButtonWithPanel/ArrowPanel.css b/src/components/shared/ButtonWithPanel/ArrowPanel.css
index cf1c9fcca1..c8688b1fc3 100644
--- a/src/components/shared/ButtonWithPanel/ArrowPanel.css
+++ b/src/components/shared/ButtonWithPanel/ArrowPanel.css
@@ -11,7 +11,7 @@
 
 .arrowPanel {
   --internal-offset-from-right: var(--offset-from-right, 60px);
-  --internal-offset-from-top: 15px;
+  --internal-offset-from-top: 10px;
   --internal-width: var(--width, initial);
   --internal-button-height: 30px;
   --internal-background-color: hsl(0deg 0% 97%);
diff --git a/src/test/components/FooterLinks.test.tsx b/src/test/components/SettingsMenu.test.tsx
similarity index 50%
rename from src/test/components/FooterLinks.test.tsx
rename to src/test/components/SettingsMenu.test.tsx
index a21b99afcf..3dcad8974f 100644
--- a/src/test/components/FooterLinks.test.tsx
+++ b/src/test/components/SettingsMenu.test.tsx
@@ -4,30 +4,29 @@
 import fs from 'fs';
 
 import { Provider } from 'react-redux';
-import { FooterLinks } from 'firefox-profiler/components/app/FooterLinks';
+import { SettingsMenu } from 'firefox-profiler/components/app/SettingsMenu';
 import { AppLocalizationProvider } from 'firefox-profiler/components/app/AppLocalizationProvider';
 
 import { blankStore } from 'firefox-profiler/test/fixtures/stores';
+import { fireFullClick } from 'firefox-profiler/test/fixtures/utils';
 import { render, screen, fireEvent } from '@testing-library/react';
 
 beforeEach(() => {
-  // Implement the fetch operation for local language files, so that we can test
-  // switching languages.
+  // Serve locale files from the filesystem so the AppLocalizationProvider can
+  // load translations during tests that switch languages.
   const fetchUrlRe = /\/locales\/(?<language>[^/]+)\/app.ftl$/;
-  window.fetchMock
-    .catch(404) // catchall
-    .get(fetchUrlRe, ({ url }: { url: string }) => {
-      const matchUrlResult = fetchUrlRe.exec(url);
-      if (matchUrlResult) {
-        const { language } = matchUrlResult.groups!;
-        const path = `locales/${language}/app.ftl`;
-        if (fs.existsSync(path)) {
-          return fs.readFileSync(path);
-        }
+  window.fetchMock.catch(404).get(fetchUrlRe, ({ url }: { url: string }) => {
+    const matchUrlResult = fetchUrlRe.exec(url);
+    if (matchUrlResult) {
+      const { language } = matchUrlResult.groups!;
+      const path = `locales/${language}/app.ftl`;
+      if (fs.existsSync(path)) {
+        return fs.readFileSync(path);
       }
+    }
 
-      return 404;
-    });
+    return 404;
+  });
 });
 
 afterEach(function () {
@@ -36,35 +35,51 @@ afterEach(function () {
 
 function setup() {
   const store = blankStore();
-  render(
+  return render(
     <Provider store={store}>
       <AppLocalizationProvider>
-        <FooterLinks />
+        <SettingsMenu />
       </AppLocalizationProvider>
     </Provider>
   );
 }
 
-it('correctly renders the FooterLinks component', async () => {
+async function openMenu() {
+  const button = await screen.findByRole('button', { name: 'Settings' });
+  fireFullClick(button);
+  await screen.findByText('Legal');
+}
+
+it('renders the cog button in its closed state', async () => {
   setup();
-  await screen.findByText(/Legal/);
-  expect(document.body).toMatchSnapshot();
+  expect(
+    await screen.findByRole('button', { name: 'Settings' })
+  ).toBeInTheDocument();
+  expect(screen.queryByText('Legal')).not.toBeInTheDocument();
 });
 
-it('can hide the footer links', async () => {
+it('opens the panel when the cog button is clicked', async () => {
   setup();
-  expect(await screen.findByText(/Privacy/)).toBeInTheDocument();
-  const closeButton = screen.getByRole('button', {
-    name: 'Hide footer links',
-  });
-  fireEvent.click(closeButton);
-  expect(screen.queryByText(/Privacy/)).not.toBeInTheDocument();
+  await openMenu();
+  expect(screen.getByText('Documentation')).toBeInTheDocument();
+  expect(screen.getByText('Legal')).toBeInTheDocument();
+  expect(screen.getByText('Privacy')).toBeInTheDocument();
+  expect(screen.getByText('Cookies')).toBeInTheDocument();
+  expect(
+    screen.getByRole('combobox', { name: 'Change language' })
+  ).toBeInTheDocument();
+});
+
+it('renders the open panel correctly', async () => {
+  setup();
+  await openMenu();
+  expect(document.body).toMatchSnapshot();
 });
 
 it('makes it possible to switch the language and persists it', async () => {
   setup();
+  await openMenu();
 
-  // Select the german language
   const select = await screen.findByRole('combobox', {
     name: 'Change language',
   });
@@ -73,13 +88,14 @@ it('makes it possible to switch the language and persists it', async () => {
   }) as any;
   option.selected = true;
   fireEvent.change(select);
-  expect(await screen.findByText('Rechtliches')).toBeInTheDocument();
   expect(localStorage.getItem('requestedLocales')).toBe(JSON.stringify(['de']));
 });
 
 it('uses the previously requested locale at startup', async () => {
   localStorage.setItem('requestedLocales', JSON.stringify(['fr']));
   setup();
+  await openMenu();
+
   const option: HTMLOptionElement = (await screen.findByRole('option', {
     name: 'Français',
   })) as any;
diff --git a/src/test/components/__snapshots__/CompareHome.test.tsx.snap b/src/test/components/__snapshots__/CompareHome.test.tsx.snap
index fb4484b036..100a0aac05 100644
--- a/src/test/components/__snapshots__/CompareHome.test.tsx.snap
+++ b/src/test/components/__snapshots__/CompareHome.test.tsx.snap
@@ -28,38 +28,14 @@ exports[`app/CompareHome matches the snapshot 1`] = `
         class="appHeaderRightControls"
       >
         <div
-          class="themeToggle"
+          class="buttonWithPanel settingsMenu"
         >
           <button
-            aria-label="light"
-            class="themeToggleButton "
-            title="Use light theme"
+            aria-expanded="false"
+            class="buttonWithPanelButton appHeaderSettingsButton"
+            title="Settings"
             type="button"
-          >
-            <span
-              class="themeToggleIcon themeToggleIcon--light"
-            />
-          </button>
-          <button
-            aria-label="system"
-            class="themeToggleButton themeToggleButton-active"
-            title="Follow system theme preference"
-            type="button"
-          >
-            <span
-              class="themeToggleIcon themeToggleIcon--system"
-            />
-          </button>
-          <button
-            aria-label="dark"
-            class="themeToggleButton "
-            title="Use dark theme"
-            type="button"
-          >
-            <span
-              class="themeToggleIcon themeToggleIcon--dark"
-            />
-          </button>
+          />
         </div>
         <a
           class="appHeaderGithubIcon"
diff --git a/src/test/components/__snapshots__/FooterLinks.test.tsx.snap b/src/test/components/__snapshots__/FooterLinks.test.tsx.snap
deleted file mode 100644
index 3e349cdd5f..0000000000
--- a/src/test/components/__snapshots__/FooterLinks.test.tsx.snap
+++ /dev/null
@@ -1,149 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`correctly renders the FooterLinks component 1`] = `
-<body>
-  <div>
-    <div
-      class="appFooterLinks"
-    >
-      <button
-        aria-label="Hide footer links"
-        class="appFooterLinksClose"
-        title="Hide footer links"
-        type="button"
-      >
-        ✕
-      </button>
-      <a
-        class="appFooterLinksLink"
-        href="https://www.mozilla.org/about/legal/terms/mozilla"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        Legal
-      </a>
-      <a
-        class="appFooterLinksLink"
-        href="https://www.mozilla.org/privacy/websites"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        Privacy
-      </a>
-      <a
-        class="appFooterLinksLink"
-        href="https://www.mozilla.org/privacy/websites/#cookies"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        Cookies
-      </a>
-      <select
-        class="appFooterLinksLanguageSwitcher"
-        title="Change language"
-      >
-        <option
-          value="be"
-        >
-          Беларуская
-        </option>
-        <option
-          value="de"
-        >
-          Deutsch
-        </option>
-        <option
-          value="el"
-        >
-          Ελληνικά
-        </option>
-        <option
-          value="en-GB"
-        >
-          English (GB)
-        </option>
-        <option
-          value="en-CA"
-        >
-          English (CA)
-        </option>
-        <option
-          value="en-US"
-        >
-          English (US)
-        </option>
-        <option
-          value="es-CL"
-        >
-          Español
-        </option>
-        <option
-          value="fr"
-        >
-          Français
-        </option>
-        <option
-          value="fy-NL"
-        >
-          Frysk
-        </option>
-        <option
-          value="fur"
-        >
-          Furlan
-        </option>
-        <option
-          value="ia"
-        >
-          Interlingua
-        </option>
-        <option
-          value="it"
-        >
-          Italiano
-        </option>
-        <option
-          value="nl"
-        >
-          Nederlands
-        </option>
-        <option
-          value="pt-BR"
-        >
-          Português (BR)
-        </option>
-        <option
-          value="ru"
-        >
-          Русский
-        </option>
-        <option
-          value="sv-SE"
-        >
-          Svenska
-        </option>
-        <option
-          value="tr"
-        >
-          Türkçe
-        </option>
-        <option
-          value="uk"
-        >
-          Українська
-        </option>
-        <option
-          value="zh-CN"
-        >
-          简体中文
-        </option>
-        <option
-          value="zh-TW"
-        >
-          正體中文
-        </option>
-      </select>
-    </div>
-  </div>
-</body>
-`;
diff --git a/src/test/components/__snapshots__/Home.test.tsx.snap b/src/test/components/__snapshots__/Home.test.tsx.snap
index 11f8ccb4c8..ab7c516333 100644
--- a/src/test/components/__snapshots__/Home.test.tsx.snap
+++ b/src/test/components/__snapshots__/Home.test.tsx.snap
@@ -31,38 +31,14 @@ exports[`app/Home renders a button to enable the popup in Firefox 1`] = `
           class="appHeaderRightControls"
         >
           <div
-            class="themeToggle"
+            class="buttonWithPanel settingsMenu"
           >
             <button
-              aria-label="light"
-              class="themeToggleButton "
-              title="Use light theme"
-              type="button"
-            >
-              <span
-                class="themeToggleIcon themeToggleIcon--light"
-              />
-            </button>
-            <button
-              aria-label="system"
-              class="themeToggleButton themeToggleButton-active"
-              title="Follow system theme preference"
-              type="button"
-            >
-              <span
-                class="themeToggleIcon themeToggleIcon--system"
-              />
-            </button>
-            <button
-              aria-label="dark"
-              class="themeToggleButton "
-              title="Use dark theme"
+              aria-expanded="false"
+              class="buttonWithPanelButton appHeaderSettingsButton"
+              title="Settings"
               type="button"
-            >
-              <span
-                class="themeToggleIcon themeToggleIcon--dark"
-              />
-            </button>
+            />
           </div>
           <a
             class="appHeaderGithubIcon"
@@ -317,38 +293,14 @@ exports[`app/Home renders the Chrome extension instructions for Chromium based b
           class="appHeaderRightControls"
         >
           <div
-            class="themeToggle"
+            class="buttonWithPanel settingsMenu"
           >
             <button
-              aria-label="light"
-              class="themeToggleButton "
-              title="Use light theme"
-              type="button"
-            >
-              <span
-                class="themeToggleIcon themeToggleIcon--light"
-              />
-            </button>
-            <button
-              aria-label="system"
-              class="themeToggleButton themeToggleButton-active"
-              title="Follow system theme preference"
-              type="button"
-            >
-              <span
-                class="themeToggleIcon themeToggleIcon--system"
-              />
-            </button>
-            <button
-              aria-label="dark"
-              class="themeToggleButton "
-              title="Use dark theme"
+              aria-expanded="false"
+              class="buttonWithPanelButton appHeaderSettingsButton"
+              title="Settings"
               type="button"
-            >
-              <span
-                class="themeToggleIcon themeToggleIcon--dark"
-              />
-            </button>
+            />
           </div>
           <a
             class="appHeaderGithubIcon"
@@ -622,38 +574,14 @@ exports[`app/Home renders the information screen for fenix 1`] = `
           class="appHeaderRightControls"
         >
           <div
-            class="themeToggle"
+            class="buttonWithPanel settingsMenu"
           >
             <button
-              aria-label="light"
-              class="themeToggleButton "
-              title="Use light theme"
-              type="button"
-            >
-              <span
-                class="themeToggleIcon themeToggleIcon--light"
-              />
-            </button>
-            <button
-              aria-label="system"
-              class="themeToggleButton themeToggleButton-active"
-              title="Follow system theme preference"
-              type="button"
-            >
-              <span
-                class="themeToggleIcon themeToggleIcon--system"
-              />
-            </button>
-            <button
-              aria-label="dark"
-              class="themeToggleButton "
-              title="Use dark theme"
+              aria-expanded="false"
+              class="buttonWithPanelButton appHeaderSettingsButton"
+              title="Settings"
               type="button"
-            >
-              <span
-                class="themeToggleIcon themeToggleIcon--dark"
-              />
-            </button>
+            />
           </div>
           <a
             class="appHeaderGithubIcon"
@@ -885,38 +813,14 @@ exports[`app/Home renders the information screen for other browsers 1`] = `
           class="appHeaderRightControls"
         >
           <div
-            class="themeToggle"
+            class="buttonWithPanel settingsMenu"
           >
             <button
-              aria-label="light"
-              class="themeToggleButton "
-              title="Use light theme"
-              type="button"
-            >
-              <span
-                class="themeToggleIcon themeToggleIcon--light"
-              />
-            </button>
-            <button
-              aria-label="system"
-              class="themeToggleButton themeToggleButton-active"
-              title="Follow system theme preference"
-              type="button"
-            >
-              <span
-                class="themeToggleIcon themeToggleIcon--system"
-              />
-            </button>
-            <button
-              aria-label="dark"
-              class="themeToggleButton "
-              title="Use dark theme"
+              aria-expanded="false"
+              class="buttonWithPanelButton appHeaderSettingsButton"
+              title="Settings"
               type="button"
-            >
-              <span
-                class="themeToggleIcon themeToggleIcon--dark"
-              />
-            </button>
+            />
           </div>
           <a
             class="appHeaderGithubIcon"
diff --git a/src/test/components/__snapshots__/MenuButtons.test.tsx.snap b/src/test/components/__snapshots__/MenuButtons.test.tsx.snap
index 9e5db3c636..2135be3fd1 100644
--- a/src/test/components/__snapshots__/MenuButtons.test.tsx.snap
+++ b/src/test/components/__snapshots__/MenuButtons.test.tsx.snap
@@ -1850,17 +1850,16 @@ exports[`app/MenuButtons <Publish> can publish and revert 1`] = `
         </div>
       </div>
     </div>
-    <a
-      class="menuButtonsButton menuButtonsButton-hasLeftBorder"
-      href="/docs/"
-      target="_blank"
-      title="Open the documentation in a new window"
-    >
-      Docs
-      <i
-        class="open-in-new"
+    <div
+      class="buttonWithPanel settingsMenu"
+    >
+      <button
+        aria-expanded="false"
+        class="buttonWithPanelButton menuButtonsButton menuButtonsButton-hasIcon menuButtonsButton-hasLeftBorder menuButtonsSettingsButton"
+        title="Settings"
+        type="button"
       />
-    </a>
+    </div>
   </div>
 </body>
 `;
@@ -2029,17 +2028,16 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the closed state 1`]
       Upload Local Profile
     </button>
   </div>
-  <a
-    class="menuButtonsButton menuButtonsButton-hasLeftBorder"
-    href="/docs/"
-    target="_blank"
-    title="Open the documentation in a new window"
+  <div
+    class="buttonWithPanel settingsMenu"
   >
-    Docs
-    <i
-      class="open-in-new"
+    <button
+      aria-expanded="false"
+      class="buttonWithPanelButton menuButtonsButton menuButtonsButton-hasIcon menuButtonsButton-hasLeftBorder menuButtonsSettingsButton"
+      title="Settings"
+      type="button"
     />
-  </a>
+  </div>
 </div>
 `;
 
@@ -2078,17 +2076,16 @@ exports[`app/MenuButtons <Publish> matches the snapshot for the menu buttons and
       Permalink
     </button>
   </div>
-  <a
-    class="menuButtonsButton menuButtonsButton-hasLeftBorder"
-    href="/docs/"
-    target="_blank"
-    title="Open the documentation in a new window"
+  <div
+    class="buttonWithPanel settingsMenu"
   >
-    Docs
-    <i
-      class="open-in-new"
+    <button
+      aria-expanded="false"
+      class="buttonWithPanelButton menuButtonsButton menuButtonsButton-hasIcon menuButtonsButton-hasLeftBorder menuButtonsSettingsButton"
+      title="Settings"
+      type="button"
     />
-  </a>
+  </div>
 </div>
 `;
 
diff --git a/src/test/components/__snapshots__/SettingsMenu.test.tsx.snap b/src/test/components/__snapshots__/SettingsMenu.test.tsx.snap
new file mode 100644
index 0000000000..12787d6ae6
--- /dev/null
+++ b/src/test/components/__snapshots__/SettingsMenu.test.tsx.snap
@@ -0,0 +1,231 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`renders the open panel correctly 1`] = `
+<body>
+  <div>
+    <div
+      class="buttonWithPanel settingsMenu open"
+    >
+      <button
+        aria-expanded="true"
+        class="buttonWithPanelButton"
+        type="button"
+      />
+      <div
+        class="arrowPanelAnchor"
+      >
+        <div
+          class="arrowPanel open settingsMenuArrowPanel"
+        >
+          <div
+            class="arrowPanelArrow"
+          />
+          <div
+            class="arrowPanelContent"
+          >
+            <div
+              class="settingsMenuPanel"
+            >
+              <div
+                class="settingsMenuRow settingsMenuRow--theme"
+              >
+                <div
+                  class="themeToggle"
+                >
+                  <button
+                    aria-label="light"
+                    class="themeToggleButton "
+                    title="Use light theme"
+                    type="button"
+                  >
+                    <span
+                      class="themeToggleIcon themeToggleIcon--light"
+                    />
+                  </button>
+                  <button
+                    aria-label="system"
+                    class="themeToggleButton themeToggleButton-active"
+                    title="Follow system theme preference"
+                    type="button"
+                  >
+                    <span
+                      class="themeToggleIcon themeToggleIcon--system"
+                    />
+                  </button>
+                  <button
+                    aria-label="dark"
+                    class="themeToggleButton "
+                    title="Use dark theme"
+                    type="button"
+                  >
+                    <span
+                      class="themeToggleIcon themeToggleIcon--dark"
+                    />
+                  </button>
+                </div>
+              </div>
+              <div
+                class="settingsMenuLinks"
+              >
+                <a
+                  class="settingsMenuLink"
+                  href="/docs/"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  Documentation
+                  <i
+                    class="open-in-new"
+                  />
+                </a>
+                <a
+                  class="settingsMenuLink"
+                  href="https://www.mozilla.org/about/legal/terms/mozilla"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  Legal
+                  <i
+                    class="open-in-new"
+                  />
+                </a>
+                <a
+                  class="settingsMenuLink"
+                  href="https://www.mozilla.org/privacy/websites"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  Privacy
+                  <i
+                    class="open-in-new"
+                  />
+                </a>
+                <a
+                  class="settingsMenuLink"
+                  href="https://www.mozilla.org/privacy/websites/#cookies"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                >
+                  Cookies
+                  <i
+                    class="open-in-new"
+                  />
+                </a>
+              </div>
+              <div
+                class="settingsMenuRow settingsMenuRow--language"
+              >
+                <select
+                  class="settingsMenuLanguageSwitcher"
+                  title="Change language"
+                >
+                  <option
+                    value="be"
+                  >
+                    Беларуская
+                  </option>
+                  <option
+                    value="de"
+                  >
+                    Deutsch
+                  </option>
+                  <option
+                    value="el"
+                  >
+                    Ελληνικά
+                  </option>
+                  <option
+                    value="en-GB"
+                  >
+                    English (GB)
+                  </option>
+                  <option
+                    value="en-CA"
+                  >
+                    English (CA)
+                  </option>
+                  <option
+                    value="en-US"
+                  >
+                    English (US)
+                  </option>
+                  <option
+                    value="es-CL"
+                  >
+                    Español
+                  </option>
+                  <option
+                    value="fr"
+                  >
+                    Français
+                  </option>
+                  <option
+                    value="fy-NL"
+                  >
+                    Frysk
+                  </option>
+                  <option
+                    value="fur"
+                  >
+                    Furlan
+                  </option>
+                  <option
+                    value="ia"
+                  >
+                    Interlingua
+                  </option>
+                  <option
+                    value="it"
+                  >
+                    Italiano
+                  </option>
+                  <option
+                    value="nl"
+                  >
+                    Nederlands
+                  </option>
+                  <option
+                    value="pt-BR"
+                  >
+                    Português (BR)
+                  </option>
+                  <option
+                    value="ru"
+                  >
+                    Русский
+                  </option>
+                  <option
+                    value="sv-SE"
+                  >
+                    Svenska
+                  </option>
+                  <option
+                    value="tr"
+                  >
+                    Türkçe
+                  </option>
+                  <option
+                    value="uk"
+                  >
+                    Українська
+                  </option>
+                  <option
+                    value="zh-CN"
+                  >
+                    简体中文
+                  </option>
+                  <option
+                    value="zh-TW"
+                  >
+                    正體中文
+                  </option>
+                </select>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+`;
diff --git a/src/test/components/__snapshots__/UploadedRecordingsHome.test.tsx.snap b/src/test/components/__snapshots__/UploadedRecordingsHome.test.tsx.snap
index 9c2fe9f09d..d83c5fe5c9 100644
--- a/src/test/components/__snapshots__/UploadedRecordingsHome.test.tsx.snap
+++ b/src/test/components/__snapshots__/UploadedRecordingsHome.test.tsx.snap
@@ -28,38 +28,14 @@ exports[`UploadedRecordingsHome matches a snapshot when rendering published prof
         class="appHeaderRightControls"
       >
         <div
-          class="themeToggle"
+          class="buttonWithPanel settingsMenu"
         >
           <button
-            aria-label="light"
-            class="themeToggleButton "
-            title="Use light theme"
-            type="button"
-          >
-            <span
-              class="themeToggleIcon themeToggleIcon--light"
-            />
-          </button>
-          <button
-            aria-label="system"
-            class="themeToggleButton themeToggleButton-active"
-            title="Follow system theme preference"
-            type="button"
-          >
-            <span
-              class="themeToggleIcon themeToggleIcon--system"
-            />
-          </button>
-          <button
-            aria-label="dark"
-            class="themeToggleButton "
-            title="Use dark theme"
+            aria-expanded="false"
+            class="buttonWithPanelButton appHeaderSettingsButton"
+            title="Settings"
             type="button"
-          >
-            <span
-              class="themeToggleIcon themeToggleIcon--dark"
-            />
-          </button>
+          />
         </div>
         <a
           class="appHeaderGithubIcon"
@@ -412,38 +388,14 @@ exports[`UploadedRecordingsHome matches a snapshot when there is no published pr
         class="appHeaderRightControls"
       >
         <div
-          class="themeToggle"
+          class="buttonWithPanel settingsMenu"
         >
           <button
-            aria-label="light"
-            class="themeToggleButton "
-            title="Use light theme"
-            type="button"
-          >
-            <span
-              class="themeToggleIcon themeToggleIcon--light"
-            />
-          </button>
-          <button
-            aria-label="system"
-            class="themeToggleButton themeToggleButton-active"
-            title="Follow system theme preference"
-            type="button"
-          >
-            <span
-              class="themeToggleIcon themeToggleIcon--system"
-            />
-          </button>
-          <button
-            aria-label="dark"
-            class="themeToggleButton "
-            title="Use dark theme"
+            aria-expanded="false"
+            class="buttonWithPanelButton appHeaderSettingsButton"
+            title="Settings"
             type="button"
-          >
-            <span
-              class="themeToggleIcon themeToggleIcon--dark"
-            />
-          </button>
+          />
         </div>
         <a
           class="appHeaderGithubIcon"