diff --git a/party/static/css/session.css b/party/static/css/session.css
index 2855941..0437166 100644
--- a/party/static/css/session.css
+++ b/party/static/css/session.css
@@ -299,8 +299,8 @@ border: 1px solid #555;
 
 .submit_button{
     position: fixed;
-    width: 250px; 
-    height: 50px;
+    width: 10%; 
+    height: 5%;
     background-color: #454443;
     border-radius: 10px;
     cursor: pointer;
diff --git a/party/static/js/session.js b/party/static/js/session.js
index 87ee340..a7a0943 100644
--- a/party/static/js/session.js
+++ b/party/static/js/session.js
@@ -1,3 +1,11 @@
+window.addEventListener('DOMContentLoaded', function() {
+    var name = sessionStorage.getItem('name'); // Den Namen aus dem SessionStorage abrufen
+
+    if (name) {
+      document.getElementById('peter').textContent = name; // Den Namen bei dem Element mit der ID "peter" ausgeben
+    }
+  });
+
 // Array zum Speichern der Div-Elemente
 var divs = document.querySelectorAll('.hidden-div');
 // Aktuell ausgewählter Button-Index
diff --git a/party/templates/login.html b/party/templates/login.html
index d448262..c1bb44a 100644
--- a/party/templates/login.html
+++ b/party/templates/login.html
@@ -7,10 +7,10 @@
 </head>
 <body>
 <h1>Party Controller</h1>
-    <form action="/api/login">
+    <form id="loginForm" action="/api/login">
         <div class="button-container">
-            <input type="text" name="name" placeholder="Name" maxlength="20" minlength="1" required>
-            <button class="button" type="submit">Login</button>
+            <input id="nameInput" type="text" name="name" placeholder="Name" maxlength="20" minlength="1" required>
+            <button id="loginButton" class="button" type="submit">Login</button>
         </div>
     </form>
     
@@ -18,10 +18,19 @@
         <div>Partycontroller Version 0.1</div>
         <div>&copy; Lostkids</div>
     </footer>
-
+    
     <script>
-     
+        document.getElementById("loginForm").addEventListener("submit", function(event) {
+            event.preventDefault(); // Verhindert das normale Absenden des Formulars
+            
+            var nameInput = document.getElementById("nameInput");
+            var name = nameInput.value;
+            
+            sessionStorage.setItem("name", name);
+            
+            // Das Formular manuell absenden
+            this.submit();
+        });
     </script>
 </body>
 </html>
-
diff --git a/party/templates/session.html b/party/templates/session.html
index 6609c00..c07a3a1 100644
--- a/party/templates/session.html
+++ b/party/templates/session.html
@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="{{ url_for('static', filename='../static/css/session.css') }}">
 </head>
 <body>
+    {% block content %}   
  <div class="top-bar"></div>
     
     <div class="content">
@@ -25,7 +26,7 @@
     
     <p class="eventinfo">Nächstes Event: </p>
     
-    <p class="peter" onclick="togglePopup()">Peter</p> <!-- Hinzugefügtes "onclick"-Attribut -->
+    <p id="peter" class="peter" onclick="togglePopup()">Peter</p> <!-- Hinzugefügtes "onclick"-Attribut -->
     
     <p class="songinfo">Song: </p> 
     <div class="topnext" onclick=""></div>
@@ -111,6 +112,7 @@
         <div>Partycontroller Version 0.1</div>
         <div>&copy; Lostkids</div>
     </footer>
+    {% endblock %}
     <script src="{{url_for('static', filename='js/session.js')}}"></script>
 </body>
 </html>
