diff --git a/web/settings/account-settings.css b/web/settings/account-settings.css
index 19fcd0d72..e9a20334f 100644
--- a/web/settings/account-settings.css
+++ b/web/settings/account-settings.css
@@ -1,36 +1,49 @@
 .container {
   padding: 40px;
   width: 456px;
 }
 
 .header {
   color: var(--fg);
   font-weight: var(--semi-bold);
   line-height: var(--line-height-display);
   padding-bottom: 55px;
 }
 
 .content ul {
   list-style-type: none;
 }
 
 .content li {
   color: var(--account-settings-label);
   border-bottom: 1px solid var(--border-color);
   padding: 24px 16px 16px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 .logoutContainer {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: var(--fg);
 }
 
 .logoutLabel {
   color: var(--account-settings-label);
 }
 
 .username {
   color: var(--fg);
 }
+
+.button {
+  color: var(--account-button-color);
+  background-color: transparent;
+  font-size: var(--m-font-16);
+  border: none;
+  cursor: pointer;
+  line-height: var(--line-height-text);
+  white-space: nowrap;
+}
diff --git a/web/settings/account-settings.react.js b/web/settings/account-settings.react.js
index 24e665798..5401d890f 100644
--- a/web/settings/account-settings.react.js
+++ b/web/settings/account-settings.react.js
@@ -1,32 +1,45 @@
 // @flow
 
 import * as React from 'react';
 
+import { logOut } from 'lib/actions/user-actions';
+import { preRequestUserStateSelector } from 'lib/selectors/account-selectors';
+import { useServerCall } from 'lib/utils/action-utils';
+
 import { useSelector } from '../redux/redux-utils';
 import css from './account-settings.css';
 
 function AccountSettings(): React.Node {
+  const sendLogoutRequest = useServerCall(logOut);
+  const preRequestUserState = useSelector(preRequestUserStateSelector);
+  const logOutUser = React.useCallback(() => {
+    sendLogoutRequest(preRequestUserState);
+  }, [sendLogoutRequest, preRequestUserState]);
+
   const currentUserInfo = useSelector(state => state.currentUserInfo);
   if (!currentUserInfo || currentUserInfo.anonymous) {
     return null;
   }
   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 className={css.button} onClick={logOutUser}>
+              Log out
+            </button>
           </li>
         </ul>
       </div>
     </div>
   );
 }
 
 export default AccountSettings;
diff --git a/web/theme.css b/web/theme.css
index fc31d5832..3df3e7e25 100644
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,115 +1,116 @@
 :root {
   /* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below
 
      The reason we never use color values defined here directly in CSS is
 
       1. It makes changing themes from light / dark / user generated impossible.
       2. Gives the programmer context into the color being used.
       3. If our color system changes it's much easier to change color values in one place.
 
      Add a color value to the theme below, and then use it in your CSS.
      naming convention:
      - bg: background.
      - fg: foreground.
      - color: text-color
    */
   --shades-white-100: #ffffff;
   --shades-white-90: #f5f5f5;
   --shades-white-80: #ebebeb;
   --shades-white-70: #e0e0e0;
   --shades-white-60: #cccccc;
 
   --shades-black-100: #0a0a0a;
   --shades-black-90: #1f1f1f;
   --shades-black-80: #404040;
   --shades-black-70: #666666;
   --shades-black-60: #808080;
 
   --violet-dark-100: #7e57c2;
   --violet-dark-80: #6d49ab;
   --violet-dark-60: #563894;
   --violet-dark-40: #44297a;
   --violet-dark-20: #331f5c;
 
   --violet-light-100: #ae94db;
   --violet-light-80: #b9a4df;
   --violet-light-60: #d3c6ec;
   --violet-light-40: #e8e0f5;
   --violet-light-20: #f3f0fa;
 
   --success-light-10: #d5f6e3;
   --success-light-50: #6cdf9c;
   --success-primary: #00c853;
   --success-dark-50: #029841;
   --success-dark-90: #034920;
 
   --error-light-10: #feebe6;
   --error-light-50: #f9947b;
   --error-primary: #f53100;
   --error-dark-50: #b62602;
   --error-dark-90: #4f1203;
 
   --bg: var(--shades-black-100);
   --fg: var(--shades-white-100);
   --color-disabled: var(--shades-black-60);
   --text-input-bg: var(--shades-black-80);
   --text-input-color: var(--shades-white-60);
   --text-input-placeholder: var(--shades-white-60);
   --border: var(--shades-black-80);
   --error: var(--error-primary);
   --success: var(--success-dark-50);
 
   /* Color Theme */
   --btn-bg-primary: var(--violet-dark-100);
   --btn-bg-danger: var(--error-primary);
   --chat-bg: var(--violet-dark-80);
   --chat-confirmation-icon: var(--violet-dark-100);
   --keyserver-selection: var(--violet-dark-60);
   --thread-selection: var(--violet-light-80);
   --selected-thread-bg: var(--shades-black-90);
   --chat-timestamp-color: var(--shades-black-60);
   --tool-tip-bg: var(--shades-black-80);
   --tool-tip-color: var(--shades-white-60);
   --border-color: var(--shades-black-80);
   --calendar-chevron: var(--shades-black-60);
   --calendar-day-bg: var(--shades-black-60);
   --calendar-day-selected-color: var(--violet-dark-80);
   --community-bg: var(--shades-black-90);
   --unread-bg: var(--error-primary);
   --settings-btn-bg: var(--violet-dark-100);
   --modal-bg: var(--shades-black-90);
   --join-bg: var(--shades-black-90);
   --help-color: var(--shades-black-60);
   --breadcrumb-color: var(--shades-black-60);
   --breadcrumb-color-unread: var(--shades-white-60);
   --btn-secondary-border: var(--shades-black-60);
   --thread-color-read: var(--shades-black-60);
   --thread-from-color-read: var(--shades-black-80);
   --thread-last-message-color-read: var(--shades-black-60);
   --relationship-button-green: var(--success-dark-50);
   --relationship-button-red: var(--error-primary);
   --relationship-button-text: var(--fg);
   --disconnected-bar-alert-bg: var(--error-dark-50);
   --disconnected-bar-alert-color: var(--shades-white-100);
   --disconnected-bar-connecting-bg: var(--shades-white-70);
   --disconnected-bar-connecting-color: var(--shades-black-100);
   --permission-color: var(--shades-white-60);
   --thread-top-bar-color: var(--shades-white-100);
   --thread-top-bar-menu-color: var(--shades-white-70);
   --thread-ancestor-keyserver-border: var(--shades-black-70);
   --thread-ancestor-color-light: var(--shades-white-70);
   --thread-ancestor-color-dark: var(--shades-black-100);
   --thread-ancestor-separator-color: var(--shades-white-60);
   --text-message-default-background: var(--shades-black-80);
   --message-action-tooltip-bg: var(--shades-black-90);
   --thread-menu-bg: var(--shades-black-90);
   --thread-menu-separator-color: var(--shades-black-80);
   --thread-menu-color: var(--shades-black-60);
   --thread-menu-color-hover: var(--shades-white-100);
   --thread-menu-color-dangerous: var(--error-primary);
   --thread-menu-color-dangerous-hover: var(--error-light-50);
   --app-list-icon-read-only-color: var(--shades-black-60);
   --app-list-icon-enabled-color: var(--success-primary);
   --app-list-icon-disabled-color: var(--shades-white-80);
   --account-settings-label: var(--shades-black-60);
+  --account-button-color: var(--violet-dark-100);
 }