diff --git a/CMakeLists.txt b/CMakeLists.txt
index fd8beda7..15e92a44 100644
--- a/CMakeLists.txt
+++ b/CMakeLists.txt
@@ -20,6 +20,7 @@ find_package(rosidl_default_generators REQUIRED)
 ##############################
 rosidl_generate_interfaces(${PROJECT_NAME}
   "action/MoveToPregrasp.action"
+  "msg/TextToSpeech.msg"
   DEPENDENCIES geometry_msgs
 )
 
@@ -40,6 +41,7 @@ install(PROGRAMS
   nodes/configure_video_streams.py
   nodes/move_to_pregrasp.py
   nodes/navigation_camera.py
+  nodes/text_to_speech.py
   DESTINATION lib/${PROJECT_NAME}
 )
 
diff --git a/launch/web_interface.launch.py b/launch/web_interface.launch.py
index 8f07da90..3b21051c 100644
--- a/launch/web_interface.launch.py
+++ b/launch/web_interface.launch.py
@@ -212,6 +212,11 @@ def generate_launch_description():
     map_yaml = DeclareLaunchArgument(
         "map_yaml", description="filepath to previously captured map", default_value=""
     )
+    tts_engine = DeclareLaunchArgument(
+        "tts_engine",
+        description="name of the TTS engine. Either pyttsx3 or gtts.",
+        default_value="gtts",
+    )
     certfile_arg = DeclareLaunchArgument(
         "certfile", default_value=stretch_serial_no + "+6.pem"
     )
@@ -230,6 +235,7 @@ def generate_launch_description():
     ld = LaunchDescription(
         [
             map_yaml,
+            tts_engine,
             nav2_params_file_param,
             params_file,
             certfile_arg,
@@ -531,4 +537,14 @@ def generate_launch_description():
         )
         ld.add_action(move_to_pregrasp_node)
 
+    # Text to speech
+    text_to_speech_node = Node(
+        package="stretch_web_teleop",
+        executable="text_to_speech.py",
+        output="screen",
+        arguments=[LaunchConfiguration("tts_engine")],
+        parameters=[],
+    )
+    ld.add_action(text_to_speech_node)
+
     return ld
diff --git a/launch_interface.sh b/launch_interface.sh
index 25c35524..b95b8580 100755
--- a/launch_interface.sh
+++ b/launch_interface.sh
@@ -7,6 +7,13 @@ if getopts ":m:" opt && [[ $opt == "m" && -f $OPTARG ]]; then
     MAP_ARG="map_yaml:=$OPTARG"
 fi
 
+# Usage: ./launch_interface.sh -t pyttsx3
+TTS_ARG=""
+if getopts ":t:" opt && [[ $opt == "t" ]]; then
+    echo "Setting tts engine..."
+    TTS_ARG="tts_engine:=$OPTARG"
+fi
+
 stretch_free_robot_process.py;
 ./stop_interface.sh
 sudo udevadm control --reload-rules && sudo udevadm trigger
@@ -14,6 +21,6 @@ source /opt/ros/humble/setup.bash
 source ~/ament_ws/install/setup.bash
 source /usr/share/colcon_cd/function/colcon_cd.sh
 sleep 2;
-screen -dm -S "web_teleop_ros" ros2 launch stretch_web_teleop web_interface.launch.py $MAP_ARG
+screen -dm -S "web_teleop_ros" ros2 launch stretch_web_teleop web_interface.launch.py $MAP_ARG $TTS_ARG
 sleep 3;
 ~/ament_ws/src/stretch_web_teleop/start_web_server_and_robot_browser.sh
diff --git a/msg/TextToSpeech.msg b/msg/TextToSpeech.msg
new file mode 100644
index 00000000..e6f2205a
--- /dev/null
+++ b/msg/TextToSpeech.msg
@@ -0,0 +1,16 @@
+# The text to say
+string text
+
+# The voice to use. Valid options for this depend on the engine.
+string voice
+
+# Whether to speak slow or not.
+bool is_slow
+
+# If a message is already being spoken, this flag controls what to do with this message:
+# add it to a queue to be executed sequentially (Default), or interrupt the
+# current message and queue to speak this message (in this case, the old queue gets
+# discarded).
+uint8 OVERRIDE_BEHAVIOR_QUEUE = 0
+uint8 OVERRIDE_BEHAVIOR_INTERRUPT = 1
+uint8 override_behavior
diff --git a/nodes/text_to_speech.py b/nodes/text_to_speech.py
new file mode 100755
index 00000000..7ee2b90e
--- /dev/null
+++ b/nodes/text_to_speech.py
@@ -0,0 +1,181 @@
+#!/usr/bin/env python3
+
+# Standard imports
+import sys
+import threading
+from typing import List, Optional
+
+# Third-party imports
+import rclpy
+import sounddevice  # suppress ALSA warnings # noqa: F401
+from rclpy.node import Node
+from rclpy.qos import QoSProfile, ReliabilityPolicy
+
+# Local Imports
+from stretch_web_teleop.msg import TextToSpeech
+from stretch_web_teleop_helpers.text_to_speech_helpers import (
+    GTTS,
+    PyTTSx3,
+    TextToSpeechEngine,
+    TextToSpeechEngineType,
+)
+
+
+class TextToSpeechNode(Node):
+    """
+    The TextToSpeech node subscribes to a stream of text-to-speech commands
+    from a topic and executes them.
+    """
+
+    def __init__(
+        self,
+        engine_type: TextToSpeechEngineType = TextToSpeechEngineType.PYTTSX3,
+        rate_hz: float = 5.0,
+    ):
+        """
+        Initialize the TextToSpeechNode.
+
+        Parameters
+        ----------
+        engine_type : TextToSpeechEngineType
+            The text-to-speech engine to use.
+        rate_hz : float
+            The rate at which to run the text-to-speech engine.
+        """
+        # Initialize the node
+        super().__init__("text_to_speech")
+
+        # Declare the attributes for the text-to-speech engine
+        self.engine_type = engine_type
+        self.engine: Optional[TextToSpeechEngine] = None
+        self.initialized = False
+
+        # Declare the attributes for the run thread
+        self.rate_hz = rate_hz
+        self.queue: List[TextToSpeech] = []
+        self.queue_lock = threading.Lock()
+
+        # Create the subscription
+        self.create_subscription(
+            TextToSpeech,
+            "text_to_speech",
+            self.text_to_speech_callback,
+            QoSProfile(depth=1, reliability=ReliabilityPolicy.RELIABLE),
+            callback_group=rclpy.callback_groups.MutuallyExclusiveCallbackGroup(),
+        )
+
+    def initialize(self):
+        """
+        Initialize the text-to-speech engine.
+        """
+        if self.engine_type == TextToSpeechEngineType.PYTTSX3:
+            self.engine = PyTTSx3(self.get_logger())
+            self.initialized = True
+        elif self.engine_type == TextToSpeechEngineType.GTTS:
+            self.engine = GTTS(self.get_logger())
+            self.initialized = True
+        else:
+            self.get_logger().error(f"Unsupported text-to-speech {self.engine_type}")
+
+    def text_to_speech_callback(self, msg: TextToSpeech):
+        """
+        Callback for the text-to-speech topic.
+
+        Parameters
+        ----------
+        msg : TextToSpeech
+            The message containing the text to speak.
+        """
+        self.get_logger().info(f"Received: {msg}")
+        # Interrupt if requested
+        if msg.override_behavior == TextToSpeech.OVERRIDE_BEHAVIOR_INTERRUPT:
+            if self.engine._can_say_async:
+                self.engine.stop()
+                with self.queue_lock:
+                    self.queue.clear()
+            else:
+                self.get_logger().warn("Engine does not support interrupting speech")
+
+        # Queue the text
+        if len(msg.text) > 0:
+            with self.queue_lock:
+                self.queue.append(msg)
+
+    def run(self):
+        """
+        Run the text-to-speech engine.
+        """
+        rate = self.create_rate(self.rate_hz)
+        while rclpy.ok():
+            # Sleep
+            rate.sleep()
+
+            # Send a single queued utterance to the text-to-speech engine
+            if not self.engine.is_speaking():
+                msg = None
+                with self.queue_lock:
+                    if len(self.queue) > 0:
+                        msg = self.queue.pop(0)
+                if msg is not None:
+                    # Process the voice
+                    if len(msg.voice) > 0:
+                        if msg.voice != self.engine.voice_id:
+                            self.engine.voice_id = msg.voice
+
+                    # Process the speed
+                    if msg.is_slow != self.engine.is_slow:
+                        self.engine.is_slow = msg.is_slow
+
+                    # Speak the text
+                    if self.engine._can_say_async:
+                        self.engine.say_async(msg.text)
+                    else:
+                        self.engine.say(msg.text)
+                    self.get_logger().info(f"Saying: {msg.text}")
+
+
+def main():
+    # Check the arguments
+    tts_engine = sys.argv[1]
+    tts_engine = tts_engine.lower()
+    tts_engine_map = {e.name.lower(): e for e in TextToSpeechEngineType}
+    if tts_engine not in tts_engine_map:
+        print(f"Invalid text-to-speech engine: {tts_engine}")
+        print(f"Options: {list(tts_engine_map.keys())}")
+        print("Defaulting to gtts")
+        tts_engine = "gtts"
+
+    rclpy.init()
+
+    node = TextToSpeechNode(
+        engine_type=tts_engine_map[tts_engine],
+    )
+    node.get_logger().info("Created!")
+
+    # Spin in the background, as the node initializes
+    executor = rclpy.executors.MultiThreadedExecutor(num_threads=4)
+    spin_thread = threading.Thread(
+        target=rclpy.spin,
+        args=(node,),
+        kwargs={"executor": executor},
+        daemon=True,
+    )
+    spin_thread.start()
+
+    # Run text-to-speech
+    try:
+        node.initialize()
+        node.get_logger().info("Running!")
+        node.run()
+    except KeyboardInterrupt:
+        pass
+
+    # Spin in the foreground
+    spin_thread.join()
+
+    node.destroy_node()
+    rclpy.shutdown()
+
+
+if __name__ == "__main__":
+    main()
diff --git a/requirements.txt b/requirements.txt
index ef061733..a065d358 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,7 +1,14 @@
+gTTS
 loguru
 # numpy 1.23.2 is not required for the web teleop interface, but is required
 # for stretch_body. If we diden't include it here, pin would update
 # to the latest version of numpy, breaking stretch_body.
 numpy==1.23.2
 pin
+PyAudio==0.2.14
+pydub
+# TODO: is pyquaternion still needed/used?
 pyquaternion
+pyttsx3
+simpleaudio
+sounddevice
diff --git a/src/pages/operator/css/MovementRecorder.css b/src/pages/operator/css/MovementRecorder.css
index fa813a00..4073246a 100644
--- a/src/pages/operator/css/MovementRecorder.css
+++ b/src/pages/operator/css/MovementRecorder.css
@@ -5,6 +5,11 @@
   justify-content: center;
 }
 
