diff --git a/slaeforms/app.py b/slaeforms/app.py
index 05dec06..d8fae62 100644
--- a/slaeforms/app.py
+++ b/slaeforms/app.py
@@ -131,6 +131,14 @@ except SQLAlchemyError as e:
 #------------------------------------------------------------------------------
 #actual page logic with start, form and send
 
+@app.route("/popuptest", methods=["GET"])
+def popuptest():
+
+    return render_template(
+        "popuptest.html"
+    )
+
+
 @app.route("/start", methods=["GET", "POST"])
 def startpage():
     session.permanent = False
diff --git a/slaeforms/static/styles.css b/slaeforms/static/styles.css
index 3b10bb7..0b3ab28 100644
--- a/slaeforms/static/styles.css
+++ b/slaeforms/static/styles.css
@@ -8,6 +8,18 @@ body {
     font-size: 16px;
 }
 
+
+::backdrop {
+    background-color: grey;
+    opacity: 1;
+}
+
+dialog {
+    width: 66%;
+}
+
+
+
 .container {
     margin: 0 auto;
     /* height: 100vh;*/
diff --git a/slaeforms/templates/popuptest.html b/slaeforms/templates/popuptest.html
new file mode 100644
index 0000000..342aa14
--- /dev/null
+++ b/slaeforms/templates/popuptest.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}"" /> <!--  styles.css  {{ url_for('static', filename='styles.css')}}-->
+    <title>DGS Avatar Study</title>
+</head>
+
+<body>
+    <div class="container">
+    <h2>Hello! Thank you for participating in our study!</h2>
+    <dialog>
+        <button autofocus><img id="buttonClose" src="{{ url_for('static', filename='icons/x-icon.png')}}"
+            alt="Delete Icon" class="buttonclose"></button>
+        <div class="iframe-container">
+            <iframe class="center" src="https://www.youtube-nocookie.com/embed/VtnwHmabyzo?si=H3rrG-GHtlSymR70" title="YouTube video player" frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                allowfullscreen></iframe>
+        </div>
+        <p>Here is the text with the content of the explanation video. 
+            Here participants can read the full text that is beeing shown in the video above in sign language.
+            From Feedback with a deaf sign language expert, we concluded that giving the whole text as additional resource
+            would be a good idea, since this would help if a participants looses track of the vide, can not understand the DGS dialect,
+            or just wants to read, because maybe that is what they prefer. This is especially relevant is the participant can not see very well.</p>
+      </dialog>
+      <button>Show the dialog</button>
+      
+    <div class="textblock">
+    <p>This is a placeholder EULA and Terms and Condition Text, this should obviously be replaced with some real Text later.
+        For now, be aware that this is a prototype for a sign language avatar study.
+        The Data that you input in this form, will be saved on our servers, but in an annonimized ways, so we can not infer who sent this data.
+        The Video recordings pose a special case. Any videos that are recorded, will be reviewed by sign language experts in our team,
+        the meaning will be transcribed in text form, then the video will be deleted.
+        If you have further questions, please send an email to testemail@notarealemail.deee
+    </p>
+    </div>
+    <form class="dsgvoform" action="http://localhost:5000/start" method="post">
+    <label for="terms-and-conditions">
+        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the +terms and conditions
+    </label>
+    <div class="button-container">
+        <input id="submitbutton" type = "submit" value = "submit" />
+    </div>    
+    </form>
+</div>
+<script>
+    const dialog = document.querySelector("dialog");
+    const showButton = document.querySelector("dialog + button");
+    const closeButton = document.querySelector("dialog button");
+    
+    // "Show the dialog" button opens the dialog modally
+    showButton.addEventListener("click", () => {
+      dialog.showModal();
+    });
+    
+    // "Close" button closes the dialog
+    closeButton.addEventListener("click", () => {
+      dialog.close();
+    });
+    </script>
+</body>
+</html>
\ No newline at end of file
