diff --git a/model.py b/model.py
index a836c4e..66e1f5c 100644
--- a/model.py
+++ b/model.py
@@ -89,6 +89,10 @@ class Model(object):
         client.session = sessionid
         session.clients.append(client.id)
 
+    @ApiMethod
+    async def draw(self, clientid):
+        await self.send_state(clientid)
+
     async def send_lobby_view(self, clientid):
         data = {}
         client = self.clients[clientid]
@@ -108,9 +112,11 @@ class Model(object):
     async def send_session_view(self, clientid):
         data = {}
         client = self.clients[clientid]
+        session = self.sessions[client.session]
 
         data["view"] = "session"
         data["username"] = client.name
+        data["session"] = session.to_json()
 
         for socket in self.sockets[clientid]:
             await socket.send_json(data)
diff --git a/static/lobby.html b/static/lobby.html
new file mode 100644
index 0000000..c0ee059
--- /dev/null
+++ b/static/lobby.html
@@ -0,0 +1,21 @@
+<span id="greeting"></span><br>
+<div id="username-area">
+    <span id="greeting">Hello, </span>
+    <span id="label-username">_</span>
+    <input id="input-set-username" style="display: none;">
+    <button id="btn-edit-username">🖉</button>
+    <button id="btn-discard-username" style="display: none;">✘</button>
+    <button id="btn-confirm-username" style="display: none;">✔</button>
+</div>
+<br>
+
+
+<span>Available sessions</span><br>
+<div id="sessions"></div><br>
+<br>
+<br>
+
+<span>Create Session</span><br>
+<input id="input-create-session">
+<button id="btn-create-session">+</button>
+<br>
diff --git a/static/renderer.js b/static/renderer.js
index 0b9e695..b26aecc 100644
--- a/static/renderer.js
+++ b/static/renderer.js
@@ -2,10 +2,74 @@ const ws_url = new URL('ws', window.location.href);
 ws_url.protocol = ws_url.protocol.replace('http', 'ws');
 const ws = new WebSocket(ws_url.href);
 
+function draw_session(msg) {
+    document.getElementById("btn-leave-session").onclick = async (e) => await fetch('api/leave_session', {
+                        method: 'POST', body: JSON.stringify({})
+                    });
+    var session = msg.session;
+    document.getElementById("session").innerText = session["name"];
+    document.getElementById('label-username').innerText = msg.username;
+}
+
 function draw_lobby(msg) {
     if (msg.hasOwnProperty('username')) {
         document.getElementById('label-username').innerText = msg.username;
     }
+
+    // username management
+    document.getElementById("btn-edit-username").onclick = async function (e) {
+        document.getElementById("btn-confirm-username").style.display = "inline-block";
+        document.getElementById("btn-discard-username").style.display = "inline-block";
+        document.getElementById("btn-edit-username").style.display = "none";
+        document.getElementById("label-username").style.display = "none";
+        document.getElementById("input-set-username").style.display = "inline-block";
+        document.getElementById("input-set-username").value = document.getElementById("label-username").innerText;
+    }
+    document.getElementById("btn-discard-username").onclick = async function (e) {
+        document.getElementById("btn-confirm-username").style.display = "none";
+        document.getElementById("btn-discard-username").style.display = "none";
+        document.getElementById("btn-edit-username").style.display = "inline-block";
+        document.getElementById("label-username").style.display = "inline-block";
+        document.getElementById("input-set-username").style.display = "none";
+    }
+    document.getElementById("btn-confirm-username").onclick = async function (e) {
+        var text = document.getElementById("input-set-username").value;
+        if (Boolean(text)) {
+            let data = {"username": text};
+
+            await fetch('api/change_username', {
+                method: 'POST',
+                body: JSON.stringify(data),
+            })
+            document.getElementById("btn-confirm-username").style.display = "none";
+            document.getElementById("btn-discard-username").style.display = "none";
+            document.getElementById("btn-edit-username").style.display = "inline-block";
+            document.getElementById("label-username").style.display = "inline-block";
+            document.getElementById("input-set-username").style.display = "none";
+        } else {
+            console.log("cant be empty");
+            document.getElementById("btn-confirm-username").style.display = "none";
+            document.getElementById("btn-discard-username").style.display = "none";
+            document.getElementById("btn-edit-username").style.display = "inline-block";
+            document.getElementById("label-username").style.display = "inline-block";
+            document.getElementById("input-set-username").style.display = "none";
+        }
+    }
+
+
+
+    document.getElementById("btn-create-session").onclick = async function (e) {
+        var text = document.getElementById("input-create-session").value;
+        if (Boolean(text)) {
+            let data = {"sessionname": text};
+
+            await fetch('api/create_session', {
+                method: 'POST',
+                body: JSON.stringify(data),
+            })
+        }
+    };
+
     if (msg.hasOwnProperty('sessions')) {
         const sessions = document.getElementById('sessions');
 
@@ -84,13 +148,12 @@ function draw_lobby(msg) {
                 tehsession.appendChild(btnjoin);
             }
             
-            all_sessions.appendChild(tehsession);
+            sessions.appendChild(tehsession);
         })
         }
