diff --git a/packages/terra-modal/LICENSE b/packages/terra-modal/LICENSE
new file mode 100644
index 00000000000..f4f87bd4ed6
--- /dev/null
+++ b/packages/terra-modal/LICENSE
@@ -0,0 +1,203 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
+   
\ No newline at end of file
diff --git a/packages/terra-modal/NOTICE b/packages/terra-modal/NOTICE
new file mode 100644
index 00000000000..6ce917d9474
--- /dev/null
+++ b/packages/terra-modal/NOTICE
@@ -0,0 +1,13 @@
+Copyright 2017 Cerner Innovation, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/packages/terra-modal/README.md b/packages/terra-modal/README.md
new file mode 100644
index 00000000000..f0e2d13da03
--- /dev/null
+++ b/packages/terra-modal/README.md
@@ -0,0 +1,32 @@
+# Terra Modal
+
+
+[![NPM version](http://img.shields.io/npm/v/terra-modal.svg)](https://www.npmjs.org/package/terra-modal)
+[![Build Status](https://travis-ci.org/cerner/terra-ui.svg?branch=master)](https://travis-ci.org/cerner/terra-ui)
+
+Modals are used to display content in a layer above the app. Modals consist of an overlay and container. Higher order components can provide the modal dialog with a header, body, and close button.
+
+- [Getting Started](#getting-started)
+- [Documentation](#documentation)
+- [LICENSE](#license)
+
+## Getting Started
+
+- Install from [npmjs](https://www.npmjs.com): `npm install terra-modal`
+
+## Documentation
+
+Documentation for this component is spilt into individual files.
+One file for the main component and one file for each component modifier.
+
+See the [documentation](docs/).
+
+## LICENSE
+
+Copyright 2017 Cerner Innovation, Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
diff --git a/packages/terra-modal/docs/README.md b/packages/terra-modal/docs/README.md
new file mode 100644
index 00000000000..2dddeb4c993
--- /dev/null
+++ b/packages/terra-modal/docs/README.md
@@ -0,0 +1,58 @@
+# Terra Modal
+
+Modals are used to display content in a layer above the app. Modals consist of an overlay and container. Higher order components can provide the modal dialog with a header, body, and close button.
+
+## Getting Started
+
+- Install with [npmjs](https://www.npmjs.com):
+  - `npm install terra-modal`
+  - `yarn add terra-modal`
+
+## Usage
+
+```jsx
+import React from 'react';
+import Modal from 'terra-modal';
+
+class MyApp extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpened: false,
+    };
+
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
+
+
+  handleOpenModal() {
+    this.setState({ isOpened: true });
+  }
+
+  handleCloseModal() {
+    this.setState({ isOpened: false });
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal
+          ariaLabel="My Modal"
+          isOpened={this.state.isOpened}
+        >
+          <div>
+            <h1>My Modal</h1>
+            <p>Additional content goes here</p>
+            <button onClick={this.handleCloseModal}>Close Modal</button>
+          </div>
+        </Modal>
+        <button onClick={this.handleOpenModal}>Open Modal</button>
+      </div>
+    );
+  }
+}
+
+export default MyApp;
+```
diff --git a/packages/terra-modal/lib/Modal.js b/packages/terra-modal/lib/Modal.js
new file mode 100644
index 00000000000..e521316c635
--- /dev/null
+++ b/packages/terra-modal/lib/Modal.js
@@ -0,0 +1,174 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactPortal = require('react-portal');
+
+var _reactPortal2 = _interopRequireDefault(_reactPortal);
+
+var _ModalContent = require('./ModalContent');
+
+var _ModalContent2 = _interopRequireDefault(_ModalContent);
+
+require('./Modal.scss');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var propTypes = {
+  /**
+   * String that labels the modal for screen readers
+   **/
+  ariaLabel: _react.PropTypes.string.isRequired,
+  /**
+   * This callback is called when the closing event is triggered but it prevents normal removal from the DOM. So, you can do some DOMNode animation first and then call removeFromDOM() that removes the modal from DOM.
+   **/
+  beforeClose: _react.PropTypes.func,
+  /**
+   * Content inside the modal dialog
+   **/
+  children: _react.PropTypes.node.isRequired,
+  /**
+   * CSS classnames that are append to the modal
+   **/
+  classNameModal: _react.PropTypes.string,
+  /**
+   * CSS classnames that are append to the overlay
+   **/
+  classNameOverlay: _react.PropTypes.string,
+  /**
+   * If set to true, the modal will close when the esc key is pressed
+   **/
+  closeOnEsc: _react.PropTypes.bool,
+  /**
+   * If set to true, the modal will close when a mouseclick is triggered outside the modal
+   **/
+  closeOnOutsideClick: _react.PropTypes.bool,
+  /**
+   * If set to true, the modal will be fullscreen on all breakpoint sizes
+   **/
+  isFullscreen: _react.PropTypes.bool,
+  /**
+   * If set to true, the modal will rendered as opened
+   **/
+  isOpened: _react.PropTypes.bool,
+  /**
+   * If set to true, the modal dialog with have overflow-y set to scroll.
+   * It is recommended not to use this prop and instead create a HOC
+   * with the modal dialog body set to scroll.
+   **/
+  isScrollable: _react.PropTypes.bool,
+  /**
+   * This callback is called when the modal closes and after beforeClose.
+   **/
+  onClose: _react.PropTypes.func,
+  /**
+   * This callback is called when the modal is opened and rendered (useful for animating the DOMNode).
+   **/
+  onOpen: _react.PropTypes.func,
+  /**
+   * This callback is called when the modal is (re)rendered.
+   **/
+  onUpdate: _react.PropTypes.func,
+  /**
+   * Role attribute on the modal dialog
+   **/
+  role: _react.PropTypes.string
+};
+
+var defaultProps = {
+  ariaLabel: null,
+  children: null,
+  classNameModal: null,
+  classNameOverlay: null,
+  closeOnEsc: true,
+  closeOnOutsideClick: true,
+  isFullscreen: false,
+  isOpened: false,
+  isScrollable: false,
+  role: 'document'
+};
+
+/* eslint-disable react/prefer-stateless-function */
+
+var Modal = function (_React$Component) {
+  _inherits(Modal, _React$Component);
+
+  function Modal() {
+    _classCallCheck(this, Modal);
+
+    return _possibleConstructorReturn(this, (Modal.__proto__ || Object.getPrototypeOf(Modal)).apply(this, arguments));
+  }
+
+  _createClass(Modal, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          ariaLabel = _props.ariaLabel,
+          beforeClose = _props.beforeClose,
+          children = _props.children,
+          classNameModal = _props.classNameModal,
+          classNameOverlay = _props.classNameOverlay,
+          closeOnEsc = _props.closeOnEsc,
+          closeOnOutsideClick = _props.closeOnOutsideClick,
+          isFullscreen = _props.isFullscreen,
+          isOpened = _props.isOpened,
+          isScrollable = _props.isScrollable,
+          onClose = _props.onClose,
+          onOpen = _props.onOpen,
+          onUpdate = _props.onUpdate,
+          role = _props.role,
+          customProps = _objectWithoutProperties(_props, ['ariaLabel', 'beforeClose', 'children', 'classNameModal', 'classNameOverlay', 'closeOnEsc', 'closeOnOutsideClick', 'isFullscreen', 'isOpened', 'isScrollable', 'onClose', 'onOpen', 'onUpdate', 'role']);
+
+      return _react2.default.createElement(
+        _reactPortal2.default,
+        _extends({
+          isOpened: isOpened,
+          closeOnEsc: closeOnEsc,
+          closeOnOutsideClick: closeOnOutsideClick,
+          onClose: onClose,
+          onOpen: onOpen,
+          onUpdate: onUpdate,
+          beforeClose: beforeClose
+        }, customProps),
+        _react2.default.createElement(
+          _ModalContent2.default,
+          {
+            closeOnOutsideClick: closeOnOutsideClick,
+            ariaLabel: ariaLabel,
+            classNameModal: classNameModal,
+            classNameOverlay: classNameOverlay,
+            role: role,
+            isFullscreen: isFullscreen,
+            isScrollable: isScrollable
+          },
+          children
+        )
+      );
+    }
+  }]);
+
+  return Modal;
+}(_react2.default.Component);
+
+Modal.propTypes = propTypes;
+Modal.defaultProps = defaultProps;
+
+exports.default = Modal;
\ No newline at end of file
diff --git a/packages/terra-modal/lib/Modal.scss b/packages/terra-modal/lib/Modal.scss
new file mode 100644
index 00000000000..76b04eb18e2
--- /dev/null
+++ b/packages/terra-modal/lib/Modal.scss
@@ -0,0 +1,34 @@
+@import '~terra-mixins';
+
+.terra-Modal {
+  @include terra-position-start(10px);
+  @include terra-position-end(10px);
+  background-color: $terra-white;
+  border-radius: 5px;
+  bottom: 10px;
+  display: block;
+  max-height: 100%;
+  outline: none;
+  overflow: hidden;
+  position: fixed;
+  top: 10px;
+  z-index: $terra-z-index-6 + 1;
+
+  @media screen and (min-width: 48em) {
+    &:not(.terra-Modal--fullscreen) {
+      bottom: auto;
+      box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+      left: 50%;
+      margin: 0 auto;
+      max-height: calc(100% - 100px);
+      max-width: 40em;
+      right: auto;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+
+.terra-Modal--scrollable {
+  overflow-y: scroll;
+}
diff --git a/packages/terra-modal/lib/ModalContent.js b/packages/terra-modal/lib/ModalContent.js
new file mode 100644
index 00000000000..3492ef58d4e
--- /dev/null
+++ b/packages/terra-modal/lib/ModalContent.js
@@ -0,0 +1,115 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _focusTrapReact = require('focus-trap-react');
+
+var _focusTrapReact2 = _interopRequireDefault(_focusTrapReact);
+
+var _ModalOverlay = require('./ModalOverlay');
+
+var _ModalOverlay2 = _interopRequireDefault(_ModalOverlay);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var propTypes = {
+  ariaLabel: _react.PropTypes.string.isRequired,
+  children: _react.PropTypes.node.isRequired,
+  classNameModal: _react.PropTypes.string,
+  classNameOverlay: _react.PropTypes.string,
+  closeOnOutsideClick: _react.PropTypes.bool,
+  closePortal: _react.PropTypes.func,
+  isFullscreen: _react.PropTypes.bool,
+  isScrollable: _react.PropTypes.bool,
+  role: _react.PropTypes.string
+};
+
+var defaultProps = {
+  ariaLabel: null,
+  children: null,
+  classNameModal: null,
+  classNameOverlay: null,
+  closeOnOutsideClick: true,
+  isFullscreen: false,
+  isScrollable: false,
+  role: 'dialog'
+};
+
+/* eslint-disable react/prefer-stateless-function */
+
+var ModalContent = function (_React$Component) {
+  _inherits(ModalContent, _React$Component);
+
+  function ModalContent() {
+    _classCallCheck(this, ModalContent);
+
+    return _possibleConstructorReturn(this, (ModalContent.__proto__ || Object.getPrototypeOf(ModalContent)).apply(this, arguments));
+  }
+
+  _createClass(ModalContent, [{
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          ariaLabel = _props.ariaLabel,
+          children = _props.children,
+          classNameModal = _props.classNameModal,
+          classNameOverlay = _props.classNameOverlay,
+          closeOnOutsideClick = _props.closeOnOutsideClick,
+          closePortal = _props.closePortal,
+          role = _props.role,
+          isFullscreen = _props.isFullscreen,
+          isScrollable = _props.isScrollable,
+          customProps = _objectWithoutProperties(_props, ['ariaLabel', 'children', 'classNameModal', 'classNameOverlay', 'closeOnOutsideClick', 'closePortal', 'role', 'isFullscreen', 'isScrollable']);
+
+      var modalClassName = (0, _classnames2.default)(['terra-Modal', { 'terra-Modal--fullscreen': isFullscreen }, { 'terra-Modal--scrollable': isScrollable }, classNameModal]);
+
+      return _react2.default.createElement(
+        _focusTrapReact2.default,
+        null,
+        _react2.default.createElement(_ModalOverlay2.default, {
+          onClick: closeOnOutsideClick ? closePortal : null,
+          className: classNameOverlay
+        }),
+        _react2.default.createElement(
+          'div',
+          _extends({
+            tabIndex: '0',
+            'aria-label': ariaLabel,
+            className: modalClassName,
+            role: role
+          }, customProps),
+          children
+        )
+      );
+    }
+  }]);
+
+  return ModalContent;
+}(_react2.default.Component);
+
+ModalContent.propTypes = propTypes;
+ModalContent.defaultProps = defaultProps;
+
+exports.default = ModalContent;
\ No newline at end of file
diff --git a/packages/terra-modal/lib/ModalOverlay.js b/packages/terra-modal/lib/ModalOverlay.js
new file mode 100644
index 00000000000..21a6755e795
--- /dev/null
+++ b/packages/terra-modal/lib/ModalOverlay.js
@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+require('./ModalOverlay.scss');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ModalOverlay = function (_React$Component) {
+  _inherits(ModalOverlay, _React$Component);
+
+  function ModalOverlay() {
+    _classCallCheck(this, ModalOverlay);
+
+    return _possibleConstructorReturn(this, (ModalOverlay.__proto__ || Object.getPrototypeOf(ModalOverlay)).apply(this, arguments));
+  }
+
+  _createClass(ModalOverlay, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      // Disable scrolling on the page when Overlay is displayed
+      document.documentElement.style.overflow = 'hidden';
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      // Enable scrolling on the page since Overlay has gone away
+      document.documentElement.style.overflow = null;
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var customProps = _objectWithoutProperties(this.props, []);
+
+      var attributes = _extends({}, customProps);
+
+      attributes.className = (0, _classnames2.default)(['terra-Modal-overlay', attributes.className]);
+
+      return _react2.default.createElement('div', attributes);
+    }
+  }]);
+
+  return ModalOverlay;
+}(_react2.default.Component);
+
+exports.default = ModalOverlay;
\ No newline at end of file
diff --git a/packages/terra-modal/lib/ModalOverlay.scss b/packages/terra-modal/lib/ModalOverlay.scss
new file mode 100644
index 00000000000..c90aea28f99
--- /dev/null
+++ b/packages/terra-modal/lib/ModalOverlay.scss
@@ -0,0 +1,11 @@
+@import '~terra-mixins';
+
+.terra-Modal-overlay {
+  background-color: rgba(0, 0, 0, 0.4);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: $terra-z-index-6;
+}
diff --git a/packages/terra-modal/package.json b/packages/terra-modal/package.json
new file mode 100644
index 00000000000..6199406febb
--- /dev/null
+++ b/packages/terra-modal/package.json
@@ -0,0 +1,57 @@
+{
+  "name": "terra-modal",
+  "main": "lib/Modal.js",
+  "private": true,
+  "version": "0.0.0",
+  "description": "Modals are used to display content in a layer above the app. Modals consist of an overlay and container. Higher order components can provide the modal dialog with a header, body, and close button.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cerner/terra-ui.git"
+  },
+  "keywords": [
+    "Cerner",
+    "Terra",
+    "terra-modal",
+    "Modal",
+    "UI"
+  ],
+  "author": "Cerner Corporation",
+  "license": "Apache-2.0",
+  "bugs": {
+    "url": "https://github.com/cerner/terra-ui/issues"
+  },
+  "homepage": "https://github.com/cerner/terra-ui#readme",
+  "devDependencies": {
+    "terra-icon": "0.x",
+    "terra-toolkit": "^0.x"
+  },
+  "peerDependencies": {
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2"
+  },
+  "dependencies": {
+    "classnames": "^2.2.5",
+    "focus-trap-react": "^3.0.2",
+    "terra-base": "^0.x",
+    "terra-mixins": "^1.0.0",
+    "react-portal": "^3.0.0"
+  },
+  "scripts": {
+    "compile": "npm run compile:clean && npm run compile:build",
+    "compile:clean": "rm -rf lib",
+    "compile:build": "$(cd ..; npm bin)/babel src --out-dir lib --copy-files",
+    "lint": "npm run lint:js && npm run lint:scss",
+    "lint:js": "$(cd ..; npm bin)/eslint --ext .js,.jsx . --ignore-path ../../.eslintignore",
+    "lint:scss": "$(cd ..; npm bin)/stylelint src/**/*.scss",
+    "release:major": "npm test && node ../../scripts/release/release.js major",
+    "release:minor": "npm test && node ../../scripts/release/release.js minor",
+    "release:patch": "npm test && node ../../scripts/release/release.js patch",
+    "test": "npm run test:spec && npm run test:nightwatch-default",
+    "test:spec": "$(cd ..; npm bin)/jest --config ../../jestconfig.json",
+    "test:all": "npm run test:nightwatch-default && npm run test:nightwatch-chrome && npm run test:nightwatch-firefox && npm run test:nightwatch-safari",
+    "test:nightwatch-default": "node ./node_modules/terra-toolkit/lib/scripts/nightwatch.js",
+    "test:nightwatch-chrome": "node ./node_modules/terra-toolkit/lib/scripts/nightwatch.js chrome",
+    "test:nightwatch-firefox": "node ./node_modules/terra-toolkit/lib/scripts/nightwatch.js firefox",
+    "test:nightwatch-safari": "node ./node_modules/terra-toolkit/lib/scripts/nightwatch-non-parallel.js safari"
+  }
+}
diff --git a/packages/terra-modal/src/Modal.jsx b/packages/terra-modal/src/Modal.jsx
new file mode 100644
index 00000000000..2be157690cd
--- /dev/null
+++ b/packages/terra-modal/src/Modal.jsx
@@ -0,0 +1,130 @@
+import React, { PropTypes } from 'react';
+import Portal from 'react-portal';
+import ModalContent from './ModalContent';
+import './Modal.scss';
+
+const propTypes = {
+  /**
+   * String that labels the modal for screen readers
+   **/
+  ariaLabel: PropTypes.string.isRequired,
+  /**
+   * This callback is called when the closing event is triggered but it prevents normal removal from the DOM. So, you can do some DOMNode animation first and then call removeFromDOM() that removes the modal from DOM.
+   **/
+  beforeClose: PropTypes.func,
+  /**
+   * Content inside the modal dialog
+   **/
+  children: PropTypes.node.isRequired,
+  /**
+   * CSS classnames that are append to the modal
+   **/
+  classNameModal: PropTypes.string,
+  /**
+   * CSS classnames that are append to the overlay
+   **/
+  classNameOverlay: PropTypes.string,
+  /**
+   * If set to true, the modal will close when the esc key is pressed
+   **/
+  closeOnEsc: PropTypes.bool,
+  /**
+   * If set to true, the modal will close when a mouseclick is triggered outside the modal
+   **/
+  closeOnOutsideClick: PropTypes.bool,
+  /**
+   * If set to true, the modal will be fullscreen on all breakpoint sizes
+   **/
+  isFullscreen: PropTypes.bool,
+  /**
+   * If set to true, the modal will rendered as opened
+   **/
+  isOpened: PropTypes.bool,
+  /**
+   * If set to true, the modal dialog with have overflow-y set to scroll.
+   * It is recommended not to use this prop and instead create a HOC
+   * with the modal dialog body set to scroll.
+   **/
+  isScrollable: PropTypes.bool,
+  /**
+   * This callback is called when the modal closes and after beforeClose.
+   **/
+  onClose: PropTypes.func,
+  /**
+   * This callback is called when the modal is opened and rendered (useful for animating the DOMNode).
+   **/
+  onOpen: PropTypes.func,
+  /**
+   * This callback is called when the modal is (re)rendered.
+   **/
+  onUpdate: PropTypes.func,
+  /**
+   * Role attribute on the modal dialog
+   **/
+  role: PropTypes.string,
+};
+
+const defaultProps = {
+  ariaLabel: null,
+  children: null,
+  classNameModal: null,
+  classNameOverlay: null,
+  closeOnEsc: true,
+  closeOnOutsideClick: true,
+  isFullscreen: false,
+  isOpened: false,
+  isScrollable: false,
+  role: 'document',
+};
+
+/* eslint-disable react/prefer-stateless-function */
+class Modal extends React.Component {
+  render() {
+    const {
+          ariaLabel,
+          beforeClose,
+          children,
+          classNameModal,
+          classNameOverlay,
+          closeOnEsc,
+          closeOnOutsideClick,
+          isFullscreen,
+          isOpened,
+          isScrollable,
+          onClose,
+          onOpen,
+          onUpdate,
+          role,
+           ...customProps } = this.props;
+
+    return (
+      <Portal
+        isOpened={isOpened}
+        closeOnEsc={closeOnEsc}
+        closeOnOutsideClick={closeOnOutsideClick}
+        onClose={onClose}
+        onOpen={onOpen}
+        onUpdate={onUpdate}
+        beforeClose={beforeClose}
+        {...customProps}
+      >
+        <ModalContent
+          closeOnOutsideClick={closeOnOutsideClick}
+          ariaLabel={ariaLabel}
+          classNameModal={classNameModal}
+          classNameOverlay={classNameOverlay}
+          role={role}
+          isFullscreen={isFullscreen}
+          isScrollable={isScrollable}
+        >
+          {children}
+        </ModalContent>
+      </Portal>
+    );
+  }
+}
+
+Modal.propTypes = propTypes;
+Modal.defaultProps = defaultProps;
+
+export default Modal;
diff --git a/packages/terra-modal/src/Modal.scss b/packages/terra-modal/src/Modal.scss
new file mode 100644
index 00000000000..76b04eb18e2
--- /dev/null
+++ b/packages/terra-modal/src/Modal.scss
@@ -0,0 +1,34 @@
+@import '~terra-mixins';
+
+.terra-Modal {
+  @include terra-position-start(10px);
+  @include terra-position-end(10px);
+  background-color: $terra-white;
+  border-radius: 5px;
+  bottom: 10px;
+  display: block;
+  max-height: 100%;
+  outline: none;
+  overflow: hidden;
+  position: fixed;
+  top: 10px;
+  z-index: $terra-z-index-6 + 1;
+
+  @media screen and (min-width: 48em) {
+    &:not(.terra-Modal--fullscreen) {
+      bottom: auto;
+      box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+      left: 50%;
+      margin: 0 auto;
+      max-height: calc(100% - 100px);
+      max-width: 40em;
+      right: auto;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+
+.terra-Modal--scrollable {
+  overflow-y: scroll;
+}
diff --git a/packages/terra-modal/src/ModalContent.jsx b/packages/terra-modal/src/ModalContent.jsx
new file mode 100644
index 00000000000..e527096a4b8
--- /dev/null
+++ b/packages/terra-modal/src/ModalContent.jsx
@@ -0,0 +1,73 @@
+import React, { PropTypes } from 'react';
+import classNames from 'classnames';
+import FocusTrap from 'focus-trap-react';
+import ModalOverlay from './ModalOverlay';
+
+const propTypes = {
+  ariaLabel: PropTypes.string.isRequired,
+  children: PropTypes.node.isRequired,
+  classNameModal: PropTypes.string,
+  classNameOverlay: PropTypes.string,
+  closeOnOutsideClick: PropTypes.bool,
+  closePortal: PropTypes.func,
+  isFullscreen: PropTypes.bool,
+  isScrollable: PropTypes.bool,
+  role: PropTypes.string,
+};
+
+const defaultProps = {
+  ariaLabel: null,
+  children: null,
+  classNameModal: null,
+  classNameOverlay: null,
+  closeOnOutsideClick: true,
+  isFullscreen: false,
+  isScrollable: false,
+  role: 'dialog',
+};
+
+/* eslint-disable react/prefer-stateless-function */
+class ModalContent extends React.Component {
+  render() {
+    const {
+        ariaLabel,
+        children,
+        classNameModal,
+        classNameOverlay,
+        closeOnOutsideClick,
+        closePortal,
+        role,
+        isFullscreen,
+        isScrollable,
+        ...customProps } = this.props;
+
+    const modalClassName = classNames(['terra-Modal',
+      { 'terra-Modal--fullscreen': isFullscreen },
+      { 'terra-Modal--scrollable': isScrollable },
+      classNameModal,
+    ]);
+
+    return (
+      <FocusTrap>
+        <ModalOverlay
+          onClick={closeOnOutsideClick ? closePortal : null}
+          className={classNameOverlay}
+        />
+        <div
+          tabIndex="0"
+          aria-label={ariaLabel}
+          className={modalClassName}
+          role={role}
+          {...customProps}
+        >
+          {children}
+        </div>
+      </FocusTrap>
+    );
+  }
+}
+
+ModalContent.propTypes = propTypes;
+ModalContent.defaultProps = defaultProps;
+
+export default ModalContent;
diff --git a/packages/terra-modal/src/ModalOverlay.jsx b/packages/terra-modal/src/ModalOverlay.jsx
new file mode 100644
index 00000000000..9c60da2c86f
--- /dev/null
+++ b/packages/terra-modal/src/ModalOverlay.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import classNames from 'classnames';
+import './ModalOverlay.scss';
+
+class ModalOverlay extends React.Component {
+
+  componentDidMount() {
+    // Disable scrolling on the page when Overlay is displayed
+    document.documentElement.style.overflow = 'hidden';
+  }
+
+  componentWillUnmount() {
+    // Enable scrolling on the page since Overlay has gone away
+    document.documentElement.style.overflow = null;
+  }
+
+  render() {
+    const { ...customProps } = this.props;
+    const attributes = Object.assign({}, customProps);
+
+    attributes.className = classNames([
+      'terra-Modal-overlay',
+      attributes.className,
+    ]);
+
+    return <div {...attributes} />;
+  }
+}
+
+export default ModalOverlay;
diff --git a/packages/terra-modal/src/ModalOverlay.scss b/packages/terra-modal/src/ModalOverlay.scss
new file mode 100644
index 00000000000..c90aea28f99
--- /dev/null
+++ b/packages/terra-modal/src/ModalOverlay.scss
@@ -0,0 +1,11 @@
+@import '~terra-mixins';
+
+.terra-Modal-overlay {
+  background-color: rgba(0, 0, 0, 0.4);
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: $terra-z-index-6;
+}
diff --git a/packages/terra-modal/tests/jest/Modal.test.jsx b/packages/terra-modal/tests/jest/Modal.test.jsx
new file mode 100644
index 00000000000..4d57cdaccf6
--- /dev/null
+++ b/packages/terra-modal/tests/jest/Modal.test.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import ModalExample from './ModalExample';
+
+it('should shallow an open modal', () => {
+  const modal = shallow(<ModalExample />);
+  expect(modal).toMatchSnapshot();
+});
+
+it('should mount an open modal', () => {
+  const modal = mount(<ModalExample />);
+  expect(modal).toMatchSnapshot();
+});
+
+it('should render an open modal', () => {
+  const modal = render(<ModalExample />);
+  expect(modal).toMatchSnapshot();
+});
diff --git a/packages/terra-modal/tests/jest/ModalExample.jsx b/packages/terra-modal/tests/jest/ModalExample.jsx
new file mode 100644
index 00000000000..763da54acdc
--- /dev/null
+++ b/packages/terra-modal/tests/jest/ModalExample.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import Modal from '../../src/Modal';
+
+class ModalExample extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpened: true,
+    };
+
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
+
+
+  handleOpenModal() {
+    this.setState({ isOpened: true });
+  }
+
+  handleCloseModal() {
+    this.setState({ isOpened: false });
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal
+          ariaLabel="Terra Modal"
+          isOpened={this.state.isOpened}
+        >
+          <div>
+            <h1>Terra Modal</h1>
+            <button onClick={this.handleCloseModal}>Close Modal</button>
+          </div>
+        </Modal>
+        <button onClick={this.handleOpenModal}>Open Modal</button>
+      </div>
+    );
+  }
+}
+
+export default ModalExample;
diff --git a/packages/terra-modal/tests/jest/__snapshots__/Modal.test.jsx.snap b/packages/terra-modal/tests/jest/__snapshots__/Modal.test.jsx.snap
new file mode 100644
index 00000000000..b734c49028f
--- /dev/null
+++ b/packages/terra-modal/tests/jest/__snapshots__/Modal.test.jsx.snap
@@ -0,0 +1,65 @@
+exports[`test should mount an open modal 1`] = `
+<ModalExample>
+  <div>
+    <Modal
+      ariaLabel="Terra Modal"
+      classNameModal={null}
+      classNameOverlay={null}
+      closeOnEsc={true}
+      closeOnOutsideClick={true}
+      isFullscreen={false}
+      isOpened={true}
+      isScrollable={false}
+      role="document">
+      <Portal
+        closeOnEsc={true}
+        closeOnOutsideClick={true}
+        isOpened={true}
+        onClose={[Function]}
+        onOpen={[Function]}
+        onUpdate={[Function]} />
+    </Modal>
+    <button
+      onClick={[Function]}>
+      Open Modal
+    </button>
+  </div>
+</ModalExample>
+`;
+
+exports[`test should render an open modal 1`] = `
+<div>
+  <button>
+    Open Modal
+  </button>
+</div>
+`;
+
+exports[`test should shallow an open modal 1`] = `
+<div>
+  <Modal
+    ariaLabel="Terra Modal"
+    classNameModal={null}
+    classNameOverlay={null}
+    closeOnEsc={true}
+    closeOnOutsideClick={true}
+    isFullscreen={false}
+    isOpened={true}
+    isScrollable={false}
+    role="document">
+    <div>
+      <h1>
+        Terra Modal
+      </h1>
+      <button
+        onClick={[Function]}>
+        Close Modal
+      </button>
+    </div>
+  </Modal>
+  <button
+    onClick={[Function]}>
+    Open Modal
+  </button>
+</div>
+`;
diff --git a/packages/terra-modal/tests/nightwatch.conf.js b/packages/terra-modal/tests/nightwatch.conf.js
new file mode 100644
index 00000000000..a04a516352f
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch.conf.js
@@ -0,0 +1,9 @@
+/* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */
+
+const testSettings = require('terra-toolkit').testSettings;
+const resolve = require('path').resolve;
+const nightwatchConfiguration = require('../node_modules/terra-toolkit/lib/nightwatch.json');
+
+module.exports = (settings => (
+  testSettings(resolve('../../webpack.config'), settings)
+))(nightwatchConfiguration);
diff --git a/packages/terra-modal/tests/nightwatch/ModalTestRoutes.jsx b/packages/terra-modal/tests/nightwatch/ModalTestRoutes.jsx
new file mode 100644
index 00000000000..2cc688d4215
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/ModalTestRoutes.jsx
@@ -0,0 +1,38 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { Route } from 'react-router';
+import ModalTests from './ModalTests';
+
+// components
+import ModalAppendClass from './components/ModalAppendClass';
+import ModalContentOverflow from './components/ModalContentOverflow';
+import ModalDialog from './components/ModalDialog';
+import ModalDisableCloseOnEsc from './components/ModalDisableCloseOnEsc';
+import ModalDisableCloseOnOutsideClick from './components/ModalDisableCloseOnOutsideClick';
+import ModalEventHooks from './components/ModalEventHooks';
+import ModalIsFullscreen from './components/ModalIsFullscreen';
+import ModalIsOpen from './components/ModalIsOpen';
+import ModalOverrideRole from './components/ModalOverrideRole';
+import ModalNoFocusableContent from './components/ModalNoFocusableContent';
+import ModalScrollableTrue from './components/ModalScrollableTrue';
+import ModalScrollableFalse from './components/ModalScrollableFalse';
+
+const routes = (
+  <div>
+    <Route path="/tests/modal-tests" component={ModalTests} />
+    <Route path="/tests/modal-tests/append-class" component={ModalAppendClass} />
+    <Route path="/tests/modal-tests/content-overflow" component={ModalContentOverflow} />
+    <Route path="/tests/modal-tests/dialog" component={ModalDialog} />
+    <Route path="/tests/modal-tests/disable-close-on-esc" component={ModalDisableCloseOnEsc} />
+    <Route path="/tests/modal-tests/disable-close-on-outside-click" component={ModalDisableCloseOnOutsideClick} />
+    <Route path="/tests/modal-tests/event-hooks" component={ModalEventHooks} />
+    <Route path="/tests/modal-tests/is-fullscreen" component={ModalIsFullscreen} />
+    <Route path="/tests/modal-tests/is-open" component={ModalIsOpen} />
+    <Route path="/tests/modal-tests/override-role" component={ModalOverrideRole} />
+    <Route path="/tests/modal-tests/no-focusable-content" component={ModalNoFocusableContent} />
+    <Route path="/tests/modal-tests/scrollable-true" component={ModalScrollableTrue} />
+    <Route path="/tests/modal-tests/scrollable-false" component={ModalScrollableFalse} />
+  </div>
+);
+
+export default routes;
diff --git a/packages/terra-modal/tests/nightwatch/ModalTests.jsx b/packages/terra-modal/tests/nightwatch/ModalTests.jsx
new file mode 100644
index 00000000000..18e775cff13
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/ModalTests.jsx
@@ -0,0 +1,26 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+import React from 'react';
+import { Link } from 'react-router';
+
+const ModalTests = () => (
+  <div>
+    <ul>
+      <li><Link to="/tests/modal-tests/append-class">Append CSS Class</Link></li>
+      <li><Link to="/tests/modal-tests/content-overflow">Content Overflow</Link></li>
+      <li><Link to="/tests/modal-tests/dialog">Dialog Example</Link></li>
+      <li><Link to="/tests/modal-tests/disable-close-on-esc">Disable Close On Esc</Link></li>
+      <li><Link to="/tests/modal-tests/disable-close-on-outside-click">Disable Close On Outside Click</Link></li>
+      <li><Link to="/tests/modal-tests/event-hooks">Event Hooks</Link></li>
+      <li><Link to="/tests/modal-tests/is-fullscreen">Fullscreen</Link></li>
+      <li><Link to="/tests/modal-tests/is-open">Using isOpen prop</Link></li>
+      <li><Link to="/tests/modal-tests/no-focusable-content">No Focusable Content</Link></li>
+      <li><Link to="/tests/modal-tests/open-by-click-on">Using openByClickOn prop</Link></li>
+      <li><Link to="/tests/modal-tests/override-role">Override Role</Link></li>
+      <li><Link to="/tests/modal-tests/scrollable-true">Scrollable True</Link></li>
+      <li><Link to="/tests/modal-tests/scrollable-false">Scrollable False</Link></li>
+    </ul>
+  </div>
+);
+
+export default ModalTests;
diff --git a/packages/terra-modal/tests/nightwatch/components/ModalAppendClass.jsx b/packages/terra-modal/tests/nightwatch/components/ModalAppendClass.jsx
new file mode 100644
index 00000000000..06b7515cb7d
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/components/ModalAppendClass.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import Modal from '../../../lib/Modal';
+import './ModalAppendClass.scss';
+
+class ModalAppendClass extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpened: true,
+    };
+
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
+
+
+  handleOpenModal() {
+    this.setState({ isOpened: true });
+  }
+
+  handleCloseModal() {
+    this.setState({ isOpened: false });
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal
+          classNameOverlay="overlay-custom-class"
+          classNameModal="modal-custom-class"
+          ariaLabel="Terra Modal"
+          isOpened={this.state.isOpened}
+        >
+          <div>
+            <h1>Terra Modal</h1>
+            <h2>Subtitle</h2>
+            <hr />
+            <p>The Terra Modal is appended to the document body.</p>
+            <p>{'Modal is assigned a role of \'document\' for accessibility.'}</p>
+            <button onClick={this.handleCloseModal}>Close Modal</button>
+          </div>
+        </Modal>
+        <button className="button-open-modal" onClick={this.handleOpenModal}>Open Modal</button>
+      </div>
+    );
+  }
+}
+
+export default ModalAppendClass;
diff --git a/packages/terra-modal/tests/nightwatch/components/ModalAppendClass.scss b/packages/terra-modal/tests/nightwatch/components/ModalAppendClass.scss
new file mode 100644
index 00000000000..0c516bf756a
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/components/ModalAppendClass.scss
@@ -0,0 +1,7 @@
+.overlay-custom-class {
+  background-color: black;
+}
+
+.modal-custom-class {
+  background-color: #DDDDDD;
+}
diff --git a/packages/terra-modal/tests/nightwatch/components/ModalContentOverflow.jsx b/packages/terra-modal/tests/nightwatch/components/ModalContentOverflow.jsx
new file mode 100644
index 00000000000..0cbd3ec0f7d
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/components/ModalContentOverflow.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import Modal from '../../../lib/Modal';
+
+class ModalContentOverflow extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpened: true,
+    };
+
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
+
+  handleOpenModal() {
+    this.setState({ isOpened: true });
+  }
+
+  handleCloseModal() {
+    this.setState({ isOpened: false });
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal
+          ariaLabel="Terra Modal"
+          isOpened={this.state.isOpened}
+        >
+          <div>
+            <h1>Terra Modal</h1>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</p>
+            <button onClick={this.handleCloseModal}>Close Modal</button>
+          </div>
+        </Modal>
+        <button onClick={this.handleOpenModal}>Open Modal</button>
+      </div>
+    );
+  }
+}
+
+
+export default ModalContentOverflow;
+
diff --git a/packages/terra-modal/tests/nightwatch/components/ModalDialog.jsx b/packages/terra-modal/tests/nightwatch/components/ModalDialog.jsx
new file mode 100644
index 00000000000..e5a38fe1f87
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/components/ModalDialog.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import IconClose from 'terra-icon/lib/icon/IconClose'; // eslint-disable-line
+import Modal from '../../../lib/Modal';
+import ModalHeader from './ModalDialog/ModalHeader';
+import ModalSubheader from './ModalDialog/ModalSubheader';
+import ModalBody from './ModalDialog/ModalBody';
+import ModalFooter from './ModalDialog/ModalFooter';
+import './ModalDialog/ModalDialog.scss';
+
+class ModalDialog extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpened: true,
+    };
+
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
+
+  handleOpenModal() {
+    this.setState({ isOpened: true });
+  }
+
+  handleCloseModal() {
+    this.setState({ isOpened: false });
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal
+          ariaLabel="Terra Modal"
+          isOpened={this.state.isOpened}
+        >
+          <div>
+            <ModalHeader>
+            Header
+            <button className={'terra-Modal-close'} onClick={this.handleCloseModal}>
+              <IconClose />
+            </button>
+            </ModalHeader>
+            <ModalSubheader>Subheader</ModalSubheader>
+            <ModalBody>
+              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+            </ModalBody>
+            <ModalFooter>
+              <button onClick={this.handleCloseModal}>Close Modal</button>
+            </ModalFooter>
+          </div>
+        </Modal>
+        <button onClick={this.handleOpenModal}>Open Modal</button>
+      </div>
+    );
+  }
+}
+
+
+export default ModalDialog;
+
diff --git a/packages/terra-modal/tests/nightwatch/components/ModalDialog/ModalBody.jsx b/packages/terra-modal/tests/nightwatch/components/ModalDialog/ModalBody.jsx
new file mode 100644
index 00000000000..1316ed0f1df
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/components/ModalDialog/ModalBody.jsx
@@ -0,0 +1,21 @@
+import React, { PropTypes } from 'react';
+
+const propTypes = {
+  children: PropTypes.node,
+};
+
+const defaultProps = {
+  children: null,
+};
+
+const ModalBody = ({ children, ...customProps }) => (
+  <div className={'terra-Modal-body'} {...customProps} >
+    {children}
+  </div>
+  );
+
+
+ModalBody.propTypes = propTypes;
+ModalBody.defaultProps = defaultProps;
+
+export default ModalBody;
diff --git a/packages/terra-modal/tests/nightwatch/components/ModalDialog/ModalDialog.scss b/packages/terra-modal/tests/nightwatch/components/ModalDialog/ModalDialog.scss
new file mode 100644
index 00000000000..a311aea6dc4
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/components/ModalDialog/ModalDialog.scss
@@ -0,0 +1,46 @@
+.terra-Modal-dialog {
+}
+
+.terra-Modal-header {
+  display: flex;
+  justify-content: space-between;
+  padding: 15px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.terra-Modal-subheader {
+  padding: 15px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.terra-Modal-body {
+  overflow-y: scroll;
+  position: relative;
+  padding: 15px;
+  max-height: 75vh;
+
+  @media screen and (min-width: 48em) {
+    max-height: 60vh;
+  }
+}
+
+.terra-Modal-footer {
+  padding: 15px;
+  text-align: right;
+  border-top: 1px solid #e5e5e5;
+}
+
+.terra-Modal-close {
+  background: 0 0;
+  border: 0;
+  color: #999;
+  cursor: pointer;
+  font-size: 1.45rem;
+  font-weight: 700;
+  line-height: 1;
+  padding: 0;
+
+  &:hover {
+    color: #111;
+  }
+}
diff --git a/packages/terra-modal/tests/nightwatch/components/ModalDialog/ModalFooter.jsx b/packages/terra-modal/tests/nightwatch/components/ModalDialog/ModalFooter.jsx
new file mode 100644
index 00000000000..6fe6a241de8
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/components/ModalDialog/ModalFooter.jsx
@@ -0,0 +1,22 @@
+import React, { PropTypes } from 'react';
+
+const propTypes = {
+  children: PropTypes.node,
+};
+
+const defaultProps = {
+  children: null,
+};
+
+const ModalFooter = ({ children, ...customProps }) => (
+  <div className={'terra-Modal-footer'} {...customProps} >
+    {children}
+  </div>
+  );
+
+
+ModalFooter.propTypes = propTypes;
+ModalFooter.defaultProps = defaultProps;
+
+export default ModalFooter;
+
diff --git a/packages/terra-modal/tests/nightwatch/components/ModalDialog/ModalHeader.jsx b/packages/terra-modal/tests/nightwatch/components/ModalDialog/ModalHeader.jsx
new file mode 100644
index 00000000000..c8d8b28ab15
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/components/ModalDialog/ModalHeader.jsx
@@ -0,0 +1,20 @@
+import React, { PropTypes } from 'react';
+
+const propTypes = {
+  children: PropTypes.node,
+};
+
+const defaultProps = {
+  children: null,
+};
+
+const ModalHeader = ({ children, ...customProps }) => (
+  <h1 className={'terra-Modal-header'} {...customProps} >
+    {children}
+  </h1>
+  );
+
+ModalHeader.propTypes = propTypes;
+ModalHeader.defaultProps = defaultProps;
+
+export default ModalHeader;
diff --git a/packages/terra-modal/tests/nightwatch/components/ModalDialog/ModalSubheader.jsx b/packages/terra-modal/tests/nightwatch/components/ModalDialog/ModalSubheader.jsx
new file mode 100644
index 00000000000..4a1a23ec387
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/components/ModalDialog/ModalSubheader.jsx
@@ -0,0 +1,20 @@
+import React, { PropTypes } from 'react';
+
+const propTypes = {
+  children: PropTypes.node,
+};
+
+const defaultProps = {
+  children: null,
+};
+
+const ModalSubheader = ({ children, ...customProps }) => (
+  <h2 className={'terra-Modal-subheader'} {...customProps} >
+    {children}
+  </h2>
+  );
+
+ModalSubheader.propTypes = propTypes;
+ModalSubheader.defaultProps = defaultProps;
+
+export default ModalSubheader;
diff --git a/packages/terra-modal/tests/nightwatch/components/ModalDisableCloseOnEsc.jsx b/packages/terra-modal/tests/nightwatch/components/ModalDisableCloseOnEsc.jsx
new file mode 100644
index 00000000000..f315b6f0972
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/components/ModalDisableCloseOnEsc.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import Modal from '../../../lib/Modal';
+
+class ModalDisableCloseOnEsc extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpened: true,
+    };
+
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
+  handleOpenModal() {
+    this.setState({ isOpened: true });
+  }
+
+  handleCloseModal() {
+    this.setState({ isOpened: false });
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal
+          ariaLabel="Terra Modal"
+          isOpened={this.state.isOpened}
+          closeOnEsc={false}
+        >
+          <div>
+            <h1>Terra Modal</h1>
+            <h2>Subtitle</h2>
+            <hr />
+            <p>The Terra Modal is appended to the document body.</p>
+            <p>{'Modal is assigned a role of \'document\' for accessibility.'}</p>
+            <button onClick={this.handleCloseModal}>Close Modal</button>
+          </div>
+        </Modal>
+        <button className="button-open-modal" onClick={this.handleOpenModal}>Open Modal</button>
+      </div>
+    );
+  }
+}
+
+export default ModalDisableCloseOnEsc;
diff --git a/packages/terra-modal/tests/nightwatch/components/ModalDisableCloseOnOutsideClick.jsx b/packages/terra-modal/tests/nightwatch/components/ModalDisableCloseOnOutsideClick.jsx
new file mode 100644
index 00000000000..4fdd37e2b3f
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/components/ModalDisableCloseOnOutsideClick.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import Modal from '../../../lib/Modal';
+
+class ModalDisableCloseOnOutsideClick extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpened: true,
+    };
+
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
+  handleOpenModal() {
+    this.setState({ isOpened: true });
+  }
+
+  handleCloseModal() {
+    this.setState({ isOpened: false });
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal
+          ariaLabel="Terra Modal"
+          isOpened={this.state.isOpened}
+          closeOnOutsideClick={false}
+        >
+          <div>
+            <h1>Terra Modal</h1>
+            <h2>Subtitle</h2>
+            <hr />
+            <p>The Terra Modal is appended to the document body.</p>
+            <p>{'Modal is assigned a role of \'document\' for accessibility.'}</p>
+            <button onClick={this.handleCloseModal}>Close Modal</button>
+          </div>
+        </Modal>
+        <button className="button-open-modal" onClick={this.handleOpenModal}>Open Modal</button>
+      </div>
+    );
+  }
+}
+
+export default ModalDisableCloseOnOutsideClick;
diff --git a/packages/terra-modal/tests/nightwatch/components/ModalEventHooks.jsx b/packages/terra-modal/tests/nightwatch/components/ModalEventHooks.jsx
new file mode 100644
index 00000000000..d7365789517
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/components/ModalEventHooks.jsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import Modal from '../../../lib/Modal';
+
+class ModalEventHooks extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpened: false,
+    };
+
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+
+    this.handleOnOpen = this.handleOnOpen.bind(this);
+    this.handleOnClose = this.handleOnClose.bind(this);
+    this.handleOnUpdate = this.handleOnUpdate.bind(this);
+    this.handleBeforeClose = this.handleBeforeClose.bind(this);
+  }
+
+
+  /* eslint-disable */
+  handleOnOpen(node) {
+    const onOpenElement = document.getElementById('onOpen');
+    onOpenElement.innerHTML = 'onOpen: Called';
+  }
+
+  handleOnClose() {
+    const onOpenElement = document.getElementById('onClose');
+    onOpenElement.innerHTML = 'onClose: Called';
+  }
+
+  handleOnUpdate() {
+    const onOpenElement = document.getElementById('onUpdate');
+    onOpenElement.innerHTML = 'onUpdate: Called';
+  }
+
+  handleBeforeClose(node, callback) {
+    const onOpenElement = document.getElementById('beforeClose');
+    onOpenElement.innerHTML = 'beforeClose: Called';
+    callback();
+  }
+  /* eslint-enable */
+
+  handleOpenModal() {
+    this.setState({ isOpened: true });
+  }
+
+  handleCloseModal() {
+    this.setState({ isOpened: false });
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal
+          ariaLabel="Terra Modal"
+          isOpened={this.state.isOpened}
+          onOpen={this.handleOnOpen}
+          onClose={this.handleOnClose}
+          onUpdate={this.handleOnUpdate}
+          beforeClose={this.handleBeforeClose}
+        >
+          <div>
+            <h1>Terra Modal</h1>
+            <h2>Subtitle</h2>
+            <hr />
+            <p>The Terra Modal is appended to the document body.</p>
+            <p>{'Modal is assigned a role of \'document\' for accessibility.'}</p>
+            <button onClick={this.handleCloseModal}>Close Modal</button>
+          </div>
+        </Modal>
+        <button className="button-open-modal" onClick={this.handleOpenModal}>Open Modal</button>
+        <div id="onOpen">onOpen: Not Called</div>
+        <div id="onUpdate">onUpdate: Not Called</div>
+        <div id="onClose">onClose: Not Called</div>
+        <div id="beforeClose">beforeClose: Not Called</div>
+      </div>
+    );
+  }
+}
+
+export default ModalEventHooks;
diff --git a/packages/terra-modal/tests/nightwatch/components/ModalIsFullscreen.jsx b/packages/terra-modal/tests/nightwatch/components/ModalIsFullscreen.jsx
new file mode 100644
index 00000000000..b6565e51759
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/components/ModalIsFullscreen.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import Modal from '../../../lib/Modal';
+
+class ModalIsFullscreen extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpened: true,
+    };
+
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
+
+  handleOpenModal() {
+    this.setState({ isOpened: true });
+  }
+
+  handleCloseModal() {
+    this.setState({ isOpened: false });
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal
+          ariaLabel="Terra Modal"
+          isOpened={this.state.isOpened}
+          isFullscreen
+        >
+          <div>
+            <h1>Terra Modal</h1>
+            <h2>Subtitle</h2>
+            <hr />
+            <p>The Terra Modal is appended to the document body.</p>
+            <p>{'Modal is assigned a role of \'document\' for accessibility.'}</p>
+            <button onClick={this.handleCloseModal}>Close Modal</button>
+          </div>
+        </Modal>
+        <button className="button-open-modal" onClick={this.handleOpenModal}>Open isOpen modal</button>
+      </div>
+    );
+  }
+}
+
+
+export default ModalIsFullscreen;
+
diff --git a/packages/terra-modal/tests/nightwatch/components/ModalIsOpen.jsx b/packages/terra-modal/tests/nightwatch/components/ModalIsOpen.jsx
new file mode 100644
index 00000000000..d88464b4cae
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/components/ModalIsOpen.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import Modal from '../../../lib/Modal';
+
+class ModalIsOpen extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpened: false,
+    };
+
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
+
+
+  handleOpenModal() {
+    this.setState({ isOpened: true });
+  }
+
+  handleCloseModal() {
+    this.setState({ isOpened: false });
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal
+          ariaLabel="Terra Modal"
+          isOpened={this.state.isOpened}
+        >
+          <div>
+            <h1>Terra Modal</h1>
+            <h2>Subtitle</h2>
+            <hr />
+            <p>The Terra Modal is appended to the document body.</p>
+            <p>{'Modal is assigned a role of \'document\' for accessibility.'}</p>
+            <button onClick={this.handleCloseModal}>Close Modal</button>
+          </div>
+        </Modal>
+        <button className="button-open-modal" onClick={this.handleOpenModal}>Open Modal</button>
+      </div>
+    );
+  }
+}
+
+export default ModalIsOpen;
diff --git a/packages/terra-modal/tests/nightwatch/components/ModalNoFocusableContent.jsx b/packages/terra-modal/tests/nightwatch/components/ModalNoFocusableContent.jsx
new file mode 100644
index 00000000000..53181079726
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/components/ModalNoFocusableContent.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import Modal from '../../../lib/Modal';
+
+class ModalNoFocusableContent extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpened: true,
+    };
+
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
+
+
+  handleOpenModal() {
+    this.setState({ isOpened: true });
+  }
+
+  handleCloseModal() {
+    this.setState({ isOpened: false });
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal
+          ariaLabel="Terra Modal"
+          isOpened={this.state.isOpened}
+        >
+          <div>No focusable content inside the modal.</div>
+        </Modal>
+        <button className="button-open-modal" onClick={this.handleOpenModal}>Open Modal</button>
+      </div>
+    );
+  }
+}
+
+export default ModalNoFocusableContent;
diff --git a/packages/terra-modal/tests/nightwatch/components/ModalOverrideRole.jsx b/packages/terra-modal/tests/nightwatch/components/ModalOverrideRole.jsx
new file mode 100644
index 00000000000..2ddf29d0e6a
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/components/ModalOverrideRole.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import Modal from '../../../lib/Modal';
+
+class ModalOverrideRole extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpened: true,
+    };
+
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
+
+  handleOpenModal() {
+    this.setState({ isOpened: true });
+  }
+
+  handleCloseModal() {
+    this.setState({ isOpened: false });
+  }
+
+  render() {
+    const newRole = 'button';
+    return (
+      <div>
+        <Modal
+          ariaLabel="Terra Modal"
+          isOpened={this.state.isOpened}
+          role={newRole}
+        >
+          <div>
+            <p>The role is overriden to <b>{newRole}</b></p>
+            <button onClick={this.handleCloseModal}>Close Modal</button>
+          </div>
+        </Modal>
+        <button className="button-open-modal" onClick={this.handleOpenModal}>Open isOpen modal</button>
+      </div>
+    );
+  }
+}
+
+
+export default ModalOverrideRole;
+
diff --git a/packages/terra-modal/tests/nightwatch/components/ModalScrollableFalse.jsx b/packages/terra-modal/tests/nightwatch/components/ModalScrollableFalse.jsx
new file mode 100644
index 00000000000..5faec89da49
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/components/ModalScrollableFalse.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import Modal from '../../../lib/Modal';
+
+class ModalScrollableFalse extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpened: true,
+    };
+
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
+
+  handleOpenModal() {
+    this.setState({ isOpened: true });
+  }
+
+  handleCloseModal() {
+    this.setState({ isOpened: false });
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal
+          ariaLabel="Terra Modal"
+          isOpened={this.state.isOpened}
+          isScrollable={false}
+        >
+          <div>
+            <p>overflow-y: scroll should be set.</p>
+            <p>terra-Modal--scrollable class should be on terra-Modal</p>
+            <br />
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</p>
+            <button onClick={this.handleCloseModal}>Close Modal</button>
+          </div>
+        </Modal>
+        <button className="button-open-modal" onClick={this.handleOpenModal}>Open Modal</button>
+      </div>
+    );
+  }
+}
+
+export default ModalScrollableFalse;
diff --git a/packages/terra-modal/tests/nightwatch/components/ModalScrollableTrue.jsx b/packages/terra-modal/tests/nightwatch/components/ModalScrollableTrue.jsx
new file mode 100644
index 00000000000..df2507643c7
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/components/ModalScrollableTrue.jsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import Modal from '../../../lib/Modal';
+
+class ModalScrollableTrue extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpened: true,
+    };
+
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
+
+  handleOpenModal() {
+    this.setState({ isOpened: true });
+  }
+
+  handleCloseModal() {
+    this.setState({ isOpened: false });
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal
+          ariaLabel="Terra Modal"
+          isOpened={this.state.isOpened}
+          isScrollable
+        >
+          <div>
+            <p>overflow-y: scroll should be set.</p>
+            <p>terra-Modal--scrollable class should be on terra-Modal</p>
+            <br />
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</p>
+            <button onClick={this.handleCloseModal}>Close Modal</button>
+          </div>
+        </Modal>
+        <button className="button-open-modal" onClick={this.handleOpenModal}>Open Modal</button>
+      </div>
+    );
+  }
+}
+
+export default ModalScrollableTrue;
diff --git a/packages/terra-modal/tests/nightwatch/modal-spec.js b/packages/terra-modal/tests/nightwatch/modal-spec.js
new file mode 100644
index 00000000000..d68603da887
--- /dev/null
+++ b/packages/terra-modal/tests/nightwatch/modal-spec.js
@@ -0,0 +1,221 @@
+/* eslint import/no-extraneous-dependencies: ["error", {"devDependencies": true}] */
+const screenshot = require('terra-toolkit').screenshot;
+
+module.exports = {
+  before: (browser, done) => {
+    browser.resizeWindow(browser.globals.width, browser.globals.height, done);
+  },
+
+  afterEach: (browser, done) => {
+    screenshot(browser, 'terra-modal', done);
+  },
+
+  'isOpen prop': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/is-open`)
+      .waitForElementPresent('.button-open-modal', 1000)
+      .waitForElementNotPresent('.terra-Modal', 1000)
+      .click('.button-open-modal')
+      .waitForElementPresent('.terra-Modal', 1000)
+      .click('.terra-Modal-overlay')
+      .waitForElementNotPresent('.terra-Modal', 1000);
+  },
+
+  'isFullscreen={true}': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/is-fullscreen`)
+      .waitForElementPresent('.terra-Modal.terra-Modal--fullscreen', 1000);
+  },
+
+  'isFullscreen={false}': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/disable-close-on-esc`)
+      .waitForElementNotPresent('.terra-Modal.terra-Modal--fullscreen', 1000);
+  },
+
+  'closeOnOutsideClick={true}': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/is-fullscreen`)
+      .waitForElementPresent('.terra-Modal', 1000)
+      .click('.terra-Modal-overlay')
+      .waitForElementNotPresent('.terra-Modal', 1000);
+  },
+
+  'closeOnOutsideClick={false}': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/disable-close-on-outside-click`)
+      .waitForElementPresent('.terra-Modal', 1000)
+      .click('.terra-Modal-overlay')
+      .waitForElementPresent('.terra-Modal', 1000);
+  },
+
+  'closeOnEsc={false}': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/disable-close-on-esc`)
+      .waitForElementPresent('.terra-Modal', 1000)
+      .setValue('body', [browser.Keys.ESC])
+      .waitForElementPresent('.terra-Modal', 1000);
+  },
+
+  'closeOnEsc={true}': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/is-fullscreen`)
+      .waitForElementPresent('.terra-Modal', 1000)
+      .setValue('body', [browser.Keys.ESC])
+      .waitForElementPresent('.terra-Modal', 1000);
+  },
+
+  'set ariaLabel': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/is-fullscreen`)
+      .waitForElementPresent('.terra-Modal', 1000)
+      .expect.element('.terra-Modal').to.have.attribute('aria-label').which.contains('Terra Modal');
+  },
+
+  'role default value': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/is-fullscreen`)
+      .waitForElementPresent('.terra-Modal', 1000)
+      .expect.element('.terra-Modal').to.have.attribute('role').which.contains('document');
+  },
+
+  'role is overridable': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/override-role`)
+      .waitForElementPresent('.terra-Modal', 1000)
+      .expect.element('.terra-Modal').to.have.attribute('role').which.contains('button');
+  },
+
+  'event hooks: onOpen': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/event-hooks`)
+      .waitForElementPresent('.button-open-modal', 1000)
+      .waitForElementNotPresent('.terra-Modal', 1000)
+      .expect.element('#onOpen').text.to.contain('onOpen: Not Called');
+
+    browser
+      .click('.button-open-modal')
+      .waitForElementPresent('.terra-Modal', 1000)
+      .expect.element('#onOpen').text.to.contain('onOpen: Called');
+
+    browser
+      .click('.terra-Modal-overlay')
+      .waitForElementNotPresent('.terra-Modal', 1000)
+      .expect.element('#onOpen').text.to.contain('onOpen: Called');
+  },
+
+  'event hooks: onUpdate': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/event-hooks`)
+      .waitForElementPresent('.button-open-modal', 1000)
+      .waitForElementNotPresent('.terra-Modal', 1000)
+      .expect.element('#onUpdate').text.to.contain('onUpdate: Not Called');
+
+    browser
+      .click('.button-open-modal')
+      .waitForElementPresent('.terra-Modal', 1000)
+      .expect.element('#onUpdate').text.to.contain('onUpdate: Called');
+
+
+    browser
+      .click('.terra-Modal-overlay')
+      .waitForElementNotPresent('.terra-Modal', 1000)
+      .expect.element('#onUpdate').text.to.contain('onUpdate: Called');
+  },
+
+  'event hooks: onClose': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/event-hooks`)
+      .waitForElementPresent('.button-open-modal', 1000)
+      .waitForElementNotPresent('.terra-Modal', 1000)
+      .expect.element('#onClose').text.to.contain('onClose: Not Called');
+
+    browser
+      .click('.button-open-modal')
+      .waitForElementPresent('.terra-Modal', 1000)
+      .expect.element('#onClose').text.to.contain('onClose: Not Called');
+
+    browser
+      .click('.terra-Modal-overlay')
+      .waitForElementNotPresent('.terra-Modal', 1000)
+      .expect.element('#onClose').text.to.contain('onClose: Called');
+  },
+
+  'event hooks: beforeClose': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/event-hooks`)
+      .waitForElementPresent('.button-open-modal', 1000)
+      .waitForElementNotPresent('.terra-Modal', 1000)
+      .expect.element('#beforeClose').text.to.contain('beforeClose: Not Called');
+
+    browser
+      .click('.button-open-modal')
+      .waitForElementPresent('.terra-Modal', 1000)
+      .expect.element('#beforeClose').text.to.contain('beforeClose: Not Called');
+
+    browser
+      .click('.terra-Modal-overlay')
+      .waitForElementNotPresent('.terra-Modal', 1000)
+      .expect.element('#beforeClose').text.to.contain('beforeClose: Called');
+  },
+
+  'append css class to modal': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/append-class`)
+      .waitForElementPresent('.terra-Modal', 1000)
+      .expect.element('.terra-Modal').to.have.attribute('class').which.contains('terra-Modal modal-custom-class');
+  },
+
+  'append css class to overlay': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/append-class`)
+      .waitForElementPresent('.terra-Modal', 1000)
+      .expect.element('.terra-Modal-overlay').to.have.attribute('class').which.contains('terra-Modal-overlay overlay-custom-class');
+  },
+
+  'content overflow example': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/content-overflow`)
+      .waitForElementPresent('.terra-Modal', 1000);
+  },
+
+  'modal is focusable': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/no-focusable-content`)
+      .waitForElementPresent('.terra-Modal', 1000)
+      .expect.element('.terra-Modal').to.have.attribute('tabindex').which.equals('0');
+  },
+
+  'background does not scroll when modal is open': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/content-overflow`)
+      .waitForElementPresent('.terra-Modal', 1000)
+      .expect.element('html').to.have.attribute('style').which.equals('overflow: hidden;');
+
+    browser
+      .click('.terra-Modal-overlay')
+      .waitForElementNotPresent('.terra-Modal', 1000)
+      .expect.element('html').to.have.attribute('style').which.equals('');
+  },
+
+  'isScrollable default value': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/content-overflow`)
+      .waitForElementPresent('.terra-Modal', 1000)
+      .expect.element('.terra-Modal').to.have.attribute('class').which.equals('terra-Modal');
+  },
+
+  'isScrollable={false}': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/scrollable-false`)
+      .waitForElementPresent('.terra-Modal', 1000)
+      .expect.element('.terra-Modal').to.have.attribute('class').which.equals('terra-Modal');
+  },
+
+  'isScrollable={true}': (browser) => {
+    browser
+      .url(`http://localhost:${browser.globals.webpackDevServerPort}/#/tests/modal-tests/scrollable-true`)
+      .waitForElementPresent('.terra-Modal', 1000)
+      .expect.element('.terra-Modal').to.have.attribute('class').which.equals('terra-Modal terra-Modal--scrollable');
+  },
+};
diff --git a/packages/terra-site/package.json b/packages/terra-site/package.json
index 61c69431f8b..94e20c6a478 100644
--- a/packages/terra-site/package.json
+++ b/packages/terra-site/package.json
@@ -44,6 +44,7 @@
     "terra-markdown": "^0.x",
     "terra-menu": "^0.x",
     "terra-mixins": "^1.0.1",
