diff --git a/native/profile/tunnelbroker-menu.react.js b/native/profile/tunnelbroker-menu.react.js
index 38c412a79..233ea35eb 100644
--- a/native/profile/tunnelbroker-menu.react.js
+++ b/native/profile/tunnelbroker-menu.react.js
@@ -1,264 +1,261 @@
 // @flow
 
 import * as React from 'react';
 import { useState } from 'react';
 import { Text, View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 
 import { IdentityClientContext } from 'lib/shared/identity-client-context.js';
 import { useTunnelbroker } from 'lib/tunnelbroker/tunnelbroker-context.js';
 import {
   tunnelbrokerMessageTypes,
   type TunnelbrokerMessage,
 } from 'lib/types/tunnelbroker/messages.js';
 import {
   type EncryptedMessage,
   peerToPeerMessageTypes,
 } from 'lib/types/tunnelbroker/peer-to-peer-message-types.js';
 import {
   createOlmSessionsWithOwnDevices,
   getContentSigningKey,
 } from 'lib/utils/crypto-utils.js';
 
 import type { ProfileNavigationProp } from './profile.react.js';
 import Button from '../components/button.react.js';
 import TextInput from '../components/text-input.react.js';
 import { olmAPI } from '../crypto/olm-api.js';
 import type { NavigationRoute } from '../navigation/route-names.js';
 import { useSelector } from '../redux/redux-utils.js';
 import { useColors, useStyles } from '../themes/colors.js';
 
 type Props = {
   +navigation: ProfileNavigationProp<'TunnelbrokerMenu'>,
   +route: NavigationRoute<'TunnelbrokerMenu'>,
 };
 
 // eslint-disable-next-line no-unused-vars
 function TunnelbrokerMenu(props: Props): React.Node {
   const styles = useStyles(unboundStyles);
   const colors = useColors();
   const currentUserID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
   const identityContext = React.useContext(IdentityClientContext);
 
   const { socketState, addListener, sendMessage, removeListener } =
     useTunnelbroker();
   const [messages, setMessages] = useState<TunnelbrokerMessage[]>([]);
   const [recipient, setRecipient] = useState('');
   const [message, setMessage] = useState('');
   const [deviceID, setDeviceID] = React.useState<?string>();
 
   React.useEffect(() => {
     void (async () => {
       const contentSigningKey = await getContentSigningKey();
       setDeviceID(contentSigningKey);
     })();
   }, []);
 
   const listener = React.useCallback((msg: TunnelbrokerMessage) => {
     setMessages(prev => [...prev, msg]);
   }, []);
 
   React.useEffect(() => {
     addListener(listener);
     return () => removeListener(listener);
   }, [addListener, listener, removeListener]);
 
   const onSubmit = React.useCallback(async () => {
     try {
       await sendMessage({ deviceID: recipient, payload: message });
     } catch (e) {
       console.log(e.message);
     }
   }, [message, recipient, sendMessage]);
 
   const onCreateSessions = React.useCallback(async () => {
     if (!identityContext) {
       return;
     }
     const authMetadata = await identityContext.getAuthMetadata();
     try {
       await createOlmSessionsWithOwnDevices(
         authMetadata,
         identityContext.identityClient,
         sendMessage,
       );
     } catch (e) {
       console.log(`Error creating olm sessions with own devices: ${e.message}`);
     }
   }, [identityContext, sendMessage]);
 
   const onSendEncryptedMessage = React.useCallback(async () => {
     try {
       if (!currentUserID) {
         return;
       }
       await olmAPI.initializeCryptoAccount();
-      const encryptedData = await olmAPI.encrypt(
-        `Encrypted message to ${recipient}`,
-        recipient,
-      );
+      const encryptedData = await olmAPI.encrypt(message, recipient);
       const signingKey = await getContentSigningKey();
       const encryptedMessage: EncryptedMessage = {
         type: peerToPeerMessageTypes.ENCRYPTED_MESSAGE,
         senderInfo: {
           deviceID: signingKey,
           userID: currentUserID,
         },
         encryptedData,
       };
       await sendMessage({
         deviceID: recipient,
         payload: JSON.stringify(encryptedMessage),
       });
     } catch (e) {
       console.log(`Error sending encrypted content to device: ${e.message}`);
     }
-  }, [currentUserID, recipient, sendMessage]);
+  }, [message, currentUserID, recipient, sendMessage]);
 
   return (
     <ScrollView
       contentContainerStyle={styles.scrollViewContentContainer}
       style={styles.scrollView}
     >
       <Text style={styles.header}>INFO</Text>
       <View style={styles.section}>
         <View style={styles.submenuButton}>
           <Text style={styles.submenuText}>Connected</Text>
           <Text style={styles.text}>{socketState.connected.toString()}</Text>
         </View>
       </View>
 
       <Text style={styles.header}>DEVICE ID</Text>
       <View style={styles.section}>
         <View style={styles.submenuButton}>
           <Text style={styles.submenuText}>{deviceID}</Text>
         </View>
       </View>
 
       <Text style={styles.header}>USER ID</Text>
       <View style={styles.section}>
         <View style={styles.submenuButton}>
           <Text style={styles.submenuText}>{currentUserID}</Text>
         </View>
       </View>
 
       <Text style={styles.header}>SEND MESSAGE</Text>
 
       <View style={styles.section}>
         <View style={styles.submenuButton}>
           <Text style={styles.submenuText}>Recipient</Text>
           <TextInput
             style={styles.textInput}
             value={recipient}
             onChangeText={setRecipient}
           />
         </View>
         <View style={styles.submenuButton}>
           <Text style={styles.submenuText}>Message</Text>
           <TextInput
             style={styles.textInput}
             value={message}
             onChangeText={setMessage}
           />
         </View>
         <Button
           onPress={onSubmit}
           style={styles.row}
           iosFormat="highlight"
           iosHighlightUnderlayColor={colors.panelIosHighlightUnderlay}
           iosActiveOpacity={0.85}
         >
           <Text style={styles.submenuText}>Send Message</Text>
         </Button>
         <Button
           onPress={onCreateSessions}
           style={styles.row}
           iosFormat="highlight"
           iosHighlightUnderlayColor={colors.panelIosHighlightUnderlay}
           iosActiveOpacity={0.85}
         >
           <Text style={styles.submenuText}>
             Create session with own devices
           </Text>
         </Button>
         <Button
           onPress={onSendEncryptedMessage}
           style={styles.row}
           iosFormat="highlight"
           iosHighlightUnderlayColor={colors.panelIosHighlightUnderlay}
           iosActiveOpacity={0.85}
         >
           <Text style={styles.submenuText}>
             Send encrypted message to recipient
           </Text>
         </Button>
       </View>
 
       <Text style={styles.header}>MESSAGES</Text>
       {messages
         .filter(msg => msg.type !== tunnelbrokerMessageTypes.HEARTBEAT)
         .map((msg, id) => (
           <View key={id} style={styles.section}>
             <Text style={styles.submenuText}>{JSON.stringify(msg)}</Text>
           </View>
         ))}
     </ScrollView>
   );
 }
 
 const unboundStyles = {
   scrollViewContentContainer: {
     paddingTop: 24,
   },
   scrollView: {
     backgroundColor: 'panelBackground',
   },
   section: {
     backgroundColor: 'panelForeground',
     borderBottomWidth: 1,
     borderColor: 'panelForegroundBorder',
     borderTopWidth: 1,
     marginBottom: 24,
     marginVertical: 2,
   },
   header: {
     color: 'panelBackgroundLabel',
     fontSize: 12,
     fontWeight: '400',
     paddingBottom: 3,
     paddingHorizontal: 24,
   },
   submenuButton: {
     flexDirection: 'row',
     paddingHorizontal: 24,
     paddingVertical: 10,
     alignItems: 'center',
   },
   submenuText: {
     color: 'panelForegroundLabel',
     flex: 1,
     fontSize: 16,
   },
   text: {
     color: 'panelForegroundLabel',
     fontSize: 16,
   },
   row: {
     flexDirection: 'row',
     justifyContent: 'space-between',
     paddingHorizontal: 24,
     paddingVertical: 14,
   },
   textInput: {
     color: 'modalBackgroundLabel',
     flex: 1,
     fontSize: 16,
     margin: 0,
     padding: 0,
     borderBottomColor: 'transparent',
   },
 };
 
 export default TunnelbrokerMenu;
