diff --git a/web/avatars/edit-avatar-menu.css b/web/avatars/edit-avatar-menu.css
--- a/web/avatars/edit-avatar-menu.css
+++ b/web/avatars/edit-avatar-menu.css
@@ -11,7 +11,7 @@
   background-color: var(--button-background-primary-default);
   /* We want the border color of the edit avatar badge to always 
   match the panel background color */
-  border: 2px solid var(--frame-background-primary-default);
+  border: 2px solid var(--panel-background-primary-default);
   border-radius: 50%;
   cursor: pointer;
   transition-duration: 200ms;
diff --git a/web/settings/account-settings-panel.react.js b/web/settings/account-settings-panel.react.js
new file mode 100644
--- /dev/null
+++ b/web/settings/account-settings-panel.react.js
@@ -0,0 +1,22 @@
+// @flow
+
+import * as React from 'react';
+
+import css from './account-settings.css';
+import AccountSettings from './account-settings.react.js';
+import PanelHeader from '../components/panel-header.react.js';
+import Panel, { type PanelData } from '../components/panel.react.js';
+
+const panelData: $ReadOnlyArray<PanelData> = [
+  {
+    header: <PanelHeader headerLabel="My account" />,
+    body: <AccountSettings />,
+    classNameOveride: css.panelContainer,
+  },
+];
+
+function AccountSettingsPanel(): React.Node {
+  return <Panel panelItems={panelData} />;
+}
+
+export default AccountSettingsPanel;
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,20 +1,17 @@
-.container {
+.panelContainer {
   flex: 1;
-  background-color: var(--frame-background-primary-default);
-  overflow: auto;
 }
 
-.contentContainer {
-  padding: 40px;
-  width: 456px;
-  overflow-y: auto;
+.container {
+  padding: 16px;
+  overflow-y: scroll;
+  flex-grow: 1;
+  flex-basis: 0;
 }
 
-.header {
-  color: var(--text-background-primary-default);
-  font-weight: var(--semi-bold);
-  line-height: var(--line-height-display);
-  padding-bottom: 55px;
+.editUserAvatarContainer {
+  display: flex;
+  justify-content: center;
 }
 
 .content {
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
@@ -13,8 +13,6 @@
 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';
 import TunnelbrokerMessagesScreen from './tunnelbroker-message-list.react.js';
 import TunnelbrokerTestScreen from './tunnelbroker-test.react.js';
 import EditUserAvatar from '../avatars/edit-user-avatar.react.js';
@@ -36,16 +34,6 @@
     [pushModal],
   );
 
-  const openFriendList = React.useCallback(
-    () => pushModal(<FriendListModal />),
-    [pushModal],
-  );
-
-  const openBlockList = React.useCallback(
-    () => pushModal(<BlockListModal />),
-    [pushModal],
-  );
-
   const isAccountWithPassword = useSelector(state =>
     accountHasPassword(state.currentUserInfo),
   );
@@ -149,38 +137,25 @@
 
   return (
     <div className={css.container}>
-      <div className={css.contentContainer}>
-        <h4 className={css.header}>My Account</h4>
+      <div className={css.editUserAvatarContainer}>
         <EditUserAvatar userID={currentUserInfo.id} />
-        <div className={css.content}>
-          <ul>
-            <li>
-              <p className={css.logoutContainer}>
-                <span className={css.logoutLabel}>{'Logged in as '}</span>
-                <span className={css.username}>{stringForUser}</span>
-              </p>
-              <Button variant="text" onClick={logOutUser}>
-                <p className={css.buttonText}>Log out</p>
-              </Button>
-            </li>
-            {changePasswordSection}
-            <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>
-        {preferences}
-        {tunnelbroker}
       </div>
+      <div className={css.content}>
+        <ul>
+          <li>
+            <p className={css.logoutContainer}>
+              <span className={css.logoutLabel}>{'Logged in as '}</span>
+              <span className={css.username}>{stringForUser}</span>
+            </p>
+            <Button variant="text" onClick={logOutUser}>
+              <p className={css.buttonText}>Log out</p>
+            </Button>
+          </li>
+          {changePasswordSection}
+        </ul>
+      </div>
+      {preferences}
+      {tunnelbroker}
     </div>
   );
 }