diff --git a/public/index.html b/public/index.html
index 1ab98bb..ea55125 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,7 +17,7 @@
 <body>
 <header>
     <div class="spielanleitung"><span
-            onclick="document.getElementById('modal').style.display = 'block';">Spielanleitung</span></div>
+            onclick="open_manual();">Spielanleitung</span></div>
     <div class="title">PM-Game</div>
     <div class="build"><span>DATE_TO_BE_REPLACED</span><span><a href="COMMIT_LINK_TO_BE_REPLACED" target="_blank">COMMIT_TO_BE_REPLACED</a></span>
     </div>
@@ -59,11 +59,6 @@
                          onclick="document.getElementById('modal').style.display = 'none';">close</i></span>
             </div>
             <div class="divider"></div>
-            <iframe height="678"
-                    id="spielanleitung"
-                    src="data/Spielanleitung.pdf"
-                    width="500">
-            </iframe>
         </div>
     </div>
 </main>
diff --git a/public/js/index.js b/public/js/index.js
index 8493e39..f69d669 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -51,4 +51,12 @@ document.getElementById('ok').addEventListener('click', function () {
     socket.on('user left', function (data) {
         addLogMessage(data + ' left');
     });
-});
\ No newline at end of file
+});
+
+function open_manual() {
+    let frame = document.createElement('iframe');
+    frame.src = 'data/Spielanleitung.pdf';
+    frame.id = 'spielanleitung';
+    document.getElementById('content').appendChild(frame);
+    document.getElementById('modal').style.display = 'block';
+}
\ No newline at end of file
