diff --git a/locales/en-US/server.ftl b/locales/en-US/server.ftl
index 52795ef9c9..efc8d60321 100644
--- a/locales/en-US/server.ftl
+++ b/locales/en-US/server.ftl
@@ -185,6 +185,8 @@ annotationUndoButton =
     .title = Undo
 annotationRedoButton =
     .title = Redo
+annotationTextButton =
+    .title = Add text
 # Note: This button reverts all the changes on the image since the start of the editing session.
 annotationClearButton =
     .title = Clear
@@ -217,6 +219,18 @@ annotationColorSeaGreen =
 annotationColorGrey =
     .title = Grey
 
+# Note: annotationTextSize is a title for text size selection dropdown.
+annotationTextSize =
+    .title = Text size
+# Values shown in text size selection dropdown
+textSizeSmall = Small
+textSizeMedium = Medium
+textSizeLarge = Large
+# Confirm and Cancel button title shown when using text tool
+annotationTextConfirmButton =
+    .title = Confirm
+annotationTextCancelButton =
+    .title = Cancel
 
 ## Settings Page
 
diff --git a/server/src/pages/shot/color-picker.js b/server/src/pages/shot/color-picker.js
index cdcc7f3b12..ec995a15c4 100644
--- a/server/src/pages/shot/color-picker.js
+++ b/server/src/pages/shot/color-picker.js
@@ -10,7 +10,8 @@ exports.ColorPicker = class ColorPicker extends React.Component {
     this.keyMaybeClose = this.keyMaybeClose.bind(this);
     this.state = {
       pickerActive: false,
-      color: props.color || "#000"
+      color: props.color || "#000",
+      colorName: props.colorName || "black"
     };
     this.elRef = React.createRef();
   }
