diff --git a/web/src/js/components/Modal/Modal.jsx b/web/src/js/components/Modal/Modal.jsx
new file mode 100644
index 000000000..3370ad368
--- /dev/null
+++ b/web/src/js/components/Modal/Modal.jsx
@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import * as modalAction from '../../ducks/ui/modal'
+import ModalList from './ModalList'
+
+class PureModal extends Component {
+
+ constructor(props, context) {
+ super(props, context)
+ }
+
+ render() {
+ const { activeModal, hideModal } = this.props
+ const ActiveModal = _.find(ModalList, m => m.name === activeModal )
+ return(
+ activeModal ?
+
+ :
+ )
+ }
+}
+
+export default connect(
+ state => ({
+ activeModal: state.ui.modal.activeModal
+ }),
+ {
+ hideModal: modalAction.hideModal
+ }
+)(PureModal)
diff --git a/web/src/js/components/Modal/ModalList.jsx b/web/src/js/components/Modal/ModalList.jsx
new file mode 100644
index 000000000..41b36f009
--- /dev/null
+++ b/web/src/js/components/Modal/ModalList.jsx
@@ -0,0 +1,3 @@
+import OptionModal from './OptionModal'
+
+export default [ OptionModal, EmptyModal ]
diff --git a/web/src/js/components/Modal/OptionModal.jsx b/web/src/js/components/Modal/OptionModal.jsx
new file mode 100644
index 000000000..d9e8b8298
--- /dev/null
+++ b/web/src/js/components/Modal/OptionModal.jsx
@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+OptionModal.prototype = {
+ hideModal: PropTypes.function,
+}
+
+export default function OptionModal( { hideModal }) {
+ const title = 'Options'
+ return (
+
+
+
+
+
+
+
{ title }
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}