diff --git a/index.html b/index.html
index 4ceb0dc86..d38197ef6 100644
--- a/index.html
+++ b/index.html
@@ -133,6 +133,14 @@
           <input id="scaleOverlayCheckbox" class="hide" data-tool="ScaleOverlay" data-tool-type="none"
             type="checkbox" />
         </li>
+        <li>
+          <label id="overlay" class="checkbox-label" for="overlayCheckbox">
+            Overlay <label class="label-on"> ON</label>
+            <label class="label-off"> OFF</label>
+          </label>
+          <input id="overlayCheckbox" class="hide" data-tool="Overlay" data-tool-type="none"
+            type="checkbox" />
+        </li>
       </ul>
 
       <!-- Our beautiful element targets -->
@@ -361,7 +369,10 @@
       } else {
         cornerstoneTools.setToolDisabled(toolName);
       }
-      const toolLabel = document.querySelector('#scaleOverlay');
+
+      const toolLabelId =
+        toolName.charAt(0).toLowerCase() + toolName.slice(1);
+      const toolLabel = document.querySelector(`#${toolLabelId}`); //scaleOverlay or overlay
       toolLabel.classList.toggle('turned-on');
     });
   });
diff --git a/src/index.js b/src/index.js
index c40d4ad6a..f865097dc 100644
--- a/src/index.js
+++ b/src/index.js
@@ -103,6 +103,7 @@ import {
   EraserTool,
   FreehandRoiSculptorTool,
   MagnifyTool,
+  OverlayTool,
   OrientationMarkersTool,
   PanMultiTouchTool,
   PanTool,
@@ -238,6 +239,7 @@ const cornerstoneTools = {
   EraserTool,
   FreehandRoiSculptorTool,
   MagnifyTool,
+  OverlayTool,
   OrientationMarkersTool,
   PanMultiTouchTool,
   PanTool,
@@ -346,6 +348,7 @@ export {
   EraserTool,
   FreehandRoiSculptorTool,
   MagnifyTool,
+  OverlayTool,
   OrientationMarkersTool,
   PanMultiTouchTool,
   PanTool,
diff --git a/src/tools/OverlayTool.js b/src/tools/OverlayTool.js
new file mode 100644
index 000000000..ce1698d5c
--- /dev/null
+++ b/src/tools/OverlayTool.js
@@ -0,0 +1,110 @@
+import external from '../externalModules.js';
+import BaseTool from './base/BaseTool.js';
+
+/**
+ *
+ * http://dicom.nema.org/dicom/2013/output/chtml/part03/sect_C.9.html
+ *
+ * @public
+ * @class Overlay
+ * @memberof Tools
+ *
+ * @classdesc Tool for displaying a scale overlay on the image.
+ * @extends Tools.Base.BaseTool
+ */
+export default class OverlayTool extends BaseTool {
+  constructor(configuration = {}) {
+    const defaultConfig = {
+      name: 'Overlay',
+      configuration: {},
+      mixins: ['enabledOrDisabledBinaryTool'],
+    };
+    const initialConfiguration = Object.assign(defaultConfig, configuration);
+
+    super(initialConfiguration);
+
+    this.initialConfiguration = initialConfiguration;
+  }
+
+  enabledCallback(element) {
+    this.forceImageUpdate(element);
+  }
+
+  disabledCallback(element) {
+    this.forceImageUpdate(element);
+  }
+
+  forceImageUpdate(element) {
+    const enabledElement = external.cornerstone.getEnabledElement(element);
+
+    if (enabledElement.image) {
+      external.cornerstone.updateImage(element);
+    }
+  }
+
+  renderToolData(evt) {
+    const eventData = evt.detail;
+    const { enabledElement, image, viewport, canvasContext } = eventData;
+
+    if (!eventData || !enabledElement || !image) {
+      return;
+    }
+
+    const overlayPlaneMetadata = external.cornerstone.metaData.get(
+      'overlayPlaneModule',
+      image.imageId
+    );
+
+    if (
+      !overlayPlaneMetadata ||
+      !overlayPlaneMetadata.overlays ||
+      !overlayPlaneMetadata.overlays.length
+    ) {
+      return;
+    }
+
+    const viewportPixelSpacing = {
+      column: viewport.displayedArea.columnPixelSpacing || 1,
+      row: viewport.displayedArea.rowPixelSpacing || 1,
+    };
+    const imageWidth =
+      Math.abs(viewport.displayedArea.brhc.x - viewport.displayedArea.tlhc.x) *
+      viewportPixelSpacing.column;
+    const imageHeight =
+      Math.abs(viewport.displayedArea.brhc.y - viewport.displayedArea.tlhc.y) *
+      viewportPixelSpacing.row;
+
+    overlayPlaneMetadata.overlays.forEach(overlay => {
+      if (overlay.visible === false) {
+        return;
+      }
+
+      const layerCanvas = document.createElement('canvas');
+
+      layerCanvas.width = imageWidth;
+      layerCanvas.height = imageHeight;
+
+      const layerContext = layerCanvas.getContext('2d');
+
+      layerContext.fillStyle = overlay.fillStyle || 'white';
+
+      if (overlay.type === 'R') {
+        layerContext.fillRect(0, 0, layerCanvas.width, layerCanvas.height);
+        layerContext.globalCompositeOperation = 'xor';
+      }
+
+      let i = 0;
+
+      for (let y = 0; y < overlay.rows; y++) {
+        for (let x = 0; x < overlay.columns; x++) {
+          if (overlay.pixelData[i++] > 0) {
+            layerContext.fillRect(x, y, 1, 1);
+          }
+        }
+      }
+
+      // Draw the overlay layer onto the canvas
+      canvasContext.drawImage(layerCanvas, 0, 0);
+    });
+  }
+}
diff --git a/src/tools/index.js b/src/tools/index.js
index 17fe1320e..ea44dd8f6 100644
--- a/src/tools/index.js
+++ b/src/tools/index.js
@@ -4,6 +4,7 @@ import DragProbeTool from './DragProbeTool.js';
 import EraserTool from './EraserTool.js';
 import FreehandRoiSculptorTool from './FreehandRoiSculptorTool.js';
 import MagnifyTool from './MagnifyTool.js';
+import OverlayTool from './OverlayTool.js';
 import OrientationMarkersTool from './OrientationMarkersTool.js';
 import PanMultiTouchTool from './PanMultiTouchTool.js';
 import PanTool from './PanTool.js';
@@ -28,6 +29,7 @@ export {
   EraserTool,
   FreehandRoiSculptorTool,
   MagnifyTool,
+  OverlayTool,
   OrientationMarkersTool,
   PanMultiTouchTool,
   PanTool,
@@ -53,6 +55,7 @@ export default {
   EraserTool,
   FreehandRoiSculptorTool,
   MagnifyTool,
+  OverlayTool,
   OrientationMarkersTool,
   PanMultiTouchTool,
   PanTool,