diff --git a/web/settings/account-settings.css b/web/settings/account-settings.css
--- a/web/settings/account-settings.css
+++ b/web/settings/account-settings.css
@@ -1,3 +1,12 @@
+.outer {
+  flex-direction: row;
+  display: flex;
+}
+
+.switcher {
+  border-right: 1px solid var(--border-color);
+}
+
 .container {
   padding: 40px;
   width: 456px;
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
@@ -12,6 +12,7 @@
 
 import Button from '../components/button.react';
 import { useSelector } from '../redux/redux-utils';
+import SettingsSwitcher from '../sidebar/settings-switcher.react';
 import SWMansionIcon from '../SWMansionIcon.react';
 import css from './account-settings.css';
 import PasswordChangeModal from './password-change-modal';
@@ -54,44 +55,49 @@
   const { username } = currentUserInfo;
 
   return (
-    <div className={css.container}>
-      <h4 className={css.header}>My Account</h4>
-      <div className={css.content}>
-        <ul>
-          <li>
-            <p className={css.logoutContainer}>
-              <span className={css.logoutLabel}>{'Logged in as '}</span>
-              <span className={css.username}>{username}</span>
-            </p>
-            <Button variant="text" onClick={logOutUser}>
-              <p className={css.buttonText}>Log out</p>
-            </Button>
-          </li>
-          <li>
-            <span>Password</span>
-            <span className={css.passwordContainer}>
-              <span className={css.password}>******</span>
-              <a
-                className={css.editPasswordLink}
-                onClick={showPasswordChangeModal}
-              >
-                <SWMansionIcon icon="edit-1" size={22} />
-              </a>
-            </span>
-          </li>
-          <li>
-            <span>Friend List</span>
-            <Button variant="text" onClick={openFriendList}>
-              <p className={css.buttonText}>See List</p>
-            </Button>
-          </li>
-          <li>
-            <span>Block List</span>
-            <Button variant="text" onClick={openBlockList}>
-              <p className={css.buttonText}>See List</p>
-            </Button>
-          </li>
-        </ul>
+    <div className={css.outer}>
+      <div className={css.switcher}>
+        <SettingsSwitcher />
+      </div>
+      <div className={css.container}>
+        <h4 className={css.header}>My Account</h4>
+        <div className={css.content}>
+          <ul>
+            <li>
+              <p className={css.logoutContainer}>
+                <span className={css.logoutLabel}>{'Logged in as '}</span>
+                <span className={css.username}>{username}</span>
+              </p>
+              <Button variant="text" onClick={logOutUser}>
+                <p className={css.buttonText}>Log out</p>
+              </Button>
+            </li>
+            <li>
+              <span>Password</span>
+              <span className={css.passwordContainer}>
+                <span className={css.password}>******</span>
+                <a
+                  className={css.editPasswordLink}
+                  onClick={showPasswordChangeModal}
+                >
+                  <SWMansionIcon icon="edit-1" size={22} />
+                </a>
+              </span>
+            </li>
+            <li>
+              <span>Friend List</span>
+              <Button variant="text" onClick={openFriendList}>
+                <p className={css.buttonText}>See List</p>
+              </Button>
+            </li>
+            <li>
+              <span>Block List</span>
+              <Button variant="text" onClick={openBlockList}>
+                <p className={css.buttonText}>See List</p>
+              </Button>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   );
diff --git a/web/settings/danger-zone.css b/web/settings/danger-zone.css
--- a/web/settings/danger-zone.css
+++ b/web/settings/danger-zone.css
@@ -1,3 +1,12 @@
+.outer {
+  flex-direction: row;
+  display: flex;
+}
+
+.switcher {
+  border-right: 1px solid var(--border-color);
+}
+
 .container {
   padding: 40px;
   width: 343px;
diff --git a/web/settings/danger-zone.react.js b/web/settings/danger-zone.react.js
--- a/web/settings/danger-zone.react.js
+++ b/web/settings/danger-zone.react.js
@@ -5,6 +5,7 @@
 import { useModalContext } from 'lib/components/modal-provider.react';
 
 import Button, { buttonThemes } from '../components/button.react';
+import SettingsSwitcher from '../sidebar/settings-switcher.react';
 import AccountDeleteModal from './account-delete-modal.react';
 import css from './danger-zone.css';
 
@@ -16,21 +17,26 @@
   );
 
   return (
-    <div className={css.container}>
-      <h4 className={css.header}>Danger Zone</h4>
-      <h5 className={css.subheading}>Delete Account</h5>
-      <Button
-        onClick={onDeleteAccountClick}
-        variant="filled"
-        buttonColor={buttonThemes.danger}
-        className={css.button}
-      >
-        Delete Account
-      </Button>
-      <p className={css.explanation}>
-        Your account will be permanently deleted. There is no way to reverse
-        this.
-      </p>
+    <div className={css.outer}>
+      <div className={css.switcher}>
+        <SettingsSwitcher />
+      </div>
+      <div className={css.container}>
+        <h4 className={css.header}>Danger Zone</h4>
+        <h5 className={css.subheading}>Delete Account</h5>
+        <Button
+          onClick={onDeleteAccountClick}
+          variant="filled"
+          buttonColor={buttonThemes.danger}
+          className={css.button}
+        >
+          Delete Account
+        </Button>
+        <p className={css.explanation}>
+          Your account will be permanently deleted. There is no way to reverse
+          this.
+        </p>
+      </div>
     </div>
   );
 }