+/* The below buttons' CSS likely gets overridden by the TextToSpeech CSS
+ * for the same class names. It is not an issue now because they use the
+ * same styles, but may be an issue in the future if we change styles for
+ * one of the components.
+ */
 .play-btn {
   background-color: var(--selected-color);
   display: flex;
diff --git a/src/pages/operator/css/Operator.css b/src/pages/operator/css/Operator.css
index b0cdb988..3222a7e0 100644
--- a/src/pages/operator/css/Operator.css
+++ b/src/pages/operator/css/Operator.css
@@ -79,11 +79,12 @@
 .operator-voice,
 .operator-pose-library,
 .operator-pose-recorder,
+.operator-text-to-speech,
 .operator-aruco-markers {
   background-color: whitesmoke;
   box-shadow: var(--shadow);
   height: 6rem;
-  width: 40rem;
+  width: 50rem;
   display: inline-grid;
   align-items: center;
   justify-content: center;
@@ -113,6 +114,7 @@
 .operator-voice[hidden],
 .operator-pose-library[hidden],
 .operator-pose-recorder[hidden],
+.operator-text-to-speech[hidden],
 .operator-aruco-markers[hidden] {
   display: none;
 }
diff --git a/src/pages/operator/css/TextToSpeech.css b/src/pages/operator/css/TextToSpeech.css
new file mode 100644
index 00000000..f7bbbcae
--- /dev/null
+++ b/src/pages/operator/css/TextToSpeech.css
@@ -0,0 +1,60 @@
+#text-to-speech-container {
+  display: flex;
+  gap: 15px;
+  align-items: center;
+  justify-content: center;
+}
+
+.play-btn {
+  background-color: var(--selected-color);
+  display: flex;
+}
+
+.save-btn {
+  background-color: var(--btn-turquoise);
+  display: flex;
+}
+
+.stop-btn {
+  background-color: #cd0b0b;
+  color: white;
+  display: flex;
+}
+
+.delete-btn {
+  background-color: var(--btn-red);
+  display: flex;
+}
+
+@media (max-width: 1300px) {
+  #text-to-speech-container {
+    font-size: smaller;
+  }
+}
+
+.mobile-text-save-btn {
+  border-radius: 13px;
+  border: 5px solid whitesmoke;
+  font-size: 25px;
+  padding: 10px;
+  margin: 1rem;
+  text-align: center;
+  background: #06c7e1;
+  vertical-align: middle;
+  display: flex;
+  justify-content: center;
+}
+
+.mobile-text-play-btn {
+  /* width: 97%; */
+  border-radius: 13px;
+  border: 5px solid whitesmoke;
+  font-size: 20px;
+  padding: 10px;
+  margin: 0.5rem;
+  text-align: center;
+  background: #06c7e1;
+  vertical-align: middle;
+  display: flex;
+  justify-content: center;
+}
diff --git a/src/pages/operator/css/basic_components.css b/src/pages/operator/css/basic_components.css
index b78219dc..df24a91d 100644
--- a/src/pages/operator/css/basic_components.css
+++ b/src/pages/operator/css/basic_components.css
@@ -107,7 +107,8 @@
   position: relative;
 }
 