diff --git a/web/settings/tunnelbroker-test.react.js b/web/settings/tunnelbroker-test.react.js
index b1e5962f8..c96531a36 100644
--- a/web/settings/tunnelbroker-test.react.js
+++ b/web/settings/tunnelbroker-test.react.js
@@ -1,152 +1,149 @@
 // @flow
 
 import invariant from 'invariant';
 import * as React from 'react';
 
 import { type TunnelbrokerClientMessageToDevice } from 'lib/tunnelbroker/tunnelbroker-context.js';
 import {
   type EncryptedMessage,
   peerToPeerMessageTypes,
 } from 'lib/types/tunnelbroker/peer-to-peer-message-types.js';
 import { getContentSigningKey } from 'lib/utils/crypto-utils.js';
 
 import css from './tunnelbroker-test.css';
 import Button from '../components/button.react.js';
 import { olmAPI } from '../crypto/olm-api.js';
 import Input from '../modals/input.react.js';
 import Modal from '../modals/modal.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 type Props = {
   +sendMessage: (message: TunnelbrokerClientMessageToDevice) => 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<?HTMLInputElement>(null);
   const messageInput = React.useRef<?HTMLInputElement>(null);
 
   const currentUserID = useSelector(
     state => state.currentUserInfo && state.currentUserInfo.id,
   );
 
   const onSubmit = React.useCallback(
     async (event: SyntheticEvent<HTMLButtonElement>) => {
       event.preventDefault();
 
       setLoading(true);
       try {
         await sendMessage({ deviceID: recipient, payload: message });
       } catch (e) {
         setErrorMessage(e.message);
       }
       setLoading(false);
     },
     [message, recipient, sendMessage],
   );
 
   const onSubmitEncrypted = React.useCallback(
     async (event: SyntheticEvent<HTMLButtonElement>) => {
       event.preventDefault();
 
       if (!currentUserID) {
         return;
       }
 
       setLoading(true);
       try {
         await olmAPI.initializeCryptoAccount();
-        const encryptedData = await olmAPI.encrypt(
-          `Encrypted message to ${recipient}`,
-          recipient,
-        );
+        const encryptedData = await olmAPI.encrypt(message, recipient);
         const deviceID = await getContentSigningKey();
         const encryptedMessage: EncryptedMessage = {
           type: peerToPeerMessageTypes.ENCRYPTED_MESSAGE,
           senderInfo: {
             deviceID,
             userID: currentUserID,
           },
           encryptedData,
         };
         await sendMessage({
           deviceID: recipient,
           payload: JSON.stringify(encryptedMessage),
         });
       } catch (e) {
         setErrorMessage(e.message);
       }
       setLoading(false);
     },
-    [currentUserID, recipient, sendMessage],
+    [message, currentUserID, 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 className={css.footer}>
           <Button
             type="submit"
             variant="filled"
             onClick={onSubmitEncrypted}
             disabled={!recipient || loading}
           >
             Send Encrypted Message
           </Button>
           {errorMsg}
         </div>
       </div>
     </Modal>
   );
 }
 
 export default TunnelbrokerTestScreen;