diff --git a/exercises/src/portals/01-using-modals/src/App.js b/exercises/src/portals/01-using-modals/src/App.js
index ab903cd..4021764 100644
--- a/exercises/src/portals/01-using-modals/src/App.js
+++ b/exercises/src/portals/01-using-modals/src/App.js
@@ -8,6 +8,7 @@ const App = (props) => {
     <div>
       <Header />
       <Main />
+      <div id="modal"></div>
     </div>
   );
 }
diff --git a/exercises/src/portals/01-using-modals/src/Modal.js b/exercises/src/portals/01-using-modals/src/Modal.js
index e21b484..2c13611 100644
--- a/exercises/src/portals/01-using-modals/src/Modal.js
+++ b/exercises/src/portals/01-using-modals/src/Modal.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 
 class Modal extends React.Component {
 
@@ -7,16 +8,21 @@ class Modal extends React.Component {
       return null;
     }
 
-     const modalStyle = {
-        background: 'transparent',
-        width: '100%',
-        textAlign: 'center'
-      };
+    const modalStyle = {
+      background: 'transparent',
+      position: 'absolute',
+      top: 200,
+      width: '100%',
+      textAlign: 'center'
+    };
 
 
-    return <div style={modalStyle} >
+    return ReactDOM.createPortal(
+      <div style={modalStyle} >
         {this.props.children}
-      </div>;
+      </div>,
+      document.getElementById('modal'),
+    );
   }
 }