diff --git a/react-advanced-tag1/index.html b/react-advanced-tag1/index.html
index 0d0c666..6ade02d 100644
--- a/react-advanced-tag1/index.html
+++ b/react-advanced-tag1/index.html
@@ -7,6 +7,7 @@
     <title>React Advanced Cours</title>
   </head>
   <body>
+    <div id="modal"></div>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
diff --git a/react-advanced-tag1/src/common/components/Modal.css b/react-advanced-tag1/src/common/components/Modal.css
new file mode 100644
index 0000000..4f1f7ea
--- /dev/null
+++ b/react-advanced-tag1/src/common/components/Modal.css
@@ -0,0 +1,18 @@
+.modal {
+  position: fixed;
+  background-color: rgba(0, 0, 0, 0.5);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.modal .modal-content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: red;
+  padding: 20px;
+  border-radius: 5px;
+}
\ No newline at end of file
diff --git a/react-advanced-tag1/src/common/components/Modal.tsx b/react-advanced-tag1/src/common/components/Modal.tsx
new file mode 100644
index 0000000..67d0225
--- /dev/null
+++ b/react-advanced-tag1/src/common/components/Modal.tsx
@@ -0,0 +1,18 @@
+import'./Modal.css';
+
+interface ModalProps {
+    open?: boolean;
+    onClose?: () => void;
+}
+
+export default function Modal({ open= true, onClose }: ModalProps): React.ReactElement {
+    console.log("Modal rendered");
+    return (
+        <div style={{ display: open ? "block" : "none" }} className='modal' onClick={() => onClose && onClose()}>
+          <div className='modal-content'>
+            <h2>Modal</h2>
+            <p>This is a modal component.</p>
+          </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/react-advanced-tag1/src/routes/ComponentWrapperPage.tsx b/react-advanced-tag1/src/routes/ComponentWrapperPage.tsx
index eac6d2b..aa54a17 100644
--- a/react-advanced-tag1/src/routes/ComponentWrapperPage.tsx
+++ b/react-advanced-tag1/src/routes/ComponentWrapperPage.tsx
@@ -1,15 +1,19 @@
+import { createPortal } from "react-dom";
 import ComponentWrapper from "../common/components/ComponentWrapper/ComponentWrapper";
-import EffectExercises from "../common/components/exercises/EffectExercises";
+import Modal from "../common/components/Modal";
+import { useState } from "react";
 
 export default function ComponentWrapperPage() {
+  const [modalOpen, setModalOpen] = useState(false);
     return (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
-            <ComponentWrapper title='Komponenten Wrapper Test'>
-                <h1>Hallo</h1>
-            </ComponentWrapper>
-            <ComponentWrapper title='Komponenten Wrapper Test2'>
-                <EffectExercises />
-            </ComponentWrapper>
-    </div>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '3rem' }}>
+        <ComponentWrapper title='Komponenten Wrapper Test'>
+          <h1>Hallo</h1>
+        </ComponentWrapper>
+        <ComponentWrapper title='Modal Test'>
+          <button onClick={() => setModalOpen(!modalOpen)}>Toggle Modal</button>
+          {modalOpen && createPortal(<Modal onClose={() => setModalOpen(false)}/>,document.getElementById("modal") as HTMLElement)}
+        </ComponentWrapper>
+      </div>
     );
 }
\ No newline at end of file