@@ -108,8 +109,8 @@ exports.ColorPicker = class ColorPicker extends React.Component {
   onClickSwatch(e) {
     const color = e.target.style.backgroundColor;
     const title = e.target.title.toLowerCase().replace(/\s/g, "-");
-    this.setState({color, pickerActive: false});
-    this.props.setColorCallback && this.props.setColorCallback(color);
+    this.setState({color, colorName: title, pickerActive: false});
+    this.props.setColorCallback && this.props.setColorCallback(color, title);
     sendEvent(`${title}-select`, "annotation-color-board");
   }
 
@@ -122,5 +123,6 @@ exports.ColorPicker = class ColorPicker extends React.Component {
 
 exports.ColorPicker.propTypes = {
   color: PropTypes.string,
+  colorName: PropTypes.string,
   setColorCallback: PropTypes.func
 };
diff --git a/server/src/pages/shot/editor.js b/server/src/pages/shot/editor.js
index c27666adee..8a81a5f28e 100644
--- a/server/src/pages/shot/editor.js
+++ b/server/src/pages/shot/editor.js
@@ -5,6 +5,7 @@ const sendEvent = require("../../browser-send-event.js");
 const { PenTool } = require("./pen-tool");
 const { HighlighterTool } = require("./highlighter-tool");
 const { CropTool } = require("./crop-tool");
+const { TextTool } = require("./text-tool");
 const { ColorPicker } = require("./color-picker");
 const { EditorHistory, RecordType } = require("./editor-history");
 const { Selection } = require("../../../shared/selection");
@@ -17,6 +18,7 @@ exports.Editor = class Editor extends React.Component {
       canvasCssHeight: Math.floor(this.props.clip.image.dimensions.y),
       tool: "",
       color: "",
+      colorName: "",
       lineWidth: "",
       actionsDisabled: true,
       canUndo: false,
@@ -50,6 +52,7 @@ exports.Editor = class Editor extends React.Component {
     this.setState({
       tool: "pen",
       color: "#000",
+      colorName: "black",
       lineWidth: 5,
       actionsDisabled: true
     });
@@ -138,6 +141,18 @@ exports.Editor = class Editor extends React.Component {
           cancelCropHandler={this.onClickCancelCrop.bind(this)}
           confirmCropHandler={this.onCropUpdate.bind(this)}
           toolbarOverrideCallback={this.overrideToolbar.bind(this)} />;
+      case "textTool":
+        return <TextTool
+          ref={this.selectedTool}
+          color={this.state.color}
+          colorName={this.state.colorName}
+          baseCanvas={this.imageCanvas}
+          canvasPixelRatio={this.state.canvasPixelRatio}
+          canvasCssWidth={this.state.canvasCssWidth}
+          canvasCssHeight={this.state.canvasCssHeight}
+          cancelTextHandler={this.onClickCancelText.bind(this)}
+          confirmTextHandler={this.onClickUpdateText.bind(this)}
+          toolbarOverrideCallback={this.overrideToolbar.bind(this)} />;
       default:
         return null;
     }
@@ -181,9 +196,12 @@ exports.Editor = class Editor extends React.Component {
           <Localized id="annotationHighlighterButton">
             <button className={`button transparent highlight-button ${highlighterState}`} id="highlight" onClick={this.onClickHighlight.bind(this)} title="Highlighter"></button>
           </Localized>
+          <Localized id="annotationTextButton">
+            <button className={`button transparent text-button`} id="text" onClick={this.onClickText.bind(this)} title="Text"></button>
+          </Localized>
           <ColorPicker activeTool={this.state.tool}
             setColorCallback={this.setColor.bind(this)}
-            color={this.state.color} />
+            color={this.state.color} colorName = {this.state.colorName}/>
           <span className="annotation-divider"></span>
           <Localized id="annotationUndoButton">
             <button className={`button transparent undo-button ${undoButtonState}`} id="undo"
@@ -210,8 +228,8 @@ exports.Editor = class Editor extends React.Component {
     </div>;
   }
 
-  setColor(color) {
-    this.setState({color});
+  setColor(color, colorName) {
+    this.setState({color, colorName});
   }
 
   renderShotsLoading() {
@@ -360,6 +378,35 @@ exports.Editor = class Editor extends React.Component {
     }
   }
 
+  onClickText() {
+    this.previousTool = this.state.tool;
+    this.setState({tool: "textTool"});
+    sendEvent("text-select", "annotation-toolbar");
+  }
+
+  onClickUpdateText(affectedArea, incomingCanvas) {
+    if (!affectedArea || !incomingCanvas) {
+      this.setState({tool: this.previousTool});
+      return;
+    }
+    this.history.pushDiff(this.imageCanvas, affectedArea);
+
+    this.imageContext.globalCompositeOperation = "source-over";
+    this.imageContext.drawImage(incomingCanvas,
+      affectedArea.left * this.state.canvasPixelRatio,
+      affectedArea.top * this.state.canvasPixelRatio,
+      affectedArea.width * this.state.canvasPixelRatio,
+      affectedArea.height * this.state.canvasPixelRatio,
+      affectedArea.left, affectedArea.top, affectedArea.width, affectedArea.height);
+    this.setState({tool: this.previousTool});
+    this.deriveButtonStates();
+  }
+
+  onClickCancelText() {
+    this.setState({tool: this.previousTool});
+  }
+
+
   onMouseUp(e) {
     // This is here so that when the user releases the mouse button outside of
     // the canvas area, the drawing will stop.
diff --git a/server/src/pages/shot/text-tool.js b/server/src/pages/shot/text-tool.js
new file mode 100644
index 0000000000..85780c74f6
--- /dev/null
+++ b/server/src/pages/shot/text-tool.js
@@ -0,0 +1,258 @@
+const React = require("react");
+const PropTypes = require("prop-types");
+const { Localized } = require("fluent-react/compat");
+const sendEvent = require("../../browser-send-event.js");
+const { Selection } = require("../../../shared/selection");
+const { ColorPicker } = require("./color-picker");
+
+// Text input height is determined by text size and padding
+// See frame.scss mixin type-box($size)
+const TEXT_INPUT_PADDING = 4;
+
+// Padding used by draggable div
+const DRAG_DIV_PADDING = 10;
+
+// Editor header height in pixel
+const EDITOR_HEADER_HEIGHT = 100;
+
+const FONT_STYLE = "sans-serif";
+const FONT_WEIGHT = 900;
+const INIT_FONT_SIZE = 36;
+
+let previousTextInputWidth;
+let previousInputText = "";
+
+exports.TextTool = class TextTool extends React.Component {
+  constructor(props) {
+    super(props);
+    this.textInput = React.createRef();
+
+    this.canvasCssWidth = props.canvasCssWidth;
+    this.canvasCssHeight = props.canvasCssHeight;
+
+    const VISIBLE_HEIGHT = this.canvasCssHeight > window.innerHeight ? window.innerHeight - EDITOR_HEADER_HEIGHT :
+                                                                       this.canvasCssHeight;
+
+    const INIT_LEFT = (this.canvasCssWidth / 2) - (INIT_FONT_SIZE / 2);
+    const INIT_TOP = window.scrollY + (VISIBLE_HEIGHT / 2) - ((INIT_FONT_SIZE) / 2) - TEXT_INPUT_PADDING;
+
+    this.state = {
+      left: INIT_LEFT,
+      top: INIT_TOP,
+      color: this.props.color,
+      colorName: this.props.colorName,
+      textSize: "large-text"
+    };
+  }
+
+  componentDidMount() {
+    this.textInput.current.focus();
+    previousTextInputWidth = this.textInput.current.clientWidth;
+    this.adjustHeight();
+    if (this.props.toolbarOverrideCallback) {
+      this.props.toolbarOverrideCallback();
+    }
+  }
+
+  componentDidUpdate(oldProps, oldState) {
+    if (oldState.textSize !== this.state.textSize) {
+      this.props.toolbarOverrideCallback();
+      this.adjustHeight();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.props.toolbarOverrideCallback) {
+      this.props.toolbarOverrideCallback();
+    }
+  }
+
+  adjustHeight() {
+    const styles = window.getComputedStyle(this.textInput.current);
+    const height = parseFloat(styles.lineHeight) + parseFloat(styles.paddingTop) + parseFloat(styles.paddingBottom);
+    this.textInput.current.style.minHeight = `${height}px`;
+  }
+
+  render() {
+    const textToolBox = this.renderTextBox();
+    return <div
+      className={`text-tool-container centered`}
+      onDragOver={this.onDragOver.bind(this)}
+      onDrop={this.onDrop.bind(this)}
+      style={{height: this.props.baseCanvas.style.height, width: this.props.baseCanvas.style.width}}>
+      {textToolBox}
+    </div>;
+  }
+
+  renderTextBox() {
+    const dragDivTopPx = `${this.state.top - DRAG_DIV_PADDING}px`;
+    const dragDivLeftPx = `${this.state.left - DRAG_DIV_PADDING}px`;
+    const dragDivPadding = `${DRAG_DIV_PADDING}px`;
+
+    const dragDivStyles = {
+      position: "absolute",
+      top: dragDivTopPx,
+      left: dragDivLeftPx,
+      padding: dragDivPadding,
+      cursor: "move"
+    };
+
+    return [
+      <div draggable="true" key="drag" onDragStart={this.onDragStart.bind(this)} style={dragDivStyles}>
+        <div id="text-input" ref={this.textInput} contentEditable="true" key="text" onKeyDown={this.onKeyDown.bind(this)}
+          onKeyUp={this.onKeyUp.bind(this)} className={`${this.state.textSize} ${this.state.colorName} text`} onFocus={this.moveCursorToEnd.bind(this)}>
+        </div>
+      </div>
+    ];
+  }
+
+  moveCursorToEnd(e) {
+    if (document.createRange) {
+        const range = document.createRange();
+        range.selectNodeContents(e.target); // Select contents of the element with the range
+        range.collapse(false); // false means collapse to end rather than the start
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+  }
+
+  renderToolbar() {
+    return <div className="editor-header default-color-scheme"><div className="annotation-tools">
+      <Localized id="annotationTextSize">
+        <select className={`text-select`} title="Text Size" onChange={this.onChangeTextSize.bind(this)} value={this.state.textSize}>
+          <Localized id="textSizeSmall"><option value="small-text">Small</option></Localized>
+          <Localized id="textSizeMedium"><option value="medium-text">Medium</option></Localized>
+          <Localized id="textSizeLarge"><option value="large-text">Large</option></Localized>
+        </select>
+      </Localized>
+      <ColorPicker activeTool={this.state.tool}
+        setColorCallback={this.setColor.bind(this)}
+        color={this.state.color} />
+      <span className="annotation-divider"></span>
+      <Localized id="annotationTextConfirmButton">
+        <button className={`button transparent confirm-text`} id="confirm-text" onClick={this.onClickConfirm.bind(this)} title="Confirm Text">Confirm</button>
+      </Localized>
+      <Localized id="annotationTextCancelButton">
+        <button className={`button transparent cancel-text`} id="cancel-text" onClick={this.onClickCancel.bind(this)} title="Cancel Text">Cancel</button>
+      </Localized>
+    </div></div>;
+  }
+
+  setColor(color, colorName) {
+    this.setState({color, colorName});
+    this.textInput.current.focus();
+  }
+
+  onClickConfirm(e) {
+    // Exit if user doesn't enter any text
+    if (!this.textInput.current.textContent) {
+       if (this.props.cancelTextHandler) {
+          this.props.cancelTextHandler();
+        }
+        sendEvent("cancel-text", "text-toolbar");
+        return;
+    }
+    const styles = window.getComputedStyle(this.textInput.current);
+    const FONT_SIZE = parseInt(styles["font-size"], 10);
+    const x = this.state.left + parseFloat(styles["padding-left"]);
+    const y = this.state.top + TEXT_INPUT_PADDING + parseFloat(styles["line-height"]) / 2;
+
+    const textCanvas = document.createElement("canvas");
+    textCanvas.width = this.props.baseCanvas.width;
+    textCanvas.height = this.props.baseCanvas.height;
+    const drawingContext = textCanvas.getContext("2d");
+
+    drawingContext.scale(this.props.canvasPixelRatio, this.props.canvasPixelRatio);
+    drawingContext.textBaseline = "middle";
+    drawingContext.fillStyle = styles.backgroundColor;
+    drawingContext.fillRect(this.state.left,
+                            this.state.top,
+                            this.textInput.current.clientWidth,
+                            this.textInput.current.clientHeight);
+    drawingContext.fillStyle = styles.color;
+    drawingContext.font = `${FONT_WEIGHT} ${FONT_SIZE}px ${FONT_STYLE}`;
+    drawingContext.fillText(this.textInput.current.textContent, x, y);
+
+    const textSelection = new Selection(this.state.left,
+                                        this.state.top,
+                                        this.state.left + this.textInput.current.clientWidth,
+                                        this.state.top + this.textInput.current.clientHeight);
+
+    if (this.props.confirmTextHandler) {
+      this.props.confirmTextHandler(textSelection, textCanvas);
+    }
+    sendEvent("confirm-text", "text-toolbar");
+  }
+
+  onClickCancel(e) {
+    if (this.props.cancelTextHandler) {
+      this.props.cancelTextHandler();
+    }
+    sendEvent("cancel-text", "text-toolbar");
+  }
+
+  onKeyDown(e) {
+    this.adjustX(e);
+  }
+
+  onKeyUp(e) {
+    // Fix to remove <br> element inserted on press of space bar inside contenteditable div
+    while (this.textInput.current.firstElementChild) {
+      this.textInput.current.removeChild(this.textInput.current.firstElementChild);
+    }
+    this.adjustX(e);
+  }
+
+  adjustX(e) {
+    if (previousInputText === this.textInput.current.textContent) {
+      return;
+    }
+    const rectInput = e.target.getBoundingClientRect();
+    const rectCanvas = this.props.baseCanvas.getBoundingClientRect();
+    const WIDTH_DIFF = this.textInput.current.clientWidth - previousTextInputWidth;
+    this.setState({left: rectInput.left - rectCanvas.left - WIDTH_DIFF / 2});
+    previousTextInputWidth = this.textInput.current.clientWidth;
+    previousInputText = this.textInput.current.textContent;
+  }
+
+  onChangeTextSize(event) {
+    const size = event.target.value;
+    this.setState({textSize: size});
+    this.textInput.current.focus();
+  }
+
+  onDragStart(event) {
+    const style = window.getComputedStyle(event.target);
+    event.dataTransfer.setData("text/plain",
+      (parseFloat(style.getPropertyValue("left")) - event.clientX) +
+       "," + (parseFloat(style.getPropertyValue("top")) - event.clientY));
+  }
+
+  onDragOver(event) {
+    event.preventDefault();
+    return false;
+  }
+
+  onDrop(event) {
+    const offset = event.dataTransfer.getData("text/plain").split(",");
+    const dragLeft = event.clientX + parseFloat(offset[0]);
+    const dragTop = event.clientY + parseFloat(offset[1]);
+
+    this.setState({left: dragLeft + DRAG_DIV_PADDING, top: dragTop + DRAG_DIV_PADDING});
+    event.preventDefault();
+    return false;
+  }
+};
+
+exports.TextTool.propTypes = {
+  baseCanvas: PropTypes.object,
+  color: PropTypes.string,
+  colorName: PropTypes.string,
+  toolbarOverrideCallback: PropTypes.func,
+  confirmTextHandler: PropTypes.func,
+  cancelTextHandler: PropTypes.func,
+  canvasPixelRatio: PropTypes.number,
+  canvasCssWidth: PropTypes.number,
+  canvasCssHeight: PropTypes.number,
+};
diff --git a/static/css/frame.scss b/static/css/frame.scss
index 596290c945..d314b30e11 100644
--- a/static/css/frame.scss
+++ b/static/css/frame.scss
@@ -285,6 +285,7 @@
 
 .edit,
 .pen-button,
+.text-button,
 .highlight-button {
   background-size: $grid-unit $grid-unit;
   background-repeat: no-repeat;
@@ -506,7 +507,7 @@ body {
 
 #color-button-container {
   min-width: 40px;
-  margin-left: 5px;
+  margin: 0 5px;
 }
 
 #color-button-highlight {
@@ -516,7 +517,6 @@ body {
   height: 40px;
   border-radius: 3px;
   position: absolute;
-  left: 170.5px;
   background-color: #ededf0;
 }
 
@@ -525,7 +525,7 @@ body {
   position: absolute;
   height: 22px;
   width: 22px;
-  margin: 13.5px 10px 0 4.5px;
+  margin: 13.5px 10px 0 9px;
   z-index: 2;
 
   &:hover {
@@ -544,7 +544,6 @@ body {
   width: 160px;
   height: 160px;
   position: absolute;
-  left: 170.5px;
   background: $light-default;
   border: 1px solid $light-border;
   border-radius: 10px;
@@ -605,3 +604,146 @@ body {
   background-repeat: no-repeat;
   background-position: center;
 }
+
+// CSS used for Annotation Text Tool
+.text-select {
+  -moz-appearance: none; //sass-lint:disable-line no-vendor-prefixes
+  appearance: none;
+  background-color: $light-default;
+  background-image: url("../img/icon-dropdown.svg");
+  background-position: right 8px top 8px;
+  background-repeat: no-repeat;
+  background-size: 10px auto;
+  border-radius: $border-radius;
+  border: 1px solid $light-border;
+  color: $dark-default;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 400;
+  height: 26px;
+  margin: 12px 5px 12px 15px;
+  outline: none;
+  padding: 0 24px 0 4px;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transition: background 150ms $bezier, border 150ms $bezier;
+  user-select: none;
+  white-space: nowrap;
+  vertical-align: middle;
+
+  &:hover,
+  &:focus {
+    background-color: $light-hover;
+    border-color: $light-border-active;
+  }
+
+  &:active {
+    background-color: $light-active;
+    border-color: $light-border-active;
+  }
+
+  option {
+    padding: 0 40px 0 4px;
+  }
+}
+
+.text-button {
+  background-image: url("../img/annotation-text.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+
+  &:hover {
+    background-color: $light-hover;
+  }
+}
+
+.text-tool-container {
+  z-index: 4;
+}
+
+// Text Sizes used in the text tool
+$large: 36px;
+$medium: 24px;
+$small: 16px;
+
+// Colors used in the text tool
+$red: rgb(231, 76, 60);
+$green: rgb(46, 204, 113);
+$blue: rgb(52, 152, 219);
+$yellow: rgb(255, 255, 0);
+$purple: rgb(142, 68, 173);
+$sea-green: rgb(26, 188, 156);
+$grey: rgb(52, 73, 94);
+
+$bg-black: rgba(0, 0, 0, 0.6);
+$bg-white: rgba(255, 255, 255, 0.7);
+
+@mixin type-box($size) {
+  padding: 4px $size * 0.5;
+  font-size: $size;
+}
+
+@mixin type-color($b, $f) {
+  background: $b;
+  color: $f;
+}
+
+.text {
+  cursor: text;
+  font-weight: 900;
+  font-family: sans-serif;
+  text-align: center;
+  white-space: nowrap;
+  outline: 0;
+  border: none;
+  white-space : pre;
+}
+
+.large-text {
+  @include type-box($large);
+}
+
+.medium-text {
+  @include type-box($medium);
+}
+
+.small-text {
+  @include type-box($small);
+}
+
+.black {
+  @include type-color($bg-white, black);
+}
+
+.white {
+  @include type-color($bg-black, white);
+}
+
+.red {
+  @include type-color($bg-black, $red);
+}
+
+.green {
+  @include type-color($bg-black, $green);
+}
+
+.blue {
+  @include type-color($bg-white, $blue);
+}
+
+.yellow {
+  @include type-color($bg-black, $yellow);
+}
+
+.purple {
+  @include type-color($bg-white, $purple);
+}
+
+.sea-green {
+  @include type-color($bg-black, $sea-green);
+}
+
+.grey {
+  @include type-color($bg-white, $grey);
+}
diff --git a/static/img/annotation-text.svg b/static/img/annotation-text.svg
new file mode 100644
index 0000000000..ece706c135
--- /dev/null
+++ b/static/img/annotation-text.svg
@@ -0,0 +1 @@
+<svg width="23" height="25" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M-3-1h27v27H-3z"/><g fill="#3E3D40" fill-rule="nonzero"><path d="M.375 4.063v3.375h6.75v15.187H10.5V7.437h6.75V4.063zM22.313 2.375V.687H17.25v1.688h1.688v20.25H17.25v1.688h5.063v-1.688h-1.688V2.375z"/></g></g></svg>
\ No newline at end of file