-.dropdown-button {
+.dropdown-button,
+.dropdown-input-button {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -118,13 +119,15 @@
   color: black;
 }
 
-.dropdown-button.expanded.bottom {
+.dropdown-button.expanded.bottom,
+.dropdown-input-button.expanded.bottom {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
   color: black;
 }
 
-.dropdown-button.expanded.top {
+.dropdown-button.expanded.top,
+.dropdown-input-button.expanded.top {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   margin: 0 !important;
@@ -132,29 +135,37 @@
 }
 
 /* Flip the dropdown arrow when active */
-.dropdown-button span {
+.dropdown-button span,
+.dropdown-input-button span {
   transition: transform 0.2s linear;
 }
 
-.dropdown-button.expanded span {
+.dropdown-button.expanded span,
+.dropdown-input-button.expanded span {
   transform: scaleY(-1);
 }
 
-.dropdown-popup {
+.dropdown-popup,
+.dropdown-input-popup {
   position: absolute;
   min-width: 100%;
   z-index: 3;
   box-shadow: var(--shadow);
   border-radius: 0 0 var(--btn-brdr-radius) var(--btn-brdr-radius);
+  top: 100%;
+  bottom: auto;
+  overflow-y: auto; /* Make it scrollable */
 }
 
-.dropdown-popup.top {
+.dropdown-popup.top,
+.dropdown-input-popup.top {
   top: auto;
   bottom: 100%;
   box-shadow: var(--shadow-bottom);
 }
 
-.dropdown-option {
+.dropdown-option,
+.dropdown-input-option {
   padding-top: 1rem;
   padding-bottom: 1rem;
   cursor: pointer;
@@ -166,22 +177,65 @@
   color: black;
 }
 
-.dropdown-option.active {
+.dropdown-option.active,
+.dropdown-input-option.active {
   filter: brightness(80%);
 }
 
-.dropdown-popup.top .dropdown-option:first-of-type {
+.dropdown-popup.top .dropdown-option:first-of-type,
+.dropdown-input-popup.top .dropdown-option:first-of-type {
   border-radius: var(--btn-brdr-radius) var(--btn-brdr-radius) 0 0;
 }
 
-.dropdown-popup.top .dropdown-option:last-of-type {
+.dropdown-popup.top .dropdown-option:last-of-type,
+.dropdown-input-popup.top .dropdown-option:last-of-type {
   box-shadow: none;
 }
 
-.dropdown-popup.bottom .dropdown-option:last-of-type {
+.dropdown-popup.bottom .dropdown-option:last-of-type,
+.dropdown-input-popup.bottom .dropdown-option:last-of-type {
   border-radius: 0 0 var(--btn-brdr-radius) var(--btn-brdr-radius);
 }
 
+/* Dropdown Input **************************************************************/
+
+.dropdown-input {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.dropdown-input:focus-within {
+  border: 1px solid black;
+  border-radius: 0 var(--btn-brdr-radius) var(--btn-brdr-radius) 0;
+}
+
+.dropdown-input-textarea {
+  border-right-width: 0px !important;
+  resize: none;
+  border-radius: var(--btn-brdr-radius) 0 0 var(--btn-brdr-radius);
+  box-shadow: var(--shadow);
+  border: none;
+  padding: 0.25rem 0 0.25rem 0.5rem;
+}
+
+.dropdown-input-textarea:focus {
+  border-radius: var(--btn-brdr-radius) 0 0 var(--btn-brdr-radius);
+  outline: none;
+}
+
+.dropdown-input-button {
+  width: auto !important;
+  padding-top: 0rem;
+  padding-bottom: 0rem;
+  box-shadow: none;
+  border-radius: 0 var(--btn-brdr-radius) var(--btn-brdr-radius) 0;
+  box-shadow: var(--shadow);
+  /* border: 1px solid light-dark(rgb(118, 118, 118), rgb(133, 133, 133)); */
+  border-left-width: 0px !important;
+}
+
 /* CheckToggleButton **********************************************************/
 
 .check-toggle-button {
diff --git a/src/pages/operator/tsx/Operator.tsx b/src/pages/operator/tsx/Operator.tsx
index cb3a4c5d..309427d5 100644
--- a/src/pages/operator/tsx/Operator.tsx
+++ b/src/pages/operator/tsx/Operator.tsx
@@ -38,6 +38,7 @@ import {
 import { MovementRecorder } from "./layout_components/MovementRecorder";
 import { Alert } from "./basic_components/Alert";
 import "operator/css/Operator.css";
+import { TextToSpeech } from "./layout_components/TextToSpeech";
 
 /** Operator interface webpage */
 export const Operator = (props: {
@@ -153,6 +154,17 @@ export const Operator = (props: {
     updateLayout();
   }
 
+  /**
+   * Sets the text-to-speech component to display or hidden.
+   *
+   * @param displayTextToSpeech whether the text-to-speech component should
+   *    be displayed.
+   */
+  function setDisplayTextToSpeech(displayTextToSpeech: boolean) {
+    layout.current.displayTextToSpeech = displayTextToSpeech;
+    updateLayout();
+  }
+
   /**
    * Sets the display labels property to display or hidden.
    *
@@ -259,8 +271,10 @@ export const Operator = (props: {
   /** Properties for the global options area of the sidebar */
   const globalOptionsProps: GlobalOptionsProps = {
     displayMovementRecorder: layout.current.displayMovementRecorder,
+    displayTextToSpeech: layout.current.displayTextToSpeech,
     displayLabels: layout.current.displayLabels,
     setDisplayMovementRecorder: setDisplayMovementRecorder,
+    setDisplayTextToSpeech: setDisplayTextToSpeech,
     setDisplayLabels: setDisplayLabels,
     defaultLayouts: Object.keys(DEFAULT_LAYOUTS),
     customLayouts: props.storageHandler.getCustomLayoutNames(),
@@ -360,6 +374,14 @@ export const Operator = (props: {
         >
           <MovementRecorder hideLabels={!layout.current.displayLabels} />
         </div>
+        <div
+          className={className("operator-text-to-speech", {
+            hideLabels: !layout.current.displayLabels,
+          })}
+          hidden={!layout.current.displayTextToSpeech}
+        >
+          <TextToSpeech hideLabels={!layout.current.displayLabels} />
+        </div>
       </div>
       <div id="operator-body">
         <LayoutArea layout={layout.current} sharedState={sharedState} />
diff --git a/src/pages/operator/tsx/basic_components/Dropdown.tsx b/src/pages/operator/tsx/basic_components/Dropdown.tsx
index e674d71f..6178c212 100644
--- a/src/pages/operator/tsx/basic_components/Dropdown.tsx
+++ b/src/pages/operator/tsx/basic_components/Dropdown.tsx
@@ -13,6 +13,7 @@ export const Dropdown = <T extends string | JSX.Element>(props: {
   const [showDropdown, setShowDropdown] = React.useState(false);
   const [placement, setPlacement] = React.useState(props.placement);
   const inputRef = React.useRef<HTMLDivElement>(null);
+  const dropdownPopupRef = React.useRef<HTMLDivElement>(null);
   if (props.selectedIndex === undefined && !props.placeholderText)
     throw Error("both selectedOption and placeholderText undefined");
 
@@ -31,6 +32,7 @@ export const Dropdown = <T extends string | JSX.Element>(props: {
     }
   });
 
+  // Function to convert each possible option into a button
   function mapFunc(option: T, idx: number) {
     const active = idx === props.selectedIndex;
     if (active && !props.showActive) return null;
@@ -48,6 +50,21 @@ export const Dropdown = <T extends string | JSX.Element>(props: {
     );
   }
 
+  // Set the max-height of the popup to the screen height minus the top of the popup
+  function resizeDropdownPopup() {
+    if (dropdownPopupRef.current) {
+      const top = dropdownPopupRef.current.getBoundingClientRect().top;
+      dropdownPopupRef.current.style.maxHeight = `calc(100vh - ${top}px)`;
+    }
+  }
+  React.useEffect(resizeDropdownPopup, [showDropdown]);
+  React.useEffect(() => {
+    window.addEventListener("resize", resizeDropdownPopup);
+    return () => {
+      window.removeEventListener("resize", resizeDropdownPopup);
+    };
+  });
+
   return (
     <div ref={inputRef} className="dropdown">
       <button
@@ -69,6 +86,7 @@ export const Dropdown = <T extends string | JSX.Element>(props: {
           top: props.placement == "top",
           bottom: props.placement == "bottom",
         })}
+        ref={dropdownPopupRef}
       >
         {props.possibleOptions.map(mapFunc)}
       </div>
diff --git a/src/pages/operator/tsx/basic_components/DropdownInput.tsx b/src/pages/operator/tsx/basic_components/DropdownInput.tsx
new file mode 100644
index 00000000..f2a84316
--- /dev/null
+++ b/src/pages/operator/tsx/basic_components/DropdownInput.tsx
@@ -0,0 +1,128 @@
+import React from "react";
+import { className } from "shared/util";
+import "operator/css/basic_components.css";
+import e from "express";
+import { text } from "stream/consumers";
+
+export const DropdownInput = <T extends string>(props: {
+  text: string;
+  setText: (text: string) => void;
+  selectedIndex?: number;
+  setSelectedIndex: (index?: number) => void;
+  possibleOptions: T[];
+  placeholderText: string;
+  placement: string;
+  rows: number;
+}) => {
+  const [showDropdown, setShowDropdown] = React.useState(false);
+  const componentRef = React.useRef<HTMLDivElement>(null);
+  const dropdownPopupRef = React.useRef<HTMLDivElement>(null);
+
+  // Handler to close dropdown when click outside
+  React.useEffect(() => {
+    const handler = (e: any) => {
+      if (componentRef.current && !componentRef.current.contains(e.target)) {
+        setShowDropdown(false);
+      }
+    };
+    if (showDropdown) {
+      window.addEventListener("click", handler);
+      return () => {
+        window.removeEventListener("click", handler);
+      };
+    }
+  });
+
+  // Handler to update the selected index if the possible options or text changes
+  React.useEffect(() => {
+    let text = props.text.trim();
+    if (props.possibleOptions.includes(text as T)) {
+      props.setSelectedIndex(props.possibleOptions.indexOf(text as T));
+    } else {
+      props.setSelectedIndex(undefined);
+    }
+  }, [props.possibleOptions, props.text]);
+
+  // Function to convert each possible option into a button
+  function mapFunc(option: T, idx: number) {
+    const active = idx === props.selectedIndex;
+    return (
+      <button
+        key={idx}
+        onClick={(e) => {
+          e.stopPropagation();
+          setShowDropdown(false);
+          props.setText(option as string);
+          if (!active) props.setSelectedIndex(idx);
+        }}
+        className={className("dropdown-input-option", { active })}
+      >
+        {option}
+      </button>
+    );
+  }
+
+  // Set the max-height of the popup to the screen height minus the top of the popup
+  function resizeDropdownPopup() {
+    if (dropdownPopupRef.current) {
+      const top = dropdownPopupRef.current.getBoundingClientRect().top;
+      dropdownPopupRef.current.style.maxHeight = `calc(100vh - ${top}px)`;
+    }
+  }
+  React.useEffect(resizeDropdownPopup, [showDropdown]);
+  React.useEffect(() => {
+    window.addEventListener("resize", resizeDropdownPopup);
+    return () => {
+      window.removeEventListener("resize", resizeDropdownPopup);
+    };
+  });
+
+  return (
+    <div ref={componentRef} className="dropdown-input">
+      <textarea
+        className="dropdown-input-textarea"
+        rows={props.rows}
+        value={props.text}
+        onClick={(e) => {
+          e.stopPropagation();
+          setShowDropdown(false);
+        }}
+        onFocus={(e) => {
+          e.stopPropagation();
+          e.target.select();
+        }}
+        onBlur={(e) => {
+          document.getSelection()?.empty();
+        }}
+        onChange={(e) => {
+          e.stopPropagation();
+          props.setText(e.target.value);
+        }}
+        placeholder={props.placeholderText}
+      />
+      <button
+        className={className("dropdown-input-button", {
+          expanded: showDropdown,
+          top: props.placement == "top",
+          bottom: props.placement == "bottom",
+        })}
+        onClick={(e) => {
+          e.stopPropagation();
+          setShowDropdown(!showDropdown);
+        }}
+      >
+        <span className="material-icons">expand_more</span>
+      </button>
+      <div
+        hidden={!showDropdown}
+        className={className("dropdown-input-popup", {
+          top: props.placement == "top",
+          bottom: props.placement == "bottom",
+        })}
+        ref={dropdownPopupRef}
+      >
+        {props.possibleOptions.map(mapFunc)}
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/operator/tsx/default_layouts/SIMPLE_LAYOUT.tsx b/src/pages/operator/tsx/default_layouts/SIMPLE_LAYOUT.tsx
index a0e74b6f..f95b7130 100644
--- a/src/pages/operator/tsx/default_layouts/SIMPLE_LAYOUT.tsx
+++ b/src/pages/operator/tsx/default_layouts/SIMPLE_LAYOUT.tsx
@@ -17,6 +17,7 @@ import {
 export const BASIC_LAYOUT: LayoutDefinition = {
   type: ComponentType.Layout,
   displayMovementRecorder: false,
+  displayTextToSpeech: false,
   displayLabels: true,
   actionMode: ActionMode.PressAndHold,
   children: [
diff --git a/src/pages/operator/tsx/function_providers/TextToSpeechFunctionProvider.tsx b/src/pages/operator/tsx/function_providers/TextToSpeechFunctionProvider.tsx
new file mode 100644
index 00000000..7249a897
--- /dev/null
+++ b/src/pages/operator/tsx/function_providers/TextToSpeechFunctionProvider.tsx
@@ -0,0 +1,42 @@
+import { FunctionProvider } from "./FunctionProvider";
+import { TextToSpeechFunction } from "../layout_components/TextToSpeech";
+import { StorageHandler } from "../storage_handler/StorageHandler";
+
+export class TextToSpeechFunctionProvider extends FunctionProvider {
+  private storageHandler: StorageHandler;
+
+  constructor(storageHandler: StorageHandler) {
+    super();
+    this.provideFunctions = this.provideFunctions.bind(this);
+    this.storageHandler = storageHandler;
+  }
+
+  public provideFunctions(textToSpeechFunction: TextToSpeechFunction) {
+    switch (textToSpeechFunction) {
+      case TextToSpeechFunction.Play:
+        return (text: string) => {
+          FunctionProvider.remoteRobot?.playTextToSpeech(
+            text,
+            0, // 0 to queue, 1 to interrupt
+            false, // false to speak normally, true to speak slowly
+          );
+        };
+      case TextToSpeechFunction.Stop:
+        return () => {
+          FunctionProvider.remoteRobot?.stopTextToSpeech();
+        };
+      case TextToSpeechFunction.SaveText:
+        return (text: string) => {
+          this.storageHandler.saveText(text);
+        };
+      case TextToSpeechFunction.DeleteText:
+        return (text: string) => {
+          this.storageHandler.deleteText(text);
+        };
+      case TextToSpeechFunction.SavedTexts:
+        return () => {
+          return this.storageHandler.getSavedTexts();
+        };
+    }
+  }
+}
diff --git a/src/pages/operator/tsx/index.tsx b/src/pages/operator/tsx/index.tsx
index 1b4b8d09..3ac2dff9 100644
--- a/src/pages/operator/tsx/index.tsx
+++ b/src/pages/operator/tsx/index.tsx
@@ -26,6 +26,7 @@ import { UnderVideoFunctionProvider } from "./function_providers/UnderVideoFunct
 import { MapFunctionProvider } from "./function_providers/MapFunctionProvider";
 import { UnderMapFunctionProvider } from "./function_providers/UnderMapFunctionProvider";
 import { MovementRecorderFunctionProvider } from "./function_providers/MovementRecorderFunctionProvider";
+import { TextToSpeechFunctionProvider } from "./function_providers/TextToSpeechFunctionProvider";
 import { MobileOperator } from "./MobileOperator";
 import { isMobile } from "react-device-detect";
 import "operator/css/index.css";
@@ -57,6 +58,7 @@ export var batteryVoltageFunctionProvider =
 export var mapFunctionProvider: MapFunctionProvider;
 export var underMapFunctionProvider: UnderMapFunctionProvider;
 export var movementRecorderFunctionProvider: MovementRecorderFunctionProvider;
+export var textToSpeechFunctionProvider: TextToSpeechFunctionProvider;
 
 // Create the WebRTC connection and connect the operator room
 connection = new WebRTCConnection({
@@ -206,6 +208,9 @@ function initializeOperator() {
     movementRecorderFunctionProvider = new MovementRecorderFunctionProvider(
       storageHandler,
     );
+    textToSpeechFunctionProvider = new TextToSpeechFunctionProvider(
+      storageHandler,
+    );
     renderOperator(storageHandler);
   };
   storageHandler = createStorageHandler(storageHandlerReadyCallback);
diff --git a/src/pages/operator/tsx/layout_components/CameraView.tsx b/src/pages/operator/tsx/layout_components/CameraView.tsx
index 46f6be4f..ddc8f538 100644
--- a/src/pages/operator/tsx/layout_components/CameraView.tsx
+++ b/src/pages/operator/tsx/layout_components/CameraView.tsx
@@ -1084,7 +1084,6 @@ const CameraPerspectiveButton = (props: {
 };
 
 function getGripperLabel(stretchTool: StretchTool) {
-  console.log("getGripperLabel stretchTool", stretchTool);
   switch (stretchTool) {
     case StretchTool.TABLET:
       return "Tablet";
diff --git a/src/pages/operator/tsx/layout_components/TextToSpeech.tsx b/src/pages/operator/tsx/layout_components/TextToSpeech.tsx
new file mode 100644
index 00000000..5309cfc9
--- /dev/null
+++ b/src/pages/operator/tsx/layout_components/TextToSpeech.tsx
@@ -0,0 +1,131 @@
+import React, { useEffect, useState } from "react";
+import { textToSpeechFunctionProvider } from "operator/tsx/index";
+import { DropdownInput } from "../basic_components/DropdownInput";
+import { Tooltip } from "../static_components/Tooltip";
+import "operator/css/TextToSpeech.css";
+import "operator/css/basic_components.css";
+import { isMobile } from "react-device-detect";
+
+/** All the possible button functions */
+export enum TextToSpeechFunction {
+  Play,
+  Stop,
+  SaveText,
+  DeleteText,
+  SavedTexts,
+}
+
+export interface TextToSpeechFunctions {
+  Play: (text: string) => void;
+  Stop: () => void;
+  SaveText: (text: string) => void;
+  DeleteText: (text: string) => void;
+  SavedTexts: () => string[];
+}
+
+export const TextToSpeech = (props: { hideLabels: boolean }) => {
+  let functions: TextToSpeechFunctions = {
+    SaveText: textToSpeechFunctionProvider.provideFunctions(
+      TextToSpeechFunction.SaveText,
+    ) as (name: string) => void,
+    DeleteText: textToSpeechFunctionProvider.provideFunctions(
+      TextToSpeechFunction.DeleteText,
+    ) as (text: string) => void,
+    SavedTexts: textToSpeechFunctionProvider.provideFunctions(
+      TextToSpeechFunction.SavedTexts,
+    ) as () => string[],
+    Play: textToSpeechFunctionProvider.provideFunctions(
+      TextToSpeechFunction.Play,
+    ) as (text: string) => void,
+    Stop: textToSpeechFunctionProvider.provideFunctions(
+      TextToSpeechFunction.Stop,
+    ) as () => void,
+  };
+
+  const [savedTexts, setSavedTexts] = useState<string[]>(
+    functions.SavedTexts(),
+  );
+  const [selectedIdx, setSelectedIdx] = React.useState<number | undefined>(
+    undefined,
+  );
+  const [text, setText] = React.useState<string>("");
+
+  return !isMobile ? (
+    <React.Fragment>
+      <div id="text-to-speech-container">Text-to-Speech</div>
+      <div id="text-to-speech-container">
+        <DropdownInput
+          text={text}
+          setText={setText}
+          selectedIndex={selectedIdx}
+          setSelectedIndex={setSelectedIdx}
+          possibleOptions={savedTexts}
+          placeholderText="Enter text..."
+          placement="bottom"
+          rows={2}
+        />
+        {/* Play the text */}
+        <Tooltip text="Play text" position="top">
+          <button
+            className="play-btn btn-label"
+            onClick={() => {
+              functions.Play(text);
+            }}
+          >
+            <span hidden={props.hideLabels}>Play</span>
+            <span className="material-icons">play_circle</span>
+          </button>
+        </Tooltip>
+        {/* Stop the playing text */}
+        <Tooltip text="Stop text" position="top">
+          <button
+            className="stop-btn btn-label"
+            onClick={() => {
+              functions.Stop();
+            }}
+          >
+            <span hidden={props.hideLabels}>Stop</span>
+            <span className="material-icons">stop_circle</span>
+          </button>
+        </Tooltip>
+        {/* If we are on saved text, then we show a delete button, else a save button. */}
+        {selectedIdx != undefined ? (
+          <Tooltip text="Delete text" position="top">
+            <button
+              className="delete-btn btn-label"
+              onClick={() => {
+                if (selectedIdx != undefined) {
+                  functions.DeleteText(text.trim());
+                }
+                setSavedTexts(functions.SavedTexts());
+                setSelectedIdx(undefined);
+              }}
+            >
+              <span hidden={props.hideLabels}>Delete</span>
+              <span className="material-icons">delete_forever</span>
+            </button>
+          </Tooltip>
+        ) : (
+          <Tooltip text={"Save text"} position="top">
+            <button
+              className="save-btn btn-label"
+              onClick={() => {
+                functions.SaveText(text.trim());
+                setSavedTexts(functions.SavedTexts());
+              }}
+            >
+              <i hidden={props.hideLabels}>Save</i>
+              <span className="material-icons">save</span>
+            </button>
+          </Tooltip>
+        )}
+      </div>
+    </React.Fragment>
+  ) : (
+    <React.Fragment>
+      <div id="text-to-speech-container">
+        Text-to-speech not yet implemented for mobile
+      </div>
+    </React.Fragment>
+  );
+};
diff --git a/src/pages/operator/tsx/static_components/Sidebar.tsx b/src/pages/operator/tsx/static_components/Sidebar.tsx
index 02b6a035..b53a834d 100644
--- a/src/pages/operator/tsx/static_components/Sidebar.tsx
+++ b/src/pages/operator/tsx/static_components/Sidebar.tsx
@@ -108,6 +108,10 @@ export type GlobalOptionsProps = {
   displayMovementRecorder: boolean;
   setDisplayMovementRecorder: (displayMovementRecorder: boolean) => void;
 
+  /** If the text-to-speech component should be displayed */
+  displayTextToSpeech: boolean;
+  setDisplayTextToSpeech: (displayTextToSpeech: boolean) => void;
+
   /** If the button text labels should be displayed */
   displayLabels: boolean;
   setDisplayLabels: (displayLabels: boolean) => void;
@@ -152,6 +156,13 @@ const SidebarGlobalOptions = (props: GlobalOptionsProps) => {
           }
           label="Display movement recorder"
         />
+        <OnOffToggleButton
+          on={!props.displayTextToSpeech}
+          onClick={() =>
+            props.setDisplayTextToSpeech(!props.displayTextToSpeech)
+          }
+          label="Display text-to-speech"
+        />
         <button onClick={() => setShowLoadLayoutModal(true)}>
           Load layout
         </button>
diff --git a/src/pages/operator/tsx/storage_handler/FirebaseStorageHandler.tsx b/src/pages/operator/tsx/storage_handler/FirebaseStorageHandler.tsx
index a61e154b..882e8b94 100644
--- a/src/pages/operator/tsx/storage_handler/FirebaseStorageHandler.tsx
+++ b/src/pages/operator/tsx/storage_handler/FirebaseStorageHandler.tsx
@@ -43,6 +43,7 @@ export class FirebaseStorageHandler extends StorageHandler {
   private mapPoses: { [name: string]: ROSLIB.Transform };
   private mapPoseTypes: { [name: string]: string };
   private recordings: { [name: string]: RobotPose[] };
+  private textToSpeech: string[];
   private markerNames: string[];
   private markerIDs: string[];
   private markerInfo: ArucoMarkersInfo;
@@ -66,6 +67,7 @@ export class FirebaseStorageHandler extends StorageHandler {
     this.mapPoses = {};
     this.mapPoseTypes = {};
     this.recordings = {};
+    this.textToSpeech = [];
     this.markerNames = [];
     this.markerIDs = [];
     this.markerInfo = {} as ArucoMarkersInfo;
@@ -86,6 +88,7 @@ export class FirebaseStorageHandler extends StorageHandler {
           this.mapPoses = userData.map_poses;
           this.mapPoseTypes = userData.map_pose_types;
           this.recordings = userData.recordings;
+          this.textToSpeech = userData.text_to_speech;
 
           this.onReadyCallback();
         })
@@ -254,4 +257,34 @@ export class FirebaseStorageHandler extends StorageHandler {
     delete this.recordings[recordingName];
     this.writeRecordings(this.recordings);
   }
+
+  /**
+   * NOTE: The below four text-to-speech functions have NOT been tested.
+   */
+
+  public getSavedTexts(): string[] {
+    if (!this.textToSpeech) return [];
+    return this.textToSpeech;
+  }
+
+  public saveText(text: string): void {
+    if (this.textToSpeech.includes(text)) return;
+    this.textToSpeech.push(text);
+    this.writeTextToSpeech(this.textToSpeech);
+  }
+
+  private async writeTextToSpeech(textToSpeech: string[]) {
+    this.textToSpeech = textToSpeech;
+
+    let updates: any = {};
+    updates["/users/" + this.uid + "/text_to_speech"] = textToSpeech;
+    return update(ref(this.database), updates);
+  }
+
+  public deleteText(text: string): void {
+    if (!this.textToSpeech.includes(text)) return;
+    const index = this.textToSpeech.indexOf(text);
+    this.textToSpeech.splice(index, 1);
+    this.writeTextToSpeech(this.textToSpeech);
+  }
 }
diff --git a/src/pages/operator/tsx/storage_handler/LocalStorageHandler.tsx b/src/pages/operator/tsx/storage_handler/LocalStorageHandler.tsx
index ad4768f2..4ce660f8 100644
--- a/src/pages/operator/tsx/storage_handler/LocalStorageHandler.tsx
+++ b/src/pages/operator/tsx/storage_handler/LocalStorageHandler.tsx
@@ -11,6 +11,7 @@ export class LocalStorageHandler extends StorageHandler {
   public static MAP_POSE_NAMES_KEY = "user_map_pose_names";
   public static MAP_POSE_TYPES_KEY = "user_map_pose_types";
   public static POSE_RECORDING_NAMES_KEY = "user_pose_recording_names";
+  public static TEXT_TO_SPEECH_KEY = "text_to_speech";
 
   constructor(onStorageHandlerReadyCallback: () => void) {
     super(onStorageHandlerReadyCallback);
@@ -173,4 +174,33 @@ export class LocalStorageHandler extends StorageHandler {
       JSON.stringify(recordingNames),
     );
   }
+
+  public getSavedTexts(): string[] {
+    const storedJson = localStorage.getItem(
+      LocalStorageHandler.TEXT_TO_SPEECH_KEY,
+    );
+    if (!storedJson) return [];
+    return JSON.parse(storedJson);
+  }
+
+  public saveText(text: string): void {
+    const texts = this.getSavedTexts();
+    if (texts.includes(text)) return;
+    texts.push(text);
+    localStorage.setItem(
+      LocalStorageHandler.TEXT_TO_SPEECH_KEY,
+      JSON.stringify(texts),
+    );
+  }
+
+  public deleteText(text: string): void {
+    const texts = this.getSavedTexts();
+    if (!texts.includes(text)) return;
+    const index = texts.indexOf(text);
+    texts.splice(index, 1);
+    localStorage.setItem(
+      LocalStorageHandler.TEXT_TO_SPEECH_KEY,
+      JSON.stringify(texts),
+    );
+  }
 }
diff --git a/src/pages/operator/tsx/storage_handler/StorageHandler.tsx b/src/pages/operator/tsx/storage_handler/StorageHandler.tsx
index b4a85153..79aa7b16 100644
--- a/src/pages/operator/tsx/storage_handler/StorageHandler.tsx
+++ b/src/pages/operator/tsx/storage_handler/StorageHandler.tsx
@@ -133,6 +133,24 @@ export abstract class StorageHandler {
    */
   public abstract deleteRecording(recordingName: string): void;
 
+  /**
+   * Gets all the text to speech messages saved by the user.
+   * @returns list of all saved text to speech messages
+   */
+  public abstract getSavedTexts(): string[];
+
+  /**
+   * Saves a text to speech message to the storage device.
+   * @param text the text to save
+   */
+  public abstract saveText(text: string): void;
+
+  /**
+   * Deletes a text to speech message from the storage device.
+   * @param text the text to delete
+   */
+  public abstract deleteText(text: string): void;
+
   /**
    * Gets the last saved state from the user's layout, or gets the default
    * layout if the user has no saved state.
diff --git a/src/pages/operator/tsx/utils/component_definitions.tsx b/src/pages/operator/tsx/utils/component_definitions.tsx
index b3834dea..06eb9cde 100644
--- a/src/pages/operator/tsx/utils/component_definitions.tsx
+++ b/src/pages/operator/tsx/utils/component_definitions.tsx
@@ -88,6 +88,7 @@ export type ParentComponentDefinition = ComponentDefinition & {
 
 export type LayoutDefinition = ComponentDefinition & {
   displayMovementRecorder: boolean;
+  displayTextToSpeech: boolean;
   displayLabels: boolean;
   actionMode: ActionMode;
   children: LayoutGridDefinition[];
diff --git a/src/pages/robot/tsx/index.tsx b/src/pages/robot/tsx/index.tsx
index 33ab8846..3d90be88 100644
--- a/src/pages/robot/tsx/index.tsx
+++ b/src/pages/robot/tsx/index.tsx
@@ -297,6 +297,17 @@ function handleMessage(message: WebRTCMessage) {
       break;
     case "getStretchTool":
       robot.getStretchTool();
+      break;
+    case "playTextToSpeech":
+      robot.playTextToSpeech(
+        message.text,
+        message.override_behavior,
+        message.is_slow,
+      );
+      break;
+    case "stopTextToSpeech":
+      robot.stopTextToSpeech();
+      break;
   }
 }
 
diff --git a/src/pages/robot/tsx/robot.tsx b/src/pages/robot/tsx/robot.tsx
index 4ae54c60..a4ed6775 100644
--- a/src/pages/robot/tsx/robot.tsx
+++ b/src/pages/robot/tsx/robot.tsx
@@ -69,6 +69,7 @@ export class Robot extends React.Component {
   private subscriptions: ROSLIB.Topic[] = [];
   private hasBetaTeleopKitParam: ROSLIB.Param;
   private stretchToolParam: ROSLIB.Param;
+  private textToSpeechTopic?: ROSLIB.Topic;
 
   constructor(props: {
     jointStateCallback: (
@@ -154,6 +155,7 @@ export class Robot extends React.Component {
     this.createMapFrameTFClient();
     this.subscribeToHeadTiltTF();
     this.subscribeToMapTF();
+    this.createTextToSpeechTopic();
 
     return Promise.resolve();
   }
@@ -397,6 +399,14 @@ export class Robot extends React.Component {
     });
   }
 
+  createTextToSpeechTopic() {
+    this.textToSpeechTopic = new ROSLIB.Topic({
+      ros: this.ros,
+      name: "/text_to_speech",
+      messageType: "stretch_web_teleop/msg/TextToSpeech",
+    });
+  }
+
   createSwitchToNavigationService() {
     this.switchToNavigationService = new ROSLIB.Service({
       ros: this.ros,
@@ -574,7 +584,7 @@ export class Robot extends React.Component {
         z: props.angVel,
       },
     });
-    if (!this.cmdVelTopic) throw "trajectoryClient is undefined";
+    if (!this.cmdVelTopic) throw "cmdVelTopic is undefined";
     console.log("Publishing base velocity twist message");
     this.cmdVelTopic.publish(twist);
   };
@@ -946,4 +956,29 @@ export class Robot extends React.Component {
 
     return inCollision;
   }
+
+  playTextToSpeech(
+    text: string,
+    override_behavior: number = 0,
+    is_slow: boolean = false,
+  ) {
+    if (!this.textToSpeechTopic) throw "textToSpeechTopic is undefined";
+    if (override_behavior != 0 && override_behavior != 1) {
+      console.log(
+        "override behavior must be 0 (queue) or 1 (interrupt). Setting to 0.",
+      );
+      override_behavior = 0;
+    }
+    let message = new ROSLIB.Message({
+      text: text,
+      is_slow: is_slow,
+      override_behavior: override_behavior,
+    });
+    this.textToSpeechTopic.publish(message);
+  }
+
+  stopTextToSpeech() {
+    // Send an empty string and override behavior 1 to interrupt the current speech
+    this.playTextToSpeech("", 1);
+  }
 }
diff --git a/src/shared/commands.tsx b/src/shared/commands.tsx
index 90f3f2f8..585a97a3 100644
--- a/src/shared/commands.tsx
+++ b/src/shared/commands.tsx
@@ -19,7 +19,9 @@ export type cmd =
   | PlaybackPosesCommand
   | GetBatteryVoltageCommand
   | GetHasBetaTeleopKit
-  | GetStretchTool;
+  | GetStretchTool
+  | PlayTextToSpeech
+  | StopTextToSpeech;
 
 export interface VelocityCommand {
   stop: () => void;
@@ -112,3 +114,14 @@ export interface StopMoveToPregraspCommand {
 export interface GetBatteryVoltageCommand {
   type: "getBatteryVoltage";
 }
+
+export interface PlayTextToSpeech {
+  type: "playTextToSpeech";
+  text: string;
+  override_behavior: number;
+  is_slow: boolean;
+}
+
+export interface StopTextToSpeech {
+  type: "stopTextToSpeech";
+}
diff --git a/src/shared/remoterobot.tsx b/src/shared/remoterobot.tsx
index 1f0b9908..b68bcd96 100644
--- a/src/shared/remoterobot.tsx
+++ b/src/shared/remoterobot.tsx
@@ -13,6 +13,8 @@ import {
   GetOccupancyGrid,
   MoveBaseCommand,
   PlaybackPosesCommand,
+  PlayTextToSpeech,
+  StopTextToSpeech,
 } from "shared/commands";
 import {
   ValidJointStateDict,
@@ -219,6 +221,37 @@ export class RemoteRobot extends React.Component<{}, any> {
   stopMoveToPregrasp() {
     this.robotChannel({ type: "stopMoveToPregrasp" });
   }
+
+  /**
+   * Speak the specified text.
+   *
+   * @param text text to speak
+   * @param override_behavior 0 to queue, 1 to interrupt
+   * @param is_slow False for normal speed, True for slow speed
+   */
+  playTextToSpeech(
+    text: string,
+    override_behavior: number = 0,
+    is_slow: boolean = false,
+  ) {
+    let cmd: PlayTextToSpeech = {
+      type: "playTextToSpeech",
+      text: text,
+      override_behavior: override_behavior,
+      is_slow: is_slow,
+    };
+    this.robotChannel(cmd);
+  }
+
+  /**
+   * Stop the text that is currently being spoken.
+   */
+  stopTextToSpeech() {
+    let cmd: StopTextToSpeech = {
+      type: "stopTextToSpeech",
+    };
+    this.robotChannel(cmd);
+  }
 }
 
 class RobotSensors extends React.Component {
diff --git a/stretch_web_teleop_helpers/text_to_speech_helpers.py b/stretch_web_teleop_helpers/text_to_speech_helpers.py
new file mode 100644
index 00000000..fc177df0
--- /dev/null
+++ b/stretch_web_teleop_helpers/text_to_speech_helpers.py
@@ -0,0 +1,311 @@
+# Standard imports
+from abc import ABC, abstractmethod
+from enum import Enum
+from io import BytesIO
+from typing import List, Optional
+
+# Third-party imports
+import pyttsx3
+import simpleaudio
+import sounddevice  # suppress ALSA warnings # noqa: F401
+from gtts import gTTS
+from pydub import AudioSegment
+from rclpy.impl.rcutils_logger import RcutilsLogger
+
+
+class TextToSpeechEngineType(Enum):
+    """
+    The TextToSpeechEngineType class enumerates the possible text-to-speech
+    engines.
+    """
+
+    PYTTSX3 = 1
+    GTTS = 2
+
+
+class TextToSpeechEngine(ABC):
+    """
+    Abstract base class for a text-to-speech engine that supports:
+      - Setting the voice ID.
+      - Setting the speed to default or slow.
+      - Asynchronously speaking text.
+      - Interrupting speech.
+    """
+
+    def __init__(self, logger: RcutilsLogger):
+        """
+        Initialize the text-to-speech engine.
+
+        Parameters
+        ----------
+        logger : Logger
+            The logger to use for logging messages.
+        """
+        self._logger = logger
+        self._voice_ids: List[str] = []
+        self._voice_id = ""
+        self._is_slow = False
+
+        # Whether or not this engine can speak asynchronously or not.
+        self._can_say_async = False
+
+    @property
+    def voice_ids(self) -> List[str]:
+        """
+        Get the list of voice IDs available for the text-to-speech engine.
+        """
+        return self._voice_ids
+
+    @property
+    def voice_id(self) -> str:
+        """
+        Get the current voice ID for the text-to-speech engine.
+        """
+        return self._voice_id
+
+    @voice_id.setter
+    def voice_id(self, voice_id: str) -> None:
+        """
+        Set the current voice ID for the text-to-speech engine.
+        """
+        if voice_id in self._voice_ids:
+            self._voice_id = voice_id
+        else:
+            self._logger.error(f"Invalid voice ID: {voice_id}")
+
+    @property
+    def is_slow(self) -> bool:
+        """
+        Get whether the text-to-speech engine is set to speak slowly.
+        """
+        return self._is_slow
+
+    @is_slow.setter
+    def is_slow(self, is_slow: bool):
+        """
+        Set whether the text-to-speech engine is set to speak slowly.
+        """
+        self._is_slow = is_slow
+
+    @abstractmethod
+    def say_async(self, text: str):
+        """
+        Speak the given text asynchronously.
+        """
+        raise NotImplementedError
+
+    @abstractmethod
+    def is_speaking(self) -> bool:
+        """
+        Return whether the text-to-speech engine is currently speaking.
+        """
+        raise NotImplementedError
+
+    @abstractmethod
+    def say(self, text: str):
+        """
+        Speak the given text synchronously.
+        """
+        raise NotImplementedError
+
+    @abstractmethod
+    def stop(self):
+        """
+        Stop speaking the current text.
+        """
+        raise NotImplementedError
+
+
+class PyTTSx3(TextToSpeechEngine):
+    """
+    Text-to-speech engine using pyttsx3. A big benefit of pyttsx3 compared
+    to other enginers is that it runs offline. However, its Linux voices tend
+    to be less natural than other engines.
+    """
+
+    def __init__(self, logger: RcutilsLogger):
+        """
+        Initialize the text-to-speech engine.
+
+        Parameters
+        ----------
+        logger : Logger
+            The logger to use for logging messages.
+        """
+        super().__init__(logger)
+        self._engine = pyttsx3.init()
+
+        # Initialize the voices
+        voices = self._engine.getProperty("voices")
+        # Variants documentation: https://espeak.sourceforge.net/languages.html
+        variants = [
+            "m1",
+            "m2",
+            "m3",
+            "m4",
+            "m5",
+            "m6",
+            "m7",
+            "f1",
+            "f2",
+            "f3",
+            "f4",
+            "croak",
+            "whisper",
+        ]
+        for voice in voices:
+            self._voice_ids.append(voice.id)
+            for variant in variants:
+                self._voice_ids.append(voice.id + "+" + variant)
+        self.voice_id = "default"
+
+        # Initialize the speeds
+        self.slow_speed = 100  # wpm
+        self.default_speed = 150  # wpm
+
+    @TextToSpeechEngine.voice_id.setter  # type: ignore
+    def voice_id(self, voice_id: str) -> None:
+        """
+        Set the current voice ID for the text-to-speech engine.
+        """
+        self._voice_id = voice_id
+        self._engine.setProperty("voice", voice_id)
+
+    @TextToSpeechEngine.is_slow.setter  # type: ignore
+    def is_slow(self, is_slow: bool):
+        """
+        Set whether the text-to-speech engine is set to speak slowly.
+        """
+        self._is_slow = is_slow
+        if is_slow:
+            self._engine.setProperty("rate", self.slow_speed)
+        else:
+            self._engine.setProperty("rate", self.default_speed)
+
+    def say_async(self, text: str):
+        """
+        Speak the given text asynchronously.
+        """
+        self._logger.warn(
+            "Asynchronous speaking is not supported for PyTTSx3 on Linux."
+        )
+
+    def is_speaking(self) -> bool:
+        """
+        Return whether the text-to-speech engine is currently speaking.
+        """
+        # Because asynchronous speaking is not supported in pyttsxy on Linux,
+        # if this function is called, it is assumed that the engine is not speaking.
+        # This works as long as `is_speaking` and `say` will be called from
+        # the same thread.
+        return False
+
+    def say(self, text: str):
+        """
+        Speak the given text synchronously.
+        """
+        self._engine.say(text)
+        self._engine.runAndWait()
+
+    def stop(self):
+        """
+        Stop speaking the current text.
+        """
+        # Although interruptions are nominally supported in pyttsx3
+        # (https://pyttsx3.readthedocs.io/en/latest/engine.html#examples),
+        # in practice, the Linux implementation spins of an ffmpeg process
+        # which can't be interrupted in its current implementation:
+        # https://github.com/nateshmbhat/pyttsx3/blob/5d3755b060a980f48fcaf81df018dd06cbd17a8f/pyttsx3/drivers/espeak.py#L175 # noqa: E501
+        self._logger.warn(
+            "Asynchronous stopping is not supported for PyTTSx3 on Linux."
+        )
+
+
+class GTTS(TextToSpeechEngine):
+    """
+    Text-to-speech engine using gTTS.
+    """
+
+    def __init__(self, logger: RcutilsLogger):
+        """
+        Initialize the text-to-speech engine.
+
+        Parameters
+        ----------
+        logger : Logger
+            The logger to use for logging messages.
+        """
+        super().__init__(logger)
+        self._can_say_async = True
+
+        # Initialize the voices.
+        # https://gtts.readthedocs.io/en/latest/module.html#gtts.lang.tts_langs
+        self._voice_ids = [
+            "com",  # Default
+            "us",  # United States
+            "com.au",  # Australia
+            "co.uk",  # United Kingdom
+            "ca",  # Canada
+            "co.in",  # India
+            "ie",  # Ireland
+            "co.za",  # South Africa
+            "com.ng",  # Nigeria
+        ]
+        self.voice_id = "com"
+        self._playback: Optional[simpleaudio.PlayObject] = None
+
+    def __synthesize_and_play_text(self, text: str) -> simpleaudio.PlayObject:
+        """
+        Get the playback object for the given text.
+
+        Parameters
+        ----------
+        text : str
+            The text to speak.
+
+        Returns
+        -------
+        simpleaudio.PlayObject
+            The playback object.
+        """
+        tts = gTTS(text=text, lang="en", tld=self.voice_id, slow=self.is_slow)
+        fp = BytesIO()
+        tts.write_to_fp(fp)
+        fp.seek(0)
+        audio = AudioSegment.from_file(fp, format="mp3")
+        self._playback = simpleaudio.play_buffer(
+            audio.raw_data, audio.channels, audio.sample_width, audio.frame_rate
+        )
+
+    def say_async(self, text: str):
+        """
+        Speak the given text asynchronously.
+        """
+        self.__synthesize_and_play_text(text)
+
+    def is_speaking(self) -> bool:
+        """
+        Return whether the text-to-speech engine is currently speaking.
+        """
+        if self._playback is None:
+            return False
+        if not self._playback.is_playing():
+            self._playback = None
+            return False
+        return True
+
+    def say(self, text: str):
+        """
+        Speak the given text synchronously.
+        """
+        self.__synthesize_and_play_text(text)
+        self._playback.wait_done()
+        self._playback = None
+
+    def stop(self):
+        """
+        Stop speaking the current text.
+        """
+        if self._playback is not None:
+            self._playback.stop()
+            self._playback = None