diff --git a/packages/strapi-plugin-setings-manager/admin/src/components/List/index.js b/packages/strapi-plugin-setings-manager/admin/src/components/List/index.js
index e6082c49aa..d44096397e 100644
--- a/packages/strapi-plugin-setings-manager/admin/src/components/List/index.js
+++ b/packages/strapi-plugin-setings-manager/admin/src/components/List/index.js
@@ -17,10 +17,25 @@
 
 import React from 'react';
 import { map } from 'lodash';
+import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
 import Button from 'components/Button';
+// import 'bootstrap/dist/css/bootstrap.css';
+
+// import Button from 'components/Button';
 import styles from './styles.scss';
 
 class List extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.state = {
+      modal: false,
+    };
+  }
+
+  toggle = () => {
+    this.setState({ modal: !this.state.modal });
+  }
+
   render() {
     const button = this.props.noListButtonPopUp ? '' :
       <Button
@@ -28,7 +43,9 @@ class List extends React.Component { // eslint-disable-line react/prefer-statele
         label={this.props.listButtonLabel}
         handlei18n={this.props.handlei18n}
         addShape
+        onClick={this.toggle}
       />;
+    console.log(this.state.modal)
     return (
       <div className={styles.listContainer}>
         <div className={styles.listComponent}>
@@ -66,6 +83,19 @@ class List extends React.Component { // eslint-disable-line react/prefer-statele
           </div>
         </div>
 
+        <div>
+          <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
+            <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
+            <ModalBody>
+            Lorem ipsum dolor sit amet, consectetur adipisicing 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.
+            </ModalBody>
+            <ModalFooter>
+              <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
+              <Button color="secondary" onClick={this.toggle}>Cancel</Button>
+            </ModalFooter>
+          </Modal>
+        </div>
+
       </div>
     );
   }
diff --git a/packages/strapi-plugin-setings-manager/admin/src/components/PopUpForm/index.js b/packages/strapi-plugin-setings-manager/admin/src/components/PopUpForm/index.js
index 3fc0e59abb..6ea1b5f4dc 100644
--- a/packages/strapi-plugin-setings-manager/admin/src/components/PopUpForm/index.js
+++ b/packages/strapi-plugin-setings-manager/admin/src/components/PopUpForm/index.js
@@ -10,6 +10,12 @@ import React from 'react';
 import styles from './styles.scss';
 
 function PopUpForm() {
+  constructor(props) {
+    super(props);
+    this.state = {
+      modal: false,
+    };
+  }
   return (
     <div className={styles.popUpForm}>
     </div>
diff --git a/packages/strapi-plugin-setings-manager/package.json b/packages/strapi-plugin-setings-manager/package.json
index f90cb9e1e5..f14dcc8311 100644
--- a/packages/strapi-plugin-setings-manager/package.json
+++ b/packages/strapi-plugin-setings-manager/package.json
@@ -24,7 +24,13 @@
     "test": "echo Tests are not implemented.",
     "prepublish": "npm run build"
   },
-  "dependencies": {},
+  "dependencies": {
+    "bootstrap": "^4.0.0-alpha.6",
+    "react": "^15.6.1",
+    "react-dom": "^15.6.1",
+    "react-transition-group": "^1.2.0",
+    "reactstrap": "^4.8.0"
+  },
   "devDependencies": {
     "strapi-helper-plugin": "3.0.0-alpha.3"
   },
@@ -45,4 +51,4 @@
     "npm": ">= 3.0.0"
   },
   "license": "MIT"
-}
\ No newline at end of file
+}