+    "terra-modal": "^0.x",
     "terra-progress-bar": "^0.x",
     "terra-props-table": "^0.x",
     "terra-responsive-element": "^0.x",
@@ -66,8 +67,10 @@
     "node-sass": "^4.5.0",
     "postcss-loader": "^1.3.3",
     "raw-loader": "^0.5.1",
+    "react-portal": "^3.0.0",
     "sass-loader": "^4.1.1",
     "style-loader": "^0.13.2",
+    "terra-icon": "0.x",
     "terra-toolkit": "^0.x",
     "webpack": "^1.14.0",
     "webpack-dev-server": "^1.16.2",
diff --git a/packages/terra-site/src/App.jsx b/packages/terra-site/src/App.jsx
index fec20805a54..70212f70658 100644
--- a/packages/terra-site/src/App.jsx
+++ b/packages/terra-site/src/App.jsx
@@ -33,6 +33,7 @@ const App = props => (
             <List.Item content={<Link to="/site/icon">Icon</Link>} />
             <List.Item content={<Link to="/site/image">Image</Link>} />
             <List.Item content={<Link to="/site/list">List</Link>} />
+            <List.Item content={<Link to="/site/modal">Modal</Link>} />
             <List.Item content={<Link to="/site/progress-bar">Progress Bar</Link>} />
             <List.Item content={<Link to="/site/responsive-element">Responsive Element</Link>} />
             <List.Item content={<Link to="/site/slide-panel">Slide Panel</Link>} />
diff --git a/packages/terra-site/src/Index.jsx b/packages/terra-site/src/Index.jsx
index 52f2d7d60fa..c7a3088a6e6 100644
--- a/packages/terra-site/src/Index.jsx
+++ b/packages/terra-site/src/Index.jsx
@@ -18,6 +18,7 @@ import I18nExamples from './examples/i18n/Index';
 import IconExamples from './examples/icon/Index';
 import ImageExamples from './examples/image/Index';
 import ListExamples from './examples/list/Index';
+import ModalExamples from './examples/modal/Index';
 import ProgressBarExamples from './examples/progress-bar/Index';
 import ResponsiveElementExamples from './examples/responsive-element/Index';
 import SlidePanelExamples from './examples/slide-panel/Index';
@@ -34,6 +35,7 @@ import BadgeTestRoutes from 'terra-badge/tests/nightwatch/BadgeTestRoutes';
 import BaseTestRoutes from 'terra-base/tests/nightwatch/BaseTestRoutes';
 import ButtonTestRoutes from 'terra-button/tests/nightwatch/ButtonTestRoutes';
 import ButtonGroupTestRoutes from 'terra-button-group/tests/nightwatch/ButtonGroupTestRoutes';
+import ContentContainerTestRoutes from 'terra-content-container/tests/nightwatch/ContentContainerTestRoutes';
 import DatePickerTestRoutes from 'terra-date-picker/tests/nightwatch/DatePickerTestRoutes';
 import I18nTestRoutes from 'terra-i18n/tests/nightwatch/I18nTestRoutes';
 import ImageTestRoutes from 'terra-image/tests/nightwatch/ImageTestRoutes';
@@ -44,7 +46,7 @@ import ListItemTestRoutes from 'terra-list/tests/nightwatch/list-item/ListItemTe
 import SingleSelectListTestRoutes from 'terra-list/tests/nightwatch/single-select-list/SingleSelectListTestRoutes';
 import MultiSelectListTestRoutes from 'terra-list/tests/nightwatch/multi-select-list/MultiSelectListTestRoutes';
 import TableTestRoutes from 'terra-table/tests/nightwatch/TableTestRoutes';
-import ContentContainerTestRoutes from 'terra-content-container/tests/nightwatch/ContentContainerTestRoutes';
+import ModalTestRoutes from 'terra-modal/tests/nightwatch/ModalTestRoutes';
 import StatusTestRoutes from 'terra-status/tests/nightwatch/StatusTestRoutes';
 import TestLinks from './TestLinks';
 /* eslint-enable import/first */
@@ -67,6 +69,7 @@ ReactDOM.render((
       <Route path="icon" component={IconExamples} />
       <Route path="image" component={ImageExamples} />
       <Route path="list" component={ListExamples} />
+      <Route path="modal" component={ModalExamples} />
       <Route path="progress-bar" component={ProgressBarExamples} />
       <Route path="responsive-element" component={ResponsiveElementExamples} />
       <Route path="slide-panel" component={SlidePanelExamples} />
@@ -93,5 +96,6 @@ ReactDOM.render((
     {MultiSelectListTestRoutes}
     {StatusTestRoutes}
     {TableTestRoutes}
+    {ModalTestRoutes}
   </Router>
 ), document.getElementById('root'));
diff --git a/packages/terra-site/src/TestLinks.jsx b/packages/terra-site/src/TestLinks.jsx
index 1aa8ddf94f3..e7f9e95b60d 100644
--- a/packages/terra-site/src/TestLinks.jsx
+++ b/packages/terra-site/src/TestLinks.jsx
@@ -22,6 +22,7 @@ const TestLinks = () => (
       <li><Link to="/tests/multi-select-list-tests">MultiSelectList Tests</Link></li>
       <li><Link to="/tests/status-tests">Status Tests</Link></li>
       <li><Link to="/tests/table-tests">Table Tests</Link></li>
+      <li><Link to="/tests/modal-tests">Modal Tests</Link></li>
     </ul>
   </div>
 );
diff --git a/packages/terra-site/src/examples/modal/Index.jsx b/packages/terra-site/src/examples/modal/Index.jsx
new file mode 100644
index 00000000000..5180bb38bb6
--- /dev/null
+++ b/packages/terra-site/src/examples/modal/Index.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropsTable from 'terra-props-table';
+import Markdown from 'terra-markdown';
+import ReadMe from 'terra-modal/docs/README.md';
+import { version } from 'terra-modal/package.json';
+
+// Component Source
+// eslint-disable-next-line import/no-webpack-loader-syntax, import/first, import/no-unresolved, import/extensions
+import ModalSrc from '!raw-loader!terra-modal/src/Modal';
+
+// Example Files
+import ModalIsOpened from './ModalIsOpened';
+import ModalDisableCloseOnEscCloseOnOutsideClick from './ModalDisableCloseOnEscCloseOnOutsideClick';
+import ModalIsFullscreen from './ModalIsFullscreen';
+
+const ModalExamples = () => (
+  <div>
+    <div id="version">Version: {version}</div>
+    <Markdown id="readme" src={ReadMe} />
+    <PropsTable id="props-table" src={ModalSrc} />
+    <h2 id="isOpened">Using isOpened prop</h2>
+    <ModalIsOpened />
+    <h2 id="closeOnEsc-closeOnOutsideClick">Disable Close on esc and close on outside click</h2>
+    <ModalDisableCloseOnEscCloseOnOutsideClick />
+    <h2 id="isFullscreen">Enable isFullscreen</h2>
+    <ModalIsFullscreen />
+  </div>
+);
+
+export default ModalExamples;
diff --git a/packages/terra-site/src/examples/modal/ModalDisableCloseOnEscCloseOnOutsideClick.jsx b/packages/terra-site/src/examples/modal/ModalDisableCloseOnEscCloseOnOutsideClick.jsx
new file mode 100644
index 00000000000..42c5ffc1127
--- /dev/null
+++ b/packages/terra-site/src/examples/modal/ModalDisableCloseOnEscCloseOnOutsideClick.jsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import Modal from 'terra-modal';
+
+class ModalDisableCloseOnEscCloseOnOutsideClick extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpened: false,
+    };
+
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
+
+  handleOpenModal() {
+    this.setState({ isOpened: true });
+  }
+
+  handleCloseModal() {
+    this.setState({ isOpened: false });
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal
+          ariaLabel="Terra Modal"
+          isOpened={this.state.isOpened}
+          closeOnEsc={false}
+          closeOnOutsideClick={false}
+        >
+          <div>
+            <h1>Terra Modal</h1>
+            <button onClick={this.handleCloseModal}>Close Modal</button>
+          </div>
+        </Modal>
+        <button onClick={this.handleOpenModal}>Open Modal</button>
+      </div>
+    );
+  }
+}
+
+export default ModalDisableCloseOnEscCloseOnOutsideClick;
diff --git a/packages/terra-site/src/examples/modal/ModalIsFullscreen.jsx b/packages/terra-site/src/examples/modal/ModalIsFullscreen.jsx
new file mode 100644
index 00000000000..057ade915f9
--- /dev/null
+++ b/packages/terra-site/src/examples/modal/ModalIsFullscreen.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import Modal from 'terra-modal';
+
+class ModalIsFullscreen extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpened: false,
+    };
+
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
+
+  handleOpenModal() {
+    this.setState({ isOpened: true });
+  }
+
+  handleCloseModal() {
+    this.setState({ isOpened: false });
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal
+          ariaLabel="Terra Modal"
+          isOpened={this.state.isOpened}
+          isFullscreen
+          closeOnEsc
+          closeOnOutsideClick
+          onClose={this.onClose}
+          onOpen={this.onOpen}
+          onUpdate={this.onUpdate}
+        >
+          <div>
+            <h1>Terra Modal</h1>
+            <button onClick={this.handleCloseModal}>Close isOpen modal</button>
+          </div>
+        </Modal>
+        <button onClick={this.handleOpenModal}>Open isOpen modal</button>
+      </div>
+    );
+  }
+}
+
+export default ModalIsFullscreen;
diff --git a/packages/terra-site/src/examples/modal/ModalIsOpened.jsx b/packages/terra-site/src/examples/modal/ModalIsOpened.jsx
new file mode 100644
index 00000000000..7f22d54c0ee
--- /dev/null
+++ b/packages/terra-site/src/examples/modal/ModalIsOpened.jsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import Modal from 'terra-modal';
+
+class ModalIsOpened extends React.Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isOpened: false,
+    };
+
+    this.handleOpenModal = this.handleOpenModal.bind(this);
+    this.handleCloseModal = this.handleCloseModal.bind(this);
+  }
+
+  handleOpenModal() {
+    this.setState({ isOpened: true });
+  }
+
+  handleCloseModal() {
+    this.setState({ isOpened: false });
+  }
+
+  render() {
+    return (
+      <div>
+        <Modal
+          ariaLabel="Terra Modal"
+          isOpened={this.state.isOpened}
+        >
+          <div>
+            <h1>Terra Modal</h1>
+            <button onClick={this.handleCloseModal}>Close Modal</button>
+          </div>
+        </Modal>
+        <button onClick={this.handleOpenModal}>Open Modal</button>
+      </div>
+    );
+  }
+}
+
+export default ModalIsOpened;