diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css
--- a/web/chat/chat-message-list.css
+++ b/web/chat/chat-message-list.css
@@ -141,21 +141,23 @@
 }
 
 div.failedSend {
-  text-transform: uppercase;
   display: flex;
   justify-content: flex-end;
   flex-shrink: 0;
-  font-size: 14px;
   margin-right: 30px;
   padding-bottom: 6px;
 }
-span.deliveryFailed {
+
+.deliveryFailed {
+  text-transform: uppercase;
+  font-size: 14px;
   padding: 0 3px;
-  color: #555555;
+  color: var(--fg);
 }
-a.retrySend {
-  padding: 0 3px;
-  cursor: pointer;
+
+.retryButtonText {
+  text-transform: uppercase;
+  font-size: 14px;
 }
 
 div.messageBox > div.imageGrid {
diff --git a/web/chat/chat-thread-composer.css b/web/chat/chat-thread-composer.css
--- a/web/chat/chat-thread-composer.css
+++ b/web/chat/chat-thread-composer.css
@@ -47,18 +47,20 @@
   flex-direction: column;
   overflow: auto;
   padding: 0 12px 8px;
+  list-style-type: none;
 }
 
-li.searchResultsItem {
+.searchResultsItem {
   display: flex;
-  flex-direction: row;
-  align-items: center;
+}
+
+.searchResultsButton {
   justify-content: space-between;
+  flex: 1;
   padding: 8px 12px;
-  cursor: pointer;
 }
 
-li.searchResultsItem:hover {
+.searchResultsButton:hover {
   background-color: var(--thread-creation-search-item-bg-hover);
 }
 
diff --git a/web/chat/chat-thread-composer.react.js b/web/chat/chat-thread-composer.react.js
--- a/web/chat/chat-thread-composer.react.js
+++ b/web/chat/chat-thread-composer.react.js
@@ -8,6 +8,7 @@
 import { threadIsPending } from 'lib/shared/thread-utils';
 import type { AccountUserInfo, UserListItem } from 'lib/types/user-types';
 
+import Button from '../components/button.react';
 import Label from '../components/label.react';
 import Search from '../components/search.react';
 import type { InputState } from '../input/input-state';
@@ -92,13 +93,15 @@
     return (
       <ul className={css.searchResultsContainer}>
         {userListItems.map((userSearchResult: UserListItem) => (
-          <li
-            className={css.searchResultsItem}
-            key={userSearchResult.id}
-            onClick={() => onSelectUserFromSearch(userSearchResult.id)}
-          >
-            <div className={css.userName}>{userSearchResult.username}</div>
-            <div className={css.userInfo}>{userSearchResult.alertTitle}</div>
+          <li key={userSearchResult.id} className={css.searchResultsItem}>
+            <Button
+              variant="text"
+              onClick={() => onSelectUserFromSearch(userSearchResult.id)}
+              className={css.searchResultsButton}
+            >
+              <div className={css.userName}>{userSearchResult.username}</div>
+              <div className={css.userInfo}>{userSearchResult.alertTitle}</div>
+            </Button>
           </li>
         ))}
       </ul>
diff --git a/web/chat/failed-send.react.js b/web/chat/failed-send.react.js
--- a/web/chat/failed-send.react.js
+++ b/web/chat/failed-send.react.js
@@ -12,6 +12,7 @@
 } from 'lib/types/message-types';
 import { type ThreadInfo } from 'lib/types/thread-types';
 
+import Button from '../components/button.react';
 import { type InputState, InputStateContext } from '../input/input-state';
 import { useSelector } from '../redux/redux-utils';
 import css from './chat-message-list.css';
@@ -79,28 +80,24 @@
   }
 
   render() {
-    const threadColor = {
-      color: `#${this.props.threadInfo.color}`,
-    };
     return (
       <div className={css.failedSend}>
-        <span>Delivery failed.</span>
-        <a
-          onClick={this.retrySend}
-          className={{
-            ...css.retrySend,
-            ...threadColor,
+        <span className={css.deliveryFailed}>Delivery failed.</span>
+        <Button
+          variant="text"
+          buttonColor={{
+            backgroundColor: 'transparent',
+            color: `#${this.props.threadInfo.color}`,
           }}
+          onClick={this.retrySend}
         >
-          {'Retry?'}
-        </a>
+          <span className={css.retryButtonText}>Retry?</span>
+        </Button>
       </div>
     );
   }
 
-  retrySend = (event: SyntheticEvent<HTMLAnchorElement>) => {
-    event.stopPropagation();
-
+  retrySend = () => {
     const { inputState } = this.props;
     invariant(inputState, 'inputState should be set in FailedSend');
 
diff --git a/web/components/button.css b/web/components/button.css
--- a/web/components/button.css
+++ b/web/components/button.css
@@ -1,12 +1,12 @@
 .btn {
   display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
-  background: var(--settings-btn-bg);
-  border: 1px solid transparent;
+  border: none;
+  border-radius: 4px;
   font-size: var(--m-font-16);
   padding: 12px 24px;
-  border-radius: 4px;
   cursor: pointer;
 }
 
@@ -37,6 +37,7 @@
   background: var(--btn-bg-outline);
   color: var(--fg);
   border-color: var(--btn-outline-border);
+  border: 1px solid var(--btn-secondary-border);
 }
 
 .outline:hover {
@@ -74,8 +75,15 @@
 }
 
 .round {
+  background: var(--settings-btn-bg);
   width: 30px;
   height: 30px;
   border-radius: 50%;
   padding: 0;
 }
+
+.text {
+  background: transparent;
+  white-space: nowrap;
+  padding: 0;
+}
diff --git a/web/components/button.react.js b/web/components/button.react.js
--- a/web/components/button.react.js
+++ b/web/components/button.react.js
@@ -5,7 +5,7 @@
 
 import css from './button.css';
 
-export type ButtonVariant = 'filled' | 'outline' | 'round';
+export type ButtonVariant = 'filled' | 'outline' | 'round' | 'text';
 export type ButtonColor =
   | 'success'
   | 'danger'
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
@@ -41,14 +41,9 @@
   color: var(--fg);
 }
 
-.button {
+.buttonText {
   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;
 }
 
 .passwordContainer {
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
@@ -9,6 +9,7 @@
   useServerCall,
 } from 'lib/utils/action-utils';
 
+import Button from '../components/button.react';
 import { useModalContext } from '../modals/modal-provider.react';
 import { useSelector } from '../redux/redux-utils';
 import SWMansionIcon from '../SWMansionIcon.react';
@@ -62,9 +63,9 @@
               <span className={css.logoutLabel}>{'Logged in as '}</span>
               <span className={css.username}>{username}</span>
             </p>
-            <button className={css.button} onClick={logOutUser}>
-              Log out
-            </button>
+            <Button variant="text" onClick={logOutUser}>
+              <p className={css.buttonText}>Log out</p>
+            </Button>
           </li>
           <li>
             <span>Password</span>
@@ -80,15 +81,15 @@
           </li>
           <li>
             <span>Friend List</span>
-            <button className={css.button} onClick={openFriendList}>
-              See List
-            </button>
+            <Button variant="text" onClick={openFriendList}>
+              <p className={css.buttonText}>See List</p>
+            </Button>
           </li>
           <li>
             <span>Block List</span>
-            <button className={css.button} onClick={openBlockList}>
-              See List
-            </button>
+            <Button variant="text" onClick={openBlockList}>
+              <p className={css.buttonText}>See List</p>
+            </Button>
           </li>
         </ul>
       </div>