diff --git a/web/settings/account-settings.react.js b/web/settings/account-settings.react.js
--- a/web/settings/account-settings.react.js
+++ b/web/settings/account-settings.react.js
@@ -14,6 +14,7 @@
 } from 'lib/utils/action-utils.js';
 
 import css from './account-settings.css';
+import AppearanceChangeModal from './appearance-change-modal.react.js';
 import PasswordChangeModal from './password-change-modal.js';
 import BlockListModal from './relationship/block-list-modal.react.js';
 import FriendListModal from './relationship/friend-list-modal.react.js';
@@ -60,9 +61,10 @@
 
   const staffCanSee = useStaffCanSee();
 
-  const showAppearanceModal = React.useCallback(() => {
-    // TODO
-  }, []);
+  const showAppearanceModal = React.useCallback(
+    () => pushModal(<AppearanceChangeModal />),
+    [pushModal],
+  );
 
   if (!currentUserInfo || currentUserInfo.anonymous) {
     return null;
diff --git a/web/settings/appearance-change-modal.css b/web/settings/appearance-change-modal.css
new file mode 100644
--- /dev/null
+++ b/web/settings/appearance-change-modal.css
@@ -0,0 +1,27 @@
+.container {
+  padding: 16px 32px 24px;
+}
+
+.header {
+  font-size: var(--l-font-18);
+  color: var(--fg);
+  font-weight: var(--normal);
+}
+
+.buttonContainer {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 24px;
+}
+
+.button {
+  color: var(--fg);
+}
+
+.button:hover {
+  cursor: pointer;
+}
+
+.selectedButton {
+  border-bottom: 1px solid var(--fg);
+}
diff --git a/web/settings/appearance-change-modal.react.js b/web/settings/appearance-change-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/settings/appearance-change-modal.react.js
@@ -0,0 +1,59 @@
+// @flow
+
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import css from './appearance-change-modal.css';
+import Modal from '../modals/modal.react.js';
+
+function AppearanceChangeModal(): React.Node {
+  const { popModal } = useModalContext();
+
+  const [selectedMode, setSelectedMode] = React.useState('dark');
+
+  const onClickLightModeButton = React.useCallback(
+    () => setSelectedMode('light'),
+    [],
+  );
+
+  const onClickDarkModeButton = React.useCallback(
+    () => setSelectedMode('dark'),
+    [],
+  );
+
+  const lightModeButtonClassName = classNames({
+    [css.button]: true,
+    [css.selectedButton]: selectedMode === 'light',
+  });
+
+  const darkModeButtonClassName = classNames({
+    [css.button]: true,
+    [css.selectedButton]: selectedMode === 'dark',
+  });
+
+  return (
+    <Modal name="Appearance" onClose={popModal}>
+      <div className={css.container}>
+        <h1 className={css.header}>App theme</h1>
+        <div className={css.buttonContainer}>
+          <div
+            className={lightModeButtonClassName}
+            onClick={onClickLightModeButton}
+          >
+            Light
+          </div>
+          <div
+            className={darkModeButtonClassName}
+            onClick={onClickDarkModeButton}
+          >
+            Dark
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export default AppearanceChangeModal;