diff --git a/web/settings/account-settings.css b/web/settings/account-settings.css
index 78ce600d3..e45af3dde 100644
--- a/web/settings/account-settings.css
+++ b/web/settings/account-settings.css
@@ -1,80 +1,81 @@
 .container {
   flex: 1;
   background-color: var(--panel-background-primary-default);
+  overflow: auto;
 }
 
 .contentContainer {
   padding: 40px;
   width: 456px;
   overflow-y: auto;
 }
 
 .header {
   color: var(--text-background-primary-default);
   font-weight: var(--semi-bold);
   line-height: var(--line-height-display);
   padding-bottom: 55px;
 }
 
 .content {
   margin-top: 32px;
 }
 
 .content ul {
   list-style-type: none;
 }
 
 .content li {
   color: var(--text-background-tertiary-default);
   padding: 24px 16px 16px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
 }
 
 .content li:not(:last-child) {
   border-bottom: 1px solid var(--separator-background-primary-default);
 }
 
 .logoutContainer {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
 .logoutLabel {
   color: var(--text-background-tertiary-default);
 }
 
 .username {
   color: var(--text-background-primary-default);
 }
 
 .buttonText {
   color: var(--link-background-primary-default);
   line-height: var(--line-height-text);
 }
 
 .passwordContainer {
   display: flex;
 }
 
 .password {
   align-items: center;
   padding-right: 16px;
 }
 
 .editPasswordLink {
   color: var(--text-background-tertiary-default);
   cursor: pointer;
 }
 
 .preferencesContainer {
   padding-top: 24px;
 }
 
 .preferencesHeader {
   color: var(--text-background-primary-default);
   font-weight: var(--semi-bold);
   line-height: var(--line-height-display);
 }
diff --git a/web/settings/account-settings.react.js b/web/settings/account-settings.react.js
index 68191947f..ca4fd3e54 100644
--- a/web/settings/account-settings.react.js
+++ b/web/settings/account-settings.react.js
@@ -1,144 +1,197 @@
 // @flow
 
 import * as React from 'react';
 
 import { logOut, logOutActionTypes } from 'lib/actions/user-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
 import { useStringForUser } from 'lib/hooks/ens-cache.js';
 import { preRequestUserStateSelector } from 'lib/selectors/account-selectors.js';
 import { accountHasPassword } from 'lib/shared/account-utils.js';
+import { useTunnelbroker } from 'lib/tunnelbroker/tunnelbroker-context.js';
 import {
   useDispatchActionPromise,
   useServerCall,
 } 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';
+import TunnelbrokerMessagesScreen from './tunnelbroker-message-list.react.js';
+import TunnelbrokerTestScreen from './tunnelbroker-test.react.js';
 import EditUserAvatar from '../avatars/edit-user-avatar.react.js';
 import Button from '../components/button.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useStaffCanSee } from '../utils/staff-utils.js';
 
 function AccountSettings(): React.Node {
   const sendLogoutRequest = useServerCall(logOut);
   const preRequestUserState = useSelector(preRequestUserStateSelector);
   const dispatchActionPromise = useDispatchActionPromise();
   const logOutUser = React.useCallback(
     () =>
       dispatchActionPromise(
         logOutActionTypes,
         sendLogoutRequest(preRequestUserState),
       ),
     [dispatchActionPromise, preRequestUserState, sendLogoutRequest],
   );
 
   const { pushModal, popModal } = useModalContext();
   const showPasswordChangeModal = React.useCallback(
     () => pushModal(<PasswordChangeModal />),
     [pushModal],
   );
 
   const openFriendList = React.useCallback(
     () => pushModal(<FriendListModal onClose={popModal} />),
     [popModal, pushModal],
   );
 
   const openBlockList = React.useCallback(
     () => pushModal(<BlockListModal onClose={popModal} />),
     [popModal, pushModal],
   );
 
   const isAccountWithPassword = useSelector(state =>
     accountHasPassword(state.currentUserInfo),
   );
 
   const currentUserInfo = useSelector(state => state.currentUserInfo);
   const stringForUser = useStringForUser(currentUserInfo);
 
   const staffCanSee = useStaffCanSee();
+  const { sendMessage, connected, addListener, removeListener } =
+    useTunnelbroker();
+  const openTunnelbrokerModal = React.useCallback(
+    () =>
+      pushModal(
+        <TunnelbrokerTestScreen sendMessage={sendMessage} onClose={popModal} />,
+      ),
+    [popModal, pushModal, sendMessage],
+  );
+
+  const openTunnelbrokerMessagesModal = React.useCallback(
+    () =>
+      pushModal(
+        <TunnelbrokerMessagesScreen
+          addListener={addListener}
+          removeListener={removeListener}
+          onClose={popModal}
+        />,
+      ),
+    [addListener, popModal, pushModal, removeListener],
+  );
 
   const showAppearanceModal = React.useCallback(
     () => pushModal(<AppearanceChangeModal />),
     [pushModal],
   );
 
   if (!currentUserInfo || currentUserInfo.anonymous) {
     return null;
   }
 
   let changePasswordSection;
   if (isAccountWithPassword) {
     changePasswordSection = (
       <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>
     );
   }
 
   let preferences;
   if (staffCanSee) {
     preferences = (
       <div className={css.preferencesContainer}>
         <h4 className={css.preferencesHeader}>Preferences</h4>
         <div className={css.content}>
           <ul>
             <li>
               <span>Appearance</span>
               <a className={css.editPasswordLink} onClick={showAppearanceModal}>
                 <SWMansionIcon icon="edit-1" size={22} />
               </a>
             </li>
           </ul>
         </div>
       </div>
     );
   }
+  let tunnelbroker;
+  if (staffCanSee) {
+    tunnelbroker = (
+      <div className={css.preferencesContainer}>
+        <h4 className={css.preferencesHeader}>Tunnerlbroker menu</h4>
+        <div className={css.content}>
+          <ul>
+            <li>
+              <span>Connected</span>
+              <span>{connected.toString()}</span>
+            </li>
+            <li>
+              <span>Send message to device</span>
+              <Button variant="text" onClick={openTunnelbrokerModal}>
+                <p className={css.buttonText}>Insert data</p>
+              </Button>
+            </li>
+            <li>
+              <span>Trace received messages</span>
+              <Button variant="text" onClick={openTunnelbrokerMessagesModal}>
+                <p className={css.buttonText}>Show list</p>
+              </Button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    );
+  }
 
   return (
     <div className={css.container}>
       <div className={css.contentContainer}>
         <h4 className={css.header}>My Account</h4>
         <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>
   );
 }
 
 export default AccountSettings;
diff --git a/web/settings/tunnelbroker-message-list.css b/web/settings/tunnelbroker-message-list.css
new file mode 100644
index 000000000..9b409c2d4
--- /dev/null
+++ b/web/settings/tunnelbroker-message-list.css
@@ -0,0 +1,21 @@
+.messageList {
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+  height: 100%;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.messageRow {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 10px;
+  border-bottom: 1px solid #ddd;
+}
+
+.messageCol {
+  flex: 1;
+  padding: 15px;
+}
diff --git a/web/settings/tunnelbroker-message-list.react.js b/web/settings/tunnelbroker-message-list.react.js
new file mode 100644
index 000000000..916f98d4f
--- /dev/null
+++ b/web/settings/tunnelbroker-message-list.react.js
@@ -0,0 +1,50 @@
+// @flow
+
+import * as React from 'react';
+
+import type { TunnelbrokerSocketListener } from 'lib/tunnelbroker/tunnelbroker-context.js';
+import type { TunnelbrokerMessage } from 'lib/types/tunnelbroker/messages.js';
+
+import css from './tunnelbroker-message-list.css';
+import Modal from '../modals/modal.react.js';
+
+type Props = {
+  +addListener: (listener: TunnelbrokerSocketListener) => void,
+  +removeListener: (listener: TunnelbrokerSocketListener) => void,
+  +onClose: () => void,
+};
+
+function TunnelbrokerMessagesScreen(props: Props): React.Node {
+  const { addListener, onClose, removeListener } = props;
+  const [messages, setMessages] = React.useState<TunnelbrokerMessage[]>([]);
+
+  const listener = React.useCallback((msg: TunnelbrokerMessage) => {
+    setMessages(prev => [...prev, msg]);
+  }, []);
+
+  React.useEffect(() => {
+    addListener(listener);
+    return () => removeListener(listener);
+  }, [addListener, listener, removeListener]);
+
+  let messageList = (
+    <div className={css.messageRow}>
+      <div className={css.messageCol}>No messages</div>
+    </div>
+  );
+  if (messages.length) {
+    messageList = messages.map(message => (
+      <div key={message.messageID} className={css.messageRow}>
+        <div className={css.messageCol}>{JSON.stringify(message)}</div>
+      </div>
+    ));
+  }
+
+  return (
+    <Modal name="Tunnelbroker Messages" onClose={onClose} size="large">
+      <div className={css.messageList}>{messageList}</div>
+    </Modal>
+  );
+}
+
+export default TunnelbrokerMessagesScreen;
diff --git a/web/settings/tunnelbroker-test.css b/web/settings/tunnelbroker-test.css
new file mode 100644
index 000000000..bfb878280
--- /dev/null
+++ b/web/settings/tunnelbroker-test.css
@@ -0,0 +1,25 @@
+.modalBody {
+  padding: 24px 40px 32px;
+  color: var(--fg);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.footer {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  padding-top: 8px;
+}
+
+.modalError {
+  font-size: var(--xs-font-12);
+  color: var(--error);
+  font-style: italic;
+  padding-left: 6px;
+  align-self: center;
+}
diff --git a/web/settings/tunnelbroker-test.react.js b/web/settings/tunnelbroker-test.react.js
new file mode 100644
index 000000000..47a3649ca
--- /dev/null
+++ b/web/settings/tunnelbroker-test.react.js
@@ -0,0 +1,94 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+
+import { type ClientMessageToDevice } from 'lib/tunnelbroker/tunnelbroker-context.js';
+
+import css from './tunnelbroker-test.css';
+import Button from '../components/button.react.js';
+import Input from '../modals/input.react.js';
+import Modal from '../modals/modal.react.js';
+
+type Props = {
+  +sendMessage: (message: ClientMessageToDevice) => Promise<void>,
+  +onClose: () => void,
+};
+
+function TunnelbrokerTestScreen(props: Props): React.Node {
+  const { sendMessage, onClose } = props;
+  const [recipient, setRecipient] = React.useState('');
+  const [message, setMessage] = React.useState('');
+  const [loading, setLoading] = React.useState(false);
+  const [errorMessage, setErrorMessage] = React.useState('');
+  const recipientInput = React.useRef(null);
+  const messageInput = React.useRef(null);
+
+  const onSubmit = React.useCallback(
+    async event => {
+      event.preventDefault();
+
+      setLoading(true);
+      try {
+        await sendMessage({ deviceID: recipient, payload: message });
+      } catch (e) {
+        setErrorMessage(e.message);
+      }
+      setLoading(false);
+    },
+    [message, recipient, sendMessage],
+  );
+
+  let errorMsg;
+  if (errorMessage) {
+    errorMsg = <div className={css.modalError}>{errorMessage}</div>;
+  }
+
+  return (
+    <Modal name="Send Tunnelbroker Message" onClose={onClose} size="large">
+      <div className={css.modalBody}>
+        <div className={css.content}>
+          <Input
+            type="text"
+            placeholder="deviceID"
+            value={recipient}
+            onChange={(event: SyntheticEvent<HTMLInputElement>) => {
+              const target = event.target;
+              invariant(target instanceof HTMLInputElement, 'target not input');
+              setRecipient(target.value);
+            }}
+            disabled={loading}
+            ref={recipientInput}
+            label="Recipient"
+          />
+          <Input
+            type="text"
+            placeholder="payload"
+            value={message}
+            onChange={(event: SyntheticEvent<HTMLInputElement>) => {
+              const target = event.target;
+              invariant(target instanceof HTMLInputElement, 'target not input');
+              setMessage(target.value);
+            }}
+            disabled={loading}
+            ref={messageInput}
+            label="Message"
+          />
+        </div>
+        <div className={css.footer}>
+          <Button
+            type="submit"
+            variant="filled"
+            onClick={onSubmit}
+            disabled={!recipient || !message || loading}
+          >
+            Send Message
+          </Button>
+          {errorMsg}
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export default TunnelbrokerTestScreen;