-        */
 }
 
-ws.onmessage = function(event) {
+ws.onmessage = async function(event) {
     const msg = JSON.parse(event.data);
 
     console.log(msg);
@@ -100,8 +163,12 @@ ws.onmessage = function(event) {
         view = msg.view;
     }
     if (view == "lobby") {
+        response = await fetch('../static/lobby.html')
+        document.getElementById("content").innerHTML = await response.text();
         draw_lobby(msg);
     } else if (view == "session") {
-        console.log("cant draw session yet");
+        response = await fetch('../static/session.html')
+        document.getElementById("content").innerHTML = await response.text();
+        draw_session(msg);
     }
 };
diff --git a/static/session.html b/static/session.html
new file mode 100644
index 0000000..a87d060
--- /dev/null
+++ b/static/session.html
@@ -0,0 +1,3 @@
+Welcome to <b id="session"></b>, <span id="label-username"></span>
+<br><br>
+<button id="btn-leave-session">Leave Session</button>
diff --git a/tehsession.json b/tehsession.json
index 3f8f43f..9611f49 100644
--- a/tehsession.json
+++ b/tehsession.json
@@ -1 +1 @@
-{"sessions": {"2b7jrklcn6eulwbw": {"id": "2b7jrklcn6eulwbw", "name": "die neue session", "clients": ["bkrqopf5j6q3tpta"], "owner": "bkrqopf5j6q3tpta"}}, "clients": {"bkrqopf5j6q3tpta": {"id": "bkrqopf5j6q3tpta", "name": "dominic", "session": ""}}}
\ No newline at end of file
+{"sessions": {"2b7jrklcn6eulwbw": {"id": "2b7jrklcn6eulwbw", "name": "die neue session", "clients": ["fjvkc3whtpbi7oo2", "bkrqopf5j6q3tpta"], "owner": "bkrqopf5j6q3tpta"}, "omg2h5imnh5nk42i": {"id": "omg2h5imnh5nk42i", "name": "meine sess", "clients": [], "owner": "bkrqopf5j6q3tpta"}, "vc7bn2t76hmjexjz": {"id": "vc7bn2t76hmjexjz", "name": "meine", "clients": [], "owner": "bkrqopf5j6q3tpta"}, "csbbc4gb4lc3jxby": {"id": "csbbc4gb4lc3jxby", "name": "meine", "clients": [], "owner": "bkrqopf5j6q3tpta"}, "jjfqw3itbsh3ylna": {"id": "jjfqw3itbsh3ylna", "name": "uiae", "clients": [], "owner": "fjvkc3whtpbi7oo2"}, "bjgdd4qfpzmnhfka": {"id": "bjgdd4qfpzmnhfka", "name": "eueue", "clients": [], "owner": "bkrqopf5j6q3tpta"}}, "clients": {"bkrqopf5j6q3tpta": {"id": "bkrqopf5j6q3tpta", "name": "dominic", "session": ""}, "cho2o2ntflm4mq3u": {"id": "cho2o2ntflm4mq3u", "name": "uiae", "session": ""}, "fjvkc3whtpbi7oo2": {"id": "fjvkc3whtpbi7oo2", "name": "Me", "session": "2b7jrklcn6eulwbw"}}}
\ No newline at end of file
diff --git a/ui.html b/ui.html
index 6471659..f0782e8 100644
--- a/ui.html
+++ b/ui.html
@@ -1,109 +1,29 @@
 <!DOCTYPE html>
 <html>
 
-<head>
-    <title>leafblade Minecraft Server</title>
-    <meta charset="UTF-8"/>
-    <style>
+    <head>
+        <title>leafblade Minecraft Server</title>
+        <meta charset="UTF-8"/>
+        <style>
 div {
     border: 1px solid;
     margin: 5px;
 }
-</style>
-</head>
+        </style>
+    </head>
 
-<body>
-<span id="greeting"></span><br>
-<div id="username-area">
-    <span id="greeting">Hello, </span>
-    <span id="label-username">_</span>
-    <input id="input-set-username" style="display: none;">
-    <button id="btn-edit-username">🖉</button>
-    <button id="btn-discard-username" style="display: none;">✘</button>
-    <button id="btn-confirm-username" style="display: none;">✔</button>
-</div>
-<br>
+    <body>
+        <div id="content">
+        </div>
+    </body>
 
-<div>
-<span>Active Session:</span><span id="active-session">None</span>
-<button id="btn-leave-session">Leave Session</button>
-<br>
-</div>
+    <script src="../static/renderer.js"></script>
 
-<br>
-
-<span>Available sessions</span><br>
-<div id="sessions"></div><br>
-<br>
-<br>
-
-<span>Create Session</span><br>
-<input id="input-create-session">
-<button id="btn-create-session">+</button>
-<br>
-<!--<button id="btn_create_session">Create session</button>
-<br><br><br>
--->
-
-<script src="../static/renderer.js"></script>
-<script>
-    // username management
-    document.getElementById("btn-edit-username").onclick = async function (e) {
-        document.getElementById("btn-confirm-username").style.display = "inline-block";
-        document.getElementById("btn-discard-username").style.display = "inline-block";
-        document.getElementById("btn-edit-username").style.display = "none";
-        document.getElementById("label-username").style.display = "none";
-        document.getElementById("input-set-username").style.display = "inline-block";
-        document.getElementById("input-set-username").value = document.getElementById("label-username").innerText;
-    }
-    document.getElementById("btn-discard-username").onclick = async function (e) {
-        document.getElementById("btn-confirm-username").style.display = "none";
-        document.getElementById("btn-discard-username").style.display = "none";
-        document.getElementById("btn-edit-username").style.display = "inline-block";
-        document.getElementById("label-username").style.display = "inline-block";
-        document.getElementById("input-set-username").style.display = "none";
-    }
-    document.getElementById("btn-confirm-username").onclick = async function (e) {
-        var text = document.getElementById("input-set-username").value;
-        if (Boolean(text)) {
-            let data = {"username": text};
-
-            await fetch('api/change_username', {
-                method: 'POST',
-                body: JSON.stringify(data),
-            })
-            document.getElementById("btn-confirm-username").style.display = "none";
-            document.getElementById("btn-discard-username").style.display = "none";
-            document.getElementById("btn-edit-username").style.display = "inline-block";
-            document.getElementById("label-username").style.display = "inline-block";
-            document.getElementById("input-set-username").style.display = "none";
-        } else {
-            console.log("cant be empty");
-            document.getElementById("btn-confirm-username").style.display = "none";
-            document.getElementById("btn-discard-username").style.display = "none";
-            document.getElementById("btn-edit-username").style.display = "inline-block";
-            document.getElementById("label-username").style.display = "inline-block";
-            document.getElementById("input-set-username").style.display = "none";
-        }
-    }
-    
-    document.getElementById("btn-leave-session").onclick = async (e) => await fetch('api/leave_session', {
-                        method: 'POST', body: JSON.stringify({})
-                    });
-
-
-    document.getElementById("btn-create-session").onclick = async function (e) {
-        var text = document.getElementById("input-create-session").value;
-        if (Boolean(text)) {
-            let data = {"sessionname": text};
-
-            await fetch('api/create_session', {
-                method: 'POST',
-                body: JSON.stringify(data),
-            })
-        }
-    };
-</script>
-</body>
+    <script>
+        fetch('api/draw', {
+            method: 'POST',
+            body: JSON.stringify({}),
+        });
+    </script>
 
 </html>